:root {
	--color-black: #00303A;
	--color-darkgrey: #E9EAEB;
	--color-darkblue: #163363;
    --color-lightblue: #EF5A23;
	--color-lightbluehover: #f58157;
	--color-white: #FFF;
	
	
	--color-oldblue: #729AC5;
	--color-lightblue: #5C79AC;
	--color-darkblue: #444D60;	
	--color-soft: #F5F3F2;	
	--color-brown: #76726F;	
}

*:focus:not(:focus-visible) {
    outline: none;
}




@media (min-width: 1300px) {
    .container {
   width: 1270px;
    }
}

@media (min-width: 1400px) {
    .container {
   width: 1370px;
    }
}



@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-Black.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-BlackItalic.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-Bold.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-BoldItalic.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-ExtraBold.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-ExtraLight.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-Italic.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-Light.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-LightItalic.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-Medium.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-MediumItalic.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-Regular.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-Thin.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/catalog/view/theme/default/fonts/Montserrat-ThinItalic.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Montserrat-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('/catalog/view/theme/default/fonts/Cinzel-Black.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Cinzel-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('/catalog/view/theme/default/fonts/Cinzel-Bold.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Cinzel-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('/catalog/view/theme/default/fonts/Cinzel-ExtraBold.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Cinzel-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('/catalog/view/theme/default/fonts/Cinzel-Medium.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Cinzel-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('/catalog/view/theme/default/fonts/Cinzel-Regular.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Cinzel-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('/catalog/view/theme/default/fonts/Cinzel-SemiBold.woff2') format('woff2'),
        url('/catalog/view/theme/default/fonts/Cinzel-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



body {
	font-family: 'Montserrat';
	font-weight: 400;
	color: #666;
	font-size: 16px !important;
	line-height: 26px;
	width: 100%;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--color-darkblue);
	font-weight: 600;

}

.alert-dismissable .close, .alert-dismissible .close {
	top: 3px;
    right: 0px;
}

#common-home h3 {
	font-size: 48px;
}	

/* default font size */
.fa {
	font-size: 14px;
}

header {
	background: #fff;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {

	outline: none !Important;
}

.mc-subcats {
	display: none !important;
}

/* Override the bootstrap defaults */
@media screen and (min-width: 320px) and (max-width:991px) {
	body {
	font-size: 16px !important;
	}
	
	h1 {
	font-size:18px !important;
	}
	
	h2 {
		font-size: 16px !important;
	}
	
	h3 {
	font-size: 26px !important;
}



.mc-newsletter-heading {
	font-size: 22px !Important;
}

.mc-newsletter-description {
	padding-bottom: 10px;
}

.btn.btn-default.newsletter {
	margin-right: 10px;
}

.mc-newsletter .col-sm-6 {
	padding-right: 25px;
}

.breadcrumb li:nth-child(3), .breadcrumb li:nth-child(4), .breadcrumb li:nth-child(5) {
	display: none;
}
	
}


h1 {
	font-size: 32px;
	font-family: 'Montserrat';
	font-weight: 600;
	margin-top: 10px;
    margin-bottom: 10px;
}
h2 {
	font-size: 20px;
	font-weight: 600;

}
h3 {
	font-size: 22px;

}
h4 {
	font-size: 15px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10.2px;
}
a {
	color: var(--color-darkblue);
}
a:hover {
	text-decoration: none;
	color: var(--color-lightblue);
}

#product-category ul, .product-description ul, .cms-article-description ul, .tab-content ul{
	margin-left: 1em;
}
	

legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 16px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 16px;
	height: 41px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 16px;
}
.input-group .input-group-addon {
	font-size: 16px;
	height: 30px;
}

select.form-control {
	font-size: 16px !important;
	height: 41px !important;
}

#product-category #content, #product-product #tab-description, #information-information #content {
    font-size: 16px;
}

.dropdown-menu {
	font-size: 16px !important;
}



.mc-hidden {
	display: none;
}

.mc_module_heading {
    font-family: 'Cinzel';
    font-weight: 700;
    font-size: 32px;
    color: var(--color-brown);
    text-transform: uppercase;
    display: block;
    text-align: center;
    line-height: 1;
    margin-bottom: 0;
}

.mc_module_heading::after {
    content: '';
    display: block;
    width: 210px;
    height: 10px;
    margin: 4px auto 0;
    background: url('/catalog/view/theme/default/image/dividerbrowndesktop.svg') center no-repeat;
    background-size: contain;
}

.breadcrumb {
    margin: 0px !important;
    padding: 8px 0;
    border: 0px solid #ddd;
	background: none;
}

.breadcrumb > li:after {
    content: url(../image/breadcrumbdivider.svg);
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 10px;
    height: 100%;
    border-right: 0px solid #DDD;
    border-bottom: 0px solid #DDD;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none);
}

.breadcrumb > li:last-child:after {
	display: none;
}

.breadcrumb > li {
	padding: 0 20px 0px 0px;

}

.breadcrumb > li a {
	color: var(--color-lightblue);
	font-size: 14px;
	font-weight: 500;
}

.breadcrumb > li a:hover {
	color: var(--color-darkblue);
}

.breadcrumb > li:last-child a{
		color: var(--color-darkblue);
	font-weight: 300;
}
	



/* BUTTONS */

.btn-primary {
    color: #ffffff;
	background:var(--color-oldblue);
	border: 0px solid;
	border-radius: 4px;
	font-size: 16px;
	padding: 10px 20px;
	color: #fff;
    font-size: 16px;
    font-family: 'Montserrat';
    font-weight: 600;
	text-shadow: unset;
	transition: background 0.2s ease;
}

.btn-primary.focus, .btn-primary:focus {
	background:var(--color-oldblue);
	}
 

.btn-primary:hover {
	background:var(--color-darkblue);
}

#checkout-cart .btn-primary {
	font-size: 18px;
}

#login label {
	padding-top: 8px;
}

.quickcheckout-content label , .quickcheckout-content input[type="radio"], .quickcheckout-content input[type="checkbox"] {
	cursor: pointer;
}

.quickcheckoutleft label {
	margin-top: 15px;
	margin-bottom: 2px;
}
	



.btn-default {
    color: #666666;
	background:var(--color-darkgrey);
	border: 0px solid;
	border-radius: 8px;
	font-size: 16px;
	padding: 9px 40px;
    font-size: 18px;
    font-family: 'Montserrat';
    font-weight: 500;
	text-shadow: unset;
	background-image: unset;
}

.btn-default:hover {
	color: #000;
	background:var(--color-darkgrey);
}


/* HEADER */
#logo {
	width: 248px;
	height: 124px;	
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -105px;            /* hoever boven de topbar */
    z-index: 10;
}

.mc-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	margin-top: 15px;
}

.mc-search, .mc-cart {
	margin-top: 12px;
}

#search .input-lg, #mc-search-mobile .input-lg{
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	border-radius: 8px;
	font-size: 15px;
	font-family: 'Montserrat';
	padding-left: 20px;
	padding-right: 0px;
	border-color: rgba(135, 153, 157, 0.102);
	box-shadow: unset;
	height: 47px;
}

#mc-search-mobile {
	margin: 0 auto;
}


#mc-search-mobile .input-lg{
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	border-radius: 5px;
	font-size: 12px;
	font-family: 'Montserrat';
	font-weight: 300;
	padding-left: 20px;
	padding-right: 0px;
	border-color: rgba(135, 153, 157, 0.102);
	box-shadow: unset;
	height: 37px;
}

.mc-search-bar {
	display: flex;
	max-width: 430px;

}

.mc-search-btn {
	background: #fff;
	border: none;
	position: absolute;
	right: 0px;
	height: 47px;
	padding-left: 15px;
	padding-right: 15px;
	z-index: 999;
	border: 1px solid rgba(135, 153, 157, 0.102);
	border-left: 0px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.mc-search-btn:hover {
	background-color: #fff;
}

#mc-search-mobile .mc-search-btn {
	background: #fff;
	border: none;
	position: absolute;
	right: 0px;
	height: 37px !important;
	padding-left: 15px;
	padding-right: 15px;
	z-index: 999;
	border: 1px solid rgba(135, 153, 157, 0.102);
	border-left: 0px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}


.mc-search-btn .fa {
	font-size: 20px;
	color: var(--color-darkblue);
}

.mc-account {
	display: flex;
	justify-content: center;
	padding-top: 20px;
}

.mc-account a {
	color: var(--color-black);
	font-size: 16px;
}

.mc-account a:hover {
	color: var(--color-lightblue);
}

.mc-language .btn-link {
	font-size: 16px;
	color: var(--color-black);
	text-align: left;
}

.mc-language .btn-link:hover, .mc-language .btn-link:active {
	font-size: 16px;
	color: var(--color-lightblue);
	text-decoration: none;
}

.mc-language .btn-link img {
	padding-bottom: 3px;
}



#header-cart {
  margin-bottom: 0px;
  display: flex;
  justify-content: flex-end;
  width: 70px;
}

.mc-header-icon {
	display: flex;
    align-items: center;
    justify-content: center;	
	width: 100%;
	height: 55px;
	background: #fff;
	margin-right: 10px;
	border-radius: 8px;
	border: 0px solid;
}



.mc-header-icon span {
	color: #fff;
	font-size: 18px;
	font-family: 'Montserrat';
	font-weight: 500;
}



#header-user {
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

#header-wishlist {
	display: flex;
	justify-content: flex-end;
	 margin-right: 30px;
}

span.wish-count, span.wish-count a {
	position: absolute;
    top: 7px;
    /* right: 0px; */
    background: var(--color-lightblue);
    border-radius: 50%;
	color: #fff;
    width: 20px;
    height: 20px;
    font-size: 12px;
	font-weight: 700;
    margin-left: 40px;
	line-height: 20px;
}

.mc-header-icons-right {
	display: flex;
  justify-content: flex-end;
}

span.cart-count {
	position: absolute;
    top: 7px;
    /* right: 0px; */
    background: var(--color-lightblue);
    border-radius: 50%;
	color: #fff;
    width: 20px;
    height: 20px;
    font-size: 12px;
	font-weight: 700;
    right: 8px;
	line-height: 20px;
	padding: 0px;
	
}

#cart {
margin-bottom: 0px;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #fff;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 250px;
	overflow-y: auto;
	max-height: 800px;
	scrollbar-width: thin;
	overflow-x: hidden;
}


    #cart > button::before {
        content: '';
        display: inline-block;
        width: 30px;
        height: 34px;
        background-image: url('/catalog/view/theme/default/image/bagicon.svg');
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
    }


@media (max-width: 478px) {
	#cart .dropdown-menu {
		width: 100%;
	}
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}


/* MENU */
.mc-menubar {
	background:  var(--color-darkblue);
}

#menu {
	background-color: transparent;
	background-image: none;
}

.navbar {
	border: 0px;
	margin-bottom: 0px;

}

.navbar-collapse {
	padding: 0px;
}

#menu .nav > li > a {
	font-family: 'Montserrat';
	padding-top: 20px;
	padding-bottom: 20px;
	font-weight: 600;
	font-size: 19px;
	text-shadow: unset;
	color: #fff;
}

.mc-highlights {
	display:flex;
	color: var(--color-darkblue);
	margin-bottom: 0px;
	padding: 0px;
	font-family: 'Montserrat';
	font-size: 14px;
	font-weight: 400;
	background: var(--color-soft);
	margin-top: 23px;
}

.mc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
	height: 36px;

}

.mc-hl-left {
	display: flex;
    align-items: center;
    gap: 20px;
}

.mc-hl-reviews {
	display: flex;
}

.mc-stars {
	display: flex;
	align-items: center;
	margin-right: 15px;
}

.mc-stars img {
	display: flex;
	height: 17px;
}

.mc-hl-right {
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-hl-right ul {
    list-style: none;
    display: flex;
    padding: 0;
    line-height: 50px;
    margin: 0;
}

.mc-highlights li a {
	font-size: 14px;
	font-weight: 500;
}

.mc-highlights li a:hover {
	color:  var(--color-lightblue);
}

.mc-hl-right li:not(:first-child)::before {
    content: "-";
    margin-right: 15px;  
	margin-left: 15px;  
    color: inherit;	
}

.mc-highlights .fa {
	font-size: 20px;
	color:  var(--color-lightblue);
	padding-right: 5px;
}

#menu .dropdown-inner a {
    min-width: 250px;
    display: block;
    padding: 8px 20px;
    clear: both;
    line-height: 20px;
    color: var(--color-black);
	border-bottom: 1px solid var(--color-darkgrey);
    font-size: 18px;
	font-family: 'Montserrat';
}

#menu .dropdown-inner {
	padding-bottom: 10px;
	padding-top: 5px;
}

.dropdown-menu li > a:hover {
	background-color: var(--color-lightblue);
    background-image: none;
	color: var(--color-white) !important;
	}
	
a.see-all {
display: none;
}	
	
	




/* FOOTER */

.mc-footerdivider {
	background: transparent;
	text-align: center;
	margin-bottom: -14px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}

.mc-bottom-pluspunten {
	background: var(--color-soft);
	font-size: 14px;
	color: var(--color-darkblue);
}

.mc-bottom-pluspunten ul {
	list-style: none;
	display: flex;
	justify-content: space-evenly;
	padding-top: 22px;
	color: var(--color-brown);
	font-weight: 500;
	padding-bottom: 10px;
}

.mc-bottom-pluspunten .fa {
	color: var(--color-darkblue);
	font-size: 16px;
	margin-right: 10px;
}
	
	
	

footer {
	background-color: var(--color-darkblue);
	padding-top: 0px;
	border: 0px;
}

.mc-footermenu {
	padding-top: 80px;
	padding-bottom: 60px;
}



/* Footer collapse - mobile */
.mc-footerheading {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
}

.mc-footerheading-sub {
    margin-top: 20px;
}

/* Collapse toggle icons - default: show down, hide up */
.mc-collapse-heading .fa-chevron-up {
    display: none;
}

.mc-collapse-heading .fa-chevron-down {
    display: inline;
}

/* When expanded: show up, hide down */
.mc-collapse-heading[aria-expanded="true"] .fa-chevron-up {
    display: inline;
}

.mc-collapse-heading[aria-expanded="true"] .fa-chevron-down {
    display: none;
}

.mc-collapse-heading {
    text-decoration: none;
    display: block;
}

.mc-collapse-heading .mc-footerheading {
    margin-bottom: 0;
}

/* Don't collapse on desktop */
@media (min-width: 991px) {
    .dont-collapse-sm {
        display: block !important;
        height: auto !important;
    }
}

/* Mobile footer */
@media (max-width: 767px) {
	
	
	footer {

	}
	.mc-footermenu {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
    .mc-footermenu .col-sm-4 {
        border-bottom: 1px solid #fff;
        padding: 15px;
    }
	
	.mc-footermenu .col-sm-4:nth-child(2), .mc-footermenu .col-sm-4:nth-child(3) {
		padding-left: 15px;
	}

    .mc-footermenu .col-sm-4:first-child {
        padding-top: 0;
    }

    .mc-footermenu .col-sm-4:last-child {
        border-bottom: none;
    }
	
	.mc-collapse-heading .mc-footerheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
	

    /* Remove desktop borders on mobile */
    .mc-footermenu .col-sm-4:nth-child(2) {
        border-left: none;
        border-right: none;
    }
}


.mc-footermenu p.mc-footerheading {

	color: var(--color-white) !important;
	font-family: 'Montserrat';
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 15px;
}

.mc-footermenu p {
	color: var(--color-white);
	font-size: 20px;
	line-height: 30px;
	font-family: 'Montserrat';
}

.mc-footermenu li a {
	color: var(--color-white);
	font-size: 16px;
	line-height: 32px;
	font-family: 'Montserrat';
	text-decoration: underline;
	font-weight: 500;
}

.mc-footermenu a:hover {
	color: #e2e2e2;
}

.mc-bottom-footer {
	background: #fff;
}

@media (max-width: 767px) { 

.mc-footermenu p.mc-footerheading {
	font-weight: 600;
	font-size: 17px !important;
	margin-bottom: 0px !important;
}

.dont-collapse-sm {
	padding-top: 20px;
}

.mc-contact-address strong, .mc-contact-address {
	font-size: 16px !important;
}

.mc-footermenu p, .mc-footermenu a {
	font-size: 16px;
	line-height: 24px;
}


}

.container.mc-bottom-footer-wrap {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.mc-bottom-footer-wrap {
	display: flex !Important;
	align-items: center;
	 justify-content: space-between;
	background: #fff;
	color: var(--color-black);
	font-size: 18px;
	font-family: 'Montserrat';
	padding-top: 35px;
	padding-bottom: 35px;
}

.mc-bottom-footer-wrap a {
	color: var(--color-black);
	font-size: 18px;
	font-family: 'Montserrat';
	text-decoration: underline;
	}
	
.mc-bottom-footer-wrap a:hover {
	color: var(--color-lightblue);
}
.mc-powered {
	display: flex;
    align-items: center;
    text-align: left;
	font-size: 12px;
	font-weight: 400;
	color: var(--color-brown);
	line-height: 14px;
	width: 40%;
}

.mc-powered img{
	margin-right: 20px;
}

.mc-payment {
	margin-left: 10px;
	margin-right: 0px;
	    text-align: right;
    margin-left: auto;
}


.mc-payment img {
	margin-left: 25px;
	margin-right: 25px;
}



.mc-legal-links {
	padding-left: 20px;
}

@media (max-width: 991px) {
    .mc-bottom-footer-wrap {
        display: flex;
        flex-direction: column !important;
        text-align: center;
		padding-top: 10px;
		padding-bottom: 30px;
    }

    .mc-powered,
    .mc-payment {
        font-size: 16px;
    }

.mc-payment {
    margin-top: 10px;
    order: -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 15px 20px 15px !important;
}

.mc-payment img {
    flex: 1;
    min-width: 0;
    height: auto;
    object-fit: contain;
    padding: 0 8px;
}
	
	    .mc-powered {
        display: flex;
      width: 100%;
	  padding-left: 15px;
	  padding-right: 15px;
        font-size: 16px;
		font-size: 9px;
    }
	
	  .mc-powered img {
		  width: 55px;
		  height: 50px;
		  margin-right: 10px;
	  }

    .mc-legal-links {
        margin-top: 5px;
		padding-left: 0px;
		text-align: center;
    }
	
	    .mc-legal-links a {
       font-size: 16px;
	   text-align: center;
    }
}
	
	
}


@media (min-width: 1269px) {
    .container {
        width: 1269px;
    }
}

.mc-newsletter {
	padding-bottom: 70px;
	padding-top: 70px;
	border-bottom: 10px solid var(--color-lightblue);
	background-color: var(--color-darkgrey);
}

.mc-newsletter-heading {
	font-size: 28px;
	font-family: 'Montserrat';
	font-style: italic;
	/*color: var(--color-lightblue);*/
	color: #fff;

}




/*HOME PAGE */




.featcat .caption a {
	width: 100%;
	color: var (--color-black) !important;
	background: var (--color-darkgrey) !Important;
	font-size: 22px;
	font-family: 'Montserrat';
	display: block;
	padding: 13px -20px;
	font-weight: normal;
	border-radius: 20px;

	
}



.featcat .caption a:hover, .catname:hover {

	background: var(--color-darkgrey) !important;
	color: var(--color-darkblue);
}

.featcat {
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	border: 0px !important;
	margin-top: 5px;
	text-align: center;
}

ul.mc-listicon {
	    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
	list-style: none;
	margin-bottom: 20px;

}

ul.mc-listicon li {
	padding-left: 20px !important;
    padding-top: 5px;
	padding-bottom: 5px;
	display: flex;
	align-items: center;
	line-height: 26px;
}

ul.mc-listicon li:before {
    content: "\f00c";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: var(--color-darkblue);
    font-size: 22px;
	margin-right: 15px;
}



.mc-featured {
	margin-bottom: 40px;
	margin-top: 40px;
}


	

/*PRODUCTGRIDS */

.mc-productlistname {
	font-size: 18px;
}

.product-thumb {
	border-radius: 5px;
	border-color: #E9EAEB;
	background: #fff;
	position: relative;
}

.mc-product-wishlist {
	    position: absolute;
    right: 20px;
    top: 15px;
		z-index:1;
}

.mc-product-wishlist button {
	background: none;
	border: 0px;

}


.product-thumb .price {
	font-size: 18px;
	color: var(--color-drakgrey);
}
	

.product-thumb .price-old {
	margin-left: 0px;
	margin-right: 10px;
	color: #ef6e6e;
	font-size: 16px;
}

.product-thumb .price-new {
	font-size: 18px;
	color: var(--color-drakgrey);
	font-weight: normal;
}

.product-thumb .availability {
	margin-top: 10px;
	margin-bottom: 0px;
	text-align: center;
}

.availability .label {
	font-size: 14px !important;
	 font-weight: normal;
    white-space: normal;
    display: inline-block;
    text-align: center;
}

.availability label.label.label-danger {
	background: none !important;
	color: #D52607;
}

.availability label.label.label-danger::before {
    content: url(../image/nietopvoorraad.svg);
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
}

.availability label.label.label-success {
	background: none !important;
	color: #17A220;
}

.availability label.label.label-success::before {
    content: url(../image/opvoorraad.svg);
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
}

.availability label.label.label-primary {
	background: none !important;
	color: #0B3058;
}

.availability label.label.label-primary::before {
    content: url(../image/alleenafhalen.svg);
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
}


.product-thumb .image {
	margin-top: 10px;
	margin-left: 10px;
    margin-right: 10px;
}

.product-thumb .image img {
    width: 100%;
    height: auto;
    display: block;
	border-radius: 5px;
}

.product-thumb .caption {
	min-height: 0px;
	padding: 0 10px !important;
}

.product-thumb .button-group {
	background: none;
	border: 0px;
	margin-bottom:20px;
	margin-left: 10px;
	margin-right: 10px;
}

.product-thumb .button-group button {
	background: #ededed;
		color: var(--color-drakgrey);
		border-radius: 15px;
		
}

.product-thumb .button-group button:hover {
	background: #ddd;
}

.product-thumb .button-group button + button {
	border: 0px;
	margin-left: 10px;

}




/* CATEGORY */

#product-category hr {
	
margin-top: 15px;
margin-bottom: 25px;
}
	

