body{font-family:Inter,sans-serif;background:#fff;color:#0f172a;margin:0;}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;border-bottom:1px solid #e5e7eb;}
.nav a{text-decoration:none;color:#0f172a;margin-left:20px;}
.nav a.active{font-weight:600;color:#1e3a8a;}
.main-flex{display:flex;gap:40px;align-items:flex-start;padding:40px;}
.filters-left{width:240px;display:flex;flex-direction:column;gap:10px;position:sticky;top:20px;border-right:1px solid #e5e7eb;padding-right:20px;}
.filters-left select, .filters-left button{padding:8px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;}
.product-list{flex:1;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;}
.product{border:1px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;background:#fafafa;}
.product img{width:100%;height:auto;border-radius:8px;}
.product h3{font-size:16px;margin:10px 0;}
.product button{background:#1e3a8a;color:#fff;border:none;padding:10px 14px;border-radius:6px;cursor:pointer;}
.product button:hover{background:#334155;}
/* Lightbox stijl */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    text-align: left; /* <— dit zorgt voor links uitlijnen */
    z-index: 999;
}

.lightbox-content {
    display: flex;
    background: #fff;
    border-radius: 12px;
    max-height: 80%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    align-items: center;
    justify-content: center;
    
    padding: 20px;
    max-width: 900px; /* vaste max breedte */
    width: 90vw; /* responsief: 90% van schermbreedte */
    min-height: 80vh; /* zorgt voor consistente hoogte */
    box-sizing: border-box;
    gap: 30px; /* ruimte tussen afbeelding en tekst */
}

.lightbox-text {
    flex: 1;
    text-align: left; /* <— dit zorgt voor links uitlijnen */
    padding: 30px;
    overflow-y: auto;
}

    .lightbox-text h2 {
        margin-top: 0;
        font-size: 36px;
        text-align: left; /* <— dit zorgt voor links uitlijnen */
    }

    .lightbox-text p {
        margin-top: 8px;
        font-size: 24px;
        text-align: left; /* <— dit zorgt voor links uitlijnen */
        color: #444;
        line-height: 1.6;
        white-space: normal; /* zorgt dat HTML-breaks goed werken */
    }

    .lightbox-text button {
        margin-top: 20px;
        padding: 10px 16px;
        border: none;
        border-radius: 8px;
        background: #1e3a8a;
        color: #fff;
        cursor: pointer;
    }

.lightbox img {
    flex: 1;
    width: 50%;
    height: auto;
    object-fit: contain;
    background: #f9fafb;
}

@media (max-width: 800px) {
    .lightbox-content {
        flex-direction: column;
    }

    .lightbox img {
        width: 100%;
    }
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 2px solid #eef2f7;
    padding: 10px;
}

.tekst-centrum {
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontaal centreren */
    justify-content: flex-start; /* verticaal centreren */
    text-align: center; /* tekst centreren */
    min-height: 80vh; /* bijna volledige schermhoogte */
    padding: 10px;
}

.contact-centrum {
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontaal centreren */
    justify-content: flex-start; /* flex-start = bovenaan centreren - center = verticaal centreren */
    text-align: center;
    min-height: 80vh; /* 80% van schermhoogte */
    padding: 20px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontaal centreren */
    justify-content: flex-start; /* flex-start = bovenaan centreren - center = verticaal centreren */
    text-align: center;
    min-height: 80vh; /* 80% van schermhoogte */
    padding: 20px;
}

    .contact-centrum form {
        width: 100%;
        max-width: 700px; /* formulierbreedte beperken */
        display: flex;
        flex-direction: column;
        gap: 12px;
        text-align: left; /* labels en invoer links uitlijnen */
    }
.contact-centrum input,
.contact-centrum textarea {
    padding: 14px; /* meer binnenruimte */
    font-size: 16px; /* grotere tekst */
    text-align: left; /* <— dit zorgt voor links uitlijnen */
    border-radius: 10px;
    border: 1px solid #d1d5db;
}
    .contact-centrum button {
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 10px;
    }

.footer-contact {
    position: fixed; /* blijft altijd zichtbaar */
    bottom: 10px; /* afstand tot onderkant scherm */
    left: 20px; /* afstand tot linkerkant scherm */
    background: rgba(255, 255, 255, 0.85); /* lichte transparante achtergrond */
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #111827;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* blijft boven andere elementen */
}

    .footer-contact a {
        color: #1e3a8a;
        text-decoration: none;
    }

        .footer-contact a:hover {
            text-decoration: underline;
        }

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}

#prevImage {
    left: 10px;
}

#nextImage {
    right: 10px;
}

.nav-btn:hover {
    background: rgba(0,0,0,0.6);
}

.product img {
    width: 100%; /* vult altijd de breedte van de container */
    height: auto; /* originele hoogte behouden */
    object-fit: contain; /* zorgt dat niets wordt afgesneden */
    border-radius: 8px;
}

.home-image-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    max-width: 100px; /* vaste max breedte */
    margin-top: 10px; /* eerder 40px → nu veel hoger op de pagina */
    margin-bottom: 10px;
    margin: 10px;
    max-width: 1200px;
}

    .home-image-row img {
        width: 23%;
        height: auto;
        border-radius: 10px;
        object-fit: contain;
    }