/* ==========================================================================
   Tradens — thema-eigen stijlen bovenop theme.json
   ========================================================================== */

:root {
	--tradens-hoek: 38px;
}

body {
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

html {
	scroll-padding-top: 120px;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--blauw);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hoekenkader: het onderbroken vierkant uit het logo
   -------------------------------------------------------------------------- */

.is-style-tradens-kader {
	position: relative;
}

.is-style-tradens-kader::before,
.is-style-tradens-kader::after {
	content: "";
	position: absolute;
	width: var(--tradens-hoek);
	height: var(--tradens-hoek);
	pointer-events: none;
	transition: width .35s ease, height .35s ease;
}

.is-style-tradens-kader::before {
	top: 0;
	left: 0;
	border-top: 5px solid var(--wp--preset--color--oranje);
	border-left: 5px solid var(--wp--preset--color--oranje);
}

.is-style-tradens-kader::after {
	bottom: 0;
	right: 0;
	border-bottom: 5px solid var(--wp--preset--color--oranje);
	border-right: 5px solid var(--wp--preset--color--oranje);
}

/* De blauwe tegenhoeken komen via een extra laag, zodat ook ::before/::after vrij blijven. */
.is-style-tradens-kader > .wp-block-group__inner-container,
.is-style-tradens-kader {
	--tradens-kader-blauw: var(--wp--preset--color--blauw);
}

.is-style-tradens-kader::before,
.is-style-tradens-kader::after,
.is-style-tradens-kader > .tradens-hoek {
	z-index: 1;
}

.tradens-hoek {
	position: absolute;
	width: var(--tradens-hoek);
	height: var(--tradens-hoek);
	pointer-events: none;
	transition: width .35s ease, height .35s ease;
}

.tradens-hoek--tr {
	top: 0;
	right: 0;
	border-top: 5px solid var(--wp--preset--color--blauw);
	border-right: 5px solid var(--wp--preset--color--blauw);
}

.tradens-hoek--bl {
	bottom: 0;
	left: 0;
	border-bottom: 5px solid var(--wp--preset--color--blauw);
	border-left: 5px solid var(--wp--preset--color--blauw);
}

.is-style-tradens-staal {
	background: var(--wp--preset--color--staal);
}

/* --------------------------------------------------------------------------
   Kop
   -------------------------------------------------------------------------- */

.tradens-balk {
	background: var(--wp--preset--color--staal);
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	font-size: .83rem;
}

.tradens-kop {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}

.admin-bar .tradens-kop {
	top: 32px;
}

.tradens-kop .wp-block-navigation {
	gap: 26px;
}

/* De drie delen van de kop: logo vast, zoekveld groeit mee, acties vast. */
.tradens-kop .wp-block-group.is-layout-flex > .wp-block-site-logo {
	flex: 0 0 auto;
	min-width: 150px;
}

.tradens-kop .tradens-zoek {
	max-width: 560px;
	margin-inline: auto 0;
}


.tradens-kop .wp-block-site-logo img {
	height: 60px;
	width: auto;
	max-width: none;
	transition: height .25s ease;
}

body.tradens-vast .tradens-kop .wp-block-site-logo img {
	height: 44px;
}

.tradens-kop .wp-block-site-logo,
.tradens-kop .wp-block-site-logo .custom-logo-link {
	width: auto !important;
	max-width: none !important;
	display: block;
}

.tradens-kop .wp-block-navigation a {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--zwart);
	padding-block: 12px;
	border-bottom: 3px solid transparent;
}

.tradens-kop .wp-block-navigation a:hover,
.tradens-kop .wp-block-navigation .current-menu-item > a {
	border-bottom-color: var(--wp--preset--color--oranje);
	color: var(--wp--preset--color--zwart);
}

/* Zoekveld in de kop en in de hero. */
.tradens-zoek .wp-block-search__inside-wrapper {
	border: 2px solid var(--wp--preset--color--zwart);
	padding: 0;
	background: #fff;
}

.tradens-zoek .wp-block-search__input {
	border: 0;
	padding: 12px 14px;
	background: transparent;
}

.tradens-zoek .wp-block-search__button {
	border: 0;
	border-radius: 0;
	margin: 0;
	background: var(--wp--preset--color--zwart);
	color: #fff;
	font-weight: 700;
	padding-inline: 22px;
}

.tradens-zoek .wp-block-search__button:hover {
	background: var(--wp--preset--color--oranje-diep);
}

.tradens-zoek--hero .wp-block-search__button {
	background: var(--wp--preset--color--oranje);
}

.tradens-zoek--hero .wp-block-search__input {
	padding: 15px 16px;
	font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* WordPress zet een blokmarge tussen header, main en footer. Daardoor begon de
   hero altijd een stukje onder het menu, hoeveel padding ik er ook af haalde. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.tradens-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	--tr-scroll: 0;

	/* Wit dat naar onderen zacht overgaat in staalgrijs. Geen harde lijn meer
	   dwars door de knoppen, maar wel een zichtbare sectie. */
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--paper) 0%,
		var(--wp--preset--color--paper) 52%,
		#f7f8f9 76%,
		var(--wp--preset--color--staal) 100%
	);
}

