/* Tablet (≤1024) en mobiel (≤767) — laadt als laatste en overschrijft de basisstijlen.
   Elementor zet containers op mobiel automatisch in kolommen; de header willen we juist als rij houden. */

/* ---------------------------------------------------------------- header */
:root{--cs-header-h:70px}
@media(max-width:1024px){
	[data-elementor-type="header"] .e-con,[data-elementor-type="header"] .e-con-inner{
		flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;
		min-height:0!important;gap:10px!important;
	}
	[data-elementor-type="header"] .e-con-inner{padding-top:10px!important;padding-bottom:10px!important}
	[data-elementor-type="header"] .elementor-widget-image,[data-elementor-type="header"] .elementor-widget-image .elementor-widget-container{flex:0 0 auto!important;width:auto!important;max-width:none!important;text-align:left!important}
	[data-elementor-type="header"] .elementor-widget-image a{display:inline-block}
	[data-elementor-type="header"] .elementor-widget-image img{height:44px!important;width:auto!important;max-width:none!important}
	/* rij: logo-container · tools-container · hamburger-widget (directe kinderen van .e-con-inner) */
	[data-elementor-type="header"] .e-con-inner > .e-con{flex:0 0 auto!important;width:auto!important;max-width:none!important;min-width:0}
	[data-elementor-type="header"] .e-con-inner > .e-con:has(.cs-tools){order:2;flex:1 1 auto!important;justify-content:flex-end!important;margin-left:auto!important}
	[data-elementor-type="header"] .elementor-widget:has(.cs-tools){width:auto!important;max-width:none!important}
	[data-elementor-type="header"] .e-con-inner > .elementor-widget:has(.cs-nav){order:3;flex:0 0 auto!important;width:auto!important;max-width:none!important;margin-left:4px}
	.cs-nav{margin:0}
	.cs-tools{gap:4px}
	.cs-tools .cs-tool{height:40px;padding:0 9px}
	.cs-rfq-open,.cs-quote-btn{height:40px!important;padding:0 14px!important}
	.cs-nav-list{top:var(--cs-header-h,70px)}
	.admin-bar .cs-nav-list{top:calc(var(--cs-header-h,70px) + 32px)}
	.cs-nav-list{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
	.cs-nav-extra{border-bottom:0!important;margin-top:18px;display:grid;gap:8px}
	.cs-nav-extra a{display:flex;align-items:center;justify-content:center;height:48px;border-radius:999px;font:700 14px/1 Montserrat,sans-serif;text-decoration:none;border:1px solid rgba(255,255,255,.3);color:#fff}
	.cs-nav-extra a:first-child{background:#FEDC01;color:#111;border-color:#FEDC01}
	.cs-nav-extra small{display:block;text-align:center;margin-top:10px;font:500 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
	.cs-nav-extra small a{display:inline;height:auto;border:0;color:#fff;font:inherit}
}
@media(max-width:767px){
	[data-elementor-type="header"] .elementor-widget-image img{height:40px!important}
	.cs-tools .cs-tool-search,.cs-tools > a.cs-tool:not(.cs-rfq-open):not(.cs-quote-btn){display:none}
	.cs-rfq-open span,.cs-quote-btn span{display:none}
	.cs-rfq-open,.cs-quote-btn{padding:0 12px!important;gap:6px!important}
	.cs-tool-lang img{width:24px!important}
	.cs-nav-burger{width:40px;height:40px}
	:root{--cs-header-h:60px}
	.admin-bar .cs-nav-list{top:calc(var(--cs-header-h,60px) + 46px)}
}

/* ---------------------------------------------------------------- algemeen ritme */
@media(max-width:1024px){
	.csh-sec,.csh-about,.csh-ind,.csh-std,.csh-kn,.csh-how,.csh-haz,.csh-hfaq,.csh-scene,.csh-spot,.csh-finder{padding-top:72px!important;padding-bottom:72px!important}
	.csh-dist-grid{padding-top:72px;padding-bottom:72px}
	.csh-head{gap:16px 32px}
}
@media(max-width:767px){
	.csh-sec,.csh-about,.csh-ind,.csh-std,.csh-kn,.csh-how,.csh-haz,.csh-hfaq,.csh-scene,.csh-spot,.csh-finder{padding-top:56px!important;padding-bottom:56px!important}
	.csh-dist-grid{padding-top:56px;padding-bottom:56px;gap:32px}
	.csh-wrap{padding-left:18px;padding-right:18px}
	.csh-h{font-size:clamp(34px,10vw,44px)!important}
	.csh-h1{font-size:clamp(46px,14vw,60px)!important}
	.csh-lead{font-size:17px;margin:20px 0 24px}
	.csh-lead2{font-size:16px}
	.csh-p{font-size:15px}
	.csh-btn{width:100%;justify-content:center}
	.csh-cta{display:grid;gap:10px}
	.csh-cta .csh-btn{width:100%}
}

/* hero: op mobiel compacter, statistieken in twee kolommen */
@media(max-width:1100px){
	.csh-hero .csh-wrap{padding-top:56px;padding-bottom:40px;min-height:0;gap:28px}
	.csh-hero{min-height:0}
	.csh-stats{margin-top:36px}
}
@media(max-width:767px){
	.csh-hero .csh-wrap{padding-top:40px;padding-bottom:32px}
	.csh-stats{grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:28px}
	.csh-stats b{font-size:28px}
	.csh-sw a{padding:11px 12px}
	.csh-sw a small{white-space:normal}
	.csh-eyebrow{font-size:10px;letter-spacing:.12em}
}

/* focusgebieden: op tablet derde tegel over de volle breedte, op mobiel lagere tegels */
@media(max-width:1100px) and (min-width:641px){
	.csh-focus-grid .csh-tile:nth-child(3):last-child{grid-column:1/-1;min-height:360px}
	.csh-haz-grid > :nth-child(3):last-child,.csh-kn-grid > :nth-child(3):last-child,.csh-steps > :nth-child(3):last-child{grid-column:1/-1}
	.csh-opts > :nth-child(3):last-child{grid-column:1/-1}
}
@media(max-width:640px){
	.csh-tile{min-height:0}
	.csh-tile-txt{position:relative;padding:72px 20px 22px}
	.csh-tile-txt ul{grid-template-columns:1fr}
}

/* spotlight en scène */
@media(max-width:1100px){
	.csh-spot-grid{gap:32px}
	.csh-stage2{max-width:520px;margin:0 auto;aspect-ratio:4/3}
	.csh-stage2 img{width:70%;height:70%}
}
@media(max-width:767px){
	.csh-stage{aspect-ratio:4/3;border-radius:18px}
	.csh-stage2{aspect-ratio:1/1;border-radius:18px}
	.csh-sizes{gap:6px}
}

/* industrieën: compacte kaarten in twee kolommen op mobiel */
@media(max-width:1100px){.csh-ind-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){
	.csh-ind-grid{grid-template-columns:1fr 1fr;gap:8px}
	.csh-ind a{min-height:0;padding:14px 12px;border-radius:14px}
	.csh-ind a i{position:static;width:20px;height:20px;border-radius:6px;margin-bottom:12px}
	.csh-ind a b{margin-top:0;font-size:16px}
	.csh-ind a small{font-size:12px}
}

/* distributeurs: kaart verbergen op mobiel (pins overlappen), lijst blijft */
@media(max-width:767px){
	.csh-map{display:none}
	.csh-dist-grid{gap:24px}
}
@media(max-width:1100px) and (min-width:768px){.csh-map{aspect-ratio:16/7}}

/* kennis, standaarden, FAQ */
@media(max-width:767px){
	.csh-std-list{gap:8px}
	.csh-fgroup details{padding:0 16px;border-radius:12px}
	.csh-fgroup summary{padding:15px 0;font-size:14.5px}
	.csh-fchips{gap:6px}
}

/* footer: twee kolommen op tablet, één op mobiel, onderste regel netjes */
@media(max-width:767px){
	.csh-ft-top .csh-wrap{gap:24px}
	.csh-ft-main .csh-wrap{gap:26px 20px}
	.csh-ft-bot .csh-wrap{flex-direction:column;align-items:flex-start;gap:12px}
	.csh-ft-form{display:grid;grid-template-columns:1fr;gap:10px}
	.csh-ft-form input,.csh-ft-form button{width:100%}
}

/* ---------------------------------------------------------------- categoriepagina */
@media(max-width:767px){
	.csa-hero .csh-wrap{padding-top:18px;padding-bottom:28px}
	.csa-crumbs{margin-bottom:22px;font-size:11px}
	.csa-hero-grid{gap:18px}
	.csa-side{padding:14px 16px;max-width:none;width:100%}
	.csa-side b{font-size:32px}
	.csa-chips{margin-top:22px;gap:6px}
	.csa-chips a{padding:9px 12px;font-size:12.5px}
	.csa-grid{gap:14px}
	.csa-grid-wrap .csh-wrap{padding-top:32px;padding-bottom:40px}
}
@media(max-width:640px){.csa-grid{grid-template-columns:1fr 1fr;gap:10px}.csa-body{padding:12px}.csa-body h3{font-size:15px}.csa-body p,.csa-badges{display:none}.csa-foot{flex-direction:column;align-items:flex-start;gap:4px}}
@media(max-width:400px){.csa-grid{grid-template-columns:1fr}.csa-body p{display:block}}

/* ---------------------------------------------------------------- productpagina */
@media(max-width:1024px) and (min-width:768px){
	.cs-gal{max-width:600px;margin-left:auto;margin-right:auto}
}
@media(max-width:767px){
	.cs-gal-main{border-radius:14px}
	.cs-gal-thumbs{gap:8px}
	.cs-gal-thumbs button,.cs-gal-thumbs img{width:64px;height:64px}
	.cs-buy{padding:18px 16px 16px;border-radius:14px}
	.cs-rfq-row{flex-wrap:wrap}
	.cs-rfq-row .cs-rfq-add{flex:1 1 100%}
	.cs-rfq-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
	.cs-rfq-row2 > *{width:100%;justify-content:center}
	.cs-buy-trust{gap:6px}
	.cs-swatches{gap:6px}
	.cs-swatch{padding:9px 11px}
	.cs-matrix-scroll{-webkit-overflow-scrolling:touch}
	.cs-stick{padding:8px 14px calc(8px + env(safe-area-inset-bottom));gap:10px;top:auto;bottom:0;transform:translateY(110%);border-top:1px solid var(--cs-line,#DEDCD3);border-bottom:0;box-shadow:0 -12px 30px -24px rgba(17,17,17,.6)}
	.admin-bar .cs-stick{top:auto}
	.cs-stick img{display:none}
	.cs-stick-btn{padding:12px 18px!important;font-size:12.5px!important;white-space:nowrap}
	.cs-cross-row{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- offerte-drawer, formulier, gate */
@media(max-width:767px){
	.cs-rfq-panel{width:100%}
	.cs-rfq-head{padding:16px 18px}
	.cs-rfq-items{padding:14px 18px}
	.cs-rfq-foot{padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
	.cs-rfq-xs-grid{grid-template-columns:repeat(3,1fr);gap:6px}
	.cs-xs-card b{font-size:11.5px}
	.cs-gate-box{padding:24px 18px;border-radius:18px;width:calc(100% - 20px)}
	.cs-rfq-form{padding:18px 16px}
	.cs-rfq-page{gap:22px}
	.cs-rfq-form-foot{flex-direction:column;align-items:stretch}
	.cs-rfq-form-foot button{width:100%}
	.cs-toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto}
}

/* ---------------------------------------------------------------- inhoudspagina's (about, industries, knowledge, distributors, contact) */
@media(max-width:1100px){
	.csp-grid-2,.csp-grid-3,.csp-timeline,.csp-contact-grid,.csp-hero-grid{grid-template-columns:1fr 1fr}
	.csp-hero-grid{grid-template-columns:1fr}
}
@media(max-width:767px){
	.csp-grid-2,.csp-grid-3,.csp-timeline,.csp-contact-grid,.csp-facts{grid-template-columns:1fr}
	.csp-facts{grid-template-columns:1fr 1fr}
	.csp-hero .csh-wrap{padding-top:36px;padding-bottom:36px}
	.csp-tabs{overflow:auto;-webkit-overflow-scrolling:touch}
	.csp-form-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- tik-doelen en overflow */
@media(max-width:1024px){
	button,.csh-btn,.cs-btn,.cs-tool,.csa-chips a,.csh-fchips a,.csh-fchips button{min-height:40px}
	body{overflow-x:hidden}
	.csh-strip div{animation-duration:60s}
	img,video{max-width:100%;height:auto}
}
@media(max-width:767px){
	.cs-quote-bar,.cs-bar{display:none!important}
	table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* productpagina: vertrouwensbalk en feitentabel zonder lege cellen op tablet/mobiel */
@media(max-width:1024px){
	.cs-trustbar{grid-template-columns:1fr 1fr}
	.cs-answer-facts{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
	.cs-trustbar{grid-template-columns:1fr}
	.cs-answer-facts{grid-template-columns:1fr 1fr}
}