/*
Theme Name: Go Online - Customizations
Theme URI: https://wpupdate.goonline.nl
Description: Go Online theme voor klant specifieke aanpassingen
Author: Go Online
Author URI: https://www.goonline.nl
Template: go-online
Version: 1.0.0
Text domain: go-online-child
*/

:root {
	--rood:	#cc1b59;
	--geel: #FAB613;
	--paars: #B993C3;
	--wit: #ffffff;

	--status-groen: #28a745;
	--status-oranje: #fd9843;
	--status-rood: #dc3545;

	--zwart: #000000;
	--grijs: rgba(0, 0, 0, 0.3);
	--lichtgrijs: #f8f9fa;
	--tekst-kleur: #4B4B4B;
	--border-radius: 10px;
	--button-padding: 12px 16px;
	--block-margin: 30px 0px;
	--block-padding: 30px 0px;
	--box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('css/fonts/Poppins-Regular.ttf');
}

@font-face {
    font-family: 'Chevins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('css/fonts/ChevinStd-DemiBold.otf');
}

html, body {
    color: var(--tekst-kleur);
	font-display: swap;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size:16px;
}

.container-fluid {
    width:95%;
}

*:focus {
	outline: 0;
}

h1, h2, h3 {
    font-family:'Chevins', sans-serif;
    font-weight:500;
	color: var(--rood);
}

figure {
	margin:0;
}

img {
    height: 100%;
    width: 100%;
    object-position: center center;
}

img.contain {
	object-fit: contain;
}

img.cover {
	object-fit: cover;
}

.button-container {
	margin:22px 0px;
}

.button {
    text-decoration: underline;
    border-radius: 10px;
    font-weight:500;
    font-family:'Chevins', sans-serif;
    cursor: pointer;
}

.sectie-titel {
	font-size:1.8rem; 
}

table.wp-list-table .column-name{
    width: auto!important;
}

a.ghost-button-rood {
    font-family:'Chevins', sans-serif;
	border:1px solid var(--rood);
	color: var(--rood);
	padding: var(--button-padding);
	text-decoration: none;
	border-radius: var(--border-radius);
	text-align: center;
}

a.button-rood {
    font-family:'Chevins', sans-serif;
	background: var(--rood);
	padding: var(--button-padding);
	color: var(--wit);
	text-decoration: none;
	border-radius: var(--border-radius);
	text-align: center;
}


/* == ALERT == */


.alert{
	position: fixed;
	width: 100%;
	z-index: 999;
}


/* == HEADER == */

.topbalk {
	background: var(--wit);
	padding:10px 0px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	height:80px;
}

.topbalk .container-fluid {
	height: 100%;
}

.topbalk .flex-container {
	height:100%;
}

.topbalk figure.logo {
	margin-bottom:0;
	height: inherit;
	flex:1;
}

.topbalk figure img {
	object-position: top left;
}

.account-acties {
	display:flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items:center;
	flex:1;
}

.account-acties figure {
	text-align: center;
	margin:0px 10px;
}

.account-acties figure:last-child {
	margin-right:0;
}

.account-acties figure a {
	color: var(--geel);
}

/* == MOBILE NAV == */

nav.mobile {
    position: fixed;
	z-index: 997;
	bottom: 0;
	left: 0;
    right:0;
	background: var(--wit);
}

nav.mobile .mobile-wrapper{
    height: 60px;
}

nav.mobile figure { 
	position: relative;
	margin: 0;
	border-left:1px solid var(--grijs);
	height:100%;
	min-width:60px;
}

nav.mobile figure a {
	color: var(--geel);
}

nav.mobile figure.logo a {
	height:100%;
}

nav.mobile .hamburger-menu {
	color: var(--geel);
}

nav.mobile figure .aantal-winkelmand-items, nav.mobile figure .aantal-wensenlijst-items {
	position: absolute;
	right: 3px;
	top: 5px;
	font-size: 12px;
	color: var(--wit);
	background: var(--rood);
	height: 20px;
	width: 20px;
	border-radius: 100%;
	line-height: 20px;
  }

  nav.mobile figure i {
	font-size:1.3rem;
  }

/* == MOBILE MENU == */

.mobile-menu-container {
	background: var(--wit);
	position: fixed;
	top: 0;
	left: -9999px;
	width: 100vw;
	height: 100%;
	z-index: 99999;
	transition: all 300ms ease-in-out;
	overflow-y: scroll;
}

.mobile-menu-container.tonen {
	left:0;
}

.mobile-menu-container figure {
	height:90px;
	margin-bottom:10px;
}

.mobile-menu-container figure img {
	object-position: center left;
}

.mobile-menu-container input[type="text"]{
	padding:10px 15px;
	width:100%;
}

