/* =========================================================================
   ElektraNu — keuzehulp, configurators and the shop aids around them
   Kept in its own sheet so the original design stays untouched and any of
   this can be pulled back out in one line.

   Colour logic: orange is "buy", blue is "help me choose". Every tool,
   configurator and wizard is blue so a customer can tell an action that
   spends money from one that only narrows a choice.
   ========================================================================= */

:root {
	--blue:      #1761A0;
	--blue-600:  #114E82;
	--blue-soft: #EAF2F9;
}

/* ---------- Tool button ---------- */

.btn--tool {
	background: var(--blue);
	color: #fff;
	border-color: var(--blue);
}
.btn--tool:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.btn--tool svg { width: 20px; height: 20px; }

.btn--tool-ghost {
	background: #fff;
	color: var(--blue);
	border-color: rgba(23, 97, 160, .35);
}
.btn--tool-ghost:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- Price mode switch (particulier / zakelijk) ----------
   Installers reckon in prices excluding btw and consumers in prices
   including it. Showing one number to both is how a shop looks expensive to
   half its visitors. The choice is remembered per browser. */

.pricemode {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .12);
}

.pricemode__btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 3px 10px;
	border-radius: var(--r-pill);
	background: transparent;
	color: rgba(255, 255, 255, .8);
	font: inherit;
	font-size: var(--fs-xs);
	line-height: 1.6;
	white-space: nowrap;
}
.pricemode__btn[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; }
.pricemode__btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* The second price, shown small under the first. */
.price__alt {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--muted);
}

/* ---------- Article number on the card ---------- */

.card__sku {
	font-size: var(--fs-xs);
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	margin: 0 0 2px;
}

/* ---------- Brand rail in the mega menu ---------- */

.mega__brands h4 { margin-bottom: var(--s1); }

.mega__brandlist {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mega__brandlist a {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	color: var(--text);
	background: #fff;
	white-space: nowrap;
}
.mega__brandlist a:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

/* ---------- Brand chips on a category page ---------- */

.brandbar {
	display: flex;
	gap: var(--s1);
	overflow-x: auto;
	padding-bottom: var(--s1);
	margin-bottom: var(--s2);
	scrollbar-width: thin;
}

.brandbar::-webkit-scrollbar { height: 6px; }
.brandbar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.brandbar a {
	flex: 0 0 auto;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: #fff;
	font-size: var(--fs-sm);
	color: var(--text);
	white-space: nowrap;
}
.brandbar a:hover { border-color: var(--blue); color: var(--blue); }
.brandbar a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Keuzehulp band on the home page ---------- */

.helpband {
	display: grid;
	gap: var(--s3);
	padding: var(--s4);
	border-radius: var(--r-lg);
	background: linear-gradient(135deg, var(--navy-900), #17365C);
	color: #fff;
}

@media (min-width: 900px) {
	.helpband { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
}

.helpband h2 { color: #fff; margin-bottom: var(--s1); }
.helpband p { color: rgba(255, 255, 255, .82); margin-bottom: var(--s2); }
.helpband .eyebrow { color: var(--orange); }

.helpband__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: var(--s1);
}

.helpband__item {
	display: flex;
	align-items: center;
	gap: var(--s1);
	padding: var(--s2);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	font-size: var(--fs-sm);
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.25;
}
.helpband__item:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.helpband__item svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--orange); }

/* ---------- Tool cards on the keuzehulp page ---------- */

.tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
	gap: var(--s2);
	list-style: none;
	padding: 0;
	margin: 0;
}

.tool-card {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	height: 100%;
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	color: var(--text);
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.tool-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text); }

.tool-card__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-md);
	background: var(--blue-soft);
	color: var(--blue);
}
.tool-card__icon svg { width: 28px; height: 28px; }

.tool-card h3 { font-size: var(--fs-md); margin: 0; }
.tool-card p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.tool-card__foot {
	display: flex;
	align-items: center;
	gap: var(--s1);
	margin-top: auto;
	padding-top: var(--s1);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--blue);
}
.tool-card__foot svg { width: 16px; height: 16px; }

