/*
Theme Name:   Divi Child
Theme URI:    https://studioicon.nl
Description:  A child theme for Divi x Studio Icon
Author:       Sarkis Moeradjan
Author URI:   https://studioicon.nl
Template:     Divi
Version:      1.0.0
*/

/* ------------------------------------------------ Huisstijl / Branding Colors ------------------------------------------------ */
.woocommerce span.onsale, .woocommerce-page span.onsale {
	background: #fff !important;
	border: 1px solid #E71660 !important;
	color: #E71660 !important;
	font-weight: 600 !important;
}



.woocommerce .woocommerce-error, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info{
	background-color: #D32F2F !important;
}
.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info {
	background-color: #9E8573 !important;
}
.woocommerce .woocommerce-error li a, .woocommerce .woocommerce-info li a, .woocommerce .woocommerce-message li a, .woocommerce .woocommerce-error li a, .woocommerce .woocommerce-info li a, .woocommerce .woocommerce-message li a {
	color: #fff !important;
}

.studio-icon-mobile-menu .et_mobile_menu .shop-container {
	display: none !important;
}

.studio-icon-mobile-menu .et_pb_menu__menu {
	display: none !important;
}

/* ~~~~~~~~~~~~~~~	Algemeen ~~~~~~~~~~~~~~~ */
:root {
	--primary_color: #9E8573;  /* Hoofdkleur */
	--secondary_color: #c5a88f;  /* Secundaire kleur */
	--accent_color: #33A1FF;  /* Accentkleur */
	--text_dark_color: #333333;  /* Tekstkleur donkere */
	--text_light_color: #fff;  /* Tekstkleur licht */
	--black_color: #000000;   /* Zwarte kleurtint */
	--white_color: #ffffff;   /* Witte kleurtint */
	--page_text_color: #000;
	/* ~~~~~~~~~~~~~~~	Algemeen END  ~~~~~~~~~~~~~~~ */

	/* ~~~~~~~~~~~~~~~	Header / Menu  ~~~~~~~~~~~~~~~ */

	--header_menu_background_color: rgba(255, 255, 255, .55); 
	--header_menu_color: rgba(255, 255, 255, .55);
	--menu_text_color: var(--black_color);
	--menu_text_hover_color: var(--secondary_color);
	--top_nav_background_color: var(--black_color);
	--top_nav_text_color: var(--white_color);

	/* ~~~~~~~~~~~~~~~	Header / Menu END ~~~~~~~~~~~~~~~ */

	/* ~~~~~~~~~~~~~~~	BUTTONS ~~~~~~~~~~~~~~~ */

	--primary_button_color: var(--primary_color); /* Achtergrond kleur */
	--primary_button_border_color: #fff; /* Border kleur */
	--primary_button_text_color: #fff;  /* Tekst kleur */
	--primary_button_hover_color: var(--secondary_color); /* Achtergrond HOVER kleur */
	--primary_button_border_hover_color: #fff; /* Border HOVER kleur */
	--primary_button_text_hover_color: #fff; /* Tekst HOVER kleur */

	--secondary_button_color: var(--secondary_color); /* Achtergrond kleur */
	--secondary_button_border_color: #fff; /* Border kleur */
	--secondary_button_text_color: #fff;  /* Tekst kleur */
	--secondary_button_hover_color: var(--primary_color); /* Achtergrond HOVER kleur */
	--secondary_button_border_hover_color: #fff; /* Border HOVER kleur */
	--secondary_button_text_hover_color: #fff; /* Tekst HOVER kleur */
}
/* ~~~~~~~~~~~~~~~	BUTTONS END ~~~~~~~~~~~~~~~ */

/* ------------------------------------------------ Huisstijl / Branding Colors END ------------------------------------------------ */

/* ------------------------------------------------ GENERAL ------------------------------------------------ */

h1, h2, h3, h4, h5, h6, p, .et_pb_text_inner, .et_pb_slide_content, .et_pb_code_inner div {
	color: var(--page_text_color);
}

.studio-icon-page-body-header h1, .studio-icon-page-body-header h6 {
	color: var(--page_text_color);
}

.studio-icon-page-footer-col-bg {
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
}

.studio-icon-page-footer-col-cta {
	background-color: var(--primary_color);
	border-radius: 0 0 10vw 0;
}

.studio-icon-page-footer-col-cta > div {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: center;
	border-radius: 0 0 10vw 0;
}

.studio-icon-page-footer-col-cta > div .et_pb_code_inner {
	height: 100%;
	width: 100%;
	border-radius: 0 0 10vw 0;
}


.studio-icon-page-footer-col-cta > div a {
	border-radius: 0 0 10vw 0;
	border: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	width: 100%;
	height: 100%;
	min-height: 3rem;
	font-size: 14px;
}

.grecaptcha-badge { 
	visibility: hidden !important; 
}

h2 {
	font-size: 2.1rem;
	line-height: 2.8rem;
	font-weight: 700;
}

h3 {
	font-size: 2rem;
	line-height: 2.7rem;
	font-weight: 700;
}

p, .et_pb_text_inner, .et_pb_slide_content {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6rem;
}

.glow-effect-text, .glow-effect-container > * {
	text-shadow: 0 0 28px rgb(138 110 90 / 60%), 
		0 0 20px rgb(138 110 90 / 60%), 
		0 0 30px var(--primary_color);
}

@media only screen and (max-width: 768px) {
	h2 {
		font-size: 2.2rem;
		font-weight: 700;
	}

	h3 {
		font-size: 1.7rem;
		font-weight: 700;
	}

	p, .et_pb_text_inner {
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.3rem;
	}
}

.studio-icon-img-styling img {
	max-width: 100%;
	height: auto;
	border: 2px solid var(--secondary_color);
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	display: block;
	margin: 20px auto;
}


/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

/*** Hide Sidebar ***/
#sidebar {display:none;}

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
	#left-area {
		width: 100%;
		padding: 23px 0px 0px !important;
		float: none !important;
	}
}

#page-container {
	overflow-x: hidden;
}

/* ------------------------------------------------ GENERAL END ------------------------------------------------ */

/* ------------------------------------------------ HEADER / MENU ------------------------------------------------ */

body.no-scroll {
	overflow: hidden; 
	height: 100vh;
}

.header-menu-container .et_pb_row {
	width: 100% !important;
}

header .et_builder_inner_content {
	z-index: 99999;
	height: 90px !important;
}
.header-menu-topnav-container {
	z-index: 99999;
	background-color: var(--top_nav_background_color);
}

