/* =========================================
   DESIGN TOKENS
   ========================================= */
/* =========================================
   RAS-PAGINA'S
   ========================================= */

.ras-hero {
    padding: calc(var(--nav-height) + 64px) 48px 72px;
    background: var(--brown-dark);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}

.ras-hero::before {
    content: '';
    position: absolute;
    top: -150px; right: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(160,82,45,0.25) 0%, transparent 70%);
    pointer-events: none;
}

.ras-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ras-breadcrumb {
    font-size: 13px;
    color: rgba(250,246,240,0.45);
    margin-bottom: 24px;
}

.ras-breadcrumb a {
    color: rgba(250,246,240,0.45);
    transition: color 0.2s;
}

.ras-breadcrumb a:hover { color: var(--tan); }
.ras-breadcrumb span { margin: 0 8px; }

.ras-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.ras-hero h1 em {
    font-style: italic;
    color: var(--tan);
}

.ras-hero-tagline {
    font-size: 18px;
    color: rgba(250,246,240,0.65);
    font-weight: 300;
    max-width: 560px;
    line-height: 1.6;
    margin-bottom: 48px;
}

.ras-stats-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ras-stat-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    font-size: 14px;
}

.ras-stat-pill-label {
    color: rgba(250,246,240,0.5);
    font-size: 12px;
}

.ras-stat-pill-val {
    font-weight: 600;
    color: var(--cream);
}

/* Page content wrapper */
.ras-body {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 48px;
}

.ras-intro {
    padding: 64px 0 0;
}

.ras-foto {
    margin: 48px 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    max-height: 500px;
}

.ras-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ras-intro p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--brown-mid);
    margin-bottom: 20px;
}

.ras-intro p:first-of-type {
    font-size: 19px;
    color: var(--brown-dark);
    font-weight: 400;
}

/* Section styling */
.ras-section {
    padding: 56px 0;
    border-top: 1px solid rgba(44,24,16,0.08);
}

.ras-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.ras-section p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--brown-mid);
    margin-bottom: 16px;
}

.ras-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.ras-section ul li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--brown-mid);
    padding-left: 20px;
    position: relative;
}

.ras-section ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--tan);
    font-weight: 600;
}

/* Verwijzing van een raspagina naar het uitgewerkte kennisbankartikel.

   De raspagina geeft per onderwerp het overzicht, het artikel de uitwerking.
   Zonder deze link stonden dat twee losse eilanden over hetzelfde onderwerp,
   die om dezelfde zoekwoorden concurreerden. */
.ras-verdieping {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--tan-light);
    border-left: 3px solid var(--brown-warm);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin: 4px 0 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.ras-verdieping:hover,
.ras-verdieping:focus-visible {
    background: #E3C4A3;
    transform: translateX(2px);
}

.ras-verdieping-icoon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.ras-verdieping-tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ras-verdieping-titel {
    font-size: 15px;
    font-weight: 600;
    color: var(--brown-dark);
    line-height: 1.4;
}

.ras-verdieping-reden {
    font-size: 13px;
    color: var(--brown-mid);
    line-height: 1.5;
}

/* De pijl duwt zichzelf naar rechts, zodat het blok geen vaste breedte nodig
   heeft en op een smal scherm gewoon meekrimpt. */
.ras-verdieping-pijl {
    margin-left: auto;
    font-size: 18px;
    color: var(--brown-warm);
    flex-shrink: 0;
}

/* Kenmerken grid */
.kenmerken-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.kenmerk-card {
    background: var(--cream);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    border: 1px solid rgba(44,24,16,0.07);
}

.kenmerk-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.kenmerk-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--brown-dark);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

.kenmerk-val {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.kenmerk-desc {
    font-size: 13px;
    color: var(--brown-mid);
    line-height: 1.5;
}

/* Energie meter */
.energie-meter {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.energie-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--tan-light);
}

.energie-dot.active { background: var(--brown-warm); }

/* Geschikt checklist */
.geschikt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    margin-top: 8px;
}

.geschikt-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--brown-mid);
}

.geschikt-item .check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}

.geschikt-item.ja .check {
    background: #E8F5EE;
    color: var(--green-sage);
}

.geschikt-item.nee .check {
    background: #F5E8E8;
    color: #C0544A;
}

/* FAQ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(44,24,16,0.08);
}

.faq-item {
    border-bottom: 1px solid rgba(44,24,16,0.08);
    background: var(--white);
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--brown-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.2s;
}

.faq-question:hover { background: var(--cream); }

.faq-question .faq-icon {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--tan-light);
    color: var(--brown-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    transition: transform 0.25s, background 0.2s;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    background: var(--brown-warm);
    color: var(--cream);
}

.faq-answer {
    display: none;
    padding: 0 24px 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--brown-mid);
}

.faq-item.open .faq-answer { display: block; }

/* Gerelateerde rassen */
.gerelateerd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.gerelateerd-card {
    background: var(--white);
    border: 1px solid rgba(44,24,16,0.08);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color 0.2s, transform 0.2s;
    cursor: pointer;
}

.gerelateerd-card:hover {
    border-color: var(--tan);
    transform: translateY(-2px);
}

.gerelateerd-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.gerelateerd-name {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 2px;
}

.gerelateerd-desc {
    font-size: 12px;
    color: var(--brown-mid);
}

/* Ras CTA */
.ras-cta {
    margin: 64px 0;
    background: linear-gradient(135deg, var(--brown-dark), var(--brown-mid));
    border-radius: 24px;
    padding: 48px;
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.ras-cta h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ras-cta p {
    font-size: 15px;
    opacity: 0.65;
    line-height: 1.6;
    max-width: 400px;
}

/* Rassen overzicht */
.rassen-overzicht {
    padding: var(--section-pad);
}

.rassen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.ras-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 20px var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.ras-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px var(--shadow);
}

.ras-card-header {
    padding: 36px 32px 28px;
    background: linear-gradient(135deg, var(--tan-light), rgba(212,149,106,0.3));
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.ras-card-emoji { font-size: 48px; }

.ras-card-meta {}

.ras-card-name {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.ras-card-tag {
    display: inline-block;
    background: var(--white);
    color: var(--brown-warm);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(160,82,45,0.2);
}

.ras-card-body {
    padding: 24px 32px 28px;
    flex: 1;
}

.ras-card-desc {
    font-size: 15px;
    color: var(--brown-mid);
    line-height: 1.7;
    margin-bottom: 20px;
}

.ras-card-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.ras-pill {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    color: var(--brown-mid);
    border: 1px solid var(--tan-light);
}

.ras-card-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--brown-warm);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}

.ras-card:hover .ras-card-link { gap: 10px; }

/* =========================================
   CONTENT PAGINA'S (gezondheid, voeding, puppy)
   ========================================= */

.alert-box {
    background: #FFF3CD;
    border: 1px solid #F0C040;
    border-left: 4px solid #D4956A;
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin: 24px 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--brown-dark);
}

.alert-box strong { color: var(--brown-warm); }

.alert-box-red {
    background: #FDF0EF;
    border-color: #E8A09A;
    border-left-color: #C0544A;
}

.symptom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;
}

.symptom-card {
    background: var(--white);
    border: 1px solid rgba(44,24,16,0.08);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.symptom-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}

.symptom-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--brown-dark);
    margin-bottom: 2px;
}

.symptom-desc {
    font-size: 13px;
    color: var(--brown-mid);
    line-height: 1.4;
}

.dont-eat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.dont-eat-item {
    background: #FDF0EF;
    border: 1px solid rgba(192,84,74,0.2);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-align: center;
}

.dont-eat-emoji { font-size: 28px; margin-bottom: 6px; }

.dont-eat-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.dont-eat-why {
    font-size: 12px;
    color: #C0544A;
    line-height: 1.3;
}

.voeding-stages {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(44,24,16,0.08);
    margin: 16px 0;
}

.stage-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-bottom: 1px solid rgba(44,24,16,0.08);
    background: var(--white);
}

.stage-row:last-child { border-bottom: none; }
.stage-row:nth-child(even) { background: var(--cream); }

.stage-label {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 13px;
    color: var(--brown-warm);
    border-right: 1px solid rgba(44,24,16,0.08);
    display: flex;
    align-items: center;
}

.stage-content {
    padding: 16px 20px;
    font-size: 14px;
    color: var(--brown-mid);
    line-height: 1.5;
    display: flex;
    align-items: center;
}

.puppy-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    margin: 16px 0;
}

.puppy-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: var(--tan-light);
}

.timeline-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 16px 0;
    position: relative;
}

.timeline-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brown-warm);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.timeline-content { padding-top: 8px; }

.timeline-week {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--brown-warm);
    margin-bottom: 4px;
}

.timeline-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.timeline-desc {
    font-size: 14px;
    color: var(--brown-mid);
    line-height: 1.5;
}

/* Over ons */
.over-ons-hero {
    padding: calc(var(--nav-height) + 64px) 48px 72px;
    background: var(--cream);
    border-bottom: 1px solid rgba(44,24,16,0.08);
}

.over-ons-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.over-ons-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--brown-dark);
    margin-bottom: 20px;
}

.over-ons-hero h1 em {
    font-style: italic;
    color: var(--brown-warm);
}

.over-ons-lead {
    font-size: 19px;
    color: var(--brown-mid);
    line-height: 1.7;
    max-width: 580px;
    font-weight: 300;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 16px 0;
}

.team-card {
    background: var(--cream);
    border-radius: var(--radius-xl);
    padding: 32px;
    border: 1px solid rgba(44,24,16,0.07);
}

.team-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tan), var(--brown-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 16px;
}

.team-name {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.team-role {
    font-size: 13px;
    color: var(--brown-warm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.team-bio {
    font-size: 14px;
    color: var(--brown-mid);
    line-height: 1.7;
}

.waarden-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 16px 0;
}

.waarde-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid rgba(44,24,16,0.07);
    text-align: center;
}

.waarde-icon { font-size: 32px; margin-bottom: 12px; }

.waarde-title {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 8px;
}

.waarde-desc {
    font-size: 14px;
    color: var(--brown-mid);
    line-height: 1.6;
}

/* Contact */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
    margin: 16px 0;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}