/* =============================================================
   MC SUBCATEGORIES - verticale kaarten, 4 per rij / 2 mobiel
   Past bij twig met classes: mc_subcatslist / mc_subcat_item /
   mc_subcat_img / mc_subcat_name
   MCE Digital
   ============================================================= */

.mc_subcats {
    margin-bottom: 40px;
}

.mc_subcatslist {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Kaart: 4 per rij (25% - gap-compensatie: 3 gaps x 20px / 4 = 15px) */
.mc_subcat_item {
    flex: 0 0 calc(25% - 15px);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--color-soft);
    border-radius: 10px;
    overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mc_subcat_item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Afbeelding boven */
.mc_subcat_img {
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc_subcat_img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Placeholder als er geen afbeelding is */
.mc_subcat_noimg {
    aspect-ratio: 1 / 1;
    background: #e8e8e8;
}

/* Naam onder de afbeelding */
.mc_subcat_name {
    padding: 16px 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-darkblue);
    line-height: 1.3;
}

/* =============================================================
   RESPONSIVE - Mobiel: 2 per rij
   ============================================================= */

@media (max-width: 767px) {
    .mc_subcat_item {
        flex: 0 0 calc(50% - 10px);   /* 2 per rij, 1 gap x 20px / 2 = 10px */
    }

    .mc_subcat_name {
        font-size: 13px;
        padding: 12px 8px;
    }
}


.mc-compare {
	text-align: right;
}

.mc-compare a {
	font-size: 16px;
}


.ocme-mfp-f-header {
	font-size: 28px !important;
	color: color: var(--color-darkgrey);
	font-weight: bold;
}

.vue-slider-process {
		background-color: var(--color-lightblue) !important;
}



.mob
{
    display:none !Important;
}

.pc
{
    display:block;
}

@media screen and (min-width: 320px) and (max-width:991px)
{
    .pc
    {
        display:none !important;
    }
    .mob
    {
        display:block !Important;
    }
    .mw100
    {
        max-width:100px;
    }
    .btn-hubbermenu
    {
        background: var(--color-darkblue);
        border:0px!important;
        color: #fff!important;
    }
    .btn-hubbermenu i
    {
        font-size:26px;
    }
    #header-wishlist { 
        margin-right: 10px!important;
    }
    .mob-bottom-header
    {
        padding-top: 11px;
		padding-bottom: 11px;
        background:#f0f0f0;
    }
	
	.mob-bottom-header .list-inline {
		        margin: 8px 0px 0px 0px;
		display: flex;
		padding: 0px;
		justify-content: space-between;
		
	}
	
	.mob-bottom-header .list-inline a.dropdown-toggle {
		color: var(--color-darkgrey);
	}
	
    .mc-header-icon {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 28px;
        margin-right: 0px;
        border: 0px solid;
    }
	
    .row.mc-header {
        display: flex !important;
        align-items: center;
    }

    .mc-header-icons-right {

		margin-right: 15px;
    }
	
	#cart {
		margin-right: 0px;
	}
	
    .mc-header-icon img
    {
        width:28px;
    }
	
    .row.mc-header {
        position: relative;
    }
	
	#header-cart {
		width: 28px;
	}

    .mc-headeraccount {
      display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 0px !important;
    padding-right: 0px !important;
	margin-right: 10px;
	margin-left: 5px

  
    }

    .mc-headeraccount > a::before {

    }

    .mc-headeraccount > a .caret {
        display: none;
    }
	
	
	
    .btn.open__nav {
        padding: 5.5px 10px 5.5px 0px!important;
    }
    .col-sm-2.mc-header-icons-right
    {
       
    }
    span.wish-count, span.wish-count a
    {
        top:10px!important;
		right: 65px;
    }
    span.cart-count {
        top: 10px!important;
		left: 15px;
    }
	
	.mc-highlights {
		display: none;
	}
	
	
	
	.mc-language {
		padding: 0px 0px 0px 0px !important;
	}
	
	.mc-language .dropdown-menu {
		padding: 10px;
		right: 0;
		left: auto;
	}
	
		.mc-language .btn {
		padding: 0px 0px 0px 0px !important;
	}
	
	.product-layout {
		/*width: 50%;*/
	}
	
	.product-thumb {
		border-radius: 10px;
	}
	
	.mc-productlistname {
		font-size: 15px;
		line-height: 19px;
		height: 65px;
		-webkit-line-clamp: 3;
		overflow: hidden;

		padding-top: 10px;		
	}
	
		.product-thumb  .button-group {
			margin-left: 10px;
			margin-right: 10px;
			margin-bottom: 15px;
		}
		
		.mc-productlist-atc {
			width: 100% !important;
			max-width: 100% !important;
			
			margin-bottom: 10px;
		}
		
		button.mc-productlist-atc {
			margin-right: 0px !important;
		}
		
		.product-thumb .button-group button + button {
			display: none;
		}
		
		.mc-bottom-footer-wrap {
			flex-direction: column;
		}
		
		.mc-payment {
			padding-top: 10px;
			padding-bottom: 10px;
		}
		
		.mc-payment img {
       max-width: 100px;
        margin-left: 0;
        margin-right: 0;
		}
	
    
}

/* PRODUCTPAGE */

.nav.nav-tabs {
	MARGIN-TOP: 30PX;
}

.image-additional {
    max-width: 125px;
}

#product-product H1 {
	margin-top: 5px;
	margin-bottom: 20px;
}

ul.mc-pdp-toplist {
	display: flex;
	flex-direction: column;
	/*margin-top: 15px;*/
}

.mc-pdp-toplist li {
	display: flex;
	align-items: center;
	line-height: 30px;

}
.mc-pdp-toplist .label {
    padding-top: 5px;
	padding-bottom: 5px;
    margin-top: 5px;
    margin-left: 5px;
	font-size: 16px;
}

.btn-cart {
    width: 80%;
	font-size: 24px;
	font-weight: 500;
	border-radius: 10px;
    line-height: 48px;
    height: 58px;
    padding: 0;
    border: 0;
}
.btn-cart:before {
        content: '';
        display: inline-block;
        width: 28px;
        height: 28px;
		margin-right: 10px;
        background-image: url(/catalog/view/theme/default/image/bagicon.svg);
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
}

.mc-cartquantity {
    display: inline-block;
    width: 15%;
    margin-right: 5%;
    height: 58px;
	border-radius: 10px;
}

@media (max-width: 991px) {
    #cart > button > span:not(.cart-count) {
        display: none;
    }

    #cart > button::before {
        content: '';
        display: inline-block;
        width: 28px;
        height: 28px;
        background-image: url('/catalog/view/theme/default/image/bagicon.svg');
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
    }
	
	.mc-header-icons-right {
		padding-left: 0px;
		padding-right: 0px;
	}
	
	span.cart-count {
		right: -3px;
	}
	#logo {
	    max-width: 100px;
	}
	
}




.mc-infoblock {
	margin-top: 30px;
	padding-top: 15px;
}



.mc-pluspunten-block {
			background: #fafafa;
	border: 1px solid var(--color-darkgrey);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
    /*margin-bottom: 10px !Important;*/
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	line-height: 1 !Important;
}

.mc-pluspunten-block-2, .mc-pluspunten-block-3 {
			background: #fafafa;
	border: 1px solid var(--color-darkgrey);
	border-radius: 4px;
    margin-bottom: 10px !Important;
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	line-height: 1 !Important;
}

.mc-pluspunten-block-2 ul.mc-pluspunten , .mc-pluspunten-block-3 ul.mc-pluspunten  {
	padding-top: 0px;
	padding-bottom: 0px;
}

.mc-pluspunten-block-2 ul.mc-pluspunten li, .mc-pluspunten-block-3 ul.mc-pluspunten li {
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 0px;
}




ul.mc-pluspunten {
    list-style: none;
    margin: 0;
    padding-top: 5px;
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
	color: var(--color-black);

}

ul.mc-pluspunten li {
    padding: 9px 0px 9px 30px;
    position: relative;
	margin-top: 0px;
	line-height: 125%;
	font-size: 18px;
}

ul.mc-pluspunten li a{
    text-decoration: underline;
	
}

ul.mc-pluspunten li:before {
    font-size: 20px;
    position: absolute;
    margin-right: 10px;
    vertical-align: middle;
    left: 0px;
    width: auto !important;
    font-family: FontAwesome;
    content: "\f00c";
    color: var(--color-lightblue);

    top: calc(50% - 10px); /* 50% - 3/4 of icon height */

}

ul.mc-pluspunten li.showroom:before {
    font-size: 20px;
    position: absolute;
    margin-right: 10px;
    vertical-align: middle;
    left: 0px;
    width: auto !important;
    font-family: FontAwesome;
    content: "\f06e";
    color: var(--color-darkblue);
}

ul.mc-pluspunten li.b2b:before {
    font-size: 20px;
    position: absolute;
    margin-right: 10px;
    vertical-align: middle;
    left: 0px;
    width: auto !important;
    font-family: FontAwesome;
    content: "\f1c0";
    color: var(--color-darkblue);
}




span.mc-green {
    color: var(--color-darkblue);
    font-weight: 600;
}

.mc-pluspunten-block hr {
	margin-top: 15px;
	margin-bottom: 15px;
	display: none;
}

/* START INFORMATIONPAGES */
.mc-contentsplit-right {
	display: flex;
	justify-content: center;
}

.mc-contentsplit-right img {
	border-radius: 15px;
}

@media (max-width: 991px) {
.mc-contentsplit-right {
	display: flex;
	justify-content: flex-start;
	padding-top: 15px;
}	
}




/* START BLOG */
@media (min-width: 991px) {

	
	.cms-article-grid .cms-article-thumb .button-group {
		position: relative !important;
	}
}

@media (max-width: 767px) {
	.cms-article-grid .cms-article-thumb .button-group {
		position: relative !important;
		text-align: center !important;
		padding-bottom: 17px !important;
		padding-left: 10px !important;
		width: 100%;
	}

.cms-article-grid {
margin-bottom: 20px !Important;
}	
	
}

	



    .cms-article-grid .cms-article-thumb {
        padding: 0px !Important;
    }

.cms-article-thumb .image img {

	transition: transform .6s;
}

.cms-article-thumb .image {
overflow: hidden; 
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.cms-article-thumb .image img:hover {


transform: scale(1.1);
  transform-origin: 50% 50%;

}

.cms-article-thumb {
	border: 0px solid !Important;
	background: #ededed;
}

.cms-article-thumb .caption {
	padding: 0px 10px !Important;
}

.cms-article-thumb .caption a {
	font-size: 18px;
	line-height: 26px;
	color: #000;
	font-weight: 600;
}

.cms-article-date {
	color: #847c7c;
	font-size: 14px;
	
}

.cms-article-date:before {
content: "\f133";
font-family: FontAwesome;
margin-right: 5px;
}

.cms-article-grid .cms-article-thumb .button-group {
		float: left;
	}
	
    .cms-category-description {
		bordeR: 0px !Important;
		padding: 0px !Important;
	}
	
#cms-category .col-sm-5, #cms-category .col-md-5,  #cms-category .col-sm-4, #cms-category .col-md-4 {
	margin-left: -15px;
}

.cms-category-description-layout {
		padding: 0px !Important;
	}
	
	.cms-article-row {
		margin-top:30px;
		margin-left: -10px !important;
	}
	
    .cms-article-layout {
		
	padding: 0px 10px 0px 10px !important;
	}

#button-payment-method {
	font-size: 20px;
	padding-left: 50px!important;
	padding-right: 50px!important;
	padding-top: 20px!important;
	padding-bottom: 20px!important;
	
}

label[for=cod]:before {
    background: url(image/mollie/bancontact.png) ;
	background-color: #000;
}

.bundle-widget {
	margin-top: 20px;
}

.bundle-list-name {
	font-size: 16px !important;
	font-weight: bold;
}

.alert.teaser {
	border: 1px solid #38B6AB;
}

#checkout-cart .alert.teaser {
	text-align: center;
}

.alert.teaser .fa {
	font-size: 18px;
}

.mc_manufacturer_logo {
	border: 1px solid #ddd;
	padding: 5px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.mc-wwkeur {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
    padding: 1rem 2rem;
    border-top: 0px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	color: #666;
}



.mc-wwkeur a {
	margin-left: 20px;
	margin-right: 30px;
	color: #666;
}

@media (max-width: 395px) {
.mc-wwkeur a {
	margin-left: 10px;
	margin-right: 10px;
	color: #666;
}
}

/* Positioneer de compare/wishlist buttons linksboven de hoofdfoto */
.mc-comparewish {
    position: absolute;
    top: 10px;
    left: 25px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Style de buttons als mooie overlay */
.mc-comparewish .btn {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 45px;
    height: 45px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.15);*/
    transition: all 0.2s ease;
}

.mc-comparewish .btn:hover {
    background: #fff;
    transform: scale(1.1);
    /*box-shadow: 0 4px 12px rgba(0,0,0,0.25);*/
}

.mc-comparewish .btn i {
    font-size: 18px;
    color: #333;
    margin: 0;
}

.mc-comparewish .btn:hover i {
    color: #e74c3c;
}

.mc-comparewish .btn:last-child:hover i {
    color: #3498db;
}

.mc-headeraccount {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}

.mc-headeraccount a {
	font-family: 'Montserrat';
	color: var(--color-darkblue);
	font-size: 19px;
    font-weight: 500;
	text-decoration: none;
}

.mc_chevron_down {
    color: var(--color-lightblue);
    margin-left: 10px;
	vertical-align: middle;
}

  .mc-contact-wrapper {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #ffffff;
    line-height: 1.8;
  }
  .mc-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }
  .mc-contact-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 4px;
  }
  .mc-contact-link {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
  }

address {
    margin-bottom: 0px !important;
  }
  

  
  .mc-contact-address strong {
    font-weight: 600;
	font-size: 20px;
  }
  
  
.mc-topbarmob {
  color: var(--color-darkblue);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-soft);
  font-family: 'Montserrat';
  font-size: 12px;
  font-weight: 500;
}


.mc-topbarmob .mc-hl-reviews {
	justify-content: center;
}

.mc-topbarmob .mc-stars {
	margin-right: 10px;
	margin-top: -2px;
}

.mc-topbarmob .mc-beoordeling strong {
	font-weight: 700;
}

.mc-topbarmob .mc-stars img {
	height: 13px;
}