.mobile-menu-container .menu-sluiten {
	position: absolute;
	top:30px;
	right:30px;
	cursor: pointer;
	height:30px;
	width:30px;
	border-radius:100%;
	background: var(--geel);
	color: var(--wit);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* == FOOTER == */

footer {
	padding: var(--block-padding);
	background: var(--geel);
	color: var(--wit);
}

footer ul {
	list-style-type:none;
	padding-left:0;
}

footer ul li {
	margin-bottom:5px;
}

footer ul li a {
	color: var(--wit);
}

.footer-bottom {
	padding:15px 0px 0px 0px;
	font-size:0.8rem;
}

.footer-bottom figure {
	margin:0;
}

/* == BLOCK: HEADER == */

header {
	position: relative;
	color: var(--wit);
}

header .owl-carousel {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

header .owl-carousel .owl-stage,
header .owl-carousel .owl-stage-outer,
header .owl-carousel .owl-item {
	height: inherit;
}

header .owl-carousel figure {
	position: relative;
	margin-bottom:0;
	height: inherit;
}

header .owl-carousel figure .overlay {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.2);
}

header .owl-carousel figure img {
	object-position: center top;
}

header .header__container {
	position: relative;
	z-index:2;
	margin: 50px 0px;
}

/* == PRODUCT FILTERS == */

.filter-container {
	position: fixed;
	top: 0;
	left: -100vw;
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	background: var(--wit);
	z-index: 9999;
	padding: 20px 0px;
	transition: all 500ms ease-in-out;
}

.filter-container.active {
	left:0;
}

.filter-container .filter-container-inner {
	width: 90%;
	margin: 0 auto;
}

.filter-container .toon-resultaten-btn{
	background: var(--rood);
	padding: 15px 15px;
	color: var(--wit);
	cursor: pointer;
	border-radius: 15px;
	margin-top:20px;
}

.filter-container .reset-filter {
	color: var(--geel);
	margin:5px 0px 15px 0px;
	cursor:pointer;
}

.filter-container .filters-sluiten {
	position: absolute;
	top:15px;
	right: 15px;
	font-size:1.8rem;
	cursor: pointer;
	height:40px; width:40px;
	border-radius:100%;
	background: var(--geel);
	color: var(--wit);
}

.filter-groep{
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e1;
}

.filter-groep fieldset {
	display: flex;
	justify-content: space-between;
}

.filter-groep .prijs-filter-inner {
	width: 45%;
	float:left;
	font-size: 1rem;
	display: flex;
	flex-direction: column;
}

.filter-groep .prijs-filter-inner input {
	width: 100%;
	padding: 5px;
}

.filter-groep .prijs-filter-inner input:last-child {
	padding-left: 10px;
}

.filter-groep h4 {            
	cursor:pointer; 
}

.filter-groep h4 i {
	float: right;
	transition: all 300ms ease-in-out;
	color: var(--rood);
}

.filter-groep.ingeklapt fieldset {
	display:none;
}

.filter-groep.uitgeklapt i {
	transform: rotate(90deg);
}

.filter-groep .filter-optie label {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-weight: 300;
}

.filter-groep .filter-optie input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.filter-groep .filter-optie input:checked ~ .checkmark:after {
	display: block;
}

.filter-groep .filter-optie .checkmark {
	position: absolute;
	top: 0px;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: var(--wit);
	border: 1px solid var(--geel);
}

.filter-groep .filter-optie .checkmark:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
	position: absolute;
	display: none;
	color: var(--rood);
	left: 1px;
	
	top: -3px;
	width: 5px;
	height: 10px;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

.filter-groep .filter-optie .checkmark:hover input ~ .checkmark {
	background-color: var(--wit);
	border: 1px solid var(--geel);
}

.filter-groep .filter-optie .checkmark:hover input:checked ~ .checkmark {
	background-color: var(--wit);
	border: 1px solid var(--rood);
}

/* == PAGINATION == */

.mixitup-page-list {
    margin:10px 0px;
    display:flex;
    justify-content: center;
}

.mixitup-page-list  button {
	background: var(--geel);
	color: var(--wit);
	display:flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border:none;
	padding:5px 15px;
	margin:0px 5px;
	transition: all 300ms ease-in-out;
}
        
.mixitup-page-list  button:hover,
.mixitup-page-list button.mixitup-control-active {
	background: var(--rood);
	color: var(--wit);
}
        
/* == PRODUCT OVERZICHT == */

.product-overzicht {
	margin: var(--block-margin);
	margin-top:0;
}

.product-overzicht .category-banner {
	position: relative;
	padding:30px 0px;
}

.product-overzicht .category-banner.banner-active {
	height:200px;
	margin-bottom:30px;
}

.product-overzicht .category-banner figure {
	position: absolute;
	width:100%; height:100%;
	top:0; left:0;
}

.product-overzicht .category-banner figure .overlay {
	position: absolute;
	top:0; left:0;
	width:100%; height:100%;
	background: rgba(0, 0, 0, 0.2);
}

.product-overzicht .category-banner h1 {
	position: relative;
	z-index:2;
	width:100%;
	color: var(--rood);
	margin:0;
}

.product-overzicht .category-banner.banner-active h1 {
	color: var(--wit);
}

.product-overzicht .filter-row {
	margin:10px 0px 10px 0px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	border-radius: var(--border-radius);
	padding:10px;
}

.product-overzicht .filter-resultaat {
	margin:0px 0px 20px 0px;
}
	
.product-overzicht #sortBy {
	height:44px;
	border-radius: var(--border-radius);
	cursor: pointer;
}

.product-overzicht .filters-open {
	background: var(--geel);
	color: var(--wit);
	padding:10px;
	border-radius: var(--border-radius);
	cursor: pointer;
}

.product-overzicht #product-zoeken {
	width: 100%;
	font-size: 1rem;
	font-weight: 400;
	/* margin-bottom:30px; */
	cursor:pointer;
	padding: 10px 20px;
	border-radius: var(--border-radius);
	border: 2px solid var(--geel);
}

/* == PRODUCT BOX == */

.product-box {
    position: relative;
    margin-bottom:30px;
}