.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tan-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.contact-info-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.contact-info-val {
    font-size: 14px;
    color: var(--brown-mid);
    line-height: 1.5;
}

.contact-form-wrap {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 36px;
    border: 1px solid rgba(44,24,16,0.08);
}

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

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--brown-dark);
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: var(--cream);
    border: 1px solid rgba(44,24,16,0.15);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 15px;
    color: var(--brown-dark);
    font-family: 'DM Sans', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--brown-warm);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* =========================================
   COMMUNITY
   ========================================= */

.community-hero {
    padding: calc(var(--nav-height) + 48px) 48px 56px;
    background: var(--cream);
    border-bottom: 1px solid rgba(44,24,16,0.08);
}

.community-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.community-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--brown-dark);
    margin-bottom: 12px;
}

.community-hero h1 em {
    font-style: italic;
    color: var(--brown-warm);
}

.community-hero-sub {
    font-size: 16px;
    color: var(--brown-mid);
    line-height: 1.6;
    max-width: 480px;
}

.community-stats {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}

.community-stat {
    text-align: center;
}

.community-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--brown-dark);
}

.community-stat-label {
    font-size: 12px;
    color: var(--brown-mid);
    margin-top: 2px;
}

/* Categorie filter */
.community-filter {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 28px 48px 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-pill {
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--tan-light);
    background: var(--white);
    color: var(--brown-mid);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
    display: inline-block;
}

.filter-pill:hover,
.filter-pill.actief {
    background: var(--brown-dark);
    border-color: var(--brown-dark);
    color: var(--cream);
}

/* Bericht kaarten grid */
.community-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 32px 48px 80px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

.berichten-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bericht-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 2px 12px var(--shadow);
    transition: box-shadow 0.2s, transform 0.2s;
    display: block;
    text-decoration: none;
    color: inherit;
}

.bericht-card:hover {
    box-shadow: 0 8px 32px var(--shadow);
    transform: translateY(-2px);
}

.bericht-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.bericht-categorie-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--brown-warm);
    background: rgba(160,82,45,0.08);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.bericht-datum {
    font-size: 12px;
    color: var(--brown-mid);
    opacity: 0.6;
    margin-left: auto;
}

.bericht-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--brown-dark);
    line-height: 1.35;
    margin-bottom: 8px;
}

.bericht-card-excerpt {
    font-size: 14px;
    color: var(--brown-mid);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bericht-card-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--brown-mid);
}

.bericht-card-auteur {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bericht-card-wrap { position: relative; }

.bericht-acties {
    display: flex;
    gap: 8px;
    padding: 6px 16px 12px;
}

.bericht-actie-btn {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(44,24,16,0.15);
    background: var(--white);
    color: var(--brown-mid);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}
.bericht-actie-btn:hover { background: var(--tan-light); color: var(--brown-dark); }
.bericht-actie-btn.verwijder:hover { background: #fde8e8; color: #c0392b; border-color: #c0392b; }

.auteur-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tan), var(--brown-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--cream);
    font-weight: 700;
    flex-shrink: 0;
}

.bericht-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Nieuw bericht knop */
.nieuw-bericht-bar {
    margin-bottom: 24px;
}

.nieuw-bericht-toggle {
    width: 100%;
    background: var(--brown-dark);
    color: var(--cream);
    border: none;
    border-radius: var(--radius-lg);
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

.nieuw-bericht-toggle:hover { background: var(--brown-warm); }

.nieuw-bericht-toggle-icon {
    font-size: 20px;
    transition: transform 0.25s;
}

.nieuw-bericht-toggle.open .nieuw-bericht-toggle-icon {
    transform: rotate(45deg);
}

.nieuw-bericht-form-wrap {
    display: none;
    background: var(--white);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 24px;
    border: 1px solid rgba(44,24,16,0.08);
    border-top: none;
    margin-top: -4px;
}

.nieuw-bericht-form-wrap.open { display: block; }

/* Sidebar community */
.community-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 2px 12px var(--shadow);
}

.sidebar-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 16px;
}

.sidebar-cat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--brown-mid);
    padding: 6px 0;
    border-bottom: 1px solid rgba(44,24,16,0.06);
    text-decoration: none;
    transition: color 0.15s;
}

.sidebar-cat-item:last-child { border-bottom: none; }
.sidebar-cat-item:hover { color: var(--brown-warm); }

.sidebar-cat-count {
    font-size: 12px;
    background: var(--cream);
    color: var(--brown-mid);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

/* Single bericht */
.single-bericht-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 48px 48px 80px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
}

.single-bericht-main {}

.bericht-header {
    margin-bottom: 32px;
}

.bericht-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--brown-dark);
    margin: 12px 0 16px;
}

.bericht-auteur-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--brown-mid);
}

.auteur-avatar-lg {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tan), var(--brown-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--cream);
    font-weight: 700;
    flex-shrink: 0;
}

.bericht-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--brown-dark);
    margin-bottom: 32px;
}

.bericht-content p { margin-bottom: 16px; }
.bericht-content p:last-child { margin-bottom: 0; }

/* Like knop */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--tan-light);
    background: var(--white);
    color: var(--brown-mid);
    font-size: 14px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.like-btn:hover { border-color: var(--brown-warm); color: var(--brown-warm); }

.like-btn.geliked {
    background: rgba(160,82,45,0.08);
    border-color: var(--brown-warm);
    color: var(--brown-warm);
}

.like-btn-icon { font-size: 16px; }

/* Reacties */
.reacties-sectie {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid rgba(44,24,16,0.08);
}

.reacties-titel {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 28px;
}

.reactie-item {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(44,24,16,0.06);
}

.reactie-item:last-of-type { border-bottom: none; }

.reactie-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tan-light), var(--tan));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--brown-warm);
    flex-shrink: 0;
}

.reactie-body {}

.reactie-meta {
    font-size: 13px;
    color: var(--brown-mid);
    margin-bottom: 6px;
}

.reactie-auteur { font-weight: 600; color: var(--brown-dark); }

.reactie-tekst {
    font-size: 15px;
    line-height: 1.6;
    color: var(--brown-dark);
}

/* Reactie form */
.reactie-form-wrap {
    margin-top: 32px;
    background: var(--cream);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.reactie-form-wrap h3 {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 16px;
}

.reactie-form-wrap textarea {
    width: 100%;
    background: var(--white);
    border: 1px solid rgba(44,24,16,0.15);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 15px;
    color: var(--brown-dark);
    font-family: 'DM Sans', sans-serif;
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color 0.2s;
}

.reactie-form-wrap textarea:focus { border-color: var(--brown-warm); }

.geen-berichten {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    text-align: center;
    border: 2px dashed var(--tan-light);
}

.geen-berichten-icon { font-size: 48px; margin-bottom: 16px; }
.geen-berichten h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--brown-dark); margin-bottom: 8px; }
.geen-berichten p { font-size: 14px; color: var(--brown-mid); }

/* Responsive community */
@media (max-width: 1024px) {
    .community-main { grid-template-columns: 1fr; }
    .community-sidebar { position: static; }
    .single-bericht-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .community-hero { padding: calc(var(--nav-height) + 32px) 24px 40px; }
    .community-hero-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
    .community-filter { padding: 20px 24px 0; }
    .community-main { padding: 24px 24px 60px; gap: 24px; }
    .single-bericht-wrap { padding: 32px 24px 60px; }
    .community-stats { gap: 16px; }
}

/* =========================================
   LOGIN / REGISTER PAGINA'S
   ========================================= */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-height) + 40px) 24px 60px;
    background: var(--cream);
}

.auth-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 48px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 8px 40px var(--shadow);
}

.auth-logo {
    display: block;
    text-align: center;
    margin-bottom: 32px;
    text-decoration: none;
}

.auth-logo img {
    height: 44px;
    width: auto;
}

.auth-title {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 8px;
    text-align: center;
}

.auth-sub {
    font-size: 14px;
    color: var(--brown-mid);
    text-align: center;
    margin-bottom: 32px;
    line-height: 1.5;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: rgba(44,24,16,0.3);
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(44,24,16,0.1);
}

.auth-switch {
    text-align: center;
    font-size: 14px;
    color: var(--brown-mid);
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(44,24,16,0.08);
}

.auth-switch a {
    color: var(--brown-warm);
    font-weight: 600;
}

.auth-switch a:hover { text-decoration: underline; }

.password-toggle-wrap {
    position: relative;
}

.password-toggle-wrap input { padding-right: 44px; }

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--brown-mid);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    line-height: 1;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--brown-mid);
    margin-bottom: 20px;
    cursor: pointer;
}

.auth-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brown-warm);
    cursor: pointer;
}

.auth-forgot {
    text-align: right;
    margin-top: -12px;
    margin-bottom: 20px;
}

.auth-forgot a {
    font-size: 13px;
    color: var(--brown-mid);
    transition: color 0.2s;
}

.auth-forgot a:hover { color: var(--brown-warm); }

@media (max-width: 480px) {
    .auth-card { padding: 32px 24px; }
}

/* Teckelprofiel kaarten */
.teckel-profielen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 8px;
}

.teckel-profiel-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: 0 4px 20px var(--shadow);
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.profiel-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tan), var(--brown-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    overflow: hidden;
}

.profiel-foto {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
}

