Brosses | Trivec Brushing Solutions – concept de configurateur
: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;
}
}
Pinceaux pour un brossage contrôlé
Les brosses affinent la texture, éliminent les résidus et permettent d’obtenir des surfaces uniformes. Le matériau, le type de brosse et les paramètres de traitement influencent subtilement l’aspect et le comportement du revêtement. Le choix de la brosse doit être adapté à la surface souhaitée et au processus de production.
Je souhaite vous parler de mon projet
Votre panier est vide.
Voir le panier
5 pinceauxChoisissez un pinceau
Brosse Tynex
Brosse polyvalente en nylon destinée au modelage, au nettoyage et au ponçage léger du bois.
Largeur Grain
Voir la brosse ›
Brosse en laiton à poils groupés
Brosse en laiton en faisceau pour un texturage contrôlé avec un motif de brossage durable.
Largeur
Voir la brosse ›
Brosse hélicoïdale en laiton
Brosse en fil de laiton en spirale pour une structuration de surface marquée et reproductible.
Largeur Épaisseur du fil
Voir la brosse ›
Brosse de ponçage
Brosse de ponçage dotée d'éléments abrasifs et de fibres de Tampico pour une finition contrôlée des surfaces.
Largeur Grain
Voir la brosse ›
Sur mesure
Conçues pour votre application
Brosse sur mesure
Vous avez besoin d'une brosse qui ne correspond pas aux dimensions standard ? Nous pouvons en fabriquer une adaptée à votre machine, à vos dimensions et à votre processus de brossage.
Dimensions précises
Adaptation spécifique à votre machine
Examen technique par Trivec
Veuillez nous fournir les cotes.
Nous vous demandons le diamètre du trou d'axe, le diamètre du noyau, le diamètre total, la longueur des poils, la largeur de travail et des photos du raccordement à la machine.
Lancer la demande de brosse sur mesure ›
Aucun pinceau ne correspond à vos filtres actuels.
Besoin de conseils ?
Vous ne savez pas quelle brosse choisir ?
Parlez-nous de votre matériau ou du résultat souhaité pour la surface. Trivec peut vous aider à choisir le pinceau adapté avant que vous ne passiez commande.
← Retour aux pinceaux
À propos de ce pinceau
Informations sur le pinceau
← Retour à la sélection de pinceaux
Panier
Vérifiez les caractéristiques sélectionnées, modifiez les quantités si nécessaire, puis complétez les détails de votre commande.
Vous avez besoin d'aide avant de passer commande ?
Vous n'êtes pas sûr que les brosses que vous avez sélectionnées soient les bonnes ?
La composition sélectionnée correspond à celle qui vous sera livrée. Contactez Trivec avant de finaliser votre commande si vous souhaitez obtenir de l'aide pour vérifier le type de brosse ou les caractéristiques techniques sélectionnées.
Paiement
Coordonnées du client
Raison sociale *
Numéro de TVA (facultatif)
Adresse de livraison
Rue *
L'adresse de facturation est différente de l'adresse de livraison
Adresse de facturation
Société / nom de facturation *
Rue *
Détails de la commande
Numéro de bon de commande / référence (facultatif)
Remarques concernant la commande (facultatif)
J'accepte les conditions générales et j'accepte la politique de confidentialité. Vérifiez attentivement votre commande Les brosses vous seront livrées conformément aux spécifications indiquées dans votre panier. Si vous avez des doutes concernant l'un de vos choix, veuillez contacter Trivec avant de passer commande.
Passer la commande
Quelle est la prochaine étape ?
Les spécifications que vous transmettez constituent la base de votre commande. Trivec reçoit les détails de la commande et peut vous contacter si des précisions sont nécessaires avant le traitement de celle-ci.
Vous ne savez pas quelle brosse convient à votre procédé ?
Le choix de la brosse dépend du comportement du matériau et du résultat souhaité pour la surface. Une brève discussion technique permet souvent de clarifier les options.
Je souhaite discuter de mon projet
Ajouté au panier
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();