/* Sfeervlekken in de huisstijl.

   Bewust twee geneste elementen per vlek: de buitenste doet de scrollpositie
   (transform, gevoed door --tr-scroll), de binnenste de trage eigen beweging
   (eigen animatie). Zo vechten ze niet om dezelfde eigenschap, wat eerder
   precies het probleem was. */

.tradens-sfeer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;

	/* In een constrained layout legt WordPress een max-width op elk kind, ook op
	   een absoluut gepositioneerd element. Zonder deze regel wordt de hele
	   sfeerlaag teruggebracht tot de tekstbreedte. */
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
}

.tradens-sfeer > span {
	position: absolute;
	display: block;
	will-change: transform;
}

.tradens-sfeer i {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	filter: blur(70px);
}

.tradens-sfeer .s1 {
	width: 640px;
	height: 480px;
	left: -150px;
	top: -170px;
}

.tradens-sfeer .s1 i {
	background: radial-gradient(circle, rgba(238, 125, 49, .32), rgba(238, 125, 49, 0) 70%);
	animation: tradens-adem-a 22s ease-in-out infinite alternate;
}

.tradens-sfeer .s2 {
	width: 760px;
	height: 540px;
	right: -200px;
	bottom: -240px;
}

.tradens-sfeer .s2 i {
	background: radial-gradient(circle, rgba(91, 156, 214, .34), rgba(91, 156, 214, 0) 70%);
	animation: tradens-adem-b 28s ease-in-out infinite alternate;
}

.tradens-sfeer .s3 {
	width: 440px;
	height: 340px;
	left: 44%;
	bottom: -140px;
}

.tradens-sfeer .s3 i {
	background: radial-gradient(circle, rgba(238, 125, 49, .18), rgba(238, 125, 49, 0) 70%);
	animation: tradens-adem-a 19s 3s ease-in-out infinite alternate-reverse;
}

@keyframes tradens-adem-a {
	from {
		transform: scale(1) translate(0, 0);
	}

	to {
		transform: scale(1.18) translate(50px, 30px);
	}
}

@keyframes tradens-adem-b {
	from {
		transform: scale(1) translate(0, 0);
	}

	to {
		transform: scale(.85) translate(-45px, -40px);
	}
}

.tradens-hero .wp-block-columns {
	position: relative;
	z-index: 1;
	margin-block-start: 0;
}

/* De tekstkolom staat als blok in het midden van de rij, horizontaal zowel als
   verticaal. De inhoud erbinnen blijft links uitgelijnd. */
.tradens-hero .wp-block-column:first-child > * {
	max-width: 34rem;
	margin-inline: auto;
	text-align: left;
}

.tradens-hero .wp-block-column > *:first-child {
	margin-block-start: 0;
}

/* De kaart drijft een klein stukje tegen het scrollen in. Geen kanteling:
   gedraaide tekst wordt onscherp. */
.tradens-herokaart {
	transform: translate3d(0, calc(var(--tr-scroll) * -22px), 0);
	box-shadow: 0 22px 50px rgba(30, 58, 87, .08);
	will-change: transform;
}

.tradens-chips a {
	display: inline-block;
	text-decoration: none;
	font-size: .84rem;
	font-weight: 600;
	color: var(--wp--preset--color--zwart);
	background: #fff;
	border: 1px solid var(--wp--preset--color--lijn);
	padding: 6px 13px;
	margin: 0 8px 8px 0;
}

.tradens-chips a:hover {
	background: var(--wp--preset--color--zwart);
	border-color: var(--wp--preset--color--zwart);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Productkaarten (WooCommerce en blokken)
   -------------------------------------------------------------------------- */

ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template li {
	border: 1px solid var(--wp--preset--color--lijn);
	background: #fff;
	padding: 20px;
	text-align: left;
	transition: border-color .18s ease;
}

ul.products li.product:hover,
.wc-block-grid__product:hover,
.wp-block-woocommerce-product-template li:hover {
	border-color: var(--wp--preset--color--zwart);
}

ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem !important;
	line-height: 1.25;
	font-weight: 700;
	color: var(--wp--preset--color--zwart);
}

ul.products li.product .price {
	color: var(--wp--preset--color--zwart);
	font-size: 1.2rem;
	font-weight: 700;
}

.tradens-prijs-excl {
	display: block;
	font-size: .82rem;
	font-weight: 400;
	color: var(--wp--preset--color--tekst);
}

ul.products li.product .button,
.wp-block-button__link {
	border-radius: 0;
}

.tradens-voorraad {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--wp--preset--color--groen);
}

.tradens-voorraad::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}