.profiel-card-naam {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.profiel-card-ras {
    font-size: 13px;
    color: var(--brown-mid);
}

@media (max-width: 768px) {
    .teckel-profielen-grid { grid-template-columns: 1fr; }
}

/* Responsive content pages */
@media (max-width: 768px) {
    .symptom-grid { grid-template-columns: 1fr; }
    .dont-eat-grid { grid-template-columns: 1fr 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .waarden-grid { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; gap: 40px; }
    .stage-row { grid-template-columns: 120px 1fr; }
    .over-ons-hero { padding: calc(var(--nav-height) + 32px) 24px 48px; }
}

@media (max-width: 480px) {
    .dont-eat-grid { grid-template-columns: 1fr; }
}

/* Responsive ras-pagina's */
@media (max-width: 900px) {
    .kenmerken-grid { grid-template-columns: 1fr; }
    .geschikt-grid { grid-template-columns: 1fr; }
    .gerelateerd-grid { grid-template-columns: 1fr 1fr; }
    .rassen-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .ras-hero { padding: calc(var(--nav-height) + 40px) 24px 56px; }
    .ras-body { padding: 0 24px; }
    .ras-cta { flex-direction: column; text-align: center; padding: 36px 28px; }
    .ras-cta p { max-width: 100%; }
    .gerelateerd-grid { grid-template-columns: 1fr; }
    .ras-stats-bar { gap: 8px; }
}
:root {
    --cream: #FAF6F0;
    --brown-dark: #2C1810;
    --brown-mid: #6B3E26;
    --brown-warm: #A0522D;
    --tan: #D4956A;
    --tan-light: #EDD5BE;
    --green-sage: #7A8C6E;
    --white: #FFFFFF;
    --shadow: rgba(44, 24, 16, 0.12);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 50px;

    --nav-height: 72px;
    --section-pad: 100px 48px;
    --max-width: 1100px;
}

/* =========================================
   RESET & BASE
   ========================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--brown-dark);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: 'DM Sans', sans-serif; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* =========================================
   NAVIGATION
   ========================================= */
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: var(--nav-height);
    background: rgba(250, 246, 240, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(160, 82, 45, 0.1);
    transition: box-shadow 0.2s;
}

.site-nav.scrolled {
    box-shadow: 0 4px 20px var(--shadow);
}

.nav-logo {
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nav-logo-img {
    height: 54px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    gap: 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--brown-mid);
}

.nav-links a:hover { color: var(--brown-warm); }

/* Nav dropdown */
.nav-dropdown-wrap { position: relative; }

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dropdown-chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
}

.nav-dropdown-wrap:hover .dropdown-chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(44,24,16,0.14);
    border: 1px solid rgba(44,24,16,0.08);
    padding: 14px 6px 6px;
    min-width: 190px;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 200;
}

.nav-dropdown-wrap:hover .nav-dropdown-menu,
.nav-dropdown-wrap:focus-within .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu li a {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brown-dark);
    border-radius: 8px;
    transition: background 0.12s;
    white-space: nowrap;
}

.nav-dropdown-menu li a:hover {
    background: var(--tan-light);
    color: var(--brown-warm);
}

/* Drawer sub-items */
.drawer-sub a {
    padding-left: 28px !important;
    font-size: 13px !important;
    color: var(--brown-mid) !important;
    opacity: 0.85;
}

.nav-cta {
    background: var(--brown-dark);
    color: var(--cream);
    border: none;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
    flex-shrink: 0;
}

.nav-cta:hover { background: var(--brown-warm); }

.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
}

.nav-login-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--brown-mid);
    transition: color 0.2s;
}

.nav-login-link:hover { color: var(--brown-warm); }

.nav-auth-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* User dropdown */
.nav-user {
    position: relative;
    flex-shrink: 0;
}

.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cream);
    border: 1px solid var(--tan-light);
    border-radius: var(--radius-pill);
    padding: 6px 14px 6px 6px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--brown-dark);
    transition: border-color 0.2s;
}

.nav-user-btn:hover { border-color: var(--tan); }

.nav-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tan), var(--brown-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--cream);
    flex-shrink: 0;
}

.nav-user-naam {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-chevron {
    color: var(--brown-mid);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.nav-user.open .nav-user-chevron { transform: rotate(180deg); }

.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border: 1px solid rgba(44,24,16,0.1);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px var(--shadow);
    min-width: 200px;
    padding: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 300;
}

.nav-user.open .nav-user-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--brown-dark);
    text-decoration: none;
    transition: background 0.15s;
}

.nav-dropdown-item:hover { background: var(--cream); }

.nav-dropdown-item--danger { color: #C0544A; }
.nav-dropdown-item--danger:hover { background: #FDF0EF; }

.nav-dropdown-divider {
    height: 1px;
    background: rgba(44,24,16,0.08);
    margin: 6px 0;
}

.drawer-logout {
    font-size: 14px;
    color: var(--brown-mid);
    margin-top: 8px;
    display: block;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--brown-dark);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}

/* Mobile drawer */
.nav-drawer {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    bottom: 0;
    width: 280px;
    z-index: 190;
    background: var(--cream);
    padding: 32px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.nav-drawer.open { transform: translateX(0); }

.drawer-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.drawer-links a {
    font-size: 16px;
    font-weight: 500;
    color: var(--brown-mid);
}

.drawer-links a:hover { color: var(--brown-warm); }

.drawer-cta { align-self: flex-start; }

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(44, 24, 16, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn-primary {
    background: var(--brown-dark);
    color: var(--cream);
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 500;
    border: none;
    transition: background 0.2s, transform 0.2s;
    display: inline-block;
}

.btn-primary:hover {
    background: var(--brown-warm);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--brown-dark);
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 500;
    border: 2px solid var(--tan);
    transition: border-color 0.2s, transform 0.2s;
    display: inline-block;
}

.btn-secondary:hover {
    border-color: var(--brown-warm);
    transform: translateY(-2px);
}

/* =========================================
   SECTION SHARED
   ========================================= */
.section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 16px;
}

/* Iets donkerder dan --brown-warm. Dit label staat op tan-light, en daar
   haalde de gewone tint een contrast van 3.97 waar 4.5 nodig is. */
.section-label--warm { color: rgb(147, 75, 41); }

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.section-sub {
    font-size: 17px;
    color: rgba(250, 246, 240, 0.6);
    max-width: 500px;
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 60px;
}

.section-sub--dark { color: var(--brown-mid); }

/* =========================================
   SCROLL ANIMATIONS
   ========================================= */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   HERO
   ========================================= */
.hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: calc(var(--nav-height) + 40px) 48px 60px;
    gap: 60px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--tan-light) 0%, transparent 70%);
    opacity: 0.5;
    pointer-events: none;
}

.hero-text { position: relative; z-index: 1; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tan-light);
    color: var(--brown-mid);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 28px;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}

.hero h1 em {
    font-style: italic;
    color: var(--brown-warm);
}

.hero-sub {
    font-size: 17px;
    color: var(--brown-mid);
    line-height: 1.7;
    max-width: 440px;
    margin-bottom: 40px;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--tan-light);
}

.stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--brown-dark);
}

.stat-label {
    font-size: 13px;
    color: var(--brown-mid);
    margin-top: 2px;
}

/* Hero visual */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card-voorbeeld {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brown-mid);
    background: var(--tan-light);
    padding: 3px 8px;
    border-radius: 20px;
    opacity: 0.7;
}

.hero-card-main {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: 0 20px 60px var(--shadow);
    width: 340px;
    position: relative;
    position: relative;
    z-index: 2;
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.dog-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tan), var(--brown-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 16px;
}

.dog-name {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.dog-breed {
    font-size: 13px;
    color: var(--brown-mid);
    margin-bottom: 16px;
}

.dog-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.dog-stat {
    background: var(--cream);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    text-align: center;
}

.dog-stat-val {
    font-weight: 700;
    font-size: 16px;
    color: var(--brown-dark);
}

.dog-stat-key {
    font-size: 11px;
    color: var(--brown-mid);
    margin-top: 2px;
}

.health-bar-label {
    font-size: 12px;
    color: var(--brown-mid);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

.health-bar {
    height: 8px;
    background: var(--tan-light);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.health-fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--green-sage), #9DB88A);
}

.health-fill--tan {
    background: linear-gradient(90deg, var(--tan), var(--brown-warm));
}

/* Floating cards */
.hero-card-float {
    position: absolute;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow: 0 10px 30px var(--shadow);
    font-size: 13px;
    font-weight: 500;
    z-index: 3;
}

.float-icon { font-size: 20px; margin-bottom: 4px; }
.float-label { font-size: 12px; color: var(--brown-mid); }
.float-value { font-size: 13px; font-weight: 600; margin-top: 2px; }

.card-float-1 {
    top: -20px; left: -40px;
    animation: float2 3.5s ease-in-out infinite;
}

.card-float-2 {
    bottom: 10px; right: -30px;
    animation: float3 5s ease-in-out infinite;
}

@keyframes float2 {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(-2deg); }
}

@keyframes float3 {
    0%, 100% { transform: translateY(0) rotate(1deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

/* =========================================
   KENNISBANK SECTIE (homepage)
   ========================================= */
.section-kb {
    padding: var(--section-pad);
    background: var(--brown-dark);
    color: var(--cream);
}

.section-kb .section-title { color: var(--cream); }
.section-kb .section-sub   { color: rgba(250,246,240,0.7); }
.section-kb .section-label { color: var(--tan); }
.section-kb .btn-secondary {
    border-color: rgba(250,246,240,0.3);
    color: var(--cream);
}
.section-kb .btn-secondary:hover {
    background: rgba(250,246,240,0.1);
}

.kb-scroll-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

.kb-scroll-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 4px 20px;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.kb-scroll-track::-webkit-scrollbar { display: none; }

.kb-cat-card {
    flex-shrink: 0;
    width: 200px;
    height: 260px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: transform 0.25s;
}

.kb-cat-card:hover { transform: translateY(-5px); }
.kb-cat-card:hover .kb-cat-img { transform: scale(1.05); }

.kb-cat-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    background-color: var(--brown-warm);
}

.kb-cat-img--placeholder {
    background: linear-gradient(135deg, var(--brown-warm), var(--brown-mid));
}

.kb-cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20,10,5,0.85) 0%, rgba(20,10,5,0.2) 55%, transparent 100%);
}

.kb-cat-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 18px;
    z-index: 1;
}

.kb-cat-naam {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--cream);
    margin-bottom: 4px;
    line-height: 1.3;
}

.kb-cat-count {
    font-size: 12px;
    color: rgba(250,246,240,0.65);
}

.kb-scroll-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--cream);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, opacity 0.2s;
}
.kb-scroll-btn:hover { background: rgba(255,255,255,0.15); }

@media (max-width: 768px) {
    .kb-scroll-btn { display: none; }
    .kb-scroll-track { padding: 8px 20px 20px; margin: 0 -20px; }
}

