/* Corrigeer Divi's vaste top-offset naar de echte hoogte van de secundaire balk (49px) */
@media (min-width: 981px) {
    body.et_fixed_nav.et_secondary_nav_enabled #main-header {
        top: 49px !important;
    }
    body.admin-bar.et_fixed_nav.et_secondary_nav_enabled #main-header {
        top: 81px !important; /* 32px adminbalk + 49px topbalk */
    }
}



/* Mega menu styling — pas kleuren/breedtes aan je huisstijl aan */

.has-mega-menu {
	position: relative;
}

/* Afwijkende typografie binnen het paneel t.o.v. de hoofdnavigatie:
   geen hoofdletters, geen letterspacing, kleiner lettertype, normaal
   gewicht, inktkleur #4c4c4c. Dit is de CSS-laag; mega-menu.js forceert
   dezelfde waarden ook nog eens inline, want Divi's eigen "li a"-regel
   gebruikt vermoedelijk een ID-selector die zelfs !important-CSS wint. */
.mega-menu__submenu.depth-0,
.mega-menu__submenu.depth-0 * {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #4c4c4c !important;
	line-height: normal !important;
	margin-top: 8px;
}

.mega-menu__submenu.depth-0 > li.menu-item-has-children > a {
	/* ENKEL kolomkoppen mét eigen sublinks (zoals "Huwelijk") zijn bold en
	   niet-klikbaar. Items zonder sublinks (zoals "Webdesign" bij Diensten)
	   vallen hier bewust buiten en blijven gewoon aanklikbaar. */
	font-weight: 600 !important;
	margin-bottom: 4px;
	pointer-events: none !important;
	cursor: default !important;
}

/* Geen grijze achtergrond bij hover in het paneel — enkel de tekstkleur
   mag reageren. Dit is de CSS-laag; mega-menu.js forceert hetzelfde ook
   nog eens via mouseenter/mouseleave, omdat Divi's eigen :hover-regel
   (met eigen achtergrondkleur) anders alsnog kan blijven "doorschijnen". */
.mega-menu__submenu a:hover,
.mega-menu__submenu li:hover,
.mega-menu__submenu li:hover > a {
	background: transparent !important;
	background-color: transparent !important;
}

/* Hoverkleur geldt voor gewone links: zowel links binnen een kolom
   (depth-1) als losse, direct klikbare items zonder sublinks (bv. de
   items onder "Diensten"). */
body .mega-menu__submenu.depth-1 a:hover,
body .mega-menu__submenu.depth-0 > li:not(.menu-item-has-children) > a:hover {
	color: #99CACF !important; /* pas aan naar je gewenste hover-kleur */
}

/* Roze hover (#fc4982) voor top-level hoofdmenu-items ZONDER children
   (dus geen mega menu erachter) — bv. Home, Over mij, Contact. Dit is de
   CSS-laag als fallback; mega-menu.js forceert dezelfde kleur ook nog eens
   inline via mouseenter/mouseleave, want Divi's eigen hoverkleur op de
   hoofdnavigatie wint anders net als bij het paneel. Pas ".nav" hieronder
   aan als je menu-container een andere class/ID heeft (bv. Divi's #top-menu). */
.nav > li.menu-item:not(.has-mega-menu) > a:hover,
#top-menu > li.menu-item:not(.has-mega-menu) > a:hover {
	color: #fc4982 !important;
}

/* Alleen het eerste submenu-niveau (depth-0) wordt een mega menu.
   position: fixed + left/right: 0 laat het paneel de volledige
   browserbreedte innemen (edge-to-edge), zodat kolommen met veel inhoud
   (zoals een productgrid) niet buiten het paneel vallen. "top" wordt
   door mega-menu.js dynamisch gezet, vlak onder de aangeklikte link. */