/* --------------------------------------------------------------------------
   WooCommerce-productrasters

   WooCommerce levert zelf een float-lay-out via .woocommerce ul.products.
   Die selectors wegen zwaarder dan de onze, dus hier staan ze bewust even
   specifiek en waar nodig met !important. Zonder dat blijven de floats staan
   en vallen kaarten uit het raster.
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
ul.products,
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
	margin: 34px 0 0 !important;
	padding: 0;
}

.woocommerce ul.products.columns-1,
ul.products.columns-1,
.wc-block-grid.has-1-columns .wc-block-grid__products {
	grid-template-columns: minmax(0, 1fr);
}

.woocommerce ul.products.columns-2,
ul.products.columns-2,
.wc-block-grid.has-2-columns .wc-block-grid__products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce ul.products.columns-3,
ul.products.columns-3,
.wc-block-grid.has-3-columns .wc-block-grid__products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.woocommerce ul.products.columns-5,
ul.products.columns-5,
.wc-block-grid.has-5-columns .wc-block-grid__products {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* De clearfix-elementen van WooCommerce tellen in een raster mee als cel. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.wc-block-grid__products::before,
.wc-block-grid__products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products li.product,
ul.products li.product,
.wc-block-grid__product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	flex: none !important;
	margin: 0 !important;
	padding: 20px;
	border: 1px solid var(--wp--preset--color--lijn);
	background: #fff;
	display: flex;
	flex-direction: column;
	text-align: left;
	transition: border-color .18s ease;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	border-color: var(--wp--preset--color--zwart);
}

.wc-block-grid__product-image {
	display: block;
	height: 180px;
	margin-bottom: 14px !important;
}

/* In de klassieke weergave omsluit één link de foto, de titel én de prijs.
   Die link moet dus meegroeien in plaats van een vaste hoogte te krijgen. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link,
.woocommerce ul.products li.product > a:first-of-type {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	text-decoration: none;
	color: inherit;
}

.woocommerce ul.products li.product .tradens-kaart__beeld,
.tradens-kaart__beeld {
	display: block;
	flex: none;
	height: 180px;
	margin-bottom: 14px;
}

.woocommerce ul.products li.product a img,
ul.products li.product a img,
.wc-block-grid__product-image img {
	height: 180px !important;
	width: 100% !important;
	max-width: 100% !important;
	object-fit: contain;
	margin: 0 !important;
	mix-blend-mode: multiply;
	box-shadow: none;
}

/* De titel staat bij sommige blokken in een link; die mag niet onderstreept. */
.wc-block-grid__product-title,
.wc-block-grid__product-link,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	text-decoration: none;
	overflow-wrap: break-word;
	hyphens: none;
}

.wc-block-grid__product > a,
.wc-block-grid__product-link {
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-size: 1.02rem !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--zwart);
	padding: 0 !important;
	margin: 0 0 8px !important;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	display: block;
	margin: auto 0 0 !important;
	padding-top: 12px;
	font-size: 1.2rem !important;
	font-weight: 700;
	color: var(--wp--preset--color--zwart) !important;
}

.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del {
	font-size: .85rem;
	font-weight: 400;
	color: #79828b;
}

.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block !important;
	width: 100%;
	text-align: center;
	margin: 12px 0 0 !important;
	padding: 11px 14px !important;
	background: var(--wp--preset--color--zwart) !important;
	color: #fff !important;
	border-radius: 0 !important;
	font-weight: 600;
	font-size: .95rem;
}

.woocommerce ul.products li.product .button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--wp--preset--color--oranje) !important;
}

.woocommerce ul.products li.product .added_to_cart {
	display: none;
}

.woocommerce ul.products li.product .onsale,
.wc-block-grid__product-onsale {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	margin: 0 !important;
	border: 0;
	border-radius: 0 !important;
	background: var(--wp--preset--color--oranje) !important;
	color: #fff !important;
	font-weight: 700;
	line-height: 1;
	padding: 8px 12px !important;
	min-height: 0;
	min-width: 0;
}

.woocommerce ul.products li.product {
	position: relative;
}

/* Kop van het archief: sortering en aantal netjes op één regel. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 22px;
}

.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--wp--preset--color--lijn);
	padding: 9px 12px;
	background: #fff;
}


/* Alles in de kaarten rekent met border-box; anders steekt een knop van
   100% breed buiten de kaart uit. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product *,
.wc-block-grid__product,
.wc-block-grid__product * {
	box-sizing: border-box;
}

.woocommerce ul.products li.product .tradens-kaart__beeld img,
.tradens-kaart__beeld img {
	height: 180px !important;
	width: 100% !important;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.tradens-kaart__titel {
	display: block;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--zwart);
	text-decoration: none;
	margin-bottom: 6px;
}

.tradens-kaart__sku {
	display: block;
	font-size: .8rem;
	color: #8c949c;
	margin-bottom: 8px;
}

.tradens-kaart__prijs {
	display: block;
	margin-top: auto;
	padding-top: 12px;
}

.tradens-kaart .tradens-voorraad {
	margin-top: 6px;
}




/* --------------------------------------------------------------------------
   Productcarrousel
   -------------------------------------------------------------------------- */

.tradens-carrousel {
	position: relative;
	margin-top: 18px;
}

.tradens-carrousel__spoor {
	display: grid;
}

.tradens-dia {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .45s ease, transform .45s cubic-bezier(.22, .7, .3, 1), visibility 0s .45s;
}

.tradens-dia.is-actief {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .45s ease, transform .45s cubic-bezier(.22, .7, .3, 1);
}

.tradens-dia__beeld {
	display: block;
	height: 220px;
	margin-bottom: 16px;
}

