/* ==========================================================================
   Konvox — Assortiment (PIM) styling. Losse stylesheet, ingeladen door
   Views/assortmentPage.cshtml en het homeCategorieenBlock. Konvox-huisstijl:
   M PLUS 2, paars #272146, oranje CTA #F48120, themagrijs #F2F2F2, radius 8px.
   Klassen konvox-categorieen__* / konvox-producten__* / konvox-detail__*.
   ========================================================================== */

:root {
	--gva-primary: #272146;        /* Konvox paars — koppen, titels, actieve staat */
	--gva-accent: #F48120;         /* Konvox oranje — accenten, scheidingstekens */
	--gva-orange: #F48120;         /* CTA */
	--gva-orange-hover: #d96f14;
	--gva-card-bg: #FFFFFF;
	--gva-image-bg: #F2F2F2;       /* gelijk aan het themagrijs */
	--gva-title: #272146;
	--gva-muted: #6b7280;
	--gva-radius: 8px;
	--gva-font: 'M PLUS 2', sans-serif;
	--gva-space-section: 56px;     /* ruimte boven de contentsectie én tussen de blokken op het productdetail */
	--gva-space-section-bottom: 72px; /* ruimte onder de contentsectie, tot de footer */
}

/* ---------- CodeBase full-width band-fix ----------
   Een column met fullWidth + backgroundColor rendert <div class="wrapper full-width grey">.
   De core-kleurregels daarvoor (.wrapper.grey => var(--lightGrey)) zitten in een bundle die
   deze site niet laadt, en --lightGrey bestaat niet in het Konvox-thema: de band bleef wit.
   Hier hersteld met een concrete kleur (gelijk aan .background-grey van het thema).
   De curved "divider"-SVG's die CodeBase in zo'n band tekent horen niet bij de Konvox-
   huisstijl en worden verborgen. */
.wrapper.padding-top-enkel {padding-top: 16px !important;}
.wrapper.padding-top-dubbel {padding-top: 56px !important;}
.wrapper.padding-top-drievoudig {padding-top: 96px !important;}

.wrapper.padding-bottom-enkel {padding-bottom: 40px !important;}
.wrapper.padding-bottom-dubbel {padding-bottom: 80px !important;}
.wrapper.padding-bottom-drievoudig {padding-bottom: 120px !important;}

.wrapper.padding-bottom-enkel:last-of-type,
.wrapper.padding-bottom-enkel:only-of-type {
	padding-bottom: 67px !important;
}
.wrapper.padding-bottom-dubbel:last-of-type,
.wrapper.padding-bottom-dubbel:only-of-type {
	padding-bottom: 107px !important;
}
.wrapper.padding-bottom-drievoudig:last-of-type,
.wrapper.padding-bottom-drievoudig:only-of-type {
	padding-bottom: 147px !important;
}

