/* CableSafe experience layer — scroll, reveal, command palette, finder, hotspots.
   Alle klassen beginnen met cs- zodat niets van Elementor of WooCommerce wordt geraakt. */

:root{
	--cs-yellow:#FEDC01;
	--cs-black:#111111;
	--cs-ink:#1A1A18;
	--cs-warm:#F6F5F0;
	--cs-stone:#6F6D65;
	--cs-line:#DEDCD3;
	--cs-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------------- 1. leesvoortgang */
.cs-progress{
	position:fixed;inset:0 0 auto 0;height:3px;z-index:99998;
	background:var(--cs-yellow);transform:scaleX(0);transform-origin:0 50%;
	will-change:transform;pointer-events:none;
}

/* ---------------------------------------------------------------- 2. header verdicht */
/* sticky: geen backdrop-filter/background op de header-wrapper (maakt de wrapper containing block voor position:fixed → sticky scrolt mee) */
body.cs-scrolled [data-elementor-type="header"] .cs-header.elementor-sticky--active{
	box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px -18px rgba(17,17,17,.7);
}
[data-elementor-type="header"]{backdrop-filter:none!important}
[data-elementor-type="header"] .cs-header.elementor-sticky--active{background:#1B1C1E!important}
[data-elementor-type="header"] .elementor-sticky__spacer{visibility:hidden}
[data-elementor-type="header"] .elementor-sticky--active{transition:box-shadow .4s var(--cs-ease)}
[data-elementor-type="header"]{transition:box-shadow .4s var(--cs-ease),background .4s var(--cs-ease)}

/* ---------------------------------------------------------------- 3. reveal */
[data-cs-reveal]{
	opacity:0;transform:translate3d(0,18px,0);
	transition:opacity .7s var(--cs-ease),transform .7s var(--cs-ease);
	transition-delay:var(--cs-d,0ms);
}
[data-cs-reveal].cs-in{opacity:1;transform:none}
html[data-cs-motion="off"] [data-cs-reveal]{opacity:1!important;transform:none!important;transition:none!important}

/* ---------------------------------------------------------------- 4. spotlight op kaarten */
.cs-spot{position:relative;isolation:isolate}
.cs-spot::before{
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	opacity:0;transition:opacity .45s var(--cs-ease);border-radius:inherit;
	background:radial-gradient(280px circle at var(--cs-mx,50%) var(--cs-my,50%),rgba(254,220,1,.28),transparent 62%);
}
.cs-spot:hover::before{opacity:1}
.cs-spot>*{position:relative;z-index:1}

/* ---------------------------------------------------------------- 5. commandopalet */
.cs-cmd{
	position:fixed;inset:0;z-index:99999;display:none;
	background:rgba(17,17,17,.44);backdrop-filter:blur(6px);
	padding:12vh 20px 20px;
}
.cs-cmd[open],.cs-cmd.cs-open{display:block;animation:cs-fade .22s var(--cs-ease)}
@keyframes cs-fade{from{opacity:0}to{opacity:1}}
.cs-cmd-box{
	max-width:680px;margin:0 auto;background:#fff;border-radius:18px;overflow:hidden;
	box-shadow:0 40px 90px -30px rgba(17,17,17,.55);
	animation:cs-pop .32s var(--cs-ease);
}
@keyframes cs-pop{from{opacity:0;transform:translateY(-12px) scale(.985)}to{opacity:1;transform:none}}
.cs-cmd-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--cs-line)}
.cs-cmd-head svg{flex:0 0 auto;opacity:.5}
.cs-cmd-input{
	flex:1;border:0;outline:0;font:500 17px/1.3 Montserrat,system-ui,sans-serif;color:var(--cs-ink);background:none;
}
.cs-cmd-input::placeholder{color:#9b998f;font-weight:400}
.cs-kbd{
	font:600 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;color:var(--cs-stone);
	border:1px solid var(--cs-line);border-radius:6px;padding:5px 7px;background:var(--cs-warm);
}
.cs-cmd-list{max-height:52vh;overflow:auto;padding:8px}
.cs-cmd-group{font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#9b998f;padding:14px 12px 8px}
.cs-cmd-item{
	display:flex;align-items:center;gap:12px;width:100%;text-align:left;
	padding:11px 12px;border:0;border-radius:11px;background:none;cursor:pointer;
	font:400 15px/1.35 Lato,system-ui,sans-serif;color:var(--cs-ink);text-decoration:none;
}
.cs-cmd-item small{display:block;color:var(--cs-stone);font-size:12.5px;margin-top:2px}
.cs-cmd-item[aria-selected="true"],.cs-cmd-item:hover{background:var(--cs-warm)}
.cs-cmd-item[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--cs-yellow)}
.cs-cmd-ico{
	width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--cs-warm);
	display:grid;place-items:center;font:700 12px/1 Montserrat,sans-serif;color:var(--cs-ink);overflow:hidden
}
.cs-cmd-ico img{width:100%;height:100%;object-fit:cover}
.cs-cmd-foot{display:flex;gap:16px;padding:11px 18px;border-top:1px solid var(--cs-line);background:var(--cs-warm);
	font:400 12px/1 Lato,sans-serif;color:var(--cs-stone)}
