:root {
 --header-bg: #F1F0F0;
 --blauw: #00446A;
 --zwart: #121218;
 --navy: #007BBF;
 --grijs:#5E5D5D; 
 --wit:#E9ECED;
 
 --oranje:#FF7628;
 --groen:#0C704D;
 
 --lichtgrijs: #CED6D8;
 --footerH: 170px;
 --imgbg: #E8ECED;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('BarlowCondensed-SemiBold.woff2') format('woff2'),
        url('BarlowCondensed-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html {
 position: relative;
 min-height: 100%;
}
.footer {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 background:var(--zwart);
 color:var(--wit);
 font-size:0.9em;
 padding-bottom:8px;
 max-height:var(--footerH);
 overflow:auto;
}
.footer p {margin-top:0;margin-bottom:2px;}
.footer h4{margin-top:5px;margin-bottom:2px;}
.footer img{max-width:180px;margin-top:8px;filter: brightness(150%);}
.footer .dm{padding-left:20px;font-size:0.9em}
.footer .more {color:var(--oranje);}

body {
 margin:0 0 var(--footerH);
 background:white;
 color:var(--zwart);
 font-size:1.1em;
}
.m {
 margin: 0 auto;
 max-width:1200px;
}
p {
 margin-top:8px;
 margin-bottom:8px;
}

ul {
 margin-top:0px;
}
p[data-start] {
 margin:0;
 margin-top:4px;
}

h1 {
 margin-bottom:0px!important;font-weight:bold;color:var(--grijs);
 font-size:1.8em;
}
h3,h4 {
font-weight:bold;color:var(--grijs);
 font-size:1.4em;
}
h4{font-size:1.2em;margin-top:16px}
.gr {color:var(--grijs);}
.catuitleg {
 margin-bottom:20px;
 margin-top:0px;
}

#home img {
 height:55px;
}
#home div {
 position:absolute;
 font-size:12px;
 color:var(--grijs);
 top:44px;
 left:49px;
}

#header {
 background:var(--header-bg);
 position: relative;
 z-index: 6000;
}
.header {
 height:80px;
}
.cart-link {
 position: relative;
 display: inline-block;
 text-decoration: none;
}
.cart-badge {
 background:var(--blauw);
 color:var(--wit);
 position: absolute;
 top: -10px;      /* iets boven het icoon */
 right: -20px;    /* iets naar rechts */ 
 color: #fff;
 dfont-size: 12px;
 font-weight: 600;
 padding: 4px 7px;
 border-radius: 999px;
 line-height: 1;
 min-width: 18px;
 text-align: center;
 box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.cart-badge:empty {
 display: none;
}

#menu {
 background:var(--blauw);
 color:var(--wit);
 dpadding-left:16px;
 height:40px;
 line-height:40px;
}

@media (max-width: 768px) {
 #menu {
  height: auto;
  line-height: normal;
  padding: 12px 0;
 }
}


#menu a {
 padding-left:8px;
 display:inline-block;
}
#menu .R {float:right;padding-right:16px;}

a {
 text-decoration:none;
}

a:hover {
 color:var(--navy);
 text-decoration:underline;
}

.cart a {
 margin-right:16px;
}
.cart img {
 width:24px;
}

.search-box {
 display: flex;
 width: 500px;
 position: relative;
}
@media (max-width: 768px) {
 .search-box,.hidemob {
  display: none;
 }
}

.search-box input {
 flex: 1;
 padding: 8px;
 border: 1px solid #ccc;
 
 border-radius: 4px;
 font-size: 14px; 
}

.search-box button {
 padding: 8px 12px;
 border: 1px solid #ccc;
 border-radius: 0 4px 4px 0;
 background: var(--blauw);
 color: white;
 font-size: 14px;
 cursor: pointer;
}

.search-box button:hover {
 background: #0056b3;
}
#zoekbalk {
width: 100%;
padding-right: 30px; /* zorg voor ruimte voor het vergrootglas */
}