.mc-slider {
  background: var(--color-brown);
  height: 40px;
  padding-left: 0px;
  overflow: hidden;
  margin-top: 40px;
}
.mc-slider .fa {
  font-size: 18px;
  color: #fff;
  padding-right: 5px;
}
.mc-slider div {
  background: var(--color-brown);
  color: #fff;
  height: 40px;
  line-height: 40px;
  margin-bottom: 0px;
  padding: 0px;
  text-align: center;
  box-sizing: border-box;
  font-size: 16px;
}
.slider-text1 {
  animation: slide 9s linear infinite;
}
.slider-text1:before, .slider-text2:before, .slider-text3:before, .slider-text4:before, .slider-text5:before {
  content: url('../image/checkwhite.svg');
  margin-right: 10px;
}
@keyframes slide {
  0%   { margin-top: 0; }
  26%  { margin-top: 0; }
  33%  { margin-top: -40px; }
  59%  { margin-top: -40px; }
  66%  { margin-top: -80px; }
  92%  { margin-top: -80px; }
  100% { margin-top: -120px; }
}

.mc-mobile-search-bar {
    padding-top: 10px;
    padding-bottom: 10px;
	display: block;
	background: var(--color-darkblue);
}

#mc-search-mobile .mc-search-btn {
	background: #fff;
}

#mc-search-mobile .mc-search-btn img {
	height: 20px;
}


/* Start banners */
.mce-homebanners {
    padding-top: 36px;
	font-family: 'Montserrat';
}

.mce-banner-wrap {
    display: flex;
    gap: 36px;
    align-items: stretch;
}

.mce-banner-large {
    flex: 0 0 calc((910 / 1370) * 100%);
    max-width: calc((910 / 1370) * 100%);
    aspect-ratio: 910 / 464;
}

.mce-banner-small {
    flex: 0 0 calc((424 / 1370) * 100%);
    max-width: calc((424 / 1370) * 100%);
}

.mce-banner {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.mce-banner-img,
.mce-banner-img a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.mce-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mce-banner-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
}

.mce-banner-title {
    font-weight: 900;
    font-size: 45px;
	padding-top: 50px;
    color: #fff;
}

.mce-banner-description {
    font-style: italic;
    font-size: 30px;
    color: #fff;
	margin-top: 10px;
}

.mce-banner-button a {
    display: inline-block;
    background: var(--color-lightblue);
    color: #fff;
    padding: 16px 22px;
    border-radius: 14px;
    font-weight: 900;
    font-size: 24px;
    text-decoration: none;
}

.mce-banner-button a:hover {
    background: var(--color-lightbluehover);
}

.mce-banner-button a i.fa-chevron-right {
    font-size: 20px;
    margin-left: 10px;
    vertical-align: middle;
}

/* Mobile */
@media (max-width: 767px) {
    .mce-banner-wrap {
        flex-direction: column;
    }
	
	    .mce-homebanners {
     
    }

    .mce-banner-wrap {
        gap: 15px;
    }

    .mce-banner-large,
    .mce-banner-small {
        flex: 0 0 100%;
        max-width: 100%;
        aspect-ratio: 910 / 464;
    }

.mce-banner-title {
    font-weight: 900;
    font-size: 24px;
	padding-top: 0px;
    color: #fff;
}

.mce-banner-description {
    font-style: italic;
    font-size: 18px;
    color: #fff;
	margin-top: 3px;
}

.mce-banner-button a {
    display: inline-block;
    background: var(--color-lightblue);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 18px;
    text-decoration: none;
}

.mce-banner-button a i.fa-chevron-right {
    font-size: 16px;
    margin-left: 5px;

}


.fcat0 {
	height: auto !important;
}

.featcat .caption a {
	font-size: 16px;
}
 


}

.catname {
	background: var(--color-darkgrey);

	padding: 10px;
	text-align: center;
}

.featcat {
	
	padding: 0px !important;
}

.carousel.swiper-viewport.merken {
	box-shadow: unset !important;
	background: unset;
	border: 0px !important;
}

.mc-merkenhome, .mce-homebanners {
 position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  background: #fafafa;

}

.mc-merkenhome {
  margin-bottom: -30px;
  margin-top: 36px;
  padding-top: 6px;
  padding-bottom: 50px;
}

.mc-featuredcat {
	  padding-top: 6px
}

.mce-homebanners {
	padding-bottom: 36px;
}

.mce-banner-wrap > * {
  margin: 0;
}

.merken .swiper-slide img {
	border: 1px solid var(--color-darkgrey);
	border-radius: 8px;
	background: #fff;
}

.mc-usp-section {
    background-color: var(--color-darkgrey);
    padding: 36px 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

.mc-usp-wrap {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    max-width: 1370px;
    margin: 0 auto;
    padding: 0 15px;
}

.mc-usp-item {
    text-decoration: none;
}

.mc-usp-icon {
    width: 203px;
    height: 170px;
    background-color: var(--color-darkblue);
    border-radius: 15px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
    transition: background-color 0.3s ease;
}

.mc-usp-icon img {
    width: 60px;
    height: 60px;
}

.mc-usp-label {
    color: #fff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 24px;
    text-align: center;
	padding-top: 15px;
}

.mc-usp-item:hover .mc-usp-icon {
    background-color: #485E83;
}

/* Mobile */
@media (max-width: 767px) {
    .mc-usp-section {
        padding: 20px 0;
    }

    .mc-usp-wrap {
        flex-wrap: wrap;
        gap: 15px;
    }

    .mc-usp-item {
        flex: 0 0 calc(50% - 8px);
    }

    .mc-usp-icon {
        width: 100% !important;
        height: 120px;
    }

    .mc-usp-label {
        font-size: 18px;
		padding-top: 0px;
    }
}


.mc-featured-section {
    background-color: #fafafa;
    padding: 40px 0;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

.mc-featured-wrap {
    max-width: 1370px;
    margin: 0 auto;
    padding: 0 15px;
}

.mc-featured-wrap h3 {
    color: var(--color-darkblue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    margin-bottom: 25px;
}

.mc-featured-swiper {
    position: relative;
    padding: 0 40px;
}

.mc-featured-swiper .product-thumb {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.mc-featured-swiper .product-thumb .image img {
    width: 100%;
}

.mc-featured-swiper .product-thumb .caption {
    padding: 15px;
}

.mc-featured-swiper .product-thumb .caption h4 a {
    color: var(--color-darkblue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.mc-featured-prev,
.mc-featured-next {
    color: var(--color-darkblue);
}

/* Mobile */
@media (max-width: 767px) {
    .mc-featured-section {
        padding: 20px 0;
    }

    .mc-featured-swiper {
        padding: 0 30px;
    }
}


/* Featured section */
.mc-featured-section {
    background-color: var(--color-soft);
    padding: 6px 0px 14px 0px;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

.mc-featured-wrap {
    max-width: 1370px;
    margin: 0 auto;
    padding: 0 15px;
}

.mc-featured-wrap h3 {
    color: var(--color-darkblue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    margin-bottom: 25px;
}

/* Carousel outer wrapper */
.mc-carousel-outer {
    position: relative;
}

/* Navigation buttons */
.mc-carousel-outer .swiper-button-prev,
.mc-carousel-outer .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 38px;
    background-color: var(--color-darkblue);
    border-radius: 8px;
    margin-top: -19px;
    z-index: 10;
    cursor: pointer;
}

.mc-carousel-outer .swiper-button-prev {
    left: -17px;
}

.mc-carousel-outer .swiper-button-next {
    right: -17px;
}

.mc-carousel-outer .swiper-button-prev::before {
    content: '\f053';
    font-family: 'FontAwesome';
    color: #fff !important;
    font-size: 15px !important;
    display: block;
    text-align: center;
    line-height: 38px;
	padding-right: px;
}

.mc-carousel-outer .swiper-button-next::before {
    content: '\f054';
    font-family: 'FontAwesome';
    color: #fff !important;
    font-size: 15px !important;
    display: block;
    text-align: center;
    line-height: 38px;
	padding-left: 4px;
	
}

.mc-carousel-outer .swiper-button-disabled {
    background-color: rgba(22, 51, 99, 0.3);
    pointer-events: none;
    opacity: 1 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .mc-featured-section {
        padding: 20px 0;
    }

    .mc-carousel-outer .swiper-button-prev {
        left: 5px;
    }

    .mc-carousel-outer .swiper-button-next {
        right: 5px;
    }
	
	 .mc-featured-section .mc-carousel-outer .swiper-button-prev,
    .mc-featured-section .mc-carousel-outer .swiper-button-next {
        top: 25%;
    }
}

.swiper-button-next:before {
	color: #FFF !important;

}







.mc-productlistname {
	font-size: 16px;
	font-family: 'Montserrat';
	font-weight: 700;
	color: var(--color-darkblue);
	min-height: 52px;
	text-align: center;
}


.mc-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
	padding-top: 20px;
	justify-content: space-between;
}

.mc-price-old {
    font-size: 14px;
    text-decoration: line-through;
    color: #999;
	line-height: 15px;
	padding-left: 20px;
}

.mc-price-main {
    display: flex;
    flex-direction: column;
    flex: 1;
		padding-left: 20px;
}

.mc-price-new {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-darkblue);
}

.mc-price-tax {
    font-size: 12px;
    color: #999;
	line-height: 16px;
}

.mc-product-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    background: var(--color-lightblue);
    text-decoration: none;
    flex-shrink: 0;
	border-radius: 5px;
}

.mc-product-link .fa {
	    font-size: 12px;
		color: #fff;
}

.mc-product-link:hover {
    background: var(--color-darkblue);
    text-decoration: none;
}

.product-thumb .price {
	display: none;
}


@media (max-width: 767px) {
	.product-thumb .caption {
		padding: 0px  10px;
	}
	
	.mc-product-link {

	}
	
	.mc-price-row {

	}
	
	.mc-price-main {

	}
	
	.mc-productlistname {
		display: flex;
		align-items: center;
		height: 60px;
		justify-content: center;
	}
	
	.mc-productlistname a{
	 display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
	text-align: center;
	}
	
	.availability .label {
		min-height: 35px;
		display: flex;
        align-items: center;
		justify-content: center;
		font-size: 13px !important;
	}
	
	
		.availability .label .fa {
			margin-right: 5px;
		}
		
		.btn-default {
		padding: 9px 20px;
		}
	
}


.mc-hometext {
	padding-top: 18px;
	
}

.btn-refresh {
	background: var(--color-black);
	height: 41px;
	color: #fff;
	border: 1px solid var(--color-black);
}

.btn-refresh:hover {
	color: #fff;
	background: #1a4a54;
}

.btn-danger {
	border: 1px solid #bd362f;
	background-color: #bd362f;
	height: 41px;
	background-image: unset;
	box-shadow: unset;
}

#checkout-cart thead td {
	font-weight: bold;
}


.panel-default>.panel-heading {
	background: var(--color-darkgrey);
	color: #666666;
}


.btn-link {
color: var(--color-black);
text-decoration: underline;
}


/* MC: Category description onderaan */
.mc_category_description {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.mc-ptotal {
	min-width: 120px;
}

.mc-pqtc {
	min-width: 40px;
}

#header-cart .table-striped>tbody>tr:nth-of-type(odd) {
	background-color: #fff !important;
}

.quickcheckout-heading {
background: var(--color-soft) !important;
color: var(--color-black) !important;
font-family: 'Montserrat';
font-weight: 600;

}	

.quickcheckout-heading .fa {
	margin-right: 5px;
}

.product-thumb .rating {
	display: none;
}


/* ==========================================================================
   Language / store flag selector
   ========================================================================== */
.mc-lang {
    position: relative;
    display: inline-block;
}

/* Knop met huidige vlag + pijl (46 x 26) */
.mc-lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 26px;
    padding: 0 6px;
    background: #fff;
    border: 1px solid #CFCCCA;
    border-radius: 3px;
    cursor: pointer;
}

/* Vlaggen (13 x 9.75) — toggle én dropdown */
.mc-lang-toggle img,
.mc-lang-item img {
    width: 13px;
    height: 9.75px;
    display: block;
}

/* Pijltje (.fa-specificiteit nodig) */
.fa.mc-lang-arrow {
    font-size: 10px;
    color: var(--color-brown);
    line-height: 1;
    margin-left: auto;   
}


/* Dropdown */
.mc-lang-menu {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    min-width: 150px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #CFCCCA;
    border-radius: 3px;
    display: none;
    z-index: 1000;
}
.mc-lang.is-open .mc-lang-menu {
    display: block;
}

/* Items met vlag + naam */
.mc-lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: var(--color-brown);
    text-decoration: none;
    white-space: nowrap;
	font-size: 13px;
}
.mc-lang-item:hover {
   background: color-mix(in srgb, var(--color-soft) 60%, transparent);
   color: var(--color-brown);
}
.mc-lang-item.is-active {
    background: var(--color-soft);
	font-weight: 600;
}

.mc-lang-item.is-active:hover {
	background: color-mix(in srgb, var(--color-soft) 60%, transparent);
}


.mc-cur { position: relative; display: inline-block; }

.mc-cur-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #CFCCCA;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    color: var(--color-brown);
}
.mc-cur-label { font-size: 12px; font-weight: 600; }

.fa.mc-cur-arrow {
    font-size: 10px;
    color: var(--color-brown);
    line-height: 1;
    margin-left: auto;   /* duwt de chevron naar rechts */
}


.mc-cur-menu {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    min-width: 100px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #CFCCCA;
    border-radius: 3px;
    display: none;
    z-index: 1000;
}
.mc-cur.is-open .mc-cur-menu { display: block; }

.mc-cur-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    color: var(--color-darkblue);
    cursor: pointer;
    white-space: nowrap;
	font-size: 12px;
}
.mc-cur-item:hover {  background: color-mix(in srgb, var(--color-soft) 60%, transparent);}
.mc-cur-item.is-active { background: var(--color-soft); font-weight: 600; }
.mc-cur-item:not(.is-active):hover {
    background: color-mix(in srgb, var(--color-soft) 60%, transparent);
}

@media (max-width: 991px) {
.mc-header .col-md-2 {
	padding-right: 0px;
	width: 65px !Important;
}

.mc-header .col-sm-3 {
	padding-left: 0px;
	padding-right: 0px;
	width: 100% !important;
}


.col-sm-4.mc-header-icons-right {
	width: 110px !important;
}

.mc_module_heading {
    font-family: 'Cinzel';
    font-weight: 600;
    font-size: 22px !important;
    color: var(--color-brown);
    text-transform: uppercase;
    display: block;
    text-align: center;
    line-height: 1;
    margin-bottom: 0;
}

.mc_module_heading::after {
    content: '';
    display: block;
    width: 150px;
    height: 7px;
    margin: 4px auto 0;
    background: url('/catalog/view/theme/default/image/dividerbrownmobile.svg') center no-repeat;
    background-size: contain;
}


}


.mc-menu-toggle {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
    line-height: 0;          /* geen extra hoogte rond de img */
}
/* ook de hover/focus/active states van .btn neutraliseren */
.mc-menu-toggle:hover,
.mc-menu-toggle:focus,
.mc-menu-toggle:active {
    background: none;
    box-shadow: none;
}

.mc-menu-icon {
    width: 30px;
    height: 30px;
    display: block;
}

#logomob {
	padding-right: 10px;
	    display: flex;
    justify-content: center;   /* horizontaal */
    align-items: center;       /* verticaal, indien de div hoger is */

}
#logomob img {
	text-align: center;
	margin: 0 auto !Important;
}


.mc_newsletter_wrap { max-width: 560px; }
.mc_newsletter_form { position: relative; }
.mc_newsletter_form input[type="email"] {
  width: 100%; height: 50px;
  padding: 0 130px 0 14px;
  border: none; border-radius: 6px;
  background: #fff; outline: none;
  font-size: 14px; color: var(--color-brown);
  box-sizing: border-box;
}
.mc_newsletter_form input[type="email"]::placeholder { color: var(--color-brown); }
.mc_nl_btn {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.15s;
  background: var(--color-lightblue);
}
.mc_nl_btn:hover { background: var(--color-darkblue); }
.mc_nl_icon { width: 16px; height: 16px; filter: brightness(10); }
.mc_nl_msg { margin-top: 8px; font-size: 13px; min-height: 18px; }
.mc_nl_msg.mc_success { color: #5cb85c; }
.mc_nl_msg.mc_error   { color: #d9534f; }
#mc-column-newsletter p {
  font-size: 16px;
  line-height: 26px;
  padding-bottom: 10px;
}


.mc_socials_wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 35px;

  padding-bottom: 35px;
}

.mc-mob-so {
	display: flex;
	gap: 20px;
}

.mc_socials_wrap a { display: flex; }
.mc_socials_text {
  font-size: 16px;
  color: #fff;
}



/* MCE Digital - Newsletter mobiel */
.mc_newsletter_mob {
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
}

.mc-newsletter-block {
	padding-left: 25px;
  padding-right: 25px;
  padding-top: 40px;
  padding-bottom: 12px;
}



.mc_nl_desc {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-brown);
	padding-top: 20px;
	padding-bottom: 10px;
}


	
.mc_newsletter_mob .mc_newsletter_form input[type="email"] {
  height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(118, 114, 111, 0.4);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-brown);
}
.mc_newsletter_mob .mc_newsletter_form input[type="email"]::placeholder {
  color: var(--color-brown);
  font-size: 14px;
  font-weight: 300;
}
.mc_newsletter_mob .mc_nl_btn {
  position: static;
  width: 100%;
  height: 55px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  justify-content: center;
  margin-top: 12px;
}
.mc_newsletter_mob .mc_newsletter_form { display: flex; flex-direction: column; }

/* MCE Digital - Socials mobiel */
.mc_socials_mob {
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
      background: var(--color-soft);
}
.mc_socials_mob a { display: flex; }
.mc_socials_textmob {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-brown);
}
.mc_socials_mob .mc_socials_wrap {
  gap: 16px;
  flex-direction: row;
  justify-content: center;

}

.mc_nl_btn_mob {
  background: var(--color-darkblue);
}
.mc_nl_btn_mob:hover {
  background: var(--color-lightblue);
}


/* START MOBILE MENU */

.mobile__nav ul {
  list-style: none;
  padding-bottom:80px !important;
}
.mobile__nav li a {
  text-decoration: none;
  display: flex;
align-items: center;
justify-content: space-between;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 1;
color: var(--color-darkblue);
border-bottom: 1px solid #ddd;
padding: 14px 18px;
}

.mobile__nav li:first-child a {
	border-top: 1px solid #ddd;
}