.tradens-dia__beeld img {
	height: 220px !important;
	width: 100% !important;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.tradens-dia__titel {
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--zwart);
	text-decoration: none;
	margin-bottom: 5px;
}

.tradens-dia__titel:hover {
	color: var(--wp--preset--color--oranje-diep);
}

.tradens-dia__sku {
	font-size: .8rem;
	color: #8c949c;
	margin-bottom: 10px;
}

.tradens-dia__prijs {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--wp--preset--color--zwart);
	margin-bottom: 6px;
}

.tradens-dia__knop {
	align-self: flex-start;
	text-decoration: none !important;
	margin-top: 16px !important;
	display: inline-block !important;
	width: auto !important;
	background: var(--wp--preset--color--oranje) !important;
	padding: 13px 24px !important;
}

.tradens-dia__knop,
.tradens-dia__knop:hover,
.tradens-dia__knop:focus {
	color: #fff !important;
}

.tradens-dia__knop:hover {
	background: var(--wp--preset--color--oranje-diep) !important;
}

/* Algemeen: een bestelknop houdt witte tekst, ook als de linkkleur uit
   theme.json bij hover iets anders wil. */
.woocommerce ul.products li.product .button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-button__link:hover {
	color: #fff !important;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: #fff !important;
}

.tradens-carrousel__bediening {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--lijn);
}

.tradens-carrousel__pijl {
	border: 1px solid var(--wp--preset--color--lijn);
	background: #fff;
	width: 38px;
	height: 38px;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	color: var(--wp--preset--color--zwart);
}

.tradens-carrousel__pijl:hover {
	border-color: var(--wp--preset--color--zwart);
	background: var(--wp--preset--color--zwart);
	color: #fff;
}

.tradens-carrousel__stippen {
	display: flex;
	gap: 8px;
	margin-inline: auto;
}

.tradens-carrousel__stip {
	width: 28px;
	height: 4px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--lijn);
	transition: background .2s ease;
}

.tradens-carrousel__stip:hover {
	background: #b6bdc4;
}

.tradens-carrousel__stip.is-actief {
	background: var(--wp--preset--color--oranje);
}

/* --------------------------------------------------------------------------
   Knoppen: even hoog, ook als de één een rand heeft en de ander niet
   -------------------------------------------------------------------------- */

.wp-block-buttons {
	align-items: stretch;
	gap: 12px;
}

.tradens-hero .wp-block-buttons {
	margin-block-start: 48px !important;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 15px 26px;
	border: 2px solid transparent;
	line-height: 1.2;
	text-decoration: none !important;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--zwart);
	background: transparent;
	color: var(--wp--preset--color--zwart);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--zwart);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Scrollvoortgang: dunne lijn onder de kop
   -------------------------------------------------------------------------- */

.tradens-voortgang {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--wp--preset--color--oranje), var(--wp--preset--color--blauw));
	z-index: 100;
	pointer-events: none;
}

/* Productkaarten komen iets omhoog bij hover. */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
}

/* --------------------------------------------------------------------------
   Suggesties tijdens het typen
   -------------------------------------------------------------------------- */

.tradens-zoek,
.wp-block-search.tradens-zoek {
	position: relative;
	z-index: 90;
}

/* Alles wat ná het zoekveld komt mag er niet overheen vallen. Blokken met een
   animatie krijgen een eigen stapelcontext, vandaar deze expliciete waarden. */
.tradens-hero .tradens-chips,
.tradens-hero .wp-block-buttons,
.tradens-tegels,
.tradens-herokaart {
	position: relative;
	z-index: 1;
}

.tradens-suggesties {
	position: absolute;
	z-index: 80;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 2px solid var(--wp--preset--color--zwart);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
	max-height: min(58vh, 460px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.tradens-suggesties::-webkit-scrollbar {
	width: 10px;
}

.tradens-suggesties::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--lijn);
}

.tradens-suggesties__kop {
	padding: 10px 16px 4px;
	font-size: .76rem;
	font-weight: 700;
	color: #8c949c;
}

.tradens-suggestie {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	text-decoration: none;
	color: inherit;
	border-top: 1px solid var(--wp--preset--color--lijn);
}

.tradens-suggesties__kop + .tradens-suggestie,
.tradens-suggestie:first-child {
	border-top: 0;
}

.tradens-suggestie:hover,
.tradens-suggestie.is-actief {
	background: var(--wp--preset--color--staal);
}

.tradens-suggestie__beeld {
	flex: none;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--staal);
}

.tradens-suggestie__beeld img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.tradens-suggestie__tekst {
	min-width: 0;
	flex: 1;
}

.tradens-suggestie__titel {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--zwart);
	line-height: 1.3;
}

.tradens-suggestie__meta {
	display: block;
	font-size: .78rem;
	color: #8c949c;
}

.tradens-suggestie__prijs {
	flex: none;
	font-weight: 700;
	color: var(--wp--preset--color--zwart);
}

.tradens-suggestie--cat {
	justify-content: space-between;
}

.tradens-suggesties__leeg {
	margin: 0;
	padding: 18px 16px;
	color: var(--wp--preset--color--tekst);
}