.header-menu-container {
	z-index: 99999;
	padding: 0 !important;
	background: var(--header_menu_background_color);
	transition: background-color .3s ease;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

.sticky .header-menu {
	background-color: transparent;
}
.header-menu {
	z-index: 99999 !important;
}

.header-menu .header-menu-column1 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.header-menu .header-menu-column1 .menu-button-container {
	justify-content: flex-start;
}


.header-menu .header-menu-column1 .et_pb_image {
	justify-content: center;
	text-align: center;
}

.header-menu .header-menu-column1 .header-menu-icon-nav {
	display: flex;
	justify-content: flex-end;
}

.header-menu .header-menu .et-menu-nav .et-menu {
	width: 100%;
	margin: 0 20px !important;
}

.header-menu .et_pb_menu {
	background-color: transparent !important;
}


.header-menu .et-menu-nav li {
	padding-left: 10px !important;
	padding-right: 10px !important;
	font-size: 15px !important;
	text-transform: capitalize;
	font-weight: 700;
}

.header-menu .et-menu > li.current-menu-item a {
	text-shadow: 2px 2px 3px var(--menu_text_hover_color);
}

.header-menu .et-menu > li.current-menu-item > a:hover {
	color: var(--menu_text_color) !important;
	text-shadow: 2px 2px 3px var(--menu_text_hover_color) !important;
}

.header-menu .et-menu > li > a, .studio-icon-menu-logo , .studio-icon-menu-button {
	z-index: 999999;
}

.header-menu .et-menu-nav li:hover {
	cursor: pointer !important;
}

.header-menu .et-menu-nav li a:hover {
	color: var(--menu_text_color) !important;
	text-shadow: 2px 2px 3px var(--menu_text_hover_color);
	cursor: pointer !important;
}

.header-menu .current_page_item a:after {
	transform: none !important;
}

.header-menu .et-menu a {
	transition: none !important;
	opacity: 1 !important;
	color: var(--menu_text_color) !important;
}

.header-menu .et_pb_image_wrap img {
	object-fit: contain;
	z-index: 99999;
}

.header-menu.et-menu a:hover {
	transition: none !important;
	opacity: 1 !important;
	color: var(--menu_text_hover_color);
}

.header-menu .et-menu li.current-menu-item:not(.menu-item-has-children) a:after {
	background: var(--menu_text_color); /* Gebruik de variabele of een standaard kleur */
}

.header-menu .et-menu li:not(.menu-item-has-children) a:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%; /* De onderstreping moet de breedte van de link hebben */
	height: 2px; /* Dikte van de onderstreping */
	background: var(--menu_text_hover_color); /* Gebruik de variabele of een standaard kleur */
	transform: scaleX(0); /* Begin de onderstreping met een breedte van 0 */
	transform-origin: 100% 100%; /* Start de animatie van rechts */
	transition: transform 0.35s ease; /* Zorg voor een vloeiende overgang */
}


