Bürsten | Trivec Brushing Solutions – Konfigurator-Konzept
: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;
}
}
Pinsel für kontrolliertes Auftragen
Bürsten verfeinern die Textur, entfernen Rückstände und schaffen kontrollierte Oberflächen. Material, Bürstentyp und Prozessparameter beeinflussen das Erscheinungsbild und das Beschichtungsverhalten auf subtile Weise. Die Auswahl der Bürste muss auf die gewünschte Oberfläche und den Produktionsprozess abgestimmt sein.
Ich möchte über mein Projekt sprechen
Ihr Warenkorb ist leer.
Warenkorb anzeigen
5 PinselWählen Sie eine Bürste aus
Tynex-Bürste
Vielseitige Nylonbürste zum Strukturieren, Reinigen und leichten Abschleifen von Holz.
Breite Körnung
Bürste anzeigen ›
Messing-Bündelbürste
Messing-Bündelbürste für kontrollierte Strukturierung mit langlebigem Bürstenmuster.
Breite
Bürste anzeigen ›
Spiralförmige Messingbürste
Spiralförmige Messingdrahtbürste zur ausgeprägten und wiederholbaren Oberflächenstrukturierung.
Breite Drahtstärke
Bürste anzeigen ›
Schleifbürste
Schleifbürste mit Schleif- und Tampico-Elementen für eine kontrollierte Oberflächenbearbeitung.
Breite Körnung
Bürste anzeigen ›
Maßgefertigt
Maßgeschneidert für Ihre Anwendung
Maßgefertigte Bürste
Benötigen Sie eine Bürste, die nicht den Standardgrößen entspricht? Wir fertigen eine Bürste, die genau auf Ihre Maschine, Ihre Maße und Ihren Bürstvorgang zugeschnitten ist.
Genaue Abmessungen
Maschinenspezifische Passform
Technische Überprüfung durch Trivec
Bitte geben Sie die Maße an.
Wir benötigen Angaben zu Schaftbohrung, Kerndurchmesser, Gesamtdurchmesser, Borstenlänge, Arbeitsbreite sowie Fotos des Maschinenanschlusses.
Anfrage für eine maßgefertigte Bürste starten ›
Es gibt keine Pinsel, die Ihren aktuellen Filtern entsprechen.
Benötigen Sie Beratung?
Sie sind sich nicht sicher, welche Bürste die richtige ist?
Teilen Sie uns bitte mit, um welches Material es sich handelt oder welches Oberflächenergebnis Sie erzielen möchten. Trivec hilft Ihnen gerne bei der Auswahl der richtigen Bürste, bevor Sie Ihre Bestellung aufgeben.
← Zurück zu den Pinseln
Über diesen Pinsel
Informationen zum Pinsel
← Zurück zu den Pinseln
Warenkorb
Überprüfen Sie die ausgewählten Spezifikationen, passen Sie die Mengen bei Bedarf an und vervollständigen Sie Ihre Bestelldaten.
Benötigen Sie Hilfe vor der Bestellung?
Sind Sie sich nicht sicher, ob die von Ihnen ausgewählten Bürsten die richtigen sind?
Die ausgewählte Zusammensetzung entspricht der Lieferung. Wenden Sie sich vor dem Bezahlvorgang an Trivec, wenn Sie Hilfe bei der Überprüfung des Bürstentyps oder der ausgewählten Spezifikationen benötigen.
Zur Kasse
Kundendaten
Firmenname *
Umsatzsteuer-Identifikationsnummer (optional)
Lieferadresse
Straße *
Die Rechnungsadresse unterscheidet sich von der Lieferadresse
Rechnungsadresse
Rechnungsempfänger / Name *
Straße *
Bestelldetails
Bestellnummer / Referenz (optional)
Bestellhinweise (optional)
Ich akzeptiere die Allgemeinen Geschäftsbedingungen und stimme der Datenschutzerklärung zu. Bitte überprüfen Sie Ihre Bestellung sorgfältig Die Bürsten werden gemäß den in Ihrem Warenkorb angegebenen Spezifikationen geliefert. Sollten Sie sich bei einer Auswahl unsicher sein, wenden Sie sich bitte vor der Bestellung an Trivec.
Bestellung aufgeben
Wie geht es nun weiter?
Die von Ihnen übermittelten Angaben bilden die Grundlage Ihrer Bestellung. Trivec erhält die Bestelldaten und wird sich gegebenenfalls mit Ihnen in Verbindung setzen, falls vor der Bearbeitung noch etwas geklärt werden muss.
Sie sind sich nicht sicher, welche Bürste für Ihren Arbeitsprozess geeignet ist?
Die Auswahl der Bürste hängt vom Materialverhalten und dem gewünschten Oberflächenergebnis ab. Oftmals hilft bereits ein kurzes technisches Gespräch, um die Möglichkeiten zu klären.
Ich möchte über mein Projekt sprechen
In den Warenkorb gelegt
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();
