body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0px;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; /* Set the position to fixed */
    width: 100%; /* Ensure it spans the full width of the viewport */
    z-index: 1000; /* Set a high z-index to ensure it's above other content */
    top: 0; /* Position it at the top of the viewport */
}

.logo img {
    //width: 40px;
    height: 40px;
}

.title h1 {
    margin: 0;
    font-size: 24px; /* Larger font size for title */
}

.shopping-bag img {
    width: 30px;
    //height: 30px;
    margin-right: 25px;
}

/* Media Query for hiding the logo on smaller screens and reducing title size */
@media only screen and (max-width: 768px) {
    .logo {
        display: none;
    }

    .title h1 {
        font-size: 20px; /* Smaller font size for title on smaller screens */
    }

    main {
        padding: 20px 10px; /* Reduce padding on smaller screens */
    }

    .items {
        grid-template-columns: repeat(2, 1fr); /* Display 2 items per row on smaller screens */
        gap: 10px; /* Reduce gap between items on smaller screens */
    }

    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    /* Additional media query for screens smaller than 480px */
    @media only screen and (max-width: 480px) {
        .items {
            grid-template-columns: 1fr; /* Display 1 item per row on even smaller screens */
        }
    }
}

main {
    padding: 20px;
}

.items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); /* Responsive grid layout */
    gap: 20px;
}

.item {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s ease;
    min-width: 350px;
    text-align:center;
}

    .item:hover {
        transform: translateY(-5px);
    }

h3 {
    color: #333;
    margin-top: 0;
}

p {
    color: #666;
}

.add-to-cart {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .add-to-cart:hover {
        background-color: #0056b3;
    }


.detail {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center; /* Toegevoegd voor de tekst in het midden van de detailsectie */
}

.detail2 img {
    margin-top: 0; /* Reset margin for images */
    vertical-align: top; /* Align images to the top */
    max-width: 31px; /* Adjust the maximum width as needed */
    max-height: 31px; /* Adjust the maximum height as needed */
}

.detail h2 {
    color: #333;
}

.detail p {
    color: #666;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#quantity {
    width: 50px; /* Maak de breedte 50% smaller */
    height: 30px; /* Maak de hoogte 20% hoger */
    font-size: 1.1em; /* Vergroot het lettertype iets */
    text-align: center; /* Centreer tekst horizontaal */
    line-height: 1.8em; /* Centreer tekst verticaal */
}

.quantity {
    width: 50px; /* Maak de breedte 50% smaller */
    height: 30px; /* Maak de hoogte 20% hoger */
    font-size: 1.1em; /* Vergroot het lettertype iets */
    text-align: center; /* Centreer tekst horizontaal */
    line-height: 1.8em; /* Centreer tekst verticaal */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

th {
    background-color: #333;
    color: #fff;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.input-field {
    width: calc(50% - 16px); /* Hiermee wordt rekening gehouden met de padding van 8px aan beide zijden */
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
input[type="text"], input[type="tel"], input[type="fax"], select {
    //width: calc(100% - 16px); /* Subtracting padding and border */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
#afrek {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
}
label {
    display: block;
    margin-bottom: 5px;
    width: 150px; /* Vaste breedte voor de labels */
}

.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        width: 100%;
    }

#contactForm {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
}

@media only screen and (max-width: 600px) {
    input[type="text"], input[type="tel"], input[type="fax"] {
        /*    width: 100%;*/
    }

    .group label, .group input {
        width: 100%;
        float: none;
    }
}

.group::after {
    content: "";
    display: table;
    clear: both;
}

.group {
    margin-bottom: 20px;
}

    .group label, .group input {
        float: left;
        width: calc(50% - 5px); /* Verdeel de breedte van de groep in twee kolommen met 5px tussenruimte */
    }

select {
    appearance: none; /* Remove default appearance */
    -webkit-appearance: none; /* For older versions of Webkit */
    -moz-appearance: none; /* For older versions of Firefox */
    background-color: white; /* Background color same as input */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000' width='24px' height='24px'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 8px center; /* Position of the arrow */
    padding-right: 30px; /* Space for the arrow */
}



.bodyXX {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

.formXX {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
}

.labelXX {
    display: flex; /* Use flexbox */
    align-items: center; /* Align items vertically */
    margin-bottom: 5px;
    width:100%
}

labelXX > span {
    flex-grow: 1; /* Make the label take as much space as possible */
}

.textXX, .selectXX {
    /*width: calc(100% - 16px);*/ /* Subtracting padding and border */
    width:100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.selectXX {
    appearance: none; /* Remove default appearance */
    -webkit-appearance: none; /* For older versions of Webkit */
    -moz-appearance: none; /* For older versions of Firefox */
    background-color: white; /* Background color same as input */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000' width='24px' height='24px'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 8px center; /* Position of the arrow */
    padding-right: 30px; /* Space for the arrow */
}



#leveradres, #levergemeente {
    display: none; /* Hide additional fields by default */
}

@media screen and (max-width: 600px) {
    .formXX {
        grid-template-columns: 1fr;
    }
    .spacemaker {
        display: none;
    }
}

@media screen and (min-width: 601px) {
    .selectXX {
        grid-column: span 2; /* Span select over two columns */
    }
    .spacemaker {
        display:block;
    }
}