.search-icon {
position: absolute;
right: 10px; /* Afstand vanaf de rechterrand */
top: 50%;
transform: translateY(-50%); /* Center de icon verticaal */
width: 20px; /* Breedte van het icoon */
height: 20px; /* Hoogte van het icoon */
background: url('/pix/zoek.png') no-repeat center center;
background-size: contain; /* Pas het icoon aan het beschikbare ruimte aan */
cursor: pointer;
}

.prod a {
 color:var(--zwart);
 font-weight:600;
 display:block;
 font-size:1.3em;
}
.prod .cat {
 color:var(--grijs);
 font-weight:200;
 font-size:0.8em;
}
.prijs {
 color:var(--oranje);
 font-weight:600;
 font-size:2.5em;
 font-family: 'Barlow Condensed';
 font-weight: 600;
 font-style: normal;
}
.prijs span {
 font-size:0.6em;
 font-family: 'Barlow Condensed';
 font-weight: 600;
 font-style: normal;
 display:inline-block;
 transform: translate(-1px, -11px);
}
.voorraad {
 color:var(--groen);
 border:solid 1px var(--groen);
 border-radius:3px;
 padding:4px;
 padding-left:6px; display: inline-block;
 padding-right:6px;
 font-size:0.8em; font-weight:bold;
}
.voorraad2 {
 margin-top:4px;
 color:var(--groen);
 font-size:0.8em; 
}


/* Container: zorgt dat alles op één regel blijft */
.ww {margin-top:16px;
 display: inline-flex;         /* perfect voor horizontale uitlijning */
 align-items: stretch;         /* beide elementen even hoog */
 border: 1px solid #ccc;
 border-radius: 6px;
 overflow: hidden;             /* rondingen ook voor button */
}

/* Input: neemt alle resterende ruimte */
.ww input {
 flex: 1;
 border: none;
 padding: 8px 10px;
 font-size: 16px;
 outline: none;
 width:50px; 
}

/* Button: zelfde hoogte als input */
.ww button {
 color:white;
 background: #064C6C;          /* donkerblauw bijv. */
 border: none;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 14px;
 cursor: pointer;
}

/* Afbeelding binnen de knop */
.ww button img {
 swidth: 20px;
 height: 26px;
}

/* Optioneel hover-effect */
.ww button:hover {
 background: var(--navy);
 color:white; 
}