.product-box .product-image-placeholder-container {
	padding:20px;
	background: rgba(250, 182, 19, 0.4);
	opacity:0.4;
}

.product-box .product-box-inner {
	position: relative;
	background: var(--wit);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	padding:10px 20px;
	border-radius: 0px 0px var(--border-radius) var(--border-radius);
}

.product-box figure.product-foto {
	height:130px;
	width:100%;
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
	margin-bottom:0;
}

.product-box figure.product-foto img {
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

.product-box a {
	text-decoration: none;
	color: var(--zwart);
}

.product-box h3.product-naam {
	color: var(--tekst-kleur);
	font-size:1rem;
}

.product-box .product-prijs {
	color: var(--zwart);
}

.product-box .bekijk-product a {
	color: var(--wit);
	display:block;
}

.product-box .bekijk-product {
	margin:20px 0px;
}

/* == CONTENT BLOK == */

.content-blok {
	padding: var(--block-padding);
}

.content-blok h2 {
	margin-bottom:20px;
}

.content-blok figure {
	width:100%;
	aspect-ratio: 1 / 1;
	margin-bottom:30px;
}

/* == ICONEN MET TEKST == */

.iconen-met-tekst {
	margin: var(--block-margin);
	padding: var(--block-padding);
	background: var(--geel);
	color: var(--wit);
}

.iconen-met-tekst h2 {
	margin-bottom:30px;
}

.iconen-met-tekst h3 {
	font-weight:800;
}

.iconen-met-tekst i {
	color: var(--rood);
	font-size:4rem;
	margin-bottom:20px;
}

/* == PRODUCTFEED == */

.productfeed-carousel .owl-stage {
	padding-left:0!important;
}

/* == WENSENLIJST == */

.wensenlijst {
	margin: var(--block-margin);
}

/* == DRAAIBOEKJES == */

.draaiboekjes {
	margin: var(--block-margin);
}

.draaiboekjes ul {
	list-style-type:none;
	padding-left:0;
	width:100%;
}

.draaiboekjes ul li {
	width:100%;
	transition: all 300ms ease-in-out;
}

.draaiboekjes ul li a {
	position: relative;
	display:block;
	color: var(--zwart);
	text-decoration: none;
	padding:20px 0px 20px 10px;
	box-shadow: var(--box-shadow);
}

.draaiboekjes ul li a::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f061";
	position: absolute;
	color: var(--wit);
	top: 0;
	right:10px;
	height:100%;
	display: flex;
	align-items:center;
}

.draaiboekjes ul li.ui-state-active a {
	background: var(--rood);
	color: var(--wit);
}

.draaiboekjes .moeilijkheidsgraad {
	font-weight:800;
}

.draaiboekjes .moeilijkheidsgraad.makkelijk {
	color: var(--status-groen);
}

.draaiboekjes .moeilijkheidsgraad.gemiddeld {
	color: var(--status-oranje);
}

.draaiboekjes .moeilijkheidsgraad.moeilijk {
	color: var(--status-rood);
}

.draaiboekjes .button-container {
	margin-top:50px;
}

/* == SINGLE PRODUCT == */

.single-product {
	padding: var(--block-padding);
}

.single-product .woocommerce-product-gallery {
	position: relative;
	margin:0px 0px 20px 0px;
}

.woocommerce-product-gallery__placeholder {
	background: rgba(250, 182, 19, 0.4);
	padding:10px;
	border-radius: var(--border-radius);
}

.single-product .woocommerce-product-gallery img.bedrijf-logo{
    position: absolute;
    z-index: 99;
    top: 10px;
    right: 10px;
    height: 50px;
    max-height: 50px;
    width: auto;
    max-width: 120px;
    background-color: #ffffffa1;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 4;
	display: block;
	height: 100%;
	content: "";
}

.single-product .woocommerce-product-gallery .product-foto {
	height:300px;
	border-radius: var(--border-radius);
	margin-bottom:0;
}

.single-product .woocommerce-product-gallery__trigger {
    visibility: hidden;
}
.single-product .woocommerce-product-gallery__trigger::before {
    visibility: visible;
}
.single-product .woocommerce-product-gallery__trigger::after {
    visibility: visible;
}

.single-product .woocommerce-product-gallery .product-foto img {
	object-fit: contain;
	object-position: center center;
	height:100%;
	width:100%;
	border-radius: var(--border-radius);
}

.single-product .woocommerce-product-gallery .product-thumbnails {
	display:flex;
	flex-direction: row;
	justify-content: center;
	margin:20px 0px;
}

.single-product .woocommerce-product-gallery .product-thumbnails figure.product-thumb {
	height:50px;
	aspect-ratio: 1 / 1;
	margin:0px 5px;
	border:2px solid var(--geel);
	cursor: pointer;
	border-radius: var(--border-radius);
}

.single-product .woocommerce-product-gallery .product-thumbnails figure.product-thumb img {
	object-fit: contain;
	border-radius: var(--border-radius);
}

.single-product h1 {
	color: var(--geel);
}

.single-product div.product-prijs {
	font-size:1.5rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.single-product #incl-donatie{
    font-size:1.5rem;
    margin-top: 10px;
  font-weight: 700;
/*  color: var(--geel);*/
}

.single-product #incl-donatie span{
    font-size: 0.7rem;
}

.single-product .pdp-buttons {
	margin-top:20px;
}

.single-product .pdp-buttons .quantity {
	width:100px;
	height:100%;
	padding:10px;
	border:1px solid var(--grijs);
	border-radius: var(--border-radius);
}