.mobile__nav nav a.back__menu[data-level-id]::after {
    content: "\f104"!important;
    left: 0;
    font-family: 'FontAwesome'!important;
    font-size: 26px;
}
body .mobile__nav nav a[data-level-id]::after
{
    content: "\f105"!important;
    font-family: 'FontAwesome'!important;
    font-size: 26px;
}
/* menu open & close  */
.open__nav {
    cursor: pointer;
    /*position: fixed;*/
    top: 10px;
    left: 10px;
}
/* menu open & close  */
.category-name{
    padding-top: 0px;
    background-color: var(--color-soft) !important;
}
.category-name a{
    font-size: 18px;
    font-weight: bold !important;
}

.mobile__nav {
  position: fixed;
   
  top: 0;
  z-index:99999;
  left: 0;
  width: 100%; /* Adjust the width as needed */
  height: 100%;
  transition: left 0.3s ease;
  overflow: hidden;
  background: #fff;
}
.mobile__nav header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--color-soft);
    padding: 10px 0px 0px 15px;
    position: relative;
}
.mobile__nav header .header__logo {
  height: 100%;
}
.mobile__nav header .header__logo img {
  width: 50px;
  height: 100%;
  object-fit: cover;
}
.mobile__nav header .header__btns button {
    padding: 10px 0px;
    font-size: 15px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: bold;
    color: white;
    position: absolute;
    top: 4px;
    right: 18px;
}
.mobile__nav nav {
  width: 100%;
  height: calc(100% - 70px);
  position: relative;
}
.mobile__nav nav ul.first-level {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overflow-y: scroll;
}

.mobile__nav nav ul.second-level {
  width: 100%;
  height: 100vh !important;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overflow-y: scroll;
  transform: translateX(100%);
  transition: transform 400ms ease-in;
}
.mobile__nav nav ul.second-level.active {
  transform: translateX(0%);
}
.mobile__nav nav ul.third-level {
  width: 100%;
  height: 100vh;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
   overflow: hidden;
  overflow-y: scroll;
  transform: translateX(100%);
  transition: transform 400ms ease-in;
}
.mobile__nav nav ul.third-level.active {
  transform: translateX(0%);
}
.mobile__nav nav a[data-level-id] {
  position: relative;
}

.mobile__nav nav a[data-level-id]::after {
    content: "\25BA";
    position: absolute;
    margin-left: 20px;
    right: 15px;
    font-family: "Font Awesome" !important;
}
.mobile__nav nav a.back__menu {
  padding-left: 50px;
}
.mobile__nav nav a.back__menu[data-level-id]::after {
  content: "\25C4";
  left: 0;
}
.mobile__nav .fa-remove:before, .mobile__nav .fa-close:before, .mobile__nav .fa-times:before
{
    color:#000;
}
.hideimp
{
    display:none!important;
}

/* =============================================
   Desktop flyout: Tier 3 (rechts van tier 2)
   ============================================= */
.mc-menubar.pc .mc_has_sub {
    position: relative;
}
.mc-menubar.pc .mc_has_sub > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}
.mc-menubar.pc .mc_sub_arrow {
    font-size: 12px;
	color: #EF5A23;
    margin-left: 8px;

}
.mc-menubar.pc .mc_has_sub > .mc_dropdown_sub {
    display: none !important;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 200px;
    background: #fff;

    box-shadow: 3px 3px 8px rgba(0,0,0,0.12);
    z-index: 9999;
    list-style: none;
    padding: 0px 0;
    margin: 0;
}
.mc-menubar.pc .mc_has_sub:hover > .mc_dropdown_sub {
    display: block !important;
}
.mc-menubar.pc .mc_dropdown_sub li a {
    display: block;
    padding: 7px 15px;
    white-space: nowrap;
    color: #333;
    font-size: 13px;
    text-decoration: none;
}
.mc-menubar.pc .mc_dropdown_sub li a:hover {
    background:#163363;
}

/* =============================================
   Desktop flyout: Tier 4 (rechts van tier 3)
   ============================================= */
.mc-menubar.pc .mc_has_sub4 {
    position: relative;
}
.mc-menubar.pc .mc_has_sub4 > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mc-menubar.pc .mc_has_sub4 > .mc_dropdown_sub4 {
    display: none !important;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 200px;
    background: #fff;

    box-shadow: 3px 3px 8px rgba(0,0,0,0.12);
    z-index: 10000;
    list-style: none;
    padding: 0px 0;
    margin: 0;
}
.mc-menubar.pc .mc_has_sub4:hover > .mc_dropdown_sub4 {
    display: block !important;
}
.mc-menubar.pc .mc_dropdown_sub4 li a {
    display: block;
    padding: 7px 15px;
    white-space: nowrap;
    color: #333;
    font-size: 13px;
    text-decoration: none;
}
.mc-menubar.pc .mc_dropdown_sub4 li a:hover {
    background: #163363;
}

.mc-menu-cs {
	padding-left: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	color: var(--color-darkblue);
	border-bottom: 1px solid #ddd;
}

.mc-menu-cs a {
		color: var(--color-darkblue);
}

.mc-menu-cs img {
	margin-right: 5px;
}

.mc-menu-header {
	font-family: 'Cinzel';
	font-size: 24px;
	font-weight: 700;
	color: var(--color-darkblue);
	padding-left: 15px;
	padding-bottom: 15px;
	padding-top: 35px;
}

.mc-menu-top {
	display: flex;
}

.mc-menu-lang {
	
}



.mc-menu-lang img {
	padding: 14px 20px;
	width: 20px;
	box-sizing: content-box;

}

.mc-menu-lang img.langactive {

	background: #fff;

}

.mc-menu-curr {
	margin-left: 20px;

}

.mc-curr-btn {
	border: 1px solid #D3D1D0;
	font-size: 12px;
	font-weight: 500;
	padding: 0px 8px;
	background: transparent;
	margin-top: 7px;
	color: #000;
}

.mc-curr-active {
	background: #fff;
}

/* =============================================================
   MC HERO FULLWIDTH - Hoofdbanner
   MCE Digital
   ============================================================= */

.mc_hero_fullwidth {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    min-height: 455px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.mc_hero_overlay {
    max-width: 560px;
    text-align: center;
}

.mc_hero_title {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.mc_hero_title::after {
    content: '';
    display: block;
    width: 380px;
    height: 18px;
    margin: 4px auto 0;
    background: url(/catalog/view/theme/default/image/dividerhero.svg) center no-repeat;
    background-size: contain;
}

.mc_hero_description {
    font-size: 24px;
    font-weight: 400;
    color: #E5E1DE;
    margin: 0 0 32px 0;
    line-height: 1.4;
}

.mc_hero_btn {
    display: inline-flex;
    align-items: center;
    height: 54px;
    padding: 0 32px;
    background: var(--color-lightblue);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

.mc_hero_btn::after {
    content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 2px;
}

.mc_hero_btn:hover {
    opacity: 0.88;
    color: #fff;
    text-decoration: none;
}

/* =============================================================
   MC SUBBANNERS - 2x2 grid
   MCE Digital
   ============================================================= */

.mc_subbanner_section {
    padding: 60px 0 70px;
}

.mc_subbanner_heading_wrap {
    text-align: center;
    margin-bottom: 40px;
}

.mc_subbanner_heading {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-darkblue);
    margin: 0 0 12px 0;
}

.mc_subbanner_divider {
    display: block;
    width: 40px;
    height: 2px;
    background: var(--color-lightblue);
    margin: 0 auto;
}

.mc_subbanner_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.mc_subbanner_card {
    background-color: var(--color-soft);
    border-radius: 6px;
    min-height: 200px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Pseudo-element: afbeelding rechts, 40% breed, hoogte 100%, rechts afgesneden */
.mc_subbanner_card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 40%;
    height: 100%;
    background-image: var(--mc-banner-img);
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
}

.mc_subbanner_content {
    position: relative;
    z-index: 1;
    width: 60%;
    padding: 32px 28px;
}

.mc_subbanner_title {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-brown);
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.mc_subbanner_desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-brown);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.mc_subbanner_btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--color-darkblue);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.mc_subbanner_btn::after {
    content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 12px;
    margin-left: 15px;
    margin-top: 1px;
}

.mc_subbanner_btn:hover {
    background: var(--color-lightblue);
    color: #fff;
    text-decoration: none;
}

/* =============================================================
   RESPONSIVE - Mobile
   MCE Digital
   ============================================================= */

@media (max-width: 767px) {

    .mc_hero_fullwidth {
        min-height: 260px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        width: 100vw;
    }

    .mc_hero_overlay {
        padding: 60px 0;
    }

    .mc_hero_title {
        font-size: clamp(20px, 4vw, 36px);
    }

    .mc_hero_title::after {
        width: 250px;
        height: 12px;
    }

    .mc_hero_description {
        font-size: 18px;
    }

    .mc_hero_btn {
        font-size: 16px;
        height: 46px;
        padding: 0 24px;
    }

    /* Subbanners: horizontaal scrollbaar (Swiper-ready) */
    .mc_subbanner_grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mc_subbanner_grid::-webkit-scrollbar {
        display: none;
    }

    .mc_subbanner_card {
        flex: 0 0 80vw;
        min-height: 132px;
    }

    /* Pseudo-element op mobiel zelfde gedrag */
    .mc_subbanner_card::after {
        width: 45%;
    }

    .mc_subbanner_content {
        width: 65%;
        padding: 5px 0px 5px 15px;
    }

    .mc_subbanner_title {
        font-size: 16px;
		margin-bottom:3px;
    }

    .mc_subbanner_desc {
        font-size: 12px;
        width: 100%;
		margin-bottom: 10px;
    }
	
	.mc_subbanner_section {
		margin-left: -15px !Important;
		margin-right: -15px !important;
		padding: 30px 0 10px;
	}
	
	.mc_subbanner_btn {
		font-size: 12px;
		padding: 5px 12px;
	}
	
	.mc_subbanner_btn::after {
		font-size: 9px;
		margin-top: 0px;
		margin-left: 8px;
	}
	
	.mc_subbanner_heading_wrap {
		margin-bottom:20px;
	}		
	

}

/* =============================================================
   MC SEO TEXT MODULE - module_id 33
   Twee kolommen, H2/body styling, collapsible + readmore knop
   MCE Digital
   ============================================================= */
/* --- Twee kolommen (desktop) --- */
.mc_module_33 .mc_seo_body {
    column-count: 2;
    column-gap: 40px;
	margin-top: 30px;
}
/* --- H2 styling binnen SEO module --- */
.mc_module_33 h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-darkblue);
    margin: 0 0 5px 0;
    /* voorkom dat een H2 over twee kolommen breekt */
    break-inside: avoid;
	font-family: 'Montserrat';
}
/* --- Body tekst styling --- */
.mc_module_33 .mc_seo_body p {
    color: var(--color-brown);
    font-size: 16px;
    line-height: 28px;
    margin: 0 0 16px 0;
}
/* =============================================================
   COLLAPSIBLE - inklap + gradient overlay
   Pas de max-height aan om het afkappunt te wijzigen
   ============================================================= */
.mc_seo_collapsible {
    position: relative;
    padding-bottom: 40px;
}
.mc_seo_collapsible .mc_seo_body {
    position: relative;
    max-height: 330px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
/* Witte gradient over laatste stukje tekst */
.mc_seo_collapsible .mc_seo_body::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
    pointer-events: none;
}
/* Uitgeklapt: volledige hoogte, geen gradient */
.mc_seo_collapsible.mc_expanded .mc_seo_body {
    max-height: 4000px;
}
.mc_seo_collapsible.mc_expanded .mc_seo_body::after {
    display: none;
}
/* =============================================================
   READMORE KNOP - btn-primary hergebruik, unieke chevron
   Knop zweeft over de gradient, onderaan gecentreerd
   ============================================================= */
.mc_seo_collapsible .mc_readmore_toggle {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
}
/* Chevron down = ingeklapt */
.mc_readmore_toggle::after {
    content: "\f078";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 12px;
    margin-left: 12px;
}
/* Chevron up = uitgeklapt */
.mc_expanded .mc_readmore_toggle::after {
    content: "\f077";
}


.mc_seo_collapsible.mc_expanded {
    padding-bottom: 0;
}

.mc_seo_collapsible.mc_expanded .mc_readmore_toggle {
    position: static;
    transform: none;
    margin: 20px auto 0;
}

/* =============================================================
   RESPONSIVE - Mobile: 1 kolom
   ============================================================= */
@media (max-width: 767px) {
    .mc_module_33 .mc_seo_body {
        column-count: 1;
    }
}
@media (max-width: 991px) {
	.mc_module_33 h2 {
		font-size: 18px !important;
	}
	
	.mc_module_33 .mc_seo_body p {
		font-size: 14px;
	}
	
	.mc_module_33 .mc_seo_body {
		margin-top: 15px;
	}
	
	.mc_seo_collapsible {
    padding-bottom: 10px;
}
	
}

/* =============================================================
   MC SOCIAL INSPIRATIE SECTIE
   Full-width Instagram-style tegels, max 280px per tegel
   MCE Digital
   ============================================================= */

.mc_social_section {
    padding: 40px 0 0;
    background: var(--color-soft);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
	margin-top: 25px;
	margin-bottom: 25px;
}

/* --- Kop: titel gecentreerd + handle rechts --- */
.mc_social_head {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 30px;
}

.mc_social_heading {
    margin: 0;
}

.mc_social_handle {
    position: absolute;
    right: 15px;
    display: inline-flex;
    align-items: center;
    color: var(--color-brown);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.mc_social_handle i {
    font-size: 26px;
    margin-right: 8px;
	margin-top: 3px;
}

.mc_social_handle:hover {
    color: var(--color-darkblue);
    text-decoration: none;
}

/* =============================================================
   SLIDER WRAP + TRACK (generiek, herbruikbaar)
   ============================================================= */

.mc_slider_wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.mc_social_track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mc_social_track::-webkit-scrollbar {
    display: none;
}

/* Tegels: vaste 280px, vierkant, geen tussenruimte */
.mc_social_tile {
    flex: 0 0 280px;
    width: 280px;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity 0.2s ease;
}

.mc_social_tile:hover {
    opacity: 0.85;
}

/* =============================================================
   SLIDER CHEVRONS (generiek) - alleen zichtbaar indien scrollbaar
   ============================================================= */

.mc_slider_arrow {
    display: none;   /* standaard verborgen, JS toggelt visible */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-darkblue);
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 3;
    align-items: center;
    justify-content: center;
}

.mc_slider_arrow_left {
    left: 12px;
}

.mc_slider_arrow_right {
    right: 12px;
}

/* JS zet deze class als scrollen die kant op mogelijk is */
.mc_slider_arrow.mc_slider_arrow_visible {
    display: flex;
}


/* =============================================================
   MC SOCIAL SLIDER - Scroll-snap voor smooth feel
   Voeg toe / vervang de bestaande .mc_social_track regel
   MCE Digital
   ============================================================= */

.mc_social_track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;              /* smooth bij scrollBy() */
    scroll-snap-type: x mandatory;        /* tegels klikken op hun plek */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mc_social_track::-webkit-scrollbar {
    display: none;
}

/* Elke tegel lijnt links uit bij snappen */
.mc_social_tile {
    scroll-snap-align: start;
}

/* =============================================================
   RESPONSIVE - Mobile: kleinere tegels (~2,5 zichtbaar)
   ============================================================= */

@media (max-width: 991px) {
	
	.mc_social_section {
		margin-bottom: 50px;
	}

    .mc_social_head {
        flex-direction: column;
    }

    .mc_social_handle {
        display: none;
    }

    .mc_social_tile {
        flex: 0 0 40vw;
        width: 40vw;
    }

}

/* =============================================================
   MC REVIEWS CAROUSEL - "Klanten aan het woord"
   MCE Digital
   ============================================================= */

.mc_reviews_section {
    padding: 0px 0 0px;
	margin-bottom: 70px;
		margin-top: 75px;
}

.mc_reviews_head {
    text-align: center;
    margin-bottom: 30px;
}

.mc_reviews_heading {
    margin: 0;
}

/* --- Layout: slider links, score-blok rechts --- */
.mc_reviews_layout {
    display: flex;
    align-items: center;
    gap: 40px;
}

.mc_reviews_slider {
    flex: 1 1 auto;
    min-width: 0;          /* laat de slider krimpen binnen flex */
    position: relative;
    overflow: visible;     /* overschrijft mc_slider_wrap overflow:hidden zodat chevrons uitsteken */
}

/* =============================================================
   SLIDER TRACK + CARDS
   ============================================================= */

.mc_reviews_track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;      /* begrenst de scroll (los van de wrap) */
    gap: 20px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0;
}

.mc_reviews_track::-webkit-scrollbar {
    display: none;
}

.mc_review_card {
    flex: 0 0 calc(33.333% - 14px);   /* 3 zichtbaar op desktop */
    scroll-snap-align: start;
    background: var(--color-soft);
    border-radius: 8px;
    padding: 28px 24px;
    box-sizing: border-box;
}

/* --- KiyOh sterren (SVG) --- */
.mc_review_stars {
    margin-bottom: 14px;
    line-height: 0;
}

.mc_review_star {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 2px;
}

.mc_review_title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-darkblue);
    margin-bottom: 10px;
}

