/* =========================================================================
   Neonnaam.nl - design system
   Donkere basis, neon alleen waar het telt.
   ========================================================================= */

/* ---------- Lettertypen ---------- */
@font-face{font-family:'Brittany Signature';src:url('../fonts/BrittanySignature.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Be my glittertine';src:url('../fonts/BeMyGlittertine.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Chasing hearts';src:url('../fonts/ChasingHearts.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Kissing season';src:url('../fonts/KissingSeason.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Liebe finden';src:url('../fonts/LiebeFinden.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Lovely Valentine';src:url('../fonts/LovelyValentine.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Cathalia';src:url('../fonts/Cathalia.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Valentia';src:url('../fonts/Valentia.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Valentine Soul';src:url('../fonts/ValentineSoul.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Comfortaa';src:url('../fonts/Comfortaa-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Aljameela';src:url('../fonts/Aljameela.otf') format('truetype');font-display:swap}

/* ---------- Tokens ---------- */
:root{
	--nn-bg:#04050a;
	--nn-bg-2:#080a12;
	--nn-panel:rgba(255,255,255,.038);
	--nn-panel-2:rgba(255,255,255,.06);
	--nn-line:rgba(255,255,255,.10);
	--nn-line-2:rgba(255,255,255,.18);
	--nn-text:#f3f5fa;
	--nn-muted:rgba(233,238,248,.60);
	--nn-brand:#F0369D;
	--nn-brand-rgb:240,54,157;
	--nn-radius:18px;
	--nn-radius-sm:12px;
	--neon:#F0369D;
	--neon-rgb:240,54,157;
	--neon-bright:#ff9ad0;
}

/* ---------- Donkere pagina ---------- */
body.nn-dark{background:var(--nn-bg);color:var(--nn-text)}
body.nn-dark #content,
body.nn-dark .site-content,
body.nn-dark .entry-content,
body.nn-dark .page-content{background:transparent}

/* ---------- Muislicht ---------- */
.nn-cursor{
	position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;
	border-radius:50%;pointer-events:none;z-index:9998;opacity:0;
	transition:opacity .45s ease;mix-blend-mode:screen;will-change:transform;
	background:radial-gradient(circle,rgba(var(--nn-brand-rgb),.16),rgba(var(--nn-brand-rgb),.07) 34%,transparent 68%);
}
.nn-cursor.is-on{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.nn-cursor{display:none}}

/* ---------- Basis ---------- */
.nn{
	color:var(--nn-text);
	/* volgt het lettertype van het thema; stel het in bij Thema-opties > Typografie */
	font-family:var(--nn-font,inherit);
	font-size:16px;line-height:1.6;position:relative;
	-webkit-font-smoothing:antialiased;
}
.nn-h1,.nn-h2,.nn-h3,.nn-panel-title{font-family:var(--nn-heading-font,inherit)}
.nn *,.nn *::before,.nn *::after{box-sizing:border-box}
.nn [hidden],.nn-cursor[hidden]{display:none!important}
.nn p{margin:0 0 14px}
.nn p:last-child{margin-bottom:0}
.nn figure{margin:0}
.nn img{max-width:100%;height:auto}
.nn-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px}
.nn-wrap-narrow{max-width:900px}
.nn-section{padding:56px 0}
.nn-section-tight{padding:28px 0}
.nn-i{flex:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- Typografie ---------- */
.nn-h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1;font-weight:800;margin:0 0 24px;letter-spacing:-.02em}
.nn-h2{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.15;font-weight:800;margin:0 0 10px;letter-spacing:-.02em}
.nn-h3{font-size:1.06rem;font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:9px;line-height:1.35}
.nn-head{text-align:center;max-width:760px;margin:0 auto 32px}
.nn-eyebrow{margin:0 0 10px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nn-brand);font-weight:700}
.nn-sub{color:var(--nn-muted);font-size:1rem;margin:12px 0 0}
.nn-lead{font-size:1.08rem;color:#fff}
.nn-glow-text{
	color:#fff;
	text-shadow:0 0 6px rgba(var(--nn-brand-rgb),.9),0 0 22px rgba(var(--nn-brand-rgb),.65),0 0 50px rgba(var(--nn-brand-rgb),.4);
}
.nn-link{display:inline-flex;align-items:center;gap:7px;color:var(--nn-brand);text-decoration:none;font-weight:600;font-size:.94rem}
.nn-link:hover{color:#fff;text-shadow:0 0 16px rgba(var(--nn-brand-rgb),.8)}

/* ---------- Kaarten ---------- */
.nn-card{
	background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
	border:1px solid var(--nn-line);border-radius:var(--nn-radius);
	position:relative;overflow:hidden;
}
.nn-pad{padding:24px}
.nn-card p{color:var(--nn-muted);font-size:.94rem}

/* ---------- Knoppen ---------- */
.nn-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	padding:15px 26px;border-radius:999px;border:1px solid transparent;
	font-weight:700;font-size:1rem;line-height:1;cursor:pointer;text-decoration:none;
	transition:transform .18s ease,box-shadow .25s ease,background .25s ease,color .2s ease;
}
.nn-btn-primary,
.nn-btn-primary:hover,
.nn-btn-primary:focus,
.nn-btn-primary:active{
	background:linear-gradient(180deg,#ff4fae,#e01784);color:#fff!important;
	box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 8px 26px rgba(var(--nn-brand-rgb),.32);
}
.nn-btn-primary:hover{
	transform:translateY(-1px);
	box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 10px 34px rgba(var(--nn-brand-rgb),.6),0 0 60px rgba(var(--nn-brand-rgb),.35);
}
.nn-btn-ghost,
.nn-btn-ghost:hover,
.nn-btn-ghost:focus{background:rgba(255,255,255,.05);border-color:var(--nn-line-2);color:#fff!important}
.nn-btn-ghost:hover{background:rgba(255,255,255,.1)}
.nn-btn:disabled,.nn-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.nn-btn:focus-visible,.nn button:focus-visible,.nn a:focus-visible,.nn input:focus-visible,.nn textarea:focus-visible{outline:2px solid var(--nn-brand);outline-offset:3px}

.nn-chip{
	display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
	background:rgba(8,10,18,.72);border:1px solid var(--nn-line-2);color:var(--nn-text);
	font-size:.84rem;font-weight:600;cursor:pointer;backdrop-filter:blur(8px);
	transition:box-shadow .25s ease,background .25s ease,color .2s;
}
.nn-chip:hover{background:rgba(20,10,20,.85);box-shadow:0 0 22px rgba(var(--nn-brand-rgb),.45);color:#fff}
.nn-chip-ghost{background:transparent}

/* =========================================================================
   HERO / CONFIGURATOR
   ========================================================================= */
.nn-hero-section{padding:26px 0 8px}
.nn-hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:18px;align-items:stretch}

/* ---------- Kamer ---------- */
.nn-stage{
	position:relative;border-radius:var(--nn-radius);overflow:hidden;
	border:1px solid var(--nn-line);background:#05060b;min-height:520px;
	--wash-x:50%;--wash-y:28%;
}
.nn-scene{position:absolute;inset:0}
.nn-scene-svg,.nn-scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .6s ease,filter .6s ease}
.nn-scene-img{filter:var(--scene-filter)}
.nn-scene-custom{opacity:0;pointer-events:none}
.nn-stage.has-photo .nn-scene-custom{opacity:1}
.nn-stage.has-photo .nn-scene-svg,
.nn-stage.has-photo .nn-scene-night{opacity:0}

/* kleuren van de getekende kamer (altijd avondsfeer) */
.nn-stage{
	--rm-wall-1:#181923;--rm-wall-2:#07080d;--rm-floor:#0a0b11;--rm-skirting:#1b1d2a;
	--rm-wood:#241f2b;--rm-object:#282a37;--rm-plant:#1b352a;
	--rm-head-1:#1e1b24;--rm-head-2:#2a252f;--rm-pillow:#38323f;--rm-accent:#592a46;
	--rm-bed-1:#2e2937;--rm-bed-2:#17141d;--rm-bed-line:#463c50;
	--rm-lamp-a:.55;--rm-vignette:.62;--scene-filter:brightness(.7) saturate(.95);--wash-o:.9;
}
/* het licht van de neon valt in de kamer en volgt de gekozen kleur */
/* Geen mix-blend-mode: dat geeft op iOS Safari een zwart vlak boven de foto.
   Een gewone doorschijnende gradient geeft op een donkere kamer hetzelfde licht. */
.nn-wash{
	position:absolute;inset:0;pointer-events:none;opacity:var(--wash-o);
	transition:background .35s ease;
	background:
		radial-gradient(28% 20% at var(--wash-x) var(--wash-y),
			rgba(var(--neon-rgb),.42),rgba(var(--neon-rgb),.14) 55%,transparent 78%),
		radial-gradient(70% 55% at var(--wash-x) var(--wash-y),
			rgba(var(--neon-rgb),.13),rgba(var(--neon-rgb),.04) 50%,transparent 82%);
}

/* eenmalige hint dat de neon te verplaatsen is (alleen op touch, via JS) */
.nn-stage-hint{
	position:absolute;left:50%;bottom:66px;transform:translateX(-50%);z-index:4;
	display:flex;align-items:center;gap:7px;margin:0;padding:8px 13px;
	border-radius:999px;background:rgba(8,6,14,.88);
	border:1px solid rgba(var(--nn-brand-rgb),.5);color:#fff;
	font-size:.8rem;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.4);
	animation:nn-hint-in .35s ease both
}
.nn-stage-hint[hidden]{display:none!important}
.nn-stage-hint .nn-i{color:var(--nn-brand);flex:none}
@keyframes nn-hint-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.nn-stage-hint{animation:none}}


/* vaste balk onderin: alleen op mobiel in beeld */
.nn-sticky{display:none}
.nn-sticky[hidden]{display:none!important}

/* ---------- Neon op de muur ---------- */
.nn-neon-holder{
	position:absolute;top:var(--ny,26%);left:var(--nx,50%);width:var(--nw,auto);max-width:96%;
	transform:translate(-50%,-50%);display:flex;justify-content:center;
	touch-action:none;
}
.nn-stage.is-draggable .nn-neon-holder{cursor:grab}
.nn-stage.is-dragging .nn-neon-holder{cursor:grabbing;transition:none}
.nn-neon{
	display:flex;align-items:center;justify-content:center;gap:.22em;width:100%;white-space:nowrap;
	-webkit-transform:translateZ(0);transform:translateZ(0);
}
.nn-neon-text{
	font-family:var(--nn-font,'Brittany Signature'),cursive;font-weight:var(--nn-fw,400);
	font-size:var(--nn-size,64px);line-height:1.18;color:var(--neon-bright);
	transition:color .3s ease,text-shadow .3s ease;
	text-shadow:
		0 0 3px rgba(255,255,255,.85),
		0 0 9px rgba(var(--neon-rgb),.95),
		0 0 20px rgba(var(--neon-rgb),.85),
		0 0 42px rgba(var(--neon-rgb),.6),
		0 0 80px rgba(var(--neon-rgb),.42),
		0 0 140px rgba(var(--neon-rgb),.28);
}
.nn-neon-icon{display:flex;align-items:center;width:var(--nn-icon,36px);height:var(--nn-icon,36px)}
.nn-neon-icon svg{width:100%;height:100%}
/* iconen kunnen gevuld of getekend (stroke) zijn: beide meekleuren */
.nn-neon-icon svg path,
.nn-neon-icon svg circle,
.nn-neon-icon svg ellipse,
.nn-neon-icon svg polygon{fill:var(--neon-bright)}
.nn-neon-icon svg [fill="none"] path,
.nn-neon-icon svg [fill="none"] circle,
.nn-neon-icon svg [fill="none"] ellipse,
.nn-neon-icon svg [fill="none"] polygon,
.nn-neon-icon svg path[fill="none"],
.nn-neon-icon svg circle[fill="none"],
.nn-neon-icon svg ellipse[fill="none"]{fill:none}
.nn-neon-icon svg [stroke]:not([stroke="none"]){stroke:var(--neon-bright)}
.nn-neon-icon svg{
	filter:
		drop-shadow(0 0 2px rgba(255,255,255,.8))
		drop-shadow(0 0 6px rgba(var(--neon-rgb),.95))
		drop-shadow(0 0 14px rgba(var(--neon-rgb),.7))
		drop-shadow(0 0 28px rgba(var(--neon-rgb),.45));
}
.nn-neon.is-flicker .nn-neon-text{animation:nn-flicker .9s ease-out 1}
@keyframes nn-flicker{
	0%{opacity:.2}12%{opacity:1}18%{opacity:.35}26%{opacity:1}34%{opacity:.6}42%{opacity:1}100%{opacity:1}
}
@media (prefers-reduced-motion:reduce){.nn-neon.is-flicker .nn-neon-text{animation:none}}

/* ---------- Stage-bediening ---------- */
.nn-stage-upload{position:absolute;top:14px;right:14px;z-index:3}
.nn-stage-tools{
	position:absolute;left:14px;right:14px;bottom:104px;z-index:3;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	padding:10px 14px;border-radius:14px;background:rgba(6,8,14,.7);border:1px solid var(--nn-line);backdrop-filter:blur(8px);
}
.nn-tools-label{font-size:.82rem;color:var(--nn-muted);display:flex;align-items:center;gap:8px}
.nn-tools-label .nn-i{color:var(--nn-brand)}
.nn-range{flex:1;min-width:120px;display:flex}
.nn-range input[type=range]{width:100%;accent-color:var(--nn-brand)}
.nn-stage-badges{
	position:absolute;left:14px;bottom:14px;z-index:2;display:flex;gap:0;width:max-content;max-width:calc(100% - 28px);
	padding:13px 6px;border-radius:16px;background:rgba(6,8,14,.78);border:1px solid var(--nn-line);backdrop-filter:blur(10px);
}
.nn-stage-badges span{
	display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:3px 13px;align-items:center;padding:0 20px;
}
.nn-stage-badges .nn-i{grid-row:1/3;width:26px;height:26px;color:var(--nn-brand);filter:drop-shadow(0 0 8px rgba(var(--nn-brand-rgb),.75))}
.nn-stage-badges strong{font-size:.9rem;font-weight:600;line-height:1.1}
.nn-stage-badges em{font-size:.78rem;color:var(--nn-muted);font-style:normal;line-height:1.1}

/* ---------- Configuratorpaneel ---------- */
.nn-config{
	background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
	border:1px solid var(--nn-line);border-radius:var(--nn-radius);
	padding:22px;display:flex;flex-direction:column;gap:16px;
}
.nn-steps{display:flex;list-style:none;margin:0 0 4px;padding:0;gap:0;justify-content:space-between}
.nn-steps li{flex:1;min-width:0}
.nn-step{
	width:100%;display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 2px;
	background:transparent;border:0;cursor:pointer;color:var(--nn-muted);transition:.25s;position:relative;
}
.nn-step::after{content:"";position:absolute;top:21px;left:calc(50% + 24px);right:calc(-50% + 24px);height:1px;background:var(--nn-line-2)}
.nn-steps li:last-child .nn-step::after{display:none}
.nn-step-dot{
	width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	border:1.5px solid var(--nn-line-2);font-weight:600;font-size:1rem;color:#fff;
	background:rgba(6,8,14,.85);transition:.25s;
}
.nn-step-ico{display:flex;color:var(--nn-brand);opacity:.85;transition:.25s;margin-bottom:-3px}
.nn-step-label{font-size:.76rem;font-weight:500;text-align:center;line-height:1.2;color:var(--nn-muted)}
.nn-step:disabled{opacity:.45;cursor:not-allowed}
.nn-step:not(:disabled):hover .nn-step-dot{border-color:rgba(var(--nn-brand-rgb),.6)}
.nn-step:not(:disabled):hover .nn-step-label{color:#fff}
.nn-step.is-done .nn-step-dot{border-color:rgba(var(--nn-brand-rgb),.55);color:var(--nn-brand)}
.nn-step.is-active .nn-step-ico{opacity:1;filter:drop-shadow(0 0 10px rgba(var(--nn-brand-rgb),.85))}
.nn-step.is-active .nn-step-label{color:#fff;font-weight:600}
.nn-step.is-active .nn-step-dot{
	border-color:var(--nn-brand);color:#fff;background:rgba(6,8,14,.9);
	box-shadow:0 0 0 1px var(--nn-brand),0 0 22px rgba(var(--nn-brand-rgb),.6),inset 0 0 14px rgba(var(--nn-brand-rgb),.25);
}

.nn-panels{position:relative;flex:1;min-height:246px}
.nn-panel{display:none}
.nn-panel.is-active{display:block;animation:nn-fade .28s ease}
@keyframes nn-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nn-panel.is-active{animation:none}}
.nn-panel-title{font-size:1.06rem;font-weight:700;margin:0 0 14px;color:#fff}
.nn-hint{font-size:.82rem;color:var(--nn-muted);margin:10px 0 0}
.nn-hint .nn-i{vertical-align:-3px;margin-right:6px}

/* velden */
.nn-field{position:relative;display:flex;align-items:center}
.nn-input{
	width:100%;padding:16px 46px 16px 18px;border-radius:14px;font-size:1.12rem;font-weight:600;
	background:rgba(4,5,10,.6);border:1px solid var(--nn-line-2);color:#fff;caret-color:var(--nn-brand);
	transition:border-color .2s,box-shadow .25s;font-family:inherit;
}
.nn-input::placeholder{color:rgba(255,255,255,.66);font-weight:400}

/* knipperende roze cursor zolang het veld leeg is */
.nn-panel .nn-field > .nn-input{padding-left:32px}
.nn-panel .nn-field::after{
	content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);
	width:2px;height:1.35em;border-radius:2px;background:var(--nn-brand);
	box-shadow:0 0 10px rgba(var(--nn-brand-rgb),.9),0 0 22px rgba(var(--nn-brand-rgb),.5);
	pointer-events:none;display:none;
}
.nn-panel .nn-field:has(> .nn-input:placeholder-shown:not(:focus))::after{
	display:block;animation:nn-caret 1.1s steps(1) infinite;
}
@keyframes nn-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.nn-panel .nn-field::after{animation:none!important}}
.nn-input:focus{outline:0;border-color:var(--nn-brand);box-shadow:0 0 0 3px rgba(var(--nn-brand-rgb),.16),0 0 30px rgba(var(--nn-brand-rgb),.22)}
.nn-input-clear{
	position:absolute;right:10px;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
	background:rgba(255,255,255,.08);color:var(--nn-muted);font-size:20px;line-height:1;
}
.nn-input-clear:hover{background:rgba(255,255,255,.16);color:#fff}
.nn-field-search{margin-bottom:18px}
.nn-field-search .nn-i{position:absolute;left:16px;color:var(--nn-muted)}
.nn-field-search .nn-input{padding:14px 18px 14px 46px;font-size:1rem}

/* lettertypen */
.nn-fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;max-height:290px;overflow:auto;padding-right:4px}
.nn-font{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:78px;padding:10px 8px;
	border-radius:var(--nn-radius-sm);border:1px solid var(--nn-line);background:rgba(4,5,10,.45);
	color:#fff;cursor:pointer;overflow:hidden;transition:.22s;
}
.nn-font:hover{border-color:var(--nn-line-2);background:rgba(255,255,255,.05)}
.nn-font-sample{font-family:var(--f);font-weight:var(--fw);font-size:1.5rem;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nn-font-name{font-size:.68rem;color:var(--nn-muted);letter-spacing:.04em;text-transform:uppercase}
.nn-font.is-on{
	border-color:var(--nn-brand);background:rgba(var(--nn-brand-rgb),.1);
	box-shadow:0 0 0 1px rgba(var(--nn-brand-rgb),.5),0 0 26px rgba(var(--nn-brand-rgb),.3);
}
.nn-font.is-on .nn-font-sample{color:#fff;text-shadow:0 0 12px rgba(var(--nn-brand-rgb),.9)}

/* kleuren */
.nn-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px}
.nn-color{
	display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 6px;cursor:pointer;
	border-radius:var(--nn-radius-sm);border:1px solid var(--nn-line);background:rgba(4,5,10,.45);color:var(--nn-muted);transition:.22s;
}
.nn-color-dot{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c),0 0 32px color-mix(in srgb,var(--c) 55%,transparent)}
.nn-color-name{font-size:.7rem;font-weight:600}
.nn-color:hover{border-color:var(--nn-line-2);color:#fff}
.nn-color.is-on{border-color:var(--c);color:#fff;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--c),0 0 26px color-mix(in srgb,var(--c) 45%,transparent)}
.nn-colors-sm{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));margin-top:12px}
.nn-colors-sm .nn-color{padding:8px 4px}
.nn-colors-sm .nn-color-dot{width:22px;height:22px}

/* iconen */
.nn-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px;max-height:250px;overflow:auto;padding-right:4px}
.nn-ico{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:88px;padding:10px 6px;cursor:pointer;
	border-radius:var(--nn-radius-sm);border:1px solid var(--nn-line);background:rgba(4,5,10,.45);color:var(--nn-muted);transition:.22s;
}
.nn-ico img{width:34px;height:34px;filter:invert(1) opacity(.75);transition:.22s}
.nn-ico-none{
	width:34px;height:34px;border-radius:50%;border:1.5px dashed var(--nn-line-2);
	display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700;
}
.nn-ico-name{font-size:.7rem;font-weight:600;text-align:center;line-height:1.2}
.nn-ico:hover{border-color:var(--nn-line-2);color:#fff}
.nn-ico:hover img{filter:invert(1)}
.nn-ico.is-on{border-color:var(--nn-brand);color:#fff;background:rgba(var(--nn-brand-rgb),.1);box-shadow:0 0 0 1px rgba(var(--nn-brand-rgb),.5),0 0 24px rgba(var(--nn-brand-rgb),.28)}
.nn-ico.is-on img{filter:none;-webkit-filter:none}
.nn-ico.is-on img{filter:invert(1) drop-shadow(0 0 8px rgba(var(--nn-brand-rgb),.9))}

.nn-iconcolor{margin-top:16px;padding-top:14px;border-top:1px solid var(--nn-line)}
.nn-switch{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--nn-muted);cursor:pointer}
.nn-switch input{position:absolute;opacity:0;width:0;height:0}
.nn-switch-ui{width:40px;height:22px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;transition:.25s;flex:none}
.nn-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.25s}
.nn-switch input:checked + .nn-switch-ui{background:var(--nn-brand);box-shadow:0 0 18px rgba(var(--nn-brand-rgb),.6)}
.nn-switch input:checked + .nn-switch-ui::after{transform:translateX(18px)}

/* formaten */
.nn-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}
.nn-size{
	display:flex;flex-direction:column;gap:3px;padding:14px;text-align:left;cursor:pointer;
	border-radius:var(--nn-radius-sm);border:1px solid var(--nn-line);background:rgba(4,5,10,.45);color:var(--nn-muted);transition:.22s;
}
.nn-size-cm{font-size:1.06rem;font-weight:700;color:#fff}
.nn-size-max{font-size:.74rem}
.nn-size-price{font-size:.92rem;font-weight:700;color:var(--nn-brand);margin-top:4px}
.nn-size:hover:not(:disabled){border-color:var(--nn-line-2)}
.nn-size.is-on{border-color:var(--nn-brand);background:rgba(var(--nn-brand-rgb),.1);box-shadow:0 0 0 1px rgba(var(--nn-brand-rgb),.5),0 0 26px rgba(var(--nn-brand-rgb),.28)}
.nn-size:disabled{opacity:.34;cursor:not-allowed}

/* overzicht */
.nn-summary{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0}
.nn-summary dt{color:var(--nn-muted);font-size:.88rem}
.nn-summary dd{margin:0;font-weight:600;font-size:.92rem;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.nn-summary .nn-swatch{width:16px;height:16px;border-radius:50%;display:inline-block;box-shadow:0 0 10px currentColor}
.nn-summary img{width:20px;height:20px;filter:invert(1)}

/* voet */
.nn-config-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--nn-line)}
.nn-price{display:flex;flex-direction:column}
.nn-price span{font-size:.76rem;color:var(--nn-muted);text-transform:uppercase;letter-spacing:.1em}
.nn-price strong{font-size:1.5rem;font-weight:800;color:#fff}
.nn-actions{display:flex;gap:9px;flex-wrap:wrap}
.nn-config-note{margin:0;font-size:.84rem;min-height:1.2em;color:var(--nn-brand)}
.nn-config-note.is-error{color:#ff7a7a}
.nn-config-meta{
	display:flex;border:1px solid var(--nn-line);border-radius:var(--nn-radius-sm);
	background:rgba(4,5,10,.45);overflow:hidden;
}
.nn-config-meta span{
	flex:1;display:flex;align-items:center;gap:11px;justify-content:center;padding:15px 10px;
	font-size:.92rem;font-weight:600;color:#fff;border-right:1px solid var(--nn-line);
}
.nn-config-meta span:last-child{border-right:0}
.nn-config-meta .nn-i{color:var(--nn-brand);filter:drop-shadow(0 0 7px rgba(var(--nn-brand-rgb),.6))}

/* =========================================================================
   SECTIES
   ========================================================================= */
.nn-usp{
	display:grid;grid-template-columns:repeat(6,1fr);gap:0;
	border:1px solid var(--nn-line);border-radius:var(--nn-radius);overflow:hidden;
	background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.nn-usp-item{display:flex;align-items:center;gap:13px;padding:18px;border-right:1px solid var(--nn-line)}
.nn-usp-item:last-child{border-right:0}
.nn-usp-ico{display:flex;color:var(--ico,var(--nn-brand));filter:drop-shadow(0 0 9px var(--ico,var(--nn-brand)))}
.nn-usp-txt{display:flex;flex-direction:column;min-width:0;gap:2px}
.nn-usp-txt strong{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nn-usp-txt em{font-size:.8rem;color:var(--nn-muted);font-style:normal}

.nn-tri{display:grid;grid-template-columns:1.14fr 1.2fr 1.18fr;gap:16px;margin-top:16px}
.nn-list{list-style:none;margin:0;padding:0;display:grid;gap:11px;align-content:start}
.nn-list li{display:flex;align-items:center;gap:11px;font-size:.94rem;color:#fff}
.nn-list li .nn-i{color:var(--nn-brand);flex:none;stroke-width:2.4;filter:drop-shadow(0 0 6px rgba(var(--nn-brand-rgb),.6))}

/* Wat krijg je? */
.nn-kit-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.nn-kit-img{width:106px;justify-self:end}
.nn-kit .nn-list li{font-size:.86rem;gap:9px}
.nn-how .nn-steps-mini li{font-size:.88rem}
.nn-kit-svg,.nn-kit-photo{width:100%;height:auto;display:block}

/* Zo werkt het + beoordeling */
.nn-how{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start}
.nn-how-col{min-width:0}
.nn-steps-mini{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.nn-steps-mini li{display:flex;align-items:center;gap:11px;font-size:.92rem;color:#fff}
.nn-steps-mini span{
	width:26px;height:26px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
	background:linear-gradient(180deg,#ff4fae,#d81680);color:#fff;font-size:.8rem;font-weight:700;
	box-shadow:0 0 16px rgba(var(--nn-brand-rgb),.5);
}
.nn-rating{display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center;padding-left:20px;border-left:1px solid var(--nn-line);width:174px;flex:none}
.nn-rating strong{font-size:1.15rem;font-weight:600;color:#fff}
.nn-rating em{font-size:.86rem;color:var(--nn-muted);font-style:normal;line-height:1.35}
.nn-stars{display:inline-flex;gap:3px;color:var(--nn-brand)}
.nn-stars svg{fill:var(--nn-brand);filter:drop-shadow(0 0 7px rgba(var(--nn-brand-rgb),.75))}
.nn-stars-lg{gap:5px}
.nn-avatars{display:flex;align-items:center}
.nn-avatar{
	width:38px;height:38px;border-radius:50%;margin-left:-9px;flex:none;overflow:hidden;
	background:linear-gradient(180deg,#3a3d4d,#23252f);border:2px solid #0a0b12;
	display:flex;align-items:center;justify-content:center;
}
.nn-avatar:first-child{margin-left:0}
.nn-avatar svg{width:100%;height:100%;fill:rgba(255,255,255,.42)}
.nn-avatar-more{background:linear-gradient(180deg,#ff4fae,#d81680);color:#fff;font-size:.72rem;font-weight:700;box-shadow:0 0 18px rgba(var(--nn-brand-rgb),.5)}
.nn-link-center{justify-content:center;width:100%;margin-top:4px}

.nn-trust{
	display:flex;flex-wrap:wrap;justify-content:space-around;align-items:stretch;margin-top:16px;
	border:1px solid var(--nn-line);border-radius:var(--nn-radius);background:rgba(255,255,255,.025);overflow:hidden;
}
.nn-trust-item{
	flex:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:20px 16px;
	font-size:.95rem;font-weight:500;color:#fff;border-right:1px solid var(--nn-line);
}
.nn-trust-item:last-child{border-right:0}
.nn-trust-item .nn-i{color:var(--nn-brand);filter:drop-shadow(0 0 9px rgba(var(--nn-brand-rgb),.7))}

.nn-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nn-benefit-ico{
	display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:16px;
	border-radius:16px;border:1px solid var(--nn-line);color:var(--ico,var(--nn-brand));
	background:rgba(255,255,255,.03);
	box-shadow:0 0 30px -8px var(--ico,var(--nn-brand)),inset 0 0 20px -12px var(--ico,var(--nn-brand));
}
.nn-benefit-ico .nn-i{filter:drop-shadow(0 0 9px var(--ico,var(--nn-brand)))}
.nn-benefit .nn-h3{display:block;font-size:1.12rem;margin-bottom:10px}
.nn-review p{color:#fff;font-size:1rem}
.nn-review footer{font-size:.85rem;color:var(--nn-muted);margin-top:12px}
.nn-review .nn-stars{margin-bottom:12px}

.nn-timeline{list-style:none;margin:0 0 44px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nn-timeline li{padding-top:34px}
.nn-timeline-num{
	position:absolute;top:16px;right:18px;font-size:2.4rem;font-weight:800;line-height:1;
	color:transparent;-webkit-text-stroke:1px rgba(var(--nn-brand-rgb),.5);
}
.nn-split{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:32px}
.nn-split-contact{grid-template-columns:.9fr 1.1fr;align-items:start}
.nn-about-stage{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:center;text-align:center}
.nn-mini-room{
	width:100%;aspect-ratio:4/3;border-radius:14px;display:flex;align-items:center;justify-content:center;
	background:radial-gradient(60% 50% at 50% 42%,rgba(var(--neon-rgb),.28),transparent 70%),linear-gradient(180deg,#14121d,#07070d);
	border:1px solid var(--nn-line);
}
.nn-mini-neon{
	font-family:'Brittany Signature',cursive;font-size:clamp(1.8rem,5vw,3rem);color:#fff;
	text-shadow:0 0 6px #fff9,0 0 18px rgba(var(--neon-rgb),.95),0 0 44px rgba(var(--neon-rgb),.6),0 0 90px rgba(var(--neon-rgb),.4);
}
.nn-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.nn-number{
	text-align:center;padding:22px 14px;border-radius:var(--nn-radius);
	border:1px solid var(--nn-line);background:rgba(255,255,255,.03);
}
.nn-number strong{display:block;font-size:1.5rem;font-weight:800;color:#fff}
.nn-number span{font-size:.84rem;color:var(--nn-muted)}

/* galerij */
.nn-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.nn-example{padding:0}
.nn-example-stage{
	position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;gap:.18em;
	background:radial-gradient(58% 46% at 50% 46%,rgba(var(--neon-rgb),.3),transparent 72%),linear-gradient(180deg,#171320,#07070d);
}
.nn-example-neon{
	font-size:clamp(1.7rem,3.4vw,2.5rem);color:#fff;line-height:1.2;
	text-shadow:0 0 5px #fff9,0 0 16px rgba(var(--neon-rgb),.95),0 0 38px rgba(var(--neon-rgb),.65),0 0 80px rgba(var(--neon-rgb),.4);
}
.nn-example-icon{width:30px;height:30px;filter:invert(1) drop-shadow(0 0 8px rgba(var(--neon-rgb),.95)) drop-shadow(0 0 20px rgba(var(--neon-rgb),.6))}
.nn-example figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-top:1px solid var(--nn-line)}
.nn-example figcaption span{font-weight:700;font-size:.94rem}
.nn-example figcaption em{font-style:normal;font-size:.76rem;color:var(--nn-muted)}
.nn-example.is-hidden{display:none}
.nn-tri .nn-gallery{grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.nn-tri .nn-example figcaption{display:none}
.nn-tri .nn-example-stage{padding:0 10px;overflow:hidden}
.nn-tri .nn-example-neon{font-size:1.02rem;line-height:1.2;text-align:center;white-space:normal}
.nn-tri .nn-example-icon{width:13px;height:13px;flex:none}

.nn-filters{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.nn-filter{
	padding:9px 18px;border-radius:999px;border:1px solid var(--nn-line);background:rgba(255,255,255,.03);
	color:var(--nn-muted);font-size:.88rem;font-weight:600;cursor:pointer;transition:.22s;
}
.nn-filter:hover{color:#fff;border-color:var(--nn-line-2)}
.nn-filter.is-on{background:linear-gradient(180deg,#ff4fae,#d81680);border-color:transparent;color:#fff;box-shadow:0 0 24px rgba(var(--nn-brand-rgb),.45)}

/* FAQ */
.nn-faq{display:grid;gap:10px}
.nn-faq-group{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nn-brand);margin:22px 0 4px;font-weight:700}
.nn-faq-group:first-child{margin-top:0}
.nn-acc summary{
	display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;cursor:pointer;
	font-weight:600;list-style:none;font-size:.98rem;
}
.nn-acc summary::-webkit-details-marker{display:none}
.nn-acc summary .nn-i{color:var(--nn-brand);transition:transform .25s}
.nn-acc[open] summary .nn-i{transform:rotate(45deg)}
.nn-acc[open]{border-color:rgba(var(--nn-brand-rgb),.4);box-shadow:0 0 30px rgba(var(--nn-brand-rgb),.12)}
.nn-acc-body{padding:0 20px 18px;color:var(--nn-muted);font-size:.94rem}
.nn-acc.is-hidden,.nn-faq-group.is-hidden{display:none}
.nn-faq-empty{text-align:center;color:var(--nn-muted);padding:24px}

/* contact */
.nn-contact-cards{display:grid;gap:12px}
.nn-contact-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 16px;align-items:center;text-decoration:none;color:var(--nn-text);transition:.22s}
.nn-contact-card .nn-benefit-ico{grid-row:1/3;margin:0;width:46px;height:46px}
.nn-contact-card strong{font-size:.94rem}
.nn-contact-card span{font-size:.88rem;color:var(--nn-muted)}
a.nn-contact-card:hover{border-color:rgba(var(--nn-brand-rgb),.5);box-shadow:0 0 30px rgba(var(--nn-brand-rgb),.18)}
.nn-form{display:grid;gap:14px}
.nn-form label{display:grid;gap:7px;font-size:.86rem;color:var(--nn-muted);font-weight:600}
.nn-form .nn-input{font-size:.98rem;font-weight:500;padding:13px 16px}
.nn-form textarea.nn-input{resize:vertical;min-height:130px}
.nn-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nn-form .nn-btn{justify-self:start}
.nn-hp{position:absolute!important;left:-9999px;height:1px;overflow:hidden}
.nn-form-note{margin:0;font-size:.88rem;color:var(--nn-brand)}
.nn-form-note.is-error{color:#ff7a7a}

/* CTA */
.nn-cta{
	text-align:center;padding:46px 24px;margin-top:40px;border-radius:var(--nn-radius);
	border:1px solid rgba(var(--nn-brand-rgb),.3);
	background:radial-gradient(60% 120% at 50% 0%,rgba(var(--nn-brand-rgb),.18),transparent 70%),rgba(255,255,255,.02);
	box-shadow:0 0 60px rgba(var(--nn-brand-rgb),.1) inset;
}
.nn-cta,
.nn-cta h2,
.nn-cta p{text-align:center!important}
.nn-cta p{color:var(--nn-muted);margin:0 auto 22px;max-width:520px}
.nn-cta p:last-child{margin-bottom:0}
.nn-cta .nn-btn{margin:0 auto}

/* =========================================================================
   WOOCOMMERCE (winkelwagen / checkout / account)
   ========================================================================= */
body.nn-woo{background:var(--nn-bg);color:var(--nn-text)}
body.nn-woo .woocommerce,
body.nn-woo .woocommerce-page{color:var(--nn-text)}
body.nn-woo h1,body.nn-woo h2,body.nn-woo h3,body.nn-woo label,body.nn-woo th{color:#fff}
body.nn-woo a{color:var(--nn-brand)}

.nn-checkout-steps{
	display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 30px;max-width:820px;
	list-style:none;padding:0;
}
.nn-checkout-steps li{display:flex;align-items:center;gap:10px;flex:1;font-size:.82rem;color:var(--nn-muted);font-weight:600}
.nn-checkout-steps li:last-child{flex:none}
.nn-checkout-steps b{
	width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
	border:1.5px solid var(--nn-line-2);background:rgba(8,10,18,.6);font-size:.86rem;
}
.nn-checkout-steps li::after{content:"";flex:1;height:1px;background:var(--nn-line-2);margin:0 12px}
.nn-checkout-steps li:last-child::after{display:none}
.nn-checkout-steps li.is-on{color:#fff}
.nn-checkout-steps li.is-on b{border-color:var(--nn-brand);background:linear-gradient(180deg,#ff4fae,#d81680);color:#fff;box-shadow:0 0 24px rgba(var(--nn-brand-rgb),.5)}
.nn-checkout-steps li.is-done b{border-color:rgba(var(--nn-brand-rgb),.6);color:var(--nn-brand)}

body.nn-woo .woocommerce table.shop_table,
body.nn-woo .woocommerce-cart-form,
body.nn-woo .cart-collaterals .cart_totals,
body.nn-woo #order_review,
body.nn-woo .woocommerce-checkout-review-order,
body.nn-woo .woocommerce-order-details,
body.nn-woo .woocommerce-customer-details,
body.nn-woo .woocommerce-MyAccount-content,
body.nn-woo .woocommerce-form-login,
body.nn-woo .woocommerce-form-coupon{
	background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
	border:1px solid var(--nn-line)!important;border-radius:var(--nn-radius);
	border-collapse:separate;overflow:hidden;
}
body.nn-woo .woocommerce table.shop_table td,
body.nn-woo .woocommerce table.shop_table th{border-color:var(--nn-line)!important;color:var(--nn-text);padding:16px}
body.nn-woo .woocommerce table.shop_table tbody tr:hover{background:rgba(255,255,255,.03)}
body.nn-woo .product-thumbnail img{border-radius:10px;border:1px solid var(--nn-line)}
body.nn-woo .woocommerce .quantity .qty,
body.nn-woo input[type=text],body.nn-woo input[type=email],body.nn-woo input[type=tel],
body.nn-woo input[type=password],body.nn-woo input[type=number],body.nn-woo textarea,
body.nn-woo .select2-container--default .select2-selection--single,
body.nn-woo select{
	background:rgba(4,5,10,.6)!important;border:1px solid var(--nn-line-2)!important;color:#fff!important;
	border-radius:12px!important;padding:12px 14px!important;height:auto!important;
}
body.nn-woo .select2-container--default .select2-selection--single .select2-selection__rendered{color:#fff;line-height:1.4}
body.nn-woo .select2-dropdown{background:#0b0d16;border-color:var(--nn-line-2);color:#fff}
body.nn-woo .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--nn-brand)}
body.nn-woo .woocommerce #payment,
body.nn-woo .woocommerce-checkout #payment{background:transparent;border-radius:var(--nn-radius)}
body.nn-woo #payment ul.payment_methods{border-bottom:1px solid var(--nn-line);padding:0 0 14px}
body.nn-woo #payment ul.payment_methods li{
	list-style:none;margin:0 0 10px;padding:14px 16px;border:1px solid var(--nn-line);border-radius:14px;
	background:rgba(255,255,255,.03);transition:.22s;
}
body.nn-woo #payment ul.payment_methods li:hover{border-color:var(--nn-line-2)}
body.nn-woo #payment ul.payment_methods li input[type=radio]:checked ~ label{color:#fff}
body.nn-woo #payment div.payment_box{background:rgba(255,255,255,.04);color:var(--nn-muted);border-radius:12px}
body.nn-woo #payment div.payment_box::before{border-bottom-color:rgba(255,255,255,.04)}
body.nn-woo .woocommerce #respond input#submit,
body.nn-woo .woocommerce a.button,
body.nn-woo .woocommerce button.button,
body.nn-woo .woocommerce input.button,
body.nn-woo .woocommerce #respond input#submit.alt,
body.nn-woo .woocommerce a.button.alt,
body.nn-woo .woocommerce button.button.alt,
body.nn-woo .woocommerce input.button.alt{
	background:linear-gradient(180deg,#ff4fae,#e01784);color:#fff;border-radius:999px;padding:14px 26px;font-weight:700;
	box-shadow:0 8px 26px rgba(var(--nn-brand-rgb),.3);border:0;transition:.25s;
}
body.nn-woo .woocommerce a.button:hover,
body.nn-woo .woocommerce button.button:hover,
body.nn-woo .woocommerce input.button:hover,
body.nn-woo .woocommerce a.button.alt:hover,
body.nn-woo .woocommerce button.button.alt:hover,
body.nn-woo .woocommerce input.button.alt:hover{
	background:linear-gradient(180deg,#ff69bb,#f0369d);color:#fff;
	box-shadow:0 10px 34px rgba(var(--nn-brand-rgb),.55),0 0 60px rgba(var(--nn-brand-rgb),.3);
}
body.nn-woo .woocommerce .button.wc-backward{background:rgba(255,255,255,.06);box-shadow:none}
body.nn-woo .woocommerce-info,body.nn-woo .woocommerce-message,body.nn-woo .woocommerce-error{
	background:rgba(255,255,255,.04);border-top:2px solid var(--nn-brand);color:var(--nn-text);border-radius:12px
}
body.nn-woo .woocommerce-info::before,body.nn-woo .woocommerce-message::before{color:var(--nn-brand)}
body.nn-woo .cart_totals h2,body.nn-woo #order_review_heading{margin-bottom:14px}
body.nn-woo .woocommerce ul#shipping_method li{color:var(--nn-muted)}
body.nn-woo .woocommerce .cart-collaterals .cart_totals table.shop_table{border:0!important}
body.nn-woo .woocommerce-privacy-policy-text,body.nn-woo .woocommerce-terms-and-conditions-wrapper{color:var(--nn-muted);font-size:.86rem}
.nn-woo-usp{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:34px 0 10px}
.nn-woo-usp span{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--nn-muted);font-weight:600;padding:10px 16px;
	border:1px solid var(--nn-line);border-radius:999px;background:rgba(255,255,255,.03)}
.nn-woo-usp .nn-i{color:var(--nn-brand)}

/* =========================================================================
   HEADER (Impreza / us-core) in de neonstijl
   ========================================================================= */
body.nn-dark .l-header .l-subheader.at_middle,
body.nn-dark .l-header .l-subheader.at_top,
body.nn-dark .l-header .l-subheader.at_bottom{
	background:rgba(5,6,10,.92)!important;
	color:#fff!important;
	-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
body.nn-dark .l-header,
body.nn-dark .l-header .l-subheader{box-shadow:none!important}
body.nn-dark .l-header .l-subheader.at_middle{border-bottom:1px solid var(--nn-line)}

/* menu */
body.nn-dark .l-header .w-nav-anchor.level_1{
	color:#fff!important;text-transform:none!important;font-weight:500;position:relative;
}
body.nn-dark .l-header .w-nav-item.level_1:hover>a.w-nav-anchor,
body.nn-dark .l-header .w-nav-item.level_1.opened>a.w-nav-anchor{
	color:var(--nn-brand)!important;text-shadow:0 0 16px rgba(var(--nn-brand-rgb),.75);
}
body.nn-dark .l-header .w-nav-item.level_1.current-menu-item>a.w-nav-anchor,
body.nn-dark .l-header .w-nav-item.level_1.current-menu-ancestor>a.w-nav-anchor{color:var(--nn-brand)!important}
body.nn-dark .l-header .w-nav-item.level_1.current-menu-item>a.w-nav-anchor .w-nav-title::after{
	content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
	background:var(--nn-brand);box-shadow:0 0 12px rgba(var(--nn-brand-rgb),.9);
}
/* uitklapmenu's */
body.nn-dark .l-header .w-nav-list:not(.level_1),
body.nn-dark .l-header .w-dropdown-list{background:#0a0c14!important;border:1px solid var(--nn-line)}
body.nn-dark .l-header .w-nav-item:not(.level_1)>a{color:#fff!important}

/* knop in de header */
body.nn-dark .l-header .w-btn{
	background:linear-gradient(180deg,#ff4fae,#e01784)!important;
	border:0!important;border-radius:999px!important;color:#fff!important;
	box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 8px 24px rgba(var(--nn-brand-rgb),.35);
	transition:box-shadow .25s ease,transform .18s ease;
}
body.nn-dark .l-header .w-btn:hover{
	transform:translateY(-1px);color:#fff!important;
	box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 10px 32px rgba(var(--nn-brand-rgb),.6),0 0 55px rgba(var(--nn-brand-rgb),.32);
}

/* winkelwagen en menuknop */
body.nn-dark .l-header .w-cart-link,
body.nn-dark .l-header .w-nav-control,
body.nn-dark .l-header .w-search>a{color:#fff!important}
body.nn-dark .l-header .w-cart-link:hover,
body.nn-dark .l-header .w-search>a:hover{color:var(--nn-brand)!important}
body.nn-dark .l-header .w-nav-icon>div,
body.nn-dark .l-header .w-nav-icon>div:before,
body.nn-dark .l-header .w-nav-icon>div:after{background:#fff!important}
body.nn-dark .l-header .w-cart-quantity{
	background:var(--nn-brand)!important;color:#fff!important;
	box-shadow:0 0 12px rgba(var(--nn-brand-rgb),.7);
}
body.nn-dark .l-header .w-cart-content,
body.nn-dark .l-header .widget_shopping_cart{background:#0a0c14!important;color:#fff}

/* mobiel uitklapmenu */
body.nn-dark .l-header .type_mobile .w-nav-list.level_1{background:#07080d!important}
body.nn-dark .l-header .type_mobile .w-nav-anchor{color:#fff!important}

/* =========================================================================
   PAGEBUILDER (WPBakery): rijen en kolommen met dezelfde look
   ========================================================================= */
/* De klasse kan op de rij zelf staan (WPBakery) of op de sectie eromheen
   (Impreza/us-core zet el_class op de <section> en maakt van de rij een grid). */
.nn-strip .wpb_text_column,
.nn-cards .wpb_text_column,
.nn-strip .wpb_content_element,
.nn-cards .wpb_content_element{margin-bottom:0!important}
.nn-strip .vc_column-inner{padding:0!important}
.nn-cards .vc_column-inner{padding-top:0!important}

/* balk die als één paneel oogt, met scheidingslijnen tussen de kolommen */
.nn-strip .g-cols,
.g-cols.nn-strip,
.nn-strip.vc_row-fluid{
	gap:0!important;margin-left:0!important;margin-right:0!important;
	background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
	border:1px solid var(--nn-line);border-radius:var(--nn-radius);overflow:hidden;
}
.nn-strip .g-cols > .wpb_column,
.g-cols.nn-strip > .wpb_column,
.nn-strip.vc_row-fluid > .wpb_column{
	border-right:1px solid var(--nn-line);padding-left:0!important;padding-right:0!important;
}
.nn-strip .g-cols > .wpb_column:last-child,
.g-cols.nn-strip > .wpb_column:last-child,
.nn-strip.vc_row-fluid > .wpb_column:last-child{border-right:0}
.nn-strip .nn-trust-item{border-right:0;width:100%}

/* minder ruimte tussen de rijen: thema's zetten standaard ~42px boven én onder */
body.nn-dark .l-main .l-section:has(.nn){padding-top:14px!important;padding-bottom:14px!important}
body.nn-dark .l-main .l-section:has(.nn-head){padding-top:34px!important;padding-bottom:14px!important}
body.nn-dark .l-main .l-section:has(.nn-cta){padding-bottom:44px!important}
body.nn-dark .l-main .l-section:has(.nn-hero-section){padding-top:0!important}

/* kaartrijen: eigen tussenruimte en kolommen die even hoog worden
   (thema's zetten de rij vaak op "valign_top" = align-items:start) */
.nn-cards .g-cols,
.g-cols.nn-cards{gap:16px!important;align-items:stretch!important}
.nn-strip .g-cols,
.g-cols.nn-strip{align-items:stretch!important}
.nn-cards .g-cols > .wpb_column,
.g-cols.nn-cards > .wpb_column{align-self:stretch}

/* alinea's die WordPress soms om de opmaak heen zet */
.nn p:empty{display:none}
.nn p:has(> .nn-benefit-ico),
.nn p:has(> .nn-btn),
.nn p:has(> .nn-link),
.nn p:has(> .nn-trust-item){margin:0}

/* tekst in de balk mag afbreken: kolommen zijn smaller dan een eigen sectie */
.nn-strip .nn-usp-item{padding:15px 14px;gap:11px}
.nn-strip .nn-usp-txt strong{white-space:normal;overflow:visible;text-overflow:clip}
.nn-strip .nn-trust-item{justify-content:center;padding:18px 14px;text-align:center}

/* kaarten even hoog in hun kolom */
.nn-cards .wpb_column{display:flex}
.nn-cards .vc_column-inner,
.nn-cards .vc_column-inner > .wpb_wrapper,
.nn-cards .vc_column-inner > .wpb_text_column,
.nn-cards .wpb_wrapper > .wpb_text_column,
.nn-cards .wpb_text_column > .wpb_wrapper,
.nn-cards .wpb_text_column > .wpb_wrapper > .nn{display:flex;flex-direction:column;flex:1;width:100%}
.nn-cards .nn > .nn-card{flex:1}
.nn-cards .vc_row.vc_inner + .vc_row.vc_inner{margin-top:16px}

/* een kolom die zelf de kaart is: losse elementen (tekst, wrapper, knop) erin */
.nn-col-card > .vc_column-inner{
	background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
	border:1px solid var(--nn-line);border-radius:var(--nn-radius);
	padding:24px!important;display:flex;flex-direction:column;gap:14px;height:100%;
}
.nn-col-card > .vc_column-inner > .wpb_wrapper{display:flex;flex-direction:column;gap:14px;flex:1}

/* drie voorbeeldfoto's in een horizontale wrapper (us_hwrapper) */
.nn-shots,
.nn-col-card .w-hwrapper{width:100%;margin:0}
.nn-shots > *,
.nn-col-card .w-hwrapper > *{flex:1 1 0;min-width:0;margin:0!important}
.nn-shots .w-image,
.nn-shots .w-image-h,
.nn-col-card .w-image,
.nn-col-card .w-image-h{display:block;width:100%}
.nn-shots .w-image img,
.nn-col-card .w-hwrapper .w-image img{
	width:100%;height:auto;display:block;border-radius:12px;
	border:1px solid var(--nn-line);transition:box-shadow .25s ease,transform .25s ease;
}
.nn-shots .w-image:hover img,
.nn-col-card .w-hwrapper .w-image:hover img{
	transform:translateY(-2px);
	box-shadow:0 0 22px rgba(var(--nn-brand-rgb),.45),0 0 50px rgba(var(--nn-brand-rgb),.2);
}
.nn-col-card .nn-link{margin-top:auto}

/* de drie voorbeelden in een kolom net zo compact als in de eigen sectie */
.nn-cards .nn-gallery{grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.nn-cards .nn-example figcaption{display:none}
.nn-cards .nn-example-stage{padding:0 10px;overflow:hidden}
.nn-cards .nn-example-neon{font-size:1.02rem;line-height:1.2;text-align:center;white-space:normal}
.nn-cards .nn-example-icon{width:13px;height:13px;flex:none}

/* kolomaantallen die passen bij de breedte van een kolom */
@media (max-width:1024px){
	.nn-strip .g-cols,
	.g-cols.nn-strip{grid-template-columns:repeat(3,1fr)!important}
	.nn-cards .g-cols,
	.g-cols.nn-cards{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:700px){
	.nn-strip .g-cols,
	.g-cols.nn-strip{grid-template-columns:repeat(2,1fr)!important}
	.nn-cards .g-cols,
	.g-cols.nn-cards{grid-template-columns:1fr!important}
}

/* een kolom van 1/3 is smaller dan onze eigen sectie: eerder stapelen */
@media (max-width:1180px){
	.nn-cards .nn-how{grid-template-columns:1fr;gap:16px}
	.nn-cards .nn-rating{width:100%;padding:15px 0 0;border-left:0;border-top:1px solid var(--nn-line)}
	.nn-cards .nn-kit-row{grid-template-columns:1fr;gap:14px}
	.nn-cards .nn-kit-img{width:100%;max-width:190px;justify-self:center}
}

@media (max-width:760px){
	.nn-strip > .vc_column_container,
	.nn-strip > .wpb_column{border-right:0;border-bottom:1px solid var(--nn-line)}
	.nn-strip > .vc_column_container:last-child,
	.nn-strip > .wpb_column:last-child{border-bottom:0}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1180px){
	.nn-usp{grid-template-columns:repeat(3,1fr)}
	.nn-usp-item:nth-child(3n){border-right:0}
	.nn-usp-item:nth-child(-n+3){border-bottom:1px solid var(--nn-line)}
	.nn-timeline{grid-template-columns:repeat(2,1fr)}
	.nn-tri{grid-template-columns:1fr 1fr}
	.nn-tri > :last-child{grid-column:1/-1}
	.nn-tri .nn-gallery{grid-template-columns:repeat(3,1fr)}
	.nn-kit-img{width:130px}
}
@media (max-width:1024px){
	.nn-hero{grid-template-columns:1fr}
	/* min-height als vangnet: oudere iOS-versies rekenen aspect-ratio in een
	   grid-item soms als 0 uit, waardoor de hele kamer onzichtbaar wordt */
	.nn-stage{min-height:58vw;aspect-ratio:16/11}
	.nn-tri,.nn-grid-3{grid-template-columns:1fr 1fr}
	.nn-split,.nn-split-contact{grid-template-columns:1fr}
	.nn-numbers{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
	.nn-section{padding:40px 0}
	.nn-wrap{padding:0 14px}
	.nn-hero{gap:12px}
	/* vaste hoogte op mobiel: de foto wordt bijgesneden, de neon blijft
	   in het midden staan */
	.nn-stage{aspect-ratio:auto;height:200px;min-height:0;border-radius:16px}
	.nn-stage-badges{display:none}
	.nn-stage-tools{bottom:10px;left:10px;right:10px;gap:8px;padding:8px 10px}
	.nn-tools-label{display:none}
	.nn-stage-upload{top:10px;left:10px;right:auto}
	.nn-chip{padding:8px 12px;font-size:.78rem}
	.nn-config{padding:16px;border-radius:16px}
	/* zes stappen op 375px leest als veel werk: alleen kleine stippen,
	   de titel in het paneel zegt al bij welke stap je bent */
	.nn-steps{gap:0;margin-bottom:18px}
	.nn-step{padding:3px 0;gap:0}
	.nn-step-dot{width:26px;height:26px;font-size:.76rem}
	.nn-step-dot svg{width:13px;height:13px}
	.nn-step::after{top:13px;left:calc(50% + 16px);right:calc(-50% + 16px)}
	.nn-step-ico,.nn-step-label,.nn-step.is-active .nn-step-label{display:none}

	/* Vaste balk onderin zodra er een naam staat: tekst en prijs boven,
	   de knoppen eronder. Drie knoppen naast de tekst paste niet op 375px. */
	.nn-sticky{
		display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
		padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom));
		background:rgba(9,7,16,.94);border-top:1px solid rgba(255,255,255,.1);
		box-shadow:0 -8px 24px rgba(0,0,0,.45)
	}
	.nn-sticky-in{display:flex;align-items:center;gap:8px;max-width:620px;margin:0 auto}
	.nn-sticky-info{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.15}
	.nn-sticky-info strong{font-size:.92rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.nn-sticky-info em{font-style:normal;font-size:.72rem;color:var(--nn-muted)}
	.nn-sticky-price{flex:0 0 auto;font-weight:700;font-size:.95rem;color:var(--nn-brand);white-space:nowrap}
	.nn-sticky-btn{flex:0 0 auto;padding:11px 13px;font-size:.84rem;white-space:nowrap}
	.nn-sticky-photo{flex:0 0 auto;padding:11px 12px;line-height:0}
	.nn-sticky-photo .nn-i{width:18px;height:18px}
	.nn-sticky-photo.is-on{box-shadow:0 0 0 2px rgba(255,255,255,.55) inset}
	.nn-sticky-btn .nn-i{width:15px;height:15px}
	.nn-sticky-btn .nn-sticky-ico{display:inline-flex;align-items:center}
	.nn-sticky-btn .nn-sticky-ico[hidden]{display:none}


	body.nn-sticky-on{padding-bottom:86px}
	.nn-panels{min-height:0}
	.nn-panel-title{font-size:1rem}
	.nn-tri,.nn-grid-3,.nn-timeline,.nn-numbers{grid-template-columns:1fr}
	.nn-how{grid-template-columns:1fr;gap:18px}
	.nn-rating{padding:16px 0 0;border-left:0;border-top:1px solid var(--nn-line);min-width:0;width:100%}
	.nn-kit-row{grid-template-columns:1fr}
	.nn-kit-img{width:100%;max-width:220px;justify-self:center}
	.nn-trust-item{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--nn-line);justify-content:flex-start;padding:15px 18px}
	.nn-trust-item:last-child{border-bottom:0}
	.nn-usp{grid-template-columns:1fr 1fr}
	.nn-usp-item{border-bottom:1px solid var(--nn-line);padding:13px 12px;gap:9px}
	.nn-usp-item:nth-child(2n){border-right:0}
	.nn-usp-txt strong{white-space:normal;font-size:.82rem;line-height:1.25}
	.nn-usp-txt em{font-size:.72rem}
	.nn-form-row{grid-template-columns:1fr}
	.nn-config-foot{gap:10px}
	.nn-actions{width:100%}
	.nn-actions .nn-btn{flex:1;padding:14px 16px;font-size:.94rem}
	/* "Terug" en "In winkelwagen" staan naast elkaar en zijn de langste
	   labels: op een telefoon iets kleiner zodat ze niet afbreken */
	.nn-actions [data-nn-prev],
	.nn-actions [data-nn-cart]{font-size:.82rem;padding:14px 12px}
	.nn-actions [data-nn-cart] .nn-i{width:16px;height:16px}
	.nn-gallery{grid-template-columns:1fr 1fr;gap:10px}
	.nn-tri .nn-gallery{grid-template-columns:repeat(3,1fr)}
	.nn-cta{padding:34px 18px}
	.nn-fonts,.nn-icons{max-height:230px}
	.nn-summary{grid-template-columns:1fr auto}
	.nn-checkout-steps li span{display:none}
	.nn-checkout-steps li.is-on span{display:inline}
}
@media (max-width:420px){
	.nn-gallery{grid-template-columns:1fr}
	.nn-colors{grid-template-columns:repeat(3,1fr)}
	.nn-fonts{grid-template-columns:repeat(2,1fr)}
}

/* ---------- SEO: kop onder de configurator ---------- */
.nn .nn-seo-intro{max-width:820px;margin:34px auto 6px;text-align:center}
.nn .nn-seo-intro .nn-h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:12px}
.nn .nn-seo-intro .nn-sub{margin:0 auto;max-width:68ch;color:var(--nn-muted,#b9b4c7);font-size:1.02rem;line-height:1.6}

/* ---------- Footerlinks boven de themafooter ---------- */
.nn-flinks{background:#04050a;color:#d8d4e3;padding:40px 0 28px;border-top:1px solid rgba(255,255,255,.06)}
.nn-flinks .nn-flinks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px}
.nn-flinks .nn-flinks-title{font-family:var(--nn-heading-font,inherit);font-weight:700;color:#fff;font-size:1rem;margin:0 0 12px;letter-spacing:.02em}
.nn-flinks .nn-flinks-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.nn-flinks .nn-flinks-list a,.nn-flinks .nn-flinks-address a{color:#c7c2d6;text-decoration:none;font-size:.95rem;transition:color .15s}
.nn-flinks .nn-flinks-list a:hover,.nn-flinks .nn-flinks-address a:hover{color:#ff4fb0}
.nn-flinks .nn-flinks-address{font-style:normal;display:flex;flex-direction:column;gap:5px;font-size:.95rem;line-height:1.5;color:#c7c2d6}
@media (max-width:760px){.nn-flinks .nn-flinks-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.nn-flinks .nn-flinks-grid{grid-template-columns:1fr}}

/* ---------- Tekstblokken (SEO-tekst, landingspagina's) ---------- */
.nn .nn-prose{max-width:840px;margin:0 auto;color:var(--nn-text);font-size:1.02rem;line-height:1.65}
.nn .nn-prose h2{font-family:var(--nn-heading-font,inherit);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;color:#fff;margin:0 0 14px;letter-spacing:-.01em}
.nn .nn-prose h3{font-family:var(--nn-heading-font,inherit);font-size:1.2rem;color:#fff;margin:28px 0 8px}
.nn .nn-prose p{margin:0 0 14px}
.nn .nn-prose ul{margin:0 0 16px;padding-left:22px}
.nn .nn-prose li{margin:4px 0}
.nn .nn-prose a{color:var(--nn-brand);text-decoration:underline;text-underline-offset:3px}
.nn .nn-prose a:hover{color:#fff}
.nn .nn-prose table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:.96rem}
.nn .nn-prose th,.nn .nn-prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--nn-line)}
.nn .nn-prose th{color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.nn .nn-prose td strong{color:#fff}
.nn .nn-prose .nn-btn{margin-top:6px;text-decoration:none}
.nn .nn-prose-lead{font-size:1.12rem;color:#fff}
.nn .nn-prose-wide{max-width:1100px}
.nn .nn-prose-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px 32px;margin:8px 0 18px}
.nn .nn-prose-cols h3{margin-top:0}
.nn .nn-prose ul.nn-check{list-style:none;padding:0}
.nn .nn-prose ul.nn-check li{padding-left:26px;position:relative}
.nn .nn-prose ul.nn-check li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:2.4px solid var(--nn-brand);border-bottom:2.4px solid var(--nn-brand);transform:rotate(-45deg);filter:drop-shadow(0 0 6px rgba(var(--nn-brand-rgb),.6))}

/* ---------- Leveranciersportaal (lichte weergave) ---------- */
body.nn-supplier,
body.nn-supplier .l-canvas,
body.nn-supplier .l-main,
body.nn-supplier .l-section,
body.nn-supplier .l-section-h,
body.nn-supplier .entry-content,
body.nn-supplier .page-content{background:#fff!important;background-image:none!important;color:#14141a!important}
body.nn-supplier .nn-cursor{display:none!important}

.nn.nn-sup{max-width:1100px;margin:0 auto;padding:24px 0 60px;color:#14141a;font-size:15px}
.nn-sup *{color:inherit}
.nn-sup a{color:#c2157a;text-decoration:none}
.nn-sup a:hover{text-decoration:underline}
.nn-sup .nn-sup-head{margin-bottom:20px}
.nn-sup .nn-sup-title{font-family:var(--nn-heading-font,inherit);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;color:#14141a;margin:0 0 6px;letter-spacing:-.01em}
.nn-sup .nn-sup-sub{margin:0;color:#5d5d6b;font-size:.95rem}
.nn-sup .nn-sup-h2{font-family:var(--nn-heading-font,inherit);font-size:1.02rem;font-weight:700;color:#14141a;margin:0 0 14px}
.nn-sup .nn-sup-back{margin:0 0 10px;font-size:.9rem}
.nn-sup .nn-sup-warn{background:#fdecf5;border:1px solid #e01a87;color:#8a1152;border-radius:10px;padding:14px 16px;margin:0}
.nn-sup .nn-sup-ok{background:#e7f7ef;border:1px solid #1d9a63;color:#0f6b3f;border-radius:10px;padding:10px 14px;margin:0 0 16px;font-size:.92rem}
.nn-sup .nn-sup-empty{color:#5d5d6b;padding:24px 0}
.nn-sup .nn-sup-dim{color:#9a9aa8}

.nn-sup .nn-sup-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:16px}
.nn-sup .nn-sup-tabs{display:flex;flex-wrap:wrap;gap:6px}
.nn-sup .nn-sup-tab{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid #dcdce4;color:#5d5d6b;text-decoration:none;font-size:.88rem;background:#fff;transition:color .15s,border-color .15s,background .15s}
.nn-sup .nn-sup-tab:hover{color:#14141a;border-color:#b9b9c6;text-decoration:none}
.nn-sup .nn-sup-tab.is-on{background:#3c4252;border-color:#3c4252;color:#fff;font-weight:600}
.nn-sup .nn-sup-search{display:flex;gap:6px}
.nn-sup .nn-sup-search input{background:#fff;border:1px solid #dcdce4;border-radius:8px;color:#14141a;padding:8px 12px;font:inherit;font-size:.9rem;min-width:150px}

.nn-sup .nn-sup-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;border:1px solid #dcdce4;background:#fff;color:#14141a;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.nn-sup .nn-sup-btn:hover{background:#f6f6f9;border-color:#b9b9c6;color:#14141a;text-decoration:none}
.nn-sup .nn-sup-btn-primary{background:#3c4252;border-color:#3c4252;color:#fff}
.nn-sup .nn-sup-btn-primary:hover{background:#2b3040;border-color:#2b3040;color:#fff}
.nn-sup .nn-sup-actions{margin:0 0 20px}

.nn-sup .nn-sup-tablewrap{overflow-x:auto;border:1px solid #e4e4ec;border-radius:12px;background:#fff}
.nn-sup .nn-sup-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:720px}
.nn-sup .nn-sup-table th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#6c6c7b;background:#f6f6f9;padding:12px 14px;border-bottom:1px solid #e4e4ec}
.nn-sup .nn-sup-table td{padding:12px 14px;border-bottom:1px solid #eeeef3;vertical-align:middle;color:#14141a}
.nn-sup .nn-sup-table tr:last-child td{border-bottom:0}
.nn-sup .nn-sup-table tbody tr:hover{background:#fafafc}
.nn-sup .nn-sup-text{font-weight:700}
.nn-sup .nn-sup-right{text-align:right}

.nn-sup .nn-sup-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.02em;background:#eeeef3;color:#5d5d6b;white-space:nowrap}
.nn-sup .nn-sup-pill-processing{background:#fdf0d5;color:#8a6200}
.nn-sup .nn-sup-pill-nn-produced{background:#dcefff;color:#0b5c92}
.nn-sup .nn-sup-pill-nn-shipped{background:#dcf5ea;color:#0f6b43}
.nn-sup .nn-sup-pill-completed{background:#dcf5ea;color:#0f6b43}
.nn-sup .nn-sup-pill-on-hold{background:#eeeef3;color:#5d5d6b}

.nn-sup .nn-sup-card{background:#fff;border:1px solid #e4e4ec;border-radius:12px;padding:20px;margin:0 0 16px;box-shadow:0 1px 2px rgba(20,20,26,.04)}
.nn-sup .nn-sup-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:start}
.nn-sup .nn-sup-cols .nn-sup-card{margin:0}
.nn-sup .nn-sup-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:20px;align-items:start}
.nn-sup .nn-sup-dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 14px;margin:0;font-size:.93rem}
.nn-sup .nn-sup-dl dt{color:#6c6c7b;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.nn-sup .nn-sup-dl dd{margin:0;color:#14141a;display:flex;align-items:center;gap:8px;flex-wrap:wrap;word-break:break-word}
.nn-sup .nn-sup-strong{font-weight:700;font-size:1.05rem}
.nn-sup .nn-sup-swatch{width:16px;height:16px;border-radius:4px;border:1px solid rgba(20,20,26,.2);flex:none}
.nn-sup .nn-sup-icon{width:22px;height:22px;flex:none}
.nn-sup .nn-sup-link{word-break:break-all;font-size:.86rem}
.nn-sup .nn-sup-preview{margin:0;background:#0b0b12;border:1px solid #e4e4ec;border-radius:10px;padding:10px;display:flex;align-items:center;justify-content:center;min-height:120px}
.nn-sup .nn-sup-preview img{max-width:100%;height:auto;display:block}
.nn-sup .nn-sup-dl-plain{grid-template-columns:140px minmax(0,1fr);gap:6px 14px}
.nn-sup .nn-sup-dl-plain dt{text-transform:none;letter-spacing:0;font-size:.93rem;color:#6c6c7b;padding-top:0}
.nn-sup .nn-sup-dl-plain dd{font-size:.98rem}
@media (max-width:760px){.nn-sup .nn-sup-dl-plain{grid-template-columns:1fr}.nn-sup .nn-sup-dl-plain dd{margin-bottom:6px}}
.nn-sup .nn-sup-address{font-style:normal;line-height:1.6;color:#14141a;margin:0 0 14px;font-size:1rem}

.nn-sup .nn-sup-label{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#6c6c7b;margin:0 0 6px}
.nn-sup .nn-sup-input{width:100%;background:#fff;border:1px solid #dcdce4;border-radius:8px;color:#14141a;padding:10px 12px;font:inherit;font-size:.92rem;margin:0 0 14px}
.nn-sup .nn-sup-input:focus{outline:none;border-color:#3c4252;box-shadow:0 0 0 3px rgba(60,66,82,.14)}
.nn-sup select.nn-sup-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#14141a 50%),linear-gradient(135deg,#14141a 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px;background-size:6px 6px;background-repeat:no-repeat}
.nn-sup .nn-sup-payment{margin:14px 0 0}

@media (max-width:760px){
	.nn-sup .nn-sup-grid{grid-template-columns:1fr}
	.nn-sup .nn-sup-dl{grid-template-columns:1fr;gap:2px 0}
	.nn-sup .nn-sup-dl dd{margin-bottom:8px}
}

/* ---------- Maatwerk: offerteaanvraag (lichte weergave) ---------- */
body.nn-light,
body.nn-light .l-canvas,
body.nn-light .l-main,
body.nn-light .l-section,
body.nn-light .l-section-h,
body.nn-light .entry-content,
body.nn-light .page-content{background:#fff!important;background-image:none!important;color:#14141a!important}
body.nn-light .nn-cursor{display:none!important}

.nn-quote{color:#14141a}
.nn-quote .nn-head{text-align:center}
.nn-quote .nn-eyebrow{color:#F558A8}
.nn-quote .nn-h2{color:#14141a}
.nn-quote .nn-h2 .nn-glow-text{color:#F558A8;text-shadow:none;-webkit-text-fill-color:currentColor;background:none}
.nn-quote .nn-sub{color:#5d5d6b}
.nn-quote .nn-h3{margin:18px 0 2px;font-size:1.05rem;color:#14141a}
.nn-quote .nn-h3:first-of-type{margin-top:0}
.nn-quote .nn-card{background:#fff;border:1px solid #e4e4ec;box-shadow:0 1px 3px rgba(20,20,26,.05)}
.nn-quote .nn-form{gap:12px}
.nn-quote .nn-input{background:#fff;border:1px solid #d7d7e0;color:#14141a;border-radius:10px}
.nn-quote .nn-input::placeholder{color:#8b8b99;opacity:1}
.nn-quote .nn-input:focus{outline:none;border-color:#F558A8;box-shadow:0 0 0 3px rgba(245,88,168,.22)}
.nn-quote .nn-field-label{display:block;font-size:.86rem;color:#5d5d6b;font-weight:600;margin:4px 0 0}
.nn-quote .nn-req{color:#F558A8}
.nn-quote .nn-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nn-quote .nn-input-small{max-width:110px}
.nn-quote .nn-input-short{max-width:260px}
.nn-quote .nn-input-file{padding:11px 14px;font-size:.92rem;line-height:1.4}
.nn-quote .nn-input-file::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:8px;background:#eeeef3;color:#14141a;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.nn-quote .nn-input-file::file-selector-button:hover{background:#e0e0e8}
.nn-quote .nn-hint{margin:0;font-size:.84rem;color:#6c6c7b}
.nn-quote .nn-quote-submit{margin-top:8px}
.nn-quote .nn-quote-terms{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.nn-quote .nn-quote-terms .nn-i{color:#F558A8;flex:none}
.nn-quote .nn-quote-error{background:#fdeaea;border:1px solid #d94848;color:#8a2020;border-radius:10px;padding:12px 16px;margin:0 0 16px;font-size:.92rem}
.nn-quote .nn-quote-done{text-align:center}
.nn-quote .nn-quote-done .nn-h2{margin-bottom:10px}
.nn-quote .nn-quote-done p{color:#5d5d6b;margin:0 0 16px}
.nn-quote .nn-quote-done .nn-btn{margin:0 auto}
@media (max-width:760px){.nn-quote .nn-input-short{max-width:100%}}

/* Maatwerkformulier compacter */
.nn-quote .nn-quote-form{max-width:620px;margin:0 auto;gap:10px;padding:26px 28px}
.nn-quote .nn-form .nn-input{font-size:.92rem;font-weight:400;padding:9px 12px;border-radius:8px;line-height:1.45}
.nn-quote .nn-form textarea.nn-input{min-height:96px}
.nn-quote .nn-form-row{gap:10px}
.nn-quote .nn-input-small{max-width:84px}
.nn-quote .nn-input-short{max-width:210px}
.nn-quote .nn-input-file{padding:7px 10px;font-size:.86rem}
.nn-quote .nn-input-file::file-selector-button{padding:6px 11px;font-size:.82rem}
.nn-quote .nn-field-label{font-size:.82rem;margin-top:2px}
.nn-quote .nn-hint{font-size:.8rem}
.nn-quote .nn-h3{font-size:.98rem;margin:14px 0 0}
.nn-quote .nn-quote-submit{font-size:.94rem;padding:11px 22px}
@media (max-width:760px){.nn-quote .nn-quote-form{padding:20px}.nn-quote .nn-input-short{max-width:100%}}

.nn-quote .nn-btn-primary{background:#F558A8;border-color:#F558A8;box-shadow:none;color:#fff}
.nn-quote .nn-btn-primary:hover{background:#e2459a;border-color:#e2459a;box-shadow:none;color:#fff}

/* Maatwerk: uitleg onder het formulier */
.nn-quote .nn-quote-info{max-width:620px;margin:26px auto 0;color:#14141a}
.nn-quote .nn-quote-info .nn-h3{margin:0 0 10px;font-size:1.02rem}
.nn-quote .nn-quote-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px;font-size:.92rem;line-height:1.5}
.nn-quote .nn-quote-list li{padding-left:24px;position:relative;color:#3d3d49}
.nn-quote .nn-quote-list li strong{color:#14141a}
.nn-quote .nn-quote-list li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2.2px solid #F558A8;border-bottom:2.2px solid #F558A8;transform:rotate(-45deg)}
.nn-quote .nn-quote-note{font-size:.88rem;color:#5d5d6b;margin:0;line-height:1.55}

/* Leveranciersportaal: offerteaanvragen */
.nn-sup .nn-sup-quote-desc{white-space:pre-wrap;background:#f6f6f9;border:1px solid #eeeef3;border-radius:10px;padding:14px 16px;margin:0 0 16px;font-size:.95rem;line-height:1.55}
.nn-sup textarea.nn-sup-input{resize:vertical;min-height:80px}
.nn-sup input[type="file"].nn-sup-input{padding:8px 10px;font-size:.88rem}
.nn-sup input[type="file"].nn-sup-input::file-selector-button{margin-right:10px;padding:6px 12px;border:0;border-radius:6px;background:#eeeef3;color:#14141a;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}

/* Akkoordvinkje van WooCommerce (afrekenen en betaalpagina) duidelijk tonen */
body.nn-woo .woocommerce-terms-and-conditions-wrapper,
body.nn-woo .wc-block-checkout__terms{
	border:2px solid var(--nn-brand);border-radius:10px;
	padding:14px 16px;margin:16px 0;background:rgba(var(--nn-brand-rgb),.07)
}
body.nn-woo .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
body.nn-woo .wc-block-checkout__terms label{display:flex;gap:12px;align-items:center;font-weight:600;line-height:1.5;margin:0;cursor:pointer}
body.nn-woo .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
body.nn-woo .wc-block-checkout__terms input[type="checkbox"]{
	width:22px;height:22px;flex:none;margin:0;accent-color:var(--nn-brand);cursor:pointer;opacity:1;position:static
}
body.nn-woo .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text{font-weight:600}
body.nn-woo .woocommerce-terms-and-conditions-wrapper .required{color:var(--nn-brand)}

/* ---------- "Lees ook": interne links onder de inhoud ---------- */
.nn-crosslinks{margin:34px 0 8px;padding:22px 0 0;border-top:1px solid var(--nn-line,rgba(255,255,255,.1))}
.nn-crosslinks .nn-crosslinks-title{
	font-family:var(--nn-heading-font,inherit);font-weight:700;color:#fff;
	font-size:1.05rem;margin:0 0 14px;letter-spacing:.01em
}
.nn-crosslinks ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.nn-crosslinks li{margin:0}
.nn-crosslinks a{
	display:flex;flex-direction:column;gap:3px;height:100%;
	padding:13px 15px;border-radius:12px;text-decoration:none;
	background:rgba(255,255,255,.04);border:1px solid var(--nn-line,rgba(255,255,255,.1));
	transition:border-color .15s,background .15s
}
.nn-crosslinks a:hover{border-color:rgba(var(--nn-brand-rgb,240,54,157),.55);background:rgba(var(--nn-brand-rgb,240,54,157),.07)}
.nn-crosslinks a strong{color:#fff;font-size:.97rem;font-weight:600;line-height:1.3}
.nn-crosslinks a span{color:var(--nn-muted,#b9b4c7);font-size:.84rem;line-height:1.35}
@media (max-width:620px){.nn-crosslinks ul{grid-template-columns:1fr}}

/* ---------- Blogoverzicht ---------- */
.nn-blog-list{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.nn-blogcard{display:flex;flex-direction:column;gap:9px}
.nn-blogcard .nn-blogcard-media{display:block;margin:0 0 3px;border-radius:12px;overflow:hidden;line-height:0}
.nn-blogcard .nn-blogcard-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .35s ease}
.nn-blogcard:hover .nn-blogcard-img{transform:scale(1.03)}
.nn-blogcard .nn-blogcard-date{margin:0;font-size:.8rem;color:var(--nn-muted);letter-spacing:.02em}
.nn-blogcard .nn-blogcard-title{margin:0;font-size:1.18rem;line-height:1.3}
.nn-blogcard .nn-blogcard-title a{color:#fff;text-decoration:none}
.nn-blogcard .nn-blogcard-title a:hover{color:var(--nn-brand)}
.nn-blogcard .nn-blogcard-text{margin:0;color:var(--nn-muted);font-size:.95rem;line-height:1.55}
.nn-blogcard .nn-link{margin-top:auto;align-self:flex-start}
@media (max-width:620px){.nn-blog-list{grid-template-columns:1fr}}

/* ---------- Je ontwerp als foto: delen en mailen ---------- */

.nn-share{margin:16px 0 0;padding:16px;border:1px solid var(--nn-line);border-radius:14px;background:rgba(255,255,255,.03)}
.nn-share[hidden]{display:none!important}
.nn-share .nn-share-title{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-weight:700;font-size:1.05rem;color:#fff}
.nn-share .nn-share-sub{display:flex;align-items:center;gap:7px;margin:0 0 12px;font-size:.85rem;color:var(--nn-muted)}
.nn-share .nn-share-sub .nn-i{color:var(--nn-brand);flex:none}
.nn-share .nn-share-close{
	margin-left:auto;flex:0 0 auto;width:36px;height:36px;padding:0;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	border:1px solid var(--nn-line);border-radius:50%;
	background:rgba(255,255,255,.06);color:#fff;
	font-size:1.45rem;line-height:1;transition:.15s
}
.nn-share .nn-share-close:hover{background:rgba(var(--nn-brand-rgb),.18);border-color:rgba(var(--nn-brand-rgb),.6)}

.nn-share .nn-share-pick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.nn-share .nn-share-opt{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--nn-line);border-radius:999px;cursor:pointer;font-size:.88rem;color:var(--nn-muted);transition:.15s}
.nn-share .nn-share-opt:has(input:checked){border-color:rgba(var(--nn-brand-rgb),.75);background:rgba(var(--nn-brand-rgb),.1);color:#fff}
.nn-share .nn-share-opt input{accent-color:var(--nn-brand);width:16px;height:16px;margin:0}

.nn-share .nn-share-preview{margin:0 0 12px;border-radius:12px;overflow:hidden;background:#07060d;min-height:60px}
.nn-share .nn-share-preview img{display:block;width:100%;height:auto}

.nn-share .nn-share-actions{display:flex;gap:9px;flex-wrap:wrap}
.nn-share .nn-share-actions .nn-btn{flex:1 1 auto;padding:12px 14px;font-size:.88rem}

.nn-share .nn-share-form{margin:14px 0 0;display:flex;flex-direction:column;gap:12px}
.nn-share .nn-share-form[hidden]{display:none!important}
.nn-share .nn-share-field{display:flex;flex-direction:column;gap:6px}
.nn-share .nn-share-field > span{font-size:.84rem;color:var(--nn-muted)}
/* de losse velden hebben geen label meer, alleen een placeholder */
.nn-share input.nn-share-field,
.nn-share .nn-share-field input,
.nn-share .nn-share-field textarea{
	width:100%;padding:11px 13px;border-radius:10px;font:inherit;font-size:.95rem;
	background:rgba(255,255,255,.05);border:1px solid var(--nn-line);color:#fff
}
.nn-share .nn-share-field textarea{resize:vertical;min-height:88px;line-height:1.5}
.nn-share input.nn-share-field:focus,
.nn-share .nn-share-field input:focus,
.nn-share .nn-share-field textarea:focus{outline:none;border-color:rgba(var(--nn-brand-rgb),.75)}
.nn-share input.nn-share-field::placeholder,
.nn-share .nn-share-field textarea::placeholder{color:var(--nn-muted);opacity:1}
.nn-share .nn-share-field .nn-hint{font-style:normal;font-size:.78rem;color:var(--nn-muted)}

.nn-share .nn-share-presets{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0}
.nn-share .nn-share-presets .nn-chip{font-size:.8rem;padding:7px 12px}

.nn-share .nn-share-links{display:flex;gap:8px;flex-wrap:wrap}
.nn-share .nn-share-links .nn-chip{font-size:.82rem;text-decoration:none}

.nn-share .nn-share-note{margin:10px 0 0;font-size:.86rem;color:var(--nn-muted);min-height:1.2em}
.nn-share .nn-share-form .nn-share-note{margin:0;min-height:0}
.nn-share .nn-share-form .nn-share-note:not(:empty){
	margin:0 0 2px;padding:10px 13px;border-radius:10px;
	background:rgba(var(--nn-brand-rgb),.12);border:1px solid rgba(var(--nn-brand-rgb),.4);color:#fff
}
.nn-share .nn-share-form .nn-share-note.is-error:not(:empty){background:rgba(255,107,138,.12);border-color:rgba(255,107,138,.5);color:#ff9fb3}
.nn-share .nn-share-note.is-error{color:#ff6b8a}

@media (max-width:760px){
	.nn-share{padding:14px}
	.nn-share .nn-share-actions .nn-btn{flex:1 1 100%}
}

/* ---------- De pagina van een gedeelde foto: /voorbeeld/{token}/ ---------- */
body.nn-voorbeeld{
	margin:0;padding:0;background:#07060d;color:#fff;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	line-height:1.6;-webkit-font-smoothing:antialiased
}
body.nn-voorbeeld .nn-vb{display:flex;justify-content:center;padding:28px 16px 48px}
body.nn-voorbeeld .nn-vb-card{
	width:100%;max-width:560px;text-align:center;
	background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
	border-radius:18px;padding:24px
}
body.nn-voorbeeld .nn-vb-logo{display:inline-block;margin:0 0 18px}
body.nn-voorbeeld .nn-vb-logo img{max-width:190px;height:auto;display:block}
body.nn-voorbeeld .nn-vb-img{width:100%;height:auto;border-radius:14px;display:block;margin:0 0 18px}
body.nn-voorbeeld .nn-vb-title{font-size:1.5rem;margin:0 0 16px;line-height:1.25}
body.nn-voorbeeld .nn-vb-specs{
	display:grid;grid-template-columns:auto auto;justify-content:center;
	gap:4px 18px;margin:0 0 22px;text-align:left;font-size:.95rem
}
body.nn-voorbeeld .nn-vb-specs dt{color:#b9b4c7}
body.nn-voorbeeld .nn-vb-specs dd{margin:0;font-weight:600}
body.nn-voorbeeld .nn-vb-order{
	display:inline-block;background:#F0369D;color:#fff;text-decoration:none;
	padding:15px 34px;border-radius:999px;font-weight:700;font-size:1.05rem;border:0;cursor:pointer
}
body.nn-voorbeeld .nn-vb-order:hover{background:#ff4fb0}
body.nn-voorbeeld .nn-vb-note{color:#b9b4c7;font-size:.86rem;margin:16px 0 0}
body.nn-voorbeeld .nn-vb-link{display:inline-block;margin:18px 0 0;color:#F0369D;font-size:.9rem}

@media (prefers-reduced-motion:reduce){.nn-share{transition:none}}

/* smalle telefoons: de balk moet op een regel blijven passen */
@media (max-width:400px){
	.nn-sticky-in{gap:6px}
	.nn-sticky-info strong{font-size:.86rem}
	.nn-sticky-price{font-size:.88rem}
	.nn-sticky-btn{padding:11px 10px;font-size:.8rem}
	.nn-sticky-photo{padding:11px 10px}
}

/* ---------- Het fotopaneel als lade (mobiel) ----------
   Staat bewust achteraan: anders wint de basisstijl van .nn-share
   hierboven en is het paneel doorzichtig. */
@media (max-width:760px){
	.nn-share{
		position:fixed;left:0;right:0;bottom:0;z-index:70;margin:0;
		max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
		background:#0d0a16;
		border:1px solid var(--nn-line);border-bottom:0;border-radius:18px 18px 0 0;
		padding:16px 14px calc(18px + env(safe-area-inset-bottom));
		transform:translateY(100%);transition:transform .3s ease;
		box-shadow:0 -14px 40px rgba(0,0,0,.65)
	}
	.nn-share.is-open{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.nn-share{transition:none}}

@media (max-width:760px){
	.nn-share .nn-share-title{
		position:sticky;top:0;z-index:3;
		background:#0d0a16;margin:-16px -14px 4px;padding:14px 14px 8px
	}
}