.header-menu .et-menu li:not(.menu-item-has-children) a:hover:after {
	transform: scaleX(1); /* Maak de onderstreping volledig zichtbaar bij hover */
	transform-origin: 0% 0%; /* Eindig de animatie aan de linkerkant */
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children > a {
	padding-right: 0 !important;
	display: flex !important;
}

.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children:hover ul.sub-menu {
	/*    opacity: 1; */
	visibility: visible;
	clip-path: inset(0 0 0 0); /* Zorgt ervoor dat het menu opent zonder hoogteverlies */
}

/* Zorgt voor een soepel inklap-effect */
.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children:not(:hover) ul.sub-menu {
	/*  opacity: 0; */
	visibility: hidden !important;
	clip-path: inset(0 0 100% 0);
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu {
	width: 100% !important;
	position: fixed !important;
	margin-top: -70px !important;
	padding-top: 70px !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: 0 7px 7px 0px rgba(0, 0, 0, 0.2) !important;
	cursor: default !important;

	/* 	 opacity: 0; */
	visibility: hidden;
	clip-path: inset(0 0 100% 0); /* Verbergt het menu van onder naar boven */
	transition: 
		opacity 0.45s ease-in-out, 
		clip-path 0.45s ease-in-out, 
		visibility 0.45s ease-in-out;
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu li {
	background-color: var(--white_color) !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
	display: flex !important;
	justify-content: center;
}

.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu > li:first-child { 
	padding-top: 10px !important;
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu > li:last-child { 
	padding-bottom: 10px;
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu li:hover a {
	color: var(--menu_text_hover_color) !important;
	background-color: transparent !important
}


.header-menu .et_pb_menu__menu .et-menu > li.menu-item-has-children ul.sub-menu li a {
	text-align: center;
	font-weight: 700;
	width: 300px !important;
}

/* Het eerste item in de sub-menu krijgt een lijn bovenaan */
.menu-item-has-children:hover > .sub-menu li:first-child::before {
	content: '';
	position: absolute;
	top: 0; /* Plaats de lijn aan de bovenkant van het eerste item */
	left: 0;
	width: 100%; /* Laat de lijn over de gehele breedte van het sub-menu-item verschijnen */
	height: 2px; /* Dikte van de lijn */
	background: #E71664; /* Kleur van de lijn */
	transform: scaleX(0); /* Begin de lijn met breedte 0 */
	transform-origin: 100% 100%; /* Begin de animatie van rechts */
	transition: transform 0.3s ease; /* Vloeiende overgang voor de lijn */
}

/* Lijn verschijnt boven het eerste item in het sub-menu */
.menu-item-has-children:hover > .sub-menu li:first-child::before {
	transform: scaleX(1); /* Maak de lijn volledig zichtbaar */
	transform-origin: 0% 0%; /* Eindig de animatie aan de linkerkant */
}

.menu-button-container {
	display: flex;
	justify-content: flex-end;
}

.mobile-menu-slide-header {
	z-index: 999999;
	position: fixed;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid #ddd;
	align-items: center;
	top: 0;
}

.mobile-menu-slide-header img {
	height: 2rem;
	width: auto;
	display: flex;
}

.extra-menu-button {
}

.menu-button {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: flex-start;
	width: 30px;
	height: 30px;
	cursor: pointer;
	overflow: visible;
}

.menu-button span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--menu_text_color);
	border-radius: 3px;
	transition: transform 0.3s ease, opacity 0.3s ease;
	position: relative;
}

.menu-button span:nth-child(1) {
	width: 100%; 
}
.menu-button span:nth-child(2) {
	width: 80%;
}
.menu-button span:nth-child(3) {
	width: 60%;
}

.menu-button.open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
	width: 100%;
}
.menu-button.open span:nth-child(2) {
	opacity: 0;
}
.menu-button.open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
	width: 100%;
}

/* .fullscreen-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-color: var(--white_color);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

.fullscreen-menu.active {
opacity: 1;
visibility: visible;
}

.fullscreen-menu .et_mobile_nav_menu ul {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-20px);
transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.has_et_pb_sticky .fullscreen-menu.active .et_mobile_nav_menu ul {
max-height: calc(100vh - 75px); 
}

/* .fullscreen-menu.active .et_mobile_nav_menu ul {
max-height: calc(100vh - 95px); 
opacity: 1;
transform: translateY(0);
display: block !important;
opacity: 1;
visibility: visible;
height: auto;
overflow: scroll;
display: flex !important;
flex-direction: column;
padding: 5rem .8rem !important
}

.fullscreen-menu.active .et_mobile_nav_menu .sub-menu {
padding: 0.5rem !important;
}

.et_mobile_menu li a {
font-size: 1.3rem !important;
font-weight: 600 !important;
}

.has_et_pb_sticky .fullscreen-menu.active .et_mobile_menu {
top: 75px !important;
}

.fullscreen-menu.active .et_mobile_menu {
position: fixed !important;
top: 95px !important;
border: none;
padding-top: 0px;
box-shadow: none;
}

.fullscreen-menu .et_mobile_nav_menu ul {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-20px);
transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease; 
padding: 0px;
} */ 


/* ========== MOBILE OFF-CANVAS: .fullscreen-menu vanaf links ========== */
@media (max-width: 980px){

	/* Paneel zelf (off-canvas) */
	.fullscreen-menu{
		padding: 0 !important;
		position: fixed;
		top: 0;
		left: 0;
		width: 86vw;                 /* breedte van het paneel */
		max-width: 420px;
		height: 100dvh;              /* volle mobiele hoogte */
		background-color: var(--white_color, #fff);
		display: flex;
		flex-direction: column;
		justify-content: flex-start; /* inhoud begint bovenaan */
		align-items: stretch;
		z-index: 999999999;
		/* i.p.v. opacity/visibility -> slide in/out */
		transform: translateX(-100%);
		opacity: 1;                  /* mag zichtbaar zijn buiten beeld */
		visibility: hidden;          /* maar niet clickable tot open */
		transition:
			transform .35s cubic-bezier(.2,.8,.2,1),
			visibility .35s step-end;
		box-shadow: 0 10px 30px rgba(0,0,0,.18);
		will-change: transform;
		overflow: hidden;            /* scroll gebeurt op de UL */
	}

	.fullscreen-menu.active{
		transform: translateX(0);
		visibility: visible;
		transition:
			transform .35s cubic-bezier(.2,.8,.2,1),
			visibility 0s step-start;
	}

	.fullscreen-menu .et_pb_row--with-menu {
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Overlay (optioneel, maar lekker “Coolblue/MediaMarkt”-achtig) */
	@media (max-width:980px){
		/* Overlay achter het menu */
		.si-backdrop{
			position: fixed;
			inset: 0; /* top:0; right:0; bottom:0; left:0 */
			background: rgba(0,0,0,.4); /* donkere overlay */
			opacity: 0;
			pointer-events: none;       /* klikjes gaan erdoorheen als hij niet actief is */
			transition: opacity .35s ease;
			z-index: 999998;              /* net onder je slide menu */
		}
		body.si-menu-open .si-backdrop{
			opacity: 1;
			pointer-events: auto;       /* overlay vangt nu kliks op */
		}
	}


	/* Body scroll lock bij open menu */
	html.si-lock, body.si-lock{ overflow: hidden !important; touch-action: none; }

	/* ====== Inhoud UL: eigen scroll + padding t.o.v. header ====== */
	.fullscreen-menu .et_mobile_nav_menu ul{
		display: block !important;
		max-height: none !important;
		height: 100%;
		/* animatie van links naar rechts (subtiel) */
		transform: translateX(-12px);
		opacity: 0;
		transition: transform .3s ease .1s, opacity .3s ease .1s;
		box-shadow: none !important;
		border: none !important;

		/* ruimte onder en boven (boven = header compensatie) */
		padding: 95px .8rem 2rem !important; /* 95px = normale header hoogte */
	}

	/* Als header sticky is, iets minder marge boven */
	.has_et_pb_sticky .fullscreen-menu .et_mobile_nav_menu ul{
		padding-top: 75px !important;
	}

	.fullscreen-menu.active .et_mobile_nav_menu ul{
		transform: translateX(0);
		opacity: 1;
		width: 86vw;
	}

	/* Submenu compact */
	.fullscreen-menu.active .et_mobile_nav_menu .sub-menu{
		padding: .5rem !important;
	}

	/* Typo styling die je eerder had */
	.et_mobile_menu li a{
		font-size: 1rem !important;
		font-weight: 600 !important;
	}
}






.et_mobile_nav_menu .mobile_menu_bar {
	display: none;
}

.et_mobile_nav_menu ul li {
	margin: 0; 
	list-style: none;
}

.et_mobile_nav_menu ul li a {
	color: var(--menu_text_color);
	text-decoration: none;
	padding: 10px 10px;
	display: block;
	border: none !important;
}
.et_mobile_nav_menu ul li a:hover {
	background-color: #fff;
	color: var(--menu_text_color);
	opacity: 1;
}

.et_mobile_menu .menu-item-has-children > a {
	background-color: #fff !important;
}

.et_mobile_menu .menu-item-has-children:hover > .sub-menu li:first-child::before	{
	background-color: var(--menu_text_color);
}


.menu-item-has-children .sub-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background-color: #fff;
	z-index: 1000 !important;
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-item-has-children.open > .sub-menu {
	display: block;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

.sub-menu.visible {
	position: relative;
}

.menu-item.menu-item-has-children {
	display: flex;
	align-items: center;
}


.menu-item.menu-item-has-children.dt-open {
	flex-wrap: wrap;
}

.menu-item.menu-item-has-children > a {
	flex: 1 1 50%; 
	text-align: center;
}


.menu-item.menu-item-has-children > a:first-child {
	text-align: left; 
}

.menu-item.menu-item-has-children > a.mobile-toggle {
	text-align: right; 
}

.menu-item.menu-item-has-children > ul.sub-menu {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
	margin: 0;
	list-style: none;
	box-shadow: none;
}


.menu-item.menu-item-has-children > ul.sub-menu > li {
	width: 100%;
}


ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	opacity: 1;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: var(--menu_text_color);
}

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}

.notificationBarHeader a {
	color: var(--top_nav_text_color);
	font-size: .8rem;
}
.notificationBarHeader a:first-child {
	margin-right: 2rem;
}

.header-account-icon {
	margin: 0 4px 0 8px;
}

.header-search-icon  {
	cursor: pointer;
	font-size: 28px !important;
	transition: color 0.3s ease;
	margin-right: 4px;

}
.header-account-icon span {
	cursor: pointer;
	font-size: 28px !important;
	transition: color 0.3s ease;
	margin-right: 8px;
}
.header-search-icon:hover {
	color: #007bff;
}

.dgwt-wcas-search-wrapp {
	width: 480px;
	max-width: 100%;
}

.si-wcas-search-row-mobile .dgwt-wcas-search-wrapp {
	width: 95%;
}


@media only screen and (min-width: 981px) {

	.studio-icon-mobile-menu {
		display: none !important;
	}

	.header-menu-container.sticky {
		position: fixed; /* Maak sticky wanneer de top wordt bereikt */
		top: 0;
		z-index: 99999 !important;
		border-radius: 0;
		width: 100%;
		max-width: 100%;
		transition: all 0.3s ease; /* Vloeiende overgang */
	}
	.menu-button-container {
		display: none;
	}
	.et-menu .menu-item-has-children>a:first-child:after {
		position: relative !important;
	}

	.header-menu .header-menu-column1 .header-search-column{
		grid-column: 2;
		grid-row: 1;
	}
	.header-menu .header-menu-column1 .header-logo-column {
		display: flex;
		justify-content: flex-start;
	}
	.desktop-hoofdmenu .et_pb_menu__wrap{
		border-bottom: 1px solid #E71660;
		padding: 0 0 0 0!important;
	}

	.desktop-hoofdmenu .et_pb_menu__menu {
		max-width: 1480px;
		margin: 0 auto;
	}
	.desktop-hoofdmenu li a {
		color: #E71660;
		font-weight: 700;
		font-size: 1rem;
	}
	
	.desktop-hoofdmenu .et-menu > li {
		padding-bottom: 10px !important;
	}
	.desktop-hoofdmenu .sub-menu {
		border: none !important;
	}
}


@media only screen and (max-width: 980px) {
	.menu-desktop-only, .menu-button-desktop-only {
		display: none !important;
	}
	.si-wcas-search-row-mobile {
		background: #eee;
	}
}

@media only screen and (min-width: 981px) {
	.mobile-menu-slide-header {
		display: none !important;
	}
}


/* ------------------------------------------------ HEADER / MENU END ------------------------------------------------ */

/* ------------------------------------------------ BUTTONS ------------------------------------------------ */


/* Basisstijl voor de knop */
.rounded-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	padding: 15px 32px;
	background-color: transparent;
	border-radius: 50px;
	color: var(--primary_color);
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.44px;
	border: 1px solid rgba(228, 224, 219, 0.6);
	background: linear-gradient(to top, #dfd0c0 50%, transparent 50%);
	background-size: 100% 200%;
	background-position: top left;
	transition: all 0.2s ease-out;
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
	z-index: 99999;
}


/* Pseudo-element voor de hover achtergrond */
.rounded-btn::before {
	content: '';
	position: absolute;
	bottom: -100%; /* Start buiten de knop */
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8); /* Hover achtergrondkleur */
	z-index: 0;
	transition: transform 0.5s ease; /* Vloeiende overgang */
	transform: translateY(100%); /* Startpositie */
}

/* Tekst en inhoud boven de achtergrond */
.rounded-btn span {
	position: relative;
	z-index: 1;
}

/* Hover-effect: Achtergrond beweegt naar boven */
.rounded-btn:hover::before {
	transform: translateY(0); /* Vul de knop */
}

/* Hover-effect: Verander tekstkleur */
.rounded-btn:hover {
	color: var(--secondary_color); /* Tekstkleur bij hover */
	background-position: bottom left; /* Laat de kleur omhoog bewegen */
	transform: translateY(-8px); /* Knop beweegt omhoog */
	box-shadow: 0 16px 20px -10px var(--secondary_color);
}

/* Reset de achtergrond bij het verlaten van hover */
.rounded-btn:hover::before {
	transform: translateY(-100%); /* Verwijder van boven naar beneden */
}

/* Specifieke kleuren buttons */

/* Black button */
.rounded-btn.black-btn {
	background-color: var(--black_color);
	border-color: rgba(228,224,219,.6);
	color: var(--white_color);
}

.rounded-btn.black-btn::before {
	background-color: var(--white_color);
}

.rounded-btn.black-btn:hover {
	color: var(--black_color);
}

/* White button */
.rounded-btn.white-btn {
	background-color: #FEFEFC;
	border-color: rgba(138, 110, 90, 0.6);
	color: var(--primary_color);
}

.rounded-btn.white-btn::before {
	background-color: var(--primary_color);
}

.rounded-btn.white-btn:hover {
	color: #FEFEFC;
}

/* Button wrapper - Center alignment */

.studio-icon-btn-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-full-width {
	width: 100%;
}

/* branding primary button */
.rounded-btn.branding-primary-btn {
	background-color: var(--primary_button_color);
	border-color: var(--primary_button_border_color);
	color: var(--primary_button_text_color);
}

.rounded-btn.branding-primary-btn::before {
	background-color: var(--primary_button_hover_color);
}

.rounded-btn.branding-primary-btn:hover {
	color: var(--primary_button_text_hover_color);
}


/* branding secondary button */
.rounded-btn.branding-secondary-btn {
	background-color: var(--secondary_button_color);
	border-color: var(--secondary_button_border_color);
	color: var(--secondary_button_text_color);
}

.rounded-btn.branding-secondary-btn::before {
	background-color: var(--secondary_button_hover_color);
}

.rounded-btn.branding-secondary-btn:hover {
	color: var(--secondary_button_text_hover_color);
}


/* jpm webshop button */
.jpm-webshop-button {
	padding: 6px 32px;
	background-color: var(--menu_text_color) !important;
}

.jpm-webshop-button::before  {
	background-color: var(--menu_text_hover_color) !important;
}

.jpm-webshop-button svg {
	height: 40px;
	margin-right: 20px;
	z-index: 9
}
.jpm-webshop-button svg path { 
	fill: #fff;
}
.jpm-webshop-button span {
	font-size: 16px;
	color: #fff;
	font-weight: 600;
}
/* jpm webshop button END */


/* Scroll down button */

.scroll-button {
	position: absolute;
	left: 50%;
	bottom: -25px; /* Zorgt dat de knop half zichtbaar is */
	transform: translateX(-50%);
	cursor: pointer;
	z-index: 10;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2)); /* Lichte schaduw */
}