/* =========================================
   AI SECTION
   ========================================= */
.section-ai {
    padding: var(--section-pad);
    background: var(--brown-dark);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}

.section-ai::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(160, 82, 45, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.ai-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.ai-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ai-feature {
    display: flex;
    gap: 0;
    align-items: flex-start;
    padding: 20px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s;
}

.ai-feature:hover { background: rgba(255, 255, 255, 0.09); }

.ai-feature-icon { display: none; }

.ollie-probeer-wrap {
    position: absolute;
    bottom: 48px;
    right: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    color: rgba(250,246,240,0.55);
    pointer-events: none;
    transform: perspective(400px) rotateX(6deg) rotateZ(-2deg);
}

.ollie-probeer-tekst {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 19px;
    letter-spacing: 0.01em;
    color: rgba(250,246,240,0.8);
}

.ollie-probeer-pijl {
    width: 110px;
    height: 74px;
    margin-right: 8px;
    color: rgba(250,246,240,0.8);
}

@media (max-width: 768px) {
    .ollie-probeer-wrap {
        position: static;
        transform: perspective(400px) rotateX(4deg) rotateZ(-2deg);
        align-items: flex-end;
        margin-top: 24px;
        padding-right: 8px;
    }
}

.ai-feature-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
}

.ai-feature-desc {
    font-size: 13px;
    color: rgba(250, 246, 240, 0.55);
    line-height: 1.5;
}

/* Chat UI */
.chat-ui {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.chat-header {
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brown-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.chat-name { font-weight: 600; font-size: 15px; }
.chat-status { font-size: 12px; color: var(--tan); }

.chat-messages {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 260px;
    max-height: 360px;
    overflow-y: auto;
}

.msg {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.msg-user {
    align-self: flex-end;
    background: var(--brown-warm);
    color: var(--cream);
    border-bottom-right-radius: 4px;
}

.msg-ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.09);
    color: var(--cream);
    border-bottom-left-radius: 4px;
}

.msg-typing {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.09);
    padding: 14px 18px;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.dot {
    width: 7px; height: 7px;
    background: var(--tan);
    border-radius: 50%;
    animation: bounce 1.2s ease-in-out infinite;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40% { transform: translateY(-6px); opacity: 1; }
}

.chat-input-row {
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    padding: 10px 16px;
    font-size: 14px;
    color: var(--cream);
    font-family: 'DM Sans', sans-serif;
    outline: none;
}

.chat-input::placeholder { color: rgba(250, 246, 240, 0.35); }
.chat-input:focus { border-color: rgba(255, 255, 255, 0.25); }

.chat-send {
    width: 40px; height: 40px;
    flex-shrink: 0;
    background: var(--brown-warm);
    border: none;
    border-radius: 50%;
    color: var(--cream);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.chat-send:hover { background: var(--tan); }

/* =========================================
   COMMUNITY SECTION
   ========================================= */
.community-leeg {
    text-align: center;
    padding: 48px 32px;
    background: rgba(44,24,16,0.04);
    border-radius: var(--radius-xl);
    border: 2px dashed rgba(44,24,16,0.12);
    max-width: 480px;
    margin: 0 auto;
    color: var(--brown-mid);
    font-size: 15px;
    line-height: 1.7;
}

.section-community {
    padding: var(--section-pad);
    background: var(--cream);
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 0;
}

.community-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.community-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px var(--shadow);
}

.card-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}

.card-img-1 { background: linear-gradient(135deg, #F5E6D3, #EDD5BE); }
.card-img-2 { background: linear-gradient(135deg, #E8F0E4, #D4E6CC); }
.card-img-3 { background: linear-gradient(135deg, #F0E8D5, #E8D4B8); }
.card-img-4 { background: linear-gradient(135deg, #EDE8F5, #D8CCED); }
.card-img-5 { background: linear-gradient(135deg, #F5EBE0, #EDD0B5); }
.card-img-6 { background: linear-gradient(135deg, #E8F5EE, #C8E8D8); }

.card-body { padding: 20px; }

.card-category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brown-warm);
    margin-bottom: 8px;
}

.card-title {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    color: var(--brown-dark);
}

.card-meta {
    font-size: 12px;
    color: var(--brown-mid);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =========================================
   QUIZ BANNER
   ========================================= */
.quiz-banner {
    margin: 80px 48px 80px;
    background: linear-gradient(135deg, var(--brown-warm), var(--brown-mid));
    border-radius: 28px;
    padding: 56px 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    color: var(--cream);
    position: relative;
    overflow: hidden;
}

.quiz-banner::before {
    content: '';
    position: absolute;
    right: 180px; top: 50%;
    transform: translateY(-50%);
    width: 120px; height: 120px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%90%95%3C/text%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0.12;
}

.quiz-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 12px;
}

.quiz-text p {
    font-size: 16px;
    opacity: 0.75;
    max-width: 400px;
    line-height: 1.6;
}

.quiz-btn {
    background: var(--cream);
    color: var(--brown-dark);
    padding: 16px 32px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
    border: none;
    white-space: nowrap;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.quiz-btn:hover { transform: scale(1.04); }

/* =========================================
   FOKKERS SECTION
   ========================================= */
/* =========================================
   ACCOUNT SECTIE
   ========================================= */
.section-account {
    padding: var(--section-pad);
    background: var(--cream);
}

.account-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.account-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 36px;
}

.account-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.account-feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brown-warm);
    flex-shrink: 0;
    margin-top: 7px;
}

.account-feature-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.account-feature-desc {
    font-size: 14px;
    color: var(--brown-mid);
    line-height: 1.6;
}

/* Account mockup afbeelding */
.account-mockup-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.account-mockup-img {
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .account-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .account-phone-wrap { order: -1; }
}

.section-fokkers {
    padding: var(--section-pad);
    background: var(--tan-light);
}

.fokkers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 0;
}

.fokkers-leeg {
    text-align: center;
    padding: 48px 32px;
    background: rgba(255,255,255,0.5);
    border-radius: var(--radius-xl);
    border: 2px dashed rgba(44,24,16,0.15);
    max-width: 520px;
    margin: 0 auto;
}
.fokkers-leeg-icon { font-size: 48px; margin-bottom: 16px; }
.fokkers-leeg h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--brown-dark);
    margin-bottom: 10px;
}
.fokkers-leeg p {
    font-size: 15px;
    color: var(--brown-mid);
    line-height: 1.7;
    margin-bottom: 0;
}

.fokker-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    box-shadow: 0 4px 16px var(--shadow);
    transition: transform 0.2s;
    cursor: pointer;
}

.fokker-card:hover { transform: translateY(-4px); }

.fokker-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tan), var(--brown-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 14px;
}

.fokker-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.fokker-location {
    font-size: 12px;
    color: var(--brown-mid);
    margin-bottom: 12px;
}

.fokker-badge {
    display: inline-block;
    background: var(--cream);
    color: var(--green-sage);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--green-sage);
}

.fokker-rating {
    margin-top: 10px;
    font-size: 13px;
    color: var(--brown-warm);
    font-weight: 600;
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
    background: var(--brown-dark);
    color: var(--cream);
    padding: 60px 48px 32px;
    margin-top: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}

.footer-logo-img {
    height: 40px;
    width: auto;
    display: block;
    margin-bottom: 12px;
}

.footer-desc {
    font-size: 14px;
    color: rgba(250, 246, 240, 0.5);
    line-height: 1.7;
    max-width: 260px;
}

.footer-col-title {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 16px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    font-size: 14px;
    color: rgba(250, 246, 240, 0.55);
    transition: color 0.2s;
}

.footer-links a:hover { color: var(--cream); }

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    /* 0.35 gaf een contrast van 3.06 op de donkere voettekst */
    color: rgba(250, 246, 240, 0.5);
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    .fokkers-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    :root { --section-pad: 72px 24px; }

    .site-nav { padding: 0 24px; }
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-drawer .nav-cta { display: block; }
    .nav-hamburger { display: flex; }

    .hero {
        grid-template-columns: 1fr;
        padding: calc(var(--nav-height) + 32px) 24px 48px;
        text-align: center;
        gap: 48px;
    }

    .hero-text { display: flex; flex-direction: column; align-items: center; }
    .hero-sub { text-align: center; }
    .hero-buttons { justify-content: center; }
    .hero-stats { justify-content: center; }

    .hero-visual { min-height: 360px; }
    .hero-card-main { width: 280px; }
    .card-float-1 { left: -10px; top: -10px; }
    .card-float-2 { right: -10px; bottom: 0; }

    .ai-layout { grid-template-columns: 1fr; gap: 40px; }

    .community-grid { grid-template-columns: 1fr; }

    .quiz-banner {
        flex-direction: column;
        margin: 48px 24px 48px;
        padding: 40px 32px;
        text-align: center;
    }

    .quiz-text h2 { font-size: 28px; }
    .quiz-banner::before { display: none; }

    .fokkers-grid { grid-template-columns: 1fr 1fr; }

    .site-footer { margin-top: 0; padding: 48px 24px 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 480px) {
    .fokkers-grid { grid-template-columns: 1fr; }
    .hero-stats { flex-direction: column; gap: 16px; }
}

/* =========================================
   KENNISBANK
   ========================================= */

.kb-hero {
    padding: calc(var(--nav-height) + 64px) 48px 72px;
    background: var(--brown-dark);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}

.kb-hero::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(122,140,110,0.18) 0%, transparent 70%);
    pointer-events: none;
}

.kb-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.kb-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.kb-hero h1 em {
    font-style: italic;
    color: var(--tan);
}

.kb-hero-sub {
    font-size: 18px;
    color: rgba(250,246,240,0.65);
    font-weight: 300;
    max-width: 520px;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Filters */
.kb-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 56px 48px 96px;
}

.kb-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.kb-filter-pill {
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(44,24,16,0.15);
    font-size: 14px;
    color: var(--brown-mid);
    text-decoration: none;
    transition: all 0.18s;
    white-space: nowrap;
}

.kb-filter-pill:hover {
    border-color: var(--tan);
    color: var(--brown-dark);
}

