body.stnc-catalog-test{
background:#f3f6f9;
}
body.stnc-filter-open{
overflow:hidden;
}
.stnc-page,
.stnc-page *{
box-sizing:border-box;
}
.stnc-page{
width:100%;
padding:0 0 55px;
color:#172033;
}
.stnc-catalog-hero{
width:calc(100% - 28px)!important;
max-width:1214px!important;
margin:0 auto 10px!important;
padding-left:0!important;
padding-right:0!important;
}
body:not(.home) .stnc-page > .stnc-catalog-hero > .entry-hero-container-inner{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
.stnc-shell{
width:calc(100% - 28px);
max-width:1214px;
margin:0 auto;
padding:22px;
background:#ffffff;
border:1px solid #d7dfe7;
border-radius:22px;
box-shadow:0 10px 30px rgba(15,23,42,.075);
}
.stnc-results-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:12px;
padding-bottom:12px;
border-bottom:1px solid #dfe5eb;
}
.stnc-current-category{
min-width:0;
color:#172033;
font-size:25px;
line-height:1.15;
font-weight:850;
letter-spacing:-.025em;
}
.stnc-search{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
width:min(100%,500px);
margin-left:auto;
}
.stnc-search input{
min-width:0;
min-height:44px;
margin:0;
padding:10px 13px;
background:#ffffff;
color:#172033;
border:1px solid #cbd4de;
border-radius:9px;
font-family:inherit;
font-size:13px;
outline:none;
}
.stnc-search input:focus{
border-color:#aeb7c3;
box-shadow:0 0 0 3px rgba(15,23,42,.05);
}
.stnc-search button{
min-height:44px;
padding:9px 16px;
background:#172033;
color:#ffffff;
border:0;
border-radius:9px;
font-family:inherit;
font-size:12px;
font-weight:800;
cursor:pointer;
}
.stnc-search button:hover{
background:#293449;
}
.stnc-mobile-filter-button{
display:none;
}
.stnc-layout{
display:grid;
grid-template-columns:236px minmax(0,1fr);
gap:26px;
align-items:start;
}
.stnc-sidebar{
position:relative;
top:auto;
padding:14px;
background:#eef2f6;
border:1px solid #d2dae4;
border-radius:14px;
box-shadow:0 4px 14px rgba(15,23,42,.055);
}
.stnc-sidebar-head{
display:none;
}
.stnc-filter-section + .stnc-filter-section{
margin-top:19px;
padding-top:18px;
border-top:1px solid #e5e7eb;
}
.stnc-filter-title{
margin-bottom:9px;
color:#4b5563;
font-size:10px;
line-height:1.2;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}
.stnc-category-list{
display:grid;
gap:4px;
}
.stnc-category-group-title{
display:block;
margin:2px 8px 6px;
color:#475467;
font-size:9px;
line-height:1.2;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}
.stnc-category-group-categories{
display:block;
margin:13px 8px 5px;
padding-top:12px;
border-top:1px solid #d5dde6;
}
.stnc-category-list a.stnc-equipment-link,
.stnc-category-list a.stnc-other-link{
min-height:39px;
margin-bottom:3px;
padding:8px 10px;
background:#ffffff;
border-color:#cbd5df;
border-radius:10px;
box-shadow:0 3px 10px rgba(15,23,42,.06);
}
.stnc-category-list a.stnc-equipment-link.is-active,
.stnc-category-list a.stnc-other-link.is-active{
padding-left:14px;
background:#fff7f7;
border-color:#edbfc2;
box-shadow:0 4px 12px rgba(215,25,32,.08);
}
.stnc-category-list a.stnc-equipment-link:hover,
.stnc-category-list a.stnc-other-link:hover{
background:#ffffff;
border-color:#aebbc8;
transform:translateY(-1px);
box-shadow:0 5px 13px rgba(15,23,42,.065);
}
.stnc-category-list a.stnc-equipment-link.is-active:hover,
.stnc-category-list a.stnc-other-link.is-active:hover{
background:#fff7f7;
border-color:#e7aeb2;
}
.stnc-category-list a{
position:relative;
display:flex;
align-items:center;
min-height:37px;
padding:7px 9px;
color:#253247;
border:1px solid transparent;
border-radius:8px;
font-size:12px;
line-height:1.3;
font-weight:700;
text-decoration:none;
transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.stnc-category-list a:hover{
background:rgba(255,255,255,.6);
border-color:transparent;
color:#172033;
transform:translateX(1px);
}
.stnc-category-list a.is-active{
padding-left:13px;
background:#ffffff;
color:#b9141a;
border-color:#ebc3c6;
box-shadow:0 3px 10px rgba(15,23,42,.055);
}
.stnc-category-list a.is-active::before{
content:"";
position:absolute;
top:7px;
bottom:7px;
left:5px;
width:3px;
background:#d71920;
border-radius:999px;
}
.stnc-filter-form{
margin-top:19px;
padding-top:18px;
border-top:1px solid #d5dde6;
}
.stnc-filter-form .stnc-filter-title{
margin:0 8px 9px;
color:#475467;
font-size:9px;
line-height:1.2;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
}
.stnc-radio{
display:flex;
align-items:center;
gap:8px;
min-height:32px;
color:#505967;
font-size:12px;
line-height:1.3;
cursor:pointer;
}
.stnc-radio input{
width:15px;
height:15px;
margin:0;
accent-color:#d71920;
}
.stnc-apply{
width:100%;
min-height:40px;
margin-top:20px;
padding:8px 12px;
background:#d71920;
color:#ffffff;
border:1px solid #d71920;
border-radius:8px;
font-family:inherit;
font-size:11px;
font-weight:800;
cursor:pointer;
}
.stnc-apply:hover{
background:#bd161c;
border-color:#bd161c;
}
.stnc-reset{
display:flex;
align-items:center;
justify-content:center;
min-height:36px;
margin-top:7px;
padding:7px 10px;
background:#ffffff;
color:#667080;
border:1px solid #e1e5ea;
border-radius:8px;
font-size:10px;
font-weight:750;
text-decoration:none;
transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.stnc-reset:hover{
background:#fffafa;
color:#c5171e;
border-color:#ebc3c6;
}
.stnc-results{
min-width:0;
}
.stnc-results-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
min-height:42px;
margin-bottom:12px;
padding:0 1px;
}
.stnc-results-count{
color:#7a828e;
font-size:11px;
line-height:1.3;
font-weight:700;
white-space:nowrap;
}
.stnc-sort-form{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
margin-left:auto;
}
.stnc-sort-form label{
margin:0;
color:#667080;
font-size:11px;
line-height:1.2;
font-weight:750;
white-space:nowrap;
}
.stnc-sort-form select{
min-width:190px;
min-height:38px;
margin:0;
padding:7px 34px 7px 11px;
background:#ffffff;
color:#273244;
border:1px solid #dfe3e8;
border-radius:8px;
font-family:inherit;
font-size:11px;
font-weight:700;
outline:none;
cursor:pointer;
}
.stnc-sort-form select:focus{
border-color:#b9c1cc;
box-shadow:0 0 0 3px rgba(15,23,42,.045);
}
.stnc-sort-form noscript button{
min-height:38px;
padding:7px 11px;
background:#172033;
color:#ffffff;
border:0;
border-radius:8px;
font-family:inherit;
font-size:10px;
font-weight:800;
}
.stnc-active-filters{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
margin-bottom:12px;
}
.stnc-active-filters span{
display:inline-flex;
align-items:center;
min-height:27px;
padding:5px 9px;
background:#f2f4f6;
color:#505967;
border:1px solid #e0e4e8;
border-radius:999px;
font-size:10px;
font-weight:700;
}
.stnc-active-filters a.stnc-active-reset{
display:inline-flex;
align-items:center;
gap:4px;
min-height:27px;
padding:5px 9px;
background:#ffffff;
color:#b8171d;
border:1px solid #ebcfd1;
border-radius:999px;
font-size:10px;
font-weight:800;
text-decoration:none;
transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.stnc-active-filters a.stnc-active-reset:hover{
background:#fff5f5;
border-color:#e5b6b9;
transform:translateY(-1px);
}
.stnc-active-filters a.stnc-active-reset span{
min-height:0;
padding:0;
background:transparent;
color:inherit;
border:0;
border-radius:0;
font-size:13px;
line-height:1;
}
.stnc-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
align-items:stretch;
}
.stnc-card{
position:relative;
display:flex;
flex-direction:column;
min-width:0;
overflow:hidden;
background:#ffffff;
border:1px solid #d6dee6;
border-radius:12px;
box-shadow:0 3px 10px rgba(15,23,42,.055);
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.stnc-card.stnc-has-admin-edit .stnc-card-title{padding-right:74px}
.stnc-admin-edit{
position:absolute;
z-index:8;
top:8px;
right:8px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:4px;
min-height:28px;
padding:4px 8px;
border:1px solid #efb4b8;
border-radius:999px;
background:rgba(255,255,255,.96);
box-shadow:0 3px 10px rgba(15,23,42,.08);
color:#b3151b!important;
font-size:10px;
line-height:1;
font-weight:850;
text-decoration:none!important;
}
.stnc-admin-edit span{font-size:14px;line-height:1}
.stnc-admin-edit strong{font-size:9px;line-height:1}
.stnc-admin-edit:hover,.stnc-admin-edit:focus-visible{border-color:#d71920;background:#d71920;color:#fff!important;outline:none}
@media(max-width:520px){.stnc-admin-edit{width:30px;min-height:30px;padding:4px}.stnc-admin-edit strong{display:none}.stnc-card.stnc-has-admin-edit .stnc-card-title{padding-right:44px}}
.stnc-card:hover{
transform:translateY(-3px);
border-color:#d3d8de;
box-shadow:0 10px 24px rgba(15,23,42,.09);
}
.stnc-card-title{
display:flex;
align-items:center;
justify-content:center;
min-height:70px;
padding:9px 10px 7px;
}
.stnc-card-title h2{
width:100%;
margin:0;
color:#172033;
font-size:12px;
line-height:1.32;
font-weight:750;
text-align:center;
overflow-wrap:anywhere;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
}
.stnc-card-title a{
color:#172033;
text-decoration:none;
}
.stnc-card-title a:hover{
color:#d71920;
}
.stnc-image{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:170px;
padding:8px;
background:#ffffff;
overflow:hidden;
text-decoration:none;
}
.stnc-image img{
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
margin:auto;
object-fit:contain;
object-position:center;
transition:transform .22s ease;
}
.stnc-card:hover .stnc-image img{
transform:scale(1.035);
}
.stnc-no-image{
color:#9299a3;
font-size:11px;
}
.stnc-card-content{
display:flex;
flex-direction:column;
flex:1;
padding:9px 10px 10px;
}
.stnc-badge-wrap{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:5px;
min-height:27px;
margin-bottom:7px;
}
.stnc-badge{
display:inline-flex;
align-items:center;
justify-content:center;
max-width:100%;
min-height:23px;
padding:4px 7px;
background:#f2f3f5;
color:#555f6d;
border:1px solid #dfe2e6;
border-radius:999px;
font-size:8px;
line-height:1.15;
font-weight:800;
text-align:center;
}
.stnc-badge-new{
background:#eef4fb;
color:#315b86;
border-color:#d9e6f3;
}
.stnc-badge-demo{
background:#fff7e8;
color:#8a5a00;
border-color:#eeddbb;
}
.stnc-badge-used{
background:#f2f3f5;
color:#555f6d;
border-color:#dfe2e6;
}
.stnc-tag-separator{color:#7c9183;font-size:inherit}
.stnc-promotions-cloud{margin:0 0 17px;padding:13px;border:1px solid #f2c8ca;border-radius:13px;background:linear-gradient(145deg,#fff7f7,#fff)}
.stnc-promotions-cloud .stnc-category-group-title{margin:0 0 8px;color:#b3151b}
.stnc-promotions-cloud .stnc-promotions-link{margin:0;border-color:#efb9bc;background:#fff;color:#a10f15;box-shadow:0 4px 12px rgba(179,21,27,.06)}
.stnc-promotions-cloud .stnc-promotions-link+.stnc-promotions-link{margin-top:7px}
.stnc-promotions-cloud .stnc-promotions-link:hover,.stnc-promotions-cloud .stnc-promotions-link:focus-visible{border-color:#b3151b;background:#fff1f2;color:#8f0d12}
.stnc-immediate-state-cloud{margin:0 0 17px;padding:13px;border:1px solid #cfe6d7;border-radius:13px;background:linear-gradient(145deg,#f3faf5,#fff)}
.stnc-immediate-state-cloud .stnc-category-group-title{margin:0 0 8px;color:#16824b}
.stnc-immediate-state-cloud .stnc-immediate-state-link{margin:0;border-color:#d5e8db;background:#fff;color:#24633d;box-shadow:0 4px 12px rgba(22,130,75,.05)}
.stnc-immediate-state-cloud .stnc-immediate-state-link+.stnc-immediate-state-link{margin-top:7px}
.stnc-immediate-state-cloud .stnc-immediate-state-link:hover,.stnc-immediate-state-cloud .stnc-immediate-state-link:focus-visible{border-color:#16824b;background:#f1faf4;color:#105e35}
.stnc-immediate-state-cloud .stnc-immediate-state-link.is-active{border-color:#16824b;background:#eaf8ef;color:#105e35;box-shadow:0 0 0 3px rgba(22,130,75,.08)}
.stnc-tag-filter-list{margin-top:16px;padding-top:2px;border-top:1px solid #e2e5e8}
.stnc-tag-filter-inline{display:block;padding:1px 3px 0;color:#647067;font-size:11px;line-height:1.8}
.stnc-tag-filter-link{color:#46554b;text-decoration:none;font-weight:700}
.stnc-tag-filter-link:hover,.stnc-tag-filter-link:focus-visible{color:#b3151b;text-decoration:underline;text-underline-offset:2px}
.stnc-tag-filter-link.is-active{color:#b3151b;font-weight:900;text-decoration:underline;text-underline-offset:2px}
.stnc-badge-rational{
background:#fff1f2;
color:#b4232b;
border-color:#f2ced1;
}
.stnc-badge-cleaning{
background:#eff7f5;
color:#376a62;
border-color:#d5e7e3;
}
.stnc-badge-water{
background:#eef6fb;
color:#27627e;
border-color:#d5e8f2;
}
.stnc-badge-parts{
background:#f3f4f6;
color:#4b5563;
border-color:#dfe3e8;
}
.stnc-badge-extra{
background:#f5f3f8;
color:#63566e;
border-color:#e5dfea;
}
.stnc-price{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
min-height:51px;
margin-bottom:7px;
padding:6px;
border-radius:8px;
text-align:center;
}
.stnc-price.is-current{
background:#edf8f1;
border:1px solid #cfe9d7;
}
.stnc-price.is-order{
background:#f5f6f8;
border:1px solid #e1e4e8;
}
.stnc-price-value{
font-size:18px;
line-height:1.05;
font-weight:800;
white-space:nowrap;
}
.stnc-price.is-current .stnc-price-value{
color:#17743b;
}
.stnc-price.is-order .stnc-price-value{
color:#3f4754;
}
.stnc-price-note{
display:block;
margin-top:3px;
color:#6f7784;
font-size:6.4px;
line-height:1.3;
font-weight:800;
}
.stnc-price-note span{
display:block;
}
.stnc-price.is-current .stnc-price-note{
color:#568167;
}
.stnc-code{
min-height:18px;
margin:1px 0 7px;
color:#7a828e;
font-size:8px;
line-height:1.3;
text-align:center;
}
.stnc-code strong{
color:#505967;
}
.stnc-card-bottom{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:5px;
width:100%;
margin-top:auto;
padding-top:7px;
border-top:1px solid #edf0f2;
}
.stnc-status{
display:flex;
align-items:center;
justify-content:center;
min-width:0;
min-height:29px;
padding:5px 6px;
border-radius:999px;
font-size:8px;
line-height:1.15;
font-weight:700;
text-align:center;
text-decoration:none !important;
}
.stnc-status.is-available{
background:#e8f7ed;
color:#17743b !important;
}
.stnc-status.is-order{
background:#fff2dc;
color:#895900 !important;
}
.stnc-details{
display:flex;
align-items:center;
justify-content:center;
min-height:29px;
padding:6px 8px;
background:#e31b23;
color:#ffffff !important;
border-radius:7px;
font-size:8.5px;
line-height:1.1;
font-weight:800;
white-space:nowrap;
text-decoration:none !important;
}
.stnc-details:hover{
background:#bd161c;
}
.stnc-pagination{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:6px;
margin-top:24px;
}
.stnc-pagination a,
.stnc-pagination span:not(.stnc-dots){
display:flex;
align-items:center;
justify-content:center;
min-width:35px;
min-height:35px;
padding:5px 9px;
background:#ffffff;
color:#374151;
border:1px solid #dfe3e8;
border-radius:8px;
font-size:11px;
font-weight:800;
text-decoration:none;
}
.stnc-pagination .is-current{
background:#e31b23 !important;
color:#ffffff !important;
border-color:#e31b23 !important;
}
.stnc-dots{
color:#8a929e;
}
.stnc-empty{
padding:55px 24px;
background:#f8fafc;
border:1px solid #e5e7eb;
border-radius:15px;
text-align:center;
}
.stnc-empty h2{
margin:0 0 7px;
color:#172033;
font-size:20px;
}
.stnc-empty p{
margin:0 0 18px;
color:#667080;
font-size:13px;
}
.stnc-empty a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:8px 14px;
background:#d71920;
color:#ffffff !important;
border-radius:8px;
font-size:11px;
font-weight:800;
text-decoration:none;
}
.stnc-filter-backdrop{
display:none;
}
.stnc-list{
display:grid;
grid-template-columns:1fr;
gap:10px;
min-width:0;
}
.stnc-list-card{
position:relative;
display:grid;
grid-template-columns:190px minmax(0,1fr) 190px;
min-height:168px;
overflow:hidden;
background:#ffffff;
border:1px solid #d6dee6;
border-radius:13px;
box-shadow:0 3px 10px rgba(15,23,42,.05);
transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.stnc-list-card::before{
content:"";
position:absolute;
top:14px;
bottom:14px;
left:0;
width:3px;
background:#d71920;
border-radius:0 999px 999px 0;
opacity:0;
transform:scaleY(.55);
transition:opacity .18s ease,transform .18s ease;
}
.stnc-list-card:hover{
transform:translateY(-2px);
border-color:#d4d9df;
box-shadow:0 9px 24px rgba(15,23,42,.075);
}
.stnc-list-card:hover::before{
opacity:1;
transform:scaleY(1);
}
.stnc-list-image{
display:flex;
align-items:center;
justify-content:center;
min-width:0;
height:100%;
min-height:168px;
padding:13px;
background:#ffffff;
border-right:1px solid #edf0f2;
overflow:hidden;
text-decoration:none !important;
}
.stnc-list-image img{
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:142px;
margin:auto;
object-fit:contain;
object-position:center;
transition:transform .22s ease;
}
.stnc-list-card:hover .stnc-list-image img{
transform:scale(1.035);
}
.stnc-list-main{
display:flex;
flex-direction:column;
align-items:flex-start;
min-width:0;
padding:19px 22px 17px;
}
.stnc-list-title{
width:100%;
margin:0 0 9px;
color:#152037;
font-size:16px;
line-height:1.28;
font-weight:800;
letter-spacing:-.015em;
overflow-wrap:anywhere;
}
.stnc-list-title a{
color:inherit;
text-decoration:none !important;
}
.stnc-list-title a:hover{
color:#c5161d;
}
.stnc-list-labels{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
min-height:25px;
margin-bottom:12px;
}
.stnc-list-labels .stnc-badge{
min-height:24px;
padding:4px 8px;
font-size:8.5px;
}
.stnc-list-category{
display:inline-flex;
align-items:center;
min-height:24px;
padding:4px 8px;
background:#f7f8fa;
color:#667080;
border:1px solid #e3e6ea;
border-radius:999px;
font-size:8.5px;
line-height:1.15;
font-weight:750;
}
.stnc-list-code{
display:flex;
align-items:baseline;
flex-wrap:wrap;
gap:5px;
margin-top:1px;
color:#8a919c;
font-size:9.5px;
line-height:1.35;
}
.stnc-list-code strong{
color:#4f5967;
font-size:10px;
font-weight:800;
}
.stnc-list-status{
display:inline-flex;
align-items:center;
gap:6px;
min-height:28px;
margin-top:auto;
padding:5px 9px;
border-radius:999px;
font-size:9px;
line-height:1.15;
font-weight:800;
text-decoration:none !important;
transition:filter .16s ease,transform .16s ease;
}
.stnc-list-status:hover{
filter:brightness(.975);
transform:translateY(-1px);
}
.stnc-list-status.is-available{
background:#eaf7ee;
color:#17743b !important;
}
.stnc-list-status.is-order{
background:#fff3df;
color:#895900 !important;
}
.stnc-list-status-dot{
width:6px;
height:6px;
flex:0 0 6px;
background:currentColor;
border-radius:50%;
box-shadow:0 0 0 3px rgba(23,116,59,.08);
}
.stnc-list-side{
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:center;
gap:11px;
min-width:0;
padding:18px 16px;
background:linear-gradient(180deg,#fbfcfd 0%,#f8fafc 100%);
border-left:1px solid #edf0f2;
}
.stnc-list-price{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
min-height:72px;
text-align:right;
}
.stnc-list-price-value{
color:#17743b;
font-size:22px;
line-height:1.05;
font-weight:850;
letter-spacing:-.02em;
white-space:nowrap;
}
.stnc-list-price.is-order .stnc-list-price-value{
color:#3f4754;
}
.stnc-list-price-note{
display:block;
margin-top:5px;
color:#738079;
font-size:6.7px;
line-height:1.35;
font-weight:850;
}
.stnc-list-price-note span{
display:block;
}
.stnc-list-price.is-order .stnc-list-price-note{
color:#7a828e;
}
.stnc-list-price-empty{
min-height:62px;
color:#56606d;
font-size:13px;
font-weight:800;
}
.stnc-list-details{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
width:100%;
min-height:38px;
padding:8px 12px;
background:#e31b23;
color:#ffffff !important;
border-radius:8px;
font-size:10px;
line-height:1.1;
font-weight:850;
text-decoration:none !important;
transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.stnc-list-details:hover{
background:#bd161c;
transform:translateY(-1px);
box-shadow:0 5px 14px rgba(215,25,32,.17);
}
.stnc-list-details span{
font-size:13px;
line-height:1;
transition:transform .16s ease;
}
.stnc-list-details:hover span{
transform:translateX(2px);
}
@media(max-width:1150px){
.stnc-list-card{
grid-template-columns:165px minmax(0,1fr) 175px;
}
.stnc-list-image{
min-height:156px;
padding:11px;
}
.stnc-list-image img{
max-height:130px;
}
.stnc-list-main{
padding:16px 17px 15px;
}
.stnc-list-side{
padding:15px 13px;
}
}
@media(max-width:1150px){
.stnc-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:980px){
.stnc-results-top{
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.stnc-current-category{
font-size:20px;
line-height:1.15;
}
.stnc-search{
width:100%;
max-width:none;
margin-left:0;
}
.stnc-mobile-filter-button{
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:42px;
padding:8px 12px;
background:#f8fafc;
color:#172033;
border:1px solid #dfe3e8;
border-radius:9px;
font-family:inherit;
font-size:11px;
font-weight:800;
cursor:pointer;
}
.stnc-layout{
display:block;
}
.stnc-sidebar{
position:fixed;
z-index:100002;
top:0;
right:0;
bottom:0;
width:min(88vw,360px);
margin:0;
padding:18px;
overflow-y:auto;
overscroll-behavior:contain;
background:#f8fafc;
border:0;
border-radius:18px 0 0 18px;
box-shadow:-20px 0 50px rgba(15,23,42,.22);
transform:translateX(105%);
transition:transform .22s ease;
}
body.stnc-filter-open .stnc-sidebar{
transform:translateX(0);
}
.stnc-sidebar-head{
position:sticky;
z-index:3;
top:-18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin:-18px -18px 16px;
padding:18px 18px 13px;
background:rgba(248,250,252,.97);
backdrop-filter:blur(8px);
border-bottom:1px solid #e1e5ea;
color:#172033;
font-size:15px;
}
.stnc-filter-close{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
padding:0;
background:#ffffff;
color:#505967;
border:1px solid #dfe3e8;
border-radius:50%;
font-family:Arial,sans-serif;
font-size:22px;
line-height:1;
cursor:pointer;
}
.stnc-category-list a{
min-height:42px;
padding-top:9px;
padding-bottom:9px;
font-size:12.5px;
}
.stnc-radio{
min-height:39px;
font-size:12.5px;
}
.stnc-radio input{
width:17px;
height:17px;
}
.stnc-apply{
min-height:44px;
font-size:12px;
}
.stnc-reset{
min-height:40px;
font-size:11px;
}
.stnc-filter-backdrop{
position:fixed;
z-index:100001;
inset:0;
display:block;
background:rgba(17,24,39,.55);
opacity:0;
visibility:hidden;
transition:opacity .22s ease,visibility .22s ease;
}
body.stnc-filter-open .stnc-filter-backdrop{
opacity:1;
visibility:visible;
}
.stnc-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:700px){
.stnc-list{
gap:8px;
}
.stnc-list-card{
grid-template-columns:112px minmax(0,1fr);
min-height:132px;
border-radius:11px;
}
.stnc-list-card:hover{
transform:none;
box-shadow:0 2px 8px rgba(15,23,42,.035);
}
.stnc-list-card::before{
display:none;
}
.stnc-list-image{
grid-column:1;
grid-row:1 / span 2;
min-height:132px;
padding:7px;
}
.stnc-list-image img{
max-height:112px;
}
.stnc-list-card:hover .stnc-list-image img{
transform:none;
}
.stnc-list-main{
grid-column:2;
grid-row:1;
min-width:0;
padding:11px 10px 5px;
}
.stnc-list-title{
margin-bottom:6px;
font-size:11px;
line-height:1.25;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
}
.stnc-list-labels{
gap:4px;
min-height:0;
margin-bottom:6px;
}
.stnc-list-labels .stnc-badge,
.stnc-list-category{
min-height:20px;
padding:3px 5px;
font-size:6.6px;
}
.stnc-list-code{
gap:3px;
font-size:6.7px;
}
.stnc-list-code strong{
font-size:7px;
}
.stnc-list-status{
min-height:22px;
margin-top:6px;
padding:3px 6px;
font-size:6.8px;
}
.stnc-list-status-dot{
width:5px;
height:5px;
flex-basis:5px;
}
.stnc-list-side{
grid-column:2;
grid-row:2;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:end;
gap:7px;
padding:4px 9px 10px 10px;
background:#ffffff;
border-left:0;
}
.stnc-list-price{
align-items:flex-start;
min-height:0;
text-align:left;
}
.stnc-list-price-value{
font-size:16px;
}
.stnc-list-price-note{
margin-top:2px;
font-size:5px;
}
.stnc-list-price-empty{
min-height:0;
font-size:9px;
}
.stnc-list-details{
width:auto;
min-width:64px;
min-height:29px;
padding:5px 7px;
border-radius:7px;
font-size:7px;
}
.stnc-page{
padding-top:0;
padding-bottom:35px;
}
.stnc-shell{
width:calc(100% - 20px);
padding:10px;
border-radius:17px;
}
.stnc-results-top{
margin-bottom:9px;
padding-bottom:9px;
}
.stnc-current-category{
font-size:18px;
}
.stnc-search{
grid-template-columns:1fr;
gap:6px;
}
.stnc-search input,
.stnc-search button{
min-height:40px;
}
.stnc-search button{
display:none;
}
.stnc-results-toolbar{
align-items:center;
gap:8px;
min-height:38px;
margin-bottom:9px;
}
.stnc-results-count{
font-size:9px;
}
.stnc-sort-form{
gap:5px;
}
.stnc-sort-form label{
display:none;
}
.stnc-sort-form select{
min-width:0;
max-width:174px;
min-height:36px;
padding:6px 28px 6px 9px;
font-size:9px;
border-radius:8px;
}
.stnc-active-filters{
gap:4px;
margin:0 0 9px;
}
.stnc-active-filters span,
.stnc-active-filters a.stnc-active-reset{
min-height:24px;
padding:4px 7px;
font-size:8px;
}
.stnc-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.stnc-card:hover{
transform:none;
box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.stnc-card-title{
min-height:58px;
padding:7px 6px 5px;
}
.stnc-card-title h2{
font-size:10px;
line-height:1.22;
}
.stnc-image{
height:108px;
padding:4px;
}
.stnc-card:hover .stnc-image img{
transform:none;
}
.stnc-card-content{
padding:6px 6px 7px;
}
.stnc-badge-wrap{
min-height:23px;
margin-bottom:5px;
}
.stnc-badge{
min-height:20px;
padding:3px 5px;
font-size:7px;
}
.stnc-price{
min-height:44px;
margin-bottom:5px;
padding:5px 4px;
}
.stnc-price-value{
font-size:16px;
}
.stnc-price-note{
font-size:5.5px;
}
.stnc-code{
min-height:15px;
margin-bottom:5px;
font-size:6.7px;
}
.stnc-card-bottom{
grid-template-columns:1fr;
gap:4px;
padding-top:5px;
}
.stnc-status,
.stnc-details{
width:100%;
min-height:25px;
padding:4px;
font-size:7.5px;
}
.stnc-sidebar{
width:min(92vw,360px);
}
}
@media(prefers-reduced-motion:reduce){
.stnc-card,
.stnc-image img,
.stnc-category-list a,
.stnc-active-filters a.stnc-active-reset,
.stnc-sidebar,
.stnc-filter-backdrop,
.stnc-list-card,
.stnc-list-image img,
.stnc-list-details,
.stnc-list-details span,
.stnc-list-status{
transition:none !important;
}
}
.stnc-toolbar-controls{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
margin-left:auto;
}
.stnc-view-switch{
display:inline-flex;
align-items:center;
padding:3px;
background:#f5f7f9;
border:1px solid #e0e4e8;
border-radius:9px;
}
.stnc-view-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
min-height:31px;
margin:0;
padding:5px 9px;
background:transparent;
color:#6d7581;
border:0;
border-radius:6px;
font-family:inherit;
font-size:9.5px;
line-height:1;
font-weight:800;
cursor:pointer;
transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.stnc-view-button:hover{
color:#172033;
}
.stnc-view-button.is-active{
background:#ffffff;
color:#d71920;
box-shadow:0 1px 4px rgba(15,23,42,.08);
}
.stnc-view-icon{
display:inline-block;
font-size:13px;
line-height:1;
}
.stnc-view-grid{
display:none;
}
.stnc-results.is-view-grid .stnc-view-list{
display:none;
}
.stnc-results.is-view-grid .stnc-view-grid{
display:grid;
}
.stnc-results.is-view-list .stnc-view-list{
display:grid;
}
.stnc-results.is-view-list .stnc-view-grid{
display:none;
}
.stnc-clickable-product{
cursor:pointer;
}
.stnc-clickable-product:focus-visible{
outline:3px solid rgba(215,25,32,.22);
outline-offset:2px;
}
.stnc-list-main{
justify-content:flex-start;
}
.stnc-list-status{
margin-top:10px;
}
.stnc-list-side{
align-items:center;
text-align:center;
}
.stnc-list-price{
width:100%;
align-items:center;
text-align:center;
}
.stnc-list-details{
width:148px;
max-width:100%;
}
.stnc-grid-price-on-request{
font-size:13px;
color:#4f5967 !important;
}
@media(min-width:981px){
.stnc-filter-form .stnc-apply{
display:none;
}
}
@media(max-width:980px){
.stnc-results-toolbar{
align-items:flex-start;
}
.stnc-toolbar-controls{
width:100%;
justify-content:space-between;
gap:8px;
}
.stnc-view-switch{
flex:0 0 auto;
}
.stnc-sort-form{
min-width:0;
flex:1 1 auto;
}
.stnc-sort-form select{
min-width:0;
width:100%;
}
}
@media(max-width:700px){
.stnc-view-button{
min-height:34px;
padding:6px 8px;
font-size:9px;
}
.stnc-view-button span:last-child{
display:none;
}
.stnc-view-icon{
font-size:15px;
}
.stnc-results.is-view-grid .stnc-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.stnc-list-side{
align-items:end;
text-align:left;
}
.stnc-list-price{
align-items:flex-start;
text-align:left;
}
.stnc-list-details{
width:auto;
}
}
@media(max-width:700px){
.stnc-page{
padding-top:0;
padding-bottom:28px;
}
.stnc-catalog-hero{width:calc(100% - 14px)!important;margin-bottom:7px!important}
.stnc-shell{
width:calc(100% - 14px);
padding:8px;
border-radius:14px;
}
.stnc-results-top{
gap:6px;
margin-bottom:6px;
padding-bottom:6px;
}
.stnc-current-category{
font-size:16px;
line-height:1.12;
letter-spacing:-.02em;
}
.stnc-search{
gap:5px;
}
.stnc-search input{
min-height:36px;
padding:7px 10px;
border-radius:8px;
font-size:11px;
}
.stnc-mobile-filter-button{
min-height:36px;
padding:7px 10px;
border-radius:8px;
font-size:10px;
}
.stnc-results-toolbar{
gap:6px;
min-height:34px;
margin-bottom:6px;
}
.stnc-results-count{
font-size:8px;
}
.stnc-toolbar-controls{
gap:6px;
}
.stnc-view-switch{
padding:2px;
border-radius:8px;
}
.stnc-view-button{
min-height:30px;
padding:4px 7px;
}
.stnc-view-icon{
font-size:14px;
}
.stnc-sort-form select{
min-height:32px;
max-width:none;
padding:5px 27px 5px 8px;
border-radius:8px;
font-size:8.5px;
}
.stnc-active-filters{
margin-bottom:6px;
}
.stnc-list{
gap:6px;
}
.stnc-list-card{
grid-template-columns:104px minmax(0,1fr);
min-height:122px;
border-radius:10px;
}
.stnc-list-image{
min-height:122px;
padding:6px;
}
.stnc-list-image img{
max-height:104px;
}
.stnc-list-main{
padding:9px 9px 3px;
}
.stnc-list-title{
margin-bottom:5px;
font-size:10.5px;
line-height:1.22;
}
.stnc-list-labels{
gap:3px;
margin-bottom:5px;
}
.stnc-list-labels .stnc-badge,
.stnc-list-category{
min-height:19px;
padding:3px 5px;
font-size:6.3px;
}
.stnc-list-code{
font-size:6.4px;
}
.stnc-list-code strong{
font-size:6.8px;
}
.stnc-list-status{
min-height:21px;
margin-top:5px;
padding:3px 6px;
font-size:6.5px;
}
.stnc-list-side{
gap:6px;
padding:3px 8px 8px 9px;
}
.stnc-list-price-value{
font-size:15px;
}
.stnc-list-price-note{
font-size:4.8px;
}
.stnc-list-details{
min-width:61px;
min-height:28px;
padding:5px 7px;
font-size:6.8px;
}
.stnc-results.is-view-grid .stnc-grid{
gap:6px;
}
}
.stnc-details,
.stnc-list-details{
font-size:0 !important;
}
.stnc-details{
width:36px !important;
min-width:36px !important;
min-height:34px !important;
padding:0 !important;
}
.stnc-details::before,
.stnc-list-details::before{
content:"";
display:block;
width:15px;
height:15px;
flex:0 0 15px;
background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l2.2 10.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.6L20 7H6'/%3E%3Ccircle cx='10' cy='19' r='1.2' fill='%23fff' stroke='none'/%3E%3Ccircle cx='17' cy='19' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
}
.stnc-list-details > span{
display:none !important;
}
.stnc-image img,
.stnc-list-image img{
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
mask-composite:intersect;
}
@media(max-width:700px){
.stnc-card{
border-radius:12px;
box-shadow:0 3px 12px rgba(15,23,42,.055);
}
.stnc-image{
display:flex!important;
align-items:center!important;
justify-content:center!important;
height:116px!important;
padding:7px!important;
background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
}
.stnc-image img{
display:block!important;
align-self:center!important;
width:auto!important;
height:auto!important;
max-width:100%!important;
max-height:100%!important;
margin:auto!important;
object-fit:contain!important;
object-position:50% 50%!important;
}
.stnc-card-bottom{
grid-template-columns:minmax(0,1fr) 36px!important;
align-items:center!important;
gap:5px!important;
}
.stnc-details{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
justify-self:end!important;
width:36px!important;
min-width:36px!important;
height:34px!important;
min-height:34px!important;
margin:0!important;
padding:0!important;
}
.stnc-details::before,
.stnc-list-details::before{
display:block!important;
align-self:center!important;
width:15px!important;
height:15px!important;
margin:0!important;
transform:none!important;
background-position:center!important;
}
.stnc-list-image{
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.stnc-list-image img{
display:block!important;
align-self:center!important;
width:auto!important;
height:auto!important;
margin:auto!important;
object-fit:contain!important;
object-position:50% 50%!important;
}
.stnc-list-details{
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
}