.scroll-button:hover {
	transform: translateX(-50%) translateY(5px);
	filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.3)); /* Iets sterkere schaduw bij hover */
}


/* Animatie voor scroll-aanwijzing */
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	40% {
		transform: translateX(-50%) translateY(-10px);
	}
	60% {
		transform: translateX(-50%) translateY(-5px);
	}
}

.scroll-button {
	animation: bounce 2s infinite;
}

/* Scroll down button END */



/* ------------------------------------------------ Buttons END ------------------------------------------------ */


/* ------------------------------------------------ FOOTER ------------------------------------------------ */

/* ======== FOOTER STYLES (scoped met .si-footer) ======== */

.si-footer a {
	color: #000;
	text-decoration: none;
}

.si-footer a:hover,
.si-footer a:focus {
	opacity: 0.85;
	text-decoration: underline;
}

.si-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 16px;
}

.si-footer__rule {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin: 16px 0;
}


/* ========== GRID ========== */
.si-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.si-footer__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.si-footer__title {
	font-size: 16px;
	line-height: 1.2;
	margin: 4px 0 8px 0;
	font-weight: 600;
}

.si-footer__list {
	list-style-type: none !important;
	margin: 0;
	padding: 0;
	list-style: none !important;
	padding: 0 !important;
	line-height: normal !important;
}

.si-footer__list li {
	margin: 0.4rem 0;
}

.si-footer__text {
	font-size: 14px;
	margin: 0.5rem 0 0;
}


/* ========== SOCIAL ========== */
.si-footer__social {
	display: flex;
	gap: 12px;
	margin: 0.5rem 0 0;
}

.si-footer__social-link {
	display: inline-flex;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
}

.si-footer__social-link svg {
	width: 18px;
	height: 18px;
	fill: #000;
}

.si-footer__social-link:hover {
	background: rgba(255, 255, 255, 0.16);
}


/* ========== CTA / NEWSLETTER ========== */
.si-footer__cta {
	text-align: center;
	padding: 10px 0 6px;
}

.si-footer__headline {
	font-size: 16px;
	margin: 0;
	padding: 0;
	line-height: 1;
}

.si-footer__sub {
	font-size: .9rem;
	margin: 0 0 12px 0;
	padding: 0;
	font-weight: 500;
}

.si-footer__form {
	max-width: 560px;
	margin: 0 auto;
}

.si-footer__label {
	display: none;
}

.si-footer__form-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.si-footer__input {
	flex: 1;
	min-width: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: #0b0d11;
	color: #e9eef5;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 15px;
	outline: none;
}

.si-footer__input::placeholder {
	color: #a9b3c7;
}

.si-footer__input:focus {
	border-color: #6ea8ff;
	box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.2);
}

.si-footer__btn {
	border: 0;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	background: #2a6df5;
	color: #fff;
}

.si-footer__btn:hover {
	filter: brightness(1.05);
}

@media (max-width: 480px) {
	.si-footer__form-row {
		flex-direction: column;
		align-items: stretch;
	}

	.si-footer__btn {
		width: 100%;
	}
}


/* ========== LANGUAGE SWITCHER ========== */
.si-footer__lang {
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	margin: 12px 0 0;
}

.si-footer__lang a {
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
}

.si-footer__lang a.is-active {
	background: #2a6df5;
}


/* ========== PAYMENTS ========== */
.si-footer__payments {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
}

.si-footer__payments img {
	height: 26px;
	width: auto;
	filter: grayscale(15%) contrast(110%);
}


/* ========== LEGAL ========== */
.si-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}

@media (min-width: 768px) {
	.si-footer__legal {
		justify-content: space-between;
	}
}

.si-footer__legal-links {
	display: flex;
	gap: 8px;
	align-items: center;
}


/* ========== LARGE SCREENS SPACING ========== */
@media (min-width: 1024px) {
	.si-footer__inner {
		padding: 24px;
	}

	.si-footer__title {
		font-size: .9rem;
	}

	.si-footer__headline {
		font-size: 1rem;
	}
}


/* ========== DIVI RESET GUARDS ========== */
.si-footer .et_pb_text_inner,
.si-footer .et_pb_module_inner {
	padding: 0;
	margin: 0;
}


/* ------------------------------------------------ FOOTER END ------------------------------------------------ */


/* ------------------------------------------------ Home page ------------------------------------------------ */
.home #et-main-area {
	padding-top: 0 !important;
}
.home-main-image img {
	object-fit: cover;
}

.landing-scroll-down-section {
	margin-top: -250px;
}


.studio-icon-rounded-img {
	display: flex;
	align-items: center;
	justify-content: center;
}

.studio-icon-rounded-img img {
	width: 33vw; /* Pas de grootte aan */
	height: 33vw;
	max-height: 500px;
	max-width: 500px;
	object-fit: cover; /* Zorgt ervoor dat de afbeelding correct wordt bijgesneden */
	border-radius: 50%;
	display: block;
	margin: 0 auto;
}

.studio-icon-circle-image-info {
	display: flex;
	align-items: center;
}