.kb-filter-pill.actief {
    background: var(--brown-dark);
    border-color: var(--brown-dark);
    color: var(--cream);
}

/* Article grid */
.kb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.kb-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(44,24,16,0.08);
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}

.kb-card:hover {
    box-shadow: 0 8px 32px rgba(44,24,16,0.1);
    transform: translateY(-2px);
}

.kb-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kb-card-thumb {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--tan-light);
}

.kb-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.kb-card:hover .kb-card-thumb img {
    transform: scale(1.04);
}

.kb-card-thumb-placeholder {
    background: linear-gradient(135deg, var(--tan-light) 0%, rgba(212,149,106,0.3) 100%);
}

.kb-card-cat-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--brown-dark);
    color: var(--cream);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.kb-card-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.kb-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--brown-dark);
    line-height: 1.3;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.kb-card-excerpt {
    font-size: 14px;
    color: var(--brown-mid);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-card-meta {
    font-size: 12px;
    color: rgba(44,24,16,0.4);
    display: flex;
    align-items: center;
    gap: 6px;
}

.kb-meta-dot { opacity: 0.4; }

/* Paginering */
.kb-paginering { margin: 48px 0 16px; }
.kb-paginering .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}
.kb-paginering .page-numbers li a,
.kb-paginering .page-numbers li span {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(44,24,16,0.15);
    color: var(--brown-dark);
    text-decoration: none;
    background: var(--white);
    transition: background 0.15s, color 0.15s;
}
.kb-paginering .page-numbers li a:hover { background: var(--tan-light); }
.kb-paginering .page-numbers li span.current {
    background: var(--brown-warm);
    color: var(--cream);
    border-color: var(--brown-warm);
}
.kb-paginering .page-numbers li span.dots {
    border: none;
    background: none;
    color: var(--brown-mid);
}

/* Empty state */
.kb-leeg {
    text-align: center;
    padding: 80px 0;
}

.kb-leeg-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.kb-leeg h2 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: var(--brown-dark);
    margin-bottom: 10px;
}

.kb-leeg p {
    font-size: 15px;
    color: var(--brown-mid);
    margin-bottom: 24px;
}

/* ---- SINGLE ARTIKEL ---- */

.kb-artikel-wrap {
    max-width: calc(var(--max-width) + 80px);
    margin: 0 auto;
    padding: calc(var(--nav-height) + 40px) 48px 96px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 56px;
    align-items: start;
}

.kb-artikel-breadcrumb {
    font-size: 13px;
    color: rgba(44,24,16,0.4);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.kb-artikel-breadcrumb a {
    color: rgba(44,24,16,0.4);
    text-decoration: none;
    transition: color 0.15s;
}

.kb-artikel-breadcrumb a:hover { color: var(--brown-warm); }

.kb-artikel-breadcrumb span {
    margin: 0 8px;
}

.kb-artikel-header {
    margin-bottom: 32px;
}

.kb-artikel-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--brown-warm);
    margin-bottom: 12px;
}

.kb-artikel-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -1px;
    color: var(--brown-dark);
    margin-bottom: 16px;
}

.kb-artikel-intro {
    font-size: 18px;
    line-height: 1.7;
    color: var(--brown-mid);
    margin-bottom: 20px;
    font-weight: 300;
}

.kb-artikel-meta {
    font-size: 13px;
    color: rgba(44,24,16,0.45);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kb-artikel-thumb {
    margin-bottom: 36px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-height: 480px;
}

.kb-artikel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kb-artikel-content {
    font-size: 16px;
    line-height: 1.85;
    color: var(--brown-mid);
}

.kb-artikel-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--brown-dark);
    margin: 40px 0 16px;
    letter-spacing: -0.4px;
}

.kb-artikel-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--brown-dark);
    margin: 28px 0 12px;
}

.kb-artikel-content p {
    margin-bottom: 20px;
}

.kb-artikel-content ul,
.kb-artikel-content ol {
    margin: 0 0 20px 20px;
}

.kb-artikel-content li {
    margin-bottom: 8px;
}

.kb-artikel-content strong {
    color: var(--brown-dark);
    font-weight: 600;
}

.kb-artikel-content a {
    color: var(--brown-warm);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kb-artikel-content a:hover {
    color: var(--brown-dark);
}

.kb-artikel-footer {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(44,24,16,0.08);
}

.kb-terug-link {
    font-size: 14px;
    color: var(--brown-mid);
    text-decoration: none;
    transition: color 0.15s;
}

.kb-terug-link:hover { color: var(--brown-dark); }

/* Sidebar */
.kb-artikel-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: calc(var(--nav-height) + 32px);
}

.kb-sidebar-card {
    background: var(--cream);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(44,24,16,0.08);
    padding: 24px;
}

.kb-sidebar-card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--brown-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.kb-sidebar-ai {
    background: var(--brown-dark);
    border-color: var(--brown-dark);
    text-align: center;
}

.kb-sidebar-ai-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.kb-sidebar-ai-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--cream);
    margin-bottom: 8px;
}

.kb-sidebar-ai p {
    font-size: 13px;
    color: rgba(250,246,240,0.65);
    line-height: 1.6;
    margin-bottom: 16px;
}

.kb-sidebar-related {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kb-related-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(44,24,16,0.06);
}

.kb-related-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.kb-related-thumb {
    width: 64px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.kb-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kb-related-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--brown-warm);
    display: block;
    margin-bottom: 3px;
}

.kb-related-title {
    font-size: 13px;
    color: var(--brown-dark);
    line-height: 1.4;
    font-weight: 500;
    transition: color 0.15s;
}

.kb-related-item:hover .kb-related-title { color: var(--brown-warm); }

.kb-sidebar-meer {
    font-size: 13px;
    color: var(--brown-warm);
    text-decoration: none;
    display: block;
    margin-top: 14px;
}

.kb-sidebar-meer:hover { color: var(--brown-dark); }

/* Responsive */
@media (max-width: 1024px) {
    .kb-grid { grid-template-columns: repeat(2, 1fr); }
    .kb-artikel-wrap { grid-template-columns: 1fr; }
    .kb-artikel-sidebar { position: static; }
}

@media (max-width: 768px) {
    .kb-hero { padding: calc(var(--nav-height) + 40px) 24px 56px; }
    .kb-wrap { padding: 40px 24px 72px; }
    .kb-grid { grid-template-columns: 1fr; }
    .kb-artikel-wrap { padding: calc(var(--nav-height) + 24px) 24px 64px; }
}

/* =========================================
   QUIZ OVERLAY
   ========================================= */

.quiz-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44, 24, 16, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.quiz-overlay.actief {
    opacity: 1;
    pointer-events: all;
}

.quiz-modal {
    background: var(--cream);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 40px 40px 48px;
    transform: translateY(16px);
    transition: transform 0.25s ease;
}

.quiz-overlay.actief .quiz-modal {
    transform: translateY(0);
}

.quiz-sluit {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--brown-mid);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    transition: color 0.15s;
}

.quiz-sluit:hover { color: var(--brown-dark); }

.quiz-header {
    margin-bottom: 32px;
}

.quiz-progress-track {
    height: 4px;
    background: rgba(44, 24, 16, 0.1);
    border-radius: 2px;
    margin-bottom: 10px;
    overflow: hidden;
}

.quiz-progress-bar {
    height: 100%;
    background: var(--brown-warm);
    border-radius: 2px;
    transition: width 0.35s ease;
    width: 0%;
}

.quiz-teller {
    font-size: 12px;
    /* 0.4 gaf een contrast van 2.46 en dat is te licht om te lezen */
    color: rgba(44, 24, 16, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.quiz-vraag {
    font-family: 'Playfair Display', serif;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    color: var(--brown-dark);
    line-height: 1.25;
    letter-spacing: -0.4px;
    margin-bottom: 28px;
}

.quiz-antwoorden {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.quiz-antwoord-btn {
    background: #fff;
    border: 1.5px solid rgba(44, 24, 16, 0.12);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    text-align: left;
    font-size: 15px;
    color: var(--brown-dark);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;
    line-height: 1.4;
}

.quiz-antwoord-btn:hover {
    border-color: var(--brown-warm);
    background: rgba(160, 82, 45, 0.04);
    transform: translateX(3px);
}

.quiz-antwoord-btn:active {
    transform: translateX(3px) scale(0.99);
}

.quiz-terug {
    background: none;
    border: none;
    color: rgba(44, 24, 16, 0.4);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s;
    margin-top: 4px;
}

.quiz-terug:hover { color: var(--brown-dark); }

/* Resultaat */
.quiz-resultaat {
    text-align: center;
}

.quiz-resultaat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--brown-warm);
    margin-bottom: 10px;
}

.quiz-resultaat-type {
    font-family: 'Playfair Display', serif;
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 900;
    color: var(--brown-dark);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 6px;
}

.quiz-resultaat-tagline {
    font-size: 15px;
    color: var(--brown-warm);
    font-weight: 500;
    margin-bottom: 20px;
}

.quiz-resultaat-omschrijving {
    font-size: 15px;
    line-height: 1.7;
    color: var(--brown-mid);
    max-width: 420px;
    margin: 0 auto 28px;
}

.quiz-resultaat-cta {
    display: inline-block;
    background: var(--brown-dark);
    color: var(--cream);
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s;
    margin-bottom: 14px;
}

.quiz-resultaat-cta:hover {
    background: var(--brown-warm);
    color: var(--cream);
}

.quiz-opnieuw {
    display: block;
    width: 100%;
    background: none;
    border: none;
    font-size: 13px;
    color: rgba(44, 24, 16, 0.4);
    cursor: pointer;
    font-family: inherit;
    padding: 8px 0 0;
    transition: color 0.15s;
}

.quiz-opnieuw:hover { color: var(--brown-dark); }

@media (max-width: 600px) {
    .quiz-modal { padding: 32px 24px 40px; }
}

/* =========================================
   GEWICHTSTRACKER
   ========================================= */

.gt-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--nav-height) + 48px) 48px 96px;
}