.tradens-suggesties__alles {
	display: block;
	padding: 13px 16px;
	background: var(--wp--preset--color--zwart);
	color: #fff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.tradens-suggesties__alles:hover {
	background: var(--wp--preset--color--oranje);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Zoekresultaten en zijbalk met categorieën
   -------------------------------------------------------------------------- */

.tradens-resultaattelling {
	color: var(--wp--preset--color--tekst);
	margin-bottom: 4px;
}

.tradens-geen-resultaat {
	padding: 26px;
	background: var(--wp--preset--color--staal);
}

.tradens-paginering ul {
	display: flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 34px 0 0;
}

.tradens-paginering a,
.tradens-paginering span {
	display: block;
	padding: 9px 14px;
	border: 1px solid var(--wp--preset--color--lijn);
	text-decoration: none;
	font-weight: 600;
}

.tradens-paginering .current {
	background: var(--wp--preset--color--zwart);
	color: #fff;
	border-color: var(--wp--preset--color--zwart);
}

.tradens-zijbalk {
	font-size: .94rem;
}

.tradens-zijbalk h2,
.tradens-zijbalk h3 {
	font-size: .95rem;
	margin-bottom: 12px;
}

.tradens-zijbalk ul,
.tradens-zijbalk .wc-block-product-categories-list {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 7px;
}

.tradens-zijbalk ul ul {
	margin: 7px 0 7px 14px;
	padding-left: 12px;
	border-left: 2px solid var(--wp--preset--color--lijn);
}

.tradens-zijbalk a {
	text-decoration: none;
	color: var(--wp--preset--color--zwart);
}

.tradens-zijbalk a:hover {
	color: var(--wp--preset--color--oranje-diep);
	text-decoration: underline;
}

.tradens-zijbalk .wc-block-product-categories-list-item-count {
	color: #8c949c;
}

/* --------------------------------------------------------------------------
   Categorietegels
   -------------------------------------------------------------------------- */

.tradens-tegel {
	position: relative;
	display: block;
	text-decoration: none;
	background: var(--wp--preset--color--staal);
	padding: 26px 22px 22px;
	min-height: 168px;
	transition: background .2s ease, box-shadow .2s ease;
}

.tradens-tegel:hover {
	background: #fff;
	box-shadow: 0 0 0 1px var(--wp--preset--color--lijn);
}

.tradens-tegel.is-style-tradens-kader::before,
.tradens-tegel.is-style-tradens-kader::after,
.tradens-tegel .tradens-hoek {
	width: 22px;
	height: 22px;
	border-width: 4px;
}

.tradens-tegel:hover.is-style-tradens-kader::before,
.tradens-tegel:hover.is-style-tradens-kader::after,
.tradens-tegel:hover .tradens-hoek {
	width: 34px;
	height: 34px;
}



/* --------------------------------------------------------------------------
   WooCommerce-productrasters
   -------------------------------------------------------------------------- */

.wc-block-grid__products,
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
}

.wc-block-grid.has-1-columns .wc-block-grid__products,
.wc-block-grid__products.columns-1 {
	grid-template-columns: minmax(0, 1fr);
}

.wc-block-grid.has-2-columns .wc-block-grid__products,
.wc-block-grid__products.columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wc-block-grid.has-3-columns .wc-block-grid__products,
.wc-block-grid__products.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-block-grid__products::before,
.wc-block-grid__products::after,
ul.products::before,
ul.products::after {
	display: none;
}

.wc-block-grid__product,
ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
}

.wc-block-grid__product-image,
ul.products li.product a img {
	margin-bottom: 14px;
}

.wc-block-grid__product-image img,
ul.products li.product a img {
	height: 180px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin-inline: auto;
	mix-blend-mode: multiply;
}

.wc-block-grid__product-title,
ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--zwart);
	margin: 0 0 8px;
}

.wc-block-grid__product-price,
ul.products li.product .price {
	display: block;
	margin-top: auto;
	padding-top: 12px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--zwart);
}

.wc-block-grid__product-add-to-cart,
ul.products li.product .button {
	margin-top: 12px;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link,
ul.products li.product .button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--wp--preset--color--zwart);
	color: #fff;
	border-radius: 0;
	font-weight: 600;
	padding: 11px 14px;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
ul.products li.product .button:hover {
	background: var(--wp--preset--color--oranje);
	color: #fff;
}

.wc-block-grid__product-onsale,
ul.products li.product .onsale {
	background: var(--wp--preset--color--oranje);
	color: #fff;
	border-radius: 0;
	border: 0;
	font-weight: 700;
}


/* Alles in de kaarten rekent met border-box; anders steekt een knop van
   100% breed buiten de kaart uit. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product *,
.wc-block-grid__product,
.wc-block-grid__product * {
	box-sizing: border-box;
}

.woocommerce ul.products li.product .tradens-kaart__beeld img,
.tradens-kaart__beeld img {
	height: 180px !important;
	width: 100% !important;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.tradens-kaart__titel {
	display: block;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--zwart);
	text-decoration: none;
	margin-bottom: 6px;
}

.tradens-kaart__sku {
	display: block;
	font-size: .8rem;
	color: #8c949c;
	margin-bottom: 8px;
}

.tradens-kaart__prijs {
	display: block;
	margin-top: auto;
	padding-top: 12px;
}

.tradens-kaart .tradens-voorraad {
	margin-top: 6px;
}




/* --------------------------------------------------------------------------
   Productcarrousel
   -------------------------------------------------------------------------- */