.studio-icon-circle-image-info-col1, .studio-icon-circle-image-info-col3 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.studio-icon-circle-image-info-col2 {
	margin: 0 auto !important;
}

.studio-icon-tekst-with-link a {
	color: var(--primary_color);
	text-decoration: underline;
}

.home-intro-img img {
	width: 45vw;
	height: 45vw;
	max-width: 600px !important;
	max-height: 600px !important;
	object-fit: cover; /* Zorgt ervoor dat de afbeelding netjes gevuld wordt */

	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M39.1,323.1C0.8,467.2,120,542.7,158.7,607.8c52.1,87.7,105,324.6,323.4,320.7 c225.6-4.1,499.6-137.4,501.1-321.1c1.5-175.3-106.6-468-452.6-500C190.7,76,67,217.8,39.1,323.1z"/></svg>');

	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M39.1,323.1C0.8,467.2,120,542.7,158.7,607.8c52.1,87.7,105,324.6,323.4,320.7 c225.6-4.1,499.6-137.4,501.1-321.1c1.5-175.3-106.6-468-452.6-500C190.7,76,67,217.8,39.1,323.1z"/></svg>');

	mask-size: cover; /* Zorgt ervoor dat de maskering de hele afbeelding bedekt */
	-webkit-mask-size: cover;

	mask-position: center; /* Centraal uitlijnen */
	-webkit-mask-position: center;
}

.home-intro-row {
	display: flex;
	align-items: center;
}

.studio-icon-home-colored-promo-products img {
	height: 275px;
	object-fit: contain;
}

@media only screen and (min-width: 1240px) {
	.product-category-grid-row .et_pb_module_header {
		font-size: 25px;
		padding-left: 14px;
	}
}

@media only screen and (min-width: 981px) and (max-width: 1239px) {
	.product-category-grid-row .et_pb_module_header {
		font-size: 22px;
		padding-left: 10px;
	}
}

@media only screen and (max-width: 980px) {
	.home-intro-row {
		flex-direction:column;
	}
	.studio-icon-circle-image-info {
		flex-direction: column;
	}


	.home-intro-img img {
		width: 80vw !important;
		height: 80vw;
	}

	.studio-icon-rounded-img img {
		width: 80vw !important; 
		height: 80vw !important;
		max-height: 600px;
		max-width: 600px;
		margin-bottom: 30px;
	}
	.product-category-grid-row {
		display: grid;
		grid-template-columns: 1fr 1fr !important;
	}

	.product-category-grid-row .et_pb_module_header {
		font-size: 20px;
		padding-left: 12px;
	}
}

.product-category-grid-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 1%;
}
.product-category-grid-row .et_pb_column {
	width: 100% !important;
	cursor: pointer;
}

.product-category-grid-row .et_pb_module_header::after {
	content: "\35"; /* Divi pijl-icoon (>) */
	font-family: 'ETmodules'; /* Divi's icoon font */
	font-size: 1em;
	margin-left: 2px; /* Ruimte tussen tekst en icoon */
	transition: transform 0.15s ease-in-out; /* Smooth animatie */
	display: inline-block; /* Zorgt ervoor dat transform werkt */
}


.product-category-grid-row .et_pb_column .et_pb_main_blurb_image img {
	transition: transform 0.15s ease-in-out;
}

.product-category-grid-row .et_pb_column:hover .et_pb_main_blurb_image img {
	transform: scale(1.04);
	cursor: pointer;
}


.product-category-grid-row .et_pb_column .et_pb_module_header {
	transition: transform 0.15s ease-in-out;
	display: flex;
	align-items: center;
}

.product-category-grid-row .et_pb_column:hover .et_pb_module_header::after {
	transform: translateX(5px); /* Icoon schuift naar rechts */
	cursor: pointer;
}




/* ------------------------------------------------ Home page END ------------------------------------------------ */

/* ------------------------------------------------ Magnetic Button ------------------------------------------------ */


.magnetic-button {
	position: relative;
	transition: transform .6s ease-out;
	cursor: pointer !important;
}

/* ------------------------------------------------ Magnetic Button END ------------------------------------------------ */


/* ------------------------------------------------ Floating Appointment Button ------------------------------------------------ */

/* Basisstijl voor het flapje */
.studio-icon-floating-flap {
	position: fixed;
	left: -150px;
	top: 80vh;
	transform: translateY(-50%);
	width: 210px;
	height: 60px;
	background: #ff6b6b;
	color: white;
	border-radius: 0 25px 25px 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 20px;
	box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: left 0.3s ease-in-out, background 0.3s;
	z-index: 999999999999999999;
	text-decoration: none;
}

/* Open het flapje bij hover */
.studio-icon-floating-flap:hover {
	left: 0;
	background: #ff4b4b;
}

/* Icoon stijl */
.studio-icon-flap-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Tekst verschijnt bij hover */
.studio-icon-flap-content {
	opacity: 0;
	margin-right: auto; /* Zorgt ervoor dat de tekst naar links schuift */
	padding-left: 10px;
	transition: opacity 0.3s ease-in-out;
	font-size: 14px;
	font-weight: bold;
	color: white;
}

.studio-icon-floating-flap:hover .studio-icon-flap-content {
	opacity: 1;
}

/* ------------------------------------------------ Floating Appointment Button END ------------------------------------------------ */



/* ------------------------------------------------ Typing Effect ------------------------------------------------ */


.typing-effect {
	font-family: "Playfair Display", serif;
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--primary_color);
	margin: 0 auto;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	overflow-x: auto; /* Horizontaal scrollen toestaan */
	max-width: 100%;
	position: relative;
	padding: 0.35em 0; /* Extra ruimte boven en onder de tekst */
	line-height: 1.2; /* Zorg voor consistente lijnhoogte */
	height: auto; /* Laat JavaScript de hoogte aanpassen */
}

/* Scrollbar verbergen in Webkit-browsers (Chrome, Safari) */
.typing-effect::-webkit-scrollbar {
	display: none;
}

/* Scrollbar verbergen in andere browsers */
.typing-effect {
	-ms-overflow-style: none; /* Verberg in IE en Edge */
	scrollbar-width: none; /* Verberg in Firefox */
}

.typing-effect-h4 {
	font-size: 1.6rem;
}

.typing-effect.typing-active {
	visibility: visible;
	opacity: 1;
}

.cursor {
	display: inline-block;
	border-right: 2px solid var(--primary_color);
	margin-left: 3px;
	height: 1.2em; /* Hoogte van de cursor gebaseerd op de tekst */
	animation: blink 0.5s step-end infinite;
}

@keyframes blink {
	50% {
		border-color: transparent;
	}
}


/* ------------------------------------------------ Typing Effect END ------------------------------------------------ */


/* ------------------------------------------------ Price List page  ------------------------------------------------ */

.studio-icon-pricelist-section {

}

.studio-icon-price-list-header {
	-webkit-box-shadow: 0px 20px 20px var(--primary_color);
	-moz-box-shadow: 0px 20px 20px var(--primary_color);
	box-shadow: 0px 20px 20px var(--primary_color);
	margin-top: 6rem;
	background-color: var(--white_color);
	border-radius: 15px 15px 0 0;
}

.studio-icon-pricelist-header-title .et_pb_text_inner {
	text-align: center;
	color: #3e353b;
	font-size: 3rem;
	line-height: 1;
	text-transform: uppercase;
}

.studio-icon-pricelist-section .studio-icon-pricelist-row:last-child {
	padding-bottom: 60px !important;
	border-radius: 0 0 15px 15px;
}

.studio-icon-pricelist-row {
	position: relative;
	background-color: #fff;
	-webkit-box-shadow: 0px 20px 20px var(--primary_color);
	-moz-box-shadow: 0px 20px 20px var(--primary_color);
	box-shadow: 0px 20px 20px var(--primary_color);
	padding: 0 30px 40px 30px !important;}