.mc_review_text {
    font-size: 15px;
    line-height: 24px;
    color: var(--color-brown);
    margin: 0 0 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mc_review_meta {
    font-size: 14px;
}

.mc_review_date {
    font-weight: 700;
    color: var(--color-darkblue);
    margin-right: 8px;
}

.mc_review_author {
    color: var(--color-brown);
}

/* =============================================================
   REVIEW SLIDER CHEVRONS - donkerblauw, uitstekend
   Alleen voor reviews (scoped), social blijft ongemoeid
   ============================================================= */

.mc_reviews_slider .mc_slider_arrow {
    background: var(--color-darkblue);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.mc_reviews_slider .mc_slider_arrow i {
    color: #fff;
}

/* Chevrons steken ~50% buiten de cards uit */
.mc_reviews_slider .mc_slider_arrow_right {
    right: -22px;
}

.mc_reviews_slider .mc_slider_arrow_left {
    left: -22px;
}

/* =============================================================
   KIYOH SCORE BLOK (rechts)
   ============================================================= */

.mc_reviews_score {
    flex: 0 0 auto;
    width: 180px;
    text-align: center;
    text-decoration: none;
    display: block;
}

.mc_reviews_score:hover {
    text-decoration: none;
}

.mc_reviews_score_svg {
    margin-bottom: 12px;
}

.mc_reviews_score_circle {
    width: 100px;
    height: 100px;
}

.mc_reviews_score_text {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-brown);
}

.mc_reviews_count {
    display: block;
}

.mc_reviews_recommend {
    display: block;
    color: var(--color-lightblue);
}

/* =============================================================
   RESPONSIVE - Mobile: score ONDER reviews, tekst NAAST cijfer
   ============================================================= */

@media (max-width: 767px) {

    .mc_reviews_layout {
        flex-direction: column;   /* score onder de reviews */
        gap: 0px;
    }

    .mc_review_card {
        flex: 0 0 85vw;
    }
	
	
	.mc_reviews_section {

	margin-bottom: 30px;
		margin-top: 45px;
}

.mc_reviews_head {

    margin-bottom: 10px;
}

    /* Score-blok compact: cirkel + tekst naast elkaar */
    .mc_reviews_score {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        text-align: left;
    }

    .mc_reviews_score_svg {
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    .mc_reviews_score_circle {
        width: 80px;
        height: 80px;
    }

    .mc_reviews_score_text {
        font-size: 13px;
        line-height: 18px;
        text-align: left;
    }

    /* Chevrons iets minder ver uitstekend op mobiel */
    .mc_reviews_slider .mc_slider_arrow_right {
        right: -24px;
    }

    .mc_reviews_slider .mc_slider_arrow_left {
        left: -24px;
    }

}


/* =============================================================
   MC FEATURED "Aanbevolen" - 20/80 layout, slider via mc_slider
   MCE Digital
   ============================================================= */

.mc-featured-section {
    padding: 40px 0 20px;
	margin-top: 50px;
}

/* Layout: tekstblok links (20%) + slider rechts (80%) */
.mc-featured-layout {
    display: flex;
    align-items: center;
    gap: 0;
}

.mc-featured-intro {
    flex: 0 0 20%;
    padding-right: 30px;
    box-sizing: border-box;
}

.mc-featured-intro .mc_module_heading {
    text-align: center;
    margin: 0 0 16px 0;
}

.mc-featured-desc {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-brown);
    margin: 0;
}

/* =============================================================
   SLIDER TRACK + ITEMS (80% zone)
   ============================================================= */

.mc-featured-slider {
    flex: 1 1 80%;
    min-width: 0;
    position: relative;
    overflow: visible;   /* chevrons mogen uitsteken */
}

.mc-featured-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0;
}

.mc-featured-track::-webkit-scrollbar {
    display: none;
}

/* 4 zichtbaar binnen de slider-zone (25% van zone - gap-compensatie) */
.mc-featured-item {
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
}

/* =============================================================
   CHEVRONS - wit (zoals social), niet blauw
   ============================================================= */

.mc-featured-slider .mc_slider_arrow {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-darkblue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mc-featured-slider .mc_slider_arrow i {
    color: var(--color-darkblue);
}

.mc-featured-slider .mc_slider_arrow_right {
    right: -22px;
}

.mc-featured-slider .mc_slider_arrow_left {
    left: -22px;
}

/* =============================================================
   RESPONSIVE - Mobile: tekstblok boven, 2 producten zichtbaar
   ============================================================= */

@media (max-width: 767px) {
	.mc-featured-section {
	    padding: 40px 0 20px;
    margin-top: 15px;
	}

    .mc-featured-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .mc-featured-intro {
        flex: none;
        width: 100%;
        padding-right: 0;
        margin-bottom: 24px;
        text-align: center;
    }

    .mc-featured-intro .mc_module_heading {
        text-align: center;
    }

    .mc-featured-track {
        gap: 15px;
    }

    /* 2 zichtbaar op mobiel */
    .mc-featured-item {
        flex: 0 0 calc(50% - 7.5px);
    }

    .mc-featured-slider .mc_slider_arrow_right {
        right: -14px;
    }

    .mc-featured-slider .mc_slider_arrow_left {
        left: -14px;
    }

}


/* =============================================================
   MC SORTEERBALK - category
   MCE Digital
   ============================================================= */

.mc-sortbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.mc-sortbar-left {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.mc-sort-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mc-sort-group label {
    margin: 0;
    font-weight: 700;
    color: var(--color-darkblue);
    white-space: nowrap;
}

.mc-select {
    height: 44px;
    padding: 0 36px 0 14px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    background: #fff;
    color: var(--color-brown);
    font-size: 15px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232b3a5c' d='M6 8L0 2l1.5-1.5L6 5l4.5-4.5L12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.mc-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    background: #fff;
    color: var(--color-darkblue);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mc-filter-btn:hover {
    background: var(--color-soft);
}

/* Mobile */
@media (max-width: 767px) {
    .mc-sortbar-left {
        gap: 15px;
    }
    .mc-sort-group label {
        display: none;   /* labels verbergen op mobiel voor ruimte, optioneel */
    }
    .mc-select {
        height: 40px;
		padding: 0 10px 0 10px;
		font-size: 13px;
    }
	
.mc-sort-sortering .mc-select { width: 185px; }
.mc-sort-weergave .mc-select { width: 55px; }
	
	.mc-sortbar {
		gap: 10px;
	}
	
    .mc-filter-btn {
        height: 40px;
		padding: 0 15px;
		font-size: 14px;
    }
}

@media (max-width: 413px) {
	  .mc-filter-btn span{
	  display: none !Important;
	  }
}


#product-category .product-grid {
    width: 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

#product-category .row {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 1199px) {
    #product-category .product-grid { width: 25%; flex-basis: 25%; max-width: 25%; }
}
@media (max-width: 991px) {
    #product-category .product-grid { width: 33.333%; flex-basis: 33.333%; max-width: 33.333%; }
}
@media (max-width: 767px) {
   #product-category .product-grid { width: 50%; flex-basis: 50%; max-width: 50%; }
   

    #product-category .product-grid:nth-child(even) {
        padding-left: 7px;
    }
     #product-category .product-grid:nth-child(odd) {
      padding-right: 7px;
    }
	
	 #product-category .mc-price-row {
		 height: 70px;
	 }

   
}


/* =============================================================
   MC FILTER PANEL - off-canvas slide-in
   MCE Digital
   ============================================================= */

/* --- Overlay --- */
.mc-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(80, 80, 80, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.mc-filter-overlay.mc-filter-overlay-visible {
    opacity: 1;
    visibility: visible;
}

/* --- Paneel --- */
.mc-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);

}

.mc-filter-panel.mc-filter-open {
    transform: translateX(0);
}

/* voorkom scrollen achter het paneel */
body.mc-filter-noscroll {
    overflow: hidden;
}

/* --- Header --- */
.mc-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 60px;
    flex: 0 0 auto;
}

.mc-filter-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-darkblue);
}

.mc-filter-close {
    position: absolute;
	right: 20px;
	border: none;
    background: none;
    color: var(--color-darkblue);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}

/* --- Body (scrollbaar) --- */
.mc-filter-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 60px;
}

/* --- Secties --- */
.mc-filter-section {
    background: var(--color-soft);
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}

.mc-filter-section-head {
    width: 100%;
    border: none;
    background: none;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-darkblue);
    cursor: pointer;
    text-align: left;
}

/* Chevron (CSS pijltje) */
.mc-filter-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-darkblue);
    border-bottom: 2px solid var(--color-darkblue);
    transform: rotate(-135deg);   /* omhoog (open) */
    transition: transform 0.2s ease;
    margin-top: 4px;
}

.mc-filter-section:not(.mc-open) .mc-filter-chevron {
    transform: rotate(45deg);     /* omlaag (dicht) */
    margin-top: -2px;
}

/* Body van sectie: dicht standaard, open bij mc-open */
.mc-filter-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
    padding: 0 20px;
}

.mc-filter-section.mc-open .mc-filter-section-body {
    max-height: 400px;
    padding: 0 20px 20px;
}

/* --- Prijs inputs --- */
.mc-price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.mc-price-currency {
    color: var(--color-brown);
    font-weight: 600;
}

.mc-price-field {
    flex: 1 1 auto;
    width: 100%;
    height: 40px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    padding: 0 12px;
    color: var(--color-brown);
    background: #fff;
}

.mc-price-sep {
    color: var(--color-brown);
}

/* --- Prijs slider (visueel, dummy) --- */
.mc-price-slider {
    position: relative;
    height: 20px;
    margin: 0 6px;
}

.mc-price-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-darkblue);
    border-radius: 2px;
    transform: translateY(-50%);
}

.mc-price-slider-handle {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.mc-handle-min { left: 0; }
.mc-handle-max { left: 100%; }

/* --- Checkboxes --- */
.mc-filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 14px;
    color: var(--color-brown);
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}

.mc-filter-check input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* --- Ontwerper zoekveld --- */
.mc-filter-search {
    position: relative;
}

.mc-filter-search input {
    width: 100%;
    height: 42px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    padding: 0 40px 0 14px;
    color: var(--color-brown);
    background: #fff;
}

.mc-filter-search svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-brown);
}

/* --- Footer --- */
.mc-filter-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 14px;
    padding: 20px 60px;
}