.statuslabel {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .01em;
}
.statuslabel--live  { background: #E6F4EC; color: var(--ok); }
.statuslabel--soon  { background: var(--soft); color: var(--muted); }

/* ---------- Roadmap ----------

   Wat er nog niet is. Bewust géén .tool-card: die is een link met een
   hoverstand en een pijl, en dat is precies de belofte die hier niet gedaan
   moet worden. Deze items zijn tekst - geen aanwijzer, geen hover, geen
   randje dat oplicht. Ze horen onderaan te staan, na alles wat wel werkt.
   ---------------------------------------------------------------------- */

.roadmap {
	display: grid;
	gap: var(--s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.roadmap__item {
	padding: var(--s2) 0 var(--s2) var(--s2);
	border-left: 3px solid var(--line);
}

/* Het label staat altijd onder de kop, ook als het ernaast zou passen.
   Anders staat het bij de korte titel ernaast en bij de lange eronder, en
   dat leest als een foutje in plaats van als een keuze. */
.roadmap__kop {
	display: block;
	margin-bottom: 6px;
}

.roadmap__kop .statuslabel { margin-top: 6px; }

.roadmap__item h3 {
	margin: 0;
	font-size: var(--fs-md);
	color: var(--muted);
}

.roadmap__item p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--muted);
	max-width: 62ch;
}

.roadmap__voet {
	margin: var(--s3) 0 0;
	font-size: var(--fs-sm);
	color: var(--muted);
}

@media (min-width: 900px) {
	.roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); }
}

/* ---------- Wizard ---------- */

.wizard { display: grid; gap: var(--s3); }

@media (min-width: 900px) {
	.wizard { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

.steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--s3);
}

.steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	border-radius: var(--r-pill);
	background: var(--soft);
	color: var(--muted);
	font-size: var(--fs-sm);
}
.steps li[aria-current="step"] { background: var(--ink); color: #fff; }
.steps li[data-done="true"] { background: var(--blue-soft); color: var(--blue); }

.steps__n {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	font-size: var(--fs-xs);
	font-weight: 700;
}
.steps li:not([aria-current="step"]) .steps__n { background: #fff; color: inherit; }

.choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
	gap: var(--s1);
	list-style: none;
	padding: 0;
	margin: 0;
}
/* De knop zelf past; het tekstvakje erin niet. Als flexkind staat dat op
   min-width: auto en dan krimpt het niet onder zijn eigen woordbreedte, dus
   duwde Wandcontactdozen 0,78 pixel buiten het scherm op 375. */
.choice > * { min-width: 0; }

.choice {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	font: inherit;
	font-size: var(--fs-sm);
	text-align: left;
	color: var(--text);
	cursor: pointer;
	transition: border-color var(--t), background var(--t);
}
.choice:hover { border-color: var(--blue); background: var(--blue-soft); }
.choice[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.choice svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--blue); }

.wizard__aside {
	position: sticky;
	top: calc(var(--s3) + 60px);
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--soft);
}

.wizard__aside h3 { font-size: var(--fs-md); margin-bottom: var(--s1); }

.wizard__row {
	display: flex;
	justify-content: space-between;
	gap: var(--s1);
	padding: 8px 0;
	border-bottom: 1px dashed var(--line);
	font-size: var(--fs-sm);
}
.wizard__row:last-of-type { border-bottom: 0; }
.wizard__row b { text-align: right; }

.advice {
	margin-top: var(--s2);
	padding: var(--s2);
	border-radius: var(--r-md);
	background: #fff;
	border: 1px solid var(--line);
}
.advice__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.advice__value { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); color: var(--ink); }
.advice__note { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

/* ---------- Knowledge base block ---------- */

.kb {
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--soft);
}
.kb h3 { font-size: var(--fs-md); margin-bottom: var(--s1); }
.kb ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.kb a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.kb a svg { width: 15px; height: 15px; color: var(--blue); }

/* ---------- Notice for mockup areas ---------- */

.mock {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px var(--s2);
	border-radius: var(--r-md);
	background: #FFF6E8;
	border: 1px solid #F3D6A6;
	font-size: var(--fs-sm);
	color: #6B4E1F;
}
.mock svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }

