/* Algemene styling en roze kleurenschema */
:root {
    --primary-pink: #FF69B4; /* Fel roze (Hot Pink) - voor knoppen/accenten */
    --secondary-pink: #F08080; /* Licht koraalrood - voor hover effecten */
    --background-light: #FFF0F5; /* Zeer licht roze (Lavender Blush) - voor achtergrond */
    --text-color: #333;
    --header-footer-bg: #ffcede; /* Lavendel - lichte header/footer */
}

/* Standaard reset en lettertype */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-light);
    color: var(--text-color);
    line-height: 1.6;
}

/* Header en Navigatie */
header {
    background-color: var(--header-footer-bg);
    color: var(--text-color);
    /* AANGEPAST: Minder padding bovenaan en onderaan om margeproblemen op te lossen */
    padding: 10px 0; 
    text-align: center;
    border-bottom: 3px solid var(--primary-pink);
    /* BUGFIX: Hersteld om margin-collapse issues op te lossen */
    overflow: hidden; 
}

/* Zorgt ervoor dat de link om de hoofdtitel er niet uitziet als een gewone link */
header a {
    text-decoration: none; 
    color: inherit; 
    /* NIEUW: Zorgt ervoor dat de <a> het volledige blokruimte inneemt voor betere styling */
    display: block; 
}

header h1 {
    /* Marge van de h1 wordt op 0 gezet en de padding zorgt voor de verticale ruimte */
    margin: 0; 
    padding: 10px 0; /* Geeft de h1 zelf de verticale ruimte terug */
    color: var(--primary-pink); /* Roze titel */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

/* De knoppen in de navigatiebalk (volledig roze met witte tekst) */
nav ul li a {
    text-decoration: none;
    color: white; 
    font-weight: bold;
    padding: 7px 12px;
    background-color: var(--primary-pink); 
    border: 2px solid var(--primary-pink); 
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

nav ul li a:hover {
    background-color: var(--secondary-pink); 
    color: white; 
    border-color: var(--secondary-pink);
}

/* Hoofdinhoud en Producten */
main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

main h2 {
    text-align: center;
    /* FIX: Zorgt ervoor dat de hoofdtitel de roze kleur krijgt */
    color: var(--primary-pink) !important;
    margin-bottom: 30px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.product-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-pink);
}

/* Sectie voor de afbeeldingen */
.product-image {
    height: 150px;
    background-color: #FFFFFF; 
    border-radius: 8px; 
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}

/* Styling voor de afbeelding in het vak */
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}


.product-card h3 {
    color: var(--primary-pink);
    margin: 10px 0;
}

.prijs {
    font-weight: bold;
    color: var(--secondary-pink);
    font-size: 1.2em;
    margin: 5px 0 15px 0;
}

/* Knoppen (AANGEPAST: zowel <button> als <a class="button"> stylen) */
button, .button {
    background-color: var(--primary-pink);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s;
    /* NIEUW: Voor de <a>-tag om als blok te gedragen en de text-decoration te verwijderen */
    text-decoration: none; 
    display: inline-block;
}

button:hover, .button:hover {
    background-color: var(--secondary-pink);
}

/* --- Patroon Card Specifieke Styling (blijft ongewijzigd, gebruikt al <a>) --- */
.patroon-download-link, .patroon-koop-link {
    display: inline-block;
    background-color: var(--primary-pink);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.patroon-koop-link {
    background-color: var(--secondary-pink); /* Andere kleur voor 'koop' */
}

.patroon-download-link:hover {
    background-color: #e05c9b;
}
.patroon-koop-link:hover {
    background-color: #d17575; 
}

.patroon-beschrijving {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 15px;
}
/* --- Einde Patroon Card Styling --- */


/* NIEUWE SECTIE STYLING: Patronen en Contact */
.info-sectie {
    padding: 50px 20px;
    max-width: 900px;
    margin: 30px auto;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.info-sectie h2 {
    color: var(--secondary-pink);
    border-bottom: 2px solid var(--background-light);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.info-sectie p {
    font-size: 1.1em;
    margin-bottom: 20px;
}

.info-sectie address a {
    color: var(--primary-pink);
    text-decoration: none;
    font-weight: bold;
}
/* EINDE NIEUWE SECTIE STYLING */

/* --- STYLING VOOR PATRONEN OVERZICHT PAGINA (indexpatronen.html) --- */

.intro-tekst {
    text-align: center;
    max-width: 800px;
    margin: 10px auto 30px auto;
    font-size: 1.1em;
}

.patronen-overzicht-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.patroon-keuze-link {
    /* Beperkt de grootte en zorgt voor een strakke container */
    display: block; 
    text-decoration: none;
    color: var(--text-color);
    max-width: 400px; 
    min-width: 250px;
    width: 45%; /* Zorgt dat ze naast elkaar passen op grotere schermen */
    
    border-radius: 10px;
    overflow: hidden; /* Zorgt ervoor dat de afbeelding binnen de afgeronde hoeken blijft */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.patroon-image-container {
    line-height: 0; /* Belangrijk: Verwijdert extra witruimte onder de afbeelding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Schaduw op de afbeelding zelf */
    border-radius: 10px 10px 0 0; /* Rond de bovenkant af */
    overflow: hidden;
}

.patroon-image-container img {
    /* Zorgt ervoor dat de afbeelding de volledige breedte van de container inneemt */
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
}

.patroon-keuze-link:hover {
    /* Verwijder de transform van de link, alleen de schaduw verandert */
    transform: none;
}

.patroon-keuze-link:hover .patroon-image-container {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Sterkere schaduw op hover */
}

/* Styling voor de tekst/knop onder de afbeelding (de link) */
.keuze-label {
    display: block;
    background-color: var(--primary-pink);
    color: white;
    padding: 15px 10px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 0 0 10px 10px; /* Alleen onderkant afgerond */
    transition: background-color 0.3s;
}
.patroon-keuze-link:hover .keuze-label {
    background-color: var(--secondary-pink);
}


/* Footer */
footer {
    background-color: var(--header-footer-bg);
    color: var(--text-color);
    text-align: center;
    padding: 15px 0;
    margin-top: 30px;
    border-top: 3px solid var(--primary-pink);
}

/* Media Query voor kleinere schermen */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr; /* 1 product per rij op kleine schermen */
    }
    /* NIEUW: Kolommen onder elkaar op kleine schermen */
    .patronen-overzicht-links {
        flex-direction: column;
        align-items: center;
    }
    .keuze-kaart {
        max-width: 90%;
    }
}
/* --- WINKELWAGEN STYLING --- */
.winkelwagen-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    text-align: left;
}

.item-details {
    margin-left: 15px;
}

.item-details h4 {
    margin: 0;
    color: var(--primary-pink);
    font-size: 1em;
}

.item-details p {
    margin: 5px 0 0 0;
    font-weight: bold;
    color: #666;
}