.studio-icon-price-list-sub-header, .studio-icon-price-list-sub-header p {
	text-align: center !important;
	color: #333;
	font-size: 2rem;
	font-weight: 100;
	line-height: 1;
	text-transform: uppercase;
	padding-bottom: 15px !important;
}

.studio-icon-price-list-sub-title {
	padding-left: 36px;
}

.studio-icon-price-list-sub-title p {
	font-style: italic;
	font-weight: 500;
	font-size: 1.25rem;
	margin: 10px 0;
}

.studio-icon-price-list-table {
	padding: 0 30px;
}

.studio-icon-price-list-table table {
	width: 100% !important;
	border: none !important;
}

.studio-icon-price-list-table tbody td {
	border-top: none;
	border-bottom: 1px dashed #ccc;
	padding: 12px 6px !important;
}

.studio-icon-price-list-table tbody td:nth-child(1) {
	width: 60% !important;
}

.studio-icon-price-list-table tbody td:nth-child(2) {
	width: 15% !important;
}

.studio-icon-price-list-table tbody td:nth-child(3) {
	width: 5% !important;
}

.studio-icon-price-list-table tbody td:nth-child(4) {
	width: 20% !important;
}

@media only screen and (max-width: 980px) {
	.studio-icon-pricelist-row .et_pb_column:not(:first-child) .studio-icon-price-list-sub-header  .et_pb_text_inner {
		margin-top: 3.5rem;
	}
}
/* ------------------------------------------------ Price List page END ------------------------------------------------ */


/* ------------------------------------------------ Contact page ------------------------------------------------ */

/* Algemene styling voor de dropdown-wrapper */
.filiaal-dropdown-wrapper {
	max-width: 400px;
	margin: 20px auto;
	font-family: 'Arial', sans-serif;
	position: relative;
}

/* Label styling */
.filiaal-select-label {
	font-size: 16px;
	font-weight: bold;
	color:var(--primary_color);
	margin-bottom: 8px;
	display: block;
}

/* Dropdown container styling */
.filiaal-dropdown {
	position: relative;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 8px;
	background: var(--primary_color);
	cursor: pointer;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.filiaal-dropdown.open {
	border-color: #fff;
}

/* Geselecteerde waarde styling */
.filiaal-selected {
	padding: 12px 16px;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
}

.filiaal-selected {
	position: relative; /* Zorg dat de pseudo-element goed wordt gepositioneerd */
	cursor: pointer;
}

.filiaal-selected::after {
	font-family: ETmodules; /* Gebruik de font-family als het nodig is */
	content: "3"; /* De gewenste icoon-code of tekst */
	font-size: 26px; /* Icoon grootte */
	position: absolute;
	right: 10px; /* Plaatsing vanaf de rechterkant */
	top: 50%; /* Verticaal centreren */
	transform: translateY(-50%); /* Nauwkeurige uitlijning */
	font-weight: 800;
	color: #fff; /* Icoon kleur */
	pointer-events: none; /* Zorg dat het icoon niet klikbaar is */
}

.filiaal-dropdown.open .filiaal-selected::after {
	transform: translateY(-50%) rotate(180deg); /* Draai het icoon wanneer het open is */
	transition: transform 0.3s ease; /* Smooth overgangseffect */
}

.filiaal-selected:hover {
	color: #fff;
}

/* Opties lijst styling */
.filiaal-options {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	overflow: hidden;
	list-style-type: none !important;
	list-style: none !important;
}

.filiaal-dropdown.open .filiaal-options {
	display: block;
	padding: 0;
}

/* Opties styling */
.filiaal-options li {
	padding: 12px 16px;
	font-size: 18px;
	font-weight: 600;
	color: var(--secondary_color);
	background: #fff;
	transition: background-color 0.3s ease, color 0.3s ease;
	cursor: pointer;
}

.filiaal-options li:hover {
	background: var(--secondary_color);
	color: #fff;
}

/* Overgangen */
.filiaal-dropdown,
.filiaal-options li {
	transition: all 0.3s ease;
}

/* Responsieve styling */
@media (max-width: 600px) {
	.filiaal-dropdown-wrapper {
		max-width: 100%;
		padding: 0 10px;
	}

	.filiaal-selected,
	.filiaal-options li {
		font-size: 16px;
	}
}

/* Wrapper styling */
.openingstijden-wrapper {
	margin: 20px auto;
	text-align: center;
	background: #f9f9f9; /* Lichtgrijze achtergrond */
	border: 2px solid var(--secondary_color);
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Titel styling */
.openingstijden-title {
	font-size: 24px;
	color: #cfa37c;
	margin-bottom: 15px;
	font-weight: bold;
	text-transform: uppercase;
}

/* Lijst styling */
.openingstijden-list {
	list-style-type: none;
	padding: 0 !important;
	margin: 0;
}

.openingstijden-list li {
	display: flex;
	justify-content: space-between;
	padding: 10px 15px;
	font-size: 16px;
	border-bottom: 1px solid #e0e0e0; /* Subtiele scheidingslijn */
	color: #333;
}

.openingstijden-list li:last-child {
	border-bottom: none; /* Geen lijn onder de laatste regel */
}

/* Dag en tijd styling */
.openingstijden-list .dag {
	font-weight: bold;
	color: var(--primary_color);
}

.openingstijden-list .tijd {
	color: var(--primary_color);
	font-style: italic;
}

/* Styling for openingstijden images */
.openingstijden-image img {
	max-width: 100%;
	height: auto;
	border: 2px solid var(--secondary_color);
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	display: block;
	margin: 20px auto;
}

.et-pb-contact-message p {
	font-size: 1.3rem;
	line-height: 2rem;
	background: green;
	color: white;
	border-radius: 100px;
	text-align: center;
	padding: 10px !important;
}


/* ------------------------------------------------ Contact page END ------------------------------------------------ */

/* ------------------------------------------------ Keratin page ------------------------------------------------ */

.keratin-col .et_pb_blurb_container {
	background-color: var(--primary_color)
}

.keratin-col  .et_pb_main_blurb_image {
	margin-bottom: 0 !important;
	display: flex;
}

.keratin-col  .et_pb_main_blurb_image img {
	height: 250px;
	object-fit: cover;
}

.keratin-col h4 {
	color: var(--white_color);
	text-shadow: 0 0 28px rgb(138 110 90 / 60%), 
		0 0 20px rgb(138 110 90 / 60%), 
		0 0 30px rgb(138 110 90 / 60%);
	text-align: center;
	padding: 15px 5px;
	vertical-align: bottom;
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.keratin-row {
		margin: 0 !important;
		justify-content: center;
	}
	body .keratin-row .et_pb_column.keratin-col {
		width: 49% !important;
		padding: 1.5% !important;
	}
}

@media (min-width: 981px) {
	.keratin-col {
		margin-top: -40px;
	}

	.keratin-col:first-child, .keratin-col:nth-child(2), .keratin-col:nth-child(3) {
		padding-right: 20px;
	}

	.keratin-col .et_pb_blurb {
		transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	}

	.keratin-col .et_pb_blurb:hover {
		transform: translateY(-10px);
		box-shadow: 0 1em 1em -0.4em var(--secondary_color);
	}

}

/* ------------------------------------------------ Keratin page END ------------------------------------------------ */


/* ------------------------------------------------ Announcement Bar ------------------------------------------------ */
.announcement-bar-row {
	background-color: var(--secondary_color);
}

.announcement-bar {
	color: white;
	z-index: 9999;
}

.announcement-container {

	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%; /* Houdt alle teksten binnen dezelfde ruimte */
}

.announcement-text {
	position: absolute;
	width: auto;
	max-width: 90%;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	white-space: nowrap; /* Voorkomt tekstafbreking */
	color: #fff !important;
	font-weight: 700;
	letter-spacing: 1px;
}	


.announcement-text.active {
	opacity: 1;
	position: relative;
}



/* ------------------------------------------------ Announcement Bar END ------------------------------------------------ */




/* ------------------------------------------------  Shop Product Category Page ------------------------------------------------ */
.studio_icon_product_category_title .et_pb_text_inner {
	font-size: 3rem;
	line-height: 3.3rem;
	font-weight: 700;
}

.studio_icon_product_category_description .et_pb_text_inner p {
	font-size: 1.1rem;
}

@media screen and (max-width: 768px) {
	.studio_icon_product_category_title .et_pb_text_inner {
		font-size: 1.8rem;
		line-height: 2.1rem;
	}
}


/* ------------------------------------------------ Shop Product Category Page END ------------------------------------------------ */



/* styling product-template */

.product-title,
.product-price {
	line-height: 16px;
	font-weight: 600;
	margin: 0;
}

.product-title {
	text-align: left;
	color: #333;
	flex: 1; /* Laat de titel de beschikbare ruimte nemen */
	white-space: normal; /* Sta meerdere regels toe */
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* Maximaal 2 regels */
	-webkit-box-orient: vertical;
	padding-bottom: 0;
	font-size: 14px;
}

.product-price {
	color: #000;
	white-space: nowrap;
	font-size: 15px;
}

/* === Hover Actions Container (Qty + Add to Cart naast elkaar) === */
.hover-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0 auto;
	background: #fff;

}

.header-cart-icon {
	margin-left: .2rem !important;
}
.xoo-wsc-qty-box {
	max-width: 76px !important;
}

.xoo-wsc-sc-bki img {
	height: 30px !important;
}

.dgwt-wcas-ico-magnifier-handler {
	margin-bottom: -.1rem !important;
}

.dgwt-wcas-ico-magnifier, .dgwt-wcas-ico-magnifier-handler {
	width: 22px !important;
	max-width: 22px !important;
}

/* === Quantity Selector Styling === */
.studio-icon-quantity-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #000;
	background: #fff;
	flex: 1;
	height: 35px;
	border-radius: 0px;
}