.gt-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.gt-breadcrumb {
    font-size: 13px;
    color: rgba(44,24,16,0.4);
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.gt-breadcrumb a { color: rgba(44,24,16,0.4); text-decoration: none; }
.gt-breadcrumb a:hover { color: var(--brown-dark); }

.gt-titel {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    color: var(--brown-dark);
    letter-spacing: -1px;
    margin-bottom: 6px;
}

.gt-subtitel {
    font-size: 15px;
    color: var(--brown-mid);
}

.gt-terug {
    flex-shrink: 0;
    align-self: center;
}

/* Tabs (meerdere teckels) */
.gt-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.gt-tab {
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(44,24,16,0.15);
    font-size: 14px;
    color: var(--brown-mid);
    text-decoration: none;
    transition: all 0.15s;
}

.gt-tab:hover { border-color: var(--tan); color: var(--brown-dark); }
.gt-tab.actief { background: var(--brown-dark); border-color: var(--brown-dark); color: var(--cream); }

/* Stats */
.gt-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.gt-stat {
    background: var(--cream);
    border: 1px solid rgba(44,24,16,0.08);
    border-radius: var(--radius-md);
    padding: 20px 22px;
}

.gt-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(44,24,16,0.4);
    margin-bottom: 6px;
}

.gt-stat-val {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--brown-dark);
}

.gt-trend-omhoog { color: #c0392b; }
.gt-trend-omlaag { color: var(--green-sage); }

/* Chart */
.gt-chart-wrap {
    background: #fff;
    border: 1px solid rgba(44,24,16,0.08);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 28px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gt-chart-leeg {
    text-align: center;
    color: var(--brown-mid);
    font-size: 15px;
}

/* Grid */
.gt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.gt-card {
    background: var(--cream);
    border: 1px solid rgba(44,24,16,0.08);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.gt-card-titel {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 20px;
    letter-spacing: -0.3px;
}

/* Formulier */
.gt-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.gt-form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--brown-dark);
}

.gt-form-row input {
    border: 1.5px solid rgba(44,24,16,0.15);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--brown-dark);
    background: #fff;
    transition: border-color 0.15s;
}

.gt-form-row input:focus {
    outline: none;
    border-color: var(--brown-warm);
}

.gt-submit { width: 100%; text-align: center; margin-top: 4px; }

.gt-form-feedback {
    font-size: 13px;
    margin-top: 10px;
    min-height: 18px;
}

/* Tabel */
.gt-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.gt-tabel th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(44,24,16,0.4);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(44,24,16,0.08);
}

.gt-tabel td {
    padding: 10px 0;
    border-bottom: 1px solid rgba(44,24,16,0.06);
    color: var(--brown-dark);
}

.gt-tabel tr:last-child td { border-bottom: none; }

.gt-delete-btn {
    background: none;
    border: none;
    color: rgba(44,24,16,0.3);
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    transition: color 0.15s;
    line-height: 1;
}

.gt-delete-btn:hover { color: #c0392b; }

.gt-leeg-tekst {
    font-size: 14px;
    color: var(--brown-mid);
}

/* Advies */
.gt-advies {
    border-radius: var(--radius-md);
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.6;
}

.gt-advies-goed {
    background: rgba(122,140,110,0.12);
    color: #3d5c35;
    border: 1px solid rgba(122,140,110,0.25);
}

.gt-advies-te-zwaar {
    background: rgba(192,57,43,0.08);
    color: #8b2319;
    border: 1px solid rgba(192,57,43,0.2);
}

.gt-advies-te-licht {
    background: rgba(160,82,45,0.08);
    color: var(--brown-dark);
    border: 1px solid rgba(160,82,45,0.2);
}

.gt-advies a {
    color: inherit;
    font-weight: 600;
    margin-left: 6px;
}

.gt-leeg {
    text-align: center;
    padding: 80px 0;
    color: var(--brown-mid);
}

@media (max-width: 768px) {
    .gt-wrap { padding: calc(var(--nav-height) + 32px) 24px 64px; }
    .gt-stats-row { grid-template-columns: 1fr 1fr; }
    .gt-grid { grid-template-columns: 1fr; }
    .gt-chart-wrap { height: 240px; }
}

@media (max-width: 480px) {
    .gt-stats-row { grid-template-columns: 1fr; }
}

/* =========================================
   TECKELAI WIDGET
   ========================================= */

.teckel-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}

/* Floating button */
.teckel-widget-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brown-dark);
    border: 3px solid var(--brown-warm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(44,24,16,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.teckel-widget-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(44,24,16,0.5);
}

.widget-btn-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.widget-btn-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.widget-btn-emoji { font-size: 28px; line-height: 1; }

.widget-icon-close {
    display: none;
    color: var(--cream);
    position: absolute;
}
.teckel-widget-btn.open .widget-btn-avatar { display: none; }
.teckel-widget-btn.open .widget-icon-close { display: block; }

/* Popup — absoluut boven de button */
.teckel-widget-popup {
    position: absolute;
    bottom: 76px;
    right: 0;
    width: 340px;
    background: var(--cream);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(44,24,16,0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.97);
    transform-origin: bottom right;
    transition: opacity 0.22s ease, transform 0.22s ease;
    max-height: 520px;
}
.teckel-widget-popup.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

.teckel-widget-header {
    background: var(--brown-dark);
    color: var(--cream);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.teckel-widget-header-info { display: flex; align-items: center; gap: 10px; }
.teckel-widget-avatar-sm {
    width: 36px;
    height: 36px;
    background: var(--brown-warm);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.teckel-widget-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.teckel-widget-name { font-weight: 600; font-size: 0.95rem; }
.teckel-widget-status { font-size: 0.72rem; color: var(--tan-light); margin-top: 1px; }

.teckel-widget-close {
    background: none;
    border: none;
    color: var(--cream);
    cursor: pointer;
    opacity: 0.7;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: opacity 0.15s;
}
.teckel-widget-close:hover { opacity: 1; }

.teckel-widget-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 240px;
    max-height: 360px;
}

.teckel-widget-form {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--tan-light);
    background: #fff;
    flex-shrink: 0;
}
.teckel-widget-form input {
    flex: 1;
    border: 1px solid var(--tan-light);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 0.88rem;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    background: var(--cream);
    color: var(--brown-dark);
    transition: border-color 0.15s;
}
.teckel-widget-form input:focus { border-color: var(--brown-warm); }
.teckel-widget-form button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brown-dark);
    color: var(--cream);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.teckel-widget-form button:hover { background: var(--brown-warm); }
.teckel-widget-form button:disabled { opacity: 0.5; cursor: default; }

/* Widget-specifieke berichtkleur (overschrijft donkere AI-pagina stijlen) */
.teckel-widget-messages .msg-ai {
    background: #fff;
    color: var(--brown-dark);
    border: 1px solid var(--tan-light);
}
.teckel-widget-messages .msg-user {
    background: var(--brown-dark);
    color: var(--cream);
}
.teckel-widget-messages .msg-typing {
    background: #fff;
    border: 1px solid var(--tan-light);
}
.teckel-widget-messages .msg-typing .dot { background: var(--brown-warm); }

/* =====================
   Cookie banner
   ===================== */
.cookie-banner {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    width: calc(100% - 48px);
    max-width: 720px;
    z-index: 9998;
    transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
    pointer-events: none;
}
.cookie-banner.zichtbaar {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.cookie-banner-inner {
    background: var(--cream);
    border-radius: 24px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    border: 1px solid rgba(44,24,16,0.1);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 -5px 0 0 var(--tan),
        0 4px 8px rgba(44,24,16,0.06),
        0 16px 32px rgba(44,24,16,0.14),
        0 40px 80px rgba(44,24,16,0.1);
}

.cookie-banner-inner::before {
    content: '';
    position: absolute;
    inset: 8px -8px -14px -8px;
    background: var(--tan-light);
    border-radius: 24px;
    z-index: -1;
    border: 1px solid rgba(44,24,16,0.08);
}

.cookie-banner-inner::after {
    content: '';
    position: absolute;
    inset: 16px -14px -22px -14px;
    background: #eddfc8;
    border-radius: 24px;
    z-index: -2;
    border: 1px solid rgba(44,24,16,0.06);
}

.cookie-banner-emoji {
    font-size: 52px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(44,24,16,0.2));
    animation: cookieBounce 2.5s ease-in-out infinite;
}

@keyframes cookieBounce {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%       { transform: translateY(-6px) rotate(4deg); }
}

.cookie-banner-content { flex: 1; min-width: 0; }

.cookie-banner-title {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 6px;
}

.cookie-banner-text {
    font-size: 13px;
    color: var(--brown-mid);
    line-height: 1.6;
    margin: 0;
}

.cookie-banner-text a {
    color: var(--brown-warm);
    text-decoration: underline;
}

.cookie-banner-acties {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-btn-accept {
    background: var(--brown-warm);
    color: var(--cream);
    border: none;
    border-radius: 24px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 12px rgba(160,82,45,0.35);
}
.cookie-btn-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(160,82,45,0.45);
}

.cookie-btn-decline {
    background: none;
    border: none;
    color: var(--brown-mid);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    padding: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-btn-decline:hover { color: var(--brown-dark); }

@media (max-width: 600px) {
    .cookie-banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }
    .cookie-banner-emoji { font-size: 40px; }
    .cookie-banner-acties { flex-direction: row; align-items: center; justify-content: center; }
}

/* Notification bubble */
.teckel-widget-bubble {
    position: absolute;
    bottom: 76px;
    right: 0;
    background: #fff;
    border-radius: 14px 14px 4px 14px;
    box-shadow: 0 4px 20px rgba(44,24,16,0.18);
    padding: 12px 36px 12px 16px;
    width: 230px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--brown-dark);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.teckel-widget-bubble.zichtbaar {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}
.teckel-widget-bubble p { margin: 0; }
.teckel-widget-bubble-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1rem;
    /* #aaa gaf een contrast van 2.32 op wit, te licht voor een knopje
       dat je juist moet kunnen vinden om die melding weg te klikken */
    color: rgb(118, 118, 118);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.teckel-widget-bubble-close:hover { color: var(--brown-dark); }