.tradens-carrousel {
	position: relative;
	margin-top: 18px;
}

.tradens-carrousel__spoor {
	display: grid;
}

.tradens-dia {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .45s ease, transform .45s cubic-bezier(.22, .7, .3, 1), visibility 0s .45s;
}

.tradens-dia.is-actief {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .45s ease, transform .45s cubic-bezier(.22, .7, .3, 1);
}

.tradens-dia__beeld {
	display: block;
	height: 220px;
	margin-bottom: 16px;
}

.tradens-dia__beeld img {
	height: 220px !important;
	width: 100% !important;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.tradens-dia__titel {
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--zwart);
	text-decoration: none;
	margin-bottom: 5px;
}

.tradens-dia__titel:hover {
	color: var(--wp--preset--color--oranje-diep);
}

.tradens-dia__sku {
	font-size: .8rem;
	color: #8c949c;
	margin-bottom: 10px;
}

.tradens-dia__prijs {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--wp--preset--color--zwart);
	margin-bottom: 6px;
}

.tradens-dia__knop {
	align-self: flex-start;
	text-decoration: none !important;
	margin-top: 16px !important;
	display: inline-block !important;
	width: auto !important;
	background: var(--wp--preset--color--oranje) !important;
	padding: 13px 24px !important;
}

.tradens-dia__knop,
.tradens-dia__knop:hover,
.tradens-dia__knop:focus {
	color: #fff !important;
}

.tradens-dia__knop:hover {
	background: var(--wp--preset--color--oranje-diep) !important;
}

/* Algemeen: een bestelknop houdt witte tekst, ook als de linkkleur uit
   theme.json bij hover iets anders wil. */
.woocommerce ul.products li.product .button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-button__link:hover {
	color: #fff !important;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: #fff !important;
}

.tradens-carrousel__bediening {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--lijn);
}

.tradens-carrousel__pijl {
	border: 1px solid var(--wp--preset--color--lijn);
	background: #fff;
	width: 38px;
	height: 38px;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	color: var(--wp--preset--color--zwart);
}

.tradens-carrousel__pijl:hover {
	border-color: var(--wp--preset--color--zwart);
	background: var(--wp--preset--color--zwart);
	color: #fff;
}

.tradens-carrousel__stippen {
	display: flex;
	gap: 8px;
	margin-inline: auto;
}

.tradens-carrousel__stip {
	width: 28px;
	height: 4px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--lijn);
	transition: background .2s ease;
}

.tradens-carrousel__stip:hover {
	background: #b6bdc4;
}

.tradens-carrousel__stip.is-actief {
	background: var(--wp--preset--color--oranje);
}

/* --------------------------------------------------------------------------
   Knoppen: even hoog, ook als de één een rand heeft en de ander niet
   -------------------------------------------------------------------------- */

.wp-block-buttons {
	align-items: stretch;
	gap: 12px;
}

.tradens-hero .wp-block-buttons {
	margin-block-start: 48px !important;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 15px 26px;
	border: 2px solid transparent;
	line-height: 1.2;
	text-decoration: none !important;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--zwart);
	background: transparent;
	color: var(--wp--preset--color--zwart);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--zwart);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Scrollvoortgang: dunne lijn onder de kop
   -------------------------------------------------------------------------- */

.tradens-voortgang {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--wp--preset--color--oranje), var(--wp--preset--color--blauw));
	z-index: 100;
	pointer-events: none;
}

/* Productkaarten komen iets omhoog bij hover. */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
}

/* --------------------------------------------------------------------------
   Suggesties tijdens het typen
   -------------------------------------------------------------------------- */

.tradens-zoek,
.wp-block-search.tradens-zoek {
	position: relative;
	z-index: 90;
}

/* Alles wat ná het zoekveld komt mag er niet overheen vallen. Blokken met een
   animatie krijgen een eigen stapelcontext, vandaar deze expliciete waarden. */
.tradens-hero .tradens-chips,
.tradens-hero .wp-block-buttons,
.tradens-tegels,
.tradens-herokaart {
	position: relative;
	z-index: 1;
}

.tradens-suggesties {
	position: absolute;
	z-index: 80;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 2px solid var(--wp--preset--color--zwart);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
	max-height: min(58vh, 460px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.tradens-suggesties::-webkit-scrollbar {
	width: 10px;
}

.tradens-suggesties::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--lijn);
}

.tradens-suggesties__kop {
	padding: 10px 16px 4px;
	font-size: .76rem;
	font-weight: 700;
	color: #8c949c;
}

.tradens-suggestie {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	text-decoration: none;
	color: inherit;
	border-top: 1px solid var(--wp--preset--color--lijn);
}

.tradens-suggesties__kop + .tradens-suggestie,
.tradens-suggestie:first-child {
	border-top: 0;
}

.tradens-suggestie:hover,
.tradens-suggestie.is-actief {
	background: var(--wp--preset--color--staal);
}

