body {
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: #f5f3f0;
            color: #222;
        }

        .page-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 16px;
        }

        /* Bovenbalk selectie + knoppen */
        .selection-bar {
            background: #504742;
            color: #f5f3f0;
            padding: 10px 14px;
            border-radius: 10px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 14px;
        }

        .selection-text {
            font-size: 14px;
        }

        .selection-text span {
            opacity: .9;
        }

        .selection-text strong {
            font-weight: 600;
        }

        .selection-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-small {
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid #d2b48c;
            background: #3a332f;
            color: #f5f3f0;
            font-size: 13px;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-small:hover {
            background: #4a413c;
        }

        .cart-container {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .cart-icon {
            width: 26px;
            height: auto;
        }

        .cart-count {
            position: absolute;
            top: -6px;
            right: -8px;
            background: #b8860b;
            color: #fff;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 999px;
            font-weight: 600;
        }

        /* Landen-balk (links met aantal) */
        .country-bar {
            margin: 14px 0 18px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 13px;
        }

        .country-link {
            padding: 4px 10px;
            border-radius: 999px;
            background: #ffffff;
            border: 1px solid #e0d4c5;
            text-decoration: none;
            color: #4a3b32;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .country-info {
            padding: 4px 10px;
            border-radius: 999px;
            background: #4a3b32;
            border: 1px solid #e0d4c5;
            text-decoration: none;
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }        

        .country-link span.count {
            background: #f0e4d5;
            border-radius: 999px;
            padding: 2px 6px;
            font-size: 11px;
        }

        /* GRID STRUCTUUR VOOR WIJNEN */
        .wine-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* desktop */
            gap: 22px;
            margin-bottom: 40px;
        }

        @media (max-width: 1100px) {
            .wine-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 650px) {
            .wine-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Wijnkaart */
        .wine-card {
            background: #e8dbcc;
            border-radius: 16px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.08);
            padding: 14px;
            cursor: pointer;
            transition: transform .15s ease, box-shadow .15s ease;
            display: flex;
            flex-direction: column;
            position: relative;
        }

/* Maak de hele kaart klikbaar */
.wine-card * {
    pointer-events: none;
}

/* Maar knoppen en links moeten wél klikbaar blijven */
.wine-card button,
.wine-card a,
.wine-card input,
.wine-card form {
    pointer-events: auto;
}
        .wine-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        }

.wine-image-wrapper {
    width: 100%;
    height: 210px;
    border-radius: 12px;
    overflow: hidden; /* zorgt dat de afbeelding binnen de ronde vorm blijft */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8dbcc; /* jouw nieuwe achtergrondkleur */
}

/* Vlag linksboven */
.wine-image-wrapper .flag {
    position: absolute;
    top: 48px;
    left: 10px;
    width: 26px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.6);
    object-fit: cover;
}


.wine-image-wrapper img.bottle {
    width: 100%;
    height: 100%;
    object-fit: contain; /* hele fles zichtbaar */
    border-radius: inherit; /* neemt de ronde hoeken van de wrapper over */
    display: block;
}


        .badge {
            position: absolute;
            top: 10px;
            left: 5px;
            padding: 4px 8px;
            font-size: 11px;
            border-radius: 999px;
            color: #fff;
        }

        .badge-kelder { background: #444; }
        .badge-actie { background: #b8860b; }

        .wine-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 4px;
        }

        .wine-title {
            font-size: 14px;
            font-weight: 600;
            color: #2b2623;
				    text-align: center;
				    width: 100%;
				    display: block; /* flex uitschakelen */
    				overflow: hidden;
    				min-height: 52px;           /* hoogte voor 2 regels (afhankelijk van font-size) */
    				text-align: center; 
}
						.wine-title .year {
    				white-space: nowrap;
}


.wine-name {
    display: flex;
    align-items: flex-end; /* glas onderaan uitlijnen */
    gap: 6px;
    line-height: 1.2;
}

.wine-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 12px;
align-items: center; /* Vertical alignment */
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.6);
}

/* Kleuren per soort */
.soort-1 { background-color: #DBBE59; } /* Wit */
.soort-2 { background-color: #FFB6C1; } /* Rosé */
.soort-3 { background-color: #B5485D; } /* Rood */
.soort-4 { background-color: #a77201; } /* Dessert */
.soort-5 { background-color: #9B7F21; } /* Mousserend */
.soort-6 { background-color: #000000; } /* PSV */
.soort-10 { background-color: #000000; } /* Proefpakket */

	      .wine-title .year {
            font-weight: 400;
            opacity: .8;
        }

        .fav-heart {
            font-size: 18px;
            color: #aaaaaa;
            text-decoration: none;
        }

        .fav-heart.active {
            color: #8B0000;
        }

        .wine-meta {
            font-size: 12px;
            color: #6b5a4c;
            margin-bottom: 4px;
        }

        .wine-meta .druiven {
            display: block;
            margin-top: 2px;
        }

						.wine-rating {
						    display: flex;
						    justify-content: center;   /* horizontaal centreren */
						    align-items: center;       /* verticaal centreren */
						    gap: 4px;
						}

        .wine-rating .stars {
            color: #b8860b;
            font-size: 15px;
        }

        .wine-rating a {
            text-decoration: none;
            color: #6b5a4c;
        }

        .wine-price {
            margin-top: 4px;
            font-size: 14px;
        }

        .wine-price .old {
            text-decoration: line-through;
            color: #999;
            margin-right: 4px;
            color: #504742;
        }

        .wine-price .new {
            font-size: 17px;
            font-weight: 700;
           /*  color: #2b2623; */
           color: #504742;
        }

        .wine-price .per-six {
            display: block;
            font-size: 12px;
           /* color: #6b5a4c;*/
            color: #504742;           
            margin-top: 2px;
        }

        .wine-buttons {
            margin-top: 10px;
            display: flex;
            gap: 8px;
        }

        .wine-buttons form {
            flex: 1;
        }

        .wine-buttons button {
            font-family: Montserrat, sans-serif;
            width: 100%;
            padding: 7px 10px;
            border-radius: 999px;
            border: 1px solid #d8c7b3;
            background: #f7f2ec;
            cursor: pointer;
            font-size: 13px;
            color: #3a332f;
            font-weight: 400;
        }

        .wine-buttons button:hover {
            background: #efe1d0;
        }

        .wine-extra {
            margin-top: 6px;
            font-size: 12px;
            color: #5a4b3f;
        }

			 .wine-price {
    				min-height: 48px;        /* vaste hoogte voor 2 regels */
    				display: flex;
    				flex-direction: column;
    				justify-content: flex-start;
						}

			.wine-price .per-six {
    				font-size: 13px;
    				color: #504742;
    				line-height: 18px;
						}

        .video-form {
            margin-top: 6px;
        }

        .video-form input[type="submit"] {
            padding: 5px 10px;
            border-radius: 999px;
            border: 1px solid #d8c7b3;
            background: #ffffff;
            cursor: pointer;
            font-size: 12px;
        }

        .video-form input[type="submit"]:hover {
            background: #f3e7d8;
        }

        /* Klein tekstje bij geen resultaten */
        .no-results {
            text-align: center;
            margin: 40px 0;
            font-size: 20px;
    				color: #504742; 
            font-weight: 400;    				
        }
        
        .druiven {
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* of 2 als je 2 regels wilt */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;            /* vaste hoogte voor 1 regel */
    line-height: 20px;           /* zelfde als min-height */
}