@media (max-width: 480px) {
    .teckel-widget { bottom: 16px; right: 16px; }
    .teckel-widget-popup { width: calc(100vw - 32px); right: 0; }
    .teckel-widget-bubble { width: 200px; }
}

/* ============================================================
   Aanraakdoelen en leesbaarheid op mobiel
   ------------------------------------------------------------
   Gemeten op een venster van 375px. De pagina's zelf zijn in orde:
   geen horizontaal scrollen, bodytekst op 16px en het menu werkt.
   Wat wel opviel: losse links stonden op 17 tot 18 pixels hoog,
   zonder ruimte eromheen. Dat is de tekstregel zelf en verder
   niets, dus je moet precies mikken. De richtlijn voor
   aanraakdoelen is 24 pixels als ondergrens en 44 als comfortabel.

   Links middenin een lopende zin blijven zoals ze zijn. Die vallen
   buiten die richtlijn en er tussenuit halen zou de tekst
   uiteentrekken.
   ============================================================ */

@media (max-width: 768px) {

    /* Voetermenu. De opsomming stond op gap 10px met kale
       tekstregels ertussen; die ruimte verhuist naar de link zelf,
       zodat het aanraakvlak groeit en de rij niet veel langer wordt. */
    .footer-links {
        gap: 0;
    }

    .footer-links a {
        display: inline-block;
        padding: 11px 0;
    }

    /* Losse links in de kop en onderaan een artikel */
    .nav-login-link,
    .kb-terug-link {
        display: inline-block;
        padding: 12px 0;
    }

    /* Kruimelpaden: de scheidingstekens houden de links al uit
       elkaar, dus hier is wat extra hoogte genoeg. */
    .ras-breadcrumb a,
    .kb-artikel-breadcrumb a {
        display: inline-block;
        padding: 6px 0;
    }

    /* De hamburger was 30 bij 24. Het pictogram blijft even groot,
       alleen het aanraakvlak eromheen wordt ruimer. De negatieve
       marge rechts houdt hem op zijn plek in de balk. */
    .nav-hamburger {
        padding: 12px;
        margin-right: -12px;
        justify-content: center;
    }

    /* De sluitknopjes van de Ollie-widget. Die op de meldingsbubbel
       was 9 bij 16: het kruisje zelf en verder niets. Het teken
       blijft even groot, het aanraakvlak eromheen groeit. De
       negatieve marges houden ze op hun plek in de hoek. */
    .teckel-widget-bubble-close {
        padding: 12px;
        margin: -12px;
        line-height: 1;
    }

    .teckel-widget-close {
        padding: 11px;
        margin: -7px;
    }

    /* Labels van 10 en 11 pixels. Op een telefoon is dat te klein
       om prettig te lezen, ook voor een label in kapitalen. */
    .hero-card-voorbeeld,
    .dog-stat-key,
    .card-category {
        font-size: 12px;
    }
}

/* ============================================================
   Verwijzing naar de gewichtstracker onder een kennisbankartikel
   ------------------------------------------------------------
   Staat alleen onder gezondheids- en gewichtsartikelen. Zie
   mt_toon_gewicht_cta() in inc/cpt-kennisbank.php.
   ============================================================ */

.kb-gewicht-cta {
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0 8px;
    padding: 28px 32px;
    background: var(--tan-light);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--brown-warm);
}

.kb-gewicht-cta-tekst h3 {
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    color: var(--brown-dark);
    margin: 0 0 8px;
}

.kb-gewicht-cta-tekst p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--brown-mid);
    margin: 0;
}

.kb-gewicht-cta-actie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    text-align: center;
}

.kb-gewicht-cta-klein {
    font-size: 12px;
    color: var(--brown-mid);
    max-width: 170px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .kb-gewicht-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 24px;
    }

    .kb-gewicht-cta-actie {
        align-items: stretch;
    }

    .kb-gewicht-cta-actie .btn-primary {
        text-align: center;
    }

    .kb-gewicht-cta-klein {
        max-width: none;
    }
}

/* ============================================================
   Verwijzing naar de gids waar een artikel onder valt
   ============================================================ */

.kb-artikel-pillar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 36px 0 0;
    padding: 20px 24px;
    background: var(--cream);
    border: 1px solid var(--tan-light);
    border-radius: var(--radius-xl);
}

.kb-artikel-pillar-label {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brown-mid);
}

.kb-artikel-pillar-link {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    color: var(--brown-dark);
    text-decoration: none;
    line-height: 1.4;
}

.kb-artikel-pillar-link:hover { color: var(--brown-warm); }

.kb-artikel-pillar-aantal {
    font-size: 13px;
    color: var(--brown-mid);
}

/* Alle artikelen onder een gids.

   Staat alleen op een gids, niet op een los artikel. Twee kolommen op een ruim
   scherm, één op smal: bij zestien artikelen wordt één lange kolom een muur. */
.kb-gids-index {
    margin: 44px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--tan-light);
}

.kb-gids-index-kop {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.kb-gids-index-intro {
    font-size: 14px;
    color: var(--brown-mid);
    margin-bottom: 20px;
}

.kb-gids-index-lijst {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.kb-gids-index-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--cream);
    border: 1px solid var(--tan-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.kb-gids-index-item:hover,
.kb-gids-index-item:focus-visible {
    background: var(--white);
    border-color: var(--brown-warm);
}

.kb-gids-index-titel {
    font-size: 15px;
    font-weight: 600;
    color: var(--brown-dark);
    line-height: 1.4;
}

.kb-gids-index-tekst {
    font-size: 13px;
    color: var(--brown-mid);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .kb-artikel-pillar {
        padding: 18px 20px;
    }

    .kb-artikel-pillar-link {
        display: inline-block;
        padding: 4px 0;
    }
}

/* ============================================================
   Winkel
   ------------------------------------------------------------
   Spiegelt bewust de kennisbank: dezelfde hero, dezelfde
   containerbreedte, hetzelfde kaartenraster. Een bezoeker die
   van een artikel naar de winkel loopt hoort niet het gevoel te
   krijgen dat hij op een andere site is beland.

   De indelings-CSS van WooCommerce is uitgezet in functions.php,
   dus het raster hieronder is van onszelf. woocommerce-general
   blijft wel staan voor meldingen en formulieren.
   ============================================================ */

.shop-hero {
    padding: calc(var(--nav-height) + 64px) 48px 72px;
    background: var(--brown-dark);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}

.shop-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.shop-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 900;
    line-height: 1.1;
    margin: 12px 0 0;
}

.shop-hero h1 em {
    font-style: italic;
    color: var(--tan);
}

.shop-hero-sub {
    max-width: 620px;
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(250, 246, 240, 0.75);
}

.shop-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 56px 48px 96px;
}

/* Productraster */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products li.product {
    width: auto;
    float: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(44, 24, 16, 0.08);
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(44, 24, 16, 0.1);
}

.woocommerce ul.products li.product a img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    margin: 0;
    background: var(--tan-light);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--brown-dark);
    line-height: 1.3;
    letter-spacing: -0.3px;
    padding: 20px 22px 0;
    margin: 0;
}

.woocommerce ul.products li.product .price {
    display: block;
    padding: 8px 22px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--brown-warm);
}

.woocommerce ul.products li.product .price del {
    color: var(--brown-mid);
    font-weight: 400;
    margin-right: 6px;
}

/* De knop onderaan, zodat kaarten van ongelijke hoogte toch uitlijnen */
.woocommerce ul.products li.product .button {
    margin: auto 22px 22px;
    align-self: flex-start;
}

/* Knoppen in de stijl van de site */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--brown-dark);
    color: var(--cream);
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: var(--brown-warm);
    color: var(--cream);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--brown-warm);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--brown-dark);
}

/* Sorteren en het aantal resultaten */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    margin-bottom: 28px;
    font-size: 14px;
    color: var(--brown-mid);
}

@media (max-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .shop-hero { padding: calc(var(--nav-height) + 40px) 24px 48px; }
    .shop-wrap { padding: 36px 24px 64px; }
    .woocommerce ul.products { grid-template-columns: 1fr; gap: 20px; }
    .woocommerce ul.products li.product a img { height: 200px; }
}

/* Productpagina: foto links, tekst rechts.
   Die tweekolomsindeling zat in de indelings-CSS van WooCommerce die hierboven
   is uitgezet, dus hier opnieuw opgebouwd. Met grid in plaats van floats, zodat
   de kolommen even hoog zijn en de tekst niet onder de foto door loopt. */
.woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "galerij samenvatting"
        "tabs    tabs"
        "meer    meer";
    column-gap: 48px;
    row-gap: 40px;
    align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery {
    grid-area: galerij;
    width: auto;
    float: none;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--tan-light);
}

.woocommerce div.product .summary {
    grid-area: samenvatting;
    width: auto;
    float: none;
    margin: 0;
}

.woocommerce div.product .woocommerce-tabs { grid-area: tabs; }
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-area: meer; }

.woocommerce div.product .product_title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.15;
    color: var(--brown-dark);
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}

.woocommerce div.product p.price {
    font-size: 26px;
    font-weight: 600;
    color: var(--brown-warm);
    margin: 0 0 20px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 16px;
    line-height: 1.75;
    color: var(--brown-mid);
    margin-bottom: 24px;
}

.woocommerce div.product form.cart { margin-bottom: 28px; }

.woocommerce div.product form.cart .quantity input {
    padding: 11px 8px;
    border: 1px solid rgba(44, 24, 16, 0.16);
    border-radius: 10px;
    font-size: 15px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 24px;
    border-bottom: 1px solid rgba(44, 24, 16, 0.1);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none;
    border: none;
    border-radius: 0;
    margin: 0 24px 0 0;
    padding: 0 0 12px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: 15px;
    font-weight: 500;
    color: var(--brown-mid);
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--brown-dark); }

@media (max-width: 900px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        grid-template-areas: "galerij" "samenvatting" "tabs" "meer";
        row-gap: 28px;
    }
}

/* Pagina's zonder eigen sjabloon (page.php).
   Voorheen viel alles zonder page-{slug}.php terug op index.php en stond de
   tekst zonder omlijsting op wit. */