.tradens-suggestie__beeld {
	flex: none;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--staal);
}

.tradens-suggestie__beeld img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.tradens-suggestie__tekst {
	min-width: 0;
	flex: 1;
}

.tradens-suggestie__titel {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--zwart);
	line-height: 1.3;
}

.tradens-suggestie__meta {
	display: block;
	font-size: .78rem;
	color: #8c949c;
}

.tradens-suggestie__prijs {
	flex: none;
	font-weight: 700;
	color: var(--wp--preset--color--zwart);
}

.tradens-suggestie--cat {
	justify-content: space-between;
}

.tradens-suggesties__leeg {
	margin: 0;
	padding: 18px 16px;
	color: var(--wp--preset--color--tekst);
}

.tradens-suggesties__alles {
	display: block;
	padding: 13px 16px;
	background: var(--wp--preset--color--zwart);
	color: #fff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.tradens-suggesties__alles:hover {
	background: var(--wp--preset--color--oranje);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Zoekresultaten en zijbalk met categorieën
   -------------------------------------------------------------------------- */

.tradens-resultaattelling {
	color: var(--wp--preset--color--tekst);
	margin-bottom: 4px;
}

.tradens-geen-resultaat {
	padding: 26px;
	background: var(--wp--preset--color--staal);
}

.tradens-paginering ul {
	display: flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 34px 0 0;
}

.tradens-paginering a,
.tradens-paginering span {
	display: block;
	padding: 9px 14px;
	border: 1px solid var(--wp--preset--color--lijn);
	text-decoration: none;
	font-weight: 600;
}

.tradens-paginering .current {
	background: var(--wp--preset--color--zwart);
	color: #fff;
	border-color: var(--wp--preset--color--zwart);
}

.tradens-zijbalk {
	font-size: .94rem;
}

.tradens-zijbalk h2,
.tradens-zijbalk h3 {
	font-size: .95rem;
	margin-bottom: 12px;
}

.tradens-zijbalk ul,
.tradens-zijbalk .wc-block-product-categories-list {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 7px;
}

.tradens-zijbalk ul ul {
	margin: 7px 0 7px 14px;
	padding-left: 12px;
	border-left: 2px solid var(--wp--preset--color--lijn);
}

.tradens-zijbalk a {
	text-decoration: none;
	color: var(--wp--preset--color--zwart);
}

.tradens-zijbalk a:hover {
	color: var(--wp--preset--color--oranje-diep);
	text-decoration: underline;
}

.tradens-zijbalk .wc-block-product-categories-list-item-count {
	color: #8c949c;
}

/* --------------------------------------------------------------------------
   Categorietegels (blok tradens/categorietegels)
   -------------------------------------------------------------------------- */

.tradens-tegels {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 34px;
}

.tradens-tegel h3 {
	margin: 0 0 6px;
}

.tradens-tegel__aantal {
	display: block;
	font-size: .85rem;
	color: #79828b;
}

.tradens-tegel__beeld {
	position: absolute;
	right: 18px;
	bottom: 16px;
	line-height: 0;
}

.tradens-tegel__beeld img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* De lijstweergave van WooCommerce, voor wie het standaardblok blijft gebruiken. */
.wp-block-woocommerce-product-categories ul.wc-block-product-categories-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 4px 24px;
	list-style: none;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Logo in de voettekst: lichte variant, want zwart op zwart is niets
   -------------------------------------------------------------------------- */

.tradens-voet .wp-block-site-logo {
	background: url("../img/tradens-logo-licht.webp") left center / contain no-repeat;
	max-width: 240px;
}

.tradens-voet .wp-block-site-logo img {
	opacity: 0;
	width: 100%;
	height: auto;
}

/* Het logo nooit laten bijsnijden of uitrekken. */
.wp-block-site-logo img,
.wp-block-site-logo .custom-logo {
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   Productblokken van WooCommerce in de hero
   -------------------------------------------------------------------------- */

.tradens-herokaart .wc-block-grid__product,
.tradens-herokaart ul.products li.product {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
}

.tradens-herokaart .wc-block-grid__products {
	margin-top: 18px;
	gap: 0;
}

.tradens-herokaart .wc-block-grid__product-image,
.tradens-herokaart .wc-block-grid__product-image a {
	height: 260px !important;
	display: block;
}

.tradens-herokaart .wc-block-grid__product-image img,
.tradens-herokaart ul.products li.product img {
	height: 260px !important;
	width: 100% !important;
	object-fit: contain;
}

.tradens-herokaart .wc-block-grid__product {
	border: 0;
	padding: 0;
}

.tradens-herokaart .wc-block-grid__product-title {
	font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   Productpagina
   -------------------------------------------------------------------------- */

.single-product div.product .summary .price {
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--wp--preset--color--zwart);
	letter-spacing: -.02em;
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 28px;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	overflow-x: auto;
}

.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 15px 0;
	font-weight: 600;
	color: #79828b;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--zwart);
	border-bottom-color: var(--wp--preset--color--oranje);
}

.single-product table.shop_attributes th,
.single-product table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	padding: 11px 0;
	font-style: normal;
}

