/* === Brand Energizer - 'Bestanden uploaden' knop groter maken zodat hij opvalt === */
connect-uploader::part(button) {
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}

/* === Brand Energizer - winkelwagen knoppen: tekst past niet mooi in blok (padding/hoogte conflict fix) === */
.woocommerce-cart table.cart td.actions .button,
.woocommerce-cart .coupon .button {
  height: auto !important;
  min-height: 48px !important;
  padding: 12px 26px !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
}

/* Fluent Forms huisstijl */
.fluentform .ff-btn-submit{background:#FABB5C!important;color:#21254F!important;border:none!important;border-radius:99px!important;font-weight:700!important;padding:13px 32px!important;font-family:Figtree,sans-serif!important;}
.fluentform .ff-btn-submit:hover{background:#F0A93C!important;}
.fluentform .ff-el-form-control:focus{border-color:#FABB5C!important;box-shadow:0 0 0 2px rgba(250,187,92,.25)!important;}
.fluentform .ff-el-input--label label{font-weight:600;color:#21254F;}

/* === Brand Energizer – klassieke winkelwagen & checkout === */
.woocommerce, .woocommerce-page, .woocommerce form, .woocommerce table { font-family: Figtree, sans-serif; }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit, .woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background-color:#FABB5C !important; color:#21254F !important; border:none !important;
  border-radius:8px !important; font-weight:700 !important; text-transform:none !important;
  box-shadow:none !important; padding:14px 26px !important; transition:background-color .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #place_order:hover, .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background-color:#F0A93C !important; color:#21254F !important;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button.connect-checkout-blocked,
.woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce button.button:disabled {
  background-color:#E6E9F2 !important; color:#6B7194 !important; cursor:not-allowed; opacity:1 !important;
}

.woocommerce .cart_item a[class*="upload"], .woocommerce .cart_item button[class*="upload"],
a.probo-upload-button, .probo-upload-files, .connect-upload-button {
  background-color:#21254F !important; color:#fff !important; border:none !important;
  border-radius:8px !important; font-weight:700 !important;
}

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.cart_totals h2, .woocommerce-checkout h3, #order_review_heading { color:#21254F !important; }

.woocommerce table.shop_table { border:1px solid #E6E9F2 !important; border-radius:10px; overflow:hidden; }
.woocommerce table.shop_table th { color:#21254F !important; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top:1px solid #E6E9F2 !important; }

.woocommerce .cart_totals, .woocommerce-checkout #order_review {
  background:#F6F7FB; border:1px solid #E6E9F2; border-radius:12px; padding:6px 22px;
}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"], .woocommerce-checkout select, #coupon_code {
  border:1px solid #E6E9F2 !important; border-radius:8px !important; padding:12px 14px !important;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce-checkout input:focus, #coupon_code:focus {
  border-color:#FABB5C !important; outline:none !important;
}

.woocommerce-info, .woocommerce-message { border-top-color:#FABB5C !important; }
.woocommerce-info::before, .woocommerce-message::before { color:#FABB5C !important; }

/* Vanaf-prijs placeholder voor producten zonder berekende prijs (9 complexe producten) */
.woocommerce .price:empty::before{content:"Vanaf – prijs in configurator";color:#21254F;font-weight:600;font-size:.85em;display:inline-block;}


/* Hele categorie-tegel (foto + titel) klikbaar maken */
.elementor-image-box-wrapper { position: relative; }
.elementor-image-box-img a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}


/* === MOBIELE FIXES === */

/* Logo paste niet in de header: nu met lucht eromheen */
.site-header img.custom-logo{max-height:64px;width:auto;height:auto}
@media (max-width:1024px){.site-header img.custom-logo{max-height:42px}}

/* Categoriepagina: lange intro inkorten op mobiel */
@media (max-width:767px){.archive-description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}}

/* Winkelwagen: waardebonveld en melding liepen door elkaar */
@media (max-width:767px){
.woocommerce .cart .coupon{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.woocommerce .cart .coupon .input-text{flex:1 1 100%;min-width:0}
.woocommerce .cart .coupon .button{flex:1 1 100%;white-space:normal;line-height:1.3}
}
.woocommerce-error,.woocommerce-message,.woocommerce-info{position:relative;z-index:2;clear:both}

/* === ZIJBALK MOBIEL: zoekveld en prijsfilter boven de producten === */
@media (max-width:1024px){
.woocommerce-shop .content-container,.tax-product_cat .content-container{display:flex;flex-direction:column}
.woocommerce-shop .content-container>.primary-sidebar,.tax-product_cat .content-container>.primary-sidebar{order:-1;margin:0 0 24px}
.woocommerce-shop .primary-sidebar .widget_product_categories,.tax-product_cat .primary-sidebar .widget_product_categories{display:none}
}
@media (max-width:767px){
.woocommerce-result-count{font-size:.85em;margin-bottom:4px}
.woocommerce-ordering{margin-bottom:14px}
}

/* === FOOTER VERTROUWEN EN BETAALMETHODEN === */
.be-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;margin:0 0 12px;font-size:.92em;color:#dfe2f2;line-height:1.5}
.be-trust span{display:inline-flex;align-items:center;gap:7px}
.be-trust b{color:#FABB5C;font-weight:700}
.be-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0 0 12px;font-size:.85em;color:#b9bedc}
.be-pay img{height:26px;width:auto;display:block;border-radius:3px}
.be-legal{color:#b9bedc;font-size:.85em;margin:0;line-height:1.7}
.be-legal a{color:#b9bedc}
@media (max-width:600px){.be-trust{gap:4px 16px;font-size:.85em}}


/* === ELEMENTOR VOLGT DE HUISLETTER === */
.elementor-kit-30{
--e-global-typography-primary-font-family:"Figtree";
--e-global-typography-secondary-font-family:"Figtree";
--e-global-typography-text-font-family:"Figtree";
--e-global-typography-accent-font-family:"Figtree";
}

/* === 404 HULPBLOK === */
.be-404-hulp{margin-top:28px;padding-top:22px;border-top:1px solid #E6E9F2}
.be-404-hulp p{margin:0 0 12px}
.be-404-knoppen{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.be-404-knoppen .button{background:#FABB5C;color:#21254F;border-radius:999px;padding:10px 20px;font-weight:700;text-decoration:none}
.be-404-knoppen .button:hover{background:#F0A93C}
.be-404-contact{font-size:.92em;color:#4A4F73}


/* Categorie-tegel titels: geen lelijke afbreking met losse letter op mobiel */
@media (max-width: 767px) {
	.elementor-image-box-title {
		    font-size: 18px !important;
		    line-height: 1.3 !important;
		    word-break: normal !important;
		    overflow-wrap: break-word !important;
		    hyphens: auto !important;
	}
}
	


/* === Brand Energizer - Bestel nu header-knop: tekst niet laten wrappen === */
.site-header .header-button-inner-wrap {
  flex-shrink: 0 !important;
  width: auto !important;
}
.site-header .header-button-inner-wrap a.button {
  white-space: nowrap !important;
}


/* Fix: verwijder een leeg, onzichtbaar widget-vakje dat een gat veroorzaakte tussen de CTA-band en de footer */
.elementor-element-43a498a{
  display:none !important;
}

/* Fix: footer-kleur laat nu door vanuit de CTA-band i.p.v. een harde sprong */
.site-middle-footer-wrap .site-footer-row-container-inner{
  background: linear-gradient(155deg, #21254F 0%, #14172f 100%) !important;
}


body.home .elementor-element-43a498a{
  display:none !important;
}

body.home .site-middle-footer-wrap .site-footer-row-container-inner{
  background: linear-gradient(155deg, #21254F 0%, #14172f 100%) !important;
}
/* Verbergt een tweede leeg restant-widgetje (bevat alleen een kopie van eerdere CSS, geen echte content) dat nog 20px ruimte innam tussen de CTA-band en de footer */
body.home .elementor-element-8b9b5a3{
  display:none !important;
}


/* Footer: onderkant van de CTA-kaart recht maken (i.p.v. rond), zodat hij vlak op de footer aansluit zonder witte hoekjes. Bovenkant blijft rond. */
body.home .elementor-element-b7b96df{
  border-radius:28px 28px 0 0 !important;
}

/* Snelheid: productfoto direct tonen i.p.v. wachten op galerij-script (LCP mobiel), toegevoegd 01-10-2026 */
.woocommerce-product-gallery{opacity:1!important}


/* Menu optie 1 (okt 2026): één menu. Max Mega Menu op desktop én mobiel, mobiele themaheader + zijpaneel uit (scheelt 340 dubbele menu-items in de HTML). Vereist Max Mega Menu-omschakelbreedte 1024px. */
@media (max-width:1024px){
#mobile-header{display:none !important}
#main-header{display:block !important}
#main-header [data-section="kadence_customizer_header_search"],
#main-header [data-section="kadence_customizer_header_button"]{display:none !important}
#mega-menu-wrap-primary .mega-menu-toggle{background:transparent !important}
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner,#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::before,#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::after{background-color:#FFFFFF !important}
#mega-menu-wrap-primary #mega-menu-primary{background:#21254F !important;padding-top:56px !important}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{font-family:Figtree,sans-serif !important;font-size:16px !important;font-weight:600 !important;line-height:50px !important;height:50px !important;padding:0 20px !important;color:#FFFFFF !important;background:transparent !important;border-bottom:1px solid #2C3163 !important}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{color:#FABB5C !important}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu{background:#1B1F45 !important;padding:8px 20px 14px !important}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link{color:#FFFFFF !important;font-family:Figtree,sans-serif !important;font-size:12px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.04em !important;padding:14px 0 4px !important}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link{color:#C9CCE0 !important;font-family:Figtree,sans-serif !important;font-size:15px !important;line-height:1.3 !important;padding:10px 0 10px 10px !important}
}


/* Header één kleur (okt 2026): navy #21254F op alle pagina's, menubalk transparant, actief/hover oranje, iconen wit. Hero home begint in dezelfde navy voor naadloze overgang. */
html body .site-header, html body #masthead, html body #main-header, html body .site-header #mega-menu-wrap-primary{background:#21254F !important}
@media (min-width:1025px){
html body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{background:transparent !important;color:#FFFFFF !important}
html body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
html body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
html body #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-ancestor > a.mega-menu-link,
html body #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link{background:transparent !important;color:#FABB5C !important}
}
html body #main-header .header-cart-button, html body #main-header .header-cart-button svg, html body #main-header .search-toggle-open, html body #main-header .search-toggle-open svg{color:#FFFFFF !important}
body.home .elementor-element-12bad5e8{background-image:linear-gradient(180deg,#21254F 0%,#181B3F 55%,#12142F 100%) !important}