.single-product .pdp-buttons .knop-wensenlijst {
	aspect-ratio: 1 / 1;
	height:48px;
	background: var(--geel);
	border-radius: var(--border-radius);
	color: var(--wit);
	cursor: pointer;
}

.single-product .winkelmand-button {
	font-family:'Chevins', sans-serif;
	background: var(--rood);
	padding: var(--button-padding);
	color: var(--wit);
	text-decoration: none;
	border-radius: var(--border-radius);
	text-align: center;
	cursor: pointer;
	width:100%;
	margin:0px 15px;
}

.single-product .product-tabs {
	margin:20px 0px;
}

.single-product .product-tabs ul {
	list-style-type: none;
	padding-left:0;
}

.single-product .product-tabs ul li {
	margin:5px 0px 8px 5px;
	border-bottom:2px solid var(--wit);
	transition: all 300ms ease-in-out;
	padding-bottom:8px;
	flex: 1;
	text-align:center;
}

.single-product .product-tabs ul li:first-child {
	margin-left:0;
}

.single-product .product-tabs ul li a {
	color: var(--tekst-kleur);
	text-decoration: none;
	opacity: 0.5;
	transition: all 300ms ease-in-out;
}

.single-product .product-tabs #winkel-tab ul{
    margin-top: 30px;
}

.single-product .product-tabs #winkel-tab ul li{
    text-align: left;
    margin: 0;
    padding: 0;
}

#winkel-tab .bedrijf-logo{
	max-width: 175px;
	height: auto;
}


.single-product .divider {
	margin-bottom: 20px;
	padding: 20px 0px;
	border-bottom: 2px solid var(--lichtgrijs);
}

.single-product .product-tabs ul li.ui-state-active {
	border-bottom:4px solid var(--geel);
}

.single-product .product-tabs ul li.ui-state-active a {
	opacity: 1;
}
.single-product .donatie-header{
    font-family: 'Chevins', sans-serif;
    font-weight: 500;
    color: var(--rood);
    font-size: 1.2rem;
}
.single-product #donatie {
	background: transparent;
	height:48px;
	width:100%;
	border:1px solid var(--grijs);
	padding:0px 10px;
	border-radius: var(--border-radius);
}

.recent-bekeken {
	margin: var(--block-margin);
}

.recent-bekeken h2 {
	margin-bottom:30px;
}

.gerelateerde-producten {
/*	margin: var(--block-margin);*/
	margin-top: 80px;
	margin-bottom: 80px;
}

.gerelateerde-producten h2 {
	margin-bottom:30px;
}

/* == BREADCRUMBS == */

nav.rank-math-breadcrumb {
    margin:0px 0px 20px 0px;
}

nav.rank-math-breadcrumb a {
    color: var(--tekst-kleur);
	opacity:0.5;
	text-decoration: none;
}

/* == MIJN ACCOUNT == */

.mijn-account {
	margin: var(--block-margin);
}


.order-info-row-mijn-account{
	background: var(--lichtgrijs);
	border-radius: var(--border-radius);
	padding: 15px;
}

.order-acties{
	margin-top: 25px;
}

.mijn-account .dashboard-box {
	cursor: pointer;
	box-shadow:rgba(0, 0, 0, 0.1) 0px 4px 12px;
	background: var(--wit);
	padding: 15px 10px;
	color: var(--rood);
	text-align: center;
	margin-bottom: 30px;
	border-radius: var(--border-radius);
}

.mijn-account .dashboard-box i {
	font-size: 28px;
	color: var(--rood);
	margin-bottom: 15px;
	transition: all 200ms ease-in-out
}

.mijn-account .dashboard-box:hover i {

}

.mijn-account .dashboard-box a {
	text-decoration: none;
	font-size:0.8rem;
}

.mijn-account .dashboard-box a:hover {
	text-decoration: none;
    color: var(--wit);
}

.mijn-account .dashboard-box .box-naam{ 
	display: block;
	font-weight: 300;
	color: var(--rood);
	word-wrap: break-word;
}

.ontvangen .ontvangen-bestelling{
    display: flex;
    width: 50%;
    border-radius: 12px;
    -webkit-box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 20%);
    margin-bottom: 30px;
}

.ontvangen .ontvangen-bestelling .order-gegevens{
    width: 100%;
}

.ontvangen .ontvangen-bestelling .order-nummer{
    font-size: 2rem;
    margin: auto 15px;
    background-color: var(--geel);
}

.ontvangen .ontvangen-bestelling .prod-wrapper{
    width: 100%;
    display: flex;
}

.ontvangen .ontvangen-bestelling ul.header{
    display: flex;
    padding: 0;
    list-style: none;
}

.ontvangen .ontvangen-bestelling ul.product-gegevens{
    padding: 0;
    list-style: none;
}

.ontvangen .ontvangen-bestelling ul li{
    display: flex;
    padding: 0;
    list-style: none;
    width: 33%;
}

.account-header {
    margin: 30px 0px 15px 0px;
}

.account-header h1 {
	color: var(--rood);
	margin-bottom: 0;
}

.account-navigation {
    background: var(--geel);
    padding: 15px;
    margin: 5px 0px;
    border-radius: var(--border-radius);
}

.account-navigation ul{
	padding: 0;
	margin: 0;
}

.account-navigation ul li {
	list-style-type: none;
	display: inline-block;
	margin-right: 20px;
	position: relative;
}

.account-navigation ul li:last-child{
	margin-right: 0;
}