/* ---------- De prijsschakelaar op een telefoon ----------
   Hij stond in de topbalk: een strook van veertig pixels waar de ticker al
   doorheen loopt, met twee knopjes van drie pixels opvulling ernaast. Dat is
   geen keuze maar een obstakel. Nu staat hij onderin het menu, waar hij
   ruimte heeft en waar iemand hem zoekt. De topbalk houdt op smal alleen de
   ticker. */

@media (max-width: 1023px) {
	.topbar__aside { display: none; }
}

/* Onderin het uitklapmenu, vastgezet zodat hij ook bij een lange
   categorielijst bereikbaar blijft. */
/* Label boven, schakelaar eronder over de volle breedte. Naast elkaar brak
   'Prijzen tonen' over twee regels in een lade van driehonderd pixels. */
.mobnav__prijs {
	margin-top: auto;
	display: grid;
	gap: 8px;
	padding: var(--s2);
	background: var(--soft);
	border-top: 1px solid var(--line);
}

.mobnav__prijs-kop {
	font-family: var(--font-head);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink);
}

/* In het menu staat hij op een lichte ondergrond in plaats van op navy. */
.pricemode--groot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: rgba(19, 34, 59, .08);
	padding: 3px;
}
.pricemode--groot .pricemode__btn {
	padding: 10px 14px;
	font-size: var(--fs-sm);
	color: var(--muted);
}
.pricemode--groot .pricemode__btn[aria-pressed="true"] {
	background: var(--white);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
}

/* Room for the switch next to the rotating usp. */
@media (max-width: 420px) {
	.pricemode__btn { padding: 3px 7px; font-size: 11px; }
}

/* De opmaak van de doelgroepvraag stond hier. Het venster is op
   8 september weggehaald; zie de opmerking in tools.js. */

/* ---------- Groepenkast configurator ---------- */

.config { display: grid; gap: var(--s3); }

@media (min-width: 960px) {
	.config { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

.config__blok { margin-bottom: var(--s3); }
.config__blok h2 { font-size: var(--fs-md); margin-bottom: var(--s1); }
.config__hint { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s1); }

.choices--rij {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	grid-template-columns: none;
}
.choices--rij .choice, .choices--rij button.choice { width: auto; }

.config__uitkomst {
	position: sticky;
	top: var(--s3);
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--soft);
}

.config__kast { margin-bottom: var(--s2); }

.config__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--s1);
	font-size: var(--fs-xs);
	color: var(--muted);
}
.config__legenda i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 4px;
	vertical-align: middle;
}

/* ---------- Group counters ---------- */