.studio-icon-quantity-wrapper button {
	background: none;
	border: none;
	font-weight: bold;
	cursor: pointer;
	color: #000;
}

.studio-icon-custom-quantity-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #000;
	background: #fff;
	height: 35px;
}

.single-product h2 {
	font-size: 1.2rem !important;
}
.single-product h3 {
	font-size: 1.1rem !important;
}

.single-product .studio-icon-custom-quantity-wrapper {
	border-radius: 0px !important;
	border: 1px solid #000; !important;
	height: 45px !important;
}



.studio-icon-custom-quantity-wrapper .product-quantity {
	width: 60px 
}

.studio-icon-custom-quantity-wrapper button {
	background: none;
	border: none;
	font-weight: bold;
	cursor: pointer;
	color: #000;
}


.product-quantity {
	width: 100%;
	min-width: 28px;
	text-align: center;
	border: none;
	outline: none;
	background: transparent;
}

/* Plus en min knoppen */
.quantity-minus {
	height: 100%;
	/* 	border-radius: 6px 0 0 6px; */
	padding: 0 12px;
}

.quantity-plus {
	height: 100%;
	/* 	border-radius: 0 6px 6px 0; */
	padding: 0 11px;
}

/* Verwijder standaard up/down pijltjes in input type="number" */
.product-quantity::-webkit-outer-spin-button,
.product-quantity::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.product-quantity {
	-moz-appearance: textfield;
}

/* === Add to Cart Knop Styling === */

.studio-icon-add-to-cart,
.studio-icon-custom-add-to-cart {
	text-transform: uppercase !important;
	cursor: pointer !important;
	text-align: center !important;
	position: relative !important;
	border: 1px solid #000 !important;
	border-radius: 0px !important;
	background-color: transparent !important;
	color: #fff !important;
	height: 45px;
	font-weight: 600 !important;
	letter-spacing: 2px !important;
	font-size: .95rem !important;
	/* ↓ De onderste laag is donkergroen (basis), de bovenste laag is wit (hover) */
	background-image: linear-gradient(#FF8533, #FF8533), linear-gradient(#FF6A00, #FF6A00) !important;
	/* ↓ Begin met 0% breed wit, dus onzichtbaar */
	background-size: 0% 100%, 100% 100% !important;
	/* ↓ Start links onder */
	background-position: left bottom !important;
	background-repeat: no-repeat !important;

	transition: background-size 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86),
		background-position 0.4s step-end,
		color 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86),
		border-color 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
}

.studio-icon-add-to-cart:hover,
.studio-icon-custom-add-to-cart:hover {
	background-size: 100% 100%, 100% 100% !important;
	background-position: left bottom !important;
}


.product-card .studio-icon-add-to-cart, .product-card .studio-icon-custom-add-to-cart {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 2;
	letter-spacing: 1px !important;
	font-weight: 500 !important;
	font-size: .85rem !important;
	height: 35px !important;
}

.studio_icon_products .studio-icon-add-to-cart, .studio_icon_products .studio-icon-custom-add-to-cart {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 2;
	letter-spacing: 1px !important;
	font-weight: 500 !important;
	font-size: .85rem !important;
	height: 35px !important;
}

/* .product-card .studio-icon-add-to-cart:hover, .product-card .studio-icon-custom-add-to-cart:hover {
background: #000;
color: #fff;
} */

.studio-icon-add-to-cart:disabled,
.studio-icon-custom-add-to-cart:disabled {
	background: #ccc !important;
	border: none !important;
	color: #808080 !important;
	cursor: not-allowed !important;
}


.studio-icon-custom-add-to-cart:disabled {
	background: #ccc !important;
	border: none !important;
	color: #808080 !important;
	cursor: not-allowed !important;
}


/* Status toegevoegd */
.studio-icon-add-to-cart.added {
	background-color: #28a745;
}

/* Laadicoon en check-icoon */
.studio-icon-add-to-cart .loading-icon,
.studio-icon-add-to-cart .check-icon {
	display: none;
}

/* Knop tijdens laden */
.studio-icon-add-to-cart.loading .loading-icon,
.studio-icon-add-to-cart.added .check-icon {
	display: inline-block;
}


/* Spinning effect */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.studio-icon-add-to-cart.loading .loading-icon {
	width: 16px;
	height: 16px;
	border: 2px solid white;
	border-top: 2px solid transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}





/* === Algemene styling voor de product-content === */
.product-content {
	position: relative;
	overflow: hidden; /* Voorkomt dat hover-actions buiten de card beweegt */
	height: 80px;
}

.product-info {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 8px;
	padding-bottom: 8px;
	background: #fff;
}

/* === Titel & Prijs standaard op de plek van de knoppen (alleen op desktop) === */
@media (hover: hover) {
	.product-info {
		transition: transform 0.3s ease-in-out;
		transform: translateY(40px); /* Startpositie: titel en prijs op de plek van de Add to Cart */
		opacity: 1;
	}

	/* Hover Actions standaard verborgen op desktop */
	.hover-actions {
		position: absolute;
		bottom: 0;
		width: 100%;
		opacity: 0;
		transform: translateY(100%);
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	}

	/* === Bij hover: Titel & Prijs omhoog, Hover Actions komen omhoog === */
	.studio_icon_product_card:hover .product-info,
	.studio_icon_product_card:hover .hover-actions {
		transform: translateY(0); /* Titel, prijs en knoppen bewegen samen omhoog */
	}

	.studio_icon_product_card:hover .hover-actions {
		opacity: 1;
	}
}

/* === Op touchscreen apparaten: Knoppen altijd zichtbaar === */
.touch-device .product-content {
	align-content: flex-end;
}

.touch-device .product-info {
	transform: translateY(0) !important; /* Titel en prijs blijven op hun plek */
}