.account-navigation ul li a {
	color: var(--wit);
	text-decoration: none;
}


span.badge-aantal{
    position: absolute;
    right: -15px;
    top: -10px;
    font-size: 12px;
    color: var(--wit);
    background: var(--rood);
    height: 20px;
    width: 20px;
    border-radius: 100%;
    line-height: 20px;
    text-align: center;
}


.logout-btn{
	border: 1px solid var(--rood);
	color: var(--rood);
	border-radius: var(--border-radius);
	padding: 5px 25px;
	text-align: center;
	display: inline-block;
	font-size: 16px;
	font-weight: 300;
	text-decoration: none;
	transition: all 200ms ease-in-out;
	float:right;
}

.logout-btn:hover{
	background: var(--rood);
	color: var(--wit);
	text-decoration: none;
}






/* == INLOGGEN == */

.inloggen {
    margin: var(--block-margin);
}
.inloggen h1 {
	color: var(--rood);
}

.inloggen h3 {
	margin:10px 0px;
	font-size:1.2rem;
}

.inloggen form {
	margin-top:20px;
}

.inloggen input {
    margin:10px 0px;
}
        
.inloggen [type="submit"]{
	margin-top:20px;
}

/* == ACCOUNTGEGEVENS BIJWERKEN == */

.edit-account {
	margin: var(--block-margin);
}

.edit-account .sectie-titel {
	margin-bottom: 20px;
}

.edit-account .form-row {
	margin-bottom: 10px;
}

.edit-account  .verzendadres {
	margin-top: 30px;
}

.edit-account input[type="submit"] {
	margin-top: 10px;
}

.edit-account .wachtwoord-wijzigen {
    margin-top:30px;
}

.edit-account input[type="password"]{
	margin-top:10px;
}

.edit-account input[type="submit"]{
	display: block;
	text-align: center;
	background: var(--rood);
	color: var(--wit);
	padding: 10px 20px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	margin-top: 5px;
	border: 0;
	cursor: pointer;
	width:100%;
}

/* == AFREKENEN == */

.woocommerce-form-login-toggle .woocommerce-info {
        border: 1px solid var(--grijs);
        color: var(--wit);
        background: var(--grijs);
}

.woocommerce-form-login-toggle .woocommerce-info a {
	text-decoration: underline;
	color: var(--rood);
}
    
.woocommerce-billing-fields label {
	display: block;
	width: 100%;
	margin-bottom: 0px;
} 

.woocommerce-input-wrapper{
	width: 100%;
}

.checkout_coupon{
	margin-bottom: 30px;
}

.login-box{
	padding: 25px;
	border: 1px solid var(--grijs);
	margin: 30px 0;
}

#billing_company_field.hidden,
#shipping_company_field.hidden,
#btw_nummer_field.hidden,
#kvk_nummer_field.hidden{
	display: none;
}

#billing_postcode_field,
#billing_phone_field,
#shipping_postcode_field,
#shipping_phone_field{
	width: 47%!important;
	float: left!important;
	clear: none!important;
}

#billing_city_field,
#billing_email_field,
#shipping_city_field,
#shipping_email_field{
	width: 47%!important;
	float: right!important;
	clear: none!important;
}

#ship-to-different-address{
	margin-top: 45px;
}

.woocommerce-account-fields,.woocommerce-additional-fields{
	clear: both;
	width: 100%;
}

#order_review .winkelmand-totaal{
	margin-top: 35px;
}
#order_review .winkelmand-totaal i {
	display: none;
}

#shipping_details{
	display: none;
}

/* input[type="text"], textarea {
	width: 100%;
	padding: 5px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

input[type="checkbox"] {
	margin-right: 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
} */


/* == WINKELMAND == */

.winkelmand {
	margin: var(--block-margin);
}

.winkelmand h1 {
	margin-bottom:30px;
}

.winkelmand .betaalmethodes-partners-carousel {
	margin-top:20px;
}

.winkelmand .woocommerce-cart-form__cart-item {
	position: relative;
	margin-bottom: 20px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	padding:20px;
	border-radius: var(--border-radius);
}

.winkelmand .woocommerce-cart-form__cart-item figure {
	width:100%;
	aspect-ratio: 1 / 1;
	margin-bottom:20px;
	height:200px;
}

.winkelmand .woocommerce-cart-form__cart-item figure a {
	height:100%;
}

.winkelmand .woocommerce-cart-form__cart-item figure a img {
	object-fit: contain;
	object-position: center center;
	height: 100%;
	width: 100%;
}

.winkelmand .woocommerce-cart-form__cart-item figure.product-foto-leeg {
	background: rgba(250, 182, 19, 0.4);
}

.winkelmand .woocommerce-cart-form__cart-item .product-naam a {
	font-size:1.3rem;
	color: var(--rood);
	text-decoration: none;
	font-weight:800;
}

.winkelmand .woocommerce-cart-form__cart-item .product-aantal {
	margin-top: 10px;
    width: 150px;
}

.winkelmand .woocommerce-cart-form__cart-item .bedrijf-naam {
	opacity: 0.5;
}

.winkelmand .woocommerce-cart-form__cart-item .product-aantal label {
	display: none;
}

.winkelmand .woocommerce-cart-form__cart-item .product-aantal input.qty {
	text-align: center;
	width:80px;
	margin-bottom:20px;
}

.winkelmand .woocommerce-cart-form__cart-item .donatie-bedrag {
	text-transform: uppercase;
	opacity: 0.5;
}
.winkelmand .cart-item-knoppen {
	display:flex;
}

