:root {
    --zwart: #222;
    --thema1: #4d8b8a;
    --thema2: #222;
    --lichtgrijs: #efefef;
    --wit: #fff;
    --grijs: #a0a0a0;
}

body {font-family: 'Fira Sans', sans-serif; color: var(--zwart);}
h1 {text-transform: uppercase; font-size: 30px; font-weight: bold; margin: 0 0 30px 0;}
h2 {text-transform: uppercase; font-size: 24px; font-weight: bold; margin: 0 0 30px 0;}
a:LINK, a:VISITED {color: var(--thema1);}
a:HOVER, a:ACTIVE, a:FOCUS {color: var(--thema2);}
.mapson {display: none;}

input[type="submit"].disabled {
    cursor: not-allowed; /* Toont het verbodsteken */
    background-color: #ccc; /* Optioneel: geeft een grijze achtergrond */
    color: #666; /* Optioneel: grijze tekst */
    border: 1px solid #999; /* Optioneel: grijze rand */
    opacity: 0.6; /* Optioneel: maakt de knop visueel meer 'disabled' */
}

.cus-content a:LINK, .cus-content a:VISITED {color: var(--thema1);}
.cus-content a:HOVER, .cus-content a:ACTIVE, .cus-content a:FOCUS {color: var(--zwart);}
.btn {width: 100%;}
.hide {display: none;}
.mandatory:BEFORE {content: '* ';}
select.form-control {-webkit-appearance: menulist;}
.dropdown:hover .dropdown-menu {display: block;}
#cus-toast-product-added {padding: 20px 20px; position: fixed; top: 20px; right: 20px; z-index: 99999999; background-color: #d1e7dd; border: 1px solid #badbcc; color: #0f5132; border-radius: 10px; box-shadow: 2px 2px #ccc; font-weight: bold;}
#cus-toast-product-added a {color: #0f5132;}