.mega-menu__submenu.depth-0 {
	position: fixed;
	top: 100px; /* fallback, wordt overschreven door JS */
	left: 0;
	right: 0;
	width: 90%;
	max-width: none;
	transform: translateY(8px);

	display: grid;
	/* past zich automatisch aan het aantal kolommen (2e-niveau items) aan,
	   elke kolom is minstens 200px breed */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;

	margin: 0 auto;
	padding: 32px 5vw;
	list-style: none;
	box-sizing: border-box;

	/* Nooit hoger dan het scherm: als een kolom veel inhoud heeft (bv. lange
	   productnamen), scrolt de inhoud van het paneel zelf i.p.v. het paneel
	   voorbij de onderkant van je scherm te laten doorlopen. Zo blijft er
	   altijd zichtbare pagina onder/naast het paneel om op te klikken en te
	   sluiten. */
	max-height: calc(100vh - 100px);
	overflow-y: auto;

	background: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 100;
}

/* Toon uitsluitend via de .mega-open klasse (door JS gezet).
   Bewust GEEN :hover-regel meer hier: bij position:fixed + gecentreerd
   paneel kan dat overlappen met een andere menu-link en zo per ongeluk
   twee panelen tegelijk openen. JS zorgt dat er maar één open staat. */
.has-mega-menu.mega-open > .mega-menu__submenu.depth-0 {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* Live productvoorbeeld rechtsonder in het paneel — verschijnt zodra je
   over een productlink hovert (via JS, zie mega-menu.js). Gepositioneerd
   tov het paneel zelf (dat position:fixed heeft), dus altijd rechtsonder
   ongeacht het aantal kolommen. Enkel op desktop, zie media query onderaan. */
.mega-menu__preview {
	position: fixed;
	left: 0;
	top: 0;
	width: 160px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 9999;
}

.mega-menu__preview.is-visible {
	opacity: 1;
	visibility: visible;
}

.mega-menu__preview img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Diepere submenu's (depth-1) blijven gewoon een verticale lijst per kolom.
   Divi behandelt geneste <ul>'s standaard als "flyout" dropdowns: eigen
   achtergrond, schaduw en position:absolute los naast het bovenliggende item.
   Al die eigenschappen hieronder expliciet resetten, anders "ontsnapt" de
   lijst uit zijn kolom en verschijnt hij als los kaartje ernaast. */
.has-mega-menu.mega-open .mega-menu__submenu.depth-1 {
	display: block !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	float: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	z-index: auto !important;
}

.mega-menu__submenu.depth-1 > li {
	display: block !important;
	float: none !important;
	width: auto !important;
	background: transparent !important;
}

.mega-menu__submenu li a {
	display: block;
	padding: 6px 0;
	text-decoration: none;
	color: inherit;
}

/* Verberg Divi's eigen dropdown-pijltje (▾) op de kolomkoppen —
   die suggereren een klikbaar uitklapmenu, wat hier niet de bedoeling is. */
.mega-menu__submenu.depth-0 > li.menu-item-has-children > a::after,
.mega-menu__submenu.depth-0 > li.menu-item-has-children > a::before {
	display: none !important;
	content: none !important;
}

/* --- Speciaal item: afbeelding met link --- */
.mega-menu__image-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 !important;
}

.mega-menu__image-link img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

.mega-menu__image-caption {
	font-weight: 600;
}

/* --- Speciaal item: productgrid (WooCommerce) --- */
.mega-menu__products-label {
	display: block;
	font-weight: 600;
	margin-bottom: 12px;
}