/* Resetten van standaard browserstijlen */
input, button {
 font: inherit;
 line-height: normal;
}
.ww button span{
color:var(--wit);
font-size:18px;
font-weight:bold;
padding-right:8px;
}
.niet {color:#904D63;}

.vink {
 width:24px; height:24px; 
 border:solid 1px var(--grijs);
 border-radius:3px;
 background:white;
 font-size:20px; 
 line-height:20px; 
}
 .aan {color:var(--wit); background:var(--blauw);}
.R {
 border-radius:3px;
}
.NOSHOW {display:none;}


.wwrij {border:solid 1px var(--lichtgrijs);border-radius:4px;}
.wwrij img {width:100px;border-radius:4px 0 0 0px;border-radius:100px;padding:8px;}
.wwrij {margin-bottom:16px;}
.PADR {padding-right:16px;}
.button {background-color:var(--blauw);padding:8px;cursor:pointer;border-radius:4px;padding-left:8px;padding-right:8px; outline:none; border:solid 1 px var(--grijs); color:white;}
.button2 {display:inline-block;margin-left:8px;border:none; outline:none;border-radius:4px;height:36px!important;background-color:var(--blauw);color:var(--wit);}
.button2 img {height:34px;width:34px;}
.regelprijs {font-weight:bold;float:right;margin-right:16px;font-size:1.1em;}
.regelslug {font-weight:bold;font-size:1.1em;}

.wwr {padding:16px;font-size:1.1em;line-height:1.8em;}
.wwr .p {float:right;font-weight:bold; }
#infverzend {cursor:default;text-decoration:none;font-size:1.4em;}
.wwr .ikons img {height:40px;width:auto;border-radius:0}

.wwcheckout {margin-bottom:16px;margin-top:16px;}
.H24 {height:40px;}

input[type=submit] {padding: 4px 16px 4px 16px;margin-left:0;font-weight:bold;}

.un{text-decoration:underline;}
.grijs {background:var(--grijs);}
.verder {width:200px;font-weight:bold;height:64px;}

.radio input[type="radio"] {
 width: 16px; /* vergroot klikgebied */
 height: 16px;
 transform: scale(1.4); /* maakt visueel groter */
 accent-color: #0074d9; /* moderne browsers */
 cursor: pointer;
 margin-right: 6px;
}
label.radio img {max-height:18px;margin-right:8px;}

.radio {
 font-size: 16px;
 cursor: pointer;
}
.klein {padding-left:24px;font-size:0.8em;}
.error{font-size:1.5em;color:red;font-weight:bold;}
.red{color:red;}

.bikkelinput {
 padding: 8px 10px;
 font-size: 16px;
 outline: none;
 border:solid 1px var(--lichtgrijs);
 border-radius:4px;
}
.W100 {width:100%}

.usermenu p a {
 margin-top:8px;
 padding-left:16px;
 display:block;
 border-left:solid 4px white;
}
.select {border-left:solid 4px var(--blauw)!important;}


.welk ul {
 list-style: none;
 padding-left: 0px; /* ruimte voor de afbeelding */
}

.welk ul li {
 background: url('/pix/wiel.png') no-repeat left 4px;
 background-size: 18px 18px; /* schaal de afbeelding */
 padding-left: 30px; /* ruimte tussen bullet en tekst */
}
.rond  {border-radius:4px;}
.rond img {border-radius:4px;}
.imgbg {background:var(--imgbg);}
.h185 {height:185px;}
.h380 {height:380px;overflow:hide;text-align:center}

.vanf {font-weight:bold}
.vanf span {color:var(--oranje); font-family: 'Barlow Condensed';font-size:1.2em}


.img-container {
 position: relative;
 display: inline-block;
}

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

.overlay-text {
 position: absolute;
 top: 40%;
 left: 20%;
 width:80%;
 transform: translateX(-13%);
 background: rgba(255,118,40,0.8); /*rgba(0,68,106,0.8);*/
 color: var(--wit);
 padding: 4px 8px;
 border-radius: 4px;
 font-weight:bold;
 font-size: 1.2em;
 text-align:center;
}

.padcol {padding:0px;}
.col1 {height:52px;overflow:hidden;padding-left:8px;padding-right:4px;font-weight:bold;}
.cent {text-align:center;}
.butpad {padding-left:8px;padding-bottom:8px;padding-right:8px}
.div3 { line-height: 1.4em; height: calc(1.4em * 3); overflow:hidden;}
.foto { height:140px; object-fit:cover;
 overflow: hidden; width:160px; border-radius:4px;margin-right:8px;margin-bottom:16px;}

.zoomable {cursor:pointer;}

#info {
 border:solid 2px var(--oranje);
 margin-top:8px;
 padding:16px;
 border-radius:4px;
 background:#FFDFBB;
 font-weight:bold;font-size:1.2em;
 color:var(--blauw); 
 display:none;
}

#imgLightbox {
 position: fixed;
 inset: 0;
 display: flex !important;
 align-items: center;
 justify-content: center;
 z-index: 7000;

 /* dim + blur achterliggende content */
 background: rgba(0,0,0,.35);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);

 opacity: 0;
 visibility: hidden;
 transition: opacity .2s ease;
}
#imgLightbox.show {
 opacity: 1;
 visibility: visible;
}
#imgLightbox img {
 width: 500px;
 height: 500px;
 object-fit: contain;
 background: #fff;
 box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.kleinproduct {font-size:0.8em;margin-top:-6px;margin-bottom:4px;}
.KLEIN {font-size:0.8em;}
.now{font-weight:normal!important;font-size:1.0em!important}
.product-lang a {text-decoration:underline;}

.discover-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 8px;
 margin-top: 12px;
}

.discover-link {
 display: block;
 padding: 8px 10px;
 background: var(--imgbg);
 border-radius: 4px;
 color: var(--zwart);
 font-weight: 600;
 text-align: center;
}

a.discover-link:hover {
 color: var(--navy);
 text-decoration: none;
 background: #d9dee0;
}