.mc-filter-clear {
    flex: 0 0 auto;
    padding: 12px 28px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    background: #fff;
    color: var(--color-darkblue);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mc-filter-clear:hover {
    background: var(--color-soft);
}

.mc-filter-apply {
    flex: 1 1 auto;
    padding: 12px 28px;
    border: none;
    border-radius: 6px;
    background: var(--color-darkblue);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mc-filter-apply:hover {
    background: var(--color-lightblue);
}

/* --- Mobile --- */
@media (max-width: 767px) {
    .mc-filter-panel {
        width: 100%;
        max-width: 100%;
    }
	
	.mc-filter-body, .mc-filter-header, .mc-filter-footer {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.mc-pagination {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	margin-bottom: 40px;
}

.mc-pagination .pagination>.active>a, .mc-pagination .pagination>.active>a:focus, .mc-pagination .pagination>.active>a:hover, .mc-pagination .pagination>.active>span, .mc-pagination .pagination>.active>span:focus, .mc-pagination .pagination>.active>span:hover {
	background: var(--color-darkblue);
	color: #fff;
	border-color: var(--color-darkblue);
}

.mc-pagination  .pagination>li>a, .mc-pagination  .pagination>li>span {

	color: var(--color-darkblue);
}


/* START PDP */

/* =============================================================
   PDP - Flickity galerij
   Matcht twig-classes: mc-image-section / carousel-main /
   carousel-nav / mc-mainimage / mc-subimage
   MCE Digital
   ============================================================= */

.mc-image-section {
    position: relative;
}

.mc-image-section .image {
    position: relative;
}

/* =============================================================
   HOOFDCAROUSEL - exact 1 afbeelding per view (geen halve buren)
   ============================================================= */

.carousel-main {
    border: 1px solid #C8C8C8;
    border-radius: 8px;
    margin-bottom: 14px;
	max-width: 624px;
}

/* Cruciaal: cell = volle breedte, anders toont Flickity de buren */
.carousel-main .carousel-cell {
    width: 100%;
}

.carousel-main .mc-mainimage {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.carousel-main .product-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    padding: 12px;
    box-sizing: border-box;
}

.carousel-main .mc-mainimage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
	border-radius: 8px;
}

/* =============================================================
   THUMBNAIL-NAV
   ============================================================= */

.carousel-nav {
    margin: 0 auto;
}

.carousel-nav .carousel-cell.mc-subimage {
    width: 135px;
    height: 135px;
    margin-right: 10px;
    border-radius: 6px;
    border: 1px solid #C8C8C8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.carousel-nav .mc-subimage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    padding: 6px;
    box-sizing: border-box;
	border-radius: 5px;
}

/* Actieve thumbnail */
.carousel-nav .carousel-cell.is-nav-selected {
    border-color: var(--color-darkblue);
}

/* =============================================================
   FLICKITY CHEVRONS
   ============================================================= */

/* Hoofdcarousel chevrons (zichtbaar zoals in screenshot) */
.carousel-main .flickity-prev-next-button {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-main .flickity-prev-next-button:hover {
    background: #fff;
}

.carousel-main .flickity-prev-next-button .flickity-button-icon {
    fill: var(--color-darkblue);
}

.carousel-main .flickity-prev-next-button.previous {
    left: 20px;
}

.carousel-main .flickity-prev-next-button.next {
    right: 20px;
}

/* Nav chevrons */
.carousel-nav .flickity-prev-next-button {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.carousel-nav .flickity-prev-next-button .flickity-button-icon {
    fill: var(--color-darkblue);
}

.carousel-nav .flickity-prev-next-button.previous {
    left: -6px;
}

.carousel-nav .flickity-prev-next-button.next {
    right: -6px;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 767px) {
    .carousel-nav .carousel-cell.mc-subimage {
        width: 100px;
        height: 100px;
    }
}


#product-product .mc-product-wishlist {
	display: none;
}

/* --- PDP badges over hoofdfoto --- */
.mc-pdp-badges {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 5;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.mc-pdp-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.mc-pdp-badge-new {

}

.mc-pdp-badge-sale {

}

.mc-pdp-stock-placeholder .label {
	font-size: 16px !important;
	 font-weight: 600;
    white-space: normal;
    display: inline-block;
    text-align: center;
	padding-top: 3px;
}

.mc-pdp-stock-placeholder label.label.label-danger {
	background: none !important;
	color: #D52607;
}

.mc-pdp-stock-placeholder  label.label.label-danger::before {
    content:  url(../image/pdp/geenvoorraad.svg);
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 12px;
	margin-top: -4px;
    vertical-align: middle;
}

.mc-pdp-stock-placeholder label.label.label-success {
	background: none !important;
	color: #17A220;
}

.mc-pdp-stock-placeholder label.label.label-success::before {
    content: url(../image/pdp/voorraadpdp.svg);
    display: inline-block;
    width: 18px;
    height: 13px;
    margin-right: 10px;
	margin-top: -5px;
    vertical-align: middle;
}

.mc-pdp-stock-placeholder label.label.label-primary {
	background: none !important;
	color: #0B3058;
}

.mc-pdp-stock-placeholder label.label.label-primary::before {
    content:  url(../image/pdp/afhalenpdp.svg);
    display: inline-block;
    width: 18px;
    height: 13px;
    margin-right: 10px;
	margin-top: -5px;
    vertical-align: middle;
}

/* =============================================================
   PDP RECHTERKOLOM - Kristalonline
   MCE Digital
   ============================================================= */

.mc-pdp-info {
    padding-left: 50px;
}

/* --- Titel + socials --- */
.mc-pdp-titlerow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 5px;
}

.mc-pdp-title {

}

.mc-pdp-socials {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    padding-top: 5px;
}

.mc-pdp-social {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-pdp-social img {
    width: 100%;
    height: 26px;
}

/* --- Meta: artikelnummer + collectie --- */
.mc-pdp-meta {
    margin-bottom: 45px;
}

.mc-pdp-meta-row {
    font-size: 16px;
    color: var(--color-brown);
    margin-bottom: 3px;
}

.mc-pdp-meta-label {
    font-weight: 600;
    color: var(--color-darkblue);
}

.mc-pdp-collection-link {
    color: var(--color-brown);
    text-decoration: underline;
}

/* --- Variant dropdown --- */
.mc-pdp-variant {
    margin-bottom: 53px;
}

.mc-pdp-variant-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-darkblue);
    margin-bottom: 10px;
}

.mc-pdp-variant-select {
    position: relative;
}

.mc-pdp-select {
    width: 100%;
    height: 52px;
    padding: 0 44px 0 16px;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    background: #fff;
    color: var(--color-brown);
    font-size: 15px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232b3a5c' d='M6 8L0 2l1.5-1.5L6 5l4.5-4.5L12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* --- Prijs + voorraad --- */
.mc-pdp-pricestock {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
}

.mc-pdp-price {
    font-size: 48px;
    font-weight: 600;
    color: var(--color-darkblue);
}

.mc-pdp-price-old {
    text-decoration: line-through;
    color: var(--color-brown);
    font-size: 26px;
    margin-right: 10px;
	font-weight: 400;
}

/* --- Gratis verzenden --- */
.mc-pdp-freeship {
    font-size: 14px;
    color: var(--color-brown);
    margin-bottom: 28px;
}

.mc-pdp-freeship strong {
	font-weight: 600;
}

.mc-pdp-freeship-hl {
    color: #2e9d3a;   /* groen accent zoals screenshot */
}

/* --- Quantity + ATC + wishlist --- */
.mc-pdp-cartrow {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 55px;
}

.mc-pdp-qty {
    display: flex;
    align-items: center;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.mc-pdp-qty-btn {
    width: 42px;
    height: 58px;
    border: none;
    background: #fff;
    font-size: 20px;
    color: var(--color-darkblue);
    cursor: pointer;
}

.mc-pdp-qty-input {
    width: 44px;
    height: 58px;
    border: none;
    text-align: center;
    font-size: 16px;
    color: var(--color-darkblue);
    background: #fff;
}

.mc-pdp-cart-btn {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 65px;
    border: none;
    border-radius: 8px;
    background: #2e9d3a;   /* groen zoals screenshot */
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mc-pdp-cart-btn:hover {
    background: #278032;
}

.mc-pdp-cart-icon {
    width: 25px;
    height: 29px;
		margin-right: 7px;
}

.mc-pdp-wishlist-btn {
    width: 77px;
    height: 65px;
    border: none;
    border-radius: 8px;
    background: var(--color-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-pdp-wishlist-btn img {
    width: 28px;
    height: 24px;
}

/* --- Trust-blok --- */
.mc-pdp-trust {
    display: flex;
    align-items: center;
    gap: 0;

    border-bottom: 1px solid #e5e5e5;
    border-top-left-radius: 8px;
	border-top-right-radius: 8px;
    overflow: hidden;
}

.mc-pdp-star {
    width: 18px;
    height: 17px;
    display: inline-block;
    margin-right: 2px;
	margin-top: -4px;
}

.mc-pdp-trust-kiyoh {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    flex: 1 1 auto;
	background: var(--color-soft);
	height: 62px;
}

.mc-pdp-trust-stars {
    color: #f5a623;
    font-size: 15px;
    letter-spacing: 1px;
}

.mc-pdp-trust-score {
    font-size: 14px;
    color: var(--color-brown);
}

.mc-pdp-trust-kiyohlogo {
    height: 39px;
    width: auto;
    margin-left: 20px;
}

.mc-pdp-trust-thuiswinkel {
    padding: 14px 18px;
    background: #E5E1DE;
    display: flex;
    align-items: center;
	height; 62px;
}

.mc-pdp-trust-thuiswinkel img {
    height: 34px;
    width: auto;
}

/* --- USP-lijst --- */
.mc-pdp-usps {
    background: var(--color-soft);
	border-bottom: 1px solid #E5E1DE;
    padding: 22px 24px;
    margin-bottom: 26px;
}

.mc-pdp-usp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-pdp-usp-list li {
    position: relative;
    padding-left: 30px;
    font-size: 15px;
    color: var(--color-darkblue);
    margin-bottom: 14px;
    line-height: 1.4;
}

.mc-pdp-usp-list li b{
	font-weight: 600;
}

.mc-pdp-usp-list li:last-child {
    margin-bottom: 0;
}

/* Vinkje via CSS */
.mc-pdp-usp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232b3a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Betaallogo's: grayscale, kleur bij hover --- */
.mc-pdp-payments {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
	justify-content: space-evenly;
	padding-bottom: 20px;
	border-bottom: 1px solid #E5E1DE;
}

.mc-pdp-payicon {
max-width: 85px !important;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.mc-pdp-payicon:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 767px) {
    .mc-pdp-info {
        padding-left: 15px;
        margin-top: 24px;
    }

    .mc-pdp-title {
        font-size: 24px;
    }

    .mc-pdp-price {
        font-size: 32px;
    }

    .mc-pdp-trust {

    }

    .mc-pdp-payments {
        gap: 14px;
    }

    .mc-pdp-payicon {
        height: 22px;
    }
	
	.mc-pdp-qty {
    display: flex;
    align-items: center;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.mc-pdp-cartrow {
	gap: 7px;
}

.mc-pdp-qty-btn {
    width: 24px;
    font-size: 16px;

}

.mc-pdp-qty-input {
    width: 14px;

    font-size: 16px;

}

.mc-pdp-cart-btn {

    gap:0px;

    font-size: 14px;

}

.mc-pdp-cart-btn:hover {
    background: #278032;
}

.mc-pdp-cart-icon {
    width: 20px;
    height: auto;
		margin-right: 8px;
}

.mc-pdp-wishlist-btn {
    width: 47px;

}

.mc-pdp-wishlist-btn img {
    width: 20px;
    height: auto;
}

.mc-pdp-freeship {
	font-size: 12px;
	line-height: 16px;
}

.mc-pdp-pricestock {
	margin-bottom: 20px;
}

.mc-pdp-meta-label, .mc-pdp-meta-value {
	font-size: 14px;
}

.mc-pdp-star {
	width: 13px;
	height: auto;
}

.mc-pdp-trust-score {
	font-size: 11px;
}

.mc-pdp-trust-kiyoh {
	gap: 6px;
	padding: 8px;
	height: 50px;
}

.mc-pdp-trust-kiyohlogo {
	display: none;
}

.mc-pdp-trust-thuiswinkel {
	padding: 8px 8px !important;
	height: 50px;
}

.mc-pdp-trust-thuiswinkel img {
	height: 26px;
}

.mc-pdp-usp-list li {
	font-size: 13px;
}

.mc-pdp-tabs p, .mc-pdp-spec-name, .mc-pdp-spec-value {
	font-size: 14px;
}

#product-product H1 {
	margin-bottom: 0px;
}

.mc-pdp-meta {
	margin-bottom: 25px;
}

.mc-pdp-meta-row {
	margin-bottom: 0px;
	line-height: 20px;
}

.mc-pdp-collection-link {
	font-size: 14px;
}

.mc-pdp-variant-label {
	font-size: 14px;
	margin-bottom: 3px;
}

.mc-pdp-variant {
	margin-bottom: 30px;
}

.mc-pdp-cartrow {
	margin-bottom: 30px;
}

    .mc-stock-tooltip {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: none !important;
        top: auto !important;
        bottom: 16px !important;
        transform: none !important;
    }

    /* Pijltje weg op mobiel (fixed positie, wijst nergens meer naar) */
    .mc-stock-tooltip::after,
    .mc-stock-tooltip::before {
        display: none;
    }


	
	
	
	
	
}


/* --- PDP voorraad info-tooltip (pure CSS) --- */
.mc-stock-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
}
 
.mc-stock-info-icon {
    width: 17px;
    height: 17px;
    cursor: help;
    display: block;
	margin-top: -4px;
}
 
.mc-stock-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    max-width: 80vw;
    background: #fff;
    color: var(--color-brown);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    text-align: left;
}

.mc-stock-tooltip b {
	font-weight: 600;
}
 
/* Pijltje onderaan de tooltip */
.mc-stock-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #fff;
}
 
.mc-stock-tooltip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #e0e0e0;
    margin-top: 1px;
}
 
/* Tonen bij hover of focus (toegankelijk) */
.mc-stock-info:hover .mc-stock-tooltip,
.mc-stock-info-icon:focus + .mc-stock-tooltip {
    opacity: 1;
    visibility: visible;
}
 
.mc-stock-tooltip-line {
    display: block;
    margin-bottom: 8px;
}
 
.mc-stock-tooltip-line:last-child {
    margin-bottom: 0;
}
 
/* Mobiel: tooltip iets smaller + niet buiten scherm */
@media (max-width: 767px) {
    .mc-stock-tooltip {
        width: 240px;
        left: 0;
        transform: none;
    }
    .mc-stock-tooltip::after,
    .mc-stock-tooltip::before {
        left: 20px;
    }
}

/* =============================================================
   PDP TABS - Omschrijving / Kenmerken / Verzendinformatie
   MCE Digital
   ============================================================= */

.mc-pdp-tabs {
    margin-top: 50px;
	width: 50%;
	max-width: 624px;
}

/* --- Tab-balk: minimaal met onderstreep-indicator --- */
.mc-pdp-tablist {
    border-bottom: 0px solid #e0e0e0;
	background: var(--color-soft);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	
    margin: 0 0 24px 0;
    padding: 0;
    padding-left: 0;
    margin-left: 0;
    display: flex;
    gap: 30px;
    list-style: none;
}

.mc-pdp-tablist > li {
    margin: 0;
    padding: 0;
    float: none;
}

.mc-pdp-tablist > li > a {
    display: block;
    padding: 18px 2px;
    margin: 0;
    border: none;
    background: none;
    color: var(--color-brown);
    font-size: 16px;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.mc-pdp-tablist > li > a:hover,
.mc-pdp-tablist > li > a:focus {
    background: none;
    border-color: transparent;
    color: var(--color-darkblue);
}

/* Actieve tab: onderstreep in darkblue */
.mc-pdp-tablist > li.active > a,
.mc-pdp-tablist > li.active > a:hover,
.mc-pdp-tablist > li.active > a:focus {
    color: var(--color-darkblue);
    font-weight: 600;
    border-bottom: 4px solid var(--color-darkblue);
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
    background: none;
}

/* Review-tab verborgen (JS blijft werken) */
.mc-pdp-tab-review-hidden {
    display: none !important;
}

/* --- Tab content --- */
.mc-pdp-tabcontent {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-brown);
}

.mc-pdp-tabcontent .tab-pane {
    padding: 0;
}

/* --- Kenmerken-tabel --- */
.mc-pdp-spec-table {
    width: 100%;
    border-collapse: collapse;
}

.mc-pdp-spec-table tr {
    border-bottom: 1px solid #ededed;
}

.mc-pdp-spec-table tr:last-child {
    border-bottom: none;
}

.mc-pdp-spec-name {
    padding: 12px 20px 12px 12px;
    font-weight: 600;
    color: var(--color-darkblue);
    width: 40%;
    vertical-align: top;
}

.mc-pdp-spec-value {
    padding: 12px 0;
    color: var(--color-brown);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 767px) {
    .mc-pdp-tablist {
        gap: 10px;
    }

    .mc-pdp-tablist > li > a {
        font-size: 13px;
    }
	
	.mc-pdp-tabs {
    margin-top: 30px;
	width: 100%;
	max-width: 1005;
}
	
	
}




/* =============================================================
   PDP RELATED PRODUCTS - "Bekijk ook eens"
   Full-width soft achtergrond, mc_slider carousel, 5 zichtbaar
   MCE Digital
   ============================================================= */

/* Full-width soft achtergrond (breekt uit de container) */
.mc-related-section {
    background: var(--color-soft);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 50px 0 60px;
    margin-top: 50px;
}

.mc-related-head {
    text-align: center;
    margin-bottom: 40px;
}

/* =============================================================
   SLIDER
   ============================================================= */

.mc-related-slider {
    position: relative;
    overflow: visible;   /* chevrons mogen uitsteken */
}

.mc-related-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0;
}

.mc-related-track::-webkit-scrollbar {
    display: none;
}

/* 5 zichtbaar desktop (20% van track - gap-compensatie) */
.mc-related-item {
    flex: 0 0 calc(20% - 16px);
    scroll-snap-align: start;
}

/* Tegel achtergrond wit zodat hij afsteekt tegen de soft sectie */
.mc-related-item .product-thumb {
    background: #fff;
    border-radius: 8px;
    height: 100%;
}

/* =============================================================
   CHEVRONS - wit, uitstekend
   ============================================================= */

.mc-related-slider .mc_slider_arrow {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-darkblue);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.mc-related-slider .mc_slider_arrow i {
    color: var(--color-darkblue);
}

.mc-related-slider .mc_slider_arrow_right {
    right: -22px;
}

.mc-related-slider .mc_slider_arrow_left {
    left: -22px;
}

/* =============================================================
   RESPONSIVE - Mobiel: 2 zichtbaar
   ============================================================= */

@media (max-width: 767px) {
    .mc-related-track {
        gap: 15px;
    }

    .mc-related-item {
        flex: 0 0 calc(50% - 7.5px);
    }

    .mc-related-slider .mc_slider_arrow_right {
        right: -14px;
    }

    .mc-related-slider .mc_slider_arrow_left {
        left: -14px;
    }
}


/* Flex + sticky ALLEEN op desktop */
@media (min-width: 768px) {
    #product-product .row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .mc-pdp-info {
        position: sticky;
        top: var(--mc-sticky-top);
        align-self: flex-start;
    }
}

/* Mobiel: normaal Bootstrap gedrag, kolommen stapelen */
@media (max-width: 767px) {
    #product-product .row {
        display: block;
    }

    .mc-pdp-info {
        position: static;
    }
}


.mc-pdp-spec-table tr:nth-child(odd) {
    background: #F5F3F2;
}

/* =============================================================
   MC MENUBAR (desktop) - eigen classes, geen conflicten
   MCE Digital
   ============================================================= */

.mc_menubar {
    background: var(--color-darkblue);
    height: 106px;
    position: relative;
}

.mc_menubar .container {
    height: 100%;
}

/* Item-lijst: 2 regels via natuurlijke wrap, gecentreerd */
.mc_menu_list {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 0 8px;
    position: relative;
}

/* Witte divider tussen de 2 regels */
.mc_menu_list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #fff;
    transform: translateY(-50%);
    z-index: 0;
}

.mc_menu_item {
    position: relative;
    z-index: 1;
}

.mc_menu_link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.mc_menu_link:hover,
.mc_menu_link:focus,
.mc_menu_link:active {
    background:#394050; 
    color: #fff;
    text-decoration: none;
}

.mc_menu_chevron {
    font-size: 10px;
    transition: transform 0.2s ease;
}



/* Laatste item (Sale) - afwijkend */
.mc_menu_item:last-child .mc_menu_link {
    background: var(--color-lightblue);

}

.mc_menu_item:last-child .mc_menu_link:hover {
    background: var(--color-lightblue);
}

/* =============================================================
   DROPDOWN
   ============================================================= */
.mc_menu_dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
    padding: 24px 28px;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    margin-top: 8px;
}

/* Pijltje bovenaan de dropdown */
.mc_menu_dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}

 .mc_menu_has_dropdown.mc_menu_open .mc_menu_dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

.mc_menu_dropdown_inner {
    display: flex;
    gap: 44px;
}

.mc_menu_col {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 170px;
}

.mc_menu_col > li {
    margin: 0;
}

.mc_menu_sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    color: var(--color-darkblue);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #f2f2f2;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.mc_menu_col > li:last-child > .mc_menu_sublink {
    border-bottom: none;
}

.mc_menu_sublink:hover {
    color: var(--color-lightblue);
    padding-left: 6px;
    text-decoration: none;
}

.mc_menu_subarrow {
    font-size: 10px;
    color: var(--color-brown);
    margin-left: 10px;
}

/* Sub-niveau (level 3) */
.mc_menu_subcol {
    list-style: none;
    padding: 0;
    margin: 4px 0 10px 12px;
    border-left: 2px solid var(--color-soft);
}

.mc_menu_sub2link {
    display: block;
    padding: 7px 0 7px 14px;
    color: var(--color-brown);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mc_menu_sub2link:hover {
    color: var(--color-lightblue);
    text-decoration: none;
}

/* =============================================================
   Verberg desktop menu op mobiel (mobiele menu is apart)
   ============================================================= */
@media (max-width: 991px) {
    .mc_menubar.pc {
        display: none;
    }
}

/* Haal de margin-top weg die het gat maakt */
.mc_menu_dropdown {
    margin-top: 0;
}

/* Brug op het item zelf: vult de ruimte onder het item tot de dropdown */
.mc_menu_has_dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
    z-index: 99;
}

.mc_menu_has_dropdown:hover::after {
    /* brug actief tijdens hover */
}


.mc_menu_list {
    row-gap: 12px;   /* 3px boven + 3px onder de lijn = ruimte tussen de regels */
}

 

 
    .mc_menu_dropdown {
        margin-top: 0;
    }
 
    .mc_menu_has_dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 14px;
        background: transparent;
    }
	
	.mc_menu_item {
    z-index: 1;
}

.mc_menu_has_dropdown.mc_menu_open {
    z-index: 200;
}

.mc_menu_dropdown {
    z-index: 200;
}

.mobile__nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* voorkomt scroll-lek naar de pagina */
    max-height: 100vh;
}

/* Body vastzetten als menu open is */
body.mc-menu-open {
    overflow: hidden;
}


/* =============================================================
   MC STICKY HEADER (desktop) - alleen sticky, layout intact
   MCE Digital
   ============================================================= */

@media (min-width: 992px) {
    header {
        position: sticky;
        top: 0;
        z-index: 900;
        background: #fff;
        transition: box-shadow 0.25s ease;
    }

    /* Shadow alleen onderaan, pas bij scrollen */
    header.mc-header-scrolled {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    }

    /* Sticky logo alleen tonen wanneer gescrold */
  #logo.pc a img.mc-sticky-logo {
        display: none;
    }

    /* Bij scroll: default weg, sticky tonen */
    header.mc-header-scrolled #logo.pc a img.mc-default-logo {
        display: none !important;
    }

    header.mc-header-scrolled #logo.pc a img.mc-sticky-logo {
        display: block !important;

    }
}

:root {
    --mc-sticky-top: 109px;
}

@media (min-width: 992px) {
    header.mc-header-scrolled #logo {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        margin: 0 auto;
        text-align: center;
    }

    header.mc-header-scrolled #logo img {
        max-height: 60px;
        width: auto;
        margin: 0 auto;
    }
}

/* =============================================================
   MC CART - Stap 1: layout + productlijst links
   Quantity-boxes hergebruikt van PDP (.mc-pdp-qty)
   MCE Digital
   ============================================================= */

/* Tweekoloms grid: lijst links, overzicht rechts.
   Geen 'row' class op de container (voorkomt negatieve marge).
   Ruimte tussen kolommen via padding-right op links (geen gap,
   want gap gaf ongewenste buitenmarge). */
.mc-cart-grid {
    display: flex;
    align-items: flex-start;
	    padding-left: 15px;
    padding-right: 15px;
}

.mc-cart-left {
    flex: 1 1 60%;
    min-width: 0;
    padding-right: 40px;
}

.mc-cart-right {
    flex: 0 0 34%;
    min-width: 0;
}

.mc-cart-heading {
    margin: 0 0 28px;
}

/* --- Productlijst --- */
.mc-cart-products {
    display: flex;
    flex-direction: column;
}

.mc-cart-productline {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid #ececec;
}

.mc-cart-productline:first-child {
    padding-top: 0;
}

/* Afbeelding */
.mc-cart-thumb {
    flex: 0 0 90px;
}

.mc-cart-thumb img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--color-soft);
}

/* Info */
.mc-cart-info {
    flex: 1 1 auto;
    min-width: 0;
}

.mc-cart-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-darkblue);
    text-decoration: none;
    margin-bottom: 0px;
}

.mc-cart-name:hover {
    color: var(--color-lightblue);
}

.mc-cart-option {
    display: block;
    color: var(--color-brown);
    font-size: 13px;
}

.mc-cart-price {
    font-size: 15px;
    color: var(--color-brown);
    margin-bottom: 10px;
}

/* Verwijder-link met prullenbak (onder de prijs) */
.mc-cart-remove {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-brown);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.mc-cart-remove:hover {
    color: #d9534f;
}

.mc-cart-remove .fa {
    font-size: 15px;
}

/* Quantity (hergebruik PDP-box) */
.mc-cart-qtywrap {
    flex: 0 0 auto;
}

/* =============================================================
   RESPONSIVE - Mobiel
   Layout per productline (CSS grid):
     [ afbeelding ] [ titel        ]
     [ afbeelding ] [ prijs        ] [ quantity ]
     [ afbeelding ] [ verwijder    ]
   Afbeelding spant alle rijen links; rechts titel, prijs+verwijder,
   met quantity naast prijs.
   ============================================================= */

@media (max-width: 767px) {
    .mc-cart-grid {
        flex-direction: column;
    }

    .mc-cart-left {
        padding-right: 0;
        width: 100%;
    }

    .mc-cart-right {
        width: 100%;
    }

    /* Productline wordt een grid:
       kolom 1 = afbeelding, kolom 2 = tekst, kolom 3 = quantity */
    .mc-cart-productline {
        display: grid;
        grid-template-columns: 70px 1fr auto;
        grid-template-areas:
            "thumb name  name"
            "thumb price qty"
            "thumb remove qty";
        column-gap: 24px;
        row-gap: 0px;
        align-items: start;
    }

    .mc-cart-thumb {
        grid-area: thumb;
        align-self: start;
    }

    .mc-cart-thumb img {
        width: 80px;
        height: 80px;
		margin-right: 5px;
    }

    /* Info-wrapper lost op: we laten de losse elementen zelf in areas
       vallen. Daarvoor moet .mc-cart-info 'display: contents' krijgen
       zodat de kinderen directe grid-items worden. */
    .mc-cart-info {
        display: contents;
    }

    .mc-cart-name {
        grid-area: name;
        margin-bottom: 0;
    }

    .mc-cart-price {
        grid-area: price;
        margin-bottom: 0;
        align-self: center;
    }

    .mc-cart-remove {
        grid-area: remove;
        justify-self: start;
    }

    /* Options (indien aanwezig) onder de titel */
    .mc-cart-option {
        grid-area: name;
    }

    .mc-cart-qtywrap {
        grid-area: qty;
        align-self: center;
        justify-self: end;
    }
	
	
	 .mc-cart-qty  .mc-pdp-qty-btn, .mc-cart-qty .mc-pdp-qty-input {
			height: 42px;
			width: 32px;
		}
 
	
	
}