.mega-menu__product-grid {
	/* Divi behandelt elke <ul> onder een menu-item standaard als flyout-
	   dropdown (position:absolute, eigen achtergrond). Expliciet resetten,
	   anders "ontsnapt" dit productgrid uit zijn kolom net als depth-1 deed. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	float: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: auto !important;

	display: grid;
	/* 2 naast elkaar als er ruimte is, anders automatisch 1 kolom onder
	   elkaar — voorkomt dat de tegels buiten hun menu-kolom uitsteken. */
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu__product-grid > li,
.mega-menu__featured-product {
	position: static !important;
	float: none !important;
	background: transparent !important;
	box-shadow: none !important;
	width: auto !important;
	min-width: 0 !important;
}

.mega-menu__product-grid img,
.mega-menu__featured-product img {
	max-width: 100%;
	height: auto;
}

.mega-menu__product a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.mega-menu__product img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.mega-menu__product-title {
	display: block;
	font-family: 'Quicksand', sans-serif !important;
	font-size: 0.9em;
	font-weight: 500;
}

.mega-menu__product-price {
	display: block;
	margin-top: auto;
	padding-top: 4px;
	font-size: 0.85em;
	font-weight: 600;
	color: #fb4981;
	opacity: 1;
}

/* --- Eén uitgelicht product (kolom met product-ID in de Beschrijving) --- */
.mega-menu__featured-product a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.mega-menu__featured-product img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

.mega-menu__featured-product .mega-menu__product-title {
	font-size: 1em;
	font-weight: 600;
}

.mega-menu__featured-product .mega-menu__product-price {
	font-size: 0.95em;
}

/* Mobiel: val terug op een gewoon uitklapmenu, geen grid */
@media (max-width: 1023px) {
	.mega-menu__submenu.depth-0 {
		position: static;
		width: 100%;
		max-width: none;
		display: block;
		transform: none;
		box-shadow: none;
		padding: 8px 16px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.has-mega-menu .mega-menu__submenu.depth-0 {
		display: none;
	}

	.has-mega-menu.mega-open .mega-menu__submenu.depth-0 {
		display: block;
	}

	/* Voorbeeldvenster is desktop-only */
	.mega-menu__preview {
		display: none !important;
	}
}

/* ==========================================================================
   JULO Creative Studio — Mini cart restyle
   Kleuren en fonts overgenomen van julocreativestudio.be:
   - Quicksand voor UI-tekst, Fraunces/serif voor het totaalbedrag
   - Roze/oud-roze kleurenpalet van de site (#d6afc4, #d68eb8, #fb4981, #161b2d)
   Getest rechtstreeks op de live site door de CSS in het winkelmandje te injecteren.

   Installatie: plak dit geheel in Uiterlijk > Aanpassen > Extra CSS
   (of in de style.css van je child theme).
   ========================================================================== */

.dnwoo_minicart {
  font-family: "Quicksand", Helvetica, Arial, sans-serif;
	
}



/* Cart-paneel */
.dnwoo_minicart_cart_bag {
  background: #d6afc4;
  border-radius: 10px;
  box-shadow: 0 15px 45px rgba(22, 27, 45, 0.18);
  /*overflow: hidden;*/
  border: none;
}

/* Titel bovenaan */
.dnwoo_minicart_items_heading {
  padding: 18px 20px;
  background: #d68eb8;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.dnwoo_minicart_items_heading_text {
  background: #fff;
  color: #fb4981;
  font-size: 12px;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 999px;
}

/* Lijst met items */
.widget_shopping_cart_content {
  background: #fff;
 /* max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;*/
}
.woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-mini-cart-item {
  position: relative;
  padding: 16px 40px 16px 20px;
  border-bottom: 1px solid #f1e3ea;
  box-sizing: border-box;
	

}

.dnwoo-mini-cart-item{
	scrollbar-width: auto !important;
}

.dnwoo_minicart ul.cart_list dl dd {
    margin-left:0 !important;
}


.woocommerce-mini-cart-item:last-child {
  border-bottom: none;
}

/* De productlink bevat de afbeelding + de titeltekst samen:
   forceren met !important omdat de plugin-CSS deze tekst standaard
   wit/onzichtbaar maakt (bedoeld voor een gekleurde achtergrond). */
.woocommerce-mini-cart-item > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #161b2d !important;
  font-size: 12.5px !important;
  font-weight: 700;
letter-spacing: normal;
    text-transform: none;
  line-height: 1.3;
  text-decoration: none !important;
  margin-bottom: 8px;
}
.dnwoo_minicart_wrapper .dnwoo_minicart_cart_bag .woocommerce-mini-cart .mini_cart_item a {
 
    letter-spacing: normal !important;
    text-transform: capitalize !important;
    line-height: 1;
}
.woocommerce-mini-cart-item > a img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #f1e3ea;
  flex: 0 0 auto;
}

/* Remove (x) knop */
.remove_from_cart_button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #333 !important;
  font-size: 13px;
  line-height: 1;
  text-decoration: none !important;
  border: 1px solid #eadce2;
  transition: background 0.15s ease, color 0.15s ease;
}
.remove_from_cart_button:hover {
  background: #fb4981;
  color: #fff !important;
  border-color: #fb4981;
}