.winkelmand .cart-item-knoppen .knop-wensenlijst {
	border: 1px solid var(--grijs);
	border-radius: var(--border-radius);
	color: var(--geel);
	width: 40px;
	height: 40px;
	display:flex;
	align-items:center;
	justify-content: center;
	cursor: pointer;
	margin-right:10px;
}
.winkelmand .cart-item-knoppen .knop-wensenlijst.verwijderen i {
	color: var(--rood);
}

.winkelmand .cart-item-knoppen .product-verwijder {
	border: 1px solid var(--grijs);
	border-radius: var(--border-radius);
	color: var(--geel);
	width: 40px;
	height: 40px;
	display:flex;
	align-items:center;
	justify-content: center;
	cursor: pointer;
	margin-right:10px;
}
.winkelmand .cart-item-knoppen .product-verwijder.verwijderen i {
	color: var(--rood);
}

.winkelmand #shipping_method {
	padding: 0;
	margin: 0;
}

.winkelmand #shipping_method li {
	list-style-type: none;
    display: block;
}

.winkelmand .checkout-button {
	display: block;
	background: var(--rood);
	/* padding: 15px 15px; */
	color: var(--wit);
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	margin-top:20px;
	font-size: 16px;
	padding: 10px;
	/* margin-top: 0; */
}

.winkelmand .checkout-button:hover {
	color: var(--wit);
}

.winkelmand .woocommerce-NoticeGroup-updateOrderReview,
.winkelmand .update-cart-button {
	display: none!important;
}

.winkelmand-totaal {
	background: var(--lichtgrijs);
	border-radius: var(--border-radius);
	padding: 25px;
}

.winkelmand-totaal .row {
	margin-bottom:15px;
}

.winkelmand-totaal .totaal-winkelmand {
	font-weight: 700;
	font-size: 16px;
}

/* == CHECKOUT == */

.checkout-pagina {
    margin: var(--block-margin);
}

.checkout-pagina h3 {
	margin:20px 0px;
}

.checkout-pagina .login-melding{
	padding: 10px 30px;
	margin-bottom: 15px;
	background: var(--lichtgrijs);
	border-radius: var(--border-radius);
}

.checkout-pagina .login-submit input, .checkout-pagina .open-login-popup{
	background: var(--rood);
	color: var(--wit);
	padding: 6px 10px 6px 10px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	margin-top: 5px;
	border: 0;
	display: block;
	cursor: pointer;
	margin:10px 0px;
	width:100%;
}

.checkout-pagina .geen-account-melding {
	font-size:0.8rem;
	padding: 6px 0px;
}
/* 
.checkout-pagina .form-row label {
	font-size: 1.2rem;
} */

label[for="ship_to_different_address"],
label[for="billing_company"],
label[for="terms"],
label[for="shipping_company"]{
	padding-top:0;
}

.woocommerce-billing-fields #billing_company_field.hidden {
	display:none;
}

.checkout-pagina .winkelmand-items {
	margin-bottom:20px;
}

.checkout-pagina .winkelmand-items .product-thumbnail {
	padding: 0;
	display: flex;
	align-items:center;
	justify-content:center;
}

.checkout-pagina .winkelmand-items .product-naam {
	margin-bottom:0;
	font-size:1rem;
}

.checkout-pagina .winkelmand-items .product-aantal {
	margin-top:0;
}

.checkout-pagina .winkelmand-items .product-aantal input {
	padding: 4px;
}

.checkout-pagina .winkelmand-items .product-verwijder {
	display: none;
}

.checkout-pagina .winkelmand-totalen {
	background: var(--lichtgrijs);
	padding: 25px;
	margin-bottom:20px;
}

.checkout-pagina .winkelmand-totalen .row {
	margin-bottom:15px;
}

.checkout-pagina .winkelmand-totalen .totaal-winkelmand {
	font-size:1rem;
}

.checkout-pagina .winkelmand-totalen .totaal-winkelmand .checkout-button {
	margin-top:20px;
	font-size: 16px;
	padding: 10px;
	margin-top: 0;
}

.woocommerce-checkout-payment#payment {
	background:var(--lichtgrijs);
	border-radius: var(--border-radius);
}

.mollie-gateway-icon {
	margin: 1px 0 0 .5em!important;
}

.betaalmethoden {
	border: 1px solid var(--lichtgrijs);
	padding: 25px;
	margin-top: 30px;
	margin-bottom: 30px;
	float: left;
	clear: both;
	width: 100%;
}

.betaalmethoden ul {
	padding: 0;
	margin: 0;
	float: left;
	width: 100%;
	clear: both;
}

.betaalmethoden ul li {
	display: block;
	list-style-type: none;
	cursor: pointer;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--lichtgrijs);
}

.betaalmethoden ul li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.betaalmethoden ul li img {
	width: 55px;
	height:auto;
}

.checkout-pagina #place_order,#place_order:hover{
	background: var(--rood);
	color: var(--wit);
	padding: 15px;
	text-align: center;
	display: block;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	margin-top: 15px;
	border: 0;
	width: 100%;
	border:none;
	border-radius: var(--border-radius);
}

.checkout-pagina .form-row.place-order{
	width: 100%;
	clear: both;
	float: left;
}

.checkout-pagina span.algemene-voorwaarden,span.privacy-policy{
	text-decoration: underline;
	cursor: pointer;
}