.partnericons {border-top: 1px solid #ccc;}
.partnericons ul {list-style-type: none; margin: 0; padding: 0;}
.partnericons ul li {display: inline-block; margin-right: 5px; width: 60px;}

.topheader {background-color: var(--thema2); color: var(--wit); font-size: 14px; font-family: "Oswald", sans-serif; text-transform: uppercase;}
.topheader a {text-decoration: underline; color: var(--wit);}

.topnav {background-color: var(--lichtgrijs); padding: 20px 0;}
.topnav-icons {font-size: 24px; padding-right: 20px; padding-top: 3px;}
.topnav-icons a.icon {color: var(--zwart); text-decoration: none; display: inline-block; margin-right: 10px;}
.topnav-icons a.icon:last-child {margin-right: 0;}
.topnav-icons #cart {position: relative;}
.topnav-icons #cart_aantal {position: absolute; top: -10px; right: -10px; background: var(--wit); border-radius: 50px; color: var(--thema1); font-weight: bold; font-size: 14px; padding: 0px 6px;}
#cart.dropdown-toggle:AFTER {display: none;}

.cus-navbar {background-color: var(--wit) !important; font-weight: 500; border-bottom: 1px solid #ddd;}
.cus-navbar .nav-link {color: var(--thema2); padding: 15px 20px !important;}
.cus-navbar .nav-link:HOVER {background-color: var(--thema1); color: var(--wit);}
.dropdown-menu {background-color: var(--wit); border: 1px solid #ddd; border-radius: 0;}
.dropdown-menu .dropdown-item {color: var(--thema2);}
.dropdown-menu .dropdown-item:HOVER {background-color: var(--thema1); color: var(--wit);}


.zoek {position: relative;}
.zoek .form-control {width: 80%; display: inline-block; padding: 12px 15px; border-radius: 30px; font-size: 13px; text-align: center; border: 0; position: relative; z-index: 1;}
.btn-zoek {width: auto !important; display: inline-block; margin-left: -50px; background-color: var(--thema2); color: var(--wit); border: 0; border-radius: 30px; padding: 10px 30px; position: relative; z-index: 10000;}
.btn-zoek:hover, .btn-zoek:active:focus {background-color: var(--thema2); color: var(--wit);}

#zoekresultaten {width: 100%; position: absolute; top: 50px; left: 0; background-color: #fff; border: 1px solid var(--grijs); z-index: 999999; text-align: left;}
#zoekresultaten .row {padding: 5px 0;}
#zoekresultaten .cus-border-bottom {border-bottom: 1px solid var(--lichtgrijs);}
#zoekresultaten div.row a {font-weight: bold; text-decoration: none; color: var(--zwart);}
.cus-zoek-close {position: absolute; top: 0; right: 0;}



footer {background-color: var(--lichtgrijs);}
ul.cus-service-links {list-style-type: none; margin: 0; padding: 0;}
ul.cus-service-links li {margin-bottom: 6px;}
ul.cus-service-links li a {color: var(--zwart);}

ul.cus-socials {list-style-type: none; margin: 0; padding: 0; font-size: 50px;}
ul.cus-socials li {display: inline-block; margin-right: 6px;}
ul.cus-socials li a {color: var(--zwart); text-decoration: none;}

.cus-credits {font-size: 13px;}
.cus-credits a {color: var(--zwart);}


.product-item {border: 1px solid var(--lichtgrijs); padding: 10px;}
.product-item:HOVER {border: 1px solid var(--thema1);}
.owl-carousel .owl-item .product-item img {width: auto; display: inline-block;}
.productlist-item {}
.product-title {margin-bottom: 10px;}
.product-title a {color: var(--thema2); text-transform: uppercase; font-weight: bold; text-decoration: none;}
.product-price {font-size: 20px; color: var(--thema1); font-weight: normal !important;}
.product-price-detail {font-size: 30px; font-weight: bold;}
.product-verminderde-prijs {text-decoration: line-through; font-size: 14px; color: var(--zwart);}
.product-img {position: relative; margin-bottom: 5px; text-align: center;}
.cus-product-labels {position: absolute; top: 0; left: 0; border-radius: 5px;}

ul.cus-detail-attr {margin-left: 0; padding-left: 0;}
ul.cus-detail-attr li {display: inline-block; margin-right: 5px; margin-bottom: 5px;}
ul.cus-detail-attr li a {display: inline-block; color: #000; border: 1px solid #000; padding: 10px; text-decoration: none;}
ul.cus-detail-attr li a.selected.cus-op-voorraad {background-color: #111; color: #fff;}
ul.cus-detail-attr li a.selected.cus-niet-op-voorraad {background-color: #ccc; color: #999;}
ul.cus-detail-attr li a.selected.cus-bestelbaar {background-color: #f90; color: #fff;}
ul.cus-detail-attr li a.not-available-attribute {text-decoration: line-through; color: #aaa; border-color: #aaa;}

.not-available-color a {padding-left: 4px; color: #ff0000; pointer-events: none; cursor: default; overflow: hidden;}

ul.cus-detail-attr li a.cus-op-voorraad {border-color: #111; color: #111;}
ul.cus-detail-attr li a.cus-op-voorraad:HOVER, ul.cus-detail-attr li a.cus-op-voorraad:ACTIVE, ul.cus-detail-attr li a.cus-op-voorraad:FOCUS {background-color: #111; color: #fff;}
ul.cus-detail-attr li a.cus-niet-op-voorraad {border-color: #ccc; color: #ccc; text-decoration: line-through;}
ul.cus-detail-attr li a.cus-niet-op-voorraad:HOVER, ul.cus-detail-attr li a.cus-niet-op-voorraad:ACTIVE, ul.cus-detail-attr li a.cus-niet-op-voorraad:FOCUS {background-color: #ccc; color: #999; text-decoration: none;}
ul.cus-detail-attr li a.cus-bestelbaar {border-color: #f80; color: #f90;}
ul.cus-detail-attr li a.cus-bestelbaar:HOVER, ul.cus-detail-attr li a.cus-bestelbaar:ACTIVE, ul.cus-detail-attr li a.cus-bestelbaar:FOCUS {background-color: #f90; color: #fff;}
.cus-detail-attr li a.selected {display: inline-block; background-color: #000; color: #fff; border: 1px solid #000; padding: 10px; }

#minicartbody .table a {display: inline !important;}
.minicart-onvoldoende-voorraad {color: #c00; font-size: 12px; font-weight: bold;}
.minicart-product {font-weight: bold;}
.minicart-product a {color: var(--thema1) !important; text-decoration: none;}
.minicart-delete a {color: var(--zwart);}

.cus-order-steps {background-color: var(--lichtgrijs); color: var(--zwart); border-radius: 15px;}
.cus-order-steps a:first-child {}
.cus-order-steps a, .cus-order-steps a:HOVER {color: var(--thema2); padding: 10px 15px;}
.cus-order-steps a.active {background-color: var(--thema2); color: var(--wit); border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
.cus-order-steps a.success {background-color: #090; color: var(--wit); }
.cus-order-steps a.success:first-child {border-top-left-radius: 15px; border-bottom-left-radius: 15px;}

.teasers {}
.teasers h2 {color: var(--wit); text-transform: uppercase; font-size: 24px; font-weight: bold; margin: 0 0 30px 0;}
.teaser-item {margin-bottom: 25px; text-transform: uppercase;}
.teaser-item-inner {position: relative;}
.teaser-item a {color: var(--wit); text-decoration: none; }
.teaser-item a span {font-family: Oswald, sans-serif; position: absolute; top: 50%; transform: translateY(-50%);  left:0; right: 0; margin-left: auto; margin-right: auto; text-align: center; font-size: 30px; text-shadow: 2px 2px #333; }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Zwarte overlay met 50% transparantie */
    opacity: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
    display: none;
}

.slider-item .overlay {opacity: 1; background: none;}
.slider-item h2 {color: #fff; text-shadow: 2px 2px #222; font-size: 40px; font-family: Oswald, sans-serif; font-weight: normal;}
.slider-item .slider-inhoud {color: #fff; text-shadow: 2px 2px #222;}
.slider-item .cus-btn-1 {background-color: var(--zwart); color: var(--wit); border-radius: 0; padding: 10px 30px; font-family: Oswald, sans-serif; text-transform: uppercase;}
.slider-item .cus-btn-2 {background-color: var(--wit); color: var(--zwart); border-radius: 0; padding: 10px 30px; font-family: Oswald, sans-serif; text-transform: uppercase;}
.slider-item .cus-btn-3 {background-color: var(--thema1); color: var(--wit); border-radius: 0; padding: 10px 30px; font-family: Oswald, sans-serif; text-transform: uppercase;}

.teaser-item-inner:hover .overlay {opacity: 1; color: var(--wit);}
.teaser-item-inner:hover .overlay h2 {font-family: Oswald, sans-serif; font-weight: normal; font-size: 40px;}
.subrubrieken .teaser-item-inner:hover .overlay h2 {font-size: 30px;}
.teaser-item-inner:hover a span {display: none;}
.teaser-intro {font-family: Oswald, sans-serif; font-size: 18px; text-transform: none; width: 80%; margin-left: auto; margin-right: auto; text-align: center;}

.broodkruimel a {color: var(--zwart);}
.rubriek, .productdetail {}
.productdetail h1 {margin-bottom: 10px;}
#filters .form-check {margin-bottom: 5px;}
ul.rubriekennav {list-style-type: none; margin: 0; padding: 0;}
ul.rubriekennav li {margin-bottom: 6px}
ul.rubriekennav a {color: var(--zwart); text-decoration: none;}
ul.rubriekennav a:HOVER, ul.rubriekennav a:ACTIVE, ul.rubriekennav a:FOCUS {color: var(--zwart); text-decoration: underline;}
ul.rubriekennav a.active {color: var(--thema1); font-weight: bold;}
ul.rubriekennav li ul {border-left: 1px solid var(--lichtgrijs); list-style-type: none; margin: 5px 0 15px 5px; padding: 0 0 0 10px ;}

.instock {color: #090; font-weight: bold;}
.not-instock {color: #f00; font-weight: bold;}

.gerelateerde_producten {padding: 50px 0;}

.cus-content ul {}
.cus-content ul li {margin-bottom: 20px;}

.cus-cart-line {margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd;}
.cus-cart-item {border-bottom: 1px solid var(--lichtgrijs); padding: 15px 0 15px 0;}
.cus-cart-item .form-control {width: 100px!important; display: inline-block !important;}
.cus-cart-price {font-weight: bold;}

.cus-aboutus-img .owl-nav {font-size: 20px; margin-top: 6px;}
.owl-carousel.cus-aboutus-img .owl-nav button {padding-left: 3px !important; padding-right: 3px !important;}

.cus-user-logged-in {color: #090 !important;}
.cus-user-btn-logout {position: absolute; top: -20px; right: 5px; color: var(--bs-red) !important;}

#menufilters {position: absolute; background-color: var(--zwart); z-index: 100; top: 0; left: 0; padding: 25px; display: none; height: 100%; overflow-y: scroll;}
#btn-filters {position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, -50%); z-index: 9999999; width: 90%;}
#btn-menufilters-close {text-align: right;}
#btn-menufilters-close a {color: var(--wit); font-size: 24px;}

.cus-merk {background-color: var(--lichtgrijs); border: 1px solid var(--lichtgrijs); padding: 5px; height: 100px; display: flex; align-items: center; justify-content: center;}
.cus-merk img {max-height: 140px !important;}
.cus-merk a {text-decoration: none; color: var(--zwart); font-weight: bold; text-transform: uppercase;}

.product-thumb {border: 1px solid var(--lichtgrijs);}





/* ********************************************************************************************************************************************************************/

/* BUTTONS */
.cus-btn-primary {
    color: #ffffff !important;
    background-color: var(--thema1);
    border: 1px solid var(--thema1);
    border-radius: 5px;
    padding: 15px 40px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.cus-btn-primary:hover,
.cus-btn-primary:focus,
.cus-btn-primary:active,
.open .dropdown-toggle.cus-btn-primary {
    color: #ffffff !important;
    background-color: var(--thema2);
    border-color: var(--thema2);
}

.cus-btn-logout {
    color: #ffffff !important;
    background-color: var(--bs-red);
    border: 1px solid var(--bs-red);
    border-radius: 5px;
    padding: 15px 40px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.cus-btn-logout:hover,
.cus-btn-logout:focus,
.cus-btn-logout:active,
.open .dropdown-toggle.cus-btn-logout {
    color: #ffffff !important;
    background-color: var(--thema2);
    border-color: var(--thema2);
}


.btn-dark {color: var(--wit)!important;}





/* MEDIA QUERIES */
@media (max-width: 767px) {
    .slider .slider-item .overlay {position: static; background-color: var(--thema1); display: block; padding: 15px; height: auto;}
    .slider .slider-item .overlay h2 {font-size: 20px;}
}

@media (min-width: 768px) {
    .btn {width: auto;}
    #minicartbody {width: 500px;}
    #tr-bonnen .btn {width: 100% !important;}
    .productlist-item .product-img {height: 300px; overflow: hidden;}
    .productlist-item .product-img img {max-height: 300px !important;}
    .product-item .product-img {height: 230px; overflow: hidden;}
    .product-item .product-img img {max-height: 230px !important;}
    .overlay {display: flex;}
    .cus-navbar {padding: 0!important;}
    .cus-order-steps a, .cus-order-steps a:HOVER {padding: 20px 30px;}
    .product-title {height: 100px;}
}

@media (min-width: 992px) {
    #menufilters {position: static; display: block; padding: 0 15px; background: none; overflow: hidden}
    #btn-filters, #btn-menufilters-close {display: none;}
}

@media (min-width: 768px) and (max-width: 991px) {

}

@media (min-width: 992px) and (max-width: 1199px) {

}



.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 43px;
    height: 0;
    margin-bottom: 15px;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.owl-prev, .owl-next {background: none; border: 0; font-size: 20px;}
.owl-prev.disabled, .owl-next.disabled {opacity: 0.2;}