/* Variaties (kleur, tekst, ...) */
.variation {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 6px;
  padding: 10px 5px;
  font-size: 11px;
  color: #8a8a8a;
}
.variation dt {
  font-weight: 700;
  color: #8a8a8a;
  margin: 0 4px 0 0;
	letter-spacing: normal;
	text-transform:capitalize!important;
 
}
.variation dd {
  margin: 0;
  color: #333;
	
}
.variation dd::after {
 content:"|"
	
}
.variation dd p {
  margin: 0;
  display: inline;
	letter-spacing: normal;
    text-transform: none;
}
.variation .pewc-cart-item-price {
  display: none; /* verbergt het losse €0,00 achter gepersonaliseerde velden */
}

/* Aantal x prijs */
.woocommerce-mini-cart-item .quantity {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fb4981;
  margin-top: 2px;
}

/* Footer: subtotaal, coupon, totaal, knoppen */
.dnwoo-mini-cart-footer {
  background: #d6afc4;
  padding: 18px 20px 20px;
}

.woocommerce-mini-cart__total.total {
  display: block;
  justify-content: space-between;
  align-items: center;
  color: #161b2d;
  font-size: 14px;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(22, 27, 45, 0.2);
}
.woocommerce-mini-cart__total.total strong {
  font-weight: 700;
}

/* Kortingscode */
.dnwooe-mini-cart-coupon-box {
  margin-bottom: 14px;
}
.show-coupon.cart-header {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #161b2d;
  display: flex;
  align-items: center;
  gap: 6px;
}
.coupon-from-wrapper {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.minicart-coupon-field {
  flex: 1;
  min-width: 0;
  border: 1px solid #d68eb8;
  border-radius: 6px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: #161b2d;
}
.minicart-coupon-field:focus {
  outline: none;
  border-color: #fb4981;
}
#minicart-apply-button {
  border: none;
  border-radius: 6px;
  padding: 0 14px;
  background: #161b2d;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
#minicart-apply-button:hover {
  background: #fb4981;
}

/* Totaal */
.dnwooe-order-total {
  display: block;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.dnwooe-order-total label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #161b2d;
}
.dnwooe-order-total span[data-title="Total"] strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #161b2d;
}
.dnwooe-order-total .includes_tax {
  display: block;
  font-size: 11px;
  color: #8a8a8a;
  font-weight: 400;
  margin-top: 2px;
}
.dnwoo_minicart_wrapper .dnwooe-order-total span.woocommerce-Price-amount.amount{
	font-size:12px!important;
}
.dnwoo_minicart_wrapper .dnwoo_minicart_cart_bag .woocommerce-mini-cart .mini_cart_item .quantity{
	color:#000!important;
	margin: 0 15px !important;
    justify-content: flex-end !important;
}


/* Knoppen onderaan */
.woocommerce-mini-cart__buttons.buttons {
  display: flex;
  gap: 10px;
  margin: 0;
}
.woocommerce-mini-cart__buttons.buttons a {
  flex: 1;
  text-align: center;
  padding: 12px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dnwoo-viewcart {
  background: #fff;
  color: #161b2d !important;
  border: 1px solid #161b2d;
}
.dnwoo-viewcart:hover {
  background: #161b2d;
  color: #fff !important;
}
.dnwoo-checkout {
  background: #fb4981;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(251, 73, 129, 0.35);
}
.dnwoo_minicart_wrapper .woocommerce-mini-cart__buttons .dnwoo-checkout{
	margin:auto!important;
}
.dnwoo_minicart_wrapper .woocommerce-mini-cart__buttons .dnwoo-viewcart:not(:last-child){
	margin-bottom:0!important;
}

.dnwoo-checkout:hover {
  background: #161b2d;
  box-shadow: 0 8px 18px rgba(22, 27, 45, 0.3);
  transform: translateY(-1px);
}

/* Scrollbar in de itemlijst wat rustiger stylen */
.widget_shopping_cart_content::-webkit-scrollbar {
  width: 6px;
}
.widget_shopping_cart_content::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 999px;
}

@media (max-width: 400px) {
  .dnwoo_minicart_cart_bag {
    width: 90vw !important;
  }
}