.cs-cmd-empty{padding:28px 14px;text-align:center;color:var(--cs-stone);font:400 14px/1.5 Lato,sans-serif}

/* zoek-knop in de header krijgt een hint */
.cs-cmd-hint{
	position:fixed;right:18px;bottom:18px;z-index:99990;display:none;
}

/* ---------------------------------------------------------------- 6. offerte-balk */
.cs-bar{
	position:fixed;left:0;right:0;bottom:0;z-index:99991;
	transform:translateY(110%);transition:transform .5s var(--cs-ease);
	background:var(--cs-black);color:#fff;
	padding:12px max(20px,4vw);
	display:flex;align-items:center;gap:18px;flex-wrap:wrap;
	box-shadow:0 -18px 40px -30px rgba(0,0,0,.8);
}
.cs-bar.cs-in{transform:none}
.cs-bar p{margin:0;font:400 14.5px/1.4 Lato,sans-serif;flex:1 1 240px}
.cs-bar strong{font:700 14.5px/1.4 Montserrat,sans-serif;display:block}
.cs-bar a{
	background:var(--cs-yellow);color:var(--cs-black);text-decoration:none;
	font:700 13px/1 Montserrat,sans-serif;letter-spacing:.02em;
	padding:13px 20px;border-radius:999px;white-space:nowrap;
	transition:transform .3s var(--cs-ease),box-shadow .3s var(--cs-ease);
}
.cs-bar a:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(254,220,1,.9)}
.cs-bar button{
	background:none;border:0;color:#8b8981;cursor:pointer;font-size:20px;line-height:1;padding:6px;
}
.cs-bar button:hover{color:#fff}

/* ---------------------------------------------------------------- 7. tellers */
.cs-counters{display:grid;gap:1px;background:var(--cs-line);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:1px solid var(--cs-line)}
.cs-counter{background:#fff;padding:28px 24px}
.cs-counter b{display:block;font:700 clamp(32px,4vw,46px)/1 Montserrat,sans-serif;color:var(--cs-ink);font-variant-numeric:tabular-nums}
.cs-counter span{display:block;margin-top:8px;font:400 13.5px/1.45 Lato,sans-serif;color:var(--cs-stone)}

/* ---------------------------------------------------------------- 8. marquee */
.cs-marquee{overflow:hidden;border-block:1px solid var(--cs-line);background:#fff;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cs-marquee-track{display:flex;gap:48px;width:max-content;animation:cs-scroll 38s linear infinite}
.cs-marquee:hover .cs-marquee-track{animation-play-state:paused}
@keyframes cs-scroll{to{transform:translateX(-50%)}}
.cs-marquee span{font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-stone);white-space:nowrap;display:flex;align-items:center;gap:12px}
.cs-marquee span::before{content:"";width:6px;height:6px;background:var(--cs-yellow);border-radius:2px;flex:0 0 6px}
html[data-cs-motion="off"] .cs-marquee-track{animation:none}

/* ---------------------------------------------------------------- 9. productkiezer */
.cs-finder{
	background:var(--cs-black);color:#fff;border-radius:22px;overflow:hidden;
	display:grid;grid-template-columns:minmax(0,1fr);
}
.cs-finder-in{padding:clamp(26px,4vw,48px)}
.cs-finder-eyebrow{font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--cs-yellow);margin:0 0 14px}
.cs-finder h3{font:700 clamp(22px,2.6vw,32px)/1.15 Montserrat,sans-serif;margin:0 0 8px;color:#fff;text-transform:none}
.cs-finder p.cs-sub{margin:0 0 26px;font:400 15px/1.55 Lato,sans-serif;color:#b8b6ad;max-width:52ch}
.cs-steps{display:flex;gap:8px;margin-bottom:24px}
.cs-steps i{height:3px;flex:1;background:#3a3a36;border-radius:2px;overflow:hidden}
.cs-steps i b{display:block;height:100%;width:0;background:var(--cs-yellow);transition:width .5s var(--cs-ease)}
.cs-steps i.cs-done b{width:100%}
.cs-q{font:700 18px/1.35 Montserrat,sans-serif;margin:0 0 18px;color:#fff}
.cs-opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cs-opt{
	display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;
	background:#1c1c19;border:1px solid #2f2f2b;border-radius:14px;padding:16px 18px;cursor:pointer;color:#fff;
	font:600 15px/1.3 Montserrat,sans-serif;
	transition:border-color .3s var(--cs-ease),transform .3s var(--cs-ease),background .3s var(--cs-ease);
}
.cs-opt small{font:400 13px/1.45 Lato,sans-serif;color:#a3a199}
.cs-opt:hover{border-color:var(--cs-yellow);transform:translateY(-2px);background:#232320}
.cs-opt:focus-visible{outline:2px solid var(--cs-yellow);outline-offset:3px}
.cs-back{margin-top:20px;background:none;border:0;color:#8b8981;cursor:pointer;font:400 13px/1 Lato,sans-serif}
.cs-back:hover{color:#fff}
.cs-result{display:grid;gap:22px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
@media(max-width:820px){.cs-result{grid-template-columns:1fr}}
.cs-result h4{font:700 clamp(20px,2.4vw,28px)/1.2 Montserrat,sans-serif;margin:0 0 10px;color:#fff;text-transform:none}
.cs-result p{margin:0 0 18px;font:400 15px/1.6 Lato,sans-serif;color:#b8b6ad}
.cs-result ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.cs-result li{font:400 14px/1.5 Lato,sans-serif;color:#d6d4cb;padding-left:22px;position:relative}
.cs-result li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;background:var(--cs-yellow);border-radius:2px}
.cs-cta-row{display:flex;gap:10px;flex-wrap:wrap}
.cs-btn{
	display:inline-block;background:var(--cs-yellow);color:var(--cs-black);text-decoration:none;
	font:700 13px/1 Montserrat,sans-serif;padding:15px 24px;border-radius:999px;border:0;cursor:pointer;
	transition:transform .3s var(--cs-ease),box-shadow .3s var(--cs-ease);
}
.cs-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(254,220,1,.95)}
.cs-btn--ghost{background:none;color:#fff;border:1px solid #45453f}
.cs-btn--ghost:hover{border-color:#fff;box-shadow:none}
.cs-pick{display:grid;gap:10px}
.cs-pick a{
	display:flex;gap:14px;align-items:center;background:#1c1c19;border:1px solid #2f2f2b;border-radius:14px;
	padding:12px;text-decoration:none;color:#fff;transition:border-color .3s var(--cs-ease),transform .3s var(--cs-ease)
}
.cs-pick a:hover{border-color:var(--cs-yellow);transform:translateX(3px)}
.cs-pick img{width:56px;height:56px;object-fit:cover;border-radius:9px;background:#2a2a26;flex:0 0 56px}
.cs-pick b{display:block;font:600 14.5px/1.3 Montserrat,sans-serif}
.cs-pick small{display:block;color:#a3a199;font:400 12.5px/1.4 Lato,sans-serif;margin-top:3px}

/* ---------------------------------------------------------------- 10. gevaren-hotspots */
.cs-scene{position:relative;border-radius:20px;overflow:hidden;background:var(--cs-warm)}
.cs-scene>img{display:block;width:100%;height:auto}
.cs-hot{
	position:absolute;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;padding:0;
	background:var(--cs-yellow);color:var(--cs-black);
	font:700 13px/34px Montserrat,sans-serif;text-align:center;
	transform:translate(-50%,-50%);
	box-shadow:0 0 0 0 rgba(254,220,1,.65);
	animation:cs-pulse 2.6s var(--cs-ease) infinite;
}
.cs-hot:nth-of-type(2){animation-delay:.5s}
.cs-hot:nth-of-type(3){animation-delay:1s}
.cs-hot:nth-of-type(4){animation-delay:1.5s}
@keyframes cs-pulse{0%{box-shadow:0 0 0 0 rgba(254,220,1,.6)}70%{box-shadow:0 0 0 16px rgba(254,220,1,0)}100%{box-shadow:0 0 0 0 rgba(254,220,1,0)}}
html[data-cs-motion="off"] .cs-hot{animation:none}
.cs-hot[aria-expanded="true"]{background:#fff;outline:3px solid var(--cs-yellow)}
.cs-tip{
	position:absolute;z-index:4;width:min(290px,74vw);background:#fff;border-radius:14px;
	padding:16px 18px;box-shadow:0 28px 60px -26px rgba(17,17,17,.6);
	transform:translate(-50%,14px);opacity:0;visibility:hidden;
	transition:opacity .3s var(--cs-ease),transform .3s var(--cs-ease),visibility .3s;
}
.cs-tip.cs-in{opacity:1;visibility:visible;transform:translate(-50%,22px)}
.cs-tip b{display:block;font:700 14.5px/1.3 Montserrat,sans-serif;color:var(--cs-ink);margin-bottom:6px}
.cs-tip p{margin:0 0 10px;font:400 13.5px/1.55 Lato,sans-serif;color:var(--cs-stone)}
.cs-tip a{font:700 12px/1 Montserrat,sans-serif;color:var(--cs-ink);text-decoration:none;border-bottom:2px solid var(--cs-yellow);padding-bottom:2px}

/* ---------------------------------------------------------------- 10b. beeldpaneel hero */
.cs-hero-visual{position:relative;padding-bottom:36px}
.cs-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-tile{
	position:relative;display:block;overflow:hidden;border-radius:16px;text-decoration:none;
	background:#1c1c19;aspect-ratio:1/1;
	transition:transform .5s var(--cs-ease),box-shadow .5s var(--cs-ease);
}
.cs-tile:nth-child(2),.cs-tile:nth-child(3){transform:translateY(22px)}
.cs-tile img,.cs-tile .cs-tile-ph{
	display:block;width:100%;height:100%;object-fit:cover;
	transition:transform .8s var(--cs-ease),filter .6s var(--cs-ease);
	filter:saturate(.92) contrast(1.04);
}
.cs-tile .cs-tile-ph{background:linear-gradient(135deg,#2a2a26,#141412)}
.cs-tile b{
	position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
	font:700 12px/1.25 Montserrat,system-ui,sans-serif;color:#fff;text-transform:none;
	text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.cs-tile::after{
	content:"";position:absolute;inset:0;z-index:1;
	background:linear-gradient(180deg,transparent 42%,rgba(10,10,9,.82));
}
.cs-tile:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(0,0,0,.9)}
.cs-tile:nth-child(2):hover,.cs-tile:nth-child(3):hover{transform:translateY(16px)}
.cs-tile:hover img{transform:scale(1.07);filter:none}
.cs-float{
	position:absolute;left:-14px;bottom:0;z-index:3;
	background:#fff;border-radius:14px;padding:14px 18px;max-width:300px;
	box-shadow:0 26px 56px -26px rgba(0,0,0,.75);
}
.cs-float b{display:block;font:700 13.5px/1.3 Montserrat,system-ui,sans-serif;color:var(--cs-ink);text-transform:none}
.cs-float small{display:block;margin-top:4px;font:400 12.5px/1.5 Lato,system-ui,sans-serif;color:var(--cs-stone)}
.cs-float-dot{
	position:absolute;top:-6px;left:-6px;width:14px;height:14px;border-radius:50%;background:var(--cs-yellow);
	box-shadow:0 0 0 0 rgba(254,220,1,.7);animation:cs-pulse 2.8s var(--cs-ease) infinite;
}
@media(max-width:1024px){
	.cs-float{position:static;max-width:none;margin-top:34px}
	.cs-tile:nth-child(2),.cs-tile:nth-child(3){transform:none}
	.cs-hero-visual{padding-bottom:0}
}

/* ---------------------------------------------------------------- 11. themastijlen overrulen
   Hello Elementor zet alle knoppen op geel met hoofdletters. Binnen onze eigen
   componenten willen we dat niet, dus zetten we het hier expliciet terug. */
.cs-finder .cs-opt,
.cs-finder .cs-back,
.cs-cmd .cs-cmd-item,
.cs-bar button{
	text-transform:none!important;
	letter-spacing:normal!important;
	box-shadow:none!important;
}
.cs-finder .cs-opt{
	background:#1c1c19!important;color:#fff!important;border:1px solid #2f2f2b!important;
	border-radius:14px!important;padding:16px 18px!important;
	font-family:Montserrat,system-ui,sans-serif!important;font-size:15px!important;font-weight:600!important;
	display:flex!important;flex-direction:column!important;align-items:flex-start!important;text-align:left!important;
	gap:5px!important;width:100%!important;
}
.cs-finder .cs-opt:hover{background:#232320!important;border-color:var(--cs-yellow)!important;transform:translateY(-2px)}
.cs-finder .cs-opt small{
	color:#a3a199!important;font-family:Lato,system-ui,sans-serif!important;
	font-size:13px!important;font-weight:400!important;line-height:1.45!important;text-transform:none!important;
}
.cs-finder .cs-back{background:none!important;color:#8b8981!important;border:0!important;padding:0!important;font-size:13px!important;font-weight:400!important}
.cs-finder .cs-back:hover{color:#fff!important;background:none!important}
.cs-btn{
	text-transform:none!important;letter-spacing:.01em!important;
	background:var(--cs-yellow)!important;color:var(--cs-black)!important;border:0!important;
	font-family:Montserrat,system-ui,sans-serif!important;font-size:13px!important;font-weight:700!important;
	padding:15px 24px!important;border-radius:999px!important;
}
.cs-btn--ghost{background:transparent!important;color:#fff!important;border:1px solid #45453f!important}
.cs-btn--ghost:hover{border-color:#fff!important}
.cs-bar a{text-transform:none!important;letter-spacing:normal!important}
.cs-bar button{background:none!important;color:#8b8981!important;border:0!important;padding:6px!important}
.cs-bar button:hover{color:#fff!important;background:none!important}

/* ---------------------------------------------------------------- 12. algemeen */
.cs-focus:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--cs-yellow);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
	.cs-progress,.cs-bar,[data-cs-reveal]{transition:none!important;animation:none!important}
}

/* zoekveld: kit-stijlen voor input(:focus) neutraliseren */
.cs-cmd-box .cs-cmd-input,.cs-cmd-box .cs-cmd-input:focus,.cs-cmd-box .cs-cmd-input:focus-visible{background:transparent!important;color:var(--cs-ink,#111)!important;border:0!important;box-shadow:none!important;outline:0!important;border-radius:0!important;padding:0!important;margin:0!important;height:auto!important;min-height:0!important}
.cs-cmd-head .cs-kbd{display:none!important}


/* ---------------------------------------------------------------- 13. zoeken: chips, logo, resultaten, inline vak (2026-09-24) */
.cs-cmd-logo{height:22px;width:auto;flex:0 0 auto;object-fit:contain}
.cs-cmd-chipwrap{padding:0 18px 14px}
.cs-cmd-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-cmd-chip{font:600 12px/1 Montserrat,sans-serif;letter-spacing:.01em;background:var(--cs-warm);border:1px solid var(--cs-line);border-radius:999px;padding:8px 14px;cursor:pointer;color:var(--cs-ink);white-space:nowrap;transition:background .25s var(--cs-ease),border-color .25s var(--cs-ease),color .25s var(--cs-ease)}
.cs-cmd-chip:hover{border-color:var(--cs-stone)}
.cs-cmd-chip.is-active{background:var(--cs-yellow);border-color:var(--cs-yellow);color:var(--cs-black)}
.cs-cmd-more{display:block;text-align:center;padding:12px;margin-top:4px;font:700 12.5px/1 Montserrat,sans-serif;color:var(--cs-ink);text-decoration:none;border-top:1px solid var(--cs-line);background:var(--cs-warm)}
.cs-cmd-more:hover{color:var(--cs-stone)}

/* inline zoekvak: 404 en overal met [data-cs-search-box] */
.cs-sbox{background:#fff;border:1px solid var(--cs-line);border-radius:20px;padding:clamp(20px,3vw,32px);box-shadow:0 30px 70px -40px rgba(17,17,17,.25)}
.cs-sbox-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--cs-line);margin-bottom:16px}
.cs-sbox-head svg{flex:0 0 auto;opacity:.5;color:var(--cs-ink)}
.cs-sbox-input{flex:1;border:0;outline:0;font:500 18px/1.3 Montserrat,system-ui,sans-serif;color:var(--cs-ink);background:none;min-width:0}
.cs-sbox-input::placeholder{color:#9b998f;font-weight:400}
.cs-sbox-input:focus,.cs-sbox-input:focus-visible{outline:0;box-shadow:none;border:0}
.cs-sbox-logo{height:24px;width:auto;flex:0 0 auto;object-fit:contain}
.cs-sbox .cs-cmd-chips{padding:0 0 4px}
.cs-sbox-results{margin-top:18px;min-height:1px}
.cs-sbox-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cs-sbox-grid .cs-cmd-item{border:1px solid var(--cs-line);border-radius:14px}
.cs-sbox-grid .cs-cmd-item:hover,.cs-sbox-grid .cs-cmd-item[aria-selected="true"]{background:var(--cs-warm);border-color:var(--cs-stone)}
@media(max-width:640px){.cs-sbox-head{flex-wrap:wrap}.cs-sbox-logo{order:-1;margin-bottom:6px}}


/* logo in zoekcomponenten: Elementor/thema img-regels winnen anders van breedte/hoogte */
.cs-cmd-logo,.cs-sbox-logo{height:22px!important;width:auto!important;max-width:120px!important;flex:0 0 auto!important;object-fit:contain!important;display:block!important}
.cs-sbox-logo{height:24px!important}