.touch-device .hover-actions {
	opacity: 1 !important;
	transform: translateY(0) !important; /* Knoppen altijd zichtbaar */
	position: relative;
}

/* Zorg dat de afbeeldingen overlappen en identiek blijven */
.product-image {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px; /* Houd dezelfde rondingen */
	width: 100%; /* Zorgt ervoor dat het element zich aanpast */
	aspect-ratio: 1 / 1; /* Zorgt voor een vaste verhouding, past aan als nodig */
}

/* Zorg dat beide afbeeldingen dezelfde afmetingen hebben */
.primary-image,
.secondary-image {
	width: 100%;
	height: 100% !important;
	object-fit: scale-down;
	border-radius: inherit;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.3s ease-in-out;
}

/* Eerste afbeelding is standaard zichtbaar */
.primary-image {
	opacity: 1;
	position: relative;
}

/* Tweede afbeelding is standaard verborgen */
.secondary-image {
	opacity: 0;
}

/* Hover-effect ALLEEN als er een tweede afbeelding is */
.has-secondary-image:hover .primary-image {
	opacity: 0;
}

.has-secondary-image:hover .secondary-image {
	opacity: 1;
}


/* Container voor de prijzen, zodat oude prijs rechts staat */

/* Stijl voor de oude prijs (rechts, doorstreept) */
.old-price {
	text-decoration: line-through;
	color: #000;
	margin-left: 4px;
}

.studio-icon-addtocart-text {
	display: inline !important;
}
.studio-icon-addtocart-icon {
	display: none !important;
}

.single-product .studio-icon-add-to-cart, .single-product .studio-icon-custom-add-to-cart {
	width: 100% !important;
}

@media (max-width: 1240px) {
	.studio-icon-addtocart-text {
		/* 		display: none !important; */
	}
	.studio-icon-addtocart-icon {
		/* 		display: inline !important; */
	}
}

@media (max-width: 1540px) {
	.product-card .studio-icon-addtocart-text {
		/* 		display: none !important; */
	}
	.product-card .studio-icon-addtocart-icon {
		/* 		display: inline !important; */
	}
}

@media (min-width: 480px) {
	.single-product .studio-icon-addtocart-text {
		display: block !important;
	}
	.single-product .studio-icon-addtocart-icon {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.archive .studio_icon_product_card .studio-icon-addtocart-text {
		display: none !important;
	}
	.archive .studio_icon_product_card .studio-icon-addtocart-icon {
		display: block !important;
	}
}




@media and (min-width: 981px) {
	.product-info {
		flex-direction: row;
	}

}

/* === Algemene styling voor de product-content END === */


/* ========================================== Productpagina ========================================== */

.woocommerce-breadcrumb, .woocommerce-breadcrumb a {
	font-size: 11px !important;
}

.woocommerce-breadcrumb {
	color: #000 !important;
}

/* === Hoofdslider (wpgs-for) instellingen === */
.woo-product-gallery-slider .wpgs-for .slick-slide {
	padding-left: 25px !important;
	box-sizing: border-box; /* Zorgt dat de padding niet extra ruimte inneemt */
}

.woo-product-gallery-slider .slick-slide img, .woocommerce-product-gallery .slick-slide img {
	max-height: 400px !important;
	width: auto;
	object-fit: contain;
}

/* === Thumbnail slider (wpgs-nav) instellingen === */
.wpgs-nav .slick-list {
	max-width: 90% !important;
	margin: 0 auto;
}

.wpgs-nav .slick-slide {
	height: 100% !important;
}

.wpgs-nav .slick-slide img {
	height: 100px !important;
	padding: 2px;
}

/* Container voor de quantity-selector */
.quantity-wrapper {
	display: flex;
	align-items: center;
	height: 40px !important;
	border: 1px solid #000 !important;
	border-radius: 3px;
}

/* Styling voor de min en plus knoppen */
.quantity-btn {
	background-color: #fff;       /* Zwarte achtergrond */
	color: #fff;                  /* Witte tekst */
	border: 0px;
	padding: 13px 15px;           /* Pas padding aan naar wens */
	font-size: 16px;
	cursor: pointer;
	outline: none;
	transition: background-color 0.3s, color 0.3s;
	color: #000;
	height: 100%;
	display: flex;
	align-items: center;

}

.quantity-btn:hover {
	background-color: #000;
	color: #fff;
}


/* Styling voor de quantity input */
.quantity-wrapper input.qty {
	width: 60px;                  /* Breedte aanpassen indien nodig */
	text-align: center;
	font-size: 16px;
	outline: none;
	margin: 0 5px;
	box-sizing: border-box;
}

/* Verberg de standaard spinbuttons in WebKit browsers */
input.qty::-webkit-inner-spin-button,
input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0 !important;
}

.woocommerce div.product form.cart div.quantity, .woocommerce-page div.product form.cart div.quantity, .woocommerce #content div.product form.cart div.quantity, .woocommerce-page #content div.product form.cart div.quantity {
	margin: 0 !important;
	height: 100% !important;
}
.et_pb_wc_add_to_cart_0_tb_body input, .et_pb_wc_add_to_cart_0_tb_body .quantity input.qty {
	margin: 0 !important;
	background-color: #fff;
	display: flex;
	align-items: center;
	height: 100% !important;
	padding: 0 10px !important;
}

.woocommerce div.product form.cart, .woocommerce-page div.product form.cart, .woocommerce #content div.product form.cart, .woocommerce-page #content div.product form.cart {
	display: flex;
	justify-content: space-between !important;
}

.studio-icon-custom-add-to-cart-wrapper {
	display: grid;
	width: 100%;
}

.studio-icon-floating-cart .studio-icon-custom-add-to-cart-wrapper .stock {
	display: none !important;
}
.studio-icon-floating-cart .studio-icon-variation-options {
	justify-content: center !important;
}
.studio-icon-add-to-cart-container {
	display: flex;
	gap: 10px;
}

/* Verberg de spinbuttons in Firefox */
input.qty {
	-moz-appearance: textfield;
}

.studio-icon-variation-wrapper {
	margin-bottom: 15px;
}

.studio-icon-variation-group {
	margin-bottom: 10px;
}

.studio-icon-variation-label {
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

.studio-icon-variation-options {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.studio-icon-variation-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 1.5rem;
	height: 45px;
	border-radius: 0px;
	font-weight: 500;
	color: #3c3c3b;
	border: 2px solid rgba(60, 60, 59, 0.5);
	background-color: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
}

.studio-icon-variation-button:hover {
	border-color: #000;
}

.studio-icon-variation-button.selected {
	border: 2px solid #000;
	background-color: #fff;
	font-weight: 700;
	color: #000;
}


/* === Responsive aanpassingen === */
@media screen and (max-width: 767px) {
	.woo-product-gallery-slider .slick-slide img {
		max-height: 250px !important;
	}
	.wpgs-nav .slick-slide img {
		height: 80px !important;
	}
}

.studio-icon-custom-add-to-cart-wrapper {
	grid-template-columns: 25% 74%;
	grid-gap: 1%;	
}

/* Extra styling voor grotere schermen */
@media screen and (min-width: 981px) {
	.woocommerce-breadcrumb,
	.woocommerce-breadcrumb a {
		font-size: 13px !important;
	}
}

/* ========================================== Productpagina END ========================================== */

@media screen and (min-width: 981px) {
	body .xoo-wsc-sc-bki img {
		height: 35px !important;
	}
	body .header-account-icon svg {
		height: 36px !important;
		width: 36px !important;
	}

	body .dgwt-wcas-ico-magnifier, .dgwt-wcas-ico-magnifier-handler {
		width: 30px !important;
		max-width: 30px !important;
	}
	body .header-search-icon {
		margin-right: 12px !important;
	}
	body .dgwt-wcas-ico-magnifier-handler {
		margin-bottom: -.45rem !important;
	}
}