@layer components{
.stock-state::after,.product-group-unavailable{
color:var(--n-54);
background:rgb(var(--rgb-surface-soft) / .82);
}
.product-row.is-unavailable .product-title{
color:var(--n-58);
}
.product-row.is-unavailable .price-card{
color:var(--n-48);
}
.icon-btn,.icon-btn.ghost,.icon-btn.remove{
transition:color .333s ease,background-color .333s ease,border-color .333s ease,opacity .333s ease!important;
}
.icon-btn:hover,.icon-btn:focus-visible,.icon-btn.ghost:hover,.icon-btn.ghost:focus-visible,.icon-btn.remove:hover,.icon-btn.remove:focus-visible{
color:var(--c-surface)!important;
background:var(--c-primary)!important;
border-color:var(--c-primary)!important;
transform:none!important;
opacity:1;
}
}
@layer components{
.results{
position:absolute;
top:calc(34% + 218px);
left:50%;
z-index:2;
width:var(--search-w);
overflow:hidden;
border:.5px solid var(--line-08);
border-radius:var(--radius-lg);
background:var(--glass);
box-shadow:var(--shadow-md);
backdrop-filter:blur(18px);
opacity:0;
transform:translate(-50%,18px);
transition:opacity var(--time-slow) var(--ease-out),transform var(--time-slow) var(--ease-out);
}
.results header{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-5);
padding:15px var(--space-5);
border-bottom:.5px solid var(--line-08);
}
.results h1,.results h2{
margin:0;
color:var(--n-80);
font-size:var(--text-xl);
font-weight:var(--w-strong);
line-height:var(--lh-title);
letter-spacing:var(--ls-tight);
}
.results header.is-empty{
display:none;
}
.results header p{
display:none;
}
.results header span{
color:var(--n-50);
font-size:var(--text-xs);
font-weight:var(--w-medium);
text-align:right;
}
.result-body{
min-height:160px;
overflow:visible;
transition:opacity var(--time-fast) ease;
}
.results.loading .result-body{
opacity:1;
}
.search-loading-state{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:220px;
padding:32px 20px;
text-align:center;
}
.search-loading-label{
background:linear-gradient(100deg,var(--c-blue) 0%,rgb(var(--rgb-primary) / .52) 35%,var(--c-blue) 58%,rgb(var(--rgb-primary) / .62) 82%,var(--c-blue) 100%);
background-size:240% 100%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
font-size:clamp(20px,2.2vw,30px);
font-weight:var(--w-bold);
line-height:1.15;
letter-spacing:-.028em;
text-wrap:balance;
animation:searchLoadingShine 2.4s linear infinite;
}
.search-loading-dots{
display:inline-flex;
align-items:center;
gap:4px;
min-width:30px;
transform:translateY(4px);
}
.search-loading-dots i{
width:5px;
height:5px;
border-radius:50%;
background:var(--c-blue);
opacity:.25;
animation:searchLoadingDot 1.05s ease-in-out infinite;
}
.search-loading-dots i:nth-child(2){animation-delay:.16s}
.search-loading-dots i:nth-child(3){animation-delay:.32s}
.empty{
padding:var(--space-8) var(--space-5);
color:var(--n-50);
text-align:center;
font-size:var(--text-md);
}
.product-table{
display:grid;
width:100%;
}
.product-group{
display:flex;
align-items:center;
min-height:30px;
padding:7px var(--space-5) 6px;
border-top:.5px solid var(--line-08);
border-bottom:.5px solid var(--line-05);
background:var(--n-05);
color:var(--c-blue);
font-size:var(--text-2xs);
font-weight:var(--w-strong);
letter-spacing:.005em;
}
.product-table .product-group:first-child{
border-top:0;
}
.product-group-depth-0{
background:var(--n-05);
color:var(--c-blue);
}
.product-group-depth-1,.product-group-depth-2,.product-group-depth-3{
background:linear-gradient(180deg,rgb(var(--rgb-surface) / .96),rgb(var(--rgb-surface-soft) / .82));
color:var(--n-62);
}
.product-group-depth-1{
font-size:var(--text-2xs);
}
.product-group-depth-2,.product-group-depth-3{
font-size:var(--text-3xs);
}
.product-group span{
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.product-brand-group{
display:flex;
align-items:center;
gap:0;
min-height:29px;
padding:5px var(--space-5);
border-bottom:.5px solid var(--line-05);
background:linear-gradient(180deg,rgb(var(--rgb-surface) / .92),rgb(var(--rgb-surface-soft) / .78));
color:var(--n-64);
font-size:var(--text-compact);
font-weight:var(--w-strong);
letter-spacing:.01em;
}
.product-brand-group>span:last-child{
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.product-title-compact{
display:inline-flex;
align-items:center;
gap:0;
}
.product-title-compact>span:last-child{
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.product-row{
display:grid;
grid-template-columns:minmax(0,1fr) 92px 148px 116px 44px;
align-items:center;
column-gap:24px;
row-gap:0;
min-height:44px;
padding:6px var(--space-5);
border-bottom:.5px solid var(--line-08);
color:var(--n-80);
transition:background var(--time-fast) ease,box-shadow var(--time-fast) ease;
}
.product-row:hover{
background:var(--product-row-bg-hover);
}
.product-row:last-child{
border-bottom:0;
}
.product-main{
min-width:0;
}
.product-title{
display:block;
max-width:100%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:var(--n-80);
font-size:var(--text-ui);
font-weight:var(--w-medium);
line-height:var(--lh-title);
letter-spacing:-.012em;
text-align:left;
}
.product-title:hover{
color:var(--c-link-hover);
text-decoration:underline;
text-decoration-style:dotted;
text-underline-offset:4px;

text-decoration-color:var(--c-link-hover);}

.product-title.product-title-compact,
.product-title-link.product-title-compact{
display:inline-flex;
align-items:center;
gap:0;
max-width:100%;
vertical-align:middle;
}
.product-stock{
display:inline-flex;
align-items:center;
justify-content:flex-end;
min-width:0;
white-space:nowrap;
}
.stock-state{
position:relative;
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:7px;
min-width:68px;
color:var(--n-52);
font-size:var(--text-2xs);
font-weight:var(--w-regular);
line-height:1;
letter-spacing:.01em;
text-align:right;
}
.stock-state small{
color:var(--n-50);
font-size:var(--text-2xs);
font-weight:var(--w-regular);
}
.stock-state::after{
content:attr(data-stock-hint);
position:absolute;
left:50%;
top:calc(100% + 8px);
z-index:30;
width:max-content;
max-width:220px;
padding:6px 8px;
border:.5px solid var(--line-08);
border-radius:var(--radius-xs);
background:rgb(var(--rgb-surface) / .96);
color:var(--n-70);
box-shadow:var(--shadow-sm);
font-size:var(--text-2xs);
font-weight:var(--w-regular);
line-height:1.25;
white-space:normal;
opacity:0;
pointer-events:none;
transform:translate(-50%,-3px) scale(.98);
transition:opacity var(--time-fast) ease,transform var(--time-fast) var(--ease-out);
}
.stock-state:hover::after{
opacity:1;
transform:translate(-50%,0) scale(1);
}
.product-price{
display:flex;
justify-content:flex-end;
min-width:0;
text-align:right;
}
.price-card{
position:relative;
display:grid;
align-content:center;
justify-items:stretch;
width:138px;
height:32px;
min-height:32px;
padding:4px 9px;
border:.5px solid var(--price-card-border);
border-radius:var(--radius-control);
background:var(--price-card-bg);
color:var(--price-card-ink-active);
font-variant-numeric:tabular-nums;
line-height:var(--lh-tight);
white-space:nowrap;
overflow:visible;
transition:border-color var(--time-fast) ease,background var(--time-fast) ease,box-shadow var(--time-fast) ease,transform var(--time-fast) ease;
}
.price-card:hover,.price-card:focus-visible{
border-color:var(--price-card-border-hover);
background:var(--price-card-bg-hover);
box-shadow:0 8px 20px rgb(var(--rgb-primary) / .08);
scale:1.02;
}
.price-card>span{
display:grid;
grid-template-columns:24px minmax(70px,1fr);
align-items:baseline;
width:100%;
}
.price-card em{
color:var(--price-card-ink-muted);
font-size:var(--text-compact);
font-style:normal;
font-weight:var(--w-regular);
letter-spacing:-.01em;
text-align:left;
}
.price-card b{
color:var(--price-card-ink-active);
font-size:var(--text-ui);
font-weight:var(--w-medium);
letter-spacing:-.012em;
text-align:right;
}
.price-card small{
position:absolute;
right:8px;
bottom:-8px;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:3px;
max-width:calc(100% - 24px);
padding:0 6px;
border-radius:var(--radius-pill);
background:var(--price-note-bg);
color:var(--price-note-ink);
box-shadow:0 0 0 4px var(--price-note-mask);
font-size:9.4px;
font-weight:var(--w-regular);
line-height:1.15;
text-align:right;
transition:color var(--time-fast) ease,background var(--time-fast) ease,box-shadow var(--time-fast) ease,transform var(--time-fast) ease;
}
.price-card small span{
color:inherit;
}
.price-card small b{
color:inherit;
font-size:inherit;
font-weight:var(--w-regular);
letter-spacing:-.01em;
}
.product-row:hover .price-card small{
background:var(--price-note-bg-row-hover);
box-shadow:0 0 0 4px var(--price-note-mask-row-hover);
}
.price-card:hover small,.price-card:focus-visible small{
color:var(--price-note-ink-hover);
scale:1.02;
}
.price-card.as-total{
background:var(--price-card-bg-active);
border-color:var(--price-card-border-active);
}
.price-card.as-total small{
background:var(--price-note-bg);
box-shadow:0 0 0 4px var(--price-note-mask);
}
.price-card.quote{
display:grid;
place-items:center end;
color:var(--n-48);
font-size:var(--text-ui-sm);
font-weight:var(--w-regular);
}
.price-tag{
display:grid;
grid-template-columns:24px minmax(54px,1fr);
align-items:baseline;
width:104px;
min-width:104px;
color:var(--c-blue);
font-variant-numeric:tabular-nums;
line-height:var(--lh-tight);
white-space:nowrap;
}
.price-tag>span{
color:var(--n-45);
font-size:var(--text-compact);
font-weight:var(--w-regular);
letter-spacing:-.01em;
text-align:left;
}
.price-tag>b{
color:var(--price-card-ink-active);
font-size:var(--text-ui);
font-weight:var(--w-medium);
letter-spacing:-.012em;
text-align:right;
}
.price-tag.quote{
display:block;
width:104px;
min-width:104px;
color:var(--n-45);
font-size:var(--text-ui-sm);
font-weight:var(--w-regular);
text-align:right;
}
.product-actions-group{
display:inline-flex;
align-items:center;
justify-content:flex-end;
justify-self:end;
gap:3px;
width:36px;
height:32px;
padding:1px 3px;
border:.5px solid rgb(var(--rgb-line) / .18);
border-radius:var(--radius-control);
background:rgb(var(--rgb-surface) / .50);
overflow:visible;
transition:width var(--time-fast) var(--ease-out),border-color var(--time-fast) ease,background var(--time-fast) ease;
}
.product-row.in-cart .product-actions-group{
width:68px;
border-color:var(--c-blue-16);
background:rgb(var(--rgb-surface) / .66);
}
.result-body{
overflow-x:auto;
}
.product-table{
min-width:var(--feature-min-w,640px);
}
.product-head{
position:sticky;
top:0;
z-index:2;
display:grid;
align-items:center;
min-height:30px;
padding:6px var(--space-5);
border-bottom:.5px solid var(--line-08);
background:rgb(var(--rgb-surface) / .96);
color:var(--n-50);
font-size:var(--text-2xs);
font-weight:var(--w-strong);
letter-spacing:.055em;
text-transform:uppercase;
backdrop-filter:blur(12px);
}
.product-head.no-feature-cols{
grid-template-columns:minmax(0,1fr) 92px 148px 116px 44px;
column-gap:24px;
}
.product-head span{
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.product-head span:nth-last-child(-n+4){
text-align:right;
}
.product-head.has-feature-cols span:not(:first-child){
text-align:right;
}
.product-feature-cell{
min-width:0;
color:var(--n-60);
font-size:var(--text-xs);
font-weight:var(--w-medium);
line-height:var(--lh-title);
text-align:right;
font-variant-numeric:tabular-nums;
}
.product-feature-cell span{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.product-feature-cell .feature-inch{
cursor:help;
text-decoration:underline dotted var(--c-link-border);
text-underline-offset:3px;
}
.product-feature-cell .feature-empty{
color:var(--n-40);
font-weight:var(--w-regular);
}
.product-row:hover .product-feature-cell{
color:var(--n-70);
}
.stock-state{
min-width:28px;
gap:0;
}
.product-feature-cell .feature-inch{
text-decoration-thickness:.08em;
}
.product-head{
font-size:var(--text-micro);
}
.price-card{
width:123px;
border-radius:var(--radius-sm);
background:var(--c-surface);
}
.price-card:hover,.price-card:focus-visible{
background:var(--c-surface);
}
.price-card>span{
grid-template-columns:22px minmax(62px,1fr);
}
.price-card small{
right:7px;
bottom:-8px;
padding:0;
border-radius:0;
background:transparent!important;
box-shadow:none!important;
isolation:isolate;
}
.price-card small::before{
content:"";
position:absolute;
left:-5px;
right:-5px;
top:50%;
z-index:-1;
height:1px;
background:var(--c-surface);
transform:translateY(-50%);
}
.price-card small span,.price-card small b{
position:relative;
z-index:1;
}
.product-row:hover .price-card small::before{
background:var(--product-row-bg-hover);
}
.price-card.as-total{
background:var(--c-surface);
}
.price-card.as-total small{
background:transparent!important;
box-shadow:none!important;
}
.stock-state{
color:var(--n-54);
}
.stock-icon{
position:relative;
display:inline-grid;
place-items:center;
width:23px;
height:18px;
color:var(--n-54);
}
.stock-icon svg{
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:1.25;
overflow:visible;
}
.stock-icon.level-0{
color:var(--n-40);
opacity:.72;
}
.stock-icon.level-1{
color:var(--c-warning);
}
.stock-icon.level-2{
color:var(--c-warning);
}
.stock-icon.level-3{
color:var(--c-text-muted);
}
.stock-icon.level-4{
color:var(--c-blue);
}
.stock-state .stock-icon{
min-width:23px;
}
.product-specs .stock-icon,.product-spec-list .stock-icon{
vertical-align:middle;
margin-right:4px;
}
.product-spec-list .stock-dd{
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:6px;
}
.result-body{
overflow:visible!important;
}
.product-table{
min-width:0!important;
overflow:visible!important;
}
.product-head.no-feature-cols,.product-row.no-feature-cols{
grid-template-columns:minmax(0,1fr) 92px 133px 116px 74px!important;
}
.product-head.has-feature-cols,.product-row.has-feature-cols{
grid-template-columns:minmax(0,1.22fr) repeat(var(--feature-cols),minmax(78px,.42fr)) 70px 133px 116px 74px!important;
}
.results--catalog-content .product-head.no-feature-cols,
.results--catalog-content .product-row.no-feature-cols{
grid-template-columns:minmax(0,1fr) 92px 133px 116px 28px!important;
column-gap:16px;
}
.results--catalog-content .product-head.has-feature-cols,
.results--catalog-content .product-row.has-feature-cols{
grid-template-columns:minmax(0,1.22fr) repeat(var(--feature-cols),minmax(78px,.42fr)) 70px 133px 116px 28px!important;
column-gap:16px!important;
}
.product-head.has-feature-cols{
column-gap:24px!important;
}
.product-head span{
font-size:var(--text-micro);
}
.product-head-help{
display:inline-flex!important;
align-items:center;
justify-content:flex-end;
gap:4px;
min-width:0;
}
.product-head-help>span{
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.product-head-help button{
display:inline-grid;
place-items:center;
width:16px;
height:16px;
border-radius:var(--radius-pill);
color:var(--n-42);
background:transparent;
transition:color .333s ease,background-color .333s ease;
}
.product-head-help button:hover,.product-head-help button:focus-visible{
color:var(--c-surface);
background:var(--c-primary);
}
.product-head-help svg{
width:13px;
height:13px;
}
.product-row{
transition:background-color .22s ease,box-shadow .22s ease;
}
.product-row.is-row-active{
background:rgb(var(--rgb-primary) / .075)!important;
box-shadow:inset 3px 0 0 rgb(var(--rgb-primary) / .46);
}
.product-row.is-row-active .product-title{
color:var(--c-primary);
}
.product-actions-group,.product-row.in-cart .product-actions-group{
width:72px!important;
border-color:transparent!important;
background:transparent!important;
transition:none!important;
}
.results--catalog-content .product-actions-group,
.results--catalog-content .product-row.in-cart .product-actions-group{
width:28px!important;
min-width:28px;
padding:0;
justify-content:center;
}
.product-actions-group .icon-btn,.product-actions-group .icon-btn.ghost,.product-actions-group .icon-btn.remove{
width:28px;
height:28px;
}
.price-card,.price-card:hover,.price-card:focus-visible,.price-card.as-total{
background:transparent!important;
transform:none!important;
box-shadow:none!important;
}
.price-card:hover b,.price-card:focus-visible b,.price-card:hover small,.price-card:focus-visible small{
color:var(--c-primary)!important;
}
.price-card small,.price-card.as-total small,.product-row:hover .price-card small{
right:9px!important;
bottom:-6px!important;
padding:0 5px!important;
background:transparent!important;
box-shadow:none!important;
opacity:1!important;
color:var(--price-note-ink-hover)!important;
}
.price-card small::before{
content:"";
position:absolute;
left:-4px;
right:-4px;
top:50%;
z-index:0;
height:5px;
background:var(--c-surface);
transform:translateY(-50%);
}
.product-row:hover .price-card small::before{
background:var(--product-row-bg-hover);
}
.product-row.is-row-active .price-card small::before{
background:rgb(var(--rgb-primary) / .075);
}
.price-card small span,.price-card small b{
position:relative;
z-index:1;
}
.product-group{
display:grid!important;
grid-template-columns:minmax(0,1fr) 24px;
align-items:center;
gap:8px;
min-height:44px!important;
padding:6px var(--space-5)!important;
background:rgb(var(--rgb-surface-soft) / .92)!important;
color:var(--n-50)!important;
font-size:var(--text-micro-lg)!important;
font-weight:700!important;
letter-spacing:.13em!important;
text-transform:uppercase;
}
.product-group>a:first-child{
min-width:0;
overflow:hidden;
color:inherit;
text-decoration:none;
}
.product-group>a:first-child:hover,.product-group>a:first-child:focus-visible{
color:var(--c-link-hover);
}
.product-group span{
display:block;
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.product-group-unavailable{
grid-template-columns:1fr!important;
color:var(--n-48)!important;
}
.results header [data-results-summary]{
display:inline-flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}
.results header [data-results-summary] .summary-hidden-groups{
display:inline-flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
color:var(--n-54);
font-size:var(--text-compact);
font-weight:640;
line-height:1;
}
.results header [data-results-summary] .summary-hidden-groups>span:first-child{
display:inline-flex;
align-items:center;
min-height:22px;
line-height:1;
}
.results header [data-results-summary] button{
appearance:none;
font:inherit;
cursor:pointer;
}
.results header [data-results-summary] .summary-chip{
display:inline-flex;
align-items:center;
justify-content:center;
height:22px;
min-height:22px;
padding:0 var(--space-2);
border:.5px solid rgb(var(--rgb-muted) / .16);
border-radius:var(--radius-pill);
background:rgb(var(--rgb-surface) / .66);
color:var(--n-52);
font-size:var(--text-compact);
font-weight:800;
line-height:1;
white-space:nowrap;
}
.results header [data-results-summary] .summary-chip-main{
color:var(--n-60);
background:rgb(var(--rgb-surface-soft) / .72);
}
.results header [data-results-summary] .summary-chip-muted{
color:var(--c-stat-muted);
}
.results header [data-results-summary] .summary-chip-action,.results header [data-results-summary] .summary-chip-help{
color:var(--c-tag-text);
border-color:var(--c-link-border);
background:var(--c-tag-bg);
transition:background-color .333s ease,color .333s ease,border-color .333s ease;
}
.results header [data-results-summary] .summary-chip-no-brand{
color:var(--c-warning);
border-color:rgb(var(--rgb-warning) / .24);
background:rgb(var(--rgb-warning) / .13);
}
.results header [data-results-summary] .summary-chip-used{
color:var(--c-magenta);
border-color:rgb(var(--rgb-magenta) / .22);
background:rgb(var(--rgb-magenta) / .10);
}
.results header [data-results-summary] .summary-chip-return{
color:var(--c-teal);
border-color:rgb(var(--rgb-teal) / .20);
background:rgb(var(--rgb-teal) / .08);
}
.results header [data-results-summary] .summary-chip-action:hover,.results header [data-results-summary] .summary-chip-action:focus-visible,.results header [data-results-summary] .summary-chip-help:hover,.results header [data-results-summary] .summary-chip-help:focus-visible{
color:var(--c-tag-hover-text);
border-color:var(--c-danger);
background:var(--c-tag-hover-bg);
}
@media (max-width:760px){
.results header [data-results-summary]{
gap:5px;
}
.results header [data-results-summary] .summary-hidden-groups>span:first-child{
min-height:20px;
}
.results header [data-results-summary] .summary-chip{
height:20px;
min-height:20px;
padding:0 7px;
font-size:var(--text-3xs);
}
}
.stock-icon svg,.stock-icon svg *{
stroke-width:2!important;
vector-effect:non-scaling-stroke;
}
.stock-state .stock-icon{
min-width:25px;
}
.stock-icon svg{
width:25px;
height:25px;
}
.product-group{
display:flex!important;
align-items:center;
justify-content:flex-start;
gap:0;
grid-template-columns:none!important;
}
.product-group-link{
display:inline-flex!important;
align-items:center;
gap:7px;
max-width:100%;
color:inherit;
text-decoration:none;
}
.product-group-link span{
display:inline-block!important;
flex:0 1 auto;
min-width:0;
max-width:min(560px,76vw);
}
.product-group-link svg{
flex:0 0 auto;
width:13px;
height:13px;
color:var(--n-42);
fill:none;
stroke:currentColor;
stroke-width:1.45;
transition:color .333s ease;
}
.product-group-link:hover,.product-group-link:focus-visible{
color:var(--c-link-hover);
}
.product-group-link:hover svg,.product-group-link:focus-visible svg{
color:var(--c-link-hover);
}
.product-group-unavailable{
justify-content:flex-start;
}
.price-card,.price-card:hover,.price-card:focus-visible,.price-card.as-total{
background:transparent!important;
box-shadow:none!important;
transform:none!important;
}
.price-card,.price-card b,.price-card:hover b,.price-card:focus-visible b{
color:var(--n-88)!important;
}
.price-card em,.price-card:hover em,.price-card:focus-visible em{
color:var(--n-48)!important;
}
.price-card small,.price-card.as-total small,.product-row:hover .price-card small{
right:7px!important;
bottom:-6px!important;
padding:0 2px!important;
background:transparent!important;
box-shadow:none!important;
opacity:1!important;
color:var(--n-54)!important;
transform:none!important;
}
.price-card small::before{
content:"";
position:absolute;
left:-2px!important;
right:-2px!important;
top:50%;
z-index:0;
height:6px;
background:var(--c-surface);
transform:translateY(-50%);
transition:background-color .22s ease;
}
.product-row:hover .price-card small::before{
background:var(--product-row-bg-hover)!important;
}
.product-row.is-row-active .price-card small::before{
background:rgb(var(--rgb-primary) / .075)!important;
}
.price-card.as-total,.product-row.in-cart .price-card,.product-row.in-cart .price-card b,.product-row.in-cart .price-card small,.price-card.as-total b,.price-card.as-total small,.price-card.as-total small b{
color:var(--c-primary)!important;
}
.price-card small span,.price-card small b{
position:relative;
z-index:1;
}
.product-head-help button svg,.summary-help svg{
fill:none!important;
stroke:currentColor!important;
stroke-width:1!important;
stroke-linecap:round;
stroke-linejoin:round;
}
.product-row{
--price-note-row-mask:var(--c-surface);
--price-note-row-bg:transparent;
}
.product-row:hover{
--price-note-row-mask:var(--c-surface-soft);
background:var(--c-surface-soft)!important;
}
.product-row.is-row-active{
--price-note-row-mask:var(--c-surface-soft);
background:var(--c-surface-soft)!important;
}
.price-card small::before,.product-row:hover .price-card small::before,.product-row.is-row-active .price-card small::before{
background:var(--price-note-row-mask)!important;
}
.product-actions-group .icon-btn.remove:hover,.product-actions-group .icon-btn.remove:focus-visible{
color:var(--c-surface)!important;
background:var(--c-danger)!important;
border-color:var(--c-danger)!important;
}
.stock-state,.stock-state small,.stock-icon,.stock-icon svg{
color:var(--n-88)!important;
}
.results header [data-results-summary]:empty{
display:none!important;
}
.product-head-help button,.product-head-help button:hover,.product-head-help button:focus-visible{
border:0!important;
background:transparent!important;
box-shadow:none!important;
}
.product-head-help button:hover,.product-head-help button:focus-visible{
color:var(--c-primary)!important;
}
.product-row:hover .qty,.product-row:hover .qty input,.product-row.is-row-active .qty,.product-row.is-row-active .qty input{
background:var(--c-surface)!important;
}
.price-card small::before,.product-row:hover .price-card small::before,.product-row.is-row-active .price-card small::before{
top:-1px!important;
bottom:-1px!important;
left:-2px!important;
right:-2px!important;
height:auto!important;
border-radius:var(--radius-pill);
background:var(--price-note-row-mask)!important;
transform:none!important;
}
.product-group+.product-head{
position:static!important;
top:auto!important;
z-index:1;
border-top:0;
background:rgb(var(--rgb-surface) / .98);
backdrop-filter:none;
}
.product-head,.product-table .product-head{
background:var(--table-head-bg-soft,var(--c-surface-muted))!important;
color:var(--table-head-ink-soft,var(--c-stat-muted))!important;
backdrop-filter:none!important;
}
.product-head span,.product-head button,.product-head-help,.product-head-help>span{
color:var(--table-head-ink-soft,var(--c-stat-muted))!important;
}
.product-head-help button:hover,.product-head-help button:focus-visible{
color:var(--c-surface)!important;
background:var(--c-blue,var(--c-primary))!important;
}
.stock-state.hint-up::after,.stock-state[data-hint-flow="up"]::after{
top:auto!important;
bottom:calc(100% + 8px)!important;
transform:translate(-50%,3px) scale(.98)!important;
}
.stock-state.hint-up:hover::after,.stock-state.hint-up:focus-visible::after,.stock-state[data-hint-flow="up"]:hover::after,.stock-state[data-hint-flow="up"]:focus-visible::after{
transform:translate(-50%,0) scale(1)!important;
}
.product-table .product-row,.product-table .product-title,.product-table .price-card,.product-table .price-card b,.product-table .qty input{
color:var(--site-ink-main,var(--c-ink))!important;
}
.product-table .product-feature-cell,.product-table .product-price em,.product-table .price-card em,.product-table .price-card small,.product-table .price-card small span,.product-table .price-card small b,.product-table .stock-state,.product-table .stock-state small,.product-table .stock-dd{
color:var(--site-ink-muted,var(--c-text-faint))!important;
}
.product-table .stock-icon,.product-table .stock-icon.level-0,.product-table .stock-icon.level-1,.product-table .stock-icon.level-2,.product-table .stock-icon.level-3,.product-table .stock-icon.level-4,.product-table .stock-icon svg{
color:var(--site-ink-main,var(--c-ink))!important;
opacity:1!important;
}
.product-group{
letter-spacing:.1em!important;
}
.product-table .product-title:hover,.product-table .product-title:focus-visible{
color:var(--c-blue,var(--c-primary))!important;
}
}
@layer states{
.is-searching .results:not([hidden]){
position:relative;
top:auto;
left:auto;
width:var(--search-w);
margin:var(--search-results-offset) auto 0;
opacity:1;
transform:translateY(0);
}
.product-row.in-cart .qty{
border-color:var(--c-blue-16);
background:rgb(var(--rgb-primary) / .035);
}
.product-row.in-cart .qty input{
background:var(--c-blue-08);
color:var(--n-80);
}
.product-row.qty-live{
box-shadow:inset 3px 0 0 rgb(var(--rgb-primary) / .20);
}
}

@layer components{
.product-load-more{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:14px 16px 16px;
border-top:.5px solid var(--line-08);
background:rgb(var(--rgb-surface) / .76);
color:var(--n-54);
font-size:var(--text-ui-sm);
}
.product-load-more button{
appearance:none;
border:.5px solid rgb(var(--rgb-primary) / .22);
border-radius:var(--radius-pill);
background:var(--c-surface);
color:var(--c-primary);
font:inherit;
font-weight:800;
line-height:1;
padding:8px 13px;
cursor:pointer;
transition:background-color .333s ease,color .333s ease,border-color .333s ease;
}
.product-load-more button:hover,.product-load-more button:focus-visible{
background:var(--c-primary);
border-color:var(--c-primary);
color:var(--c-surface);
}
.product-load-more-auto{
height:1px;
min-height:1px;
padding:0;
border:0;
background:transparent;
pointer-events:none;
}
}

@layer components{
.product-main{
display:grid;
grid-template-columns:32px minmax(0,1fr);
align-items:center;
gap:10px;
}
.product-thumb{
position:relative;
display:grid;
place-items:center;
width:32px;
height:32px;
min-width:32px;
border:0;
border-radius:var(--radius-compact-lg);
background:transparent;
overflow:hidden;
}
.product-thumb img{
position:relative;
z-index:1;
display:block;
width:100%;
height:100%;
object-fit:contain;
opacity:1;
transform:scale(1);
}
.js .product-thumb img{
opacity:0;
transform:scale(.94);
transition:opacity .36s ease,transform .44s var(--ease-out);
}
.js .product-thumb img.is-loaded{
opacity:1;
transform:scale(1);
}
.js .product-thumb:not(.is-loaded):not(.is-empty) svg{
opacity:.24;
}
.product-thumb svg{
position:absolute;
inset:7px;
width:18px;
height:18px;
color:var(--n-34);
opacity:0;
}
.product-thumb.is-empty svg{
opacity:.72;
}
.product-title.product-title-rich,
.product-title-link.product-title-rich{
display:block;
width:100%;
min-width:0;
max-width:100%;
text-align:left;
}
.product-title-content{
display:block;
min-width:0;
max-width:100%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.product-title-text{
display:inline;
}
.product-brand-inline{
display:inline;
margin-right:6px;
color:var(--n-54);
font-size:var(--text-ui-sm);
font-weight:var(--w-bold);
line-height:inherit;
letter-spacing:.015em;
vertical-align:baseline;
}
.results--catalog-content .result-body,
.results--catalog-content .product-table,
.results--catalog-content .product-row{
width:100%;
max-width:100%;
min-width:0;
box-sizing:border-box;
}
.results--catalog-content .product-row{
min-height:56px;
}
.results--catalog-content .product-main,
.results--catalog-content .product-title,
.results--catalog-content .product-title-content{
min-width:0;
max-width:100%;
overflow:hidden;
}
.results--catalog-content .product-title-content{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
max-height:2.4em;
white-space:normal;
text-overflow:ellipsis;
line-height:1.2;
}
.product-feature-cell,
.product-feature-cell.is-text,
.product-head .feature-head.is-text{
text-align:left;
}
.product-feature-cell.is-numeric,
.product-head .feature-head.is-numeric{
text-align:right;
font-variant-numeric:tabular-nums;
}
.product-feature-cell>span{
width:100%;
}
}

@keyframes searchLoadingShine{
0%{background-position:180% 50%}
100%{background-position:-60% 50%}
}
@keyframes searchLoadingDot{
0%,60%,100%{opacity:.22;transform:translateY(0) scale(.82)}
30%{opacity:1;transform:translateY(-4px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
.search-loading-label,.search-loading-dots i{animation:none!important}
.search-loading-label{background-position:50% 50%}
.search-loading-dots i{opacity:.72;transform:none}
}