/* =============================================================
   MC CART - Stap 2: Besteloverzicht (rechterkolom)
   MCE Digital
   ============================================================= */

.mc-cart-summary {
    /* container voor het hele overzicht */
}

/* --- Kop + aantal items --- */
.mc-cart-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
	justify-content: flex-end;
}

.mc-cart-summary-title {
    margin: 0;
    font-size: 32px;
	font-weight: 600;
    color: var(--color-darkblue);
	margin-bottom: 28px;
	line-height: 1.1;
}

.mc-cart-itemcount {
    background: #e4e0dd;
    color: var(--color-darkblue);
    font-weight: 600;
    font-size: 16px;
    padding: 8px 18px;
    border-top-right-radius: 6px;
}

/* --- Totalen-blok (subtotaal + btw grijs, totaal apart) --- */
.mc-cart-totals {
    background: var(--color-soft);
    border-radius: 8px;
    margin-bottom: 16px;
}

.mc-cart-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: var(--color-brown);
    padding: 6px 22px;
}

.mc-cart-total-title {
    font-weight: 400;
}

/* Laatste regel = Totaal: apart, met lijn erboven, vet */
.mc-cart-total-final {
    border-top: 1px solid var(--color-darkblue);
    margin-top: 8px;
    padding-top: 16px;
	margin-bottom: 20px;
	padding-bottom: 20px;
    font-size: 19px;
    font-weight: 700;
    color: var(--color-darkblue);
}

.mc-cart-total-final .mc-cart-total-title {
    font-weight: 700;
}

/* --- Verzendkosten-tekst --- */
.mc-cart-shipnote {
    font-size: 13px;
    color: var(--color-brown);
    line-height: 1.5;
    margin: 0 0 22px;
}

/* --- Checkout knop --- */
.mc-cart-checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #2e9d3a;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    padding: 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
    margin-bottom: 22px;
}

.mc-cart-checkout-btn:hover {
    background: #278032;
    color: #fff;
    text-decoration: none;
}


#button-payment-method.btn-primary {
    text-align: center;
    background: #2e9d3a;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 24px 90px !important;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}

#button-payment-method.btn-primary:hover {
    background: #278032;
    color: #fff;
    text-decoration: none;
}

/* --- Betaallogo's (grayscale -> kleur bij hover) --- */
.mc-cart-payments {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
	margin-top:30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* .mc-pdp-payicon styling komt uit de PDP CSS (grayscale + hover) */

/* --- Trust: reviews + USP's + Thuiswinkel --- */
.mc-cart-trust {
    background: var(--color-soft);
    border-radius: 8px;
    padding: 22px 0px 0px 0px;
}

.mc-cart-trust-reviews {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
	padding-left: 22px;
	padding-right: 22px;
    border-bottom: 1px solid #e2ddd8;
    margin-bottom: 16px;
}

.mc-cart-trust-stars {
    display: inline-flex;
    gap: 2px;
}

.mc-cart-trust-stars .mc-pdp-star {
    width: 16px;
    height: 16px;
}

.mc-cart-trust-score {
    font-size: 14px;
    color: var(--color-brown);
}

.mc-cart-usp-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0px 22px;
	font-weight: 500;
}

.mc-cart-usp-list li {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    color: var(--color-darkblue);
    margin-bottom: 12px;
    line-height: 1.4;
}

.mc-cart-usp-list li:last-child {
    margin-bottom: 0;
}

.mc-cart-usp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232b3a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.mc-cart-thuiswinkel {
    padding-top: 10px;
	padding-bottom: 15px;
    border-top: 1px solid #e2ddd8;
    display: flex;
    justify-content: center;
	background: #e4e0dd;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	
}

.mc-cart-thuiswinkel img {
    height: auto;
    width: 111px;
}

/* =============================================================
   RESPONSIVE - Mobiel
   ============================================================= */

@media (max-width: 767px) {
    .mc-cart-right {
        margin-top: 30px;
    }

    .mc-cart-summary-title {
        font-size: 22px;
    }
}

.mc-cart-payicon {
    max-width: 55px !important;
    max-height: 24px;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.mc-cart-payicon:hover {
    filter: grayscale(0%);
    opacity: 1;
}




/* Voorraad-meldingen (niet op voorraad / alleen afhalen) */
.mc-pdp-notice {
    padding: 12px 0px;
    font-size: 14px;
    line-height: 1.5;
    margin: 14px 0;
}

.mc-pdp-notice strong {
	font-weight: 600;
}

.mc-pdp-notice-nostock {

    color: var(--color-darkblue);

}

.mc-pdp-notice-pickup {
    color: var(--color-darkblue);
}

/* Freeship-blok: gratis-bezorgd variant */
.mc-freeship-qualified strong {
    color: #2e9d3a;
    font-weight: 600;
}



/* --- Button in notify-modus: andere kleur + volle breedte --- */
#button-cart.mc_notify_active {
    background: var(--color-lightblue);
    width: 100%;
    justify-content: center;
}

#button-cart.mc_notify_active:hover {
    background: var(--color-darkblue);
}

/* --- Module-icoontje (fa-shopping-cart) verbergen --- */
#button-cart.mc_notify_active .fa-shopping-cart {
    display: none;
}

/* --- Eigen notify-icoon tonen via ::before --- */
#button-cart.mc_notify_active::before {
    content: "";
    display: inline-block;
    width: 32px;      /* gelijk aan de cart-icon grootte; pas aan indien nodig */
    height: 24px;
    margin-right: 8px;
    background-image: url("../image/notifyicon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    /* Wit maken zodat het icoon op de gekleurde knop past.
       Verwijder deze regel als notifyicon.svg al de juiste kleur heeft. */
    filter: brightness(0) invert(1);
}

/* --- Quantity-box verbergen in notify-modus ---
   :has() reageert automatisch zodra de module de class toevoegt. */
.mc-pdp-cartrow:has(#button-cart.mc_notify_active) .mc-pdp-qty {
    display: none;
}

#productavaible h4.modal-title {
	font-size: 20px;
}

.floatwa {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 1111100;
}

.floatwa .fa {
    font-size: 36px;
    color: #25d366;
    line-height: 1;
}

.floatwa,
.floatwa:hover,
.floatwa:focus,
.floatwa:visited {
    text-decoration: none;
}

.floatwa:hover {
    background-color: #e9faf0;
}

@media (max-width: 767px) {
    .floatwa {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
    .floatwa .fa {
        font-size: 30px;
    }
}



/* ============================================================
   MCE Digital - Productlabels op productlijsten
   Labels linksboven op de productafbeelding, onder elkaar, klein.
   ============================================================ */


.mc-product-labels {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none; /* puur visueel, vangt geen klikken af */
}

/* Individueel label: klein, compact */
.mc-product-label {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}


@media (max-width: 767px) {
    .mc-product-labels {
        top: 5px;
        left: 5px;
        gap: 3px;
    }
    .mc-product-label {
        font-size: 9px;
        padding: 1px 5px;
    }
}

.mc-price-slider {
    position: relative;
    height: 20px;
    margin: 18px 8px 6px;
    border: none;
    box-shadow: none;
    background: transparent;
}
 
/* De balk (base) - dun, licht */
.mc-price-slider.noUi-target {
    background: #e4e2e0;
    border-radius: 2px;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
}
 
/* Het gevulde deel tussen de handles - darkblue */
.mc-price-slider .noUi-connect {
    background: var(--color-darkblue);
    border-radius: 2px;
}
 
/* De handles - wit, rond, met shadow (zoals de originele), klein */
.mc-price-slider .noUi-handle {
    width: 12px;
    height: 12px;
    right: -6px;              /* centreren op het punt (helft van breedte) */
    top: -4px;
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
 
/* noUiSlider zet standaard twee streepjes in de handle - weg */
.mc-price-slider .noUi-handle:before,
.mc-price-slider .noUi-handle:after {
    display: none;
}
 
/* Geen focus-outline die de stijl breekt */
.mc-price-slider .noUi-handle:focus {
    outline: none;
}
 
/* Wat lucht boven de slider t.o.v. de prijs-velden */
.mc-price-inputs {
    margin-bottom: 4px;
}

.noUi-horizontal .noUi-handle {
    width: 20px !important;
    height: 20px !important;
    right: -10px !important;
    top: -10px !important;
}

/* ============================================================
   MCE Digital - B-light counts styling
   ============================================================ */

/* Dode filteroptie: uitgegrijsd, niet klikbaar */
.mc-filter-check.mc-filter-dead {
    opacity: 0.4;
    cursor: not-allowed;
}
.mc-filter-check.mc-filter-dead input {
    cursor: not-allowed;
}

/* "Toon producten"-knop uitgegrijsd bij 0 resultaten */
.mc-filter-apply-disabled,
.mc-filter-apply[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* Klantengroep radio buttons */
.mc-customer-group-radios {
    display: flex;
    gap: 20px;
}

.mc-radio-label {
    cursor: pointer;
}

.mc-radio-label input[type="radio"] {
    cursor: pointer;
    margin-right: 5px;
}

.mc-company-field {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.mc-company-field.mc-visible {
    max-height: 200px;
}

.mc_quickcheckout #button-login, .mc_quickcheckout #button-coupon {
	height: 41px;
}

.terms input {
	margin-left: 5px;
	    margin-top: -2px;
    vertical-align: middle;
}

a.agree {
	text-decoration: underline;
}



@media (min-width: 768px) {
.mc_quickcheckout  #button-payment-method {
	margin-left: 20px;
}

 .mc-login-chevron {
    display: none !important;
}

.mc_quickcheckout h1 {
	margin-bottom: 25px;
}


}

@media (max-width: 767px) {
.mc_quickcheckout  #button-payment-method {
	margin-left: 0px;
	width: 100%;
}

.text-right .terms {
	text-align: left;
	font-size: 14px;
}

.terms label {
	font-size: 14px;
	padding-bottom: 10px;
}

.terms input {
	margin-left: 8px;
    margin-top: -2px;
    vertical-align: middle;
}

.mc-login-chevron {
    padding-top: 2px;
    font-size: 16px;
    }
	
.quickcheckout-heading {
	font-size: 16px !Important;
}





}

.or {
	margin-top: 25px;
	margin-bottom: 5px;
	font-size: 30px;
	font-weight: 700;
}

.quickcheckout-cart thead td, #coupon-heading  {
	color: var(--color-black) !important;
    font-family: 'Montserrat';
    font-weight: 600 !important;
	background: #F5F3F2 !important;

}
 #coupon-heading {
	border-top-left-radius: 8px;
    border-top-right-radius: 8px;
		border-bottom-left-radius: 0px !Important;
    border-bottom-right-radius: 0px !important;
	border: 1px solid #eee;
 }
 
 /* ============================================================
   MCE Digital - Uitklap-chevron in de coupon/voucher/reward headings
   ============================================================ */

/* Headings klikbaar + ruimte voor de chevron rechts */
#coupon-heading,
#voucher-heading,
#reward-heading {
    cursor: pointer;
    position: relative;
    padding-right: 30px;
	margin-bottom: 0px !Important;
}

/* De chevron rechts, verticaal gecentreerd */
.mc-coupon-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* Open: chevron draait naar boven */
#coupon-heading.open .mc-coupon-chevron,
#voucher-heading.open .mc-coupon-chevron,
#reward-heading.open .mc-coupon-chevron {
    transform: translateY(-50%) rotate(180deg);
}

#coupon-content {
border-right: 1px solid #eee;	
border-left: 1px solid #eee;	
border-bottom: 1px solid #eee;	
padding: 10px;
			border-bottom-left-radius: 8px !Important;
    border-bottom-right-radius: 8px !important;
}

#voucher .quickcheckout-content {
			border-bottom-left-radius: 0px !Important;
    border-bottom-right-radius: 0px !important;
}

/* ============================================================
   MCE Digital - Winkelwagen mobiel (quickcheckout)
   Kaart-layout: afbeelding links, naam+opties rechts ernaast,
   daaronder aantal (links) en totaal (rechts). Stukprijs verborgen.
   Geen horizontale scroll meer.
   ============================================================ */

@media (max-width: 767px) {

	/* Geen horizontale scroll */
	table.quickcheckout-cart {
		overflow: visible;
		width: 100%;
		display: block;
	}
	table.quickcheckout-cart tbody {
		display: block;
		width: 100%;
		border-bottom: 1px solid #eee;
		border-radius: 8px;
	}

	/* Kopregel verbergen op mobiel */
	table.quickcheckout-cart thead {
		display: none;
	}

	/* Stukprijs weg op mobiel */
	table.quickcheckout-cart .mc-cart-product td.price1 {
		display: none;
	}

	/* ---- Productrij als kaart ----
	   Grid: kolom 1 = afbeelding (80px), kolom 2 = content.
	   Rij 1: naam. Rij 2: aantal + totaal (die verdelen we zelf). */
	table.quickcheckout-cart tr.mc-cart-product {
		display: grid;
		grid-template-columns: 80px 1fr;
		grid-template-areas:
			"image name"
			"image meta";
		column-gap: 12px;
		row-gap: 6px;
		align-items: start;
		padding: 12px 0;
	
	}

	/* Afbeelding links, over beide regels */
	table.quickcheckout-cart tr.mc-cart-product td.image {
		grid-area: image;
		padding: 0;
		border: none;
	}
	table.quickcheckout-cart tr.mc-cart-product td.image img {
		width: 80px;
		height: auto;
	}

	/* Naam + opties (bovenste regel, rechts van de afbeelding) */
	table.quickcheckout-cart tr.mc-cart-product td.name {
		grid-area: name;
		padding: 0;
		border: none;
		font-weight: 600;
	}
	table.quickcheckout-cart tr.mc-cart-product td.name a {
		display: inline-block;
		margin-bottom: 4px;
	}
	table.quickcheckout-cart tr.mc-cart-product td.name small {
		font-weight: 400;
	}

	/* De meta-regel: aantal (links) + totaal (rechts).
	   Beide cellen in dezelfde grid-area 'meta', maar we maken die area
	   zelf een flex-rij door de cellen inline te laten vloeien met een
	   flex-wrapper. Omdat het losse td's zijn, gebruiken we een truc:
	   de td.quantity en td.total krijgen elk 50% en floaten. */
	table.quickcheckout-cart tr.mc-cart-product td.quantity,
	table.quickcheckout-cart tr.mc-cart-product td.total {
		grid-area: meta;
		padding: 0;
		border: none;
	}
	table.quickcheckout-cart tr.mc-cart-product td.quantity {

		text-align: left;
		color: #555;
		justify-self: start;
	}
	table.quickcheckout-cart tr.mc-cart-product td.total {

		text-align: right;
		justify-self: end;
	}

	/* ---- Totaal-rijen (subtotaal, verzending, totaal) ---- */
	table.quickcheckout-cart tr.mc-cart-total {
		display: flex;
		justify-content: space-between;
		padding: 4px 0;
			border-top: 1px solid #eee;
			border-right: 1px solid #eee;
			border-left: 1px solid #eee;
			
	}
	table.quickcheckout-cart tr.mc-cart-total td {
		display: inline-block;
		width: auto;
		padding: 0;
		border: none;
	}
	table.quickcheckout-cart tr.mc-cart-total td[colspan] {
		text-align: left;
	}
	
	

    /* Vaste kolombreedtes uitschakelen op mobiel - de kaart-layout bepaalt de ruimte */
    table.quickcheckout-cart td.name,
    table.quickcheckout-cart td.image,
    table.quickcheckout-cart td.quantity,
    table.quickcheckout-cart td.price1,
    table.quickcheckout-cart td.total {
        width: auto !important;
    }
	


    /* Heading boven de winkelwagen (alleen mobiel) */
    .mc-cart-heading {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: var(--color-darkblue, #444D60);
        padding: 0 12px 8px;
    }

    /* Padding links/rechts op het productblok zodat afbeelding + tekst
       niet tegen de border plakken */
    table.quickcheckout-cart tr.mc-cart-product {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* En op de totaal-rijen dezelfde padding voor uitlijning */
    table.quickcheckout-cart tr.mc-cart-total {
        padding: 12px;

    }
	
}
@media (min-width: 768px) {
/* Heading standaard verbergen (alleen mobiel toont 'm via de media-query) */
.quickcheckout-cart-heading-mobile {
    display: none;
}
}

img.checkouticonspayment {
	max-width: 65px;
	padding: 3px;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
	
#payment-method .table.table-hover.table-striped td {
    vertical-align: middle !important;
}


#payment-method .table-striped>tbody>tr:nth-of-type(odd) {
background: none;
}

//* ============================================================
   MCE Digital - Betaalmethode selectie (stijl A - subtiele highlight)
   Gescoped onder #payment-method.
   ============================================================ */

/* Striping uit - schone, gelijke rijen */
#payment-method .table.table-striped > tbody > tr:nth-child(even),
#payment-method .table.table-striped > tbody > tr:nth-child(odd) {
    background: #fff;
}

#payment-method .table.table-striped > tbody > tr {
    background: #fff;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}
#payment-method .table.table-striped > tbody > tr > td {
    vertical-align: middle;
    border-top: none;
}

/* Hover - subtiele highlight */
#payment-method .table.table-striped > tbody > tr:hover {
    background: #f5f7fa;
}
#payment-method .table.table-striped > tbody > tr:hover > td {
    background: #f5f7fa;
}

/* Geselecteerd - lichte achtergrond + gekleurde rand */
#payment-method .table.table-striped > tbody > tr.mc-selected > td {
    background: #eef2f9;
}
#payment-method .table.table-striped > tbody > tr.mc-selected > td:first-child {
    border-left: 3px solid var(--color-lightblue, #5C79AC);
}

/* ============================================================
   MCE Digital - Verzendmethode selectie (stijl A - subtiele highlight)
   Gescoped onder #shipping-method.
   ============================================================ */

#shipping-method .table-checkout tr.mc-shipping-row {
    background: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
#shipping-method .table-checkout tr.mc-shipping-row > td {
    vertical-align: middle;
    border-top: none;
}

