* { box-sizing: border-box; }
body {
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    background: #f7f7f8;
    color: #222;
}
header.site-header {
    background: #1f2937;
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
header.site-header a { color: #fff; text-decoration: none; }
.logo { font-size: 1.3em; font-weight: bold; }
nav.main-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
nav.main-nav a { opacity: 0.9; }
nav.main-nav a:hover { opacity: 1; text-decoration: underline; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.flash {
    background: #d1fae5; border: 1px solid #10b981; color: #065f46;
    padding: 10px 14px; border-radius: 6px; margin-bottom: 16px;
}
.flash.error { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.card {
    background: #fff; border-radius: 8px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; flex-direction: column;
}
.card img { width: 100%; height: 160px; object-fit: cover; background: #e5e7eb; }
.card .card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.card h3 { margin: 0 0 6px; font-size: 1.05em; }
.card .price { font-weight: bold; margin-top: auto; }
.btn {
    display: inline-block; background: #2563eb; color: #fff; border: none;
    padding: 8px 14px; border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 0.95em;
}
.btn:hover { background: #1d4ed8; }
.btn.danger { background: #dc2626; }
.btn.danger:hover { background: #b91c1c; }
.btn.secondary { background: #6b7280; }
form.stacked label { display: block; margin: 12px 0 4px; font-weight: 600; }
form.stacked input, form.stacked select, form.stacked textarea {
    width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1em;
}
table { width: 100%; border-collapse: collapse; background: #fff; }
table th, table td { text-align: left; padding: 10px; border-bottom: 1px solid #e5e7eb; }
table th { background: #f3f4f6; }
.admin-nav { display: flex; gap: 14px; margin-bottom: 20px; }
.thumb-small { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; }
.category-filter { margin-bottom: 20px; }
.category-filter a {
    margin-right: 10px; padding: 6px 12px; background: #fff; border-radius: 20px;
    text-decoration: none; color: #333; border: 1px solid #ddd;
}
.category-filter a.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.85em; font-weight: 600;
}
.badge.betaald { background: #d1fae5; color: #065f46; }
.badge.openstaand { background: #fef3c7; color: #92400e; }
.badge.mislukt { background: #fee2e2; color: #991b1b; }
.two-col { display: flex; gap: 32px; flex-wrap: wrap; }
.two-col > div { flex: 1; min-width: 280px; }