.tellers { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

.teller {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	padding: 12px var(--s2);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	font-size: var(--fs-sm);
}

.teller__uitleg { color: var(--muted); font-size: var(--fs-xs); }

.teller__knoppen {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.teller__knoppen button {
	width: 36px;
	height: 36px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--ink);
}
.teller__knoppen button:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

.teller__waarde {
	min-width: 34px;
	text-align: center;
	font-family: var(--font-head);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------- Parts list ---------- */

.stuklijst { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.stuklijst td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.stuklijst__rol {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--blue);
	font-weight: 600;
}
.stuklijst__nr { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.stuklijst__aantal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stuklijst__prijs { text-align: right; white-space: nowrap; font-weight: 600; }

/* -------------------------------------------------------------------------
   Snel bestellen — the result table.
   Was a wall of inline styles; the same rules belong here with the rest.
   ---------------------------------------------------------------------- */
.snel__tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.snel__tabel th,
.snel__tabel td {
	padding: 8px 6px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.snel__tabel th {
	border-bottom: 2px solid var(--line);
	font-family: var(--font-head);
	font-weight: 600;
	white-space: nowrap;
}

.snel__tabel tbody tr:last-child td { border-bottom: 0; }

.snel__num { text-align: right; font-variant-numeric: tabular-nums; }

.snel__naam { color: var(--muted); font-size: var(--fs-xs); }

.snel__mist { color: #B4342A; font-weight: 500; }

/* Not an error: the article exists, there is just less of it than asked. */
.snel__krap {
	color: var(--warn, #B4531A);
	font-size: var(--fs-xs);
	white-space: nowrap;
}

.snel__leeg { color: var(--muted); }

.snel__som { margin-top: var(--s2); font-size: var(--fs-md); }

.snel__knop { margin-top: var(--s2); }

/* ---------- Tikdoelen in de balk bovenaan ----------

   Het ontwerpsysteem eist 48 pixels voor knoppen en links. De prijsschakelaar
   zit in een hulpbalk van 40 en daar past dat niet in zonder dat die balk het
   scherm gaat domineren - op een telefoon is dat een tiende van het beeld voor
   een keuze die je één keer maakt.

   Uitzondering, en die staat ook in het ontwerpsysteem: knoppen in de
   hulpbalk mogen 36 pixels zijn. Dat is ruim boven de WCAG-ondergrens van 24
   en het blijft met een duim te raken. */
.topbar .pricemode__btn {
	min-height: 36px;
	padding-inline: 14px;
	display: inline-flex;
	align-items: center;
}
.topbar { padding-block: 2px; }

/* ---------- Het actiekopje ----------
   Een eigen kleur, want dat is de hele bedoeling. Rood tegen de navy en het
   oranje van de rest: oranje is hier al de kleur van de knoppen, dus daarmee
   zou het kopje juist wegvallen.

   Het staat vooraan in de balk en draagt het aantal artikelen, zodat de
   belofte meteen te controleren is. Verschijnt alleen als er artikelen in de
   categorie staan - zie bouwActieLink() in tools.js. */

.nav__link--actie {
	color: var(--rood, #CF1717);
	font-weight: 700;
}
.nav__link--actie svg { color: var(--rood, #CF1717); }
.nav__item--actie .nav__link:hover,
.nav__item--actie.is-open .nav__link {
	color: #A11010;
	border-bottom-color: var(--rood, #CF1717);
}

/* Het aantal erachter. Klein, gevuld, zodat het als label leest en niet als
   deel van de naam. */
.nav__teller {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-left: 7px;
	padding: 0 6px;
	border-radius: var(--r-pill);
	background: var(--rood, #CF1717);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.mobnav__link--actie {
	color: var(--rood, #CF1717);
	font-weight: 700;
}
.mobnav__link--actie svg:first-child { color: var(--rood, #CF1717); }

/* Met het actiekopje erbij is de balk een item langer. Op 1150 liep hij
   daardoor 35 pixels over en werd Keuzehulp afgesneden. Onder de 1280 wijkt
   dan de laatste gewone categorie; die staat ook in het megamenu onder
   "Meer". */
@media (max-width: 1279px) {
	.nav__list--actie .nav__item--extra { display: none; }
}

/* =========================================================================
   IN HET SYSTEEM GETROKKEN (8 september)
   =========================================================================
   De roadmap en het waarom-blok stonden buiten de systeemlaag in style.css:
   eigen padding, eigen koppen, eigen raster. Op een telefoon waren ze samen
   1722 pixels, ruim een vijfde van de pagina, terwijl ze op de referentie
   niet eens voorkomen. Ze blijven staan - het zijn bewuste beslissingen,
   geen opvulling - maar met de maten van de rest.
   ========================================================================= */

.roadmap { gap: var(--raster); }
.roadmap__item {
	padding: var(--kaart-pad);
	border-radius: var(--kaart-radius);
	border-color: var(--kaart-rand);
}
.roadmap__item h3 { font-size: var(--kaart-naam); line-height: 1.3; }
.roadmap__item p { font-size: var(--kaart-meta); line-height: 1.45; }
.roadmap__voet { font-size: var(--kaart-meta); margin-top: var(--kop-gat); }

@media (min-width: 560px) {
	.roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raster); }
}
@media (min-width: 1024px) {
	.roadmap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Eén btw-regel op een kaart ----------

   Er stonden er twee onder elke prijs: de nevenregel van de schakelaar
   ("€ 45,66 incl. btw") en daaronder de eigen bijschrift-regel van de kaart
   ("excl. btw"). Dat is twee keer hetzelfde onderwerp onder één bedrag, en
   het kostte op elke kaart een regel hoogte.

   De nevenregel blijft, want die noemt het andere bedrag mét zijn label en
   maakt daarmee vanzelf duidelijk wat het grote bedrag is. Zo doet de
   referentie het ook: één groot bedrag, daaronder klein het andere met
   erbij welke van de twee dat is. Op besteld verzoek van David, 8 sep. */
.card .card__vat { display: none; }
.card .price__alt { font-size: var(--kaart-nummer); margin-top: 1px; }