/* Feedback ronde 12 november 2026 (Sem Smulders).
   Categoriepagina: banner, hover op de productfoto en de winkelwagenknop. */

/* ---------- Banner bovenaan de categoriepagina ---------- */

.desq-cat-banner {
	position: relative;
	margin: 0 0 28px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--desq-product-bg, #eceff2);
}

.desq-cat-banner__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.desq-cat-banner.has-overlay .desq-cat-banner__image {
	min-height: 180px;
}

.desq-cat-banner__inner {
	padding: 28px 32px;
}

.desq-cat-banner.has-overlay .desq-cat-banner__image + .desq-cat-banner__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--desq-white, #fff);
	background: linear-gradient(90deg, rgba(28, 55, 85, 0.78) 0%, rgba(28, 55, 85, 0.35) 55%, rgba(28, 55, 85, 0) 100%);
}

.desq-cat-banner__title {
	margin: 0 0 8px;
	font-size: clamp(22px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1.15;
}

.desq-cat-banner__text {
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.5;
}

.desq-cat-banner__button {
	align-self: flex-start;
	margin-top: 16px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--desq-orange, #eb5c34);
	color: var(--desq-white, #fff);
	font-weight: 600;
	text-decoration: none;
}

.desq-cat-banner__button:hover,
.desq-cat-banner__button:focus-visible {
	filter: brightness(0.94);
	color: var(--desq-white, #fff);
}

@media (max-width: 640px) {
	.desq-cat-banner.has-overlay .desq-cat-banner__image + .desq-cat-banner__inner {
		position: static;
		background: var(--desq-navy, #1c3755);
	}

	.desq-cat-banner__inner {
		padding: 20px;
	}
}

/* ---------- Productfoto vergroot bij hover ---------- */

.desq-grid-product__thumb {
	overflow: hidden;
}

.desq-grid-product__thumb .desq-grid-product__image {
	transition: transform 0.35s ease;
	will-change: transform;
}

.desq-grid-product__link:hover .desq-grid-product__image,
.desq-grid-product__link:focus-visible .desq-grid-product__image {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.desq-grid-product__thumb .desq-grid-product__image {
		transition: none;
	}

	.desq-grid-product__link:hover .desq-grid-product__image {
		transform: none;
	}
}

/* ---------- Knop onder de productkaart ---------- */

.desq-card-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 12px;
	padding: 11px 14px;
	border: 0;
	border-radius: 7px;
	background: var(--desq-navy, #1c3755);
	color: var(--desq-white, #fff);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.desq-card-cart:hover,
.desq-card-cart:focus-visible {
	background: #16293f;
	color: var(--desq-white, #fff);
}

.desq-card-cart__svg {
	flex: none;
	display: block;
}

/* Bezig met toevoegen */
.desq-card-cart.is-busy {
	opacity: 0.75;
	pointer-events: none;
}

/* Toegevoegd: groen met vinkje */
.desq-card-cart.is-added,
.desq-card-cart.is-added:hover,
.desq-card-cart.is-added:focus-visible {
	background: #159a46;
	color: var(--desq-white, #fff);
}

/* Woo voegt bij een gelukte toevoeging zelf een "Bekijk winkelwagen"-link toe;
   die willen we niet onder elke kaart. */
.desq-grid-product .added_to_cart {
	display: none !important;
}


/* ---------- Fade over de categorie-afbeeldingen (instelbaar) ---------- */

/* Een vlakke waas over de hele foto, geen verloop. Kleur en dekking komen
   uit Globale instellingen. */
.desq-home-categories__overlay {
	background: rgba(var(--desq-fade-rgb, 0, 0, 0), var(--desq-fade-opacity, 0.3));
}


/* ---------- "Bekijk het product" bij hover over de foto ---------- */

@media (hover: hover) {
	.desq-grid-product__thumb::after {
		content: var(--desq-view-label, "Bekijk het product");
		position: absolute;
		left: 50%;
		bottom: 14px;
		transform: translate(-50%, 10px);
		padding: 9px 18px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
		color: var(--desq-navy, #1c3755);
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.desq-grid-product__link:hover .desq-grid-product__thumb::after,
	.desq-grid-product__link:focus-visible .desq-grid-product__thumb::after {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.desq-grid-product__thumb::after {
		transition: none;
	}
}


/* ---------- Productpagina: specificaties en documentlinks ---------- */

.desq-pdp__specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.desq-pdp__specs th,
.desq-pdp__specs td {
	padding: 7px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(28, 55, 85, 0.12);
}

.desq-pdp__specs th {
	width: 42%;
	padding-right: 16px;
	font-weight: 600;
	color: var(--desq-navy, #1c3755);
}

.desq-pdp__specs tr:last-child th,
.desq-pdp__specs tr:last-child td {
	border-bottom: 0;
}

.desq-pdp__doclink {
	margin: 10px 0 0;
}

.desq-pdp__doclink a {
	color: var(--desq-navy, #1c3755);
	font-weight: 600;
	text-decoration: underline;
}

.desq-pdp__doclink a:hover,
.desq-pdp__doclink a:focus-visible {
	color: var(--desq-orange, #eb5c34);
}

/* ---------- Categoriekaarten: hele foto tonen, dun grijs lijntje ---------- */

.desq-home-categories__card {
	border: 1px solid #d9dee4;
	background: var(--desq-white, #fff);
}

.desq-home-categories__card:hover,
.desq-home-categories__card:focus-visible {
	border-color: #c3cad3;
}

/* Niet bijsnijden: de foto past in zijn geheel in de kaart en staat gecentreerd. */
.desq-home-categories__image {
	object-fit: contain;
	object-position: center;
	padding: 18px 18px 64px;
}

.desq-home-categories__image--placeholder {
	object-fit: cover;
	padding: 0;
}


/* ---------- Header: titels over de volledige breedte ---------- */

.desq-header__inner .desq-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.desq-nav__list {
	display: flex;
	align-items: center;
	/* 2026-11-12: gecentreerd in de header in plaats van uitgerekt. */
	justify-content: center;
	width: auto;
	gap: clamp(18px, 2.4vw, 46px);
}

/* Het scheidingsstreepje tussen de koppen hoeft niet meer als de titels
   over de volledige breedte staan. */
.desq-nav__separator {
	display: none;
}

/* ---------- Header: dropdown met subcategorieen ---------- */

.desq-nav__item--has-dropdown {
	position: relative;
}

.desq-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 60;
	min-width: 220px;
	padding: 10px 0;
	transform: translate(-50%, 6px);
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	background: var(--desq-white, #fff);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.desq-nav__item--has-dropdown:hover > .desq-nav__dropdown,
.desq-nav__item--has-dropdown:focus-within > .desq-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Onzichtbare brug, zodat de muis van de kop naar de lijst kan zonder gat. */
.desq-nav__item--has-dropdown > .desq-nav__dropdown::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}

.desq-nav__dropdown-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.desq-nav__dropdown-item a {
	display: block;
	padding: 8px 20px;
	color: var(--desq-gray, #333);
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.desq-nav__dropdown-item a:hover,
.desq-nav__dropdown-item a:focus-visible {
	background: #f4f6f8;
	color: var(--desq-navy, #1c3755);
}

@media (max-width: 1024px) {
	.desq-nav__dropdown {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.desq-nav__dropdown {
		transition: none;
	}
}


/* ---------- Footer: documenten in de blauwe balk ---------- */

/* De losse witte strook tussen de footer en de blauwe balk is vervallen. */
.desq-footer__legal {
	display: none !important;
}

.desq-footer__bar {
	background: var(--desq-navy, #1c3755);
	color: var(--desq-white, #fff);
}

.desq-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 28px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 13px 20px;
}

.desq-footer__bar .desq-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.desq-footer__bar .desq-footer__legal-list a {
	color: var(--desq-white, #fff);
	font-size: 13px;
	text-decoration: none;
}

.desq-footer__bar .desq-footer__legal-list a:hover,
.desq-footer__bar .desq-footer__legal-list a:focus-visible {
	text-decoration: underline;
}

.desq-footer__bar .desq-footer__company-meta {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
}

@media (max-width: 640px) {
	.desq-footer__bar-inner {
		justify-content: flex-start;
	}
}


/* ---------- Veelgestelde vragen ---------- */

.desq-faq__title-link {
	color: inherit;
	text-decoration: none;
}

.desq-faq__title-link:hover,
.desq-faq__title-link:focus-visible {
	color: var(--desq-orange, #eb5c34);
}

.desq-faq__title-arrow {
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.2s ease;
}

.desq-faq__title-link:hover .desq-faq__title-arrow {
	transform: translateX(4px);
}

.desq-faq-page__item {
	padding: 20px 0;
	border-bottom: 1px solid rgba(28, 55, 85, 0.12);
}

.desq-faq-page__item:last-child {
	border-bottom: 0;
}

.desq-faq-page__question {
	margin: 0 0 8px;
	color: var(--desq-navy, #1c3755);
	font-size: 19px;
	font-weight: 700;
}

.desq-faq-page__answer p:last-child {
	margin-bottom: 0;
}

/* ---------- Knop op de categoriekaarten: oranje met witte tekst ---------- */

.desq-home-categories__cta {
	border-color: var(--desq-orange, #eb5c34);
	background: var(--desq-orange, #eb5c34);
	color: var(--desq-white, #fff);
}

.desq-home-categories__card:hover .desq-home-categories__cta,
.desq-home-categories__card:focus-visible .desq-home-categories__cta {
	background: #d44f29;
	border-color: #d44f29;
	color: var(--desq-white, #fff);
}


/* ---------- Footer: linkkolommen en woordmerk ---------- */

.desq-footer__col--links {
	display: flex;
}

.desq-footer__linkcols {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 46px;
}

.desq-footer__linkcol-title {
	margin: 0 0 10px;
	color: var(--desq-navy, #1c3755);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.desq-footer__linkcol-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.desq-footer__linkcol-list li + li {
	margin-top: 3px;
}

.desq-footer__linkcol-list a {
	color: #6c7784;
	font-size: 13px;
	line-height: 1.5;
	text-decoration: none;
}

.desq-footer__linkcol-list a:hover,
.desq-footer__linkcol-list a:focus-visible {
	color: var(--desq-navy, #1c3755);
}

/* Tweede en derde kolom onder elkaar, zoals in het voorbeeld. */
.desq-footer__linkcols .desq-footer__linkcol:nth-child(n+2) {
	align-self: flex-start;
}

.desq-footer__wordmark {
	margin: 14px 0 0;
	text-align: center;
	line-height: 1.05;
}

.desq-footer__wordmark-1,
.desq-footer__wordmark-2 {
	display: block;
	color: var(--desq-navy, #1c3755);
	font-weight: 800;
	letter-spacing: 0.01em;
}

.desq-footer__wordmark-1 {
	font-size: clamp(22px, 2.2vw, 32px);
}

.desq-footer__wordmark-2 {
	font-size: clamp(14px, 1.3vw, 19px);
}

@media (max-width: 860px) {
	.desq-footer__linkcols {
		gap: 10px 32px;
	}
}

/* Fruto 2026-11-13: ruimte bovenin de footer, binnen de achtergrondafbeelding.
   main.css geeft .desq-footer__main padding: 64px 0 56px; de ronde van
   2 november zette padding-top op 0 om het footerlogo tegen de bovenrand te
   krijgen. Dat logo staat er niet meer, maar de linkkolommen plakten daardoor
   wel tegen de bovenrand. De ruimte staat daarom hier, op het vlak met de
   achtergrondafbeelding, zodat de foto die ruimte vult in plaats van wit.
   background-size expliciet op cover, zodat de foto de hogere footer blijft
   vullen zonder te herhalen. */
.desq-footer__main {
	padding-top: clamp(40px, 5vw, 72px);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}