/* Hover - subtiele highlight */
#shipping-method .table-checkout tr.mc-shipping-row:hover > td {
    background: #f5f7fa;
}

/* Geselecteerd - lichte achtergrond + accentstreepje links */
#shipping-method .table-checkout tr.mc-shipping-row.mc-selected > td {
    background: #eef2f9;
}
#shipping-method .table-checkout tr.mc-shipping-row.mc-selected > td:first-child {
    border-left: 3px solid var(--color-lightblue, #5C79AC);
}

.availability label.label.mc-variants-label {
    background-color: none;
    color: #444D60;
}
.availability label.label.mc-variants-label::before {
    content: url(../image/varianticon.svg);
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: top;
}


/* ============================================================
   MCE Digital - PDP variant-kaartjes (stijl 4: radiobutton)
   Kleuren: op voorraad #17A220, niet op voorraad #D52607,
   alleen afhalen #0B3058. Huisstijl darkblue #444D60.
   ============================================================ */
.mc-pdp-variants {
    margin: -10px 0px 50px;
}
.mc-pdp-variant-label {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}
.mc-pdp-variant-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
 
/* Kaartje */
.mc-pdp-variant-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1.5px solid #e6e8ec;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    color: #444D60;
    transition: border-color .15s ease, background .15s ease;
}
.mc-pdp-variant-card:hover {
    border-color: #5C79AC;
}
.mc-pdp-variant-card.mc-current {
    border-color: #444D60;
    background: #f4f6fa;
    cursor: default;
}
 
/* Linkerkant: radiorondje + naam */
.mc-pdp-variant-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mc-pdp-variant-radio {
    width: 16px;
    height: 16px;
    border: 2px solid #c4c9d4;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s ease;
}
.mc-pdp-variant-card.mc-current .mc-pdp-variant-radio {
    border-color: #444D60;
}
.mc-pdp-variant-card.mc-current .mc-pdp-variant-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #444D60;
    border-radius: 50%;
}
 
.mc-pdp-variant-name {
    font-weight: 600;
    font-size: 14px;
}
 
/* Rechterkant: prijs + voorraad */
.mc-pdp-variant-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
.mc-pdp-variant-price {
    font-weight: 700;
    color: #444D60;
}
.mc-pdp-variant-stock {
    font-size: 12px;
    font-weight: 600;
}
.mc-stock-in     { color: #17A220; }
.mc-stock-out    { color: #D52607; }
.mc-stock-pickup { color: #0B3058; }
 
@media (max-width: 480px) {
    .mc-pdp-variant-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .mc-pdp-variant-meta {
        width: 100%;
        justify-content: space-between;
        padding-left: 26px;
    }
}

p.inkoopformulierintro {
	display: none;
}

.form-builder-pro a.submit-button.btn.btn-primary {


    display: flex;
	max-width: 400px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 65px;
    border: none;
    border-radius: 8px;
    background: #2e9d3a;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.form-builder-pro a.submit-button.btn.btn-primary:hover {
background: #278032;
}



/* MCE Digital - Infopagina Swarovski inkoop (Kristalonline). Alleen opmaak.
   Kleuren uit de theme-variabelen (:root). Formulierknop = btn-primary van het theme. */
.mc_inkoop{ line-height: 1.7; }
.mc_inkoop p{ margin: 0 0 14px; }
.mc_inkoop a:not(.btn){ text-decoration: underline; text-underline-offset: 2px; }

/* Intro als kaart: tekst links, foto rechts aflopend en altijd even hoog als de tekst */
.mc_inkoop_intro{ display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 0 40px; border-radius: 0px; overflow: hidden; }
.mc_inkoop_text{ flex: 1 1 420px; min-width: 0; padding-right: 20px; }
.mc_inkoop_lead{ font-size: 1.15em; font-weight: 600; color: var(--color-darkblue); }
.mc_inkoop_figure{ flex: 0 1 34%; min-width: 280px; margin: 0; }
.mc_inkoop_figure img{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }

/* USP-lijst (onder de knoppen, naast elkaar) en vragenlijst met vinkjes; groen = 'op voorraad' */
.mc_inkoop_usp, .mc_inkoop_list{ list-style: none; margin: 0 0 14px; padding: 0; }
.mc_inkoop_usp li, .mc_inkoop_list li{ position: relative; padding-left: 28px; margin: 0 0 8px; }
.mc_inkoop_usp li:before, .mc_inkoop_list li:before{ content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 0; color: #17A220; }
.mc_inkoop_usp{ display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--color-darkgrey); }
.mc_inkoop_usp li{ margin: 0; font-size: 14px; font-weight: 600; color: var(--color-darkblue); }

/* Knoppen: formulierknop krijgt kleur/hover van .btn-primary; alleen kleurwissel bij hover */
.mc_inkoop_buttons{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.mc_inkoop .mc_inkoop_btn, .mc_inkoop .mc_inkoop_btn:hover, .mc_inkoop .mc_inkoop_btn:focus{ text-decoration: none; }
.mc_inkoop .mc_inkoop_btn{ display: inline-flex; align-items: center; gap: 10px; white-space: normal; padding: 15px 22px; font-size: 17px; }
.mc_inkoop .mc_inkoop_btn i{ font-size: 1.2em; }
.mc_inkoop .mc_inkoop_btn_whatsapp{ background: #25D366; color: #fff; border: 0; border-radius: 4px; font-weight: 600; transition: background 0.2s ease; }  /* WhatsApp-merkkleur */
.mc_inkoop .mc_inkoop_btn_whatsapp:hover, .mc_inkoop .mc_inkoop_btn_whatsapp:focus{ background: #1EBE5B; color: #fff; }

/* Uitklapvragen (details/summary: geen JS nodig, tekst blijft indexeerbaar) */
.mc_inkoop_faq{ margin: 0 0 40px; border-top: 1px solid var(--color-darkgrey); }
.mc_inkoop_item{ border-bottom: 1px solid var(--color-darkgrey); }
.mc_inkoop_item summary{ list-style: none; cursor: pointer; position: relative; padding: 18px 40px 18px 0; }
.mc_inkoop_item summary::-webkit-details-marker{ display: none; }
.mc_inkoop_item summary h2{ display: inline; margin: 0; line-height: 1.4; }
.mc_inkoop_item summary:focus-visible{ outline: 2px solid var(--color-darkblue); outline-offset: 2px; }
/* Icoon: dunne chevron die omdraait */
.mc_inkoop_item summary:after{ content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--color-darkblue); border-bottom: 2px solid var(--color-darkblue); transform: translateY(-75%) rotate(45deg); transition: transform .25s; }
.mc_inkoop_item[open] summary:after{ transform: translateY(-25%) rotate(-135deg); }
.mc_inkoop_body{ padding: 0 0 18px; }

/* Afsluiting */
.mc_inkoop_outro h2{ margin: 0 0 14px; }
.mc_inkoop_note{ padding: 2px 0 2px 16px; border-left: 4px solid var(--color-darkblue); font-weight: 600; }
.mc_inkoop_trust{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 18px; padding: 20px; background: var(--color-soft); border-radius: 12px; }
.mc_inkoop_trust img{ max-width: 160px; height: auto; }
.mc_inkoop_trust p{ flex: 1 1 260px; margin: 0; }

@media (max-width: 767px){
	.mc_inkoop_text{ padding: 24px 20px; }
	.mc_inkoop_figure{ flex-basis: 100%; order: -1; max-height: 240px; }
	.mc_inkoop_buttons .mc_inkoop_btn{ width: 100%; justify-content: center; }
}
.mc_inkoop .mc_inkoop_usp{ display: block; }
.mc_inkoop .mc_inkoop_usp li{ display: block; font-size: inherit; margin: 0 0 8px; }

/* =============================================================
   MC MEGAMENU
   > 10 subcategorieen: volle breedte binnen de wrapper, per
   beginletter gegroepeerd in 4 kolommen (.mc_menu_mega).
   <= 10: compacte dropdown. Positie en breedte zet de JS in
   menu.twig (style.left / style.width / --mc-arrow).
   MCE Digital
   ============================================================= */
.mc_menu_dropdown.mc_menu_positioned {
    transform: translateY(12px);
    max-width: calc(100vw - 32px);
}

.mc_menu_has_dropdown.mc_menu_open .mc_menu_dropdown.mc_menu_positioned {
    transform: translateY(0);
}

.mc_menu_dropdown.mc_menu_positioned::before {
    left: var(--mc-arrow, 50%);
}

/* Geen verschuiving bij hover: alleen kleur */
.mc_menu_sublink,
.mc_menu_sublink:hover {
    padding-left: 0;
}

.mc_menu_sublink {
    font-size: 15px;
    line-height: 1.3;
    padding: 8px 0;
    transition: color 0.15s ease;
}

/* Megamenu */
.mc_menu_mega {
    min-width: 0;
    padding: 22px 32px 26px;
}

.mc_menu_mega_title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-darkblue);
    margin-bottom: 6px;
}

.mc_menu_mega_cols {
    column-count: 4;
    column-gap: 40px;
}

.mc_menu_mega_group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    padding-top: 12px;
}

.mc_menu_mega_letter {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-lightblue);
    border-bottom: 1px solid #ececec;
    padding-bottom: 4px;
    margin-bottom: 2px;
}

.mc_menu_mega .mc_menu_col {
    min-width: 0;
}

.mc_menu_mega .mc_menu_sublink {
    border-bottom: none;
    padding: 5px 0;
}

.mc_menu_mega .mc_menu_sublink:hover {
    color: var(--color-darkblue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1199px) {
    .mc_menu_mega_cols {
        column-count: 3;
    }
}

.mc-pdp-specs {
    margin-top: 0px;
}

.mc-pdp-spec-value a {
color: var(--color-lightblue);
}

.mc-pdp-spec-value a:hover {
    color: var(--color-darkblue);
}

#product-manufacturer #content {
    font-size: 16px;
}

#product-manufacturer hr {
    margin-top: 15px;
    margin-bottom: 25px;
}

#product-manufacturer .row {
    display: flex;
    flex-wrap: wrap;
}

#product-manufacturer .product-grid {
    width: 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

@media (max-width: 1199px) {
    #product-manufacturer .product-grid { width: 25%; flex-basis: 25%; max-width: 25%; }
}
@media (max-width: 991px) {
    #product-manufacturer .product-grid { width: 33.333%; flex-basis: 33.333%; max-width: 33.333%; }
}
@media (max-width: 767px) {
    #product-manufacturer .product-grid { width: 50%; flex-basis: 50%; max-width: 50%; }
    #product-manufacturer .product-grid:nth-child(even) { padding-left: 7px; }
    #product-manufacturer .product-grid:nth-child(odd) { padding-right: 7px; }
    #product-manufacturer .mc-price-row { height: 70px; }
}



/* =============================================================
   MC ONTWERPERS-OVERZICHT (product/manufacturer)
   Basis Batterijenhuis, stijl Kristalonline
   MCE Digital
   ============================================================= */
#product-manufacturer-list #content {
    font-size: 16px;
}

#product-manufacturer-list hr {
    margin-top: 15px;
    margin-bottom: 25px;
}

/* Zoeken + teller */
.mc_manu_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.mc_manu_search_wrap {
    position: relative;
    flex: 0 1 380px;
}

.mc_manu_search {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 16px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 15px;
    color: var(--color-darkblue);
    background: #fff;
    transition: border-color 0.15s ease;
}

.mc_manu_search:focus {
    outline: none;
    border-color: var(--color-lightblue);
}

.mc_manu_search_clear {
    display: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--color-brown);
    cursor: pointer;
}

.mc_manu_search_wrap.mc_has_value .mc_manu_search_clear {
    display: block;
}

.mc_manu_count {
    font-size: 14px;
    color: var(--color-brown);
}

/* A-Z balk */
.mc_manu_az_bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px;
    margin-bottom: 30px;
    background: var(--color-soft);
    border-radius: 10px;
}

.mc_manu_az_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-darkblue);
    background: #fff;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

a.mc_manu_az_link:hover,
a.mc_manu_az_link:focus {
    background: var(--color-lightblue);
    color: #fff;
    text-decoration: none;
}

.mc_manu_az_disabled {
    color: #c4c4c4;
    background: transparent;
    cursor: default;
}

/* Secties per letter */
.mc_manu_section {
    margin-bottom: 28px;
}

.mc_manu_letter {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-lightblue);
    border-bottom: 1px solid #ececec;
    padding-bottom: 6px;
    margin: 0 0 6px;
}

.mc_manu_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
}

.mc_manu_link {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-darkblue);
    text-decoration: none;
}

.mc_manu_link:hover,
.mc_manu_link:focus {
    color: var(--color-darkblue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mc_manu_hidden {
    display: none !important;
}

.mc_manu_empty p {
    color: var(--color-brown);
}

.mc_manu_back_top {
    margin: 10px 0 30px;
    text-align: right;
}

.mc_manu_back_top a {
    font-size: 14px;
    color: var(--color-lightblue);
}

@media (max-width: 991px) {
    .mc_manu_grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .mc_manu_grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
    .mc_manu_search_wrap { flex-basis: 100%; }
    .mc_manu_az_link { min-width: 30px; height: 30px; font-size: 14px; }
}

/* =============================================================
   MC CONTACTPAGINA (variant 1 - zachte blokken)
   MCE Digital
   ============================================================= */
#information-contact #content { font-size: 16px; }
#information-contact hr { margin-top: 15px; margin-bottom: 25px; }

.mc_contact_section { margin-bottom: 36px; }
.mc_contact_heading { font-size: 20px; font-weight: 600; color: var(--color-darkblue); margin: 0 0 16px; }

.mc_contact_blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mc_contact_block { background: var(--color-soft); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; }

.mc_contact_item { display: flex; gap: 14px; margin-bottom: 18px; }
.mc_contact_icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.mc_contact_icon svg { width: 20px; height: 20px; fill: none; stroke: var(--color-lightblue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc_contact_label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-lightblue); margin-bottom: 4px; }
.mc_contact_text { font-size: 15px; line-height: 1.6; color: var(--color-darkblue); }

.mc_contact_notice { background: #fff; border-left: 4px solid var(--color-lightblue); border-radius: 6px; padding: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--color-darkblue); margin: 4px 0 16px; }

.mc_contact_buttons { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.mc_contact_btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; border-radius: 6px; padding: 12px 18px; border: 0; cursor: pointer; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.mc_contact_btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc_contact_btn:hover, .mc_contact_btn:focus { text-decoration: none; }

.mc_contact_btn_whatsapp { background: #25D366; color: #fff; }
.mc_contact_btn_whatsapp:hover, .mc_contact_btn_whatsapp:focus { background: #1ebe5a; color: #fff; }
.mc_contact_btn_whatsapp .mc_contact_wa_icon { width: 20px; height: 20px; fill: #fff; stroke: none; }

.mc_contact_btn_route { background: #fff; color: var(--color-darkblue); border: 1px solid #d9dce3; }
.mc_contact_btn_route:hover, .mc_contact_btn_route:focus { border-color: var(--color-lightblue); color: var(--color-lightblue); }

.mc_contact_intro { font-size: 15px; line-height: 1.6; color: var(--color-brown); margin-bottom: 20px; }
.mc_contact_intro a { color: var(--color-lightblue); font-weight: 600; }

.mc_contact_form { border: 1px solid #ececec; border-radius: 12px; padding: 30px; }
.mc_contact_row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mc_contact_field { margin-bottom: 16px; }
.mc_contact_field label { display: block; font-size: 14px; font-weight: 600; color: var(--color-darkblue); margin-bottom: 6px; }
.mc_contact_req { color: #c0392b; }
.mc_contact_form .form-control { height: auto; font-size: 15px; padding: 11px 14px; border: 1px solid #dcdcdc; border-radius: 6px; box-shadow: none; }
.mc_contact_form .form-control:focus { border-color: var(--color-lightblue); box-shadow: none; }
.mc_contact_form textarea.form-control { min-height: 150px; resize: vertical; }

.mc_contact_submit_row { display: flex; justify-content: flex-end; margin-top: 6px; }
.mc_contact_btn_submit { background: var(--color-lightblue); color: #fff; }
.mc_contact_btn_submit:hover, .mc_contact_btn_submit:focus { background: var(--color-darkblue); color: #fff; }

@media (max-width: 767px) {
    .mc_contact_blocks, .mc_contact_row { grid-template-columns: 1fr; }
    .mc_contact_form { padding: 22px; }
    .mc_contact_btn { width: 100%; }
}

/* MCE Digital - contactpagina: openingstijden als tabel */
.mc_contact_item > div:last-child { flex: 1; }

.mc_contact_hours { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 15px; color: var(--color-darkblue); }
.mc_contact_hours td { padding: 7px 0; border-bottom: 1px solid #e4e1df; }
.mc_contact_hours td:last-child { text-align: right; white-space: nowrap; }
.mc_contact_hours tr:last-child td { border-bottom: none; }
.mc_contact_hours tr.mc_today td { font-weight: 700; }

.mc_contact_hours_note { font-size: 14px; line-height: 1.5; color: var(--color-brown); margin-top: 10px; }


.mc_category_description a, .mc_module_33 .mc_seo_body a {
color: var(--color-lightblue);
text-decoration: underline;
}

.mc_category_description a:hover, .mc_module_33 .mc_seo_body a:hover {
color: var(--color-darkblue);	
}

.mc-hl-reviews.mc_kiyoh_link:hover,
.mc-hl-reviews.mc_kiyoh_link:hover * {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}

@media (min-width: 992px) {
  .mc_subbanner_card {
    min-height: 224px;
  }
  .mc_subbanner_card::after {
    background-position: right bottom;
  }
}

/* MCE Digital 31-10-2026 - mc_notificationbar (voorstel, kleur uit het ontwerp geschat: aanpassen naar de huisstijlkleur) */
.mc_notificationbar {
  background: #7a9cc8;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.mc_notificationbar_inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 44px;
  text-align: center;
}
.mc_notificationbar_text p {
  margin: 0;
}
.mc_notificationbar_text a {
  color: #fff;
  text-decoration: underline;
}
.mc_notificationbar_close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0;
  color: #fff;

  line-height: 1;
  cursor: pointer;
}

.mc_notificationbar_close .fa {
	  font-size: 26px !Important;
}
@media (max-width: 767px) {
  .mc_notificationbar_inner {
    padding: 8px 40px 8px 12px;
    font-size: 12px;
	line-height: 16px;
  }
  
 .mc_notificationbar_inner .fa-exclamation-circle {
	 display: none;
 }
}