@layer components{
.hero-logo{
--mark-size:var(--hero-logo-h);
position:absolute;
top:var(--hero-logo-top);
left:50%;
z-index:2;
display:inline-flex;
align-items:center;
gap:10px;
color:var(--c-blue);
opacity:0;
pointer-events:none;
transform:translate(-50%,-50%);
transition:top .72s var(--ease-out),opacity .42s ease,transform .72s var(--ease-out);
will-change:top,opacity,transform;
}
.hero-logo>img,.hero-logo>.site-logo-mark,.hero-logo>.site-logo-word{
flex:0 0 auto;
}
.hero-ico{
width:var(--hero-logo-h);
height:var(--hero-logo-h);
}
.hero-word{
width:174px;
height:25px;
opacity:0;
transform:translateX(-8px);
transition:opacity .44s ease .2s,transform .44s var(--ease-out) .2s;
}
.site-ready .hero-logo{
top:var(--hero-logo-top);
opacity:1;
transform:translate(-50%,-50%);
}
.site-ready .hero-word{
opacity:1;
transform:translateX(0);
}
.home-category-matrix{
position:absolute;
top:var(--matrix-top,calc(var(--frame-top-y) + 48px));
left:50%;
z-index:1;
display:grid;
grid-template-columns:repeat(var(--matrix-columns,7),minmax(0,1fr));
grid-template-rows:repeat(var(--matrix-rows,1),minmax(0,1fr));
column-gap:clamp(12px,1.8vw,28px);
row-gap:var(--matrix-row-gap,0px);
width:var(--matrix-width,min(980px,70vw));
max-width:70vw;
height:var(--matrix-height,106px);
pointer-events:none;
opacity:0;
transform:translateX(-50%);
transition:opacity .5s ease;
}
.site-ready .home-category-matrix{
opacity:1;
}
.is-searching .home-category-matrix{
opacity:0;
pointer-events:none;
}
.home-category-matrix__cell{
--matrix-enter-x:0px;
--matrix-enter-y:10px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-width:0;
min-height:0;
pointer-events:none;
opacity:0;
transform:translate3d(var(--matrix-enter-x),var(--matrix-enter-y),0) scale(.94);
transition:opacity .56s ease,transform .62s var(--ease-out),filter .56s ease;
filter:blur(.45px) saturate(.94);
will-change:opacity,transform,filter;
}
.home-category-matrix__cell.is-visible{
pointer-events:auto;
opacity:1;
transform:translate3d(0,0,0) scale(1);
filter:blur(0) saturate(1);
}
.home-category-matrix__cell.is-visible:hover,
.home-category-matrix__cell.is-visible:focus-visible{
opacity:1;
transform:translate3d(0,0,0) scale(1);
filter:saturate(1.12) contrast(1.025);
z-index:3;
}
.home-category-matrix__cell.is-leaving{
pointer-events:none;
opacity:0;
transform:translate3d(0,7px,0) scale(.92);
filter:blur(.55px) saturate(.9);
}
.home-category-matrix__image{
position:absolute;
inset:50% auto auto 50%;
display:block;
width:min(106px,90%);
height:min(106px,90%);
object-fit:contain;
object-position:center center;
border-radius:var(--radius-card);
opacity:1;
transform:translate(-50%,-50%) scale(1);
filter:drop-shadow(0 8px 18px rgb(var(--rgb-primary) / .08));
transition:opacity .52s ease,transform .58s var(--ease-out),filter .52s ease;
will-change:opacity,transform,filter;
}
.home-category-matrix__image.is-next{
opacity:0;
transform:translate(-50%,-50%) scale(.93);
filter:blur(.45px) drop-shadow(0 8px 18px rgb(var(--rgb-primary) / .06));
}
.home-category-matrix__cell.is-crossfading .home-category-matrix__image:not(.is-next){
opacity:0;
transform:translate(-50%,-50%) scale(.95);
filter:blur(.35px) drop-shadow(0 8px 18px rgb(var(--rgb-primary) / .06));
}
.home-category-matrix__cell.is-crossfading .home-category-matrix__image.is-next{
opacity:1;
transform:translate(-50%,-50%) scale(1);
filter:blur(0) drop-shadow(0 8px 18px rgb(var(--rgb-primary) / .08));
}
.home-category-matrix__cell.is-loading{
pointer-events:none;
}
@media (max-width:860px){
.home-category-matrix{
top:var(--matrix-top,calc(var(--frame-top-y) + 18px));
grid-template-columns:repeat(3,minmax(0,1fr));
grid-template-rows:repeat(2,minmax(0,1fr));
column-gap:clamp(18px,6vw,36px);
row-gap:var(--matrix-row-gap,8px);
width:var(--matrix-width,min(360px,calc(100vw - 50px)));
max-width:calc(100vw - 50px);
height:var(--matrix-height,156px);
}
.home-category-matrix__image{
width:min(74px,90%);
height:min(74px,90%);
border-radius:var(--radius-md);
}
}
@media (prefers-reduced-motion:reduce){
.home-category-matrix__cell,
.home-category-matrix__image{
transition:none;
filter:none;
}
.home-category-matrix__cell,
.home-category-matrix__cell.is-visible,
.home-category-matrix__image,
.home-category-matrix__image.is-next{
transform:none;
}
.home-category-matrix__image{
position:static;
}
}

.search{
position:absolute;
top:var(--search-top);
left:50%;
z-index:8;
display:flex;
align-items:center;
flex-wrap:nowrap;
width:var(--search-w);
max-width:var(--search-max);
min-width:var(--search-min-w);
min-height:0;
height:auto;
padding:var(--search-pad-y) var(--search-pad-x);
border:.5px solid var(--n-30);
border-radius:var(--search-radius);
background:var(--n-00);
box-shadow:var(--search-glow);
backdrop-filter:none;
overflow:visible;
opacity:0;
pointer-events:none;
transform:translate(-50%,18px);
transition:top .62s var(--ease-out),width .42s var(--ease-out),opacity .48s var(--ease-out),transform .58s var(--ease-out),border-color var(--time-fast) ease,box-shadow var(--time-fast) ease;
will-change:opacity,transform,top;
}
.site-ready .search{
opacity:1;
pointer-events:auto;
transform:translate(-50%,0);
transition-delay:.34s;
}
.search:focus-within{
border-color:var(--c-blue-24);
box-shadow:var(--search-focus-glow);
}
.select{
position:relative;
display:block;
flex:0 0 var(--search-select-w);
width:var(--search-select-w);
height:var(--search-select-h);
min-width:0;
margin:0 var(--space-6) 0 0;
border-radius:var(--radius-2xs);
background:var(--n-10);
isolation:isolate;
}
.select.open{
z-index:90;
}

body.is-catalog-menu-active.search-static-route .search,
body.is-search-tools-menu-active.search-static-route .search-tools{
z-index:130!important;
}
body:is(.is-catalog-menu-active,.is-search-tools-menu-active) .crumbs{
z-index:12!important;
pointer-events:none!important;
}
body:is(.is-catalog-menu-active,.is-search-tools-menu-active) .crumb-menu{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
.select:not(.has-choice)::after{
content:"";
position:absolute;
z-index:-1;
animation:catalogPulse 3.8s var(--ease-out) infinite;
pointer-events:none;
}
.select-main{
position:relative;
display:grid;
grid-template-columns:18px minmax(0,1fr) 18px;
align-items:center;
justify-content:center;
width:100%;
height:100%;
min-height:0;
gap:9px;
padding:0 10px 0 var(--space-4);
border-radius:var(--radius-2xs);
background:transparent;
color:var(--n-80);
text-align:left;
}
.select-main span,.select-menu button span{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.select-main span{
display:block;
min-width:0;
padding-right:0;
color:var(--n-56);
font-size:var(--text-md);
font-weight:440;
line-height:var(--search-select-h);
letter-spacing:-.01em;
}
.select:not(.has-choice) .select-main span{
color:var(--c-blue);
font-weight:700;
}
.select-main svg{
width:18px;
height:18px;
color:var(--n-40);
transition:color .2s ease-in-out,transform .2s ease-in-out;
}
.select-catalog-ico{
color:var(--c-blue)!important;
transform:none!important;
}
.select-main:hover .select-chevron,.select.open .select-main .select-chevron{
color:var(--c-blue);
transform:rotate(180deg);
}
.select-menu{
position:absolute;
top:-10px;
left:-12px;
z-index:34;
display:block;
width:var(--catalog-menu-w);
height:min(var(--catalog-menu-h),calc(100vh - 40px));
overflow-y:auto;
padding:10px 0;
border:.5px solid var(--n-30);
border-radius:var(--search-radius);
background:var(--n-00);
box-shadow:0 4px 12px rgb(var(--rgb-ink) / .04),0 1px 4px rgb(var(--rgb-ink) / .10);
backdrop-filter:none;
opacity:0;
pointer-events:none;
transform:translateY(4px);
transition:opacity .18s ease,transform .18s var(--ease-out);
}
.select.open .select-menu{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}
.select-menu button{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:var(--space-3);
width:calc(100% - 28px);
min-height:var(--search-select-h);
margin:0 14px;
padding:0 34px 0 14px;
border-radius:var(--radius-compact);
color:var(--n-80);
text-align:left;
font-size:var(--text-md);
font-weight:var(--w-medium);
line-height:1.05;
transition:color .2s ease-in-out,background .2s ease-in-out,transform .2s var(--ease-out);
}
.select-menu button::after{
content:"";
position:absolute;
right:14px;
bottom:19px;
width:6px;
height:2px;
border-radius:0;
background:var(--n-40);
transform-origin:right center;
transition:width .2s ease-in-out,background .2s ease-in-out;
}
.select-menu button:hover{
background:var(--n-10);
}
.select-menu button:hover::after,.select-menu button.active::after{
width:12px;
background:var(--c-blue);
}
.select-menu button.active{
color:var(--c-blue);
}
.select-menu [data-root-category]{
grid-template-columns:22px minmax(0,1fr) auto;
padding-left:var(--space-3);
}
.select-menu [data-root-category] .root-cat-ico{
width:18px;
height:18px;
color:var(--c-blue);
opacity:.84;
transition:opacity .2s ease,transform .22s var(--ease-out);
}
.select-menu [data-root-category]:hover .root-cat-ico,.select-menu [data-root-category].active .root-cat-ico{
opacity:1;
}
.select-flyout{
position:absolute;
top:-10px;
z-index:28;
display:block;
min-width:560px;
height:min(var(--catalog-menu-h),calc(100vh - 40px));
overflow:auto;
padding:calc(18px + var(--search-select-h)) 20px 20px calc(var(--catalog-overlap) + 22px);
border:.5px solid var(--n-30);
border-left-color:rgb(var(--rgb-primary) / .13);
border-radius:0 var(--search-radius) var(--search-radius) 0;
background:rgb(var(--rgb-surface) / .985);
box-shadow:8px 12px 28px rgb(var(--rgb-ink) / .055),0 1px 5px rgb(var(--rgb-ink) / .08);
opacity:0;
pointer-events:none;
transform:translateX(-16px);
transform-origin:left top;
transition:opacity .2s ease,transform .28s var(--ease-out);
}
.select.flyout-open .select-flyout{
opacity:1;
pointer-events:auto;
transform:translateX(0);
}
.flyout-title{
display:flex;
align-items:baseline;
gap:var(--space-4);
margin:0 0 15px;
color:var(--n-80);
line-height:var(--lh-title);
}
.flyout-title small{
color:var(--n-50);
font-size:var(--text-3xs);
font-weight:700;
letter-spacing:.01em;
}
.flyout-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
}
.flyout-group{
min-width:0;
opacity:0;
transform:translateX(-10px);
animation:flyoutLine .38s var(--ease-out) forwards;
animation-delay:calc(var(--i,0) * 34ms);
}
.flyout-group>button,.flyout-group li button{
display:grid;
align-items:center;
width:100%;
color:var(--n-70);
text-align:left;
font-size:12.4px;
letter-spacing:-.012em;
}
.flyout-group>button{
color:var(--n-80);
font-weight:700;
}
.flyout-group>button::before{
grid-column:1;
color:rgb(var(--rgb-muted) / .58);
}
.flyout-group>button span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
.flyout-group>button small{
justify-self:end;
}
.flyout-group button:hover{
color:var(--c-blue);
transform:translateX(4px);
}
.flyout-group small{
white-space:nowrap;
}
.sep,.cart-line{
display:inline-block;
flex:0 0 auto;
width:1px;
height:var(--search-sep-h);
background:var(--n-30);
}
.cart-line{
margin-left:var(--space-4);
}
.query{
position:relative;
flex:1 1 auto;
display:flex;
align-items:center;
min-width:0;
margin:0 0 0 var(--space-6);
padding-left:0;
gap:0;
}
.query svg{
flex:0 0 auto;
width:var(--icon-lg);
height:var(--icon-lg);
color:var(--n-40);
transition:color .2s ease-in-out;
}
.search:focus-within .query svg{
color:var(--c-blue);
}
.query input{
flex:1 1 auto;
width:100%;
height:var(--search-select-h);
min-height:0;
padding:0 0 0 var(--space-4);
border:0;
outline:0;
background:var(--n-00);
color:var(--n-80);
font-size:var(--text-lg);
font-weight:400;
line-height:var(--search-select-h);
}
.query input::placeholder{
color:var(--n-50);
}
.query input:focus{
box-shadow:none;
border-color:transparent;
}
.query input::-webkit-search-decoration,.query input::-webkit-search-cancel-button,.query input::-webkit-search-results-button,.query input::-webkit-search-results-decoration{
display:none;
-webkit-appearance:none;
}
.search-clear{
flex:0 0 auto;
display:grid;
place-items:center;
width:28px;
height:28px;
border-radius:var(--radius-xs);
color:var(--n-46);
opacity:0;
pointer-events:none;
transition:opacity .18s ease,transform .22s var(--ease-out),color .18s ease,background .18s ease;
}
.query.has-value .search-clear{
opacity:1;
pointer-events:auto;
transform:scale(1);
}
.search-clear:hover{
color:var(--n-68);
background:rgb(var(--rgb-muted) / .10);
}
.search-clear svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.search-ai-orb{
position:relative;
flex:0 0 0;
display:grid;
place-items:center;
width:0;
height:34px;
margin-left:0;
border-radius:var(--radius-pill);
opacity:0;
pointer-events:none;
transform:scale(.72);
transition:width .22s var(--ease-out),opacity .18s ease,transform .22s var(--ease-out),filter .18s ease;
}
.query.has-ai-orb .search-ai-orb{
flex-basis:34px;
width:34px;
opacity:1;
pointer-events:auto;
transform:scale(1);
}
.search-ai-orb>span{
position:relative;
display:block;
width:30px;
height:30px;
border-radius:50%;
background:radial-gradient(circle at 32% 28%,rgb(var(--rgb-surface) / .96) 0 10%,rgb(var(--rgb-primary) / .92) 26%,rgb(var(--rgb-primary) / .95) 48%,rgb(var(--rgb-primary) / .92) 72%,rgb(var(--rgb-violet) / .78) 100%);
box-shadow:0 10px 26px rgb(var(--rgb-primary) / .26),inset 0 0 0 .5px rgb(var(--rgb-surface) / .46);
}
.search-ai-orb>span::before,.search-ai-orb>span::after,.search-ai-orb i{
content:"";
position:absolute;
pointer-events:none;
}
.search-ai-orb>span::before{
inset:-18%;
border-radius:50%;
background:conic-gradient(from 140deg,rgb(var(--rgb-surface) / 0),rgb(var(--rgb-surface) / .56),rgb(var(--rgb-cyan) / .28),rgb(var(--rgb-surface) / 0));
mix-blend-mode:screen;
}
.search-ai-orb>span::after{
inset:24%;
border-radius:50%;
background:rgb(var(--rgb-surface) / .36);
filter:blur(5px);
}
.search-ai-orb i{
inset:auto;
width:42%;
height:42%;
border-radius:45% 55% 52% 48%;
background:rgb(var(--rgb-surface) / .36);
filter:blur(2px);
mix-blend-mode:screen;
}
.search-ai-orb i:nth-child(1){left:12%;top:20%;}
.search-ai-orb i:nth-child(2){right:10%;top:22%;}
.search-ai-orb i:nth-child(3){left:24%;bottom:10%;}
.search-ai-orb i:nth-child(4){right:22%;bottom:14%;}
.cart{
position:relative;
flex:0 0 auto;
display:grid;
place-items:center;
width:var(--search-cart-size);
height:var(--search-cart-size);
margin-left:var(--space-3);
border-radius:var(--radius-xs);
background:transparent;
color:var(--c-blue);
box-shadow:none;
transition:background .2s ease,transform .2s ease;
}
.cart:hover{
background:var(--n-10);
transform:none;
box-shadow:none;
}
.cart svg{
width:var(--icon-lg);
height:var(--icon-lg);
fill:currentColor;
stroke:none;
}
.cart span:not([hidden]){
position:absolute;
top:-5px;
right:-5px;
width:20px;
min-width:20px;
height:20px;
display:grid;
place-items:center;
padding:0;
border:2px solid var(--n-00);
border-radius:50%;
background:var(--c-danger);
color:var(--n-00);
box-shadow:0 3px 8px rgb(var(--rgb-danger) / .20);
font-size:var(--text-micro);
font-weight:700;
line-height:var(--lh-solid);
letter-spacing:-.035em;
font-variant-numeric:tabular-nums;
}
.wholesale{
position:absolute;
left:50%;
z-index:6;
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
width:var(--search-w);
max-width:var(--search-max);
min-width:var(--search-min-w);
height:30px;
margin:0;
padding:0 calc(var(--search-pad-x) + var(--search-cart-size) + var(--space-3) + 1px) 0 0;
overflow:hidden;
color:var(--c-blue);
font-size:var(--text-sm);
font-weight:400;
line-height:var(--lh-solid);
white-space:nowrap;
text-decoration:none!important;
border-bottom:0!important;
opacity:0;
pointer-events:none;
transform:translate(-50%,3px);
transform-origin:right center;
transition:top .62s var(--ease-out),opacity .38s var(--ease-out),transform .42s var(--ease-out),max-width .34s var(--ease-out);
}
.site-ready .wholesale{
opacity:1;
pointer-events:auto;
transform:translate(-50%,0);
transition-delay:.50s;
}
.home-brand-carousel{
position:absolute;
top:calc(var(--search-top) + 122px);
left:50%;
z-index:5;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
width:min(calc(var(--search-w) * .70),820px);
max-width:calc(var(--search-w) * .70);
min-width:0;
opacity:0;
pointer-events:none;
transform:translate(-50%,12px);
transition:opacity .48s ease,transform .58s var(--ease-out),top .62s var(--ease-out);
}
.site-ready .home-brand-carousel.is-ready{
opacity:1;
pointer-events:auto;
transform:translate(-50%,0);
transition-delay:.62s;
}
.home-intro{
position:absolute;
top:calc(var(--search-top) + 206px);
left:50%;
z-index:4;
width:min(calc(var(--search-w) * .56),650px);
max-width:calc(var(--search-w) * .56);
margin:0;
color:var(--n-70);
font-size:15px;
font-weight:400;
line-height:1.58;
letter-spacing:-.01em;
text-align:center;
opacity:0;
pointer-events:none;
transform:translate(-50%,10px);
transition:opacity .44s ease,transform .54s var(--ease-out),top .62s var(--ease-out);
}
.site-ready .home-intro{
opacity:.94;
pointer-events:auto;
transform:translate(-50%,0);
transition-delay:.72s;
}
.home-intro a{
display:inline-flex;
align-items:center;
color:var(--c-blue);
font-weight:400;
text-decoration:none;
border-bottom:1px solid var(--c-link-border);
transition:color var(--time-fast) ease,border-color var(--time-fast) ease;
}
.home-intro a:hover,.home-intro a:focus-visible{
color:var(--c-link-hover);
border-bottom-color:var(--c-link-hover);
text-decoration:none;}
.is-searching .home-intro{
opacity:0!important;
pointer-events:none!important;
transform:translate(-50%,-8px)!important;
transition-delay:0s!important;
}
.home-brand-viewport{
width:100%;
margin:-18px 0 -16px;
padding:18px 0 16px;
overflow:hidden;
user-select:none;
}
.home-brand-carousel.is-dragging{
cursor:grabbing;
}
.home-brand-carousel.is-paused .home-brand-main{
box-shadow:0 12px 28px rgb(var(--rgb-primary) / .08);
}
.home-brand-carousel.is-dragging .home-brand-main,.home-brand-carousel.is-dragging .home-brand-page{
pointer-events:none;
}
.home-brand-carousel.is-dragging .home-brand-track,.home-brand-track.is-dragging{
transition:none!important;
}

.home-brand-track{
display:flex;
width:100%;
transition:transform .54s var(--ease-out);
will-change:transform;
}
.home-brand-slide{
--home-brand-cols:5;
--home-brand-slide-items:5;
--home-brand-card-w:82px;
--home-brand-gap:28px;
flex:0 0 100%;
display:grid;
grid-template-columns:repeat(var(--home-brand-slide-items),minmax(0,var(--home-brand-card-w)));
justify-content:center;
column-gap:var(--home-brand-gap);
row-gap:0;
min-width:0;
}
.home-brand-card{
position:relative;
min-width:0;
height:38px;
}
.home-brand-main{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
min-width:0;
padding:4px 16px 4px 7px;
border:0;
border-radius:var(--radius-control);
background:rgb(var(--rgb-surface) / .72);
box-shadow:0 8px 22px rgb(var(--rgb-ink) / .06);
color:var(--n-80);
transition:background var(--time-fast) ease,box-shadow var(--time-fast) ease,transform var(--time-fast) var(--ease-out);
}
.home-brand-main:hover,.home-brand-main:focus-visible{
background:rgb(var(--rgb-surface) / .94);
box-shadow:0 12px 26px rgb(var(--rgb-primary) / .10);
scale:1.02;
}
.home-brand-visual{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
min-width:0;
overflow:visible;
}
.home-brand-visual img{
display:block;
width:100%;
max-width:100%;
height:100%;
max-height:24px;
object-fit:contain;
}
.home-brand-swatch{
display:block;
width:64%;
height:12px;
border-radius:var(--radius-3xs);
background:var(--brand-swatch,var(--c-surface-soft));
}
.home-brand-page{
position:absolute;
top:5px;
right:5px;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:var(--radius-compact);
color:var(--c-blue);
background:rgb(var(--rgb-surface) / .68);
opacity:.62;
transition:opacity var(--time-fast) ease,background var(--time-fast) ease,color var(--time-fast) ease;
}
.home-brand-page svg{
width:13px;
height:13px;
}
.home-brand-page:hover,.home-brand-page:focus-visible{
opacity:1;
background:var(--c-blue);
color:var(--c-surface);
}
.home-brand-dots{
--home-brand-dot-step:18px;
display:flex;
align-items:center;
justify-content:center;
width:calc(var(--home-brand-dot-step) * 7 + 32px);
min-height:28px;
padding:2px 16px;
}
.home-brand-dots-window{
position:relative;
width:calc(var(--home-brand-dot-step) * 7);
height:26px;
overflow:hidden;
}
.home-brand-dot-track{
position:absolute;
top:0;
left:0;
display:flex;
align-items:center;
height:26px;
transform:translateX(0);
transition:transform .36s cubic-bezier(.2,.78,.2,1);
will-change:transform;
}
.home-brand-dot-track.is-dot-instant{
transition:none!important;
}
.home-brand-dot{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 var(--home-brand-dot-step);
width:var(--home-brand-dot-step);
height:26px;
padding:0;
border:0;
border-radius:var(--radius-pill);
background:transparent;
cursor:pointer;
touch-action:manipulation;
}
.home-brand-dot>span{
position:relative;
display:block;
width:0;
height:0;
border-radius:var(--radius-pill);
background:rgb(var(--rgb-muted) / .46);
opacity:0;
transform:scale(0);
transition:width .34s cubic-bezier(.2,.78,.2,1),height .34s cubic-bezier(.2,.78,.2,1),background var(--time-fast) ease,opacity var(--time-fast) ease,transform .34s cubic-bezier(.2,.78,.2,1);
}
.home-brand-dot>span::before,
.home-brand-dot>span::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:2px;
height:0;
border-radius:2px;
background:var(--c-blue);
opacity:0;
transform:translate(-50%,-50%) scaleY(.5);
transition:height .24s cubic-bezier(.2,.78,.2,1),opacity var(--time-fast) ease,transform .24s cubic-bezier(.2,.78,.2,1),left .24s cubic-bezier(.2,.78,.2,1);
}
.home-brand-dot[data-home-brand-dot-rank="1"]>span{
width:5px;
height:5px;
opacity:.64;
transform:scale(1);
}
.home-brand-dot[data-home-brand-dot-rank="2"]>span{
width:3px;
height:3px;
opacity:.38;
transform:scale(1);
}
.home-brand-dot[data-home-brand-dot-rank="3"]>span{
width:0;
height:0;
opacity:0;
transform:scale(0);
}
.home-brand-dot.is-active>span{
width:7px;
height:7px;
background:rgb(var(--rgb-muted) / .58);
opacity:.92;
transform:scale(1);
}
.home-brand-dot:hover>span,
.home-brand-dot:focus-visible>span{
background:var(--c-blue);
opacity:1;
transform:scale(1.12);
}
.home-brand-carousel.is-paused .home-brand-dot.is-active>span{
width:9px;
height:9px;
background:transparent;
opacity:1;
transform:scale(1);
}
.home-brand-carousel.is-paused .home-brand-dot.is-active>span::before,
.home-brand-carousel.is-paused .home-brand-dot.is-active>span::after{
height:9px;
opacity:1;
transform:translate(-50%,-50%) scaleY(1);
}
.home-brand-carousel.is-paused .home-brand-dot.is-active>span::before{left:37%;}
.home-brand-carousel.is-paused .home-brand-dot.is-active>span::after{left:63%;}
.home-brand-dot:focus-visible{
outline:none;
}
.home-brand-dot:focus-visible>span{
box-shadow:0 0 0 4px rgb(var(--rgb-primary) / .12);
}
.is-searching .home-brand-carousel{
opacity:0!important;
pointer-events:none!important;
transform:translate(-50%,-8px)!important;
transition-delay:0s!important;
}
@media (prefers-reduced-motion:reduce){
.home-brand-track,.home-brand-dot-track,.home-brand-carousel,.home-brand-main,.home-brand-dot,.home-brand-dot>span{
transition:none!important;
}
}

.wholesale svg{
fill:currentColor;
stroke:none;
}
.wholesale{
top:calc(var(--search-top) + 68px);
}
.wholesale svg{
width:16px;
height:16px;
transform:translateY(-2px);
transform-origin:center;
}
.ajax span{
position:relative;
display:inline-block;
padding-bottom:3px;
}
.ajax span::before,.ajax span::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:1px;
pointer-events:none;
}
.ajax span::before{
background-image:radial-gradient(circle,currentColor .8px,transparent .95px);
background-size:5px 1px;
background-repeat:repeat-x;
opacity:.56;
}
.ajax span::after{
background:currentColor;
opacity:.82;
transform:scaleX(0);
transform-origin:left center;
transition:transform .28s var(--ease-out);
}
.ajax:hover span::after,.ajax:focus-visible span::after{
transform:scaleX(1);
}
.search-tools{
position:absolute;
top:calc(34% + 154px);
left:50%;
z-index:16;
display:grid;
grid-template-columns:1fr;
gap:8px;
width:var(--search-w);
min-width:var(--search-min-w);
opacity:0;
pointer-events:none;
transform:translate(-50%,12px);
transition:opacity var(--time) ease,transform var(--time) var(--ease-out),top .62s var(--ease-out);
}
.tool-row{
display:flex;
align-items:flex-start;
justify-content:center;
gap:8px;
min-width:0;
}
.tool-left,.tool-right{
display:inline-flex;
align-items:center;
gap:8px;
min-width:0;
}
.tool-left{
flex:1 1 auto;
}
.tool-right{
flex:0 0 auto;
margin-left:auto;
}
.filter-dd{
position:relative;
flex:0 0 auto;
}
.filter-dd[hidden]{
display:none!important;
}
.filter-trigger{
display:inline-flex;
align-items:center;
gap:8px;
min-height:31px;
max-width:220px;
padding:0 var(--space-3);
border-radius:var(--radius-pill);
color:var(--n-58);
font-size:var(--text-sm);
font-weight:var(--w-medium);
line-height:var(--lh-solid);
white-space:nowrap;
transition:color var(--time-fast) ease,background var(--time-fast) ease,box-shadow var(--time-fast) ease,transform var(--time-fast) ease;
}
.filter-trigger b{
min-width:0;
overflow:hidden;
color:inherit;
font-weight:var(--w-medium);
text-overflow:ellipsis;
}
.filter-trigger small{
color:var(--n-45);
font-size:var(--text-2xs);
font-weight:var(--w-regular);
}
.filter-trigger svg{
color:var(--n-45);
transition:transform var(--time-fast) var(--ease-out),color var(--time-fast) ease;
}
.filter-trigger:hover,.filter-dd.open .filter-trigger{
color:var(--c-blue);
background:var(--c-blue-06);
box-shadow:inset 0 0 0 .5px var(--c-blue-12);
}
.filter-dd.open .filter-trigger svg{
transform:rotate(180deg);
color:var(--c-blue);
}
.filter-trigger.active{
color:var(--c-blue);
background:rgb(var(--rgb-primary) / .085);
}
.filter-pop{
position:absolute;
top:calc(100% + 9px);
left:0;
z-index:80;
width:min(680px,calc(100vw - 112px));
max-height:min(460px,calc(100vh - 260px));
overflow:hidden;
border:.5px solid rgb(var(--rgb-line) / .14);
border-radius:var(--radius-card);
opacity:0;
pointer-events:none;
transform:translateY(-8px) scale(.985);
transform-origin:top left;
transition:opacity .22s ease,transform .28s var(--ease-out);
}
.tool-right .filter-pop{
left:auto;
right:0;
transform-origin:top right;
}
.filter-dd.open .filter-pop{
opacity:1;
pointer-events:auto;
transform:translateY(0) scale(1);
}
.filter-panel{
display:grid;
}
.filter-panel header{
display:flex;
justify-content:center;
gap:12px;
min-height:20px;
padding:0;
border:0;
}
.filter-options{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(174px,1fr));
max-height:330px;
overflow:auto;
padding-right:3px;
}
.filter-options.compact{
grid-template-columns:1fr;
max-height:300px;
}
.filter-choice{
display:grid;
grid-template-columns:14px minmax(0,1fr) auto;
align-items:center;
gap:8px;
width:100%;
line-height:1.12;
text-align:left;
transition:background var(--time-fast) ease,color var(--time-fast) ease,transform var(--time-fast) ease;
}
.filter-choice::before{
color:var(--n-38);
font-weight:var(--w-regular);
}
.filter-choice span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
.filter-choice small{
color:var(--n-45);
font-size:var(--text-3xs);
font-weight:var(--w-medium);
white-space:nowrap;
}
.filter-choice:hover{
color:var(--c-blue);
}
.filter-choice.all{
grid-template-columns:minmax(0,1fr) auto;
font-weight:var(--w-medium);
}
.filter-choice.all::before{
content:none;
}
}
@keyframes catalogPulse{
0%,68%{
opacity:0;
transform:scale(.985);
box-shadow:0 0 0 0 rgb(var(--rgb-primary) / .16);
}
74%{
opacity:.8;
transform:scale(1);
box-shadow:0 0 0 0 rgb(var(--rgb-primary) / .16);
}
100%{
opacity:0;
transform:scale(1.065);
box-shadow:0 0 0 12px rgb(var(--rgb-primary) / 0);
}
}
@keyframes flyoutLine{
to{
opacity:1;
transform:translateX(0);
}
}
@layer states{
.is-searching .stage,.is-searching .hero{
min-height:auto;
}
.is-searching .hero{
padding-bottom:26px;
}
.is-searching .auth-link{
width:38px;
padding:0;
}
.is-searching .hero-logo{
position:fixed;
top:var(--frame-top-y);
left:calc(var(--frame-x) + var(--chrome-inset));
z-index:20;
isolation:isolate;
opacity:.96;
pointer-events:auto;
cursor:pointer;
transform:translate(0,-50%) scale(.50);
transform-origin:left center;
}
.is-searching .hero-logo{
background:var(--c-surface-soft);
box-shadow:0 0 0 8px var(--c-surface-soft);
}
.is-searching .hero-logo::before{
content:"";
position:absolute;
left:-10px;
right:-10px;
top:50%;
z-index:-1;
height:34px;
border-radius:var(--radius-card);
background:var(--c-surface-soft);
transform:translateY(-50%);
pointer-events:none;
}
.is-searching .site-frame{
bottom:0;
}
.is-searching .search{
position:fixed;
top:var(--search-active-top);
left:50%;
z-index:var(--sticky-z);
width:var(--search-w);
max-width:var(--search-max);
min-width:0;
transform:translate(-50%,0);
transition-delay:0s;
}
.is-searching .wholesale{
max-width:0;
opacity:0;
pointer-events:none;
transform:translate(-50%,-10px);
transition-delay:0s;
}
.is-searching .search-tools{
position:fixed;
top:var(--search-tools-active-top);
left:50%;
z-index:13;
width:var(--search-w);
max-width:var(--search-max);
min-width:0;
opacity:1;
pointer-events:auto;
transform:translate(-50%,0);
}
body.is-searching::before{
content:"";
position:fixed;
top:0;
left:0;
right:0;
z-index:11;
height:calc(var(--search-active-top) + 158px);
pointer-events:none;
background:linear-gradient(180deg,rgb(var(--rgb-surface-soft) / .985) 0%,rgb(var(--rgb-surface-soft) / .985) calc(var(--search-active-top) + 28px),rgb(var(--rgb-surface-soft) / .86) calc(var(--search-active-top) + 76px),rgb(var(--rgb-surface-soft) / 0) 100%);
}
}
@layer components{
.column-options{
display:grid;
gap:5px;
max-height:330px;
overflow:auto;
padding-right:3px;
}
.column-choice{
display:grid;
grid-template-columns:18px minmax(0,1fr) auto;
align-items:center;
gap:8px;
color:var(--n-70);
font-size:var(--text-sm);
cursor:pointer;
transition:background var(--time-fast) ease,color var(--time-fast) ease;
}
.column-choice:hover{
color:var(--c-blue);
}
.column-choice input{
width:14px;
height:14px;
cursor:pointer;
}
.column-choice span{
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.column-choice small{
color:var(--n-45);
font-size:var(--text-2xs);
font-variant-numeric:tabular-nums;
}
}
@layer components{
.filter-pop{
border-color:rgb(var(--rgb-muted) / .18);
background:linear-gradient(180deg,rgb(var(--rgb-surface) / .985),rgb(var(--rgb-surface-soft) / .97));
box-shadow:0 26px 72px rgb(var(--rgb-ink) / .18),0 1px 0 rgb(var(--rgb-surface) / .94) inset;
}
.filter-pop::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:3px;
background:linear-gradient(90deg,rgb(var(--rgb-primary) / .82),rgb(var(--rgb-primary) / .18),transparent);
pointer-events:none;
}
.filter-panel{
gap:14px;
padding:17px 18px 18px;
}
.filter-panel header{
align-items:center;
padding-bottom:var(--space-2-5);
border-bottom:.5px solid rgb(var(--rgb-line) / .12);
}
.filter-panel header strong{
color:var(--n-80);
font-size:var(--text-md);
font-weight:var(--w-bold);
letter-spacing:-.018em;
}
.filter-panel header small{
padding:3px 8px;
border-radius:var(--radius-pill);
background:rgb(var(--rgb-surface-soft) / .9);
color:var(--n-50);
font-size:var(--text-3xs);
font-weight:var(--w-medium);
text-transform:lowercase;
}
.filter-options{
gap:8px;
padding:2px 4px 2px 0;
}
.filter-choice{
min-height:34px;
padding:0 var(--space-2-5);
border:.5px solid transparent;
border-radius:var(--radius-ui);
background:rgb(var(--rgb-surface) / .50);
color:var(--n-68);
font-size:12.25px;
font-weight:var(--w-medium);
}
.filter-choice::before{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:rgb(var(--rgb-line) / .25);
}
.filter-choice:hover{
border-color:rgb(var(--rgb-primary) / .12);
background:rgb(var(--rgb-surface-soft) / .96);
box-shadow:0 7px 20px rgb(var(--rgb-ink) / .055);
transform:translateX(1px);
}
.filter-choice.active{
border-color:rgb(var(--rgb-primary) / .20);
background:linear-gradient(180deg,rgb(var(--rgb-surface-soft) / .98),rgb(var(--rgb-surface-soft) / .92));
color:var(--c-blue);
box-shadow:0 8px 22px rgb(var(--rgb-primary) / .08);
}
.filter-choice.active::before{
background:var(--c-blue);
box-shadow:0 0 0 3px rgb(var(--rgb-primary) / .10);
}
.filter-choice.all{
min-height:36px;
background:rgb(var(--rgb-surface-soft) / .92);
color:var(--c-blue);
}
.column-panel{
min-width:min(390px,calc(100vw - 112px));
}
.column-choice{
min-height:34px;
padding:6px 9px;
border:.5px solid transparent;
border-radius:var(--radius-ui);
background:rgb(var(--rgb-surface) / .55);
}
.column-choice:hover{
border-color:rgb(var(--rgb-primary) / .12);
background:rgb(var(--rgb-surface-soft) / .96);
}
.column-choice input{
accent-color:var(--c-blue);
}
}
@layer components{
.tool-filter-group{
display:inline-flex;
align-items:flex-start;
gap:0;
min-width:0;
}
.tool-filter-group .filter-dd.pseudo-select{
width:174px;
}
.tool-filter-group .filter-dd.pseudo-select+.filter-dd.pseudo-select{
margin-left:-.5px;
}
.tool-filter-group .filter-dd.pseudo-select:not(:first-child):not(:last-child) .filter-trigger{
border-radius:0;
}
.tool-filter-group .filter-dd.pseudo-select:last-child:not(:first-child) .filter-trigger{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.tool-filter-group .filter-dd.pseudo-select.open .filter-trigger{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.tool-filter-group .filter-dd.pseudo-select:first-child.open .filter-trigger{
border-bottom-left-radius:0;
}
.tool-filter-group .filter-dd.pseudo-select:first-child.open .filter-pop{
border-top-left-radius:0;
}
.tool-filter-group .filter-dd.pseudo-select .filter-pop{
left:0;
right:auto;
transform-origin:top left;
}
.filter-dd.pseudo-select .filter-trigger,.filter-dd.pseudo-select .filter-choice,.filter-dd.pseudo-select .column-choice,.filter-search{
min-height:var(--filter-row-h);
}
.filter-dd.pseudo-select .filter-choice,.filter-dd.pseudo-select .column-choice{
grid-template-columns:16px minmax(0,1fr) auto;
padding-top:0;
padding-bottom:0;
}
.filter-dd.pseudo-select .filter-choice.active,.filter-dd.pseudo-select .column-choice.active{
background:var(--c-surface);
color:var(--c-blue);
}
.filter-dd.pseudo-select .filter-choice.active:hover,.filter-dd.pseudo-select .column-choice.active:hover{
background:rgb(var(--rgb-primary) / .045);
color:var(--c-blue);
}
.filter-dd.pseudo-select .filter-choice:hover:not(.active),.filter-dd.pseudo-select .column-choice:hover:not(.active){
color:var(--c-ink);
background:rgb(var(--rgb-primary) / .045);
}
.filter-dd.pseudo-select .filter-choice small,.filter-dd.pseudo-select .column-choice abbr{
min-width:0;
letter-spacing:-.01em;
}
.filter-dd.pseudo-select .filter-choice.active small,.filter-dd.pseudo-select .column-choice.active abbr,.filter-dd.pseudo-select .filter-choice.active:hover small,.filter-dd.pseudo-select .column-choice.active:hover abbr{
color:var(--n-48);
background:rgb(var(--rgb-ink) / .06);
}
.check-ui,.radio-ui{
position:relative;
display:grid;
place-items:center;
width:16px;
height:16px;
}
.check-ui svg,.radio-ui svg{
display:none;
grid-area:1 / 1;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.15!important;
overflow:visible;
}
.filter-choice.as-radio:not(.active) .radio-ui [data-radio="empty"]{
display:block;
}
.filter-choice.as-radio.active .radio-ui [data-radio="on"]{
display:block;
}
.filter-choice.as-radio.active:hover .radio-ui [data-radio="on"]{
display:none;
}
.filter-choice.as-radio.active:hover .radio-ui [data-radio="minus"]{
display:block;
}
.filter-choice.as-radio:active:not(.active) .radio-ui [data-radio="empty"]{
display:none;
}
.filter-choice.as-radio:active:not(.active) .radio-ui [data-radio="press-on"]{
display:block;
}
.filter-choice.as-radio:active.active .radio-ui [data-radio="on"],.filter-choice.as-radio:active.active .radio-ui [data-radio="minus"]{
display:none;
}
.filter-choice.as-radio:active.active .radio-ui [data-radio="press-off"]{
display:block;
}
.filter-dd.pseudo-select .filter-trigger-icon use,.filter-dd.pseudo-select .filter-choice-icon use{
pointer-events:none;
}
.price-panel{
overflow:hidden;
}
.price-panel .filter-options.compact{
max-height:none;
overflow:visible;
}
.price-range{
position:relative;
display:grid;
align-items:center;
border-top:.5px solid rgb(var(--rgb-ink) / .07);
background:var(--c-surface);
}
.price-range-track{
height:2px;
border-radius:var(--radius-pill);
background:linear-gradient(90deg,rgb(var(--rgb-ink) / .12) 0 var(--range-from),rgb(var(--rgb-primary) / .58) var(--range-from) var(--range-to),rgb(var(--rgb-ink) / .12) var(--range-to) 100%);
}
.price-range input[type="range"]{
position:absolute;
left:12px;
right:12px;
width:calc(100% - 24px);
margin:0;
padding:0;
appearance:none;
background:transparent;
pointer-events:none;
}
.price-range input[type="range"]::-webkit-slider-runnable-track{
height:2px;
background:transparent;
}
.price-range input[type="range"]::-moz-range-track{
height:2px;
background:transparent;
}
.price-range input[type="range"]::-webkit-slider-thumb{
width:13px;
height:13px;
margin-top:-5.5px;
border:.5px solid rgb(var(--rgb-primary) / .28);
border-radius:50%;
background:var(--c-surface);
box-shadow:0 2px 7px rgb(var(--rgb-ink) / .16);
appearance:none;
pointer-events:auto;
cursor:ew-resize;
}
.price-range input[type="range"]::-moz-range-thumb{
width:13px;
height:13px;
border:.5px solid rgb(var(--rgb-primary) / .28);
border-radius:50%;
background:var(--c-surface);
box-shadow:0 2px 7px rgb(var(--rgb-ink) / .16);
pointer-events:auto;
cursor:ew-resize;
}
.price-range input[type="range"]:focus-visible::-webkit-slider-thumb{
outline:2px solid rgb(var(--rgb-primary) / .22);
outline-offset:2px;
}
.price-range input[type="range"]:focus-visible::-moz-range-thumb{
outline:2px solid rgb(var(--rgb-primary) / .22);
outline-offset:2px;
}
.price-range output{
display:block;
line-height:1;
text-align:center;
font-variant-numeric:tabular-nums;
}
.price-range.disabled{
opacity:.55;
pointer-events:none;
}
}
@layer components{
.tool-left>.filter-dd.pseudo-select[data-filter-dd="category"]{
width:196px;
}
.filter-dd.pseudo-select[data-filter-dd="category"] .filter-pop{
left:0;
right:auto;
transform-origin:top left;
}
.filter-dd.pseudo-select .category-panel .filter-options.compact{
max-height:272px;
}
.filter-dd.pseudo-select .filter-choice.cat-depth-1{
grid-template-columns:16px minmax(0,1fr) auto;
}
.filter-dd.pseudo-select .filter-choice.cat-depth-1 .filter-choice-icon{
opacity:.74;
}
.filter-dd.pseudo-select .filter-choice.cat-depth-2{
grid-template-columns:16px minmax(0,1fr) auto;
padding-left:var(--space-4-5);
}
.filter-dd.pseudo-select .filter-choice.cat-depth-2 .filter-choice-icon{
width:13px;
height:13px;
opacity:.52;
}
.check-ui,.radio-ui{
color:currentColor;
}
.check-ui svg *,.radio-ui svg *{
stroke-width:1!important;
}
.column-choice:active .check-ui svg *,.filter-choice.as-radio:active .radio-ui svg *{
stroke-width:1.08!important;
}
.filter-dd.pseudo-select .column-choice abbr{
padding:1px 4px;
border-radius:var(--radius-pill);
background:rgb(var(--rgb-ink) / .055)!important;
color:var(--n-45)!important;
font-size:var(--text-micro);
font-weight:700;
letter-spacing:-.01em;
}
.filter-dd.pseudo-select .column-choice.active abbr,.filter-dd.pseudo-select .column-choice.active:hover abbr{
background:rgb(var(--rgb-ink) / .055)!important;
color:var(--n-45)!important;
}
.price-range{
min-height:50px;
padding:9px 12px 8px;
}
.price-range-track{
position:absolute;
top:19px;
left:12px;
right:12px;
}
.price-range input[type="range"]{
height:24px;
}
.price-range output{
margin-top:24px;
font-size:8.5px;
font-weight:700;
color:var(--n-45);
}
}
@layer components{
.filter-dd.pseudo-select{
z-index:22;
}
.filter-dd.pseudo-select.open{
z-index:88;
}
.filter-dd.pseudo-select .filter-trigger b,.filter-dd.pseudo-select .filter-choice span,.filter-dd.pseudo-select .column-choice>span:not(.check-ui),.filter-dd.pseudo-select .filter-choice small,.filter-dd.pseudo-select .column-choice abbr,.filter-search input{
white-space:nowrap;
}
.filter-dd.pseudo-select[data-filter-wide="1"]{
--filter-wide-w:392px;
}
.filter-dd.pseudo-select[data-filter-wide="1"].open .filter-trigger,.filter-dd.pseudo-select[data-filter-wide="1"].open .filter-pop{
width:min(var(--filter-wide-w),calc(100vw - 32px));
}
.filter-dd.pseudo-select[data-filter-wide="1"].open .filter-trigger{
z-index:6;
}
.filter-dd.pseudo-select[data-filter-wide="1"].open .filter-pop{
z-index:5;
max-height:min(410px,calc(100vh - 228px));
}
.filter-dd.pseudo-select[data-filter-dd="category"] .category-panel .filter-options.compact{
max-height:318px;
}
.filter-dd.pseudo-select[data-filter-dd="category"] .filter-choice.as-radio{
grid-template-columns:16px minmax(0,1fr) auto;
}
.filter-dd.pseudo-select[data-filter-dd="category"] .filter-choice.as-radio.cat-depth-0{
padding-left:var(--space-2-5);
}
.filter-dd.pseudo-select[data-filter-dd="category"] .filter-choice.as-radio.cat-depth-1{
padding-left:var(--space-4-5);
}
.filter-dd.pseudo-select[data-filter-dd="category"] .filter-choice.as-radio.cat-depth-2{
padding-left:26px;
}
.filter-dd.pseudo-select[data-filter-dd="category"] .filter-choice.as-radio.cat-depth-3{
padding-left:34px;
}
.filter-dd.pseudo-select[data-filter-dd="category"] .filter-choice.as-radio.cat-depth-4{
padding-left:42px;
}
.filter-dd.pseudo-select[data-filter-dd="category"] .filter-choice.as-radio .radio-ui{
transform:translateX(0);
}
.check-ui svg,.radio-ui svg{
width:14.5px;
height:14.5px;
}
}
@layer components{
.tool-row.is-loading{
opacity:1;
}
.tools-skeleton{
pointer-events:none;
}
.filter-skeleton{
position:relative;
display:inline-block;
width:160px;
height:var(--filter-row-h,33px);
overflow:hidden;
border:.5px solid rgb(var(--rgb-primary) / .12);
border-radius:var(--radius-sm);
}
.filter-skeleton::after{
content:"";
position:absolute;
transform:translateX(-110%);
animation:filterSkeletonSweep 1.45s cubic-bezier(.45,0,.25,1) infinite;
}
.filter-skeleton-category{
width:196px;
}
.filter-skeleton-columns{
width:188px;
}
.filter-skeleton-sort{
width:192px;
}
.filter-skeleton-group{
display:inline-flex;
align-items:center;
width:auto;
height:auto;
overflow:visible;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}
.filter-skeleton-group::after{
content:none;
}
.filter-skeleton-group .filter-skeleton{
width:160px;
border-radius:0;
}
.filter-skeleton-group .filter-skeleton:first-child{
border-radius:10px 0 0 10px;
}
.filter-skeleton-group .filter-skeleton+.filter-skeleton{
margin-left:-.5px;
}
.filter-skeleton-group .filter-skeleton:last-child{
border-radius:0 10px 10px 0;
}
.tool-row.is-ready>.tool-left,.tool-row.is-ready>.tool-right{
animation:filterToolsReveal 220ms ease both;
}
.filter-dd.pseudo-select[data-filter-dd="brand"] .filter-trigger-icon{
fill:currentColor;
stroke:none;
}
.price-range input[type="range"]{
top:9px;
}
}
@keyframes filterToolsReveal{
from{
opacity:0;
transform:translateY(4px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@media (prefers-reduced-motion:reduce){
.filter-skeleton::after,.tool-row.is-ready>.tool-left,.tool-row.is-ready>.tool-right{
animation:none!important;
}
}
@layer components{
.filter-skeleton::after{
animation-timing-function:cubic-bezier(.38,0,.22,1)!important;
}
.select-catalog-ico{
fill:currentColor!important;
stroke:none!important;
overflow:visible;
}
.select:not(.has-choice)::after{
inset:-14px -16px;
border:0;
border-radius:var(--radius-lg);
background:radial-gradient(circle at 28% 50%,rgb(var(--rgb-primary) / .16),rgb(var(--rgb-primary) / .07) 34%,rgb(var(--rgb-primary) / 0) 72%);
filter:blur(12px);
opacity:.26;
transform:scale(.96);
animation-duration:4.6s;
}
.select:hover:not(.has-choice)::after,.select.open:not(.has-choice)::after{
opacity:.46;
}
.select-menu small{
color:var(--n-46);
font-size:var(--text-micro-lg);
font-weight:430;
letter-spacing:-.01em;
}
.select-menu button,.select-menu [data-root-category] .root-cat-ico{
transform:none!important;
}
.select-menu [data-root-category]:hover .root-cat-ico,.select-menu [data-root-category].active .root-cat-ico{
transform:none!important;
}
.flyout-title{
justify-content:flex-start;
letter-spacing:-.012em;
}
.flyout-title strong{
font:inherit;
}
.flyout-title small{
display:none!important;
}
.flyout-group>button,.flyout-group li button{
transition:color .18s ease,background .18s ease;
transform:none!important;
}
.flyout-group>button::before{
content:none!important;
}
.flyout-group>button span{
grid-column:auto;
}
.flyout-group>button small{
grid-column:auto;
}
.flyout-group button:hover,.flyout-group button.active{
background:rgb(var(--rgb-primary) / .045);
transform:none!important;
}
.flyout-radio{
color:currentColor;
}
.category-option-thumb{
display:block;
width:30px;
height:30px;
overflow:hidden;
border:.5px solid rgb(var(--rgb-primary) / .11);
border-radius:var(--radius-xs);
background:var(--c-surface);
}
.category-option-thumb img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}
.flyout-radio svg{
display:none;
grid-area:1 / 1;
fill:none!important;
stroke:currentColor!important;
stroke-width:1!important;
}
.flyout-group button:not(.active) .flyout-radio [data-radio="empty"]{
display:block;
}
.flyout-group button.active .flyout-radio [data-radio="on"]{
display:block;
}
.flyout-group small{
letter-spacing:-.01em;
}
}
@layer components{
.filter-skeleton{
border-color:rgb(var(--rgb-ink) / .075)!important;
background:rgb(var(--rgb-ink) / .046)!important;
box-shadow:0 1px 0 rgb(var(--rgb-surface) / .88) inset,0 7px 20px rgb(var(--rgb-ink) / .028)!important;
}
.filter-skeleton::after{
inset:-40% -60%;
background:linear-gradient(90deg,transparent 0%,rgb(var(--rgb-surface) / .18) 23%,rgb(var(--rgb-ink) / .105) 47%,rgb(var(--rgb-surface) / .34) 58%,rgb(var(--rgb-ink) / .075) 72%,transparent 100%)!important;
filter:blur(8px);
animation-duration:3.1s!important;
}
.select-menu,.select-flyout{
top:-12px;
}
.select-flyout{
width:calc(var(--search-w) - var(--catalog-menu-w) + var(--catalog-overlap) - 20px);
max-width:calc(var(--search-max) - var(--catalog-menu-w) + var(--catalog-overlap) - 20px);
}
.select-menu small,.select-menu button:hover small,.select-menu button.active small{
color:var(--n-46)!important;
font-weight:420!important;
}
.flyout-title{
margin-bottom:7px;
font-size:var(--text-sm);
font-weight:700;
}
.flyout-title strong{
color:var(--n-82);
font-weight:700;
}
.flyout-grid{
gap:2px 18px;
}
.flyout-group>button,.flyout-group li button{
min-height:24px;
padding:0 6px;
border-radius:var(--radius-compact-lg);
font-weight:430;
line-height:1.06;
}
.flyout-group>button,.flyout-group>button span,.flyout-group li button,.flyout-group li button span{
font-weight:430;
}
.flyout-radio{
width:14px;
height:14px;
}
.flyout-radio svg{
width:13.5px;
height:13.5px;
}
.flyout-group small{
color:var(--n-46)!important;
font-size:var(--text-micro);
font-weight:420!important;
}
}
@keyframes filterSkeletonSweep{
0%{
transform:translateX(-120%);
opacity:.28;
}
48%{
opacity:.78;
}
100%{
transform:translateX(120%);
opacity:.36;
}
}
@layer components{
.select-flyout{
left:calc(var(--catalog-menu-w) - var(--catalog-overlap) + 7px);
}
.flyout-title{
margin-left:0;
}
.flyout-group>button,.flyout-group li button{
grid-template-columns:16px minmax(0,1fr) auto;
gap:7px;
padding-left:0;
padding-right:4px;
}
.flyout-group button:hover,.flyout-group button.active{
color:var(--c-blue);
}
.flyout-group button:hover small,.flyout-group button.active small{
color:var(--n-46)!important;
}
.tool-filter-group .filter-dd.pseudo-select:first-child .filter-trigger{
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
.tool-filter-group .filter-dd.pseudo-select:first-child:not(:last-child) .filter-trigger{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
}
@layer components{
.select.has-choice .select-main span{
color:var(--c-blue);
font-weight:700;
}
.select.has-choice .select-main .select-catalog-ico,.select.has-choice .select-main .select-chevron{
color:var(--c-blue)!important;
}
.select-menu button.active,.select-menu [data-root-category].active,.flyout-group button.active{
color:var(--c-blue)!important;
font-weight:700!important;
}
.select-menu button.active span,.select-menu [data-root-category].active span,.flyout-group button.active span{
color:var(--c-blue);
font-weight:700;
}
.select-menu button.active small,.select-menu button:hover small,.flyout-group button.active small,.flyout-group button:hover small{
color:var(--n-46)!important;
font-weight:420!important;
}
}
@layer components{
.guide-modal{
width:min(560px,calc(100vw - 32px));
}
.guide-content{
display:grid;
gap:12px;
color:var(--n-66);
font-size:var(--text-ui);
line-height:1.55;
}
.guide-content p,.guide-content ul{
margin:0;
}
.guide-content ul{
display:grid;
gap:8px;
padding-left:var(--space-4-5);
}
.guide-content strong{
color:var(--n-82);
font-weight:700;
}
.guide-note{
padding-top:var(--space-2-5);
border-top:.5px solid rgb(var(--rgb-line) / .16);
color:var(--n-54);
font-size:var(--text-ui-sm);
}
}
@layer components{
.tool-right:has(.tool-help){
gap:6px;
}
.tool-help{
display:inline-grid;
place-items:center;
flex:0 0 auto;
width:30px;
height:34px;
border:.5px solid rgb(var(--rgb-ink) / .08);
border-radius:var(--radius-sm);
background:var(--c-surface);
box-shadow:0 1px 0 rgb(var(--rgb-ink) / .025),0 6px 18px rgb(var(--rgb-ink) / .03);
transition:color .333s ease,background-color .333s ease,border-color .333s ease;
}
.tool-help:hover,.tool-help:focus-visible{
border-color:var(--c-primary);
background:var(--c-primary);
}
.tool-help svg{
width:16px;
height:16px;
}
.tool-right .tool-help+.filter-dd.pseudo-select{
margin-left:0;
}
.tool-right .tool-help+.filter-dd.pseudo-select .filter-trigger{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.tool-right .tool-help+.filter-dd.pseudo-select+.filter-dd.pseudo-select{
margin-left:-.5px;
}
.tool-right .tool-help+.filter-dd.pseudo-select+.filter-dd.pseudo-select .filter-trigger{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
}
@layer components{
.tool-help svg{
fill:none!important;
stroke:currentColor!important;
stroke-linecap:round;
stroke-linejoin:round;
}
}
@layer states{
.site-frame,.has-page-scroll .site-frame,.is-searching .site-frame,.page-route .site-frame,.catalog-route .site-frame{
position:fixed!important;
top:var(--frame-top-y)!important;
right:var(--frame-x)!important;
bottom:30px!important;
left:var(--frame-x)!important;
transform:none!important;
}
}
@layer components{
.tool-help svg{
stroke-width:1!important;
}
}
@layer states{
.site-frame,.has-page-scroll .site-frame,.is-searching .site-frame,.page-route .site-frame,.catalog-route .site-frame{
z-index:12!important;
}
.top{
z-index:var(--top-z)!important;
}
}
@layer components{
.tool-help,.tool-help:hover,.tool-help:focus-visible{
border-color:transparent!important;
background:transparent!important;
box-shadow:none!important;
}
.tool-help{
color:var(--n-46)!important;
}
.tool-help:hover,.tool-help:focus-visible{
color:var(--c-primary)!important;
}
.query.is-loading>svg:first-child{
opacity:0;
}
.query.is-loading::before{
content:"";
position:absolute;
left:0;
top:50%;
width:var(--icon-lg);
height:var(--icon-lg);
border-radius:50%;
border:2px solid rgb(var(--rgb-primary) / .16);
border-top-color:var(--c-primary);
transform:translateY(-50%);
animation:searchSpin .72s linear infinite;
pointer-events:none;
}
@keyframes searchSpin{
to{
transform:translateY(-50%) rotate(360deg);
}
}
}
@media (prefers-reduced-motion:reduce){
.query.is-loading::before{
animation:none!important;
}
}
@layer components{

.top-logo{
padding:0 var(--space-2)!important;
margin-left:-8px!important;
border-radius:var(--radius-md);
background:var(--n-00,var(--c-surface))!important;
}
.top-logo::before{
content:"";
position:absolute;
left:-2px;
right:-2px;
top:50%;
z-index:-1;
height:3px;
background:var(--n-00,var(--c-surface));
transform:translateY(-50%);
pointer-events:none;
}
.actions{
gap:6px!important;
padding:0 var(--space-2)!important;
margin-right:-8px!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
.actions::before{
content:"";
position:absolute;
left:0;
right:0;
top:50%;
z-index:-1;
height:3px;
background:var(--n-00,var(--c-surface));
transform:translateY(-50%);
pointer-events:none;
}
body.is-searching:not(.search-static-route){
--site-header-mask-bg:var(--c-surface-soft);
}
body.is-searching:not(.search-static-route) .top>.actions::before,
body.is-searching:not(.search-static-route) .top>.actions::after,
body.is-searching:not(.search-static-route) .actions::before,
body.is-searching:not(.search-static-route) .actions::after,
body.is-searching:not(.search-static-route) .top-logo::before,
body.is-searching:not(.search-static-route) .top-logo::after{
background:var(--c-surface-soft)!important;
}
body.is-searching:not(.search-static-route) .top>.actions{
background:var(--c-surface-soft)!important;
box-shadow:0 0 0 6px var(--c-surface-soft)!important;
}
body.is-searching.is-footer-detached .site-frame{
position:fixed!important;
}
}
@layer components{

}
@layer components{

}
@layer responsive;
@layer components{

body.is-searching.is-footer-detached .stage::after{
content:"";
display:block;
width:100%;
height:var(--site-footer-space,92px);
pointer-events:none;
}
body.is-searching.is-footer-detached footer[data-site-chrome]{
position:fixed!important;
left:0!important;
right:0!important;
bottom:18px!important;
width:100%!important;
max-width:none!important;
margin:0!important;
opacity:var(--site-footer-opacity,0)!important;
pointer-events:none!important;
transform:translateY(var(--site-footer-shift,calc(100vh + 160px)))!important;
will-change:transform,opacity;
transition:opacity .22s ease,transform .18s ease-out!important;
}
body.is-searching.is-footer-detached.is-footer-visible footer[data-site-chrome]{
pointer-events:auto!important;
}
body.is-searching.is-footer-detached .site-frame{
bottom:var(--site-frame-dock-bottom,0px)!important;
transition:opacity .56s var(--ease-out),bottom .18s ease-out!important;
}
}
@layer components{
.select-menu [data-root-category] .root-cat-ico{
fill:none!important;
stroke:currentColor!important;
stroke-width:1.05!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
vector-effect:non-scaling-stroke;
}
.select-menu small,.select-menu button small,.select-menu button:hover small,.select-menu button.active small,.flyout-group small,.flyout-group button:hover small,.flyout-group button.active small{
display:inline-grid!important;
place-items:center!important;
min-width:44px!important;
height:18px!important;
padding:0 6px!important;
border-radius:var(--radius-3xs)!important;
background:var(--n-20)!important;
color:var(--n-50)!important;
font-size:var(--text-3xs)!important;
font-weight:700!important;
line-height:18px!important;
letter-spacing:-.01em!important;
white-space:nowrap!important;
}
}
@layer components{
body.is-catalog-menu-open,body.is-catalog-menu-lock{
position:fixed;
left:0;
right:0;
width:100%;
overflow:hidden!important;
overscroll-behavior:none;
touch-action:none;
}
body.is-catalog-menu-open .select-menu,body.is-catalog-menu-lock .select-menu{
touch-action:pan-y;
}
}
@layer components{
@media (hover:hover) and (pointer:fine){
.select-flyout .flyout-title{
display:none!important;
margin:0!important;
}
.select-flyout .flyout-grid{
gap:3px 20px;
}
.select-flyout .flyout-group>button,.select-flyout .flyout-group li button{
grid-template-columns:minmax(0,1fr) auto!important;
gap:10px;
min-height:26px;
padding:1px 6px 1px 0;
font-size:13.4px;
line-height:1.12;
}
.select-flyout .flyout-group>button.has-thumb,.select-flyout .flyout-group li button.has-thumb{
grid-template-columns:34px minmax(0,1fr) auto!important;
min-height:36px;
padding-left:0;
}
.select-flyout .flyout-group>button.has-thumb .category-option-thumb,.select-flyout .flyout-group li button.has-thumb .category-option-thumb{
grid-column:1;
}
.select-flyout .flyout-radio{
display:none!important;
}
.select-flyout .flyout-group>button span,.select-flyout .flyout-group li button span{
grid-column:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
.select-flyout .flyout-group>button.has-thumb span,.select-flyout .flyout-group li button.has-thumb span{
grid-column:2;
}
.select-flyout .flyout-group>button small,.select-flyout .flyout-group li button small{
grid-column:2;
justify-self:end;
}
.select-flyout .flyout-group>button.has-thumb small,.select-flyout .flyout-group li button.has-thumb small{
grid-column:3;
}
}
}
@media (min-width:761px){
.tool-row.is-ready .filter-dd[data-filter-dd="price"],.tool-row.is-ready .filter-dd[data-filter-dd="stock"],.tool-row.is-ready .tool-help{
display:inline-grid;
}
}
@media (min-width:861px){
.select-menu [data-category-option] small,.select-flyout [data-category-option] small{
min-width:0;
padding-inline:6px;
letter-spacing:0;
}
}
@layer components{
footer[data-site-chrome],footer[data-site-chrome] *,.top,.top *,[data-page-open],[data-auth-open],[data-account-toggle],[data-account-entry]{
-webkit-user-select:none;
user-select:none;
}
footer[data-site-chrome] a,footer[data-site-chrome] button,.top a,.top button{
text-decoration:none!important;
border-bottom:0!important;
}
footer[data-site-chrome] a::before,footer[data-site-chrome] a::after,footer[data-site-chrome] button::before,footer[data-site-chrome] button::after{
display:none!important;
content:none!important;
}
.tool-right .filter-dd.pseudo-select{
width:192px;
}
.filter-dd.pseudo-select{
isolation:isolate;
}
.filter-trigger{
border:.5px solid var(--c-primary-18);
background:var(--c-surface);
box-shadow:0 1px 0 rgb(var(--rgb-surface) / .96) inset,0 6px 18px rgb(var(--rgb-primary) / .035);
}
.filter-trigger:hover,.filter-dd.open .filter-trigger,.filter-trigger.active{
border-color:var(--c-primary-30);
background:var(--c-surface);
box-shadow:0 1px 0 rgb(var(--rgb-surface) / .98) inset,0 9px 24px rgb(var(--rgb-primary) / .065);
}
.filter-trigger-icon,.filter-choice-icon{
flex:0 0 auto;
width:17px;
height:17px;
color:currentColor;
fill:currentColor;
stroke:none;
}
.filter-trigger .filter-chevron{
width:16px;
height:16px;
margin-left:auto;
color:var(--n-45);
fill:currentColor;
stroke:none;
transition:transform 220ms var(--ease-out),color 160ms ease;
}
.filter-dd.open .filter-trigger .filter-chevron{
transform:rotate(180deg);
color:var(--c-blue);
}
.filter-dd.pseudo-select .filter-trigger{
position:relative;
z-index:2;
width:100%;
max-width:none;
justify-content:flex-start;
border-radius:var(--radius-sm);
color:var(--n-70);
font-weight:700;
}
.filter-dd.pseudo-select .filter-trigger b{
flex:1 1 auto;
min-width:0;
text-align:left;
font-weight:700;
}
.filter-dd.pseudo-select.open .filter-trigger{
border-bottom-color:transparent;
border-radius:10px 10px 0 0;
}
.filter-dd.pseudo-select .filter-pop{
top:calc(100% - .5px);
right:0;
left:auto;
width:100%;
min-width:100%;
max-height:min(340px,calc(100vh - 250px));
border:.5px solid rgb(var(--rgb-primary) / .22);
border-top-color:rgb(var(--rgb-ink) / .07);
border-radius:0 0 10px 10px;
background:var(--c-surface);
box-shadow:0 18px 46px rgb(var(--rgb-ink) / .13),0 1px 0 rgb(var(--rgb-surface) / .98) inset;
transform:translateY(-6px) scaleY(.96);
transform-origin:top center;
transition:opacity 180ms ease,transform 260ms cubic-bezier(.22,1,.36,1);
}
.filter-dd.pseudo-select.open .filter-pop{
opacity:1;
pointer-events:auto;
transform:translateY(0) scaleY(1);
}
.filter-dd.pseudo-select .filter-pop::before{
display:none;
content:none;
}
.filter-dd.pseudo-select .filter-panel{
gap:0;
padding:0;
}
.filter-search{
position:relative;
display:grid;
align-items:center;
border-bottom:.5px solid rgb(var(--rgb-ink) / .075);
background:rgb(var(--rgb-surface-soft) / .72);
color:var(--n-45);
}
.filter-search>svg{
fill:none;
stroke:currentColor;
stroke-width:1.55;
}
.filter-search input{
width:100%;
min-width:0;
padding:0;
border:0;
outline:0;
background:transparent;
color:var(--n-70);
font:inherit;
font-weight:700;
}
.filter-search input::placeholder{
color:rgb(var(--rgb-muted) / .55);
font-style:italic;
font-weight:430;
}
.filter-search button{
display:grid;
place-items:center;
border:0;
border-radius:var(--radius-pill);
background:transparent;
color:rgb(var(--rgb-muted) / .58);
}
.filter-search button:hover{
color:var(--c-blue);
background:rgb(var(--rgb-primary) / .06);
}
.filter-search button svg{
width:11px;
height:11px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
}
.filter-dd.pseudo-select .filter-options.compact{
max-height:238px;
gap:0;
padding:0;
overflow:auto;
}
.filter-dd.pseudo-select .filter-choice{
width:100%;
border:0;
border-top:.5px solid rgb(var(--rgb-ink) / .07);
border-radius:0;
background:var(--c-surface);
font-size:var(--text-ui-sm);
font-weight:700;
opacity:0;
transform:translateY(-4px);
}
.filter-dd.pseudo-select.open .filter-choice{
animation:filterChoiceIn 260ms cubic-bezier(.22,1,.36,1) both;
animation-delay:calc(var(--choice-index,0) * 34ms + 40ms);
}
.filter-dd.pseudo-select .filter-choice:first-child{
border-top:0;
}
.filter-dd.pseudo-select .filter-choice::before{
display:none;
content:none;
}
.filter-dd.pseudo-select .filter-choice span{
min-width:0;
overflow:hidden;
text-align:left;
text-overflow:ellipsis;
}
.filter-dd.pseudo-select .filter-choice:hover{
color:var(--c-blue);
background:rgb(var(--rgb-primary) / .045);
transform:none;
box-shadow:none;
}
.filter-dd.pseudo-select .filter-choice[hidden]{
display:none!important;
}
@keyframes filterChoiceIn{
from{
opacity:0;
transform:translateY(-5px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@media (prefers-reduced-motion:reduce){
.filter-dd.pseudo-select .filter-pop,.filter-dd.pseudo-select .filter-choice{
animation:none!important;
transition:none!important;
}
}
}
@layer components{
.filter-dd.pseudo-select{
--filter-row-h:33px;
}
.tool-right:has(.filter-dd.pseudo-select+.filter-dd.pseudo-select){
gap:0;
}
.tool-right .filter-dd.pseudo-select+.filter-dd.pseudo-select{
margin-left:-.5px;
}
.tool-right .filter-dd.pseudo-select:first-child:not(:last-child) .filter-trigger{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.tool-right .filter-dd.pseudo-select:last-child:not(:first-child) .filter-trigger{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.tool-right .filter-dd.pseudo-select.open .filter-trigger{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.tool-right .filter-dd.pseudo-select[data-filter-dd="columns"]{
width:188px;
}
.tool-right .filter-dd.pseudo-select[data-filter-dd="sort"]{
width:192px;
}
.filter-trigger svg{
width:16px;
height:16px;
}
.filter-dd.open .filter-trigger .filter-trigger-icon,.filter-dd.open .filter-trigger .filter-choice-icon{
transform:none!important;
}
.filter-dd.open .filter-trigger b,.filter-dd.open .filter-trigger .filter-trigger-icon,.filter-dd.open .filter-trigger .filter-chevron{
color:var(--c-blue);
}
.filter-dd.pseudo-select .filter-trigger{
min-height:var(--filter-row-h);
gap:8px;
padding:0 8px 0 10px;
font-size:var(--text-ui-sm);
}
.filter-dd.pseudo-select .filter-trigger-icon,.filter-dd.pseudo-select .filter-choice-icon{
width:16px;
height:16px;
}
.filter-dd.pseudo-select .filter-trigger .filter-chevron{
width:16px;
height:16px;
}
.filter-search{
grid-template-columns:16px minmax(0,1fr) 16px;
gap:8px;
min-height:var(--filter-row-h);
padding:0 8px 0 10px;
}
.filter-search input{
height:calc(var(--filter-row-h) - 2px);
font-size:var(--text-ui-sm);
line-height:1;
}
.filter-search>svg{
width:14px;
height:14px;
}
.filter-search button{
width:16px;
height:16px;
}
.filter-dd.pseudo-select .filter-choice{
grid-template-columns:16px minmax(0,1fr) auto;
gap:8px;
min-height:var(--filter-row-h);
padding:0 9px 0 10px;
color:var(--n-60);
}
.filter-dd.pseudo-select .filter-choice:hover:not(.active){
color:var(--n-80);
background:rgb(var(--rgb-primary) / .045);
}
.filter-dd.pseudo-select .filter-choice.active{
color:var(--c-blue);
background:var(--c-surface);
box-shadow:none;
}
.filter-dd.pseudo-select .filter-choice.active:hover{
color:var(--c-blue);
background:rgb(var(--rgb-primary) / .045);
}
.filter-dd.pseudo-select .filter-choice small,.filter-dd.pseudo-select .column-choice abbr{
justify-self:end;
padding:2px 6px;
border:0;
border-radius:var(--radius-pill);
background:rgb(var(--rgb-ink) / .07);
color:var(--n-52);
font-size:var(--text-3xs);
font-weight:700;
line-height:1.1;
text-decoration:none;
font-variant-numeric:tabular-nums;
}
.filter-dd.pseudo-select .filter-choice:hover:not(.active) small,.filter-dd.pseudo-select .column-choice:hover:not(.active) abbr{
color:var(--n-80);
background:rgb(var(--rgb-ink) / .09);
}
.filter-dd.pseudo-select .filter-choice.active small,.filter-dd.pseudo-select .column-choice.active abbr{
color:var(--c-blue);
background:rgb(var(--rgb-primary) / .08);
}
.filter-dd.pseudo-select .column-panel{
min-width:100%;
}
.filter-dd.pseudo-select .column-options{
display:grid;
gap:0;
max-height:238px;
padding:0;
overflow:auto;
}
.filter-dd.pseudo-select .column-choice{
position:relative;
display:grid;
grid-template-columns:16px minmax(0,1fr) auto;
align-items:center;
gap:8px;
width:100%;
min-height:var(--filter-row-h);
padding:0 9px 0 10px;
border:0;
border-top:.5px solid rgb(var(--rgb-ink) / .07);
border-radius:0;
background:var(--c-surface);
color:var(--n-60);
font-size:var(--text-ui-sm);
font-weight:700;
line-height:1.12;
cursor:pointer;
opacity:0;
transform:translateY(-4px);
transition:background var(--time-fast) ease,color var(--time-fast) ease;
}
.filter-dd.pseudo-select .column-choice:first-child{
border-top:0;
}
.filter-dd.pseudo-select.open .column-choice{
animation:filterChoiceIn 260ms cubic-bezier(.22,1,.36,1) both;
animation-delay:calc(var(--choice-index,0) * 34ms + 40ms);
}
.filter-dd.pseudo-select .column-choice:hover:not(.active){
color:var(--n-80);
background:rgb(var(--rgb-primary) / .045);
}
.filter-dd.pseudo-select .column-choice.active{
color:var(--c-blue);
background:var(--c-surface);
box-shadow:none;
}
.filter-dd.pseudo-select .column-choice.active:hover{
color:var(--c-blue);
background:rgb(var(--rgb-primary) / .045);
}
.filter-dd.pseudo-select .column-choice[hidden]{
display:none!important;
}
.filter-dd.pseudo-select .column-choice>span:not(.check-ui){
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.filter-dd.pseudo-select .column-choice input[type="checkbox"]{
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
.check-ui{
position:relative;
display:grid;
place-items:center;
width:16px;
height:16px;
color:currentColor;
}
.check-ui svg{
display:none;
grid-area:1 / 1;
width:16px;
height:16px;
fill:currentColor;
}
.column-choice input:not(:checked)+.check-ui [data-check="empty"]{
display:block;
}
.column-choice input:checked+.check-ui [data-check="on"]{
display:block;
}
.column-choice:hover input:checked+.check-ui [data-check="on"]{
display:none;
}
.column-choice:hover input:checked+.check-ui [data-check="minus"]{
display:block;
}
.column-choice:active input:not(:checked)+.check-ui [data-check="empty"]{
display:none;
}
.column-choice:active input:not(:checked)+.check-ui [data-check="press-on"]{
display:block;
}
.column-choice:active input:checked+.check-ui [data-check="on"],.column-choice:active input:checked+.check-ui [data-check="minus"]{
display:none;
}
.column-choice:active input:checked+.check-ui [data-check="press-off"]{
display:block;
}
.column-choice input:focus-visible+.check-ui{
border-radius:var(--radius-3xs);
outline:2px solid rgb(var(--rgb-primary) / .28);
outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
.filter-dd.pseudo-select .column-choice{
animation:none!important;
transition:none!important;
opacity:1;
transform:none;
}
}
}
.search-ai-orb,.query.has-ai-orb .search-ai-orb{
overflow:visible!important;
isolation:isolate!important;
transform-origin:center!important;
}
.query.has-ai-orb .search-ai-orb{
transform:scale(1) translateZ(0)!important;
}
.search-ai-orb>span{
overflow:hidden!important;
border-radius:50%!important;
clip-path:circle(50% at 50% 50%)!important;
contain:paint!important;
animation:aiOrb273Aura 11.8s cubic-bezier(.44,0,.26,1) infinite,aiOrb273Float 7.6s ease-in-out infinite!important;
}
.search-ai-orb>span::before{
inset:-10%!important;
animation:aiOrb273Sweep 13.4s linear infinite reverse!important;
}
.search-ai-orb>span::after{
animation:aiOrb273Core 8.7s ease-in-out infinite!important;
}
.search-ai-orb i{
animation:aiOrb273Blob 9.2s ease-in-out infinite!important;
}
.search-ai-orb i:nth-child(1){
animation-delay:-1.1s!important;
}
.search-ai-orb i:nth-child(2){
animation-delay:-3.4s!important;
}
.search-ai-orb i:nth-child(3){
animation-delay:-5.8s!important;
}
.search-ai-orb i:nth-child(4){
animation-delay:-7.2s!important;
}
.query.has-ai-orb .search-ai-orb:hover,.query.has-ai-orb .search-ai-orb:focus-visible{
animation:aiOrb273HoverPulse .34s cubic-bezier(.18,1.18,.22,1) both!important;
filter:drop-shadow(0 18px 38px rgb(var(--rgb-primary) / .30)) saturate(1.22) brightness(1.05)!important;
}
.search-ai-orb:hover>span,.search-ai-orb:focus-visible>span{
animation-duration:4.2s,2.6s!important;
filter:saturate(1.85) brightness(1.08) contrast(1.06)!important;
}
.search-ai-orb:hover i,.search-ai-orb:focus-visible i{
animation-duration:2.2s!important;
}
.search-ai-orb::before,.search-ai-orb::after{
position:absolute;
left:50%;
z-index:12;
pointer-events:none;
opacity:0;
transition:opacity .18s ease,transform .18s cubic-bezier(.22,1,.36,1);
}
.search-ai-orb::before{
content:attr(aria-label);
top:calc(100% + 12px);
padding:7px 9px;
border:.5px solid rgb(var(--rgb-ink) / .10);
border-radius:var(--radius-sm);
background:rgb(var(--rgb-surface) / .96);
color:var(--n-70);
box-shadow:0 12px 28px rgb(var(--rgb-ink) / .10),0 2px 8px rgb(var(--rgb-ink) / .05);
backdrop-filter:blur(12px);
font-size:var(--text-2xs);
font-weight:var(--w-strong);
line-height:1;
white-space:nowrap;
transform:translate(-50%,-4px) scale(.96);
}
.search-ai-orb::after{
content:"";
top:calc(100% + 7px);
width:9px;
height:9px;
border-top:.5px solid rgb(var(--rgb-ink) / .10);
border-left:.5px solid rgb(var(--rgb-ink) / .10);
background:rgb(var(--rgb-surface) / .96);
transform:translate(-50%,-4px) rotate(45deg) scale(.96);
}
.search-ai-orb:hover::before,.search-ai-orb:focus-visible::before,.search-ai-orb:hover::after,.search-ai-orb:focus-visible::after{
opacity:1;
}
.search-ai-orb:hover::before,.search-ai-orb:focus-visible::before{
transform:translate(-50%,0) scale(1);
}
.search-ai-orb:hover::after,.search-ai-orb:focus-visible::after{
transform:translate(-50%,0) rotate(45deg) scale(1);
}
@keyframes aiOrb273HoverPulse{
0%{
transform:scale(1) translateZ(0);
}
42%{
transform:scale(.92) translateZ(0);
}
100%{
transform:scale(1.08) translateZ(0);
}
}
@keyframes aiOrb273Aura{
0%,100%{
filter:hue-rotate(0deg) saturate(1.1);
}
18%{
filter:hue-rotate(28deg) saturate(1.35);
}
43%{
filter:hue-rotate(124deg) saturate(1.18);
}
67%{
filter:hue-rotate(214deg) saturate(1.46);
}
86%{
filter:hue-rotate(318deg) saturate(1.22);
}
}
@keyframes aiOrb273Float{
0%,100%{
transform:scale(.985) rotate(0deg);
}
21%{
transform:scale(1.035) rotate(7deg);
}
49%{
transform:scale(.975) rotate(-5deg);
}
73%{
transform:scale(1.025) rotate(12deg);
}
}
@keyframes aiOrb273Sweep{
0%{
transform:rotate(0deg) scale(1);
}
37%{
transform:rotate(156deg) scale(1.06);
}
61%{
transform:rotate(238deg) scale(.94);
}
100%{
transform:rotate(360deg) scale(1);
}
}
@keyframes aiOrb273Core{
0%,100%{
transform:translate(-8%,4%) scale(.88);
opacity:.62;
}
29%{
transform:translate(10%,-7%) scale(1.14);
opacity:.82;
}
58%{
transform:translate(3%,9%) scale(.98);
opacity:.70;
}
81%{
transform:translate(-10%,-5%) scale(1.08);
opacity:.76;
}
}
@keyframes aiOrb273Blob{
0%,100%{
transform:translate(0,0) scale(.84);
opacity:.70;
}
23%{
transform:translate(7px,-4px) scale(1.22);
opacity:.92;
}
51%{
transform:translate(-5px,7px) scale(.76);
opacity:.58;
}
76%{
transform:translate(4px,5px) scale(1.06);
opacity:.84;
}
}
@media (prefers-reduced-motion:reduce){
.search-ai-orb,.search-ai-orb>span,.search-ai-orb>span::before,.search-ai-orb>span::after,.search-ai-orb i,.is-searching .hero-logo{
animation:none!important;
}
}
@layer components{
.search-ai-orb::before,.search-ai-orb::after{
display:none!important;
content:none!important;
}
.query{
padding-right:0;
}
.query input{
padding-right:42px;
}
.query.has-ai-orb input{
padding-right:44px;
}
.query.has-ai-orb.has-clear-with-orb input{
padding-right:78px;
}
.search-clear{
position:absolute!important;
top:50%;
right:2px;
z-index:5;
margin-left:0!important;
transform:translateY(-50%) scale(.82)!important;
}
.query.has-value .search-clear,.query:not(.has-ai-orb).has-value .search-clear{
transform:translateY(-50%) scale(1)!important;
}
.search-clear.is-visible{
opacity:1!important;
pointer-events:auto!important;
transform:translateY(-50%) scale(1)!important;
}
.query.has-ai-orb.has-clear-with-orb .search-clear{
right:38px;
transform:translateY(-50%) scale(.92)!important;
}
.query:not(.has-ai-orb).has-value .search-clear{
right:3px;
}
.select-menu [data-root-category] .root-cat-ico[fill="currentColor"]{
fill:currentColor;
stroke:none;
}
.tool-left>.filter-dd.pseudo-select[data-filter-dd="brand"]{
width:174px;
}
}
@media (hover:hover) and (pointer:fine){
.select-menu [data-root-category]:hover,.select-menu [data-root-category]:focus-visible,.select-menu [data-root-category]:hover span,.select-menu [data-root-category]:focus-visible span{
color:var(--c-blue)!important;
}
.select-menu [data-root-category]:hover small,.select-menu [data-root-category]:focus-visible small{
color:var(--n-50)!important;
}
}

@layer components{
.filter-choice.as-check:not(.active) .check-ui [data-check="empty"]{
display:block;
}
.filter-choice.as-check.active .check-ui [data-check="on"]{
display:block;
}
.filter-choice.as-check.active:hover .check-ui [data-check="on"]{
display:none;
}
.filter-choice.as-check.active:hover .check-ui [data-check="minus"]{
display:block;
}
.filter-choice.as-check:active:not(.active) .check-ui [data-check="empty"]{
display:none;
}
.filter-choice.as-check:active:not(.active) .check-ui [data-check="press-on"]{
display:block;
}
.filter-choice.as-check:active.active .check-ui [data-check="on"],.filter-choice.as-check:active.active .check-ui [data-check="minus"]{
display:none;
}
.filter-choice.as-check:active.active .check-ui [data-check="press-off"]{
display:block;
}
}

@layer states{
body.is-searching .top-logo,
body.is-searching .hero-logo{
  pointer-events:auto!important;
  cursor:pointer!important;
}
body.is-searching .top-logo{
  position:relative!important;
  z-index:30!important;
}
}

/* step-649: keep the quick-search logo clickable above the fixed header hit area. */
@layer states{
body.is-searching .top{
  pointer-events:none!important;
}
body.is-searching .top>.actions,
body.is-searching .top-logo{
  pointer-events:auto!important;
}
body.is-searching .hero-logo{
  z-index:60!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
}


/* STEP 794 — catalog shimmer and livelier category matrix */
.select:not(.has-choice)::after{
display:none!important;
animation:none!important;
}
.select:not(.has-choice) .select-main{
overflow:hidden;
isolation:isolate;
}
.select:not(.has-choice) .select-main>*{
position:relative;
z-index:2;
}
.select:not(.has-choice) .select-main::after{
content:"";
position:absolute;
z-index:1;
top:-30%;
bottom:-30%;
left:-42%;
width:34%;
pointer-events:none;
opacity:0;
background:linear-gradient(100deg,transparent 0%,rgb(var(--rgb-surface) / .12) 18%,rgb(var(--rgb-surface) / .92) 50%,rgb(var(--rgb-surface) / .16) 82%,transparent 100%);
filter:blur(5px);
transform:translate3d(-180%,0,0) skewX(-17deg);
animation:catalogLightSweep 6s ease-in-out infinite;
will-change:transform,opacity;
}
@keyframes catalogLightSweep{
0%,52%{opacity:0;transform:translate3d(-180%,0,0) skewX(-17deg);}
56%{opacity:.05;}
62%{opacity:.88;}
80%{opacity:.5;transform:translate3d(520%,0,0) skewX(-17deg);}
84%,100%{opacity:0;transform:translate3d(560%,0,0) skewX(-17deg);}
}
.home-category-matrix__cell{
transform:translate3d(var(--matrix-enter-x),var(--matrix-enter-y),0) scale(.89);
transition:opacity .28s ease,transform .38s cubic-bezier(.16,.9,.24,1.12),filter .28s ease;
}
.home-category-matrix__cell.is-visible{
animation:matrixCellArrive .38s cubic-bezier(.16,.9,.24,1.12) both;
}
.home-category-matrix__cell.is-leaving{
transform:translate3d(0,12px,0) scale(.84);
transition-duration:.28s;
}
.home-category-matrix__image{
transition:opacity .26s ease,transform .34s cubic-bezier(.16,.9,.24,1.12),filter .26s ease;
}
.home-category-matrix__image.is-next{
transform:translate(-50%,-50%) scale(.82) rotate(-2deg);
}
.home-category-matrix__cell.is-crossfading .home-category-matrix__image:not(.is-next){
transform:translate(-50%,-50%) scale(1.08) rotate(1deg);
}
.home-category-matrix__cell.is-crossfading .home-category-matrix__image.is-next{
animation:matrixImageArrive .36s cubic-bezier(.16,.9,.24,1.12) both;
}
@keyframes matrixCellArrive{
0%{opacity:0;transform:translate3d(var(--matrix-enter-x),var(--matrix-enter-y),0) scale(.87);filter:blur(1.2px) saturate(.9);}
70%{opacity:1;transform:translate3d(0,0,0) scale(1.035);filter:blur(0) saturate(1.06);}
100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0) saturate(1);}
}
@keyframes matrixImageArrive{
0%{opacity:0;transform:translate(-50%,-50%) scale(.80) rotate(-2deg);filter:blur(1.2px) drop-shadow(0 5px 12px rgb(var(--rgb-primary) / .04));}
72%{opacity:1;transform:translate(-50%,-50%) scale(1.055) rotate(.4deg);filter:blur(0) drop-shadow(0 10px 20px rgb(var(--rgb-primary) / .11));}
100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);filter:blur(0) drop-shadow(0 8px 18px rgb(var(--rgb-primary) / .08));}
}
@media (prefers-reduced-motion:reduce){
.select:not(.has-choice) .select-main::after,.home-category-matrix__cell.is-visible,.home-category-matrix__cell.is-crossfading .home-category-matrix__image.is-next{
animation:none!important;
}
}

@media (min-width:861px){
body.is-searching:not(.search-static-route),
body.search-static-route{
--search-max:1360px;
--search-w:min(var(--search-max),calc(100vw - 120px));
}
}