.checkout-pagina .algemene-voorwaarden-content{
	display: none;
	height: 200px;
	overflow-y: scroll;
	border: 1px solid var(--grijs);
	padding: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.checkout-pagina .algemene-voorwaarden-content.active{
	display: block;
}

.checkout-pagina .woocommerce-terms-and-conditions-wrapper{
	margin-top: 30px;
}

.checkout-pagina .woocommerce-cart-form__cart-item {
	width: 100%;
	margin: 0 auto;
	padding: 20px 0px;
}

.checkout-pagina .woocommerce-cart-form__cart-item figure {
	height:50px;
}

.checkout-pagina .woocommerce-cart-form__cart-item figure img {
	object-fit:contain;
	height:100%;
	width:100%;
}

.checkout-pagina .korting-box{
	background: var(--lichtgrijs);
	border-radius: var(--border-radius);
	padding: 30px;
	margin: 15px 0px;
	width:100%;
	display: none;
}

.checkout-pagina .korting-box h3 {
	font-size: 1rem;
	color: var(--geel);
	margin:0;
	margin-bottom:10px;
}

.checkout-pagina .korting-box input[type="text"] {
	margin: 10px 0px;
}

.checkout-pagina .korting-box span.coupon-button {
	background: var(--geel);
	border-radius: var(--border-radius);
	color: var(--wit);
	font-size: 1rem;
	font-weight: 700;
	padding: 8px;
	width: 100%;
	display: block;
	cursor: pointer;
	text-align: center;
}

.checkout-pagina .korting-box .verwijder-coupon {
	text-decoration: underline;
	cursor: pointer;
	color: var(--rood);
	font-size: 12px;
}


.ophaal-info-besteld-product{
	box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
	padding-bottom: 30px;
}

.ophaal-info-besteld-product .product-naam h2{
	font-size: 21px;
}

.ophaal-info-besteld-product .product-thumbnail{
	width: 70%;
	margin: 0 auto;
}

.ophaal-info-besteld-product .bedrijf-info{
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid var(--lichtgrijs);
}

.ophaal-info-besteld-product .bedrijf-logo{
	margin: 0 auto 15px auto;
	width: 70%;
}

.ophaal-info-besteld-product .bedrijf-button{
	margin-top: 15px;
}

/* == FORMS == */

form select {
	border-radius: var(--border-radius);
	padding:10px 15px!important;
	border:1px solid var(--grijs);
	background-image:none;
	background: var(--wit);
	width:100%;
}

form textarea {
	border-radius: 10px;
	padding:10px 15px;
	border:1px solid var(--grijs);
	background-image:none;
	width:100%;
}

form input[type="file"]{
	width:100%!important;
}

form input[type="text"],
form input[type="tel"],
form input[type="date"],
form input[type="password"],
form input[type="email"] {
	border-radius: 10px;
	padding:10px 15px!important;
	border:1px solid var(--grijs);
	background-image:none;
	width:100% !important;
}

form input[type="checkbox"] {
	margin-right:5px;
	width:auto!important;
}

form input[type="submit"]{
	background: var(--rood);
	color: var(--wit);
	text-align:center;
	display:block;
	padding:10px 25px;
	border-radius: var(--border-radius);
	border:none;
}

/* == POPUP == */

.popup-bg {
    position:fixed;
    background: rgba(0, 0, 0, 0.4);
    top:0;
    right:-100%;
    width:100%;
    height:100%;
    transition: all 300ms ease-in-out;
    z-index:9999;
}

.popup-bg.active {
	right:0;
	display:block;
}

.popup {
    position:fixed;
    right:-9999px;
    top:0;
    width:100vw;
    height:100%;
    z-index:99999;
    background: var(--wit);
    transition: all 300ms ease-in-out;
    overflow-y: scroll;
}

.popup.active {
	right:0;
}

.popup-sluiten {
	position:absolute;
	right:30px;
	top:15px;
	height:30px; width:30px;
	border-radius:100%;
	background: var(--rood);
	color: var(--wit);
	display:flex;
	justify-content: center;
	align-items:center;
	cursor:pointer;
	z-index:9999;
}

.popup .popup-inner {
	position: relative;
	padding:30px 15px;
	overflow-y:scroll;
}

.popup .popup-inner h3 {
	margin-bottom:20px;
}

/* == POPUP: WINKELMAND == */

.popup.winkelmand {
	margin:0;
}

.popup.winkelmand figure {
	margin-bottom:20px;
	aspect-ratio: 1 / 0.8;
}

.popup.winkelmand .side-afreken-btn {
	margin-bottom:10px;
}

.popup.winkelmand .popup-doorgaan-button {
	font-size: 16px;
  	padding: 10px;
	text-decoration: underline;
	/* border-radius: 10px; */
}

.popup.winkelmand .popup-sluiten {
	display:none;
}

/* == ORDER RECEIVED == */

.order-received {
	margin: var(--block-margin);
}

.order-received h1 {
	color: var(--geel);
	margin-bottom:30px;
	font-size:3rem;
}

.order-received h1 span {
	color: var(--rood);
}

/* == LIVE SEARCH == */

.search {
	position: relative;
}

.live-search-results {
	display: none;
	position: absolute;
	width:100%;
	background: var(--wit);
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	padding:20px;
	z-index:99;
	max-height:300px;
	overflow-y:scroll;
}

.live-search-results .live-result-box {
	display: flex;
	transition: all 300ms ease-in-out;
	cursor: pointer;
	background: var(--wit);
	padding:10px;
}

.live-search-results .live-result-box .type-result {
	font-size:0.7rem;
	padding:5px 10px;
	background: var(--geel);
	border-radius:15px;
	color: var(--wit);
	margin:3px 0px;
}

.live-search-results .live-result-box:hover {
	background: var(--lichtgrijs);
}

.live-search-results .live-result-box:first-child {
	margin-top:0;
}

.live-search-results .live-result-box h4 {
	color: var(--rood);
	font-size:1rem;
	margin-bottom:0;
}

.live-search-results .live-result-box .result-image {
	display: flex;
	flex:20%;
	height:50px;
	margin:0;
}

.live-search-results .live-result-box .result-image.placeholder {
	padding:10px;
	background: var(--geel);
	opacity:1;
}

.live-search-results .live-result-box .result-info {
	display: flex;
	flex:80%;
	align-items: flex-start;
	justify-content: center;
	height:inherit;
	flex-direction: column;
	padding-left:10px;
}

.live-search-results .live-result-box .result-info .categorieen {
	color: var(--geel);
	font-size:0.7rem;
	margin-top:4px;
}

/* == AMBASSADEURS == */

.ambassadeurs {
	margin: var(--block-margin);
}

.ambassadeurs .ambassadeur-box figure {
	margin-bottom:20px;
	border-radius: var(--border-radius);
}

.ambassadeurs .ambassadeur-box figure img {
	border-radius: var(--border-radius);
}

.ambassadeurs .ambassadeur-box a {
	color: var(--zwart);
	text-decoration: none;
}

.ambassadeurs .ambassadeur-box a h3 {
	color: var(--rood);
	margin-bottom:5px;
}


/* == SINGLE AMBASSADEURS == */

.single-ambassadeur {
	margin: var(--block-margin);
}

.single-ambassadeur h1 {
	margin-bottom:20px;
}

.single-ambassadeur h2 {
	color: var(--zwart);
	font-size:1.5rem;
}

.single-ambassadeur figure {
	margin-bottom:40px;
	border-radius: var(--border-radius);
	height:300px;
}

.single-ambassadeur figure img {
	border-radius: var(--border-radius);
}

/* == NIEUWSBERICHTEN == */

.nieuwsberichten {
	margin: var(--block-margin);
}

.nieuws-box a {
	color: var(--tekst-kleur);
	text-decoration: none;
}

.nieuws-box a h2 {
	font-size:1.5rem;
	color: var(--rood);
}

.nieuws-box figure {
	height:300px;
	margin-bottom:0;
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

.nieuws-box figure.placeholder {
	padding:10px;
	background: var(--geel);
}

.nieuws-box figure img {
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

.nieuws-box .publicatie-datum {
	opacity:0.5;
	margin-bottom:5px;
}

.nieuws-box .content-container {
	padding:30px;
	box-shadow: var(--box-shadow);
	background: var(--wit);
	border-radius: 0px 0px var(--border-radius) var(--border-radius);

}

.nieuws-box a .lees-meer {
	color: var(--rood);
	margin-top:20px;
}

/* == BEDRIJVEN == */

.bedrijven {
	margin: var(--block-margin);
}

.single-bedrijf {
	margin: var(--block-margin);
}

.single-bedrijf ul {
	list-style-type:none;
	padding-left:0;
}

.single-bedrijf ul li {
	padding:10px;
}

.single-bedrijf ul li:nth-child(odd) {
	background: var(--lichtgrijs);
}

.single-bedrijf .bedrijf-producten {
	margin-top:100px;
}

/* == PARTNER CAROUSEL == */

.partner-carousel {
	margin: var(--block-margin);
}

.partner-carousel figure {
	height:100px;
	width:100%;
}

.partner-carousel .owl-stage-outer {
	display:flex;
	justify-content: center;
}

/* == SINGLE POST == */

.single-post {
	margin: var(--block-margin);
}

.single-post .publicatie-datum {
	opacity:0.5;
}

.single-post figure {
	height:300px;
	margin-bottom:0px;
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

.single-post figure img {
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}

.single-post .sidebar-box {
	background: var(--wit);
	box-shadow: var(--box-shadow);
	padding:20px;
	border-radius: var(--border-radius);
}

.single-post .sidebar-box .social-share {
	border-top:0;
	padding-top:0;
}

.single-post .sidebar-box h3 {
	font-size:1.3rem;
}

.single-post article {
	background: var(--wit);
	box-shadow: var(--box-shadow);
	padding:30px 20px 20px 20px;
}

.single-post .gerelateerde-artikelen {
	margin-top:100px;
}

/* == SOCIAL SHARE == */

.social-icoon{
	width: 40px;
	height: 40px;
	display:inline-block;
	margin-right: 10px;
	overflow: hidden;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
  }
  
  .social-icoon a{
	display: block;
	width: 100%;
	height: 100%;
	line-height: 42px;
	text-align: center;
	color: #ffffff;
	font-size: 18px;
  }

.social-share {
	border-top: 1px solid rgba(156, 156, 156, 0.3);
	padding-top: 20px;
  }
  
  .social-share .social-icoon:first-child {
	margin-left: 0;
  }
  
  .social-icoon.facebook a{
	background: #3b5998;
	color: var(--wit)
  }
  
  .social-icoon.linkedin a{
	background: #008cc9;
	color: var(--wit)
  }
  
  .social-icoon.email a{
	background: #f6f6f6;
	color: var(--grijs);
  }