/**
 * NauticForSale — huisstijl.
 *
 * Licht en overzichtelijk, naar het model van outletspecialist.com: witte pagina,
 * donkerblauwe navigatie en veel witruimte. De tweede kleur is warm amber — geen
 * lichtblauw, dat verdween tegen het marineblauw en maakte alles even koud.
 * Geladen na de kleurenset van Electro, zodat deze waarden winnen.
 */

:root {
	/* Het marineblauw ging op 4 september 2026 een tint dieper (verzoek G Post:
	   "maak de kleur blauw eens wat donkerder"). Van #0f3557 naar #09243c: donkerder,
	   maar nadrukkelijk nog blauw en geen zwart — de kleur moet bij water blijven
	   horen en niet bij een rouwkaart. Wit blijft er ruim leesbaar op.

	   --nfs-navy-top is de bovenkant van het verloop op de brede blauwe vlakken.
	   Ook die ligt onder de oude kleur: bij een eerste poging stond de bovenkant er
	   juist bóven, en dan wordt de balk bovenaan lichter dan hij was terwijl er om
	   donkerder werd gevraagd. Nu is het hele bereik verschoven en is elk punt van
	   de balk donkerder dan voorheen. Het verschil tussen boven en onder is klein
	   met opzet: je moet het voelen, niet zien. */
	--nfs-navy: #09243c;
	--nfs-navy-top: #0e3252;
	--nfs-navy-dark: #0c2c49;
	--nfs-blue: #1d4e89;
	--nfs-blue-dark: #163d6d;
	--nfs-amber: #c2610f;
	--nfs-amber-dark: #a14f09;
	--nfs-amber-light: #e1841e;
	--nfs-band: #f4f7fa;
	--nfs-line: #e2e8f0;
	--nfs-text: #1e2a35;
	--nfs-muted: #61748a;
	--nfs-green: #157a3d;
	--nfs-red: #c62828;
	/* Geel voor "op aanvraag": de bol vol geel, de tekst een tint donkerder zodat
	   hij op wit leesbaar blijft. */
	--nfs-yellow: #f0b400;
	--nfs-yellow-ink: #96700a;
}

/* ---------------------------------------------------------------- basis */

body,
.site {
	background-color: #fff;
	color: var(--nfs-text);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.widget-title {
	color: var(--nfs-navy);
	letter-spacing: -0.01em;
}

a {
	color: var(--nfs-blue);
}

a:hover,
a:focus {
	color: var(--nfs-blue-dark);
}

/* De inhoud stond op een groot scherm als een smalle strook in het midden, met
   brede witte randen ernaast. Wat ruimer mag: 1500 pixels op een gewone breedbeeld,
   en op een echt groot scherm nog wat meer. Verder oprekken heeft geen zin — dan
   worden regels tekst te lang om prettig te lezen en staan de productkaarten wel
   heel ver uit elkaar. */
.container,
.container-fluid {
	max-width: 1500px;
}

@media (min-width: 1800px) {
	.container,
	.container-fluid {
		max-width: 1620px;
	}
}

/* -------------------------------------------------------------- header */

.top-bar,
.top-bar-v1,
.top-bar-nav {
	background-color: var(--nfs-navy-dark);
	border-bottom: 0;
	font-size: 13px;
}

.top-bar a,
.top-bar .nav-link,
.top-bar-nav a {
	color: rgba(255, 255, 255, 0.82);
}

.top-bar a:hover {
	color: #fff;
}

.header-logo-area,
.masthead,
.site-header {
	background-color: #fff;
	border-bottom: 1px solid var(--nfs-line);
}

/* Het logo mocht groter (verzoek G Post, 28 augustus 2026). Het zat vast op twee
   dingen tegelijk: een maximale hoogte van 54 pixels en de breedte van zijn kolom,
   die het thema als vaste kolom neerzet. Beide zijn losgemaakt: de kolom krimpt en
   groeit nu met het logo mee.

   De maat is een middenweg (bijgesteld 28 augustus 2026): 74 pixels hoog bleek te
   veel en ging ten koste van het zoekveld ernaast, 37 was te klein. Op 58 is het
   logo anderhalf keer zo groot als het was en houdt het zoekveld ruim vierhonderd
   pixels — genoeg voor de hele tekst "Zoeken op type, merk of artikelnummer". Op
   smallere schermen zakt hij mee, want daar telt elke pixel voor dat veld.

   31 augustus 2026: er mocht een klein beetje af. Van 58 naar 52, en de twee maten
   daaronder gaan evenredig mee. Het logo blijft daarmee ruim groter dan het was
   voordat er om een groter logo werd gevraagd, en het zoekveld wint er een paar
   tientallen pixels mee. */
.custom-logo,
.header-logo img {
	max-height: 52px;
	max-width: 100%;
	width: auto;
}

.masthead .header-logo-area,
.masthead .header-logo {
	flex: 0 0 auto;
	max-width: none;
	width: auto;
}

/* Onder de 1600 pixels moet het zoekveld het van het logo winnen: dat veld is waar
   de meeste bezoekers hun type of artikelnummer intypen. */
@media (max-width: 1599.98px) {
	.custom-logo,
	.header-logo img {
		max-height: 47px;
	}
}

@media (max-width: 1399.98px) {
	.custom-logo,
	.header-logo img {
		max-height: 42px;
	}
}

.search-field,
.form-control {
	background-color: #fff;
	border-color: #cbd5e1;
	border-radius: 4px;
	color: var(--nfs-text);
}

.search-field::placeholder {
	color: #94a3b8;
}

/* De zoekknop en de categorieënknop krijgen hun kleur uit de kleurenset van het
   thema (cyaan); die moeten mee in het blauw van de huisstijl. */
.search-form .btn,
.electro-search-form .btn,
.btn-secondary,
.navbar-search .btn {
	background-color: var(--nfs-blue);
	border-color: var(--nfs-blue);
	color: #fff;
}

/* De categorieënknop had een eigen blauw en sprong uit de balk; hij krijgt nu
   dezelfde kleur, met alleen een scheidingslijn en een amber icoon als accent. */
.departments-menu-v2-title,
.departments-menu .departments-menu-title,
.vertical-menu > li.list-group-item:first-child,
.electro-navigation .vertical-menu > li.list-group-item > span {
	background-color: transparent;
	border-right: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
}

.departments-menu-v2-title i,
.electro-navigation .vertical-menu > li.list-group-item > span i,
.vertical-menu > li.list-group-item > a i {
	color: var(--nfs-amber-light);
}

.search-form .btn:hover,
.btn-secondary:hover {
	background-color: var(--nfs-blue-dark);
	border-color: var(--nfs-blue-dark);
	color: #fff;
}

.departments-menu-v2-title:hover {
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--nfs-amber-light);
}

/* De kleurenset van het thema is hier specifieker (.header-v1 .navbar-search
   .input-group .btn), dus die selector moeten we overnemen om te winnen.
   De zoekknop en het aantal in de winkelwagen zijn acties: die krijgen amber. */
.header-v1 .navbar-search .input-group .btn,
.header-v3 .navbar-search .input-group .btn,
.header-v6 .navbar-search .input-group .btn,
.header-v8 .navbar-search .input-group .btn,
.header-v9 .navbar-search .input-group .btn,
.header-v10 .navbar-search .input-group .btn,
.navbar-mini-cart .cart-items-count,
.header-icon .header-icon-counter,
.navbar-compare .count,
.navbar-wishlist .count {
	background-color: var(--nfs-amber);
	border-color: var(--nfs-amber);
	color: #fff;
}

.header-v1 .navbar-search .input-group .btn:hover {
	background-color: var(--nfs-amber-dark);
	border-color: var(--nfs-amber-dark);
}

/* Mobiele kop: zelfde marineblauw als de navigatie op groot scherm, met het
   logo wit uitgevuld zodat het leesbaar blijft. */
.handheld-header-v2,
.mobile-header-v2,
.handheld-stick-this {
	background-color: var(--nfs-navy);
}

.handheld-header-v2 .header-logo {
	padding: 6px 0;
}

.nfs-handheld-logo {
	max-height: 34px;
	width: auto;
}

.handheld-header-v2 .navbar-toggler,
.handheld-header-v2 .handheld-header-links > ul li > a,
.handheld-header-v2 .off-canvas-navigation-wrapper button {
	color: #fff;
}

/* Navigatiebalk: één doorlopende donkerblauwe balk met witte items. */
.electro-navigation,
.navbar-primary,
.navbar-primary-inner,
.departments-menu-v2,
.electro-navbar {
	background-color: var(--nfs-navy);
	border-radius: 4px;
}

/* Zie verderop, bij "navigatiebalk", voor de rest van deze balk: het verloop, de
   peilstreep onder de menu-items en het doorlopen tot de rand van het scherm. */

/* Geen overflow:hidden hier: dat knipte de uitklaplijst met categorieën weg, want
   die hangt onder de balk. De hoeken blijven rond doordat het blok links links zijn
   eigen ronding meekrijgt. */
.departments-menu-v2 {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}

.electro-navigation .secondary-nav > li > a,
.navbar-primary .nav-link,
.navbar-primary a,
.departments-menu-v2-title {
	color: rgba(255, 255, 255, 0.94);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.electro-navigation .secondary-nav > li > a:hover,
.navbar-primary .nav-link:hover,
.navbar-primary a:hover,
.secondary-nav > li.highlight > a {
	color: var(--nfs-amber-light);
}

.electro-navigation .dropdown-menu {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
}

.electro-navigation .dropdown-menu a {
	color: var(--nfs-text);
}

/* ------------------------------------------------------------- knoppen */

.nfs-btn {
	border: 1px solid transparent;
	border-radius: 4px;
	display: inline-block;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 13px 28px;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nfs-btn--primary {
	background-color: var(--nfs-amber);
	border-color: var(--nfs-amber);
	color: #fff;
}

.nfs-btn--primary:hover {
	background-color: var(--nfs-amber-dark);
	border-color: var(--nfs-amber-dark);
	color: #fff;
}

.nfs-btn--ghost {
	border-color: #cbd5e1;
	color: var(--nfs-navy);
}

.nfs-btn--ghost:hover {
	border-color: var(--nfs-blue);
	color: var(--nfs-blue);
}

.btn-primary,
.button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button {
	background-color: var(--nfs-amber);
	border-color: var(--nfs-amber);
	border-radius: 4px;
	color: #fff;
	font-weight: 600;
	text-transform: none;
}

.btn-primary:hover,
.button:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.single_add_to_cart_button:hover {
	background-color: var(--nfs-amber-dark);
	border-color: var(--nfs-amber-dark);
	color: #fff;
}

/* ------------------------------------------------------------- opmaak */

/* De homepage heeft geen zijbalk; Electro geeft .content-area standaard de
   breedte van een kolom naast een sidebar. */
.site-content-inner .nfs-home {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}

/* Hero, USP-balk en de banden lopen door tot de rand van het scherm, terwijl hun
   inhoud netjes in de container blijft staan. */
.nfs-hero,
.nfs-usp,
.nfs-why {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* ------------------------------------------------------------ USP-balk */

/* Opvallende balk in het marineblauw van de huisstijl, met witte tekst en
   iconen — geen lichtblauw meer, dat komt nergens meer terug. */
.nfs-usp {
	background-color: var(--nfs-navy);
	color: #fff;
}

.nfs-usp__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 46px;
	justify-content: center;
	padding: 15px;
}

.nfs-usp__item {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.01em;
}

.nfs-usp__item .nfs-icon {
	color: var(--nfs-amber-light);
	height: 19px;
	width: 19px;
}

/* --------------------------------------------- bod, zoekopdracht, contact */

.nfs-bid,
.nfs-sourcing,
.nfs-contact {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	margin-bottom: 52px;
}

.nfs-bid__inner,
.nfs-sourcing__inner,
.nfs-contact__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	padding: 30px 34px;
}

.nfs-bid__title {
	font-size: 22px;
	margin-bottom: 8px;
}

.nfs-bid__text,
.nfs-sourcing__text,
.nfs-contact__text {
	color: var(--nfs-muted);
	font-size: 14.5px;
	margin: 8px 0 0;
	max-width: 52em;
}

.nfs-contact__details {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
}

.nfs-contact__details a {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 4px;
	color: var(--nfs-navy);
	font-weight: 600;
	padding: 10px 20px;
}

.nfs-contact__details a:hover {
	border-color: var(--nfs-blue);
	color: var(--nfs-blue);
}

/* ---------------------------------------------------------------- hero */

.nfs-hero {
	background-color: var(--nfs-navy);
	background-image:
		radial-gradient(1100px 420px at 15% -20%, rgba(46, 122, 184, 0.55), transparent 62%),
		linear-gradient(135deg, #123f66 0%, #1c5d93 100%);
	color: #fff;
	margin-bottom: 52px;
	overflow: hidden;
	position: relative;
}

/* De beelden liggen als lagen achter de tekst; alleen de actieve is zichtbaar en
   zoomt langzaam in (Ken Burns). De overgang is kort, zodat het vlot aanvoelt. */
.nfs-hero__slides {
	inset: 0;
	position: absolute;
	z-index: 0;
}

/* Donker verloop over de foto's heen; zonder dit valt witte tekst weg zodra een
   beeld licht is. Ligt boven de beelden (z-index 1) en onder de tekst (2). */
.nfs-hero--photo:after {
	/* Lichter dan het was: de foto is het onderwerp, het verloop dient alleen om de
	   witte kop leesbaar te houden. Links waar de tekst staat blijft het stevigst,
	   rechts is het bijna weg (verzoek G Post, 28 augustus 2026). */
	background:
		linear-gradient(100deg, rgba(6, 22, 39, 0.42) 0%, rgba(6, 22, 39, 0.22) 45%, rgba(6, 22, 39, 0.02) 100%),
		linear-gradient(to top, rgba(6, 22, 39, 0.22) 0%, transparent 42%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.nfs-hero__slide {
	animation-duration: var(--nfs-cycle);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	background-position: center 55%;
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	opacity: 0;
	position: absolute;
	will-change: transform, opacity;
}

/* De reeks draait volledig op CSS: elk beeld vervaagt in en uit binnen dezelfde
   cyclus, met een eigen vertraging. Geen javascript nodig, dus hij loopt altijd. */
.nfs-hero__slides--2 { --nfs-cycle: 12s; }
.nfs-hero__slides--3 { --nfs-cycle: 18s; }
.nfs-hero__slides--4 { --nfs-cycle: 24s; }
.nfs-hero__slides--5 { --nfs-cycle: 30s; }
.nfs-hero__slides--6 { --nfs-cycle: 36s; }

.nfs-hero__slides--2 .nfs-hero__slide { animation-name: nfs-slide-2; }
.nfs-hero__slides--3 .nfs-hero__slide { animation-name: nfs-slide-3; }
.nfs-hero__slides--4 .nfs-hero__slide { animation-name: nfs-slide-4; }
.nfs-hero__slides--5 .nfs-hero__slide { animation-name: nfs-slide-5; }
.nfs-hero__slides--6 .nfs-hero__slide { animation-name: nfs-slide-6; }

.nfs-hero__slide:nth-child(1) { animation-delay: 0s; }
.nfs-hero__slides--2 .nfs-hero__slide:nth-child(2) { animation-delay: 6s; }
.nfs-hero__slides--3 .nfs-hero__slide:nth-child(2) { animation-delay: 6s; }
.nfs-hero__slides--3 .nfs-hero__slide:nth-child(3) { animation-delay: 12s; }
.nfs-hero__slides--4 .nfs-hero__slide:nth-child(2) { animation-delay: 6s; }
.nfs-hero__slides--4 .nfs-hero__slide:nth-child(3) { animation-delay: 12s; }
.nfs-hero__slides--4 .nfs-hero__slide:nth-child(4) { animation-delay: 18s; }
.nfs-hero__slides--5 .nfs-hero__slide:nth-child(2) { animation-delay: 6s; }
.nfs-hero__slides--5 .nfs-hero__slide:nth-child(3) { animation-delay: 12s; }
.nfs-hero__slides--5 .nfs-hero__slide:nth-child(4) { animation-delay: 18s; }
.nfs-hero__slides--5 .nfs-hero__slide:nth-child(5) { animation-delay: 24s; }
.nfs-hero__slides--6 .nfs-hero__slide:nth-child(2) { animation-delay: 6s; }
.nfs-hero__slides--6 .nfs-hero__slide:nth-child(3) { animation-delay: 12s; }
.nfs-hero__slides--6 .nfs-hero__slide:nth-child(4) { animation-delay: 18s; }
.nfs-hero__slides--6 .nfs-hero__slide:nth-child(5) { animation-delay: 24s; }
.nfs-hero__slides--6 .nfs-hero__slide:nth-child(6) { animation-delay: 30s; }

/* Elk beeld blijft zes seconden staan en vervaagt daarna dóór het tijdvak van de
   volgende heen; zonder die overlap zag je even een leeg vlak tussen twee beelden.
   De inzoom blijft klein: elke procent vergroting is een procent minder scherpte,
   want de foto wordt dan verder opgerekt dan het scherm breed is. */
@keyframes nfs-slide-2 {
	0%   { opacity: 0; transform: scale(1); }
	8%   { opacity: 1; }
	50%  { opacity: 1; transform: scale(1.025); }
	58%  { opacity: 0; transform: scale(1.03); }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes nfs-slide-3 {
	0%   { opacity: 0; transform: scale(1); }
	4%   { opacity: 1; }
	33%  { opacity: 1; transform: scale(1.025); }
	40%  { opacity: 0; transform: scale(1.03); }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes nfs-slide-4 {
	0%   { opacity: 0; transform: scale(1); }
	3%   { opacity: 1; }
	25%  { opacity: 1; transform: scale(1.025); }
	30%  { opacity: 0; transform: scale(1.03); }
	100% { opacity: 0; transform: scale(1); }
}

/* Bij vijf en zes beelden blijft elk beeld even lang staan als hiervoor; alleen de
   cyclus wordt langer, dus staan dezelfde zes seconden op een kleiner percentage. */
@keyframes nfs-slide-5 {
	0%    { opacity: 0; transform: scale(1); }
	2.4%  { opacity: 1; }
	20%   { opacity: 1; transform: scale(1.025); }
	24%   { opacity: 0; transform: scale(1.03); }
	100%  { opacity: 0; transform: scale(1); }
}

@keyframes nfs-slide-6 {
	0%    { opacity: 0; transform: scale(1); }
	2%    { opacity: 1; }
	16.7% { opacity: 1; transform: scale(1.025); }
	20%   { opacity: 0; transform: scale(1.03); }
	100%  { opacity: 0; transform: scale(1); }
}

/* Eén foto is geen reeks: zonder animatie zou hij op opacity 0 blijven staan. */
.nfs-hero__slide:only-child {
	animation: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.nfs-hero__slide {
		animation: none;
	}

	.nfs-hero__slide:first-child {
		opacity: 1;
	}
}

/* Bolletjes onderin lopen mee met dezelfde cyclus. */
.nfs-hero__dots {
	bottom: 24px;
	display: flex;
	gap: 9px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	z-index: 3;
}

.nfs-hero__dots--2 { --nfs-cycle: 12s; }
.nfs-hero__dots--3 { --nfs-cycle: 18s; }
.nfs-hero__dots--4 { --nfs-cycle: 24s; }
.nfs-hero__dots--5 { --nfs-cycle: 30s; }
.nfs-hero__dots--6 { --nfs-cycle: 36s; }

.nfs-hero__dot {
	animation-duration: var(--nfs-cycle);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	background-color: rgba(255, 255, 255, 0.38);
	border-radius: 5px;
	display: block;
	height: 9px;
	width: 9px;
}

.nfs-hero__dots--2 .nfs-hero__dot { animation-name: nfs-dot-2; }
.nfs-hero__dots--3 .nfs-hero__dot { animation-name: nfs-dot-3; }
.nfs-hero__dots--4 .nfs-hero__dot { animation-name: nfs-dot-4; }
.nfs-hero__dots--5 .nfs-hero__dot { animation-name: nfs-dot-5; }
.nfs-hero__dots--6 .nfs-hero__dot { animation-name: nfs-dot-6; }

.nfs-hero__dot:nth-child(2) { animation-delay: 6s; }
.nfs-hero__dot:nth-child(3) { animation-delay: 12s; }
.nfs-hero__dot:nth-child(4) { animation-delay: 18s; }
.nfs-hero__dot:nth-child(5) { animation-delay: 24s; }
.nfs-hero__dot:nth-child(6) { animation-delay: 30s; }

@keyframes nfs-dot-2 {
	0%, 48%   { background-color: var(--nfs-amber-light); width: 26px; }
	50%, 100% { background-color: rgba(255, 255, 255, 0.38); width: 9px; }
}

@keyframes nfs-dot-3 {
	0%, 33%   { background-color: var(--nfs-amber-light); width: 26px; }
	36%, 100% { background-color: rgba(255, 255, 255, 0.38); width: 9px; }
}

@keyframes nfs-dot-4 {
	0%, 23%   { background-color: var(--nfs-amber-light); width: 26px; }
	25%, 100% { background-color: rgba(255, 255, 255, 0.38); width: 9px; }
}

@keyframes nfs-dot-5 {
	0%, 19%   { background-color: var(--nfs-amber-light); width: 26px; }
	20%, 100% { background-color: rgba(255, 255, 255, 0.38); width: 9px; }
}

@keyframes nfs-dot-6 {
	0%, 15.5% { background-color: var(--nfs-amber-light); width: 26px; }
	16.7%, 100% { background-color: rgba(255, 255, 255, 0.38); width: 9px; }
}

.nfs-hero__inner {
	padding: 120px 15px 116px;
	position: relative;
	z-index: 2;
}

.nfs-hero__title {
	color: #fff;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.14;
	margin-bottom: 16px;
	/* Nu het verloop over de foto lichter is, moet de kop het van zijn eigen schaduw
	   hebben: een korte donkere rand tegen een lichte lucht, en een ruime zachte die
	   de letters van het beeld tilt. */
	text-shadow: 0 1px 3px rgba(4, 18, 32, 0.55), 0 2px 22px rgba(4, 18, 32, 0.5);
}

.nfs-hero__lead {
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 32px;
	max-width: 34em;
}

.nfs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 0;
}

.nfs-hero .nfs-btn--ghost {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.nfs-hero .nfs-btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}

/* -------------------------------------------------------------- secties */

.nfs-section {
	/* 56 was ruim getekend; met de schuifrijen erbij oogde de pagina leeg tussen de
	   blokken (verzoek G Post, 27 augustus 2026). */
	margin-bottom: 40px;
}

.nfs-section--tight {
	margin-bottom: 30px;
}

.nfs-section__head {
	align-items: baseline;
	border-bottom: 2px solid var(--nfs-navy);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	justify-content: space-between;
	margin-bottom: 26px;
	padding-bottom: 12px;
}

.nfs-section__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.nfs-section__more {
	font-size: 13.5px;
	white-space: nowrap;
}

.nfs-note {
	color: var(--nfs-muted);
	font-size: 13.5px;
	margin-top: 14px;
}

/* ---------------------------------------------------------- categorieën */

.nfs-cats {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}

/* Categorietegel: een foto van het toestel met de blauwe waas van de huisstijl
   eroverheen, en daarop de naam. Iedere foto krijgt hetzelfde vlak en dezelfde
   waas, zodat een rij tegels één geheel blijft ook al komen de foto's uit
   verschillende hoeken. */
.nfs-cat {
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	/* Zonder foto blijft er een rustig blauw vlak over met hetzelfde verloop, zodat
	   een categorie zonder beeld niet uit de rij valt. */
	background-color: var(--nfs-navy);
	background-image: linear-gradient(150deg, var(--nfs-blue) 0%, var(--nfs-navy) 62%);
	border-radius: 10px;
	display: flex;
	overflow: hidden;
	position: relative;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.nfs-cat__photo {
	background-position: center;
	background-size: cover;
	inset: 0;
	position: absolute;
	transform: scale(1.02);
	transition: transform 0.5s ease;
}

/* De waas: onderin bijna dicht zodat de naam altijd leesbaar is, naar boven toe
   open zodat je ziet waar de categorie over gaat. */
.nfs-cat:before {
	/* De waas lag als een blauw laken over de hele foto; je zag nauwelijks meer waar
	   de categorie over ging. Nu is hij onderaan stevig — daar staat de naam en die
	   moet leesbaar blijven — en bovenaan bijna niets, zodat het toestel op de foto
	   weer te zien is (verzoek G Post, 28 augustus 2026). */
	background-image: linear-gradient(
		to top,
		rgba(15, 53, 87, 0.5) 0%,
		rgba(15, 53, 87, 0.34) 30%,
		rgba(15, 53, 87, 0.14) 60%,
		rgba(15, 53, 87, 0.04) 100%
	);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

/* Een streep in de accentkleur die bij het aanwijzen over de onderrand loopt. */
.nfs-cat:after {
	background-color: var(--nfs-amber);
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
	width: 100%;
	z-index: 3;
}

.nfs-cat:hover,
.nfs-cat:focus {
	box-shadow: 0 12px 26px rgba(15, 53, 87, 0.22);
	transform: translateY(-2px);
}

.nfs-cat:hover .nfs-cat__photo {
	transform: scale(1.08);
}

.nfs-cat:hover:after,
.nfs-cat:focus:after {
	transform: scaleX(1);
}

/* De letters krijgen hun eigen ondergrond in plaats van dat de hele foto donker
   wordt gemaakt (voorstel G Post, 28 augustus 2026). Een zacht verloop dat alleen
   onder de tekst zit: bij een lichte foto — de radomes tegen de lucht — blijft de
   naam daardoor staan, en de rest van het beeld blijft helder. */
.nfs-cat__body {
	background-image: linear-gradient(to top, rgba(7, 26, 45, 0.78) 0%, rgba(7, 26, 45, 0.5) 55%, rgba(7, 26, 45, 0) 100%);
	padding: 30px 16px 15px;
	position: relative;
	width: 100%;
	z-index: 2;
}

.nfs-cat__name {
	color: #fff;
	display: block;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	/* Twee schaduwen: een korte harde voor het contrast tegen een lichte foto, en een
	   ruime zachte die de letters van de achtergrond tilt. Daardoor kan de waas
	   eronder lichter blijven. */
	text-shadow: 0 1px 2px rgba(4, 16, 28, 0.65), 0 2px 12px rgba(4, 16, 28, 0.45);
}

.nfs-cat__count {
	color: rgba(255, 255, 255, 0.88);
	display: block;
	font-size: 12.5px;
	margin-top: 3px;
	text-shadow: 0 1px 3px rgba(4, 16, 28, 0.6);
}

/* Op een telefoon stonden de twaalf categorieën als twee kolommen onder elkaar: zes
   rijen, ruim achthonderd pixels, ruim twee schermen voordat je het eerste artikel
   zag. Nu staan ze in twee regels waar je zijwaarts doorheen veegt, net als de
   productrijen eronder. Er staan er vier in beeld en het vijfde steekt er net uit,
   zodat zichtbaar is dat er meer achter zit; het hele blok is nog geen kwart van wat
   het was. Wie ze allemaal naast elkaar wil zien, tikt op "Alle categorieën".

   De grens ligt op 767 pixels, dezelfde grens als bij de productrijen eronder: alles
   wat je in de hand houdt veegt, alles wat op tafel ligt krijgt het raster. */
@media (max-width: 767px) {
	.nfs-cats {
		-webkit-overflow-scrolling: touch;
		gap: 8px;
		/* Twee regels, en daarna vult hij naar rechts door in plaats van naar beneden.
		   De maat: twee volle tegels naast elkaar, plus een randje van 24 pixels waarin
		   de derde net zichtbaar is. Zo zijn de tegels zo groot mogelijk en is toch te
		   zien dat er meer achter zit. Boven de 210 pixels groeien ze niet mee: op een
		   grote telefoon of een smal venster zou het blok anders weer even veel ruimte
		   opeisen als het raster dat we net hebben weggehaald. */
		grid-auto-columns: min(calc((100% - 32px) / 2), 210px);
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-template-rows: repeat(2, auto);
		margin-left: -16px;
		margin-right: -16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding: 2px 16px 8px;
		scroll-padding-left: 16px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.nfs-cats::-webkit-scrollbar {
		display: none;
	}

	.nfs-cat {
		/* Breder dan hoog: de naam heeft de ruimte nodig, de foto is op dit formaat
		   toch meer sfeer dan informatie. */
		aspect-ratio: 16 / 10;
		border-radius: 8px;
		scroll-snap-align: start;
	}

	.nfs-cat__body {
		padding: 22px 10px 7px;
	}

	.nfs-cat__name {
		font-size: 13.5px;
		line-height: 1.15;
	}

	.nfs-cat__count {
		font-size: 10.5px;
		margin-top: 1px;
	}

	/* De waas mag hier steviger: op een klein vlak moet de naam het van de foto
	   winnen, anders is het rommelig. */
	.nfs-cat:before {
		background-image: linear-gradient(
			to top,
			rgba(15, 53, 87, 0.5) 0%,
			rgba(15, 53, 87, 0.3) 40%,
			rgba(15, 53, 87, 0.08) 100%
		);
	}
}

/* -------------------------------------------------------------- merken */

.nfs-brands-section {
	margin-bottom: 52px;
}

.nfs-brandbar {
	position: relative;
}

/* Zachte randen links en rechts, zodat de reeks uit beeld lijkt te lopen in
   plaats van hard af te breken. */
.nfs-brandbar:before,
.nfs-brandbar:after {
	bottom: 0;
	content: "";
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 90px;
	z-index: 2;
}

.nfs-brandbar:before {
	background: linear-gradient(to right, #fff 12%, rgba(255, 255, 255, 0));
	left: 0;
}

.nfs-brandbar:after {
	background: linear-gradient(to left, #fff 12%, rgba(255, 255, 255, 0));
	right: 0;
}

/* Het venster is met muis of vinger te verschuiven; de schuifbalk zelf blijft
   verborgen omdat de band toch al beweegt. */
.nfs-brandbar__viewport {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.nfs-brandbar__viewport::-webkit-scrollbar {
	display: none;
}

.nfs-brandbar__viewport:focus-visible {
	outline: 2px solid var(--nfs-amber);
	outline-offset: 3px;
}

.nfs-brandbar__track {
	animation: nfs-brandbar 46s linear infinite;
	display: flex;
	gap: 16px;
	padding: 4px 0;
	width: max-content;
}

/* De band blijft doorlopen, ook onder de muis; alleen de kaart waar je op staat
   licht op. Stilzetten voelde als haperen. */

/* De reeks staat er twee keer in; na de helft is het beeld identiek. */
@keyframes nfs-brandbar {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-50% - 8px), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.nfs-brandbar__track {
		animation: none;
	}
}

.nfs-brandcard {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	display: flex;
	flex: 0 0 auto;
	height: 108px;
	justify-content: center;
	padding: 10px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	width: 232px;
}

.nfs-brandcard:hover {
	background-color: #fff;
	border-color: var(--nfs-amber);
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.16), 0 10px 24px rgba(15, 53, 87, 0.12);
	transform: translateY(-2px);
}

.nfs-brandcard img {
	display: block;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

@media (max-width: 575px) {
	.nfs-brandcard {
		height: 92px;
		padding: 8px 12px;
		width: 192px;
	}

	.nfs-brandbar:before,
	.nfs-brandbar:after {
		width: 40px;
	}
}

/* ------------------------------------------------------ waarom NauticForSale */

/* Eén marineblauwe band met vier korte voordelen; kort en met nadruk, in plaats
   van vier alinea's die niemand leest. */
.nfs-why {
	background-color: var(--nfs-navy);
	background-image: linear-gradient(135deg, #0d2f4e 0%, #17456e 100%);
	color: #fff;
	margin-bottom: 56px;
	padding: 46px 0 42px;
}

.nfs-why__title {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 26px;
	font-weight: 700;
	gap: 12px;
	justify-content: center;
	letter-spacing: -0.01em;
	margin: 0 0 30px;
	text-align: center;
}

/* De naam staat hier als logo; even hoog als de kop zodat de regel klopt. */
.nfs-why__logo {
	height: auto;
	max-height: 34px;
	width: auto;
}

/* Drie kaarten, dus één kolom of drie — nooit twee (verzoek G Post, 31 augustus
   2026: "zorg dat op geen enkele weergave het op deze manier eruit ziet").

   Met repeat(auto-fit, minmax(220px, 1fr)) besliste de browser zelf hoeveel er naast
   elkaar pasten, en op een tablet of een grote telefoon kwam dat uit op twee: twee
   kaarten naast elkaar en de derde er eenzaam onder, met een gat ernaast. Nu ligt
   het vast. */
.nfs-why__grid {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

/* Vanaf 768 en niet pas vanaf 992: op een tablet stonden de drie kaarten als een
   hoge stapel onder elkaar terwijl er ruimte zat voor drie naast elkaar (gemeld
   door G Post, 2 september 2026). Drie vaste kolommen, dus het gevreesde beeld van
   twee kaarten met een eenzame derde eronder kan hier nog steeds niet ontstaan. */
@media (min-width: 768px) {
	.nfs-why__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.nfs-why__item {
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	padding: 24px 22px;
	text-align: center;
}

.nfs-why__mark {
	color: var(--nfs-amber-light);
	display: block;
	margin: 0 auto 12px;
	width: 32px;
}

.nfs-why__mark .nfs-icon {
	height: 32px;
	width: 32px;
}

.nfs-why__head {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 4px;
}

.nfs-why__text {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13.5px;
	margin: 0;
}

/* ------------------------------------------------------------- reviews */

.nfs-reviews__score {
	color: var(--nfs-muted);
	font-size: 13.5px;
	white-space: nowrap;
}

.nfs-reviews__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.nfs-review {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
}

.nfs-review__media img {
	display: block;
	height: 120px;
	object-fit: cover;
	width: 100%;
}

.nfs-review__text {
	color: var(--nfs-text);
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	padding: 18px 20px 12px;
}

.nfs-review__who {
	border-top: 1px solid var(--nfs-line);
	padding: 12px 20px 16px;
}

.nfs-review__stars {
	color: #f0a500;
	display: block;
	font-size: 13px;
	letter-spacing: 2px;
	margin-bottom: 4px;
}

.nfs-review__who strong {
	color: var(--nfs-navy);
	display: block;
	font-size: 14px;
}

.nfs-review__who span:last-child {
	color: var(--nfs-muted);
	font-size: 12.5px;
}

/* ---------------------------------------------------------- kennisbank */

.nfs-kb {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.nfs-kb__item {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	display: block;
	padding: 20px;
}

.nfs-kb__item:hover {
	border-color: var(--nfs-blue);
}

.nfs-kb__date {
	color: var(--nfs-muted);
	display: block;
	font-size: 12px;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.nfs-kb__title {
	color: var(--nfs-navy);
	font-size: 15.5px;
	font-weight: 600;
}

/* --------------------------------------------------------- productkaart */

.product-inner,
.product-outer,
.products .product .product-inner {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.products .product .product-inner:hover {
	border-color: #c7d3e0;
	box-shadow: 0 8px 22px rgba(15, 53, 87, 0.10);
}

.woocommerce-loop-product__title,
.woocommerce-loop-product__title a {
	color: var(--nfs-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

/* Het thema geeft de productnaam een vaste hoogte van precies twee regels van
   zijn eigen regelafstand. Wij zetten die regelafstand ruimer, waardoor de tweede
   regel half werd afgesneden. Nu twee volle regels, en is de naam langer dan dat,
   dan eindigt hij netjes met puntjes in plaats van doormidden. */
.woocommerce-loop-product__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	height: auto;
	max-height: 2.9em;
	min-height: 2.9em;
	overflow: hidden;
}

.loop-product-categories,
.loop-product-categories a {
	color: var(--nfs-muted);
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Actieprijs in rood, oude prijs doorgestreept ernaast — zoals in de outletwereld
   gebruikelijk is en direct leesbaar. */
.electro-price,
.price,
.woocommerce-Price-amount {
	color: var(--nfs-navy);
	font-weight: 700;
}

/* De <ins>-prijs staat er alleen als er is afgeprijsd. Die is groen, net als het
   kortingsvlaggetje en het bespaarde bedrag: rood leest als een waarschuwing, groen
   als voordeel. Een gewone prijs blijft marineblauw. */
.electro-price ins,
.price ins,
.price ins .woocommerce-Price-amount,
.product .price ins .woocommerce-Price-amount,
.woocommerce-Price-amount ins {
	color: var(--nfs-groen-diep, #12703a);
	text-decoration: none;
}

.electro-price del,
.price del,
.price del .woocommerce-Price-amount {
	color: var(--nfs-muted);
	font-size: 0.85em;
	font-weight: 400;
}

/* De kortingsvlag stond linksonder tegen de prijs aan; rechtsboven op de foto
   raakt hij niets. */
.products > .product .product-loop-header,
.products > .product .product-thumbnail {
	position: relative;
}

/* Ruimte vrijhouden voor de foto voordat hij binnen is.
   Foto's worden pas geladen als je er bijna bent. Zolang zo'n foto er niet is, is
   het vakje ernaartoe nul hoog; komt hij binnen, dan groeit de kaart in één klap
   ruim 200 pixels en schuift alles eronder mee. Wie naar beneden scrolt ziet de
   pagina dan onder zijn muis wegspringen. Onze thumbnails zijn vierkant, dus het
   vak kan die verhouding meteen aanhouden — dan staat alles vanaf het begin op de
   plek waar het straks blijft. Op de telefoon stond deze regel al; hij hoort op
   elk scherm te gelden. */
.products > .product .product-thumbnail,
.owl-item > .product .product-thumbnail {
	aspect-ratio: 1 / 1;
}

.products > .product .product-thumbnail > img,
.products > .product .woocommerce-LoopProduct-link > img,
.owl-item > .product .product-thumbnail > img {
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	width: 100%;
}

.products > .product .onsale,
.owl-item > .product .onsale,
.woocommerce ul.products li.product .onsale {
	bottom: auto;
	left: auto;
	margin: 0;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 2;
}

/* Het kortingspercentage in rood: dat leest als afgeprijsd en botst niet met het
   amber van de knoppen of het groen van de voorraad. De selectors van het thema
   staan er allemaal in, anders wint zijn eigen regel. */
.savings,
.product .savings,
.owl-item > .product .onsale,
.products > .product .onsale,
.woocommerce ul.products li.product .onsale,
.onsale,
.woocommerce span.onsale {
	background-color: var(--nfs-red);
	border-radius: 3px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
	min-height: 0;
	min-width: 0;
	padding: 2px 9px;
}

.star-rating span:before,
.star-rating:before {
	color: #f0a500;
}

/* Voorraad en tweede knop in de productlijst. */
/* Voorraad als lampje met tekst, naar het voorbeeld van navigatieverlichting:
   groen is vrij baan, oranje betekent oppassen, en rood knippert als een baken —
   dat is precies het geval waarin haast loont. */
.nfs-stock {
	align-items: center;
	color: var(--nfs-green);
	display: flex;
	font-size: 12.5px;
	font-weight: 600;
	gap: 7px;
	margin: 6px 0 2px;
}

.nfs-lamp {
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(21, 122, 61, 0.14);
	background-color: currentColor;
	flex: 0 0 auto;
	height: 7px;
	width: 7px;
}

.nfs-stock--in {
	color: var(--nfs-green);
}

.nfs-stock--low {
	color: var(--nfs-amber);
}

.nfs-stock--low .nfs-lamp {
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.16);
}

/* Oranje en niet rood (opmerking Hendrik, 31 augustus 2026). Rood leest als een
   verbod: er is niets meer. Maar "Laatste" betekent juist dat er nog één is, en dan
   hoort het signaal "wees er snel bij" te zijn en niet "te laat". Oranje zegt dat,
   en het lampje blijft pulseren voor de haast. */
.nfs-stock--last {
	color: var(--nfs-amber);
}

.nfs-stock--last .nfs-lamp {
	animation: nfs-beacon 1.7s ease-in-out infinite;
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.18);
}

.nfs-stock--out {
	color: var(--nfs-muted);
	font-weight: 500;
}

.nfs-stock--out .nfs-lamp {
	box-shadow: 0 0 0 3px rgba(97, 116, 138, 0.14);
}

@keyframes nfs-beacon {
	0%, 100% {
		box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.18);
		opacity: 1;
	}

	50% {
		box-shadow: 0 0 0 6px rgba(194, 97, 15, 0.04);
		opacity: 0.55;
	}
}

/* Wie beweging op het scherm liever niet heeft, krijgt een stilstaand lampje. */
@media (prefers-reduced-motion: reduce) {
	.nfs-stock--last .nfs-lamp {
		animation: none;
	}
}

/* Dezelfde regel in de gegevenstabel op de productpagina en in het voorraadvakje
   dat WooCommerce daar zelf neerzet. */
.nfs-fact-stock,
.nfs-availability {
	align-items: center;
	display: inline-flex;
	gap: 7px;
}

/* Op de productpagina tekent het thema de voorraadregel zelf; daar past geen los
   element in, dus komt het lampje daar uit de opmaak. */
.nfs-availability:before {
	background-color: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(21, 122, 61, 0.14);
	content: "";
	flex: 0 0 auto;
	height: 7px;
	width: 7px;
}

.nfs-availability--low:before {
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.16);
}

.nfs-availability--last:before {
	animation: nfs-beacon 1.7s ease-in-out infinite;
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.18);
}

.nfs-availability--out:before {
	box-shadow: 0 0 0 3px rgba(97, 116, 138, 0.14);
}

.nfs-fact-stock--in,
.nfs-availability--in {
	color: var(--nfs-green);
}

.nfs-fact-stock--low,
.nfs-availability--low {
	color: var(--nfs-amber);
}

.nfs-fact-stock--last,
.nfs-availability--last {
	color: var(--nfs-amber);
}

.nfs-fact-stock--last .nfs-lamp,
.nfs-availability--last .nfs-lamp {
	animation: nfs-beacon 1.7s ease-in-out infinite;
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.18);
}

.nfs-fact-stock--out,
.nfs-availability--out {
	color: var(--nfs-muted);
}

.nfs-loop-view {
	background-color: var(--nfs-navy);
	border: 1px solid var(--nfs-navy);
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-top: 10px;
	padding: 9px 14px;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nfs-loop-view:hover,
.nfs-loop-view:focus {
	background-color: var(--nfs-blue);
	border-color: var(--nfs-blue);
	color: #fff;
}

/* ------------------------------------------------------- productpagina */

.nfs-facts {
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	list-style: none;
	margin: 22px 0;
	padding: 6px 18px;
}

.nfs-facts li {
	border-bottom: 1px solid var(--nfs-line);
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
}

.nfs-facts li:last-child {
	border-bottom: 0;
}

.nfs-facts span {
	color: var(--nfs-muted);
	font-size: 13.5px;
}

/* Een klein teken bij elke regel: conditie, garantie en verzending zijn zo op een
   oogopslag uit elkaar te houden, en de tabel oogt minder als een kale lijst. */
.nfs-facts__label {
	align-items: center;
	display: inline-flex;
	gap: 9px;
}

.nfs-facts__icon {
	align-items: center;
	background-color: var(--nfs-band);
	border-radius: 50%;
	color: var(--nfs-amber);
	display: inline-flex;
	flex: 0 0 auto;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.nfs-facts__icon .nfs-icon {
	height: 14px;
	width: 14px;
}

.nfs-facts strong {
	color: var(--nfs-navy);
	font-size: 13.5px;
}

.nfs-quote-button {
	display: block;
	margin-top: 10px;
	padding: 12px 22px;
	width: 100%;
}

/* --------------------------------------------------------------- shop */

.widget,
.sidebar .widget {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	padding: 18px;
}

.widget-title {
	font-size: 15px;
	margin-bottom: 14px;
}

.woocommerce-breadcrumb,
.breadcrumb {
	background: none;
	color: var(--nfs-muted);
	font-size: 13px;
}

.woocommerce-message,
.woocommerce-info {
	background-color: var(--nfs-band);
	border-top-color: var(--nfs-blue);
	color: var(--nfs-text);
}

/* De licht/donker-schakelaar hoort niet midden over de producten te zweven. */
.electro-mode-switcher {
	bottom: 24px;
	opacity: 0.5;
	top: auto !important;
	transform: scale(0.85);
	transform-origin: left bottom;
	z-index: 20;
}

.electro-mode-switcher:hover {
	opacity: 1;
}

/* ------------------------------------------------------------- footer */

.site-footer,
.footer-widgets,
.footer-bottom-widgets {
	background-color: var(--nfs-navy-dark);
	color: rgba(255, 255, 255, 0.78);
}

.site-footer a,
.footer-widgets a {
	color: rgba(255, 255, 255, 0.78);
}

.site-footer a:hover,
.footer-widgets a:hover {
	color: var(--nfs-amber-light);
}

/* In de voettekst zijn widgets geen kaarten; het witte vlak van de winkelzijbalk
   sloeg daar als grote lichte blokken in het marineblauw. */
.site-footer .widget,
.footer-widgets .widget,
.footer-bottom-widgets .widget {
	background-color: transparent;
	border: 0;
	padding: 0;
}

.nfs-footer-tagline {
	color: rgba(255, 255, 255, 0.72);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 12px 0 0;
	max-width: 30em;
}

/* De voettekst gebruikt de witte logovariant; die hoeft niet meer omgekleurd. */
.footer-logo img,
.nfs-footer-logo {
	height: auto;
	max-width: 230px;
}

.site-footer .widget-title,
.footer-widgets .widget-title,
.footer-address-title {
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.footer-newsletter,
.newsletter-block {
	background-color: var(--nfs-blue);
	color: #fff;
}

/* De onderste balk was lichtgrijs met witte tekst: onleesbaar. */
.copyright-bar {
	background-color: #0c2c4a;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
}

.copyright-bar a,
.copyright-bar .copyright {
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
	.nfs-hero__inner {
		padding: 52px 18px 46px;
	}

	/* De kop hoort op twee regels te staan, precies zoals hij geschreven is: het
	   eerste deel tot en met topmerken, en daaronder de rest (verzoek G Post,
	   28 augustus 2026). Bij 30 pixels paste "Kwaliteit van topmerken," niet meer op
	   één regel en brak hij in drieën. De maat is nu een som die met het scherm
	   meebeweegt: klein genoeg om te passen, groot genoeg om een kop te blijven. */
	.nfs-hero__title {
		font-size: clamp(26px, 7.9vw, 34px);
		line-height: 1.14;
		margin-bottom: 14px;
	}

	/* De knop mag kleiner dan de kop erboven; hij hoort de tweede stap te zijn en
	   niet de eerste (verzoek G Post, 31 augustus 2026). */
	.nfs-hero__actions .nfs-btn {
		font-size: 13.5px;
		padding: 10px 18px;
	}
}

/* ---------------------------------------------------------- pictogrammen */

/* Basismaat voor de inline SVG-iconen; secties die groter willen, zetten hem
   zelf hoger. Zonder deze regel schalen ze mee met hun container. */
.nfs-icon {
	flex: none;
	height: 16px;
	width: 16px;
}

/* --------------------------------------------------- keuzeblok in de kop */

/* Taal, valuta en account staan rechts van de zoekbalk, in kleine kolommen met
   een label erboven — zoals bij Outlet Specialist, maar in onze eigen kleuren. */
.nfs-cluster {
	align-items: center;
	display: flex;
	gap: 0;
	padding-left: 8px;
}

/* Label en waarde naast elkaar in plaats van onder elkaar: dat scheelt hoogte
   én breedte, en zet alles op dezelfde lijn als de winkelwagen. */
.nfs-cluster__item {
	align-items: baseline;
	display: flex;
	gap: 6px;
	line-height: 1.2;
	padding: 0 12px;
	position: relative;
	white-space: nowrap;
}

.nfs-cluster__item + .nfs-cluster__item {
	border-left: 1px solid var(--nfs-line);
}

.nfs-cluster__flag {
	display: block;
	line-height: 0;
	width: 22px;
}

.nfs-cluster__flag svg {
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(15, 53, 87, 0.15);
	display: block;
	height: auto;
	width: 100%;
}

.nfs-cluster__label {
	color: var(--nfs-muted);
	font-size: 12px;
	letter-spacing: 0.02em;
}

.nfs-cluster select,
.nfs-cluster .woocommerce-currency-switcher-form select,
.nfs-cluster .woocs_switcher select {
	background-color: transparent;
	border: 0;
	color: var(--nfs-navy);
	font-size: 14px;
	font-weight: 700;
	padding: 0;
}

.nfs-cluster__account {
	color: var(--nfs-navy);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.nfs-cluster__account:hover {
	color: var(--nfs-amber);
}

/* De valutaschakelaar komt uit een plug-in; die mag zich naar onze opmaak voegen. */
.nfs-cluster .woocommerce-currency-switcher-form,
.nfs-cluster .woocs_switcher {
	margin: 0;
}

/* Het thema geeft elke select een volle breedte; hier moet hij precies zo breed
   zijn als zijn inhoud, anders staat het pijltje ver van de tekst. */
/* De valutaplug-in tekent zijn eigen achtergrond over onze pijl heen, dus tekenen
   wij het pijltje er zelf bij. Het hangt aan het formulier en niet aan het hele
   blokje: zo valt het binnen het keuzeveld en opent een klik op het pijltje de
   lijst, in plaats van dat er niets gebeurt. */
.nfs-cluster__item--currency {
	position: relative;
}

.nfs-cluster__item--currency .woocommerce-currency-switcher-form {
	position: relative;
}

.nfs-cluster__item--currency .woocommerce-currency-switcher-form:after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--nfs-navy);
	content: "";
	margin-top: -2px;
	pointer-events: none;
	position: absolute;
	right: 7px;
	top: 50%;
}

/* De plug-in tekent zijn eigen pijl in het keuzeveld, boven op het valutateken.
   Die zetten we uit; het pijltje van ons omhulsel staat ernaast. */
.nfs-cluster select.woocommerce-currency-switcher {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: none !important;
	cursor: pointer;
	/* Ruimte aan de rechterkant waar het pijltje overheen valt; daardoor hoort die
	   plek bij het keuzeveld en is hij aan te klikken. */
	padding-right: 22px !important;
}

.nfs-cluster .woocommerce-currency-switcher {
	appearance: none;
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, var(--nfs-navy) 50%), linear-gradient(135deg, var(--nfs-navy) 50%, transparent 50%);
	background-position: right 8px center, right 3px center;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	max-width: 132px;
	min-width: 0;
	padding: 0 24px 0 0;
	width: auto;
}

.nfs-cluster .woocommerce-currency-switcher,
/* ------------------------------------------------- contactknoppen in de kop */

.nfs-contact-buttons {
	display: flex;
	gap: 8px;
	padding-left: 4px;
}

.nfs-contact-button {
	align-items: center;
	border-radius: 6px;
	color: #fff;
	display: flex;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.nfs-contact-button .nfs-icon {
	height: 19px;
	width: 19px;
}

.nfs-contact-button--phone,
.nfs-contact-button--mail {
	background-color: var(--nfs-amber);
}

.nfs-contact-button--phone:hover,
.nfs-contact-button--mail:hover {
	background-color: var(--nfs-amber-dark);
	color: #fff;
}

.nfs-contact-button--whatsapp {
	background-color: #25d366;
	color: #08301a;
}

.nfs-contact-button--whatsapp:hover {
	background-color: #1fbb59;
	color: #08301a;
}

/* ------------------------------------------------------------- zoekbalk */

/* De zoekbalk krijgt alle ruimte die overblijft; het keuzeblok en de knoppen
   houden hun eigen breedte. */
.masthead.row {
	flex-wrap: nowrap;
}

.masthead .navbar-search.col {
	flex: 1 1 0%;
	margin: 0 auto;
	max-width: 560px;
	min-width: 240px;
}

/* Alles in de kop op één hoogte, met gelijke tussenruimte. */
.masthead .header-logo-area,
.masthead .nfs-cluster,
.masthead .nfs-contact-buttons,
.masthead .header-icons {
	align-items: center;
	display: flex;
}

.masthead > .col-auto {
	padding-left: 6px;
	padding-right: 6px;
}

/* De winkelwagen stond los van de rest; hij hoort bij dezelfde rij. */
.masthead .header-icons,
.masthead .header-icon {
	margin-left: 0;
}

.nfs-cluster,
.nfs-contact-buttons {
	flex: 0 0 auto;
}

/* Eén rustig veld met een amber knop ernaast, in plaats van drie losse vakken. */
.navbar-search .input-group {
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	overflow: hidden;
}

.navbar-search .input-group:focus-within {
	border-color: var(--nfs-amber);
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.12);
}

.navbar-search .input-group .form-control,
.navbar-search .input-group .product-search-field {
	border: 0;
	box-shadow: none;
	font-size: 14.5px;
	height: 46px;
	padding-left: 16px;
}

.navbar-search .input-group .custom-select,
.navbar-search .input-group select {
	background-color: #fff;
	border: 0;
	border-left: 1px solid var(--nfs-line);
	color: var(--nfs-muted);
	font-size: 13.5px;
	height: 46px;
	max-width: 190px;
}

.header-v1 .navbar-search .input-group .btn {
	border: 0;
	border-radius: 0;
	height: 46px;
	min-width: 58px;
}

/* --------------------------------------------------- WhatsApp rechtsonder */

/* De knop "terug naar boven" van het thema staat in dezelfde hoek als de
   WhatsApp-knop. Het thema plaatst hem met top: calc(100vh - 5rem); zolang die
   blijft staan doet een bottom-waarde niets. Vandaar top op auto en dan pas
   omhoog schuiven, tot boven de WhatsApp-knop. */
.back-to-top-link {
	background-color: #fff !important;
	border: 1px solid var(--nfs-line) !important;
	bottom: 94px !important;
	box-shadow: 0 6px 18px rgba(6, 25, 43, 0.18) !important;
	color: var(--nfs-navy) !important;
	height: 2.5rem !important;
	opacity: 1 !important;
	right: 24px !important;
	top: auto !important;
	width: 2.5rem !important;
}

/* Wit met een marineblauw pijltje: op de lichte pagina én op de donkere voettekst
   blijft hij zichtbaar. Marineblauw op marineblauw viel weg. */
/* Het thema zet hier een icoon uit een oudere FontAwesome dat in deze versie niet
   meer bestaat; er kwam dus een lege knop uit. Daarom tekenen we het pijltje zelf. */
.back-to-top-link i {
	display: none;
}

.back-to-top-link:before {
	border-left: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	height: 9px;
	margin-top: 3px;
	transform: rotate(45deg);
	width: 9px;
}

.back-to-top-link:hover {
	background-color: var(--nfs-amber) !important;
	border-color: var(--nfs-amber) !important;
	color: #fff !important;
}

.nfs-wa {
	bottom: 22px;
	position: fixed;
	right: 22px;
	z-index: 999;
}

/* Het thema kleurt knoppen met een regel die specifieker is dan deze; vandaar
   de nadruk op de achtergrond van deze ene zwevende knop. */
.nfs-wa .nfs-wa__button {
	align-items: center;
	background-color: #25d366 !important;
	border: 0;
	border-radius: 30px;
	box-shadow: 0 8px 22px rgba(4, 24, 40, 0.28);
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: 14.5px;
	font-weight: 700;
	gap: 10px;
	padding: 13px 22px;
}

.nfs-wa .nfs-wa__button:hover {
	background-color: #1fbb59;
}

.nfs-wa .nfs-wa__button,
.nfs-wa .nfs-wa__button .nfs-icon {
	color: #fff;
}

.nfs-wa__button .nfs-icon {
	height: 20px;
	width: 20px;
}

.nfs-wa__panel {
	background-color: #075e54;
	border-radius: 12px;
	bottom: 66px;
	box-shadow: 0 18px 44px rgba(4, 24, 40, 0.26);
	overflow: hidden;
	position: absolute;
	right: 0;
	width: 320px;
}

/* Kop van het venster in het donkergroen van WhatsApp zelf. */
.nfs-wa__head {
	align-items: center;
	background-color: #075e54;
	color: #fff;
	display: flex;
	gap: 12px;
	padding: 14px 16px;
}

.nfs-wa__avatar {
	align-items: center;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	height: 42px;
	justify-content: center;
	overflow: hidden;
	width: 42px;
}

.nfs-wa__avatar img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.nfs-wa__avatar .nfs-icon {
	height: 22px;
	width: 22px;
}

.nfs-wa__name {
	display: block;
	font-size: 15px;
	font-weight: 700;
}

.nfs-wa__status {
	color: rgba(255, 255, 255, 0.75);
	display: block;
	font-size: 12px;
}

.nfs-wa__body {
	padding: 18px 16px 8px;
}

/* Tekstballon zoals in het gesprek zelf. */
.nfs-wa__bubble {
	background-color: #128c7e;
	border-radius: 0 8px 8px 8px;
	color: #fff;
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0;
	padding: 12px 14px;
	position: relative;
}

.nfs-wa__cta {
	align-items: center;
	background-color: #25d366;
	color: #fff;
	display: flex;
	font-weight: 700;
	gap: 9px;
	justify-content: center;
	margin: 14px 16px 16px;
	border-radius: 6px;
	padding: 12px 14px;
	text-align: center;
}

.nfs-wa__cta:hover {
	background-color: #1fbb59;
	color: #fff;
}

.nfs-wa__cta .nfs-icon {
	height: 18px;
	width: 18px;
}

/* ------------------------------------------------------- nieuwsbrief */

/* Eén zin en een invulveld, als afgeronde kaart in de voettekst. */
.nfs-newsletter {
	background-color: var(--nfs-navy-dark);
	padding: 30px 0;
}

.nfs-newsletter__card {
	align-items: center;
	background-color: var(--nfs-amber);
	border-radius: 14px;
	display: grid;
	gap: 26px;
	grid-template-columns: 1.15fr 1fr;
	padding: 30px 34px;
}

.nfs-newsletter__text {
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
}

.nfs-newsletter__form form,
.nfs-newsletter__form .newsletter-form {
	display: flex;
}

.nfs-newsletter__form input[type="email"],
.nfs-newsletter__form input[type="text"] {
	border: 0;
	border-radius: 6px 0 0 6px;
	flex: 1 1 auto;
	height: 50px;
	padding: 0 16px;
}

.nfs-newsletter__form input[type="submit"],
.nfs-newsletter__form button {
	background-color: var(--nfs-navy);
	border: 0;
	border-radius: 0 6px 6px 0;
	color: #fff;
	font-weight: 700;
	height: 50px;
	padding: 0 26px;
}

.nfs-newsletter__form input[type="submit"]:hover,
.nfs-newsletter__form button:hover {
	background-color: var(--nfs-navy-dark);
}

@media (max-width: 767px) {
	.nfs-newsletter__card {
		grid-template-columns: 1fr;
		padding: 24px;
	}

	.nfs-newsletter__text {
		font-size: 18px;
	}
}

/* ------------------------------------------------------- voorraadblok */

.nfs-warehouse {
	background-color: var(--nfs-band);
	border-top: 1px solid var(--nfs-line);
	border-bottom: 1px solid var(--nfs-line);
	margin-bottom: 56px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 48px 0;
	width: 100vw;
}

.nfs-warehouse__inner {
	align-items: center;
	display: grid;
	gap: 44px;
	grid-template-columns: 1fr 1fr;
}

/* De foto mag niet boven het verhaal uit torenen. Hij stond op de volle hoogte van
   zijn eigen bestand, en daarnaast oogde de tekst piepklein (verzoek G Post,
   31 augustus 2026: "erg kleine tekst in vergelijking met de plaatjes"). Nu een
   vaste maximumhoogte, en het beeld snijdt bij in plaats van te groeien. */
.nfs-warehouse__media img {
	border-radius: 8px;
	display: block;
	height: auto;
	max-height: 340px;
	object-fit: cover;
	width: 100%;
}

/* Het blok over Urk krijgt zijn eigen maat. De foto is daar geen achtergrondbeeld
   maar het onderwerp: de vuurtoren hoort er in zijn geheel op te staan (verzoek
   G Post, 31 augustus 2026). De uitsnede heeft nu de verhouding van dit vak, dus
   op de gewone breedte valt er niets meer af. Wordt het scherm breder, dan gaat er
   onderaan wat water vanaf en niet bovenaan de toren — vandaar top. */
.nfs-warehouse--spiegel .nfs-warehouse__media img {
	max-height: 360px;
	object-position: center top;
}

.nfs-warehouse__text {
	color: var(--nfs-text);
	font-size: 17.5px;
	line-height: 1.65;
	margin: 14px 0 24px;
	max-width: 34em;
}

/* De kop van deze twee blokken mocht mee omhoog: hij staat naast een foto van een
   halve schermbreedte en moet daar tegenop kunnen. */
.nfs-warehouse .nfs-section__title {
	font-size: 30px;
}

.nfs-warehouse__actions {
	margin: 0;
}

/* De werkplaats is hetzelfde blok, gespiegeld: foto rechts, tekst links. Zo
   wisselen de twee fotoblokken elkaar af in plaats van te herhalen. */
.nfs-workshop,
.nfs-warehouse--spiegel {
	background-color: #fff;
}

.nfs-workshop .nfs-warehouse__inner,
.nfs-warehouse--spiegel .nfs-warehouse__inner {
	grid-template-columns: 1fr 1.05fr;
}

.nfs-workshop__points {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.nfs-workshop__points li {
	align-items: center;
	color: var(--nfs-text);
	display: flex;
	font-size: 14.5px;
	gap: 10px;
	padding: 5px 0;
}

.nfs-workshop__points .nfs-icon {
	color: var(--nfs-amber);
	height: 19px;
	width: 19px;
}

@media (max-width: 767px) {
	/* Het gespiegelde blok moet hier met naam bij staan. Zijn eigen regel hierboven
	   is net zo zwaar als deze, en zonder vermelding blijft hij ook op een telefoon
	   in twee kolommen staan — met een postzegel van een foto naast een kolom tekst
	   van vier woorden breed. */
	.nfs-warehouse__inner,
	.nfs-workshop .nfs-warehouse__inner,
	.nfs-warehouse--spiegel .nfs-warehouse__inner {
		grid-template-columns: 1fr;
	}

	/* Op mobiel eerst de foto, dan het verhaal — ook in de gespiegelde blokken. */
	.nfs-workshop .nfs-warehouse__media,
	.nfs-warehouse--spiegel .nfs-warehouse__media {
		order: -1;
	}

	.nfs-topbar__inner {
		font-size: 12.5px;
		justify-content: center;
	}
}

/* ------------------------------------------------------- prijsopmaak */

/* "incl. BTW" is een voetnoot bij de prijs, geen tweede prijs. */
.woocommerce-price-suffix,
.price .woocommerce-price-suffix,
.electro-price .woocommerce-price-suffix {
	color: var(--nfs-muted);
	font-size: 0.62em;
	font-weight: 400;
	letter-spacing: 0;
	margin-left: 4px;
	text-transform: none;
	white-space: nowrap;
}

/* Nieuwsbrief in de voettekst: amber vlak, zoals gevraagd. */
.footer-newsletter,
.newsletter-block {
	background-color: var(--nfs-amber);
	color: #fff;
}

.footer-newsletter .newsletter-title,
.footer-newsletter .newsletter-title::before {
	color: #fff;
}

/* ---------------------------------------------------------- typografie */

/* De voettekst en de widgets pakten een ander lettertype dan de rest van de
   site; alles volgt nu de body. */
.site-footer,
.site-footer *,
.footer-widgets,
.footer-widgets *,
.copyright-bar,
.copyright-bar * {
	font-family: inherit;
}

.site-footer .widget_nav_menu li {
	line-height: 1.9;
}

.site-footer .widget_nav_menu a {
	font-size: 14px;
}

/* ------------------------------------------------------------ contactpagina */

/* De hero van de contactpagina is iets lager dan die van de homepage; er staat
   geen knop onder, dus die ruimte is niet nodig. De foto is links licht (plafond
   en ruit), dus het verloop moet daar dieper zijn dan op de homepage. */
.nfs-hero--contact:after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(6, 22, 39, 0.86) 0%, rgba(6, 22, 39, 0.68) 46%, rgba(6, 22, 39, 0.26) 100%),
		linear-gradient(to top, rgba(6, 22, 39, 0.45) 0%, transparent 50%);
}

.nfs-hero--contact {
	background-position: center 55%;
	background-repeat: no-repeat;
	background-size: cover;
}

.nfs-hero--contact .nfs-hero__inner {
	padding: 84px 15px 78px;
}

.nfs-hero--contact .nfs-hero__title {
	font-size: 40px;
}

.nfs-contact-lines {
	margin-top: -48px;
	position: relative;
	z-index: 3;
}

.nfs-contact-lines__grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* De drie lijnen liggen als kaarten half over de hero heen, zodat meteen zichtbaar
   is dat dit de kern van de pagina is. */
.nfs-line {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(15, 53, 87, 0.10);
	padding: 26px 26px 28px;
	text-align: center;
}

.nfs-line__icon {
	align-items: center;
	background-color: var(--nfs-band);
	border-radius: 50%;
	color: var(--nfs-amber);
	display: flex;
	height: 52px;
	justify-content: center;
	margin: 0 auto 14px;
	width: 52px;
}

.nfs-line__icon .nfs-icon {
	height: 24px;
	width: 24px;
}

.nfs-line--whatsapp .nfs-line__icon {
	background-color: rgba(37, 211, 102, 0.12);
	color: #128c7e;
}

.nfs-line--whatsapp .nfs-btn--primary {
	background-color: #25d366;
	border-color: #25d366;
	color: #08301a;
}

.nfs-line--whatsapp .nfs-btn--primary:hover {
	background-color: #1fbb59;
	border-color: #1fbb59;
	color: #08301a;
}

.nfs-line__title {
	font-size: 17px;
	margin-bottom: 4px;
}

.nfs-line__value {
	color: var(--nfs-navy);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 16px;
	word-break: break-word;
}

/* Het nummer, de naam en het adres zijn zelf ook aan te klikken; ze blijven eruit
   zien als tekst tot je er met de muis overheen gaat. */
.nfs-line__value a,
.nfs-contact-visit__address a {
	color: inherit;
}

.nfs-line__value a:hover,
.nfs-line__value a:focus,
.nfs-contact-visit__address a:hover,
.nfs-contact-visit__address a:focus {
	color: var(--nfs-amber-dark);
	text-decoration: underline;
}

/* Bezoekadres en de drie routes naast elkaar. */
.nfs-contact-visit .nfs-warehouse__inner {
	align-items: start;
	grid-template-columns: 1fr 1fr;
}

.nfs-contact-visit__address {
	color: var(--nfs-navy);
	font-size: 18px;
	font-weight: 700;
	margin: 10px 0 12px;
}

.nfs-contact-routes {
	display: grid;
	gap: 12px;
}

.nfs-route {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	display: flex;
	gap: 14px;
	padding: 16px 18px;
}

.nfs-route:hover {
	border-color: var(--nfs-amber);
	box-shadow: 0 8px 20px rgba(15, 53, 87, 0.10);
}

.nfs-route__icon {
	align-items: center;
	color: var(--nfs-amber);
	display: flex;
	flex: none;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.nfs-route__icon .nfs-icon {
	height: 24px;
	width: 24px;
}

.nfs-route__body strong {
	color: var(--nfs-navy);
	display: block;
	font-size: 15.5px;
}

.nfs-route__body span {
	color: var(--nfs-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.nfs-contact-visit .nfs-warehouse__inner {
		grid-template-columns: 1fr;
	}

	.nfs-contact-lines {
		margin-top: 24px;
	}

	.nfs-hero--contact .nfs-hero__title {
		font-size: 28px;
	}
}

/* -------------------------------------------------------------- over ons */

.nfs-about-intro {
	margin-bottom: 44px;
	margin-top: 44px;
}

/* De inleiding staat op leesbreedte in het midden; een alinea over de volle
   containerbreedte leest niemand uit. */
.nfs-about-lead {
	color: var(--nfs-text);
	font-size: 18px;
	line-height: 1.75;
	margin: 0 auto;
	max-width: 46em;
	text-align: center;
}

.nfs-about-timeline {
	padding: 44px 0 40px;
}

/* Vast drie kolommen: de lijn tussen de stippen wordt per mijlpaal getekend, dus
   de rij mag niet gaan afbreken — dan zou er een stuk lijn een lege regel in lopen. */
.nfs-timeline {
	counter-reset: none;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfs-timeline__item {
	padding: 22px 4px 0;
	position: relative;
}

/* De lijn loopt van de eigen stip door tot díe van de volgende mijlpaal — vandaar
   de 20px overhang, precies de kolomafstand. Bij de laatste stip houdt de lijn op:
   daar staat "Nu", en verder dan nu reikt een tijdlijn niet. */
.nfs-timeline__item:after {
	background-color: rgba(255, 255, 255, 0.22);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: -20px;
	top: -2px;
}

.nfs-timeline__item:last-child:after {
	content: none;
}

.nfs-timeline__item:before {
	background-color: var(--nfs-amber);
	border-radius: 50%;
	content: "";
	height: 12px;
	left: 0;
	position: absolute;
	top: -7px;
	width: 12px;
	z-index: 1;
}

.nfs-timeline__year {
	color: var(--nfs-amber-light);
	display: block;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom: 4px;
}

.nfs-timeline__title {
	color: #fff;
	display: block;
	font-size: 16px;
	margin-bottom: 4px;
}

.nfs-timeline__text {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13.5px;
	line-height: 1.6;
}

/* Op een telefoon past er geen rij van drie naast elkaar; dan kantelt de tijdlijn
   een kwartslag en loopt de lijn van boven naar beneden langs de stippen. */
@media (max-width: 767px) {
	.nfs-timeline {
		gap: 0;
		grid-template-columns: 1fr;
	}

	.nfs-timeline__item {
		padding: 0 0 26px 26px;
	}

	.nfs-timeline__item:before {
		top: 5px;
	}

	.nfs-timeline__item:after {
		bottom: -5px;
		height: auto;
		left: 5px;
		right: auto;
		top: 17px;
		width: 2px;
	}

	.nfs-timeline__item:last-child {
		padding-bottom: 0;
	}
}

/* Het assortiment als losse labels; in een alinea lees je er drie van en haak je af. */
.nfs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.nfs-tags li {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 40px;
	color: var(--nfs-navy);
	font-size: 13.5px;
	font-weight: 600;
	padding: 7px 15px;
}

/* De keuring is een papieren belofte; die krijgt een eigen kader. */
.nfs-certificate {
	align-items: flex-start;
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-left: 3px solid var(--nfs-amber);
	border-radius: 6px;
	display: flex;
	gap: 14px;
	margin-bottom: 22px;
	padding: 16px 18px;
}

.nfs-certificate__icon {
	color: var(--nfs-amber);
	flex: none;
	height: 26px;
	width: 26px;
}

.nfs-certificate__icon .nfs-icon {
	height: 26px;
	width: 26px;
}

.nfs-certificate strong {
	color: var(--nfs-navy);
	display: block;
	font-size: 15.5px;
}

.nfs-certificate span span,
.nfs-certificate > span {
	color: var(--nfs-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

.nfs-about-closing {
	background-color: var(--nfs-navy);
	background-image: linear-gradient(135deg, #0d2f4e 0%, #17456e 100%);
	color: #fff;
	margin-bottom: 56px;
	padding: 48px 0;
}

.nfs-about-closing__inner {
	text-align: center;
}

.nfs-about-closing__quote {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.4;
	margin: 0 auto 26px;
	max-width: 30em;
}

.nfs-about-closing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 0;
}

.nfs-about-closing .nfs-btn--ghost {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.nfs-about-closing .nfs-btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

@media (max-width: 767px) {
	.nfs-about-lead {
		font-size: 16px;
		text-align: left;
	}

	.nfs-about-closing__quote {
		font-size: 19px;
	}
}

/* ---------------------------------------------------- navigatiebalk */

/* De balk was een vlak blauw vlak met tekst. Nu: een licht verloop en een amber
   streep onder het item waar je op staat. Verder blijft hij bewust rustig — het
   telefoonnummer staat al als icoon in de kop erboven. */
.electro-navigation {
	background-image: linear-gradient(180deg, var(--nfs-navy-top) 0%, var(--nfs-navy) 100%);
	box-shadow: 0 2px 10px rgba(15, 53, 87, 0.14);
	border-radius: 0;
}

/* Het witte randje onder de balk, ook op de hoofdpagina (verzoek G Post,
   31 augustus 2026). Het thema geeft de balk overal een halve regel ruimte
   eronder, maar haalt die op de hoofdpagina weg — daar plakte de carrousel dus
   tegen het blauw aan, terwijl bij Over ons en overal elders wel een streepje wit
   staat. Dezelfde 0.5em, zodat het overal precies gelijk is. */
.electro-navigation.yes-home {
	margin-bottom: 0.5em;
}

.departments-menu-v2 {
	border-radius: 0;
}

/* De balk loopt door tot de rand van het scherm (verzoek G Post, 31 augustus 2026).

   De balk zit in de .container van het thema en was dus zo breed als die kolom, met
   wit ernaast. Drie manieren om daar uit te breken, en twee gaan hier stuk:

     - Een negatieve marge (margin-left: calc(50% - 50vw)) rekent met 100vw, en dat
       is inclusief de verticale schuifbalk. Dat geeft een horizontale schuifbalk.
     - Een slagschaduw naast de balk wordt afgeknipt: .hfeed.site staat op
       overflow: hidden.

   Wat overblijft is een laag achter de balk die aan weerskanten een schermbreedte
   doorloopt. Diezelfde overflow: hidden die de schaduw wegknipte, knipt nu netjes op
   de rand van het scherm af — geen schuifbalk, geen gedoe. De uitklaplijst met
   categorieën blijft staan, want er wordt nergens iets afgeknipt binnen de balk
   zelf; alleen de laag erachter is groter. */
.electro-navigation:before {
	background-image: inherit;
	bottom: 0;
	content: "";
	left: -100vw;
	position: absolute;
	right: -100vw;
	top: 0;
	z-index: 0;
}

/* De inhoud van de balk hoort bovenop die laag te staan, en de uitklaplijst met
   categorieën ruim daarboven. */
.electro-navigation > * {
	position: relative;
	z-index: 1;
}

.electro-navigation .dropdown-menu {
	z-index: 1002;
}


/* De balk is een flexrij: de categorieënknop staat er als los blok in, dus de
   menulijst mag niet de volle rijbreedte pakken — dan valt de knop eronder. */
.electro-navigation .secondary-nav {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	min-width: 0;
}

.electro-navigation .secondary-nav-menu {
	min-width: 0;
}

/* De items mogen niet krimpen; anders breken de laatste woorden over twee regels. */
.electro-navigation .secondary-nav > li {
	flex: none;
}

/* Iets minder hoog dan het thema hem zet: de balk hoeft niet mee te wegen met
   de kop erboven. De knop links krijgt dezelfde hoogte, anders staat hij scheef. */
.electro-navigation .secondary-nav > li > a {
	padding: 11px 12px;
	white-space: nowrap;
	position: relative;
	transition: color 0.15s ease;
}

.departments-menu-v2 .departments-menu-v2-title {
	line-height: 2.85em;
}

/* Streep die vanuit het midden uitloopt; subtiel genoeg om niet te schreeuwen. */
.electro-navigation .secondary-nav > li > a:after {
	background-color: var(--nfs-amber);
	bottom: 6px;
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	transition: left 0.18s ease, right 0.18s ease;
	right: 50%;
}

.electro-navigation .secondary-nav > li > a:hover:after,
.electro-navigation .secondary-nav > li.current-menu-item > a:after {
	left: 16px;
	right: 16px;
}

.electro-navigation .secondary-nav > li.current-menu-item > a {
	color: #fff;
}

/* De categorieënknop mag zich onderscheiden: hij is de ingang naar de winkel. */
.departments-menu-v2-title {
	font-weight: 600;
	padding-left: 18px;
	position: relative;
}

.departments-menu-v2-title:before {
	background-color: var(--nfs-amber);
	bottom: 8px;
	content: "";
	left: 0;
	position: absolute;
	top: 8px;
	width: 3px;
}

/* ------------------------------------------------------- zoekopdracht */

/* Deze pagina heeft geen foto nodig; de band zelf draagt de kop. */
.nfs-hero--request {
	background-image:
		radial-gradient(900px 340px at 12% -30%, rgba(46, 122, 184, 0.5), transparent 62%),
		linear-gradient(135deg, #0e3355 0%, #1a5488 100%);
	margin-bottom: 52px;
}

.nfs-hero--request .nfs-hero__inner {
	padding: 74px 15px 70px;
}

.nfs-hero--request .nfs-hero__title {
	font-size: 40px;
}

.nfs-steps {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.nfs-step {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	padding: 24px 24px 26px;
	position: relative;
}

/* Het nummer staat groot en licht op de achtergrond; de stap zelf blijft leidend. */
.nfs-step__number {
	color: var(--nfs-band);
	font-size: 62px;
	font-weight: 700;
	line-height: 1;
	position: absolute;
	right: 16px;
	top: 8px;
}

.nfs-step__icon {
	align-items: center;
	color: var(--nfs-amber);
	display: flex;
	height: 30px;
	margin-bottom: 12px;
	position: relative;
	width: 30px;
}

.nfs-step__icon .nfs-icon {
	height: 28px;
	width: 28px;
}

.nfs-step__title {
	font-size: 16.5px;
	margin-bottom: 6px;
	position: relative;
}

.nfs-step__text {
	color: var(--nfs-muted);
	font-size: 14px;
	margin: 0;
	position: relative;
}

.nfs-checklist {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.nfs-checklist li {
	align-items: flex-start;
	color: var(--nfs-text);
	display: flex;
	font-size: 14.5px;
	gap: 10px;
	padding: 6px 0;
}

.nfs-checklist .nfs-icon {
	color: var(--nfs-amber);
	flex: none;
	height: 19px;
	margin-top: 2px;
	width: 19px;
}

/* --------------------------------------------------------- installatie */

/* Dezelfde band als de zoekopdrachtpagina, maar met het logo van het moederbedrijf
   erboven: dat is hier de eerste boodschap. */
.nfs-hero--install {
	background-image:
		radial-gradient(900px 340px at 12% -30%, rgba(46, 122, 184, 0.5), transparent 62%),
		linear-gradient(135deg, #0e3355 0%, #1a5488 100%);
	margin-bottom: 52px;
}

.nfs-hero--install .nfs-hero__inner {
	padding: 54px 15px 66px;
}

/* De foto's hier zijn van boord: tegenlicht, staal en een nachtopname. Met het
   standaardwaas eroverheen worden ze modderig, dus dat is hier lichter — de tekst
   staat toch al op een wit plaatje en een donkere linkerhoek. */
.nfs-hero--install.nfs-hero--photo:after {
	background:
		linear-gradient(100deg, rgba(6, 22, 39, 0.72) 0%, rgba(6, 22, 39, 0.46) 45%, rgba(6, 22, 39, 0.12) 100%),
		linear-gradient(to top, rgba(6, 22, 39, 0.38) 0%, transparent 48%);
}

.nfs-hero--install .nfs-hero__slide {
	filter: brightness(1.06) saturate(1.05);
}

.nfs-hero--install .nfs-hero__title {
	font-size: 40px;
}

/* Het logo is een zwarte lijntekening; op marineblauw zou het verdwijnen, dus
   het staat op een wit plaatje — zoals een plaquette op de brug. */
.nfs-install-plate {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 26px rgba(6, 25, 43, 0.22);
	display: inline-block;
	margin-bottom: 26px;
	padding: 18px 26px;
}

.nfs-install-plate__logo {
	display: block;
	height: auto;
	max-width: 100%;
	width: 210px;
}

/* Deze drie punten dragen geen volgnummer; het is geen stappenplan. */
.nfs-steps--plain .nfs-step {
	padding-top: 26px;
}

/* Geen marineblauw blok meer aan het eind: één regel met de knop ernaast, op een
   dunne lijn. Dat past bij de rest van de pagina en drukt hem niet dicht. */
.nfs-install-closing {
	padding: 0 0 68px;
}

.nfs-install-closing__inner {
	align-items: center;
	border-top: 1px solid var(--nfs-line);
	display: flex;
	flex-wrap: wrap;
	gap: 16px 30px;
	justify-content: space-between;
	padding-top: 26px;
}

.nfs-install-closing__line {
	color: var(--nfs-navy);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	max-width: 640px;
}

@media (max-width: 767px) {
	.nfs-hero--install .nfs-hero__title {
		font-size: 30px;
	}

	.nfs-install-plate__logo {
		width: 170px;
	}
}

/* ------------------------------------------------------- kop van de shop */

/* Het thema zette alleen het woord "Shop" boven de lijst; dat verdronk tussen de
   filters. Dit is dezelfde band als elders, met rechts een teller als eigen accent. */
.nfs-shophead {
	background-color: var(--nfs-navy);
	background-image:
		radial-gradient(900px 340px at 12% -30%, rgba(46, 122, 184, 0.5), transparent 62%),
		linear-gradient(135deg, #0e3355 0%, #1a5488 100%);
	color: #fff;
	margin-bottom: 30px;
	overflow: hidden;
	position: relative;
}

.nfs-shophead--photo {
	background-position: center 58%;
	background-size: cover;
}

.nfs-shophead--photo:before {
	background:
		linear-gradient(100deg, rgba(6, 22, 39, 0.86) 0%, rgba(6, 22, 39, 0.62) 55%, rgba(6, 22, 39, 0.3) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.nfs-shophead__inner {
	align-items: center;
	display: flex;
	gap: 30px;
	justify-content: space-between;
	padding: 44px 15px 46px;
	position: relative;
	z-index: 1;
}

.nfs-shophead__eyebrow {
	color: var(--nfs-amber-light);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.nfs-shophead__title {
	color: #fff;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.12;
	margin: 0;
}

.nfs-shophead__title + .nfs-shophead__lead {
	margin-top: 10px;
}

.nfs-shophead__lead {
	color: rgba(255, 255, 255, 0.86);
	font-size: 15.5px;
	margin: 0;
	max-width: 620px;
}

/* De teller als instrument op de brug: een afleesvenster met een amber rand. */
.nfs-shophead__gauge {
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 10px;
	flex: none;
	padding: 18px 26px 20px;
	position: relative;
	text-align: center;
}

.nfs-shophead__gauge:before {
	background-color: var(--nfs-amber);
	border-radius: 10px 10px 0 0;
	content: "";
	height: 3px;
	left: 22px;
	position: absolute;
	right: 22px;
	top: -2px;
}

.nfs-shophead__mark {
	color: rgba(255, 255, 255, 0.5);
	display: block;
	margin: 0 auto 6px;
}

.nfs-shophead__mark .nfs-icon {
	height: 20px;
	width: 20px;
}

.nfs-shophead__count {
	color: #fff;
	display: block;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.nfs-shophead__label {
	color: rgba(255, 255, 255, 0.72);
	display: block;
	font-size: 12px;
	letter-spacing: 0.06em;
	margin-top: 6px;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.nfs-shophead__inner {
		display: block;
		padding: 30px 15px 32px;
	}

	.nfs-shophead__title {
		font-size: 27px;
	}

	.nfs-shophead__gauge {
		display: inline-block;
		margin-top: 22px;
		padding: 12px 20px 14px;
	}

	.nfs-shophead__count {
		font-size: 30px;
	}
}

/* ---------------------------------------------------------------- sale */

/* Amber in plaats van marineblauw: deze pagina mag er anders uitzien dan de shop,
   anders leest hij als zomaar een categorie. */
.nfs-hero--sale {
	background-image:
		radial-gradient(900px 340px at 14% -30%, rgba(255, 176, 90, 0.5), transparent 60%),
		linear-gradient(135deg, #9c4a09 0%, var(--nfs-amber) 62%, #d97a25 100%);
	margin-bottom: 46px;
}

/* Alleen het woord zelf in de band, net als bij Garantie en Alle merken. */
.nfs-hero--sale .nfs-hero__inner {
	padding: 58px 15px 56px;
	position: relative;
	z-index: 1;
}

.nfs-hero--sale .nfs-hero__title {
	margin: 0;
}

/* Schuine banen rechts in de band, als de streep door een prijskaartje. Houdt de
   lege helft in beweging zonder er een foto in te hoeven zetten. */
.nfs-hero--sale:after {
	background-image: repeating-linear-gradient(
		114deg,
		rgba(255, 255, 255, 0.09) 0 18px,
		transparent 18px 46px
	);
	content: "";
	inset: 0 0 0 46%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
	mask-image: linear-gradient(90deg, transparent, #000 55%);
	position: absolute;
}

.nfs-hero--sale .nfs-hero__eyebrow {
	color: rgba(255, 255, 255, 0.86);
}

.nfs-hero--sale .nfs-hero__title {
	font-size: 40px;
}

/* Drie feiten naast elkaar: hoeveel, hoe scherp en hoe lang. */
.nfs-sale-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.nfs-sale-stat {
	background-color: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	padding: 12px 18px 13px;
	text-transform: uppercase;
}

.nfs-sale-stat strong {
	color: #fff;
	display: block;
	font-size: 22px;
	letter-spacing: -0.01em;
	margin-bottom: 2px;
	text-transform: none;
}

@media (max-width: 767px) {
	.nfs-hero--sale .nfs-hero__title {
		font-size: 28px;
	}

	.nfs-sale-stat {
		flex: 1 1 100%;
	}
}

/* Op de sale-pagina staat bij elk product hoeveel eraf gaat; op de gewone shop is
   dat één losse actieprijs, hier is het de kern van de pagina. */
.nfs-sale-grid .onsale {
	font-size: 12.5px;
	letter-spacing: 0.04em;
	padding: 6px 12px;
}

/* Het zoekopdrachtblok met foto, zoals het onder een productpagina staat. */
.nfs-sourcing--photo .nfs-sourcing__inner {
	align-items: center;
	display: grid;
	gap: 26px;
	grid-template-columns: 240px 1fr auto;
}

.nfs-sourcing__media img {
	border-radius: 8px;
	display: block;
	height: 160px;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 900px) {
	.nfs-sourcing--photo .nfs-sourcing__inner {
		grid-template-columns: 1fr;
	}

	.nfs-sourcing__media img {
		height: 190px;
	}
}

/* -------------------------------------------------------- merkenpagina */

/* Het woord ALPHATRON loopt schuin over de onderste helft van de foto. De band is
   daarom hoog genoeg om dat hele woord te tonen en kijkt naar onderen; bij een lage
   band zie je alleen een paar letters. */
.nfs-hero--brands {
	background-position: center 85%;
	background-repeat: no-repeat;
	background-size: cover;
}

.nfs-hero--brands .nfs-hero__inner {
	align-items: center;
	display: flex;
	min-height: 470px;
	padding: 30px 15px;
}

.nfs-hero--brands .nfs-hero__title {
	font-size: 42px;
	margin: 0;
}

@media (max-width: 767px) {
	.nfs-hero--brands .nfs-hero__inner {
		min-height: 260px;
	}
}

/* De foto is van zichzelf al donker; met het volle waas eroverheen verdwijnt het
   oranje. Alleen linksboven blijft het donker genoeg voor de kop. */
.nfs-hero--brands.nfs-hero--photo:after {
	background:
		linear-gradient(100deg, rgba(6, 22, 39, 0.7) 0%, rgba(6, 22, 39, 0.34) 42%, rgba(6, 22, 39, 0.1) 100%);
}


/* Per groep: links het nummer met één regel, rechts de logo's. Zo blijft de tekst
   kort en doen de merken zelf het werk. */
.nfs-brandgroup {
	padding-bottom: 10px;
}

.nfs-brandgroup__inner {
	display: grid;
	gap: 28px;
	grid-template-columns: 220px 1fr;
}

.nfs-brandgroup__label {
	border-top: 2px solid var(--nfs-amber);
	padding-top: 14px;
}

.nfs-brandgroup__number {
	color: var(--nfs-amber);
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-bottom: 6px;
}

.nfs-brandgroup__title {
	color: var(--nfs-navy);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.nfs-brandgroup__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.nfs-brandtile {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	display: block;
	overflow: hidden;
	position: relative;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nfs-brandtile:hover {
	border-color: rgba(194, 97, 15, 0.45);
	box-shadow: 0 10px 22px rgba(15, 53, 87, 0.1);
	transform: translateY(-2px);
}

.nfs-brandtile__logo img {
	display: block;
	height: auto;
	width: 100%;
}

/* Op de tegel staat alleen het logo. Er hebben een naam, een omschrijving en het
   aantal artikelen onder gestaan; dat maakte er een rommelige lijst van terwijl het
   verhaal over het merk toch al op de merkpagina zelf staat. */

/* ---------------------------------------------------- verhaal bij een merk */

/* Onder de productlijst op /merk/<naam>/: links het verhaal, rechts een kaart met
   het logo, de herkomst en waar het merk van bekend is. */
.nfs-merk {
	border-top: 1px solid var(--nfs-line);
	margin-top: 44px;
	padding-top: 36px;
}

.nfs-merk__inner {
	display: grid;
	gap: 34px;
	grid-template-columns: 1fr 300px;
}

.nfs-merk__eyebrow {
	color: var(--nfs-amber);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.nfs-merk__title {
	color: var(--nfs-navy);
	font-size: 27px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 14px;
}

.nfs-merk__lead {
	color: var(--nfs-text);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 16px;
}

.nfs-merk__body p {
	color: var(--nfs-text);
	line-height: 1.72;
	margin-bottom: 14px;
}

.nfs-merk__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.nfs-merk__card {
	align-self: start;
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	padding: 20px;
}

.nfs-merk__logo {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	margin-bottom: 16px;
	padding: 10px 14px;
}

.nfs-merk__logo img {
	display: block;
	height: auto;
	width: 100%;
}

.nfs-merk__facts {
	margin: 0 0 16px;
}

.nfs-merk__fact {
	border-bottom: 1px solid var(--nfs-line);
	padding: 8px 0;
}

.nfs-merk__fact:last-child {
	border-bottom: 0;
}

.nfs-merk__fact dt {
	color: var(--nfs-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nfs-merk__fact dd {
	color: var(--nfs-navy);
	font-size: 14px;
	font-weight: 600;
	margin: 2px 0 0;
}

.nfs-merk__subtitle {
	color: var(--nfs-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.nfs-merk__points {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfs-merk__points li {
	color: var(--nfs-text);
	font-size: 14px;
	line-height: 1.5;
	padding: 4px 0 4px 20px;
	position: relative;
}

/* Een streepje in de kleur van de huisstijl in plaats van een bolletje. */
.nfs-merk__points li:before {
	background-color: var(--nfs-amber);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: 13px;
	width: 10px;
}

@media (max-width: 991px) {
	.nfs-merk__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.nfs-merk__title {
		font-size: 23px;
	}

	.nfs-merk__lead {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.nfs-hero--brands .nfs-hero__title {
		font-size: 30px;
	}

	.nfs-brandgroup__inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.nfs-brandgroup__grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

/* ------------------------------------------ winkelwagen en afrekenen */

/* De blokken van WooCommerce komen met hun eigen grijs en zwart; hier krijgen ze
   dezelfde knoppen, lijnen en koppen als de rest van de winkel. */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title {
	color: var(--nfs-navy);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Melding over verzenden: staat boven de winkelwagen en het afrekenen. */
.nfs-shipnote {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-left: 3px solid var(--nfs-amber);
	border-radius: 8px;
	margin: 0 0 26px;
	padding: 18px 22px 20px;
}

.nfs-shipnote__tag {
	color: var(--nfs-amber);
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.nfs-shipnote p,
.nfs-shipnote li {
	color: var(--nfs-text);
	font-size: 14px;
	line-height: 1.65;
	margin: 0;
}

.nfs-shipnote ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfs-shipnote li {
	padding-left: 18px;
	position: relative;
}

.nfs-shipnote li:before {
	background-color: var(--nfs-amber);
	border-radius: 50%;
	content: "";
	height: 5px;
	left: 2px;
	position: absolute;
	top: 10px;
	width: 5px;
}

.nfs-shipnote--cart {
	align-items: baseline;
	display: flex;
	gap: 14px;
}

.nfs-shipnote--cart .nfs-shipnote__tag {
	flex: none;
	margin: 0;
}

/* Knoppen: amber, zoals overal op de site. */
/* De blokken zetten hun knopkleur via een eigen regel die later laadt; alleen zo
   krijgt de bestelknop dezelfde amber als de rest van de winkel. */
.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	background-color: var(--nfs-amber) !important;
	border: 0;
	border-radius: 4px;
	color: #fff !important;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--nfs-amber-dark) !important;
	color: #fff !important;
}

/* Totalen en besteloverzicht als kaart, zoals de rest van de site. */
.wc-block-cart__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	padding: 22px 22px 8px;
}

.wc-block-components-totals-item__label,
.wc-block-components-product-name {
	color: var(--nfs-text);
}

.wc-block-components-product-name {
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--nfs-navy);
	font-weight: 700;
}

.wc-block-components-title,
.wc-block-cart__submit-container + *,
.wp-block-woocommerce-checkout-fields-block h2 {
	color: var(--nfs-navy);
}

/* Invoervelden krijgen dezelfde rustige lijnen als de zoekbalk. */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
	border-color: var(--nfs-line);
	border-radius: 4px;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
	border-color: var(--nfs-amber);
	box-shadow: 0 0 0 2px rgba(194, 97, 15, 0.14);
}

/* De gekozen verzend- of betaaloptie krijgt de huiskleur in plaats van zwart. */
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--nfs-amber);
	box-shadow: 0 0 0 1px var(--nfs-amber);
}

.wc-block-components-radio-control__input:checked {
	accent-color: var(--nfs-amber);
}

/* Prijzen in de winkelwagen in de huiskleur, niet in het blauw van het thema. */
.wc-block-components-product-price__value,
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
	color: var(--nfs-navy);
	font-weight: 700;
}

/* ------------------------------------ accessoires bij de winkelwagen */

/* Staat onder de winkelwagen en de bestelknop: wat hoort er nog bij, en wat scheelt
   het als je het meteen meeneemt. */
.nfs-combi {
	border-top: 1px solid var(--nfs-line);
	margin-top: 46px;
	padding-top: 34px;
}

.nfs-combi__head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	justify-content: space-between;
	margin-bottom: 22px;
}

.nfs-combi__tag {
	background-color: var(--nfs-amber);
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 10px;
	padding: 6px 12px;
	text-transform: uppercase;
}

.nfs-combi__title {
	color: var(--nfs-navy);
	font-size: 24px;
	font-weight: 700;
	margin: 0;
}

.nfs-combi__note {
	color: var(--nfs-muted);
	font-size: 14px;
	margin: 0;
	max-width: 460px;
}

/* auto-fill in plaats van auto-fit: bij één of twee suggesties blijven de kaarten
   hun eigen maat houden in plaats van uit te rekken over de hele breedte. Sinds de
   combinatiekorting alleen voor het kleine werk geldt, kunnen dat er ook maar één
   of twee zijn. */
.nfs-combi__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.nfs-combi__card {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	padding: 16px 16px 18px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nfs-combi__card:hover {
	border-color: rgba(194, 97, 15, 0.4);
	box-shadow: 0 10px 22px rgba(15, 53, 87, 0.1);
}

.nfs-combi__media {
	background-color: var(--nfs-band);
	border-radius: 6px;
	display: block;
	margin-bottom: 14px;
	overflow: hidden;
	position: relative;
}

.nfs-combi__media img {
	display: block;
	height: auto;
	width: 100%;
}

/* Het kortingsvlaggetje ligt op de hoek van de foto, niet ernaast. */
.nfs-combi__badge {
	background-color: var(--nfs-amber);
	border-radius: 4px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	left: 8px;
	padding: 4px 8px;
	position: absolute;
	top: 8px;
}

.nfs-combi__name {
	color: var(--nfs-navy);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 8px;
}

.nfs-combi__name:hover {
	color: var(--nfs-amber-dark);
}

.nfs-combi__prices {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	margin-top: auto;
}

.nfs-combi__prices del,
.nfs-combi__prices del .woocommerce-Price-amount {
	color: var(--nfs-muted);
	font-size: 13.5px;
	text-decoration: line-through;
}

.nfs-combi__prices ins,
.nfs-combi__prices ins .woocommerce-Price-amount {
	color: var(--nfs-red);
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
}

.nfs-combi__add {
	font-size: 13.5px;
	padding: 11px 14px;
	text-align: center;
	width: 100%;
}

@media (max-width: 575px) {
	.nfs-combi__grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.nfs-combi__add {
		font-size: 12.5px;
		padding: 10px 8px;
	}
}

/* Slot van de merkenpagina: één knop, midden op de pagina. Duidelijk genoeg om te
   zien dat het een knop is, maar zonder band eromheen. */
.nfs-brands-more {
	padding: 10px 0 70px;
	text-align: center;
}

.nfs-brands-more__link {
	align-items: center;
	background-color: var(--nfs-amber);
	border-radius: 4px;
	color: #fff;
	display: inline-flex;
	font-size: 14.5px;
	font-weight: 700;
	gap: 10px;
	padding: 13px 30px;
}

.nfs-brands-more__link:hover {
	background-color: var(--nfs-amber-dark);
	color: #fff;
}

.nfs-brands-more__link svg {
	height: 17px;
	transition: transform 0.16s ease;
	width: 17px;
}

.nfs-brands-more__link:hover svg {
	transform: translateX(4px);
}

/* De categorieënlijst klapt open zodra je over de knop gaat. Het thema doet dat zelf
   al vanaf 1200px, maar met een regel die zwaarder weegt dan een gewone; vandaar
   dezelfde opbouw hier, zodat het ook op smallere schermen werkt. */
.electro-navigation .nfs-departments.departments-menu-v2 > .dropdown:hover > .dropdown-menu,
.electro-navigation .nfs-departments.departments-menu-v2 > .dropdown:focus-within > .dropdown-menu {
	display: block;
	opacity: 1;
	transform: none !important;
	visibility: visible;
}

.nfs-departments .dropdown-menu > li > a {
	padding: 9px 20px;
}

.nfs-departments .dropdown-menu > li > a:hover {
	color: var(--nfs-amber-dark);
}

/* De uitklaplijst viel achter de hero van de pagina, omdat die verderop in de
   pagina staat en dus later wordt getekend. De navigatiebalk krijgt daarom een
   eigen laag. */
.electro-navigation {
	position: relative;
	z-index: 20;
}

.nfs-departments .dropdown {
	position: relative;
}

.nfs-departments .dropdown-menu {
	left: 0;
	z-index: 30;
}

/* ------------------------------------------- winkelwagen in de zijbalk */

/* Het thema rekt de productlijst op tot bijna de volle schermhoogte, waardoor er
   onder één artikel een half scherm wit stond en het subtotaal eronder wegviel.
   De inhoud staat nu gewoon bovenaan en groeit mee met het aantal artikelen. */
.off-canvas-cart {
	display: flex;
	flex-direction: column;
}

.off-canvas-cart .cart-products {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.off-canvas-cart .dropdown-menu-mini-cart,
.off-canvas-cart .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.off-canvas-cart .woocommerce-mini-cart {
	flex: 0 1 auto;
	height: auto;
	max-height: calc(100vh - 300px);
	overflow-y: auto;
}

.off-canvas-cart__header {
	border-bottom: 1px solid var(--nfs-line);
	padding: 18px 30px 16px;
}

.off-canvas-cart__header .section-title {
	color: var(--nfs-navy);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0;
	text-transform: none;
}

.off-canvas-cart .mini_cart_item a:not(.remove) {
	color: var(--nfs-navy);
	font-weight: 600;
}

.off-canvas-cart .mini_cart_item .quantity {
	color: var(--nfs-muted);
}

/* Het kruisje om iets te verwijderen was knalrood; dat schreeuwt harder dan de
   knop waar het om gaat. */
.off-canvas-cart .mini_cart_item a.remove {
	color: var(--nfs-muted) !important;
	font-size: 18px;
}

.off-canvas-cart .mini_cart_item a.remove:hover {
	background: none !important;
	color: var(--nfs-amber-dark) !important;
}

/* Subtotaal als eigen regel boven de knoppen. Het thema zet die regel op
   display:none in de minikar; juist het bedrag wil je hier zien. */
.off-canvas-cart .dropdown-menu-mini-cart p.total,
.off-canvas-cart .woocommerce-mini-cart__total {
	align-items: baseline;
	border-top: 1px solid var(--nfs-line);
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 16px 30px 12px;
}

.off-canvas-cart .woocommerce-mini-cart__total strong {
	color: var(--nfs-text);
	font-size: 14px;
	font-weight: 600;
}

.off-canvas-cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
	color: var(--nfs-navy);
	font-size: 20px;
	font-weight: 700;
}

/* Twee knoppen in de huisstijl: afrekenen in amber, winkelwagen als lijnknop.
   Het lichtblauw van het thema hoort hier niet. */
/* Naast elkaar in de brede zijbalk; de tekst blijft op één regel doordat hij niet
   mag afbreken en een slag kleiner staat. Op een smalle telefoon is daar geen ruimte
   voor, daar gaan ze alsnog onder elkaar. */
.off-canvas-cart .woocommerce-mini-cart__buttons {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 1fr;
	padding: 4px 30px 0;
}

@media (max-width: 575px) {
	.off-canvas-cart .woocommerce-mini-cart__buttons {
		grid-template-columns: 1fr;
	}
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button {
	background-color: #fff !important;
	border: 1px solid var(--nfs-navy) !important;
	border-radius: 4px;
	color: var(--nfs-navy) !important;
	font-size: 12.5px;
	font-weight: 700;
	margin: 0 !important;
	padding: 12px 6px;
	text-align: center;
	white-space: nowrap;
	width: 100%;
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button:hover {
	border-color: var(--nfs-amber) !important;
	color: var(--nfs-amber-dark) !important;
}

/* Afrekenen is de knop waar het om gaat; die staat bovenaan. */
.off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout {
	order: -1;
	background-color: var(--nfs-amber) !important;
	border-color: var(--nfs-amber) !important;
	color: #fff !important;
}

.off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout:hover {
	background-color: var(--nfs-amber-dark) !important;
	border-color: var(--nfs-amber-dark) !important;
	color: #fff !important;
}

/* Eén regel geruststelling onder de knoppen, zodat de zijbalk niet eindigt in wit. */
.off-canvas-cart .widget_shopping_cart_content:after {
	color: var(--nfs-muted);
	content: "Wereldwijde verzending · afhalen in Urk is gratis";
	display: block;
	font-size: 12px;
	line-height: 1.5;
	padding: 14px 30px 20px;
}

.off-canvas-cart .woocommerce-mini-cart__empty-message {
	color: var(--nfs-muted);
	padding: 26px 30px;
}

/* ------------------------------------- garantie, retouren en account */

.nfs-hero--info {
	background-image:
		radial-gradient(900px 340px at 12% -30%, rgba(46, 122, 184, 0.5), transparent 62%),
		linear-gradient(135deg, #0e3355 0%, #1a5488 100%);
	margin-bottom: 46px;
}

/* Op de garantiepagina staat alleen het woord zelf in de band; zonder tekst eronder
   mag hij een slag lager. */
.nfs-hero--info .nfs-hero__inner {
	padding: 58px 15px 56px;
}

.nfs-hero--info .nfs-hero__title {
	margin: 0;
}

.nfs-hero--info .nfs-hero__title {
	font-size: 40px;
}

/* Op een telefoon terug naar dezelfde maat als bij de andere koppen. De 40 pixels
   hierboven gelden anders ook daar: de algemene regel voor .nfs-hero__title heeft
   wel een telefoonmaat, maar die weegt lichter dan deze en werd dus overstemd.
   Zo bleven de veelgestelde vragen, garantie en retourneren op 40 staan terwijl de
   rest op 28 stond (verzoek G Post, 31 augustus 2026). */
@media (max-width: 767px) {
	.nfs-hero--info .nfs-hero__title,
	.nfs-hero--request .nfs-hero__title {
		font-size: 28px;
	}
}

/* Genummerde stappen: het nummer als amber schijfje, de tekst ernaast. */
.nfs-numbered {
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
}

.nfs-numbered li {
	border-top: 1px solid var(--nfs-line);
	display: flex;
	gap: 18px;
	padding: 20px 0;
}

.nfs-numbered li:last-child {
	border-bottom: 1px solid var(--nfs-line);
}

.nfs-numbered__number {
	align-items: center;
	background-color: var(--nfs-amber);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: none;
	font-size: 14px;
	font-weight: 700;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.nfs-numbered__body strong {
	color: var(--nfs-navy);
	display: block;
	font-size: 16px;
	margin-bottom: 3px;
}

.nfs-numbered__body span {
	color: var(--nfs-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

/* Verwijzing naar de voorwaarden, rustig vlak met een amber randje links. */
.nfs-infobar {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-left: 3px solid var(--nfs-amber);
	border-radius: 8px;
	padding: 22px 26px 24px;
}

.nfs-infobar p {
	color: var(--nfs-text);
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0;
	max-width: 640px;
}

.nfs-infobar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px !important;
}

/* Mijn account: retourtabel en de knoppen eronder. */
.nfs-returns-table {
	margin-bottom: 22px;
	width: 100%;
}

.nfs-returns-table th {
	border-bottom: 1px solid var(--nfs-line);
	color: var(--nfs-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 10px 8px;
	text-align: left;
	text-transform: uppercase;
}

.nfs-returns-table td {
	border-bottom: 1px solid var(--nfs-line);
	padding: 14px 8px;
	vertical-align: middle;
}

.nfs-btn--small {
	font-size: 13px;
	padding: 9px 16px;
}

.nfs-account-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Inloggen: uitleg boven de twee formulieren, zodat duidelijk is dat een account
   mag maar niet moet. */
.nfs-login-intro {
	margin-bottom: 26px;
	max-width: 640px;
}

.nfs-login-intro__title {
	color: var(--nfs-navy);
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 8px;
}

.nfs-login-intro p {
	color: var(--nfs-muted);
	font-size: 15px;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--nfs-amber-dark);
	font-weight: 700;
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button {
	background-color: var(--nfs-amber) !important;
	border-color: var(--nfs-amber) !important;
	color: #fff !important;
}

/* Inloggen is de gewone weg en staat bovenaan; registreren zit eronder achter één
   knop. Het themasjabloon zette ze naast elkaar, waardoor je moest kiezen voordat
   je wist waartussen. */
.nfs-auth {
	margin: 0 auto;
	max-width: 520px;
}

.nfs-auth__panel {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	padding: 28px 30px 24px;
}

.nfs-auth__title {
	border: 0;
	color: var(--nfs-navy);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 18px;
	padding: 0;
}

.nfs-auth__lead {
	color: var(--nfs-muted);
	font-size: 14.5px;
	margin: -8px 0 18px;
}

.nfs-auth .form-row {
	margin-bottom: 16px;
}

.nfs-auth label {
	color: var(--nfs-text);
	font-size: 14px;
	font-weight: 600;
}

.nfs-auth .input-text {
	border: 1px solid var(--nfs-line);
	border-radius: 4px;
	padding: 12px 14px;
	width: 100%;
}

/* De focuskleur staat bij de algemene regels, zodat hij overal gelijk is. */

.nfs-auth__submit button {
	background-color: var(--nfs-amber) !important;
	border: 0 !important;
	border-radius: 4px;
	color: #fff !important;
	font-weight: 700;
	padding: 13px 26px;
	width: 100%;
}

.nfs-auth__submit button:hover {
	background-color: var(--nfs-amber-dark) !important;
}

.nfs-auth .woocommerce-form-login__rememberme {
	display: block;
	margin-bottom: 14px;
}

.nfs-auth .lost_password {
	margin: 12px 0 0;
	text-align: center;
}

/* De overstap naar registreren: één regel met een knop, met lijntjes ernaast. */
.nfs-auth__switch {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 0 0;
	position: relative;
	text-align: center;
}

.nfs-auth__switch:before {
	background-color: var(--nfs-line);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.nfs-auth__switch p {
	color: var(--nfs-text);
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

/* Dicht tot er op Registreren is geklikt of tot een poging is mislukt. */
.nfs-auth__register {
	display: none;
	margin-top: 22px;
}

.nfs-auth--register .nfs-auth__register {
	display: block;
}

.nfs-auth--register .nfs-auth__switch {
	display: none;
}

/* Eerst het e-mailadres, dan pas het wachtwoord (verzoek G Post, 31 augustus 2026).
   De tweede stap staat in de pagina maar niet in beeld; het script haalt hem
   tevoorschijn zodra het adres bekend is. Zonder script blijft alles staan zoals
   het was — vandaar dat het verbergen aan een klasse hangt die het script zet. */
.nfs-auth__form--stappen .nfs-auth__stap--wachtwoord {
	display: none;
}

.nfs-auth__form--stappen.nfs-auth__form--stap2 .nfs-auth__stap--adres {
	display: none;
}

.nfs-auth__form--stappen.nfs-auth__form--stap2 .nfs-auth__stap--wachtwoord {
	display: block;
}

/* In de tweede stap is inloggen met Google niet meer aan de orde: de keuze is
   dan al gemaakt. */
.nfs-auth__form--stap2 .nfs-google {
	display: none;
}

/* Anders wint een display uit de regels hieronder van het hidden-kenmerk. */
.nfs-auth [hidden] {
	display: none !important;
}

/* Het adres waarmee wordt ingelogd, met de weg terug ernaast. */
.nfs-auth__gekozen {
	align-items: center;
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 4px;
	display: flex;
	font-size: 14px;
	gap: 12px;
	justify-content: space-between;
	margin: 0 0 16px;
	padding: 10px 14px;
}

.nfs-auth__gekozen-adres {
	color: var(--nfs-navy);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nfs-auth__wijzig {
	background: none;
	border: 0;
	color: var(--nfs-amber-dark);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 13.5px;
	font-weight: 600;
	padding: 0;
	text-decoration: underline;
}

.nfs-auth__wijzig:hover {
	color: var(--nfs-navy);
}

/* De melding onder het adresveld: dat wij het adres niet kennen, of juist al wel. */
.nfs-auth__melding {
	background-color: rgba(194, 97, 15, 0.07);
	border: 1px solid rgba(194, 97, 15, 0.28);
	border-radius: 4px;
	color: var(--nfs-text);
	font-size: 14px;
	margin: -4px 0 16px;
	padding: 12px 14px;
}

.nfs-auth__meldingknop {
	background: none;
	border: 0;
	color: var(--nfs-amber-dark);
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-top: 6px;
	padding: 0;
	text-align: left;
	text-decoration: underline;
}

.nfs-auth__meldingknop:hover {
	color: var(--nfs-navy);
}

/* Inloggen met Google: één knop onder het formulier, met een scheiding erboven.
   Het logo en het witte vlak met de grijze rand zijn van Google zelf en horen zo
   te blijven; alleen de breedte en de ronding volgen de rest van de winkel. */
.nfs-google {
	margin: 20px 0 0;
}

.nfs-google__of {
	align-items: center;
	color: var(--nfs-muted);
	display: flex;
	font-size: 13px;
	gap: 12px;
	margin-bottom: 14px;
}

.nfs-google__of:before,
.nfs-google__of:after {
	background-color: var(--nfs-line);
	content: "";
	flex: 1 1 auto;
	height: 1px;
}

.nfs-google__knop {
	align-items: center;
	background-color: #fff;
	border: 1px solid #747775;
	border-radius: 4px;
	box-sizing: border-box;
	color: #1f1f1f !important;
	display: flex;
	font-size: 15px;
	font-weight: 600;
	gap: 12px;
	justify-content: center;
	line-height: 1.2;
	min-height: 46px;
	padding: 12px 20px;
	text-decoration: none !important;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.nfs-google__knop:hover,
.nfs-google__knop:focus {
	background-color: #f7f8f8;
	border-color: #5f6368;
	box-shadow: 0 1px 3px rgba(31, 31, 31, 0.16);
	color: #1f1f1f !important;
}

.nfs-google__knop:focus-visible {
	outline: 2px solid var(--nfs-amber);
	outline-offset: 2px;
}

.nfs-google__logo {
	flex: 0 0 auto;
	height: 18px;
	width: 18px;
}

.nfs-google__uitleg {
	color: var(--nfs-muted);
	display: block;
	font-size: 12.5px;
	margin-top: 8px;
	text-align: center;
}

/* Bij het registreren volgt hieronder nog het lijstje voordelen; dat plakte
   tegen het zinnetje onder de knop aan. Onder het inloggen staat niets meer,
   dus daar heeft deze regel geen gevolg. */
.nfs-google + * {
	margin-top: 24px;
}

/* De losse "of" en de kolommen van het thema hebben we niet meer nodig. */
.customer-login-form .or-text,
.customer-login-form:before {
	display: none;
}

/* Het ronde winkelwagenknopje op een productkaart kleurde bij hover cyaan uit de
   kleurenset van het thema. Hier wordt het marineblauw, met een wit karretje. */
li.product:hover .button::before,
li.product:hover .added_to_cart::before,
.owl-item .product:hover .button::before,
.owl-item .product:hover .added_to_cart::before,
ul.products > li.product .button:hover::before,
ul.products > li.product .added_to_cart:hover::before {
	background-color: var(--nfs-navy);
}

ul.products > li.product .button:hover,
ul.products > li.product .added_to_cart:hover,
li.product:hover .button,
li.product:hover .added_to_cart {
	color: #fff;
}

/* Ook het kortingsvlaggetje bij de accessoires onder de winkelwagen is rood. */
.nfs-combi__badge {
	background-color: var(--nfs-red);
}

/* Naast het logo tekent het thema nog een hamburgerknop voor zijn uitschuifmenu.
   Op de brede weergave hebben we de balk eronder al; die drie streepjes zeggen
   daar niets. Op mobiel komt de knop uit de eigen handheld-kop, dus die blijft. */
.masthead .header-logo-area .off-canvas-navigation-wrapper {
	display: none;
}

/* Op een telefoon liep de USP-balk als los zand: één regel, dan twee, dan één.
   Twee vaste kolommen naast elkaar leest rustiger en houdt de balk laag. */
@media (max-width: 767px) {
	.nfs-usp__inner {
		display: grid;
		gap: 10px 14px;
		grid-template-columns: 1fr 1fr;
		padding: 12px 15px;
	}

	.nfs-usp__item {
		align-items: flex-start;
		font-size: 12.5px;
		gap: 7px;
		line-height: 1.35;
	}

	.nfs-usp__item .nfs-icon {
		flex: none;
		height: 16px;
		margin-top: 1px;
		width: 16px;
	}
}

/* --------------------------------------------- voettekst op de telefoon */

/* Het thema eindigt op mobiel met een grijze balk en een rij lege icoontjes.
   Hier staat dezelfde marineblauwe voettekst als op de brede weergave. */
.handheld-footer {
	background-color: var(--nfs-navy);
	padding-top: 0 !important;
}

.handheld-footer .footer-social-icons {
	display: none;
}

.handheld-footer-bar,
.handheld-footer-bar-inner {
	background-color: var(--nfs-navy);
}

.handheld-footer-bar-inner {
	padding: 22px 15px 26px;
	text-align: center;
}

.handheld-footer .nfs-footer-logo {
	max-width: 190px;
}

.handheld-footer .nfs-footer-tagline {
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	line-height: 1.6;
	margin: 10px auto 0;
	max-width: 320px;
}

.nfs-mfoot {
	background-color: var(--nfs-navy);
	padding: 4px 0 8px;
}

.nfs-mfoot__inner {
	display: grid;
	gap: 10px 20px;
	grid-template-columns: 1fr 1fr;
	padding-bottom: 18px;
	padding-top: 22px;
}

.nfs-mfoot h3 {
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.nfs-mfoot__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfs-mfoot__list li {
	margin-bottom: 7px;
}

.nfs-mfoot__list a {
	color: rgba(255, 255, 255, 0.82);
	font-size: 13.5px;
}

.nfs-mfoot__list a:hover {
	color: var(--nfs-amber-light);
}

.nfs-mfoot__contact {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-bottom: 4px;
	padding-top: 18px;
}

.nfs-mfoot__address {
	align-items: center;
	color: rgba(255, 255, 255, 0.82);
	display: flex;
	font-size: 13.5px;
	gap: 8px;
	margin: 0 0 14px;
}

.nfs-mfoot__address .nfs-icon {
	color: var(--nfs-amber-light);
	flex: none;
	height: 17px;
	width: 17px;
}

.nfs-mfoot__actions {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
	margin: 0;
}

.nfs-mfoot__actions .nfs-btn {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	padding: 12px 10px;
}

.nfs-mfoot__actions .nfs-btn--ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.nfs-mfoot__actions .nfs-icon {
	height: 16px;
	width: 16px;
}

/* Het nieuwsbriefblok stond op mobiel te ruim in zijn jasje. */
@media (max-width: 767px) {
	.handheld-footer .nfs-newsletter__card {
		padding: 20px 18px 22px;
	}

	.handheld-footer .nfs-newsletter__text {
		font-size: 16px;
	}
}

.nfs-newsletter__done {
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

/* Zonder de kop "Hier hoort dit bij" staan het label en de uitleg onder elkaar. */
.nfs-combi__head {
	align-items: flex-start;
	display: block;
	margin-bottom: 20px;
}

.nfs-combi__head .nfs-combi__tag {
	margin-bottom: 12px;
}

.nfs-combi__head .nfs-combi__note {
	max-width: 620px;
}

/* De rij sociale iconen van het thema staat leeg: alleen lege vakjes met een
   randje. Weg, op alle schermen. */
.footer-social-icons {
	display: none !important;
}

/* Nu er drie punten in de USP-balk staan, loopt de derde over de volle breedte
   in plaats van scheef onder de eerste. */
@media (max-width: 767px) {
	.nfs-usp__item:nth-child(3) {
		grid-column: 1 / -1;
	}
}

/* Op een telefoon is de WhatsApp-knop alleen het logo; het venster met de vraag
   nam daar een derde van het scherm in beslag. */
@media (max-width: 767px) {
	.nfs-wa .nfs-wa__button span,
	.nfs-wa .nfs-wa__label {
		display: none;
	}

	.nfs-wa .nfs-wa__button {
		border-radius: 50%;
		height: 52px;
		justify-content: center;
		padding: 0;
		width: 52px;
	}

	.nfs-wa {
		bottom: 16px;
		right: 16px;
	}
}

/* ------------------------------------------- USP-balk als lopende regel */

/* Op de telefoon paste er hooguit twee naast elkaar en werd de balk hoog. Nu staat
   er één voordeel tegelijk, dat om de vier seconden vloeiend wisselt; de balk is
   daarmee één regel hoog. Puur CSS, dus hij loopt altijd.

   Tot 992 pixels en niet tot 768 (gemeld door G Post, 2 september 2026). Op een
   tablet en op een opengevouwen telefoon — rond de 830 pixels — paste de derde
   belofte er net niet meer bij en viel hij als losse regel onder de andere twee.
   Twee boven, een eronder: precies het scheve beeld dat wij elders ook niet willen.
   Een regel met een enkele belofte staat daar net zo goed als op een telefoon. */
@media (max-width: 991.98px) {
	.nfs-usp__inner {
		display: block;
		height: 34px;
		overflow: hidden;
		padding: 0 15px;
		position: relative;
	}

	/* Alle drie liggen ze op dezelfde plek boven op elkaar; alleen degene die aan de
	   beurt is staat aan. Doorzichtig maken is daarvoor niet genoeg: iets met
	   opacity 0 is onzichtbaar maar nog steeds aanklikbaar, en dan vangt de bovenste
	   uit de reeks elke tik. Wie op "Wereldwijde verzending" tikte kwam daardoor op
	   Over ons uit, want dat is het laatste punt en dat ligt bovenop (gemeld door
	   G Post, 31 augustus 2026). Vandaar visibility erbij: dat haalt ze ook echt weg
	   onder de vinger. Pointer-events staat er voor de zekerheid naast. */
	.nfs-usp__item {
		animation-duration: 12s;
		animation-iteration-count: infinite;
		animation-name: nfs-usp-cycle;
		animation-timing-function: ease-in-out;
		font-size: 13.5px;
		justify-content: center;
		left: 15px;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		visibility: hidden;
		white-space: nowrap;
	}

	.nfs-usp__item:nth-child(2) {
		animation-delay: 4s;
	}

	.nfs-usp__item:nth-child(3) {
		animation-delay: 8s;
	}

	/* Bij vier of meer punten schuift alleen de reeks op; de cyclus blijft gelijk,
	   dan wisselt hij wat sneller. */
	.nfs-usp__item:nth-child(4) {
		animation-delay: 12s;
	}

	@keyframes nfs-usp-cycle {
		0%   { opacity: 0; visibility: visible; pointer-events: auto; transform: translate(0, calc(-50% + 8px)); }
		4%   { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
		29%  { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%); }
		33%  { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(0, calc(-50% - 8px)); }
		100% { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(0, calc(-50% + 8px)); }
	}

	/* Wie beweging op zijn toestel heeft uitgezet, krijgt anders een lege balk: dan
	   loopt de cyclus niet en staat alles op onzichtbaar. Voor hem blijft het eerste
	   punt gewoon staan. */
	@media (prefers-reduced-motion: reduce) {
		.nfs-usp__item {
			animation: none;
		}

		.nfs-usp__item:first-child {
			opacity: 1;
			pointer-events: auto;
			transform: translateY(-50%);
			visibility: visible;
		}
	}

	/* Op een smal scherm draaien we de twee balken om: de voordelen wit met blauwe
	   letters, de balk met logo en iconen eronder blijft blauw. Zo staat de kop
	   los van de witte pagina en springt hij eruit.

	   Dit gold eerst alleen tot 768 pixels, waardoor een tablet twee blauwe balken
	   boven elkaar kreeg met de belofte er grauw in (gemeld door G Post, 4 september
	   2026: "mag je wit maken"). Nu loopt het omkleuren net zo ver als het draaien
	   zelf, tot 992 pixels — dus overal waar er één belofte tegelijk staat, staat
	   die op wit. */
	.nfs-usp {
		background-color: #fff;
		color: var(--nfs-navy);
	}

	.nfs-usp__item {
		color: var(--nfs-navy);
	}

	.nfs-usp__item .nfs-icon {
		color: var(--nfs-amber);
	}

	/* De blauwe balk mag wat meer hoogte hebben, zodat het logo groter kan staan
	   zonder tegen de randen aan te lopen. De maat van het logo zelf staat verderop,
	   bij de regel die de breedte begrenst. */
	.handheld-header-v2,
	.mobile-header-v1 {
		padding: 0;
	}

	.handheld-header-wrap {
		padding-bottom: 7px;
		padding-top: 7px;
	}

	/* De blauwe balk zat in de marge van de container, waardoor de witte kop er
	   als een randje omheen te zien was. De kop krijgt nu zelf het blauw, zodat de
	   balk van rand tot rand doorloopt; de scheidingslijn eronder kan dan weg. */
	.site-header,
	.handheld-header-wrap {
		background-color: var(--nfs-navy);
		border-bottom: 0;
	}

	/* Hetzelfde witte randje onder de balk als op een computer (verzoek G Post,
	   31 augustus 2026). Op een telefoon staat het blauw op de kop zelf, dus de
	   marge komt daar onder en blijft dus wit. Dezelfde 0.5em als op de brede
	   versie, zodat het overal gelijk oogt. */
	.site-header {
		margin-bottom: 0.5em;
	}

	/* Reviews naast elkaar met een veeg, in plaats van drie hoge kaarten onder
	   elkaar. Alleen op de telefoon: op een tablet passen de drie kaarten gewoon
	   naast elkaar, en dan is vegen alleen maar lastiger. */
	@media (max-width: 767px) {
		.nfs-reviews__grid {
			-webkit-overflow-scrolling: touch;
			display: flex;
			gap: 12px;
			grid-template-columns: none;
			margin: 0 -15px;
			overflow-x: auto;
			padding: 2px 15px 10px;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
		}

		.nfs-reviews__grid::-webkit-scrollbar {
			display: none;
		}

		.nfs-reviews__grid .nfs-review {
			flex: 0 0 76%;
			scroll-snap-align: start;
		}

		.nfs-review__media img {
			height: 88px;
		}

		.nfs-review__text {
			font-size: 14px;
		}
	}
}

/* Het thema zet op smalle schermen `overflow: scroll` op het kruimelpad, zodat een
   lang pad te schuiven is. Daarmee staan er altijd schuifbalken met pijltjes
   omheen, ook als er niets te schuiven valt. Schuiven mag blijven, de balken niet. */
.woocommerce-breadcrumb {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.woocommerce-breadcrumb::-webkit-scrollbar {
	display: none;
}

/* ---------------------------------------- winkelwagen op de telefoon */

@media (max-width: 767px) {
	/* De regels in het totalenvak liepen tot tegen de rand van het kader; de
	   blokken zetten daar hun eigen binnenruimte op nul. */
	.wc-block-cart__sidebar {
		padding: 6px 0 10px;
	}

	.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
	.wc-block-cart__sidebar .wc-block-cart__totals-title,
	.wc-block-cart__sidebar .wc-block-cart__submit-container,
	.wc-block-cart__sidebar .wc-block-components-panel__button,
	.wc-block-cart__sidebar .wc-block-components-totals-item {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Het eindbedrag stond in koptekstformaat; een slag kleiner leest rustiger. */
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
	.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
		font-size: 18px;
	}

	/* De paginatitel besloeg op een telefoon bijna de halve breedte.

	   Deze regel stond er al sinds de winkelwagen, maar deed niets: het thema zet
	   de maat met ".page .entry-header h1" en dat weegt zwaarder dan een klasse op
	   de body alleen. Vandaar dat "Mijn account" op een telefoon op 43 pixels bleef
	   staan (verzoek G Post, 31 augustus 2026). Met .entry-header erbij wint deze
	   regel wel, en geldt hij meteen voor elke pagina met een gewone paginatitel —
	   winkelwagen, afrekenen, Mijn account en alles wat daar nog bij komt. */
	.page .entry-header .entry-title,
	.page .entry-header .page-title,
	.page .entry-header h1 {
		font-size: 26px;
		line-height: 1.2;
	}
}

/* ------------------------------------- uitschuifmenu op de telefoon */

/* De balk met Sale, Merken, Installatie, Over ons, Garantie en Contact bestaat op
   een telefoon niet. Die pagina's staan nu bovenaan in het uitschuifmenu, met de
   categorieën eronder achter één lijn. */
.off-canvas-navigation .nav > li > a {
	font-size: 15px;
	padding: 11px 20px;
}

.off-canvas-navigation .nav > li.nfs-oc-break {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin-top: 10px;
	padding-top: 10px;
}

.off-canvas-navigation.light .nav > li.nfs-oc-break {
	border-top-color: var(--nfs-line);
}



/* ------------------------------- contactlijnen op de telefoon */

/* Drie kaarten onder elkaar met kop, nummer, uitleg en knop nemen op een telefoon
   een heel scherm in beslag. Daar staan nu drie icoontjes naast elkaar; de hele
   tegel is de knop, dus bellen, appen of mailen is één tik. */
@media (max-width: 767px) {
	.nfs-contact-lines__grid {
		gap: 10px;
		grid-template-columns: repeat(3, 1fr);
	}

	.nfs-line {
		padding: 18px 6px;
		position: relative;
	}

	.nfs-line__title,
	.nfs-line__value {
		display: none;
	}

	.nfs-line__icon {
		height: 54px;
		margin-bottom: 0;
		width: 54px;
	}

	.nfs-line__icon .nfs-icon {
		height: 26px;
		width: 26px;
	}

	/* De knop ligt onzichtbaar over de hele tegel; de tekst blijft in de code staan
	   voor schermlezers. */
	.nfs-line .nfs-btn {
		background-color: transparent !important;
		border: 0 !important;
		border-radius: 10px;
		inset: 0;
		overflow: hidden;
		padding: 0;
		position: absolute;
		text-indent: -999em;
		white-space: nowrap;
	}
}

/* Zonder de drie doorverwijzingen ernaast staat het bezoekadres alleen in het blok;
   dan mag het over de volle breedte, in plaats van in een halve kolom. */
.nfs-contact-visit .nfs-warehouse__inner {
	display: block;
}

.nfs-contact-visit .nfs-warehouse__body {
	max-width: 680px;
}

/* Het logo in de mobiele kop werd platgedrukt door wat ernaast staat: het
   menuknopje links en drie icoontjes rechts. Het accountknopje kan daar weg —
   inloggen staat in het uitschuifmenu en in de voettekst — en de rest schuift
   dichter op elkaar. Wat vrijkomt gaat naar het logo. */
@media (max-width: 767px) {
	.handheld-header-v2 .handheld-header-links > ul > li.my-account,
	.mobile-header-v1 .handheld-header-links > ul > li.my-account {
		display: none;
	}

	.handheld-header-v2 .handheld-header-links > ul > li,
	.mobile-header-v1 .handheld-header-links > ul > li {
		padding-left: 6px;
	}


	.handheld-header-v2 .off-canvas-navbar-toggle-buttons,
	.mobile-header-v1 .off-canvas-navbar-toggle-buttons {
		margin-right: 0;
	}

	/* Het menuknopje en de rij icoontjes hadden allebei nog de kolommarge van het
	   thema om zich heen staan: bij elkaar zo'n 30 pixels lucht die niets doet. Die
	   ruimte gaat naar het logo. */
	.handheld-header-v2 .off-canvas-navigation-wrapper,
	.mobile-header-v1 .off-canvas-navigation-wrapper {
		padding-left: 6px;
		padding-right: 6px;
	}

	.handheld-header-v2 .handheld-header-links,
	.mobile-header-v1 .handheld-header-links {
		padding-left: 0;
		/* Het telbolletje van de winkelwagen steekt rechts buiten het icoontje uit;
		   deze marge houdt het binnen de balk. */
		padding-right: 14px;
	}

	/* Het thema koppelt het logo met height: 100% aan de hoogte van de rij, en die
	   wordt bepaald door de icoontjes. Daardoor bleef het logo klein wat je ook met
	   de maximale hoogte deed. Los van de rij, met een eigen maat, wordt hij groter
	   en groeit de rij netjes mee. De breedte is begrensd op wat er tussen het
	   menuknopje en de icoontjes overblijft; anders loopt de winkelwagen van de
	   balk af. */
	.handheld-header-v2 .header-logo,
	.mobile-header-v1 .header-logo {
		min-width: 0;
	}

	.handheld-header-v2 .header-logo img,
	.mobile-header-v1 .header-logo img,
	.nfs-handheld-logo {
		height: auto;
		max-height: 56px;
		/* Het logo krijgt wat er overblijft naast het menuknopje, de taalkeuze met
		   code, het vergrootglas en de winkelwagen; dat is een vaste breedte, dus
		   rekenen we die er gewoon af. */
		max-width: min(185px, calc(100vw - 258px));
		width: auto;
	}

	/* De logokolom pakt de ruimte die overblijft en zet het logo daarin in het midden.
	   Helemaal in het midden van de balk komt hij niet: links staat één knopje van 75
	   pixels, rechts drie van samen 150. Dat verschil is alleen weg te werken door het
	   logo kleiner te maken of rechts iets weg te halen, en dat is een keuze die niet
	   aan de opmaak is. */
	/* Het logo echt in het midden van de balk. Dat lukt alleen als links en rechts
	   even breed zijn, en daarvoor moest er rechts iets af: de landcode naast het
	   vlaggetje. Het vlaggetje zelf blijft staan, en beide kanten krijgen dezelfde
	   vaste breedte. Het logo houdt zijn hoogte en verliest een paar pixels breedte;
	   dat is de prijs van precies in het midden. */
	/* Het logo krijgt de ruimte die tussen het menuknopje en de pictogrammen overblijft
	   en staat daar in het midden. Precies in het midden van de hele balk krijg ik hem
	   niet zonder hem kleiner te maken: links staat één knopje van 75 pixels, rechts
	   staan er drie van samen 135. Voor een logo van 160 breed zou er aan weerskanten
	   195 min 80 nodig zijn, en dat is er niet. Wil je hem écht in het midden, dan moet
	   de taalkeuze naar het uitschuifmenu; dan is er ruimte zat.
	   Zie het bericht van 28 augustus 2026 in de groep. */
	.handheld-header-v2 .header-logo {
		display: flex;
		flex: 1 1 auto;
		justify-content: center;
		min-width: 0;
	}

	.handheld-header .nfs-hh-lang .nfs-lang__code,
	.handheld-header-v2 .nfs-lang__code {
		display: none;
	}
}

/* Taalkeuze in de mobiele kop: vlaggetje met de code, zo smal mogelijk. */
.handheld-header-links .language {
	position: relative;
}

.nfs-hh-lang {
	align-items: center;
	display: inline-flex;
	gap: 5px;
}

.nfs-hh-lang__flag svg {
	border-radius: 2px;
	display: block;
	height: 12px;
	width: 18px;
}

.handheld-header-links .language select {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0 2px 0 0;
	width: auto;
}

/* Op de meeste telefoons valt de landcode weg en schuiven de icoontjes dichter op
   elkaar; het vlaggetje zegt genoeg en zo blijft er ruimte over voor een groter
   logo, met de winkelwagen nog netjes ernaast. Alleen op de brede toestellen past
   de code er nog bij. */
@media (max-width: 413px) {
	.nfs-hh-lang .nfs-lang__toggle .nfs-lang__code {
		display: none;
	}

	.handheld-header-v2 .handheld-header-links > ul > li,
	.mobile-header-v1 .handheld-header-links > ul > li {
		padding-left: 7px;
	}

	/* Zonder de landcode is er 28 pixels meer over voor het logo. */
	.handheld-header-v2 .header-logo img,
	.mobile-header-v1 .header-logo img,
	.nfs-handheld-logo {
		max-width: min(185px, calc(100vw - 230px));
	}

	.nfs-hh-lang {
		gap: 2px;
	}

	.handheld-header-v2 .handheld-header-links .columns-3 a,
	.handheld-header-v2 .handheld-header-links i {
		font-size: 20px;
	}
}

/* ------------------------------------------------------------------ FAQ */

/* De vragen staan in <details>: de antwoorden staan altijd in de paginabron, dus
   zoekmachines lezen ze mee, terwijl het scherm rustig blijft. */
.nfs-faq {
	margin: 0 auto;
	max-width: 820px;
}

.nfs-faq__item {
	border-bottom: 1px solid var(--nfs-line);
}

.nfs-faq__item:first-child {
	border-top: 1px solid var(--nfs-line);
}

.nfs-faq__q {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 14px;
	list-style: none;
	padding: 18px 0;
	position: relative;
}

.nfs-faq__q::-webkit-details-marker {
	display: none;
}

.nfs-faq__q h2 {
	color: var(--nfs-navy);
	flex: 1;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

/* Pijltje dat omklapt zodra het antwoord openstaat. */
.nfs-faq__q:after {
	border-bottom: 2px solid var(--nfs-amber);
	border-right: 2px solid var(--nfs-amber);
	content: "";
	flex: none;
	height: 9px;
	margin-top: 6px;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
	width: 9px;
}

.nfs-faq__item[open] .nfs-faq__q:after {
	transform: rotate(-135deg);
	margin-top: 10px;
}

.nfs-faq__a {
	padding: 0 34px 20px 0;
}

.nfs-faq__a p {
	color: var(--nfs-text);
	font-size: 15px;
	line-height: 1.75;
	margin: 0;
	max-width: 700px;
}

.nfs-faq__a a {
	color: var(--nfs-amber-dark);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.nfs-faq__q h2 {
		font-size: 15.5px;
	}

	.nfs-faq__a p {
		font-size: 14.5px;
	}
}

/* Slot van de FAQ: links de contactmogelijkheden, rechts de stap naar de winkel. */
.nfs-faq-end__inner {
	display: grid;
	gap: 18px;
	grid-template-columns: 1.35fr 1fr;
	max-width: 980px;
}

.nfs-faq-end__card {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	padding: 26px 28px 28px;
}

.nfs-faq-end__card--shop {
	align-items: flex-start;
	background-color: var(--nfs-navy);
	border-color: var(--nfs-navy);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nfs-faq-end__title {
	color: var(--nfs-navy);
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 8px;
}

.nfs-faq-end__card--shop .nfs-faq-end__title {
	color: #fff;
	margin-bottom: 18px;
}

.nfs-faq-end__text {
	color: var(--nfs-muted);
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0 0 18px;
}

.nfs-faq-end__actions {
	margin: auto 0 0;
}

/* Zonder tekst staat er alleen een kop en een knop; die horen bij elkaar te blijven
   in plaats van naar de onder- en bovenrand te worden getrokken. */
.nfs-faq-end__card--shop .nfs-faq-end__actions {
	margin: 0;
}

.nfs-faq-end__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nfs-faq-end__link {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 40px;
	color: var(--nfs-navy);
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 9px;
	padding: 10px 18px;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.nfs-faq-end__link .nfs-icon {
	color: var(--nfs-amber);
	height: 17px;
	width: 17px;
}

.nfs-faq-end__link:hover {
	border-color: var(--nfs-amber);
	color: var(--nfs-amber-dark);
}

.nfs-faq-end__link--whatsapp .nfs-icon {
	color: #128c7e;
}

.nfs-faq-end__link--whatsapp:hover {
	border-color: #25d366;
	color: #128c7e;
}

@media (max-width: 767px) {
	.nfs-faq-end__inner {
		grid-template-columns: 1fr;
	}

	.nfs-faq-end__link {
		width: 100%;
	}
}

/* ------------------------------------------------- catalogusstand (tijdelijk) */

.nfs-catalog-bar {
	background-color: #fdf3e7;
	border-bottom: 1px solid #f0dcc2;
	color: #7a4508;
	font-size: 13.5px;
}

.nfs-catalog-bar__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	justify-content: center;
	padding: 9px 15px;
	text-align: center;
}

.nfs-catalog-bar__link {
	color: var(--nfs-amber-dark);
	font-weight: 600;
	text-decoration: underline;
}

.nfs-catalog-bar__link:hover,
.nfs-catalog-bar__link:focus {
	color: var(--nfs-amber);
}

.nfs-catalog-note {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	margin: 18px 0 22px;
	padding: 18px 20px 20px;
}

.nfs-catalog-note__text {
	color: var(--nfs-text);
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0 0 14px;
}

.nfs-catalog-note__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* De lege plek naast de prijs waar het bestelknopje stond. */
.nfs-catalog-mode .add-to-cart-wrap:empty {
	display: none;
}

/* Zonder bestelfunctie heeft een winkelwagen geen zin; deze knoppen tekent het
   thema op vier plekken, dus ze gaan hier in één keer weg. */
.nfs-catalog-mode .header-icon__cart,
.nfs-catalog-mode .off-canvas-cart,
.nfs-catalog-mode .handheld-header .cart,
.nfs-catalog-mode .footer-cart-contents,
.nfs-catalog-mode .nfs-handheld-cart {
	display: none !important;
}

@media (max-width: 767px) {
	.nfs-catalog-bar__inner {
		font-size: 12.5px;
		padding: 8px 14px;
	}
}

/* ------------------------------------------------------------------ taalkeuze */

/* De vertaalmachine schuift standaard een eigen balk boven de pagina en zet daar
   het hele scherm voor omlaag. Die balk hoort niet bij de huisstijl en de
   taalkeuze staat al in de kop. Het bedieningspaneeltje zelf blijft wel in de
   pagina staan — met display:none erop stopt de vertaling — maar dan buiten beeld.
   Daarom gaat alleen het venster (een iframe) weg en niet alles wat de
   vertaalmachine een skiptranslate-klasse geeft. */
iframe.skiptranslate,
.goog-te-banner-frame {
	height: 0 !important;
	position: absolute !important;
	top: -9999px !important;
	visibility: hidden !important;
}

.goog-te-balloon-frame,
#goog-gt-tt {
	display: none !important;
}

body {
	top: 0 !important;
}

#nfs-translate {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 0;
}

/* De onderstreping die de vertaalmachine onder vertaalde woorden zet. */
font[style],
.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------- taalknop met lijstje */

.nfs-lang {
	position: relative;
}

/* Het thema geeft knoppen in de kop een eigen achtergrond en ronde hoeken; die
   moeten hier weg, anders staat er een witte pil om het vlaggetje. Vandaar het
   uitroepteken: de regel van het thema is specifieker dan deze. */
.nfs-lang__toggle {
	align-items: center;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 7px;
	line-height: 1;
	padding: 4px 2px;
}

.nfs-lang__flag {
	display: block;
	line-height: 0;
	width: 22px;
}

.nfs-lang__flag svg {
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(15, 53, 87, 0.15);
	display: block;
	height: auto;
	width: 100%;
}

.nfs-lang__code {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.nfs-lang__caret {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	display: block;
	transition: transform 0.15s ease;
}

.nfs-lang.is-open .nfs-lang__caret {
	transform: rotate(180deg);
}

.nfs-lang__menu {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(15, 53, 87, 0.16);
	left: 0;
	list-style: none;
	margin: 6px 0 0;
	min-width: 190px;
	padding: 6px;
	position: absolute;
	top: 100%;
	z-index: 1200;
}

.nfs-lang__item {
	align-items: center;
	border-radius: 5px;
	color: var(--nfs-text);
	display: flex;
	font-size: 13.5px;
	gap: 10px;
	padding: 7px 9px;
	text-decoration: none;
	white-space: nowrap;
}

.nfs-lang__item:hover,
.nfs-lang__item:focus {
	background-color: var(--nfs-band);
	color: var(--nfs-navy);
}

.nfs-lang__item .nfs-lang__code {
	color: var(--nfs-navy);
	font-size: 12px;
	width: 22px;
}

.nfs-lang__item.is-current {
	background-color: var(--nfs-band);
	font-weight: 600;
}

/* In de kop van de computerversie staat de knop op een lichte achtergrond. */
.nfs-cluster .nfs-lang__toggle {
	color: var(--nfs-navy);
}

/* In de donkere balk van de telefoonversie is alles wit en wat compacter, en
   klapt het lijstje aan de rechterkant uit zodat hij binnen het scherm blijft. */
.nfs-hh-lang .nfs-lang__toggle {
	gap: 5px;
	padding: 4px 0;
}

.nfs-hh-lang .nfs-lang__flag {
	width: 18px;
}

.nfs-hh-lang .nfs-lang__toggle .nfs-lang__code {
	font-size: 12.5px;
	letter-spacing: 0.04em;
}

/* Het menu klapt naar rechts open, want de vlag staat sinds 4 september links in
   de balk. Met de oude uitlijning (vastgezet aan de rechterkant) liep de lijst
   vanaf die plek naar links het scherm uit en stonden de talen half afgesneden:
   "erlands" in plaats van "Nederlands" (gemeld door G Post). */
.nfs-hh-lang .nfs-lang__menu {
	left: 0;
	max-width: calc(100vw - 24px);
	right: auto;
}

/* Het thema geeft elke link in de telefoonbalk een vaste breedte van 22 pixels en
   een icoonformaat; dat geldt ook voor de links in ons taallijstje, waardoor de
   namen eruit vielen. Hier zetten we dat voor dat lijstje terug. */
/* Wit op de donkere balk. Het thema kleurt knoppen in de kop met een regel die
   specifieker is dan alles wat hier redelijkerwijs te schrijven valt; vandaar het
   uitroepteken. */
/* Deze regels hingen aan .handheld-header-links, en daar zat de taalknop tot
   4 september ook in. Sinds hij links naast het menuknopje staat valt hij daar
   buiten, en verloor het lijstje zijn hele opmaak: geen breedte, geen uitlijning,
   witte tekst op wit. Vandaar dat beide plekken nu genoemd staan. */
.handheld-header-links .nfs-hh-lang .nfs-lang__toggle,
.nfs-hh-taal .nfs-hh-lang .nfs-lang__toggle {
	color: #fff !important;
}

.handheld-header-links .nfs-hh-lang .nfs-lang__menu,
.nfs-hh-taal .nfs-hh-lang .nfs-lang__menu {
	width: 210px;
}

.handheld-header-links .nfs-hh-lang .nfs-lang__menu li > a,
.nfs-hh-taal .nfs-hh-lang .nfs-lang__menu li > a {
	align-items: center;
	color: var(--nfs-text);
	display: flex;
	font-size: 13.5px;
	gap: 10px;
	width: auto;
}

.handheld-header-links .nfs-hh-lang .nfs-lang__menu li + li,
.nfs-hh-taal .nfs-hh-lang .nfs-lang__menu li + li {
	margin-left: 0;
}

.handheld-header-links .nfs-hh-lang .nfs-lang__menu .nfs-lang__flag,
.nfs-hh-taal .nfs-hh-lang .nfs-lang__menu .nfs-lang__flag {
	width: 22px;
}

.handheld-header-links .nfs-hh-lang .nfs-lang__menu .nfs-lang__code,
.nfs-hh-taal .nfs-hh-lang .nfs-lang__menu .nfs-lang__code {
	color: var(--nfs-navy);
	display: block;
	font-size: 12px;
	width: 22px;
}

/* ------------------------------------- productrijen om doorheen te vegen (mobiel) */

/* Op een telefoon stonden er twee producten naast elkaar en moest je voor de rest
   verder naar beneden. Per onderdeel is dat een lange sliert. Nu staat elke reeks
   op één regel waar je zijwaarts doorheen veegt: je ziet er twee staan en het
   derde steekt er net uit, zodat zichtbaar is dat er meer achter zit. */
/* Het thema houdt op elk scherm dertig pixels wit aan weerszijden van de inhoud.
   Op een telefoon is dat vijftien procent van de breedte, wat je vooral terugziet
   in kleinere productfoto's. Veertien pixels is genoeg om de tekst van de rand te
   houden. */
@media (max-width: 767px) {
	.container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 767px) {
	.nfs-row .products {
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		gap: 8px;
		margin-left: -16px;
		margin-right: -16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding: 2px 16px 10px;
		scroll-padding-left: 16px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.nfs-row .products::-webkit-scrollbar {
		display: none;
	}

	.nfs-row .products > li.product {
		flex: 0 0 auto;
		scroll-snap-align: start;
		width: 47.5%;
	}

	/* De verticale streep die het thema tussen de kaarten zet heeft hier geen doel
	   meer; de kaarten staan al los van elkaar. */
	.nfs-row .products > li.product::after {
		display: none;
	}
}

/* Op een telefoon is de foto het belangrijkste van de kaart: daar koopt iemand op.
   Die staat nu bovenaan en over de volle breedte, in plaats van als klein plaatje
   onder de categorie en de naam. De kaart wordt er tegelijk korter van. */
@media (max-width: 767px) {
	.products > .product .product-inner,
	.owl-item > .product .product-inner {
		padding: 8px 9px 10px;
	}

	/* De naam en de foto zitten samen in één link; hier komt de foto eerst. */
	.products > .product .woocommerce-loop-product__link {
		display: flex;
		flex-direction: column;
	}

	.products > .product .product-thumbnail {
		aspect-ratio: 1 / 1;
		background-color: #fff;
		border-radius: 5px 5px 0 0;
		margin: -8px -9px 8px;
		order: -1;
		overflow: hidden;
		width: auto;
	}

	.products > .product .product-thumbnail > img,
	.products > .product .wp-post-image {
		height: 100%;
		max-height: 100%;
		object-fit: contain;
		width: 100%;
	}

	/* De categorieregel in kleine kapitalen kost een hele regel en zegt naast de
	   productnaam weinig; op dit formaat gaat die eraf. */
	.products > .product .loop-product-categories {
		display: none;
	}

	.woocommerce-loop-product__title {
		font-size: 13.5px;
	}

	/* De regels onder de foto compact houden, anders wint de tekst het alsnog van
	   het beeld en wordt de kaart weer lang. */
	.products > .product .nfs-stock {
		font-size: 11.5px;
		white-space: nowrap;
	}

	.nfs-row .products > li.product .nfs-loop-view {
		font-size: 12.5px;
		padding-left: 6px;
		padding-right: 6px;
		white-space: nowrap;
	}

	.nfs-row .products > li.product .woocommerce-price-suffix {
		font-size: 11px;
	}
}

/* ---------------------------------------------------------------- filters */

/* De zijbalk van de shop kwam nog uit het thema: turkooizen strepen en schuifjes,
   Engelse koppen en een grijze knop. Hier krijgt hij de huisstijl. */
.sidebar .widget {
	margin-bottom: 14px;
	padding: 16px 18px 18px;
}

.sidebar .widget-title {
	color: var(--nfs-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 12px;
	padding-bottom: 10px;
	position: relative;
	text-transform: uppercase;
}

/* Het accentstreepje onder de kop. Het thema tekent dat met een border in zijn
   eigen turkoois; die zetten we uit en vervangen we door een oranje balkje. */
.sidebar .widget-title:after,
.sidebar-blog .widget-title:after {
	background-color: var(--nfs-amber);
	border: 0;
	bottom: -1px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 34px;
}

.sidebar .widget-title + .widget-title,
.widget_electro_products_filter .widget {
	background: none;
	border: 0;
	margin-bottom: 0;
	padding: 0;
}

.widget_electro_products_filter .widget + .widget {
	border-top: 1px solid var(--nfs-line);
	margin-top: 16px;
	padding-top: 16px;
}

.widget_electro_products_filter .widget .widget-title {
	font-size: 13px;
	padding-bottom: 0;
	text-transform: none;
}

.widget_electro_products_filter .widget .widget-title:after {
	display: none;
}

/* De zijbalk als één geheel (verzoek G Post, 31 augustus 2026).
   Categorieën en filters stonden als twee losse witte vlakken onder elkaar, met
   een naad ertussen en met twee verschillende koppen: de een gewoon, de ander in
   hoofdletters met een oranje streepje. Nu is het één vlak met een lijn tussen de
   onderdelen, en zien beide koppen er hetzelfde uit.

   Alleen vanaf 1200 pixels: daaronder schuift diezelfde zijbalk als paneel open
   vanaf de knop Filters, en die telefoonversie is goed zoals hij is. */
@media (min-width: 1200px) {
	.sidebar {
		background-color: #fff;
		border: 1px solid var(--nfs-line);
		border-radius: 6px;
		overflow: hidden;
	}

	.sidebar > .widget {
		background: none;
		border: 0;
		border-radius: 0;
		margin: 0;
		padding: 18px 18px 16px;
	}

	.sidebar > .widget + .widget {
		border-top: 1px solid var(--nfs-line);
	}

	/* De kop boven de categorieën is bij dit thema geen widget-title maar een los
	   stukje tekst in de lijst zelf; daardoor kreeg hij niet dezelfde vorm als
	   FILTERS eronder. Hier krijgt hij die alsnog. */
	.widget_product_categories .product-categories > li.product_cat > span {
		color: var(--nfs-navy);
		display: block;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.02em;
		margin-bottom: 12px;
		/* Het thema zet hier 28px links; de kop stond daardoor ingesprongen ten
		   opzichte van zijn eigen oranje streepje en ten opzichte van FILTERS. */
		padding-left: 0;
		padding-bottom: 10px;
		position: relative;
		text-transform: uppercase;
	}

	/* Voor elke categorienaam staat een leeg blokje van 29 pixels: daar zou een
	   uitklappijltje komen als er onderliggende categorieën waren. Die zijn er
	   niet, dus het schoof de hele lijst voor niets naar rechts. */
	.sidebar .widget_product_categories li a > span.no-child {
		display: none;
	}

	.widget_product_categories .product-categories > li.product_cat > span::after {
		background-color: var(--nfs-amber);
		bottom: -1px;
		content: "";
		height: 2px;
		left: 0;
		position: absolute;
		width: 34px;
	}

	/* Het aantal hoorde achter de naam te blijven staan. Bij een lange naam als
	   "Stuurautomaten & trackpilot" viel het op de volgende regel, helemaal links
	   onder de tekst. Nu staat het rechts uitgelijnd op dezelfde regel.

	   Met .sidebar ervoor, want verderop staat op deze lijst nog display:block; dat
	   is even zwaar en staat later, en zou het anders overnemen. */
	.sidebar .widget_product_categories li a {
		align-items: baseline;
		display: flex;
		gap: 10px;
	}

	/* Het aantal met margin-left:auto naar rechts en niet met space-between: in
	   deze regel zit vóór de naam nog een leeg element van het thema, en dat telt
	   als eerste onderdeel — de naam kwam daardoor in het midden te hangen. */
	.sidebar .widget_product_categories li .count {
		flex: 0 0 auto;
		margin-left: auto;
	}

	/* De lijst stond ingesprongen ten opzichte van de kop erboven; in één vlak
	   valt dat op. Nu beginnen kop en regels op dezelfde lijn. */
	.sidebar .widget_product_categories .product-categories > li.product_cat > ul {
		padding-left: 0;
	}
}

/* Categorielijst: rustige regels met het aantal er licht achter. */
.widget_product_categories ul,
.widget_product_categories .product-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget_product_categories .product-categories > li > ul {
	border: 0;
}

.widget_product_categories li a {
	color: var(--nfs-text);
	display: block;
	font-size: 13.5px;
	padding: 7px 0;
}

.widget_product_categories li a:hover {
	color: var(--nfs-amber-dark);
}

.widget_product_categories li .count {
	color: var(--nfs-muted);
	font-size: 12px;
}

.widget_product_categories .current-cat > a {
	color: var(--nfs-navy);
	font-weight: 700;
}

.widget_product_categories .show-all-cat-dropdown {
	color: var(--nfs-navy);
	cursor: pointer;
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	padding: 7px 0;
}

/* Prijsschuif in marineblauw met oranje grepen, in plaats van het turkoois van
   het thema. De selectors beginnen met .widget_price_filter omdat het thema zijn
   eigen kleuren daar ook op zet; korter geschreven wint die het. */
.widget_price_filter .price_slider_wrapper .ui-slider,
.widget_price_filter .price_slider_wrapper .ui-widget-content {
	background-color: var(--nfs-line);
	border-radius: 3px;
	height: 4px;
	margin: 6px 9px 18px;
}

.widget_price_filter .ui-slider .ui-slider-range {
	background-color: var(--nfs-navy);
	border-radius: 3px;
	height: 4px;
	top: 0;
}

.widget_price_filter .ui-slider .ui-slider-handle,
.widget_price_filter .ui-slider .ui-slider-handle:last-child {
	background-color: #fff;
	border: 3px solid var(--nfs-amber);
	box-shadow: 0 1px 3px rgba(15, 53, 87, 0.2);
	height: 17px;
	margin-top: -7px;
	width: 17px;
}

.widget_price_filter .ui-slider .ui-slider-handle:last-child {
	margin-left: -17px;
}

.widget_price_filter .price_slider_amount .price_label {
	color: var(--nfs-navy);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 14px;
}

/* De knoppenstijl van WooCommerce zelf is hier hardnekkiger dan onze eigen regel,
   vandaar het uitroepteken; anders blijft het een grijze knop. */
.widget_price_filter .price_slider_amount .button {
	background-color: var(--nfs-amber) !important;
	border: 0;
	border-radius: 4px;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
}

.widget_price_filter .price_slider_amount .button:hover,
.widget_price_filter .price_slider_amount .button:focus {
	background-color: var(--nfs-amber-dark) !important;
	color: #fff !important;
}

/* De categorielijst zat in een tweede kader binnen het kader van de widget; één
   omlijning is genoeg. Het thema tekent dat kader met een rand van twee pixels om
   de hele lijst. */
.widget_product_categories .product-categories,
.widget_product_categories .widget-title + ul,
.widget_product_categories .category-single > li > ul,
.widget_product_categories .show-all-cat {
	border: 0;
	border-radius: 0;
}

.widget_product_categories ul li {
	border-top: 1px solid var(--nfs-line);
}

.widget_product_categories .category-single .show-all-cat .show-all-cat-dropdown {
	border-bottom: 0;
	padding: 7px 0;
}

.widget_product_categories .category-single > li > ul:last-child,
.widget_product_categories .category-single .show-all-cat .show-all-cat-dropdown + ul {
	padding: 0;
}

.widget_product_categories .show-all-cat > li > ul {
	border: 0;
	padding-left: 0;
}

.widget_product_categories .show-all-cat-dropdown + ul {
	border-top: 1px solid var(--nfs-line);
	margin-top: 6px;
	padding-top: 6px;
}

/* De kop van het filterpaneel op de telefoon. Op grote schermen staat de zijbalk
   gewoon naast de producten en is een sluitknop overbodig. */
.nfs-filter-head {
	display: none;
}

@media (max-width: 1199.98px) {
	.site-content .sidebar {
		padding-top: 0;
	}

	.nfs-filter-head {
		align-items: center;
		background-color: var(--nfs-navy);
		color: #fff;
		display: flex;
		justify-content: space-between;
		margin-bottom: 14px;
		padding: 12px 16px;
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.nfs-filter-head__title {
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.nfs-filter-head__close {
		background: none;
		border: 0;
		color: #fff;
		cursor: pointer;
		font-size: 26px;
		line-height: 1;
		padding: 0 4px;
	}

	.site-content .sidebar .widget {
		margin-left: 12px;
		margin-right: 12px;
	}
}

/* De knop waarmee het paneel opengaat, in de balk boven de producten. */
.shop-control-bar .sidebar-toggler {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 4px;
	color: var(--nfs-navy);
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	padding: 8px 14px;
}

.shop-control-bar .sidebar-toggler:hover {
	border-color: var(--nfs-amber);
	color: var(--nfs-amber-dark);
}

.shop-control-bar .sidebar-toggler span {
	padding-left: 0 !important;
}

@media (max-width: 1199.98px) {
	/* In het paneel staat "Filters" al in de balk bovenin. */
	.sidebar > .widget_electro_products_filter > .widget-title {
		display: none;
	}
}

/* ------------------------------------------------------- productpagina */

/* De prijs stond zo groot dat hij op een telefoon de halve kaart vulde. */
.single-product .product-actions .price,
.single-product .product-actions .price .woocommerce-Price-amount,
.single-product .product-actions .electro-price .woocommerce-Price-amount {
	font-size: 26px;
	line-height: 1.2;
}

.single-product .product-actions .woocommerce-price-suffix {
	color: var(--nfs-muted);
	font-size: 13px;
	font-weight: 500;
}

/* Het voorraadlampje staat nu bij de prijs; zonder het woord "Voorraad:" ervoor. */
.single-product .product-actions .stock,
.electro-stock-availability p.stock.nfs-availability {
	align-items: center;
	display: inline-flex;
	font-size: 13.5px;
	font-weight: 600;
	gap: 7px;
	margin-bottom: 10px;
}

/* Productinformatie en beoordelingen als losse blokken met een eigen kop, in
   plaats van twee keer dezelfde tabbladenrij. */
.nfs-product-tabs .ec-tabs {
	display: none;
}

.nfs-product-tab__title {
	color: var(--nfs-navy);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
	padding-bottom: 12px;
	position: relative;
}

.nfs-product-tab__title:after {
	background-color: var(--nfs-amber);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 40px;
}

.nfs-product-tab .tab-content {
	padding: 26px 0 8px;
}

.nfs-product-tab .electro-description {
	color: var(--nfs-text);
	font-size: 15px;
	line-height: 1.7;
	max-width: 760px;
	padding-top: 16px;
}

.nfs-product-tab .product_meta {
	border-top: 1px solid var(--nfs-line);
	color: var(--nfs-muted);
	font-size: 13px;
	margin-top: 18px;
	padding-top: 14px;
}

/* De uitnodiging om iets te schrijven: dichtgeklapt één regel. */
.nfs-review-invite {
	padding: 0 0 34px;
	/* Wie uit de mail komt met de vraag om een beoordeling, landt op dit blok.
	   Zonder deze marge schuift de browser het tegen de bovenrand en verdwijnt de
	   bovenkant onder de vaste balk van het thema. Zelfde maat als bij het blok
	   over de conditie, dat op dezelfde manier via een anker wordt benaderd. */
	scroll-margin-top: 110px;
}

@media (max-width: 991px) {
	.nfs-review-invite {
		scroll-margin-top: 84px;
	}
}

.nfs-review-invite__box {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	padding: 4px 18px;
}

.nfs-review-invite__summary {
	align-items: center;
	color: var(--nfs-navy);
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	list-style: none;
	padding: 12px 0;
}

.nfs-review-invite__summary::-webkit-details-marker {
	display: none;
}

.nfs-review-invite__stars {
	color: #d6dde5;
	font-size: 15px;
	letter-spacing: 2px;
}

.nfs-review-invite__box[open] .nfs-review-invite__summary {
	border-bottom: 1px solid var(--nfs-line);
	margin-bottom: 14px;
}

.nfs-review-invite__form {
	padding-bottom: 18px;
}

/* Binnen de uitnodiging heeft het overzicht met nullen en de melding "nog geen
   beoordelingen" geen doel meer; dat staat al in de regel erboven. */
.nfs-review-invite .woocommerce-noreviews,
.nfs-review-invite .electro-advanced-reviews-summary,
.nfs-review-invite #review_summary,
.nfs-review-invite .electro-reviews-summary,
.nfs-review-invite .woocommerce-Reviews-title {
	display: none !important;
}

.nfs-review-invite #reviews {
	margin: 0;
}

/* De knop en de sterren van het beoordelingsformulier in de huisstijl in plaats
   van het turkoois van het thema. */
#review_form .form-submit .submit,
#respond input#submit {
	background-color: var(--nfs-amber) !important;
	border: 0;
	border-radius: 4px;
	color: #fff !important;
	font-weight: 600;
	padding: 10px 20px;
}

#review_form .form-submit .submit:hover,
#respond input#submit:hover {
	background-color: var(--nfs-amber-dark) !important;
}

.comment-form-rating .stars a,
.comment-form-rating .stars span {
	color: var(--nfs-amber);
}

@media (max-width: 767px) {
	.single-product .product-actions .price,
	.single-product .product-actions .price .woocommerce-Price-amount,
	.single-product .product-actions .electro-price .woocommerce-Price-amount {
		font-size: 21px;
	}

	.nfs-product-tab__title {
		font-size: 17px;
	}

	.nfs-product-tab .tab-content {
		padding: 20px 0 4px;
	}

	.nfs-review-invite__summary {
		font-size: 13.5px;
	}
}

/* De koppen boven "Gerelateerde producten" en "Eerder bekeken" hadden nog de
   turkooizen onderstreping van het thema. */
.single-product .related > h2,
.single-product .related > .h2,
.single-product .up-sells > h2,
.single-product section.products > h2 {
	color: var(--nfs-navy);
	font-size: 20px;
	font-weight: 700;
}

.single-product .related > h2::after,
.single-product .related > .h2::after,
.single-product .up-sells > h2::after,
.single-product section.products > h2::after {
	background-color: var(--nfs-amber);
	border: 0;
	height: 2px;
}

/* Op de telefoon vielen de onderdelen van de productpagina in de volgorde van het
   thema: eerst alle tekst, en de prijs pas onderaan onder het blok over bestellen.
   Hier staan ze in de volgorde waarin iemand ze wil zien: foto, naam, prijs, en
   dan pas de details.
   De omhulsels van het thema laten hun kinderen meedoen in dezelfde rij
   (display: contents), zodat de prijs — die in een eigen blok zit — tussen de naam
   en de beschrijving past. */
@media (max-width: 991.98px) {
	.single-product .single-product-wrapper {
		display: flex;
		flex-direction: column;
	}

	.single-product .summary.entry-summary {
		display: contents;
	}

	.single-product .product-images-wrapper {
		order: 1;
	}

	/* Alles wat hier niet met naam genoemd staat komt achteraan in plaats van
	   bovenaan; zonder deze regel springt een nieuw blok voor de foto. */
	.single-product .summary.entry-summary > * {
		order: 8;
	}

	/* De merkregel boven de naam; sinds 4 september staat daar het merk in plaats
	   van de categorie. De oude naam blijft erbij staan voor het geval het thema
	   hem ergens toch nog tekent. */
	.single-product .summary .nfs-eyebrow,
	.single-product .summary .loop-product-categories {
		order: 2;
	}

	.single-product .summary .product_title {
		margin-bottom: 6px;
		order: 3;
	}

	/* Artikelcode en voorraad horen bij de naam en gaan dus met de naam mee naar
	   boven, vóór de prijs. */
	.single-product .summary .nfs-productkop {
		order: 4;
	}

	.single-product .summary .nfs-chips {
		order: 5;
	}

	.single-product .product-actions-wrapper {
		margin-bottom: 16px;
		order: 6;
	}

	/* Op een tablet hield het vak nog de breedte van de rechterkolom van het thema
	   aan (41,67%); daardoor stond het als een smalle strook naast een leeg vlak en
	   brak de tekst op de knop af. Over de volle breedte dus. */
	.single-product.extended .single-product-wrapper .product-actions-wrapper {
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
	}

	.single-product .summary .nfs-vinkjes {
		order: 7;
	}

	.single-product .summary .nfs-catalog-note {
		order: 7;
	}

	/* Prijs en voorraad naast elkaar op één regel, zonder de scheidingslijn die het
	   thema ertussen zet; die had zin toen ze onder elkaar stonden. */
	.extended .single-product-wrapper > .product-actions-wrapper .product-actions,
	.single-product .product-actions {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		gap: 4px 14px;
		padding: 14px 16px;
		text-align: left;
	}

	.extended .single-product-wrapper > .product-actions-wrapper .product-actions div.availability,
	.single-product .product-actions .availability {
		border-bottom: 0;
		margin-bottom: 0;
		order: 2;
		padding-bottom: 0;
	}

	.single-product .product-actions .price {
		margin: 0;
		order: 1;
	}

	/* Het bestelblok stond bovenaan in het vak, want in de broncode komt het na de
	   prijs en zonder eigen volgnummer schuift het vooraan. Eerst wat het kost en of
	   het er is, daarna pas het aantal en de knop. */
	.single-product .product-actions form.cart,
	.single-product .product-actions .action-buttons {
		flex: 0 0 100%;
		margin: 10px 0 0;
		order: 3;
	}

	/* Dezelfde volgorde voor de knop bij "prijs op aanvraag": eerst wat het is,
	   dan pas de knop. */
	.single-product .product-actions .nfs-prijsknop {
		flex: 0 0 100%;
		margin: 10px 0 0;
		order: 3;
		text-align: center;
	}

	/* Aantal en knop op één regel: het invoervakje zo smal als het hoeft, de knop
	   vult de rest. Zo blijft het vak compact en staat de knop waar de duim zit. */
	.single-product .product-actions form.cart {
		align-items: stretch;
		display: flex;
		gap: 10px;
	}

	.single-product .product-actions form.cart .quantity {
		flex: 0 0 82px;
		margin: 0;
	}

	.single-product .product-actions form.cart .quantity .qty {
		height: 100%;
		text-align: center;
		width: 100%;
	}

	.single-product .product-actions form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		margin: 0;
		padding: 13px 18px;
	}

	.single-product .summary .woocommerce-product-details__short-description {
		margin-bottom: 4px;
	}

	.single-product .summary .nfs-vinkjes {
		margin-top: 4px;
	}
}

/* Twee korte kenmerken direct onder de productnaam: de staat van het toestel en
   het merk. Dat is waar iemand als eerste naar zoekt, en het geeft de kop kleur. */
.nfs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 4px;
}

.nfs-chip {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 40px;
	color: var(--nfs-navy);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 5px 13px;
	text-transform: uppercase;
}

/* Nieuw is groen, gereviseerd oranje: dezelfde taal als de voorraadlampjes. */
.nfs-chip--nieuw {
	background-color: rgba(21, 122, 61, 0.09);
	border-color: rgba(21, 122, 61, 0.25);
	color: var(--nfs-green);
}

.nfs-chip--gereviseerd {
	background-color: rgba(194, 97, 15, 0.09);
	border-color: rgba(194, 97, 15, 0.25);
	color: var(--nfs-amber-dark);
}

/* De uitleg bij een conditie klapt open op de productpagina zelf.

   Hij stuurde de bezoeker naar de garantiepagina, en dan ben je het artikel kwijt
   waar je naar stond te kijken (opmerking Hendrik, 1 september 2026). Nu komt er een
   kaartje onder de chip te hangen. Zonder javascript: details en summary regelen dat
   zelf, en dat werkt ook met het toetsenbord. */
.nfs-chipuitleg {
	position: relative;
}

.nfs-chipuitleg > summary {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 5px;
	list-style: none;
}

/* Het standaard driehoekje van de browser weg; de chip heeft zijn eigen vraagteken. */
.nfs-chipuitleg > summary::-webkit-details-marker {
	display: none;
}

.nfs-chipuitleg > summary::marker {
	content: "";
}

.nfs-chipuitleg[open] > summary {
	border-color: var(--nfs-amber);
}

.nfs-chipuitleg__kaart {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	box-shadow: 0 18px 44px rgba(15, 53, 87, 0.18);
	color: var(--nfs-text);
	font-size: 14px;
	font-weight: 400;
	left: 0;
	letter-spacing: normal;
	line-height: 1.6;
	margin-top: 8px;
	max-width: calc(100vw - 34px);
	padding: 16px 18px 14px;
	position: absolute;
	text-transform: none;
	top: 100%;
	width: 340px;
	z-index: 30;
}

.nfs-chipuitleg__kop {
	color: var(--nfs-navy);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px;
}

.nfs-chipuitleg__lead {
	margin: 0 0 10px;
}

.nfs-chipuitleg__regels {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.nfs-chipuitleg__regels li {
	margin-bottom: 6px;
	padding-left: 20px;
	position: relative;
}

.nfs-chipuitleg__regels li::before {
	background-color: var(--nfs-amber);
	border-radius: 50%;
	content: "";
	height: 5px;
	left: 4px;
	position: absolute;
	top: 9px;
	width: 5px;
}

.nfs-chipuitleg__meer {
	border-top: 1px solid var(--nfs-line);
	margin: 0;
	padding-top: 10px;
}

.nfs-chipuitleg__meer a {
	color: var(--nfs-amber-dark);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: underline;
}

/* De prijs krijgt wat meer gewicht: een lichte band achter het vak zodat het
   opvalt tussen de witte blokken. */
.single-product .product-actions {
	background-color: var(--nfs-band);
}

@media (max-width: 991.98px) {
	/* Zonder eigen omhulsel vielen de naam en de kenmerken tegen de schermrand aan;
	   het thema zet die ruimte normaal op de kolom, en die is hier weggevallen. */
	.single-product .summary.entry-summary > * {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* ------------------------------------------- productinformatie in twee kolommen */

.nfs-productinfo {
	display: grid;
	gap: 26px 44px;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	padding-top: 18px;
}

.nfs-productinfo__text {
	color: var(--nfs-text);
	font-size: 15px;
	line-height: 1.75;
}

/* Het thema kleurt losse alinea's in dit blok grijs met een regel die specifieker
   is dan alles wat hier redelijk te schrijven valt; vandaar het uitroepteken.

   De ruimte tussen twee alinea's is bewust klein gehouden: één regel wit, niet
   twee. Wie in het beheer met shift+enter een zachte regelafbreking maakt, krijgt
   hier ook precies dat — een nieuwe regel zonder tussenruimte. */
.nfs-product-tab .nfs-productinfo__text p,
.nfs-product-tab .nfs-productinfo__text li {
	color: var(--nfs-text) !important;
	/* Het thema zet hier 2,857em onder elke alinea — ruim veertig pixels — met een
	   regel op een id, en daar wint geen enkele nette selector van. Vandaar ook hier
	   het uitroepteken. */
	margin-bottom: 10px !important;
}

/* Een alinea binnen een opsommingsregel hoort tegen zijn bolletje aan te staan. */
.nfs-product-tab .nfs-productinfo__text li p {
	margin-bottom: 4px !important;
}

.nfs-product-tab .nfs-productinfo__text li:last-child p:last-child,
.nfs-product-tab .nfs-productinfo__text > p:last-child {
	margin-bottom: 0 !important;
}

.nfs-productinfo__text p:last-child,
.nfs-productinfo__text ul:last-child,
.nfs-productinfo__text ol:last-child {
	margin-bottom: 0;
}

/* Opsommingen uit de beschrijving: een bolletje in de huiskleur en de regels dicht
   op elkaar, zodat een lijstje van drie punten ook als lijstje leest. */
.nfs-productinfo__text ul,
.nfs-productinfo__text ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.nfs-productinfo__text ul {
	list-style: none;
	padding-left: 22px;
}

.nfs-productinfo__text ul > li {
	position: relative;
}

.nfs-productinfo__text ul > li:before {
	background-color: var(--nfs-amber);
	border-radius: 50%;
	content: "";
	height: 5px;
	left: -14px;
	position: absolute;
	top: 11px;
	width: 5px;
}

.nfs-product-tab .nfs-productinfo__text ul > li,
.nfs-product-tab .nfs-productinfo__text ol > li {
	margin-bottom: 4px;
}

.nfs-productinfo__text strong,
.nfs-productinfo__text b {
	color: var(--nfs-navy);
	font-weight: 700;
}

/* Twee lege regels achter elkaar in het beheer leverden een gat van bijna twee
   regels op; een lege alinea neemt hier nu geen ruimte meer in. */
.nfs-productinfo__text p:empty {
	display: none;
}

/* De eerste alinea leest als inleiding en mag iets zwaarder staan. */
.nfs-product-tab .nfs-productinfo__text > p:first-child {
	color: var(--nfs-navy) !important;
	font-size: 16px;
	line-height: 1.7;
}

/* Kenmerken met een vinkje in plaats van een bolletje: dat leest als een lijst
   pluspunten en niet als een willekeurige opsomming. */
.nfs-features {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.nfs-features li {
	align-items: flex-start;
	display: flex;
	font-size: 14.5px;
	gap: 11px;
	padding: 7px 0;
}

.nfs-features__check {
	background-color: rgba(21, 122, 61, 0.1);
	border-radius: 50%;
	flex: 0 0 auto;
	height: 20px;
	margin-top: 2px;
	position: relative;
	width: 20px;
}

.nfs-features__check:after {
	border-bottom: 2px solid var(--nfs-green);
	border-left: 2px solid var(--nfs-green);
	content: "";
	height: 4px;
	left: 6px;
	position: absolute;
	top: 6px;
	transform: rotate(-45deg);
	width: 8px;
}

/* De gegevens in een eigen kaart, zodat artikelnummer, merk en categorie niet
   meer als grijs regeltje onder de pagina hangen.

   De kaart staat naast de beschrijving en werd even hoog gemaakt als die tekst —
   bij drie regels specificaties naast een lang verhaal leverde dat een grijs vlak
   op van een halve pagina. Nu is de kaart zo hoog als zijn inhoud, en blijft hij
   bij het scrollen naast de tekst staan zolang die duurt: dan is de ruimte ernaast
/* De regels met merk, type en artikelnummer.

   Ze stonden in een eigen kader met een donkerblauwe kop naast de beschrijving, dat
   bij het scrollen meeliep. Sinds 31 augustus 2026 staan beschrijving en
   specificaties onder elkaar in twee uitklapblokken (verzoek G Post), en die hebben
   hun eigen omhulsel — zie .nfs-uitklap. Wat hieronder overblijft is de lijst zelf. */
.nfs-specs__list {
	margin: 0;
	padding: 4px 18px 8px;
}

.nfs-specs__row {
	border-bottom: 1px solid var(--nfs-line);
	display: flex;
	gap: 14px;
	justify-content: space-between;
	padding: 10px 0;
}

.nfs-specs__row:last-child {
	border-bottom: 0;
}

.nfs-specs__row dt {
	color: var(--nfs-muted);
	font-size: 13.5px;
	font-weight: 400;
}

.nfs-specs__row dd {
	color: var(--nfs-navy);
	font-size: 13.5px;
	font-weight: 700;
	margin: 0;
	text-align: right;
}

@media (max-width: 767px) {
	.nfs-productinfo {
		gap: 20px;
		grid-template-columns: 1fr;
		padding-top: 10px;
	}

	.nfs-productinfo__text {
		font-size: 14.5px;
	}
}

/* Merkpagina zonder producten: uitleg in plaats van een kale melding. */
.nfs-emptybrand {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	padding: 28px 30px 30px;
}

.nfs-emptybrand__title {
	color: var(--nfs-navy);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px;
}

.nfs-emptybrand__text {
	color: var(--nfs-text);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0 0 18px;
	max-width: 620px;
}

.nfs-emptybrand__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Categorietegels die WooCommerce zelf tekent (op de shop- en categoriepagina's,
   als daar onderliggende categorieën staan) krijgen dezelfde vormgeving als de
   tegels op de homepage: foto, blauwe waas, witte naam. */
ul.products li.product-category > a {
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	background-color: var(--nfs-navy);
	background-image: linear-gradient(150deg, var(--nfs-blue) 0%, var(--nfs-navy) 62%);
	border-radius: 10px;
	display: flex;
	overflow: hidden;
	position: relative;
}

ul.products li.product-category > a img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

ul.products li.product-category > a:before {
	background-image: linear-gradient(
		to top,
		rgba(15, 53, 87, 0.94) 0%,
		rgba(15, 53, 87, 0.78) 38%,
		rgba(15, 53, 87, 0.52) 72%,
		rgba(15, 53, 87, 0.42) 100%
	);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

ul.products li.product-category .woocommerce-loop-category__title {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	padding: 16px;
	position: relative;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	width: 100%;
	z-index: 2;
}

ul.products li.product-category .woocommerce-loop-category__title .count {
	background: none;
	color: rgba(255, 255, 255, 0.8);
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	margin-top: 3px;
	padding: 0;
}

/* Artikelen zonder vaste prijs. */
.nfs-price-ask {
	color: var(--nfs-navy);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* Op een telefoon plakte de tekst op sommige pagina's tegen de rand. Deze blokken
   staan buiten de gewone container en hadden daardoor geen eigen marge. */
@media (max-width: 767px) {
	.nfs-section > .container,
	.nfs-hero > .container,
	.entry-content > .container {
		padding-left: 18px;
		padding-right: 18px;
	}

	.nfs-product-tab .tab-content,
	.electro-tabs .electro-tab .tab-content {
		padding-left: 18px;
		padding-right: 18px;
	}

	.woocommerce-breadcrumb,
	.breadcrumb {
		padding-left: 2px;
		padding-right: 2px;
	}
}

/* Toestellen die we op aanvraag leveren: geen groen of rood, maar de rustige
   accentkleur van het huis. Er staat immers geen voorraad tegenover. */
.nfs-stock--ask,
.nfs-fact-stock--ask,
.nfs-availability--ask {
	color: var(--nfs-yellow-ink);
}

.nfs-stock--ask .nfs-lamp,
.nfs-fact-stock--ask .nfs-lamp,
.nfs-availability--ask:before {
	background-color: var(--nfs-yellow);
	box-shadow: 0 0 0 3px rgba(240, 180, 0, 0.22);
}

/* Uitverkocht: grijs en zonder gloed. Groen zegt "kom maar", rood zegt "wees er
   snel bij", geel zegt "vraag het na" — hier valt niets van dat alles te melden, dus
   dooft het lampje. */
.nfs-stock--out,
.nfs-fact-stock--out,
.nfs-availability--out {
	color: var(--nfs-muted);
}

.nfs-stock--out .nfs-lamp,
.nfs-fact-stock--out .nfs-lamp,
.nfs-availability--out:before {
	animation: none;
	background-color: #b6c0cb;
	box-shadow: none;
}

/* Op de kaartjes in de winkel valt een uitverkocht artikel wat terug, zodat de
   rest van de lijst voorgaat zonder dat het artikel verdwijnt. */
ul.products > li.product.outofstock .woocommerce-loop-product__link img {
	opacity: 0.62;
}

/* Het prijsvak op smallere schermen: prijs en voorraad netjes gecentreerd in
   plaats van links tegen de rand, want het vak loopt daar over de volle breedte. */
@media (max-width: 991.98px) {
	.extended .single-product-wrapper > .product-actions-wrapper .product-actions,
	.single-product .product-actions {
		justify-content: center;
		text-align: center;
	}
}


/* ------------------------------------------------- themakleur rechtzetten */

/* Het thema komt met een turkooize accentkleur die overal doorschemert: in de
   paginanummers, de knoppen van de prijsschuif, randen van uitklapmenu's. Dat past
   niet bij het marineblauw en oranje van NauticForSale. Hieronder staan exact de
   regels uit het kleurenbestand van het thema waarin die kleur voorkomt, met onze
   eigen kleuren ervoor in de plaats, zodat er niets over het hoofd wordt gezien.

   Selectors die eerder in dit bestand al een eigen kleur hebben gekregen (zoekknop,
   knoppen, prijsschuif, meldingen) staan er bewust niet tussen: die zouden anders
   alsnog blauw worden. */

.footer-call-us .call-us-icon i,
.header-support-info .support-icon i,
.header-support-inner .support-icon,
.widget_electro_products_filter .widget_layered_nav li > a:hover::before,
.widget_electro_products_filter .widget_layered_nav li > a:focus::before,
.widget_electro_products_filter .widget_product_categories li > a:hover::before,
.widget_electro_products_filter .widget_product_categories li > a:focus::before,
.widget_electro_products_filter .widget_layered_nav li.chosen > a::before,
.widget_electro_products_filter .widget_product_categories li.current-cat > a::before,
.features-list .media-left i,
.secondary-nav > .dropdown.open > a::before,
.secondary-nav > .dropdown.show > a::before,
p.stars a,
.top-bar.top-bar-v1 #menu-top-bar-left.nav-inline .menu-item > a i,
.handheld-footer .handheld-footer-bar .footer-call-us .call-us-text span,
.footer-v2 .handheld-footer .handheld-footer-bar .footer-call-us .call-us-text span,
.top-bar .menu-item.customer-support i {
	color: var(--nfs-navy);
}

.header-logo svg ellipse,
.footer-logo svg ellipse {
	fill: var(--nfs-navy);
}

.primary-nav .nav-inline > .menu-item .dropdown-menu,
.primary-nav-menu .nav-inline > .menu-item .dropdown-menu,
.navbar-primary .navbar-nav > .menu-item .dropdown-menu,
.vertical-menu .menu-item-has-children > .dropdown-menu,
.departments-menu .menu-item-has-children:hover > .dropdown-menu,
.top-bar .nav-inline > .menu-item .dropdown-menu,
.secondary-nav > .dropdown .dropdown-menu,
.header-v6 .vertical-menu .list-group-item > .dropdown-menu,
.best-selling-menu .nav-item > ul > li.electro-more-menu-item .dropdown-menu,
.home-v5-slider .tp-tab.selected .tp-tab-title:before,
.home-v5-slider .tp-tab.selected .tp-tab-title:after,
.header-v5 .electro-navigation .departments-menu-v2 > .dropdown > .dropdown-menu,
.product-categories-list-with-header.v2 header .caption .section-title:after,
.primary-nav-menu .nav-inline > .menu-item .dropdown-menu,
.dropdown-menu-mini-cart,
.dropdown-menu-user-account,
.electro-navbar-primary .nav > .menu-item.menu-item-has-children .dropdown-menu,
.header-v6 .header-logo-area .departments-menu-v2 .departments-menu-v2-title + .dropdown-menu,
.departments-menu-v2 .departments-menu-v2-title + .dropdown-menu li.menu-item-has-children .dropdown-menu,
.secondary-nav-v6 .secondary-nav-v6-inner .sub-menu,
.secondary-nav-v6 .widget_nav_menu .sub-menu {
	border-top-color: var(--nfs-navy);
}

.columns-6-1 > ul.products > li.product .thumbnails > a:hover,
.primary-nav .nav-inline .yamm-fw.open > a::before,
.columns-6-1 > ul.products.product-main-6-1 .electro-wc-product-gallery__wrapper .electro-wc-product-gallery__image.flex-active-slide img,
.single-product .electro-wc-product-gallery .electro-wc-product-gallery__wrapper .electro-wc-product-gallery__image.flex-active-slide img,
.products-6-1-with-categories-inner .product-main-6-1 .images .thumbnails a:hover,
.home-v5-slider .tp-tab.selected .tp-tab-title:after,
.electro-navbar .departments-menu-v2 .departments-menu-v2-title + .dropdown-menu li.menu-item-has-children > .dropdown-menu,
.product-main-6-1 .thumbnails > a:focus,
.product-main-6-1 .thumbnails > a:hover,
.product-main-6-1 .thumbnails > a:focus,
.product-main-6-1 .thumbnails > a:focus,
.product-main-6-1 .thumbnails > a:focus > img,
.product-main-6-1 .thumbnails > a:hover > img,
.product-main-6-1 .thumbnails > a:focus > img,
.product-main-6-1 .thumbnails > a:focus > img {
	border-bottom-color: var(--nfs-navy);
}

.button:hover::before,
li.product:hover .button::before,
.woocommerce-pagination ul.page-numbers > li a.current,
.woocommerce-pagination ul.page-numbers > li span.current,
.pagination ul.page-numbers > li a.current,
.pagination ul.page-numbers > li span.current,
.owl-dots .owl-dot.active,
.products-carousel-tabs .nav-link.active::before,
.deal-progress .progress-bar,
.products-2-1-2 .nav-link.active::before,
.products-4-1-4 .nav-link.active::before,
.da .da-action > a::after,
.header-v11 .navbar-search .input-group-btn .btn,
.vertical-menu > li:first-child,
.widget.widget_tag_cloud .tagcloud a:hover,
.widget.widget_tag_cloud .tagcloud a:focus,
.wc-tabs > li.active a::before,
.ec-tabs > li.active a::before,
.woocommerce-noreviews,
p.no-comments,
.products-2-1-2 .nav-link:hover::before,
.products-4-1-4 .nav-link:hover::before,
.section-onsale-product-carousel .onsale-product-carousel .onsale-product .onsale-product-content .deal-cart-button .button,
.section-onsale-product-carousel .onsale-product-carousel .onsale-product .onsale-product-content .deal-cart-button .added_to_cart,
.wpb-accordion .vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-heading .vc_tta-panel-title > a i,
ul.products > li.product.list-view:not(.list-view-small) .button:hover,
ul.products > li.product.list-view:not(.list-view-small) .button:focus,
ul.products > li.product.list-view:not(.list-view-small) .button:active,
ul.products > li.product.list-view.list-view-small .button:hover::after,
ul.products > li.product.list-view.list-view-small .button:focus::after,
ul.products > li.product.list-view.list-view-small .button:active::after,
.widget_electro_products_carousel_widget .section-products-carousel .owl-nav .owl-prev:hover,
.widget_electro_products_carousel_widget .section-products-carousel .owl-nav .owl-next:hover,
.full-color-background .header-v3,
.full-color-background .header-v4,
.full-color-background .top-bar,
.top-bar-v3,
.pace .pace-progress,
.electro-handheld-footer-bar ul li a .count,
.handheld-navigation-wrapper .stuck .navbar-toggler,
.handheld-navigation-wrapper .stuck button,
.handheld-navigation-wrapper.toggled .stuck .navbar-toggler,
.handheld-navigation-wrapper.toggled .stuck button,
.da .da-action > a::after,
.demo_store,
.header-v5 .header-top,
.handheld-header-v2.stuck,
#payment .place-order button[type=submit],
.single-product .product-images-wrapper .woocommerce-product-gallery.electro-carousel-loaded .flex-control-nav li a.flex-active,
.single-product .product-images-wrapper .electro-wc-product-gallery .flex-control-nav li a.flex-active,
.single-product .product-images-wrapper .flex-control-nav li a.flex-active,
.section-onsale-product .savings,
.section-onsale-product-carousel .savings,
.columns-6-1 > ul.products.product-main-6-1 > li.product .electro-wc-product-gallery .flex-control-nav li a.flex-active,
.products-carousel-tabs-v5 header ul.nav-inline .nav-link.active,
.products-carousel-tabs-with-deal header ul.nav-inline .nav-link.active,
section .deals-carousel-inner-block .onsale-product .onsale-product-content .deal-cart-button .added_to_cart,
section .deals-carousel-inner-block .onsale-product .onsale-product-content .deal-cart-button .button,
.header-icon-counter,
section .deals-carousel-inner-block .onsale-product .onsale-product-content .deal-cart-button .added_to_cart,
section .deals-carousel-inner-block .onsale-product .onsale-product-content .deal-cart-button .button,
.deal-products-with-featured header,
.deal-products-with-featured ul.products > li.product.product-featured .savings,
.mobile-header-v2.stuck,
.product-categories-list-with-header.v2 header .caption .section-title,
.product-categories-list-with-header.v2 header .caption .section-title,
.home-mobile-v2-features-block,
.show-nav .nav .nav-item.active .nav-link,
.header-v5,
.header-v5 .stuck,
.electro-navbar-primary,
.navbar-search-input-group .navbar-search-button,
.da-block .da-action::after,
.products-6-1 header.show-nav ul.nav .nav-item.active .nav-link,
ul.products[data-view=list-view].columns-1 > li.product .product-loop-footer .button,
ul.products[data-view=list-view].columns-2 > li.product .product-loop-footer .button,
ul.products[data-view=list-view].columns-3 > li.product .product-loop-footer .button,
ul.products[data-view=list-view].columns-4 > li.product .product-loop-footer .button,
ul.products[data-view=list-view].columns-5 > li.product .product-loop-footer .button,
ul.products[data-view=list-view].columns-6 > li.product .product-loop-footer .button,
ul.products[data-view=list-view].columns-7 > li.product .product-loop-footer .button,
ul.products[data-view=list-view].columns-8 > li.product .product-loop-footer .button,
ul.products[data-view=list-view] > li.product .product-item__footer .add-to-cart-wrap a,
.products.show-btn > li.product .added_to_cart,
.products.show-btn > li.product .button,
.yith-wcqv-button,
.header-v7 .masthead,
.header-v10 .secondary-nav-menu,
section.category-icons-carousel-v2,
.category-icons-carousel .category a:hover .category-icon,
.products-carousel-banner-vertical-tabs .banners-tabs > .nav a.active,
.products-carousel-with-timer .deal-countdown-timer,
.section-onsale-product-carousel-v9 .onsale-product .deal-countdown-timer,
.dokan-elector-style-active.store-v1 .profile-frame + .dokan-store-tabs > ul li.active a:after,
.dokan-elector-style-active.store-v5 .profile-frame + .dokan-store-tabs > ul li.active a:after,
.aws-container .aws-search-form .aws-search-clear,
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button,
.electro-dark .full-color-background .masthead .navbar-search .input-group .btn,
.electro-dark .electro-navbar-primary .nav > .menu-item:hover > a,
.electro-dark .masthead .navbar-search .input-group .btn {
	background-color: var(--nfs-navy);
}

.electro-navbar .departments-menu-v2 .departments-menu-v2-title + .dropdown-menu li.menu-item-has-children > .dropdown-menu,
.products-carousel-banner-vertical-tabs .banners-tabs > .nav a.active::before {
	border-right-color: var(--nfs-navy);
}

.hero-action-btn:hover {
	background-color: var(--nfs-blue) !important;
}

.hero-action-btn,
#scrollUp,
.custom .tp-bullet.selected,
.home-v1-slider .btn-primary,
.home-v2-slider .btn-primary,
.home-v3-slider .btn-primary,
.electro-dark .show-nav .nav .active .nav-link,
.electro-dark .full-color-background .masthead .header-icon-counter {
	background-color: var(--nfs-navy) !important;
}

.departments-menu .departments-menu-dropdown,
.departments-menu .menu-item-has-children > .dropdown-menu,
section header h1::after,
section header .h1::after,
.products-carousel-tabs .nav-link.active::after,
section.section-product-cards-carousel header ul.nav .active .nav-link,
section.section-onsale-product,
section.section-onsale-product-carousel .onsale-product-carousel,
.products-2-1-2 .nav-link.active::after,
.products-4-1-4 .nav-link.active::after,
.products-6-1 header ul.nav .active .nav-link,
.header-v1 .navbar-search .input-group .form-control,
.header-v1 .navbar-search .input-group .input-group-addon,
.header-v3 .navbar-search .input-group .form-control,
.header-v3 .navbar-search .input-group .input-group-addon,
.header-v6 .navbar-search .input-group .form-control,
.header-v6 .navbar-search .input-group .input-group-addon,
.header-v8 .navbar-search .input-group .form-control,
.header-v8 .navbar-search .input-group .input-group-addon,
.header-v9 .navbar-search .input-group .form-control,
.header-v9 .navbar-search .input-group .input-group-addon,
.header-v10 .navbar-search .input-group .form-control,
.header-v10 .navbar-search .input-group .input-group-addon,
.widget.widget_tag_cloud .tagcloud a:hover,
.widget.widget_tag_cloud .tagcloud a:focus,
.navbar-primary .navbar-mini-cart .dropdown-menu-mini-cart,
.woocommerce-checkout h3::after,
#customer_login h2::after,
.customer-login-form h2::after,
.navbar-primary .navbar-mini-cart .dropdown-menu-mini-cart,
.woocommerce-edit-address form h3::after,
.edit-account legend::after,
.woocommerce-account h2::after,
.address header.title h3::after,
.addresses header.title h3::after,
.woocommerce-order-received h2::after,
.track-order h2::after,
.wc-tabs > li.active a::after,
.ec-tabs > li.active a::after,
.comments-title::after,
.comment-reply-title::after,
.pings-title::after,
#reviews #comments > h2::after,
.single-product .woocommerce-tabs ~ div.products > h2::after,
.single-product .electro-tabs ~ div.products > h2::after,
.cart-collaterals h2:not(.woocommerce-loop-product__title)::after,
.footer-widgets .widget-title:after,
.sidebar .widget-title::after,
.sidebar-blog .widget-title::after,
.contact-page-title::after,
#reviews:not(.electro-advanced-reviews) #comments > h2::after,
.cpf-type-range .tm-range-picker .noUi-origin .noUi-handle,
.widget_electro_products_carousel_widget .section-products-carousel .owl-nav .owl-prev:hover,
.widget_electro_products_carousel_widget .section-products-carousel .owl-nav .owl-next:hover,
.wpb-accordion .vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-heading .vc_tta-panel-title > a i,
.single-product .woocommerce-tabs + section.products > h2::after,
#payment .place-order button[type=submit],
.single-product .electro-tabs + section.products > h2::after,
.deal-products-carousel .deal-products-carousel-inner .deal-products-timer header .section-title:after,
.deal-products-carousel .deal-products-carousel-inner .deal-countdown > span,
.deals-carousel-inner-block .onsale-product .onsale-product-content .deal-countdown > span,
.home-v5-slider .section-onsale-product-v2 .onsale-product .onsale-product-content .deal-countdown > span,
.products-with-category-image header ul.nav-inline .active .nav-link,
.products-6-1-with-categories header ul.nav-inline .active .nav-link,
.products-carousel-tabs-v5 header ul.nav-inline .nav-link:hover,
.products-carousel-tabs-with-deal header ul.nav-inline .nav-link:hover,
section.products-carousel-v5 header .nav-inline .active .nav-link,
.mobile-header-v1 .site-search .widget.widget_product_search form,
.mobile-header-v1 .site-search .widget.widget_search form,
.show-nav .nav .nav-item.active .nav-link,
.departments-menu-v2 .departments-menu-v2-title + .dropdown-menu,
.navbar-search-input-group .search-field,
.navbar-search-input-group .custom-select,
.products-6-1 header.show-nav ul.nav .nav-item.active .nav-link,
.electro-wide .onsale-product-carousel .onsale-product__inner,
.electro-wide .section-onsale-product .onsale-product__inner,
.header-v1 .aws-container .aws-search-field,
.header-v3 .aws-container .aws-search-field,
.header-v6 .aws-container .aws-search-field,
.header-v8 .aws-container .aws-search-field,
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button,
.electro-dark .electro-navbar .navbar-search .input-group .btn,
.electro-dark .masthead .navbar-search .input-group .btn {
	border-color: var(--nfs-navy);
}

.widget_price_filter .price_slider_amount .button,
.dropdown-menu-mini-cart .wc-forward.checkout,
table.cart .actions .checkout-button,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a,
.customer-login-form .button,
input[type="submit"],
input.dokan-btn-theme[type="submit"],
a.dokan-btn-theme,
.dokan-btn-theme,
.sign-in-button,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a,
.dokan-store-support-and-follow-wrap .dokan-btn {
	background-color: var(--nfs-navy);
	border-color: var(--nfs-navy);
}

.widget_price_filter .price_slider_amount .button:active:hover,
.widget_price_filter .price_slider_amount .button:active:focus,
.widget_price_filter .price_slider_amount .button:active.focus,
.widget_price_filter .price_slider_amount .button.active:hover,
.widget_price_filter .price_slider_amount .button.active:focus,
.widget_price_filter .price_slider_amount .button.active.focus,
.open > .widget_price_filter .price_slider_amount .button.dropdown-toggle:hover,
.open > .widget_price_filter .price_slider_amount .button.dropdown-toggle:focus,
.open > .widget_price_filter .price_slider_amount .button.dropdown-toggle.focus,
.dropdown-menu-mini-cart .wc-forward.checkout:active:hover,
.dropdown-menu-mini-cart .wc-forward.checkout:active:focus,
.dropdown-menu-mini-cart .wc-forward.checkout:active.focus,
.dropdown-menu-mini-cart .wc-forward.checkout.active:hover,
.dropdown-menu-mini-cart .wc-forward.checkout.active:focus,
.dropdown-menu-mini-cart .wc-forward.checkout.active.focus,
.open >
    .dropdown-menu-mini-cart .wc-forward.checkout.dropdown-toggle:hover,
.open >
    .dropdown-menu-mini-cart .wc-forward.checkout.dropdown-toggle:focus,
.open >
    .dropdown-menu-mini-cart .wc-forward.checkout.dropdown-toggle.focus,
table.cart .actions .checkout-button:active:hover,
table.cart .actions .checkout-button:active:focus,
table.cart .actions .checkout-button:active.focus,
table.cart .actions .checkout-button.active:hover,
table.cart .actions .checkout-button.active:focus,
table.cart .actions .checkout-button.active.focus,
.open >
    table.cart .actions .checkout-button.dropdown-toggle:hover,
.open >
    table.cart .actions .checkout-button.dropdown-toggle:focus,
.open >
    table.cart .actions .checkout-button.dropdown-toggle.focus,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a:active:hover,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a:active:focus,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a:active.focus,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.active:hover,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.active:focus,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.active.focus,
.open >
    .cart-collaterals .cart_totals .wc-proceed-to-checkout a.dropdown-toggle:hover,
.open >
    .cart-collaterals .cart_totals .wc-proceed-to-checkout a.dropdown-toggle:focus,
.open >
    .cart-collaterals .cart_totals .wc-proceed-to-checkout a.dropdown-toggle.focus,
.customer-login-form .button:active:hover,
.customer-login-form .button:active:focus,
.customer-login-form .button:active.focus,
.customer-login-form .button.active:hover,
.customer-login-form .button.active:focus,
.customer-login-form .button.active.focus,
.open >
    .customer-login-form .button.dropdown-toggle:hover,
.open >
    .customer-login-form .button.dropdown-toggle:focus,
.open >
    .customer-login-form .button.dropdown-toggle.focus,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:active.focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.open >
    .btn-primary.dropdown-toggle:hover,
.open >
    .btn-primary.dropdown-toggle:focus,
.open >
    .btn-primary.dropdown-toggle.focus,
input[type="submit"]:active:hover,
input[type="submit"]:active:focus,
input[type="submit"]:active.focus,
input[type="submit"].active:hover,
input[type="submit"].active:focus,
input[type="submit"].active.focus,
.open >
    input[type="submit"].dropdown-toggle:hover,
.open >
    input[type="submit"].dropdown-toggle:focus,
.open >
    input[type="submit"].dropdown-toggle.focus,
input.dokan-btn-theme[type="submit"]:active:hover,
input.dokan-btn-theme[type="submit"]:active:focus,
input.dokan-btn-theme[type="submit"]:active.focus,
input.dokan-btn-theme[type="submit"].active:hover,
input.dokan-btn-theme[type="submit"].active:focus,
input.dokan-btn-theme[type="submit"].active.focus,
.open >
    input.dokan-btn-theme[type="submit"].dropdown-toggle:hover,
.open >
    input.dokan-btn-theme[type="submit"].dropdown-toggle:focus,
.open >
    input.dokan-btn-theme[type="submit"].dropdown-toggle.focus,
a.dokan-btn-theme:active:hover,
a.dokan-btn-theme:active:focus,
a.dokan-btn-theme:active.focus,
a.dokan-btn-theme.active:hover,
a.dokan-btn-theme.active:focus,
a.dokan-btn-theme.active.focus,
.open >
    a.dokan-btn-theme.dropdown-toggle:hover,
.open >
    a.dokan-btn-theme.dropdown-toggle:focus,
.open >
    a.dokan-btn-theme.dropdown-toggle.focus,
.dokan-btn-theme:active:hover,
.dokan-btn-theme:active:focus,
.dokan-btn-theme:active.focus,
.dokan-btn-theme.active:hover,
.dokan-btn-theme.active:focus,
.dokan-btn-theme.active.focus,
.open > .dokan-btn-theme.dropdown-toggle:hover,
.open > .dokan-btn-theme.dropdown-toggle:focus,
.open > .dokan-btn-theme.dropdown-toggle.focus,
.sign-in-button:active:hover,
.sign-in-button:active:focus,
.sign-in-button:active.focus,
.sign-in-button.active:hover,
.sign-in-button.active:focus,
.sign-in-button.active.focus,
.open >
    .sign-in-button.dropdown-toggle:hover,
.open >
    .sign-in-button.dropdown-toggle:focus,
.open >
    .sign-in-button.dropdown-toggle.focus,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a:active:hover,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a:active:focus,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a:active.focus,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a.active:hover,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a.active:focus,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a.active.focus,
.open >
    .products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a.dropdown-toggle:hover,
.open >
    .products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a.dropdown-toggle:focus,
.open >
    .products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a.dropdown-toggle.focus,
.dokan-store-support-and-follow-wrap .dokan-btn:active:hover,
.dokan-store-support-and-follow-wrap .dokan-btn:active:focus,
.dokan-store-support-and-follow-wrap .dokan-btn:active.focus,
.dokan-store-support-and-follow-wrap .dokan-btn.active:hover,
.dokan-store-support-and-follow-wrap .dokan-btn.active:focus,
.dokan-store-support-and-follow-wrap .dokan-btn.active.focus,
.open >
    .dokan-store-support-and-follow-wrap .dokan-btn.dropdown-toggle:hover,
.open >
    .dokan-store-support-and-follow-wrap .dokan-btn.dropdown-toggle:focus,
.open >
    .dokan-store-support-and-follow-wrap .dokan-btn.dropdown-toggle.focus {
	background-color: var(--nfs-navy-dark);
	border-color: var(--nfs-navy-dark);
}

.widget_price_filter .price_slider_amount .button.disabled:focus,
.widget_price_filter .price_slider_amount .button.disabled.focus,
.widget_price_filter .price_slider_amount .button:disabled:focus,
.widget_price_filter .price_slider_amount .button:disabled.focus,
.dropdown-menu-mini-cart .wc-forward.checkout.disabled:focus,
.dropdown-menu-mini-cart .wc-forward.checkout.disabled.focus,
.dropdown-menu-mini-cart .wc-forward.checkout:disabled:focus,
.dropdown-menu-mini-cart .wc-forward.checkout:disabled.focus,
table.cart .actions .checkout-button.disabled:focus,
table.cart .actions .checkout-button.disabled.focus,
table.cart .actions .checkout-button:disabled:focus,
table.cart .actions .checkout-button:disabled.focus,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.disabled:focus,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.disabled.focus,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a:disabled:focus,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a:disabled.focus,
.customer-login-form .button.disabled:focus,
.customer-login-form .button.disabled.focus,
.customer-login-form .button:disabled:focus,
.customer-login-form .button:disabled.focus,
.btn-primary.disabled:focus,
.btn-primary.disabled.focus,
.btn-primary:disabled:focus,
.btn-primary:disabled.focus,
input[type="submit"].disabled:focus,
input[type="submit"].disabled.focus,
input[type="submit"]:disabled:focus,
input[type="submit"]:disabled.focus,
input.dokan-btn-theme[type="submit"].disabled:focus,
input.dokan-btn-theme[type="submit"].disabled.focus,
input.dokan-btn-theme[type="submit"]:disabled:focus,
input.dokan-btn-theme[type="submit"]:disabled.focus,
a.dokan-btn-theme.disabled:focus,
a.dokan-btn-theme.disabled.focus,
a.dokan-btn-theme:disabled:focus,
a.dokan-btn-theme:disabled.focus,
.dokan-btn-theme.disabled:focus,
.dokan-btn-theme.disabled.focus,
.dokan-btn-theme:disabled:focus,
.dokan-btn-theme:disabled.focus,
.sign-in-button.disabled:focus,
.sign-in-button.disabled.focus,
.sign-in-button:disabled:focus,
.sign-in-button:disabled.focus,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a.disabled:focus,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a.disabled.focus,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a:disabled:focus,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a:disabled.focus,
.dokan-store-support-and-follow-wrap .dokan-btn.disabled:focus,
.dokan-store-support-and-follow-wrap .dokan-btn.disabled.focus,
.dokan-store-support-and-follow-wrap .dokan-btn:disabled:focus,
.dokan-store-support-and-follow-wrap .dokan-btn:disabled.focus {
	background-color: var(--nfs-navy);
	border-color: var(--nfs-navy);
}

.widget_price_filter .price_slider_amount .button.disabled:hover,
.widget_price_filter .price_slider_amount .button:disabled:hover,
.dropdown-menu-mini-cart .wc-forward.checkout.disabled:hover,
.dropdown-menu-mini-cart .wc-forward.checkout:disabled:hover,
table.cart .actions .checkout-button.disabled:hover,
table.cart .actions .checkout-button:disabled:hover,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.disabled:hover,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a:disabled:hover,
.customer-login-form .button.disabled:hover,
.customer-login-form .button:disabled:hover,
.btn-primary.disabled:hover,
.btn-primary:disabled:hover,
input[type="submit"].disabled:hover,
input[type="submit"]:disabled:hover,
input.dokan-btn-theme[type="submit"].disabled:hover,
input.dokan-btn-theme[type="submit"]:disabled:hover,
a.dokan-btn-theme.disabled:hover,
a.dokan-btn-theme:disabled:hover,
.dokan-btn-theme.disabled:hover,
.dokan-btn-theme:disabled:hover,
.sign-in-button.disabled:hover,
.sign-in-button:disabled:hover,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a.disabled:hover,
.products-carousel-banner-vertical-tabs .banners-tabs .tab-content-inner > a:disabled:hover,
.dokan-store-support-and-follow-wrap .dokan-btn.disabled:hover,
.dokan-store-support-and-follow-wrap .dokan-btn:disabled:hover {
	background-color: var(--nfs-navy);
	border-color: var(--nfs-navy);
}

.navbar-primary .navbar-nav > .menu-item > a:hover,
.navbar-primary .navbar-nav > .menu-item > a:focus,
.electro-navbar-primary .nav > .menu-item > a:focus,
.electro-navbar-primary .nav > .menu-item > a:hover {
	background-color: var(--nfs-blue);
}

.navbar-primary .navbar-nav > .menu-item > a {
	border-color: var(--nfs-blue);
}

.full-color-background .navbar-primary,
.header-v4 .electro-navbar-primary,
.header-v4 .electro-navbar-primary {
	border-top-color: var(--nfs-blue);
}

.full-color-background .top-bar .nav-inline .menu-item + .menu-item:before,
.top-bar-v3 .nav-inline .menu-item + .menu-item:before {
	color: var(--nfs-blue);
}

.electro-navbar-primary .nav > .menu-item + .menu-item > a,
.home-mobile-v2-features-block .features-list .feature + .feature .media {
	border-left-color: var(--nfs-blue);
}

.header-v5 .vertical-menu .list-group-item > .dropdown-menu {
	border-top-color: var(--nfs-navy);
}

.single-product div.thumbnails-all .synced a,
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.columns-6-1 > ul.products.product-main-6-1 .flex-control-thumbs li img.flex-active,
.products-2-1-2 .nav-link:hover::after,
.products-4-1-4 .nav-link:hover::after,
.section-onsale-product-carousel .onsale-product-carousel .onsale-product .onsale-product-thumbnails .images .thumbnails a.current,
.dokan-elector-style-active.store-v1 .profile-frame + .dokan-store-tabs > ul li.active a,
.dokan-elector-style-active.store-v5 .profile-frame + .dokan-store-tabs > ul li.active a {
	border-bottom-color: var(--nfs-navy);
}

.home-v1-slider .btn-primary:hover,
.home-v2-slider .btn-primary:hover,
.home-v3-slider .btn-primary:hover {
	background-color: var(--nfs-blue) !important;
}

.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:focus,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a:hover,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a:focus,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a.active,
.dokan-store .pagination-wrap ul.pagination > li a.current,
.dokan-store .pagination-wrap ul.pagination > li span.current,
.dokan-dashboard .pagination-wrap ul.pagination > li a.current,
.dokan-dashboard .pagination-wrap ul.pagination > li span.current,
.dokan-pagination-container ul.dokan-pagination > li.active > a,
.dokan-coupon-content .code:hover,
.dokan-report-wrap ul.dokan_tabs > li.active a::before,
.dokan-dashboard-header h1.entry-title span.dokan-right a.dokan-btn.dokan-btn-sm {
	background-color: var(--nfs-navy);
}

.dokan-widget-area .widget .widget-title:after,
.dokan-report-wrap ul.dokan_tabs > li.active a::after,
.dokan-dashboard-header h1.entry-title span.dokan-right a.dokan-btn.dokan-btn-sm,
.dokan-store-sidebar .widget-store-owner .widget-title:after {
	border-color: var(--nfs-navy);
}

input.dokan-btn-theme[type="submit"],
a.dokan-btn-theme,
.dokan-btn-theme {
	background-color: var(--nfs-navy);
	border-color: var(--nfs-navy);
}

input.dokan-btn-theme[type="submit"]:active:hover,
input.dokan-btn-theme[type="submit"]:active:focus,
input.dokan-btn-theme[type="submit"]:active.focus,
input.dokan-btn-theme[type="submit"].active:hover,
input.dokan-btn-theme[type="submit"].active:focus,
input.dokan-btn-theme[type="submit"].active.focus,
.open > input.dokan-btn-theme[type="submit"].dropdown-toggle:hover,
.open > input.dokan-btn-theme[type="submit"].dropdown-toggle:focus,
.open > input.dokan-btn-theme[type="submit"].dropdown-toggle.focus,
a.dokan-btn-theme:active:hover,
a.dokan-btn-theme:active:focus,
a.dokan-btn-theme:active.focus,
a.dokan-btn-theme.active:hover,
a.dokan-btn-theme.active:focus,
a.dokan-btn-theme.active.focus,
.open >
    a.dokan-btn-theme.dropdown-toggle:hover,
.open >
    a.dokan-btn-theme.dropdown-toggle:focus,
.open >
    a.dokan-btn-theme.dropdown-toggle.focus,
.dokan-btn-theme:active:hover,
.dokan-btn-theme:active:focus,
.dokan-btn-theme:active.focus,
.dokan-btn-theme.active:hover,
.dokan-btn-theme.active:focus,
.dokan-btn-theme.active.focus,
.open >
    .dokan-btn-theme.dropdown-toggle:hover,
.open >
    .dokan-btn-theme.dropdown-toggle:focus,
.open >
    .dokan-btn-theme.dropdown-toggle.focus {
	background-color: var(--nfs-navy-dark);
	border-color: var(--nfs-navy-dark);
}

input.dokan-btn-theme[type="submit"].disabled:focus,
input.dokan-btn-theme[type="submit"].disabled.focus,
input.dokan-btn-theme[type="submit"]:disabled:focus,
input.dokan-btn-theme[type="submit"]:disabled.focus,
a.dokan-btn-theme.disabled:focus,
a.dokan-btn-theme.disabled.focus,
a.dokan-btn-theme:disabled:focus,
a.dokan-btn-theme:disabled.focus,
.dokan-btn-theme.disabled:focus,
.dokan-btn-theme.disabled.focus,
.dokan-btn-theme:disabled:focus,
.dokan-btn-theme:disabled.focus {
	background-color: var(--nfs-navy);
	border-color: var(--nfs-navy);
}

input.dokan-btn-theme[type="submit"].disabled:hover,
input.dokan-btn-theme[type="submit"]:disabled:hover,
a.dokan-btn-theme.disabled:hover,
a.dokan-btn-theme:disabled:hover,
.dokan-btn-theme.disabled:hover,
.dokan-btn-theme:disabled:hover {
	background-color: var(--nfs-navy);
	border-color: var(--nfs-navy);
}

.electro-tabs #tab-seller.electro-tab .tab-content ul.list-unstyled li.seller-name span.details a,
.dokan-dashboard-header h1.entry-title small a,
.dokan-orders-content .dokan-orders-area .general-details ul.customer-details li a {
	color: var(--nfs-navy);
}

.dokan-dashboard-header h1.entry-title small a:hover,
.dokan-dashboard-header h1.entry-title small a:focus {
	color: var(--nfs-blue);
}

/* --------------------------------------------------------- verzendkosten */

/* Onder het product: land en postcode invullen en meteen zien wat de verzending
   kost. Bij zwaar goed staat er geen bedrag maar de uitleg dat het per pallet gaat
   en dat wij het uitrekenen. */
.nfs-verzendkosten {
	background-color: var(--nfs-band);
	border-top: 1px solid var(--nfs-line);
	margin-top: 44px;
	padding: 30px 0 34px;
}

.nfs-verzendkosten__titel {
	color: var(--nfs-navy);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 14px;
}

.nfs-verzendkosten__maat {
	color: var(--nfs-text);
	line-height: 1.7;
	margin-bottom: 16px;
	max-width: 640px;
}

.nfs-verzendkosten__form {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.nfs-verzendkosten__veld {
	flex: 1 1 240px;
	margin: 0;
}

.nfs-verzendkosten__veld--kort {
	flex: 0 1 160px;
}

.nfs-verzendkosten__veld--knop {
	flex: 0 0 auto;
}

.nfs-verzendkosten__veld label {
	color: var(--nfs-muted);
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.nfs-verzendkosten__veld select,
.nfs-verzendkosten__veld input {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 4px;
	color: var(--nfs-text);
	height: 44px;
	padding: 0 12px;
	width: 100%;
}

.nfs-verzendkosten__veld--knop .nfs-btn {
	height: 44px;
	padding: 0 24px;
}

.nfs-verzendkosten__uitkomst {
	margin-top: 18px;
	max-width: 640px;
}

.nfs-verzendkosten__melding {
	color: var(--nfs-text);
	line-height: 1.7;
	margin: 0 0 10px;
}

.nfs-verzendkosten__lijst {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfs-verzendkosten__lijst li {
	align-items: center;
	border-bottom: 1px solid var(--nfs-line);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 11px 16px;
}

.nfs-verzendkosten__lijst li:last-child {
	border-bottom: 0;
}

.nfs-verzendkosten__lijst strong {
	color: var(--nfs-navy);
	white-space: nowrap;
}

/* De melding bij het afrekenen over verzending op maat. */
.nfs-verzendmelding {
	background-color: rgba(240, 180, 0, 0.12);
	border-left: 3px solid var(--nfs-yellow);
	border-radius: 4px;
	color: var(--nfs-text);
	font-size: 14px;
	line-height: 1.65;
	margin-bottom: 18px;
	padding: 12px 16px;
}

@media (max-width: 767px) {
	.nfs-verzendkosten__veld,
	.nfs-verzendkosten__veld--kort,
	.nfs-verzendkosten__veld--knop {
		flex: 1 1 100%;
	}

	.nfs-verzendkosten__veld--knop .nfs-btn {
		width: 100%;
	}
}

/* ------------------------------------------------- na het bestellen */

/* De pagina die je krijgt als de bestelling rond is. Eerst de bevestiging groot in
   beeld, dan de kerngegevens als kaartjes, dan wat er gaat gebeuren. */
.nfs-bedankt {
	margin: 0 auto 40px;
	max-width: 860px;
}

.nfs-bedankt__kop {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	margin-bottom: 22px;
	padding: 34px 30px 30px;
	text-align: center;
}

.nfs-bedankt__teken {
	align-items: center;
	background-color: var(--nfs-green);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	height: 52px;
	justify-content: center;
	margin-bottom: 14px;
	width: 52px;
}

.nfs-bedankt__teken svg {
	height: 26px;
	width: 26px;
}

.nfs-bedankt__kop--mis .nfs-bedankt__teken {
	background-color: var(--nfs-red);
}

.nfs-bedankt__eyebrow {
	color: var(--nfs-amber);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.nfs-bedankt__titel {
	color: var(--nfs-navy);
	font-size: 27px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 10px;
}

.nfs-bedankt__lead {
	color: var(--nfs-text);
	line-height: 1.7;
	margin: 0 auto;
	max-width: 560px;
}

/* De kerngegevens als losse kaartjes in plaats van als opsomming. */
.nfs-bedankt__kaarten {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.nfs-bedankt__kaarten li {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	padding: 14px 16px;
}

.nfs-bedankt__label {
	color: var(--nfs-muted);
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.nfs-bedankt__kaarten strong {
	color: var(--nfs-navy);
	font-size: 16px;
	font-weight: 700;
}

.nfs-bedankt__maat {
	background-color: rgba(240, 180, 0, 0.12);
	border-left: 3px solid var(--nfs-yellow);
	border-radius: 4px;
	color: var(--nfs-text);
	line-height: 1.65;
	margin-bottom: 22px;
	padding: 14px 18px;
}

.nfs-bedankt__subtitel {
	color: var(--nfs-navy);
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 14px;
}

/* De drie stappen: genummerd, met de lijn van de huisstijl erboven. */
.nfs-bedankt__stappen ol {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.nfs-bedankt__stappen li {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	border-top: 3px solid var(--nfs-amber);
	padding: 16px 18px 18px;
}

.nfs-bedankt__nummer {
	align-items: center;
	background-color: var(--nfs-navy);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	height: 26px;
	justify-content: center;
	margin-bottom: 8px;
	width: 26px;
}

.nfs-bedankt__stappen strong {
	color: var(--nfs-navy);
	display: block;
	font-size: 15px;
	margin-bottom: 3px;
}

.nfs-bedankt__stappen span:not(.nfs-bedankt__nummer) {
	color: var(--nfs-muted);
	display: block;
	font-size: 14px;
	line-height: 1.6;
}

.nfs-bedankt__hulp,
.nfs-account__hulp {
	align-items: center;
	background-color: var(--nfs-navy);
	border-radius: 10px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
	margin-bottom: 30px;
	padding: 22px 26px;
}

.nfs-bedankt__hulp .nfs-bedankt__subtitel,
.nfs-account__hulp .nfs-account__subtitel {
	color: #fff;
	margin-bottom: 4px;
}

.nfs-bedankt__hulp p,
.nfs-account__hulp p {
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.nfs-bedankt__knoppen,
.nfs-account__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.nfs-bedankt__hulp .nfs-btn--ghost,
.nfs-account__hulp .nfs-btn--ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

/* De tabel met de bestelling die WooCommerce eronder zet, in dezelfde lijnen. */
.nfs-bedankt .woocommerce-order-details,
.nfs-bedankt .woocommerce-customer-details {
	margin-top: 26px;
}

.nfs-bedankt .woocommerce-order-details__title,
.nfs-bedankt .woocommerce-column__title {
	color: var(--nfs-navy);
	font-size: 17px;
	font-weight: 700;
}

/* ------------------------------------------------------- mijn account */

.nfs-account__welkom,
.nfs-account__bestelling,
.nfs-account__tegel {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
}

.nfs-account__welkom {
	align-items: center;
	background-color: var(--nfs-band);
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 24px 26px;
}

.nfs-account__eyebrow {
	color: var(--nfs-amber);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.nfs-account__titel {
	color: var(--nfs-navy);
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 6px;
}

.nfs-account__lead {
	color: var(--nfs-text);
	line-height: 1.65;
	margin: 0;
	max-width: 520px;
}

.nfs-account__subtitel {
	color: var(--nfs-navy);
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}

.nfs-account__bestelling {
	margin-bottom: 20px;
	overflow: hidden;
	padding: 20px 22px 18px;
}

.nfs-account__bestelling-kop {
	align-items: center;
	border-bottom: 1px solid var(--nfs-line);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 12px;
}

/* Dezelfde taal als de voorraadlampjes: groen loopt goed, geel wacht ergens op. */
.nfs-account__status {
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 4px 12px;
	text-transform: uppercase;
}

.nfs-account__status--wacht {
	background-color: rgba(240, 180, 0, 0.16);
	color: var(--nfs-yellow-ink);
}

.nfs-account__status--bezig {
	background-color: rgba(29, 78, 137, 0.12);
	color: var(--nfs-blue);
}

.nfs-account__status--klaar {
	background-color: rgba(21, 122, 61, 0.12);
	color: var(--nfs-green);
}

.nfs-account__status--af {
	background-color: rgba(198, 40, 40, 0.1);
	color: var(--nfs-red);
}

.nfs-account__bestelling-body {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 220px;
	margin-bottom: 16px;
}

.nfs-account__regels {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfs-account__regels li {
	align-items: center;
	display: flex;
	gap: 12px;
	padding: 6px 0;
}

.nfs-account__foto img {
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	display: block;
	height: 48px;
	object-fit: cover;
	width: 48px;
}

.nfs-account__regel-naam {
	color: var(--nfs-text);
	flex: 1 1 auto;
	font-weight: 600;
}

.nfs-account__regel-aantal {
	color: var(--nfs-muted);
	font-weight: 700;
}

.nfs-account__feiten {
	background-color: var(--nfs-band);
	border-radius: 8px;
	margin: 0;
	padding: 14px 16px;
}

.nfs-account__feiten > div {
	border-bottom: 1px solid var(--nfs-line);
	padding: 7px 0;
}

.nfs-account__feiten > div:last-child {
	border-bottom: 0;
}

.nfs-account__feiten dt {
	color: var(--nfs-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nfs-account__feiten dd {
	color: var(--nfs-navy);
	font-weight: 700;
	margin: 2px 0 0;
}

.nfs-account__tegels {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-bottom: 22px;
}

.nfs-account__tegel {
	display: block;
	padding: 18px 20px 20px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nfs-account__tegel:hover {
	border-color: rgba(194, 97, 15, 0.45);
	box-shadow: 0 10px 22px rgba(15, 53, 87, 0.09);
	transform: translateY(-2px);
}

.nfs-account__icoon {
	align-items: center;
	background-color: var(--nfs-band);
	border-radius: 8px;
	color: var(--nfs-navy);
	display: inline-flex;
	height: 38px;
	justify-content: center;
	margin-bottom: 10px;
	width: 38px;
}

.nfs-account__icoon svg {
	height: 20px;
	width: 20px;
}

.nfs-account__tegel strong {
	color: var(--nfs-navy);
	display: block;
	font-size: 15.5px;
	margin-bottom: 3px;
}

.nfs-account__tegel span:not(.nfs-account__icoon) {
	color: var(--nfs-muted);
	display: block;
	font-size: 13.5px;
	line-height: 1.55;
}

@media (max-width: 767px) {
	.nfs-bedankt__kop {
		padding: 26px 18px 24px;
	}

	.nfs-bedankt__titel {
		font-size: 22px;
	}

	.nfs-account__bestelling-body {
		grid-template-columns: 1fr;
	}

	.nfs-bedankt__hulp,
	.nfs-account__hulp,
	.nfs-account__welkom {
		padding: 20px 18px;
	}

	.nfs-bedankt__knoppen .nfs-btn,
	.nfs-account__knoppen .nfs-btn {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* Het thema zet onder elke kop op deze pagina's een streepje van vaste breedte.
   In de nieuwe blokken staan de koppen gecentreerd of in een gekleurd vlak; daar
   hangt zo'n streepje er los onder. */
.nfs-bedankt h2::after,
.nfs-bedankt h3::after,
.nfs-account h2::after,
.nfs-account h3::after {
	display: none;
}

/* En de lijn onder de kop zelf; die hoort bij de oude opmaak van deze pagina's. */
.woocommerce-account .woocommerce .nfs-account h2,
.woocommerce-account .woocommerce .nfs-account h3,
.woocommerce-order-received .nfs-bedankt h2,
.woocommerce-order-received .nfs-bedankt h3,
.nfs-bedankt h2,
.nfs-bedankt h3,
.nfs-account h2,
.nfs-account h3 {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Het menu naast Mijn account: rustige lijst, met de pagina waar je bent duidelijk
   aangegeven in plaats van alleen een andere tekstkleur. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--nfs-line);
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	border-left: 3px solid transparent;
	color: var(--nfs-text);
	display: block;
	font-weight: 600;
	padding: 12px 16px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--nfs-band);
	color: var(--nfs-navy);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--nfs-band);
	border-left-color: var(--nfs-amber);
	color: var(--nfs-navy);
}

/* ---------------------------------------------------- prijs op aanvraag */

/* De knop in het prijsvak bij artikelen zonder bedrag. Zonder die knop liep een
   bezoeker dood op "Prijs op aanvraag". */
.nfs-prijsknop {
	display: inline-block;
	margin-top: 4px;
}

.nfs-prijsvraag {
	background-color: var(--nfs-band);
	border-top: 1px solid var(--nfs-line);
	margin-top: 44px;
	padding: 34px 0 38px;
}

.nfs-prijsvraag__inner {
	display: grid;
	gap: 34px;
	grid-template-columns: 1fr 1fr;
}

.nfs-prijsvraag__titel {
	color: var(--nfs-navy);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 10px;
}

.nfs-prijsvraag__uitleg p {
	color: var(--nfs-text);
	line-height: 1.7;
	margin-bottom: 14px;
}

.nfs-prijsvraag__punten {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.nfs-prijsvraag__punten li {
	color: var(--nfs-text);
	line-height: 1.5;
	padding: 5px 0 5px 24px;
	position: relative;
}

.nfs-prijsvraag__punten li:before {
	background-color: var(--nfs-amber);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: 14px;
	width: 12px;
}

.nfs-prijsvraag__direct {
	color: var(--nfs-muted);
	font-size: 14px;
}

.nfs-prijsvraag__direct a {
	color: var(--nfs-navy);
	font-weight: 700;
}

.nfs-prijsvraag__form {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	padding: 22px 24px 24px;
}

.nfs-prijsvraag__artikel {
	border-bottom: 1px solid var(--nfs-line);
	margin-bottom: 16px;
	padding-bottom: 14px;
}

.nfs-prijsvraag__artikel span {
	color: var(--nfs-muted);
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nfs-prijsvraag__artikel strong {
	color: var(--nfs-navy);
	font-size: 16px;
}

.nfs-prijsvraag__form p {
	margin: 0 0 14px;
}

.nfs-prijsvraag__form label {
	color: var(--nfs-navy);
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 5px;
}

.nfs-prijsvraag__form label span {
	color: var(--nfs-muted);
	font-weight: 400;
}

.nfs-prijsvraag__form input,
.nfs-prijsvraag__form textarea {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 4px;
	color: var(--nfs-text);
	padding: 10px 12px;
	width: 100%;
}

/* De focuskleur van een veld staat op één plek, bij de algemene regels; die was
   hier blauw en week dus af van de rest van de site. */

.nfs-prijsvraag__rij {
	display: flex;
	gap: 14px;
}

.nfs-prijsvraag__rij > p {
	flex: 1 1 0;
}

.nfs-prijsvraag__kort {
	flex: 0 0 90px !important;
}

.nfs-prijsvraag__knop {
	margin: 4px 0 0 !important;
}

.nfs-prijsvraag__knop .nfs-btn {
	width: 100%;
}

/* Het lokvakje tegen machines staat buiten beeld, maar blijft wel bestaan. */
.nfs-prijsvraag__val {
	height: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.nfs-prijsvraag__gelukt {
	align-items: flex-start;
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	display: flex;
	gap: 16px;
	padding: 24px 26px;
}

.nfs-prijsvraag__vink {
	align-items: center;
	background-color: var(--nfs-green);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex: none;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.nfs-prijsvraag__vink svg {
	height: 21px;
	width: 21px;
}

.nfs-prijsvraag__gelukt p {
	color: var(--nfs-text);
	line-height: 1.7;
	margin: 0;
	max-width: 620px;
}

.nfs-prijsvraag--klaar td {
	opacity: 0.55;
}

@media (max-width: 767px) {
	.nfs-prijsvraag__inner {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.nfs-prijsvraag__form {
		padding: 18px 16px 20px;
	}

	.nfs-prijsvraag__rij {
		flex-wrap: wrap;
	}

	.nfs-prijsvraag__kort {
		flex: 0 0 100% !important;
	}
}

/* --------------------------------------------------- selecteren en kiezen */

/* Tekst die je met de muis selecteert kreeg het standaardblauw van de browser.
   Dat blauw hoort niet bij de site; hier staat de amberkleur van de huisstijl. */
::selection {
	background-color: var(--nfs-amber);
	color: #fff;
}

::-moz-selection {
	background-color: var(--nfs-amber);
	color: #fff;
}

/* Hetzelfde voor alles wat je aanvinkt of aanklikt: keuzerondjes, vinkjes,
   schuifjes en de voortgang van een balk tekent de browser standaard in blauw.
   Eén regel zet ze allemaal in de huiskleur. */
input,
select,
textarea,
progress,
::file-selector-button {
	accent-color: var(--nfs-amber);
}

/* Eén manier waarop een veld laat zien dat je erin staat.

   Verzoek G Post, 31 augustus 2026: "als je iets moet invoeren komt er een randje
   tevoorschijn, dat is prima maar dit moet wel overal hetzelfde zijn". Er stonden
   er drie door elkaar: een amber rand met een zachte gloed bij het inloggen en de
   zoekbalk, een blauwe rand bij het aanvraagformulier, en overal elders een losse
   ring op twee pixels afstand van het veld. Nu overal dit: de rand van het veld
   zelf kleurt amber, met een zachte gloed eromheen.

   Met !important, omdat het thema op een stuk of zes plekken zijn eigen focuskleur
   zet met een zwaardere selector. Zonder dit blijft het per hoek verschillen, en
   juist dat was de klacht. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
select:focus,
textarea:focus {
	border-color: var(--nfs-amber) !important;
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.14) !important;
	outline: none !important;
}

/* Bij een knop, een koppeling of een vinkje valt er geen veldrand te kleuren; daar
   blijft het een ring eromheen. Alleen bij bediening met het toetsenbord, want met
   de muis is het overbodig — vandaar focus-visible.

   [tabindex="0"] en niet [tabindex]: WooCommerce hangt na het laden een halve
   seconde later tabindex="-1" aan de eerste melding en zet daar de aandacht op, om
   die aan een schermlezer voor te lezen. Met de oude regel tekende de browser daar
   een ring omheen — dat was het randje dat af en toe uit het niets bij een melding
   verscheen. Een houder die alleen voor een schermlezer bestaat hoort geen ring te
   krijgen. */
button:focus-visible,
a:focus-visible,
[type="submit"]:focus-visible,
[type="button"]:focus-visible,
[type="reset"]:focus-visible,
[type="checkbox"]:focus-visible,
[type="radio"]:focus-visible,
[tabindex="0"]:focus-visible {
	outline: 2px solid var(--nfs-amber);
	outline-offset: 2px;
}

/* En voor de zekerheid ook de ring die de browser zelf tekent: die melding krijgt
   de aandacht zonder dat de bezoeker daarheen is gegaan, dus valt er niets aan te
   wijzen. */
.nfs-melding [tabindex="-1"]:focus,
.nfs-melding [tabindex="-1"]:focus-visible,
.woocommerce-error[tabindex="-1"]:focus,
.woocommerce-message[tabindex="-1"]:focus,
.woocommerce-info[tabindex="-1"]:focus {
	outline: none !important;
}

/* In de keuzelijst van een uitklapmenu markeert de browser de regel waar je op
   staat; ook die volgt nu de huisstijl. */
option:checked,
option:hover {
	background-color: var(--nfs-amber);
	color: #fff;
}

.nfs-verzendkosten__voet {
	color: var(--nfs-muted);
	font-size: 13px;
	line-height: 1.6;
	margin: 10px 0 0;
}

/* ----------------------------------------------------------- accessoires */

/* Het blok onder een artikel waarin je aanvinkt wat je erbij wilt. Het thema zette
   hier drie productkaarten met een plusteken en een knop "alles toevoegen"; dit is
   een lijst waarin je zelf kiest. */

.nfs-combi__lijst {
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	list-style: none;
	margin: 0 0 18px;
	overflow: hidden;
	padding: 0;
}

.nfs-combi__regel {
	border-bottom: 1px solid var(--nfs-line);
	margin: 0;
}

.nfs-combi__regel:last-child {
	border-bottom: 0;
}

.nfs-combi__regel--dit {
	background-color: var(--nfs-band);
}

.nfs-combi__keuze {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 12px 16px;
}

.nfs-combi__regel--dit .nfs-combi__keuze {
	cursor: default;
}

.nfs-combi__keuze input[type="checkbox"] {
	flex: none;
	height: 18px;
	margin: 0;
	width: 18px;
}

/* Het artikel van de pagina zelf kun je niet uitvinken; daar staat een vinkje in
   plaats van een vakje. */
.nfs-combi__vast {
	align-items: center;
	background-color: var(--nfs-navy);
	border-radius: 4px;
	color: #fff;
	display: inline-flex;
	flex: none;
	height: 18px;
	justify-content: center;
	width: 18px;
}

.nfs-combi__vast svg {
	height: 12px;
	width: 12px;
}

.nfs-combi__leeg {
	flex: none;
	height: 18px;
	width: 18px;
}

.nfs-combi__foto img {
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	display: block;
	height: 96px;
	object-fit: cover;
	width: 96px;
}

/* De prijs met en zonder korting onder elkaar, met het percentage ernaast. */
.nfs-combi__prijs del {
	color: var(--nfs-muted);
	display: block;
	font-size: 13px;
	font-weight: 400;
}

.nfs-combi__prijs ins {
	color: var(--nfs-navy);
	text-decoration: none;
}

.nfs-combi__korting {
	background-color: var(--nfs-amber);
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-left: 6px;
	padding: 2px 8px;
	vertical-align: 2px;
}

.nfs-combi__naam {
	flex: 1 1 auto;
	min-width: 0;
}

.nfs-combi__label {
	color: var(--nfs-muted);
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nfs-combi__naam a {
	color: var(--nfs-navy);
	display: block;
	font-weight: 600;
}

.nfs-combi__staat {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	margin-top: 2px;
}

.nfs-combi__staat--in { color: var(--nfs-green); }
.nfs-combi__staat--last { color: var(--nfs-amber); }
.nfs-combi__staat--ask { color: var(--nfs-yellow-ink); }
.nfs-combi__staat--out { color: var(--nfs-muted); }

.nfs-combi__prijs {
	color: var(--nfs-navy);
	flex: none;
	font-weight: 700;
	text-align: right;
}

.nfs-combi__prijs .woocommerce-price-suffix {
	color: var(--nfs-muted);
	display: block;
	font-size: 12px;
	font-weight: 400;
}

.nfs-combi__voet {
	align-items: center;
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	padding: 16px 20px;
}

.nfs-combi__totaal-label {
	color: var(--nfs-muted);
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nfs-combi__totaal strong {
	color: var(--nfs-navy);
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
}

.nfs-combi__aantal {
	color: var(--nfs-muted);
	font-size: 13.5px;
	margin-left: 8px;
}

@media (max-width: 767px) {
	/* Alles op één regel: vinkje, foto, naam en prijs naast elkaar. Eerder viel de
	   prijs naar een eigen regel met een inspringing eronder; dat kostte per artikel
	   een halve schermhoogte en het las als een losse regel die nergens bij hoorde. */
	.nfs-combi__keuze {
		flex-wrap: nowrap;
		gap: 10px;
		padding: 10px 12px;
	}

	.nfs-combi__naam {
		flex: 1 1 46%;
		min-width: 0;
	}

	/* De prijs mag krimpen en afbreken. Bij een artikel met een prijsbereik —
	   "€ 799,00 - € 819,00" — nam hij anders de halve regel in beslag en werd de naam
	   ernaast tot één letter per regel geperst. */
	.nfs-combi__prijs {
		align-items: flex-end;
		flex: 0 1 auto;
		max-width: 42%;
		padding-left: 0;
		text-align: right;
	}

	.nfs-combi__prijs del,
	.nfs-combi__prijs ins,
	.nfs-combi__korting {
		display: block;
		text-align: right;
	}

	/* De foto mag niet platgedrukt worden door een lange naam ernaast. */
	.nfs-combi__foto {
		flex: 0 0 58px;
	}

	.nfs-combi__foto img {
		height: 58px;
		width: 58px;
	}

	.nfs-combi__voet {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.nfs-combi__voet .nfs-btn {
		width: 100%;
	}
}

/* In de winkelwagen en bij het afrekenen zet WooCommerce onder de prijs het begin
   van de productbeschrijving, halverwege afgekapt met puntjes. Wie in de
   winkelwagen staat weet al wat hij gekozen heeft; die halve zin voegt niets toe en
   maakt de regel onrustig. De naam blijft een link naar het artikel zelf. */
.wc-block-components-product-metadata__description {
	display: none;
}

/* ------------------------------------------------ contact in de voettekst */

/* Adres, telefoon, WhatsApp en e-mail onder elkaar, elk met een klein icoontje en
   allemaal aanklikbaar. Eerder stond hier alleen een adres onder de kop "Contact
   info", met daaronder een rij sociale knoppen die nergens heen gingen. */
.nfs-footer-contact {
	margin-top: 18px;
}

.nfs-footer-contact__title {
	color: #fff;
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.nfs-footer-contact ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfs-footer-contact li {
	align-items: flex-start;
	display: flex;
	gap: 11px;
	padding: 5px 0;
}

.nfs-footer-contact__icon {
	align-items: center;
	color: var(--nfs-amber-light);
	display: inline-flex;
	flex: none;
	height: 20px;
	justify-content: center;
	width: 20px;
}

.nfs-footer-contact__icon svg {
	height: 17px;
	width: 17px;
}

.nfs-footer-contact a {
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.5;
	transition: color 0.15s ease;
}

.nfs-footer-contact a:hover,
.nfs-footer-contact a:focus {
	color: #fff;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.nfs-footer-contact {
		margin-top: 14px;
	}

	.nfs-footer-contact li {
		padding: 7px 0;
	}
}

/* ==========================================================================
   Cookies, privacy en de juridische pagina's
   ========================================================================== */

/* De vraag onderaan het scherm. Geen scherm-vullend gordijn: de bezoeker mag
   gewoon rondkijken zonder eerst iets te moeten kiezen. Wel blijft de balk staan
   tot er gekozen is, want anders zou de vraag zomaar te ontlopen zijn. */
.nfs-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	padding: 14px;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.nfs-cookies__kaart {
	pointer-events: auto;
	width: 100%;
	max-width: 720px;
	background: #fff;
	color: var(--nfs-text);
	border: 1px solid var(--nfs-line);
	border-top: 3px solid var(--nfs-amber);
	border-radius: 10px;
	box-shadow: 0 18px 44px rgba(15, 53, 87, .22);
	padding: 20px 22px;
	font-size: 14px;
	line-height: 1.55;
}

.nfs-cookies__titel {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--nfs-navy);
	margin-bottom: 6px;
}

.nfs-cookies__kaart p {
	margin: 0 0 10px;
	color: var(--nfs-text);
}

/* De regel die verschijnt als iemand net een taal heeft aangeklikt. */
.nfs-cookies__melding {
	background: #fdf4e6;
	border-left: 3px solid var(--nfs-amber);
	padding: 8px 12px;
	border-radius: 0 6px 6px 0;
}

.nfs-cookies__links a {
	color: var(--nfs-blue);
	text-decoration: underline;
}

.nfs-cookies__links span {
	margin: 0 6px;
	color: var(--nfs-muted);
}

/* Accepteren en weigeren staan naast elkaar, even groot en even duidelijk. Dat is
   geen opmaakkeuze maar een eis: weigeren moet net zo makkelijk zijn als accepteren. */
.nfs-cookies__knoppen {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}

/* De kleuren staan met !important. Het thema verft elke kale knop grijs met een
   selector van elf uitzonderingen achter elkaar — daar wint een gewone klasse het
   niet van, en meedoen aan die wedstrijd maakt de regel alleen maar langer. */
.nfs-cookies__knop {
	flex: 1 1 200px;
	min-height: 46px;
	padding: 12px 18px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid var(--nfs-navy) !important;
	transition: background-color .15s ease, color .15s ease;
}

.nfs-cookies__knop--ja {
	background-color: var(--nfs-amber) !important;
	border-color: var(--nfs-amber) !important;
	color: #fff !important;
}

.nfs-cookies__knop--ja:hover {
	background-color: var(--nfs-amber-dark) !important;
	border-color: var(--nfs-amber-dark) !important;
}

.nfs-cookies__knop--nee {
	background-color: #fff !important;
	color: var(--nfs-navy) !important;
}

.nfs-cookies__knop--nee:hover {
	background-color: var(--nfs-band) !important;
}

.nfs-cookies__meer {
	margin-top: 14px;
	border-top: 1px solid var(--nfs-line);
	padding-top: 10px;
}

.nfs-cookies__meer > summary {
	cursor: pointer;
	color: var(--nfs-blue);
	font-weight: 600;
	list-style: none;
}

.nfs-cookies__meer > summary::-webkit-details-marker {
	display: none;
}

.nfs-cookies__meer > summary::before {
	content: "▸";
	display: inline-block;
	margin-right: 6px;
	transition: transform .15s ease;
}

.nfs-cookies__meer[open] > summary::before {
	transform: rotate(90deg);
}

.nfs-cookies__lijst {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.nfs-cookies__lijst > li {
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 8px;
	background: var(--nfs-band);
}

.nfs-cookies__lijst p {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--nfs-muted);
}

.nfs-cookies__regel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

.nfs-cookies__naam {
	font-weight: 600;
	color: var(--nfs-navy);
}

.nfs-cookies__vast {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--nfs-muted);
}

.nfs-cookies__regel input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--nfs-amber);
	flex: 0 0 auto;
	margin: 0;
}

.nfs-cookies__knop--bewaren {
	flex: 0 0 auto;
	margin-top: 6px;
	background-color: var(--nfs-navy) !important;
	border-color: var(--nfs-navy) !important;
	color: #fff !important;
	width: 100%;
}

.nfs-cookies__knop--bewaren:hover {
	background-color: var(--nfs-blue) !important;
	border-color: var(--nfs-blue) !important;
}

@media (max-width: 480px) {
	.nfs-cookies {
		padding: 0;
	}

	.nfs-cookies__kaart {
		border-radius: 10px 10px 0 0;
		padding: 16px;
		max-height: 82vh;
		overflow-y: auto;
	}
}

/* De drie juridische links onder de contactgegevens in de voettekst. */
.nfs-footer-juridisch {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 13px;
}

.nfs-footer-juridisch a {
	color: rgba(255, 255, 255, .72);
}

.nfs-footer-juridisch a:hover {
	color: #fff;
	text-decoration: underline;
}

/* De tabel met cookies op het cookiebeleid. Op een telefoon vouwt hij open tot
   losse regels met het kopje ervoor, anders wordt hij onleesbaar smal. */
.nfs-cookietabel {
	margin: 0 0 34px;
}

.nfs-cookietabel h3 {
	color: var(--nfs-navy);
	font-size: 19px;
	margin: 0 0 6px;
}

.nfs-cookietabel table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	font-size: 14px;
}

.nfs-cookietabel th,
.nfs-cookietabel td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--nfs-line);
	vertical-align: top;
}

.nfs-cookietabel thead th {
	background: var(--nfs-band);
	color: var(--nfs-navy);
	font-weight: 600;
	border-bottom: 2px solid var(--nfs-line);
}

.nfs-cookietabel code {
	background: var(--nfs-band);
	color: var(--nfs-navy);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 13px;
	word-break: break-word;
}

@media (max-width: 767px) {
	.nfs-cookietabel thead {
		display: none;
	}

	.nfs-cookietabel tr {
		display: block;
		border: 1px solid var(--nfs-line);
		border-radius: 8px;
		margin-bottom: 10px;
		padding: 6px 0;
	}

	.nfs-cookietabel td {
		display: block;
		border: 0;
		padding: 6px 12px;
	}

	.nfs-cookietabel td::before {
		content: attr(data-kop);
		display: block;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--nfs-muted);
	}
}

/* ==========================================================================
   Afrekenen: particulier of zakelijk
   ========================================================================== */

/* De vraag die de rest van het formulier bepaalt. Als keuzelijstje werd hij
   overgeslagen; als twee tegels is het de eerste handeling op de pagina. Het echte
   keuzelijstje van WooCommerce blijft eronder staan, maar onzichtbaar: dat houdt de
   gegevens bij en zorgt dat de zakelijke velden verschijnen. */
.nfs-koopkeuze {
	margin: 16px 0 18px;
}

.nfs-koopkeuze__vraag {
	color: var(--nfs-navy);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 10px;
}

.nfs-koopkeuze__rij {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Het thema geeft élke knop een grijze vulling; vandaar de nadruk op de kleuren
   hieronder. Zonder dat zien de twee knoppen er uitgeschakeld uit. */
.nfs-koopkeuze__tegel {
	align-items: center;
	background: #fff !important;
	border: 2px solid var(--nfs-line) !important;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 14px 40px 14px 16px;
	position: relative;
	text-align: left;
	transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
	width: 100%;
}

.nfs-koopkeuze__tegel:hover {
	border-color: rgba(29, 78, 137, .45) !important;
}

.nfs-koopkeuze__tegel.is-gekozen {
	background: var(--nfs-band) !important;
	border-color: var(--nfs-navy) !important;
	box-shadow: 0 6px 18px rgba(15, 53, 87, .10);
}

.nfs-koopkeuze__icoon {
	color: var(--nfs-amber);
	flex: 0 0 auto;
	line-height: 0;
}

.nfs-koopkeuze__icoon svg {
	height: 26px;
	width: 26px;
}

.nfs-koopkeuze__naam {
	color: var(--nfs-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

/* Het vinkje verschijnt pas als de knop gekozen is; anders springt de rand om
   zonder dat je ziet wát er nu eigenlijk aanstaat. */
.nfs-koopkeuze__vink {
	background: var(--nfs-navy);
	border-radius: 50%;
	color: #fff;
	height: 22px;
	margin-top: -11px;
	opacity: 0;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: scale(.7);
	transition: opacity .12s ease, transform .12s ease;
	width: 22px;
}

.nfs-koopkeuze__vink svg {
	height: 14px;
	margin: 4px;
	width: 14px;
}

.nfs-koopkeuze__tegel.is-gekozen .nfs-koopkeuze__vink {
	opacity: 1;
	transform: scale(1);
}

/* Het oorspronkelijke keuzelijstje: uit beeld, maar wel bereikbaar voor het
   formulier zelf en voor een schermlezer. */
.nfs-koopkeuze__origineel {
	height: 1px;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

@media (max-width: 600px) {
	.nfs-koopkeuze__rij {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* De bedrijfsgegevens boven aan het privacybeleid. */
.nfs-gegevens {
	background: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	padding: 18px 22px;
	margin: 0 0 28px;
}

.nfs-gegevens > div {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(226, 232, 240, .8);
}

.nfs-gegevens > div:last-child {
	border-bottom: 0;
}

.nfs-gegevens dt {
	flex: 0 0 160px;
	font-weight: 600;
	color: var(--nfs-navy);
	margin: 0;
}

.nfs-gegevens dd {
	flex: 1 1 220px;
	margin: 0;
	color: var(--nfs-text);
}

/* De algemene voorwaarden. Achttien artikelen met genummerde leden, en daaronder
   soms een rijtje met letters. Dat moet leesbaar blijven op een telefoon: het
   nummer buiten de tekstkolom, zodat de regels netjes onder elkaar uitlijnen. */
.nfs-voorwaarden__leden,
.nfs-voorwaarden__letters {
	color: var(--nfs-text);
	margin: 0 0 26px;
	padding-left: 26px;
}

.nfs-voorwaarden__leden > li,
.nfs-voorwaarden__letters > li {
	color: var(--nfs-text);
	line-height: 1.7;
	margin-bottom: 10px;
	padding-left: 4px;
}

.nfs-voorwaarden__letters {
	list-style-type: lower-alpha;
	margin: 10px 0 0;
}

/* De voorwaarden bestaan uit twee delen: de aanvulling voor de webshop en de
   algemene voorwaarden zelf. Die scheiding moet je zien, anders lijkt het één lange
   lap tekst waarin niemand meer weet welk stuk over zijn bestelling gaat. */
.nfs-voorwaarden__deel {
	border-top: 2px solid var(--nfs-navy);
	margin-top: 44px;
	padding-top: 22px;
}

.nfs-voorwaarden__versie {
	color: var(--nfs-muted);
	font-size: 13px;
	margin-top: 26px;
}

/* De regel onder het aanmeldveld van de nieuwsbrief. Het formulier stond als één
   rij ingesteld; met deze regel erbij mag hij afbreken en gaat de tekst er onder
   de volle breedte onder staan. */
.nfs-newsletter__form form {
	flex-wrap: wrap;
}

.nfs-newsletter__form .input-group {
	flex: 1 1 100%;
	display: flex;
}

.nfs-newsletter__klein {
	flex: 1 1 100%;
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
}

.nfs-newsletter__klein a {
	color: #fff;
	text-decoration: underline;
}

/* Kopjes in de beschrijving. De opzet van elke productbeschrijving is vast —
   Overview, Key features, What's included, Compatibility, Condition — en die
   kopjes horen als kopje te lezen, niet als een dikke regel tekst. Klein en in de
   huiskleur; het gaat om de indeling, niet om de aandacht. */
.nfs-productinfo__text h3 {
	color: var(--nfs-navy);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	margin: 22px 0 8px;
	text-transform: none;
}

.nfs-productinfo__text > h3:first-child,
.nfs-productinfo__text > p:first-child + h3 {
	margin-top: 16px;
}

/* De eerste alinea is de samenvatting: iets groter en donkerder dan de rest. */
.nfs-product-tab .nfs-productinfo__text > p:first-child {
	font-size: 15.5px;
	margin-bottom: 4px !important;
}

/* Volle rijen in de blokken op de homepage.
   Er worden er twaalf opgehaald. Twaalf deelt door twee, drie en vier, dus op elke
   breedte staat de reeks vol: op een tablet vier rijen van drie, op een breed scherm
   drie schuifbeelden van vier. Het staartje hoeft daarom nergens meer weggelaten te
   worden — dat gebeurde bij tien artikelen wel. */

/* ==========================================================================
   Korting: groen, en zonder geschreeuw
   ========================================================================== */

/* Rood zegt "fout", groen zegt "voordeel". Alle plekken waar een korting staat
   krijgen daarom dezelfde groene familie: het percentage op de kaart, de prijs die
   ervoor in de plaats komt, het bedrag dat de klant bespaart en de bon in de
   winkelwagen. Verzadigd genoeg om op te vallen tussen de foto's, rustig genoeg om
   niet met het amber van de knoppen te vechten. */
:root {
	--nfs-groen-diep: #12703a;
	--nfs-groen-zacht: #e8f4ec;
}

.savings,
.product .savings,
.owl-item > .product .onsale,
.products > .product .onsale,
.woocommerce ul.products li.product .onsale,
.onsale,
.woocommerce span.onsale,
.nfs-sale-grid .onsale {
	background-color: var(--nfs-groen-diep);
	box-shadow: 0 1px 3px rgba(18, 112, 58, .28);
}

/* In de productlijsten zet het thema de afgeprijsde prijs zelf nog een keer op
   rood, met een eigen regel per weergave. Die halen we hier over. */
.owl-item > .product .price ins,
.products > .product .price ins,
.products > .product .price ins .woocommerce-Price-amount,
.sidebar .product_list_widget .electro-price ins .amount,
.nfs-combi__prices ins,
.nfs-combi__prices ins .woocommerce-Price-amount {
	color: var(--nfs-groen-diep) !important;
	text-decoration: none;
}

/* De regel onder de prijs op de productpagina: een prijskaartje, het bedrag en
   tussen haakjes het percentage. Eén regel, geen kader eromheen — het mag opvallen
   omdat het groen is, niet omdat het groot is. */
.nfs-bespaar {
	align-items: center;
	background: var(--nfs-groen-zacht);
	border-radius: 999px;
	color: var(--nfs-groen-diep);
	display: inline-flex;
	font-size: 13.5px;
	font-weight: 600;
	gap: 7px;
	line-height: 1;
	margin-top: 10px;
	padding: 7px 14px 7px 11px;
	white-space: nowrap;
}

.nfs-bespaar em {
	font-style: normal;
	font-weight: 400;
	opacity: .75;
}

.nfs-bespaar__merk {
	height: 15px;
	width: 15px;
	flex: 0 0 auto;
}

/* De blokkenwinkelwagen zet onder een afgeprijsde regel een grijze bon met het
   bespaarde bedrag. Grijs leest als een voetnoot; dit is juist het goede nieuws. */
.wc-block-components-sale-badge {
	background: var(--nfs-groen-zacht) !important;
	border: 1px solid rgba(18, 112, 58, .18) !important;
	border-radius: 999px !important;
	color: var(--nfs-groen-diep) !important;
	font-weight: 600 !important;
}

/* Het blok met accessoires onder de winkelwagen en op de productpagina. */
.nfs-combi__tag {
	background-color: var(--nfs-groen-diep);
}

.nfs-combi__badge {
	background-color: var(--nfs-groen-diep);
	box-shadow: 0 1px 3px rgba(18, 112, 58, .28);
}

.nfs-combi__korting {
	background: var(--nfs-groen-zacht);
	border-radius: 999px;
	color: var(--nfs-groen-diep);
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
}

/* In de winkelwagen staat bij een accessoire de regel "Voordeel: combinatiekorting".
   Die krijgt dezelfde kleur, zodat het rijtje herkenbaar bij elkaar hoort. */
.wc-block-components-product-details__voordeel .wc-block-components-product-details__value,
.variation-Voordeel p {
	color: var(--nfs-groen-diep);
	font-weight: 600;
}

/* ==========================================================================
   Conditie: het label leidt naar de uitleg
   ========================================================================== */

/* Het conditielabel bij een artikel is nu een link. Dat mag je zien — een klein
   vraagteken erachter en een randje dat oplicht — maar het moet hetzelfde label
   blijven, geen knop die om aandacht vraagt naast "in winkelwagen". */
.nfs-chip--link {
	align-items: center;
	display: inline-flex;
	gap: 6px;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.nfs-chip__vraag {
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 9px;
	height: 13px;
	line-height: 12px;
	opacity: .55;
	text-align: center;
	width: 13px;
}

.nfs-chip--link:hover {
	border-color: currentColor;
}

.nfs-chip--link:hover .nfs-chip__vraag {
	opacity: 1;
}

.nfs-chip--getest {
	background-color: rgba(29, 78, 137, .08);
	border-color: rgba(29, 78, 137, .22);
	color: var(--nfs-blue);
}

.nfs-chip--for-parts {
	background-color: rgba(97, 116, 138, .1);
	border-color: rgba(97, 116, 138, .25);
	color: var(--nfs-muted);
}

/* De vier blokken op de garantiepagina. Dicht is het één regel: label, wat het in
   het kort betekent, en rechts "lees meer". Open klapt de uitleg eronder uit. */
.nfs-lead {
	color: var(--nfs-text);
	font-size: 17px;
	line-height: 1.65;
	margin: 0 auto 28px;
	max-width: 760px;
	text-align: center;
}

.nfs-conditie {
	margin: 0 auto;
	max-width: 860px;
}

.nfs-conditie__blok {
	background: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	margin-bottom: 12px;
	overflow: hidden;
	/* Wie op een productpagina op "Gereviseerd" klikt, komt hier binnen op het anker.
	   Zonder deze marge zet de browser het blok tegen de bovenrand en verdwijnt de
	   kop onder de vaste balk van het thema. Nu begint de conditie waar hij hoort:
	   met zijn eigen kop, volledig in beeld. */
	scroll-margin-top: 110px;
}

@media (max-width: 991px) {
	.nfs-conditie__blok {
		scroll-margin-top: 84px;
	}
}

.nfs-conditie__blok[open] {
	border-color: rgba(29, 78, 137, .35);
	box-shadow: 0 6px 20px rgba(15, 53, 87, .07);
}

.nfs-conditie__kop {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 14px;
	list-style: none;
	padding: 16px 20px;
}

.nfs-conditie__kop::-webkit-details-marker {
	display: none;
}

.nfs-conditie__kort {
	color: var(--nfs-text);
	flex: 1 1 auto;
	font-size: 15px;
}

.nfs-conditie__meer {
	color: var(--nfs-blue);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.nfs-conditie__meer::after {
	content: " ▾";
}

.nfs-conditie__blok[open] .nfs-conditie__meer::after {
	content: " ▴";
}

.nfs-conditie__uitleg {
	border-top: 1px solid var(--nfs-line);
	padding: 18px 20px 20px;
}

.nfs-conditie__uitleg p {
	color: var(--nfs-text);
	line-height: 1.7;
	margin: 0 0 12px;
}

.nfs-conditie__geldt {
	font-weight: 700;
	margin-bottom: 8px !important;
}

.nfs-conditie__uitleg ul {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.nfs-conditie__uitleg li {
	color: var(--nfs-text);
	line-height: 1.65;
	padding: 4px 0 4px 24px;
	position: relative;
}

.nfs-conditie__uitleg li::before {
	color: var(--nfs-amber);
	content: "—";
	left: 0;
	position: absolute;
}

.nfs-conditie__link a {
	color: var(--nfs-blue);
	font-weight: 600;
	text-decoration: underline;
}

@media (max-width: 575.98px) {
	.nfs-conditie__kop {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 8px;
	}

	.nfs-conditie__kort {
		flex: 1 1 100%;
		font-size: 14px;
	}
}

/* De conditie Ongetest: werkend gedemonteerd, daarna niet opnieuw nagekeken. Geel,
   net als "op aanvraag" — het is geen afkeuring, maar wel een voorbehoud. */
.nfs-chip--ongetest {
	background-color: rgba(240, 180, 0, .12);
	border-color: rgba(240, 180, 0, .35);
	color: var(--nfs-yellow-ink);
}

/* Het merklabel bij een artikel wijst naar de merkpagina. */
.nfs-chip__pijl {
	font-size: 11px;
	opacity: .5;
}

.nfs-chip--link:hover .nfs-chip__pijl {
	opacity: 1;
}

/* Boven de artikelen op een merkpagina: de openingszin, een bekend product en de
   kop boven de lijst. */
.nfs-merkintro {
	margin: 0 0 26px;
}

.nfs-merkintro__lead {
	color: var(--nfs-text);
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 20px;
	max-width: 780px;
}

.nfs-merkintro__beeld {
	margin: 0 0 22px;
	max-width: 560px;
}

.nfs-merkintro__beeld img {
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	height: auto;
	width: 100%;
}

.nfs-merkintro__beeld figcaption {
	color: var(--nfs-muted);
	font-size: 13px;
	margin-top: 8px;
}

.nfs-merkintro__leeg {
	background: var(--nfs-band);
	border: 1px dashed var(--nfs-line);
	border-radius: 8px;
	color: var(--nfs-muted);
	font-size: 13.5px;
	margin: 0 0 22px;
	max-width: 560px;
	padding: 12px 16px;
}

.nfs-merkintro__kop {
	border-bottom: 2px solid var(--nfs-navy);
	color: var(--nfs-navy);
	font-size: 20px;
	margin: 0 0 4px;
	padding-bottom: 10px;
}

/* De toelichting boven een genummerde lijst, bijvoorbeeld bij de garantieprocedure. */
.nfs-section__intro {
	color: var(--nfs-text);
	font-size: 16px;
	line-height: 1.7;
	margin: -6px 0 22px;
	max-width: 780px;
}

/* ==========================================================================
   Eerder bekeken: altijd één rij
   ========================================================================== */

/* Op een breed scherm vijf naast elkaar, en niet meer. Het thema zet hier zijn
   eigen kolomklassen op, vandaar dat het raster hier wordt overgenomen. */
@media (min-width: 992px) {
	.nfs-recent .products {
		display: grid !important;
		gap: 16px;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.nfs-recent .products > * {
		max-width: none;
		padding: 0;
		width: auto;
	}
}

/* Daaronder wordt het één rij om doorheen te vegen. De kaarten houden hun maat,
   de rij schuift; met scroll-snap komt elke kaart netjes tot stilstand. */
@media (max-width: 991.98px) {
	.nfs-recent .products {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 12px;
		margin: 0 -15px;
		overflow-x: auto;
		padding: 0 15px 6px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.nfs-recent .products::-webkit-scrollbar {
		display: none;
	}

	.nfs-recent .products > * {
		flex: 0 0 62%;
		max-width: 260px;
		padding: 0;
		scroll-snap-align: start;
		width: 62%;
	}
}

@media (max-width: 575.98px) {
	.nfs-recent .products > * {
		flex-basis: 74%;
		width: 74%;
	}
}

/* ==========================================================================
   Bezorgadres kiezen in de winkelwagen
   ========================================================================== */

/* De blokkenwinkelwagen laat wel het verzendtarief zien, maar geen manier om te
   zeggen waar het pakket heen moet. Dit blokje doet dat, met een knop: pas na het
   klikken wordt het opgeslagen en opnieuw gerekend, zodat er geen bedragen
   veranderen terwijl iemand nog aan het typen is. */
.nfs-bezorgkeuze {
	background: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	margin: 24px 0 8px;
	padding: 18px 20px;
}

.nfs-bezorgkeuze__kop {
	margin-bottom: 12px;
}

.nfs-bezorgkeuze__kop strong {
	color: var(--nfs-navy);
	display: block;
	font-size: 16px;
}

.nfs-bezorgkeuze__kop span {
	color: var(--nfs-muted);
	font-size: 14px;
}

.nfs-bezorgkeuze__velden {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nfs-bezorgkeuze__velden p {
	flex: 1 1 220px;
	margin: 0;
}

.nfs-bezorgkeuze__velden label {
	color: var(--nfs-muted);
	display: block;
	font-size: 12px;
	letter-spacing: .04em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.nfs-bezorgkeuze__velden label span {
	letter-spacing: 0;
	text-transform: none;
}

.nfs-bezorgkeuze__velden select,
.nfs-bezorgkeuze__velden input[type="text"] {
	background: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	height: 44px;
	padding: 0 12px;
	width: 100%;
}

.nfs-bezorgkeuze__knop {
	flex: 0 0 auto;
}

.nfs-bezorgkeuze__knop .nfs-btn {
	height: 44px;
	white-space: nowrap;
}

/* Landen zonder postcodesysteem: dan hoort het veld er niet te staan. */
.nfs-bezorgkeuze__verborgen {
	display: none;
}

.nfs-bezorgkeuze__melding {
	color: var(--nfs-green);
	font-size: 14px;
	margin: 12px 0 0;
}

@media (max-width: 575.98px) {
	.nfs-bezorgkeuze__knop,
	.nfs-bezorgkeuze__knop .nfs-btn {
		width: 100%;
	}
}

/* De drie voordelen in het blok "Waarom NauticForSale" zijn links naar de pagina
   waar ze worden uitgelegd. Een streep onder de kop laat dat zien; de rest van het
   vakje reageert mee bij aanwijzen, zodat het hele blok aanklikbaar aanvoelt. */
.nfs-why__item--link {
	display: block;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.nfs-why__item--link .nfs-why__head {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .45);
	text-underline-offset: 4px;
}

.nfs-why__item--link:hover,
.nfs-why__item--link:focus-visible {
	background-color: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
	transform: translateY(-2px);
}

.nfs-why__item--link:hover .nfs-why__head {
	text-decoration-color: #fff;
}

.nfs-why__item--link:hover .nfs-why__mark {
	color: #fff;
}

/* De drie beloftes in de balk boven de zoekbalk zijn links naar de pagina waar ze
   worden uitgelegd. Een dun streepje onder de tekst laat dat zien; bij aanwijzen
   licht het op. Het icoontje blijft er los voor staan, anders loopt de streep er
   ook onderdoor. */
.nfs-usp__item--link {
	color: inherit;
	text-decoration: none;
}

.nfs-usp__item--link span {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .4);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color .15s ease;
}

.nfs-usp__item--link:hover,
.nfs-usp__item--link:focus-visible {
	color: #fff;
}

.nfs-usp__item--link:hover span {
	text-decoration-color: #fff;
}

.nfs-usp__item--link:hover .nfs-icon {
	color: var(--nfs-amber);
}

/* Op de telefoon is de balk wit met blauwe letters; daar hoort een blauwe streep. */
@media (max-width: 991px) {
	.nfs-usp__item--link span {
		text-decoration-color: rgba(15, 53, 87, .35);
	}

	.nfs-usp__item--link:hover,
	.nfs-usp__item--link:focus-visible {
		color: var(--nfs-navy);
	}

	.nfs-usp__item--link:hover span {
		text-decoration-color: var(--nfs-navy);
	}
}

/* ==========================================================================
   Zoeken: suggesties tijdens het typen
   ========================================================================== */

.nfs-suggesties {
	background: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	box-shadow: 0 18px 44px rgba(15, 53, 87, .18);
	left: 0;
	margin-top: 6px;
	max-height: 70vh;
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 999;
}

.nfs-suggesties__lijst {
	list-style: none;
	margin: 0;
	padding: 6px;
}

.nfs-suggesties__item {
	align-items: center;
	border-radius: 8px;
	color: var(--nfs-text);
	display: flex;
	gap: 12px;
	padding: 8px 10px;
	text-decoration: none;
	transition: background-color .12s ease;
}

.nfs-suggesties__item:hover,
.nfs-suggesties__item:focus {
	background: var(--nfs-band);
	color: var(--nfs-text);
}

.nfs-suggesties__item img {
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	flex: 0 0 auto;
	height: 46px;
	object-fit: cover;
	width: 46px;
}

.nfs-suggesties__tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nfs-suggesties__titel {
	color: var(--nfs-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nfs-suggesties__meta {
	color: var(--nfs-muted);
	font-size: 12px;
}

.nfs-suggesties__prijs {
	color: var(--nfs-navy);
	flex: 0 0 auto;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
}

.nfs-suggesties__alles {
	border-top: 1px solid var(--nfs-line);
	color: var(--nfs-blue);
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	padding: 12px 16px;
	text-align: center;
}

.nfs-suggesties__leeg {
	color: var(--nfs-text);
	font-size: 14px;
	margin: 0;
	padding: 16px;
}

.nfs-suggesties__leeg a {
	color: var(--nfs-blue);
	text-decoration: underline;
}

/* Op de telefoon hangt de zoekbalk in de knoppenbalk van het thema, en daar geldt:
   elke link in een lijstje is een pictogram. Het thema drukt onze suggesties dan
   samen tot 22 pixels breed en zet de letters wit op wit — de resultaten stonden er
   wel, maar waren onleesbaar. Dezelfde opmaak staat hieronder daarom nog een keer,
   met genoeg gewicht om die regel te verslaan. */
.nfs-suggesties .nfs-suggesties__lijst .nfs-suggesties__item {
	color: var(--nfs-text);
	display: flex;
	font-size: 14px;
	width: auto;
}

/* En dezelfde reden voor de foto ernaast. Het thema zet in die knoppenbalk de
   breedte van elk plaatje op auto; een liggende foto werd daardoor breder dan een
   staande, en dan begint de naam van het ene artikel verder naar rechts dan van het
   volgende. Dat viel op bij het eerste zoekresultaat, dat als enige niet onder de
   rest uitkwam (verzoek G Post, 31 augustus 2026).

   Het vakje ligt nu vast op 46 bij 46, van drie kanten dichtgetimmerd: de maat zelf,
   de grenzen eromheen, en de flexregel die zegt dat er niet aan gerekt of gekrompen
   mag worden. Wat er ook voor foto in komt, de tekst begint overal op dezelfde
   plek. */
.nfs-suggesties .nfs-suggesties__lijst .nfs-suggesties__item img {
	flex: 0 0 46px;
	height: 46px;
	max-height: 46px;
	max-width: 46px;
	min-width: 46px;
	object-fit: cover;
	width: 46px;
}

/* En dan zat het op de telefoon nóg ergens anders in. Daar hangt de zoeklijst in
   een zijbalkblok van het thema, en dat zet tussen twee opeenvolgende regels van een
   lijst twintig pixels ruimte — bedoeld voor een menu dat naast elkaar staat. Het
   eerste item heeft geen voorganger en kreeg die ruimte dus niet: precies de reden
   dat de bovenste regel als enige verder naar links begon.

   Gemeten op een telefoon: het eerste blokje stond op 23 pixels, alle volgende op 43.
   Nu staan ze allemaal op dezelfde plek. Met nadruk, want de regel van het thema is
   even lang als deze en zou anders winnen. */
.nfs-suggesties .nfs-suggesties__lijst > li,
.nfs-suggesties .nfs-suggesties__lijst > li + li {
	float: none !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Op een smal scherm past een productnaam nooit op één regel. Liever twee volle
   regels dan meteen puntjes: het merk staat vooraan, maar het type erachter is
   juist waar iemand op zoekt. */
@media (max-width: 767px) {
	.nfs-suggesties .nfs-suggesties__lijst .nfs-suggesties__titel {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal;
	}
}

/* ==========================================================================
   Zoeken: niets gevonden
   ========================================================================== */

/* Een leeg scherm is het slechtste moment om niets te zeggen. Vandaar een radar
   die rondtolt zonder echo, de gok naar wat er bedoeld werd, en de uitweg: laat
   ons ernaar zoeken. */
.nfs-leeg {
	background: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 12px;
	margin: 8px 0 32px;
	padding: 32px;
}

.nfs-leeg__kop {
	align-items: center;
	display: flex;
	gap: 24px;
}

.nfs-leeg__radar {
	color: var(--nfs-navy);
	flex: 0 0 auto;
	height: 86px;
	width: 86px;
}

.nfs-leeg__radar svg {
	height: 100%;
	width: 100%;
}

.nfs-leeg__straal {
	transform-origin: 32px 32px;
	animation: nfs-radar 3.2s linear infinite;
	stroke: var(--nfs-amber);
}

@keyframes nfs-radar {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.nfs-leeg__straal {
		animation: none;
	}
}

.nfs-leeg h2 {
	color: var(--nfs-navy);
	font-size: 24px;
	margin: 0 0 8px;
}

.nfs-leeg p {
	color: var(--nfs-text);
	line-height: 1.65;
	margin: 0 0 6px;
	max-width: 640px;
}

.nfs-leeg__gok a {
	color: var(--nfs-blue);
	font-weight: 600;
	text-decoration: underline;
}

.nfs-leeg__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
}

.nfs-leeg__paden {
	border-top: 1px solid var(--nfs-line);
	margin-top: 26px;
	padding-top: 18px;
}

.nfs-leeg__label {
	color: var(--nfs-muted);
	font-size: 12px;
	letter-spacing: .05em;
	margin-bottom: 10px !important;
	text-transform: uppercase;
}

.nfs-leeg__paden ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfs-leeg__paden a {
	align-items: center;
	background: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 40px;
	color: var(--nfs-navy);
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	padding: 7px 14px;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.nfs-leeg__paden a:hover {
	background: var(--nfs-navy);
	border-color: var(--nfs-navy);
	color: #fff;
}

.nfs-leeg__paden span {
	color: var(--nfs-muted);
	font-size: 12px;
	font-weight: 400;
}

.nfs-leeg__paden a:hover span {
	color: rgba(255, 255, 255, .75);
}

@media (max-width: 575.98px) {
	.nfs-leeg {
		padding: 22px 18px;
	}

	.nfs-leeg__kop {
		flex-direction: column;
		gap: 14px;
		text-align: center;
	}

	.nfs-leeg__acties .nfs-btn {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* Het formulier draagt de suggestielijst; die hangt eronder en mag over de pagina
   heen vallen. Zonder deze regel valt hij binnen de groep met afgeronde hoeken,
   en die knipt alles buiten zijn randen weg. */
.nfs-zoekvorm {
	position: relative;
}

/* ==========================================================================
   Telefoon: de ruimte tussen de blokken
   ========================================================================== */

/* De afstanden zijn getekend voor een breed scherm: ruim vijftig pixels wit tussen
   twee blokken. Op een telefoon van 390 breed is dat een zevende van de breedte, en
   dan lijkt elk blok op een eiland. Wat lucht mag er blijven — het moet niet aan
   elkaar plakken — maar een derde eraf leest een stuk rustiger, en er past meer op
   één scherm. */
@media (max-width: 767px) {
	.nfs-section {
		margin-bottom: 24px;
	}

	.nfs-section--tight {
		margin-bottom: 20px;
	}

	.nfs-hero,
	.nfs-brands-section,
	.nfs-contact,
	.nfs-about-intro,
	.nfs-about-closing {
		margin-bottom: 24px;
	}

	/* Blokken met een eigen achtergrond: die dragen hun lucht van binnen, dus daar
	   kan de binnenruimte ook wat omlaag. */
	.nfs-why,
	.nfs-warehouse,
	.nfs-sourcing,
	.nfs-reviews {
		margin-bottom: 24px;
		padding-bottom: 24px;
		padding-top: 24px;
	}

	.nfs-newsletter {
		padding: 20px 0;
	}

	/* De kop van een blok stond ruim boven zijn eigen inhoud; op een telefoon is dat
	   een halve regel te veel. */
	.nfs-section__head {
		margin-bottom: 12px;
	}

	/* Tussen de kaart met specificaties en het blok eronder viel een gat van bijna
	   een schermhoogte; dat kwam van de marge van het tabblad plus die van de sectie
	   erna. */
	.single-product .nfs-product-tabs,
	.single-product .single-product-wrapper {
		margin-bottom: 20px;
	}

	.nfs-productinfo {
		gap: 16px;
	}

	/* De sprong naar de voettekst was met 86 pixels de grootste van de pagina. Die
	   komt van het thema: het zet onder de inhoud een marge van zes tienden van de
	   basisregelafstand. Op een telefoon is de helft genoeg. */
	#content.site-content {
		margin-bottom: 40px;
	}

	.footer-widgets {
		padding-top: 26px;
	}
}

/* De melding dat er iets in de winkelwagen ligt, op de pagina's die er zelf geen
   plek voor hebben. Ruimte eromheen zodat hij niet tegen de kop of de balk plakt. */
.nfs-meldingen {
	margin-top: 18px;
}

.nfs-meldingen .woocommerce-message,
.nfs-meldingen .woocommerce-error,
.nfs-meldingen .woocommerce-info {
	margin-bottom: 0;
}

/* De foto bij het verhaal onder aan een merkpagina. Staat tussen de alinea's, dus
   met dezelfde marge eromheen als de tekst zelf. */
.nfs-merk__beeld {
	margin: 22px 0 4px;
}

.nfs-merk__beeld img {
	border-radius: 10px;
	display: block;
	height: auto;
	width: 100%;
}

.nfs-merk__beeld figcaption {
	color: var(--nfs-muted);
	font-size: 13px;
	margin-top: 8px;
}

/* De foto niet groter dan een halve schermhoogte: hij hoort bij het verhaal, hij
   is niet het verhaal. */
.nfs-merk__beeld img {
	max-height: 380px;
	object-fit: cover;
}

/* ==========================================================================
   Productpagina: de keuze tussen varianten
   ========================================================================== */

/* Knoppen in plaats van een uitklaplijst. De lijst van de browser tekent zijn open
   regels in het systeemblauw van Windows; dat blauw komt verder nergens op de site
   voor. Met knoppen bepalen wij de kleuren zelf, en het is bovendien één klik in
   plaats van twee. */
.nfs-variant {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
}

.nfs-variant__knop {
	background: #fff !important;
	border: 2px solid var(--nfs-line) !important;
	border-radius: 8px;
	color: var(--nfs-navy) !important;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 9px 16px;
	transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.nfs-variant__knop:hover {
	border-color: rgba(29, 78, 137, .45) !important;
}

.nfs-variant__knop.is-gekozen {
	background: var(--nfs-band) !important;
	border-color: var(--nfs-navy) !important;
	box-shadow: 0 4px 12px rgba(15, 53, 87, .10);
}

/* De oorspronkelijke keuzelijst blijft in het formulier staan — die houdt de
   gegevens bij — maar hij hoeft niet in beeld. */
.nfs-variant__origineel {
	height: 1px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

/* WooCommerce zet de voorraadregel én de prijs van een gekozen variant nog een keer
   onder de keuze. Bovenin het prijsvak staan ze al — de prijs daar wisselt mee zodra
   er een kleur gekozen is — dus één keer is genoeg. */
.woocommerce-variation-availability,
.woocommerce-variation-price {
	display: none;
}

/* Een link in een melding was wit op lichtgrijs: onleesbaar. Dat viel op bij de
   melding dat een artikel uit de winkelwagen is gehaald, waar de naam van het
   artikel een link is — er stond een gat midden in de zin. */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--nfs-blue);
	font-weight: 600;
	text-decoration: underline;
}

.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	color: #fff;
	text-decoration: none;
}

/* Onder het productblok zette het thema elf regels wit voordat de tabbladen
   beginnen (11.429em op een breed scherm). Bij een kort prijsvak is dat een leeg
   scherm tussen de foto en de beschrijving: scrollen zonder dat er iets te zien is.
   De selectors van het thema staan er allemaal in, anders wint zijn eigen regel. */
.single-product .single-product-wrapper,
.single-product.full-width .single-product-wrapper {
	margin-bottom: 48px;
}

@media (max-width: 767px) {
	.single-product .single-product-wrapper,
	.single-product.full-width .single-product-wrapper {
		margin-bottom: 28px;
	}
}

/* De beoordelingen komen van Google. Naam, portret en datum horen erbij te staan —
   dat verlangt Google, en het is ook het verschil tussen een quote en een mens. */
.nfs-review__portret {
	border-radius: 50%;
	height: 28px;
	margin-right: 8px;
	vertical-align: middle;
	width: 28px;
}

.nfs-review__who strong a {
	color: var(--nfs-navy);
}

.nfs-reviews__score a {
	color: inherit;
}

.nfs-reviews__bron {
	color: var(--nfs-muted);
	font-size: 13px;
	margin: 16px 0 0;
}

.nfs-reviews__bron a {
	color: var(--nfs-blue);
	text-decoration: underline;
}

/* ==========================================================================
   Productrijen op de computer: vier naast elkaar, schuiven met het pijltje
   ========================================================================== */

/* Op een breed scherm stonden de reeksen op de homepage als raster onder elkaar:
   acht of tien artikelen in twee rijen, en de rest viel weg. Nu staat elke reeks op
   één regel. Er passen er vier in beeld, over de volle breedte van de pagina, en met
   het pijltje rechts schuif je die ene rij verder — de rest van de pagina blijft
   staan waar hij staat.

   Het schuiven is de rolbalk zelf, niet een verplaatsing die wij uitrekenen. Dat
   scheelt niet alleen code: de browser klemt de rolbalk aan het einde, dus je kunt
   nooit voorbij het laatste artikel schuiven en er valt aan het einde geen leeg vak.
   Ook het muiswiel en het touchpad doen daardoor gewoon mee. */

/* Vanaf 768 en niet pas vanaf 992 (gemeld door G Post, 17 september 2026: "op deze
   afmeting gaat het niet helemaal goed met de uitlijning van de producten en
   categorieën").

   Tussen 768 en 991 viel de rij door beide ontwerpen heen: de veegrij hieronder
   begon pas bij 992 en de veegrij van de telefoon hield op bij 767. Wat overbleef
   was het raster van het thema — twaalf kaarten van drie breed, vier rijen hoog, en
   dat drie keer op de hoofdpagina. Nu is het op elk formaat boven de telefoon
   dezelfde ene rij waar je doorheen schuift; alleen het aantal kolommen verschilt. */
@media (min-width: 768px) {
	.nfs-rij {
		position: relative;
	}

	/* Vijf kaarten naast elkaar over de volle breedte (verzoek G Post, 27 augustus
	   2026). Op de hoofdpagina is dat een etalage: je wilt in één oogopslag zien wat
	   er ligt. Op de winkelpagina's zelf staan er juist vier, want daar is de kaart
	   het werkstuk en niet de etalage.

	   De regels hangen aan .nfs-rij en niet aan .nfs-row: alleen een reeks die door
	   nfs_productrij() is neergezet krijgt pijltjes en schuift. "Eerder bekeken"
	   onder een productpagina is ook een .nfs-row, maar dat zijn er vijf die in één
	   beeld passen; daar valt niets te schuiven. */
	.nfs-rij .products.row {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.nfs-rij .products.row::-webkit-scrollbar {
		display: none;
	}

	/* Op een tablet drie kaarten, net zoveel als het raster er daar neerzette: de
	   kaart houdt dus precies dezelfde maat als voorheen, alleen staan ze nu naast
	   elkaar in plaats van onder elkaar. Vijf zou hier een kaart van 170 pixels
	   opleveren en daar past de prijs niet meer naast de btw-regel.

	   Hetzelfde getal als bij de categorieën erboven, zodat de twee blokken op de
	   hoofdpagina dezelfde kolomindeling houden. */
	.nfs-rij .products.row > li.product {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
		scroll-snap-align: start;
		width: 33.3333%;
	}

	/* De knoppen zweven half over de rand van de rij, ter hoogte van de foto — daar
	   zit het oog toch al. Ze staan er alleen als er werkelijk iets buiten beeld
	   staat; javascript zet ze aan en uit. */
	.nfs-rij__knop {
		align-items: center;
		background: #fff;
		border: 1px solid var(--nfs-line, #e2e8f0);
		border-radius: 50%;
		box-shadow: 0 6px 18px rgba(15, 53, 87, .16);
		color: var(--nfs-navy, #0f3557);
		cursor: pointer;
		display: flex;
		height: 46px;
		justify-content: center;
		padding: 0;
		position: absolute;
		/* Midden van de rij, niet ter hoogte van de foto: het pijltje hoort bij het
		   hele blok en niet bij het plaatje. */
		top: 50%;
		transform: translateY(-50%);
		transition: background .15s ease, color .15s ease, box-shadow .15s ease;
		width: 46px;
		/* Het thema tilt een kaart bij hover naar z-index 999 en die schoof dan over
		   het pijltje heen — het leek te verdwijnen zodra je met de muis in de buurt
		   kwam. Dit staat er dus bewust ruim boven. */
		z-index: 1001;
	}

	.nfs-rij__knop[hidden] {
		display: none;
	}

	.nfs-rij__knop:hover,
	.nfs-rij__knop:focus-visible {
		background: var(--nfs-navy, #0f3557);
		box-shadow: 0 8px 22px rgba(15, 53, 87, .26);
		color: #fff;
	}

	.nfs-rij__knop--terug {
		left: -16px;
	}

	.nfs-rij__knop--verder {
		right: -16px;
	}

	/* Het pijltje is met de rand van een vierkantje getekend en een halve slag
	   gedraaid; een icoonlettertype hoeft daar niet voor geladen te worden. */
	.nfs-rij__knop span {
		border-right: 2px solid currentColor;
		border-top: 2px solid currentColor;
		display: block;
		height: 11px;
		width: 11px;
	}

	.nfs-rij__knop--verder span {
		margin-left: -4px;
		transform: rotate(45deg);
	}

	.nfs-rij__knop--terug span {
		margin-right: -4px;
		transform: rotate(-135deg);
	}
}

/* Vanaf 992 vijf kaarten in plaats van drie. Alleen dit getal verschilt; het schuiven
   zelf en de pijltjes staan hierboven en gelden vanaf 768. */
@media (min-width: 992px) {
	.nfs-rij .products.row > li.product {
		flex: 0 0 20%;
		max-width: 20%;
		width: 20%;
	}
}

/* Op een telefoon blijft alles zoals het was: daar veeg je met de vinger en is de
   volgende kaart al half in beeld, dus een pijltje is daar alleen maar in de weg.
   De grens stond op 991 toen de tablet nog een gewoon raster kreeg; sinds die ook
   schuift (17 september 2026) hoort het pijltje daar wél. */
@media (max-width: 767.98px) {
	.nfs-rij__knop {
		display: none;
	}
}

/* ==========================================================================
   Vier op een rij op de winkelpagina's
   ========================================================================== */

/* Vanaf 1400 pixels zette het thema er vijf naast elkaar in de shop, de categorieën,
   de merken, de zoekresultaten en de uitverkoop. Op zo'n breed scherm worden dat
   smalle kaartjes waarop de foto — bij tweedehands apparatuur het halve verhaal —
   in het niet valt. Vier is hier de maat (verzoek G Post, 27 augustus 2026).

   De schuifrijen op de hoofdpagina houden hun vijf: die staan verderop in dit
   bestand met een specifiekere selector, en daar is het een etalage. */
@media (min-width: 1400px) {
	/* Aan de pagina gehangen en niet aan de productlijst zelf, zodat de schuifrijen op
	   de hoofdpagina en het rijtje "Eerder bekeken" onder een productpagina er buiten
	   vallen: die hebben hun eigen maat. */
	.post-type-archive-product ul.products.row > li.product,
	.tax-product_cat ul.products.row > li.product,
	.tax-product_brand ul.products.row > li.product,
	.page-template-template-nfs-sale ul.products.row > li.product {
		flex: 0 0 25%;
		max-width: 25%;
		width: 25%;
	}
}

/* ==========================================================================
   De pagina waar een bestelling alsnog betaald wordt
   ========================================================================== */

/* WooCommerce zet hier een kale tabel op een witte pagina. Dezelfde onderdelen
   krijgen hier de opmaak van de rest van de winkel: een band bovenaan, de bestelling
   in een kaart, de betaalmethoden als aanklikbare regels. */

.woocommerce-order-pay .entry-header,
.woocommerce-order-pay .page-title {
	display: none;
}

/* Het kruimelpad zegt hier niets wat de band er niet al boven zet, en het valt na
   die band als een losse regel uit de lucht. */
.woocommerce-order-pay .woocommerce-breadcrumb,
.woocommerce-order-pay .breadcrumb,
.woocommerce-order-pay .electro-breadcrumb {
	display: none;
}

/* Het bedrag in de band is een prijs en geen aantal: iets kleiner, en met het
   euroteken in dezelfde kleur als de rest. */
.nfs-betaalkop .nfs-shophead__count {
	font-size: 32px;
	white-space: nowrap;
}

.nfs-betaalkop .nfs-shophead__count .woocommerce-Price-amount,
.nfs-betaalkop .nfs-shophead__count bdi,
.nfs-betaalkop .nfs-shophead__count .woocommerce-Price-currencySymbol {
	color: #fff;
}

.nfs-betaalkop__lead {
	color: rgba(255, 255, 255, .88);
	font-size: 15.5px;
	margin: 6px 0 0;
	max-width: 52ch;
}

.woocommerce-order-pay #primary {
	margin: 0 auto;
	max-width: 860px;
}

.nfs-betaal__kopje {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 30px 0 12px;
}

/* De bestelling zelf: een kaart in plaats van een tabel die van rand tot rand loopt. */
.woocommerce-order-pay #order_review > table.shop_table {
	background: #fff;
	border: 1px solid var(--nfs-line, #e2e8f0);
	border-collapse: separate;
	border-radius: 12px;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce-order-pay #order_review > table.shop_table th,
.woocommerce-order-pay #order_review > table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--nfs-line, #e2e8f0);
	padding: 13px 18px;
}

.woocommerce-order-pay #order_review > table.shop_table thead th {
	background: var(--nfs-band, #f4f7fa);
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.woocommerce-order-pay #order_review > table.shop_table tfoot tr:last-child th,
.woocommerce-order-pay #order_review > table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 17px;
}

/* De betaalmethoden: regels waar je op kunt tikken, met de gekozen regel gemarkeerd. */
/* Het thema zet een streep boven de betaalmethoden; die valt hier samen met de rand
   van de kaart eronder en leest als een dubbele lijn. */
.woocommerce-order-pay #payment,
.woocommerce-order-pay .woocommerce-checkout-payment {
	background: transparent;
	border: 0;
	padding: 0;
}

.woocommerce-order-pay ul.wc_payment_methods {
	background: #fff;
	border: 1px solid var(--nfs-line, #e2e8f0);
	border-radius: 12px;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.woocommerce-order-pay ul.wc_payment_methods > li {
	border-bottom: 1px solid var(--nfs-line, #e2e8f0);
	margin: 0;
	padding: 0;
}

.woocommerce-order-pay ul.wc_payment_methods > li:last-child {
	border-bottom: 0;
}

.woocommerce-order-pay ul.wc_payment_methods > li > label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 14px 18px;
	width: 100%;
}

.woocommerce-order-pay ul.wc_payment_methods > li:hover {
	background: var(--nfs-band, #f4f7fa);
}

.woocommerce-order-pay ul.wc_payment_methods > li > label img {
	margin-left: auto;
	max-height: 24px;
	width: auto;
}

.woocommerce-order-pay .payment_box {
	background: var(--nfs-band, #f4f7fa);
	border-radius: 8px;
	font-size: 14px;
	margin: 0 18px 14px;
	padding: 12px 14px;
}

.nfs-betaal__knop {
	font-size: 16px;
	justify-content: center;
	margin-top: 18px;
	padding: 14px 26px;
	width: 100%;
}

/* Onder de knop hetzelfde rijtje geruststellingen als op een productpagina. */
.nfs-betaal__voet {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 22px;
}

.nfs-betaal__punt {
	align-items: flex-start;
	background: var(--nfs-band, #f4f7fa);
	border-radius: 10px;
	display: flex;
	font-size: 13.5px;
	gap: 10px;
	line-height: 1.45;
	padding: 14px;
}

.nfs-betaal__punt strong {
	display: block;
	font-size: 14px;
}

.nfs-betaal__icoon {
	color: var(--nfs-amber, #c2610f);
	flex: 0 0 auto;
}

.nfs-betaal__icoon .nfs-icon {
	height: 20px;
	width: 20px;
}

.nfs-betaal__hulp {
	color: var(--nfs-muted, #5b6b7c);
	font-size: 14px;
	margin-top: 14px;
	text-align: center;
}

@media (max-width: 767px) {
	.nfs-betaal__voet {
		grid-template-columns: 1fr;
	}

	.woocommerce-order-pay #order_review > table.shop_table th,
	.woocommerce-order-pay #order_review > table.shop_table td {
		padding: 11px 13px;
	}
}

/* ==========================================================================
   Ronde van 27 augustus 2026: koopblok, categorieën en de witruimte
   ========================================================================== */

/* --------------------------------------------------- het koopblok op de telefoon */

/* Bij een artikel met uitvoeringen stond alles door elkaar: het woord Kleur en de
   twee kleurknoppen links, het aantal rechts, en de knop ernaast met de tekst over
   drie regels afgebroken. De oorzaak was dat het hele formulier één flexregel was —
   bij een gewoon artikel klopt dat (aantal naast de knop), maar bij een artikel met
   keuzes staan er dan drie dingen naast elkaar die er niet naast horen.

   Nu is het een blok: eerst de keuze over de volle breedte, daaronder de knop. */
@media (max-width: 767px) {
	/* Niet alles in het midden — dat las als een affiche in plaats van een koopvak.
	   Nu een vaste opbouw: bovenin de prijs links en de voorraad rechts op één regel,
	   daaronder de keuze en de knop, allebei over de volle breedte. Het oog loopt zo
	   van links naar rechts en dan naar beneden, in plaats van steeds terug naar het
	   midden. */
	.single-product .product-actions {
		align-items: center;
		text-align: left;
	}

	.single-product .product-actions .price {
		flex: 1 1 auto;
		justify-content: flex-start;
		text-align: left;
	}

	.single-product .product-actions .availability {
		flex: 0 0 auto;
		margin-left: auto;
		text-align: right;
	}

	/* De besparing hoort bij de prijs en krijgt een eigen regel eronder, tegen de
	   linkerkant aan — niet zwevend naast een halve regel wit. */
	.single-product .product-actions .nfs-besparing,
	.single-product .product-actions .nfs-korting {
		flex: 0 0 100%;
		margin: 4px 0 0;
		order: 2;
	}

	.single-product .product-actions form.cart.variations_form {
		display: block;
	}

	.single-product .product-actions table.variations {
		margin: 0 0 12px;
		width: 100%;
	}

	.single-product .product-actions table.variations tbody,
	.single-product .product-actions table.variations tr,
	.single-product .product-actions table.variations th.label,
	.single-product .product-actions table.variations td.value {
		display: block;
		padding: 0;
		text-align: left;
		width: 100%;
	}

	.single-product .product-actions table.variations th.label {
		color: var(--nfs-muted);
		font-size: 12.5px;
		font-weight: 600;
		letter-spacing: .03em;
		margin-bottom: 6px;
		text-transform: uppercase;
	}

	/* De kleurknoppen naast elkaar, elk even breed. */
	.single-product .product-actions .nfs-variant {
		display: flex;
		gap: 8px;
		justify-content: flex-start;
	}

	.single-product .product-actions .nfs-variant__knop {
		flex: 1 1 0;
		justify-content: center;
		text-align: center;
	}

	.single-product .product-actions .woocommerce-variation-add-to-cart {
		align-items: stretch;
		display: flex;
		gap: 10px;
	}

	/* Het vak waarin WooCommerce de prijs van de gekozen uitvoering zet is leeg —
	   die prijs staat nu bovenin — maar het hield wel zijn marge. */
	.single-product .product-actions .woocommerce-variation {
		margin: 0;
	}

	.single-product .product-actions .single_variation_wrap {
		margin-top: 4px;
	}

	.single-product .product-actions table.variations {
		margin-bottom: 8px;
	}

	.single-product .product-actions .woocommerce-variation-add-to-cart {
		margin: 0;
		padding: 0;
	}

	.single-product .product-actions .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		flex: 1 1 auto;
	}

	/* Van de meeste toestellen ligt er één. Dan is een invoervakje met een 1 erin
	   alleen maar ruis naast de knop; het thema verbergt het bij een gewoon artikel
	   ook al. Het !important is hier nodig en geen luiheid: het script van WooCommerce
	   zet bij het kiezen van een uitvoering display:block rechtstreeks op het element,
	   en daar komt een gewone regel niet overheen. */
	.single-product .product-actions form.cart.nfs-enkel .quantity,
	.single-product .product-actions .woocommerce-variation-add-to-cart-disabled .quantity {
		display: none !important;
	}

	/* Apart gehouden: :has() kent niet elke browser, en een onbekende selector in een
	   opsomming zet de hele regel buitenspel. */
	.single-product .product-actions .quantity:has(.qty[max="1"]) {
		display: none !important;
	}

	/* De knoptekst brak af over drie regels omdat er een aantalvakje naast stond.
	   Nu het vakje weg is past hij op één regel; iets kleinere letters en wat minder
	   ruimte aan de zijkanten houden dat zo, ook op een smalle telefoon. Nadrukkelijk
	   géén nowrap: dan zou de knop de hele kaart uit elkaar duwen. */
	.single-product .product-actions .single_add_to_cart_button {
		font-size: 15px;
		padding: 13px 14px;
	}

	/* Een formulier is een flexvak, en dat krimpt standaard niet onder de breedte van
	   zijn inhoud. Zonder deze regels duwt de langste knoptekst de hele kaart breder
	   dan het scherm. */
	.single-product .product-actions form.cart,
	.single-product .product-actions table.variations,
	.single-product .product-actions .woocommerce-variation-add-to-cart {
		min-width: 0;
	}

	/* Prijs, korting en "excl. btw" onder elkaar in het midden in plaats van half
	   links en half rechts. */
	.single-product .product-actions .nfs-besparing,
	.single-product .product-actions .woocommerce-price-suffix {
		display: inline-block;
		vertical-align: middle;
	}
}

/* ------------------------------------------------------- categorieën, telefoon */

@media (max-width: 767px) {
	/* Het aantal artikelen per categorie zegt de bezoeker weinig en kost een regel;
	   de naam mag daardoor groter en beter leesbaar. */
	.nfs-cat__count {
		display: none;
	}

	.nfs-cat__name {
		font-size: 15.5px;
	}
}

/* ---------------------------------------------- categorieën, tablet en computer */

/* Twaalf tegels tegelijk was te druk. Nu staan ze naast elkaar in één rij en schuif
   je met hetzelfde pijltje als bij de producten door de rest.

   Vanaf 768 en niet pas vanaf 992 (gemeld door G Post, 17 september 2026). Tussen die
   twee grenzen viel het blok terug op het raster hierboven: twaalf tegels van drie
   breed en vier rijen hoog, waarna de bezoeker nog langs drie van diezelfde muren
   moest voordat het eerste artikel in beeld kwam. */
@media (min-width: 768px) {
	.nfs-rij--cats {
		position: relative;
	}

	.nfs-rij--cats .nfs-cats {
		/* Drie op een tablet — dezelfde maat als het raster hier neerzette, en
		   hetzelfde aantal als de productrij eronder, zodat de twee blokken op de
		   hoofdpagina dezelfde kolomindeling houden. Vier zou op 768 pixels een tegel
		   van 160 opleveren en daar past "Stuurautomaten & trackpilot" niet meer in
		   zonder over drie regels te breken. */
		grid-auto-columns: calc((100% - 2 * 12px) / 3);
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-template-rows: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-bottom: 4px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.nfs-rij--cats .nfs-cats::-webkit-scrollbar {
		display: none;
	}

	.nfs-rij--cats .nfs-cat {
		scroll-snap-align: start;
	}

}

/* Vanaf 992 vijf tegels in plaats van drie, en een iets grotere naam omdat de tegel
   daar ook groter is. Het schuiven zelf staat hierboven en geldt vanaf 768. */
@media (min-width: 992px) {
	.nfs-rij--cats .nfs-cats {
		grid-auto-columns: calc((100% - 4 * 12px) / 5);
	}

	.nfs-rij--cats .nfs-cat__name {
		font-size: 21px;
	}
}

/* Productkaarten op de telefoon iets compacter: de titel, de prijs en de knop stonden
   elk met hun eigen lucht onder elkaar, en dat telt op een kaart van 330 pixels hoog
   drie keer op. Zo loopt de rij rustiger door (verzoek G Post, 28 augustus 2026). */
@media (max-width: 767px) {
	/* De titel houdt zijn eigen regelafstand: hij wordt op twee regels afgekapt en met
	   een krappere regelafstand liep de derde regel over de prijs heen. */
	.nfs-row li.product .woocommerce-loop-product__title {
		margin-bottom: 6px;
	}

	.nfs-row li.product .product-inner {
		padding-bottom: 8px;
		padding-top: 6px;
	}

	.nfs-row li.product .nfs-loop-view {
		margin-top: 6px;
		padding: 9px 10px;
	}

	.nfs-row li.product .price {
		line-height: 1.2;
	}

	.nfs-row li.product .nfs-availability {
		margin: 4px 0 0;
	}
}

/* ==========================================================================
   Telefoon: de witte randen links en rechts
   ========================================================================== */

/* Er zaten twee marges over elkaar heen: het thema houdt vijftien pixels aan de
   buitenkant van de inhoud aan, en de container daarbinnen legt daar nog achttien
   pixels bovenop. Samen dertig­drie pixels aan weerskanten — ruim een zesde van een
   scherm van 390 breed, en dat zag je terug in smallere foto's en afgekapte titels.

   Binnen de inhoud vervalt die tweede marge nu. De vijftien pixels van het thema
   blijven staan, want de tekst moet niet tegen de rand plakken. De veegrijen halen
   hun eigen zestien pixels weer op, zodat de kaarten net zo ver van de rand staan als
   de kop erboven en de volgende kaart aan de rechterkant blijft uitsteken. */
@media (max-width: 767px) {
	/* Alleen bij de blokken met een kop en een rij eronder; op een productpagina zit
	   de tekst zelf in dezelfde container en die zou dan tegen de schermrand plakken. */
	.nfs-section > .container,
	.nfs-brands-section > .container {
		padding-left: 0;
		padding-right: 0;
	}

	.nfs-row .products,
	.nfs-cats {
		margin-left: 0;
		margin-right: -15px;
		padding-left: 0;
		scroll-padding-left: 0;
	}
}

/* ==========================================================================
   De winkelwagen als er niets in ligt
   ========================================================================== */

/* Hier stond een donkerblauw vak met een patrijspoort erin: een eigen vorm die
   verder nergens op de site voorkwam. Sinds 31 augustus 2026 is het dezelfde kaart
   als de meldingen, met hetzelfde gezichtje (verzoek G Post). De maatvoering staat
   bij .nfs-melding--groot; hier blijft alleen de ruimte eromheen over.

   Let op de naam: .nfs-leeg was al in gebruik voor het scherm "niets gevonden" bij
   het zoeken, mét een eigen achtergrond en rand. Deze sectie moest dus een andere
   naam krijgen, anders staat er een kader om een kader heen. */
.nfs-leegwagen {
	margin-bottom: 34px;
}

/* De winkelwagen is een blok van WooCommerce, en dat zet alinea's daarbinnen op een
   halve breedte. De knop hoort de hele kaart te kunnen gebruiken. */
.nfs-leegwagen .nfs-leeg__knoppen {
	margin: 16px 0 0;
	max-width: none;
	width: auto;
}

@media (max-width: 767px) {
	.nfs-leegwagen {
		margin-bottom: 24px;
	}
}

/* ==========================================================================
   Het bedrag inclusief btw onder de prijs
   ========================================================================== */

/* De winkel rekent met prijzen exclusief btw — dat is wat de beroepsvaart gewend is
   en wat een zakelijke koper wil zien. Maar een particulier heeft recht op de prijs
   die hij werkelijk betaalt. Daarom staat die er nu klein onder, op elke plek waar
   een prijs staat: op een kaart, op de productpagina en in de lijsten.

   Het komt uit het achtervoegsel van WooCommerce zelf, met de plaatshouder voor het
   bedrag inclusief btw. Dat betekent dat het bedrag altijd klopt met het tarief dat
   voor die klant geldt — een Duitse particulier ziet 21 procent, iemand buiten de EU
   ziet hetzelfde bedrag als exclusief, want daar is geen btw. */

.nfs-prijs-incl {
	color: var(--nfs-muted, #61748a);
	display: block;
	font-size: .86em;
	font-weight: 400;
	line-height: 1.3;
	margin-top: 1px;
}

/* Het bedrag zelf is opgemaakt door het thema — groot en vet, want het is een prijs.
   Binnen deze regel moet het juist meelopen met de kleine tekst eromheen. */
.nfs-prijs-incl .woocommerce-Price-amount,
.nfs-prijs-incl .woocommerce-Price-currencySymbol,
.nfs-prijs-incl .amount,
.nfs-prijs-incl bdi {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* Op een productkaart in een rij staat het achtervoegsel al klein; daar hoeft het
   niet nóg kleiner, anders is het niet meer te lezen. */
.woocommerce ul.products li.product .nfs-prijs-incl {
	font-size: .95em;
}

/* In de winkelwagen en bij het afrekenen staat de btw al als eigen regel in het
   overzicht. Daar zou dit een tweede keer hetzelfde zeggen. */
.wc-block-cart .nfs-prijs-incl,
.wc-block-checkout .nfs-prijs-incl,
.woocommerce-cart .nfs-prijs-incl,
.woocommerce-checkout .nfs-prijs-incl,
.nfs-combi .nfs-prijs-incl,
.mini_cart_item .nfs-prijs-incl {
	display: none;
}

/* ==========================================================================
   Zending volgen
   ========================================================================== */

/* Het venster van Sendcloud staat in een eigen kaart, zodat het niet als een losse
   rechthoek midden op een witte pagina hangt. De hoogte is ruim genoeg voor het
   formulier plus een paar regels uitslag; op een telefoon iets meer, want daar staat
   alles onder elkaar. */

.nfs-track {
	margin: 0 auto;
	max-width: 860px;
}

.nfs-track__titel {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 10px;
}

.nfs-track__uitleg {
	color: var(--nfs-muted, #61748a);
	font-size: 15.5px;
	line-height: 1.55;
	margin: 0 0 18px;
	max-width: 70ch;
}

.nfs-track__venster {
	background: #fff;
	border: 1px solid var(--nfs-line, #e2e8f0);
	border-radius: 12px;
	overflow: hidden;
}

.nfs-track__venster iframe {
	display: block;
	min-height: 450px;
	width: 100%;
}

.nfs-track__bron {
	color: var(--nfs-muted, #61748a);
	font-size: 13px;
	line-height: 1.5;
	margin: 12px 0 0;
}

/* In Mijn account staat het blok in een kolom naast het menu; daar hoeft het niet
   nog eens gecentreerd te worden. */
.woocommerce-MyAccount-content .nfs-track {
	margin: 0;
	max-width: none;
}

@media (max-width: 767px) {
	.nfs-track__venster iframe {
		min-height: 560px;
	}

	.nfs-track__uitleg {
		font-size: 14.5px;
	}
}

/* ==========================================================================
   Verbeterpunten van 31 augustus 2026 (G Post)
   ========================================================================== */

/* ----------------------------------------------------- de grijze ovalen ---

   Het thema geeft elk invoerveld een ronding van 22 pixels, en dat is bij een veld
   van 44 hoog precies een halve cirkel aan weerskanten: een ovaal. Op de site zelf
   is alles rechthoekig met een ronding van vier — de knoppen, de kaarten, de
   productvakken. Die twee vormen naast elkaar zien er niet uit als één winkel.

   Alle velden dus op vier. De selectors zijn breed opgeschreven omdat WooCommerce,
   het thema en de betaalmodule elk hun eigen klasse gebruiken voor hetzelfde ding.

   Met nadruk, en dat is hier geen luiheid. Het thema schrijft zijn regel als
   input[type="text"]:not(.form-control), en dat weegt zwaarder dan elke klasse die
   wij eraan kunnen hangen. Zonder nadruk wint zijn ovaal, hoe lang wij onze selector
   ook maken. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea,
.input-text,
.woocommerce-Input,
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.wc-block-components-text-input input {
	border-radius: 4px !important;
}

/* De zoekbalk in de kop houdt zijn eigen vorm: die zit tegen de knop aan en heeft
   daarom alleen links een ronding. */
.navbar-search .form-control,
.electro-search-form .form-control {
	border-bottom-right-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

/* ------------------------------------------------- de lichte lettertypes ---

   De titel van een pagina stond op gewicht 500. Op 42 pixels leest dat als dun: bij
   "Algemene voorwaarden" en "Wachtwoord vergeten" viel de kop weg tegen de tekst
   eronder, terwijl "Mijn account" en "Winkelwagen" wél stevig stonden — die hadden
   elders al een eigen regel gekregen. Nu overal hetzelfde. */
.entry-title,
.page-title,
.woocommerce-account .entry-title,
.woocommerce-page .entry-title {
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ meldingen ---

   Een kaart met een gezichtje ernaast in plaats van een rood vlak met witte tekst.
   Zie inc/nfs-meldingen.php en woocommerce/notices/ voor de rest. */
.nfs-melding {
	align-items: flex-start;
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-left: 4px solid var(--nfs-muted);
	border-radius: 10px;
	display: flex;
	gap: 16px;
	margin: 0 0 24px;
	padding: 18px 20px;

	/* Wordt er naar een melding gesprongen — dat doet WooCommerce zelf bij het
	   afrekenen — dan blijft er ruimte boven staan. Zonder deze regel schuift de
	   melding onder de balk die bovenaan blijft plakken en lijkt er niets gebeurd. */
	scroll-margin-top: 140px;
}

.nfs-melding__gezicht {
	flex: 0 0 auto;
	height: 38px;
	margin-top: 1px;
	width: 38px;
}

.nfs-melding__inhoud {
	flex: 1 1 auto;
	min-width: 0;
}

.nfs-melding__kop {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 3px;
}

/* De blokken van WooCommerce zelf zitten nu ín de kaart: geen eigen achtergrond,
   geen eigen rand, geen eigen marge meer. */
.nfs-melding .woocommerce-error,
.nfs-melding .woocommerce-message,
.nfs-melding .woocommerce-info {
	background: none !important;
	border: 0 !important;
	color: var(--nfs-text) !important;
	font-size: 15px;
	line-height: 1.55;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.nfs-melding .woocommerce-error li,
.nfs-melding .woocommerce-error li:last-child {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.nfs-melding .woocommerce-error li:last-child {
	margin-bottom: 0;
}

/* WooCommerce hangt aan zijn meldingen soms een knop (Winkelwagen bekijken). Die
   staat in de bron achter de zin, en bleef daardoor op dezelfde regel hangen: aan
   het eind van de tekst, tien pixels omlaag geduwd, zodat hij half naast de laatste
   woorden zweefde (verzoek G Post, 31 augustus 2026: "lijn de boel beter uit, nu is
   de knop naar winkelwagen bijzonder").

   Als blok begint hij op een eigen regel onder de tekst, links uitgelijnd met de
   zin erboven, en met fit-content blijft hij zo breed als zijn eigen opschrift in
   plaats van de hele kaart. */
.nfs-melding .button,
.nfs-melding a.button {
	background-color: var(--nfs-navy) !important;
	border: 0 !important;
	border-radius: 4px;
	color: #fff !important;
	display: block;
	float: none !important;
	font-size: 14px;
	font-weight: 600;
	margin: 12px 0 0;
	padding: 9px 18px;
	text-decoration: none;
	width: fit-content;
}

.nfs-melding a:not(.button):not(.nfs-btn) {
	color: var(--nfs-blue);
	font-weight: 600;
	text-decoration: underline;
}

/* Drie standen, drie kleuren. Het gezicht neemt de kleur van de rand over. */
.nfs-melding--fout {
	background-color: #fdf4f3;
	border-color: #f0cdc8;
	border-left-color: #b3261e;
	color: #b3261e;
}

.nfs-melding--fout .nfs-melding__kop {
	color: #8f1d17;
}

.nfs-melding--gelukt {
	background-color: #f1f8f4;
	border-color: #c7e3d4;
	border-left-color: #1f7a4d;
	color: #1f7a4d;
}

.nfs-melding--gelukt .nfs-melding__kop {
	color: #17603c;
}

.nfs-melding--info {
	background-color: #f2f6fb;
	border-color: #cfdcec;
	border-left-color: var(--nfs-blue);
	color: var(--nfs-blue);
}

.nfs-melding--info .nfs-melding__kop {
	color: var(--nfs-navy);
}

@media (max-width: 575px) {
	.nfs-melding {
		gap: 12px;
		padding: 15px 16px;
	}

	.nfs-melding__gezicht {
		height: 32px;
		width: 32px;
	}

	.nfs-melding .woocommerce-error,
	.nfs-melding .woocommerce-message,
	.nfs-melding .woocommerce-info {
		font-size: 14.5px;
	}
}

/* ------------------------------------ het menu van Mijn account op de telefoon ---

   Op een breed scherm staat dit menu als kolom links naast de inhoud; daar klopt het.
   Op een telefoon werd het een blok van zeven regels over de volle breedte, met het
   pictogram helemaal rechts en een gat ertussen. Je moest dus eerst langs een halve
   schermhoogte menu voordat je bij je bestellingen was.

   Nu is het één rij die opzij schuift, tegen de linkerrand aan (verzoek G Post,
   31 augustus 2026: meer naar links/zijkant). Het pictogram staat vóór het woord in
   plaats van er ver achter, en waar je nu bent staat vooraan. */
@media (max-width: 991px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin: 0 0 22px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		border: 0;
		border-bottom: 1px solid var(--nfs-line);
		border-radius: 0;
		display: flex;
		gap: 4px;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 2px;

		/* Uit beeld geschoven onderdelen mogen best half zichtbaar blijven: dat laat
		   zien dat er nog meer naast staat. Vandaar geen scroll-snap. */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		border-bottom: 0;
		flex: 0 0 auto;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		align-items: center;
		border-bottom: 3px solid transparent;
		border-left: 0;
		display: flex;
		gap: 7px;
		padding: 10px 12px 9px;
		white-space: nowrap;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		background-color: transparent;
		border-bottom-color: var(--nfs-amber);
		border-left-color: transparent;
	}

	/* Het thema hangt het pictogram als pseudo-element vóór de tekst en laat het
	   daarna naar rechts zweven. In een flexrij telt dat zweven niet meer mee, dus
	   staat het vanzelf weer waar het hoort: vóór het woord. */
	.woocommerce-account .woocommerce-MyAccount-navigation li a:after,
	.woocommerce-account .woocommerce-MyAccount-navigation li a:before {
		float: none;
		font-size: 15px;
		margin: 0;
		opacity: 0.65;
	}
}

/* --------------------------------- wachtwoord wijzigen in een eigen vlak ---

   In "Accountdetails" staat het wijzigen van het wachtwoord onderaan hetzelfde
   formulier als naam en e-mailadres. Eén doorlopende lap dus, terwijl het twee
   verschillende dingen zijn. Het onderste deel krijgt daarom een eigen vlak. */
.woocommerce-EditAccountForm fieldset {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	margin: 26px 0 4px;
	padding: 20px 22px 6px;
}

.woocommerce-EditAccountForm fieldset legend {
	color: var(--nfs-navy);
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 12px;
	padding: 0;
	width: auto;
}

/* ------------------------------------------- de kop op de telefoon (hero) ---

   De titel mocht korter maar wel over twee regels blijven; op 31 augustus 2026 mocht
   hij juist weer groter, en de knop eronder kleiner. De maat van de kop staat hoger
   in dit bestand; hier alleen de knop, want die stond hier al en zou anders van twee
   plekken tegelijk zijn maat krijgen. */
@media (max-width: 575px) {
	.nfs-hero__actions .nfs-btn {
		font-size: 13.5px;
		padding: 10px 18px;
	}
}

/* Het vlak rond Accountdetails mag breder dan het inlogscherm: er staan twee
   kolommen met voor- en achternaam in. */
.nfs-auth--breed {
	max-width: 720px;
}

/* De lege winkelwagen: dezelfde kaart als een melding, maar groter — hij is hier
   het enige op de pagina en niet een regel tussen de rest. */
.nfs-melding--groot {
	align-items: center;
	margin: 8px auto 34px;
	max-width: 640px;
	padding: 26px 28px;
}

.nfs-melding--groot .nfs-melding__gezicht {
	height: 54px;
	width: 54px;
}

.nfs-melding--groot .nfs-melding__kop {
	font-size: 19px;
	margin-bottom: 6px;
}

.nfs-melding--groot p {
	color: var(--nfs-text);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.nfs-melding--groot .nfs-leeg__knoppen {
	margin-top: 16px;
}

@media (max-width: 575px) {
	.nfs-melding--groot {
		align-items: flex-start;
		padding: 20px;
	}

	.nfs-melding--groot .nfs-melding__gezicht {
		height: 40px;
		width: 40px;
	}

	.nfs-melding--groot .nfs-btn {
		display: block;
		text-align: center;
	}
}

/* --------------------------------------------- de laatste grijze ovalen ---

   Onder elk wachtwoordveld zette WooCommerce een leeg grijs pilletje: de meter die
   moet aangeven hoe sterk een wachtwoord is. Zolang er niets is ingetypt staat daar
   niets in, maar het vakje is er wel — drie grijze ovalen onder elkaar in een
   verder rustig formulier. Leeg dus weg, en zodra er wél iets in staat in dezelfde
   vorm als de rest. */
.woocommerce-password-strength:empty {
	display: none;
}

.woocommerce-password-strength {
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	margin-top: 6px;
	padding: 7px 12px;
}

.woocommerce-password-hint {
	color: var(--nfs-muted);
	display: block;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 6px;
}

/* Voornaam en achternaam staan bij WooCommerce als twee halve kolommen naast
   elkaar, met een marge van vijftien pixels aan weerskanten. In ons smallere vlak
   viel de tweede kolom onder de eerste én bleef hij ingesprongen staan — het zag
   eruit als een fout. In een vlak van deze breedte leest onder elkaar toch rustiger,
   dus allebei over de hele breedte, en de marge van het raster eruit. */
.nfs-auth__panel .form-row-first,
.nfs-auth__panel .form-row-last,
.nfs-auth__panel .form-row-wide,
.nfs-auth__panel .form-row {
	float: none !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
}

/* Het oogje waarmee je je wachtwoord even kunt laten zien, was hier een grijs
   pilletje onder het veld: het thema zet het alleen bij het inloggen goed. Nu overal
   hetzelfde — in het veld, aan de rechterkant, zonder eigen vlak. */
.woocommerce-form-row .show-password-input,
.form-row .show-password-input {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--nfs-muted);
	cursor: pointer;
	height: 24px;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
}

.woocommerce-form-row .show-password-input:hover {
	color: var(--nfs-navy);
}

/* Het veld en het oogje horen bij elkaar; de regel eromheen is het houvast. De
   tweede regel is er voor browsers die :has() nog niet kennen — zonder houvast zou
   het oogje ergens anders op de pagina belanden. */
.nfs-auth .woocommerce-form-row,
.woocommerce-EditAccountForm .woocommerce-form-row {
	position: relative;
}

.form-row:has(.show-password-input) {
	position: relative;
}

/* Het regeltje onder de voornaam bij het aanmaken van een account: waarom wij die
   vragen. Klein en gedempt — het is een toelichting, geen tweede label. */
.nfs-auth__hint {
	color: var(--nfs-muted);
	display: block;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 5px;
}

/* --------------------------------------------------------- de zoekbalk ---

   Origineler mocht, maar zonder er koppelingen naast te zetten (verzoek G Post,
   31 augustus 2026). Dus zit het in het veld zelf: een amber rand zodra je erin
   staat, en een knop die reageert. De voorbeelden die in het lege veld voorbijkomen
   staan in inc/nfs-zoeken.php. */
.navbar-search .form-control:focus,
.nfs-zoekvorm .search-field:focus,
.woocommerce-product-search .search-field:focus {
	border-color: var(--nfs-amber) !important;
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.14) !important;
	outline: none;
}

/* Het vergrootglas mag laten merken dat het een knop is. */
.navbar-search .btn,
.electro-search-form .btn,
.woocommerce-product-search button[type="submit"] {
	transition: background-color 0.15s ease;
}

.navbar-search .btn:active,
.electro-search-form .btn:active {
	background-color: var(--nfs-amber-dark) !important;
}

/* De tekst die in het lege veld meeloopt: iets rustiger dan gewone tekst, zodat
   duidelijk is dat het een voorbeeld is en geen ingevulde zoekterm. */
.navbar-search .form-control::placeholder,
.nfs-zoekvorm .search-field::placeholder {
	opacity: 1;
	transition: color 0.25s ease;
}

/* ==========================================================================
   Telefoonversie, ronde 31 augustus 2026 (G Post)
   ========================================================================== */

/* ------------------------------------------------- het filterpaneel ---

   Het schoof als een strook van 280 pixels over de pagina heen: rechts bleef de
   winkel gewoon zichtbaar, de blauwe balk bovenin was smaller dan het paneel
   eronder, en lange categorienamen braken zo af dat het aantal op de volgende regel
   links kwam te staan. Het zag er half af uit, en dat was het ook.

   Vier dingen: het paneel wordt breder, er komt een donkere laag achter zodat het
   duidelijk ergens bovenop ligt, de kop loopt over de volle breedte, en naam en
   aantal blijven op één regel staan. */
@media (max-width: 1199.98px) {
	.site-content .sidebar {
		padding-left: 0;
		padding-right: 0;
		width: min(88vw, 340px) !important;
	}

	/* De donkere laag. Geen los element maar een slagschaduw van honderd
	   schermbreedtes: die telt niet mee voor de schuifruimte en hoeft nergens in de
	   opmaak bij te staan. Alleen als het paneel openstaat, anders zou de pagina ook
	   dichtgesmeerd worden terwijl er niets te zien is. */
	.site-content.active-hh-sidebar .sidebar {
		box-shadow: 0 0 0 100vmax rgba(9, 26, 43, 0.55);
	}

	.nfs-filter-head {
		margin-bottom: 0;
		padding: 14px 18px;
	}

	.site-content .sidebar .widget {
		border-radius: 0;
		margin-left: 0;
		margin-right: 0;
	}

	/* Het paneel schuift alleen op en neer, nooit opzij. */
	.site-content .sidebar {
		overflow-x: hidden;
	}

	/* Naam links, aantal rechts, allebei op dezelfde regel. Het lege blokje dat het
	   thema vóór de naam zet (voor een uitklappijl die wij niet gebruiken) nam de
	   ruimte in die de naam nodig had. */
	.site-content .sidebar .cat-item > a {
		align-items: baseline;
		display: flex;
		font-size: 14.5px;
		gap: 8px;
		line-height: 1.35;
		padding: 9px 0;
	}

	.site-content .sidebar .cat-item > a .no-child {
		display: none;
	}

	.site-content .sidebar .cat-item > a .count {
		flex: 0 0 auto;
		margin-left: auto;
	}

	/* De kop "Categorieën" stond dertig pixels ingesprongen terwijl de lijst eronder
	   op tweeëndertig begon — net genoeg verschil om scheef te ogen. */
	.site-content .sidebar .widget .widget-title,
	.site-content .sidebar .product_cat > span {
		font-size: 15px;
		padding-left: 13px;
		padding-right: 13px;
	}

	.site-content .sidebar .widget li,
	.site-content .sidebar .widget label {
		font-size: 14.5px;
	}
}

/* ------------------------------------------- de balk boven de producten ---

   "Filters" en "Standaard sortering" raakten elkaar precies: de knop liep tot 98
   pixels en de keuzelijst begon op 98. */
@media (max-width: 767px) {
	.shop-control-bar {
		gap: 12px;
	}

	.shop-control-bar .woocommerce-ordering {
		min-width: 0;
	}
}

/* --------------------------------------------------- de kop van de shop ---

   Het vak met het aantal artikelen nam een derde van het scherm in beslag. */
@media (max-width: 767px) {
	.nfs-shophead__gauge {
		margin-top: 18px;
		padding: 9px 16px 11px;
	}

	.nfs-shophead__count {
		font-size: 22px;
	}

	.nfs-shophead__label {
		font-size: 10.5px;
		margin-top: 3px;
	}

	.nfs-shophead__mark {
		display: none;
	}
}

/* ------------------------------------ de tekst naast de foto op de telefoon ---

   Op 30 augustus is deze tekst groter gemaakt omdat hij op een breed scherm naast
   een halve schermbreedte foto stond weg te vallen. Op een telefoon staat de tekst
   ónder de foto over de volle breedte, en daar was 17,5 pixels te fors. */
@media (max-width: 767px) {
	.nfs-warehouse__text {
		font-size: 15.5px;
		line-height: 1.6;
	}

	.nfs-warehouse .nfs-section__title {
		font-size: 24px;
	}
}

/* De voettekst op de telefoon houdt na het weghalen van de assortimentkolom één
   kolom over. Twee kolommen geprobeerd om hoogte te winnen, maar "Zoekopdracht
   plaatsen" en "Algemene voorwaarden" braken dan over twee regels en liepen door
   elkaar heen. Eén kolom leest beter; het halve scherm dat ernaast leeg blijft is
   rustiger dan een lijst die je moet ontcijferen. */
.nfs-mfoot__col--enkel {
	max-width: 100%;
}

/* ==========================================================================
   Beschrijving, specificaties en conditie: drie kaarten
   ==========================================================================

   Het waren twee balken over de volle breedte in een wit vlak van twaalfhonderd
   pixels. Veel ruimte, weinig te zien (verzoek G Post, 31 augustus 2026: "best wat
   loze ruimte, en het ziet er saai uit"). Nu drie kaarten naast elkaar, elk met een
   pictogram, een titel en een regel die verklapt wat erin zit.

   Ze zijn nog steeds dicht: dat was het verzoek van eerder op de dag, en het klopt
   nog steeds. Het gaat nog steeds met <details>, dus zonder javascript, en de tekst
   staat gewoon in de pagina — zoekmachines lezen hem en ctrl+F vindt hem. */
.nfs-kaarten {
	display: grid;
	gap: 14px;
	padding-top: 6px;
}

@media (min-width: 992px) {
	.nfs-kaarten--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.nfs-kaarten--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Een kaart die opengaat neemt de hele rij. Een beschrijving in een kolom van een
	   derde leest als een krantenkolom van vier woorden breed; over de volle breedte
	   loopt de regel netjes door, met de tekst zelf begrensd op leesbare lengte. */
	.nfs-kaart[open] {
		grid-column: 1 / -1;
	}
}

.nfs-kaart {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nfs-kaart:hover {
	border-color: rgba(15, 53, 87, 0.3);
	box-shadow: 0 6px 18px rgba(15, 53, 87, 0.07);
}

.nfs-kaart[open] {
	border-color: rgba(15, 53, 87, 0.3);
}

/* De kop is een raster van drie: pictogram, tekst, pijltje. Zo staan de titel en de
   voorbeeldregel netjes onder elkaar uitgelijnd, ook als de titel twee regels wordt. */
.nfs-kaart__kop {
	align-items: start;
	column-gap: 12px;
	cursor: pointer;
	display: grid;
	grid-template-columns: auto 1fr auto;
	list-style: none;
	padding: 16px 18px;
}

.nfs-kaart__kop::-webkit-details-marker {
	display: none;
}

.nfs-kaart__icoon {
	background-color: var(--nfs-band);
	border-radius: 8px;
	color: var(--nfs-amber);
	display: inline-flex;
	grid-row: span 2;
	height: 36px;
	justify-content: center;
	align-items: center;
	width: 36px;
}

.nfs-kaart__icoon .nfs-icon {
	height: 18px;
	width: 18px;
}

.nfs-kaart__titel {
	color: var(--nfs-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

/* De regel die verklapt wat er in de kaart zit. Eén regel, en wat er niet op past
   loopt met puntjes af — anders wordt de ene kaart hoger dan de andere. */
.nfs-kaart__voorbeeld {
	color: var(--nfs-muted);
	font-size: 13.5px;
	grid-column: 2;
	line-height: 1.45;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nfs-kaart__pijl {
	border-bottom: 2px solid var(--nfs-amber);
	border-right: 2px solid var(--nfs-amber);
	grid-row: span 2;
	height: 9px;
	margin-top: 13px;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
	width: 9px;
}

.nfs-kaart[open] .nfs-kaart__pijl {
	transform: rotate(-135deg);
	margin-top: 16px;
}

.nfs-kaart[open] .nfs-kaart__voorbeeld {
	display: none;
}

/* De scheidingslijn loopt over de hele kaart; de tekst erbinnen wordt begrensd.
   Stond de maximale breedte op dit blok, dan liep die lijn halverwege dood. */
.nfs-kaart__inhoud {
	border-top: 1px solid var(--nfs-line);
	padding: 18px;
}

.nfs-kaart__inhoud > * {
	max-width: 72ch;
}

/* Het thema kleurt losse alinea's in dit gebied grijs met een regel die specifieker
   is dan alles wat hier redelijk te schrijven valt; vandaar de nadruk. */
.nfs-kaart__inhoud p {
	color: var(--nfs-text) !important;
	font-size: 15px;
	line-height: 1.7;
}

.nfs-kaart__inhoud > :first-child {
	margin-top: 0;
}

.nfs-kaart__regels {
	margin: 12px 0 0;
	padding-left: 18px;
}

.nfs-kaart__regels li {
	color: var(--nfs-text);
	font-size: 14.5px;
	line-height: 1.6;
	margin-bottom: 4px;
}

.nfs-kaart__meer {
	margin: 14px 0 0;
}

.nfs-kaart__meer a {
	color: var(--nfs-blue);
	font-size: 14px;
	font-weight: 600;
}

/* De kop "Beschrijving" die boven het tabblad stond, staat nu op de kaart zelf. */
#tab-description .nfs-product-tab__title {
	display: none;
}

@media (max-width: 575px) {
	.nfs-kaart__kop {
		padding: 14px 15px;
	}

	.nfs-kaart__inhoud {
		padding: 15px;
	}
}

/* ==========================================================================
   Over ons: waar wij vandaan komen
   ==========================================================================

   Het stuk over Urk stond hier als brede band over de volle schermbreedte, met de
   tekst eronder. Sinds 31 augustus 2026 gebruikt het dezelfde opmaak als de twee
   andere blokken over het bedrijf — foto naast tekst, om en om gespiegeld — zodat de
   pagina één geheel is. De opmaak daarvoor staat bij .nfs-warehouse; hier bleef
   niets over. */

/* ------------------------------------------- uitlijning op Mijn account ---

   Het thema behandelt de omhulling van Mijn account als een Bootstrap-rij en geeft
   hem daarom een marge van min vijftien pixels aan weerskanten. Dat klopt zolang de
   inhoud in kolommen zit, want die zetten er vijftien pixels binnenmarge tegenover.
   Onze eigen opzet — de uitleg boven het formulier en de witte vlakken — heeft die
   kolommen niet, en dus stond alles vijftien pixels te ver naar buiten: op een
   telefoon plakte "Mijn account" tegen de rand (verzoek G Post, 31 augustus 2026).

   Alleen op deze pagina; in de winkelwagen en bij het afrekenen zitten wél kolommen
   die die marge nodig hebben. */
.woocommerce-account .entry-content > .woocommerce,
.nfs-inlogscherm .woocommerce {
	margin-left: 0;
	margin-right: 0;
}

/* ------------------------------------------------ het kruimelpad uitlijnen ---

   Hetzelfde euvel als hierboven, maar dan op elke pagina. Het kruimelpad zit in de
   kolom van het thema en kreeg daar een marge van min vijftien pixels overheen —
   bedoeld voor een rij met kolommen, maar er staat gewoon tekst in. Gevolg: "Home >
   Mijn account" begon op drie pixels van de rand terwijl de kop eronder op zestien
   begint. Dat is precies het scheve dat opviel. */
.woocommerce-breadcrumb,
.breadcrumb {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   Het inlogscherm
   ========================================================================== */

/* Eén scherm, één ding. De foto van de Johannes-J vult de achtergrond, het
   formulier staat in het midden, en er zijn drie wegen terug: het logo, de regel
   onderin en de terugknop van de browser.

   De foto staat als <img> in de pagina en niet als achtergrondafbeelding in de
   opmaak. Dat scheelt kwaliteit: zo kiest de browser zelf welke van de maten hij
   haalt, en op een telefoon hoeft hij het grote bestand niet te laden. */
.nfs-inlogscherm {
	background-color: var(--nfs-navy-dark, #0b2440);
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
}

.nfs-inlogscherm__beeld {
	inset: 0;
	overflow: hidden;
	position: fixed;
	z-index: 0;
}

.nfs-inlogscherm__foto {
	height: 100%;
	object-fit: cover;
	/* Rechts van het midden: daar ligt de boeg, en dan blijft die vrij van het vak
	   dat er op een breed scherm overheen komt. */
	object-position: 62% 50%;
	width: 100%;
}

/* Een blauwe sluier over de foto. Zonder die laag is witte tekst op een ijsfoto
   niet te lezen, en het bindt het scherm aan de rest van de winkel. */
.nfs-inlogscherm__beeld:after {
	background:
		linear-gradient(180deg, rgba(9, 26, 43, 0.74) 0%, rgba(9, 26, 43, 0.34) 42%, rgba(9, 26, 43, 0.72) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.nfs-inlogscherm__inhoud {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	max-width: 520px;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 32px 20px 40px;
	position: relative;
	width: 100%;
	z-index: 1;
}

.nfs-inlogscherm__logo {
	display: block;
	margin-bottom: 22px;
}

.nfs-inlogscherm__logo img {
	display: block;
	height: auto;
	width: 250px;
}

.nfs-inlogscherm__vak {
	width: 100%;
}

/* De witte vlakken die het formulier al gebruikt, hoeven hier niet nog een keer
   gecentreerd of gemaximeerd te worden — dat doet het scherm zelf. */
.nfs-inlogscherm .nfs-auth {
	margin: 0;
	max-width: none;
}

.nfs-inlogscherm .nfs-auth__panel {
	box-shadow: 0 24px 60px rgba(4, 15, 28, 0.35);
}

/* De uitleg boven het formulier staat op de foto en moet dus wit zijn. */
.nfs-inlogscherm .nfs-login-intro {
	margin-bottom: 20px;
	max-width: none;
	text-align: center;
}

.nfs-inlogscherm .nfs-login-intro__title {
	color: #fff;
	font-size: 26px;
	margin-bottom: 6px;
}

.nfs-inlogscherm .nfs-login-intro p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 14.5px;
}

/* Ook de regel tussen inloggen en registreren, en de kop boven het tweede vak. */
.nfs-inlogscherm .nfs-auth__switch p {
	color: rgba(255, 255, 255, 0.9);
}

.nfs-inlogscherm .nfs-auth__switch:before {
	background-color: rgba(255, 255, 255, 0.22);
}

.nfs-inlogscherm .nfs-btn--ghost {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.nfs-inlogscherm .nfs-btn--ghost:hover,
.nfs-inlogscherm .nfs-btn--ghost:focus {
	background-color: #fff;
	border-color: #fff;
	color: var(--nfs-navy);
}

/* De weg terug. Onopvallend maar altijd zichtbaar. */
.nfs-inlogscherm__terug {
	margin: 22px 0 0;
	text-align: center;
}

.nfs-inlogscherm__terug a {
	color: rgba(255, 255, 255, 0.86);
	font-size: 14.5px;
	text-decoration: none;
}

.nfs-inlogscherm__terug a:hover {
	color: #fff;
	text-decoration: underline;
}

/* De paginatitel van het thema hoort hier niet: het vak zegt zelf al waar je bent. */
.nfs-inlogscherm .entry-title,
.nfs-inlogscherm .woocommerce-breadcrumb {
	display: none;
}

@media (max-width: 575px) {
	.nfs-inlogscherm__inhoud {
		padding: 24px 16px 32px;
	}

	.nfs-inlogscherm__logo img {
		width: 200px;
	}

	.nfs-inlogscherm .nfs-login-intro__title {
		font-size: 22px;
	}

	/* Op een telefoon staat de boeg beter in beeld als het beeld iets naar links
	   opschuift; de romp vult dan de onderste helft. */
	.nfs-inlogscherm__foto {
		object-position: 58% 45%;
	}
}

/* ------------------------------------------------------- tekstpagina's ---

   Verzending, algemene voorwaarden, privacy, cookies, kennisbank, en de Duitse en
   Franse voorwaarden. Pagina's zonder eigen sjabloon dus; welke dat zijn bepaalt
   inc/nfs-tekstpagina.php met de klasse nfs-tekstpagina.

   Wat er mis was (verzoek G Post, 31 augustus 2026): de tekst liep over de volle
   breedte, een kop stond even ver van de alinea eronder als van die erboven, en er
   stond niets omheen. Hier krijgen ze een leesbreedte, een wit vlak zoals de rest
   van de winkel, en koppen die je van een afstand als indeling herkent. */

.nfs-tekstpagina .site-content {
	background-color: var(--nfs-band);
	padding-bottom: 60px;
}

.nfs-tekstpagina article.page {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	margin: 0 auto;
	max-width: 920px;
	padding: 44px 56px 48px;
}

/* De titel staat boven een lijn, met de tekst eronder gecentreerd op de pagina —
   zo is meteen te zien waar het stuk begint. */
.nfs-tekstpagina .entry-header {
	border-bottom: 1px solid var(--nfs-line);
	margin-bottom: 32px;
	padding-bottom: 22px;
	text-align: center;
}

.nfs-tekstpagina .entry-header .entry-title {
	color: var(--nfs-navy);
	font-size: 32px;
	line-height: 1.2;
	margin: 0;
}

.nfs-tekstpagina .entry-content {
	color: var(--nfs-text);
	font-size: 16px;
	line-height: 1.75;
}

/* Ruim 680 pixels is ongeveer vijfenzestig tekens per regel. Daar leest een oog
   prettig; over de volle breedte van een computerscherm niet.

   De maat staat op de tekst zelf en niet op het vlak eromheen, want op sommige van
   deze pagina's staat een blok dat al is ingericht — het aanvraagformulier bij
   "Prijs aanvragen" bijvoorbeeld. Die blokken mogen de volle breedte houden; anders
   worden twee kolommen in elkaar geduwd. */
.nfs-tekstpagina .entry-content > p,
.nfs-tekstpagina .entry-content > h2,
.nfs-tekstpagina .entry-content > h3,
.nfs-tekstpagina .entry-content > h4,
.nfs-tekstpagina .entry-content > ul,
.nfs-tekstpagina .entry-content > ol,
.nfs-tekstpagina .entry-content > blockquote,
.nfs-tekstpagina .entry-content > table,
.nfs-tekstpagina .entry-content > figure {
	margin-left: auto;
	margin-right: auto;
	max-width: 680px;
}

/* De openingszin, ook als hij geen eigen klasse heeft meegekregen. */
.nfs-tekstpagina .entry-content > p:first-child,
.nfs-tekstpagina .entry-content > p.lead {
	color: var(--nfs-muted);
	font-size: 18px;
	line-height: 1.65;
	margin-bottom: 8px;
}

.nfs-tekstpagina .entry-content p {
	margin: 0 0 16px;
}

/* Elk onderdeel begint met een lijn over de leesbreedte en een oranje streepje,
   hetzelfde streepje als boven de filters en de blokken op de hoofdpagina. */
.nfs-tekstpagina .entry-content h2 {
	border-top: 1px solid var(--nfs-line);
	color: var(--nfs-navy);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 40px 0 14px;
	padding-top: 30px;
	position: relative;
}

.nfs-tekstpagina .entry-content h2::before {
	background-color: var(--nfs-amber);
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: -2px;
	width: 34px;
}

/* Staat er geen inleiding boven, dan hoort er ook geen scheiding te staan. */
.nfs-tekstpagina .entry-content > h2:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.nfs-tekstpagina .entry-content > h2:first-child::before {
	display: none;
}

.nfs-tekstpagina .entry-content h3 {
	color: var(--nfs-navy);
	font-size: 16.5px;
	font-weight: 700;
	margin: 28px 0 8px;
}

.nfs-tekstpagina .entry-content h4 {
	color: var(--nfs-navy);
	font-size: 15.5px;
	font-weight: 700;
	margin: 22px 0 6px;
}

/* Opsommingen met een rond oranje puntje in plaats van de zwarte stip van de
   browser, en met lucht tussen de regels. */
.nfs-tekstpagina .entry-content ul {
	list-style: none;
	margin: 0 0 18px;
	padding-left: 0;
}

.nfs-tekstpagina .entry-content ul > li {
	margin-bottom: 8px;
	padding-left: 24px;
	position: relative;
}

.nfs-tekstpagina .entry-content ul > li::before {
	background-color: var(--nfs-amber);
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 5px;
	position: absolute;
	top: 12px;
	width: 6px;
}

.nfs-tekstpagina .entry-content ol {
	counter-reset: nfs-stap;
	list-style: none;
	margin: 0 0 18px;
	padding-left: 0;
}

.nfs-tekstpagina .entry-content ol > li {
	counter-increment: nfs-stap;
	margin-bottom: 8px;
	padding-left: 30px;
	position: relative;
}

.nfs-tekstpagina .entry-content ol > li::before {
	color: var(--nfs-amber-dark);
	content: counter(nfs-stap) ".";
	font-weight: 700;
	left: 2px;
	position: absolute;
	top: 0;
}

.nfs-tekstpagina .entry-content a {
	color: var(--nfs-amber-dark);
	text-decoration: underline;
}

.nfs-tekstpagina .entry-content a:hover {
	color: var(--nfs-navy);
}

.nfs-tekstpagina .entry-content strong {
	color: var(--nfs-navy);
	font-weight: 700;
}

/* Een aangehaald stuk — bijvoorbeeld een wettelijke termijn die letterlijk wordt
   geciteerd — staat in een eigen vlakje met een oranje rand ervoor. */
.nfs-tekstpagina .entry-content blockquote {
	background-color: var(--nfs-band);
	border: 0;
	border-left: 3px solid var(--nfs-amber);
	border-radius: 0 6px 6px 0;
	color: var(--nfs-text);
	font-size: 15.5px;
	margin: 0 0 20px;
	padding: 14px 18px;
}

.nfs-tekstpagina .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.nfs-tekstpagina .entry-content table {
	border: 1px solid var(--nfs-line);
	border-radius: 6px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
	margin: 0 0 20px;
	width: 100%;
}

.nfs-tekstpagina .entry-content table th,
.nfs-tekstpagina .entry-content table td {
	border-bottom: 1px solid var(--nfs-line);
	padding: 10px 14px;
	text-align: left;
}

.nfs-tekstpagina .entry-content table th {
	background-color: var(--nfs-band);
	color: var(--nfs-navy);
	font-weight: 700;
}

.nfs-tekstpagina .entry-content table tr:last-child th,
.nfs-tekstpagina .entry-content table tr:last-child td {
	border-bottom: 0;
}

.nfs-tekstpagina .entry-content > *:last-child {
	margin-bottom: 0;
}

/* Op een telefoon loopt het vlak van rand tot rand: een kader met vijftien pixels
   ernaast kost alleen maar leesbreedte. */
@media (max-width: 767px) {
	.nfs-tekstpagina .site-content {
		padding-bottom: 32px;
	}

	.nfs-tekstpagina article.page {
		border-left: 0;
		border-radius: 0;
		border-right: 0;
		margin-left: -15px;
		margin-right: -15px;
		padding: 26px 20px 30px;
	}

	.nfs-tekstpagina .entry-header {
		margin-bottom: 24px;
		padding-bottom: 18px;
	}

	/* Dezelfde 26 als bij de andere paginatitels op een telefoon; zie de regel bij
	   de winkelwagen. Twee maten die één pixel schelen is geen keuze maar toeval. */
	.nfs-tekstpagina .entry-header .entry-title {
		font-size: 26px;
	}

	.nfs-tekstpagina .entry-content {
		font-size: 15.5px;
	}

	.nfs-tekstpagina .entry-content > p:first-child,
	.nfs-tekstpagina .entry-content > p.lead {
		font-size: 16.5px;
	}

	.nfs-tekstpagina .entry-content h2 {
		font-size: 18.5px;
		margin-top: 32px;
		padding-top: 26px;
	}
}

/* ------------------------------------------------ kopbalk op een tablet ---

   Tussen 768 en 1200 pixels toont het thema de kop van de telefoon: een
   hamburger links, het logo ernaast en de iconen rechts. Op een telefoon is dat
   precies vol, maar op een tablet of een opengevouwen toestel bleef er een halve
   balk leeg tussen het logo en de iconen — een blauw vlak met niets erin (gemeld
   door G Post, 2 september 2026).

   De volledige kop van de computer kan daar niet in: die heeft de categorieënbalk
   bij zich en die past pas vanaf 1200. Wat wel kan is de drie onderdelen over de
   breedte verdelen in plaats van ze allemaal naar links te duwen: hamburger links,
   logo in het midden, iconen rechts. Dan oogt het als een keuze in plaats van als
   een kop die te klein is uitgevallen. */
@media (max-width: 1199.98px) {
	/* Het vlaggetje staat links, naast het menuknopje (zie de haak op priority 15
	   in functions.php). Als losse div in de rij van het thema rekte hij zich uit
	   over de hele breedte en duwde hij het logo van het scherm; hij hoeft niet
	   breder te zijn dan het vlaggetje zelf. */
	.handheld-header-v2.row .nfs-hh-taal,
	.mobile-header-v1.row .nfs-hh-taal {
		flex: 0 0 auto;
		padding: 0;
		width: auto;
	}

	/* Het blok met de iconen pakte alle overgebleven ruimte en duwde het logo
	   daarmee tegen de hamburger aan. Het hoeft niet breder te zijn dan zijn
	   eigen inhoud — vandaar ook width:auto, want als kolom van het thema stond
	   hij op honderd procent en dan helpt flex alleen niet. */
	.handheld-header-v2.row .handheld-header-links,
	.mobile-header-v1.row .handheld-header-links {
		flex: 0 0 auto;
		margin-left: auto;
		width: auto;
	}

	/* Twee keer een automatische marge: de overgebleven ruimte wordt dan in
	   tweeën gedeeld, en daarmee komt het logo tussen links en rechts in te
	   staan. Links staan nu het menuknopje en de vlag, rechts zoeken en de
	   winkelwagen — vandaar dat het logo er ook echt tussenin uitkomt. */
	.handheld-header-v2.row .header-logo,
	.mobile-header-v1.row .header-logo {
		margin-left: auto;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {

	/* Op die breedte mag het logo wat groter; op een telefoon is het bewust klein
	   omdat er anders niets naast past. */
	.handheld-header-v2 .header-logo img,
	.mobile-header-v1 .header-logo img {
		max-width: 220px;
	}
}

/* ---------------------------------------------- productfoto's in een kader ---

   De foto's stonden zonder rand op een witte pagina (opmerking G Post, 4 september
   2026). Bij scheepselektronica is bijna elke foto op een lichte ondergrond
   genomen, dus liep de foto over in de pagina en was niet te zien waar het beeld
   ophield. Daarnaast had elk artikel een andere fotoverhouding, waardoor het blok
   per product een andere hoogte kreeg en de pagina onrustig oogde.

   Wat hier gebeurt is hetzelfde als bij de andere blokken op deze pagina: een licht
   kader met dezelfde ronding en dezelfde randkleur als het kenmerkenvak en het
   prijsvak ernaast. Daarmee hoort de foto bij de rest in plaats van er los naast te
   staan.

   De verhouding staat vast op vier op drie en het beeld past zich daarbinnen aan
   (object-fit: contain). Zo staat een liggende foto van een paneel even hoog als
   een staande foto van een antenne, en verspringt de pagina niet meer per artikel.
   Bijsnijden zou netter ogen maar hakt bij dit soort apparatuur zo de stekkers of
   het typeplaatje eraf, en juist daar kijkt een koper naar. */

.single-product .woocommerce-product-gallery {
	position: relative;
}

.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	overflow: hidden;
}

.single-product .woocommerce-product-gallery__image {
	background-color: var(--nfs-band);
}

/* Geen binnenruimte: het kader zelf geeft de foto al een rand, en met veertien
   pixels eromheen werd de foto kleiner dan hij was — precies wat G Post op
   4 september terecht geen verbetering vond. De foto vult het kader nu volledig. */
.single-product .woocommerce-product-gallery__image > a {
	align-items: center;
	aspect-ratio: 4 / 3;
	display: flex;
	justify-content: center;
	padding: 0;
}

.single-product .woocommerce-product-gallery__image img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* De vergrootknop stond als een blauw bolletje los in de hoek. Nu een rustig wit
   knopje dat bij het kader hoort. */
.single-product .woocommerce-product-gallery__trigger {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(15, 53, 87, 0.10);
	height: 38px;
	/* Het thema rekent hier een vaste afstand vanaf links uit; die moet eruit,
	   anders komt hij bij een smaller scherm midden in de foto te hangen. */
	left: auto;
	right: 12px;
	top: 12px;
	width: 38px;
	z-index: 3;
}

/* Het kortingsvlaggetje plakte tegen de rand van het kader aan. Nu ligt het er
   netjes binnen, met dezelfde afstand als de vergrootknop aan de andere kant. */
.single-product .images .onsale,
.single-product .product-images-wrapper .onsale {
	left: 12px;
	right: auto;
	top: 12px;
	z-index: 3;
}

/* ------------------------------------------------------------ de kleine foto's */

/* Eén rij die opzij schuift, geen raster dat afbreekt.
 
   Met vaste kolommen kreeg een artikel met elf foto's drie rijen kleine plaatjes
   onder elkaar, en het laatste rijtje bleef half gevuld staan. Dat maakte het blok
   ruim zevenhonderd pixels hoog en oogde rommelig. Nu staan ze altijd op één regel
   en veeg je verder als er meer zijn — hetzelfde als bij de beoordelingen op de
   telefoon. Het blok is daarmee even hoog bij vier foto's als bij elf. */
/* Met .woocommerce-product-gallery erbij, want het thema zet flex-flow: wrap met
   precies die selector; twee klassen tegen drie verloor het. */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
	-webkit-overflow-scrolling: touch;
	display: flex;
	/* Het thema zet hier flex-flow: wrap; zonder deze regel bleven de foto's
	   alsnog afbreken naar een tweede en derde rij. */
	flex-wrap: nowrap;
	gap: 10px;
	margin: 10px 0 0;
	overflow-x: auto;
	padding: 0 0 4px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

/* Vegen. De rij schoof al opzij, maar een veeg begint op een van de plaatjes, en
   het slepen van een afbeelding vat een browser op als "deze afbeelding versturen".
   Met pan-x weet de browser dat een beweging opzij hier het schuiven is en niet iets
   anders, en met user-drag uit begint er geen sleepje meer. Zie ook js/nfs-thumbs.js:
   daar wordt voorkomen dat een veeg als een tik op een foto wordt geteld. */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
	overscroll-behavior-x: contain;
	touch-action: pan-x;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

/* En te zien dat er meer is. Een plaatje dat halverwege wordt afgesneden ziet eruit
   als een fout; een rij die aan de rand vervaagt leest als "hier gaat het verder".
   De klassen worden gezet door js/nfs-thumbs.js: alleen vervagen aan de kant waar
   nog iets zit, en niet meer zodra je aan het eind bent. */
.single-product .woocommerce-product-gallery.nfs-thumbs--schuift .flex-control-thumbs {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 36px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 36px), transparent 100%);
}

.single-product .woocommerce-product-gallery.nfs-thumbs--schuift.nfs-thumbs--begin .flex-control-thumbs {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
}

.single-product .woocommerce-product-gallery.nfs-thumbs--schuift.nfs-thumbs--eind .flex-control-thumbs {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%);
}

/* Passen ze alle vier of vijf in beeld, dan is er niets te vegen en hoort er ook
   niets te vervagen. Die klasse zet het script er dan gewoon niet op. */

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 92px;
	list-style: none;
	margin: 0;
	scroll-snap-align: start;
	width: 92px;
}

/* Elk vierkant even groot, met hetzelfde kader als de grote foto. Zo staat er een
   nette rij onder het beeld in plaats van vier plaatjes van ongelijke maat. */
.single-product .flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 8px;
	cursor: pointer;
	display: block;
	object-fit: contain;
	opacity: 1;
	padding: 6px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.single-product .flex-control-thumbs li img:hover {
	border-color: var(--nfs-muted);
}

/* De foto waar je naar kijkt: een amber rand met een zachte gloed, dezelfde taal
   als een veld waar je in staat. Het thema zette hier een blauw streepje onder,
   wat er als een losse onderstreping bij hing. */
.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:focus {
	border-bottom-color: var(--nfs-amber);
	border-color: var(--nfs-amber);
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.14);
}

@media (max-width: 767px) {
	/* Met .woocommerce-product-gallery erbij. Zonder die klasse verloor deze regel van
	   de regel hierboven — drie klassen tegen twee — en bleven de plaatjes op een
	   telefoon 92 breed. Gevolg: op een scherm van 390 pasten er drie naast elkaar en
	   werd de vierde halverwege afgesneden. Dat is wat G Post op 8 september 2026
	   stuurde. */
	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		gap: 8px;
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 74px;
		width: 74px;
	}
}

/* ------------------------------------------- valuta in het uitschuifmenu ---

   Onder in het menu achter de drie streepjes (verzoek G Post, 4 september 2026:
   wel kunnen kiezen, maar niet zichtbaar in de balk). Bewust helemaal onderaan:
   wie het menu opent zoekt een categorie, niet een valuta. */

.nfs-oc-valuta {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 8px;
	padding: 16px 20px 20px;
}

.nfs-oc-valuta__kop {
	color: rgba(255, 255, 255, 0.55);
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.nfs-oc-valuta__lijst {
	display: grid;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfs-oc-valuta__keuze {
	align-items: center;
	border-radius: 6px;
	color: #fff;
	display: flex;
	font-size: 14px;
	gap: 10px;
	padding: 9px 10px;
	text-decoration: none;
}

.nfs-oc-valuta__keuze:hover,
.nfs-oc-valuta__keuze:focus {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* De valuta waar de bezoeker nu in kijkt, in dezelfde amber als elders. */
.nfs-oc-valuta__keuze.is-current {
	background-color: rgba(194, 97, 15, 0.18);
	color: #fff;
}

.nfs-oc-valuta__teken {
	color: var(--nfs-amber-light);
	flex: 0 0 20px;
	font-weight: 700;
	text-align: center;
}

.nfs-oc-valuta__code {
	flex: 0 0 34px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.nfs-oc-valuta__naam {
	color: rgba(255, 255, 255, 0.72);
	font-size: 13.5px;
}

/* Eerlijk zijn over wat er bij het afrekenen gebeurt: Mollie incasseert in euro,
   dus een prijs in dollar of kroon is een indicatie. Dat hoort erbij te staan. */
.nfs-oc-valuta__voet {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	line-height: 1.5;
	margin: 12px 0 0;
}

/* ------------------------------------------------- het blauw wat dieper ---

   Verzoek G Post, 4 september 2026: donkerder blauw, met een kleine licht-donker
   vervaging. De tint zelf staat bovenin bij de kleuren; hieronder krijgen de brede
   blauwe vlakken hetzelfde verloop als de categorieënbalk al had: iets lichter aan
   de bovenkant, de basiskleur onderaan.

   Het verschil tussen boven en onder is klein gehouden. Een sterk verloop trekt de
   aandacht naar de balk zelf, en die is niet waar het om gaat op een winkel; dit
   moet alleen diepte geven zodat de balken niet als vlakke vlakken aanvoelen. */

/* De balk met de drie beloftes op een computer. */
.nfs-usp {
	background-image: linear-gradient(180deg, var(--nfs-navy-top) 0%, var(--nfs-navy) 100%);
}

/* De kop op telefoon en tablet: daar zit de blauwe kleur op de kop zelf. */
@media (max-width: 1199.98px) {
	.site-header,
	.handheld-header-wrap {
		background-image: linear-gradient(180deg, var(--nfs-navy-top) 0%, var(--nfs-navy) 100%);
	}
}

/* Op de telefoon is de bovenste balk wit; daar hoort geen verloop op. */
@media (max-width: 991.98px) {
	.nfs-usp {
		background-image: none;
	}
}

/* De voettekst, het grootste blauwe vlak van de pagina. Daar mag het verloop
   andersom: donker beginnen en naar onderen toe nog iets dieper, zodat de pagina
   rustig uitdooft in plaats van abrupt op te houden. */
.site-footer,
.footer-v2 {
	background-image: linear-gradient(180deg, var(--nfs-navy-top) 0%, var(--nfs-navy) 60%, #081f33 100%);
}

/* ------------------------------------------- de foto achter de voettekst ---

   Verzoek G Post, 17 september 2026: de foto van de boeg van een binnenvaartschip
   als achtergrond onder aan de pagina, op dezelfde manier als de band "In the
   picture", "maar wel dat het donkerblauw zichtbaar blijft".

   Dat laatste is hier geen smaakkwestie maar de reden dat het werkt. In de voettekst
   staan vier kolommen kleine links en die moeten leesbaar blijven boven een foto met
   licht water erin. Het filter staat daarom veel dieper dan bij "In the picture":
   daar 62 tot 84 procent, hier 88 tot 96. Wat je ziet is het donkerblauw van de
   winkel, met de boeg en de boeggolf er net doorheen.

   De foto zelf komt uit een instelling; zie nfs_voet_achtergrond in functions.php.
   Staat die leeg, dan blijft alleen het verloop hierboven over en mist er niets.

   Het verloop hierboven blijft ook staan als de foto er wél is. Hij ligt onder de
   foto en is dan niet te zien, maar laadt het beeld niet, dan staat er nog steeds
   hetzelfde blauw als voorheen in plaats van een gat. */
.site-footer {
	position: relative;
	/* Een eigen laag, anders komen de twee lagen hieronder onder de achtergrond van
	   de pagina terecht in plaats van erboven. */
	isolation: isolate;
}

.site-footer::before {
	background-image: var(--nfs-voet-foto, none);
	background-position: 50% 42%;
	background-size: cover;
	content: "";
	inset: 0;
	position: absolute;
	z-index: -2;
}

.site-footer::after {
	background-image: linear-gradient(
		180deg,
		rgba(12, 44, 73, 0.88) 0%,
		rgba(9, 36, 60, 0.92) 55%,
		rgba(8, 31, 51, 0.96) 100%
	);
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

/* Het thema zet op elk blok in de voettekst hetzelfde marineblauw als vulkleur. Die
   vlakken liggen boven de foto en dekken hem volledig af; daarom gaan ze eraf. De
   kleur zelf verdwijnt niet — die zit nu in het filter hierboven.

   De vaste balk onderaan op de telefoon (.handheld-footer-bar) staat er met opzet
   niet bij: die zweeft over de pagina en heeft zijn eigen ondergrond nodig. */
.site-footer .desktop-footer,
.site-footer .handheld-footer,
.site-footer .footer-widgets,
.site-footer .footer-bottom-widgets,
.site-footer .copyright-bar,
.site-footer .nfs-newsletter,
.site-footer .nfs-mfoot {
	background-color: transparent;
}

/* ------------------------------------------- de balken iets smaller ---

   Verzoek G Post, 4 september 2026: de balk neemt iets te veel ruimte in, heel
   licht versmallen. Gemeten stond de kop op 238 pixels: 53 voor de beloftes, 115
   voor het logo met de zoekbalk, 70 voor de categorieënbalk.

   Alleen de twee blauwe balken gaan eraf, en met mate — een paar pixels per balk.
   De witte band met het logo blijft, want daar zit de zoekbalk in en die moet met
   zijn vingers te raken zijn.

   Dit geldt alleen voor de brede weergave. Op een telefoon en tablet staat de
   bovenste balk al op één regel van 34 pixels en is de categorieënbalk er niet;
   daar valt niets te halen zonder het krap te maken. */
@media (min-width: 992px) {
	.nfs-usp__inner {
		padding-bottom: 11px;
		padding-top: 11px;
	}
}

/* De categorieënbalk krijgt zijn hoogte van de menu-items: het thema zet daar een
   regelhoogte van 48 pixels op, met 11 pixels lucht erboven en eronder. Samen 70.
   Iets minder regelhoogte en iets minder lucht brengt hem op 62, zonder dat de
   woorden dichter bij elkaar komen te staan of het aanwijsvlak te klein wordt. */
@media (min-width: 1200px) {
	.electro-navigation .secondary-nav > li > a {
		line-height: 44px;
		padding-bottom: 9px;
		padding-top: 9px;
	}
}

/* ============================================================================
   De productpagina, opnieuw ingedeeld — 4 september 2026

   Verzoek G Post, met een schermafdruk van hemkes.nl erbij: geef de productpagina
   een volledige make-over in die stijl, laat de rest van de site met rust.

   Wat er stond: drie kolommen naast elkaar. De foto links, de naam met de
   kenmerken in het midden, en rechts een los grijs vak met de prijs en de knop.
   Dat vak stond als een blokje op zichzelf, ver van de naam waar het bij hoorde,
   en de middenkolom werd zo smal dat de titel over drie regels brak.

   Wat er nu staat: twee kolommen. De foto links over de volle hoogte, en rechts
   één doorlopend verhaal van boven naar beneden — merk, naam, artikelcode,
   voorraad, wat je krijgt, wat het kost, en dan de knop. Dat is de volgorde
   waarin iemand het leest, en het is de volgorde uit de schermafdruk.

   Alles hieronder hangt aan .single-product, dus buiten de productpagina
   verandert er niets.
   ============================================================================ */

@media (min-width: 992px) {

	/* Het thema zet hier een bootstrap-rij neer met kolommen van 41,67% en 25%.
	   Een raster van twee gelijke kolommen legt het daar overheen: de foto pakt de
	   linkerkolom over beide rijen, de tekst de rechterbovenhoek en het bestelblok
	   komt daar recht onder. */
	.single-product .single-product-wrapper.row {
		align-items: start;
		column-gap: 44px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		margin-left: 0;
		margin-right: 0;
	}

	.single-product .single-product-wrapper > .product-images-wrapper {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.single-product .single-product-wrapper > .summary.entry-summary {
		grid-column: 2;
		grid-row: 1;
	}

	.single-product .single-product-wrapper > .product-actions-wrapper {
		grid-column: 2;
		grid-row: 2;
	}

	/* De breedtes en de binnenruimte van de bootstrap-kolommen moeten eraf; het
	   raster regelt de breedte nu, en de kolomruimte staat in column-gap. */
	.single-product .single-product-wrapper > .product-images-wrapper,
	.single-product .single-product-wrapper > .summary.entry-summary,
	.single-product.extended .single-product-wrapper > .product-actions-wrapper {
		flex: none;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
		width: auto;
	}

	/* Het prijsvak was een grijze kaart met een rand eromheen. In twee kolommen
	   hoort het bij de tekst erboven en niet als los blokje ernaast; alleen een
	   lijn erboven om het van de opsomming te scheiden. */
	.single-product .single-product-wrapper > .product-actions-wrapper .product-actions {
		background-color: transparent;
		/* Geen streep boven de prijs meer (verzoek G Post, 7 september 2026: "op de
		   computerversie staat een lijntje rondom de prijs, dat ziet er halfslachtig
		   uit — kies duidelijk"). Gekozen voor weghalen: de prijs staat er met
		   vierendertig pixels al ruim bovenuit, en de witruimte eromheen scheidt hem
		   net zo goed van de vinkjes erboven. Een streep erbij is dan een lijn die
		   niets doet. De ruimte is wel iets ruimer geworden, want die deed het werk
		   dat de streep suggereerde. */
		border: 0;
		margin-top: 26px;
		padding: 0;
	}
}

/* ---------------------------------------------------- de kop van het artikel */

/* Het merk boven de naam, klein en in kapitalen. Hier stond de categorie, en die
   staat drie regels hoger al in het kruimelpad. */
.single-product .summary .nfs-eyebrow {
	color: var(--nfs-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 7px;
	text-transform: uppercase;
}

.single-product .summary .nfs-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.single-product .summary .nfs-eyebrow a:hover,
.single-product .summary .nfs-eyebrow a:focus-visible {
	color: var(--nfs-amber-dark);
}

.single-product .summary .product_title {
	font-size: 29px;
	line-height: 1.22;
	margin: 0 0 12px;
}

/* Artikelcode en voorraad naast elkaar op één regel onder de naam. */
.nfs-productkop {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0 0 4px;
}

.nfs-artikelcode {
	color: var(--nfs-muted);
	font-size: 13.5px;
}

.nfs-artikelcode span {
	color: var(--nfs-text);
	font-weight: 600;
}

.single-product .nfs-productkop .nfs-stock {
	font-size: 13.5px;
	margin: 0;
}

/* ------------------------------------------------------------- de vinkjes */

/* Dit was een tabel met vier regels: het woord links, de waarde rechts, een lijn
   ertussen. Het las als een specificatieblad, terwijl het juist de redenen zijn
   om het hier te kopen. Nu een rijtje met vinkjes, zoals in de schermafdruk. */
.nfs-vinkjes {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.nfs-vinkjes li {
	align-items: flex-start;
	color: var(--nfs-text);
	display: flex;
	font-size: 15px;
	gap: 11px;
	line-height: 1.5;
	padding: 5px 0;
}

.nfs-vinkjes__icon {
	color: var(--nfs-green);
	flex: 0 0 auto;
	line-height: 0;
	margin-top: 3px;
}

.nfs-vinkjes__icon .nfs-icon {
	height: 17px;
	width: 17px;
}

/* --------------------------------------------------------- prijs en knop */

/* De prijsweergave van de productkaarten, waar G Post op 4 september naar wees
   als voorbeeld: het bedrag groot en vet, "excl. btw" er klein achter, en het
   bedrag inclusief btw op een eigen regel eronder in grijs. Op de productpagina
   mag hij groter dan op een kaart — dit is de plek waar de prijs telt. */
.single-product .product-actions .price,
.single-product .product-actions .price .woocommerce-Price-amount,
.single-product .product-actions .electro-price .woocommerce-Price-amount {
	font-size: 34px;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.single-product .product-actions .price {
	margin: 0 0 4px;
}

.single-product .product-actions .woocommerce-price-suffix {
	font-size: 14px;
}

/* Het bedrag inclusief btw komt op een eigen regel te staan. Het thema zet die
   achter de prijs aan; naast een bedrag van vierendertig pixels valt het dan weg. */
.single-product .product-actions .nfs-price-incl,
.single-product .product-actions .nfs-btw {
	display: block;
	font-size: 14px;
}

/* De bestelknop donkerblauw (verzoek G Post, 4 september 2026). Amber blijft de
   kleur van de knoppen elders op de site; op deze pagina is de knop het einde van
   een verhaal dat in het marineblauw is verteld, en dan hoort hij daarbij. Het is
   ook de kleur van de knop op de productkaarten, dus wie doorklikt ziet dezelfde
   knop terug op de plek waar hij hem verwacht. */
.single-product .product-actions .single_add_to_cart_button,
.single-product .product-actions form.cart .single_add_to_cart_button {
	background-color: var(--nfs-navy);
	border-color: var(--nfs-navy);
	border-radius: 5px;
	font-size: 15px;
	letter-spacing: 0.02em;
	padding: 15px 20px;
}

.single-product .product-actions .single_add_to_cart_button:hover,
.single-product .product-actions .single_add_to_cart_button:focus-visible {
	background-color: var(--nfs-navy-top);
	border-color: var(--nfs-navy-top);
}

@media (min-width: 992px) {

	/* Aantal links, knop daarnaast over de rest van de breedte. */
	.single-product .product-actions form.cart {
		align-items: stretch;
		display: flex;
		gap: 12px;
		margin: 16px 0 0;
	}

	.single-product .product-actions form.cart .quantity {
		flex: 0 0 96px;
		margin: 0;
	}

	.single-product .product-actions form.cart .quantity .qty {
		border: 1px solid var(--nfs-line);
		border-radius: 5px;
		height: 100%;
		text-align: center;
		width: 100%;
	}

	.single-product .product-actions form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		margin: 0;
	}
}

/* ------------------------------------------------- de foto laten zweven ---

   Verzoek G Post, 4 september 2026: een heel dun randje met licht afgeronde
   hoeken om de productfoto, en er een zachte gloed omheen zodat hij lijkt te
   zweven.

   De gloed is opzettelijk flauw en marineblauw getint in plaats van zwart: een
   grijze schaduw onder een foto op een witte pagina ziet er vuil uit, een schaduw
   in de kleur van de huisstijl leest als diepte. Twee schaduwen over elkaar — een
   kleine vlak onder de rand en een grote wijde eronder — geven het zweven; één
   enkele schaduw ziet eruit als een kader met een dikke onderrand. */
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	background-color: #fff;
	border-color: rgba(15, 53, 87, 0.12);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(9, 36, 60, 0.06), 0 14px 34px rgba(9, 36, 60, 0.09);
}

/* De foto zelf staat op wit in plaats van op de lichte band: met een gloed
   eromheen hoort het vlak licht te zijn, anders zweeft er een grijs vlak. */
.single-product .woocommerce-product-gallery__image {
	background-color: #fff;
}

/* Dezelfde behandeling voor de kleine foto's eronder, maar dan met mate: die
   staan naast elkaar en een gloed per plaatje maakt de rij onrustig. */
.single-product .flex-control-thumbs li img {
	background-color: #fff;
	border-color: rgba(15, 53, 87, 0.12);
	border-radius: 9px;
	box-shadow: 0 1px 3px rgba(9, 36, 60, 0.05);
}

/* En op de productkaarten in de lijsten — daar stond de foto helemaal zonder
   rand, en dat is waar de opmerking over begon. Het randje zit om de foto en niet
   om de kaart: de kaart heeft er zelf al een. */
.products > .product .product-thumbnail,
.owl-item > .product .product-thumbnail {
	background-color: #fff;
	border: 1px solid rgba(15, 53, 87, 0.12);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(9, 36, 60, 0.05), 0 8px 18px rgba(9, 36, 60, 0.06);
	overflow: hidden;
}

/* Wijst de muis de kaart aan, dan komt de foto iets verder omhoog. Alleen op
   apparaten met een muis: op een telefoon blijft een aangeraakte kaart in die
   stand hangen. */
@media (hover: hover) {
	.products > .product .product-thumbnail {
		transition: box-shadow 0.18s ease, transform 0.18s ease;
	}

	.products > .product .product-inner:hover .product-thumbnail {
		box-shadow: 0 2px 5px rgba(9, 36, 60, 0.07), 0 14px 26px rgba(9, 36, 60, 0.10);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.products > .product .product-inner:hover .product-thumbnail {
		transform: none;
	}
}

/* ================================================ de balken, 4 september 2026

   De witte balk op de computer een slag smaller (verzoek G Post): de ruimte boven
   en onder de rij met het logo was samen 62 pixels. Op 48 blijft het logo op zijn
   maat staan en houdt het zoekveld zijn hoogte; de kop wordt er 14 pixels lager
   van.

   Met .header-v1 ervoor, want zo staat het ook in het thema (2.286em boven en
   1.857em onder); zonder die klasse verliest deze regel het.

   Hier stond ook een blok dat op telefoon en tablet de kleuren van de twee balken
   omdraaide — beloftes blauw, kop wit — omdat ik "overeenkomt met de desktopstijl"
   zo had gelezen. Dat was niet gevraagd en is dezelfde dag teruggedraaid. De
   telefoon houdt dus wat er stond: een witte beloftesbalk met blauwe letters en
   daaronder de marineblauwe kop met het witte logo. */
@media (min-width: 1200px) {
	.header-v1 .masthead,
	.masthead {
		padding-bottom: 22px;
		padding-top: 26px;
	}
}

/* Op de telefoon loopt de foto van rand tot rand over de bovenkant van de kaart —
   daar is bewust voor gekozen zodat het beeld op een klein scherm zo groot
   mogelijk is. Een kader eromheen zou hem juist weer kleiner maken, en ronde
   hoeken onderaan een foto die tegen de zijkanten aanloopt staan raar. Dus daar
   alleen een haarlijntje eronder, en de gloed laat de kaart zelf over. */
@media (max-width: 767px) {
	.products > .product .product-thumbnail {
		border: 0;
		border-bottom: 1px solid var(--nfs-line);
		border-radius: 5px 5px 0 0;
		box-shadow: none;
	}
}

/* ------------------------------------- de lege strook onder de kop met de foto ---

   Verzoek G Post, 4 september 2026, met een schermafdruk van de shop erbij: die
   loze witruimte moet zoveel mogelijk opgevuld worden, op telefoon én computer.

   Gemeten zat er tussen de onderkant van de foto en de balk met "Standaard
   sortering" vijfennegentig pixels, waarvan er maar eenentwintig gebruikt werden —
   de regel "Home > Shop". De rest was drie keer lucht achter elkaar: dertig pixels
   marge onder de kop, drieëntwintig binnenruimte boven het kruimelpad en
   eenentwintig eronder.

   Die drie zijn teruggebracht tot één rustige afstand. Het kruimelpad staat nu
   direct onder de foto en hoort daar zichtbaar bij, in plaats van los in een witte
   band te zweven. De artikelen komen daarmee een halve smartphonehoogte eerder in
   beeld. */

.nfs-shophead {
	margin-bottom: 0;
}

/* Het thema rekent hier in em's (1.66em boven, 1.486em onder). Dat is ruim bemeten
   voor één regel kleine tekst van dertien pixels. */
.woocommerce-breadcrumb,
.breadcrumb {
	margin-bottom: 0;
	padding-bottom: 10px;
	padding-top: 13px;
}

@media (max-width: 767px) {
	.woocommerce-breadcrumb,
	.breadcrumb {
		padding-bottom: 8px;
		padding-top: 11px;
	}
}

/* --------------------------------------------- het vergrootknopje op de foto ---

   Verzoek G Post, 4 september 2026: "Het icoontje ziet er niet goed uit."

   Terecht. Dat knopje maakt WooCommerce zelf, in JavaScript, en het zet er een
   emoji in — 🔍. Een emoji wordt door het besturingssysteem getekend en niet door
   ons: op deze pagina kwam er een paarsblauw loepje uit met een glimmertje erop,
   in kleuren die nergens anders op de site voorkomen. Er is geen haakje om die
   emoji langs de achterdeur te vervangen, dus gaat hij hier uit beeld en tekenen
   wij het loepje er zelf achter, in dezelfde lijnstijl als alle andere icoontjes.

   Het staat als achtergrondplaatje in de opmaak en niet als losse afbeelding: dan
   is er geen extra bestand voor nodig en kleurt hij mee. */
.single-product .woocommerce-product-gallery__trigger {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309243c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.4'/%3E%3Cpath d='M15.7 15.7 20 20'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 19px 19px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* De emoji zelf. Verbergen met display: none haalt hem uit de knop en dan klapt
   die in elkaar op browsers die het achtergrondplaatje niet aankunnen; op nul
   zetten laat de knop staan zoals hij is. */
.single-product .woocommerce-product-gallery__trigger span {
	font-size: 0;
	line-height: 0;
	opacity: 0;
}

.single-product .woocommerce-product-gallery__trigger:hover,
.single-product .woocommerce-product-gallery__trigger:focus-visible {
	border-color: var(--nfs-amber);
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.14);
}

/* Op een apparaat zonder muis gaat het knopje eraf.
 
   Daar is de hele foto het aanraakvlak (zie js/nfs-fotos.js): tikken opent hem
   groot, vegen gaat naar de volgende en met twee vingers zoom je in. Een knopje
   van achtendertig pixels in de hoek van diezelfde foto is dan geen hulp maar een
   struikelblok — het ligt precies waar de duim langs veegt.

   Op hover: none en niet op schermbreedte, want het gaat om de vinger en niet om
   het formaat. Een tablet van duizend pixels breed valt hier dus ook onder, en een
   klein venster op een computer met muis houdt het knopje. */
@media (hover: none) {
	/* Met de hele structuur van het thema ervoor: dat zet op elke losse link in de
	   fotokolom display: block (.single-product .product-images-wrapper div.images
	   > a), en dat is dieper dan een regel op alleen het knopje. Zonder deze extra
	   diepte bleef het knopje gewoon staan — gemeten op een nagebootst
	   aanraakscherm. */
	.single-product .woocommerce-product-gallery__trigger,
	.single-product .product-images-wrapper div.images > a.woocommerce-product-gallery__trigger {
		display: none;
	}

	/* De grote foto is nu zelf de knop. Een vingerwijzing dat er iets te tikken
	   valt, en geen blauwe oplichtende rechthoek van de browser eromheen. */
	.single-product .woocommerce-product-gallery__image {
		-webkit-tap-highlight-color: transparent;
		cursor: zoom-in;
	}
}

/* ------------------------------------------------- het aantal bij de bestelknop ---

   Verzoek G Post, 4 september 2026: "hoeveel producten je wilt staat niet evenredig
   met de balk toevoegen aan winkelmand, verder valt het ook niet op."

   Gemeten klopte dat: het vakje was 96 bij 76 pixels en de knop ernaast 495 bij 59.
   Het vakje stak er dus zeventien pixels bovenuit, en er stond alleen een 1 in
   zonder dat er ergens stond waar dat getal voor was.

   Nu is het één blokje met een min, het getal en een plus, even hoog als de knop,
   met het woord Aantal erboven. De knoppen zelf komen uit js/nfs-aantal.js; hier
   staat alleen hoe het eruitziet. Doet dat script het niet, dan valt de opmaak
   hieronder terug op het gewone invoerveld — vandaar dat de maten ook op .quantity
   zelf staan en niet alleen op het blokje eromheen. */

@media (min-width: 992px) {
	.single-product .product-actions form.cart {
		align-items: flex-end;
	}

	.single-product .product-actions form.cart .quantity {
		flex: 0 0 auto;
	}
}

.single-product .product-actions form.cart .quantity {
	display: flex;
	/* Het kopje boven, de teller eronder. En breed genoeg voor de teller zelf: op
	   smalle schermen stond hier nog een vaste basis van 82 pixels uit de tijd dat
	   het één invoerveld was. */
	flex: 0 0 auto;
	flex-direction: column;
	gap: 5px;
	width: auto;
}

/* Het kopje boven het vakje. Klein en grijs: het moet zeggen wat het is, niet de
   aandacht van de prijs of de knop wegnemen. */
.nfs-aantal__kop {
	color: var(--nfs-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* Min, getal, plus in één kader — zoals een teller en niet als drie losse
   knoppen. Dezelfde hoogte als de bestelknop ernaast, zodat de twee samen één
   regel vormen. */
.nfs-aantal__vak {
	align-items: stretch;
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 5px;
	display: inline-flex;
	height: 54px;
	overflow: hidden;
}

/* Het thema geeft elke knop een grijze achtergrond en ronde hoeken, met regels
   die dieper gaan dan deze. Vandaar de uitroeptekens: zonder die stonden er twee
   grijze bolletjes naast het getal in plaats van een min en een plus in hetzelfde
   kader (gemeten, niet gegokt: achtergrond rgb(239,236,236), hoeken 22 pixels). */
.nfs-aantal__knop {
	align-items: center;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--nfs-navy) !important;
	cursor: pointer;
	display: flex;
	font-size: 19px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
	width: 40px;
}

.nfs-aantal__knop:hover:not(:disabled) {
	background-color: var(--nfs-band) !important;
}

.nfs-aantal__knop:disabled {
	color: #b9c4d0;
	cursor: default;
}

.nfs-aantal__knop:disabled {
	background-color: transparent !important;
}

/* Het getal zelf: groot genoeg om te lezen, en zonder de pijltjes die de browser
   er standaard in zet — die zijn hier vervangen door de twee knoppen. */
.single-product .product-actions form.cart .nfs-aantal__vak .qty {
	-moz-appearance: textfield;
	appearance: textfield;
	background: none;
	border: 0;
	border-left: 1px solid var(--nfs-line);
	border-radius: 0;
	border-right: 1px solid var(--nfs-line);
	color: var(--nfs-navy);
	font-size: 16px;
	font-weight: 700;
	height: auto;
	padding: 0 4px;
	text-align: center;
	width: 52px;
}

.single-product .product-actions form.cart .nfs-aantal__vak .qty::-webkit-outer-spin-button,
.single-product .product-actions form.cart .nfs-aantal__vak .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product .product-actions form.cart .nfs-aantal__vak .qty:focus {
	box-shadow: none;
	outline: 0;
}

/* Staat de aanwijzer in het veld, dan licht het hele blokje op in plaats van het
   getal alleen — dezelfde taal als bij de andere velden op de site. */
.nfs-aantal__vak:focus-within {
	border-color: var(--nfs-amber);
	box-shadow: 0 0 0 3px rgba(194, 97, 15, 0.14);
}

/* De bestelknop krijgt dezelfde hoogte, zodat de twee naast elkaar één geheel
   zijn. Zonder vaste hoogte rekent het thema hem uit zijn eigen binnenruimte en
   viel hij zeventien pixels lager uit dan het vakje ernaast. */
.single-product .product-actions form.cart .single_add_to_cart_button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	line-height: 1.3;
	/* Een minimum en geen vaste hoogte: op een telefoon past "Toevoegen aan
	   winkelmand" niet op één regel, en met een vaste hoogte liep de tweede regel
	   onder de knop door. Nu groeit de knop mee en blijft de tekst erin staan. */
	min-height: 54px;
	padding: 8px 22px;
}

/* Zonder javascript blijft het gewone veld staan; dan hoort het in elk geval wel
   even hoog te zijn als de knop. */
.single-product .product-actions form.cart .quantity > .qty {
	height: 54px;
}

/* De marges die het thema aan beide kanten meegeeft (0,714em onder het vakje en
   1,429em/0,429em om de knop) zetten de twee net niet gelijk: vier pixels
   verschil, en dat zie je bij twee blokken die tegen elkaar aan horen te staan.

   Het thema schrijft ze op met de hele weg ernaartoe erbij (.extended
   .single-product-wrapper > .product-actions-wrapper .product-actions …), en dat
   is dieper dan wat hier redelijk te schrijven valt. Vandaar dat diezelfde weg
   hieronder ook staat: korter zou het niet halen. Gemeten met de opmaakregels
   naast elkaar, want op het oog leek de regel gewoon te werken. */
.extended .single-product-wrapper > .product-actions-wrapper .product-actions div.quantity,
.extended .single-product-wrapper > .product-actions-wrapper .product-actions .single_add_to_cart_button.button {
	margin-bottom: 0;
	margin-top: 0;
}

/* Op een telefoon past "Toevoegen aan winkelmand" niet op één regel naast de
   teller: de knop wordt dan twee regels hoog en stak boven de teller uit. In
   plaats van de tekst in te korten rekt de teller mee, zodat de twee blokken
   even hoog blijven — het aantal wordt daar meteen wat royaler om aan te tikken. */
@media (max-width: 991.98px) {
	.single-product .product-actions form.cart {
		align-items: stretch;
	}

	.single-product .product-actions form.cart .quantity {
		justify-content: flex-end;
	}

	.single-product .product-actions form.cart .nfs-aantal__vak {
		flex: 1 1 auto;
	}
}

/* Op een telefoon staan de teller en de knop onder elkaar in plaats van naast
   elkaar. Naast elkaar hield de knop nog geen tweehonderd pixels over en brak
   "Toevoegen aan winkelmand" over drie regels; over de volle breedte past het op
   één regel en is de knop meteen een ruim aanraakvlak. */
@media (max-width: 575.98px) {
	.single-product .product-actions form.cart {
		align-items: flex-end;
		flex-wrap: wrap;
	}

	.single-product .product-actions form.cart .nfs-aantal__vak {
		flex: 0 0 auto;
	}

	.single-product .product-actions form.cart .single_add_to_cart_button {
		flex: 1 0 100%;
	}
}

/* ------------------------------------------------ een winkelwagentje ---

   Verzoek G Post, 4 september 2026: het winkelmandje mag een winkelwagentje
   worden. Het thema tekende overal een boodschappentas uit zijn eigen
   pictogramlettertype — in de kop, in de balk onderaan en als letter "a" op de
   bestelknoppen. Een tas leest als een mandje, en het ding heet hier winkelwagen.

   Het is één tekening, hier als masker gebruikt in plaats van als plaatje. Een
   masker neemt de kleur van de tekst eromheen over: wit op de donkerblauwe
   bestelknop, marineblauw in de witte kop, zonder dat er twee bestanden voor
   nodig zijn. Wat er niet in past — een browser die maskers niet kent — laat
   gewoon niets zien in plaats van een verkeerd pictogram. */

.nfs-wagenicoon,
.single_add_to_cart_button.button::before,
.owl-item > .product .button.add_to_cart_button::before,
.products > .product .button.add_to_cart_button::before {
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.2h2.3l2.6 11.1h10.6'/%3E%3Cpath d='M6.4 7.2h14.6l-1.6 6.2H7.9'/%3E%3Ccircle cx='10' cy='19' r='1.5'/%3E%3Ccircle cx='17.6' cy='19' r='1.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.2h2.3l2.6 11.1h10.6'/%3E%3Cpath d='M6.4 7.2h14.6l-1.6 6.2H7.9'/%3E%3Ccircle cx='10' cy='19' r='1.5'/%3E%3Ccircle cx='17.6' cy='19' r='1.5'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* In de kop. De maat is die van de tas die er stond (24 bij 22), zodat de rij met
   icoontjes ernaast niet verspringt. */
.nfs-wagenicoon {
	display: inline-block;
	height: 24px;
	vertical-align: middle;
	width: 24px;
}

/* Op de bestelknoppen. Het thema zette hier een letter uit het pictogramlettertype
   neer; die moet weg, anders staat de tas naast het wagentje. */
.single_add_to_cart_button.button::before,
.owl-item > .product .button.add_to_cart_button::before,
.products > .product .button.add_to_cart_button::before {
	content: "";
	display: inline-block;
	height: 19px;
	margin-right: 0.5em;
	padding: 0;
	vertical-align: middle;
	width: 19px;
}

/* De verzendregel waarvan het bedrag nog moet komen.

   Zie mu-plugins/nfs-verzenden.php voor het waarom: bij een zending op maat staat
   er € 0,00 in de regel, want een bedrag noemen dat wij nog niet kennen is erger.
   Het blokkenscherm maakt daar in de browser "gratis" van, en dat is precies het
   omgekeerde van wat er bedoeld wordt.

   Het woord wordt hier weggezet en vervangen. Via de opmaak, omdat het blok
   zichzelf bij elke wijziging opnieuw tekent en onze tekst er dan af zou gooien;
   aan de opmaak komt het niet. */
[data-nfs-opmaat="1"] .wc-block-components-totals-item__value {
	font-size: 0;
}

[data-nfs-opmaat="1"] .wc-block-components-totals-item__value::after {
	content: "Nog te bepalen";
	font-size: 15px;
	font-weight: 700;
}

/* ================================================ knoppen in het marineblauw ---

   Verzoek G Post, 4 september 2026: "Orange knoppen mogen donkerblauw, staat wat
   zakelijker. ook van plaats bestelling."

   De bestelknop op de productpagina was dat al; hier volgt de rest van de winkel:
   doorgaan naar afrekenen, plaats bestelling, verzendkosten bijwerken, filteren,
   inloggen en het cookiebalkje.

   Drie knoppen zijn amber gebleven, op verzoek van G Post later diezelfde dag: de
   zoekknop en de twee knoppen rechts in de kop (bellen en mailen). Dat zijn geen
   knoppen in de bestelweg maar de vaste ingangen van de winkel; die mogen opvallen.

   Amber blijft bestaan, maar als accent en niet meer als knopkleur: de lampjes bij
   de voorraad, de streep onder het menu-item waar je op staat, de rand om een veld
   waar je in staat, het telbolletje bij de winkelwagen. Zo blijft er één kleur die
   ergens naar wijst, terwijl de knoppen zelf rustig zijn.

   Uitzondering onderaan: knoppen die op een donkerblauw vlak staan. Die zouden
   onzichtbaar worden en houden hun amber. */

.btn-primary,
.button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.nfs-btn--primary,
.nfs-cookies__knop--ja,
.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link),
.off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button,
.widget_price_filter .price_slider_amount .button,
.nfs-auth__submit button {
	background-color: var(--nfs-navy) !important;
	border-color: var(--nfs-navy) !important;
	color: #fff !important;
}

/* Bij het aanwijzen iets lichter in plaats van donkerder: onder marineblauw houdt
   het bijna op, en dan lijkt er niets te gebeuren. */
.btn-primary:hover,
.button:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.nfs-btn--primary:hover,
.nfs-btn--primary:focus-visible,
.nfs-cookies__knop--ja:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover,
.off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout:hover,
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-Button:hover,
.widget_price_filter .price_slider_amount .button:hover,
.nfs-auth__submit button:hover {
	background-color: var(--nfs-navy-top) !important;
	border-color: var(--nfs-navy-top) !important;
	color: #fff !important;
}

/* Op een donkerblauw vlak blijft de knop amber; anders valt hij weg in de
   achtergrond. Dit zijn de blokken die zo'n vlak hebben: de kop van een pagina,
   de afsluiter van Over ons en de FAQ, de nieuwsbrief, de band met de belofte en
   de kaart met accessoires. */
.nfs-hero .nfs-btn--primary,
.nfs-hero .button,
.nfs-about-closing .nfs-btn--primary,
.nfs-about-closing .button,
.nfs-faq-end .nfs-btn--primary,
.nfs-faq-end .button,
.nfs-newsletter .nfs-btn--primary,
.nfs-newsletter .button,
.nfs-why .nfs-btn--primary,
.nfs-contact .nfs-btn--primary,
.nfs-bedankt .nfs-btn--primary,
.nfs-certificate .nfs-btn--primary,
.nfs-mfoot .nfs-btn--primary,
.nfs-cat .nfs-btn--primary,
.nfs-shophead .nfs-btn--primary,
.site-footer .nfs-btn--primary,
.site-footer .button {
	background-color: var(--nfs-amber) !important;
	border-color: var(--nfs-amber) !important;
	color: #fff !important;
}

.nfs-hero .nfs-btn--primary:hover,
.nfs-about-closing .nfs-btn--primary:hover,
.nfs-faq-end .nfs-btn--primary:hover,
.nfs-newsletter .nfs-btn--primary:hover,
.nfs-why .nfs-btn--primary:hover,
.nfs-contact .nfs-btn--primary:hover,
.nfs-bedankt .nfs-btn--primary:hover,
.nfs-certificate .nfs-btn--primary:hover,
.nfs-mfoot .nfs-btn--primary:hover,
.nfs-cat .nfs-btn--primary:hover,
.nfs-shophead .nfs-btn--primary:hover,
.site-footer .nfs-btn--primary:hover,
.site-footer .button:hover {
	background-color: var(--nfs-amber-dark) !important;
	border-color: var(--nfs-amber-dark) !important;
}

/* ------------------------------------ het winkelwagentje en het aantal erbij ---

   Gemeld door G Post, 4 september 2026: "door de grote 1 valt het winkelwagentje
   weg, het winkelwagentje mag wat opvallender met een donkerblauwe kleur."

   Gemeten klopte dat precies. Het wagentje was 24 bij 24 in het lichtere blauw van
   het thema (rgb 29,78,137) en het amberen bolletje met het aantal was 22 bij 22 —
   bijna even groot — en lag met zijn linkerbovenhoek middenop het wagentje. Van de
   tekening bleef daardoor niet veel over.

   Drie dingen: het wagentje wordt marineblauw en iets groter, het bolletje wordt
   kleiner en verhuist naar de rechterbovenhoek, en er komt een wit randje omheen
   zodat het los van de tekening staat in plaats van erover. Het bolletje blijft
   amber: dat is het enige op deze plek dat om aandacht vraagt. */

.header-icon__cart .nfs-wagenicoon,
.masthead .nfs-wagenicoon {
	color: var(--nfs-navy);
	height: 27px;
	width: 27px;
}

.header-icon__cart .header-icon-counter {
	bottom: auto;
	right: auto;

	/* Naast de bovenhoek van het wagentje: het wagentje staat op x 0 tot 27 in dit
	   vakje, dus op 17 raakt het bolletje alleen de hoek. */
	left: 17px;
	top: 2px;

	/* Kleiner dan de tekening waar het bij hoort. */
	font-size: 11px;
	height: 18px;
	line-height: 18px;
	min-width: 18px;
	padding: 0;
	text-align: center;
	width: 18px;

	/* Een wit randje eromheen, zodat het bolletje op het wagentje ligt in plaats
	   van ermee te versmelten. */
	box-shadow: 0 0 0 2px #fff;
}

/* Het bedrag stond vier pixels naast het wagentje; met het bolletje op de hoek is
   dat te krap. */
.header-icon__cart .cart-items-total-price,
.header-icon__cart .total-price {
	margin-left: 9px;
}

/* Hetzelfde op de telefoon en de tablet. Daar zit het wagentje in de blauwe kop,
   dus daar blijft hij wit — het randje om het bolletje is dan marineblauw, anders
   staat er een witte vlek in de balk. Het bolletje lag hier op dezelfde manier
   over de tekening heen: 20 pixels over een wagentje van 24. */
/* Met de hele weg van het thema ervoor (.handheld-header-v2 .handheld-header-links
   .cart .count), want die is drie klassen diep en zet daar zijn eigen maat en
   plek neer. Gemeten: met alleen .footer-cart-contents bleef het bolletje gewoon
   20 pixels en op de oude plek staan. */
.handheld-header-v2 .handheld-header-links .cart .count,
.mobile-header-v1 .handheld-header-links .cart .count,
.mobile-header-v2-inner .handheld-header-links .cart .count,
.footer-cart-contents .header-icon-counter {
	/* Amber, net als op een computer. Het thema zet hier grijs (#333e48) neer, en
	   dat valt op de blauwe kop nauwelijks op. */
	background-color: var(--nfs-amber);
	bottom: auto;
	box-shadow: 0 0 0 2px var(--nfs-navy);
	color: #fff;
	font-size: 10px;
	height: 16px;
	left: 13px;
	line-height: 16px;
	min-width: 16px;
	padding: 0;
	right: auto;
	text-align: center;
	top: -3px;
	width: 16px;
}

/* --------------------------------------------- de prijs van een aanbieding ---

   Gemeld door G Post, 4 september 2026: "dit staat gewoon nog super
   onoverzichtelijk." Terecht — bij een afgeprijsd artikel stonden er vijf regels
   onder elkaar en waren de nieuwe en de oude prijs allebei vierendertig pixels
   groot, met een streep door de tweede. Twee even grote bedragen boven elkaar
   leest als een rekensom in plaats van als een korting.

   Wat er misging: de regel die de prijs op deze pagina groot maakt, hangt aan
   .woocommerce-Price-amount, en dat bedrag zit óók in de doorgestreepte prijs.
   Die kreeg dus dezelfde vierendertig pixels mee. En het thema zet de oude prijs
   op display: block, waardoor hij een eigen regel pakte.

   Nu: de oude prijs klein en grijs, direct achter de nieuwe op dezelfde regel, en
   daaronder het bedrag inclusief btw en het groene kaartje met wat het scheelt.
   Van vijf regels naar drie. */

/* Met de hele weg van het thema ervoor, want zo staat het daar ook
   (.extended .single-product-wrapper > .product-actions-wrapper .product-actions
   .price del) — korter haalt het niet. */
.single-product .product-actions .price del,
.extended .single-product-wrapper > .product-actions-wrapper .product-actions .price del {
	display: inline-block;
	font-size: 18px;
	margin-left: 12px;
	/* Iets omhoog, zodat de oude prijs met de bovenkant van de nieuwe meeloopt in
	   plaats van op dezelfde onderlijn te staan. */
	vertical-align: 6px;
}

.single-product .product-actions .price del .woocommerce-Price-amount,
.single-product .product-actions .price del .woocommerce-Price-currencySymbol,
.single-product .product-actions .price del bdi {
	color: var(--nfs-muted);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
}

/* De streep door de oude prijs hoorde over het hele bedrag te lopen; bij het
   thema liep hij ook door de spatie naar het achtervoegsel. */
.single-product .product-actions .price ins {
	text-decoration: none;
}

/* Het bedrag inclusief btw en het kaartje eronder hebben elk hun eigen regel en
   staan links uitgelijnd onder de prijs. */
.single-product .product-actions .price .nfs-bespaar {
	display: inline-flex;
	margin-top: 12px;
}

/* De openingstijden op de contactpagina. Twee kolommen: de dagen links, de tijd
   rechts, met een stippellijn ertussen zodat het oog van links naar rechts loopt
   zonder dat er een tabelrand omheen hoeft. */
.nfs-openingstijden {
	list-style: none;
	margin: 18px 0 0;
	max-width: 340px;
	padding: 0;
}

.nfs-openingstijden li {
	align-items: baseline;
	display: flex;
	gap: 10px;
	padding: 6px 0;
}

.nfs-openingstijden li + li {
	border-top: 1px solid var(--nfs-line);
}

.nfs-openingstijden__dag {
	color: var(--nfs-text);
	flex: 1 1 auto;
	font-size: 14.5px;
}

.nfs-openingstijden__tijd {
	color: var(--nfs-navy);
	flex: 0 0 auto;
	font-size: 14.5px;
	font-weight: 600;
}

/* ------------------------------------------ de waterband op de productpagina ---

   Verzoek G Post, 4 september 2026: de strook rondom de witte blokken met de
   beschrijving en de specificaties moet de foto van het water krijgen.

   Diezelfde dag, twee opmerkingen erachteraan: "de kwaliteit van de zee is vrij
   slecht, misschien iets vervagen naar wit" en "als je op de beschrijving klikt
   dan zoomt de foto in, ook slecht voor de kwaliteit. Dan moet je juist meer van
   de afbeelding laten zien, de lucht en de boot mag ook wel worden getoond."

   Dat inzoomen kwam door de foto die er lag. Ik had er een liggende waterstrook
   uit gesneden van 1500 bij 520, omdat de band maar een paar tientallen pixels
   hoog is. Maar die band groeit: klap je een kaart open, dan gaat hij van 255 naar
   1087 pixels hoog. De opmaak vult zo'n vlak altijd helemaal (cover), en dan moest
   die strook van 520 hoog ruim twee keer worden uitgerekt. Vandaar de korrel.

   Nu ligt de hele foto er, staand, 1200 bij 1600. Bij een dichte band zie je daar
   een strook water van, en klap je een kaart open, dan komt vanzelf de horizon met
   de boot en de lucht erbij — precies wat gevraagd werd. En uitrekken hoeft niet
   meer: er is hoogte zat, dus de foto blijft scherp hoe hoog het vlak ook wordt.

   De sluier is van 30 naar 45 procent gegaan. Dat maakt het water rustiger en dekt
   meteen de ruis in de foto zelf toe; het is een telefoonfoto van bewegend water,
   daar zit korrel in die met scherpstellen niet weggaat. */
.single-product .electro-tabs {
	background-color: var(--nfs-band);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)),
		var(--nfs-water, none);
	/* Iets onder het midden: bij een lage band zie je dan water met de horizon net
	   erboven, en niet alleen lucht. */
	background-position: center 58%;
	background-repeat: no-repeat;
	background-size: cover;

}

/* ------------------------------------------------- de pagina die er niet is ---

   Verzoek G Post, 7 september 2026: geen kale foutmelding maar hetzelfde
   gezichtje als bij de andere meldingen, met de mond omlaag.

   De opzet is bewust smal: wie hier komt is de weg kwijt en heeft aan drie dingen
   genoeg — weten dat het adres niet klopt, kunnen zoeken, en de weg terug. */
.nfs-fout {
	padding: 56px 0 72px;
}

.nfs-fout__inner {
	margin: 0 auto;
	max-width: 640px;
	text-align: center;
}

.nfs-fout .nfs-melding {
	text-align: left;
}

.nfs-fout__zoek {
	margin-top: 26px;
}

/* Het zoekblokje van WooCommerce zet een kop en een label neer die hier niets
   toevoegen; het veld zelf is genoeg. */
.nfs-fout__zoek .widget-title,
.nfs-fout__zoek label {
	display: none;
}

.nfs-fout__zoek form {
	display: flex;
	gap: 10px;
}

.nfs-fout__zoek input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

.nfs-fout__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 26px;
}

/* Het nummer blijft staan voor wie het meldt, maar hoeft niet te schreeuwen. */
.nfs-fout__code {
	color: var(--nfs-muted);
	font-size: 12px;
	letter-spacing: 0.14em;
	margin-top: 32px;
}

/* ------------------------------------------------- de pagina die er niet is ---

   Verzoek G Post, 7 september 2026: geen kale foutmelding maar hetzelfde
   gezichtje als bij de andere meldingen in de winkel, met de mond omlaag.

   Wat er stond was de pagina van het thema: "404!" in grote cijfers, een Engelse
   zin eronder en dan twee blokken met Engelse koppen, terwijl de rest van de
   winkel Nederlands is.

   De opzet is bewust smal: wie hier komt is de weg kwijt en heeft aan drie dingen
   genoeg — weten dat het adres niet klopt, kunnen zoeken, en de weg terug. */
.nfs-fout {
	padding: 56px 0 72px;
}

.nfs-fout__inner {
	margin: 0 auto;
	max-width: 640px;
	text-align: center;
}

.nfs-fout .nfs-melding {
	text-align: left;
}

.nfs-fout__zoek {
	margin-top: 26px;
}

/* Het zoekblokje van WooCommerce zet een kop en een label neer die hier niets
   toevoegen; het veld zelf is genoeg. */
.nfs-fout__zoek .widget-title,
.nfs-fout__zoek label {
	display: none;
}

.nfs-fout__zoek form {
	display: flex;
	gap: 10px;
}

.nfs-fout__zoek input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

/* De knop van het zoekblokje is grijs bij het thema; hier hoort dezelfde knop als
   elders in de bestelweg. */
.nfs-fout__zoek button,
.nfs-fout__zoek button[type="submit"],
.nfs-fout__zoek input[type="submit"] {
	/* Het uitroepteken is nodig omdat het thema elke knop zonder eigen klasse een
	   grijze achtergrond geeft met een regel die dieper gaat dan deze — gemeten:
	   rgb(239,236,236). */
	background-color: var(--nfs-navy) !important;
	border: 0 !important;
	border-radius: 4px !important;
	color: #fff !important;
	font-weight: 600;
	padding: 0 22px;
}

.nfs-fout__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 26px;
}

/* Het nummer blijft staan voor wie het meldt, maar hoeft niet te schreeuwen. */
.nfs-fout__code {
	color: var(--nfs-muted);
	font-size: 12px;
	letter-spacing: 0.14em;
	margin-top: 32px;
}

/* ------------------------------- de pagina van een bestelling die openstaat ---

   Verzoek G Post, 7 september 2026: "wanneer de transactie niet is voldaan, voelt
   de pagina nu niet echt als één geheel. De verschillende onderdelen mogen visueel
   beter op elkaar aansluiten."

   Wat er stond: onze eigen blauwe kop met het bedrag, en daaronder twee blokken in
   de taal van iemand anders — de bestellingstabel zoals WooCommerce hem tekent
   (grijze kopregel, lijnen over de volle breedte) en daaronder de rij
   betaalmethoden. Drie vormentalen onder elkaar.

   Hieronder krijgen die twee dezelfde behandeling als de rest van de winkel: een
   witte kaart met dezelfde rand, dezelfde ronding en dezelfde binnenruimte, met
   even brede koppen erboven. Niets aan de inhoud, alleen aan de vorm. */

.woocommerce-order-pay .nfs-betaal,
.woocommerce-order-pay .woocommerce > form#order_review,
.woocommerce-order-pay form#order_review {
	margin: 0 auto;
	max-width: 820px;
}

/* De twee koppen op één lijn en met dezelfde maat. */
.woocommerce-order-pay .nfs-betaal__kopje,
.woocommerce-order-pay .nfs-betaal h2 {
	color: var(--nfs-navy);
	font-size: 19px;
	font-weight: 700;
	margin: 30px 0 12px;
}

/* De bestellingstabel als kaart in plaats van als tabel met lijnen. */
.woocommerce-order-pay table.shop_table {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-collapse: separate;
	border-radius: 10px;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce-order-pay table.shop_table thead th {
	background-color: var(--nfs-band);
	border-bottom: 1px solid var(--nfs-line);
	color: var(--nfs-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 12px 18px;
	text-transform: uppercase;
}

.woocommerce-order-pay table.shop_table td,
.woocommerce-order-pay table.shop_table tfoot th {
	border-top: 1px solid var(--nfs-line);
	padding: 14px 18px;
}

.woocommerce-order-pay table.shop_table tbody tr:first-child td {
	border-top: 0;
}

/* Het totaal is de regel waar het om gaat. */
.woocommerce-order-pay table.shop_table tfoot tr:last-child th,
.woocommerce-order-pay table.shop_table tfoot tr:last-child td {
	color: var(--nfs-navy);
	font-size: 17px;
	font-weight: 700;
}

/* De rij met betaalmethoden krijgt dezelfde kaart eromheen, zodat de twee blokken
   even breed zijn en dezelfde rand hebben. */
.woocommerce-order-pay ul.wc_payment_methods,
.woocommerce-order-pay .nfs-betaal__methoden {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.woocommerce-order-pay ul.wc_payment_methods > li {
	border-top: 1px solid var(--nfs-line);
	margin: 0;
	padding: 14px 18px;
}

.woocommerce-order-pay ul.wc_payment_methods > li:first-child {
	border-top: 0;
}

/* De voet met de voorwaarden en de knop hoort bij dezelfde kolom en niet los
   eronder. */
.woocommerce-order-pay .nfs-betaal__voet {
	margin-top: 22px;
}

/* ------------------------- het vinkje bij de voorwaarden op de betaalpagina ---

   Gemeld door G Post met een schermafdruk (7 september 2026): op de telefoon staat
   het vinkje bij de algemene voorwaarden niet netjes uitgelijnd.

   Gemeten stond het hokje op x = -4: vier pixels búiten het scherm. WooCommerce
   zet zo'n vinkje absoluut neer met een marge van min twintig pixels, in de
   verwachting dat de regel eromheen twintig pixels binnenmarge heeft. Die marge
   heeft onze pagina niet, dus schoof het hokje het scherm af en was het half
   afgesneden.

   Hier wordt het een gewone rij: hokje links, tekst ernaast, allebei in de kolom.
   Bovenaan uitgelijnd en niet in het midden, want de tekst loopt over twee regels
   en dan hoort het hokje bij de eerste. */
/* Geen flexrij maar gewone tekst met het hokje in de linkermarge. Met flex wordt
   het sterretje achter "akkoord" een los blokje dat helemaal rechts belandt; zo
   loopt het gewoon mee met de zin. */
.woocommerce-order-pay .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: block;
	line-height: 1.5;
	padding-left: 28px;
	position: relative;
}

/* Met #payment ervoor, want zo staat de regel in het thema
   (#payment .woocommerce-terms-and-conditions-wrapper .checkbox input[type=…]) en
   een id wint het altijd van een klasse. Gemeten: zonder deze voorvoeging bleef
   het hokje op x = -4 staan. */
#payment .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
#payment .woocommerce-terms-and-conditions-wrapper .checkbox input[type="checkbox"],
.woocommerce-order-pay .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	height: 18px;
	/* In de linkermarge die het label vrijhoudt, en twee pixels omlaag zodat het
	   hokje op het midden van de eerste tekstregel staat (regelhoogte 1,5 op 15
	   pixels is 22,5 hoog, hokje 18). */
	left: 0;
	margin: 0;
	position: absolute;
	top: 2px;
	width: 18px;
}

/* --------------------------- de meldingen van het blokkenscherm, met gezicht ---

   Gemeld door G Post met een schermafdruk (7 september 2026): "de huidige
   foutmelding past niet goed bij de uitstraling. In plaats van de foutmelding
   graag een niet-zo-blij gezichtje gebruiken."

   Het ging om de melding in de winkelwagen — "Er zijn niet genoeg … in voorraad" —
   met het rode uitroepteken in een cirkel dat WooCommerce zelf tekent. Overal
   anders in de winkel staat bij een melding ons eigen gezichtje: dezelfde cirkel,
   twee ogen en een mond die omlaag of omhoog krult. Alleen de meldingen van het
   blokkenscherm deden nog niet mee, want die worden in de browser getekend en
   komen niet langs onze sjablonen.

   Vandaar dat het hier met opmaak gebeurt: hun eigen tekening gaat uit beeld en
   ons gezicht komt ervoor in de plaats, als masker zodat het de kleur van de
   melding overneemt — rood bij een fout, groen bij gelukt, blauw bij een mededeling. */

.wc-block-components-notice-banner > svg {
	display: none;
}

.wc-block-components-notice-banner::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 30px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	margin-right: 12px;
	width: 30px;
}

/* De mond omlaag: er ging iets mis. */
.wc-block-components-notice-banner.is-error::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='17.5'/%3E%3Ccircle cx='14.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='25.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Cpath d='M13.5 27.5c1.8-3 4-4.5 6.5-4.5s4.7 1.5 6.5 4.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='17.5'/%3E%3Ccircle cx='14.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='25.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Cpath d='M13.5 27.5c1.8-3 4-4.5 6.5-4.5s4.7 1.5 6.5 4.5'/%3E%3C/svg%3E");
}

/* De mond omhoog: gelukt. */
.wc-block-components-notice-banner.is-success::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='17.5'/%3E%3Ccircle cx='14.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='25.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Cpath d='M13.5 23.5c1.8 3 4 4.5 6.5 4.5s4.7-1.5 6.5-4.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='17.5'/%3E%3Ccircle cx='14.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='25.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Cpath d='M13.5 23.5c1.8 3 4 4.5 6.5 4.5s4.7-1.5 6.5-4.5'/%3E%3C/svg%3E");
}

/* Rechte mond: alleen iets om te weten. */
.wc-block-components-notice-banner.is-info::before,
.wc-block-components-notice-banner.is-warning::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='17.5'/%3E%3Ccircle cx='14.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='25.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Cpath d='M14 26h12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='17.5'/%3E%3Ccircle cx='14.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='25.5' cy='16' r='1.5' fill='%23000' stroke='none'/%3E%3Cpath d='M14 26h12'/%3E%3C/svg%3E");
}

/* Op een telefoon staan de blokken van de betaalpagina onder elkaar; dan telt
   vooral dat ze allemaal even breed zijn en dezelfde afstand houden. Gemeld door
   G Post (7 september 2026): de pagina voelt niet als één geheel.

   De melding bovenaan liep tot tegen de rand terwijl de tabel eronder in de
   container stond, en tussen de blauwe kop en de melding zat geen lucht. */
@media (max-width: 767px) {
	.woocommerce-order-pay .woocommerce-notices-wrapper,
	.woocommerce-order-pay .nfs-melding {
		margin-left: 15px;
		margin-right: 15px;
	}

	.woocommerce-order-pay .nfs-betaalkop {
		margin-bottom: 22px;
	}

	.woocommerce-order-pay .nfs-betaal__kopje,
	.woocommerce-order-pay .nfs-betaal h2 {
		margin-top: 26px;
	}
}

/* ================================================ bestellingen in Mijn account

   Verzoek G Post, 8 september 2026: de bestellingenpagina verbeteren.

   Wat er stond kwam recht uit WooCommerce: een tabel met dunne lijntjes, de stand
   van zaken als geel gemarkeerd woord midden in een zin, drie even zware knoppen
   die over elkaar heen vielen, en twee adressen met een streep eronder. Alle
   gegevens klopten, maar het las als een uitdraai en niet als een pagina van deze
   winkel — terwijl de bedankpagina ná het bestellen precies dezelfde gegevens wel
   netjes toont.

   Hieronder krijgen de lijst en de losse bestelling dezelfde vorm als de rest:
   kaarten met dezelfde rand en ronding, de stand van zaken als gekleurd label, en
   knoppen met een duidelijke eerste keuze. */

/* ------------------------------------------------------- de losse bestelling */

.nfs-order__kaarten {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.nfs-order__kaarten li {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 14px 16px;
}

.nfs-order__label {
	color: var(--nfs-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.nfs-order__kaarten strong {
	color: var(--nfs-navy);
	font-size: 15.5px;
	font-weight: 700;
}

/* De stand van zaken als label, in dezelfde kleuren als de voorraadlampjes:
   groen is klaar, amber wacht of is bezig, rood is misgegaan, grijs is afgesloten. */
.nfs-orderstand {
	border-radius: 40px;
	display: inline-block;
	font-size: 12.5px !important;
	font-weight: 700;
	padding: 4px 12px;
	width: fit-content;
}

.nfs-orderstand--klaar {
	background-color: var(--nfs-groen-zacht);
	color: var(--nfs-groen-diep);
}

.nfs-orderstand--bezig,
.nfs-orderstand--wacht {
	background-color: rgba(194, 97, 15, 0.12);
	color: var(--nfs-amber-dark);
}

.nfs-orderstand--mis {
	background-color: rgba(178, 42, 42, 0.10);
	color: #a12727;
}

.nfs-orderstand--weg {
	background-color: var(--nfs-band);
	color: var(--nfs-muted);
}

.nfs-order__knoppen {
	margin: 0 0 26px;
}

.nfs-order__kop {
	color: var(--nfs-navy);
	font-size: 19px;
	font-weight: 700;
	margin: 30px 0 12px;
}

/* De koppen die WooCommerce zelf boven de tabel en de adressen zet. */
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-customer-details h2 {
	border: 0;
	color: var(--nfs-navy);
	font-size: 19px;
	font-weight: 700;
	margin: 30px 0 12px;
	padding: 0;
}

/* ------------------------------------------ de tabel met de bestelde artikelen */

.woocommerce-account table.woocommerce-table--order-details,
.woocommerce-account table.shop_table.order_details {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-collapse: separate;
	border-radius: 10px;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce-account table.woocommerce-table--order-details thead th {
	background-color: var(--nfs-band);
	border-bottom: 1px solid var(--nfs-line);
	color: var(--nfs-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 12px 18px;
	text-transform: uppercase;
}

.woocommerce-account table.woocommerce-table--order-details td,
.woocommerce-account table.woocommerce-table--order-details tfoot th {
	border-top: 1px solid var(--nfs-line);
	padding: 13px 18px;
}

.woocommerce-account table.woocommerce-table--order-details tbody tr:first-child td {
	border-top: 0;
}

.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td {
	color: var(--nfs-navy);
	font-size: 16px;
	font-weight: 700;
}

/* ------------------------------------------------------------- de adressen */

.woocommerce-account .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.woocommerce-account .woocommerce-customer-details address {
	background-color: var(--nfs-band);
	border: 1px solid var(--nfs-line);
	border-radius: 10px;
	font-style: normal;
	line-height: 1.7;
	padding: 16px 18px;
}

/* ------------------------------------------------------------ de lijst zelf */

.woocommerce-account table.woocommerce-orders-table {
	background-color: #fff;
	border: 1px solid var(--nfs-line);
	border-collapse: separate;
	border-radius: 10px;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce-account table.woocommerce-orders-table th {
	background-color: var(--nfs-band);
	border-bottom: 1px solid var(--nfs-line);
	color: var(--nfs-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 12px 18px;
	text-transform: uppercase;
}

.woocommerce-account table.woocommerce-orders-table td {
	border-top: 1px solid var(--nfs-line);
	padding: 14px 18px;
	vertical-align: middle;
}

.woocommerce-account table.woocommerce-orders-table tbody tr:first-child td {
	border-top: 0;
}

/* De knoppen in de kolom Acties stonden over elkaar heen en waren alle drie even
   zwaar. Nu een rij met ruimte ertussen, en alleen de eerste is een volle knop. */
.woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-actions a.button {
	display: inline-block;
	font-size: 13px;
	margin: 3px 6px 3px 0;
	padding: 8px 14px;
}

.woocommerce-orders-table__cell-order-actions a.button:not(.pay):not(.invoice) {
	background-color: transparent !important;
	border: 1px solid var(--nfs-line) !important;
	color: var(--nfs-navy) !important;
}

.woocommerce-orders-table__cell-order-actions a.button:not(.pay):not(.invoice):hover {
	border-color: var(--nfs-navy) !important;
}

/* De stand van zaken in de lijst leest als een woord in een cel; hier krijgt hij
   hetzelfde label als op de bestelling zelf. */
.woocommerce-orders-table__cell-order-status {
	color: var(--nfs-navy);
	font-weight: 600;
}

/* Op een telefoon wordt een tabel met vijf kolommen onleesbaar. WooCommerce zet
   daar zelf al het kopje voor elke cel klaar; hieronder wordt elke bestelling een
   kaartje met die kopjes links en de waarde rechts. */
@media (max-width: 767px) {
	.woocommerce-account table.woocommerce-orders-table,
	.woocommerce-account table.woocommerce-orders-table tbody,
	.woocommerce-account table.woocommerce-orders-table tr,
	.woocommerce-account table.woocommerce-orders-table td {
		display: block;
		width: auto;
	}

	.woocommerce-account table.woocommerce-orders-table {
		background: none;
		border: 0;
	}

	.woocommerce-account table.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-account table.woocommerce-orders-table tr {
		background-color: #fff;
		border: 1px solid var(--nfs-line);
		border-radius: 10px;
		margin-bottom: 14px;
		padding: 6px 16px 12px;
	}

	.woocommerce-account table.woocommerce-orders-table td {
		align-items: baseline;
		border: 0;
		display: flex;
		gap: 14px;
		justify-content: space-between;
		padding: 8px 0;
	}

	.woocommerce-account table.woocommerce-orders-table td::before {
		color: var(--nfs-muted);
		content: attr(data-title);
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.woocommerce-orders-table__cell-order-actions {
		display: block !important;
		white-space: normal;
	}

	.woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}
}

/* De twee adreskaarten mogen de volle kolom pakken; WooCommerce zet er zijn eigen
   breedte op (col-1 en col-2), en die telt hier niet meer mee omdat het raster de
   verdeling al doet. */
.woocommerce-account .woocommerce-customer-details .woocommerce-column {
	float: none;
	max-width: none;
	padding: 0;
	width: auto;
}

/* Een e-mailadres brak middenin een woord af ("nauticfors / ale.com"). Breken mag,
   maar dan op een punt of een streepje en niet zomaar ergens. */
.woocommerce-account .woocommerce-customer-details address {
	overflow-wrap: break-word;
	word-break: normal;
}

/* De knoppen in de regel Acties van de bestelling zelf: dezelfde verdeling als in
   de lijst — één volle knop en de rest met alleen een lijntje eromheen. */
.woocommerce-account table.woocommerce-table--order-details .button:not(.pay):not(.invoice) {
	background-color: transparent !important;
	border: 1px solid var(--nfs-line) !important;
	color: var(--nfs-navy) !important;
}

.woocommerce-account table.woocommerce-table--order-details .button {
	font-size: 13px;
	margin: 2px 0 2px 8px;
	padding: 8px 14px;
}

/* De stand van zaken in de lijst als hetzelfde gekleurde label als op de
   bestelling zelf.

   Hier stond eerst de opmaak van het labeltje rechtstreeks op de cel van de tabel,
   met display:inline-block erbij om de ronde hoeken om het woord te krijgen. Dat
   was fout, en G Post zag het op 8 september 2026: een cel met inline-block telt
   niet meer mee voor de hoogte van de rij en gaat bovenaan hangen, dwars door het
   lijntje onder de bestelling heen.

   Nu zit het labeltje in een span in de cel (zie inc/nfs-account.php) en blijft de
   cel gewoon een cel. De kleur komt uit dezelfde klasse als op de bestelpagina, dus
   één bestelling ziet er in de lijst en op zijn eigen pagina hetzelfde uit. */
.woocommerce-orders-table__cell-order-status {
	font-weight: 600;
	line-height: 1.2;
	vertical-align: middle;
	white-space: nowrap;
}

/* Op een telefoon staat de cel als regel in een kaartje, met het kopje ervoor; dan
   hoort het labeltje rechts te staan en niet op een eigen regel. */
@media (max-width: 767px) {
	.woocommerce-account .woocommerce-orders-table__row .woocommerce-orders-table__cell-order-status {
		padding: 8px 0;
	}
}

/* ------------------------------------------- een artikel met uitvoeringen ---

   Gemeld door G Post met twee schermafdrukken (8 september 2026): bij het artikel
   met de kleurkeuze staat de knop naast de keuze in plaats van eronder, met een
   gat ertussen, en op een smal scherm loopt de knop het vak uit.

   De oorzaak zit in mijn eigen regel. Voor een gewoon artikel is het bestelblok
   één rij — aantal links, knop rechts — en dat staat als flexrij op form.cart. Bij
   een artikel met uitvoeringen zet WooCommerce in datzelfde formulier eerst de
   tabel met de keuzes en dáárna pas het blok met aantal en knop. Die twee kwamen
   dus naast elkaar te staan: de keuze links, en rechts een kolom van 134 pixels
   waarin de knop moest passen (gemeten). Vandaar dat hij over twee regels brak en
   op een telefoon buiten het vak liep.

   Nu staat het formulier bij zo'n artikel onder elkaar: eerst de keuze over de
   volle breedte, dan het blok met aantal en knop — en dáárin geldt weer dezelfde
   rij als bij een gewoon artikel. */

.single-product .product-actions form.variations_form {
	display: block;
}

/* De tabel met de keuzes is een tabel; die leest slecht als rij met labels.
   Hieronder wordt het een gewone blokkenlijst: het kopje boven de knoppen. */
.single-product .product-actions form.variations_form table.variations,
.single-product .product-actions form.variations_form table.variations tbody,
.single-product .product-actions form.variations_form table.variations tr,
.single-product .product-actions form.variations_form table.variations td {
	display: block;
	width: auto;
}

.single-product .product-actions form.variations_form table.variations {
	margin: 0 0 18px;
}

.single-product .product-actions form.variations_form table.variations td.label {
	margin-bottom: 8px;
	padding: 0;
}

.single-product .product-actions form.variations_form table.variations td.label label {
	color: var(--nfs-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin: 0;
	text-transform: uppercase;
}

.single-product .product-actions form.variations_form table.variations td.value {
	padding: 0;
}

/* Het blok met aantal en knop: dezelfde rij als bij een gewoon artikel. */
.single-product .product-actions .woocommerce-variation-add-to-cart {
	align-items: flex-end;
	display: flex;
	gap: 12px;
	width: 100%;
}

.single-product .product-actions .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
}

.single-product .product-actions .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1 1 auto;
	white-space: nowrap;
}

/* De prijs van de gekozen uitvoering staat boven de knop en hoort niet nog eens
   zo groot als de prijs erboven; die staat er al. */
.single-product .product-actions .woocommerce-variation-price {
	margin-bottom: 14px;
}

/* "Wissen" zweefde los tussen de keuze en de knop. Hij hoort klein en rustig
   onder de keuzeknoppen, want het is een noodgreep en geen hoofdweg. */
.single-product .product-actions .reset_variations {
	color: var(--nfs-muted);
	display: inline-block;
	font-size: 13px;
	margin-top: 10px;
}

@media (max-width: 575.98px) {
	.single-product .product-actions .woocommerce-variation-add-to-cart {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.single-product .product-actions .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		flex: 1 0 100%;
		white-space: normal;
	}
}

/* ------------------------------------- de icoontjes in het accountmenu ---

   Gemeld door G Post, 8 september 2026: in het menu van Mijn account heeft
   "Bestellingen" wel een icoontje en "Zending volgen" en "Retouren" niet.

   Dat klopte, en het kwam ergens vandaan. Het thema tekent die icoontjes met een
   letter uit Font Awesome, en dat lettertype kent alleen de tabbladen die
   WooCommerce zelf meelevert. Onze twee eigen tabbladen stonden daar niet bij, dus
   die kregen niets. Op 8 september kwam daar nog een tweede ding bij: het mandje
   naast "Bestellingen" moest een wagentje worden, en dat is er als tekening
   ingezet — waardoor er één icoontje in een andere stijl tussen stond.

   Daarom hieronder alle zeven in één keer, als tekening en niet als letter. Ze zijn
   met dezelfde pen getekend als het wagentje in de kop van de winkel: lijnen van
   1,7 dik met ronde uiteinden, in een vierkant van 24. Ze worden als masker over de
   tekstkleur gelegd, zodat ze vanzelf meekleuren met het menu — grijs als je er
   niet bent, amber op de regel waar je staat.

   De regel content:"" met !important moet: zonder die regel blijft de letter van
   Font Awesome onder het masker staan en zie je twee tekens over elkaar. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	background-color: currentColor;
	content: "" !important;
	display: inline-block;
	height: 19px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	vertical-align: middle;
	width: 19px;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='7.4' height='7.4' rx='1.6'/%3E%3Crect x='13.4' y='3.2' width='7.4' height='7.4' rx='1.6'/%3E%3Crect x='3.2' y='13.4' width='7.4' height='7.4' rx='1.6'/%3E%3Crect x='13.4' y='13.4' width='7.4' height='7.4' rx='1.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='7.4' height='7.4' rx='1.6'/%3E%3Crect x='13.4' y='3.2' width='7.4' height='7.4' rx='1.6'/%3E%3Crect x='3.2' y='13.4' width='7.4' height='7.4' rx='1.6'/%3E%3Crect x='13.4' y='13.4' width='7.4' height='7.4' rx='1.6'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.2h2.3l2.6 11.1h10.6'/%3E%3Cpath d='M6.4 7.2h14.6l-1.6 6.2H7.9'/%3E%3Ccircle cx='10' cy='19' r='1.5'/%3E%3Ccircle cx='17.6' cy='19' r='1.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.2h2.3l2.6 11.1h10.6'/%3E%3Cpath d='M6.4 7.2h14.6l-1.6 6.2H7.9'/%3E%3Ccircle cx='10' cy='19' r='1.5'/%3E%3Ccircle cx='17.6' cy='19' r='1.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--zending-volgen a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='6.2' width='11.4' height='9.6' rx='1.4'/%3E%3Cpath d='M13.6 9.6h3.7l3.5 3.4v2.8h-7.2z'/%3E%3Ccircle cx='7' cy='18.2' r='1.9'/%3E%3Ccircle cx='17.2' cy='18.2' r='1.9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='6.2' width='11.4' height='9.6' rx='1.4'/%3E%3Cpath d='M13.6 9.6h3.7l3.5 3.4v2.8h-7.2z'/%3E%3Ccircle cx='7' cy='18.2' r='1.9'/%3E%3Ccircle cx='17.2' cy='18.2' r='1.9'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--retouren a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 4.6 5 9.2l4.6 4.6'/%3E%3Cpath d='M5 9.2h9.1a5.4 5.4 0 0 1 0 10.8H9.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 4.6 5 9.2l4.6 4.6'/%3E%3Cpath d='M5 9.2h9.1a5.4 5.4 0 0 1 0 10.8H9.4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2c4.1-4 6.6-7.1 6.6-10.4a6.6 6.6 0 1 0-13.2 0c0 3.3 2.5 6.4 6.6 10.4z'/%3E%3Ccircle cx='12' cy='10.4' r='2.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2c4.1-4 6.6-7.1 6.6-10.4a6.6 6.6 0 1 0-13.2 0c0 3.3 2.5 6.4 6.6 10.4z'/%3E%3Ccircle cx='12' cy='10.4' r='2.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.9 20.3a7.2 7.2 0 0 1 14.2 0'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.9 20.3a7.2 7.2 0 0 1 14.2 0'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.6 4.4H6.4A1.6 1.6 0 0 0 4.8 6v12a1.6 1.6 0 0 0 1.6 1.6h8.2'/%3E%3Cpath d='m16.6 8.4 3.8 3.6-3.8 3.6'/%3E%3Cpath d='M20 12H10.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.6 4.4H6.4A1.6 1.6 0 0 0 4.8 6v12a1.6 1.6 0 0 0 1.6 1.6h8.2'/%3E%3Cpath d='m16.6 8.4 3.8 3.6-3.8 3.6'/%3E%3Cpath d='M20 12H10.2'/%3E%3C/svg%3E");
}


/* De knop onder de accessoires stond nog in amber, omdat ik het blok bij de
   donkere vlakken had gerekend toen de knoppen marineblauw werden. Gemeten staat
   hij op een lichte band (rgb 244,247,250), dus hij hoort gewoon bij de rest:
   marineblauw, net als doorgaan naar afrekenen en plaats bestelling. */
.nfs-combi .nfs-btn--primary,
.nfs-combi button[type="submit"] {
	background-color: var(--nfs-navy) !important;
	border-color: var(--nfs-navy) !important;
	color: #fff !important;
}

.nfs-combi .nfs-btn--primary:hover,
.nfs-combi button[type="submit"]:hover {
	background-color: var(--nfs-navy-top) !important;
	border-color: var(--nfs-navy-top) !important;
}

/* -------------------------------------------- lucht rond de accessoires ---

   Gemeld door G Post, 8 september 2026: "te veel witruimte tussen de accessoires
   en de producten."

   Gemeten op de Sailor RT2048: tussen de onderkant van de kop "Accessoires" en de
   eerste regel van de lijst zat 81 pixels niets. Dat kwam ergens vandaan. Dit blok
   staat ook onder de winkelwagen, en dáár heeft het een streep erboven met lucht
   eromheen nodig, want daar staat geen kop boven. Op de productpagina staat die kop
   er wél, en dan is een tweede scheiding er een te veel.

   Vandaar de aparte klasse voor het blok in het tabblad: geen streep, geen lucht
   erboven. De kop doet het werk. */
.nfs-combi--tab {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

/* En de banden zelf een slag dichter op elkaar: 50 pixels water tussen twee witte
   vlakken was ruim, 26 leest als één geheel zonder dat de blokken aan elkaar
   plakken. */
.nfs-product-tabs .nfs-product-tab:not(:last-child) {
	margin-bottom: 26px;
}

/* ------------------------- een artikel met meerdere uitvoeringen, stabiel ---

   Verzoek G Post, 8 september 2026: "de logica voor variantselectie en de
   responsive weergave op mobiel en desktop robuust maken, zodat het systeem stabiel
   blijft bij meerdere productopties." Aanleiding: de Sailor met twee kleuren gaf
   een foutmelding en het blok sprong heen en weer.

   Er speelden drie dingen:

     1. De foutmelding. Die kwam van WooCommerce zelf en was een meldvenster van de
        browser. Dat is vervangen door een regel in de pagina — zie
        inc/nfs-varianten.php; de opmaak ervan staat hieronder.

     2. Het springen. Zolang er niets gekozen was, verstopte ik het aantalvakje. Bij
        het kiezen kwam het er ineens bij staan, de knop werd smaller en alles eronder
        schoof 77 pixels omlaag (gemeten op een telefoon van 390 breed). Nu staat het
        vakje er altijd, en verandert er bij het kiezen niets aan de vorm.

     3. De ruimte tussen twee eigenschappen. Met één keuze viel dat niet op; met
        "kleur" én "aansluiting" plakte het tweede kopje tegen de knoppen van de
        eerste aan. */

/* Twee of meer eigenschappen onder elkaar, met lucht ertussen. */
.single-product .product-actions form.variations_form table.variations tr + tr {
	margin-top: 16px;
}

/* Het aantalvakje blijft staan, of er nu wel of niet gekozen is. Het !important
   moet: WooCommerce zet met zijn eigen script display:none rechtstreeks op het
   element zolang er geen uitvoering gekozen is. */
.single-product .product-actions form.variations_form .quantity {
	display: flex !important;
}

/* En daarmee vervalt bij zo'n artikel ook de regel die het vakje weghaalt als er
   maar één van ligt: bij de ene kleur ligt er één en bij de andere vijf, en dan zou
   het vakje bij elke klik verschijnen en verdwijnen. */
.single-product .product-actions form.variations_form.nfs-enkel .quantity,
.single-product .product-actions form.variations_form .quantity:has(.qty[max="1"]) {
	display: flex !important;
}

/* Nog zo'n sprongetje: het lege vak waarin WooCommerce de prijs van de gekozen
   uitvoering kwijt kan heeft een marge van 27 pixels boven zich. Zolang er niets
   gekozen is staat dat vak op display:none en telt die marge niet mee; bij het
   kiezen komt hij er ineens bij. De prijs zelf staat bovenin het koopvak, dus het
   vak blijft leeg en de marge kan eruit. */
.single-product .single-product-wrapper .product-actions form.variations_form .single_variation,
.single-product .single-product-wrapper .product-actions form.variations_form .woocommerce-variation {
	margin: 0;
}

/* De regel die de weg wijst als er nog niets gekozen is. Amber, zoals alles in deze
   winkel dat om aandacht vraagt zonder dat er iets mis is. */
.nfs-variant__vraag {
	color: var(--nfs-amber-dark);
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 12px;
}

.nfs-variant__vraag[hidden] {
	display: none;
}

/* En de knoppen van de eigenschap waar het om gaat lichten mee op. */
.nfs-variant.is-gevraagd .nfs-variant__knop {
	border-color: var(--nfs-amber) !important;
}

@media (max-width: 767px) {
	/* Op een telefoon past het aantal niet naast de knop — de knoptekst zou over drie
	   regels breken. Dus het aantal op een eigen regel erboven, en de knop over de
	   volle breedte eronder. In beide standen dezelfde vorm, dus ook hier springt er
	   niets. */
	.single-product .product-actions form.variations_form .woocommerce-variation-add-to-cart {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.single-product .product-actions form.variations_form .woocommerce-variation-add-to-cart .quantity {
		flex: 0 0 auto;
	}

	.single-product .product-actions form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		flex: 1 0 100%;
		white-space: normal;
	}
}

/* ------------------------------------ de winkelwagen op een telefoon ---

   Gemeld door G Post, 8 september 2026: "de prijzen zijn niet volledig in beeld, en
   de korting ook niet."

   Klopt, en het is te meten. WooCommerce legt elke regel van de winkelwagen als een
   rooster neer. Op een telefoon zet hij twee kolommen klaar — 80 pixels voor de foto
   en 132 voor de tekst — maar de naam van het artikel mag over drie kolommen lopen,
   en het bedrag rechts wordt dan in een vierde kolom gezet die er niet is. Zo'n
   kolom die er niet staat krijgt wat er overblijft, en dat was 57 pixels. Daar past
   € 699,00 nog net niet in, laat staan "Bespaar € 700,00".

   Hieronder staat het rooster er wel: foto links, en daarnaast de naam, dan het
   aantal met het bedrag ernaast. Dezelfde volgorde als op de computer, alleen onder
   elkaar — en de derde kolom is zo breed als het bedrag nodig heeft. */

@media (max-width: 767px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		align-items: start;
		grid-template-columns: 80px minmax(0, 1fr) auto;
		row-gap: 10px;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-column: 1;
		grid-row: 1;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2 / 4;
		grid-row: 1;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
		grid-column: 2;
		grid-row: 2;
		padding-right: 0;
	}

	/* Het bedrag krijgt een eigen regel onder het artikel, over de volle breedte naast
	   de foto: het woord links, het bedrag rechts. Zo staat er nooit een los getal aan
	   de rand, leest het als de regels in het overzicht eronder, en is er ruimte zat
	   voor "Bespaar € 700,00". */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		align-items: center;
		display: flex;
		grid-column: 2 / 4;
		grid-row: 2;
		justify-content: space-between;
		white-space: nowrap;
	}

	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total::before {
		color: var(--nfs-muted);
		content: "Totaal";
		font-size: 13px;
		font-weight: 600;
	}

	html[lang^="en"] .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total::before {
		content: "Total";
	}

	/* Het bordje met wat u bespaart hoort onder het bedrag en mag niet afbreken. */
	.wc-block-cart-item__total-price-and-sale-badge-wrapper {
		align-items: flex-end;
	}

	.wc-block-cart .wc-block-components-sale-badge {
		white-space: nowrap;
	}
}

/* ------------------------- de prijs raakte de naam op de productkaart ---

   Gemeld door G Post, 8 september 2026 met een schermafdruk van "Eerder bekeken":
   de prijs loopt door de letters van de productnaam heen.

   Twee dingen tegelijk, en allebei te meten op de aanbiedingenpagina bij 390 breed:

     1. De naam heeft acht pixels ruimte onder zich, maar die kwamen niet in beeld.
        Een ondermarge van het laatste kind schuift bij CSS door de onderrand van de
        ouder heen; hier was dat de link om de hele naam, en daarmee verdween de
        ruimte. Gemeten stond de prijs precies op de onderkant van de naam: nul.

     2. De afgeprijsde prijs (het groene bedrag) is een inline stukje tekst met een
        regelafstand die krapper is dan de letters zelf: regel 17,1 pixels, letters
        21. Wat er te veel is steekt boven de regel uit — twee pixels, en dat waren
        precies de twee pixels die over de staarten van de naam vielen.

   Ruimte die niet kan wegvallen is padding en geen marge, en de regelafstand mag
   ruim genoeg zijn voor de letters die erin staan. Beide hieronder. */
/* En de echte boosdoener op de kaart van een afgeprijsd artikel: het vak om de
   prijs heeft van het thema een vaste hoogte van 2,571 em — 38,6 pixels, genoeg
   voor één regel. Bij een aanbieding staan er drie in: het nieuwe bedrag met het
   oude doorgestreept, "excl. btw", en het bedrag inclusief btw. Samen 60,7 pixels.
   De 22 pixels die er te veel waren liepen gewoon door alles heen wat eronder
   stond — bij G Post door de regel "Op voorraad".

   Een vaste hoogte is hier bedoeld om de kaarten naast elkaar gelijk te houden. Dat
   blijft zo: de hoogte wordt een ondergrens in plaats van een maat, dus een kaart
   zonder korting blijft precies even hoog als hij was en een kaart met korting
   groeit alleen zoveel als hij nodig heeft. */
.owl-item > .product .price-add-to-cart,
.products > .product .price-add-to-cart,
.product .price-add-to-cart {
	height: auto;
	min-height: 2.571em;
	padding-top: 9px;
}

.product .price-add-to-cart .price {
	line-height: 1.35;
}

/* En omdat een kaart met korting nu drie prijsregels heeft en zijn buurman er twee,
   stonden de knoppen "Bekijk product" niet meer op één lijn. De kaarten zelf zijn al
   even hoog; alleen zakte de inhoud niet mee naar beneden. Hieronder wordt de voet
   van de kaart een kolom die de resterende ruimte opvult, met de knop onderaan. Dat
   houdt de knoppen op één lijn, ook bij een lange naam of een lege prijs. */
.product .product-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.product .product-loop-footer {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.product .product-loop-footer .nfs-stock {
	margin-bottom: 10px;
}

.product .product-loop-footer .nfs-loop-view {
	margin-top: auto;
}

/* ------------------------ alle meldingen in dezelfde jas ---

   Gemeld door G Post, 8 september 2026, met een schermafdruk van twee meldingen
   onder elkaar in de winkelwagen: "deze 2 meldingen hebben niet dezelfde vormgeving,
   ik wil eenheid over de hele site, de bovenste melding is juist, zo moet alles
   zijn."

   De bovenste is de onze: een kaart met een gezichtje ernaast, een blauw streepje
   links, een vetgedrukte kop en de zin eronder. De onderste komt van het
   blokkenscherm van WooCommerce en wordt in de browser getekend, niet op de server —
   die kwam dus nooit langs onze sjablonen. Vandaar een roze vlak met een rand
   rondom, geen kop, en een donker vierkantje om hem weg te klikken.

   Het gezichtje zat er al op (zie hierboven); hieronder krijgt de rest van de jas
   dezelfde snit: dezelfde achtergrond, hetzelfde streepje links, dezelfde ronding en
   dezelfde ruimte. De kop wordt erbij gezet met opmaak, want in de tekst van
   WooCommerce staat er geen — "Dat lukte niet" bij een fout, "Gelukt" als het goed
   ging, "Even dit" bij een mededeling. Precies de woorden die op onze eigen kaarten
   staan.

   Voor het geval een melding zijn eigen kop meebrengt (dat kan bij het afrekenen)
   staat die regel apart, met :has(). Kent een browser dat niet, dan valt alleen de
   kop weg en blijft de rest gewoon staan. */

.wc-block-components-notice-banner {
	align-items: flex-start !important;
	border: 1px solid var(--nfs-line);
	border-left: 4px solid var(--nfs-muted);
	border-radius: 10px;
	gap: 16px;
	margin: 0 0 24px;
	padding: 18px 20px;
	scroll-margin-top: 140px;
}

/* Het gezichtje op dezelfde maat als op onze eigen kaarten; de ruimte ernaast komt
   nu van de gap en niet meer van een eigen marge. */
.wc-block-components-notice-banner::before {
	height: 38px;
	margin-right: 0;
	margin-top: 1px;
	width: 38px;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	align-self: auto;
	color: var(--nfs-text);
	font-size: 15px;
	line-height: 1.55;
	padding-right: 0;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content::before {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 3px;
}

.wc-block-components-notice-banner:not(:has(.wc-block-components-notice-banner__summary)) > .wc-block-components-notice-banner__content::before {
	content: "Even dit";
}

.wc-block-components-notice-banner.is-error:not(:has(.wc-block-components-notice-banner__summary)) > .wc-block-components-notice-banner__content::before {
	content: "Dat lukte niet";
}

.wc-block-components-notice-banner.is-success:not(:has(.wc-block-components-notice-banner__summary)) > .wc-block-components-notice-banner__content::before {
	content: "Gelukt";
}

html[lang^="en"] .wc-block-components-notice-banner:not(:has(.wc-block-components-notice-banner__summary)) > .wc-block-components-notice-banner__content::before {
	content: "Just so you know";
}

html[lang^="en"] .wc-block-components-notice-banner.is-error:not(:has(.wc-block-components-notice-banner__summary)) > .wc-block-components-notice-banner__content::before {
	content: "That did not work";
}

html[lang^="en"] .wc-block-components-notice-banner.is-success:not(:has(.wc-block-components-notice-banner__summary)) > .wc-block-components-notice-banner__content::before {
	content: "Done";
}

/* Het kruisje om de melding weg te klikken: een rustig grijs kruisje in plaats van
   een donker blokje. Het !important moet, want dat zet WooCommerce er zelf ook op. */
.wc-block-components-notice-banner > .wc-block-components-button {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--nfs-muted) !important;
	height: 18px !important;
	margin-top: 10px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	opacity: .7;
	padding: 0 !important;
	width: 18px !important;
}

.wc-block-components-notice-banner > .wc-block-components-button svg {
	fill: currentColor;
	height: 18px;
	width: 18px;
}

.wc-block-components-notice-banner > .wc-block-components-button:hover {
	opacity: 1;
}

/* Drie standen, dezelfde drie kleuren als op onze eigen kaarten. */
.wc-block-components-notice-banner.is-error {
	background-color: #fdf4f3;
	border-color: #f0cdc8;
	border-left-color: #b3261e;
	color: #b3261e;
}

.wc-block-components-notice-banner.is-error > .wc-block-components-notice-banner__content::before,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__summary {
	color: #8f1d17;
}

.wc-block-components-notice-banner.is-success {
	background-color: #f1f8f4;
	border-color: #c7e3d4;
	border-left-color: #1f7a4d;
	color: #1f7a4d;
}

.wc-block-components-notice-banner.is-success > .wc-block-components-notice-banner__content::before,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__summary {
	color: #17603c;
}

.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
	background-color: #f2f6fb;
	border-color: #cfdcec;
	border-left-color: var(--nfs-blue);
	color: var(--nfs-blue);
}

.wc-block-components-notice-banner.is-info > .wc-block-components-notice-banner__content::before,
.wc-block-components-notice-banner.is-warning > .wc-block-components-notice-banner__content::before,
.wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__summary,
.wc-block-components-notice-banner.is-warning .wc-block-components-notice-banner__summary {
	color: var(--nfs-navy);
}

@media (max-width: 575px) {
	.wc-block-components-notice-banner {
		gap: 12px;
		padding: 15px 16px;
	}

	.wc-block-components-notice-banner::before {
		height: 30px;
		width: 30px;
	}
}

/* ---------------------------- de afrekenknop blijft in beeld ---

   Verzoek G Post, 8 september 2026: "bij besteloverzicht en de knop naar bestellen,
   die knop moet eigenlijk ook als je naar beneden scrolt altijd in beeld blijven.
   Op computer en telefoon versie."

   De winkelwagenpagina is op een volle wagen ruim 2900 pixels lang (gemeten met twee
   artikelen erin) en het venster van een telefoon is er 844. Het overzicht met het
   bedrag en de knop staat helemaal onderaan, dus wie zijn wagen nakijkt heeft de
   knop het grootste deel van de tijd niet in beeld.

   Twee schermen, twee oplossingen, want de pagina is niet hetzelfde opgebouwd:

     Op een computer staat het overzicht als kolom naast de artikelen. Die kolom
     blijft nu meelopen: hij plakt onder de balk bovenaan zodra je hem voorbij
     scrolt. Bedrag, verzending en knop staan dan altijd rechts in beeld.

     Op een telefoon staat het overzicht ónder de artikelen; meelopen kan daar niet,
     want er is niets om naast te staan. Daar wordt de knop zelf vastgezet onderaan
     het scherm. Het is de knop zelf en geen nagemaakte tweede — zo kan hij nooit iets
     anders zeggen dan wat er in de wagen ligt. */

@media (min-width: 768px) {
	/* Eerst dit, anders werkt het plakken niet. Om de hele site heen zit een vak met
	   overflow: hidden — dat staat er om te voorkomen dat iets buiten het scherm
	   uitsteekt. Maar een vak dat verticaal afknipt telt voor de browser als een eigen
	   schuifgebied, en iets wat daarin plakt, plakt aan dat gebied in plaats van aan
	   het scherm. Gemeten op 8 september 2026: de kolom stond na scrollen op y=-853,
	   dus hij schoof gewoon mee weg.
	
	   clip knipt net zo goed af maar maakt geen schuifgebied, dus het plakken werkt
	   weer. Alleen op de winkelwagenpagina, want daar is het nodig; kent een browser
	   clip niet, dan blijft hidden staan en verandert er niets.
	
	   Het thema zet die regel met een id in de selector (.off-canvas-wrapper #page),
	   dus daar moet hier tegenop geboden worden; met alleen klassen wint het niet. */
	.woocommerce-cart .off-canvas-wrapper #page {
		overflow: clip;
	}

	/* align-self is hier geen opsmuk maar noodzaak: de kolom staat in een flexrij en
	   wordt daardoor standaard net zo hoog gerekt als de lijst met artikelen. Een vak
	   dat even hoog is als alles ernaast heeft niets om langs te schuiven en blijft
	   dus gewoon staan. Met flex-start is hij zo hoog als zijn eigen inhoud.

	   93 pixels: de balk bovenaan is 77 hoog als hij vastgeplakt staat (gemeten), plus
	   16 lucht eronder. */
	.wc-block-cart .wc-block-cart__sidebar {
		align-self: flex-start;
		position: sticky;
		top: 93px;
	}
}

@media (max-width: 767.98px) {
	.woocommerce-cart .wc-block-cart .wc-block-cart__submit-container {
		background-color: #fff;
		border-top: 1px solid var(--nfs-line);
		bottom: 0;
		box-shadow: 0 -6px 20px rgba(15, 53, 87, 0.10);
		left: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		position: fixed;
		right: 0;
		z-index: 998;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart__submit-container .wc-block-cart__submit-button {
		margin: 0;
		width: 100%;
	}

	/* De knop ligt over de pagina heen, dus onderaan moet er net zoveel ruimte bij als
	   de balk hoog is. Anders valt de laatste regel van de pagina eronder weg. */
	.woocommerce-cart .wc-block-cart {
		padding-bottom: 88px;
	}

	/* En het WhatsApp-knopje stond precies op die plek. Op de winkelwagenpagina gaat
	   hij een balkhoogte omhoog, zodat hij de afrekenknop niet afdekt.
	
	   Bij een lege wagen is er geen balk en mag hij gewoon blijven staan waar hij
	   altijd staat. Die uitzondering staat apart, met :has(). Kent een browser dat
	   niet, dan blijft het knopje hoog staan — en dat is de veilige kant: hoog en
	   onnodig is niets, laag en over de afrekenknop heen wel. */
	.woocommerce-cart .nfs-wa {
		bottom: 96px;
	}

	.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .nfs-wa {
		bottom: 22px;
	}
}

/* De melding over invoerrechten staat er vanaf de server bij en wordt door het
   script in beeld gezet zodra er een land buiten de EU is gekozen. Zonder deze regel
   zou hij tot die tijd toch zichtbaar zijn: een melding in een blokkenscherm krijgt
   van WooCommerce display:flex mee, en dat wint van het hidden-kenmerk. */
.nfs-melding.nfs-invoerrechten[hidden] {
	display: none !important;
}

.nfs-invoerrechten .woocommerce-info p {
	margin: 0 0 8px;
}

.nfs-invoerrechten .woocommerce-info p:last-child {
	margin-bottom: 0;
}

/* De vraag "Koopt u particulier of zakelijk?" is verplicht, maar de twee tegels
   zagen er hetzelfde uit of je nu wel of niet gekozen had. Wie dat oversloeg kreeg
   bij Plaats bestelling alleen een klein rood regeltje "Selecteer een optie" — de
   melding hoort bij het echte keuzelijstje, en dat staat uit beeld achter de tegels.
   Gemeten op 8 september 2026: dat is wat een bestelling tegenhield zonder dat je
   zag wáár.

   Het keuzelijstje krijgt van WooCommerce aria-invalid="true" zodra het misgaat, en
   de tegels staan er als directe voorganger vóór. Daarmee kunnen ze meekleuren.
   Kent een browser :has() niet, dan blijft het bij het rode regeltje — dat stond er
   al en verdwijnt hier niet door. */
.nfs-koopkeuze:has( + .nfs-koopkeuze__origineel select[aria-invalid="true"] ) .nfs-koopkeuze__tegel {
	border-color: #b3261e !important;
}

.nfs-koopkeuze:has( + .nfs-koopkeuze__origineel select[aria-invalid="true"] ) .nfs-koopkeuze__vraag {
	color: #b3261e;
}

/* --------------------------- de foto van het pand op de contactpagina ---

   Verzoek G Post, 8 september 2026: de foto van het pand rechts van "Langskomen
   mag" met het adres eronder.

   Dit blok stond op display:block sinds de drie routekaartjes ernaast weg zijn.
   Met een foto erbij is het weer een rij van twee: de tekst met het adres en de
   openingstijden links, het pand rechts. Zonder foto — als de optie leeg is of het
   beeld verwijderd — blijft de regel hierboven staan en is het weer één kolom, dus
   er kan geen leeg vak overblijven. */
.nfs-contact-visit--foto .nfs-warehouse__inner {
	align-items: center;
	display: grid;
	gap: 44px;
	grid-template-columns: 1fr 1fr;
}

/* De tekstkolom mocht in zijn eentje 680 breed zijn; naast een foto is dat te ruim
   en zou de foto in de verdrukking komen. */
.nfs-contact-visit--foto .nfs-warehouse__body {
	max-width: none;
}

/* De foto is vier op drie en het vak is bijna twee op één, dus er gaat verticaal
   veel af. Met het midden als uitsnede valt de daklijn er bovenaan net af. Iets
   hoger aanhouden houdt het dak en de naam op de gevel er heel op; onderaan gaat er
   dan wat asfalt vanaf, en dat is niet waar iemand naar kijkt. */
.nfs-contact-visit--foto .nfs-warehouse__media img {
	object-position: center 38%;
}

@media (max-width: 767px) {
	/* Op een telefoon onder elkaar, en de foto onder de tekst: wie op zoek is naar
	   het adres wil dat eerst lezen, niet eerst een gevel zien. */
	.nfs-contact-visit--foto .nfs-warehouse__inner {
		gap: 24px;
		grid-template-columns: 1fr;
	}
}

/* ------------------- de kaart met korting liep uit de pas, en sprong ---

   Gemeld door G Post, 9 september 2026: "deze klopt niet met de rest, als je met je
   muis over het product met korting gaat dan tript de hele rij."

   Twee dingen, en ze staan los van elkaar.

   1. Uit de pas. Bij een artikel met korting staan er drie bedragen in het prijsvak
      — de nieuwe prijs, de oude doorgestreept en het bedrag inclusief btw — tegen
      twee bij een gewoon artikel. Of dat op twee of op drie regels past hangt af van
      hoe breed de kaart op dat moment is. Nagemeten in de rij Uitgelicht: bij een
      venster van 1100 en van 992 pixels breekt de kortingskaart naar drie regels
      terwijl de buurman er twee houdt, en dan staat de voorraadregel 23 pixels
      lager dan die ernaast.

      De knop stond al onderaan vastgezet. Nu wordt de voorraadregel daar samen mee
      naar beneden geduwd, zodat de onderkant van elke kaart gelijk loopt en het
      verschil bovenin opgaat in de ruimte die daar toch al zit.

   2. Het springen. Daar zaten twee oorzaken achter, allebei van het thema.

      Ten eerste laat het bij het aanwijzen van een kaart een vak verschijnen waar
      ooit de knoppen "vergelijk" en "verlanglijst" in stonden. Die knoppen zijn er
      op 4 september uitgegaan, dus wat er nu tevoorschijn komt is een leeg blokje
      van vier pixels met een streepje erboven.

      Ten tweede — en dat was de echte boosdoener — zet het thema de kaart bij het
      aanwijzen op position: absolute met width: 100%. Dat is bedoeld om de kaart
      over zijn buren heen te laten komen zodat die knoppen ruimte hebben. Zonder
      die knoppen levert het alleen maar op dat de kaart twee pixels breder wordt:
      gemeten ging het vak van 236 naar 238 pixels, en daardoor werd de foto twee
      pixels groter en schoof alles eronder mee. Dat is het tikken dat je zag.

      Beide gaan hieronder uit. De kaart blijft staan waar hij staat en houdt zijn
      maat; het oplichten van de rand en het schaduwtje bij het aanwijzen blijven
      gewoon werken. */

.product .product-loop-footer .nfs-stock {
	margin-top: auto;
}

.product .product-loop-footer .nfs-loop-view {
	margin-top: 10px;
}

.owl-item > .product.hover .hover-area,
.owl-item > .product:hover .hover-area,
.products > .product.hover .hover-area,
.products > .product:hover .hover-area {
	display: none;
}

.owl-item > .product.hover .product-inner,
.owl-item > .product:hover .product-inner,
.products > .product.hover .product-inner,
.products > .product:hover .product-inner {
	position: relative;
	width: auto;
}

/* ---------------------------------------------------- In the picture
 *
 * Specificatie G Post, 15 september 2026: de foto van het binnenvaartschip als
 * achtergrond met een licht donkerblauw filter, een strak wit podium in het
 * midden met het artikel erop, "IN THE PICTURE" prominent erboven, en verder
 * zo min mogelijk.
 *
 * Het filter doet twee dingen tegelijk. Het brengt de foto in de huisstijl —
 * hetzelfde navy als de rest van de winkel — en het maakt witte letters leesbaar
 * boven water dat zelf ook licht is. Zonder dat filter valt "IN THE PICTURE" weg
 * tegen de lucht boven de brug.
 */
.nfs-vangst {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-block: clamp(22px, 4vw, 44px);
	padding-block: clamp(46px, 7vw, 88px);
}

/* De foto zelf, iets groter dan het vlak zodat het deinen geen randen toont. */
.nfs-vangst__water {
	position: absolute;
	inset: -3% -2%;
	z-index: -2;
	background-image: var(--nfs-vangst-foto);
	background-size: cover;
	/* De foto is even breed als de band, dus horizontaal schuiven helpt nauwelijks;
	   verticaal wel. Op 44% zakt het schip tot onder de productnaam en vaart het
	   door de strook tussen de twee kolommen, in plaats van achter de letters. */
	background-position: 54% 44%;
	/* Rustig heen en weer, als een schip dat voorbijvaart. Twintig seconden en een
	   uitslag van een procent: merkbaar als je kijkt, niet als je leest. */
	animation: nfs-deining 22s ease-in-out infinite alternate;
}

@keyframes nfs-deining {
	from { transform: scale(1.02) translate3d(-0.6%, 0, 0); }
	to   { transform: scale(1.05) translate3d(0.6%, -0.8%, 0); }
}

/* Wie in zijn systeem heeft gezet dat hij geen bewegende beelden wil, krijgt ze
   ook niet. Dat is geen beleefdheid maar een toegankelijkheidsregel: bij sommige
   mensen veroorzaakt voortdurende beweging duizeligheid of misselijkheid. */
@media (prefers-reduced-motion: reduce) {
	.nfs-vangst__water {
		animation: none;
	}
}

/* Het blauwe filter. Onderin iets dieper dan bovenin, zodat de tekst onder het
   podium op het rustigste deel van de foto staat. */
.nfs-vangst::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg,
			rgba(9, 36, 60, .62) 0%,
			rgba(9, 36, 60, .70) 45%,
			rgba(12, 44, 73, .84) 100%);
}

/* Op een computer naast elkaar: het artikel links, de gegevens rechts, en daar
 * tussenin blijft het schip zichtbaar. Dat was de hele reden voor deze foto, en
 * in de gecentreerde versie viel het schip precies achter het podium weg.
 *
 * De verhouding is met opzet niet 50/50. Het podium krijgt net iets minder dan de
 * helft en de kolommen staan ruim uit elkaar, zodat het water in het midden een
 * echte strook blijft in plaats van een kier. */
.nfs-vangst__binnen {
	position: relative;
	color: #fff;
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
	gap: clamp(28px, 6vw, 96px);
	align-items: center;
}

/* --- de titel boven het product --- */

.nfs-vangst__kop {
	margin: 0 0 12px;
	font-size: clamp(.82rem, 1.4vw, 1rem);
	font-weight: 700;
	letter-spacing: .3em;
	text-indent: .3em; /* anders trekt de laatste spatiëring het woord uit het midden */
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* --- het witte podium --- */

.nfs-vangst__podium {
	position: relative;
	width: min(460px, 100%);
	margin: 0 0 0 auto;
	padding: clamp(18px, 2.6vw, 30px);
	background: #fff;
	border-radius: 4px;
	box-shadow:
		0 30px 60px -28px rgba(0, 0, 0, .55),
		0 2px 0 rgba(255, 255, 255, .5) inset;
}

.nfs-vangst__podium img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.nfs-vangst__zegel {
	position: absolute;
	top: -14px;
	right: -14px;
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--nfs-amber);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.02em;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
}

/* --- naam en prijs --- */

.nfs-vangst__naam {
	margin: 0 0 14px;
	max-width: 20ch;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

.nfs-vangst__naam a {
	color: inherit;
	text-decoration: none;
}

.nfs-vangst__naam a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nfs-vangst__prijs {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 6px;
}

.nfs-vangst__was,
.nfs-vangst__was .amount {
	font-size: 1rem;
	color: rgba(255, 255, 255, .62);
	text-decoration: line-through;
}

.nfs-vangst__nu .amount {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 700;
	color: #fff;
	letter-spacing: -.02em;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

.nfs-vangst__btw {
	font-size: .82rem;
	color: rgba(255, 255, 255, .7);
}

.nfs-vangst__tot {
	margin: 0 0 4px;
	font-size: .9rem;
	color: rgba(255, 255, 255, .78);
}

.nfs-vangst__knop {
	display: inline-block;
	margin-top: clamp(14px, 2vw, 20px);
	padding: 13px 30px;
	border-radius: 8px;
	background: var(--nfs-amber);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7);
	transition: background .15s ease;
}

.nfs-vangst__knop:hover,
.nfs-vangst__knop:focus {
	background: var(--nfs-amber-dark);
	color: #fff;
	text-decoration: none;
}

/* Onder de 992 px past het niet meer naast elkaar: dan gaat het onder elkaar en
 * weer gecentreerd, zoals het al stond. */
@media (max-width: 991px) {
	.nfs-vangst__binnen {
		grid-template-columns: 1fr;
		gap: clamp(20px, 4vw, 30px);
		text-align: center;
	}

	.nfs-vangst__podium {
		width: min(460px, 100%);
		margin-inline: auto;
	}

	.nfs-vangst__naam {
		margin-inline: auto;
		max-width: 22ch;
	}

	.nfs-vangst__prijs {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.nfs-vangst {
		padding-block: 40px;
	}

	.nfs-vangst__podium {
		width: min(340px, 100%);
	}

	.nfs-vangst__zegel {
		width: 54px;
		height: 54px;
		font-size: .92rem;
		top: -10px;
		right: -10px;
	}
}