.pagina-hero {
    padding: calc(var(--nav-height) + 56px) 48px 56px;
    background: var(--cream);
    border-bottom: 1px solid rgba(44, 24, 16, 0.08);
}

.pagina-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.pagina-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
    line-height: 1.15;
    color: var(--brown-dark);
    margin: 0;
    letter-spacing: -0.5px;
}

.pagina-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 24px 88px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--brown-mid);
}

.pagina-wrap h2 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: var(--brown-dark);
    margin: 36px 0 12px;
}

.pagina-wrap a { color: var(--brown-warm); }

@media (max-width: 768px) {
    .pagina-hero { padding: calc(var(--nav-height) + 32px) 24px 36px; }
    .pagina-wrap { padding: 32px 24px 64px; }
}

/* ── Winkelwagen en afrekenen ──
   Dat zijn blokken die in de browser worden opgebouwd, met eigen klassenamen
   die met wc-block beginnen. De indeling en de validatie daarvan zijn goed en
   worden hier niet aangeraakt: alleen de vormgeving wordt bijgetrokken naar de
   rest van de site. Zo blijft alles werken na een update van de plugin. */

.wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-title {
    font-family: 'Playfair Display', serif !important;
    color: var(--brown-dark);
}

.wc-block-cart-items__header {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brown-mid);
    border-bottom: 1px solid rgba(44, 24, 16, 0.12);
}

.wc-block-cart-items__row {
    border-bottom: 1px solid rgba(44, 24, 16, 0.08);
}

.wc-block-components-product-name {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--brown-dark);
    text-decoration: none;
}

.wc-block-components-product-price__value,
.wc-block-components-totals-item__value {
    color: var(--brown-warm);
    font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 22px;
}

/* Het overzicht rechts, als een kaart zoals elders op de site */
.wp-block-woocommerce-cart-totals-block,
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child {
    background: var(--cream);
    border: 1px solid rgba(44, 24, 16, 0.08);
    border-radius: var(--radius-lg);
    padding: 24px;
}

/* Knoppen */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background: var(--brown-warm) !important;
    color: var(--cream) !important;
    border-radius: 999px !important;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 28px;
    transition: background 0.2s;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--brown-dark) !important;
}

/* Invoervelden bij het afrekenen */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-select__select {
    border-radius: 10px !important;
    border-color: rgba(44, 24, 16, 0.18) !important;
    /* 16px, anders zoomt Safari op iOS in zodra je een veld aantikt */
    font-size: 16px !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label {
    color: var(--brown-mid);
}

.wc-block-components-checkout-step__title {
    font-family: 'Playfair Display', serif;
    color: var(--brown-dark);
}

.wc-block-components-checkout-step__description {
    color: var(--brown-mid);
}

/* ── Bedankpagina na een bestelling ──
   Het moment waarop iemand net geld heeft uitgegeven en wil zien dat het goed
   is gegaan. Daarom staat het bestelnummer groot en herkenbaar, niet als
   grijze regel tussen de rest. */

.woocommerce-order .woocommerce-thankyou-order-received {
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    color: var(--brown-dark);
    background: var(--tan-light);
    border-left: 4px solid var(--brown-warm);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 32px;
}

.woocommerce-order .woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
}

.woocommerce-order .woocommerce-order-overview li {
    flex: 1 1 160px;
    border: 1px solid rgba(44, 24, 16, 0.1);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brown-mid);
    border-right-width: 1px;
}

.woocommerce-order .woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brown-dark);
}

.woocommerce-order h2,
.woocommerce-account h2,
.woocommerce-order .woocommerce-column__title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--brown-dark);
    margin: 32px 0 14px;
}

.woocommerce table.shop_table {
    border: 1px solid rgba(44, 24, 16, 0.1);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.woocommerce table.shop_table th {
    background: var(--cream);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brown-mid);
    font-weight: 600;
    padding: 14px 18px;
}

.woocommerce table.shop_table td {
    padding: 14px 18px;
    border-top: 1px solid rgba(44, 24, 16, 0.08);
    color: var(--brown-mid);
}

.woocommerce table.shop_table td a { color: var(--brown-dark); font-weight: 500; }
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th { font-weight: 600; color: var(--brown-dark); }

.woocommerce .woocommerce-customer-details address {
    border: 1px solid rgba(44, 24, 16, 0.1);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    font-style: normal;
    line-height: 1.8;
    color: var(--brown-mid);
}

/* ── Mijn account ── */

/* Alleen als het accountmenu er daadwerkelijk staat.
   De schermen voor inloggen en voor een vergeten wachtwoord dragen dezelfde
   body-klasse maar hebben geen menu, en zonder deze voorwaarde belandde het
   formulier daar in de smalle menukolom van 240 pixels.
   Kent een browser :has() niet, dan vervalt het raster en komt het menu netjes
   boven de inhoud te staan. Dat is een prima terugval. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(44, 24, 16, 0.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    border-bottom: 1px solid rgba(44, 24, 16, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 13px 18px;
    font-size: 15px;
    color: var(--brown-mid);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--cream);
    color: var(--brown-dark);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--brown-dark);
    color: var(--cream);
    font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }

.woocommerce-account .woocommerce-MyAccount-content p { color: var(--brown-mid); line-height: 1.8; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--brown-warm); }

/* Formulieren binnen het account, en het scherm voor een vergeten wachtwoord */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    /* 16px, anders zoomt Safari op iOS in bij het aantikken */
    font-size: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(44, 24, 16, 0.18);
    border-radius: 10px;
    line-height: 1.4;
}

.woocommerce form .form-row label { color: var(--brown-mid); font-size: 14px; }

.woocommerce-lost-password .woocommerce {
    max-width: 460px;
}

/* WooCommerce zet form-row-first en form-row-last op 47 procent, bedoeld voor
   twee velden naast elkaar. Bij een formulier met één veld, zoals wachtwoord
   vergeten, blijft daardoor de helft leeg. */
.woocommerce-lost-password .woocommerce form .form-row-first,
.woocommerce-lost-password .woocommerce form .form-row-last {
    width: 100%;
    float: none;
}

@media (max-width: 900px) {
    .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .woocommerce-order .woocommerce-order-overview li { flex-basis: 100%; }
    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td { padding: 12px 14px; }
}

/* =========================================
   PRODUCTAANBEVELING MET AFFILIATE-LINK
   ========================================= */

/* De melding staat bovenaan het artikel, vóór de eerste alinea, omdat iemand
   moet weten dat een link geld oplevert voordat hij erop klikt. Bewust rustig
   vormgegeven: het is een mededeling en geen waarschuwing, en hij hoort de
   lezer niet af te schrikken van een artikel dat verder gewoon advies geeft. */
.mt-affiliate-melding {
    font-size: 13px;
    line-height: 1.6;
    color: var(--brown-mid);
    background: var(--cream);
    border-left: 3px solid var(--tan);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin: 0 0 28px;
}

.mt-product {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--cream);
    border: 1px solid var(--tan-light);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    margin: 28px 0;
}

/* Vaste maat, zodat een productfoto de kaart niet uit elkaar trekt en de
   ruimte al gereserveerd is voordat de afbeelding binnen is. */
.mt-product-foto {
    width: 110px;
    height: 110px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--white);
}

.mt-product-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mt-product-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brown-warm);
    font-weight: 600;
}

.mt-product-naam {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--brown-dark);
    line-height: 1.3;
}

.mt-product-waarom {
    font-size: 14px;
    line-height: 1.6;
    color: var(--brown-mid);
    margin: 0;
}

.mt-product-actie {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Tikdoel van 44 pixels hoog. Tachtig procent van het verkeer is mobiel en dit
   is de knop waar het uiteindelijk om draait. */
.mt-product-knop {
    display: inline-block;
    background: var(--brown-dark);
    color: var(--cream);
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.mt-product-knop:hover,
.mt-product-knop:focus-visible {
    background: var(--brown-mid);
}

.mt-product-prijs {
    font-size: 13px;
    color: var(--brown-mid);
}

/* Op een smal scherm de foto boven de tekst. Naast elkaar houdt de tekstkolom
   te weinig over voor een leesbare regel. */
@media (max-width: 560px) {
    .mt-product {
        flex-direction: column;
        gap: 14px;
    }

    .mt-product-foto {
        width: 100%;
        height: 160px;
    }
}

/* =========================================
   WEETJES
   ========================================= */

.weetjes-lijst {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.weetje {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--cream);
    border: 1px solid var(--tan-light);
    border-left: 3px solid var(--tan);
    border-radius: var(--radius-md);
    padding: 20px 22px;
}

.weetje-kop {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--brown-dark);
    line-height: 1.35;
    margin: 0;
}

.weetje-tekst {
    font-size: 15px;
    line-height: 1.65;
    color: var(--brown-mid);
    margin: 0;
}

/* De bron duwt zichzelf naar onderen, zodat kaarten van ongelijke lengte
   onderaan toch uitlijnen. */
.weetje-bron {
    margin-top: auto;
    padding-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brown-warm);
    text-decoration: none;
}

.weetje-bron:hover,
.weetje-bron:focus-visible {
    text-decoration: underline;
}

/* =========================================
   VOORKEURSBRON BIJ GOOGLE
   ========================================= */

.voorkeursbron {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--cream);
    border: 1px solid var(--tan-light);
    border-radius: var(--radius-xl);
    padding: 22px 26px;
    margin: 36px 0 0;
}

.voorkeursbron-tekst {
    flex: 1 1 300px;
    min-width: 0;
}

.voorkeursbron-tekst strong {
    display: block;
    font-size: 15px;
    color: var(--brown-dark);
    margin-bottom: 4px;
}

.voorkeursbron-tekst p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--brown-mid);
    margin: 0;
}

/* Tikdoel van 44 pixels, want tachtig procent van het verkeer is mobiel. */
.voorkeursbron-knop {
    display: inline-block;
    flex-shrink: 0;
    background: var(--brown-dark);
    color: var(--cream);
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.voorkeursbron-knop:hover,
.voorkeursbron-knop:focus-visible {
    background: var(--brown-mid);
}