Szczotki | Trivec Brushing Solutions – koncepcja konfiguratora
:root{
--trivec-ink:#333F48;
--trivec-text:#303B44;
--trivec-muted:#737B81;
--trivec-line:#D9D9D6;
--trivec-soft:#F4F3F0;
--trivec-gold:#AD841F;
--trivec-gold-soft:#F1E7CC;
--trivec-white:#FFFFFF;
--trivec-footer:#333F48;
--page-width:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
color:var(--trivec-ink);
background:#fff;
font-family:"Noto Sans","Segoe UI",Arial,sans-serif;
font-size:15px;
line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{
width:min(var(--page-width),calc(100% - 44px));
margin:0 auto;
}
/* Header based on the current Elementor page */
.utility-bar{
background:#AD841F;
color:var(--trivec-ink);
font-size:12px;
}
.utility-inner{
min-height:39px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.utility-links,
.languages{
display:flex;
align-items:center;
gap:22px;
}
.utility-links a,
.languages a{opacity:.92}
.languages a.active{font-weight:700}
.site-header{
position:sticky;
top:0;
z-index:50;
background:#fff;
border-bottom:1px solid rgba(51,63,72,.08);
}
.nav-inner{
min-height:86px;
display:grid;
grid-template-columns:180px minmax(0,1fr) auto;
align-items:center;
gap:34px;
}
.logo{
width:148px;
}
.main-nav{
display:flex;
align-items:center;
justify-content:center;
gap:29px;
font-size:13px;
font-weight:600;
}
.main-nav a{
position:relative;
padding:34px 0 31px;
}
.main-nav a.current::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:21px;
height:2px;
background:var(--trivec-gold);
}
.header-actions{
display:flex;
align-items:center;
gap:9px;
}
.header-search{
width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid var(--trivec-line);
background:#fff;
color:var(--trivec-ink);
}
.quote-pill{
min-height:42px;
display:flex;
align-items:center;
gap:8px;
padding:0 15px;
border:0;
background:var(--trivec-ink);
color:#fff;
font-size:12px;
font-weight:700;
}
.quote-count{
min-width:20px;
height:20px;
display:grid;
place-items:center;
padding:0 5px;
border-radius:50%;
background:var(--trivec-gold);
color:var(--trivec-ink);
font-size:10px;
}
.mobile-menu-button{
display:none;
width:42px;
height:42px;
border:1px solid var(--trivec-line);
background:#fff;
color:var(--trivec-ink);
font-size:20px;
}
/* Hero from current Brushes page */
.hero{
background:#F0F0ED;
padding:58px 0 64px;
}
.breadcrumbs{
margin-bottom:30px;
color:#676F75;
font-size:12px;
}
.breadcrumbs strong{color:var(--trivec-ink)}
.hero-grid{
display:grid;
grid-template-columns:minmax(0,760px) auto;
align-items:end;
justify-content:space-between;
gap:40px;
}
.hero h1{
margin:0;
max-width:780px;
font-size:48px;
line-height:1.07;
letter-spacing:-.035em;
font-weight:700;
}
.heading-rule{
width:72px;
height:3px;
margin:22px 0 23px;
background:var(--trivec-gold);
}
.hero p{
max-width:760px;
margin:0;
color:#505B64;
font-size:16px;
line-height:1.65;
}
.site-button{
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
padding:0 18px;
border:1px solid var(--trivec-ink);
background:var(--trivec-ink);
color:#fff;
font-size:13px;
font-weight:700;
transition:.18s ease;
}
.site-button:hover{
background:#293944;
border-color:#293944;
}
.site-button.gold{
background:var(--trivec-gold);
border-color:var(--trivec-gold);
color:var(--trivec-ink);
}
.site-button.secondary{
background:#fff;
border-color:#C7C9C8;
color:var(--trivec-ink);
}
.site-button.text{
min-height:auto;
padding:0;
border:0;
background:transparent;
color:var(--trivec-ink);
justify-content:flex-start;
}
.arrow{font-size:18px;line-height:1}
/* Brushes / configurator area */
.brushes-section{
padding:76px 0 88px;
}
.section-title-row{
display:flex;
align-items:end;
justify-content:space-between;
gap:24px;
margin-bottom:42px;
}
.section-title h2{
margin:0;
font-size:38px;
line-height:1.15;
letter-spacing:-.025em;
}
.section-title .heading-rule{
margin:14px 0 0;
width:58px;
}
.request-status{
color:var(--trivec-muted);
font-size:13px;
}
.request-status button{
margin-left:9px;
border:0;
background:transparent;
color:var(--trivec-ink);
font-weight:700;
text-decoration:underline;
text-underline-offset:3px;
}
.catalog-layout{
display:grid;
grid-template-columns:205px minmax(0,1fr);
gap:46px;
align-items:start;
}
.filter-panel{
border-top:1px solid var(--trivec-line);
padding-top:19px;
}
.filter-panel h3{
margin:0 0 20px;
font-size:20px;
}
.filter-label{
display:block;
margin-bottom:9px;
color:#606B73;
font-size:12px;
font-weight:700;
}
.catalog-search{
width:100%;
height:42px;
margin-bottom:24px;
border:1px solid #CFCFCD;
border-radius:0;
padding:0 11px;
outline:none;
background:#fff;
}
.catalog-search:focus{border-color:var(--trivec-gold)}
.filter-options{
display:grid;
gap:11px;
}
.filter-option{
display:flex;
align-items:center;
gap:9px;
color:#4F5961;
font-size:13px;
}
.filter-option input{
appearance:none;
width:17px;
height:17px;
margin:0;
border:1px solid #A7ADAF;
background:#fff;
}
.filter-option input:checked{
border-color:var(--trivec-ink);
background:
linear-gradient(var(--trivec-ink),var(--trivec-ink)) center/9px 9px no-repeat;
}
.clear-filter{
margin-top:19px;
border:0;
padding:0;
background:transparent;
color:#6F777C;
font-size:12px;
text-decoration:underline;
text-underline-offset:3px;
}
.catalog-content{}
.catalog-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:18px;
color:#777E82;
font-size:12px;
}
.product-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:42px 28px;
}
.product-card{
min-width:0;
}
.product-image{
aspect-ratio:1/1;
overflow:hidden;
background:#F1F1EF;
}
.product-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .32s ease;
}
.product-card:hover .product-image img{transform:scale(1.025)}
.product-copy{
padding-top:17px;
}
.product-copy h3{
margin:0;
font-size:22px;
line-height:1.25;
font-weight:700;
}
.product-copy p{
min-height:45px;
margin:8px 0 13px;
color:#687177;
font-size:13px;
line-height:1.55;
}
.product-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:13px;
}
.product-tag{
padding:4px 7px;
background:#F1F1EE;
color:#697176;
font-size:10px;
font-weight:600;
}
.product-link{
display:inline-flex;
align-items:center;
gap:8px;
border:0;
padding:0;
background:transparent;
color:var(--trivec-ink);
font-size:13px;
font-weight:600;
}
.empty-state{
display:none;
padding:36px;
border:1px solid var(--trivec-line);
color:#727A7E;
text-align:center;
}
/* Inline product configurator, deliberately simple */
.configurator-view,
.request-view{
display:none;
}
.configurator-view.active,
.request-view.active{
display:block;
}
.catalog-view.hidden{display:none}
.back-link{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:26px;
border:0;
padding:0;
background:transparent;
color:#626B71;
font-size:12px;
}
.configure-grid{
display:grid;
grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);
gap:42px;
align-items:start;
}
.configure-image{
aspect-ratio:1/1;
background:#F1F1EF;
overflow:hidden;
}
.configure-image img{
width:100%;
height:100%;
object-fit:cover;
}
.configure-panel{
padding-top:3px;
}
.configure-eyebrow{
margin-bottom:7px;
color:#727A7F;
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
font-weight:700;
}
.configure-panel h2{
margin:0;
font-size:34px;
line-height:1.15;
letter-spacing:-.025em;
}
.configure-desc{
margin:10px 0 24px;
color:#606A71;
max-width:570px;
}
.configure-form{
border-top:1px solid var(--trivec-line);
}
.config-field{
padding:17px 0;
border-bottom:1px solid var(--trivec-line);
}
.config-field label{
display:block;
margin-bottom:8px;
font-size:12px;
font-weight:700;
}
.config-field select,
.config-field input,
.config-field textarea{
width:100%;
min-height:44px;
border:1px solid #C8CBCA;
border-radius:0;
padding:9px 11px;
background:#fff;
color:var(--trivec-ink);
outline:none;
}
.config-field select:focus,
.config-field input:focus,
.config-field textarea:focus{
border-color:var(--trivec-gold);
}
.auto-specs{
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
margin-top:22px;
border-top:1px solid var(--trivec-line);
border-left:1px solid var(--trivec-line);
}
.auto-spec{
min-height:68px;
padding:12px 13px;
border-right:1px solid var(--trivec-line);
border-bottom:1px solid var(--trivec-line);
background:#FAFAF8;
}
.auto-spec span{
display:block;
color:#777F83;
font-size:10px;
margin-bottom:2px;
}
.auto-spec strong{font-size:13px}
.config-actions{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:22px;
}
.config-note{
margin-top:11px;
color:#7A8084;
font-size:11px;
}
/* Order */
.request-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
margin-bottom:29px;
}
.request-head h2{
margin:0;
font-size:34px;
letter-spacing:-.025em;
}
.request-head p{
margin:7px 0 0;
color:#687177;
}
.request-layout{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
gap:42px;
align-items:start;
}
.request-list{
border-top:1px solid var(--trivec-line);
}
.request-item{
display:grid;
grid-template-columns:96px minmax(0,1fr) auto;
gap:17px;
align-items:center;
padding:18px 0;
border-bottom:1px solid var(--trivec-line);
}
.request-thumb{
width:96px;
height:96px;
object-fit:cover;
background:#F1F1EF;
}
.request-item h3{
margin:0 0 5px;
font-size:17px;
}
.request-meta{
color:#70787D;
font-size:12px;
line-height:1.55;
}
.remove-item{
border:0;
padding:0;
background:transparent;
color:#855D5D;
font-size:11px;
text-decoration:underline;
text-underline-offset:3px;
}
.request-empty{
padding:30px 0;
color:#72797E;
}
.contact-form{
padding:24px;
background:#F3F3F0;
}
.contact-form h3{
margin:0 0 18px;
font-size:21px;
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.contact-form .config-field{
padding:0 0 14px;
border:0;
}
.contact-form textarea{min-height:102px;resize:vertical}
.terms-row{
display:flex;
align-items:flex-start;
gap:9px;
color:#666F75;
font-size:11px;
line-height:1.45;
}
.terms-row input{margin-top:2px}
.contact-form .site-button{
width:100%;
margin-top:18px;
}
/* CTA from current page */
.process-cta{
display:grid;
grid-template-columns:1fr 1fr;
min-height:420px;
background:#ECECE8;
}
.process-copy{
display:flex;
align-items:center;
justify-content:flex-end;
padding:58px 68px 58px max(22px,calc((100vw - var(--page-width))/2));
}
.process-inner{
max-width:505px;
width:100%;
}
.process-inner h2{
margin:0;
font-size:38px;
line-height:1.15;
letter-spacing:-.025em;
}
.process-inner p{
margin:17px 0 24px;
color:#5F696F;
font-size:15px;
}
.process-image{
background:
linear-gradient(rgba(51,63,72,.08),rgba(51,63,72,.08)),
url("https://b4451783.assetcdn.net/2.0/4451783/wp-content/uploads/2026/04/Brushing-rack.png?lossy=2&strip=1&webp=1")
center/cover no-repeat;
}
/* Footer based on current footer */
.site-footer{
background:var(--trivec-footer);
color:#fff;
padding:58px 0 20px;
}
.footer-logo{
width:190px;
margin-bottom:32px;
}
.footer-rule{
height:1px;
background:rgba(255,255,255,.23);
margin-bottom:34px;
}
.footer-grid{
display:grid;
grid-template-columns:1.3fr .8fr .8fr .8fr 1.35fr;
gap:36px;
}
.footer-col h4{
margin:0 0 14px;
font-size:14px;
}
.footer-col a,
.footer-col p{
display:block;
margin:0 0 8px;
color:rgba(255,255,255,.72);
font-size:12px;
line-height:1.55;
}
.newsletter{
display:grid;
grid-template-columns:1fr auto;
margin-top:13px;
}
.newsletter input{
min-width:0;
height:42px;
border:1px solid rgba(255,255,255,.35);
background:transparent;
color:#fff;
padding:0 10px;
outline:none;
}
.newsletter button{
height:42px;
border:0;
background:var(--trivec-gold);
color:var(--trivec-ink);
padding:0 14px;
font-weight:700;
font-size:11px;
}
.footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-top:38px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.18);
color:rgba(255,255,255,.55);
font-size:10px;
}
.toast{
position:fixed;
right:22px;
bottom:22px;
z-index:80;
padding:12px 15px;
background:var(--trivec-ink);
color:#fff;
font-size:12px;
opacity:0;
transform:translateY(10px);
pointer-events:none;
transition:.22s ease;
}
.toast.show{
opacity:1;
transform:translateY(0);
}
@media(max-width:1024px){
.nav-inner{grid-template-columns:165px 1fr auto}
.main-nav{display:none}
.mobile-menu-button{display:block}
.header-search{display:none}
.hero h1{font-size:42px}
.catalog-layout{grid-template-columns:175px minmax(0,1fr);gap:30px}
.configure-grid,.request-layout{grid-template-columns:1fr}
.footer-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
.container{width:calc(100% - 28px)}
.utility-inner{min-height:36px}
.utility-links a:nth-child(2),.languages{display:none}
.nav-inner{min-height:72px;grid-template-columns:145px 1fr auto;gap:10px}
.logo{width:132px}
.quote-pill{display:none}
.hero{padding:42px 0 48px}
.hero-grid{grid-template-columns:1fr}
.hero h1{font-size:35px}
.hero-grid .site-button{justify-self:start}
.brushes-section{padding:54px 0 64px}
.section-title-row{align-items:start;flex-direction:column;margin-bottom:30px}
.section-title h2{font-size:31px}
.catalog-layout{grid-template-columns:1fr}
.filter-panel{
display:grid;
grid-template-columns:1fr auto;
column-gap:12px;
align-items:end;
}
.filter-panel h3{grid-column:1/-1;margin-bottom:12px}
.filter-label{display:none}
.catalog-search{margin:0}
.filter-options{grid-column:1/-1;display:flex;flex-wrap:wrap;margin-top:13px}
.clear-filter{margin:0}
.product-grid{grid-template-columns:1fr;gap:35px}
.product-copy p{min-height:0}
.configure-panel h2,.request-head h2{font-size:29px}
.auto-specs{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.request-item{grid-template-columns:75px minmax(0,1fr)}
.request-thumb{width:75px;height:75px}
.remove-item{grid-column:2;justify-self:start}
.process-cta{grid-template-columns:1fr}
.process-copy{padding:48px 22px}
.process-image{min-height:280px}
.process-inner h2{font-size:31px}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-col.newsletter-col{grid-column:1/-1}
.footer-bottom{align-items:flex-start;flex-direction:column}
}
/* Full-width header & footer */
.header-fullwidth,
.footer-fullwidth{
width:100%;
max-width:none;
margin:0;
padding-left:32px;
padding-right:32px;
}
@media(max-width:767px){
.header-fullwidth,
.footer-fullwidth{
padding-left:14px;
padding-right:14px;
}
}
/* Force header + footer to break out of any centered page/container */
.utility-bar,
.site-header,
.site-footer{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
}
.utility-bar > .header-fullwidth,
.site-header > .header-fullwidth,
.site-footer > .footer-fullwidth{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
padding-left:32px !important;
padding-right:32px !important;
}
/* Prevent the generic .container rule from constraining these areas */
.container.header-fullwidth,
.container.footer-fullwidth{
width:100% !important;
max-width:none !important;
}
@media(max-width:767px){
.utility-bar > .header-fullwidth,
.site-header > .header-fullwidth,
.site-footer > .footer-fullwidth{
padding-left:14px !important;
padding-right:14px !important;
}
}
/* Assistance CTAs */
.help-cta{
margin-top:26px;
padding:22px 23px;
border-left:3px solid var(--trivec-gold);
background:#F3F3F0;
}
.help-cta.compact{
margin-top:28px;
padding:18px 19px;
}
.help-cta-kicker{
display:block;
margin-bottom:5px;
color:#737B81;
font-size:10px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
.help-cta h3{
margin:0 0 7px;
font-size:19px;
line-height:1.25;
}
.help-cta p{
margin:0 0 14px;
color:#606A71;
font-size:12px;
line-height:1.55;
}
.help-links{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:center;
}
.help-links a{
color:var(--trivec-ink);
font-size:12px;
font-weight:700;
text-decoration:underline;
text-underline-offset:3px;
}
/* Entire product tile is clickable */
.product-card{
cursor:pointer;
outline:none;
}
.product-card:focus-visible .product-image,
.product-card:hover .product-image{
box-shadow:inset 0 0 0 2px var(--trivec-gold);
}
.product-card:focus-visible .product-copy h3,
.product-card:hover .product-copy h3{
color:#AD841F;
}
.product-link{
pointer-events:none;
}
/* Three automatic technical values after Availability removal */
.auto-specs{
grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:767px){
.auto-specs{
grid-template-columns:1fr;
}
}
/* Webshop refinements */
.product-card{transition:transform .18s ease}
.product-card:hover{transform:translateY(-2px)}
.request-head{border-bottom:1px solid var(--trivec-line);padding-bottom:20px}
.request-head h2{font-size:38px}
.request-item{grid-template-columns:96px minmax(0,1fr);align-items:start}
.cart-item-actions{display:flex;align-items:end;flex-wrap:wrap;gap:14px;margin-top:13px}
.cart-item-actions label{display:flex;align-items:center;gap:7px;color:#70787D;font-size:11px;font-weight:700}
.cart-qty{width:64px;height:34px;border:1px solid #C8CBCA;padding:4px 7px;background:#fff;color:var(--trivec-ink)}
.cart-edit,.remove-item{min-height:34px;border:0;padding:0;background:transparent;font-size:11px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cart-edit{color:var(--trivec-ink)}
.remove-item{color:#855D5D}
.contact-form{position:sticky;top:118px;padding:28px;background:#F3F3F0}
.checkout-heading{margin-bottom:18px}
.checkout-heading h3{margin:0;font-size:21px}
.checkout-kicker{display:block;margin-bottom:5px;color:#777F83;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.checkout-divider{height:1px;margin:8px 0 20px;background:#DADAD6}
.optional{color:#81888C;font-weight:400}
.address-row{grid-template-columns:.7fr 1.3fr}
.checkout-order-note{display:grid;gap:3px;margin-top:18px;padding:13px 14px;border-left:3px solid var(--trivec-gold);background:#fff;font-size:11px}
.checkout-order-note span{color:#687177;line-height:1.45}
.checkout-button{min-height:50px;font-size:14px}
.config-actions .site-button.gold{min-width:170px}
@media(max-width:1024px){.contact-form{position:static}}
@media(max-width:767px){.request-head h2{font-size:31px}.address-row{grid-template-columns:1fr 1fr}.contact-form{padding:20px}}
/* v5 webshop refinements */
.quote-pill{background:#F2F2EF !important;border:1px solid #E0E0DC !important;color:var(--trivec-ink) !important}
.quote-pill:hover{background:#EAEAE6 !important;border-color:#D6D6D0 !important}
.quote-count{min-width:auto !important;width:auto !important;height:auto !important;padding:0 !important;border-radius:0 !important;background:transparent !important;color:var(--trivec-ink) !important;font-size:12px !important}
#openRequestTop,#openRequestTop:hover,.mini-cart-view,.mini-cart-view:hover{background:transparent !important;box-shadow:none !important}
#addToRequest,#addToRequest:hover,#addSpecialRequest,#addSpecialRequest:hover{color:#fff !important}
.product-help-cta{margin:0 0 22px}
.selection-warning{margin-top:18px;padding:14px 16px;border-left:4px solid #AD841F;background:#F8F3E7;color:#4D4B45;font-size:12px;line-height:1.55}
.selection-warning strong{color:var(--trivec-ink)}
.add-feedback{display:none;margin-top:14px;padding:12px 14px;border-left:4px solid #4D7A57;background:#EEF5EF;color:#31523A;font-size:12px;font-weight:600}
.add-feedback.show{display:block}
.product-cart-details{margin-top:12px;border-top:1px solid var(--trivec-line);border-bottom:1px solid var(--trivec-line)}
.product-cart-details summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;cursor:pointer;list-style:none;font-size:12px;font-weight:700}
.product-cart-details summary::-webkit-details-marker{display:none}
.product-cart-details summary::after{content:"+";margin-left:auto;font-size:18px;font-weight:400}
.product-cart-details[open] summary::after{content:"−"}
.product-cart-details summary strong{margin-left:auto;color:#737B81;font-size:11px;font-weight:600}
.mini-cart-list{display:grid;gap:0;border-top:1px solid #E5E5E1}
.mini-cart-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #ECECE8}
.mini-cart-item img{width:48px;height:48px;object-fit:cover;background:#F1F1EF}
.mini-cart-item strong{display:block;font-size:11px}
.mini-cart-item span{display:block;color:#737B81;font-size:10px;line-height:1.4}
.mini-cart-item .mini-qty{color:var(--trivec-ink);font-size:10px;font-weight:700}
.mini-cart-view{min-height:38px;border:0;padding:10px 0 12px;color:var(--trivec-ink);font-size:11px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.product-seo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:54px;align-items:center;margin-top:72px;padding-top:54px;border-top:1px solid var(--trivec-line)}
.product-seo-kicker{display:block;margin-bottom:7px;color:#737B81;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.product-seo h2{margin:0 0 15px;font-size:30px;line-height:1.2}
.product-seo p{margin:0 0 13px;color:#606A71;font-size:13px;line-height:1.7}
.product-seo-points{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}
.product-seo-point{padding:6px 9px;background:#F1F1EE;color:#5F696F;font-size:10px;font-weight:700}
.product-seo-image{aspect-ratio:1/1;overflow:hidden;background:#F1F1EF}
.product-seo-image img{width:100%;height:100%;object-fit:cover}
.checkout-help-cta{margin:0 0 24px;background:#fff}
.checkout-order-note.warning{border-left-color:#AD841F;background:#F8F3E7}
.billing-toggle{display:flex;align-items:flex-start;gap:9px;margin:8px 0 20px;padding:13px 14px;background:#fff;color:#4F5961;font-size:12px;font-weight:600;cursor:pointer}
.billing-toggle input{margin-top:2px}
.billing-fields{padding-top:2px}
.billing-fields[hidden]{display:none}
.billing-heading{border-top:1px solid #DADAD6;margin-top:4px;padding-top:20px}
@media(max-width:767px){.product-seo{grid-template-columns:1fr;gap:28px;margin-top:52px;padding-top:38px}}
/* Header mini cart */
.header-actions{
position:relative;
}
.header-cart{
position:relative;
}
.quote-pill{
min-width:104px;
justify-content:center;
}
.cart-chevron{
margin-left:2px;
font-size:14px;
line-height:1;
transition:transform .18s ease;
}
.header-cart.open .cart-chevron{
transform:rotate(180deg);
}
.header-cart-dropdown{
position:absolute;
top:calc(100% + 10px);
right:0;
width:min(370px,calc(100vw - 28px));
z-index:100;
padding:18px;
border:1px solid #DEDEDA;
background:#fff;
box-shadow:0 14px 36px rgba(51,63,72,.14);
}
.header-cart-dropdown[hidden]{
display:none;
}
.header-cart-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding-bottom:12px;
border-bottom:1px solid #E7E7E3;
}
.header-cart-top strong{
font-size:14px;
}
.header-cart-top span{
color:#757D82;
font-size:11px;
}
.header-mini-cart-list{
max-height:360px;
overflow:auto;
}
.header-mini-cart-item{
display:grid;
grid-template-columns:58px minmax(0,1fr) auto;
gap:11px;
align-items:center;
padding:12px 0;
border-bottom:1px solid #ECECE8;
}
.header-mini-cart-item img{
width:58px;
height:58px;
object-fit:cover;
background:#F1F1EF;
}
.header-mini-cart-item strong{
display:block;
margin-bottom:2px;
font-size:12px;
line-height:1.3;
}
.header-mini-cart-item span{
display:block;
color:#727A7F;
font-size:10px;
line-height:1.45;
}
.header-mini-cart-item .header-mini-qty{
color:var(--trivec-ink);
font-size:11px;
font-weight:700;
}
.header-cart-empty{
padding:22px 0 17px;
color:#737B81;
font-size:12px;
}
.header-cart-view{
width:100%;
min-height:42px;
margin-top:14px;
border:1px solid var(--trivec-ink);
background:transparent;
color:var(--trivec-ink);
font-size:12px;
font-weight:700;
}
.header-cart-view:hover{
background:transparent;
color:var(--trivec-ink);
}
@media(max-width:767px){
.quote-pill{
display:flex !important;
min-width:auto;
padding:0 11px;
}
.header-cart-dropdown{
position:fixed;
top:116px;
right:14px;
left:14px;
width:auto;
}
}
/* v7 polish */
.quote-pill{
min-width:auto !important;
min-height:42px;
padding:0 13px !important;
gap:8px !important;
border-color:#E8E8E3 !important;
background:#F7F7F4 !important;
box-shadow:none !important;
}
.quote-pill:hover{
background:#F2F2EE !important;
border-color:#DDDDD7 !important;
}
.header-cart-icon{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
flex:0 0 auto;
}
.quote-count{
font-variant-numeric:tabular-nums;
font-weight:700 !important;
}
/* Keep the help block useful, but let the actual product options lead */
.product-help-cta{
margin:0 0 18px !important;
padding:15px 16px !important;
border:1px solid #E2E2DE;
border-left:3px solid var(--trivec-gold);
background:#FAFAF8 !important;
}
.product-help-cta h3{
margin-bottom:4px;
font-size:15px !important;
}
.product-help-cta p{
margin-bottom:9px;
font-size:11px !important;
}
.product-help-cta .help-links{
gap:12px;
}
.product-help-cta .help-links a{
font-size:11px;
}
#standardConfig .config-field,
#specialConfig .config-field{
margin-bottom:18px;
}
#standardConfig .config-field > label,
#specialConfig .config-field > label{
margin-bottom:7px;
font-size:12px;
font-weight:700;
color:var(--trivec-ink);
}
#standardConfig select,
#standardConfig input,
#specialConfig textarea,
#specialConfig input{
min-height:48px;
background:#fff;
}
.selection-warning{
padding:13px 15px !important;
font-size:11px !important;
}
/* Familiar ecommerce cart layout */
.request-item{
grid-template-columns:104px minmax(0,1fr) 92px auto !important;
gap:20px !important;
align-items:center !important;
padding:18px 0 !important;
}
.request-thumb{
width:104px !important;
height:104px !important;
object-fit:cover;
background:#F1F1EE;
}
.request-item-main{
min-width:0;
}
.request-item-main h3{
margin:0 0 7px;
font-size:16px;
}
.request-meta{
color:#697177;
line-height:1.55;
}
.request-item-qty{
display:grid;
gap:6px;
justify-items:start;
}
.request-item-qty label{
color:#737B81;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
}
.cart-qty{
width:72px !important;
height:38px !important;
margin:0 !important;
}
.request-item-remove{
align-self:center;
}
.cart-edit{
margin-top:10px;
min-height:auto !important;
}
.remove-item{
min-height:auto !important;
}
/* Give checkout sections more breathing room */
.checkout-heading{
margin-top:2px;
margin-bottom:16px;
}
.checkout-divider{
margin:12px 0 24px !important;
}
.after-order-note{
margin-top:16px;
padding-top:16px;
border-top:1px solid #DADAD6;
}
.after-order-note strong{
display:block;
margin-bottom:4px;
font-size:11px;
color:var(--trivec-ink);
}
.after-order-note p{
margin:0;
color:#697177;
font-size:10px;
line-height:1.55;
}
/* SEO content should feel like editorial product information, not checkout UI */
.product-seo{
position:relative;
margin:76px -32px 0 !important;
padding:48px 32px !important;
border-top:0 !important;
background:#F5F4F1;
}
.product-seo-image{
background:#ECEBE7 !important;
}
.product-seo-point{
background:#fff !important;
border:1px solid #E4E2DC;
}
@media(max-width:900px){
.request-item{
grid-template-columns:88px minmax(0,1fr) 80px !important;
}
.request-thumb{
width:88px !important;
height:88px !important;
}
.request-item-remove{
grid-column:2 / -1;
}
}
@media(max-width:767px){
.request-item{
grid-template-columns:74px minmax(0,1fr) !important;
gap:14px !important;
align-items:start !important;
}
.request-thumb{
width:74px !important;
height:74px !important;
}
.request-item-qty{
grid-column:2;
margin-top:4px;
}
.request-item-remove{
grid-column:2;
}
.product-seo{
margin:52px -14px 0 !important;
padding:34px 14px !important;
}
}
/* Structured special brush request */
.special-config{display:grid}
.special-intro{margin-bottom:20px}
.special-eyebrow{display:block;margin-bottom:5px;color:#737B81;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.special-intro h3{margin:0 0 7px;font-size:23px;line-height:1.25}
.special-intro p{margin:0;color:#687178;font-size:12px;line-height:1.6}
.special-diagram{margin:0 0 24px;padding:16px;border:1px solid #E1E1DD;background:#fff}
.special-diagram img{display:block;width:100%;height:auto}
.special-section{padding:24px 0;border-top:1px solid var(--trivec-line)}
.special-section-last{padding-bottom:0}
.special-section-head{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:18px}
.special-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--trivec-ink);color:#fff;font-size:11px;font-weight:700}
.special-section-head h4{margin:0 0 3px;font-size:17px}
.special-section-head p{margin:0;color:#737B81;font-size:11px;line-height:1.5}
.special-grid{display:grid;gap:14px}
.special-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.special-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.input-unit{display:grid;grid-template-columns:minmax(0,1fr) 48px}
.input-unit input{border-right:0!important}
.input-unit span{display:grid;place-items:center;border:1px solid #C8CBCA;border-left:0;background:#F3F3F0;color:#687178;font-size:10px;font-weight:700}
.special-choice{display:flex;flex-wrap:wrap;gap:10px 18px;margin:4px 0 18px;padding:14px 15px;border:1px solid #E0E0DC;background:#FAFAF8}
.special-choice legend{width:100%;margin-bottom:5px;color:var(--trivec-ink);font-size:11px;font-weight:700}
.special-choice label{display:flex;align-items:center;gap:6px;color:#555F65;font-size:11px;cursor:pointer}
.special-choice input{width:auto!important;min-height:0!important;margin:0}
.special-motor[hidden]{display:none!important}
.special-upload{display:grid;gap:8px;padding:16px;border:1px dashed #BFC3C1;background:#FAFAF8;cursor:pointer}
.special-upload strong{font-size:11px}
.special-upload span{color:#737B81;font-size:10px;line-height:1.45}
.special-upload input{width:100%;min-height:auto!important;padding:0!important;border:0!important;background:transparent!important;font-size:10px}
.special-upload em{color:#687178;font-size:10px;font-style:normal;font-weight:700}
.dimension-check{display:none;margin-top:12px;padding:10px 12px;border-left:3px solid #AD841F;background:#F8F3E7;color:#5E5748;font-size:10px;line-height:1.5}
.dimension-check.show{display:block}
@media(max-width:900px){.special-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.special-grid-2,.special-grid-3{grid-template-columns:1fr}}
/* Sticky special-brush drawing beside the questions */
.special-scroll-layout{
display:grid;
grid-template-columns:minmax(300px,.9fr) minmax(0,1.45fr);
gap:34px;
align-items:start;
}
.special-sticky-column{
position:sticky;
top:118px;
align-self:start;
}
.special-sticky-column .special-diagram{
margin:0;
}
.sticky-drawing-note{
display:grid;
gap:3px;
margin-top:10px;
padding:11px 13px;
border-left:3px solid var(--trivec-gold);
background:#F8F6F0;
}
.sticky-drawing-note strong{
color:var(--trivec-ink);
font-size:10px;
}
.sticky-drawing-note span{
color:#737B81;
font-size:9px;
line-height:1.45;
}
.special-question-column{
min-width:0;
}
.special-question-column > .special-section:first-child{
padding-top:0;
border-top:0;
}
@media(max-width:980px){
.special-scroll-layout{
grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);
gap:24px;
}
.special-sticky-column{
top:100px;
}
}
@media(max-width:760px){
.special-scroll-layout{
display:block;
}
.special-sticky-column{
position:static;
margin-bottom:24px;
}
.sticky-drawing-note{
margin-bottom:8px;
}
.special-question-column > .special-section:first-child{
padding-top:24px;
border-top:1px solid var(--trivec-line);
}
}
/* v10: the SPECIAL BRUSH PRODUCT PHOTO follows the form while scrolling */
.configurator-view.special-active .configure-image{
position:sticky;
top:118px;
align-self:start;
}
/* Return the technical measurement drawing to the normal form flow */
.special-scroll-layout{
display:block !important;
}
.special-sticky-column{
position:static !important;
top:auto !important;
margin:0 0 24px !important;
}
.special-sticky-column .special-diagram{
margin:0 !important;
}
.sticky-drawing-note{
display:none !important;
}
.special-question-column{
width:100%;
}
.special-question-column > .special-section:first-child{
padding-top:24px !important;
border-top:1px solid var(--trivec-line) !important;
}
@media(max-width:980px){
.configurator-view.special-active .configure-image{
top:98px;
}
}
@media(max-width:760px){
.configurator-view.special-active .configure-image{
position:static;
top:auto;
}
}
/* v11: compact special-brush follow-up questions */
.compact-special-section{padding:20px 0!important}
.special-section-head.compact{margin-bottom:14px}
.special-section-head.compact h4{font-size:16px}
.special-section-head.compact p{max-width:520px}
.compact-special-section .config-field{margin-bottom:12px!important}
.compact-special-section textarea{min-height:76px!important}
.compact-motor{margin-top:2px;padding:12px 14px;background:#F7F7F4;border-left:3px solid #AD841F}
.conditional-connection{margin-top:2px}
.conditional-connection[hidden],.compact-motor[hidden]{display:none!important}
.compact-upload{min-height:auto;padding:14px 16px!important}
.compact-upload span{max-width:560px}
.compact-final-grid{align-items:end}
@media(max-width:760px){.compact-special-section{padding:18px 0!important}}
/* v12: compact spacing across all forms */
.configure-form .config-field{
padding:10px 0 !important;
}
.config-field label{
margin-bottom:5px !important;
}
.config-field select,
.config-field input,
.config-field textarea{
min-height:42px !important;
padding:8px 10px !important;
}
/* Standard brush: Width / Grit / Quantity closer together */
#standardConfig .config-field{
margin-bottom:0 !important;
padding:10px 0 !important;
}
#standardConfig .auto-specs{
margin-top:14px !important;
}
#standardConfig .auto-spec{
min-height:58px !important;
padding:9px 11px !important;
}
#standardConfig .config-actions{
margin-top:14px !important;
}
#standardConfig .selection-warning{
margin-top:13px !important;
}
/* Special brush form */
.special-section{
padding:17px 0 !important;
}
.special-section-head,
.special-section-head.compact{
margin-bottom:11px !important;
}
.special-grid{
gap:10px !important;
}
.special-section .config-field,
.compact-special-section .config-field{
margin-bottom:8px !important;
padding-top:7px !important;
padding-bottom:7px !important;
}
.special-section textarea,
.compact-special-section textarea{
min-height:70px !important;
}
.special-choice{
margin:2px 0 12px !important;
padding:11px 13px !important;
}
.special-diagram{
margin-bottom:17px !important;
}
.compact-motor{
padding:10px 12px !important;
}
.special-upload,
.compact-upload{
padding:12px 14px !important;
}
/* Checkout */
.contact-form{
padding:22px !important;
}
.contact-form .config-field{
padding:0 0 10px !important;
}
.contact-form .form-row{
gap:10px !important;
}
.checkout-heading{
margin-bottom:12px !important;
}
.checkout-divider{
margin:8px 0 17px !important;
}
.billing-toggle{
margin:5px 0 14px !important;
padding:11px 12px !important;
}
.checkout-help-cta{
margin-bottom:18px !important;
}
.contact-form textarea{
min-height:82px !important;
}
.contact-form .site-button{
margin-top:14px !important;
}
.after-order-note{
margin-top:12px !important;
padding-top:12px !important;
}
/* Keep compact spacing comfortable on mobile */
@media(max-width:767px){
.contact-form{
padding:18px !important;
}
.configure-form .config-field,
#standardConfig .config-field{
padding:9px 0 !important;
}
.special-section{
padding:15px 0 !important;
}
}
/* v13: product information section on white background */
.product-seo{
background:#FFFFFF !important;
}
/* v14: checkout help and form as separate blocks */
.request-checkout{
display:grid;
gap:16px;
align-content:start;
}
.checkout-help-cta{
margin:0 !important;
background:#FFFFFF !important;
border:1px solid #E1E1DD !important;
border-left:3px solid var(--trivec-gold) !important;
padding:18px 20px !important;
}
.contact-form{
margin:0 !important;
}
/* v15: help message + checkout form stacked in the same right column */
.request-checkout-column{
display:grid;
grid-template-columns:1fr;
gap:16px;
min-width:0;
align-content:start;
}
.request-checkout-column .checkout-help-cta{
width:100%;
margin:0 !important;
}
.request-checkout-column .contact-form{
width:100%;
margin:0 !important;
}
@media(max-width:1024px){
.request-checkout-column{
gap:14px;
}
}
/* v16: make the custom brush unmistakably different in the archive */
.special-product-card{
grid-column:1 / -1;
display:grid;
grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
min-height:390px;
border:1px solid #E1D6B9;
background:#FBF8F0;
overflow:hidden;
}
.special-product-card:hover{
transform:translateY(-2px);
border-color:#AD841F;
}
.special-product-image{
position:relative;
aspect-ratio:auto !important;
min-height:390px;
background:#F2EBDD !important;
}
.special-product-image img{
width:100%;
height:100%;
object-fit:cover;
}
.custom-made-badge{
position:absolute;
z-index:2;
top:18px;
left:18px;
padding:7px 10px;
background:#AD841F;
color:#fff;
font-size:10px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
.special-product-copy{
display:flex;
flex-direction:column;
justify-content:center;
padding:42px 44px !important;
}
.special-card-eyebrow{
display:block;
margin-bottom:7px;
color:#AD841F;
font-size:10px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
.special-product-copy h3{
margin:0 0 11px;
font-size:30px;
line-height:1.15;
}
.special-card-lead{
max-width:610px;
margin:0 0 19px !important;
color:#59636A !important;
font-size:13px !important;
line-height:1.65 !important;
}
.special-card-features{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:20px;
}
.special-card-features span{
padding:6px 9px;
border:1px solid #DED2B5;
background:#fff;
color:#59636A;
font-size:10px;
font-weight:700;
}
.special-card-note{
display:grid;
gap:3px;
max-width:620px;
margin-bottom:24px;
padding:13px 15px;
border-left:3px solid #AD841F;
background:#fff;
}
.special-card-note strong{
color:#333F48;
font-size:11px;
}
.special-card-note span{
color:#6C7479;
font-size:10px;
line-height:1.5;
}
.special-product-link{
margin-top:auto;
font-size:12px !important;
font-weight:700 !important;
}
.special-product-card:focus-visible{
outline:2px solid #AD841F;
outline-offset:3px;
}
@media(max-width:900px){
.special-product-card{
grid-template-columns:1fr 1fr;
min-height:340px;
}
.special-product-image{
min-height:340px;
}
.special-product-copy{
padding:32px 30px !important;
}
.special-product-copy h3{
font-size:25px;
}
}
@media(max-width:700px){
.special-product-card{
grid-template-columns:1fr;
min-height:0;
}
.special-product-image{
min-height:280px;
aspect-ratio:4/3 !important;
}
.special-product-copy{
padding:25px 22px 28px !important;
}
.special-card-features{
gap:6px;
}
}
Szczotki do precyzyjnego szczotkowania
Szczotki wygładzają teksturę, usuwają pozostałości i tworzą precyzyjnie wykończone powierzchnie. Materiał, rodzaj szczotki i ustawienia procesu subtelnie wpływają na wygląd i zachowanie powłoki. Wybór szczotki musi być dostosowany do pożądanej powierzchni i procesu produkcyjnego.
Chciałbym porozmawiać o moim projekcie
Twój koszyk jest pusty.
Zobacz koszyk
5 pędzliWybierz pędzel
Szczotka Tynex
Wszechstronna szczotka nylonowa do nadawania faktury, czyszczenia i delikatnego szlifowania drewna.
Szerokość Ziarnistość
Zobacz szczotkę ›
Szczotka mosiężna w pęczku
Szczotka mosiężna w pęczku do kontrolowanego nadawania struktury z trwałym wzorem szczotkowania.
Szerokość
Zobacz szczotkę ›
Spiralna szczotka mosiężna
Spiralna szczotka z drutu mosiężnego do uzyskania wyraźnej i powtarzalnej struktury powierzchni.
Szerokość Grubość drutu
Zobacz szczotkę ›
Szczotka szlifierska
Szczotka szlifierska z elementami ściernymi i z włókna Tampico, zapewniająca precyzyjne wykończenie powierzchni.
Szerokość Ziarnistość
Zobacz szczotkę ›
Wykonane na zamówienie
Dopasowane do Twoich potrzeb
Szczotka na zamówienie
Potrzebujesz szczotki, która nie pasuje do standardowych rozmiarów? Możemy wykonać ją specjalnie dla Twojej maszyny, dostosowując wymiary i proces szczotkowania.
Dokładne wymiary
Dopasowanie do konkretnej maszyny
Ocena techniczna przeprowadzona przez firmę Trivec
Prosimy o podanie wymiarów.
Prosimy o podanie otworu wału, średnicy rdzenia, średnicy całkowitej, długości włosia, szerokości roboczej oraz zdjęć połączenia z maszyną.
Złóż zamówienie na szczotkę na zamówienie ›
Żadne pędzle nie pasują do Twoich aktualnych filtrów.
Potrzebujesz porady?
Nie wiesz, który pędzel będzie odpowiedni?
Opisz nam swój materiał lub oczekiwany efekt na powierzchni. Trivec pomoże Ci dobrać odpowiednią szczotkę jeszcze przed złożeniem zamówienia.
← Powrót do pędzli
O tym pędzlu
Informacje o pędzlu
← Powrót do pędzli
Koszyk
Sprawdź wybrane parametry techniczne, w razie potrzeby dostosuj ilości i uzupełnij dane zamówienia.
Potrzebujesz pomocy przed złożeniem zamówienia?
Nie masz pewności, czy wybrane pędzle są odpowiednie?
Dostarczony zostanie właśnie ten zestaw. Skontaktuj się z firmą Trivec przed sfinalizowaniem zamówienia, jeśli potrzebujesz pomocy w sprawdzeniu typu pędzla lub wybranych parametrów technicznych.
Do kasy
Dane klienta
Nazwa firmy *
Numer VAT (opcjonalnie)
Adres dostawy
Ulica *
Adres rozliczeniowy różni się od adresu dostawy
Adres rozliczeniowy
Firma / nazwa do wystawienia faktury *
Ulica *
Szczegóły zamówienia
Numer zamówienia / numer referencyjny (opcjonalnie)
Uwagi do zamówienia (opcjonalnie)
Akceptuję warunki i zgadzam się z polityką prywatności. Sprawdź dokładnie swoje zamówienie Szczotki zostaną dostarczone zgodnie ze specyfikacją podaną w koszyku. Jeśli masz wątpliwości co do jakiegokolwiek wyboru, skontaktuj się z firmą Trivec przed złożeniem zamówienia.
Złóż zamówienie
Co dalej?
Przesłane przez Ciebie specyfikacje stanowią podstawę Twojego zamówienia. Firma Trivec otrzymuje szczegóły zamówienia i może skontaktować się z Tobą, jeśli przed realizacją zamówienia konieczne będzie uzyskanie dodatkowych wyjaśnień.
Nie wiesz, który pędzel najlepiej sprawdzi się w Twoim procesie?
Wybór szczotki zależy od właściwości materiału i pożądanego efektu powierzchniowego. Krótka rozmowa techniczna często pozwala wyjaśnić dostępne opcje.
Chciałbym porozmawiać o moim projekcie
Dodano do koszyka
const STORAGE_KEY = "trivec_brush_page_request_v1";
const products = {
tynex: {
id:"tynex",
name:"Tynex brush",
description:"Versatile nylon brush for structuring, cleaning and light sanding of wood.",
image:"https://b4451783.assetcdn.net/2.0/4451783/wp-content/uploads/2026/03/Tynex-brush-hard-top.png?lossy=2&strip=1&webp=1",
optionLabel:"Grit",
options:["P36","P46","P60","P80","P120","P180","P240","P320","P400"],
seoTitle:"Tynex brush for controlled wood finishing",
seoIntro:"Tynex brushes combine flexible nylon filaments with abrasive grain and are used for repeatable surface treatment on wood.",
seoBody:"The selected grit influences how aggressively the brush works. Coarser grits create a stronger effect, while finer grits are suited to lighter finishing and preparation work. The correct choice also depends on the material, feed speed and desired surface.",
seoPoints:["Wood finishing","Texturing","Abrasive nylon","Multiple grit options"]
},
bundle: {
id:"bundle",
name:"Bundle brass brush",
description:"Brass bundle brush for controlled structuring with a durable brush pattern.",
image:"https://b4451783.assetcdn.net/2.0/4451783/wp-content/uploads/2026/03/Bundle-brass-brush-top.png?lossy=2&strip=1&webp=1",
optionLabel:"",
options:[],
seoTitle:"Bundle brass brush for pronounced wood structure",
seoIntro:"The bundle brass brush is intended for controlled mechanical structuring where a defined and durable brush pattern is required.",
seoBody:"Brass bundles act directly on the softer parts of the wood surface. The result depends on wood species, machine settings and working width, so the brush choice should match the intended visual and tactile result.",
seoPoints:["Brass bundles","Wood structuring","Durable brush pattern","Standard widths"]
},
spiral: {
id:"spiral",
name:"Spiral brass brush",
description:"Spiral brass wire brush for pronounced and repeatable surface structuring.",
image:"https://b4451783.assetcdn.net/2.0/4451783/wp-content/uploads/2026/04/Spiral-brass-brush-top.png?lossy=2&strip=1&webp=1",
optionLabel:"Wire thickness",
options:["0.18 mm","0.25 mm","0.35 mm"],
seoTitle:"Spiral brass brush for consistent structuring",
seoIntro:"Spiral brass brushes are used when a controlled, repeatable structure is required across wooden boards and profiles.",
seoBody:"Wire thickness affects the brushing action and the final surface appearance. Finer wire generally gives a more subtle treatment, while heavier wire can create a more pronounced structure. Machine setup and wood characteristics remain important.",
seoPoints:["Brass wire","Texturing","Several wire thicknesses","Repeatable finish"]
},
sanding: {
id:"sanding",
name:"Sanding brush",
description:"Sanding brush with abrasive and Tampico elements for controlled surface finishing.",
image:"https://b4451783.assetcdn.net/2.0/4451783/wp-content/uploads/2026/03/Sanding-brush-top.png?lossy=2&strip=1&webp=1",
optionLabel:"Grit",
options:["P80","P120","P150","P180","P220","P240","P280","P320"],
seoTitle:"Sanding brush for controlled surface preparation",
seoIntro:"Sanding brushes combine abrasive elements with flexible support material to treat profiled or structured wood surfaces more evenly.",
seoBody:"Different grit sizes allow the sanding action to be matched to preparation, intermediate sanding or finishing. The brush can follow surface variations that are difficult to reach with rigid sanding tools.",
seoPoints:["Surface preparation","Flexible sanding","Multiple grits","Wood profiles"]
},
special: {
id:"special",
name:"Special brush",
description:"For non-standard dimensions, profiles or process-specific brush requirements.",
image:"https://b4451783.assetcdn.net/2.0/4451783/wp-content/uploads/2026/03/Special-Tynex-brush-conical-top.png?lossy=2&strip=1&webp=1",
special:true,
seoTitle:"Special brushes for non-standard applications",
seoIntro:"Some machines, profiles and finishing processes require a brush outside the standard dimensions or brush constructions.",
seoBody:"Trivec can discuss custom dimensions, profiles and brush materials for specific production requirements. Provide as much information as possible about your machine, workpiece and desired result.",
seoPoints:["Custom dimensions","Process-specific","Machine-specific","Technical support"]
}
};
const state = {
activeProduct:null,
request:[]
};
const catalogView = document.getElementById("catalogView");
const configuratorView = document.getElementById("configuratorView");
const requestView = document.getElementById("requestView");
const productCards = [...document.querySelectorAll(".product-card")];
const filterInputs = [...document.querySelectorAll("[data-filter]")];
const brushSearch = document.getElementById("brushSearch");
const visibleCount = document.getElementById("visibleCount");
const emptyState = document.getElementById("emptyState");
const headerQuoteCount = document.getElementById("headerQuoteCount");
const requestStatusText = document.getElementById("requestStatusText");
const requestList = document.getElementById("requestList");
const configurationJson = document.getElementById("configurationJson");
const toast = document.getElementById("toast");
const mainHero = document.getElementById("mainHero");
const productSeoSection = document.getElementById("productSeoSection");
const seoBrushTitle = document.getElementById("seoBrushTitle");
const seoBrushIntro = document.getElementById("seoBrushIntro");
const seoBrushBody = document.getElementById("seoBrushBody");
const seoBrushPoints = document.getElementById("seoBrushPoints");
const seoBrushImage = document.getElementById("seoBrushImage");
const addFeedback = document.getElementById("addFeedback");
const addFeedbackSpecial = document.getElementById("addFeedbackSpecial");
const headerCart = document.getElementById("headerCart");
const headerQuoteButton = document.getElementById("headerQuoteButton");
const headerCartDropdown = document.getElementById("headerCartDropdown");
const headerMiniCartList = document.getElementById("headerMiniCartList");
const headerCartItemsText = document.getElementById("headerCartItemsText");
const headerCartView = document.getElementById("headerCartView");
const billingDifferent = document.getElementById("billingDifferent");
const billingFields = document.getElementById("billingFields");
const configureImage = document.getElementById("configureImage");
const configureName = document.getElementById("configureName");
const configureDescription = document.getElementById("configureDescription");
const standardConfig = document.getElementById("standardConfig");
const specialConfig = document.getElementById("specialConfig");
const widthSelect = document.getElementById("widthSelect");
const optionField = document.getElementById("optionField");
const optionLabel = document.getElementById("optionLabel");
const optionSelect = document.getElementById("optionSelect");
const quantityInput = document.getElementById("quantityInput");
const coreDiameter = document.getElementById("coreDiameter");
const outerDiameter = document.getElementById("outerDiameter");
const articleReference = document.getElementById("articleReference");
function saveRequest(){
try{ localStorage.setItem(STORAGE_KEY, JSON.stringify(state.request)); }catch(e){}
}
function restoreRequest(){
try{
const raw = JSON.parse(localStorage.getItem(STORAGE_KEY));
if(Array.isArray(raw)) state.request = raw;
}catch(e){}
}
function scrollToBrushes(){
document.getElementById("brushes").scrollIntoView({behavior:"smooth",block:"start"});
}
function showCatalog(){
catalogView.classList.remove("hidden");
configuratorView.classList.remove("active");
requestView.classList.remove("active");
mainHero.style.display = "";
closeHeaderCart();
scrollToBrushes();
}
function showConfigurator(){
catalogView.classList.add("hidden");
requestView.classList.remove("active");
configuratorView.classList.add("active");
mainHero.style.display = "none";
closeHeaderCart();
scrollToBrushes();
}
function showRequest(){
catalogView.classList.add("hidden");
configuratorView.classList.remove("active");
requestView.classList.add("active");
mainHero.style.display = "none";
closeHeaderCart();
renderRequest();
scrollToBrushes();
}
function technicalSpecs(width){
if(String(width)==="600") return {core:"Ø140 mm", outer:"Ø210 mm"};
if(String(width)==="400") return {core:"Ø140 mm", outer:"Ø210 mm"};
return {core:"Ø120 mm", outer:"Ø190 mm"};
}
function makeArticleRef(product, width, option){
const opt = (option || "STD").replace(/[^0-9A-Za-z]/g,"").toUpperCase().slice(0,6);
return `${product.id.toUpperCase()}-${width}-${opt}`;
}
function updateSpecs(){
const product = products[state.activeProduct];
if(!product || product.special) return;
const width = widthSelect.value;
const option = product.options.length ? optionSelect.value : "";
const specs = technicalSpecs(width);
coreDiameter.textContent = specs.core;
outerDiameter.textContent = specs.outer;
articleReference.textContent = makeArticleRef(product,width,option);
}
function updateProductSeo(product){
if(!product) return;
seoBrushTitle.textContent = product.seoTitle || product.name;
seoBrushIntro.textContent = product.seoIntro || product.description || "";
seoBrushBody.textContent = product.seoBody || "";
seoBrushImage.src = product.image;
seoBrushImage.alt = product.name;
seoBrushPoints.innerHTML = "";
(product.seoPoints || []).forEach(point=>{
const span = document.createElement("span");
span.className = "product-seo-point";
span.textContent = point;
seoBrushPoints.appendChild(span);
});
productSeoSection.style.display = "";
}
function renderHeaderCart(){
const quantity = state.request.reduce((sum,item)=>sum+(Number(item.quantity)||0),0);
headerCartItemsText.textContent = `${quantity} ${quantity===1 ? "item" : "items"}`;
if(!state.request.length){
headerMiniCartList.innerHTML = '';
return;
}
headerMiniCartList.innerHTML = state.request.map(item=>{
const meta = item.productId === "special"
? "Special brush"
: [item.width ? item.width + " mm" : "", item.option || ""].filter(Boolean).join(" · ");
return `
`;
}).join("");
}
function openHeaderCart(){
renderHeaderCart();
headerCartDropdown.hidden = false;
headerCart.classList.add("open");
headerQuoteButton.setAttribute("aria-expanded","true");
}
function closeHeaderCart(){
headerCartDropdown.hidden = true;
headerCart.classList.remove("open");
headerQuoteButton.setAttribute("aria-expanded","false");
}
function toggleHeaderCart(){
if(headerCartDropdown.hidden) openHeaderCart();
else closeHeaderCart();
}
function showAddedFeedback(productName, quantity, isSpecial=false){
const feedback = isSpecial ? addFeedbackSpecial : addFeedback;
feedback.textContent = `${quantity} × ${productName} added to your cart.`;
feedback.classList.add("show");
renderHeaderCart();
openHeaderCart();
setTimeout(()=>feedback.classList.remove("show"), 5000);
}
function openProduct(productId){
const product = products[productId];
if(!product) return;
state.activeProduct = productId;
configuratorView.classList.toggle("special-active", Boolean(product.special));
configureImage.src = product.image;
configureImage.alt = product.name;
configureName.textContent = product.name;
configureDescription.textContent = product.description;
updateProductSeo(product);
if(product.special){
standardConfig.style.display = "none";
specialConfig.style.display = "block";
[
"specialShaftHole","specialCoreDiameter","specialTotalDiameter","specialBristleLength",
"specialBrushLength","specialWorkingWidth","specialPurpose","specialMotorPower",
"specialMotorNotes","specialMachine","specialClampDetails","specialNotes"
].forEach(id=>{ const el=document.getElementById(id); if(el) el.value=""; });
document.getElementById("specialHeavySelect").value = "";
document.getElementById("specialConnection").value = "";
document.getElementById("specialQuantity").value = 1;
document.getElementById("specialMotorFields").hidden = true;
document.getElementById("specialConnectionDetailsWrap").hidden = true;
document.getElementById("specialPhotos").value = "";
document.getElementById("specialPhotosStatus").textContent = "No files selected";
}else{
standardConfig.style.display = "block";
specialConfig.style.display = "none";
widthSelect.value = "300";
quantityInput.value = 1;
optionSelect.innerHTML = "";
if(product.options.length){
optionField.style.display = "block";
optionLabel.textContent = product.optionLabel;
product.options.forEach(value=>{
const opt = document.createElement("option");
opt.value = value;
opt.textContent = value;
optionSelect.appendChild(opt);
});
}else{
optionField.style.display = "none";
}
updateSpecs();
}
showConfigurator();
}
function activeConfiguration(){
const product = products[state.activeProduct];
if(!product || product.special) return null;
return {
uid: Date.now() + Math.random(),
productId: product.id,
name: product.name,
image: product.image,
width: widthSelect.value,
option: product.options.length ? optionSelect.value : "",
quantity: Math.max(1,Number(quantityInput.value)||1),
coreDiameter: coreDiameter.textContent,
outerDiameter: outerDiameter.textContent,
articleReference: articleReference.textContent
};
}
function addCurrentToRequest(){
const item = activeConfiguration();
if(!item) return;
state.request.push(item);
saveRequest();
updateRequestStatus();
showAddedFeedback(item.name,item.quantity,false);
showToast();
}
function addSpecial(){
const required = [
["Shaft hole diameter","specialShaftHole"],
["Core diameter","specialCoreDiameter"],
["Total brush diameter","specialTotalDiameter"],
["Bristle length","specialBristleLength"],
["Total brush length","specialBrushLength"],
["Effective working width","specialWorkingWidth"]
];
for(const [label,id] of required){
const field = document.getElementById(id);
if(!field.value || Number(field.value)<=0){
alert(`Please enter ${label.toLowerCase()}.`);
field.focus();
return;
}
}
const purpose = document.getElementById("specialPurpose");
const intensity = document.getElementById("specialHeavySelect");
const connection = document.getElementById("specialConnection");
const photos = document.getElementById("specialPhotos").files;
if(!purpose.value.trim()){
alert("Please briefly describe what the brush should do.");
purpose.focus();
return;
}
if(!intensity.value){
alert("Please select the brushing intensity.");
intensity.focus();
return;
}
if(!connection.value){
alert("Please select the current connection / clamping situation.");
connection.focus();
return;
}
if(photos.length file.name)
};
const details = [
`Shaft hole Ø ${specifications.shaftHoleDiameterMm} mm`,
`Core Ø ${specifications.coreDiameterMm} mm`,
`Total Ø ${specifications.totalDiameterMm} mm`,
`Bristle ${specifications.bristleLengthMm} mm`,
`Length ${specifications.totalBrushLengthMm} mm`,
`Working width ${specifications.effectiveWorkingWidthMm} mm`
].join(" · ");
state.request.push({
uid:Date.now()+Math.random(),
productId:"special",
name:product.name,
image:product.image,
quantity,
details,
specifications
});
saveRequest();
updateRequestStatus();
showAddedFeedback(product.name,quantity,true);
showToast();
}
function updateRequestStatus(){
const items = state.request.length;
const quantity = state.request.reduce((sum,item)=>sum+(Number(item.quantity)||0),0);
headerQuoteCount.textContent = quantity;
requestStatusText.textContent = items
? `${quantity} ${quantity===1 ? "item" : "items"} in your cart.`
: "Your cart is empty.";
configurationJson.value = JSON.stringify(state.request);
renderHeaderCart();
}
function renderRequest(){
updateRequestStatus();
if(!state.request.length){
requestList.innerHTML = '
Your cart is empty. Choose a brush to get started.
';
return;
}
requestList.innerHTML = state.request.map(item=>{
const detail = item.productId === "special"
? `${item.details}`
: `${item.width} mm${item.option ? " · "+item.option : ""}
${item.coreDiameter} core · ${item.outerDiameter} total`;
return `
${item.name}
${detail}
${item.productId !== "special" ? `
Edit selection ` : ""}
Quantity
Remove
`;
}).join("");
}
function applyFilters(){
const query = brushSearch.value.trim().toLowerCase();
const activeGroups = filterInputs.filter(input=>input.checked).map(input=>input.dataset.filter);
let count = 0;
productCards.forEach(card=>{
const groups = card.dataset.groups.split(/\s+/);
const groupMatch = !activeGroups.length || activeGroups.some(group=>groups.includes(group));
const searchMatch = !query || (card.innerText+" "+card.dataset.search).toLowerCase().includes(query);
const show = groupMatch && searchMatch;
card.style.display = show ? "" : "none";
if(show) count++;
});
visibleCount.textContent = count;
emptyState.style.display = count ? "none" : "block";
}
let toastTimer;
function showToast(){
toast.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(()=>toast.classList.remove("show"),1800);
}
productCards.forEach(card=>{
const activate = () => openProduct(card.dataset.product);
card.addEventListener("click", activate);
card.addEventListener("keydown", event=>{
if(event.key === "Enter" || event.key === " "){
event.preventDefault();
activate();
}
});
});
filterInputs.forEach(input=>input.addEventListener("change",applyFilters));
brushSearch.addEventListener("input",applyFilters);
document.getElementById("clearFilters").addEventListener("click",()=>{
brushSearch.value="";
filterInputs.forEach(input=>input.checked=false);
applyFilters();
});
[widthSelect, optionSelect].forEach(control=>{
control.addEventListener("change",updateSpecs);
});
document.getElementById("addToRequest").addEventListener("click",addCurrentToRequest);
function updateSpecialDimensionCheck(){
const core = Number(document.getElementById("specialCoreDiameter").value);
const total = Number(document.getElementById("specialTotalDiameter").value);
const bristle = Number(document.getElementById("specialBristleLength").value);
const box = document.getElementById("dimensionCheck");
if(core && total && total 0 && Math.abs(calculated-bristle) > 5){
box.textContent = `Please double-check the bristle length. Based on the core and total diameter, the radial difference is approximately ${calculated.toFixed(1)} mm.`;
box.classList.add("show");
return;
}
}
box.textContent = "";
box.classList.remove("show");
}
["specialCoreDiameter","specialTotalDiameter","specialBristleLength"].forEach(id=>{
document.getElementById(id).addEventListener("input",updateSpecialDimensionCheck);
});
document.getElementById("specialHeavySelect").addEventListener("change",event=>{
document.getElementById("specialMotorFields").hidden = event.target.value === "No" || !event.target.value;
});
document.getElementById("specialConnection").addEventListener("change",event=>{
const needsDetails = event.target.value && event.target.value !== "Trivec system";
document.getElementById("specialConnectionDetailsWrap").hidden = !needsDetails;
});
document.getElementById("specialPhotos").addEventListener("change",event=>{
const count = event.target.files.length;
document.getElementById("specialPhotosStatus").textContent = count
? `${count} file${count===1?"":"s"} selected`
: "No files selected";
});
document.getElementById("addSpecialRequest").addEventListener("click",addSpecial);
document.getElementById("backToCatalog").addEventListener("click",showCatalog);
document.getElementById("backFromRequest").addEventListener("click",showCatalog);
headerQuoteButton.addEventListener("click",event=>{ event.stopPropagation(); toggleHeaderCart(); });
document.getElementById("openRequestTop").addEventListener("click",showRequest);
headerCartView.addEventListener("click",()=>{
closeHeaderCart();
showRequest();
});
headerCartDropdown.addEventListener("click",event=>event.stopPropagation());
document.addEventListener("click",event=>{
if(!headerCart.contains(event.target)) closeHeaderCart();
});
document.addEventListener("keydown",event=>{
if(event.key === "Escape") closeHeaderCart();
});
requestList.addEventListener("click",event=>{
const remove = event.target.closest("[data-remove]");
if(remove){
const uid = Number(remove.dataset.remove);
state.request = state.request.filter(item=>Number(item.uid)!==uid);
saveRequest();
renderRequest();
return;
}
const edit = event.target.closest("[data-edit]");
if(edit){
const uid = Number(edit.dataset.edit);
const item = state.request.find(entry=>Number(entry.uid)===uid);
if(!item) return;
openProduct(item.productId);
widthSelect.value = item.width || "300";
if(item.option){
[...optionSelect.options].forEach(option=>{
if(option.value===item.option) optionSelect.value=item.option;
});
}
quantityInput.value = item.quantity || 1;
updateSpecs();
}
});
requestList.addEventListener("change",event=>{
const qtyInput = event.target.closest("[data-qty]");
if(!qtyInput) return;
const uid = Number(qtyInput.dataset.qty);
const item = state.request.find(entry=>Number(entry.uid)===uid);
if(!item) return;
item.quantity = Math.max(1,Math.min(100,Number(qtyInput.value)||1));
saveRequest();
updateRequestStatus();
renderRequest();
});
const billingRequiredFields = [
document.getElementById("billingCompany"),
document.getElementById("billingStreet"),
document.getElementById("billingHouseNumber"),
document.getElementById("billingPostalCode"),
document.getElementById("billingCity"),
document.getElementById("billingCountry")
];
function syncBillingAddress(){
const different = billingDifferent.checked;
billingFields.hidden = !different;
billingRequiredFields.forEach(field=>{
field.required = different;
field.disabled = !different;
});
}
billingDifferent.addEventListener("change",syncBillingAddress);
syncBillingAddress();
document.getElementById("quoteForm").addEventListener("submit",event=>{
event.preventDefault();
if(!event.currentTarget.checkValidity()){
event.currentTarget.reportValidity();
return;
}
if(!state.request.length){
showCatalog();
return;
}
configurationJson.value = JSON.stringify(state.request);
alert("Prototype: your order is ready to be submitted. This can be connected to the existing Elementor form in the live website.");
});
document.getElementById("mobileMenuButton").addEventListener("click",()=>{
const nav = document.getElementById("mainNav");
if(getComputedStyle(nav).display==="none"){
nav.style.display="flex";
nav.style.position="absolute";
nav.style.top="72px";
nav.style.left="0";
nav.style.right="0";
nav.style.padding="20px 22px";
nav.style.background="#fff";
nav.style.flexDirection="column";
nav.style.alignItems="flex-start";
nav.style.borderBottom="1px solid #ddd";
nav.style.gap="0";
}else{
nav.removeAttribute("style");
}
});
restoreRequest();
updateRequestStatus();
renderRequest();
applyFilters();