.wrapper.grey { background-color: #F2F2F2; }
.wrapper.full-width .divider { display: none; }
/* De core-regels die .wrapper.full-width uit z'n max-width laten breken worden hier evenmin
   geladen, waardoor de band bleef steken op de theme-breedte i.p.v. schermvullend.
   Band zelf edge-to-edge; .inner-wrapper houdt de inhoud op de normale contentbreedte. */
.wrapper.full-width { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
/* 1640px = Konvox' eigen .wrapper-breedte, zodat de inhoud van de band exact uitlijnt met de
   andere secties. Kleine zijmarge zodat het op smalle schermen niet tegen de rand plakt. */
.wrapper.full-width > .inner-wrapper { width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

@keyframes konvox-shimmer {
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

/* Geen blauwe paginakop-balk meer: alle assortimentspagina's (ook het productdetail) tonen de h1
   in de grijze intro-band (.konvox-intro-band), onder het kruimelpad. */

/* ---------- Assortiment-kop (breadcrumb + titel + subtitel) ---------- */
.konvox-assortiment-kop { margin-bottom: 32px; }
.konvox-assortiment-breadcrumb { font-family: var(--gva-font); font-size: 12px; color: var(--gva-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
.konvox-assortiment-breadcrumb a { color: var(--gva-muted); text-decoration: none; }
.konvox-assortiment-breadcrumb a:hover { color: var(--gva-primary); }
.konvox-assortiment-breadcrumb .sep { margin: 0 6px; color: var(--gva-accent); }
.konvox-assortiment-breadcrumb .current { color: var(--gva-primary); font-weight: 700; }
.konvox-assortiment-kop h1 { font-family: var(--gva-font); font-size: 30px; line-height: 40px; font-weight: 900; text-transform: uppercase; color: var(--gva-title); margin: 0; padding: 0; }
.konvox-assortiment-sub { margin: 6px 0 0 0; font-family: var(--gva-font); font-size: 14px; color: var(--gva-muted); }

/* ==========================================================================
   Categorie-kaarten (Merk + Groep block)
   ========================================================================== */
.konvox-categorieen__titel,
section.konvox-assortiment-body .konvox-categorieen > h2, /* specifieker dan body.page h2 (thema-padding 24px) */
.konvox-categorieen .heading-3 {
	margin: 0 0 24px 0;
	padding: 0;
	font-family: var(--gva-font);
	font-size: 22px;
	line-height: 32px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--gva-title);
}

/* categorie-/merk-beschrijving (intro-tekst) */
.konvox-assortiment-intro {
	max-width: 820px;
	margin: 0 0 32px 0;
	font-family: var(--gva-font);
	font-size: 15px;
	line-height: 25px;
	color: #333;
	white-space: pre-line;
}

/* grijze, scherm-aflopende band met breadcrumb + intro (onder de groene header) */
/* ---------- Verticale ritmiek ----------
   Het thema zet `section { padding: 96px 0 128px }`; dat is te ruim boven de zoekbalk/kaarten en onder
   de content. Vaste maten voor alle assortimentspagina's: band 32/32, body --gva-space-section boven /
   --gva-space-section-bottom onder, en dezelfde --gva-space-section tussen de blokken op het productdetail. */
section.konvox-assortiment-body { padding: var(--gva-space-section) 0 var(--gva-space-section-bottom); }
@media (max-width: 575px) { .konvox-assortiment-body, .konvox-detail { --gva-space-section: 40px; --gva-space-section-bottom: 48px; } }

.konvox-intro-band { padding-top: 32px; padding-bottom: 32px; background-color: var(--gva-image-bg); }
@media (max-width: 575px) { .konvox-intro-band { padding-top: 24px; padding-bottom: 24px; } }
.konvox-intro-band__inner { padding: 0; }
.konvox-intro-band .konvox-assortiment-breadcrumb { margin: 0; }
/* h1 in de band, onder het kruimelpad (alle assortimentspagina's, incl. productdetail).
   Specificiteit bewust hoog (section + 2 classes + element): het thema zet body.page h1 op 30px paars. */
section.konvox-intro-band .konvox-intro-band__inner h1.konvox-assortiment-titel {
	margin: 12px 0 0 0;
	padding: 0;
	font-family: var(--gva-font);
	font-size: 34px;
	line-height: 42px;
	font-weight: 900;
	color: var(--gva-primary);
}
@media (max-width: 768px) { section.konvox-intro-band .konvox-intro-band__inner h1.konvox-assortiment-titel { font-size: 26px; line-height: 34px; } }
/* artikelnummer (PageHeader.Subtitle) direct onder de h1 op een productdetail */
.konvox-intro-band .konvox-intro-sub {
	margin: 6px 0 0 0;
	padding: 0;
	font-family: var(--gva-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--gva-muted);
}
.konvox-intro-band .konvox-assortiment-intro { margin: 14px 0 0 0; }

.konvox-categorieen__grid {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 991px) { .konvox-categorieen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .konvox-categorieen__grid { grid-template-columns: 100%; } }

.konvox-categorieen__kaart {
	display: block;
	color: var(--gva-title);
	text-decoration: none;
	border-radius: var(--gva-radius);
	overflow: hidden;
	background: var(--gva-card-bg);
	box-shadow: 0 1px 3px rgba(39, 33, 70, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.konvox-categorieen__kaart:hover {
	color: var(--gva-title);
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(39, 33, 70, 0.14);
	transform: translateY(-2px);
}

.konvox-categorieen__foto {
	height: 220px;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background-color: var(--gva-image-bg);
}

.konvox-categorieen__foto img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.konvox-categorieen__foto.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
	animation: konvox-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) { .konvox-categorieen__foto.is-loading::after { animation: none; } }

.konvox-categorieen__pijl {
	width: 40px;
	height: 40px;
	right: 12px;
	bottom: 12px;
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gva-orange);
	border-radius: var(--gva-radius);
	color: #ffffff;
	transition: background-color 0.2s ease;
}

.konvox-categorieen__kaart:hover .konvox-categorieen__pijl {
	background: var(--gva-primary);
	color: #ffffff;
}

.konvox-categorieen__naam {
	display: block;
	padding: 18px 20px;
	font-family: var(--gva-font);
	font-size: 15px;
	line-height: 20px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--gva-title);
}

/* ==========================================================================
   Productoverzicht (Product block)
   ========================================================================== */
.konvox-producten { margin-top: 0; }

.konvox-producten__balk {
	margin: 0 0 24px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.konvox-producten__zoek { position: relative; flex: 0 1 360px; max-width: 100%; }

.konvox-producten .konvox-producten__zoek-input {
	width: 100%;
	margin: 0;
	padding: 12px 16px 12px 44px;
	background-color: var(--gva-card-bg);
	border: 1px solid #e2e2e6;
	border-radius: var(--gva-radius);
	font-family: var(--gva-font);
	font-size: 14px;
	line-height: 18px;
	color: var(--gva-title);
	box-sizing: border-box;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10zm4.5-.8l3 3' stroke='%23093810' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: left 16px center;
	transition: border-color 0.2s ease;
}

.konvox-producten .konvox-producten__zoek-input:focus { outline: none; border-color: var(--gva-accent); }
.konvox-producten__zoek-input::placeholder { color: var(--gva-muted); }

.konvox-producten__leeg { margin: 8px 0 0 0; padding: 24px 0; font-family: var(--gva-font); font-size: 16px; color: var(--gva-muted); }

@media (max-width: 575px) {
	.konvox-producten__zoek { flex-basis: 100%; }
	.konvox-producten__sorteer { flex: 1 1 auto; }
	.konvox-producten__sorteer-select { width: 100%; }
}

.konvox-producten__sorteer-select {
	margin: 0;
	padding: 12px 44px 12px 16px;
	background-color: var(--gva-card-bg);
	border: 1px solid #e2e2e6;
	border-radius: var(--gva-radius);
	font-family: var(--gva-font);
	font-size: 14px;
	line-height: 18px;
	color: var(--gva-title);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3e%3cpath d='M1 1l6 6 6-6' stroke='%23093810' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.konvox-producten__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 991px) { .konvox-producten__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .konvox-producten__grid { grid-template-columns: 100%; } }

.konvox-producten__kaart.is-hidden { display: none; }

.konvox-producten__kaart {
	display: flex;
	gap: 16px;
	padding: 8px;
	background-color: var(--gva-card-bg);
	border-radius: var(--gva-radius);
	box-shadow: 0 1px 3px rgba(39, 33, 70, 0.08);
	color: var(--gva-title);
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.konvox-producten__kaart:hover { color: var(--gva-title); text-decoration: none; box-shadow: 0 6px 16px rgba(39, 33, 70, 0.14); }

.konvox-producten__foto {
	width: 138px;
	flex: 0 0 138px;
	align-self: stretch;
	min-height: 138px;
	padding: 6px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
	background-color: var(--gva-image-bg);
	border-radius: calc(var(--gva-radius) - 2px);
}

.konvox-producten__foto img { width: 100%; object-fit: contain; display: block; }

.konvox-producten__foto.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
	animation: konvox-shimmer 1.4s ease-in-out infinite;
}

.konvox-producten__pijl {
	width: 32px;
	height: 32px;
	/*
	left: 8px;
	bottom: 8px;
	*/
	position: relative /*absolute*/;
	z-index: 1;
	display: flex;
	align-items: center;
	align-self: end;
	justify-content: center;
	background: var(--gva-orange);
	border-radius: calc(var(--gva-radius) - 2px);
	color: #ffffff;
	transition: background-color 0.2s ease;
}

.konvox-producten__kaart:hover .konvox-producten__pijl { background: var(--gva-primary); }

.konvox-producten__info { flex: 1 1 auto; min-width: 0; padding: 16px 16px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.konvox-producten__kop { display: flex; flex-direction: column; gap: 4px; }
.konvox-producten__titel { font-family: var(--gva-font); font-size: 15px; line-height: 20px; font-weight: 700; color: var(--gva-title); }
.konvox-producten__artnr { font-family: var(--gva-font); font-size: 12px; line-height: 14px; color: var(--gva-muted); }

.konvox-producten__meer { margin-top: 40px; display: flex; justify-content: center; }

.konvox-producten .konvox-producten__meer-knop {
	margin: 0 auto;
	padding: 14px 32px;
	display: inline-block;
	background-color: var(--gva-orange) !important;
	border: 0;
	border-radius: var(--gva-radius);
	font-family: var(--gva-font);
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.konvox-producten .konvox-producten__meer-knop:hover { background-color: var(--gva-primary) !important; }

/* ==========================================================================
   Productdetail (Variant block)
   ========================================================================== */
.konvox-detail { font-family: var(--gva-font); color: var(--gva-title); }

/* ---------- Hero ---------- */
.konvox-detail__hero { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 48px; align-items: stretch; }
@media (max-width: 1199px) { .konvox-detail__hero { grid-template-columns: 100%; gap: 24px; } }

.konvox-detail__media { display: flex; flex-direction: column; max-width: 460px; padding: 20px; border-radius: var(--gva-radius); background-color: var(--gva-image-bg); }
.konvox-detail__hoofdfoto { position: relative; aspect-ratio: 1 / 1; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; }
.konvox-detail__hoofdfoto img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; opacity: 1; transition: opacity 0.15s ease; }
.konvox-detail__hoofdfoto.is-loading img { opacity: 0; }
.konvox-detail__hoofdfoto.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.6) 50%, transparent 75%); animation: konvox-shimmer 1.4s ease-in-out infinite; }
.konvox-detail__hoofdfoto-zoom { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }

.konvox-detail__thumbs { margin-top: auto; padding-top: 16px; display: grid; grid-template-columns: repeat(5, 1fr); flex-wrap: wrap; gap: 10px; }
.konvox-detail .konvox-detail__thumb { width: 100%; height: auto; margin: 0; padding: 10px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: #ffffff !important; border: 2px solid transparent; border-radius: calc(var(--gva-radius) - 2px); cursor: pointer; transition: border-color 0.2s ease; }
.konvox-detail .konvox-detail__thumb.is-active { border-color: var(--gva-orange); }
.konvox-detail__thumb img { /*max-width: 100%; max-height: 100%;*/ width: 100%; height: auto; object-fit: contain; display: block; }

.konvox-detail__artnr { margin: 0 0 16px 0; font-size: 12px; line-height: 14px; color: var(--gva-muted); }
.konvox-detail__kop { margin: 0 0 13px 0; font-size: 18px; line-height: 24px; font-weight: 900; text-transform: uppercase; color: var(--gva-title); }

.konvox-detail__kenmerken { margin: 0 0 40px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 479px) { .konvox-detail__kenmerken { grid-template-columns: 100%; } }
.konvox-detail__kenmerk { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; background-color: var(--gva-image-bg); border-radius: calc(var(--gva-radius) - 2px); }
.konvox-detail__kenmerk-label { margin: 0; font-size: 13px; line-height: 20px; color: var(--gva-muted); }
.konvox-detail__kenmerk-waarde { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--gva-title); }

.konvox-detail__toepassingen { margin: 0 0 40px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 575px) { .konvox-detail__toepassingen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.konvox-detail__toepassing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; aspect-ratio: 1 / 1; background-color: var(--gva-image-bg); border-radius: calc(var(--gva-radius) - 2px); color: #b7b4c0; text-align: center; }
.konvox-detail__toepassing.is-actief { background-color: var(--gva-accent); color: var(--gva-primary); }
.konvox-detail__toepassing-icoon { width: 64px; height: 64px; object-fit: contain; display: block; }
.konvox-detail__toepassing:not(.is-actief) .konvox-detail__toepassing-icoon { opacity: 0.35; }
.konvox-detail__toepassing-label { font-size: 12px; line-height: 14px; font-weight: 700; text-transform: uppercase; }

.konvox-detail__acties { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 40px 0; }
.konvox-detail__knop { display: inline-block; padding: 14px 32px; border-radius: var(--gva-radius); font-size: 15px; line-height: 20px; font-weight: 700; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.konvox-detail__knop--primair { background-color: var(--gva-orange); color: #ffffff; }
.konvox-detail__knop--primair:hover { background-color: var(--gva-primary); color: #ffffff; text-decoration: none; }
.konvox-detail__knop--secundair { background-color: #ffffff; border: 1px solid var(--gva-primary); color: var(--gva-primary); }
.konvox-detail__knop--secundair:hover { background-color: var(--gva-primary); color: #ffffff; text-decoration: none; }

.konvox-detail__features { margin: 0 0 8px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 575px) { .konvox-detail__features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.konvox-detail__feature.is-hidden { display: none; }
.konvox-detail__feature, .konvox-detail .konvox-detail__feature--meer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 16px 8px; min-height: 72px; box-sizing: border-box; background-color: var(--gva-image-bg) !important; border: 0; border-radius: calc(var(--gva-radius) - 2px); color: var(--gva-title); text-align: center; cursor: default; }
.konvox-detail .konvox-detail__feature--meer { cursor: pointer; }
.konvox-detail__feature-icon { width: 24px; height: 24px; object-fit: contain; display: block; }
.konvox-detail__feature-label { font-size: 12px; line-height: 14px; color: var(--gva-title); }

/* ---------- Intro + USP's (in de rechterkolom van de hero, boven de Verkooppunten-knop) ---------- */
.konvox-detail__intro-blok { margin: 0 0 40px 0; display: flex; flex-direction: column; gap: 24px; }
.konvox-detail__intro { font-size: 15px; line-height: 24px; color: #333; }
.konvox-detail__intro p { margin: 0 0 16px 0; }
.konvox-detail__intro p:first-child { margin-top: 0; }
.konvox-detail__intro p:last-child { margin-bottom: 0; }

.konvox-detail__usps { margin: 0; padding: 0; list-style: none; }
.konvox-detail__usp { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 6px 0; font-size: 15px; line-height: 24px; color: var(--gva-title); }
.konvox-detail .konvox-detail__usp { margin-left: 0; }
.konvox-detail__usp:first-child { padding-top: 0; }
.konvox-detail__usp-vink { flex: 0 0 auto; margin-top: 4px; color: var(--gva-accent); line-height: 0; }
.konvox-detail__usps--donker .konvox-detail__usp { color: #ffffff; }

/* ---------- Eigenschappen en verwerking (groene band) ---------- */
.konvox-detail__verwerking { margin-top: var(--gva-space-section); padding: 48px; border-radius: var(--gva-radius); background: var(--gva-primary); color: #ffffff; }
@media (max-width: 575px) { .konvox-detail__verwerking { padding: 32px 24px; } }
.konvox-detail__verwerking-kop { margin: 0 0 24px 0; font-size: 24px; line-height: 32px; font-weight: 900; text-transform: uppercase; color: var(--gva-accent); }
.konvox-detail__verwerking-body { display: block; }
.konvox-detail__verwerking-kolom { max-width: 520px; }
.konvox-detail__verwerking-specs { margin: 0 0 24px 0; }
.konvox-detail__verwerking-spec { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 24px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
@media (max-width: 479px) { .konvox-detail__verwerking-spec { grid-template-columns: 1fr; gap: 2px; } }
.konvox-detail__verwerking-spec dt { margin: 0; font-size: 15px; line-height: 24px; font-weight: 700; color: #ffffff; }
.konvox-detail__verwerking-spec dd { margin: 0; font-size: 15px; line-height: 24px; color: #ffffff; }
.konvox-detail__downloads { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 991px) { .konvox-detail__downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .konvox-detail__downloads { grid-template-columns: 100%; } }
.konvox-detail__download { display: flex; align-items: center; gap: 16px; padding: 16px; background-color: rgba(255,255,255,0.08); border-radius: calc(var(--gva-radius) - 2px); text-decoration: none; transition: background-color 0.2s ease; }
.konvox-detail__download:hover { background-color: rgba(255,255,255,0.16); text-decoration: none; }
.konvox-detail__download-icoon { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.2); border-radius: calc(var(--gva-radius) - 2px); color: #ffffff; font-size: 20px; }
.konvox-detail__download-naam { font-size: 15px; line-height: 20px; color: #ffffff; }

/* ---------- Sectiekop + Varianten ---------- */
.konvox-detail__sectiekop { margin: 0 0 24px 0; font-size: 24px; line-height: 32px; font-weight: 900; text-transform: uppercase; color: var(--gva-title); }
/* section: thema-padding (96/128px) uitzetten, anders gapen er enorme gaten tussen de blokken */
section.konvox-detail__varianten { margin-top: var(--gva-space-section); padding: 0; }
.konvox-detail__varianten-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 991px) { .konvox-detail__varianten-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .konvox-detail__varianten-grid { grid-template-columns: 100%; } }
.konvox-detail__variant.is-hidden { display: none; }
.konvox-detail__variant { display: flex; gap: 16px; padding: 8px; background-color: var(--gva-card-bg); border-radius: var(--gva-radius); box-shadow: 0 1px 3px rgba(39,33,70,0.08); color: var(--gva-title); text-decoration: none; }
.konvox-detail__variant:hover { color: var(--gva-title); text-decoration: none; box-shadow: 0 6px 16px rgba(39,33,70,0.14); }
.konvox-detail__variant-foto { position: relative; width: 110px; flex: 0 0 110px; align-self: stretch; min-height: 110px; padding: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; background-color: var(--gva-image-bg); border-radius: calc(var(--gva-radius) - 2px); }
.konvox-detail__variant-foto img { width: 100%; object-fit: contain; display: block; }
.konvox-detail__variant-pijl { margin-top: auto; position: relative; left: 8px; bottom: 8px; width: 28px; height: 28px; z-index: 1; display: flex; align-self: end; align-items: center; justify-content: center; background: var(--gva-orange); border-radius: calc(var(--gva-radius) - 3px); color: #ffffff; transition: background-color 0.2s ease; }
.konvox-detail__variant:hover .konvox-detail__variant-pijl { background: var(--gva-primary); }
.konvox-detail__variant-info { flex: 1 1 auto; min-width: 0; padding: 12px 12px 12px 4px; display: flex; flex-direction: column; gap: 6px; position: relative;}
.konvox-detail__variant-titel { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--gva-title); }
.konvox-detail__variant-artnr { font-size: 12px; line-height: 14px; color: var(--gva-muted); }
.konvox-detail__variant-specs { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; line-height: 14px; color: var(--gva-title); }
.konvox-detail__variant-specs em { font-style: normal; text-decoration: underline; }
.konvox-detail__meer { margin-top: 32px; display: flex; justify-content: center; }
.konvox-detail .konvox-detail__meer-knop { margin: 0 auto; padding: 14px 32px; display: inline-block; background-color: var(--gva-orange) !important; border: 0; border-radius: var(--gva-radius); font-family: var(--gva-font); font-size: 15px; line-height: 20px; font-weight: 700; text-transform: uppercase; color: #ffffff; cursor: pointer; transition: background-color 0.2s ease; }
.konvox-detail .konvox-detail__meer-knop:hover { background-color: var(--gva-primary) !important; }

/* ---------- Gerelateerde producten (hergebruikt de categorie-tegel-CSS hierboven) ---------- */
/* Zelfde kop-naar-grid ruimte als de variantensectie (categorie-grid heeft eigen margin-top). */
.konvox-detail__gerelateerd .konvox-categorieen__grid { margin-top: 0; }

/* Kolom-flex zodat het titelblok de resthoogte vult: anders eindigen de omrande boxen op
   verschillende hoogtes zodra één titel over twee regels loopt. Alleen hier — het categorie-
   overzicht deelt de kaart-class en houdt zijn eigen opmaak. */
.konvox-detail__gerelateerd .konvox-categorieen__kaart { display: flex; flex-direction: column; }

.konvox-detail__gerelateerd-info { display: block; padding: 18px 20px 16px 20px; }
.konvox-detail__gerelateerd-titel { display: block; font-family: var(--gva-font); font-size: 15px; line-height: 20px; font-weight: 900; text-transform: uppercase; color: var(--gva-title); }
.konvox-detail__gerelateerd-artnr { display: block; margin-top: 4px; font-family: var(--gva-font); font-size: 12px; line-height: 14px; color: var(--gva-muted); }

/* === highslide.css === */
/**
* @file: highslide.css 
* @version: 5.0.0
*/
.highslide-container div {
	font-family: Verdana, Helvetica;
	font-size: 10pt;
}
.highslide-container table {
	background: none;
	table-layout: auto;
}
.highslide {
	outline: none;
	text-decoration: none;
}

.highslide:hover img {
	border-color: gray;
}
.highslide-active-anchor img {
	visibility: hidden;
}
.highslide-gallery .highslide-active-anchor img {
	border-color: black;
	visibility: visible;
	cursor: default;
}
.highslide-image {
	border-width: 2px;
	border-style: solid;
	border-color: white;
}
.highslide-wrapper, .highslide-outline {
	background: white;
}
.glossy-dark {
	background: #111;
}

.highslide-image-blur {
}
.highslide-number {
	font-weight: bold;
	color: gray;
	font-size: .9em;
}
.highslide-caption {
	display: none;
	font-size: 1em;
	padding: 5px;
	/*background: white;*/
}
.highslide-heading {
	display: none;
	font-weight: bold;
	margin: 0.4em;
}
.highslide-dimming {
	/*position: absolute;*/
	background: black;
}
a.highslide-full-expand {
   background: url(/_Codebase/_Themes/Konvox/Images/Highslide/graphics/fullexpand.gif) no-repeat;
   display: block;
   margin: 0 10px 10px 0;
   width: 34px;
   height: 34px;
}
.highslide-loading {
	display: block;
	color: black;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	padding: 3px;
	border: 1px solid white;
	background-color: white;
	padding-left: 22px;
	background-image: url(/_Codebase/_Themes/Konvox/Images/Highslide/graphics/loader.white.gif);
	background-repeat: no-repeat;
	background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
	padding: 2px;
	color: silver;
	text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
	color: white;
	background-color: gray;
}
.highslide-move, .highslide-move * {
	cursor: move;
}

.highslide-viewport {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: none;
	left: 0;
	top: 0;
}
.highslide-overlay {
	display: none;
}
.hidden-container {
	display: none;
}
/* Example of a semitransparent, offset closebutton */
.closebutton {
	position: relative;
	top: -15px;
	left: 15px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background: url(/_Codebase/_Themes/Konvox/Images/Highslide/graphics/close.png);
	/* NOTE! For IE6, you also need to update the highslide-ie6.css file. */
}

/*****************************************************************************/
/* Thumbnail boxes for the galleries.                                        */
/* Remove these if you are not using a gallery.                              */
/*****************************************************************************/
.highslide-gallery ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.highslide-gallery ul li {
	display: block;
	position: relative;
	float: left;
	width: 106px;
	height: 106px;
	border: 1px solid silver;
	background: #ededed;
	margin: 2px;
	padding: 0;
	line-height: 0;
	overflow: hidden;
}
.highslide-gallery ul a {
	position: absolute;
	top: 50%;
	left: 50%;
}
.highslide-gallery ul img {
 	position: relative;
	top: -50%;
	left: -50%;
}
html>/**/body .highslide-gallery ul li {
	display: table;
	text-align: center;
}
html>/**/body .highslide-gallery ul li {
	text-align: center;
}
html>/**/body .highslide-gallery ul a {
	position: static;
	display: table-cell;
	vertical-align: middle;
}
html>/**/body .highslide-gallery ul img {
	position: static;
}

/*****************************************************************************/
/* Controls for the galleries.											     */
/* Remove these if you are not using a gallery							     */
/*****************************************************************************/
.highslide-controls {
	width: 195px;
	height: 40px;
	background: url(/_Codebase/_Themes/Konvox/Images/Highslide/graphics/controlbar-white.gif) 0 -90px no-repeat;
	margin: 20px 15px 10px 0;
}
	.highslide-controls ul {
		position: relative;
		left: 15px;
		height: 40px;
		list-style: none;
		margin: 0;
		padding: 0;
		background: url(/_Codebase/_Themes/Konvox/Images/Highslide/graphics/controlbar-white.gif) right -90px no-repeat;
	}
.highslide-controls li {
	float: left;
	padding: 5px 0;
	margin:0;
	list-style: none;
}
	.highslide-controls a {
		background-image: url(/_Codebase/_Themes/Konvox/Images/Highslide/graphics/controlbar-white.gif);
		display: block;
		float: left;
		height: 30px;
		width: 30px;
		outline: none;
	}
.highslide-controls a.disabled {
	cursor: default;
}
.highslide-controls a.disabled span {
	cursor: default;
}
.highslide-controls a span {
	/* hide the text for these graphic buttons */
	display: none;
	cursor: pointer;
}


/* The CSS sprites for the controlbar - see http://www.google.com/search?q=css+sprites */
.highslide-controls .highslide-previous a {
	background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
	background-position: 0 -30px;
}
.highslide-controls .highslide-previous a.disabled {
	background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
	background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
	background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
	background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
	background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
	background-position: -60px -30px;
}
.highslide-controls .highslide-next a {
	background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
	background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
	background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
	background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
	background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
	background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
	background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
	background-position: -150px -60px !important;
}
.highslide-controls .highslide-close a {
	background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
	background-position: -180px -30px;
}

#CybotCookiebotDialogBodyButtonsWrapper button {
	height: unset !important;
}