.single-product .quantity .qty {
	border: 2px solid var(--wp--preset--color--zwart);
	padding: 11px 8px;
	text-align: center;
	font-weight: 600;
}

/* Mobiele koopbalk. */
.tradens-koopbalk {
	display: none;
}

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

.tradens-faq details {
	border-top: 1px solid var(--wp--preset--color--lijn);
}

.tradens-faq details:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}

.tradens-faq summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 18px 44px 18px 0;
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--wp--preset--color--zwart);
}

.tradens-faq summary::-webkit-details-marker {
	display: none;
}

.tradens-faq summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	margin-top: -9px;
	width: 13px;
	height: 13px;
	border-right: 3px solid var(--wp--preset--color--oranje);
	border-bottom: 3px solid var(--wp--preset--color--oranje);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.tradens-faq details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -3px;
}

.tradens-faq .tradens-faq__antwoord {
	padding: 0 10px 20px 0;
}

.tradens-faq .tradens-faq__antwoord > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Voettekst
   -------------------------------------------------------------------------- */

.tradens-voet {
	background: #000;
	color: #9ea7b0;
	font-size: .92rem;
}

.tradens-voet :where(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.tradens-voet a {
	color: inherit;
	text-decoration: none;
}

.tradens-voet a:hover {
	color: var(--wp--preset--color--oranje);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Beweging: één geregisseerd moment, verder rustig
   -------------------------------------------------------------------------- */

/* Eén geregisseerde opening: kop komt op, daarna tekenen de hoeken zich in. */
.tradens-hero h1,
.tradens-hero .has-lead-font-size,
.tradens-hero .tradens-zoek,
.tradens-hero .tradens-chips {
	animation: tradens-op .7s cubic-bezier(.22, .7, .3, 1) both;
}

.tradens-hero .has-lead-font-size {
	animation-delay: .12s;
}

.tradens-hero .tradens-chips {
	animation-delay: .24s;
}

.tradens-hero .wp-block-buttons {
	animation: tradens-op .7s .36s cubic-bezier(.22, .7, .3, 1) both;
}

@keyframes tradens-op {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
}

.tradens-herokaart.is-style-tradens-kader::before,
.tradens-herokaart.is-style-tradens-kader::after,
.tradens-herokaart .tradens-hoek {
	animation: tradens-hoek .55s .35s ease both;
}

.tradens-herokaart.is-style-tradens-kader::after,
.tradens-herokaart .tradens-hoek--bl {
	animation-delay: .5s;
}

@keyframes tradens-hoek {
	from {
		width: 0;
		height: 0;
	}
}

.tradens-onthul {
	opacity: 0;
	transform: translateY(42px);
}

.tradens-onthul--zijwaarts {
	transform: translateX(-40px);
}

.tradens-onthul--schaal {
	transform: translateY(32px) scale(.94);
}

.tradens-onthul.is-zichtbaar {
	opacity: 1;
	transform: none;
	transition:
		opacity .7s cubic-bezier(.22, .7, .3, 1),
		transform .7s cubic-bezier(.22, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-delay: 0ms !important;
		transition-duration: .001ms !important;
	}

	.tradens-onthul,
	.tradens-onthul--zijwaarts,
	.tradens-onthul--schaal {
		opacity: 1;
		transform: none;
	}

	.tradens-voortgang {
		display: none;
	}

	.tradens-sfeer > span,
	.tradens-sfeer i,
	.tradens-herokaart,
	[data-tradens-parallax] {
		transform: none !important;
		animation: none !important;
	}


	.tradens-dia {
		transition: none;
	}

	.woocommerce ul.products li.product:hover,
	.wc-block-grid__product:hover {
		transform: none;
	}

	.tradens-hero h1,
	.tradens-hero .has-lead-font-size,
	.tradens-hero .tradens-zoek,
	.tradens-hero .tradens-chips,
	.tradens-herokaart.is-style-tradens-kader::before,
	.tradens-herokaart.is-style-tradens-kader::after,
	.tradens-herokaart .tradens-hoek {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
	.tradens-zijbalk {
		border: 1px solid var(--wp--preset--color--lijn);
		padding: 20px;
	}

	.woocommerce ul.products,
	ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.tradens-tegels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tradens-hero {
		background: linear-gradient(180deg, #fff 0 72%, var(--wp--preset--color--staal) 72% 100%);
	}
}

@media (max-width: 460px) {
	.woocommerce ul.products,
	ul.products,
	.wc-block-grid__products {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.tradens-tegels {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 781px) {
	.tradens-balk {
		display: none;
	}

	body.tradens-vast .tradens-kop .wp-block-navigation {
		display: none;
	}

	.single-product .tradens-koopbalk {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 65;
		display: flex;
		gap: 14px;
		align-items: center;
		background: #fff;
		border-top: 1px solid var(--wp--preset--color--lijn);
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -8px 22px rgba(0, 0, 0, .08);
	}

	.single-product .tradens-koopbalk .price {
		font-size: 1.15rem;
		font-weight: 700;
		color: var(--wp--preset--color--zwart);
	}

	.single-product .tradens-koopbalk .button {
		margin-left: auto;
	}
}