/*
Theme Name: Geschreven Gedichten — Helder
Theme URI: https://geschrevengedichten.nl/
Author: Geschreven Gedichten
Description: Een zelfstandig thema met heldere wit-oranje vormgeving met compatibiliteit voor bestaande Vers & Vorm gebruikersprofielen, gedichten, studio, meldingen en redactionele pagina's.
Version: 7.3.2
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: vers-en-vorm
Tags: custom-logo, custom-menu, custom-colors, featured-images, block-patterns, translation-ready, blog
*/

:root {
    --vv-font-serif: 'Outfit', Arial, sans-serif;
    --vv-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Studio Brand Palette */
    --vv-color-primary: #c45d00;
    --vv-color-primary-dark: #526572;
    --vv-color-sub: #84916F;
    --vv-color-accent: #c45d00;
    --vv-color-accent-hover: #c45d00; /* Donkerder oranje bij hover */
    
    /* Perkament & Achtergronden */
    --vv-color-bg: #f1f2f4;
    --vv-color-card: #FFFFFF;
    --vv-color-paper: #FAF8F5;
    --vv-color-paper-border: #dde3e7;
    --vv-color-border: #dde3e7;
    
    /* Typografie */
    --vv-color-heading: #1A202C;
    --vv-color-text: #2D3748;
    --vv-color-text-muted: #526572;
    --vv-color-subtle: #87959e;
    
    /* Schaduwen */
    --vv-shadow-card: 0 4px 15px rgba(0, 0, 0, 0.03);
    --vv-shadow-hover: 0 12px 28px rgba(48, 93, 158, 0.10);
    --vv-shadow-paper: inset 0 0 50px rgba(0, 0, 0, 0.02), 0 10px 25px rgba(0, 0, 0, 0.05);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--vv-font-sans);
    background-color: var(--vv-color-bg);
    color: var(--vv-color-text);
    line-height: 1.8;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--vv-color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--vv-color-accent);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vv-font-serif);
    color: var(--vv-color-heading);
    line-height: 1.3;
    margin-top: 0;
    font-weight: 700;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}



.container-studio {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.container-narrow {
    max-width: 880px;
    margin: 0 auto;
}

/* ========================================================== */
/* DROP-DOWN WEBSITE HOOFDMENU                                */
/* ========================================================== */
.site-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--vv-color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding .site-title {
    margin: 0;
    font-size: 1.875rem; /* Precies 2px kleiner (30px i.p.v. 32px) */
    font-family: var(--vv-font-serif);
    font-weight: 700;
}

.site-branding .site-title a {
    color: var(--vv-color-heading);
}

.site-description {
    margin: 0;
    font-size: 0.85rem;
    color: var(--vv-color-text-muted);
}

/* Drop-Down Menu Structuur */
.primary-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.primary-navigation li {
    position: relative;
}

.primary-navigation li a {
    font-weight: 600;
    font-size: 0.95rem;
    color: #4A5568;
    padding: 0.65rem 1rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.primary-navigation li a:hover,
.primary-navigation li.current-menu-item > a,
.primary-navigation li.current-menu-ancestor > a {
    color: var(--vv-color-primary);
    background: #F7FAFC;
}

/* Dropdown Sub-menu */
.primary-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #FFFFFF;
    min-width: 230px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
    border: 1px solid var(--vv-color-border);
    border-radius: 10px;
    padding: 0.5rem 0;
    z-index: 9999;
    flex-direction: column;
    gap: 0;
}

.primary-navigation ul ul li {
    width: 100%;
}

.primary-navigation ul ul a {
    width: 100%;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 0;
    color: #2D3748;
}

.primary-navigation ul ul a:hover {
    background: #FAF8F5;
    color: var(--vv-color-primary);
    padding-left: 1.5rem;
}

/* Drop-down tonen bij hover */
.primary-navigation li:hover > ul {
    display: flex;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #2D3748;
}

/* ========================================================== */
/* HET SUBMENU IN EXACTE STUDIOBUILDER-STIJL                   */
/* ========================================================== */
.studio-subnav-bar {
    background: #FAF8F5;
    border-top: 1px solid var(--vv-color-paper-border);
    border-bottom: 1px solid var(--vv-color-paper-border);
    padding: 0.6rem 0;
}

.studio-subnav-items {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0 1.5rem;
}

.studio-subnav-items a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #FFFFFF;
    border: 1px solid #dde3e7;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #4A5568;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.studio-subnav-items a i {
    color: var(--vv-color-primary);
}

.studio-subnav-items a:hover,
.studio-subnav-items a.active {
    background: #FFFFFF;
    border-color: var(--vv-color-primary);
    color: var(--vv-color-primary);
    box-shadow: 0 4px 10px rgba(48, 93, 158, 0.12);
}

.studio-subnav-items a.subnav-highlight {
    background: #f1f2f4;
    border-color: #c45d00;
    color: var(--vv-color-accent);
}

.studio-subnav-items a.subnav-highlight:hover {
    background: #c45d00;
    color: #FFFFFF !important;
}

.studio-subnav-items a.subnav-highlight:hover i {
    color: #FFFFFF !important;
}

/* ========================================================== */
/* ORANJE BUTTONS: ALTIJD WITTE LETTERS & DONKERDER ORANJE HOVER */
/* ========================================================== */
.btn-ai-generate,
.btn-cta-generate,
.btn-sidebar-cta,
.btn-cta-upgrade,
.vv-btn-submit-checkout,
.btn-social-share {
    color: #FFFFFF !important; /* Altijd witte letters */
}

.btn-ai-generate:hover,
.btn-cta-generate:hover,
.btn-sidebar-cta:hover,
.btn-cta-upgrade:hover,
.vv-btn-submit-checkout:hover {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%) !important; /* Donkerder oranje bij hover */
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 78, 13, 0.45) !important;
}

/* ========================================================== */
/* BLOG STUDIO HERO HEADER                                    */
/* ========================================================== */
.studio-blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    padding: 1.75rem 2.25rem;
    border-radius: 14px;
    box-shadow: var(--vv-shadow-card);
    margin-bottom: 2.25rem;
    border: 1.5px solid #f1f2f4;
}

.studio-blog-header .brand h1 {
    font-family: var(--vv-font-serif);
    font-size: 2.3rem;
    margin: 0;
    color: #1A202C;
}

.studio-blog-header .brand p {
    margin: 0.35rem 0 0;
    color: var(--vv-color-text-muted);
    font-size: 1rem;
}

.studio-blog-header .studio-badge {
    background: #F7FAFC;
    padding: 0.65rem 1.35rem;
    border-radius: 999px;
    border: 1px solid #dde3e7;
    font-size: 0.95rem;
    color: #2D3748;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
}

.studio-blog-header .studio-badge i {
    color: var(--vv-color-primary);
}

/* ========================================================== */
/* 2-KOLOMS GRID (2X5 BERICHTEN NAAS ELKAAR) + ZIJBALK        */
/* ========================================================== */
.blog-studio-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
}

.blog-content-area {
    min-width: 0;
}

.posts-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.post-card-poetic {
    background: #FFFFFF;
    border: 1.5px solid var(--vv-color-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--vv-shadow-card);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.post-card-poetic:hover {
    transform: translateY(-5px);
    box-shadow: var(--vv-shadow-hover);
    border-color: var(--vv-color-primary);
}

.post-card-thumb {
    position: relative;
    height: 220px;
    overflow: hidden;
    background-color: var(--vv-color-paper);
}

.post-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

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

.post-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FAF8F5 0%, #EBF8FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vv-color-subtle);
    font-size: 2.5rem;
}

.post-card-category {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    color: var(--vv-color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.post-card-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.post-card-meta {
    font-size: 0.8rem;
    color: var(--vv-color-text-muted);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.post-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.post-card-title {
    font-family: var(--vv-font-serif);
    font-size: 1.6rem;
    line-height: 1.35;
    margin: 0 0 0.85rem;
}

.post-card-title a {
    color: var(--vv-color-heading);
}

.post-card-title a:hover {
    color: var(--vv-color-accent);
}

.post-card-excerpt {
    font-size: 0.95rem;
    color: #4A5568;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex: 1;
}

.post-card-footer {
    border-top: 1px solid #f1f2f4;
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.post-card-readmore {
    font-weight: 700;
    color: var(--vv-color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.post-card-readmore:hover {
    color: var(--vv-color-accent);
}

/* ========================================================== */
/* SINGLE POST & ARTIKELEN IN VOLLEDIGE STUDIOSTIJL           */
/* ========================================================== */
.single-post-card {
    background: #FFFFFF;
    border: 1.5px solid var(--vv-color-border);
    border-radius: 16px;
    padding: 3.5rem 3rem;
    box-shadow: var(--vv-shadow-card);
    margin-bottom: 2.5rem;
}

.single-post-header {
    text-align: center;
    margin-bottom: 2.5rem;
    border-bottom: 1.5px solid #f1f2f4;
    padding-bottom: 2rem;
}

.single-post-header h1 {
    font-size: 2.8rem;
    margin: 0 0 1rem;
    line-height: 1.25;
}

.single-post-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    color: var(--vv-color-text-muted);
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.single-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.single-post-featured-image {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.single-post-content {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--vv-color-text);
}

.single-post-content p {
    margin-bottom: 1.75rem;
}

.single-post-content blockquote {
    background: var(--vv-color-paper);
    border-left: 4px solid var(--vv-color-primary);
    margin: 2.5rem 0;
    padding: 2rem 2.5rem;
    border-radius: 0 10px 10px 0;
    font-family: var(--vv-font-serif);
    font-size: 1.45rem;
    font-style: italic;
    color: #2D3748;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.02);
}

.single-post-footer {
    margin-top: 3rem;
    border-top: 1px solid #f1f2f4;
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.post-tags-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-tags-list a {
    background: #f1f2f4;
    color: #4A5568;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.post-tags-list a:hover {
    background: var(--vv-color-primary);
    color: #FFFFFF;
}

/* PROMINENTE CTA ONDER BLOG ARTIKELEN: ZELF EEN GEDICHT MAKEN */
.post-bottom-studio-cta {
    background: linear-gradient(135deg, #FFFFFF 0%, #f1f2f4 100%);
    border: 2px solid #c45d00;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 8px 24px rgba(253, 103, 33, 0.12);
    text-align: center;
}

.post-bottom-studio-cta .cta-badge {
    background: #c45d00;
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.85rem;
}

.post-bottom-studio-cta h2 {
    font-size: 2.2rem;
    margin: 0 0 0.75rem;
    color: #1A202C;
}

.post-bottom-studio-cta p {
    font-size: 1.05rem;
    color: #4A5568;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 1.75rem;
}

.post-bottom-studio-cta .cta-actions {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.btn-cta-generate {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%);
    color: #FFFFFF !important;
    text-decoration: none;
    padding: 0.95rem 2rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(253, 103, 33, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-cta-sub {
    background: #FFFFFF;
    border: 2px solid #c45d00;
    color: #c45d00 !important;
    text-decoration: none;
    padding: 0.9rem 1.75rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-cta-sub:hover {
    background: #c45d00;
    color: #FFFFFF !important;
}

/* ========================================================== */
/* AUTEUR HERO KAART                                          */
/* ========================================================== */
.author-studio-hero {
    background: #FFFFFF;
    border: 1.5px solid var(--vv-color-border);
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--vv-shadow-card);
}

.author-hero-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.author-hero-avatar img {
    border-radius: 50%;
    border: 4px solid #FFFFFF;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.author-hero-info {
    flex: 1;
}

.author-hero-bio {
    font-size: 1.05rem;
    color: #4A5568;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.author-hero-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: #526572;
    flex-wrap: wrap;
}

.author-hero-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ========================================================== */
/* ZIJBALK STYLING                                            */
/* ========================================================== */
.sidebar-studio {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.sidebar-widget-card {
    background: #FFFFFF;
    border: 1.5px solid #dde3e7;
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: var(--vv-shadow-card);
}

.sidebar-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1.5px solid #f1f2f4;
}

.sidebar-widget-header h3 {
    margin: 0;
    font-family: var(--vv-font-serif);
    font-size: 1.4rem;
    color: var(--vv-color-heading);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-widget-header h3 i {
    color: var(--vv-color-primary);
    font-size: 1.1rem;
}

.sidebar-pill {
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-weight: 700;
    background: #DEF7EC;
    color: #03543F;
}

.author-profile-block {
    text-align: center;
}

.author-avatar-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c45d00 0%, #84916F 100%);
    color: #FFFFFF;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 14px rgba(48, 93, 158, 0.25);
}

.author-name {
    font-family: var(--vv-font-serif);
    font-size: 1.5rem;
    margin: 0 0 0.35rem;
    color: #1A202C;
}

.author-subtitle {
    color: var(--vv-color-accent);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.85rem;
}

.author-bio-text {
    font-size: 0.95rem;
    color: #4A5568;
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

.studio-cta-box {
    background: linear-gradient(135deg, #f1f2f4 0%, #FFFFFF 100%);
    border: 2px solid #c45d00;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.studio-cta-box h4 {
    font-family: var(--vv-font-serif);
    font-size: 1.4rem;
    margin: 0 0 0.5rem;
    color: #1A202C;
}

.studio-cta-box p {
    font-size: 0.9rem;
    color: #4A5568;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

.btn-sidebar-cta {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%);
    color: #FFFFFF !important;
    text-decoration: none;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(253, 103, 33, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}

.sidebar-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-categories-list li {
    border-bottom: 1px solid #f1f2f4;
}

.sidebar-categories-list li:last-child {
    border-bottom: none;
}

.sidebar-categories-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.25rem;
    color: #2D3748;
    font-weight: 600;
    font-size: 0.95rem;
}

.sidebar-categories-list a:hover {
    color: var(--vv-color-primary);
    padding-left: 0.5rem;
}

.cat-count {
    background: #f1f2f4;
    color: #526572;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
}

.sidebar-poem-parchment {
    background: var(--vv-color-paper);
    border: 1px solid var(--vv-color-paper-border);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--vv-shadow-paper);
}

.sidebar-poem-parchment h4 {
    font-family: var(--vv-font-serif);
    font-size: 1.35rem;
    margin: 0 0 0.25rem;
}

.sidebar-poem-stanza {
    font-family: var(--vv-font-serif);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.75;
    color: #2D3748;
    margin: 0.85rem 0;
}

.pagination {
    margin: 2.5rem 0 1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.pagination .page-numbers {
    padding: 0.7rem 1.25rem;
    border: 1.5px solid var(--vv-color-border);
    border-radius: 8px;
    background: #FFFFFF;
    font-weight: 700;
    font-size: 0.95rem;
    color: #4A5568;
    transition: all 0.2s;
}

.pagination .page-numbers:hover {
    border-color: var(--vv-color-primary);
    color: var(--vv-color-primary);
}

.pagination .page-numbers.current {
    background: var(--vv-color-primary);
    color: #FFFFFF;
    border-color: var(--vv-color-primary);
}

/* Footer */
.site-footer {
    background: #FFFFFF;
    border-top: 1px solid var(--vv-color-border);
    padding: 3.5rem 1.5rem 2rem;
    margin-top: auto;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.site-info {
    text-align: center;
    border-top: 1px solid #f1f2f4;
    padding-top: 2rem;
    color: var(--vv-color-text-muted);
    font-size: 0.9rem;
}

/* Social Share Button Styling */
.btn-social-share {
    border: none;
    border-radius: 8px;
    padding: 0.55rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, opacity 0.2s;
}

.btn-social-share:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1100px) {
    .blog-studio-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .posts-grid-2col {
        grid-template-columns: 1fr;
    }
    .author-hero-inner {
        flex-direction: column;
        text-align: center;
    }
    .author-hero-stats {
        justify-content: center;
    }
    .studio-blog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
    }
    .studio-subnav-items {
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
    }
    .menu-toggle {
        display: block;
    }
    .primary-navigation {
        display: none;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: #FFFFFF;
        border-bottom: 1px solid var(--vv-color-border);
        padding: 1rem 1.5rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    }
    .primary-navigation.is-active {
        display: block;
    }
    .primary-navigation ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .primary-navigation ul ul {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 1rem;
    }
    .header-container {
        position: relative;
    }
    .single-post-card {
        padding: 2rem 1.5rem;
    }
    .single-post-header h1 {
        font-size: 2.2rem;
    }
}


/* ========================================================== */
/* MASONRY FOTOALBUM GRID & LIGHTBOX                          */
/* ========================================================== */
.vv-masonry-container {
    margin: 2rem 0;
}

.vv-masonry-grid {
    column-count: 3;
    column-gap: 1.5rem;
}

.vv-masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--vv-color-paper-border);
    background: #FFFFFF;
    box-shadow: var(--vv-shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vv-masonry-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--vv-shadow-hover);
}

.vv-masonry-item img {
    width: 100%;
    display: block;
    height: auto;
    transition: transform 0.4s ease;
}

.vv-masonry-item:hover img {
    transform: scale(1.03);
}

.vv-masonry-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26, 32, 44, 0.45);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease;
    padding: 1rem;
    text-align: center;
}

.vv-masonry-item:hover .vv-masonry-overlay {
    opacity: 1;
}

.vv-zoom-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--vv-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin-bottom: 0.5rem;
}

.vv-overlay-caption {
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Lightbox Modal */
.vv-lightbox-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.92);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.vv-lightbox-close {
    position: absolute;
    top: 1.5rem; right: 2rem;
    color: #FFFFFF;
    font-size: 2.5rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.2s;
    border: 0;
    background: transparent;
    padding: 0.35rem;
}

.vv-lightbox-close:hover {
    opacity: 0.75;
}

.vv-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vv-lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.vv-lightbox-caption {
    color: #FAF8F5;
    font-family: var(--vv-font-serif);
    font-size: 1.25rem;
    font-style: italic;
    margin-top: 1rem;
    text-align: center;
}

.vv-lightbox-status {
    color: #FAF8F5;
    font: 500 0.95rem/1.5 var(--vv-font-sans, sans-serif);
    text-align: center;
    margin: 12px 0;
}

@media (max-width: 992px) {
    .vv-masonry-grid { column-count: 2; }
}

@media (max-width: 576px) {
    .vv-masonry-grid { column-count: 1; }
}


/* Zorg dat het hoofdmenu altijd goed zichtbaar is op desktop */
.primary-navigation {
    display: block !important;
}

.primary-navigation ul {
    display: flex !important;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    align-items: center;
}

.primary-navigation li {
    position: relative;
}

.primary-navigation li a {
    font-weight: 600;
    font-size: 0.95rem;
    color: #4A5568;
    padding: 0.65rem 1rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.primary-navigation li a:hover,
.primary-navigation li.current-menu-item > a {
    color: var(--vv-color-primary);
    background: #F7FAFC;
}

/* Submenu dropdown */
.primary-navigation ul ul.sub-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    background: #FFFFFF;
    min-width: 240px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
    border: 1px solid var(--vv-color-border);
    border-radius: 10px;
    padding: 0.5rem 0;
    z-index: 99999;
    flex-direction: column !important;
    gap: 0;
}

.primary-navigation ul li:hover > ul.sub-menu {
    display: flex !important;
}

.primary-navigation ul ul.sub-menu li {
    width: 100%;
}

.primary-navigation ul ul.sub-menu a {
    width: 100%;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 0;
    color: #2D3748;
    display: block;
}

.primary-navigation ul ul.sub-menu a:hover {
    background: #FAF8F5;
    color: var(--vv-color-primary);
    padding-left: 1.5rem;
}


/* ========================================================== */
/* VERFIJNDE MOBIELE NAVIGATIE & KNOPPEN (Punt 10)           */
/* ========================================================== */
@media (min-width: 769px) {
    .menu-toggle {
        display: none !important;
    }
    .primary-navigation {
        display: block !important;
    }
    .primary-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem;
        align-items: center;
    }
    .mobile-menu-cta-wrap {
        display: none !important;
    }
    .primary-navigation ul ul.sub-menu {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        background: #FFFFFF;
        min-width: 240px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
        border: 1px solid var(--vv-color-border);
        border-radius: 10px;
        padding: 0.5rem 0;
        z-index: 99999;
        flex-direction: column !important;
    }
    .primary-navigation ul li:hover > ul.sub-menu {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block !important;
    }
    .primary-navigation {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        border-bottom: 1.5px solid var(--vv-color-border);
        padding: 1.25rem 1.5rem;
        z-index: 99999;
    }
    .primary-navigation.is-active {
        display: block !important;
    }
    .primary-navigation ul {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
        width: 100%;
    }
    .primary-navigation ul li {
        width: 100%;
    }
    .primary-navigation ul li a {
        display: block;
        padding: 0.65rem 0.5rem;
        width: 100%;
    }
    .primary-navigation ul ul.sub-menu {
        display: block !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 1rem !important;
        background: #F8FAFC !important;
        border-radius: 8px !important;
        margin-top: 0.35rem;
    }
    .mobile-menu-cta-wrap {
        display: block !important;
        margin-top: 1.25rem;
        padding-top: 1rem;
        border-top: 1px dashed #CBD5E0;
    }
    .mobile-cta-btn {
        width: 100% !important;
        text-align: center;
        background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%) !important;
        color: #FFFFFF !important;
        padding: 0.85rem 1rem;
        border-radius: 8px;
        font-weight: 700;
        text-decoration: none;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
}

/* ========================================================== */
/* FOTOALBUM 2-KOLOMS MASONRY GRID (Punt 4)                   */
/* ========================================================== */
.vv-masonry-grid {
    column-count: 2 !important;
    column-gap: 1.5rem !important;
}

@media (max-width: 640px) {
    .vv-masonry-grid {
        column-count: 1 !important;
    }
}

/* Builder Wrapper max-width exact gelijk aan header (1280px) */
.builder-wrapper {
    max-width: 1280px !important;
    margin: 2rem auto 4rem !important;
    padding: 0 1.5rem !important;
}

/* Custom Logo in Header Styling */
.custom-logo-link img {
    max-height: 65px;
    width: auto;
    height: auto;
    display: block;
    transition: opacity 0.2s ease;
}
.custom-logo-link img:hover {
    opacity: 0.9;
}


/* ========================================================== */
/* SIDEBAR: DICHTBUNDELS & BOEKEN VAN WANDER STYLING          */
/* ========================================================== */
.sidebar-books-card {
    border-color: #dde3e7 !important;
}

.sidebar-book-item {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sidebar-book-item:hover {
    transform: translateY(-2px);
    border-color: #c45d00 !important;
    box-shadow: 0 6px 18px rgba(48, 93, 158, 0.09) !important;
}

.sidebar-book-item:hover .sidebar-book-btn {
    background: #c45d00 !important;
}

.sidebar-book-btn:hover {
    background: #c45d00 !important;
}


/* ========================================================== */
/* LUXE DICHTBUNDELS OVERZICHTSKAARTEN                         */
/* ========================================================== */
.vv-book-luxury-card {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
}

.vv-book-luxury-card:hover {
    transform: translateY(-5px) !important;
    border-color: #c45d00 !important;
    box-shadow: 0 12px 30px rgba(48, 93, 158, 0.12) !important;
}

.vv-book-luxury-card .book-card-display img {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vv-book-luxury-card:hover .book-card-display img {
    transform: scale(1.03);
}

.btn-order-bundle {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.btn-order-bundle:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(253, 103, 33, 0.42) !important;
}


/* ========================================================================== */
/* VERS & VORM v1.5 - ALLES DEZELFDE BREEDTE ALS HET MENU & MODERNE ANIMATIES */
/* ========================================================================== */

:root {
    --vv-site-max-width: 1280px;
    --vv-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --vv-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Strikte breedte-standaardisatie (voorkomt elke vorm van verspringing) */
.header-container,
.container-studio,
.site-main.container-studio,
.site-main.single-page-container,
.single-page-container,
.builder-wrapper,
.vv-theme-landing-page,
.vv-landing-builder-container,
.themas-hero-section,
.vv-contact-container {
    max-width: var(--vv-site-max-width) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 2. Header Navigatie Wrapper & Rechter Auth Knop */
.header-navigation-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-auth-action {
    display: flex;
    align-items: center;
}

.btn-header-auth {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    background: #FFFFFF;
    border: 1.5px solid #dde3e7;
    border-radius: 9999px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #2D3748;
    text-decoration: none;
    transition: all 0.22s var(--vv-ease-spring);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    white-space: nowrap;
}

.btn-header-auth:hover {
    background: #c45d00;
    color: #FFFFFF !important;
    border-color: #c45d00;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(253, 103, 33, 0.25);
}

.btn-header-auth .auth-icon {
    transition: transform 0.22s var(--vv-ease-spring);
}

.btn-header-auth:hover .auth-icon {
    transform: scale(1.12);
}

/* 3. Moderne Snelle Animaties & Vloeiende Micro-interacties */
@keyframes vvFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.vv-fade-in-up,
.single-post-card,
.post-card-poetic,
.author-studio-hero,
.sidebar-widget-card,
.book-preview-card,
.vv-theme-card {
    animation: vvFadeInUp 0.35s var(--vv-ease-spring) both;
}

/* Knoppen & Cards verfijnde hover-states */
.btn-primary,
.btn-sidebar-cta,
.btn-ai-generate,
.btn-cta-generate,
.btn-cta-sub,
.btn-header-auth,
.btn-theme-submit,
.btn-order-bundle {
    transition: all 0.22s var(--vv-ease-spring) !important;
}

.btn-primary:hover,
.btn-cta-generate:hover,
.btn-sidebar-cta:hover {
    transform: translateY(-2px);
}

.post-card-poetic {
    transition: transform 0.28s var(--vv-ease-spring), box-shadow 0.28s var(--vv-ease-spring), border-color 0.25s ease !important;
}

.post-card-poetic:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(48, 93, 158, 0.10) !important;
    border-color: var(--vv-color-primary) !important;
}

/* 4. Styling Contactpagina */
.vv-contact-container {
    padding: 2.5rem 1.5rem 5rem;
}

.vv-contact-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem auto;
}

.vv-contact-badge {
    display: inline-block;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #f1f2f4;
    color: #c45d00;
    border-radius: 999px;
    margin-bottom: 1rem;
    border: 1px solid #f1f2f4;
}

.vv-contact-title {
    font-size: 2.75rem;
    margin: 0 0 0.5rem 0;
    color: #1A202C;
}

.vv-contact-intro {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4A5568;
    margin-top: 1rem;
}

.vv-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 2.5rem;
    align-items: start;
}

.vv-contact-info-card,
.vv-contact-form-card {
    background: #FFFFFF;
    border: 1.5px solid #dde3e7;
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    transition: transform 0.25s var(--vv-ease-spring), box-shadow 0.25s ease;
}

.vv-contact-info-card:hover,
.vv-contact-form-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.vv-contact-info-card h3 {
    font-size: 1.7rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: #1A202C;
}

.vv-contact-details {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0;
}

.vv-contact-details li {
    display: flex;
    justify-content: space-between;
    padding: 0.85rem 0;
    border-bottom: 1px dashed #dde3e7;
    font-size: 0.95rem;
}

.vv-contact-details li strong {
    color: #2D3748;
}

.vv-contact-quote {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f2f4;
    color: #526572;
    font-size: 0.95rem;
    line-height: 1.7;
    font-family: var(--vv-font-serif);
}

.vv-form-group {
    margin-bottom: 1.25rem;
}

.vv-form-group label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #4A5568;
}

.vv-form-control {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1.5px solid #CBD5E0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #FAFAFA;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.vv-form-control:focus {
    outline: none;
    border-color: #c45d00;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(253, 103, 33, 0.12);
}

.btn-theme-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%) !important;
    color: #FFFFFF !important;
    border: none;
    border-radius: 8px;
    padding: 0.9rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(253, 103, 33, 0.3);
}

.btn-theme-submit:hover {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200, 69, 7, 0.4);
}

/* Responsiveness voor header en contact */
@media (max-width: 860px) {
    .header-navigation-wrapper {
        display: none; /* Mobiel menu regelt uitklappen */
    }
    .header-navigation-wrapper.is-active,
    .primary-navigation.is-active + .header-auth-action {
        display: flex;
    }
    .vv-contact-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================================================== */
/* VERS & VORM v1.5 - UNIFORM 1280PX GRID & PIXEL-PERFECT ALIGNMENT           */
/* ========================================================================== */

:root {
    --vv-site-max-width: 1280px;
    --vv-gutter: 1.5rem;
    --vv-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}



.header-container,
.studio-subnav-bar .container-studio,
.container-studio,
.site-main.container-studio,
.site-main.single-page-container,
.single-page-container,
.builder-wrapper,
.vv-theme-landing-page,
.vv-landing-builder-container,
.themas-hero-section,
.vv-contact-container {
    max-width: var(--vv-site-max-width) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--vv-gutter) !important;
    padding-right: var(--vv-gutter) !important;
    box-sizing: border-box !important;
}

.studio-subnav-items {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-navigation-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.btn-header-auth {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    background: #FFFFFF;
    border: 1.5px solid #dde3e7;
    border-radius: 9999px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #2D3748;
    text-decoration: none;
    transition: all 0.22s var(--vv-ease-spring);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    white-space: nowrap;
}

.btn-header-auth:hover {
    background: #c45d00;
    color: #FFFFFF !important;
    border-color: #c45d00;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(253, 103, 33, 0.25);
}

/* ==========================================================================
   VERS & VORM - VOLLEDIGE MOBIELE STYLING & PERFECTIONERING (max-width: 768px)
   100% Onveranderd voor desktop gebruikers
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 1. Iets donkerdere achtergrondkleur voor mobiel voor optimaal contrast */
    body {
        background-color: #f1f2f4 !important;
        color: #2D3748 !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    html {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* 2. Compacte, elegante mobiele header: Naam boven het menu */
    .site-header {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }

    .header-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0.85rem 1rem 0.65rem !important;
        position: relative !important;
        gap: 0.35rem !important;
    }

    /* Verberg de losse auth-knop in de smalle bovenbalk */
    .header-navigation-wrapper .header-auth-action {
        display: none !important;
    }

    /* Titel gecentreerd boven het menu, 2px kleiner */
    .site-branding {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .site-branding .site-title {
        font-size: clamp(1.1rem, 4.2vw, 1.42rem) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    .site-branding .site-title a {
        display: inline-block !important;
    }

    .site-branding .site-description {
        font-size: 0.75rem !important;
        text-align: center !important;
        margin-top: 2px !important;
    }

    .custom-logo-link img {
        max-height: 44px !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    /* Menu-knop direct onder de titel */
    .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: #FAF8F5 !important;
        border: 1.5px solid #CBD5E0 !important;
        border-radius: 999px !important;
        padding: 6px 20px !important;
        min-height: 38px !important;
        min-width: 110px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        color: #2D3748 !important;
        cursor: pointer !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        margin: 0.25rem auto 0 !important;
    }

    /* 3. Vernieuwde soepele touch-schuifbalk (Submenu) */
    .studio-subnav-bar {
        background: #f1f2f4 !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1.5px solid #dde3e7 !important;
        position: relative !important;
    }

    .studio-subnav-bar .container-studio {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .studio-subnav-items {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        gap: 0.5rem !important;
        padding: 0.25rem 0.25rem !important;
    }

    .studio-subnav-items::-webkit-scrollbar {
        display: none !important; /* Chrome / Safari */
    }

    .studio-subnav-items a {
        flex: 0 0 auto !important;
        padding: 0.45rem 0.85rem !important;
        font-size: 0.82rem !important;
        border-radius: 999px !important;
        background: #FFFFFF !important;
        border: 1px solid #dde3e7 !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    }

    /* 4. Onderkant van het mobiele menu (Studio + Aanmelden/Inloggen & Mijn Profiel) */
    .mobile-menu-header-branding {
        padding: 0.5rem 0.25rem 1rem !important;
        margin-bottom: 0.75rem !important;
        border-bottom: 1.5px solid #f1f2f4 !important;
        text-align: center !important;
    }

    .mobile-menu-brand-title {
        font-family: var(--vv-font-serif) !important;
        font-size: 1.35rem !important;
        font-weight: 700 !important;
        color: #1A202C !important;
        display: block !important;
    }

    .mobile-menu-brand-desc {
        font-size: 0.8rem !important;
        color: #526572 !important;
        display: block !important;
        margin-top: 2px !important;
    }

    .mobile-menu-cta-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 1.25rem !important;
        padding-top: 1.25rem !important;
        border-top: 1px dashed #CBD5E0 !important;
    }

    .mobile-menu-auth-wrap {
        width: 100% !important;
    }

    .mobile-auth-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0.85rem 1rem !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    .mobile-auth-btn.is-logged-out {
        background: #FFFFFF !important;
        border: 1.5px solid #CBD5E0 !important;
        color: #c45d00 !important;
    }

    .mobile-auth-btn.is-logged-in {
        background: #F0F4F8 !important;
        border: 1.5px solid #c45d00 !important;
        color: #1A202C !important;
    }

    /* 5. Universele stapeling van grids */
    main[style*="grid"],
    div[style*="grid-template-columns"],
    .vv-contact-grid,
    .blog-studio-layout,
    .posts-grid-2col {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .single-post-card,
    .vv-contact-info-card,
    .vv-contact-form-card,
    .author-studio-hero,
    .sidebar-widget-card,
    .book-preview-card {
        padding: 1.5rem 1.15rem !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 14px rgba(0,0,0,0.04) !important;
    }

    .single-post-header h1 {
        font-size: 1.85rem !important;
        line-height: 1.3 !important;
    }

    .single-post-content {
        font-size: 1.05rem !important;
        line-height: 1.8 !important;
    }

    /* 6. Duimvriendelijke acties en deelknoppen onder gedichten */
    .poem-actions-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    .poem-actions-bar > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .btn-bookmark-poem,
    .btn-report-poem {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 44px !important;
    }

    .social-share-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .social-share-buttons a[href*="wa.me"] {
        grid-column: 1 / -1 !important; /* WhatsApp bovenaan over volle breedte */
    }

    /* 7. Invoervelden: Touch target & iOS zoom-block */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }

    /* 8. Knoppen over de volle breedte met tactiele touch feedback */
    button,
    .btn-primary,
    .btn-sidebar-cta,
    .btn-cta-generate,
    .btn-cta-sub,
    .btn-theme-submit,
    .mobile-cta-btn {
        min-height: 46px !important;
        padding: 12px 18px !important;
        font-size: 15px !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        transition: transform 0.1s ease, background 0.2s ease !important;
    }

    button:active,
    .btn-primary:active,
    .btn-sidebar-cta:active,
    .btn-cta-generate:active,
    .mobile-cta-btn:active,
    .mobile-auth-btn:active {
        transform: scale(0.98) !important;
    }

    /* 9. Dichtbundels & Thema kaarten */
    .vv-books-showcase-grid,
    .vv-themes-overview-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .book-card-display {
        min-height: 200px !important;
        padding: 1rem !important;
    }

    /* 10. Paginering mobiel */
    .pagination {
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    .pagination .page-numbers {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.85rem !important;
    }

    /* 11. Mobiele menu drawer */
    .primary-navigation {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #FFFFFF !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
        border-bottom: 1.5px solid var(--vv-color-border) !important;
        padding: 1.25rem 1.5rem !important;
        z-index: 99999 !important;
    }

    .primary-navigation.is-active {
        display: block !important;
    }

    .primary-navigation ul {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
        width: 100% !important;
    }

    /* 12. Touch-vriendelijke Lightbox modal met pinch/zoom ondersteuning */
    .vv-lightbox-modal {
        padding: 1rem !important;
        touch-action: pan-y pinch-zoom !important;
    }

    .vv-lightbox-content img {
        max-width: 95vw !important;
        max-height: 75vh !important;
        touch-action: pan-y pinch-zoom !important;
    }
}

@media screen and (min-width: 769px) {
    .menu-toggle {
        display: none !important;
    }
    .mobile-menu-cta-wrap {
        display: none !important;
    }
    .mobile-menu-header-branding {
        display: none !important;
    }
}


/* ==========================================================================
   VERS & VORM - AANVULLENDE MOBIELE OPTIMALISATIES & GEBRUIKSVRIENDELIJKHEID
   ========================================================================== */

/* 1. Flaptekst knop binnen het kader houden */
.book-card-display,
.author-book-card .book-display-wrap,
.sidebar-book-item {
    position: relative !important;
    overflow: hidden !important;
}

.book-card-display button[onclick*="toggleOverviewBookCover"],
.book-card-display button[onclick*="toggleBookCover"],
.author-book-card button[onclick*="toggleBookCover"] {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    max-width: calc(100% - 16px) !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
}

@media (max-width: 480px) {
    .book-card-display button[onclick*="toggleOverviewBookCover"],
    .book-card-display button[onclick*="toggleBookCover"],
    .author-book-card button[onclick*="toggleBookCover"] {
        font-size: 0.68rem !important;
        padding: 4px 8px !important;
        bottom: 6px !important;
        right: 6px !important;
    }
}

/* 2. Rijmwoordenboek resultatenpagina overzichtelijk maken */
@media (max-width: 768px) {
    form[action*="rijmwoordenboek"] {
        flex-direction: column !important;
        padding: 8px !important;
        gap: 8px !important;
    }
    form[action*="rijmwoordenboek"] input[type="text"] {
        width: 100% !important;
        font-size: 1rem !important;
    }
    form[action*="rijmwoordenboek"] button {
        width: 100% !important;
        justify-content: center !important;
    }

    .site-main.container-studio > div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 1rem !important;
    }

    .site-main.container-studio div[style*="display: flex; gap: 6px; align-items: center;"] {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 6px !important;
    }

    .btn-syl-filter {
        flex: 1 1 calc(50% - 6px) !important;
        text-align: center !important;
        padding: 7px 10px !important;
        font-size: 0.8rem !important;
    }

    div[style*="grid-template-columns: 1.2fr 0.8fr"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .rhyme-word-card {
        padding: 6px 10px !important;
        font-size: 0.9rem !important;
    }
}

/* 3. Marges en ruimtes om de kaarten bij Studio & Thema's gelijk trekken */
@media (max-width: 768px) {
    .container-studio,
    .builder-wrapper,
    .vv-theme-landing-page,
    .vv-landing-builder-container,
    .themas-hero-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .themas-hero-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        margin-bottom: 1.5rem !important;
    }

    .vv-themes-overview-grid,
    .vv-books-showcase-grid,
    .builder-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .vv-theme-card,
    .vv-book-luxury-card,
    .input-card,
    .stanza-card,
    .book-preview-card {
        padding: 1.25rem 1rem !important;
    }
}

/* 4. Verberg laatste gedichten op themakaarten */
.theme-card-latest-poems {
    display: none !important;
}

/* 5 & 6 & 7. Kaarten mobiel: Titels en meta onder elkaar + font formaat subtiel kleiner */
@media (max-width: 768px) {
    .post-card-meta {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin-bottom: 0.5rem !important;
    }

    .post-card-title {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }

    .single-poem-card .single-post-header,
    .single-post-card .single-post-header {
        text-align: left !important;
        padding-bottom: 1.25rem !important;
    }

    .single-post-meta {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        font-size: 0.85rem !important;
    }

    /* Gedichten lettertypeformaat subtiel verkleinen voor perfecte pasvorm op kaart */
    .single-poem-lines,
    .preview-stanza p,
    .post-card-excerpt {
        font-size: 0.98rem !important;
        line-height: 1.7 !important;
    }

    .book-preview-card .preview-inner h2 {
        font-size: 1.75rem !important;
    }
}


/* ==========================================================================
   COMPACTE RUIMTE VOOR DICHTERS STUDIO EN THEMA ELEMENTEN OP MOBIEL (<= 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. Algemene wrapper & content ruimte minimaliseren */
    

    /* 2. Studio Builder Wrapper & Headers */
    .builder-wrapper {
        margin: 0.5rem auto 1.5rem !important;
        padding: 0 10px !important;
    }

    .builder-header {
        padding: 1rem 1rem !important;
        margin-bottom: 1rem !important;
        gap: 0.5rem !important;
        border-radius: 12px !important;
    }

    .builder-header h1 {
        font-size: 1.6rem !important;
        margin-bottom: 0.15rem !important;
    }

    .builder-header p {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    .tier-badge {
        padding: 0.4rem 0.85rem !important;
        font-size: 0.8rem !important;
    }

    /* 3. Modus Schakelaars (Model 1, 2, 3) */
    .vv-mode-tabs-container {
        margin-bottom: 1rem !important;
    }

    .vv-mode-tabs-container > div:first-child {
        margin-bottom: 6px !important;
        font-size: 11px !important;
    }

    .vv-mode-tabs {
        gap: 8px !important;
    }

    .vv-tab-btn {
        padding: 10px 12px !important;
        border-radius: 8px !important;
        gap: 10px !important;
    }

    .vv-tab-btn span[style*="width: 36px"],
    .vv-tab-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .vv-tab-btn strong {
        font-size: 13px !important;
    }

    .vv-tab-btn small {
        font-size: 10px !important;
    }

    /* 4. Model 1 & 3 Assistent Kaarten */
    .ai-assistant-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
    }

    .ai-assistant-header {
        margin-bottom: 1rem !important;
    }

    .ai-assistant-header h2 {
        font-size: 1.4rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.25 !important;
    }

    .ai-assistant-header p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
    }

    .ai-field-group {
        margin-bottom: 0.5rem !important;
    }

    .ai-field-group label {
        font-size: 0.82rem !important;
        margin-bottom: 0.25rem !important;
    }

    .ai-field-group textarea,
    .ai-field-group input,
    .ai-field-group select {
        padding: 10px !important;
        font-size: 15px !important;
    }

    /* 5. Model 2 Werkblad, Invoervelden & Stanza Kaarten */
    .builder-grid {
        gap: 1rem !important;
    }

    .input-card {
        padding: 1rem 0.85rem !important;
        margin-bottom: 0.85rem !important;
        border-radius: 10px !important;
    }

    .stanza-card {
        padding: 1rem 0.85rem !important;
        margin-bottom: 0.85rem !important;
        border-radius: 10px !important;
    }

    .stanza-header {
        margin-bottom: 0.85rem !important;
    }

    .stanza-header h3 {
        font-size: 1.05rem !important;
    }

    .line-input-group {
        gap: 6px !important;
        margin-bottom: 0.6rem !important;
    }

    .poem-line {
        padding: 8px 10px !important;
        font-size: 15px !important;
        border-radius: 6px !important;
    }

    .btn-rhyme-help {
        padding: 8px 10px !important;
    }

    .rhyme-status-msg {
        margin-top: 0.35rem !important;
        padding-left: 0.5rem !important;
        font-size: 0.78rem !important;
    }

    .editor-actions {
        margin-top: 0.5rem !important;
        gap: 8px !important;
    }

    /* 6. Live Boek / Perkament Preview Kaart */
    .preview-pane > div:first-child {
        margin-bottom: 8px !important;
        gap: 6px !important;
    }

    .preview-theme-selector {
        padding-bottom: 4px !important;
        margin-bottom: 4px !important;
        gap: 4px !important;
    }

    .btn-theme-chip {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .book-preview-card {
        padding: 1.75rem 1rem 1.5rem !important;
        min-height: auto !important;
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
    }

    .book-preview-card .preview-inner h2 {
        font-size: 1.65rem !important;
        margin-bottom: 0.25rem !important;
    }

    .book-preview-card .ornament {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .preview-stanza {
        margin-bottom: 1rem !important;
    }

    .preview-stanza p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin: 0.15rem 0 !important;
    }

    .preview-footer {
        margin-top: 1.25rem !important;
        padding-top: 0.5rem !important;
    }

    .preview-actions {
        margin-top: 0.75rem !important;
        gap: 8px !important;
    }

    .social-share-panel {
        padding: 1rem !important;
        margin-top: 1rem !important;
        border-radius: 10px !important;
    }

    /* 7. Thema Overzichtspagina & Thema Hero */
    .themas-hero-section {
        padding: 1.75rem 1rem 1.5rem !important;
        margin-bottom: 1.5rem !important;
        border-radius: 14px !important;
    }

    .themas-hero-section h1 {
        font-size: 1.85rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.2 !important;
    }

    .themas-hero-section p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.25rem !important;
    }

    .themas-feature-pills {
        gap: 8px !important;
        margin-bottom: 1.25rem !important;
    }

    .themas-feature-pills > div {
        padding: 0.75rem 0.85rem !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }

    /* 8. Thema Grid en Thema Kaarten */
    .vv-themes-overview-grid {
        gap: 1rem !important;
    }

    .vv-theme-card {
        padding: 1.15rem 1rem !important;
        border-radius: 12px !important;
    }

    .vv-theme-card h2 {
        font-size: 1.35rem !important;
        margin-bottom: 0.25rem !important;
    }

    .vv-theme-card p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.85rem !important;
    }

    /* 9. Standalone Thema Landingspagina (page-thema-builder.php) */
    .vv-theme-landing-page {
        padding: 1rem 0.75rem 2rem !important;
    }

    .vv-landing-header {
        margin-bottom: 1.25rem !important;
    }

    .vv-landing-header h1 {
        font-size: 1.85rem !important;
        margin-bottom: 0.35rem !important;
        line-height: 1.2 !important;
    }

    .vv-landing-lead {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }

    .vv-theme-chips-bar {
        margin-top: 0.75rem !important;
        gap: 6px !important;
    }

    .vv-topic-chip {
        padding: 4px 10px !important;
        font-size: 0.8rem !important;
    }

    .vv-landing-builder-container {
        margin-top: 0.5rem !important;
    }

    .vv-theme-latest-poems {
        margin-top: 1.75rem !important;
    }

    .vv-landing-perks {
        margin-top: 1.75rem !important;
        gap: 1rem !important;
    }

    .vv-perk-card {
        padding: 1.25rem 1rem !important;
        border-radius: 10px !important;
    }

    .vv-perk-card h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
}


/* ==========================================================================
   VERS & VORM - EXACTE VOORPAGINA MARGES & ELEMENTEN HARMONISATIE
   ========================================================================== */

/* 1. Voorkom dubbele container-padding in de studio */
.site-main.container-studio .builder-wrapper,
.container-studio .builder-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 2. Studio Header & Thema Hero's gelijkstellen aan .studio-blog-header */
.builder-header,
.themas-hero-section,
.vv-landing-header {
    background: #FFFFFF !important;
    border: 1.5px solid #f1f2f4 !important;
    border-radius: 14px !important;
    box-shadow: var(--vv-shadow-card, 0 4px 15px rgba(0, 0, 0, 0.03)) !important;
    padding: 1.75rem 2.25rem !important;
    margin-bottom: 2.25rem !important;
}

/* 3. Grid-afstanden gelijkstellen aan de voorpagina (.posts-grid-2col) */
.builder-grid,
.vv-themes-overview-grid,
.vv-books-showcase-grid,
.vv-landing-perks {
    display: grid !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
}

/* 4. Kaarten in de Studio en Thema's gelijkstellen aan .post-card-poetic */
.ai-assistant-card,
.stanza-card,
.input-card,
.book-preview-card,
.vv-theme-card,
.vv-perk-card {
    background: #FFFFFF !important;
    border: 1.5px solid var(--vv-color-border, #dde3e7) !important;
    border-radius: 14px !important;
    padding: 1.75rem !important;
    box-shadow: var(--vv-shadow-card, 0 4px 15px rgba(0, 0, 0, 0.03)) !important;
}

.input-card {
    margin-bottom: 1.5rem !important;
}

.stanza-card {
    margin-bottom: 1.5rem !important;
}

.ai-assistant-card {
    margin-bottom: 2rem !important;
}

.book-preview-card {
    margin-bottom: 1.5rem !important;
}

.vv-theme-card {
    margin-bottom: 1.5rem !important;
}

.vv-perk-card {
    margin-bottom: 1.5rem !important;
}

.editor-pane {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* Margins are cleanly handled on the cards themselves */
}

.vv-mode-tabs-container {
    margin-bottom: 2rem !important;
}

/* ==========================================================================
   MOBIELE WEERGAVE (<= 768px): Exact gelijk aan de mobiele voorpagina
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. Algemene site-content padding identiek aan voorpagina */
    

    /* 2. Headers op mobiel (exact zoals .studio-blog-header op index.php) */
    .builder-header,
    .themas-hero-section,
    .vv-landing-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 1.5rem 1.15rem !important;
        margin-bottom: 1.25rem !important;
        border-radius: 12px !important;
        gap: 1rem !important;
    }

    .themas-hero-section h1,
    .builder-header h1,
    .vv-landing-header h1 {
        font-size: 1.85rem !important;
        margin-bottom: 0.35rem !important;
        line-height: 1.25 !important;
    }

    .themas-hero-section p,
    .builder-header p,
    .vv-landing-lead {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }

    /* 3. Thema features / pills compacter */
    .themas-feature-pills {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    .themas-feature-pills > div {
        padding: 0.85rem 1rem !important;
    }

    /* 4. Grids op mobiel stapelen met de voorpagina-gap (1.25rem) */
    .builder-grid,
    .vv-themes-overview-grid,
    .vv-books-showcase-grid,
    .vv-landing-perks {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        margin-bottom: 2rem !important;
    }

    /* 5. Kaarten op mobiel (exacte voorpagina padding: 1.5rem 1.15rem) */
    .ai-assistant-card,
    .stanza-card,
    .input-card,
    .book-preview-card,
    .vv-theme-card,
    .vv-perk-card {
        padding: 1.5rem 1.15rem !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04) !important;
    }

    .vv-mode-tabs-container {
        margin-bottom: 1.25rem !important;
    }

    /* 6. Thema-landingspagina container */
    .vv-theme-landing-page {
        padding: 0 !important;
    }
}


/* ==========================================================================
   BREDE TEKST INVOERVELDEN VOOR DE GEDICHTREGELS (DESKTOP & MOBIEL)
   ========================================================================== */

/* Zorg dat de regel-groep de volledige breedte benut */
.line-input-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    margin-bottom: 0.75rem !important;
    box-sizing: border-box !important;
}

/* Regelnummer compact houden */
.line-num {
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: #87959e !important;
    text-align: right !important;
}

/* De gedichtregel input: maximaal breed over de hele rij */
.line-input-group .poem-line,
input.poem-line {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    border-radius: 8px !important;
    border: 1.5px solid #CBD5E0 !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    display: block !important;
}

.line-input-group.highlight-stanza-1 .poem-line {
    border-color: #38A169 !important;
    background-color: #F0FFF4 !important;
}

.line-input-group.highlight-stanza-2 .poem-line {
    border-color: #c45d00 !important;
    background-color: #EBF8FF !important;
}

/* Lettergrepen-tag compact en niet-krimpend */
.line-input-group .syllable-margin-tag {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
}

/* Rijmhulp knop compact houden zodat het invoerveld breed blijft */
.line-input-group .btn-rhyme-help,
.line-input-group button.btn-rhyme-help {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f2f4 !important;
    color: #4A5568 !important;
    border: none !important;
    cursor: pointer !important;
}

/* Titel invoerveld ook over volle breedte */
#vvPoemTitle,
.input-card input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1.15rem !important;
    padding: 0.8rem 1rem !important;
}

@media screen and (max-width: 768px) {
    .line-input-group {
        gap: 6px !important;
        margin-bottom: 0.65rem !important;
    }
    
    .line-input-group .poem-line,
    input.poem-line {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        font-size: 15px !important;
        padding: 9px 10px !important;
    }
    
    .line-input-group .btn-rhyme-help,
    .line-input-group button.btn-rhyme-help {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }
    
    .line-num {
        flex: 0 0 18px !important;
        width: 18px !important;
        min-width: 18px !important;
        font-size: 0.8rem !important;
    }
}


/* ==========================================================================
   EXTRA BREDE GEDICHTREGELS INVOERVELDEN OP MOBIEL (<= 768px & <= 480px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Strofekaarten padding compact zodat invoervelden maximaal breed zijn */
    .stanza-card {
        padding: 1rem 0.75rem !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .line-input-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        gap: 5px !important;
        margin-bottom: 0.55rem !important;
    }

    /* Regelnummer minimaal en strak */
    .line-num {
        flex: 0 0 16px !important;
        width: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        padding: 0 !important;
    }

    /* Maximale breedte voor de gedichtregel */
    .line-input-group .poem-line,
    input.poem-line {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 8px 10px !important;
        font-size: 15px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    /* Compacte teller naast regel */
    .line-input-group .syllable-margin-tag {
        flex: 0 0 auto !important;
        font-size: 9px !important;
        padding: 2px 4px !important;
        white-space: nowrap !important;
    }

    /* Compacte rijmhulp knop */
    .line-input-group .btn-rhyme-help,
    .line-input-group button.btn-rhyme-help {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }
}

@media screen and (max-width: 420px) {
    .stanza-card {
        padding: 0.85rem 0.5rem !important;
    }

    .line-input-group {
        gap: 4px !important;
    }

    .line-input-group .poem-line,
    input.poem-line {
        padding: 7px 8px !important;
        font-size: 14px !important;
    }

    .line-input-group .btn-rhyme-help,
    .line-input-group button.btn-rhyme-help {
        flex: 0 0 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
    }
}







/* ==========================================================
   Versie 3.2: Ruimtelijke Layout, Perfecte Tussenruimtes (50px)
   & Geoptimaliseerde Afstanden Tussen Alle Blokken
   ========================================================== */

/* 1. Website Achtergrondkleur */
body {
    background-color: #f1f2f4 !important;
    color: #2D3748 !important;
    overflow-x: hidden;
}

:root {
    --vv-color-bg: #f1f2f4;
}

/* 2. Exacte en uniforme tussenruimte van 50px onder het menu op alle subpagina's */
.site-content {
    flex: 1;
    padding-top: 50px !important; /* Vaste, gelijke afstand van exact 50px onder het menu */
    padding-bottom: 4rem !important;
    width: 100%;
}

/* Neutraliseer de bovenmarge van het eerste kind-element zodat 50px exact gewaarborgd blijft */
.site-content > .container-studio:first-child,
.site-content > .site-main:first-child,
.site-content > .builder-wrapper:first-child,
.site-content > .vv-theme-landing-page:first-child,
.site-content > .themas-hero-section:first-child,
.site-content > .single-page-container:first-child,
.site-content > article:first-child,
.site-content > section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.builder-wrapper {
    margin-top: 0 !important;
}

.themas-hero-section {
    margin-top: 0 !important;
}

.vv-theme-landing-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 3. Voorpagina: Hero sluit direct en naadloos aan op het menu (geen tussenruimte!) */
.site-content:has(.site-hero-slanted),
body.home .site-content,
body.front-page .site-content {
    padding-top: 0 !important;
}

/* Exact 50px extra ruimte direct onder de hero op de voorpagina */
.site-hero-slanted + .site-main,
body.home .site-hero-slanted + .site-main,
body.front-page .site-hero-slanted + .site-main {
    margin-top: 50px !important;
}

/* 4. Rechte Hero Header (ZONDER schuine uitsnede) over de volledige breedte */
.site-hero-slanted {
    position: relative;
    width: 100%;
    height: 500px; /* Desktop: 500px */
    display: flex;
    align-items: center;
    background-color: #f1f2f4;
    margin-top: 0 !important;
    overflow: hidden;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.site-hero-slanted .hero-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Subtiele, zachte gradient achter de letters links zodat de illustratie rechts 100% helder en scherp blijft */
.site-hero-slanted::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(240, 228, 219, 0.78) 0%, rgba(240, 228, 219, 0.40) 40%, rgba(240, 228, 219, 0) 75%);
    z-index: 2;
    pointer-events: none;
}

.hero-inner-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.hero-typography-block {
    max-width: 600px;
    text-align: left;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-family: var(--vv-font-sans, sans-serif);
    color: #526572;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.hero-kicker::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1.5px;
    background: #526572;
}

.hero-main-title {
    font-family: var(--vv-font-serif, 'Outfit', Arial, sans-serif);
    font-size: 3.2rem;
    line-height: 1.15;
    color: #1A202C;
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.hero-main-desc {
    font-family: var(--vv-font-sans, sans-serif);
    font-size: 1.1rem;
    line-height: 1.65;
    color: #4A5568;
    margin: 0 0 1.75rem 0;
}

.hero-action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-btn-primary {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(253, 103, 33, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(253, 103, 33, 0.35);
}

.hero-btn-subtle {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #dde3e7;
    color: #2D3748 !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hero-btn-subtle:hover {
    background: #FFFFFF;
    border-color: #CBD5E0;
}

/* Tablet: Hoogte 350px & RECHT */
@media (max-width: 992px) {
    .site-hero-slanted {
        height: 350px !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    .hero-main-title {
        font-size: 2.3rem;
        margin-bottom: 0.5rem;
    }

    .hero-main-desc {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }

    .hero-btn-primary,
    .hero-btn-subtle {
        padding: 0.7rem 1.35rem;
        font-size: 0.88rem;
    }
}

/* Mobiel: Hoogte 300px & RECHT */
@media (max-width: 600px) {
    .site-hero-slanted {
        height: 300px !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    .site-hero-slanted::after {
        background: linear-gradient(90deg, rgba(240, 228, 219, 0.96) 0%, rgba(240, 228, 219, 0.88) 100%);
    }

    .hero-inner-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .hero-kicker {
        font-size: 0.8rem;
        margin-bottom: 0.35rem;
    }

    .hero-main-title {
        font-size: 1.8rem;
        margin-bottom: 0.4rem;
    }

    .hero-main-desc {
        font-size: 0.88rem;
        margin-bottom: 1rem;
    }

    .hero-btn-primary {
        padding: 0.6rem 1.15rem;
        font-size: 0.82rem;
    }

    .hero-btn-subtle {
        display: none;
    }
}

/* ==========================================================
   5. Ruimte TUSSEN alle blokken onderling op alle pagina's
   ========================================================== */

/* A. 2-Koloms Voorpagina Grid Layout (Hoofdcontent + Zijbalk) */
.blog-studio-layout {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 2.5rem !important;
    align-items: start !important;
    width: 100% !important;
}

.blog-content-area {
    min-width: 0 !important;
    width: 100% !important;
}

.posts-grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.75rem !important;
    margin-bottom: 2.5rem !important;
}

@media (max-width: 900px) {
    .blog-studio-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .posts-grid-2col {
        grid-template-columns: 1fr !important;
    }
}

/* B. Header- en introductieboxen (Thema's, Bundels, Zoeken, Archieven, Auteurs) */
.themas-hero-section,
.studio-blog-header,
.vv-landing-header,
.builder-header {
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important; /* Ruime ademruimte onder introductieboxen */
}

/* C. Dichtstudio pagina (Tussen alle stappen en formulieren) */
.vv-mode-tabs-container {
    margin-bottom: 2rem !important;
}

.ai-assistant-card {
    margin-bottom: 2.25rem !important;
}

.input-card {
    margin-bottom: 1.75rem !important;
}

.stanza-card {
    margin-bottom: 1.75rem !important;
}

.builder-layout {
    gap: 2rem !important;
}

/* D. Single Gedichten & Artikelen pagina's */
.single-poem-card {
    margin-bottom: 2rem !important;
}

.single-poem-card .book-preview-card {
    margin-bottom: 2.25rem !important;
}

.single-poem-card .poem-rating-box,
.poem-rating-box {
    margin-top: 2.5rem !important; /* Duidelijke ademruimte boven 'Waardeer dit gedicht' */
    margin-bottom: 2rem !important;
}

.single-poem-card .poem-actions-bar {
    margin-top: 2rem !important;
    margin-bottom: 2.5rem !important;
}

.related-poems-section {
    margin-top: 3.5rem !important;
    margin-bottom: 3rem !important;
}

/* E. CTA banners & Tussensecties (Homepage, Thema's & Bundels) */
.post-grid-cta-banner {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
}

.post-bottom-studio-cta {
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
}

/* F. Zijbalk widgets */
.sidebar-widget-card {
    margin-bottom: 2rem !important;
}

.sidebar-widget-card:last-child {
    margin-bottom: 0 !important;
}

/* G. Contactpagina & Registratie */
.vv-contact-header {
    margin-bottom: 3rem !important;
}

.vv-contact-grid {
    gap: 2.5rem !important;
}

/* H. Gelijkmatige breedte van elementen op thema- en studiopagina's */
.themas-hero-section,
.builder-wrapper,
.vv-landing-header,
.vv-landing-builder-container,
.taxonomy-gedicht_thema .site-main,
.page-template-page-thema-builder .site-main,
.page-template-page-gedichten-builder3 .site-main {
    max-width: 1280px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
}

.themas-hero-section > div,
.builder-header,
.studio-engine-card,
.builder-tabs-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* I. Verbeterd ontwerp van de pop-ups / modals */
.vv-modal-backdrop,
.vers-modal-backdrop,
#vvAdultGate {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.vv-modal-content,
.vers-modal-content {
    background: #FFFFFF !important;
    border: 1px solid #dde3e7 !important;
    border-radius: 20px !important;
    max-width: 520px !important;
    width: 100% !important;
    padding: 2.75rem 2.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    position: relative;
    text-align: center;
}

.modal-close,
.vers-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #64748B;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close:hover,
.vers-modal-close:hover {
    background: #dde3e7;
    color: #1E293B;
}

.vv-modal-content h2,
.vv-modal-content h3 {
    font-family: var(--vv-font-serif, 'Outfit', Arial, sans-serif) !important;
    font-size: 2.2rem !important;
    color: #1A202C !important;
    margin: 1rem 0 0.5rem 0 !important;
    font-weight: 700;
}

.vv-modal-content p {
    color: #4A5568 !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    margin-bottom: 2rem !important;
}

.vv-modal-content .btn-primary,
.vv-modal-content .btn-modal-green {
    background: linear-gradient(135deg, #2E8540 0%, #236C33 100%) !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 12px rgba(46, 133, 64, 0.25);
    border: none;
}

.vv-modal-content .btn-modal-orange {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%) !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border: none;
}
/* ==========================================================
   Versie 3.2: Volledig aansluitende single kaart thumbnail
   & Herstelde tussenruimtes tussen alle kaarten in de studio
   ========================================================== */

/* 1. Single gedichtenkaart: Afbeelding sluit strak aan over de volledige kaart */
.single-poem-card.single-post-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
}

.single-poem-card .post-card-thumb.single-card-thumb {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #f1f2f4 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-poem-card .single-card-thumb .post-card-category {
    position: absolute;
    top: 18px;
    left: 20px;
    background: #FFFFFF !important;
    color: #84916F !important;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    z-index: 2;
}

.single-poem-card .single-card-thumb .post-card-placeholder i {
    font-size: 3.5rem;
    color: #94A3B8 !important;
    opacity: 0.85;
}

.single-poem-card .single-post-header {
    padding: 2.25rem 2.5rem 1rem 2.5rem !important;
}

.single-poem-card .book-preview-card,
.single-poem-card .poem-rating-box,
.single-poem-card .poem-actions-bar {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
}

@media (max-width: 768px) {
    .single-poem-card .post-card-thumb.single-card-thumb {
        height: 180px !important;
    }

    .single-poem-card .single-post-header {
        padding: 1.5rem 1.25rem 0.75rem 1.25rem !important;
    }

    .single-poem-card .book-preview-card,
    .single-poem-card .poem-rating-box,
    .single-poem-card .poem-actions-bar {
        margin-left: 1.25rem !important;
        margin-right: 1.25rem !important;
    }
}

/* 2. Dichtstudio kaarten expliciete tussenruimte */
.input-card {
    margin-bottom: 1.5rem !important;
}

.stanza-card {
    margin-bottom: 1.5rem !important;
}

.ai-assistant-card {
    margin-bottom: 2rem !important;
}

.vv-mode-tabs-container {
    margin-bottom: 2rem !important;
}
/* ==========================================================
   Versie 3.3: Universele & Onveranderlijke 50px Tussenruimte
   Onder het Menu op Alle Schermformaten (Subpagina's)
   & Naadloze Hero op Voorpagina
   ========================================================== */

/* 1. Website Achtergrondkleur */
body {
    background-color: #f1f2f4 !important;
    color: #2D3748 !important;
    overflow-x: hidden;
}

:root {
    --vv-color-bg: #f1f2f4;
}

/* 2. Universele 50px padding-top op .site-content voor alle subpagina's (desktop, tablet en mobiel) */
.site-content {
    flex: 1;
    padding-top: 50px !important;
    padding-bottom: 4rem !important;
    width: 100%;
}

/* Voorpagina / Homepage: Hero sluit direct en naadloos aan op het menu (0px ruimte) */
.site-content:has(.site-hero-slanted),
body.home .site-content,
body.front-page .site-content {
    padding-top: 0 !important;
}

/* Exact 50px extra ruimte direct onder de hero op de voorpagina */
.site-hero-slanted + .site-main,
body.home .site-hero-slanted + .site-main,
body.front-page .site-hero-slanted + .site-main {
    margin-top: 50px !important;
}

/* Neutraliseer dubbele marges op het eerste element binnen subpagina's */
.site-content > .container-studio:first-child,
.site-content > .site-main:first-child,
.site-content > .builder-wrapper:first-child,
.site-content > .vv-theme-landing-page:first-child,
.site-content > .themas-hero-section:first-child,
.site-content > .single-page-container:first-child,
.site-content > article:first-child,
.site-content > section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.builder-wrapper,
.themas-hero-section,
.vv-theme-landing-page {
    margin-top: 0 !important;
}

/* 3. Rechte Hero Header over de volledige breedte */
.site-hero-slanted {
    position: relative;
    width: 100%;
    height: 500px; /* Desktop */
    display: flex;
    align-items: center;
    background-color: #f1f2f4;
    margin-top: 0 !important;
    overflow: hidden;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.site-hero-slanted .hero-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 1;
}

.site-hero-slanted::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(240, 228, 219, 0.78) 0%, rgba(240, 228, 219, 0.40) 40%, rgba(240, 228, 219, 0) 75%);
    z-index: 2;
    pointer-events: none;
}

.hero-inner-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.hero-typography-block {
    max-width: 600px;
    text-align: left;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-family: var(--vv-font-sans, sans-serif);
    color: #526572;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.hero-kicker::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1.5px;
    background: #526572;
}

.hero-main-title {
    font-family: var(--vv-font-serif, 'Outfit', Arial, sans-serif);
    font-size: 3.2rem;
    line-height: 1.15;
    color: #1A202C;
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.hero-main-desc {
    font-family: var(--vv-font-sans, sans-serif);
    font-size: 1.1rem;
    line-height: 1.65;
    color: #4A5568;
    margin: 0 0 1.75rem 0;
}

.hero-action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-btn-primary {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(253, 103, 33, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(253, 103, 33, 0.35);
}

.hero-btn-subtle {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #dde3e7;
    color: #2D3748 !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hero-btn-subtle:hover {
    background: #FFFFFF;
    border-color: #CBD5E0;
}

/* Tablet & Mobiel hoogtes */
@media (max-width: 992px) {
    .site-hero-slanted {
        height: 350px !important;
    }
}

@media (max-width: 600px) {
    .site-hero-slanted {
        height: 300px !important;
    }
}

/* 4. Volledig aansluitende single kaart thumbnail */
.single-poem-card.single-post-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
}

.single-poem-card .post-card-thumb.single-card-thumb {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #f1f2f4 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-poem-card .single-card-thumb .post-card-category {
    position: absolute;
    top: 18px;
    left: 20px;
    background: #FFFFFF !important;
    color: #84916F !important;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    z-index: 2;
}

.single-poem-card .single-card-thumb .post-card-placeholder i {
    font-size: 3.5rem;
    color: #94A3B8 !important;
    opacity: 0.85;
}

.single-poem-card .single-post-header {
    padding: 2.25rem 2.5rem 1rem 2.5rem !important;
}

.single-poem-card .book-preview-card,
.single-poem-card .poem-rating-box,
.single-poem-card .poem-actions-bar {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
}

/* 5. Tussenruimtes tussen alle blokken in studio en op pagina's */
.input-card {
    margin-bottom: 1.5rem !important;
}

.stanza-card {
    margin-bottom: 1.5rem !important;
}

.ai-assistant-card {
    margin-bottom: 2rem !important;
}

.vv-mode-tabs-container {
    margin-bottom: 2rem !important;
}

.single-poem-card .poem-rating-box,
.poem-rating-box {
    margin-top: 2.25rem !important;
    margin-bottom: 2rem !important;
}
/* ==========================================================
   Versie 3.5: Absolute 50px Tussenruimte Onder Menu (Subpagina's)
   & Naadloze Kaart Thumbnails
   ========================================================== */
body {
    background-color: #f1f2f4 !important;
    color: #2D3748 !important;
    overflow-x: hidden;
}

:root {
    --vv-color-bg: #f1f2f4;
}

.site-content {
    flex: 1;
    padding: 50px 0 4rem 0 !important;
    width: 100%;
}

.site-content:has(.site-hero-slanted),
body.home .site-content,
body.front-page .site-content {
    padding: 0 0 4rem 0 !important;
}

.site-hero-slanted + .site-main,
body.home .site-hero-slanted + .site-main,
body.front-page .site-hero-slanted + .site-main {
    margin-top: 50px !important;
}

.site-content > .container-studio:first-child,
.site-content > .site-main:first-child,
.site-content > .builder-wrapper:first-child,
.site-content > .vv-theme-landing-page:first-child,
.site-content > .themas-hero-section:first-child,
.site-content > .single-page-container:first-child,
.site-content > article:first-child,
.site-content > section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.builder-wrapper,
.themas-hero-section,
.vv-theme-landing-page {
    margin-top: 0 !important;
}

.single-poem-card.single-post-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
}

.single-poem-card .post-card-thumb.single-card-thumb {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #f1f2f4 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-poem-card .single-card-thumb .post-card-category {
    position: absolute;
    top: 18px;
    left: 20px;
    background: #FFFFFF !important;
    color: #84916F !important;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    z-index: 2;
}

.single-poem-card .single-card-thumb .post-card-placeholder i {
    font-size: 3.5rem;
    color: #94A3B8 !important;
    opacity: 0.85;
}

.single-poem-card .single-post-header {
    padding: 2.25rem 2.5rem 1rem 2.5rem !important;
}

.single-poem-card .book-preview-card,
.single-poem-card .poem-rating-box,
.single-poem-card .poem-actions-bar {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
}

.input-card {
    margin-bottom: 1.5rem !important;
}

.stanza-card {
    margin-bottom: 1.5rem !important;
}

.ai-assistant-card {
    margin-bottom: 2rem !important;
}

.vv-mode-tabs-container {
    margin-bottom: 2rem !important;
}

/* ==========================================================
   Versie 3.8: Directe 50px Bovenmarge op Alle Subpagina's & Plugin Pagina's
   ========================================================== */

body {
    background-color: #f1f2f4 !important;
    color: #2D3748 !important;
    overflow-x: hidden;
}

:root {
    --vv-color-bg: #f1f2f4;
}

/* 1. Standaard .site-content zonder padding, zodat subpagina's via margin-top worden geregeld */
.site-content {
    flex: 1;
    padding: 0 0 4rem 0 !important;
    width: 100%;
}

/* 2. Alle subpagina's & plugin pagina's (Bekende Dichters, Dichtbundels, Thema's, Profiel, etc.) krijgen exact 50px bovenmarge */
.site-main.container-studio,
.single-page-container,
.builder-wrapper,
.vv-theme-landing-page,
.site-content > .site-main,
.site-content > article,
.site-content > section {
    margin-top: 50px !important;
}

/* 3. Voorpagina / Homepage: Hero sluit direct en naadloos aan op het menu (0px ruimte) */
body.home .site-content,
body.front-page .site-content,
.site-content:has(.site-hero-slanted) {
    padding: 0 !important;
}

body.home .site-main.container-studio:first-child,
body.front-page .site-main.container-studio:first-child,
.site-hero-slanted {
    margin-top: 0 !important;
}

/* Exact 50px ruimte direct onder de hero op de voorpagina */
.site-hero-slanted + .site-main,
body.home .site-hero-slanted + .site-main,
body.front-page .site-hero-slanted + .site-main {
    margin-top: 50px !important;
}

/* 4. Rechte Hero Header over de volledige breedte */
.site-hero-slanted {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    background-color: #f1f2f4;
    overflow: hidden;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.site-hero-slanted .hero-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 1;
}

.site-hero-slanted::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(240, 228, 219, 0.78) 0%, rgba(240, 228, 219, 0.40) 40%, rgba(240, 228, 219, 0) 75%);
    z-index: 2;
    pointer-events: none;
}

.hero-inner-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.hero-typography-block {
    max-width: 600px;
    text-align: left;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-family: var(--vv-font-sans, sans-serif);
    color: #526572;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.hero-kicker::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1.5px;
    background: #526572;
}

.hero-main-title {
    font-family: var(--vv-font-serif, 'Outfit', Arial, sans-serif);
    font-size: 3.2rem;
    line-height: 1.15;
    color: #1A202C;
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.hero-main-desc {
    font-family: var(--vv-font-sans, sans-serif);
    font-size: 1.1rem;
    line-height: 1.65;
    color: #4A5568;
    margin: 0 0 1.75rem 0;
}

.hero-action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-btn-primary {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(253, 103, 33, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(253, 103, 33, 0.35);
}

.hero-btn-subtle {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #dde3e7;
    color: #2D3748 !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hero-btn-subtle:hover {
    background: #FFFFFF;
    border-color: #CBD5E0;
}

@media (max-width: 992px) {
    .site-hero-slanted { height: 350px !important; }
}

@media (max-width: 600px) {
    .site-hero-slanted { height: 300px !important; }
}

/* 5. Volledig aansluitende single kaart thumbnail */
.single-poem-card.single-post-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
}

.single-poem-card .post-card-thumb.single-card-thumb {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #f1f2f4 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-poem-card .single-card-thumb .post-card-category {
    position: absolute;
    top: 18px;
    left: 20px;
    background: #FFFFFF !important;
    color: #84916F !important;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    z-index: 2;
}

.single-poem-card .single-card-thumb .post-card-placeholder i {
    font-size: 3.5rem;
    color: #94A3B8 !important;
    opacity: 0.85;
}

.single-poem-card .single-post-header {
    padding: 2.25rem 2.5rem 1rem 2.5rem !important;
}

.single-poem-card .book-preview-card,
.single-poem-card .poem-rating-box,
.single-poem-card .poem-actions-bar {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
}

/* 6. Tussenruimtes tussen alle blokken in studio en op pagina's */
.input-card {
    margin-bottom: 1.5rem !important;
}

.stanza-card {
    margin-bottom: 1.5rem !important;
}

.ai-assistant-card {
    margin-bottom: 2rem !important;
}

.vv-mode-tabs-container {
    margin-bottom: 2rem !important;
}

.single-poem-card .poem-rating-box,
.poem-rating-box {
    margin-top: 2.25rem !important;
    margin-bottom: 2rem !important;
}
/* ==========================================================
   Versie 3.9: Onfeilbare 50px Tussenruimte via Eerste Kind Element
   ========================================================== */

body {
    background-color: #f1f2f4 !important;
    color: #2D3748 !important;
    overflow-x: hidden;
}

:root {
    --vv-color-bg: #f1f2f4;
}

/* 1. Standaard .site-content zonder padding op subpagina's */
.site-content {
    flex: 1;
    padding: 0 0 4rem 0 !important;
    width: 100%;
}

/* 2. Dwing exact 50px af op het allerEERSTE element dat in .site-content verschijnt op alle subpagina's */
body:not(.home):not(.front-page) .site-content > *:first-child {
    margin-top: 50px !important;
}

/* 3. Voorpagina / Homepage: Hero sluit direct en naadloos aan op het menu (0px ruimte) */
body.home .site-content,
body.front-page .site-content,
.site-content:has(.site-hero-slanted) {
    padding: 0 !important;
}

body.home .site-content > *:first-child,
body.front-page .site-content > *:first-child,
.site-hero-slanted {
    margin-top: 0 !important;
}

/* Exact 50px ruimte direct onder de hero op de voorpagina */
.site-hero-slanted + .site-main,
.site-hero-slanted + div,
body.home .site-hero-slanted + *,
body.front-page .site-hero-slanted + * {
    margin-top: 50px !important;
}

/* 4. Rechte Hero Header over de volledige breedte */
.site-hero-slanted {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    background-color: #f1f2f4;
    overflow: hidden;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.site-hero-slanted .hero-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 1;
}

.site-hero-slanted::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(240, 228, 219, 0.78) 0%, rgba(240, 228, 219, 0.40) 40%, rgba(240, 228, 219, 0) 75%);
    z-index: 2;
    pointer-events: none;
}

.hero-inner-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.hero-typography-block {
    max-width: 600px;
    text-align: left;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-family: var(--vv-font-sans, sans-serif);
    color: #526572;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.hero-kicker::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1.5px;
    background: #526572;
}

.hero-main-title {
    font-family: var(--vv-font-serif, 'Outfit', Arial, sans-serif);
    font-size: 3.2rem;
    line-height: 1.15;
    color: #1A202C;
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.hero-main-desc {
    font-family: var(--vv-font-sans, sans-serif);
    font-size: 1.1rem;
    line-height: 1.65;
    color: #4A5568;
    margin: 0 0 1.75rem 0;
}

.hero-action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-btn-primary {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(253, 103, 33, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(253, 103, 33, 0.35);
}

.hero-btn-subtle {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #dde3e7;
    color: #2D3748 !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hero-btn-subtle:hover {
    background: #FFFFFF;
    border-color: #CBD5E0;
}

@media (max-width: 992px) {
    .site-hero-slanted { height: 350px !important; }
}

@media (max-width: 600px) {
    .site-hero-slanted { height: 300px !important; }
}

/* 5. Volledig aansluitende single kaart thumbnail */
.single-poem-card.single-post-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
}

.single-poem-card .post-card-thumb.single-card-thumb {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #f1f2f4 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-poem-card .single-card-thumb .post-card-category {
    position: absolute;
    top: 18px;
    left: 20px;
    background: #FFFFFF !important;
    color: #84916F !important;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    z-index: 2;
}

.single-poem-card .single-card-thumb .post-card-placeholder i {
    font-size: 3.5rem;
    color: #94A3B8 !important;
    opacity: 0.85;
}

.single-poem-card .single-post-header {
    padding: 2.25rem 2.5rem 1rem 2.5rem !important;
}

.single-poem-card .book-preview-card,
.single-poem-card .poem-rating-box,
.single-poem-card .poem-actions-bar {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
}

/* 6. Tussenruimtes tussen alle blokken in studio en op pagina's */
.input-card {
    margin-bottom: 1.5rem !important;
}

.stanza-card {
    margin-bottom: 1.5rem !important;
}

.ai-assistant-card {
    margin-bottom: 2rem !important;
}

.vv-mode-tabs-container {
    margin-bottom: 2rem !important;
}

.single-poem-card .poem-rating-box,
.poem-rating-box {
    margin-top: 2.25rem !important;
    margin-bottom: 2rem !important;
}
/* ==========================================================
   Versie 4.0: Expliciete 50px Bovenmarge op main.site-main.container-studio
   ========================================================== */

body:not(.home):not(.front-page) main.site-main.container-studio {
    margin-top: 50px !important;
}

body.home main.site-main.container-studio,
body.front-page main.site-main.container-studio {
    margin-top: 0 !important;
}

.site-content {
    flex: 1;
    padding: 0 0 4rem 0 !important;
    width: 100%;
}

body.home .site-content,
body.front-page .site-content,
.site-content:has(.site-hero-slanted) {
    padding: 0 !important;
}

.site-hero-slanted + .site-main,
.site-hero-slanted + div,
body.home .site-hero-slanted + *,
body.front-page .site-hero-slanted + * {
    margin-top: 50px !important;
}
/* ==========================================================
   Versie 4.1: Vaste Navigatie & Onwrikbare 50px Ruimte op Subpagina's
   ========================================================== */

body {
    background-color: #f1f2f4 !important;
    color: #2D3748 !important;
    overflow-x: hidden;
}

:root {
    --vv-color-bg: #f1f2f4;
}

/* 1. Navigatie / Header VAST zetten aan de bovenkant */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background: #FFFFFF !important;
    width: 100% !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* 2. Subpagina's & Plugin pagina's: Altijd exact 50px ruimte onder de vaste menubalk */
.site-content {
    flex: 1;
    padding: 50px 0 4rem 0 !important;
    width: 100%;
}

/* 3. Voorpagina / Homepage: Hero sluit direct en naadloos aan onder het menu (0px ruimte) */
body.home .site-content,
body.front-page .site-content,
.site-content:has(.site-hero-slanted) {
    padding: 0 0 4rem 0 !important;
}

body.home .site-hero-slanted,
body.front-page .site-hero-slanted {
    margin-top: 0 !important;
}

/* Exact 50px ruimte direct onder de hero op de voorpagina */
.site-hero-slanted + .site-main,
.site-hero-slanted + div,
body.home .site-hero-slanted + *,
body.front-page .site-hero-slanted + * {
    margin-top: 50px !important;
}

/* 4. Neutraliseer marges op eerste kindelementen binnen subpagina's */
body:not(.home):not(.front-page) .site-content > *:first-child,
body:not(.home):not(.front-page) .site-main:first-child,
body:not(.home):not(.front-page) .container-studio:first-child {
    margin-top: 0 !important;
}

/* 5. Volledig aansluitende single kaart thumbnail */
.single-poem-card.single-post-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
}

.single-poem-card .post-card-thumb.single-card-thumb {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #f1f2f4 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-poem-card .single-card-thumb .post-card-category {
    position: absolute;
    top: 18px;
    left: 20px;
    background: #FFFFFF !important;
    color: #84916F !important;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    z-index: 2;
}

.single-poem-card .single-card-thumb .post-card-placeholder i {
    font-size: 3.5rem;
    color: #94A3B8 !important;
    opacity: 0.85;
}

.single-poem-card .single-post-header {
    padding: 2.25rem 2.5rem 1rem 2.5rem !important;
}

.single-poem-card .book-preview-card,
.single-poem-card .poem-rating-box,
.single-poem-card .poem-actions-bar {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
}

/* 6. Tussenruimtes tussen alle blokken in studio en op pagina's */
.input-card {
    margin-bottom: 1.5rem !important;
}

.stanza-card {
    margin-bottom: 1.5rem !important;
}

.ai-assistant-card {
    margin-bottom: 2rem !important;
}

.vv-mode-tabs-container {
    margin-bottom: 2rem !important;
}

.single-poem-card .poem-rating-box,
.poem-rating-box {
    margin-top: 2.25rem !important;
    margin-bottom: 2rem !important;
}

/* ==========================================================
   Versie 4.3: Schone en solide 35px Tussenruimte op alle subpagina's
   ========================================================== */

body {
    background-color: #f1f2f4 !important;
    color: #2D3748 !important;
    overflow-x: hidden;
}

:root {
    --vv-color-bg: #f1f2f4;
}

/* Navigatie in normale flow */
.site-header {
    position: relative !important;
    top: auto !important;
    z-index: 1000 !important;
    background: #FFFFFF !important;
    width: 100% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

/* 1. Subpagina's & Plugin pagina's: exact 35px ruimte onder het menu */
body:not(.home):not(.front-page) .site-content {
    padding-top: 35px !important;
    padding-bottom: 4rem !important;
    width: 100%;
}

/* 2. Voorpagina / Homepage: Hero sluit direct en naadloos aan op het menu (0px ruimte) */
body.home .site-content,
body.front-page .site-content,
.site-content:has(.site-hero-slanted) {
    padding-top: 0 !important;
}

body.home .site-hero-slanted,
body.front-page .site-hero-slanted {
    margin-top: 0 !important;
}

.site-hero-slanted + .site-main,
.site-hero-slanted + div,
body.home .site-hero-slanted + *,
body.front-page .site-hero-slanted + * {
    margin-top: 35px !important;
}

/* 3. Volledig aansluitende single kaart thumbnail */
.single-poem-card.single-post-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
}

.single-poem-card .post-card-thumb.single-card-thumb {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #f1f2f4 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-poem-card .single-card-thumb .post-card-category {
    position: absolute;
    top: 18px;
    left: 20px;
    background: #FFFFFF !important;
    color: #84916F !important;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    z-index: 2;
}

.single-poem-card .single-card-thumb .post-card-placeholder i {
    font-size: 3.5rem;
    color: #94A3B8 !important;
    opacity: 0.85;
}

.single-poem-card .single-post-header {
    padding: 2.25rem 2.5rem 1rem 2.5rem !important;
}

.single-poem-card .book-preview-card,
.single-poem-card .poem-rating-box,
.single-poem-card .poem-actions-bar {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
}

/* 4. Tussenruimtes tussen alle blokken in studio en op pagina's */
.input-card {
    margin-bottom: 1.5rem !important;
}

.stanza-card {
    margin-bottom: 1.5rem !important;
}

.ai-assistant-card {
    margin-bottom: 2rem !important;
}

.vv-mode-tabs-container {
    margin-bottom: 2rem !important;
}

.single-poem-card .poem-rating-box,
.poem-rating-box {
    margin-top: 2.25rem !important;
    margin-bottom: 2rem !important;
}

/* ==========================================================
   Versie 12.0: Exacte V4.7 stijl + feilloze 35px subpagina spacing
   ========================================================== */


body.home .site-content, body.front-page .site-content {
    padding-top: 0 !important;
}
body.home main.site-main, body.front-page main.site-main {
    margin-top: 0 !important;
}

/* ==========================================================
   Versie 14.0: Definitieve harmonisatie (inclusief Rijmwoordenboek) & 35px Spacing
   ========================================================== */

/* 1. Altijd exact 35px ruimte onder de header op alle subpagina's */




/* 2. Voorpagina / Homepage: Naadloze aansluiting */
body.home .site-content,
body.front-page .site-content {
    padding-top: 0 !important;
}

body.home main.site-main,
body.front-page main.site-main {
    margin-top: 0 !important;
}

/* 3. Rijmwoordenboek stijlen gelijkgetrokken met de rest */
.page-template-page-rijmwoordenboek .site-main,
.page-template-page-rijmwoordenboek .container-studio {
    margin-top: 35px !important;
}

/* ==========================================================
   Vers & Vorm Builder Plugin - Exacte 35px site-content rule (v15.0)
   ========================================================== */


body:not(.home):not(.front-page) .builder-wrapper,
body:not(.home):not(.front-page) .container-studio,
body:not(.home):not(.front-page) .studio-blog-header,
body:not(.home):not(.front-page) .themas-hero-section {
    margin-top: 35px !important;
}

/* ==========================================================
   Versie 16.0: Absolute Universele 35px Spacing op alle pagina's,
   templates, plugin generatoren, rijmwoordenboek & gedichten studio
   ========================================================== */

/* 1. Wereldwijde subpagina site-content padding */


/* 2. Alle hoofdcontainers, main-tags, studio- en generatorkaders */


/* 3. Voorpagina / Homepage uitzondering (naadloze hero aansluiting) */
body.home .site-content,
body.front-page .site-content {
    padding-top: 0 !important;
}

body.home main.site-main,
body.front-page main.site-main,
body.home .container-studio:first-child,
body.front-page .container-studio:first-child,
body.home .site-hero-slanted,
body.front-page .site-hero-slanted {
    margin-top: 0 !important;
}

/* ==========================================================
   Versie 17.0: De Absolute & Onwrikbare 35px Standaardisatie
   Voor álle pagina's, templates, berichten, archieven, studio en plugin items.
   ========================================================== */

/* 1. Reset en forceer exact 35px bovenruimte voor alle niet-homepage content */
body:not(.home):not(.front-page) .site-content {
    padding-top: 35px !important;
    margin-top: 0 !important;
}



/* Neutraliseer de margin-top op het allerEERSTE element zodat het totaal exact 35px blijft vanaf het menu */
body:not(.home):not(.front-page) .site-content > *:first-child,
body:not(.home):not(.front-page) main.site-main > *:first-child,
body:not(.home):not(.front-page) .container-studio > *:first-child {
    margin-top: 0 !important;
}

/* 2. Homepage / Voorpagina: Naadloze aansluiting (0px) */
body.home .site-content,
body.front-page .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.home main.site-main,
body.front-page main.site-main,
body.home .container-studio:first-child,
body.front-page .container-studio:first-child,
body.home .site-hero-slanted,
body.front-page .site-hero-slanted {
    margin-top: 0 !important;
}

/* ==========================================================
   Versie 18.0: Responsieve Modernisering, Hero Overlay Banner
   en Tekst-adaptieve Mobiele Hero
   ========================================================== */

/* 1. Single Pagina Hero Banner met Overlay */
.single-hero-banner {
    position: relative;
    width: 100%;
    min-height: 380px;
    border-radius: var(--vv-card-radius, 16px);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    margin-bottom: 2rem;
    box-shadow: var(--vv-card-shadow, 0 8px 30px rgba(0,0,0,0.06));
}

.single-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.55) 45%, rgba(15, 23, 42, 0.92) 100%);
    z-index: 1;
}

.single-hero-content {
    position: relative;
    z-index: 2;
    padding: clamp(1.5rem, 4vw, 3rem);
    width: 100%;
    color: #FFFFFF;
}

.single-hero-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #1A202C !important;
    padding: 0.35rem 0.95rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.single-hero-category-badge a {
    color: #1A202C !important;
    text-decoration: none;
}

.single-hero-title {
    font-family: var(--vv-font-serif, 'Outfit', Arial, sans-serif) !important;
    font-size: clamp(2rem, 5vw, 3.2rem) !important;
    line-height: 1.18 !important;
    color: #FFFFFF !important;
    margin: 0 0 1rem 0 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.single-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
    align-items: center;
}

.single-hero-meta span, .single-hero-meta a {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 2. Tekst-adaptieve Voorpagina Hero op Mobiel */
@media screen and (max-width: 768px) {
    .site-hero-slanted {
        height: auto !important;
        min-height: auto !important;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), 0 100%) !important;
    }
    
    .site-hero-slanted .hero-inner-container {
        padding-top: clamp(2.5rem, 8vw, 4.5rem) !important;
        padding-bottom: clamp(3.5rem, 10vw, 5.5rem) !important;
    }
    
    .hero-typography-block {
        max-width: 100% !important;
    }
    
    .hero-main-title {
        font-size: clamp(2.1rem, 7vw, 2.75rem) !important;
        line-height: 1.2 !important;
    }
    
    .hero-main-desc {
        font-size: 1.05rem !important;
        line-height: 1.65 !important;
    }

    /* 3. Volledig responsief raster voor alle kaarten */
    .poems-archive-grid,
    .blog-cards-grid,
    .themas-grid,
    .dichtbundels-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* 4. Soepele app-achtige horizontale touch-scrol voor de subnavigatiebalk */
    .studio-subnav-items {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        padding-bottom: 6px !important;
        scrollbar-width: none !important;
    }
    
    .studio-subnav-items::-webkit-scrollbar {
        display: none !important;
    }
    
    .studio-subnav-items a {
        flex-shrink: 0 !important;
    }

    /* Single hero banner op mobiel */
    .single-hero-banner {
        min-height: 270px !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .poems-archive-grid,
    .blog-cards-grid,
    .themas-grid,
    .dichtbundels-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   VERSIE 18.4: VOLLEDIGE AFSTANDS- EN BREEDTEHARMONISATIE
   ========================================================================== */

/* 1. EXACTE EN ONWRIKKELBARE 35PX TUSSENRUIMTE ONDER DE SUBNAVIGATIEBALK */
body:not(.home):not(.front-page) .site-content {
    padding-top: 35px !important;
    padding-bottom: 4rem !important;
    margin-top: 0 !important;
    width: 100% !important;
}

/* Neutraliseer alle stapelende bovenmarges op alle eerste kind-elementen */
body:not(.home):not(.front-page) .site-content > *:first-child,
body:not(.home):not(.front-page) main.site-main,
body:not(.home):not(.front-page) .container-studio,
body:not(.home):not(.front-page) .container-narrow,
body:not(.home):not(.front-page) .single-page-container,
body:not(.home):not(.front-page) .builder-wrapper,
body:not(.home):not(.front-page) .vv-theme-landing-page,
body:not(.home):not(.front-page) .themas-hero-section,
body:not(.home):not(.front-page) .studio-blog-header,
body:not(.home):not(.front-page) .author-studio-hero,
body:not(.home):not(.front-page) .vv-profile-dashboard,
body:not(.home):not(.front-page) .vv-mollie-checkout-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body:not(.home):not(.front-page) .site-main > *:first-child,
body:not(.home):not(.front-page) .container-studio > *:first-child,
body:not(.home):not(.front-page) .blog-studio-layout > *:first-child,
body:not(.home):not(.front-page) .vv-landing-header:first-child {
    margin-top: 0 !important;
}

/* Voorpagina / Homepage sluit naadloos aan op de schuine Hero (0px) */
body.home .site-content,
body.front-page .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.home .site-hero-slanted,
body.front-page .site-hero-slanted {
    margin-top: 0 !important;
}

/* 2. OPHEFFEN VAN DE BREEDTE-VERSPRINGING OP THEMAPAGINA'S (PAGE-THEMA-BUILDER) */
.vv-theme-landing-page {
    max-width: var(--vv-site-max-width, 1280px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--vv-gutter, 1.5rem) !important;
    padding-right: var(--vv-gutter, 1.5rem) !important;
    box-sizing: border-box !important;
}

.vv-landing-header,
.vv-landing-builder-container,
.vv-theme-latest-poems,
.vv-landing-perks {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Cruciaal: hef de dubbele padding en marge op van de builder binnen themalandingspagina's */
.vv-theme-landing-page .vv-landing-builder-container .builder-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.vv-theme-landing-page .vv-landing-builder-container .builder-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vv-theme-landing-page .builder-header {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. STANDAARD KAART-KOP VOOR SINGLE GEDICHTEN */
.single-poem-card .post-card-thumb.single-card-thumb {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    border-top-left-radius: var(--vv-card-radius, 16px) !important;
    border-top-right-radius: var(--vv-card-radius, 16px) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #f1f2f4 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.single-poem-card .single-card-thumb .post-card-placeholder i {
    font-size: 3.5rem !important;
    color: #94A3B8 !important;
    opacity: 0.85 !important;
}

.single-poem-card .single-card-thumb .post-card-category {
    position: absolute !important;
    top: 18px !important;
    left: 20px !important;
    background: #FFFFFF !important;
    color: #84916F !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.4rem 0.95rem !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    text-decoration: none !important;
    z-index: 2 !important;
}

@media (max-width: 768px) {
    .single-poem-card .post-card-thumb.single-card-thumb {
        height: 180px !important;
    }
}

/* ==========================================================================
   VERSIE 18.5: MOBIELE OVERFLOW & BREEDTE FIX (KAARTEN PASSEND OP SCHERM)
   ========================================================================== */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .site-wrapper, .site-content, .container-studio, .container-narrow, .blog-studio-layout, .blog-content-area {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .post-card-poetic, .single-post-card, .book-preview-card, .vv-theme-card, .sidebar-widget-card, .author-studio-hero, .studio-blog-header, .builder-header, .vv-landing-header {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .poems-archive-grid, .blog-cards-grid, .themas-grid, .dichtbundels-grid, .posts-grid-2col {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   UNIVERSELE PAGINA HERO HEADER (ZOALS VOORPAGINA, ZONDER ACHTERGRONDAFBELDING)
   ========================================================================== */
.page-hero-header, .studio-blog-header, .single-post-card .single-post-header {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAF8F5 100%) !important;
    border: 1.5px solid #dde3e7 !important;
    border-radius: 18px !important;
    padding: 3rem 2.5rem !important;
    margin-bottom: 2.5rem !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
}

.page-hero-header h1, .studio-blog-header h1, .single-post-card .single-post-header h1 {
    font-family: 'Outfit', Arial, sans-serif !important;
    font-size: 2.75rem !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 0.5rem 0 0.75rem 0 !important;
    line-height: 1.2 !important;
}

.page-hero-header p, .studio-blog-header p, .single-post-card .single-post-header .single-post-meta {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.1rem !important;
    color: #4A5568 !important;
    max-width: 750px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    .page-hero-header, .studio-blog-header, .single-post-card .single-post-header {
        padding: 2rem 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }
    .page-hero-header h1, .studio-blog-header h1, .single-post-card .single-post-header h1 {
        font-size: 2rem !important;
    }
}

/* ==========================================================================
   VERSIE 18.6: BULLETPROOF 35PX SPACING & CLEAN PAGE HERO HEADERS
   ========================================================================== */

/* 1. Altijd exact 35px ruimte onder de subnavigatiebalk op alle subpagina's */
body:not(.home):not(.front-page) .site-content {
    padding-top: 35px !important;
    padding-bottom: 4rem !important;
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body:not(.home):not(.front-page) .site-content > *:first-child,
body:not(.home):not(.front-page) main.site-main:first-child,
body:not(.home):not(.front-page) .container-studio:first-child,
body:not(.home):not(.front-page) .single-page-container:first-child,
body:not(.home):not(.front-page) .builder-wrapper:first-child,
body:not(.home):not(.front-page) .vv-theme-landing-page:first-child,
body:not(.home):not(.front-page) .studio-blog-header:first-child,
body:not(.home):not(.front-page) .page-hero-header:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Homepage uitzondering (naadloze hero) */
body.home .site-content,
body.front-page .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Schone Page Hero Headers op alle interne pagina's (zonder achtergrondafbeelding) */
.studio-blog-header, .page-hero-header, .single-post-card .single-post-header {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAF8F5 100%) !important;
    border: 1.5px solid #dde3e7 !important;
    border-radius: 18px !important;
    padding: 2.75rem 2.25rem !important;
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.studio-blog-header h1, .page-hero-header h1, .single-post-card .single-post-header h1 {
    font-family: 'Outfit', Arial, sans-serif !important;
    font-size: 2.6rem !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 0.35rem 0 0.65rem 0 !important;
    line-height: 1.2 !important;
}

.studio-blog-header p, .page-hero-header p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.05rem !important;
    color: #4A5568 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* 3. Mobiele breedte fix voor kaarten (geen overflow) */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .site-wrapper, .site-content, .container-studio, .container-narrow, .blog-studio-layout, .blog-content-area {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .post-card-poetic, .single-post-card, .book-preview-card, .vv-theme-card, .sidebar-widget-card, .studio-blog-header, .page-hero-header {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .studio-blog-header, .page-hero-header {
        padding: 1.75rem 1rem !important;
    }
    .studio-blog-header h1, .page-hero-header h1 {
        font-size: 1.9rem !important;
    }
}

/* ==========================================================================
   VERSIE 18.7: UNIVERSELE PAGINA HERO SECTIE (ZOALS VOORPAGINA, ZONDER FOTO)
   ========================================================================== */
.studio-blog-header, 
.page-hero-header, 
.themas-hero-section, 
.vv-landing-header, 
.single-page-container .single-post-header,
.vv-contact-header {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAF8F5 100%) !important;
    border: 1.5px solid #dde3e7 !important;
    border-radius: 20px !important;
    padding: 3.5rem 2.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important;
    text-align: center !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.studio-blog-header h1, 
.page-hero-header h1, 
.themas-hero-section h1, 
.vv-landing-header h1, 
.single-page-container .single-post-header h1,
.vv-contact-header h1 {
    font-family: 'Outfit', Arial, sans-serif !important;
    font-size: 2.85rem !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 0.4rem 0 0.85rem 0 !important;
    line-height: 1.15 !important;
}

.studio-blog-header p, 
.page-hero-header p, 
.themas-hero-section p, 
.vv-landing-header p, 
.vv-landing-lead,
.single-page-container .single-post-header p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.1rem !important;
    color: #4A5568 !important;
    max-width: 750px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
}

@media (max-width: 768px) {
    .studio-blog-header, 
    .page-hero-header, 
    .themas-hero-section, 
    .vv-landing-header, 
    .single-page-container .single-post-header,
    .vv-contact-header {
        padding: 2.25rem 1.25rem !important;
        margin-bottom: 1.75rem !important;
    }
    .studio-blog-header h1, 
    .page-hero-header h1, 
    .themas-hero-section h1, 
    .vv-landing-header h1, 
    .single-page-container .single-post-header h1,
    .vv-contact-header h1 {
        font-size: 2.1rem !important;
    }
}

/* ==========================================================================
   VERSIE 18.8: OPEN HERO SECTIES ZONDER KADER / KAART EROMHEEN
   ========================================================================== */
.studio-blog-header, 
.page-hero-header, 
.themas-hero-section, 
.vv-landing-header, 
.single-page-container .single-post-header,
.vv-contact-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 3rem 1rem 2.5rem 1rem !important;
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important;
    text-align: center !important;
    box-shadow: none !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.studio-blog-header h1, 
.page-hero-header h1, 
.themas-hero-section h1, 
.vv-landing-header h1, 
.single-page-container .single-post-header h1,
.vv-contact-header h1 {
    font-family: 'Outfit', Arial, sans-serif !important;
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 0.5rem 0 0.85rem 0 !important;
    line-height: 1.15 !important;
}

.studio-blog-header p, 
.page-hero-header p, 
.themas-hero-section p, 
.vv-landing-header p, 
.vv-landing-lead,
.single-page-container .single-post-header p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.15rem !important;
    color: #4A5568 !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
}

@media (max-width: 768px) {
    .studio-blog-header, 
    .page-hero-header, 
    .themas-hero-section, 
    .vv-landing-header, 
    .single-page-container .single-post-header,
    .vv-contact-header {
        padding: 2rem 1rem 1.5rem 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    .studio-blog-header h1, 
    .page-hero-header h1, 
    .themas-hero-section h1, 
    .vv-landing-header h1, 
    .single-page-container .single-post-header h1,
    .vv-contact-header h1 {
        font-size: 2.2rem !important;
    }
}

/* ==========================================================================
   VERSIE 18.9: UNIVERSELE BUILDER-HEADER STIJL OP ALLE SUBPAGINA'S
   (Voorpagina ongemoeid, single gedichten/posts uitgesloten)
   ========================================================================== */

body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #FFFFFF !important;
    padding: 2.25rem 2.75rem !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f1f2f4 !important;
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #1A202C !important;
    line-height: 1.2 !important;
}

body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-lead,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header p {
    margin: 0.35rem 0 0 !important;
    color: #526572 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
}

@media screen and (max-width: 768px) {
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 1.5rem 1.25rem !important;
        margin-bottom: 1.5rem !important;
        gap: 0.75rem !important;
        border-radius: 12px !important;
    }
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header h1,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header h1,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section h1,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header h1,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header h1 {
        font-size: 1.75rem !important;
    }
}

/* ==========================================================================
   VERSIE 18.10: ELKE PAGINA HEADER GELIJKSTELD AAN .builder-header
   ========================================================================== */
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .single-page-container .single-post-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #FFFFFF !important;
    padding: 1.75rem 2.25rem !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f1f2f4 !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .single-page-container .single-post-header h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #1A202C !important;
    line-height: 1.2 !important;
}

body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-lead,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .single-page-container .single-post-header p {
    margin: 0.35rem 0 0 !important;
    color: #526572 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
}

@media screen and (max-width: 768px) {
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .single-page-container .single-post-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 1.25rem 1rem !important;
        margin-bottom: 1.5rem !important;
        gap: 0.5rem !important;
    }
}

/* ==========================================================================
   VERSIE 18.11: VOLLEDIGE VISUELE HARMONISATIE & STUDIO POLISH
   ========================================================================== */

/* 1. Uniforme typografische hiërarchie en kaarten */
body {
    background-color: var(--vv-color-bg, #f1f2f4) !important;
    color: var(--vv-color-text, #2D3748) !important;
    font-family: 'Outfit', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* 2. Prachtige visuele inhoudskaarten voor overzichten, formulieren en profielen */
.content-card, .post-card-poetic, .single-post-card, .book-preview-card, .vv-perk-card, .vv-profile-dashboard, .vv-mollie-checkout-wrapper, .vv-contact-container {
    background: #FFFFFF !important;
    border: 1px solid #dde3e7 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    padding: 2.25rem !important;
    margin-bottom: 2rem !important;
    box-sizing: border-box !important;
}

/* 3. Formulieren en knoppen strak en eenduidig */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    width: 100% !important;
    padding: 0.85rem 1.15rem !important;
    background: #FAF8F5 !important;
    border: 1.5px solid #dde3e7 !important;
    border-radius: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem !important;
    color: #2D3748 !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
    border-color: var(--vv-color-primary, #c45d00) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(48, 93, 158, 0.1) !important;
    outline: none !important;
}

/* 4. Primaire actieknoppen in warme studio-stijl */
button, .btn-primary, .hero-btn-primary, .btn-sidebar-cta, .vv-btn-submit-checkout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.85rem 1.75rem !important;
    background: linear-gradient(135deg, #c45d00 0%, #1A365D 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(48, 93, 158, 0.2) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    text-decoration: none !important;
}

button:hover, .btn-primary:hover, .hero-btn-primary:hover, .btn-sidebar-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(48, 93, 158, 0.3) !important;
}

/* 5. Vlekkeloze mobiele responsiviteit */
@media screen and (max-width: 768px) {
    .content-card, .post-card-poetic, .single-post-card, .book-preview-card, .vv-perk-card, .vv-profile-dashboard {
        padding: 1.25rem !important;
        margin-bottom: 1.25rem !important;
        border-radius: 12px !important;
    }
}

/* ==========================================================================
   VERSIE 18.12: VOLLEDIGE THEMA + PLUGIN BUILDER-HEADER HARMONISATIE
   ========================================================================== */
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .single-page-container .single-post-header,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .author-studio-hero,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .builder-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #FFFFFF !important;
    padding: 2.25rem 2.75rem !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f1f2f4 !important;
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .single-page-container .single-post-header h1,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .builder-header h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #1A202C !important;
    line-height: 1.2 !important;
}

body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-lead,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .single-page-container .single-post-header p,
body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .builder-header p {
    margin: 0.35rem 0 0 !important;
    color: #526572 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
}

@media screen and (max-width: 768px) {
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .studio-blog-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .page-hero-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .themas-hero-section,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-landing-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .vv-contact-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .single-page-container .single-post-header,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .author-studio-hero,
    body:not(.home):not(.front-page):not(.single):not(.single-gebruikers_gedicht) .builder-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 1.5rem 1.25rem !important;
        margin-bottom: 1.5rem !important;
        gap: 0.75rem !important;
        border-radius: 12px !important;
    }
}

/* ==========================================================================
   VERSIE 19.0: VOLLEDIG VERNIEUWD A-Z ONTWERP & GEDICHTEN STUDIO REFRESH
   ========================================================================== */

:root {
    --vv-site-max-width: 1280px;
    --vv-gutter: 1.5rem;
    --vv-color-primary: #c45d00;
    --vv-color-accent: #c45d00;
    --vv-color-bg: #f1f2f4;
    --vv-color-text: #2D3748;
}

body {
    background-color: var(--vv-color-bg) !important;
    color: var(--vv-color-text) !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* 1. Header & Menu Styling */
.site-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #dde3e7 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
    position: relative !important;
    z-index: 1000 !important;
}

.header-container {
    max-width: var(--vv-site-max-width);
    margin: 0 auto;
    padding: 1rem var(--vv-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-title a {
    font-family: 'Outfit', Arial, sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: #1A202C;
    text-decoration: none;
}

.primary-navigation ul {
    display: flex;
    list-style: none;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.primary-navigation a {
    color: #4A5568;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.98rem;
    transition: color 0.2s ease;
}

.primary-navigation a:hover {
    color: var(--vv-color-primary);
}

/* 2. Subnavigatie knoppen met icoontjes */
.studio-subnav-bar {
    background: #FAF8F5;
    border-top: 1px solid #f1f2f4;
    border-bottom: 1px solid #f1f2f4;
    padding: 0.65rem 0;
}

.studio-subnav-items {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    max-width: var(--vv-site-max-width);
    margin: 0 auto;
    padding: 0 var(--vv-gutter);
}

.studio-subnav-items a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    background: #FFFFFF;
    border: 1px solid #dde3e7;
    border-radius: 999px;
    color: #2D3748;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

.studio-subnav-items a:hover {
    background: #F7FAFC;
    border-color: var(--vv-color-primary);
    color: var(--vv-color-primary);
}

/* DUIDELIJKE EN OPMERKELIJKE DICHTERSABONNEMENT KNOP */
.subnav-highlight-prominent {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(253, 103, 33, 0.3) !important;
    margin-left: auto !important;
}

.subnav-highlight-prominent:hover {
    background: linear-gradient(135deg, #c45d00 0%, #c45d00 100%) !important;
    color: #FFFFFF !important;
}

/* 3. Pagina Hero Sectie (Boven titel, H1, promotie tekst, knoppen max 3) */
.page-hero-section, .studio-blog-header, .themas-hero-section, .vv-landing-header, .single-post-card .single-post-header {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2.5rem 0 1.5rem 0 !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    box-shadow: none !important;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero-kicker {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vv-color-primary);
    background: rgba(48, 93, 158, 0.08);
    padding: 0.35rem 1rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.page-hero-section h1, .studio-blog-header h1, .themas-hero-section h1, .vv-landing-header h1, .single-post-card .single-post-header h1 {
    font-family: 'Outfit', Arial, sans-serif !important;
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 0 0 0.85rem 0 !important;
    line-height: 1.15 !important;
}

.page-hero-section p, .studio-blog-header p, .themas-hero-section p, .vv-landing-header p, .vv-landing-lead {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.12rem !important;
    color: #4A5568 !important;
    max-width: 720px !important;
    margin: 0 auto 1.5rem auto !important;
    line-height: 1.65 !important;
}

.hero-buttons-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hero-btn-primary {
    background: var(--vv-color-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(48,93,158,0.25);
}

.hero-btn-primary:hover {
    background: #25497B;
    color: #FFFFFF;
}

.hero-btn-secondary {
    background: #FFFFFF;
    color: #2D3748;
    border: 1px solid #CBD5E0;
}

.hero-btn-secondary:hover {
    background: #F7FAFC;
    border-color: var(--vv-color-primary);
    color: var(--vv-color-primary);
}

/* 4. Ruimte 35px vaste container */
.site-content {
    max-width: var(--vv-site-max-width);
    margin: 0 auto;
    padding: 0 var(--vv-gutter) 4rem var(--vv-gutter);
    width: 100%;
    box-sizing: border-box;
}

/* 5. Gedichten Studio Vernieuwd Ontwerp (Strak, Moderne Tabs & Velden) */
.builder-wrapper {
    background: #FFFFFF;
    border: 1.5px solid #dde3e7;
    border-radius: 20px;
    padding: 2.75rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.04);
    margin-bottom: 3rem;
}

.builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f1f2f4;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.builder-header h1 {
    font-family: 'Outfit', Arial, sans-serif;
    font-size: 2.5rem;
    color: #1A202C;
    margin: 0;
}

.vv-mode-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 2rem;
}

.vv-mode-tab-btn {
    flex: 1;
    padding: 1.15rem 1.5rem;
    background: #FAF8F5;
    border: 2px solid #dde3e7;
    border-radius: 14px;
    font-weight: 700;
    color: #4A5568;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
}

.vv-mode-tab-btn.active, .vv-mode-tab-btn:hover {
    background: #FFFFFF;
    border-color: var(--vv-color-primary);
    color: var(--vv-color-primary);
    box-shadow: 0 6px 20px rgba(48,93,158,0.08);
}

/* 6. 100% Responsief & 10px van randen op mobiel (GEEN OMKADERING BIJ MOBIEL) */
@media screen and (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .site-wrapper, .site-content, .header-container, .studio-subnav-items {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Geen omkadering of dikke box-shadows op mobiel om ruimte te besparen */
    .content-card, .post-card-poetic, .single-post-card, .book-preview-card, .builder-wrapper, .page-hero-section {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .page-hero-section h1 {
        font-size: 2.1rem !important;
    }
    
    .primary-navigation {
        display: none; /* Mobiel menu via toggle */
    }
}

/* ==========================================================================
   VERSIE 19.2: ULTIEME ALGEMENE HARMONISATIE (THEMA & PLUGIN COMPLEET)
   ========================================================================== */

/* 1. Voorpagina Hero: gelijke content-breedte (.container-studio), 20px radius, links uitgelijnd, 2 lichte knoppen */
.container-studio .site-hero-slanted {
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    min-height: 420px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #FAF8F5 !important;
    border: 1.5px solid #dde3e7 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    margin-top: 35px !important;
    margin-bottom: 3rem !important;
    clip-path: none !important;
}

.site-hero-slanted .hero-inner-container {
    text-align: left !important;
    padding: 3rem 3.5rem !important;
    width: 100% !important;
}

.site-hero-slanted .hero-typography-block {
    max-width: 750px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

.site-hero-slanted .hero-main-title {
    text-align: left !important;
}

.site-hero-slanted .hero-main-desc {
    text-align: left !important;
}

.site-hero-slanted .hero-action-buttons {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

.hero-btn-light-twin {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    background: #FFFFFF !important;
    color: #2D3748 !important;
    border: 1px solid #CBD5E0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    transition: all 0.2s ease !important;
}

.hero-btn-light-twin:hover {
    background: #F7FAFC !important;
    border-color: var(--vv-color-primary, #c45d00) !important;
    color: var(--vv-color-primary, #c45d00) !important;
}

/* 2. Achtergrond afbeelding bovenaan de kaarten over de volledige breedte (gedichten & blogs) */
.post-card-thumb, .post-card-poetic .post-card-thumb, .blog-card .post-card-thumb {
    width: 100% !important;
    height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: #f1f2f4 !important;
}

.post-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 3. Rijmwoordenboek, Bekende Dichters & Thema's Dichtstudio Headers Vernieuwd */
.themas-hero-section, .studio-blog-header, .page-hero-header {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%) !important;
    border: 1.5px solid #dde3e7 !important;
    border-radius: 20px !important;
    padding: 3.5rem 2.5rem !important;
    margin-bottom: 2.5rem !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.03) !important;
    position: relative !important;
}

/* 4. Mobiele geoptimaliseerde weergave: 10px van randen, geen omkadering */
@media screen and (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .site-wrapper, .site-content, .header-container, .studio-subnav-items, .container-studio {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .content-card, .post-card-poetic, .single-post-card, .book-preview-card, .builder-wrapper, .page-hero-section, .themas-hero-section, .studio-blog-header {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   VERSIE 19.3: VOLLEDIG VERNIEUWD A-Z ONTWERP & GEDICHTEN STUDIO REFRESH
   ========================================================================== */

/* 1. Algemene Huisstijl & Warme Lichte Knoppen (GEEN DONKERE KLEUREN) */
:root {
    --vv-site-max-width: 1280px;
    --vv-gutter: 1.5rem;
    --vv-color-primary: #c45d00;
    --vv-color-accent: #c45d00;
    --vv-color-bg: #f1f2f4;
    --vv-color-text: #2D3748;
}

body {
    background-color: var(--vv-color-bg) !important;
    color: var(--vv-color-text) !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Warm en lichte knoppen overal op de website */
.vv-btn-warm-light, button.btn-primary, .hero-btn-primary, .btn-sidebar-cta, .vv-btn-submit-checkout, .post-card-readmore, .btn-header-auth, .hero-action-buttons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0.75rem 1.6rem !important;
    background: #FFFFFF !important;
    color: #2D3748 !important;
    border: 1.5px solid #dde3e7 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 14px rgba(253, 103, 33, 0.08) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.vv-btn-warm-light:hover, button.btn-primary:hover, .hero-btn-primary:hover, .btn-sidebar-cta:hover, .vv-btn-submit-checkout:hover, .hero-action-buttons a:hover {
    background: #FFFDF9 !important;
    border-color: #c45d00 !important;
    color: #c45d00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(253, 103, 33, 0.16) !important;
}

/* 2. Gedichten Generator Eilandenstructuur (Achtergrond zichtbaar tussen blokken) */
.builder-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto 3rem auto !important;
    max-width: var(--vv-site-max-width) !important;
}

.builder-header, 
.vv-mode-tabs-container, 
.builder-grid, 
.vv-result-actions-card {
    background: #FFFFFF !important;
    border: 1.5px solid #f1f2f4 !important;
    border-radius: 20px !important;
    padding: 2.25rem !important;
    margin-bottom: 25px !important; /* Achtergrond canvas zichtbaar tussen de blokken! */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
}

.builder-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.vv-mode-tabs {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.vv-mode-tab-btn {
    flex: 1 !important;
    min-width: 200px !important;
    background: #FAF8F5 !important;
    border: 2px solid #f1f2f4 !important;
    border-radius: 14px !important;
    padding: 1.15rem 1.4rem !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.vv-mode-tab-btn.active, .vv-mode-tab-btn:hover {
    background: #FFFFFF !important;
    border-color: #c45d00 !important;
    box-shadow: 0 6px 20px rgba(253, 103, 33, 0.12) !important;
}

/* 3. Volle breedte achtergrondafbeelding bovenaan alle kaarten (gedichten & blogs) */
.post-card-thumb, .post-card-poetic .post-card-thumb, .blog-card .post-card-thumb {
    width: 100% !important;
    height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: #f1f2f4 !important;
}

.post-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 4. Voorpagina Hero met 20px ronde hoeken en gelijke content breedte */
.container-studio .site-hero-slanted {
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    min-height: 420px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #FAF8F5 !important;
    border: 1.5px solid #f1f2f4 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    margin-top: 35px !important;
    margin-bottom: 2.5rem !important;
    clip-path: none !important;
}

/* 5. 100% Responsief & Mobiel Vrij van Kaders (< 768px) */
@media screen and (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .site-wrapper, .site-content, .header-container, .studio-subnav-items, .container-studio {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Geen omkadering van elementen op mobiel (bespaart kostbare ruimte) */
    .content-card, 
    .post-card-poetic, 
    .single-post-card, 
    .book-preview-card, 
    .builder-header, 
    .vv-mode-tabs-container, 
    .builder-grid, 
    .page-hero-section, 
    .themas-hero-section, 
    .author-studio-hero {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .studio-subnav-items {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
        scrollbar-width: none !important;
    }
    .studio-subnav-items::-webkit-scrollbar {
        display: none !important;
    }
    .studio-subnav-items a {
        flex-shrink: 0 !important;
    }
}

/* ==========================================================
   Vers & Vorm v20.5 — layout- en componentcorrecties
   ========================================================== */
:root { --vv-site-max-width: 1280px; --vv-warm-border: #dde3e7; --vv-warm-ink: #011726; --vv-warm-paper: #ffffff; --vv-warm-amber: #c45d00; }
.site-header .container, .site-header .header-inner, .site-header .site-header-inner,
.site-header .header-container, .site-header .primary-header-inner,
body.home .site-main, body.front-page .site-main,
body.home .container-studio, body.front-page .container-studio,
.site-main.container-studio, .container-studio {
    width: 100%;
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
.site-header .container, .site-header .header-inner, .site-header .site-header-inner,
.site-header .header-container, .site-header .primary-header-inner { min-width: 0; }
.page-hero-section, .themas-hero-section, .author-studio-hero,
body.page-template-page-premium-dichters .page-hero-section,
body.page-template-page-themas-overzicht .page-hero-section {
    width: 100% !important; max-width: 1280px !important;
    box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important;
}
.vv-mollie-checkout-wrapper {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; border-radius: 0 !important;
}
.vv-mollie-checkout-wrapper > * { box-sizing: border-box; }
.vv-mollie-checkout-wrapper .vv-checkout-form,
.vv-mollie-checkout-wrapper .vv-checkout-benefits,
.vv-mollie-checkout-wrapper .checkout-form,
.vv-mollie-checkout-wrapper .checkout-benefits,
.vv-mollie-checkout-wrapper .mollie-checkout-form,
.vv-mollie-checkout-wrapper .subscription-benefits {
    background: #fff !important; border: 1px solid #dde3e7 !important;
    border-radius: 18px !important; box-shadow: 0 8px 24px rgba(57,42,28,.05) !important;
}
.author-studio-hero { border-radius: 20px !important; }
.author-studio-hero .vv-btn-warm-light, .sidebar-book-btn, .author-books-showcase a,
.post-bottom-studio-cta .cta-actions a, .post-bottom-studio-cta .cta-actions button,
.site-main .vv-cta-block a, .site-main .interactive-studio-cta a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; box-sizing: border-box; text-align: center;
}
.author-studio-hero h1::before { content: "Ik ben "; }
.author-studio-hero h1 { margin-top: .15rem; }
.author-studio-hero .author-studio-kicker { color: var(--vv-warm-amber); }
.author-books-showcase .sidebar-book-btn, .author-books-showcase a[class*="btn"],
.sidebar-book-btn {
    background: #ffffff !important; color: #011726 !important;
    border: 1px solid #dde3e7 !important; border-radius: 10px !important;
}
.author-books-showcase .sidebar-book-btn:hover, .sidebar-book-btn:hover {
    background: #f1f2f4 !important; border-color: #c45d00 !important; color: #011726 !important;
}
.single-post-card .single-post-header { margin-bottom: 2rem !important; }
.single-post-card .single-post-header::before,
.single-post-card .single-post-header::after { opacity: 0 !important; }
.single-post-card .single-post-header h1,
.single-post-card .single-post-header p,
.single-post-card .single-post-header time,
.single-post-card .single-post-header .entry-meta { color: #011726 !important; text-shadow: none !important; }
.single-post-card .single-post-header { background: #ffffff !important; border-radius: 18px !important; }
.blog-content-area .post-bottom-studio-cta .cta-actions,
.post-bottom-studio-cta .cta-actions, .vv-cta-actions {
    display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 12px;
}
.post-bottom-studio-cta .cta-actions > a, .post-bottom-studio-cta .cta-actions > button,
.vv-cta-actions > a, .vv-cta-actions > button {
    min-width: 220px; min-height: 48px; padding: 12px 22px !important;
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.single .post-thumbnail, .single .entry-header .post-thumbnail { margin-bottom: 2rem; }
@media (max-width: 700px) {
 .site-main.container-studio, .container-studio { padding-left: 16px; padding-right: 16px; }
 .author-studio-hero { padding: 1.5rem !important; }
 .post-bottom-studio-cta .cta-actions > a, .post-bottom-studio-cta .cta-actions > button,
 .vv-cta-actions > a, .vv-cta-actions > button { width: 100%; min-width: 0; }
}

.author-studio-hero h1::before { content: none !important; }
.author-studio-hero .vv-btn-warm-light { background:#ffffff !important; color:#011726 !important; border:1px solid #dde3e7 !important; border-radius:10px !important; }
.author-studio-hero .vv-btn-warm-light:hover { background:#f1f2f4 !important; border-color:#c45d00 !important; }

.single-hero-overlay { display:none !important; opacity:0 !important; background:transparent !important; }
.single-hero-banner { background-color:#ffffff !important; border-radius:18px !important; margin-bottom:2rem !important; }
.single-hero-content h1, .single-hero-content h1 a, .single-hero-content p,
.single-hero-content .entry-meta, .single-hero-content .post-meta {
 color:#FFFFFF !important; text-shadow:0 2px 4px rgba(0,0,0,.4) !important;
}
.single-hero-content { position:relative; z-index:2; }


/* ==========================================================
   Vers & Vorm v20.8 — gerichte voorpagina-layoutfix
   Scope uitsluitend homepage/front-page; geen globale layoutforcering.
   ========================================================== */
body.home,
body.front-page {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}
body.home .site-wrapper,
body.front-page .site-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
}
body.home .site-header,
body.front-page .site-header {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
body.home .header-container,
body.front-page .header-container {
    display: flex;
    width: calc(100% - 32px);
    max-width: 1280px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem 0;
    box-sizing: border-box;
}
body.home .site-content,
body.front-page .site-content {
    display: block;
    flex: 1 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 4rem !important;
    box-sizing: border-box;
}
body.home .site-content > .container-studio:first-child,
body.front-page .site-content > .container-studio:first-child,
body.home main.site-main.container-studio,
body.front-page main.site-main.container-studio {
    display: block;
    width: calc(100% - 32px);
    max-width: 1280px;
    min-width: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
body.home .site-content > .container-studio:first-child,
body.front-page .site-content > .container-studio:first-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.home .site-content > .container-studio:first-child .site-hero-slanted,
body.front-page .site-content > .container-studio:first-child .site-hero-slanted,
body.home .homepage-hero-rounded,
body.front-page .homepage-hero-rounded {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
body.home main.site-main.container-studio,
body.front-page main.site-main.container-studio {
    margin-top: 35px !important;
    padding-left: 0;
    padding-right: 0;
}
body.home .blog-studio-layout,
body.front-page .blog-studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
body.home .blog-content-area,
body.front-page .blog-content-area,
body.home .sidebar-studio,
body.front-page .sidebar-studio {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
body.home .blog-cards-grid,
body.front-page .blog-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
body.home .blog-cards-grid > *,
body.front-page .blog-cards-grid > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 980px) {
    body.home .blog-studio-layout,
    body.front-page .blog-studio-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    body.home .sidebar-studio,
    body.front-page .sidebar-studio { width: 100%; }
}
@media (max-width: 680px) {
    body.home .header-container,
    body.front-page .header-container,
    body.home .site-content > .container-studio:first-child,
    body.front-page .site-content > .container-studio:first-child,
    body.home main.site-main.container-studio,
    body.front-page main.site-main.container-studio {
        width: calc(100% - 24px);
    }
    body.home .header-container,
    body.front-page .header-container {
        flex-wrap: wrap;
        gap: 12px;
    }
    body.home .header-navigation-wrapper,
    body.front-page .header-navigation-wrapper {
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 0;
    }
    body.home .blog-cards-grid,
    body.front-page .blog-cards-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    body.home .hero-inner-container,
    body.front-page .hero-inner-container {
        padding: 2rem 1.25rem !important;
    }
    body.home .hero-main-title,
    body.front-page .hero-main-title {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }
}

/* ==========================================================
   HOMEPAGE LAYOUT v20.9 — poëzie eerst, gedeelde sidebar,
   CTA en twee recente blogartikelen
   ========================================================== */
body.home .site-wrapper,
body.front-page .site-wrapper { width:100%; max-width:none; margin:0 auto; }
body.home .site-header,
body.front-page .site-header { background:#fff !important; box-shadow:0 2px 12px rgba(26,32,44,.06) !important; }
body.home .header-container,
body.front-page .header-container { width:calc(100% - 32px) !important; max-width:1280px !important; margin:0 auto !important; }
body.home .studio-subnav-bar .container-studio,
body.front-page .studio-subnav-bar .container-studio { width:calc(100% - 32px) !important; max-width:1280px !important; margin:0 auto !important; }
body.home .vv-home-hero-wrap,
body.front-page .vv-home-hero-wrap { width:100%; padding:0 0 34px; }
body.home .vv-home-hero-wrap > .container-studio,
body.front-page .vv-home-hero-wrap > .container-studio,
body.home main.vv-home-main,
body.front-page main.vv-home-main { width:calc(100% - 32px) !important; max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box; }
body.home .vv-home-hero,
body.front-page .vv-home-hero { position:relative !important; isolation:isolate; z-index:1; width:100% !important; min-height:410px; display:flex; align-items:center; overflow:hidden; border-radius:20px !important; background:#FAF8F5; border:1px solid #f1f2f4; box-shadow:0 14px 34px rgba(26,32,44,.10); clip-path:none !important; }
body.home .vv-home-hero .hero-bg-layer,
body.front-page .vv-home-hero .hero-bg-layer { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.22; }
body.home .vv-home-hero .hero-inner-container,
body.front-page .vv-home-hero .hero-inner-container { position:relative; z-index:2; width:100%; padding:clamp(28px,5vw,64px) !important; }
body.home .vv-home-hero .hero-typography-block,
body.front-page .vv-home-hero .hero-typography-block { max-width:760px; margin:0 auto 0 0 !important; text-align:left !important; }
body.home .vv-home-hero .hero-main-title,
body.front-page .vv-home-hero .hero-main-title { font-family:var(--vv-font-serif, Georgia,serif); font-size:clamp(2.4rem,4.4vw,3.8rem); line-height:1.08; color:#1A202C; margin:12px 0 16px; text-align:left; }
body.home .vv-home-hero .hero-main-desc,
body.front-page .vv-home-hero .hero-main-desc { max-width:650px; color:#4A5568; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.7; margin:0 0 25px; }
body.home .vv-home-hero .hero-kicker,
body.front-page .vv-home-hero .hero-kicker { display:inline-flex; gap:7px; align-items:center; background:#f1f2f4; color:#c45d00; border-radius:999px; padding:7px 13px; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
body.home .vv-home-hero .hero-action-buttons,
body.front-page .vv-home-hero .hero-action-buttons { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start; }
body.home .vv-home-main,
body.front-page .vv-home-main { margin-top:0 !important; }
body.home .vv-home-primary-layout,
body.front-page .vv-home-primary-layout { display:grid !important; grid-template-columns:minmax(0,1fr) 320px !important; gap:32px !important; align-items:start; }
body.home .vv-home-poems,
body.front-page .vv-home-poems { min-width:0; }
body.home .vv-section-heading,
body.front-page .vv-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:0 0 22px; }
body.home .vv-section-heading h2,
body.front-page .vv-section-heading h2 { font-family:var(--vv-font-serif,Georgia,serif); font-size:clamp(1.7rem,2.8vw,2.25rem); line-height:1.15; margin:4px 0 0; color:#1A202C; }
body.home .vv-section-kicker,
body.front-page .vv-section-kicker { color:#c45d00; text-transform:uppercase; letter-spacing:.09em; font-size:.73rem; font-weight:800; }
body.home .vv-section-link,
body.front-page .vv-section-link { color:#c45d00; font-weight:700; text-decoration:none; white-space:nowrap; font-size:.92rem; }
body.home .vv-home-poems-grid,
body.front-page .vv-home-poems-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px !important; }
body.home .vv-home-poems-grid .post-card-poetic,
body.front-page .vv-home-poems-grid .post-card-poetic,
body.home .vv-home-articles-grid .post-card-poetic,
body.front-page .vv-home-articles-grid .post-card-poetic { min-width:0; height:100%; }
body.home .vv-home-cta-section,
body.front-page .vv-home-cta-section { margin:42px 0 48px; }
body.home .vv-home-cta-fallback,
body.front-page .vv-home-cta-fallback { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:clamp(24px,4vw,42px); border:1px solid #dde3e7; border-radius:18px; background:linear-gradient(120deg,#FAF8F5,#ffffff); }
body.home .vv-home-cta-fallback h2,
body.front-page .vv-home-cta-fallback h2 { margin:6px 0 8px; color:#1A202C; font:700 clamp(1.6rem,3vw,2.2rem)/1.2 var(--vv-font-serif,Georgia,serif); }
body.home .vv-home-cta-fallback p,
body.front-page .vv-home-cta-fallback p { margin:0; color:#4A5568; line-height:1.6; }
body.home .vv-home-cta-button,
body.front-page .vv-home-cta-button { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; padding:13px 20px; border-radius:10px; background:#c45d00; color:#fff !important; text-decoration:none; font-weight:800; }
body.home .vv-home-blog-section,
body.front-page .vv-home-blog-section { margin-bottom:28px; }
body.home .vv-home-articles-grid,
body.front-page .vv-home-articles-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px !important; }
body.home .vv-home-empty,
body.front-page .vv-home-empty { padding:22px; border:1px dashed #dde3e7; border-radius:12px; color:#667085; background:#FAF8F5; }
@media(max-width:980px) {
 body.home .vv-home-primary-layout, body.front-page .vv-home-primary-layout { grid-template-columns:minmax(0,1fr) !important; }
 body.home .vv-home-primary-layout > .sidebar-studio, body.front-page .vv-home-primary-layout > .sidebar-studio { width:100%; max-width:none; }
}
@media(max-width:640px) {
 body.home .vv-home-hero, body.front-page .vv-home-hero { min-height:340px; }
 body.home .vv-home-hero .hero-inner-container, body.front-page .vv-home-hero .hero-inner-container { padding:26px !important; }
 body.home .vv-home-poems-grid, body.front-page .vv-home-poems-grid,
 body.home .vv-home-articles-grid, body.front-page .vv-home-articles-grid { grid-template-columns:minmax(0,1fr) !important; }
 body.home .vv-section-heading, body.front-page .vv-section-heading { align-items:flex-start; flex-direction:column; gap:8px; }
 body.home .vv-home-cta-fallback, body.front-page .vv-home-cta-fallback { align-items:flex-start; flex-direction:column; }
}


/* ==========================================================
   HOMEPAGE v21.0 — hero zonder storende overlay en beeldvullende kaarten
   Alleen van toepassing op de voorpagina.
   ========================================================== */
body.home .vv-home-hero::after,
body.front-page .vv-home-hero::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}
body.home .vv-home-hero .hero-bg-layer,
body.front-page .vv-home-hero .hero-bg-layer {
    opacity: .38 !important;
    z-index: 0 !important;
    background-size: cover !important;
    background-position: center !important;
}
body.home .vv-home-hero .hero-inner-container,
body.front-page .vv-home-hero .hero-inner-container {
    z-index: 3 !important;
}

/* De afbeelding vult de hele kaart; titel en informatie blijven leesbaar onderaan. */
body.home .vv-home-poems-grid .post-card-poetic,
body.front-page .vv-home-poems-grid .post-card-poetic,
body.home .vv-home-articles-grid .post-card-poetic,
body.front-page .vv-home-articles-grid .post-card-poetic {
    position: relative !important;
    min-height: 390px !important;
    height: 100% !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #24303d !important;
    border-radius: 16px !important;
}
body.home .vv-home-poems-grid .post-card-thumb,
body.front-page .vv-home-poems-grid .post-card-thumb,
body.home .vv-home-articles-grid .post-card-thumb,
body.front-page .vv-home-articles-grid .post-card-thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    z-index: -1 !important;
    background: #344252 !important;
}
body.home .vv-home-poems-grid .post-card-thumb > a,
body.front-page .vv-home-poems-grid .post-card-thumb > a,
body.home .vv-home-articles-grid .post-card-thumb > a,
body.front-page .vv-home-articles-grid .post-card-thumb > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
body.home .vv-home-poems-grid .post-card-thumb img,
body.front-page .vv-home-poems-grid .post-card-thumb img,
body.home .vv-home-articles-grid .post-card-thumb img,
body.front-page .vv-home-articles-grid .post-card-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
body.home .vv-home-poems-grid .post-card-placeholder,
body.front-page .vv-home-poems-grid .post-card-placeholder,
body.home .vv-home-articles-grid .post-card-placeholder,
body.front-page .vv-home-articles-grid .post-card-placeholder {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
body.home .vv-home-poems-grid .post-card-body,
body.front-page .vv-home-poems-grid .post-card-body,
body.home .vv-home-articles-grid .post-card-body,
body.front-page .vv-home-articles-grid .post-card-body {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
    width: 100% !important;
    min-height: 390px !important;
    margin-top: auto !important;
    padding: 110px 22px 22px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(12,20,30,0) 0%, rgba(12,20,30,.72) 45%, rgba(12,20,30,.91) 100%) !important;
}
body.home .vv-home-poems-grid .post-card-meta,
body.front-page .vv-home-poems-grid .post-card-meta,
body.home .vv-home-articles-grid .post-card-meta,
body.front-page .vv-home-articles-grid .post-card-meta,
body.home .vv-home-poems-grid .post-card-meta span,
body.front-page .vv-home-poems-grid .post-card-meta span,
body.home .vv-home-articles-grid .post-card-meta span,
body.front-page .vv-home-articles-grid .post-card-meta span {
    color: rgba(255,255,255,.82) !important;
}
body.home .vv-home-poems-grid .post-card-title,
body.front-page .vv-home-poems-grid .post-card-title,
body.home .vv-home-articles-grid .post-card-title,
body.front-page .vv-home-articles-grid .post-card-title,
body.home .vv-home-poems-grid .post-card-title a,
body.front-page .vv-home-poems-grid .post-card-title a,
body.home .vv-home-articles-grid .post-card-title a,
body.front-page .vv-home-articles-grid .post-card-title a {
    color: #fff !important;
}
body.home .vv-home-poems-grid .post-card-excerpt,
body.front-page .vv-home-poems-grid .post-card-excerpt,
body.home .vv-home-articles-grid .post-card-excerpt,
body.front-page .vv-home-articles-grid .post-card-excerpt {
    color: rgba(255,255,255,.9) !important;
    margin-bottom: 1rem !important;
}
body.home .vv-home-poems-grid .post-card-footer,
body.front-page .vv-home-poems-grid .post-card-footer,
body.home .vv-home-articles-grid .post-card-footer,
body.front-page .vv-home-articles-grid .post-card-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 16px !important;
    margin-top: auto !important;
}
body.home .vv-home-poems-grid .post-card-readmore,
body.front-page .vv-home-poems-grid .post-card-readmore,
body.home .vv-home-articles-grid .post-card-readmore,
body.front-page .vv-home-articles-grid .post-card-readmore {
    color: #fff !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body.home .vv-home-poems-grid .post-card-footer > span,
body.front-page .vv-home-poems-grid .post-card-footer > span,
body.home .vv-home-articles-grid .post-card-footer > span,
body.front-page .vv-home-articles-grid .post-card-footer > span {
    color: rgba(255,255,255,.72) !important;
}
@media (max-width: 640px) {
    body.home .vv-home-poems-grid .post-card-poetic,
    body.front-page .vv-home-poems-grid .post-card-poetic,
    body.home .vv-home-articles-grid .post-card-poetic,
    body.front-page .vv-home-articles-grid .post-card-poetic,
    body.home .vv-home-poems-grid .post-card-body,
    body.front-page .vv-home-poems-grid .post-card-body,
    body.home .vv-home-articles-grid .post-card-body,
    body.front-page .vv-home-articles-grid .post-card-body { min-height: 350px !important; }
}


/* ==========================================================
   HOMEPAGE v21.1 — mobiel: witte kaarten op dezelfde breedte als de hero
   ========================================================== */
@media (max-width: 640px) {
    body.home main.vv-home-main,
    body.front-page main.vv-home-main,
    body.home .vv-home-primary-layout,
    body.front-page .vv-home-primary-layout,
    body.home .vv-home-poems,
    body.front-page .vv-home-poems,
    body.home .vv-home-poems-grid,
    body.front-page .vv-home-poems-grid,
    body.home .vv-home-articles-grid,
    body.front-page .vv-home-articles-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    body.home .vv-home-poems-grid,
    body.front-page .vv-home-poems-grid,
    body.home .vv-home-articles-grid,
    body.front-page .vv-home-articles-grid {
        gap: 18px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.home .vv-home-poems-grid .post-card-poetic,
    body.front-page .vv-home-poems-grid .post-card-poetic,
    body.home .vv-home-articles-grid .post-card-poetic,
    body.front-page .vv-home-articles-grid .post-card-poetic {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        color: #202938 !important;
        border: 1px solid #e7e5e1 !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 14px rgba(25, 35, 45, .07) !important;
    }
    body.home .vv-home-poems-grid .post-card-thumb,
    body.front-page .vv-home-poems-grid .post-card-thumb,
    body.home .vv-home-articles-grid .post-card-thumb,
    body.front-page .vv-home-articles-grid .post-card-thumb {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 190px !important;
        min-height: 190px !important;
        margin: 0 !important;
        z-index: 0 !important;
        background: #f3f4f6 !important;
    }
    body.home .vv-home-poems-grid .post-card-thumb > a,
    body.front-page .vv-home-poems-grid .post-card-thumb > a,
    body.home .vv-home-articles-grid .post-card-thumb > a,
    body.front-page .vv-home-articles-grid .post-card-thumb > a,
    body.home .vv-home-poems-grid .post-card-thumb img,
    body.front-page .vv-home-poems-grid .post-card-thumb img,
    body.home .vv-home-articles-grid .post-card-thumb img,
    body.front-page .vv-home-articles-grid .post-card-thumb img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    body.home .vv-home-poems-grid .post-card-placeholder,
    body.front-page .vv-home-poems-grid .post-card-placeholder,
    body.home .vv-home-articles-grid .post-card-placeholder,
    body.front-page .vv-home-articles-grid .post-card-placeholder {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    body.home .vv-home-poems-grid .post-card-body,
    body.front-page .vv-home-poems-grid .post-card-body,
    body.home .vv-home-articles-grid .post-card-body,
    body.front-page .vv-home-articles-grid .post-card-body {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        color: #202938 !important;
        z-index: 1 !important;
    }
    body.home .vv-home-poems-grid .post-card-title,
    body.front-page .vv-home-poems-grid .post-card-title,
    body.home .vv-home-articles-grid .post-card-title,
    body.front-page .vv-home-articles-grid .post-card-title,
    body.home .vv-home-poems-grid .post-card-title a,
    body.front-page .vv-home-poems-grid .post-card-title a,
    body.home .vv-home-articles-grid .post-card-title a,
    body.front-page .vv-home-articles-grid .post-card-title a {
        color: #202938 !important;
    }
    body.home .vv-home-poems-grid .post-card-meta,
    body.front-page .vv-home-poems-grid .post-card-meta,
    body.home .vv-home-articles-grid .post-card-meta,
    body.front-page .vv-home-articles-grid .post-card-meta,
    body.home .vv-home-poems-grid .post-card-meta span,
    body.front-page .vv-home-poems-grid .post-card-meta span,
    body.home .vv-home-articles-grid .post-card-meta span,
    body.front-page .vv-home-articles-grid .post-card-meta span,
    body.home .vv-home-poems-grid .post-card-excerpt,
    body.front-page .vv-home-poems-grid .post-card-excerpt,
    body.home .vv-home-articles-grid .post-card-excerpt,
    body.front-page .vv-home-articles-grid .post-card-excerpt,
    body.home .vv-home-poems-grid .post-card-footer > span,
    body.front-page .vv-home-poems-grid .post-card-footer > span,
    body.home .vv-home-articles-grid .post-card-footer > span,
    body.front-page .vv-home-articles-grid .post-card-footer > span {
        color: #525d6b !important;
    }
    body.home .vv-home-poems-grid .post-card-readmore,
    body.front-page .vv-home-poems-grid .post-card-readmore,
    body.home .vv-home-articles-grid .post-card-readmore,
    body.front-page .vv-home-articles-grid .post-card-readmore {
        color: #245b49 !important;
    }
}


/* HOMEPAGE v21.2 — kaartafbeelding alleen bovenaan, witte inhoud eronder */
body.home .vv-home-poems-grid .post-card-poetic,
body.front-page .vv-home-poems-grid .post-card-poetic,
body.home .vv-home-articles-grid .post-card-poetic,
body.front-page .vv-home-articles-grid .post-card-poetic {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    color: #202938 !important;
    border: 1px solid #e7e5e1 !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 14px rgba(25, 35, 45, .07) !important;
}
body.home .vv-home-poems-grid .post-card-thumb,
body.front-page .vv-home-poems-grid .post-card-thumb,
body.home .vv-home-articles-grid .post-card-thumb,
body.front-page .vv-home-articles-grid .post-card-thumb {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    margin: 0 !important;
    z-index: 0 !important;
    background: #f3f4f6 !important;
}
body.home .vv-home-poems-grid .post-card-thumb > a,
body.front-page .vv-home-poems-grid .post-card-thumb > a,
body.home .vv-home-articles-grid .post-card-thumb > a,
body.front-page .vv-home-articles-grid .post-card-thumb > a,
body.home .vv-home-poems-grid .post-card-thumb img,
body.front-page .vv-home-poems-grid .post-card-thumb img,
body.home .vv-home-articles-grid .post-card-thumb img,
body.front-page .vv-home-articles-grid .post-card-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
body.home .vv-home-poems-grid .post-card-placeholder,
body.front-page .vv-home-poems-grid .post-card-placeholder,
body.home .vv-home-articles-grid .post-card-placeholder,
body.front-page .vv-home-articles-grid .post-card-placeholder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
body.home .vv-home-poems-grid .post-card-body,
body.front-page .vv-home-poems-grid .post-card-body,
body.home .vv-home-articles-grid .post-card-body,
body.front-page .vv-home-articles-grid .post-card-body {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #202938 !important;
    z-index: 1 !important;
}
body.home .vv-home-poems-grid .post-card-meta,
body.front-page .vv-home-poems-grid .post-card-meta,
body.home .vv-home-articles-grid .post-card-meta,
body.front-page .vv-home-articles-grid .post-card-meta,
body.home .vv-home-poems-grid .post-card-meta span,
body.front-page .vv-home-poems-grid .post-card-meta span,
body.home .vv-home-articles-grid .post-card-meta span,
body.front-page .vv-home-articles-grid .post-card-meta span,
body.home .vv-home-poems-grid .post-card-excerpt,
body.front-page .vv-home-poems-grid .post-card-excerpt,
body.home .vv-home-articles-grid .post-card-excerpt,
body.front-page .vv-home-articles-grid .post-card-excerpt,
body.home .vv-home-poems-grid .post-card-footer > span,
body.front-page .vv-home-poems-grid .post-card-footer > span,
body.home .vv-home-articles-grid .post-card-footer > span,
body.front-page .vv-home-articles-grid .post-card-footer > span {
    color: #525d6b !important;
}
body.home .vv-home-poems-grid .post-card-title,
body.front-page .vv-home-poems-grid .post-card-title,
body.home .vv-home-articles-grid .post-card-title,
body.front-page .vv-home-articles-grid .post-card-title,
body.home .vv-home-poems-grid .post-card-title a,
body.front-page .vv-home-poems-grid .post-card-title a,
body.home .vv-home-articles-grid .post-card-title a,
body.front-page .vv-home-articles-grid .post-card-title a {
    color: #202938 !important;
}
body.home .vv-home-poems-grid .post-card-readmore,
body.front-page .vv-home-poems-grid .post-card-readmore,
body.home .vv-home-articles-grid .post-card-readmore,
body.front-page .vv-home-articles-grid .post-card-readmore {
    color: #245b49 !important;
}
@media (max-width: 640px) {
    body.home .vv-home-poems-grid .post-card-thumb,
    body.front-page .vv-home-poems-grid .post-card-thumb,
    body.home .vv-home-articles-grid .post-card-thumb,
    body.front-page .vv-home-articles-grid .post-card-thumb {
        height: 190px !important;
        min-height: 190px !important;
    }
    body.home .vv-home-poems-grid .post-card-body,
    body.front-page .vv-home-poems-grid .post-card-body,
    body.home .vv-home-articles-grid .post-card-body,
    body.front-page .vv-home-articles-grid .post-card-body { padding: 18px !important; }
}


/* Homepage v21.5: zes nieuwste blogartikelen in een raster van 3 x 2. */
body.home .vv-home-articles-grid,
body.front-page .vv-home-articles-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch;
}
body.home .vv-home-articles-grid > *,
body.front-page .vv-home-articles-grid > * { min-width: 0; }
@media (max-width: 980px) {
    body.home .vv-home-articles-grid,
    body.front-page .vv-home-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    body.home .vv-home-articles-grid,
    body.front-page .vv-home-articles-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* Vers & Vorm v21.6 — homepage-stijl doorgetrokken naar single gedichten en blogartikelen */
body.single,
body.single-gebruikers_gedicht {
    background: #f7f7f4 !important;
}
body.single main.site-main.container-studio,
body.single-gebruikers_gedicht main.site-main.container-studio {
    width: min(1280px, calc(100% - 40px)) !important;
    max-width: 1280px !important;
    margin: 32px auto 56px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
body.single .blog-studio-layout,
body.single-gebruikers_gedicht .blog-studio-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 30px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
body.single .blog-content-area,
body.single-gebruikers_gedicht .blog-content-area {
    min-width: 0 !important;
    width: 100% !important;
}
body.single .single-post-card,
body.single-gebruikers_gedicht .single-post-card {
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #e7e5e1 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 18px rgba(25, 35, 45, .06) !important;
    color: #202938 !important;
}
body.single .single-post-content,
body.single-gebruikers_gedicht .single-post-content {
    padding: clamp(22px, 3.5vw, 42px) !important;
    color: #343d49 !important;
    line-height: 1.85 !important;
}
body.single .single-post-footer,
body.single-gebruikers_gedicht .single-post-footer {
    margin: 0 !important;
    padding: 22px clamp(22px, 3.5vw, 42px) 28px !important;
    border-top: 1px solid #eceae6 !important;
    background: #fff !important;
}
body.single .single-hero-banner {
    min-height: 330px !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: none !important;
}
body.single .single-hero-overlay {
    display: block !important;
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(20,28,35,.08) 0%, rgba(20,28,35,.30) 48%, rgba(20,28,35,.76) 100%) !important;
}
body.single .single-hero-content {
    padding: clamp(24px, 4vw, 46px) !important;
}
body.single .single-hero-title {
    max-width: 900px !important;
    font-family: var(--vv-font-serif, Georgia, serif) !important;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}
body.single .single-hero-category-badge {
    background: rgba(255,255,255,.94) !important;
    color: #245b49 !important;
    border-radius: 999px !important;
    padding: 7px 13px !important;
}
body.single .single-hero-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    color: #fff !important;
}
body.single .single-post-content h2,
body.single .single-post-content h3,
body.single-gebruikers_gedicht .book-preview-card h2 {
    color: #202938 !important;
    font-family: var(--vv-font-serif, Georgia, serif) !important;
}
body.single .single-post-content a,
body.single-gebruikers_gedicht .single-post-card a:not(.post-card-category) {
    color: #245b49;
}
body.single .single-post-content blockquote {
    background: #f7f7f4 !important;
    border-left-color: #245b49 !important;
    border-radius: 0 12px 12px 0 !important;
}
/* Gedicht detail: afbeelding bovenaan, titel en metadata op een rustige witte kaart eronder. */
body.single-gebruikers_gedicht .single-poem-card {
    padding: 0 !important;
}
body.single-gebruikers_gedicht .single-poem-card .post-card-thumb.single-card-thumb {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    overflow: hidden !important;
    background: #fff !important;
}
body.single-gebruikers_gedicht .single-poem-card .post-card-thumb.single-card-thumb > img {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 280px !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
}
body.single-gebruikers_gedicht .single-poem-card .single-card-thumb > div[style*="background: rgba(15, 23, 42"] {
    display: none !important;
}
body.single-gebruikers_gedicht .single-poem-card .single-card-thumb > div[style*="align-items: center"] {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 28px 24px 30px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #202938 !important;
    text-align: center !important;
}
body.single-gebruikers_gedicht .single-poem-card .single-card-thumb h1 {
    color: #202938 !important;
    text-shadow: none !important;
    font-family: var(--vv-font-serif, Georgia, serif) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
}
body.single-gebruikers_gedicht .single-poem-card .single-card-thumb > div[style*="align-items: center"] > div {
    color: #525d6b !important;
}
body.single-gebruikers_gedicht .single-poem-card .single-card-thumb > div[style*="align-items: center"] > div a {
    color: #245b49 !important;
}
body.single-gebruikers_gedicht .single-poem-card .single-card-thumb > div[style*="align-items: center"] > span {
    background: #edf4ef !important;
    color: #245b49 !important;
    border-color: #dbe8df !important;
}
body.single-gebruikers_gedicht .single-poem-card .single-card-thumb .post-card-category {
    top: 16px !important;
    left: 16px !important;
    background: rgba(255,255,255,.95) !important;
    color: #245b49 !important;
}
body.single-gebruikers_gedicht .book-preview-card {
    margin: 0 24px 24px !important;
    border: 1px solid #e7e5e1 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    background: #fbfaf7 !important;
}
body.single-gebruikers_gedicht .poem-rating-box,
body.single-gebruikers_gedicht .poem-actions-bar {
    margin-left: 24px !important;
    margin-right: 24px !important;
}
body.single .sidebar-studio,
body.single-gebruikers_gedicht .sidebar-studio {
    min-width: 0 !important;
}
body.single .sidebar-studio > *,
body.single-gebruikers_gedicht .sidebar-studio > * {
    border-radius: 16px !important;
}
@media (max-width: 980px) {
    body.single .blog-studio-layout,
    body.single-gebruikers_gedicht .blog-studio-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }
    body.single .sidebar-studio,
    body.single-gebruikers_gedicht .sidebar-studio { width: 100% !important; }
}
@media (max-width: 640px) {
    body.single main.site-main.container-studio,
    body.single-gebruikers_gedicht main.site-main.container-studio {
        width: calc(100% - 24px) !important;
        margin: 20px auto 36px !important;
    }
    body.single .single-hero-banner { min-height: 270px !important; }
    body.single .single-hero-meta { font-size: .88rem !important; }
    body.single .single-post-content { padding: 22px 18px !important; font-size: 1.04rem !important; }
    body.single .single-post-footer { padding: 18px !important; }
    body.single-gebruikers_gedicht .single-poem-card .post-card-thumb.single-card-thumb > img { height: 190px !important; }
    body.single-gebruikers_gedicht .single-poem-card .single-card-thumb > div[style*="align-items: center"] { padding: 22px 16px 24px !important; }
    body.single-gebruikers_gedicht .single-poem-card .single-card-thumb h1 { font-size: 2rem !important; }
    body.single-gebruikers_gedicht .book-preview-card { margin: 0 12px 18px !important; padding: 20px 16px !important; }
    body.single-gebruikers_gedicht .poem-rating-box,
    body.single-gebruikers_gedicht .poem-actions-bar { margin-left: 12px !important; margin-right: 12px !important; }
}


/* ================================================================
   Vers & Vorm v21.7 — visuele lijn van de nieuwe voorpagina
   Doorgetrokken naar navigatie, pagina's, formulieren, kaarten,
   widgets, archieven, profielen en interactieve onderdelen.
   ================================================================ */
:root {
    --vv-color-primary: #245b49;
    --vv-color-primary-dark: #194638;
    --vv-color-sub: #497b68;
    --vv-color-accent: #c45d00;
    --vv-color-accent-hover: #c45d00;
    --vv-color-bg: #f7f7f4;
    --vv-color-card: #ffffff;
    --vv-color-paper: #fbfaf7;
    --vv-color-paper-border: #e7e5e1;
    --vv-color-border: #e7e5e1;
    --vv-color-heading: #202938;
    --vv-color-text: #303a46;
    --vv-color-text-muted: #66717d;
    --vv-color-subtle: #8a939d;
    --vv-shadow-card: 0 3px 14px rgba(25, 35, 45, .07);
}
html { scroll-behavior: smooth; }
body {
    background: #f7f7f4;
    color: #303a46;
    font-family: var(--vv-font-sans);
    line-height: 1.7;
}
body :is(h1,h2,h3,h4,h5,h6) { color: #202938; }
body :is(a, a:visited) { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
body a { color: #245b49; }
body a:hover { color: #194638; }

/* Header en alle navigatielagen */
.site-header {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #e7e5e1;
    box-shadow: 0 2px 12px rgba(25,35,45,.035);
    backdrop-filter: blur(10px);
}
.header-container { max-width: 1280px; padding-top: 1rem; padding-bottom: 1rem; }
.site-branding .site-title a { color: #202938; text-decoration: none; }
.site-description { color: #66717d; }
.primary-navigation li a {
    color: #303a46;
    border-radius: 9px;
    font-weight: 650;
}
.primary-navigation li a:hover,
.primary-navigation li.current-menu-item > a,
.primary-navigation li.current-menu-ancestor > a {
    color: #245b49;
    background: #f0f4f0;
}
.primary-navigation ul ul {
    border-color: #e7e5e1;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(25,35,45,.10);
    overflow: hidden;
}
.primary-navigation ul ul a:hover { background: #f7f7f4; color: #245b49; }
.studio-subnav-bar { background: #fbfaf7; border-color: #e7e5e1; }
.studio-subnav-items a {
    color: #46515d;
    background: #fff;
    border-color: #e7e5e1;
    border-radius: 999px;
    box-shadow: none;
}
.studio-subnav-items a i { color: #245b49; }
.studio-subnav-items a:hover,
.studio-subnav-items a.active {
    color: #194638;
    background: #edf3ee;
    border-color: #b8cfc2;
    box-shadow: none;
}
.studio-subnav-items a.subnav-highlight {
    background: #f1f2f4;
    border-color: #dde3e7;
    color: #011726;
}
.studio-subnav-items a.subnav-highlight:hover { background: #011726; border-color: #011726; }

/* Algemene inhoudsvlakken en paginatitels */
.site-main { color: #303a46; }
body:not(.home):not(.front-page) main.site-main,
body:not(.home):not(.front-page) .site-main.container-studio {
    padding-top: 30px;
    padding-bottom: 42px;
}
body:not(.home):not(.front-page) main.site-main > h1:first-child,
body:not(.home):not(.front-page) main.site-main > .page-header,
body:not(.home):not(.front-page) .archive-header,
body:not(.home):not(.front-page) .page-title-wrap {
    margin-bottom: 24px;
}
body:not(.home):not(.front-page) .entry-title,
body:not(.home):not(.front-page) .page-title,
body:not(.home):not(.front-page) .archive-title {
    color: #202938;
    letter-spacing: -.025em;
    line-height: 1.2;
}
.entry-content, .page-content, .archive-description { color: #303a46; }
.entry-content p, .page-content p { line-height: 1.8; }
.entry-content blockquote, .page-content blockquote {
    border-left: 3px solid #8eaa99;
    background: #fbfaf7;
    border-radius: 0 12px 12px 0;
    color: #46515d;
    padding: 18px 22px;
}
.entry-content img, .page-content img { border-radius: 12px; }

/* Cards, widgets, content panels en profiel-/archiefblokken */
.sidebar-widget-card,
.single-post-card,
.archive .post-card-poetic,
.blog .post-card-poetic,
.search .post-card-poetic,
.author .post-card-poetic,
.category .post-card-poetic,
.tag .post-card-poetic,
.page .content-panel,
.page .profile-card,
.page .album-card,
.page .book-preview-card,
.page .theme-card,
.page .poem-card,
.author-profile-card,
.author-profile-block,
.widget-area .widget,
.comments-area,
.comment-respond,
.no-results,
.error-404 .not-found {
    background: #fff;
    border: 1px solid #e7e5e1;
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(25,35,45,.055);
}
.sidebar-widget-card { padding: 24px; }
.sidebar-widget-header { border-bottom-color: #eeece8; }
.sidebar-widget-header h3 { color: #202938; }
.sidebar-widget-header h3 i { color: #245b49; }
.sidebar-pill { background: #edf3ee; color: #245b49; }
.widget-area .widget { padding: 22px; }
.widget-area .widget-title,
.widget-area .widget h2,
.widget-area .widget h3 { color: #202938; }

/* Kaarten buiten de voorpagina: dezelfde beeld-boven/tekst-onder-opbouw */
body:not(.home):not(.front-page) .blog-cards-grid,
body:not(.home):not(.front-page) .archive-cards-grid,
body:not(.home):not(.front-page) .post-grid { align-items: stretch; }
body:not(.home):not(.front-page) .blog-cards-grid .post-card-poetic,
body:not(.home):not(.front-page) .archive-cards-grid .post-card-poetic,
body:not(.home):not(.front-page) .post-grid .post-card-poetic {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0;
    background: #fff;
    border: 1px solid #e7e5e1;
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(25,35,45,.07);
}
body:not(.home):not(.front-page) .blog-cards-grid .post-card-thumb,
body:not(.home):not(.front-page) .archive-cards-grid .post-card-thumb,
body:not(.home):not(.front-page) .post-grid .post-card-thumb {
    position: relative;
    inset: auto;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 220px;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: #f0f1ed;
}
body:not(.home):not(.front-page) .blog-cards-grid .post-card-thumb img,
body:not(.home):not(.front-page) .archive-cards-grid .post-card-thumb img,
body:not(.home):not(.front-page) .post-grid .post-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body:not(.home):not(.front-page) .blog-cards-grid .post-card-body,
body:not(.home):not(.front-page) .archive-cards-grid .post-card-body,
body:not(.home):not(.front-page) .post-grid .post-card-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px;
    background: #fff;
    color: #303a46;
}
body:not(.home):not(.front-page) .post-card-title,
body:not(.home):not(.front-page) .post-card-title a { color: #202938; }
body:not(.home):not(.front-page) .post-card-meta,
body:not(.home):not(.front-page) .post-card-excerpt { color: #66717d; }
body:not(.home):not(.front-page) .post-card-readmore { color: #245b49; font-weight: 700; }

/* Knoppen: één rustige, afgeronde groene stijl */
button, input[type="button"], input[type="submit"], input[type="reset"],
.button, .button-primary, .wp-block-button__link,
.pagination .page-numbers, .vv-section-link, .vv-home-cta-button,
.btn-social-share {
    border-radius: 999px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
button, input[type="button"], input[type="submit"], input[type="reset"],
.button, .button-primary, .wp-block-button__link {
    background: #245b49;
    border: 1px solid #245b49;
    color: #fff;
    font-weight: 700;
    padding: .72rem 1.25rem;
    box-shadow: none;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,
.button:hover, .button-primary:hover, .wp-block-button__link:hover {
    background: #194638;
    border-color: #194638;
    color: #fff;
    transform: translateY(-1px);
}
.vv-section-link { color: #245b49; font-weight: 700; }
.vv-section-link:hover { color: #194638; }
.vv-home-cta-button { background: #245b49; border-color: #245b49; color: #fff; }
.vv-home-cta-button:hover { background: #194638; color: #fff; }

/* Formulieren, zoekvelden en selecties */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea, select {
    max-width: 100%;
    border: 1px solid #d9ded8;
    border-radius: 10px;
    background: #fff;
    color: #303a46;
    padding: .75rem .9rem;
    box-shadow: none;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid rgba(36,91,73,.16);
    outline-offset: 1px;
    border-color: #7da18c;
}
label { color: #303a46; font-weight: 650; }
input[type="checkbox"], input[type="radio"] { accent-color: #245b49; }
::placeholder { color: #8a939d; opacity: 1; }
.search-form, .wp-block-search__inside-wrapper { gap: 8px; }

/* Tabellen, meldingen, paginering en reacties */
table { border-collapse: separate; border-spacing: 0; width: 100%; overflow: hidden; border: 1px solid #e7e5e1; border-radius: 12px; background: #fff; }
th { background: #f3f4f0; color: #202938; font-weight: 700; }
th, td { padding: 12px 14px; border-bottom: 1px solid #eeece8; }
tr:last-child td { border-bottom: 0; }
.pagination .page-numbers { border-color: #e7e5e1; color: #245b49; background: #fff; }
.pagination .page-numbers:hover, .pagination .page-numbers.current { background: #245b49; color: #fff; border-color: #245b49; }
.comments-area, .comment-respond { padding: 24px; }
.comment-list .comment-body { border-bottom: 1px solid #eeece8; padding: 18px 0; }

/* Footer sluit aan op de lichte, rustige homepage */
.site-footer { background: #fff; border-top: 1px solid #e7e5e1; color: #66717d; }
.site-footer a { color: #245b49; }
.site-footer a:hover { color: #194638; }
.site-info { border-top-color: #eeece8; }

/* App- en studiodelen: behoud functionaliteit, trek panelen en bediening gelijk */
.builder-panel, .studio-panel, .tool-panel, .settings-panel,
.poem-rating-box, .poem-actions-bar, .album-detail-card,
.subscription-card, .checkout-card, .profile-settings-card,
.auth-card, .login-card, .register-card {
    border-color: #e7e5e1;
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(25,35,45,.055);
}
.badge, .tag-pill, .category-badge { border-radius: 999px; }
hr { border: 0; border-top: 1px solid #e7e5e1; }
:focus-visible { outline: 2px solid #6f9b82; outline-offset: 3px; }

@media (max-width: 760px) {
    body:not(.home):not(.front-page) main.site-main,
    body:not(.home):not(.front-page) .site-main.container-studio { padding-top: 20px; padding-bottom: 28px; }
    .sidebar-widget-card, .widget-area .widget, .comments-area, .comment-respond { padding: 18px; }
    body:not(.home):not(.front-page) .blog-cards-grid .post-card-thumb,
    body:not(.home):not(.front-page) .archive-cards-grid .post-card-thumb,
    body:not(.home):not(.front-page) .post-grid .post-card-thumb { height: 190px; }
    body:not(.home):not(.front-page) .blog-cards-grid .post-card-body,
    body:not(.home):not(.front-page) .archive-cards-grid .post-card-body,
    body:not(.home):not(.front-page) .post-grid .post-card-body { padding: 18px; }
    table { display: block; overflow-x: auto; }
}


/* ==========================================================
   v22.4 — vaste hoogte van 300px en 35px ruimte onder de afbeelding op single gedichten
   ========================================================== */
.single-poem-card .single-poem-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    margin: 0 0 35px 0 !important;
    overflow: hidden !important;
    border-radius: 15px 15px 0 0 !important;
    background: #dce4dd !important;
}
.single-poem-card .single-poem-hero > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
.single-poem-card .single-poem-hero-shade {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(16,25,23,.02) 5%, rgba(16,25,23,.08) 38%, rgba(16,25,23,.78) 100%) !important;
}
.single-poem-card .single-poem-category {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    z-index: 3 !important;
    background: rgba(255,255,255,.94) !important;
    color: #245b49 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.single-poem-card .single-poem-hero-content {
    position: absolute !important;
    z-index: 2 !important;
    inset: auto 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 36px clamp(22px, 4vw, 48px) 30px !important;
    color: #fff !important;
    text-align: left !important;
}
.single-poem-card .single-poem-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    font: 700 .76rem/1.2 var(--vv-font-sans, sans-serif) !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}
.single-poem-card .single-poem-hero-content h1 {
    max-width: 900px !important;
    margin: 0 !important;
    color: #fff !important;
    font: 700 clamp(2rem, 4.5vw, 3.4rem)/1.08 var(--vv-font-serif, Georgia, serif) !important;
    letter-spacing: -.02em !important;
    text-shadow: none !important;
}
.single-poem-card .single-poem-hero-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px 18px !important;
    color: rgba(255,255,255,.88) !important;
    font: 500 .9rem/1.5 var(--vv-font-sans, sans-serif) !important;
}
.single-poem-card .single-poem-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.single-poem-card .single-poem-hero-meta a { color: #fff !important; font-weight: 800 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.single-poem-card .single-poem-hero-meta .single-poem-rating { color: #dde3e7 !important; font-weight: 800 !important; }

/* Gerelateerde gedichten: dezelfde beeldvullende kaarten en uitlijning als de homepage. */
.related-poems-section .posts-grid-2col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 22px !important;
}
.related-poems-section .posts-grid-2col > .post-card-poetic {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 390px !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid #e7e5e1 !important;
    border-radius: 16px !important;
    background: #24303d !important;
    box-shadow: 0 3px 14px rgba(25,35,45,.055) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
}
.related-poems-section .posts-grid-2col > .post-card-poetic:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(25,35,45,.12) !important;
}
.related-poems-section .posts-grid-2col .post-card-thumb {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    background: #344252 !important;
}
.related-poems-section .posts-grid-2col .post-card-thumb > a,
.related-poems-section .posts-grid-2col .post-card-thumb img,
.related-poems-section .posts-grid-2col .post-card-placeholder {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}
.related-poems-section .posts-grid-2col .post-card-thumb img { object-fit: cover !important; object-position: center !important; }
.related-poems-section .posts-grid-2col .post-card-body {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
    width: 100% !important;
    min-height: 390px !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
    padding: 110px 22px 22px !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(12,20,30,0) 0%, rgba(12,20,30,.72) 45%, rgba(12,20,30,.91) 100%) !important;
}
.related-poems-section .posts-grid-2col .post-card-meta,
.related-poems-section .posts-grid-2col .post-card-meta span { color: rgba(255,255,255,.82) !important; }
.related-poems-section .posts-grid-2col .post-card-title,
.related-poems-section .posts-grid-2col .post-card-title a { color: #fff !important; }
.related-poems-section .posts-grid-2col .post-card-excerpt { color: rgba(255,255,255,.9) !important; margin-bottom: 1rem !important; }
.related-poems-section .posts-grid-2col .post-card-footer { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px 16px !important; margin-top:auto !important; border-top-color:rgba(255,255,255,.22) !important; }
.related-poems-section .posts-grid-2col .post-card-readmore { color:#fff !important; font-weight:800 !important; text-decoration:underline !important; text-underline-offset:3px; }
.related-poems-section .posts-grid-2col .post-card-footer > span { color:rgba(255,255,255,.72) !important; }
.related-poems-section > div:first-child { align-items:center !important; gap:14px !important; }
.related-poems-section > div:first-child h3 { color:#202938 !important; line-height:1.2 !important; }
.related-poems-section > div:first-child h3 i { color:#245b49 !important; }
.related-poems-section > div:first-child a { color:#245b49 !important; white-space:nowrap; }
@media (max-width: 760px) {
    .single-poem-card .single-poem-hero { height: 300px !important; min-height: 300px !important; margin-bottom: 35px !important; }
    .single-poem-card .single-poem-hero-content { padding: 26px 20px 22px !important; gap: 8px !important; }
    .single-poem-card .single-poem-hero-meta { gap: 6px 12px !important; font-size: .82rem !important; }
    .single-poem-card .single-poem-category { top: 14px !important; right: 14px !important; }
    .related-poems-section .posts-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
    .related-poems-section .posts-grid-2col > .post-card-poetic,
    .related-poems-section .posts-grid-2col .post-card-body { min-height: 350px !important; }
    .related-poems-section .posts-grid-2col .post-card-body { padding: 90px 16px 17px !important; }
}
@media (max-width: 520px) {
    .related-poems-section .posts-grid-2col { grid-template-columns: minmax(0, 1fr) !important; }
    .related-poems-section .posts-grid-2col > .post-card-poetic,
    .related-poems-section .posts-grid-2col .post-card-body { min-height: 340px !important; }
    .related-poems-section > div:first-child { align-items:flex-start !important; flex-direction:column !important; }
}


/* Vers & Vorm v22.3 — detail- en archiefpagina's volgen de actuele voorpagina */
:root {
  --vv-page-bg: #f7f7f4;
  --vv-card-bg: #ffffff;
  --vv-ink: #202938;
  --vv-text: #525d6b;
  --vv-muted: #66717d;
  --vv-line: #e7e5e1;
  --vv-green: #245b49;
  --vv-green-dark: #194638;
  --vv-orange: #c45d00;
}
body.single, body.single-gebruikers_gedicht, body.category, body.archive, body.tax-gedicht_thema {
  background: var(--vv-page-bg) !important;
}
body.single main.site-main.container-studio,
body.single-gebruikers_gedicht main.site-main.container-studio,
body.category main.site-main.container-studio,
body.archive main.site-main.container-studio,
body.tax-gedicht_thema main.site-main.container-studio {
  width: min(1280px, calc(100% - 40px)) !important;
  max-width: 1280px !important;
  margin: 30px auto 56px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Archiefkop: dezelfde lichte, editorial uitstraling als de voorpagina-secties. */
.vv-archive-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 28px !important;
  padding: clamp(24px, 4vw, 42px) !important;
  background: linear-gradient(135deg, #fff 0%, #fbfaf7 100%) !important;
  border: 1px solid var(--vv-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 14px rgba(25,35,45,.045) !important;
}
.vv-archive-hero .vv-archive-eyebrow {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  margin: 0 0 12px !important; padding: 7px 12px !important;
  color: var(--vv-green) !important; background: #edf3ee !important;
  border-radius: 999px !important; font-size: .78rem !important;
  font-weight: 800 !important; letter-spacing: .045em !important; text-transform: uppercase !important;
}
.vv-archive-hero h1 {
  margin: 0 0 10px !important; color: var(--vv-ink) !important;
  font-family: var(--vv-font-serif, Georgia, serif) !important;
  font-size: clamp(2rem, 4vw, 3.1rem) !important; line-height: 1.1 !important;
  letter-spacing: -.035em !important;
}
.vv-archive-hero p, .vv-archive-hero .archive-description {
  max-width: 760px !important; margin: 0 !important; color: var(--vv-text) !important;
  font-size: 1.04rem !important; line-height: 1.75 !important;
}
.vv-archive-hero .vv-archive-mark {
  flex: 0 0 auto !important; display: grid !important; place-items: center !important;
  width: 64px !important; height: 64px !important; border-radius: 18px !important;
  color: var(--vv-green) !important; background: #edf3ee !important; font-size: 1.65rem !important;
}
.vv-archive-layout { display: block !important; width: 100% !important; }
.vv-archive-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important; align-items: stretch !important; width: 100% !important;
}
.vv-archive-grid > * { min-width: 0 !important; }
/* De voorpagina toont gedichten in twee kolommen en blogartikelen in drie. */
.vv-poem-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.vv-archive-grid .post-card-poetic {
  display: flex !important; flex-direction: column !important; height: 100% !important;
  overflow: hidden !important; padding: 0 !important; background: #fff !important;
  border: 1px solid var(--vv-line) !important; border-radius: 16px !important;
  box-shadow: 0 3px 14px rgba(25,35,45,.07) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.vv-archive-grid .post-card-poetic:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 24px rgba(25,35,45,.10) !important; }
.vv-archive-grid .post-card-thumb { position: relative !important; display: block !important; flex: 0 0 auto !important; width: 100% !important; height: 230px !important; min-height: 230px !important; margin: 0 !important; overflow: hidden !important; background: #f0f1ed !important; }
.vv-archive-grid .post-card-thumb > a, .vv-archive-grid .post-card-thumb img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center !important; }
.vv-archive-grid .post-card-body { position: relative !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; padding: 20px !important; background: #fff !important; color: var(--vv-ink) !important; }
.vv-archive-grid .post-card-meta, .vv-archive-grid .post-card-excerpt, .vv-archive-grid .post-card-footer > span { color: var(--vv-text) !important; }
.vv-archive-grid .post-card-title, .vv-archive-grid .post-card-title a { color: var(--vv-ink) !important; }
.vv-archive-grid .post-card-title { margin: 12px 0 !important; font-size: 1.25rem !important; line-height: 1.35 !important; }
.vv-archive-grid .post-card-excerpt { line-height: 1.7 !important; }
.vv-archive-grid .post-card-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: auto !important; padding-top: 12px !important; }
.vv-archive-grid .post-card-readmore { color: var(--vv-green) !important; font-weight: 800 !important; }
.vv-archive-grid .post-card-placeholder { display: grid !important; place-items: center !important; background: linear-gradient(135deg,#edf3ee,#fbfaf7) !important; color: var(--vv-green) !important; font-size: 2rem !important; }
.vv-archive-cta { grid-column: 1 / -1 !important; padding: clamp(24px,4vw,40px) !important; text-align: center !important; border: 1px solid #dde3e7 !important; border-radius: 18px !important; background: linear-gradient(135deg,#fff 0%,#f1f2f4 100%) !important; box-shadow: 0 4px 16px rgba(25,35,45,.045) !important; }
.vv-archive-cta .vv-archive-eyebrow { background: #f1f2f4 !important; color: var(--vv-orange) !important; }
.vv-archive-cta h2 { margin: 0 0 10px !important; color: var(--vv-ink) !important; font-family: var(--vv-font-serif, Georgia,serif) !important; font-size: clamp(1.6rem,3vw,2.15rem) !important; }
.vv-archive-cta p { max-width: 680px !important; margin: 0 auto 20px !important; color: var(--vv-text) !important; line-height: 1.75 !important; }
.vv-archive-cta a { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 12px 22px !important; border-radius: 999px !important; background: var(--vv-green) !important; color: #fff !important; font-weight: 800 !important; text-decoration: none !important; }
.vv-archive-pagination { margin: 30px 0 0 !important; text-align: center !important; }
/* Blogdetail: ruimere editorial kop, witte inhoudskaart en dezelfde rustige kleurstelling. */
body.single .single-post-card { border-radius: 20px !important; }
body.single .single-hero-banner { min-height: 360px !important; border-radius: 20px 20px 0 0 !important; }
body.single .single-hero-content { max-width: 1000px !important; }
body.single .single-hero-category-badge { border: 1px solid rgba(255,255,255,.55) !important; }
body.single .single-post-content { font-size: 1.06rem !important; line-height: 1.9 !important; }
body.single .single-post-content h2 { margin-top: 1.8em !important; font-size: clamp(1.5rem, 2.5vw, 2rem) !important; }
body.single .post-bottom-studio-cta { margin-top: 28px !important; border: 1px solid #dde3e7 !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 4px 16px rgba(25,35,45,.045) !important; }
@media (max-width: 980px) {
  .vv-archive-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .vv-archive-hero .vv-archive-mark { width: 54px !important; height: 54px !important; }
}
@media (max-width: 640px) {
  body.single main.site-main.container-studio, body.single-gebruikers_gedicht main.site-main.container-studio,
  body.category main.site-main.container-studio, body.archive main.site-main.container-studio,
  body.tax-gedicht_thema main.site-main.container-studio { width: calc(100% - 28px) !important; margin-top: 20px !important; }
  .vv-archive-hero { align-items: flex-start !important; padding: 22px 20px !important; margin-bottom: 20px !important; border-radius: 16px !important; }
  .vv-archive-hero .vv-archive-mark { display: none !important; }
  .vv-archive-grid { grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; }
  .vv-archive-grid .post-card-thumb { height: 205px !important; min-height: 205px !important; }
  .vv-archive-grid .post-card-body { padding: 18px !important; }
  body.single .single-hero-banner { min-height: 300px !important; }
}


/* ==========================================================
   Vers & Vorm 22.5 — single gedichten en artikelen opnieuw
   opgebouwd vanuit de huidige homepage-kaarten
   ========================================================== */
body.single-post, body.single-gebruikers_gedicht { background:#f1f2f4 !important; }
.vv-single-post-main, body.single-gebruikers_gedicht .site-main.container-studio {
    width:calc(100% - 32px) !important; max-width:1040px !important; margin:34px auto 64px !important;
    padding:0 !important; box-sizing:border-box;
}
.vv-single-article-card, .vv-single-poem-card {
    display:block !important; width:100% !important; max-width:100% !important; margin:0 auto 28px !important;
    padding:0 !important; overflow:hidden !important; background:#fff !important; border:1px solid #dde3e7 !important;
    border-radius:20px !important; box-shadow:0 10px 28px rgba(26,32,44,.07) !important;
}
.vv-single-article-heading, .vv-single-poem-heading { padding:clamp(24px,4vw,42px) clamp(22px,5vw,54px) 28px !important; background:#fff !important; }
.vv-single-kicker { display:inline-flex !important; align-items:center; gap:8px; padding:7px 13px; margin:0 0 14px !important; border-radius:999px; background:#f1f2f4; color:#c45d00 !important; font:800 .78rem/1.3 var(--vv-font-sans,sans-serif); letter-spacing:.06em; text-transform:uppercase; }
.vv-single-article-heading h1, .vv-single-poem-heading h1 { margin:0 0 15px !important; color:#1a202c !important; font:700 clamp(2rem,4.3vw,3.15rem)/1.12 var(--vv-font-serif,Georgia,serif) !important; letter-spacing:-.02em; }
.vv-single-categories { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.vv-single-categories a, .vv-single-poem-category { display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; background:#f4f7ef; color:#38734a !important; font-size:.8rem; font-weight:750; text-decoration:none; }
.vv-single-meta { display:flex !important; align-items:center; gap:10px 20px; flex-wrap:wrap; color:#526572 !important; font-size:.88rem; line-height:1.5; }
.vv-single-meta span { display:inline-flex; align-items:center; gap:7px; }
.vv-single-meta i, .vv-single-rating { color:#c45d00 !important; }
.vv-single-meta a { color:#4a5568; font-weight:700; }
.vv-single-featured-image, .vv-single-poem-image { width:100% !important; height:300px !important; overflow:hidden; margin:0 !important; background:#faf8f5; }
.vv-single-featured-image img, .vv-single-poem-image img { display:block !important; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; object-position:center !important; border-radius:0 !important; }
.vv-single-poem-image-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#87959e; background:linear-gradient(135deg,#faf8f5,#f1f2f4); font-size:4rem; }
.vv-single-article-content { max-width:790px; margin:0 auto !important; padding:clamp(25px,5vw,54px) clamp(22px,5vw,40px) !important; color:#2d3748; font-size:1.04rem; line-height:1.9; overflow-wrap:anywhere; }
.vv-single-article-content > :first-child { margin-top:0; }
.vv-single-article-content h2, .vv-single-article-content h3 { margin:2.1em 0 .65em; color:#1a202c; }
.vv-single-article-content p { margin:0 0 1.35em; }
.vv-single-article-content blockquote { margin:2rem 0; padding:1.2rem 1.5rem; border-left:4px solid #c45d00; border-radius:0 12px 12px 0; background:#faf8f5; color:#4a5568; }
.vv-single-article-footer { display:flex; flex-direction:column; gap:18px; margin:0 clamp(22px,5vw,54px); padding:22px 0 30px; border-top:1px solid #f1f2f4; }
.vv-single-tags, .vv-single-share { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.vv-single-tags strong, .vv-single-share strong { margin-right:6px; color:#4a5568; font-size:.88rem; }
.vv-single-tags a { display:inline-flex; padding:5px 10px; border-radius:999px; background:#f4f7ef; color:#38734a; font-size:.8rem; font-weight:700; }
.vv-single-share a { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid #dde3e7; border-radius:9px; color:#4a5568; background:#fff; font-size:.83rem; font-weight:700; }
.vv-single-share a:hover { border-color:#c45d00; color:#c45d00; }
.vv-single-cta { display:flex; align-items:center; justify-content:space-between; gap:28px; margin:28px 0 0; padding:clamp(24px,4vw,42px); border:1px solid #dde3e7; border-radius:18px; background:linear-gradient(120deg,#faf8f5,#ffffff); }
.vv-single-cta h2 { margin:0 0 8px; color:#1a202c; font:700 clamp(1.6rem,3vw,2.2rem)/1.2 var(--vv-font-serif,Georgia,serif); }
.vv-single-cta p { max-width:620px; margin:0; color:#4a5568; line-height:1.65; }
.vv-single-cta-copy .vv-single-kicker { margin-bottom:10px !important; }
.vv-single-cta-button { flex-shrink:0; display:inline-flex; align-items:center; gap:12px; padding:13px 20px; border-radius:10px; background:#c45d00; color:#fff !important; font-weight:800; text-decoration:none; box-shadow:0 6px 16px rgba(253,103,33,.2); }
.vv-single-cta-button:hover { background:#c45d00; transform:translateY(-1px); }
/* Gedichttekst: dezelfde lichte kaarttaal als de kaarten op de voorpagina. */
.vv-single-poem-card .book-preview-card { margin:0 clamp(18px,4vw,42px) 28px !important; padding:0 !important; border:1px solid #dde3e7 !important; border-radius:16px !important; background:#faf8f5 !important; box-shadow:none !important; }
.vv-single-poem-card .book-preview-card .paper-texture { display:none !important; }
.vv-single-poem-card .book-preview-card .preview-inner { padding:clamp(24px,4vw,42px) !important; }
.vv-single-poem-card .book-preview-card h2 { margin:0 0 8px !important; font-size:clamp(1.6rem,3vw,2.25rem) !important; line-height:1.2 !important; }
.vv-single-poem-card .single-poem-lines { font-size:clamp(1.15rem,2vw,1.4rem) !important; line-height:1.9 !important; color:#2d3748 !important; }
.vv-single-poem-card .poem-rating-box { margin:0 clamp(18px,4vw,42px) 24px !important; border:1px solid #dde3e7 !important; border-radius:14px !important; background:#fff !important; }
.vv-single-poem-card .poem-actions-bar { margin:0 clamp(18px,4vw,42px) 32px !important; padding-top:20px !important; }
.vv-single-poem-card .single-poem-image { height:300px !important; }
.vv-single-poem-card .vv-single-poem-heading { padding-top:26px !important; }
.vv-single-poem-card .vv-single-poem-category { margin:0 0 12px 8px; vertical-align:middle; }
.related-poems-section { margin-top:38px !important; }
.related-poems-section > div:first-child { border-bottom:1px solid #dde3e7 !important; }
.related-poems-section .posts-grid-2col { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px !important; }
@media (max-width:700px) {
 .vv-single-post-main, body.single-gebruikers_gedicht .site-main.container-studio { width:calc(100% - 24px) !important; margin:22px auto 42px !important; }
 .vv-single-featured-image, .vv-single-poem-image, .vv-single-poem-card .single-poem-image { height:300px !important; }
 .vv-single-cta { align-items:flex-start; flex-direction:column; }
 .vv-single-cta-button { width:100%; justify-content:center; }
 .vv-single-article-footer { margin-left:22px; margin-right:22px; }
 .related-poems-section .posts-grid-2col { grid-template-columns:minmax(0,1fr) !important; }
}


/* ==========================================================
   VERSIE 22.6 — minder ruimte boven single content en homepage-kaarten hergebruiken
   ========================================================== */
/* Verminder de globale 35px contentafstand specifiek op single gedichten en berichten. */
body.single-gebruikers_gedicht .site-content,
body.single-post .site-content { padding-top: 12px !important; }
body.single-gebruikers_gedicht .site-content > main.site-main,
body.single-post .site-content > main.site-main,
body.single-gebruikers_gedicht main.site-main.container-studio,
body.single-post main.site-main.container-studio { margin-top: 0 !important; padding-top: 0 !important; }
body.single-gebruikers_gedicht main.site-main .blog-studio-layout,
body.single-post main.site-main .blog-studio-layout { margin-top: 0 !important; }
body.single-gebruikers_gedicht .vv-single-poem-card,
body.single-post .vv-single-article-card { margin-top: 0 !important; }

/* Gerelateerde gedichten gebruiken exact dezelfde card-template en grid als de homepage. */
.vv-related-home-section { margin: 2rem 0 2.5rem !important; }
.vv-related-home-section .vv-section-heading { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:18px !important; margin:0 0 22px !important; padding:0 !important; border:0 !important; }
.vv-related-home-section .vv-section-heading h2 { font-family:var(--vv-font-serif, Georgia, serif) !important; font-size:clamp(1.7rem,2.8vw,2.25rem) !important; line-height:1.15 !important; margin:4px 0 0 !important; color:#1A202C !important; }
.vv-related-home-section .vv-section-kicker { display:inline-block !important; color:#c45d00 !important; text-transform:uppercase !important; letter-spacing:.09em !important; font-size:.73rem !important; font-weight:800 !important; }
.vv-related-home-section .vv-section-link { color:#c45d00 !important; font-weight:700 !important; text-decoration:none !important; white-space:nowrap !important; font-size:.92rem !important; }
.vv-related-home-section .blog-cards-grid.vv-home-poems-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px !important; width:100% !important; margin:0 !important; }
.vv-related-home-section .post-card-poetic { position:relative !important; display:flex !important; flex-direction:column !important; min-width:0 !important; min-height:0 !important; height:100% !important; padding:0 !important; overflow:hidden !important; isolation:auto !important; border:1px solid #e7e5e1 !important; border-radius:16px !important; background:#fff !important; box-shadow:0 3px 14px rgba(25,35,45,.07) !important; }
.vv-related-home-section .post-card-thumb { position:relative !important; inset:auto !important; z-index:auto !important; flex:0 0 auto !important; display:block !important; width:100% !important; height:220px !important; min-height:220px !important; margin:0 !important; overflow:hidden !important; background:#f0f1ed !important; }
.vv-related-home-section .post-card-thumb > a,
.vv-related-home-section .post-card-thumb img,
.vv-related-home-section .post-card-placeholder { display:block !important; width:100% !important; height:100% !important; min-height:100% !important; }
.vv-related-home-section .post-card-thumb img { object-fit:cover !important; object-position:center !important; }
.vv-related-home-section .post-card-body { position:relative !important; display:flex !important; flex:1 1 auto !important; flex-direction:column !important; padding:20px !important; background:#fff !important; color:#1A202C !important; }
.vv-related-home-section .post-card-title a { color:#1A202C !important; text-decoration:none !important; }
.vv-related-home-section .post-card-excerpt { color:#4A5568 !important; }
.vv-related-home-section .post-card-footer { margin-top:auto !important; }
.vv-related-home-section .post-card-readmore { color:#c45d00 !important; font-weight:800 !important; }
.vv-related-home-section .post-card-poetic:hover { transform:translateY(-3px) !important; box-shadow:0 10px 24px rgba(25,35,45,.10) !important; }
@media (max-width:680px) {
  .vv-related-home-section .vv-section-heading { align-items:flex-start !important; flex-direction:column !important; gap:8px !important; }
  .vv-related-home-section .blog-cards-grid.vv-home-poems-grid { grid-template-columns:minmax(0,1fr) !important; gap:18px !important; }
  .vv-related-home-section .post-card-thumb { height:200px !important; min-height:200px !important; }
}


/* Vers & Vorm v22.7 — metadata gecentreerd over de uitgelichte afbeelding; flexibele kaarten en royale tussenruimte */
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay {
    position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important;
    width:100% !important; height:300px !important; min-height:300px !important; margin:35px 0 !important;
    overflow:hidden !important; isolation:isolate !important; border-radius:16px !important; background:#dce4dd !important;
}
body.single-gebruikers_gedicht .vv-single-poem-hero-overlay > img,
body.single-gebruikers_gedicht .vv-single-poem-hero-overlay > .vv-single-poem-image-placeholder {
    position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important;
}
body.single-gebruikers_gedicht .vv-single-poem-image-shade {
    position:absolute !important; inset:0 !important; z-index:1 !important;
    background:linear-gradient(180deg,rgba(17,28,24,.35),rgba(17,28,24,.66)) !important;
}
body.single-gebruikers_gedicht .vv-single-poem-heading.vv-single-poem-image-content {
    position:relative !important; z-index:2 !important; width:100% !important; max-width:900px !important;
    margin:0 auto !important; padding:24px clamp(18px,4vw,48px) !important; display:flex !important;
    flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:10px !important;
    text-align:center !important; color:#fff !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
body.single-gebruikers_gedicht .vv-single-poem-image-content .vv-single-kicker { margin:0 !important; color:#fff !important; background:rgba(255,255,255,.16) !important; }
body.single-gebruikers_gedicht .vv-single-poem-image-content .vv-single-poem-category { margin:0 !important; color:#fff !important; background:rgba(255,255,255,.16) !important; }
body.single-gebruikers_gedicht .vv-single-poem-image-content h1 { margin:0 !important; color:#fff !important; text-align:center !important; text-shadow:0 2px 12px rgba(0,0,0,.3) !important; }
body.single-gebruikers_gedicht .vv-single-poem-image-content .vv-single-meta { justify-content:center !important; color:rgba(255,255,255,.94) !important; gap:8px 20px !important; }
body.single-gebruikers_gedicht .vv-single-poem-image-content .vv-single-meta a,
body.single-gebruikers_gedicht .vv-single-poem-image-content .vv-single-meta i,
body.single-gebruikers_gedicht .vv-single-poem-image-content .vv-single-rating { color:#fff !important; }
body.single-gebruikers_gedicht .vv-single-poem-image-content .vv-single-meta a { text-decoration:underline !important; text-underline-offset:3px; }
/* Gerelateerde kaarten volgen hun eigen inhoud; geen kunstmatige vaste kaarthoogtes. */
body.single-gebruikers_gedicht .vv-related-home-section .post-card-poetic,
body.single-gebruikers_gedicht .vv-related-home-section .post-card-body,
body.single-gebruikers_gedicht .related-poems-section .posts-grid-2col > .post-card-poetic,
body.single-gebruikers_gedicht .related-poems-section .posts-grid-2col .post-card-body {
    height:auto !important; min-height:0 !important; max-height:none !important;
}
body.single-gebruikers_gedicht .vv-related-home-section .post-card-body { padding:24px !important; }
body.single-gebruikers_gedicht .vv-related-home-section .post-card-excerpt { margin-bottom:24px !important; }
body.single-gebruikers_gedicht .vv-single-poem-card .book-preview-card { margin-top:35px !important; margin-bottom:35px !important; }
body.single-gebruikers_gedicht .vv-single-poem-card .poem-rating-box { margin-top:35px !important; margin-bottom:35px !important; }
body.single-gebruikers_gedicht .vv-single-poem-card .poem-actions-bar { margin-top:35px !important; margin-bottom:40px !important; }
body.single-gebruikers_gedicht .vv-related-home-section { margin-top:45px !important; margin-bottom:45px !important; }
@media (max-width:700px) {
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay { height:300px !important; min-height:300px !important; margin:35px 0 !important; }
  body.single-gebruikers_gedicht .vv-single-poem-image-content { padding:18px 14px !important; gap:7px !important; }
  body.single-gebruikers_gedicht .vv-single-poem-image-content h1 { font-size:clamp(1.65rem,7vw,2.35rem) !important; }
  body.single-gebruikers_gedicht .vv-single-poem-image-content .vv-single-meta { font-size:.78rem !important; gap:6px 12px !important; }
  body.single-gebruikers_gedicht .vv-related-home-section .post-card-body { padding:18px !important; }
}


/* v22.8: rondom ruimte om de uitgelichte afbeelding op single gedichten */
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay {
  margin: 30px !important;
  width: auto !important;
  box-sizing: border-box !important;
}
@media (max-width:700px) {
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay {
    margin: 30px !important;
    width: auto !important;
  }
}


/* v22.9: kopafbeelding zonder overlay; titel en metadata staan eronder */
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay {
  position: relative !important;
  margin: 30px !important;
  width: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay .vv-single-poem-image-shade { display: none !important; }
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-heading-below-image {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  margin: 0 30px 35px !important;
  padding: 0 !important;
  text-align: center !important;
  color: inherit !important;
  background: transparent !important;
  text-shadow: none !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-heading-below-image h1,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-heading-below-image .vv-single-meta,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-heading-below-image .vv-single-meta a { color: inherit !important; text-shadow: none !important; }
@media (max-width:700px) {
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay { margin: 30px !important; width: auto !important; }
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-heading-below-image { margin: 0 30px 30px !important; }
}


/* v22.12: de header-spacer verzorgt de 35px; geen extra template-marges. */

/* Homepage hero blijft direct onder het menu; 0px is binnen de afgesproken maximumafstand. */
body.home .site-content,
body.front-page .site-content,
.site-content:has(.site-hero-slanted) {
    padding-top: 0 !important;
}
.site-hero-slanted {
    margin-top: 0 !important;
}
.site-hero-slanted + .site-main,
body.home .site-hero-slanted + .site-main,
body.front-page .site-hero-slanted + .site-main {
    margin-top: 35px !important;
}


/* v22.13: geen extra ruimte boven de inhoudscontainer. De aparte spacer van 35px in header.php blijft behouden. */
.site-content {
    padding-top: 0 !important;
}


/* v22.14: overal geen extra ruimte boven .site-content; de 35px spacer in header.php blijft intact. */
.site-content,
body .site-content,
body #page .site-content,
body .site-content.container,
body .site-content.container-fluid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body .site-content > :first-child,
body .site-content > *:first-child,
body .site-content > .site-main:first-child,
body .site-content > article:first-child,
body .site-content > section:first-child,
body .site-content > .builder-wrapper:first-child,
body .site-content > .container-studio:first-child,
body .site-content > .vv-theme-landing-page:first-child,
body .site-content > .themas-hero-section:first-child,
body .site-content > .single-page-container:first-child {
    margin-top: 0 !important;
}


/* v22.15: consistente 35px tussen header en eerste pagina-element; homepagebreedte gelijk aan menu. */
.vv-header-content-spacer {
    display: block !important;
    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}
/* De spacer in header.php levert de volledige afstand; voorkom dat een template er extra bovenruimte aan toevoegt. */
body .site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body .site-content > :first-child,
body .site-content > *:first-child {
    margin-top: 0 !important;
}
/* Voorpagina: dezelfde buitenbreedte en centrering als de menu-container. */
body.home .vv-home-hero-wrap,
body.front-page .vv-home-hero-wrap,
body.home .site-content > .container-studio:first-child,
body.front-page .site-content > .container-studio:first-child,
body.home main.site-main.container-studio,
body.front-page main.site-main.container-studio,
body.home main.vv-home-main,
body.front-page main.vv-home-main {
    width: calc(100% - 32px) !important;
    max-width: 1280px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}
body.home .vv-home-hero-wrap > .container-studio,
body.front-page .vv-home-hero-wrap > .container-studio {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
body.home .vv-home-hero-wrap .site-hero-slanted,
body.front-page .vv-home-hero-wrap .site-hero-slanted,
body.home .vv-home-hero-wrap .homepage-hero-rounded,
body.front-page .vv-home-hero-wrap .homepage-hero-rounded {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
@media (max-width: 700px) {
    body.home .vv-home-hero-wrap,
    body.front-page .vv-home-hero-wrap,
    body.home main.site-main.container-studio,
    body.front-page main.site-main.container-studio,
    body.home main.vv-home-main,
    body.front-page main.vv-home-main {
        width: calc(100% - 24px) !important;
    }
}


/* v22.16 — mobiel: homepagekaarten exact even breed als de hero-sectie */
@media (max-width: 640px) {
    body.home .vv-home-hero-wrap,
    body.front-page .vv-home-hero-wrap,
    body.home main.vv-home-main,
    body.front-page main.vv-home-main {
        width: calc(100% - 24px) !important;
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    body.home .vv-home-main .vv-home-primary-layout,
    body.front-page .vv-home-main .vv-home-primary-layout,
    body.home .vv-home-main .blog-content-area,
    body.front-page .vv-home-main .blog-content-area,
    body.home .vv-home-main .vv-home-poems,
    body.front-page .vv-home-main .vv-home-poems,
    body.home .vv-home-main .vv-home-blog-section,
    body.front-page .vv-home-main .vv-home-blog-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    body.home .vv-home-poems-grid,
    body.front-page .vv-home-poems-grid,
    body.home .vv-home-articles-grid,
    body.front-page .vv-home-articles-grid,
    body.home .vv-home-main .blog-cards-grid,
    body.front-page .vv-home-main .blog-cards-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    body.home .vv-home-poems-grid > .post-card-poetic,
    body.front-page .vv-home-poems-grid > .post-card-poetic,
    body.home .vv-home-articles-grid > .post-card-poetic,
    body.front-page .vv-home-articles-grid > .post-card-poetic,
    body.home .vv-home-main .blog-cards-grid > *,
    body.front-page .vv-home-main .blog-cards-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}


/* v22.17 — expliciete mobiele homepage-uitlijning; kaarten exact even breed als hero */
@media screen and (max-width: 640px) {
  body.home .vv-home-hero-wrap,
  body.front-page .vv-home-hero-wrap,
  body.home main.site-main.vv-home-main,
  body.front-page main.site-main.vv-home-main {
    display: block !important;
    width: calc(100vw - 32px) !important;
    max-width: 1280px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.home .vv-home-hero-wrap > .container-studio,
  body.front-page .vv-home-hero-wrap > .container-studio,
  body.home main.vv-home-main > .vv-home-primary-layout,
  body.front-page main.vv-home-main > .vv-home-primary-layout,
  body.home main.vv-home-main > .vv-home-blog-section,
  body.front-page main.vv-home-main > .vv-home-blog-section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.home .vv-home-hero-wrap .site-hero-slanted,
  body.front-page .vv-home-hero-wrap .site-hero-slanted,
  body.home .vv-home-hero-wrap .homepage-hero-rounded,
  body.front-page .vv-home-hero-wrap .homepage-hero-rounded,
  body.home .vv-home-main .vv-home-poems,
  body.front-page .vv-home-main .vv-home-poems,
  body.home .vv-home-main .vv-home-blog-section,
  body.front-page .vv-home-main .vv-home-blog-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.home .vv-home-main .vv-home-poems-grid,
  body.front-page .vv-home-main .vv-home-poems-grid,
  body.home .vv-home-main .vv-home-articles-grid,
  body.front-page .vv-home-main .vv-home-articles-grid,
  body.home .vv-home-main .blog-cards-grid,
  body.front-page .vv-home-main .blog-cards-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }
  body.home .vv-home-main .vv-home-poems-grid > *,
  body.front-page .vv-home-main .vv-home-poems-grid > *,
  body.home .vv-home-main .vv-home-articles-grid > *,
  body.front-page .vv-home-main .vv-home-articles-grid > *,
  body.home .vv-home-main .blog-cards-grid > *,
  body.front-page .vv-home-main .blog-cards-grid > * {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.home .vv-home-main .vv-home-primary-layout .sidebar,
  body.front-page .vv-home-main .vv-home-primary-layout .sidebar,
  body.home .vv-home-main .vv-home-primary-layout aside,
  body.front-page .vv-home-main .vv-home-primary-layout aside {
    display: none !important;
  }
}


/* v22.18: verwijder de extra bovenruimte binnen site-content op alle niet-homepagina's.
   De transparante spacer van 35px in header.php blijft behouden. */
body:not(.home):not(.front-page) #page > .site-content,
body:not(.home):not(.front-page) .site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Voorkom dat de eerste template-wrapper zelf opnieuw extra ruimte toevoegt. */
body:not(.home):not(.front-page) .site-content > :first-child,
body:not(.home):not(.front-page) .site-content > *:first-child,
body:not(.home):not(.front-page) .site-content > .container-studio:first-child,
body:not(.home):not(.front-page) .site-content > .site-main:first-child,
body:not(.home):not(.front-page) .site-content > .builder-wrapper:first-child,
body:not(.home):not(.front-page) .site-content > .vv-theme-landing-page:first-child,
body:not(.home):not(.front-page) .site-content > .themas-hero-section:first-child,
body:not(.home):not(.front-page) .site-content > .single-page-container:first-child,
body:not(.home):not(.front-page) .site-content > article:first-child,
body:not(.home):not(.front-page) .site-content > section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* v22.19 — thema-landingspagina's in homepage-hero-stijl en sitebreed 1280px-grid */
:root { --vv-site-max-width: 1280px; }
.site-wrapper { width:100%; max-width:none; margin-left:auto; margin-right:auto; }
.header-container,
.studio-subnav-items,
.studio-subnav-bar .container-studio { max-width:1280px !important; }
.site-content > .site-main,
.site-content > .vv-theme-landing-page,
.site-content > .vv-home-hero-wrap,
.site-content > .container-studio,
.site-content > .single-page-container,
.site-content > .builder-wrapper,
.site-content > article,
.site-content > section {
    width: min(1280px, calc(100% - 32px)) !important;
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}
.site-content > .vv-home-hero-wrap { width:100% !important; max-width:none !important; padding-left:0 !important; padding-right:0 !important; }
.site-content > .vv-home-hero-wrap > .container-studio { width:calc(100% - 32px) !important; max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; }
.site-main.container-studio,
main.site-main,
.vv-theme-landing-page,
.vv-archive-layout,
.vv-theme-latest-poems { max-width:1280px !important; }
.vv-theme-landing-page { width:calc(100% - 32px) !important; padding:0 0 42px !important; }
.vv-theme-home-hero-wrap { width:100%; max-width:100%; padding:0; margin:0; }
.vv-theme-home-hero {
    position:relative; isolation:isolate; display:flex; align-items:center; overflow:hidden;
    width:100%; min-height:410px; border-radius:20px; border:1px solid #f1f2f4;
    background:#FAF8F5; box-shadow:0 14px 34px rgba(26,32,44,.10); box-sizing:border-box;
}
.vv-theme-home-hero-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.38; }
.vv-theme-home-hero-inner { position:relative; z-index:2; width:100%; padding:clamp(28px,5vw,64px); box-sizing:border-box; }
.vv-theme-home-hero-copy { max-width:760px; margin:0 auto 0 0; text-align:left; }
.vv-theme-home-kicker { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:#f1f2f4; color:#c45d00; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.vv-theme-home-hero h1 { margin:12px 0 16px; color:#1A202C; font:700 clamp(2.4rem,4.4vw,3.8rem)/1.08 var(--vv-font-serif,Georgia,serif); }
.vv-theme-home-hero-copy > p,
.vv-theme-home-desc { max-width:650px; margin:0 0 25px; color:#4A5568; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.7; }
.vv-theme-home-desc p { margin:0; }
.vv-theme-home-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px; }
.vv-theme-home-actions .vv-btn-warm-light { display:inline-flex; align-items:center; gap:9px; }
.vv-theme-ideas-section { margin-top:30px !important; margin-bottom:30px !important; padding:22px 24px; border:1px solid #dde3e7; border-radius:16px; background:linear-gradient(120deg,#FAF8F5,#ffffff); box-sizing:border-box; }
.vv-theme-ideas-heading { display:flex; align-items:center; gap:13px; margin-bottom:15px; }
.vv-theme-ideas-icon { display:flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; height:42px; border-radius:12px; color:#c45d00; background:#f1f2f4; font-size:1.1rem; }
.vv-theme-ideas-heading h2 { margin:0; color:#1A202C; font:700 1.55rem/1.2 var(--vv-font-serif,Georgia,serif); }
.vv-theme-ideas-heading p { margin:4px 0 0; color:#667085; font-size:.93rem; line-height:1.5; }
.vv-theme-ideas-section .vv-theme-chips-bar { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; margin:0; }
.vv-theme-ideas-actions { display:flex; flex-wrap:wrap; gap:10px; }
.vv-theme-ideas-actions .vv-topic-chip { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.vv-landing-builder-container { scroll-margin-top:110px; }
.vv-taxonomy-theme-hero-wrap { margin-bottom:0; }
.vv-taxonomy-ideas-section { margin-bottom:30px !important; }
@media(max-width:640px) {
  .site-content > .site-main,
  .site-content > .vv-theme-landing-page,
  .site-content > .container-studio,
  .site-content > article,
  .site-content > section { width:calc(100% - 24px) !important; }
  .vv-theme-landing-page { width:calc(100% - 24px) !important; }
  .vv-theme-home-hero { min-height:340px; border-radius:16px; }
  .vv-theme-home-hero-inner { padding:26px !important; }
  .vv-theme-home-hero h1 { font-size:clamp(2rem,8vw,2.8rem); }
  .vv-theme-home-actions { flex-direction:column; align-items:stretch; }
  .vv-theme-home-actions a { justify-content:center; }
  .vv-theme-ideas-section { padding:18px 16px; }
  .vv-theme-ideas-heading { align-items:flex-start; }
  .vv-theme-ideas-heading h2 { font-size:1.35rem; }
}

/* v22.20: Verberg uitsluitend de oude Gedichtenstudio-hero op thema-landingspagina's.
   De nieuwe themaspecifieke hero en de homepage-hero blijven ongemoeid. */
body.tax-gedicht_thema .vv-studio-hero,
body.page-template-page-thema-builder .vv-studio-hero {
    display: none !important;
}


/* v22.21: titel, datum en auteur staan over de uitgelichte afbeelding op single gedichten. */
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 340px !important;
  height: clamp(300px, 36vw, 440px) !important;
  margin: 30px !important;
  width: auto !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 16px !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay > img,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay > .vv-single-poem-image-placeholder {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-shade {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(12,20,17,.20) 0%, rgba(12,20,17,.68) 100%) !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-heading.vv-single-poem-image-content {
  position: relative !important;
  z-index: 2 !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 28px clamp(18px, 4vw, 48px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  text-align: center !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-kicker,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-poem-category {
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content h1 {
  margin: 0 !important;
  color: #fff !important;
  text-align: center !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.4) !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px 20px !important;
  color: rgba(255,255,255,.96) !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-meta a,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-meta i,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-rating { color: #fff !important; }
@media (max-width: 700px) {
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay {
    height: 340px !important;
    min-height: 340px !important;
    margin: 18px !important;
  }
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content { padding: 18px 12px !important; gap: 8px !important; }
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content h1 { font-size: clamp(1.6rem, 7vw, 2.25rem) !important; }
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-meta { font-size: .8rem !important; gap: 6px 12px !important; }
}


/* v22.22: titel, datum en auteur zwart op de uitgelichte afbeelding van single gedichten. */
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-shade {
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.78) 100%) !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-heading.vv-single-poem-image-content,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content h1,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-meta,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-meta a,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-meta i,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-rating,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-kicker,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-poem-category {
  color: #000 !important;
  text-shadow: none !important;
}
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-kicker,
body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-poem-category {
  background: rgba(255,255,255,.78) !important;
}

/* v22.23: uniforme mobiele basis voor de volledige website */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
input, select, textarea, button { max-width: 100%; font: inherit; }
button, input[type="submit"], input[type="button"], .button, .vv-btn { touch-action: manipulation; }

@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.6; }
  #page, .site, .site-content, .site-main, main, article, .entry-content { min-width: 0; max-width: 100%; }
  #page > .site-content, .site-content {
    width: 100%; max-width: 100%; margin-left: auto; margin-right: auto;
    padding-left: 0; padding-right: 0;
  }
  .site-content > .site-main,
  .site-content > .vv-theme-landing-page,
  .site-content > .container-studio,
  .site-content > .single-page-container,
  .site-content > .builder-wrapper,
  .site-content > article,
  .site-content > section,
  .site-main.container-studio,
  .container-studio,
  .single-page-container,
  .builder-wrapper,
  .vv-landing-builder-container {
    width: calc(100% - 28px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .site-content > .vv-home-hero-wrap { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  .site-content > .vv-home-hero-wrap > .container-studio { width: calc(100% - 28px) !important; }
  .header-container, .studio-subnav-bar .container-studio { width: calc(100% - 28px) !important; max-width: 100% !important; }

  /* Gelijke uitlijning en ritme tussen secties en kaarten */
  .site-content section, .entry-content section { min-width: 0; }
  .entry-content > * + *, .site-main > * + * { margin-top: 20px; }
  .site-content .wp-block-columns { gap: 16px !important; }
  .site-content .wp-block-column { min-width: 0; }
  .site-content .wp-block-image img { display: block; margin-left: auto; margin-right: auto; }
  .site-content .wp-block-table, .site-content table { max-width: 100%; }
  .site-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-content pre, .entry-content pre { max-width: 100%; overflow-x: auto; }
  .site-content iframe, .entry-content iframe { max-width: 100%; }

  /* Kaarten en grids stapelen netjes op smalle schermen */
  .vv-poem-grid, .poem-grid, .posts-grid, .blog-grid, .vv-card-grid,
  .vv-theme-grid, .themes-grid, .studio-card-grid, .album-grid,
  .author-grid, .profile-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .vv-poem-card, .poem-card, .vv-theme-card, .theme-card, .studio-card,
  .vv-card, .album-card, .author-card, .profile-card { min-width: 0; max-width: 100%; }

  /* Koppen en knoppen hebben consistente maat en uitlijning */
  h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); line-height: 1.12; }
  h2 { font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1.2; }
  h3 { font-size: clamp(1.2rem, 5vw, 1.55rem); line-height: 1.25; }
  .hero-main-title { overflow-wrap: anywhere; }
  .hero-action-buttons, .vv-studio-hero-buttons, .wp-block-buttons {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
  }
  .hero-action-buttons > a, .vv-studio-hero-buttons > a, .wp-block-buttons .wp-block-button {
    min-width: 0; max-width: 100%;
  }
  .hero-action-buttons > a, .vv-studio-hero-buttons > a { min-height: 44px; }
  .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; white-space: normal; }

  /* Hero's schalen zonder zijdelingse uitstulping */
  body.home .vv-home-hero, body.front-page .vv-home-hero { min-height: 0; border-radius: 16px !important; }
  body.home .vv-home-hero .hero-inner-container,
  body.front-page .vv-home-hero .hero-inner-container { padding: 24px 20px !important; }
  body.home .vv-home-hero .hero-action-buttons,
  body.front-page .vv-home-hero .hero-action-buttons { gap: 10px; }
  body.home .vv-home-hero .hero-action-buttons > a,
  body.front-page .vv-home-hero .hero-action-buttons > a { flex: 1 1 100%; text-align: center; justify-content: center; }

  /* Single gedichten: afbeelding en metadata binnen dezelfde mobiele marges */
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay {
    width: 100% !important; margin: 0 !important; min-height: 280px !important; height: 300px !important; border-radius: 14px !important;
  }
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content { padding: 20px 14px !important; }
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content .vv-single-meta { flex-wrap: wrap; gap: 6px 12px !important; }

  /* Formulieren, profiel- en studio-invoer */
  .site-content form, .entry-content form { min-width: 0; max-width: 100%; }
  .site-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .site-content select, .site-content textarea,
  .entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .entry-content select, .entry-content textarea { width: 100%; min-width: 0; }
  .site-content textarea, .entry-content textarea { resize: vertical; }
  .site-footer, footer { overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
  .site-content > .site-main,
  .site-content > .vv-theme-landing-page,
  .site-content > .container-studio,
  .site-content > .single-page-container,
  .site-content > .builder-wrapper,
  .site-content > article,
  .site-content > section,
  .site-main.container-studio,
  .container-studio,
  .single-page-container,
  .builder-wrapper,
  .vv-landing-builder-container,
  .header-container,
  .studio-subnav-bar .container-studio { width: calc(100% - 22px) !important; }
  body.home .vv-home-hero .hero-inner-container,
  body.front-page .vv-home-hero .hero-inner-container { padding: 20px 16px !important; }
}


/* ======================================================================
   VERS & VORM — RESPONSIVE DESIGN SYSTEM v22.26
   Eén samenhangende basis voor desktop, tablet en mobiel.
   ====================================================================== */
:root {
  --vv-ink: #252b32;
  --vv-ink-soft: #48515b;
  --vv-muted: #6d747c;
  --vv-paper: #ffffff;
  --vv-paper-deep: #f1f2f4;
  --vv-surface: #fffdf9;
  --vv-line: #dde3e7;
  --vv-forest: #315d4d;
  --vv-forest-deep: #244638;
  --vv-clay: #c45d00;
  --vv-focus: #285f9f;
  --vv-radius-sm: 10px;
  --vv-radius-md: 16px;
  --vv-radius-lg: 24px;
  --vv-content-max: 1240px;
  --vv-reading-max: 760px;
  --vv-gutter: clamp(16px, 3.2vw, 32px);
  --vv-section-space: clamp(28px, 5vw, 64px);
  --vv-card-shadow: 0 8px 28px rgba(45, 35, 25, .055);
  --vv-card-shadow-hover: 0 14px 36px rgba(45, 35, 25, .10);
}

html { scroll-padding-top: 150px; }
body {
  color: var(--vv-ink);
  background: var(--vv-paper);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body, button, input, select, textarea { font-family: var(--vv-font-sans, system-ui, sans-serif); }
h1, h2, h3, h4, h5, h6,
.site-branding .site-title,
.entry-title, .entry-content blockquote,
.vv-single-poem-content, .poem-content, .poem-text {
  font-family: var(--vv-font-serif, Georgia, serif);
  color: var(--vv-ink);
  text-wrap: pretty;
}
p { text-wrap: pretty; }
a { text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--vv-focus) !important;
  outline-offset: 3px !important;
}
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
button, input[type="submit"], input[type="button"], .button, .vv-btn,
.wp-block-button__link { min-height: 44px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  max-width: 100%; border-radius: var(--vv-radius-sm);
}
::selection { background: #dbe7df; color: var(--vv-ink); }

/* Gedeelde breedtes en verticale ritmes */
.container-studio, .container-narrow, .site-main.container-studio,
.site-main.single-page-container, .single-page-container, .builder-wrapper,
.vv-theme-landing-page, .vv-landing-builder-container, .themas-hero-section,
.vv-contact-container {
  box-sizing: border-box;
}
.container-studio { width: min(calc(100% - 2 * var(--vv-gutter)), var(--vv-content-max)); }
.container-narrow { width: min(calc(100% - 2 * var(--vv-gutter)), var(--vv-reading-max)); }
.site-content { min-width: 0; }
.site-content > * { min-width: 0; }
.site-content section + section { margin-top: clamp(24px, 3.5vw, 44px); }
.entry-content { min-width: 0; }
.entry-content > * { max-width: 100%; }
.entry-content > p, .entry-content > ul, .entry-content > ol,
.entry-content > blockquote { max-width: var(--vv-reading-max); }

/* Header: minder visuele ruis, duidelijkere primaire navigatie */
.site-header {
  background: rgba(255, 253, 249, .97);
  border-bottom: 1px solid var(--vv-line);
  box-shadow: 0 4px 20px rgba(45, 35, 25, .045);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.header-container {
  width: min(calc(100% - 2 * var(--vv-gutter)), var(--vv-content-max));
  padding: 14px 0;
  gap: 24px;
}
.site-branding .site-title { font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.08; letter-spacing: -.025em; }
.site-branding .site-title a { text-decoration: none; }
.site-description { margin-top: 4px; line-height: 1.35; }
.primary-navigation li a { min-height: 42px; border-radius: 999px; transition: background .18s ease, color .18s ease; }
.primary-navigation li a:hover,
.primary-navigation li.current-menu-item > a,
.primary-navigation li.current-menu-ancestor > a { background: #edf2ed; color: var(--vv-forest-deep); }
.btn-header-auth { min-height: 44px; padding-inline: 16px; background: var(--vv-forest); color: #fff; border-color: var(--vv-forest); }
.btn-header-auth:hover { background: var(--vv-forest-deep); color: #fff !important; border-color: var(--vv-forest-deep); }
.studio-subnav-bar { background: #f1f2f4; border-top-color: #f1f2f4; border-bottom-color: #dde3e7; padding: 8px 0; }
.studio-subnav-bar .container-studio { width: min(calc(100% - 2 * var(--vv-gutter)), var(--vv-content-max)); }
.studio-subnav-items { gap: 8px; padding: 0; }
.studio-subnav-items a { min-height: 40px; border-radius: 999px; padding: 8px 13px; border-color: #dde3e7; box-shadow: none; color: #414a50; }
.studio-subnav-items a:hover, .studio-subnav-items a.active { border-color: #9bb6a6; background: #e8f0e9; color: var(--vv-forest-deep); box-shadow: none; }
.studio-subnav-items a i { color: var(--vv-forest); }
.studio-subnav-items a.subnav-highlight-prominent { background: var(--vv-forest); color: #fff; border-color: var(--vv-forest); }
.studio-subnav-items a.subnav-highlight-prominent i { color: #fff; }
.vv-header-content-spacer { height: clamp(12px, 2vw, 24px) !important; }

/* Algemene kaarten en inhoudsblokken */
.post-card, .vv-poem-card, .poem-card, .vv-theme-card, .theme-card,
.studio-card, .vv-card, .album-card, .author-card, .profile-card,
.vv-archive-grid > *, .vv-home-poems-grid > *, .vv-home-articles-grid > * {
  min-width: 0;
}
.post-card, .vv-poem-card, .poem-card, .vv-theme-card, .theme-card,
.studio-card, .vv-card, .album-card, .author-card, .profile-card {
  overflow-wrap: anywhere;
}
.post-card img, .vv-poem-card img, .poem-card img, .album-card img,
.author-card img, .profile-card img { max-width: 100%; }
.post-card a, .vv-poem-card a, .poem-card a, .vv-theme-card a { overflow-wrap: anywhere; }
.post-card:hover, .vv-poem-card:hover, .poem-card:hover, .vv-theme-card:hover,
.theme-card:hover, .studio-card:hover, .vv-card:hover, .album-card:hover,
.author-card:hover, .profile-card:hover { box-shadow: var(--vv-card-shadow-hover); }

/* Gedichten: leescomfort en herkenbare teksthiërarchie */
.vv-single-poem-card, .vv-single-article-card, .single-page-container,
.vv-poem-detail, .poem-detail, .entry-content .wp-block-quote {
  min-width: 0;
}
.vv-single-poem-content, .poem-content, .poem-text {
  font-size: clamp(1.08rem, 1.3vw, 1.25rem);
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.entry-content blockquote, blockquote {
  border-left-color: #b7cbbd;
}

/* Formulieren, zoekvelden en bedieningselementen */
form { min-width: 0; }
input, select, textarea { min-width: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="number"], input[type="tel"], select, textarea {
  border-color: #dde3e7;
  background-color: #fffdf9;
}
input:focus, select:focus, textarea:focus { border-color: #789a86; box-shadow: 0 0 0 3px rgba(49, 93, 77, .12); }

/* Tablet: benut ruimte zonder de leesbaarheid op te offeren */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --vv-gutter: 24px; --vv-section-space: 42px; }
  .header-container { flex-wrap: wrap; gap: 12px 20px; padding-block: 12px; }
  .site-branding { flex: 0 0 auto; }
  .header-navigation-wrapper { flex: 1 1 100%; justify-content: space-between; gap: 12px; }
  .primary-navigation ul { flex-wrap: wrap; gap: 4px; }
  .primary-navigation li a { padding: 8px 11px; font-size: .9rem; }
  .studio-subnav-items { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
  .studio-subnav-items a { flex: 0 0 auto; }
  .vv-home-poems-grid, .vv-home-articles-grid, .vv-archive-grid,
  .posts-grid, .blog-grid, .vv-card-grid, .vv-theme-grid, .themes-grid,
  .album-grid, .author-grid, .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vv-header-content-spacer { height: 14px !important; }
}

/* Mobiel: één rustige header, compact menu en bruikbare kaarten */
@media (max-width: 767px) {
  :root { --vv-gutter: 17px; --vv-section-space: 32px; }
  html { scroll-padding-top: 125px; }
  body { font-size: 16px !important; line-height: 1.65 !important; overflow-x: clip !important; }
  .site-header { position: sticky; top: 0; }
  .header-container {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    width: calc(100% - 34px) !important;
    padding: 12px 0 !important;
    min-height: 66px;
    gap: 12px !important;
  }
  .site-branding { width: auto !important; max-width: calc(100% - 58px) !important; text-align: left !important; flex: 1 1 auto; }
  .site-branding .site-title { text-align: left !important; font-size: clamp(1.25rem, 5vw, 1.6rem) !important; line-height: 1.12 !important; }
  .site-branding .site-title a { display: block; }
  .site-branding .site-description { display: none; }
  .custom-logo-link img { max-height: 42px !important; width: auto; margin: 0 !important; }
  .menu-toggle {
    display: inline-flex !important;
    flex: 0 0 44px;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 1px solid var(--vv-line) !important;
    border-radius: 13px !important;
    background: var(--vv-surface) !important;
    color: var(--vv-forest-deep) !important;
    box-shadow: none !important;
    font-size: 1.15rem !important;
  }
  .header-navigation-wrapper {
    display: none !important;
    position: absolute !important;
    top: calc(100% - 1px) !important;
    left: -17px !important;
    right: -17px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 17px 18px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    background: var(--vv-surface) !important;
    border: 1px solid var(--vv-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 18px 30px rgba(40, 32, 24, .12) !important;
    max-height: min(72vh, 560px);
    overflow-y: auto;
  }
  .header-navigation-wrapper.is-active { display: flex !important; }
  .primary-navigation { width: 100%; }
  .primary-navigation ul, .primary-navigation ul ul {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .primary-navigation li { width: 100%; }
  .primary-navigation li a {
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    white-space: normal !important;
    font-size: 1rem !important;
  }
  .primary-navigation ul ul { padding-left: 14px !important; }
  .header-auth-action { display: flex !important; width: 100%; }
  .btn-header-auth { width: 100%; justify-content: center; }
  .studio-subnav-bar { padding: 7px 0 !important; }
  .studio-subnav-bar .container-studio { width: 100% !important; max-width: 100% !important; padding: 0 17px !important; }
  .studio-subnav-items {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 1px 5px !important;
  }
  .studio-subnav-items::-webkit-scrollbar { display: none; }
  .studio-subnav-items a { flex: 0 0 auto !important; min-height: 40px !important; padding: 8px 12px !important; font-size: .82rem !important; }
  .vv-header-content-spacer { height: 10px !important; }
  .site-content { width: 100% !important; max-width: 100% !important; padding-inline: 0 !important; }
  .site-content > .site-main, .site-content > .vv-theme-landing-page,
  .site-content > .container-studio, .site-content > .single-page-container,
  .site-content > .builder-wrapper, .site-content > article, .site-content > section,
  .site-main.container-studio, .container-studio, .single-page-container,
  .builder-wrapper, .vv-landing-builder-container, .themas-hero-section,
  .vv-contact-container {
    width: calc(100% - 34px) !important;
    max-width: var(--vv-content-max) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .site-content > .vv-home-hero-wrap, body.home .vv-home-hero-wrap,
  body.front-page .vv-home-hero-wrap { width: 100% !important; max-width: 100% !important; }
  .site-content > .vv-home-hero-wrap > .container-studio,
  body.home .vv-home-hero-wrap > .container-studio,
  body.front-page .vv-home-hero-wrap > .container-studio { width: calc(100% - 34px) !important; }
  .site-content section + section { margin-top: 26px; }
  .entry-content > * + * { margin-top: 1.05em; }
  h1, .entry-title { font-size: clamp(1.8rem, 8vw, 2.45rem) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(1.45rem, 6vw, 1.95rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(1.2rem, 5vw, 1.55rem) !important; line-height: 1.25 !important; }
  .vv-home-hero, body.home .vv-home-hero, body.front-page .vv-home-hero {
    min-height: 0 !important; border-radius: 18px !important; margin-inline: 0 !important;
  }
  body.home .vv-home-hero .hero-inner-container,
  body.front-page .vv-home-hero .hero-inner-container { padding: 25px 20px !important; }
  body.home .vv-home-hero .hero-main-title,
  body.front-page .vv-home-hero .hero-main-title { font-size: clamp(2rem, 9vw, 2.7rem) !important; line-height: 1.08 !important; }
  body.home .vv-home-hero .hero-action-buttons,
  body.front-page .vv-home-hero .hero-action-buttons { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  body.home .vv-home-hero .hero-action-buttons > a,
  body.front-page .vv-home-hero .hero-action-buttons > a { width: 100% !important; min-height: 48px !important; }
  .vv-home-poems-grid, .vv-home-articles-grid, .vv-archive-grid,
  .posts-grid, .blog-grid, .vv-card-grid, .vv-theme-grid, .themes-grid,
  .studio-card-grid, .album-grid, .author-grid, .profile-grid,
  .vv-poem-grid, .poem-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .post-card, .vv-poem-card, .poem-card, .vv-theme-card, .theme-card,
  .studio-card, .vv-card, .album-card, .author-card, .profile-card {
    width: 100%; min-width: 0; max-width: 100%; border-radius: 15px;
  }
  .post-card img, .vv-poem-card img, .poem-card img, .album-card img { max-width: 100%; }
  .vv-single-poem-card .vv-single-poem-image.vv-single-poem-hero-overlay {
    width: 100% !important; max-width: 100% !important; min-height: 280px !important;
    height: clamp(280px, 82vw, 360px) !important; margin: 0 !important; border-radius: 16px !important;
  }
  body.single-gebruikers_gedicht .vv-single-poem-card .vv-single-poem-image-content { padding: 20px 14px !important; }
  .vv-single-poem-content, .poem-content, .poem-text { font-size: 1.08rem; line-height: 1.85; }
  .hero-action-buttons, .vv-studio-hero-buttons, .wp-block-buttons { gap: 10px !important; }
  .hero-action-buttons > a, .vv-studio-hero-buttons > a { min-height: 46px; }
  .site-content form, .entry-content form { width: 100%; max-width: 100%; }
  .site-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .site-content select, .site-content textarea,
  .entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .entry-content select, .entry-content textarea { width: 100%; min-width: 0; }
  .site-content .wp-block-columns { flex-wrap: wrap !important; gap: 18px !important; }
  .site-content .wp-block-column { flex-basis: 100% !important; min-width: 0 !important; }
  .site-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-content pre, .entry-content pre { max-width: 100%; overflow-x: auto; }
  .site-footer, footer { overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
  :root { --vv-gutter: 11px; }
  .header-container { width: calc(100% - 22px) !important; }
  .header-navigation-wrapper { left: -11px !important; right: -11px !important; padding-inline: 11px !important; }
  .site-content > .site-main, .site-content > .vv-theme-landing-page,
  .site-content > .container-studio, .site-content > .single-page-container,
  .site-content > .builder-wrapper, .site-content > article, .site-content > section,
  .site-main.container-studio, .container-studio, .single-page-container,
  .builder-wrapper, .vv-landing-builder-container, .themas-hero-section,
  .vv-contact-container { width: calc(100% - 22px) !important; }
  body.home .vv-home-hero .hero-inner-container,
  body.front-page .vv-home-hero .hero-inner-container { padding: 21px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ======================================================================
   VERS & VORM 22.27 — RESPONSIVE AUDIT / HEADER + PAGE WIDTHS
   Definitieve overrides om conflicterende oudere mobiele regels te winnen.
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; }
body, .site-wrapper { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
img, video, iframe, embed, object { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.site-header { width: 100%; max-width: none; margin: 0; overflow: visible; }
.site-header > .header-container { width: 100%; max-width: none; margin: 0; }
.site-header .studio-subnav-bar { width: 100%; max-width: none; }
.site-header .studio-subnav-bar .container-studio { width: 100%; max-width: 100%; margin-inline: auto; }

@media (max-width: 767px) {
  :root { --vv-gutter: 16px; --vv-section-space: 28px; }
  .site-header { position: sticky; top: 0; z-index: 10000; }
  .site-header > .header-container {
    position: relative !important; display: flex !important; flex-direction: row !important;
    align-items: center !important; justify-content: space-between !important;
    gap: 10px !important; width: 100% !important; max-width: none !important;
    min-height: 60px !important; margin: 0 !important;
    padding: 8px clamp(12px, 3.5vw, 20px) !important;
    text-align: left !important;
  }
  .site-branding {
    display: block !important; flex: 1 1 auto !important; width: auto !important;
    min-width: 0 !important; max-width: calc(100% - 54px) !important;
    margin: 0 !important; text-align: left !important; overflow: hidden !important;
  }
  .site-branding .site-title {
    margin: 0 !important; padding: 0 !important; text-align: left !important;
    font-size: clamp(14px, 4.2vw, 19px) !important; line-height: 1.15 !important;
    font-weight: 700 !important; letter-spacing: -.015em !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  .site-branding .site-title a {
    display: block !important; max-width: 100% !important; overflow: hidden !important;
    white-space: nowrap !important; text-overflow: ellipsis !important;
  }
  .site-branding .site-description { display: none !important; }
  .custom-logo-link { display: inline-flex !important; max-width: 100%; align-items: center; }
  .custom-logo-link img { max-height: 38px !important; max-width: 100% !important; width: auto !important; margin: 0 !important; }
  .menu-toggle {
    display: inline-flex !important; flex: 0 0 44px !important; align-items: center !important;
    justify-content: center !important; width: 44px !important; min-width: 44px !important;
    max-width: 44px !important; height: 44px !important; min-height: 44px !important;
    margin: 0 !important; padding: 0 !important; position: relative !important;
    border: 1px solid var(--vv-line, #dde3e7) !important; border-radius: 12px !important;
    background: var(--vv-surface, #FAF8F5) !important; color: var(--vv-forest-deep, #1A202C) !important;
    font-size: 18px !important; line-height: 1 !important; box-shadow: none !important;
    cursor: pointer !important; z-index: 10002 !important;
  }
  .menu-toggle i { pointer-events: none; }
  .header-navigation-wrapper {
    display: none !important; position: absolute !important; top: 100% !important;
    left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important;
    margin: 0 !important; padding: 12px clamp(12px, 3.5vw, 20px) 16px !important;
    flex-direction: column !important; align-items: stretch !important; gap: 10px !important;
    background: #fff !important; border: 1px solid var(--vv-color-border, #dde3e7) !important;
    border-top: 0 !important; border-radius: 0 0 16px 16px !important;
    box-shadow: 0 14px 28px rgba(26,32,44,.14) !important;
    max-height: min(72vh, 560px) !important; overflow-x: hidden !important; overflow-y: auto !important;
    z-index: 10001 !important;
  }
  .header-navigation-wrapper.is-active { display: flex !important; }
  .header-navigation-wrapper #site-navigation,
  .header-navigation-wrapper #site-navigation.is-active,
  .header-navigation-wrapper .primary-navigation { display: block !important; position: static !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  .header-navigation-wrapper .primary-navigation ul,
  .header-navigation-wrapper .primary-navigation ul.sub-menu {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    gap: 2px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
  }
  .header-navigation-wrapper .primary-navigation ul ul.sub-menu { padding-left: 12px !important; }
  .header-navigation-wrapper .primary-navigation li { display: block !important; position: static !important; width: 100% !important; min-width: 0 !important; }
  .header-navigation-wrapper .primary-navigation li a {
    display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important;
    min-height: 44px !important; padding: 10px 12px !important; margin: 0 !important;
    border-radius: 9px !important; font-size: 15px !important; line-height: 1.35 !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
  }
  .header-navigation-wrapper .header-auth-action { display: flex !important; width: 100% !important; margin: 6px 0 0 !important; }
  .header-navigation-wrapper .btn-header-auth { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; min-height: 44px !important; }
  .studio-subnav-bar { width: 100% !important; max-width: none !important; padding: 6px 0 !important; }
  .studio-subnav-bar .container-studio { width: 100% !important; max-width: 100% !important; padding: 0 clamp(12px, 3.5vw, 20px) !important; }
  .studio-subnav-items { display: flex !important; flex-wrap: nowrap !important; gap: 7px !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 3px 1px 5px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; }
  .studio-subnav-items::-webkit-scrollbar { display: none !important; }
  .studio-subnav-items a { flex: 0 0 auto !important; min-height: 38px !important; max-width: 85vw !important; padding: 8px 11px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; }
  .vv-header-content-spacer { height: 8px !important; }

  /* Consistente pagina-gutters en alle gewone en maatwerktemplates. */
  .site-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-inline: 0 !important; margin-inline: 0 !important; }
  .site-content > :not(.vv-home-hero-wrap):not(.alignfull):not(.wp-block-cover.alignfull) { max-width: calc(100% - 32px) !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; }
  .site-content > .vv-home-hero-wrap, .site-content > .alignfull, .site-content > .wp-block-cover.alignfull { max-width: 100% !important; width: 100% !important; }
  .site-content > .site-main, .site-content > .container-studio,
  .site-content > .single-page-container, .site-content > .builder-wrapper,
  .site-content > .vv-theme-landing-page, .site-content > article,
  .site-content > section, .site-main.container-studio, .single-page-container,
  .vv-landing-builder-container, .themas-hero-section, .vv-contact-container,
  .vv-page-container, .vv-profile-container, .vv-account-container,
  .vv-premium-container, .vv-books-container, .vv-themes-container {
    width: calc(100% - 32px) !important; max-width: 100% !important; min-width: 0 !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  .container-studio, .builder-wrapper { min-width: 0 !important; }
  .site-content * { min-width: 0; }
  .site-content img, .site-content video, .site-content iframe, .site-content svg { max-width: 100% !important; }
  .site-content .wp-block-columns { flex-wrap: wrap !important; gap: 16px !important; }
  .site-content .wp-block-column { flex-basis: 100% !important; min-width: 0 !important; }
  .site-content form, .entry-content form { width: 100% !important; max-width: 100% !important; }
  .site-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .site-content select, .site-content textarea, .entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .entry-content select, .entry-content textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .site-content table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; }
  .site-content pre, .entry-content pre { max-width: 100% !important; overflow-x: auto !important; }
  .site-content section + section { margin-top: 24px; }
  .site-content h1, .site-content .entry-title { overflow-wrap: anywhere; }
  .site-content .hero-action-buttons, .site-content .vv-studio-hero-buttons { gap: 9px !important; }
  .site-content .hero-action-buttons > a, .site-content .vv-studio-hero-buttons > a { min-height: 44px !important; }
}

@media (max-width: 380px) {
  .site-header > .header-container { padding-inline: 10px !important; gap: 7px !important; }
  .site-branding { max-width: calc(100% - 49px) !important; }
  .site-branding .site-title { font-size: clamp(13px, 4.1vw, 16px) !important; }
  .menu-toggle { flex-basis: 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; }
  .site-content > .site-main, .site-content > .container-studio, .site-content > .single-page-container,
  .site-content > .builder-wrapper, .site-content > .vv-theme-landing-page, .site-content > article,
  .site-content > section, .site-main.container-studio, .single-page-container,
  .vv-landing-builder-container, .themas-hero-section, .vv-contact-container,
  .vv-page-container, .vv-profile-container, .vv-account-container,
  .vv-premium-container, .vv-books-container, .vv-themes-container { width: calc(100% - 22px) !important; }
}

@media (min-width: 768px) {
  .site-header > .header-container { width: 100% !important; max-width: none !important; margin-inline: 0 !important; padding-inline: clamp(16px, 2.5vw, 40px) !important; }
  .header-navigation-wrapper { display: flex !important; position: static !important; width: auto !important; max-width: none !important; margin-left: auto !important; }
  .menu-toggle { display: none !important; }
}


/* Vers & Vorm 22.28 — redactionele poëziehero zonder uitgelichte afbeelding. */
body.single-gebruikers_gedicht .vv-poem-editorial-hero { position:relative!important;isolation:isolate!important;display:flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-height:300px!important;margin:26px clamp(14px,3.2vw,34px) 30px!important;padding:clamp(28px,5vw,58px) clamp(18px,4.5vw,56px)!important;overflow:hidden!important;box-sizing:border-box!important;border:1px solid #dde3e7!important;border-radius:22px!important;background:radial-gradient(ellipse at 12% 10%,rgba(214,164,105,.19),transparent 36%),radial-gradient(ellipse at 90% 90%,rgba(117,142,119,.15),transparent 34%),linear-gradient(135deg,#ffffff 0%,#f1f2f4 52%,#ffffff 100%)!important;box-shadow:0 14px 36px rgba(65,48,29,.07),inset 0 0 0 6px rgba(255,255,255,.38)!important;color:#27352d!important; }
body.single-gebruikers_gedicht .vv-poem-editorial-hero:before,body.single-gebruikers_gedicht .vv-poem-editorial-hero:after { content:""!important;position:absolute!important;z-index:-1!important;width:180px!important;height:180px!important;border:1px solid rgba(151,120,78,.18)!important;border-radius:50%!important;pointer-events:none!important; }
body.single-gebruikers_gedicht .vv-poem-editorial-hero:before { top:-112px!important;left:-78px!important; }
body.single-gebruikers_gedicht .vv-poem-editorial-hero:after { right:-95px!important;bottom:-120px!important;width:230px!important;height:230px!important; }
body.single-gebruikers_gedicht .vv-poem-hero-ornament { position:absolute!important;top:12px!important;right:clamp(18px,3vw,36px)!important;color:#c45d00!important;font-family:Georgia,serif!important;font-size:clamp(3rem,6vw,5rem)!important;line-height:1!important;opacity:.24!important;transform:rotate(-15deg)!important;pointer-events:none!important; }
body.single-gebruikers_gedicht .vv-poem-hero-inner { position:relative!important;z-index:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;max-width:900px!important;min-width:0!important;margin:0 auto!important;gap:15px!important;text-align:center!important; }
body.single-gebruikers_gedicht .vv-poem-hero-kicker { display:inline-flex!important;align-items:center!important;gap:8px!important;color:#526572!important;font-size:.76rem!important;font-weight:800!important;letter-spacing:.14em!important;line-height:1.4!important;text-transform:uppercase!important; }
body.single-gebruikers_gedicht .vv-poem-hero-kicker-mark { color:#c45d00!important;font-size:1rem!important; }
body.single-gebruikers_gedicht .vv-poem-hero-category { display:inline-flex!important;align-items:center!important;justify-content:center!important;max-width:100%!important;padding:7px 13px!important;border:1px solid rgba(133,104,65,.28)!important;border-radius:999px!important;background:rgba(255,255,255,.58)!important;color:#5d715e!important;font-size:.83rem!important;font-weight:700!important;line-height:1.35!important;text-decoration:none!important; }
body.single-gebruikers_gedicht .vv-poem-hero-category:hover { background:#fff!important;border-color:#c45d00!important; }
body.single-gebruikers_gedicht .vv-poem-editorial-hero h1 { max-width:100%!important;margin:0!important;color:#26372d!important;font-family:var(--vv-font-serif,"Cormorant Garamond",Georgia,serif)!important;font-size:clamp(2.15rem,5vw,4rem)!important;font-weight:600!important;letter-spacing:-.025em!important;line-height:1.08!important;overflow-wrap:anywhere!important;text-wrap:balance!important; }
body.single-gebruikers_gedicht .vv-poem-hero-rule { display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;width:min(220px,60%)!important;color:#c45d00!important; }
body.single-gebruikers_gedicht .vv-poem-hero-rule span { height:1px!important;flex:1!important;background:linear-gradient(90deg,transparent,#87959e)!important; }
body.single-gebruikers_gedicht .vv-poem-hero-rule span:last-child { transform:scaleX(-1)!important; }
body.single-gebruikers_gedicht .vv-poem-hero-rule i { font-size:.7rem!important;font-style:normal!important; }
body.single-gebruikers_gedicht .vv-poem-hero-meta { display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:9px 22px!important;color:#5e655d!important;font-size:.9rem!important;line-height:1.6!important; }
body.single-gebruikers_gedicht .vv-poem-hero-meta>span { display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-width:0!important; }
body.single-gebruikers_gedicht .vv-poem-hero-meta i { color:#c45d00!important; }
body.single-gebruikers_gedicht .vv-poem-hero-meta a { color:#385d48!important;font-weight:750!important;text-decoration:underline!important;text-decoration-color:rgba(56,93,72,.35)!important;text-underline-offset:3px!important; }
body.single-gebruikers_gedicht .vv-poem-hero-rating { color:#011726!important;font-weight:750!important; }
body.single-gebruikers_gedicht .vv-poem-hero-rating>span { color:#6d7169!important;font-weight:500!important; }
body.single-gebruikers_gedicht .vv-single-poem-card>.vv-single-poem-image,body.single-gebruikers_gedicht .vv-single-poem-card>.vv-single-poem-hero-overlay { display:none!important; }
@media(max-width:700px) { body.single-gebruikers_gedicht .vv-poem-editorial-hero { min-height:0!important;margin:14px 0 22px!important;padding:32px 18px 28px!important;border-radius:17px!important; } body.single-gebruikers_gedicht .vv-poem-hero-inner { gap:12px!important; } body.single-gebruikers_gedicht .vv-poem-hero-kicker { font-size:.67rem!important;letter-spacing:.09em!important; } body.single-gebruikers_gedicht .vv-poem-editorial-hero h1 { font-size:clamp(1.9rem,8vw,2.8rem)!important;line-height:1.1!important; } body.single-gebruikers_gedicht .vv-poem-hero-meta { gap:7px 14px!important;font-size:.82rem!important; } body.single-gebruikers_gedicht .vv-poem-hero-ornament { top:7px!important;right:12px!important;font-size:3.2rem!important; } }
@media(max-width:380px) { body.single-gebruikers_gedicht .vv-poem-editorial-hero { padding:28px 13px 24px!important; } body.single-gebruikers_gedicht .vv-poem-hero-meta { flex-direction:column!important;gap:5px!important; } body.single-gebruikers_gedicht .vv-poem-hero-kicker { font-size:.62rem!important; } }


/* Vers & Vorm 22.30 — herstel veilige mobiele buitenruimte rond de single-gedichtenhero en gedichtkaart. */
@media (max-width: 767px) {
  body.single-gebruikers_gedicht .vv-single-poem-card {
    display: block;
    box-sizing: border-box !important;
    width: calc(100% - 28px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.single-gebruikers_gedicht .vv-poem-editorial-hero {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 22px !important;
  }
  body.single-gebruikers_gedicht .vv-single-poem-card > :not(.vv-poem-editorial-hero) {
    max-width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 380px) {
  body.single-gebruikers_gedicht .vv-single-poem-card {
    width: calc(100% - 22px) !important;
  }
  body.single-gebruikers_gedicht .vv-poem-editorial-hero {
    margin-top: 11px !important;
    margin-bottom: 18px !important;
  }
}


/* Vers & Vorm 22.31 — 94% mobiele content, rand-tot-rand header en sticky navigatie. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
  isolation: isolate;
}
.site-header > .header-container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.site-header .studio-subnav-bar,
.site-header .studio-subnav-bar .container-studio {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
body.admin-bar .site-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px !important; }
}

/* Op mobiel staan de hoofdblokken op 94% van het scherm; kaarten vullen hun kolom. */
@media (max-width: 767px) {
  .site-header,
  .site-header > .header-container,
  .site-header .studio-subnav-bar,
  .site-header .studio-subnav-bar .container-studio {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .site-header > .header-container {
    padding-left: clamp(12px, 3vw, 20px) !important;
    padding-right: clamp(12px, 3vw, 20px) !important;
    gap: clamp(7px, 2vw, 14px) !important;
  }
  .site-branding {
    min-width: 0 !important;
    max-width: calc(100% - 52px) !important;
    flex: 1 1 auto !important;
  }
  .site-branding .site-title {
    max-width: 100% !important;
    font-size: clamp(13px, 4.2vw, 21px) !important;
    line-height: 1.12 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .site-branding .site-title a {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .menu-toggle { flex-shrink: 0 !important; }

  /* Main content wrappers use 94vw; cards inside them remain 100% of their column. */
  .site-content > :not(.vv-home-hero-wrap):not(.alignfull):not(.wp-block-cover.alignfull),
  .site-content > .site-main,
  .site-content > .container-studio,
  .site-content > .single-page-container,
  .site-content > .builder-wrapper,
  .site-content > .vv-theme-landing-page,
  .site-content > article,
  .site-content > section,
  .site-main.container-studio,
  .single-page-container,
  .vv-landing-builder-container,
  .themas-hero-section,
  .vv-contact-container,
  .vv-page-container,
  .vv-profile-container,
  .vv-account-container,
  .vv-premium-container,
  .vv-books-container,
  .vv-themes-container,
  .vv-archive-grid,
  .vv-home-poems-grid,
  .vv-home-articles-grid,
  .posts-grid,
  .blog-grid,
  .vv-card-grid,
  .vv-theme-grid,
  .themes-grid,
  .album-grid,
  .author-grid,
  .profile-grid {
    box-sizing: border-box !important;
    width: 94vw !important;
    max-width: 94vw !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .site-content > .vv-home-hero-wrap,
  .site-content > .alignfull,
  .site-content > .wp-block-cover.alignfull {
    width: 100% !important;
    max-width: 100% !important;
  }
  .post-card, .vv-poem-card, .poem-card, .vv-theme-card, .theme-card,
  .studio-card, .vv-card, .album-card, .author-card, .profile-card,
  .vv-archive-grid > *, .vv-home-poems-grid > *, .vv-home-articles-grid > *,
  .posts-grid > *, .blog-grid > *, .vv-card-grid > *, .vv-theme-grid > *,
  .themes-grid > *, .album-grid > *, .author-grid > *, .profile-grid > * {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.single-gebruikers_gedicht .vv-single-poem-card {
    width: 94vw !important;
    max-width: 94vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.single-gebruikers_gedicht .vv-poem-editorial-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Tablet: header sluit aan op de viewport; content blijft ruim en gecentreerd. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header,
  .site-header > .header-container,
  .site-header .studio-subnav-bar,
  .site-header .studio-subnav-bar .container-studio {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .site-header > .header-container {
    padding-left: clamp(16px, 3vw, 30px) !important;
    padding-right: clamp(16px, 3vw, 30px) !important;
  }
}


/* v22.32 — homepage-afwerking: rustige afbeeldingskaarten, duidelijke secties en nette responsiviteit */
body.home .vv-home-main,
body.front-page .vv-home-main {
  padding-bottom: clamp(24px, 4vw, 54px) !important;
}
body.home .vv-home-hero-wrap,
body.front-page .vv-home-hero-wrap {
  padding-bottom: clamp(24px, 3.5vw, 42px) !important;
}
body.home .vv-home-hero .hero-bg-layer,
body.front-page .vv-home-hero .hero-bg-layer {
  opacity: .20 !important;
}
body.home .vv-home-poems-grid .post-card-poetic,
body.front-page .vv-home-poems-grid .post-card-poetic,
body.home .vv-home-articles-grid .post-card-poetic,
body.front-page .vv-home-articles-grid .post-card-poetic {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  isolation: auto !important;
  background: #fff !important;
  color: #202938 !important;
  border: 1px solid #e7e5e1 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(25, 35, 45, .07) !important;
  transform: none;
}
body.home .vv-home-poems-grid .post-card-poetic:hover,
body.front-page .vv-home-poems-grid .post-card-poetic:hover,
body.home .vv-home-articles-grid .post-card-poetic:hover,
body.front-page .vv-home-articles-grid .post-card-poetic:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(25, 35, 45, .11) !important;
}
body.home .vv-home-poems-grid .post-card-thumb,
body.front-page .vv-home-poems-grid .post-card-thumb,
body.home .vv-home-articles-grid .post-card-thumb,
body.front-page .vv-home-articles-grid .post-card-thumb {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: clamp(170px, 19vw, 230px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  z-index: auto !important;
  background: #f3f1ed !important;
}
body.home .vv-home-poems-grid .post-card-thumb > a,
body.front-page .vv-home-poems-grid .post-card-thumb > a,
body.home .vv-home-articles-grid .post-card-thumb > a,
body.front-page .vv-home-articles-grid .post-card-thumb > a {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
body.home .vv-home-poems-grid .post-card-thumb img,
body.front-page .vv-home-poems-grid .post-card-thumb img,
body.home .vv-home-articles-grid .post-card-thumb img,
body.front-page .vv-home-articles-grid .post-card-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}
body.home .vv-home-poems-grid .post-card-body,
body.front-page .vv-home-poems-grid .post-card-body,
body.home .vv-home-articles-grid .post-card-body,
body.front-page .vv-home-articles-grid .post-card-body {
  position: relative !important;
  z-index: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(16px, 2vw, 24px) !important;
  box-sizing: border-box !important;
  color: #202938 !important;
  background: #fff !important;
}
body.home .vv-home-poems-grid .post-card-meta,
body.front-page .vv-home-poems-grid .post-card-meta,
body.home .vv-home-articles-grid .post-card-meta,
body.front-page .vv-home-articles-grid .post-card-meta,
body.home .vv-home-poems-grid .post-card-meta span,
body.front-page .vv-home-poems-grid .post-card-meta span,
body.home .vv-home-articles-grid .post-card-meta span,
body.front-page .vv-home-articles-grid .post-card-meta span,
body.home .vv-home-poems-grid .post-card-excerpt,
body.front-page .vv-home-poems-grid .post-card-excerpt,
body.home .vv-home-articles-grid .post-card-excerpt,
body.front-page .vv-home-articles-grid .post-card-excerpt,
body.home .vv-home-poems-grid .post-card-footer > span,
body.front-page .vv-home-poems-grid .post-card-footer > span,
body.home .vv-home-articles-grid .post-card-footer > span,
body.front-page .vv-home-articles-grid .post-card-footer > span {
  color: #525d6b !important;
}
body.home .vv-home-poems-grid .post-card-title,
body.front-page .vv-home-poems-grid .post-card-title,
body.home .vv-home-articles-grid .post-card-title,
body.front-page .vv-home-articles-grid .post-card-title,
body.home .vv-home-poems-grid .post-card-title a,
body.front-page .vv-home-poems-grid .post-card-title a,
body.home .vv-home-articles-grid .post-card-title a,
body.front-page .vv-home-articles-grid .post-card-title a {
  color: #202938 !important;
}
body.home .vv-home-poems-grid .post-card-readmore,
body.front-page .vv-home-poems-grid .post-card-readmore,
body.home .vv-home-articles-grid .post-card-readmore,
body.front-page .vv-home-articles-grid .post-card-readmore {
  color: #245b49 !important;
  text-decoration: none !important;
}
body.home .vv-home-poems-grid .post-card-footer,
body.front-page .vv-home-poems-grid .post-card-footer,
body.home .vv-home-articles-grid .post-card-footer,
body.front-page .vv-home-articles-grid .post-card-footer {
  margin-top: auto !important;
  padding-top: 14px !important;
}
body.home .vv-home-articles-grid,
body.front-page .vv-home-articles-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.home .vv-home-cta-fallback,
body.front-page .vv-home-cta-fallback {
  gap: 24px !important;
  box-shadow: 0 5px 20px rgba(25, 35, 45, .04) !important;
}
@media (max-width: 767px) {
  body.home .vv-home-hero-wrap > .container-studio,
  body.front-page .vv-home-hero-wrap > .container-studio,
  body.home main.vv-home-main,
  body.front-page main.vv-home-main {
    width: 94vw !important;
    max-width: 94vw !important;
  }
  body.home .vv-home-poems-grid,
  body.front-page .vv-home-poems-grid,
  body.home .vv-home-articles-grid,
  body.front-page .vv-home-articles-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  body.home .vv-home-poems-grid .post-card-thumb,
  body.front-page .vv-home-poems-grid .post-card-thumb,
  body.home .vv-home-articles-grid .post-card-thumb,
  body.front-page .vv-home-articles-grid .post-card-thumb {
    height: 190px !important;
  }
  body.home .vv-home-poems-grid .post-card-body,
  body.front-page .vv-home-poems-grid .post-card-body,
  body.home .vv-home-articles-grid .post-card-body,
  body.front-page .vv-home-articles-grid .post-card-body {
    padding: 18px !important;
  }
  body.home .vv-home-cta-fallback,
  body.front-page .vv-home-cta-fallback {
    padding: 22px !important;
  }
}


/* ==========================================================
   v22.33 — FULL-BLEED MOBIELE HEADER + MENU/SUBMENU
   Header/navigation must span the viewport; page content stays inset.
   ========================================================== */
@media (max-width: 1023px) {
  .site-header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
  }
  .site-header .header-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 3vw !important;
    box-sizing: border-box !important;
  }
  .site-header .primary-navigation {
    width: 100vw !important;
    max-width: 100vw !important;
    left: calc(50% - 50vw) !important;
    right: auto !important;
    margin: 0 !important;
    padding: 12px 3vw 18px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }
  .site-header .primary-navigation > ul,
  .site-header .primary-navigation ul.sub-menu {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  .site-header .primary-navigation ul.sub-menu {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .studio-subnav-bar {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  .studio-subnav-items {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-left: 3vw !important;
    padding-right: 3vw !important;
  }
}

@media (max-width: 767px) {
  .site-header .header-container {
    padding-left: 3vw !important;
    padding-right: 3vw !important;
  }
  .site-header .primary-navigation {
    padding-left: 3vw !important;
    padding-right: 3vw !important;
  }
  .site-header .primary-navigation ul ul.sub-menu {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
  }
}

/* ==========================================================
   v22.34 — VOORPAGINA KAARTEN EN ELEMENTEN 94% OP MOBIEL/TABLET
   Houd de header en navigatie full-bleed; centreer alleen de inhoud.
   ========================================================== */
@media (max-width: 1023px) {
  body.home .vv-home-hero-wrap,
  body.front-page .vv-home-hero-wrap,
  body.home main.vv-home-main,
  body.front-page main.vv-home-main,
  body.home .vv-home-poems-grid,
  body.front-page .vv-home-poems-grid,
  body.home .vv-home-articles-grid,
  body.front-page .vv-home-articles-grid,
  body.home .vv-home-cta-fallback,
  body.front-page .vv-home-cta-fallback {
    width: 94vw !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body.home .vv-home-hero-wrap > .container-studio,
  body.front-page .vv-home-hero-wrap > .container-studio {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body.home .vv-home-poems-grid .post-card,
  body.front-page .vv-home-poems-grid .post-card,
  body.home .vv-home-articles-grid .post-card,
  body.front-page .vv-home-articles-grid .post-card,
  body.home .vv-home-poems-grid > *,
  body.front-page .vv-home-poems-grid > *,
  body.home .vv-home-articles-grid > *,
  body.front-page .vv-home-articles-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.home .vv-home-main img,
  body.front-page .vv-home-main img,
  body.home .vv-home-hero-wrap img,
  body.front-page .vv-home-hero-wrap img,
  body.home .vv-home-cta-fallback img,
  body.front-page .vv-home-cta-fallback img {
    max-width: 100% !important;
    height: auto;
  }
}


/* ==========================================================
   v22.35 — ECHTE 94vw VOOR HOMEPAGE HERO, KAARTEN EN SECTIES
   De header/menu blijven full-width; alleen voorpagina-inhoud wordt 94vw.
   ========================================================== */
@media (max-width: 767px) {
  body.home .vv-home-hero-wrap,
  body.front-page .vv-home-hero-wrap,
  body.home main.vv-home-main,
  body.front-page main.vv-home-main,
  body.home .vv-home-cta-section,
  body.front-page .vv-home-cta-section,
  body.home .vv-home-blog-section,
  body.front-page .vv-home-blog-section {
    display: block !important;
    width: 94vw !important;
    min-width: 0 !important;
    max-width: 94vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    transform: none !important;
  }

  body.home .vv-home-hero-wrap > .container-studio,
  body.front-page .vv-home-hero-wrap > .container-studio {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.home .vv-home-hero,
  body.front-page .vv-home-hero,
  body.home .site-hero-slanted.homepage-hero-rounded,
  body.front-page .site-hero-slanted.homepage-hero-rounded {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  body.home main.vv-home-main > *,
  body.front-page main.vv-home-main > *,
  body.home .vv-home-primary-layout,
  body.front-page .vv-home-primary-layout,
  body.home .vv-home-poems,
  body.front-page .vv-home-poems,
  body.home .vv-home-blog-section,
  body.front-page .vv-home-blog-section,
  body.home .vv-home-cta-section,
  body.front-page .vv-home-cta-section,
  body.home .vv-home-cta-fallback,
  body.front-page .vv-home-cta-fallback {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.home .vv-home-poems-grid,
  body.front-page .vv-home-poems-grid,
  body.home .vv-home-articles-grid,
  body.front-page .vv-home-articles-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.home .vv-home-poems-grid > *,
  body.front-page .vv-home-poems-grid > *,
  body.home .vv-home-articles-grid > *,
  body.front-page .vv-home-articles-grid > *,
  body.home .vv-home-poems-grid .post-card-poetic,
  body.front-page .vv-home-poems-grid .post-card-poetic,
  body.home .vv-home-articles-grid .post-card-poetic,
  body.front-page .vv-home-articles-grid .post-card-poetic {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.home .vv-home-main .vv-section-heading,
  body.front-page .vv-home-main .vv-section-heading,
  body.home .vv-home-main .vv-home-empty,
  body.front-page .vv-home-main .vv-home-empty,
  body.home .vv-home-main .sidebar,
  body.front-page .vv-home-main .sidebar,
  body.home .vv-home-main aside,
  body.front-page .vv-home-main aside {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.home .vv-home-hero-wrap,
  body.front-page .vv-home-hero-wrap,
  body.home main.vv-home-main,
  body.front-page main.vv-home-main,
  body.home .vv-home-cta-section,
  body.front-page .vv-home-cta-section,
  body.home .vv-home-blog-section,
  body.front-page .vv-home-blog-section {
    width: 94vw !important;
    max-width: 94vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.home .vv-home-hero-wrap > .container-studio,
  body.front-page .vv-home-hero-wrap > .container-studio,
  body.home .vv-home-hero,
  body.front-page .vv-home-hero,
  body.home .vv-home-main > *,
  body.front-page .vv-home-main > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================
   v22.36 — SITEBREDE MOBIELE/TABLET BREEDTE-AUDIT
   Inhoudelijke pagina's en kaarten: 94vw. Header/menu: full-bleed.
   Studio-submenu: swipe op telefoon, nette wrap op tablet.
   ========================================================== */
@media (max-width: 1023px) {
  /* De algemene inhoudscontainers op alle templates. */
  body:not(.wp-admin) .site-content,
  body:not(.wp-admin) #content.site-content,
  body:not(.wp-admin) .site-main,
  body:not(.wp-admin) main.site-main,
  body:not(.wp-admin) .site-wrapper,
  body:not(.wp-admin) .single-page-container,
  body:not(.wp-admin) .blog-studio-layout,
  body:not(.wp-admin) .blog-content-area,
  body:not(.wp-admin) .vv-archive-layout,
  body:not(.wp-admin) .vv-archive-hero,
  body:not(.wp-admin) .vv-theme-home-hero-wrap,
  body:not(.wp-admin) .vv-taxonomy-theme-hero-wrap,
  body:not(.wp-admin) .page-hero-section,
  body:not(.wp-admin) .archive-hero-header,
  body:not(.wp-admin) .themas-hero-section,
  body:not(.wp-admin) .vv-contact-container,
  body:not(.wp-admin) .vv-form-editor-content,
  body:not(.wp-admin) .vv-profile-quicknav,
  body:not(.wp-admin) .vv-related-home-section,
  body:not(.wp-admin) .related-poems-section,
  body:not(.wp-admin) .vv-taxonomy-ideas-section,
  body:not(.wp-admin) .vv-theme-ideas-section,
  body:not(.wp-admin) .vv-theme-latest-poems,
  body:not(.wp-admin) .vv-books-showcase-grid,
  body:not(.wp-admin) .vv-themes-overview-grid,
  body:not(.wp-admin) .vv-blog-archive-grid,
  body:not(.wp-admin) .vv-poem-archive-grid,
  body:not(.wp-admin) .vv-archive-grid,
  body:not(.wp-admin) .blog-cards-grid,
  body:not(.wp-admin) .posts-grid-2col,
  body:not(.wp-admin) .vv-contact-grid,
  body:not(.wp-admin) .vv-form-grid {
    width: 94vw !important;
    max-width: 94vw !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Inner content must not accumulate another set of 3–6% margins. */
  body:not(.wp-admin) .site-content .container,
  body:not(.wp-admin) .site-content .container-studio,
  body:not(.wp-admin) .site-main .container,
  body:not(.wp-admin) .site-main .container-studio,
  body:not(.wp-admin) .single-page-container > .container,
  body:not(.wp-admin) .vv-archive-layout > .container,
  body:not(.wp-admin) .vv-archive-hero > .container,
  body:not(.wp-admin) .page-hero-section > .container,
  body:not(.wp-admin) .vv-contact-container > .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Cards, tiles, panels and form blocks stay inside the 94vw content area. */
  body:not(.wp-admin) .vv-card,
  body:not(.wp-admin) .content-card,
  body:not(.wp-admin) .post-card-poetic,
  body:not(.wp-admin) .single-post-card,
  body:not(.wp-admin) .vv-theme-card,
  body:not(.wp-admin) .vv-alphabet-card,
  body:not(.wp-admin) .author-book-card,
  body:not(.wp-admin) .book-card-display,
  body:not(.wp-admin) .book-preview-card,
  body:not(.wp-admin) .pricing-card,
  body:not(.wp-admin) .stanza-card,
  body:not(.wp-admin) .rhyme-word-card,
  body:not(.wp-admin) .vv-perk-card,
  body:not(.wp-admin) .vv-contact-form-card,
  body:not(.wp-admin) .vv-contact-info-card,
  body:not(.wp-admin) .sidebar-widget-card,
  body:not(.wp-admin) .sidebar-categories-studio-card,
  body:not(.wp-admin) .sidebar-books-card,
  body:not(.wp-admin) .poet-profile-card,
  body:not(.wp-admin) .author-profile-block,
  body:not(.wp-admin) .studio-cta-box,
  body:not(.wp-admin) .vv-archive-cta,
  body:not(.wp-admin) .vv-single-cta,
  body:not(.wp-admin) .post-bottom-studio-cta,
  body:not(.wp-admin) .vv-home-cta-fallback,
  body:not(.wp-admin) .vv-home-hero,
  body:not(.wp-admin) .vv-poem-editorial-hero,
  body:not(.wp-admin) .vv-theme-home-hero,
  body:not(.wp-admin) .vv-taxonomy-theme-hero-wrap,
  body:not(.wp-admin) .author-studio-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Prevent long titles, media and fixed-width children from pushing the viewport. */
  body:not(.wp-admin) .site-content *,
  body:not(.wp-admin) .site-main *,
  body:not(.wp-admin) .single-page-container *,
  body:not(.wp-admin) .vv-archive-layout *,
  body:not(.wp-admin) .vv-contact-container * {
    min-width: 0;
    box-sizing: border-box;
  }
  body:not(.wp-admin) .site-content img,
  body:not(.wp-admin) .site-main img,
  body:not(.wp-admin) .site-content video,
  body:not(.wp-admin) .site-content iframe,
  body:not(.wp-admin) .site-main video,
  body:not(.wp-admin) .site-main iframe {
    max-width: 100% !important;
  }

  /* Header and top-level navigation are deliberately excluded from 94vw. */
  .site-header,
  .site-header .header-container,
  .site-header .primary-navigation,
  .studio-subnav-bar {
    max-width: none !important;
  }

  /* Submenu rail is full-width; buttons are touch-friendly and never shrink. */
  .studio-subnav-bar {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  .studio-subnav-bar .container-studio,
  .studio-subnav-items {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .studio-subnav-bar .container-studio {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .studio-subnav-items {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 3vw !important;
  }
  .studio-subnav-items a {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none;
    box-sizing: border-box !important;
    touch-action: pan-x;
  }
}

/* Phone: swipeable submenu, clear snap targets and no side gaps on the rail. */
@media (max-width: 767px) {
  .studio-subnav-items {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .studio-subnav-items a {
    scroll-snap-align: start;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .studio-subnav-items::-webkit-scrollbar { height: 3px; }
  .studio-subnav-items::-webkit-scrollbar-thumb { background: rgba(90,75,60,.35); border-radius: 99px; }
  .site-header,
  .site-header .primary-navigation,
  .studio-subnav-bar { border-radius: 0 !important; }
}

/* Tablet: let submenu buttons wrap into tidy rows rather than forcing tiny text. */
@media (min-width: 768px) and (max-width: 1023px) {
  .studio-subnav-items {
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 8px 3vw !important;
    row-gap: 8px !important;
  }
  .studio-subnav-items a {
    white-space: normal !important;
    text-align: center !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
  }
}

/* v22.36a — fallback voor template-specifieke kaarten/secties die een unieke class hebben */
@media (max-width: 1023px) {
  body:not(.wp-admin) .site-content [class*="card"],
  body:not(.wp-admin) .site-main [class*="card"],
  body:not(.wp-admin) .site-content [class*="section"],
  body:not(.wp-admin) .site-main [class*="section"],
  body:not(.wp-admin) .site-content [class*="hero"],
  body:not(.wp-admin) .site-main [class*="hero"],
  body:not(.wp-admin) .site-content [class*="grid"],
  body:not(.wp-admin) .site-main [class*="grid"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body:not(.wp-admin) .site-content [class*="card"] img,
  body:not(.wp-admin) .site-main [class*="card"] img,
  body:not(.wp-admin) .site-content [class*="hero"] img,
  body:not(.wp-admin) .site-main [class*="hero"] img {
    max-width: 100% !important;
    height: auto;
  }
}
@media (max-width: 767px) {
  body:not(.wp-admin) .site-content [class*="grid"],
  body:not(.wp-admin) .site-main [class*="grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
  }
  body:not(.wp-admin) .site-content [class*="card"],
  body:not(.wp-admin) .site-main [class*="card"] {
    width: 100% !important;
  }
}


/* v22.37 — definitive mobile content width: 94vw across all theme templates.
   Keep the global header and navigation full bleed; inner components fill the
   content rail instead of repeatedly shrinking to 94% of their parent. */
@media (max-width: 767px) {
  body:not(.wp-admin) #content.site-content,
  body:not(.wp-admin) .site-content {
    display: flow-root;
    width: 94vw !important;
    max-width: 94vw !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Main is nested inside site-content on most templates: it must fill, not
     become a second 94vw rail with its own side offset. */
  body:not(.wp-admin) .site-content > .site-main,
  body:not(.wp-admin) .site-content > main.site-main,
  body:not(.wp-admin) #content > .site-main,
  body:not(.wp-admin) #content > main.site-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Every direct content section/template wrapper stays aligned to the 94vw
     rail; cards and grids inside those wrappers use the full rail width. */
  body:not(.wp-admin) .site-content > .container,
  body:not(.wp-admin) .site-content > .container-studio,
  body:not(.wp-admin) .site-content > .vv-home-hero-wrap,
  body:not(.wp-admin) .site-content > .alignfull,
  body:not(.wp-admin) .site-main > .container,
  body:not(.wp-admin) .site-main > .container-studio,
  body:not(.wp-admin) .site-main > section,
  body:not(.wp-admin) .site-main > article,
  body:not(.wp-admin) .site-main > .page-content,
  body:not(.wp-admin) .site-main > .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-content .container,
  body:not(.wp-admin) .site-content .container-studio,
  body:not(.wp-admin) .site-content [class*="card"],
  body:not(.wp-admin) .site-content [class*="hero"],
  body:not(.wp-admin) .site-content [class*="section"],
  body:not(.wp-admin) .site-content [class*="grid"],
  body:not(.wp-admin) .site-content [class*="panel"],
  body:not(.wp-admin) .site-content [class*="content"],
  body:not(.wp-admin) .site-main [class*="card"],
  body:not(.wp-admin) .site-main [class*="hero"],
  body:not(.wp-admin) .site-main [class*="section"],
  body:not(.wp-admin) .site-main [class*="grid"],
  body:not(.wp-admin) .site-main [class*="panel"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-content img,
  body:not(.wp-admin) .site-content video,
  body:not(.wp-admin) .site-content iframe,
  body:not(.wp-admin) .site-main img,
  body:not(.wp-admin) .site-main video,
  body:not(.wp-admin) .site-main iframe {
    max-width: 100% !important;
    height: auto;
    box-sizing: border-box !important;
  }

  /* Never apply the 94vw rule to site-wide navigation. */
  body:not(.wp-admin) .site-header,
  body:not(.wp-admin) .site-header .header-container,
  body:not(.wp-admin) .site-header .primary-navigation,
  body:not(.wp-admin) .studio-subnav-bar {
    width: 100% !important;
    max-width: none !important;
  }
}


/* v22.38 — consistent 94vw content rail on phones; header/navigation stay full bleed.
   The rail is applied to the page content wrapper once. Nested cards/sections fill
   that rail (100%) so widths do not compound and create narrow content. */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: clip; }

  body:not(.wp-admin) #content.site-content,
  body:not(.wp-admin) .site-content {
    display: flow-root !important;
    width: 94vw !important;
    max-width: 94vw !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-content > *,
  body:not(.wp-admin) .site-content .site-main,
  body:not(.wp-admin) .site-content main,
  body:not(.wp-admin) .site-content .page-content,
  body:not(.wp-admin) .site-content .entry-content,
  body:not(.wp-admin) .site-content .container,
  body:not(.wp-admin) .site-content .container-studio,
  body:not(.wp-admin) .site-content .content-area,
  body:not(.wp-admin) .site-content article,
  body:not(.wp-admin) .site-content section,
  body:not(.wp-admin) .site-content .wp-block-group,
  body:not(.wp-admin) .site-content .wp-block-columns,
  body:not(.wp-admin) .site-content .wp-block-cover,
  body:not(.wp-admin) .site-content .alignwide,
  body:not(.wp-admin) .site-content .alignfull {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Every visual content card, hero, panel, grid and tile stays inside the rail. */
  body:not(.wp-admin) .site-content [class*="card"],
  body:not(.wp-admin) .site-content [class*="tile"],
  body:not(.wp-admin) .site-content [class*="hero"],
  body:not(.wp-admin) .site-content [class*="section"],
  body:not(.wp-admin) .site-content [class*="panel"],
  body:not(.wp-admin) .site-content [class*="grid"],
  body:not(.wp-admin) .site-content [class*="archive"],
  body:not(.wp-admin) .site-content [class*="listing"],
  body:not(.wp-admin) .site-content [class*="profile"],
  body:not(.wp-admin) .site-content [class*="album"],
  body:not(.wp-admin) .site-content [class*="poem"],
  body:not(.wp-admin) .site-content .wp-block-image,
  body:not(.wp-admin) .site-content .wp-block-button,
  body:not(.wp-admin) .site-content .wp-block-table,
  body:not(.wp-admin) .site-content .wp-block-media-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-content img,
  body:not(.wp-admin) .site-content video,
  body:not(.wp-admin) .site-content iframe,
  body:not(.wp-admin) .site-content svg,
  body:not(.wp-admin) .site-content canvas,
  body:not(.wp-admin) .site-content table,
  body:not(.wp-admin) .site-content input,
  body:not(.wp-admin) .site-content select,
  body:not(.wp-admin) .site-content textarea,
  body:not(.wp-admin) .site-content button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Full-bleed global header and both navigation bars are intentionally excluded. */
  body:not(.wp-admin) .site-header,
  body:not(.wp-admin) .site-header .header-container,
  body:not(.wp-admin) .site-header .primary-navigation,
  body:not(.wp-admin) .site-header nav,
  body:not(.wp-admin) .studio-subnav-bar {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Footer background may remain full width; its inner content aligns to the rail. */
  body:not(.wp-admin) .site-footer > .container,
  body:not(.wp-admin) .site-footer .footer-inner,
  body:not(.wp-admin) .site-footer .footer-content {
    width: 94vw !important;
    max-width: 94vw !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }
}


/* v22.39 — correction after site-wide audit: keep the canvas full width, apply
   one 94vw rail to each top-level content area, and let nested content fill it.
   Header, primary navigation and Studio submenu are explicitly full bleed. */
@media (max-width: 767px) {
  html, body, body .site-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-content {
    display: flow-root !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* This is the single mobile width boundary. It covers every page template,
     custom landing page, archive and plugin mount rendered by the theme. */
  body:not(.wp-admin) .site-content > *,
  body:not(.wp-admin) .site-content > .site-main,
  body:not(.wp-admin) .site-content > main,
  body:not(.wp-admin) .site-content > article,
  body:not(.wp-admin) .site-content > section,
  body:not(.wp-admin) .site-content > .container,
  body:not(.wp-admin) .site-content > .container-studio,
  body:not(.wp-admin) .site-content > .builder-wrapper,
  body:not(.wp-admin) .site-content > .single-page-container,
  body:not(.wp-admin) .site-content > .vv-theme-landing-page,
  body:not(.wp-admin) .site-content > .vv-homepage,
  body:not(.wp-admin) .site-content > .vv-home-hero-wrap,
  body:not(.wp-admin) .site-content > .themas-hero-section,
  body:not(.wp-admin) .site-content > .entry-content,
  body:not(.wp-admin) .site-content > .page-content {
    width: 94vw !important;
    max-width: 94vw !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Nested layout wrappers do not add a second percentage or side margin. */
  body:not(.wp-admin) .site-content .site-main,
  body:not(.wp-admin) .site-content .content-area,
  body:not(.wp-admin) .site-content .entry-content,
  body:not(.wp-admin) .site-content .page-content,
  body:not(.wp-admin) .site-content .container,
  body:not(.wp-admin) .site-content .container-narrow,
  body:not(.wp-admin) .site-content .container-studio,
  body:not(.wp-admin) .site-content .single-page-container,
  body:not(.wp-admin) .site-content .builder-wrapper,
  body:not(.wp-admin) .site-content .vv-studio-page,
  body:not(.wp-admin) .site-content .vv-profile-page,
  body:not(.wp-admin) .site-content .vv-album-page,
  body:not(.wp-admin) .site-content .vv-poem-archive-page,
  body:not(.wp-admin) .site-content .vv-plugin-page,
  body:not(.wp-admin) .site-content .vv-theme-landing-page,
  body:not(.wp-admin) .site-content .vv-landing-builder-container,
  body:not(.wp-admin) .site-content .archive-layout,
  body:not(.wp-admin) .site-content .blog-studio-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Cards, hero panels, grids and sections fill the 94vw rail. Their own
     internal padding is retained; only outer layout wrappers lose side padding. */
  body:not(.wp-admin) .site-content :is(
    [class*="card"], [class*="tile"], [class*="hero"], [class*="section"],
    [class*="panel"], [class*="grid"], [class*="archive"], [class*="listing"],
    [class*="profile"], [class*="album"], [class*="poem"], [class*="post-card"],
    [class*="cta"], [class*="widget-card"], [class*="content-card"],
    .wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text,
    .wp-block-image, .wp-block-table
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-content :is(img, video, iframe, svg, canvas, table, input, select, textarea, button) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Full-bleed site chrome must never inherit the content rail. */
  body:not(.wp-admin) .site-header,
  body:not(.wp-admin) .site-header > *,
  body:not(.wp-admin) .site-header .header-container,
  body:not(.wp-admin) .site-header .header-navigation-wrapper,
  body:not(.wp-admin) .site-header .primary-navigation,
  body:not(.wp-admin) .site-header nav,
  body:not(.wp-admin) .studio-subnav-bar,
  body:not(.wp-admin) .studio-subnav-bar > .container-studio {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-footer > .container,
  body:not(.wp-admin) .site-footer .footer-inner,
  body:not(.wp-admin) .site-footer .footer-content {
    width: 94vw !important;
    max-width: 94vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* v22.39b — enforce full rail width for mobile cards and one-column grids. */
@media (max-width: 767px) {
  body:not(.wp-admin) .site-content :is(
    [class*="card"], [class*="tile"], [class*="hero"], [class*="section"],
    [class*="panel"], [class*="grid"], [class*="archive"], [class*="listing"],
    [class*="profile"], [class*="album"], [class*="poem"], [class*="post-card"],
    [class*="cta"], [class*="widget-card"], [class*="content-card"],
    .wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text,
    .wp-block-image, .wp-block-table
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-content :is(
    [class*="grid"], [class*="cards-grid"], [class*="posts-grid"],
    [class*="poems-grid"], [class*="albums-grid"], [class*="profiles-grid"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }
}


/* v22.40 — mobile layout: full-width site chrome, 90vw centered content rail. */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: clip; }

  /* Header and navigation remain edge-to-edge. */
  body:not(.wp-admin) .site-header,
  body:not(.wp-admin) .site-header > *,
  body:not(.wp-admin) .site-header .header-container,
  body:not(.wp-admin) .site-header .header-navigation-wrapper,
  body:not(.wp-admin) .site-header .primary-navigation,
  body:not(.wp-admin) .site-header nav,
  body:not(.wp-admin) .studio-subnav-bar,
  body:not(.wp-admin) .studio-subnav-bar > *,
  body:not(.wp-admin) .studio-subnav-bar .container-studio {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* The page's content rail is 90% of the viewport. */
  body:not(.wp-admin) .site-content,
  body:not(.wp-admin) .site-content > .container,
  body:not(.wp-admin) .site-content > .container-studio,
  body:not(.wp-admin) .site-content > .content-area,
  body:not(.wp-admin) .site-content > .site-main,
  body:not(.wp-admin) .site-content > main {
    width: 90vw !important;
    max-width: 90vw !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Inner content fills the rail; avoid cumulative nested margins. */
  body:not(.wp-admin) .site-content :is(
    .site-main, main, article, .entry-content, .page-content, .content-area,
    .container, .container-studio, .content-wrap, .content-inner,
    .homepage-hero-rounded, .site-hero-slanted, .blog-content-area,
    .vv-home-hero, .vv-home-main, .vv-home-poems, .vv-home-poems-grid,
    .vv-home-articles-grid, .vv-home-cta-section, .vv-theme-card,
    .vv-poem-editorial-hero, .post-card-poetic, .poet-profile-card,
    .pricing-card, .vv-archive-layout, .vv-book-luxury-card,
    [class*="card"], [class*="tile"], [class*="hero"], [class*="section"],
    [class*="panel"], [class*="grid"], [class*="archive"], [class*="listing"],
    [class*="profile"], [class*="album"], [class*="poem"], [class*="post-card"],
    [class*="cta"], [class*="widget-card"], [class*="content-card"],
    .wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text,
    .wp-block-image, .wp-block-table
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-content :is(
    [class*="grid"], [class*="cards-grid"], [class*="posts-grid"],
    [class*="poems-grid"], [class*="albums-grid"], [class*="profiles-grid"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }

  body:not(.wp-admin) .site-content :is(img, video, iframe, svg, canvas, table, input, select, textarea, button) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Footer background remains full width; its readable content is 90%. */
  body:not(.wp-admin) .site-footer > .container,
  body:not(.wp-admin) .site-footer .footer-inner,
  body:not(.wp-admin) .site-footer .footer-content {
    width: 90vw !important;
    max-width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* v22.41 — consistent mobile layout: 100% full-bleed chrome, 85% centered content. */
@media (max-width: 767px) {
  html, body { width:100%; max-width:100%; overflow-x:clip; }
  body:not(.wp-admin) .site-header,
  body:not(.wp-admin) .site-header > *,
  body:not(.wp-admin) .site-header .header-container,
  body:not(.wp-admin) .site-header .header-navigation-wrapper,
  body:not(.wp-admin) .site-header .primary-navigation,
  body:not(.wp-admin) .site-header nav,
  body:not(.wp-admin) .studio-subnav-bar,
  body:not(.wp-admin) .studio-subnav-bar > *,
  body:not(.wp-admin) .studio-subnav-bar .container-studio {
    width:100% !important; max-width:none !important; min-width:0 !important;
    margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important;
  }
  body:not(.wp-admin) .site-header,
  body:not(.wp-admin) .studio-subnav-bar {
    left:0 !important; right:0 !important; padding-left:0 !important; padding-right:0 !important;
  }
  body:not(.wp-admin) .site-content {
    width:85vw !important; max-width:85vw !important; min-width:0 !important;
    margin-left:auto !important; margin-right:auto !important;
    padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important;
  }
  body:not(.wp-admin) .site-content > *,
  body:not(.wp-admin) .site-content :is(
    .site-main, main, article, .entry-content, .page-content, .content-area,
    .container, .container-studio, .content-wrap, .content-inner,
    .homepage-hero-rounded, .site-hero-slanted, .blog-content-area,
    .vv-home-hero, .vv-home-main, .vv-home-poems, .vv-home-poems-grid,
    .vv-home-articles-grid, .vv-home-cta-section, .vv-theme-card,
    .vv-poem-editorial-hero, .post-card-poetic, .poet-profile-card,
    .pricing-card, .vv-archive-layout, .vv-book-luxury-card,
    [class*="card"], [class*="tile"], [class*="hero"], [class*="section"],
    [class*="panel"], [class*="grid"], [class*="archive"], [class*="listing"],
    [class*="profile"], [class*="album"], [class*="poem"], [class*="post-card"],
    [class*="cta"], [class*="widget-card"], [class*="content-card"],
    .wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text,
    .wp-block-image, .wp-block-table
  ) {
    width:100% !important; max-width:100% !important; min-width:0 !important;
    margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important;
  }
  body:not(.wp-admin) .site-content :is(
    [class*="grid"], [class*="cards-grid"], [class*="posts-grid"],
    [class*="poems-grid"], [class*="albums-grid"], [class*="profiles-grid"]
  ) { grid-template-columns:minmax(0,1fr) !important; column-gap:0 !important; }
  body:not(.wp-admin) .site-content :is(img, video, iframe, svg, canvas, table, input, select, textarea, button) {
    max-width:100% !important; box-sizing:border-box !important;
  }
  body:not(.wp-admin) .site-footer > .container,
  body:not(.wp-admin) .site-footer .footer-inner,
  body:not(.wp-admin) .site-footer .footer-content {
    width:85vw !important; max-width:85vw !important;
    margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important;
  }
}



/* ================================================================
   Vers & Vorm — globale 85%-content normalisatie (v22.42)
   Alle openbare templates gebruiken één gecentreerde contentrail.
   Binnen die rail vullen componenten de beschikbare breedte; zo stapelen
   max-widths en geneste containers niet langer op elkaar.
   Header- en navigatieachtergronden blijven full-bleed.
   ================================================================ */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body:not(.wp-admin) { overflow-x: clip; }

/* De buitenste contentrail: 85% van de viewport, gecentreerd. */
body:not(.wp-admin) .site-content,
body:not(.wp-admin) #content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Directe hoofdwrappers vullen de rail zonder een tweede max-width-beperking. */
body:not(.wp-admin) :is(.site-content, #content) > *,
body:not(.wp-admin) :is(.site-content, #content) :is(
  .site-main, main, article, .content-area, .entry-content, .page-content,
  .entry-header, .entry-footer, .post-content, .page-inner, .content-wrap,
  .content-inner, .container, .container-studio, .container-narrow,
  .single-page-container, .single-post-content, .vv-single-article-content,
  .vv-single-post-main, .blog-content-area, .blog-studio-layout,
  .author-studio-hero, .author-profile-block, .builder-wrapper,
  .builder-container, .vv-checkout-styled-wrapper, .vv-contact-container,
  .vv-form-editor-content, .vv-studio-page, .vv-profile-page,
  .vv-album-page, .vv-poem-archive-page, .vv-plugin-page,
  .vv-theme-landing-page, .vv-landing-builder-container,
  .vv-home-main, .vv-home-poems, .vv-home-cta-section,
  .vv-archive-layout, .vv-archive-grid, .vv-blog-archive-grid,
  .vv-poem-archive-grid, .wp-block-group, .wp-block-columns,
  .wp-block-cover, .wp-block-media-text
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Alle contentcomponenten blijven binnen de 85%-rail, ook in unieke templates. */
body:not(.wp-admin) :is(.site-content, #content) :is(
  [class*="card"], [class*="tile"], [class*="hero"], [class*="section"],
  [class*="panel"], [class*="grid"], [class*="archive"], [class*="listing"],
  [class*="profile"], [class*="album"], [class*="poem"], [class*="gedicht"],
  [class*="post"], [class*="cta"], [class*="widget"], [class*="form"],
  [class*="editor"], [class*="studio"], [class*="template"],
  [class*="content"], [class*="container"], [class*="wrap"], [class*="inner"]
) {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
body:not(.wp-admin) :is(.site-content, #content) :is(
  img, video, iframe, svg, canvas, table, input, select, textarea, button
) { max-width: 100% !important; box-sizing: border-box !important; }
body:not(.wp-admin) :is(.site-content, #content) img { height: auto; }

/* Header, primaire navigatie en Studio-subnavigatie blijven 100% breed. */
body:not(.wp-admin) :is(
  .site-header, .site-header > *, .header-container,
  .header-navigation-wrapper, .primary-navigation, .site-header nav,
  .studio-subnav-bar, .studio-subnav-bar > *, .studio-subnav-items,
  .vv-header-content-spacer, .site-footer
) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
body:not(.wp-admin) :is(.site-header, .studio-subnav-bar) {
  left: 0 !important; right: 0 !important;
}
/* Footerachtergrond full-width; alleen de inhoud krijgt dezelfde 85%-rail. */
body:not(.wp-admin) :is(
  .site-footer > .container, .site-footer .footer-inner,
  .site-footer .footer-content, .site-footer .container-studio
) {
  width: 85% !important;
  max-width: 85% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}


/* Vers & Vorm 22.43 — header blijft in de normale documentstroom (niet sticky). */
.site-header {
  position: static !important;
  top: auto !important;
}

/* Vers & Vorm 22.44 — mobiel hoofdmenu loopt van schermrand tot schermrand. */
@media (max-width: 768px) {
  body:not(.wp-admin) .site-header,
  body:not(.wp-admin) .site-header .header-container,
  body:not(.wp-admin) .site-header .header-navigation-wrapper {
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-header .primary-navigation {
    left: calc(50% - 50vw) !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) .site-header .primary-navigation > ul,
  body:not(.wp-admin) .site-header .primary-navigation ul#primary-menu {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* Vers & Vorm 22.45 — site-header exact full width, zonder horizontale padding of marges. */
html,
body,
body .site-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}
body .site-wrapper > header.site-header,
body header.site-header {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* v22.46: definitive header width override lives at end of assets/css/builder.css. */


/* Vers & Vorm v22.47 — header full-bleed; geen zijmarges of padding op header. */
html, body { margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; }
body:not(.wp-admin) .site-wrapper { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; }
body:not(.wp-admin) header.site-header,
body.home header.site-header,
body.front-page header.site-header {
  display:block !important; position:static !important;
  width:100vw !important; min-width:0 !important; max-width:none !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  padding-left:0 !important; padding-right:0 !important;
  left:auto !important; right:auto !important; transform:none !important;
  box-sizing:border-box !important;
}
body:not(.wp-admin) header.site-header > .header-container,
body.home header.site-header > .header-container,
body.front-page header.site-header > .header-container {
  display:flex !important; width:100% !important; min-width:0 !important; max-width:none !important;
  margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important;
  box-sizing:border-box !important;
}
body:not(.wp-admin) header.site-header .header-navigation-wrapper,
body:not(.wp-admin) header.site-header .primary-navigation,
body:not(.wp-admin) header.site-header .studio-subnav-bar,
body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
  width:100% !important; min-width:0 !important; max-width:none !important;
  margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important;
}
body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio { padding-left:0 !important; padding-right:0 !important; }


/* v22.48: 20px binnenmarge links en rechts in de header, buitenrand blijft full-width */
body:not(.wp-admin) header.site-header .header-container {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}


/* Vers & Vorm v22.49: desktop header content centered in a 1280px block, with 20px inner gutters. The header background remains full-width. */
@media (min-width: 1024px) {
  body:not(.wp-admin) header.site-header > .header-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 1023px) {
  body:not(.wp-admin) header.site-header > .header-container,
  body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}


/* Vers & Vorm v22.50 — fix mobiele header/menu: geen horizontale overflow. */
html, body { max-width:100%; overflow-x:clip !important; }
body:not(.wp-admin) .site-wrapper { width:100% !important; max-width:100% !important; overflow-x:clip !important; }
body:not(.wp-admin) header.site-header,
body:not(.wp-admin) .site-wrapper > header.site-header {
  width:100% !important; max-width:100% !important; min-width:0 !important;
  margin-left:0 !important; margin-right:0 !important;
  left:auto !important; right:auto !important; transform:none !important;
  box-sizing:border-box !important;
}
body:not(.wp-admin) header.site-header > .header-container {
  width:100% !important; max-width:1280px !important; min-width:0 !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:20px !important; padding-right:20px !important;
  box-sizing:border-box !important;
}
body:not(.wp-admin) header.site-header .header-navigation-wrapper,
body:not(.wp-admin) header.site-header .primary-navigation,
body:not(.wp-admin) header.site-header nav,
body:not(.wp-admin) header.site-header .studio-subnav-bar,
body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
  min-width:0 !important; box-sizing:border-box !important;
}
@media (max-width:1023px) {
  body:not(.wp-admin) header.site-header > .header-container {
    display:block !important; width:100% !important; max-width:100% !important;
    padding-left:20px !important; padding-right:20px !important;
  }
  body:not(.wp-admin) header.site-header .header-navigation-wrapper,
  body:not(.wp-admin) header.site-header .primary-navigation {
    width:100% !important; max-width:100% !important; min-width:0 !important;
    left:auto !important; right:auto !important; margin-left:0 !important; margin-right:0 !important;
    transform:none !important; box-sizing:border-box !important;
  }
  body:not(.wp-admin) header.site-header .primary-navigation > ul,
  body:not(.wp-admin) header.site-header .primary-navigation ul#primary-menu {
    width:100% !important; max-width:100% !important; min-width:0 !important;
    box-sizing:border-box !important; flex-wrap:wrap !important;
  }
  body:not(.wp-admin) header.site-header .primary-navigation li,
  body:not(.wp-admin) header.site-header .primary-navigation a {
    max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
    overflow-wrap:anywhere;
  }
  body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
    width:100% !important; max-width:100% !important; min-width:0 !important;
    padding-left:20px !important; padding-right:20px !important;
  }
}


/* Vers & Vorm v22.52 — definitieve gecentreerde headerinhoud op desktop */
@media screen and (min-width: 1024px) {
  body:not(.wp-admin) .site-wrapper > header.site-header > .header-container,
  body:not(.wp-admin) header.site-header > .header-container {
    display: flex !important;
    width: calc(100% - 40px) !important;
    max-width: 1280px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
    width: calc(100% - 40px) !important;
    max-width: 1280px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
  }
}
@media screen and (max-width: 1023px) {
  body:not(.wp-admin) .site-wrapper > header.site-header > .header-container,
  body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* Vers & Vorm v22.53 — centreer hoofdmenu én knoppenbalk op dezelfde desktopbreedte */
@media screen and (min-width: 1024px) {
  body:not(.wp-admin) .site-wrapper > header.site-header > .header-container,
  body:not(.wp-admin) header.site-header > .header-container,
  body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
    width: min(1280px, calc(100% - 48px)) !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  /* De menu-inhoud en actieknop blijven binnen de gecentreerde headercontainer. */
  body:not(.wp-admin) header.site-header > .header-container .header-navigation-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* De rij met de onderste navigatieknoppen gebruikt exact dezelfde container. */
  body:not(.wp-admin) header.site-header .studio-subnav-bar .studio-subnav-items {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}
@media screen and (max-width: 1023px) {
  body:not(.wp-admin) header.site-header > .header-container,
  body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body:not(.wp-admin) header.site-header .studio-subnav-bar .studio-subnav-items {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* Vers & Vorm v22.54 — studio-subnav-bar schermbreed, inhoud gecentreerd op 1280px */
@media screen and (min-width: 1024px) {
  body:not(.wp-admin) header.site-header .studio-subnav-bar {
    display: block !important; width: 100% !important; max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important;
    padding-right: 0 !important; box-sizing: border-box !important; float: none !important;
    transform: none !important;
  }
  body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio,
  body:not(.wp-admin) header.site-header .studio-subnav-bar .studio-subnav-items {
    width: min(1280px, calc(100% - 48px)) !important; max-width: 1280px !important;
    margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important;
    padding-right: 0 !important; box-sizing: border-box !important; float: none !important;
    left: auto !important; right: auto !important; transform: none !important;
  }
}
@media screen and (max-width: 1023px) {
  body:not(.wp-admin) header.site-header .studio-subnav-bar {
    width: 100% !important; max-width: none !important; margin-left: 0 !important;
    margin-right: 0 !important; box-sizing: border-box !important;
  }
  body:not(.wp-admin) header.site-header .studio-subnav-bar > .container-studio,
  body:not(.wp-admin) header.site-header .studio-subnav-bar .studio-subnav-items {
    width: calc(100% - 32px) !important; max-width: none !important;
    margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important;
    padding-right: 0 !important; box-sizing: border-box !important;
  }
}


/* Vers & Vorm v22.55 — uniforme contentbreedte voor alle pagina's */
@media screen and (min-width: 1024px) {
  body:not(.wp-admin) .site-content,
  body:not(.wp-admin) main.site-main,
  body:not(.wp-admin) .single-page-container,
  body:not(.wp-admin) .site-main.container-studio,
  body:not(.wp-admin) .site-footer > .container,
  body:not(.wp-admin) .site-footer .site-info,
  body:not(.wp-admin) .site-footer .footer-widgets {
    width: min(1280px, calc(100% - 48px)) !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  body:not(.wp-admin) main.site-main > .container-studio,
  body:not(.wp-admin) .site-content > .container-studio {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}
@media screen and (max-width: 1023px) {
  body:not(.wp-admin) .site-content,
  body:not(.wp-admin) main.site-main,
  body:not(.wp-admin) .single-page-container,
  body:not(.wp-admin) .site-main.container-studio,
  body:not(.wp-admin) .site-footer > .container,
  body:not(.wp-admin) .site-footer .site-info,
  body:not(.wp-admin) .site-footer .footer-widgets {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Vers & Vorm v2.21 - 20px padding rondom single gedicht kaart & mobiele categorie breedte */
body.single-gebruikers_gedicht .single-poem-card,
body.single-gebruikers_gedicht .vv-single-poem-card {
    padding: 20px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
    body.category .site-content,
    body.archive .site-content,
    body.tax-gedicht_thema .site-content,
    body.category main.site-main,
    body.archive main.site-main,
    body.tax-gedicht_thema main.site-main,
    .vv-archive-layout,
    .vv-archive-grid {
        width: 94vw !important;
        max-width: 94vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================
   VERS & VORM v2.23: UNIFORME BREEDTE (1280px),
   2-KOLOMS CATEGORIE GRID, VOLLE BREEDTE AFBEELDING & GEEN MOBIELE SCHADUW
   ========================================================== */

/* 1. Breedte van alle gevraagde pagina's exact gelijk aan het menu (1280px) */
body:not(.wp-admin) .page-template-page-premium-dichters main.site-main,
body:not(.wp-admin) .page-template-page-dichtbundels-overzicht main.site-main,
body:not(.wp-admin) .page-template-page-themas-overzicht main.site-main,
body:not(.wp-admin) .page-template-page-gedichten-builder3 main.site-main,
body:not(.wp-admin) .page-template-page-dichters-profiel .container-studio,
body:not(.wp-admin) .page-template-page-dichters-profiel main.site-main,
body:not(.wp-admin) .author main.site-main,
body:not(.wp-admin) .builder-wrapper,
body:not(.wp-admin) .builder-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.container-studio[style*="max-width:1200px"],
.container-studio[style*="max-width: 1200px"] {
    max-width: 1280px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 2. Gedichten categorie pagina: 2 kolommen grid */
body.category .vv-home-poems-grid,
body.tax-gedicht_thema .vv-home-poems-grid,
body.archive .vv-home-poems-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

/* 3. Afbeelding over de hele bovenkant van de kaart */
body.category .post-card-poetic,
body.tax-gedicht_thema .post-card-poetic,
body.archive .post-card-poetic,
.vv-home-poems-grid .post-card-poetic {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 16px !important;
}

body.category .post-card-poetic .post-card-thumb,
body.tax-gedicht_thema .post-card-poetic .post-card-thumb,
body.archive .post-card-poetic .post-card-thumb,
.vv-home-poems-grid .post-card-poetic .post-card-thumb {
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden !important;
    background-color: #f1f2f4 !important;
}

body.category .post-card-poetic .post-card-thumb img,
body.tax-gedicht_thema .post-card-poetic .post-card-thumb img,
body.archive .post-card-poetic .post-card-thumb img,
.vv-home-poems-grid .post-card-poetic .post-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 4 & 5. Schaduw op mobiel verwijderen van kaarten op de categoriepagina en single gedichtenpagina */
@media screen and (max-width: 768px) {
    /* Gedichten archief- en categoriekaarten mobiel zonder schaduw */
    body.category .post-card-poetic,
    body.tax-gedicht_thema .post-card-poetic,
    body.archive .post-card-poetic,
    body.category .vv-home-poems-grid .post-card-poetic,
    body.tax-gedicht_thema .vv-home-poems-grid .post-card-poetic {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        border: 1px solid #dde3e7 !important;
    }

    /* Single gedichtenpagina kaarten mobiel zonder schaduw */
    body.single-gebruikers_gedicht .single-poem-card,
    body.single-gebruikers_gedicht .vv-single-poem-card,
    body.single-gebruikers_gedicht .book-preview-card,
    body.single-gebruikers_gedicht .poem-rating-box,
    body.single-gebruikers_gedicht .related-poems-section .post-card-poetic,
    body.single-gebruikers_gedicht .vv-related-home-section .post-card-poetic,
    body.single-gebruikers_gedicht .sidebar-widget-card {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        border: 1px solid #dde3e7 !important;
    }

    /* Categorie grid schakelt op mobiel netjes over naar 1 kolom */
    body.category .vv-home-poems-grid,
    body.tax-gedicht_thema .vv-home-poems-grid,
    body.archive .vv-home-poems-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }
}


/* ==========================================================================
   VERS & VORM v2.24: DEFINITIEVE BREEDTES, 2-KOLOMS GRID & GEEN MOBIELE SCHADUW
   ========================================================================== */

/* 1. Contentbreedte exact gelijk aan het menu (1280px) */
body:not(.wp-admin) .site-content,
body:not(.wp-admin) #content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* De gevraagde pagina's: Bekende dichters, Dichtbundels, Thema's, Studio, Profiel, Dichterspagina */
body:not(.wp-admin) .page-template-page-premium-dichters main.site-main,
body:not(.wp-admin) .page-template-page-dichtbundels-overzicht main.site-main,
body:not(.wp-admin) .page-template-page-themas-overzicht main.site-main,
body:not(.wp-admin) .page-template-page-gedichten-builder3 main.site-main,
body:not(.wp-admin) .page-template-page-dichters-profiel .container-studio,
body:not(.wp-admin) .page-template-page-dichters-profiel main.site-main,
body:not(.wp-admin) .author main.site-main,
body:not(.wp-admin) .author-gedichten main.site-main,
body:not(.wp-admin) .builder-wrapper,
body:not(.wp-admin) .builder-container,
body:not(.wp-admin) .site-main.container-studio,
body:not(.wp-admin) .vv-home-hero-wrap > .container-studio {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.container-studio[style*="max-width:1200px"],
.container-studio[style*="max-width: 1200px"],
.container-studio[style*="max-width:800px"] {
    max-width: 1280px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 2. Gedichten categorie pagina: strak 2 kolommen grid */
body.category .vv-home-poems-grid,
body.tax-gedicht_thema .vv-home-poems-grid,
body.archive .vv-home-poems-grid,
.vv-home-poems-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}

/* 3. Afbeelding over de hele bovenkant van de kaart */
body.category .post-card-poetic,
body.tax-gedicht_thema .post-card-poetic,
body.archive .post-card-poetic,
.vv-home-poems-grid .post-card-poetic {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid #dde3e7 !important;
}

body.category .post-card-poetic .post-card-thumb,
body.tax-gedicht_thema .post-card-poetic .post-card-thumb,
body.archive .post-card-poetic .post-card-thumb,
.vv-home-poems-grid .post-card-poetic .post-card-thumb {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden !important;
    background-color: #f1f2f4 !important;
}

body.category .post-card-poetic .post-card-thumb a,
body.category .post-card-poetic .post-card-thumb img,
body.tax-gedicht_thema .post-card-poetic .post-card-thumb img,
body.archive .post-card-poetic .post-card-thumb img,
.vv-home-poems-grid .post-card-poetic .post-card-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.category .post-card-poetic .post-card-body,
body.tax-gedicht_thema .post-card-poetic .post-card-body,
body.archive .post-card-poetic .post-card-body,
.vv-home-poems-grid .post-card-poetic .post-card-body {
    padding: 22px !important;
    background: #FFFFFF !important;
}

/* 4 & 5. Schaduwen op mobiel verwijderen (Categorie & Single Gedichten) */
@media screen and (max-width: 768px) {
    /* Categorie & archief kaarten mobiel zonder schaduw */
    body.category .post-card-poetic,
    body.tax-gedicht_thema .post-card-poetic,
    body.archive .post-card-poetic,
    body.category .vv-home-poems-grid .post-card-poetic,
    body.tax-gedicht_thema .vv-home-poems-grid .post-card-poetic,
    .vv-home-poems-grid .post-card-poetic {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        border: 1px solid #dde3e7 !important;
    }

    /* Single gedichtenpagina kaarten mobiel zonder schaduw */
    body.single-gebruikers_gedicht .single-poem-card,
    body.single-gebruikers_gedicht .vv-single-poem-card,
    body.single-gebruikers_gedicht .book-preview-card,
    body.single-gebruikers_gedicht .poem-rating-box,
    body.single-gebruikers_gedicht .related-poems-section .post-card-poetic,
    body.single-gebruikers_gedicht .vv-related-home-section .post-card-poetic,
    body.single-gebruikers_gedicht .sidebar-widget-card,
    body.single-gebruikers_gedicht .single-post-card {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        border: 1px solid #dde3e7 !important;
    }

    /* Categorie grid schakelt op mobiel netjes naar 1 kolom */
    body.category .vv-home-poems-grid,
    body.tax-gedicht_thema .vv-home-poems-grid,
    body.archive .vv-home-poems-grid,
    .vv-home-poems-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }
}


/* 4.7: poetische navigatie, mobiele zoekstrook en panoramische single hero */
.gg47-header-tools{display:flex;align-items:center;margin-left:auto}
.gg47-search-toggle{border:1px solid #dde3e7;background:#ffffff;color:#011726;border-radius:50%;width:39px;height:39px;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.gg47-search-toggle:hover,.gg47-search-toggle:focus-visible{background:#dde3e7;transform:translateY(-1px)}
.gg47-search-panel{position:absolute;top:100%;right:max(15px,calc((100vw - 1280px)/2));z-index:1000;width:min(430px,calc(100vw - 30px));padding:22px;background:#fffdf9;border:1px solid #dde3e7;border-radius:0 0 18px 18px;box-shadow:0 20px 50px #01172626}
.gg47-search-panel[hidden]{display:none!important}.gg47-search-panel label{display:block;font-size:.9rem;margin-bottom:10px;font-weight:650;color:#011726}
.gg47-search-input-row{display:flex;gap:8px}.gg47-search-input-row input{width:100%;min-width:0;border:1px solid #dde3e7;border-radius:9px;padding:12px;color:#011726;background:white}
.gg47-search-input-row button{border:0;border-radius:9px;padding:0 17px;background:#c45d00;color:white;cursor:pointer}
.gg47-mobile-secondary{display:none}
.studio-subnav-bar{background:linear-gradient(110deg,#fffdf9,#f1f2f4)!important;border-top:1px solid #f1f2f4;border-bottom:1px solid #dde3e7;box-shadow:0 7px 18px #0117260a}
.studio-subnav-bar .studio-subnav-items{display:flex;align-items:center;justify-content:center;gap:clamp(7px,1.2vw,18px);max-width:1280px;margin:auto}
.studio-subnav-bar a{border-radius:12px!important;transition:background .2s ease,transform .2s ease}.studio-subnav-bar a:hover{background:#f1f2f4!important;transform:translateY(-1px)}
body.single-gebruikers_gedicht .vv-poem-editorial-hero{background:linear-gradient(90deg,rgba(255,252,246,.93) 0%,rgba(255,250,242,.84) 47%,rgba(255,248,240,.52) 100%),url('assets/images/gg47-single-hero.webp') center center/cover no-repeat!important;min-height:380px!important;border:1px solid #dde3e7!important}
body.single-gebruikers_gedicht .vv-poem-editorial-hero:before,body.single-gebruikers_gedicht .vv-poem-editorial-hero:after{display:none!important}
body.single .single-hero-banner{background-image:linear-gradient(90deg,rgba(255,251,244,.90),rgba(255,250,243,.45)),url('assets/images/gg47-single-hero.webp')!important;background-size:cover!important;background-position:center!important}
@media(max-width:767px){
 .site-header .header-container{display:flex!important;align-items:center}
 .gg47-header-tools{order:2;margin-left:auto;margin-right:8px}.menu-toggle{order:3}
 .studio-subnav-bar{display:none!important}
 .gg47-search-panel{top:100%;left:15px;right:15px;width:auto;border-radius:0 0 15px 15px}
 .gg47-mobile-secondary{display:grid!important;grid-template-columns:1fr 1fr;gap:4px;padding:15px 4px 8px;border-top:1px solid #dde3e7;margin-top:13px}
 .gg47-mobile-secondary-heading{grid-column:1/-1;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#c45d00;font-weight:750;padding:7px 10px}
 .gg47-mobile-secondary a{display:flex;align-items:center;gap:7px;padding:12px 9px;border-radius:9px;text-decoration:none!important;background:#ffffff;color:#011726!important;font-size:.86rem;line-height:1.3;min-width:0}
 .gg47-mobile-secondary a i{width:18px;text-align:center;color:#c45d00}
 body.single-gebruikers_gedicht .vv-poem-editorial-hero{min-height:290px!important;background-position:55% center!important}
}
@media(max-width:390px){.gg47-mobile-secondary{grid-template-columns:1fr}}

/* 4.8: zoekknop naast accountactie, identieke knopvorm met lichter palet */
.site-header .header-auth-action {display:flex!important;align-items:center!important;gap:10px!important;}
.site-header .gg48-desktop-search {display:flex;align-items:center;flex:0 0 auto;}
.site-header .gg48-mobile-search {display:none;}
.site-header .gg47-search-toggle {display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:40px;min-width:42px;border-radius:999px!important;background:#f1f2f4!important;border:1px solid #87959e!important;color:#011726!important;box-shadow:0 2px 7px rgba(78,56,33,.07);font-size:15px;line-height:1;transition:background .2s,transform .2s,box-shadow .2s;}
.site-header .gg47-search-toggle:hover,.site-header .gg47-search-toggle:focus-visible {background:#dde3e7!important;color:#011726!important;box-shadow:0 3px 10px rgba(78,56,33,.12);transform:translateY(-1px);}
@media(max-width:767px){
 .site-header .gg48-desktop-search{display:none!important;}
 .site-header .gg48-mobile-search{display:flex!important;align-items:center;order:2;margin-left:auto;margin-right:8px;}
 .site-header .menu-toggle{order:3;}
}

/* FAQ: a single calm layout aligned with the editorial hero. */
body:not(.wp-admin) .gg-faq-page > .single-post-card{padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;max-width:none!important;width:100%!important}
.gg-faq-page .single-post-header{display:none!important}
body:not(.wp-admin) .gg-faq-page .single-post-content{padding:0!important;margin:0!important;max-width:none!important;width:100%!important;background:transparent!important;border:0!important;box-shadow:none!important}
.gg-faq-page .gg-faq{width:100%;max-width:none;margin:0 0 35px;font-family:var(--vv-font-sans)}
.gg-faq-page .gg-faq-intro{box-shadow:none;background:linear-gradient(120deg,#fffdf9,#f1f2f4)}
.gg-faq-page .gg-faq-groups{gap:28px}
.gg-faq-page .gg-faq-group{padding:28px 30px;background:#fffdf9;border:1px solid #dde3e7;border-radius:20px}
.gg-faq-page .gg-faq-group h3{font-size:32px;margin:0 0 18px!important;text-align:left}
.gg-faq-page .gg-faq details{margin:0;border:0;border-top:1px solid #dde3e7;border-radius:0;background:transparent}
.gg-faq-page .gg-faq summary{padding:20px 0;font-family:var(--vv-font-sans);font-size:15px}
.gg-faq-page .gg-faq-answer{border:0;padding:0 42px 22px 0}
.gg-faq-page .gg-faq-answer p{font-family:var(--vv-font-sans);font-size:14px;line-height:1.9}
.gg-faq-page .gg-faq-plus{display:grid;place-items:center;width:30px;height:30px;border:1px solid #dde3e7;border-radius:50%;font-size:22px}
.gg-faq-page .gg-faq details[open] .gg-faq-plus{background:#f1f2f4}
.gg-faq-page .gg-faq-nav a:hover{background:#f1f2f4;border-color:#c45d00}
@media(max-width:680px){.gg-faq-page .gg-faq-group{padding:23px 19px;border-radius:17px}.gg-faq-page .gg-faq-group h3{font-size:28px}.gg-faq-page .gg-faq summary{font-size:14px;gap:14px;padding:18px 0}.gg-faq-page .gg-faq-answer{padding:0 0 19px}.gg-faq-page .gg-faq-nav{gap:8px;margin:20px 0 25px}.gg-faq-page .gg-faq-help a{width:100%}}
/* 10.23: book promotion purchase controls */
.vv-featured-form{display:grid;gap:.65rem;margin-top:1rem;padding:.9rem;border:1px solid #dde3e7;border-radius:10px;background:#ffffff;color:#011726;font-size:.88rem}
.vv-featured-form label{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-weight:700}
.vv-featured-form select{padding:.45rem .6rem;border:1px solid #87959e;border-radius:7px;background:#fff;color:#011726}
.vv-featured-form button{justify-self:start;padding:.6rem .85rem;border:0;border-radius:8px;background:#526572;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.vv-featured-form button:hover{background:#011726}
.vv-featured-form small{color:#526572;line-height:1.5}
.vv-featured-active{margin-top:1rem;padding:.7rem .85rem;border-radius:8px;background:#f1f2f4;color:#011726;font-size:.9rem;font-weight:700}
.vv-featured-consent{align-items:flex-start!important;font-weight:500!important;line-height:1.45}
.vv-featured-consent input{flex:0 0 auto;margin-top:.18rem}
.vv-featured-withdraw{display:grid;gap:.4rem;margin:.5rem 0 1rem;padding:.8rem;border:1px solid #dde3e7;border-radius:9px;background:#ffffff}
.vv-featured-withdraw button{justify-self:start;padding:.45rem .7rem;border:1px solid #c45d00;border-radius:7px;background:#fff;color:#011726;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.vv-featured-withdraw small{color:#526572;font-size:.78rem}
.gg-book-stage-label{z-index:2}
.gg-home-featured-books{display:grid;gap:.8rem;margin:1.1rem 0}
.gg-home-featured-book{display:grid;grid-template-columns:82px minmax(0,1fr);gap:.9rem;align-items:center;padding:.85rem;border:1px solid #87959e;border-radius:14px;background:#ffffff;box-shadow:0 5px 18px rgba(74,51,25,.07)}
.gg-home-featured-cover{display:grid;place-items:center;width:82px;height:110px;overflow:hidden;border-radius:7px;background:#dde3e7;color:#c45d00;text-decoration:none}
.gg-home-featured-cover img{width:100%;height:100%;object-fit:cover}
.gg-home-featured-cover span{font-size:2.2rem}
.gg-home-featured-book h3{margin:.12rem 0;font-family:var(--vv-font-serif);font-size:1.25rem;line-height:1.2}
.gg-home-featured-book h3 a,.gg-home-featured-book p a{color:#011726;text-decoration:none}
.gg-home-featured-book p{margin:.15rem 0 .4rem;color:#011726;font-size:.86rem}
.gg-home-featured-label{color:#526572;font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.gg-home-featured-cta{color:#011726;font-size:.8rem;font-weight:750}

/* 10.25.5 — Ontdekkingsmenu links, publicatieknop rechts.
   De mobiele hamburgermenustructuur blijft ongewijzigd. */
@media (min-width: 768px) {
  body:not(.wp-admin) header.site-header .studio-subnav-bar .studio-subnav-items {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body:not(.wp-admin) header.site-header .studio-subnav-bar .studio-subnav-items > a.gg-poem-publish-cta {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
}

/* Responsive themaoverzicht: bescherm bestaande en nieuwe kaarten tegen overflow. */
body.page-template-page-themas-overzicht .site-main,body.page-template-page-themas-overzicht main{min-width:0}
body.page-template-page-themas-overzicht .theme-grid,body.page-template-page-themas-overzicht .themes-grid,body.page-template-page-themas-overzicht .ggte-grid{max-width:100%;min-width:0}
body.page-template-page-themas-overzicht .ggte-grid > *{min-width:0;max-width:100%}
body.page-template-page-themas-overzicht :is(img,svg){max-width:100%}
@media(max-width:600px){body.page-template-page-themas-overzicht .ggte-wrap{width:min(calc(100% - 2 * var(--vv-gutter, 16px)),1280px);max-width:1280px;margin-inline:auto}}

/* 10.25.25 — 35px ruimte boven de inhoud op binnenpagina’s.
   Homepage-hero blijft direct onder de navigatie beginnen. */
body:not(.wp-admin) .site-content { padding-top: 35px !important; }
body.home .site-content,
body.front-page .site-content,
body:not(.wp-admin) .site-content:has(.site-hero-slanted) { padding-top: 0 !important; }

/* 10.25.26 — precies 35px lucht tussen navigatie en eerste hero op binnenpagina's.
   Overschrijft de oude :has(.site-hero-slanted)-uitzondering die de afstand wegnam. */
body:not(.wp-admin):not(.home):not(.front-page) .site-content,
body:not(.wp-admin):not(.home):not(.front-page) .site-content:has(.site-hero-slanted) {
  padding-top: 35px !important;
}
/* Geen opgetelde bovenmarge op de eerste hero. */
body:not(.wp-admin):not(.home):not(.front-page) .site-content > :first-child {
  margin-top: 0;
}
@media (max-width: 767px) {
  body:not(.wp-admin):not(.home):not(.front-page) .site-content,
  body:not(.wp-admin):not(.home):not(.front-page) .site-content:has(.site-hero-slanted) {
    padding-top: 35px !important;
  }
}

/* 10.25.27: werkelijke 35px tussen navigatie en eerste content op alle pagina's,
   ook de voorpagina (oude uitzondering zette padding op nul). */
html body:not(.wp-admin) .site-content,
html body.home:not(.wp-admin) .site-content,
html body.front-page:not(.wp-admin) .site-content,
html body:not(.wp-admin) .site-content:has(.site-hero-slanted) {
  box-sizing:border-box!important;
  padding-top:35px!important;
}
/* De kop mag zelf geen extra marge boven de ingestelde ruimte plaatsen. */
html body:not(.wp-admin) .site-content > :first-child {margin-top:0!important}

/* 10.25.28 — 35px actual space under menu, all pages, no extra site padding. */
html body#top .site-wrapper > .site-header.gg-reference-header + .vv-header-content-spacer{display:block!important;height:35px!important;min-height:35px!important;max-height:35px!important;box-sizing:border-box!important;margin:0!important;padding:0!important;}
html body#top .site-wrapper > .site-header.gg-reference-header ~ .site-content{padding-top:0!important;}

/* 10.25.30: uniforme paginalayout van de gedichtenoverzichten zonder extra theme-hero. */
body.page:has(.gg-discovery) .single-page-container{max-width:1280px!important;width:calc(100% - 20px)!important;margin:0 auto!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important;display:block!important}
body.page:has(.gg-discovery) .site-content{padding-top:0!important}
body.page:has(.gg-discovery) .gg-discovery{width:100%!important;max-width:1280px!important;margin:0 auto 65px!important;padding:0!important}
body.page:has(.gg-discovery) .gg-discovery-tabs{flex-wrap:wrap!important;overflow:visible!important;scrollbar-width:none!important}
body.page:has(.gg-discovery) .gg-discovery-layout{grid-template-columns:minmax(0,1fr) 285px!important}
body.page:has(.gg-discovery) .gg-discovery-main{min-width:0!important;width:100%!important}
body.page:has(.gg-discovery) .gg-discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.page:has(.gg-discovery) .gg-discovery-card{min-width:0!important}
@media(max-width:900px){body.page:has(.gg-discovery) .gg-discovery-layout{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:640px){body.page:has(.gg-discovery) .gg-discovery-grid{grid-template-columns:minmax(0,1fr)!important}}

/* 3.3.19: twee afzonderlijke, lichte sidebar-kaarten op single gedichten. */
body.single-gebruikers_gedicht .gg318-sidebar-rating {margin:0 0 13px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;min-width:0!important;}
body.single-gebruikers_gedicht .gg318-sidebar-rating .gg-poem-actions {margin:0!important;min-width:0!important;}
body.single-gebruikers_gedicht .gg318-sidebar-rating .gg-poem-actions__header {display:none!important;}
body.single-gebruikers_gedicht .gg318-sidebar-rating .gg-poem-actions__controls {padding-top:0!important;}
body.single-gebruikers_gedicht .gg318-sidebar-rating .gg-wow-rating-prompt {font-size:12px!important;font-weight:700!important;letter-spacing:.015em!important;margin:0 0 10px!important;text-align:center!important;}
body.single-gebruikers_gedicht .gg319-react-card {position:relative;box-sizing:border-box;overflow:hidden;min-width:0;margin:0 0 18px;padding:22px 20px 20px;border-radius:20px;border:1px solid #dde3e7;background:linear-gradient(145deg,#fffdfa 0%,#f1f2f4 100%);box-shadow:0 9px 24px rgba(103,70,45,.07);text-align:center;}
body.single-gebruikers_gedicht .gg319-react-card:before {content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#87959e,#c45d00,#dde3e7);}
body.single-gebruikers_gedicht .gg319-react-card__accent {display:block;font-size:17px;color:#c45d00;line-height:1;margin-bottom:8px;}
body.single-gebruikers_gedicht .gg319-react-card h2 {font-family:'Outfit',Arial,sans-serif!important;font-weight:650!important;font-size:clamp(25px,2vw,30px)!important;line-height:1.07!important;letter-spacing:-.02em!important;color:#011726!important;margin:0 0 9px!important;}
body.single-gebruikers_gedicht .gg319-react-card p {font-size:13px!important;line-height:1.6!important;color:#526572!important;margin:0 0 16px!important;}
body.single-gebruikers_gedicht .gg319-react-card__link {display:inline-flex;justify-content:center;align-items:center;gap:9px;width:100%;box-sizing:border-box;border:1px solid #87959e;border-radius:12px;padding:11px 12px;background:#ffffff;color:#526572!important;font-size:12.5px;font-weight:750;text-decoration:none!important;transition:background .2s,border-color .2s,transform .2s;}
body.single-gebruikers_gedicht .gg319-react-card__link:hover {background:#f1f2f4;border-color:#c45d00;transform:translateY(-1px);}
@media(max-width:640px){body.single-gebruikers_gedicht .gg319-react-card {padding:20px 17px 18px;}body.single-gebruikers_gedicht .gg319-react-card h2 {font-size:27px!important;}}

/* v3.3.20 — consistente titels, gecentreerde gedichttitel, één schrijfatelierkaart */
html body.single-gebruikers_gedicht .ggw-poem-paper__title {
  text-align:center!important; width:100%!important; margin-left:auto!important; margin-right:auto!important;
  text-wrap:balance;
}
html body.single-gebruikers_gedicht .ggw-context-sidebar .gg318-sidebar-rating .gg-wow-rating-prompt {
  display:block!important;
  font-family:'Outfit',Arial,sans-serif!important;
  font-weight:650!important;
  font-size:clamp(25px,2vw,30px)!important;
  line-height:1.07!important;
  letter-spacing:-.02em!important;
  color:#011726!important;
  margin:0 0 13px!important;
  text-align:center!important;
  text-transform:none!important;
}
/* Schrijfatelier heeft maar één visuele kaart; binnenliggende onderdelen zijn geen kaarten. */
html body.ggw-theme .ggw-context-sidebar > .ggw-side-studio {
  position:relative!important; box-sizing:border-box!important;
  padding:22px 20px!important; margin:0 0 18px!important;
  border:1px solid #dde3e7!important; border-radius:20px!important;
  background:linear-gradient(140deg,#ffffff,#f1f2f4)!important;
  box-shadow:0 9px 24px rgba(103,70,45,.07)!important;
  overflow:hidden!important;
}
html body.ggw-theme .ggw-context-sidebar > .ggw-side-studio :is(h2,p,.ggw-eyebrow) {
  background:transparent!important;box-shadow:none!important;border:0!important;
}
html body.ggw-theme .ggw-context-sidebar > .ggw-side-studio .ggw-btn {
  max-width:100%!important; box-sizing:border-box!important;
}
@media(max-width:640px){
 html body.single-gebruikers_gedicht .ggw-context-sidebar .gg318-sidebar-rating .gg-wow-rating-prompt{font-size:27px!important}
 html body.ggw-theme .ggw-context-sidebar > .ggw-side-studio{padding:20px 17px!important}
}

/* 3.3.21 — gedichttitel horizontaal gecentreerd binnen de kaart */
body.single-gebruikers_gedicht .ggw-poem-paper .ggw-poem-paper__center {
  width:100%; box-sizing:border-box; text-align:center!important;
}
body.single-gebruikers_gedicht .ggw-poem-paper h2.ggw-poem-paper__title {
  display:block!important; width:100%!important; max-width:100%!important;
  margin-inline:auto!important; padding-inline:0!important;
  text-align:center!important; text-indent:0!important;
  transform:none!important; position:relative; left:auto!important; right:auto!important;
  overflow-wrap:break-word; text-wrap:balance;
}

/* 3.3.25 – Nieuwste Downloadatelier-prent: één kaart, zonder dubbele omlijsting */
.vv-latest-prent{box-sizing:border-box;width:100%;max-width:100%;min-width:0;overflow:hidden;padding:22px 20px 20px;border-radius:24px;border:1px solid #dde3e7;background:linear-gradient(155deg,#fffdf9 0%,#ffffff 80%,#f1f2f4 100%);box-shadow:0 12px 32px rgba(104,66,48,.065);display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:center}
.vv-latest-prent__eyebrow{font:700 10px/1.5 'Outfit',sans-serif;letter-spacing:.15em;color:#c45d00}
.vv-latest-prent__heading{font:600 clamp(24px,2.5vw,29px)/1.05 'Outfit',Arial,sans-serif!important;color:#011726!important;margin:0!important;text-align:center!important}
.vv-latest-prent__image{display:block;max-width:100%;border-radius:15px;overflow:hidden;background:#f1f2f4;border:1px solid #dde3e7;line-height:0;transition:transform .2s ease}
.vv-latest-prent__image:hover{transform:translateY(-2px)}
.vv-latest-prent__image img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;margin:0 auto}
.vv-latest-prent__title{font:600 20px/1.15 'Outfit',Arial,sans-serif!important;color:#011726!important;margin:2px 0 0!important}
.vv-latest-prent__copy{font:400 12px/1.6 'Outfit',sans-serif!important;color:#526572!important;margin:0!important}
.vv-latest-prent__link{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 10px;border-radius:12px;background:#c45d00;color:#fff!important;font:700 11px/1.35 'Outfit',sans-serif;text-align:center;text-decoration:none!important;transition:background .2s ease}
.vv-latest-prent__link:hover,.vv-latest-prent__link:focus-visible{background:#c45d00;color:#fff!important}
/* The sidebar's standard widget wrapper should never become a second card. */
.sidebar-studio > .widget_vv_latest_prent,.ggw-side-widgets .widget_vv_latest_prent,.sidebar-studio > .widget:has(> .vv-latest-prent),.ggw-side-widgets .widget:has(> .vv-latest-prent){padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
@media(max-width:640px){.vv-latest-prent{padding:19px 16px;border-radius:19px}.vv-latest-prent__image img{max-height:260px}}

/* Version 4.0.3: stable sitewide typographic tones; existing hero and card layouts unchanged. */
body.page-slug-schrijfstudio .entry-content{max-width:1280px;margin-inline:auto}
body.page-slug-schrijfstudio .ggwf-hub{font-family:'Outfit',system-ui,sans-serif}

body.ggw-schrijfhub .ggw-page-article,body.ggw-schrijfhub .ggw-entry-content{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
body.ggw-schrijfhub .ggw-plugin-page{background:transparent!important;box-shadow:none!important;border:0!important}

/* Vers & Vorm 4.1.33 – editorial depth and coherent interaction system.
   Additive rules only: preserve page templates and avoid nesting duplicate cards. */
:root{--vv33-ink:#011726;--vv33-muted:#526572;--vv33-accent:#c45d00;--vv33-stroke:#dde3e7;--vv33-surface:#fffdf9;--vv33-shadow:0 16px 42px rgba(82,51,38,.075),0 3px 10px rgba(82,51,38,.035)}
/* Cards: enhance existing semantic cards without imposing another outer container. */
body :is(.wp-block-group.is-style-card,.wp-block-group.is-style-elevated,.vv32-editorial,.vv-poem-card,.gg-poem-card,.ggw-poem-card,.vv-theme-card,.ggw-theme-card,.vv33-elevated){border:1px solid var(--vv33-stroke);border-radius:22px;background:linear-gradient(160deg,#fffefa 0%,#ffffff 100%);box-shadow:var(--vv33-shadow);transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease}
@media(hover:hover){body :is(.wp-block-group.is-style-card,.wp-block-group.is-style-elevated,.vv-poem-card,.gg-poem-card,.ggw-poem-card,.vv-theme-card,.ggw-theme-card,.vv33-elevated):hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(82,51,38,.11);border-color:#dde3e7}}
body :is(.entry-content,.wp-block-post-content) :is(.wp-block-quote,.wp-block-pullquote){border-left:3px solid #c45d00;background:linear-gradient(115deg,#ffffff,#fffdf9);border-radius:0 18px 18px 0;padding:clamp(18px,3vw,30px);box-shadow:0 8px 25px rgba(92,60,42,.045)}
body :is(.entry-content,.wp-block-post-content) .wp-block-separator{border:0;height:1px;background:linear-gradient(90deg,transparent,#87959e,transparent);opacity:1;max-width:340px;margin-block:32px}
body :is(.entry-content,.wp-block-post-content) .wp-block-image img{border-radius:18px}
body :is(.entry-content,.wp-block-post-content) .wp-block-button__link{border-radius:13px;box-shadow:0 5px 14px rgba(154,84,55,.12);transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover){body :is(.entry-content,.wp-block-post-content) .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(154,84,55,.18)}}
body :is(.entry-content,.wp-block-post-content) :is(input:not([type=checkbox]):not([type=radio]),textarea,select){border-radius:12px;border:1px solid #dde3e7;background:#fffefa;transition:border-color .2s ease,box-shadow .2s ease}
body :is(.entry-content,.wp-block-post-content) :is(input,textarea,select):focus-visible{outline:2px solid #c45d00;outline-offset:2px;box-shadow:0 0 0 4px rgba(180,108,80,.1)}
body :is(.entry-content,.wp-block-post-content) .wp-block-table{overflow-x:auto;border-radius:16px;border:1px solid var(--vv33-stroke)}
body :is(.entry-content,.wp-block-post-content) .wp-block-table table{margin:0}
body :is(.entry-content,.wp-block-post-content) .wp-block-table th{background:#f1f2f4;color:var(--vv33-ink)}
body :is(.entry-content,.wp-block-post-content) .wp-block-table td{border-color:#f1f2f4}
body :is(.entry-content,.wp-block-post-content) .wp-block-details{border:1px solid var(--vv33-stroke);border-radius:15px;background:#fffdf9;padding:16px 20px;margin-block:12px}
body :is(.entry-content,.wp-block-post-content) .wp-block-details summary{font-weight:650;color:var(--vv33-ink);cursor:pointer}
body :is(.entry-content,.wp-block-post-content) .wp-block-cover{border-radius:22px;overflow:hidden}
body #vv49-shell-header .vv49-links a{transition:background .2s ease,border-color .2s ease,transform .2s ease!important}
body #vv49-shell-header .vv49-links a:hover{background:#f1f2f4!important;border-color:#87959e!important;transform:translateX(2px)}
body #vv49-shell-header .vv49-feature{box-shadow:inset 0 0 0 1px rgba(132,79,49,.08)!important}
body :is(.entry-content,.wp-block-post-content) .vv33-eyebrow{font:700 11px/1.5 'Outfit',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#c45d00}
body :is(.entry-content,.wp-block-post-content) .vv33-editorial-panel{background:linear-gradient(125deg,#fffdf9,#f1f2f4);border:1px solid #dde3e7;border-radius:24px;padding:clamp(24px,4vw,52px);box-shadow:var(--vv33-shadow)}
@media(max-width:680px){body :is(.entry-content,.wp-block-post-content) .vv33-editorial-panel{border-radius:18px;padding:22px 18px}body :is(.entry-content,.wp-block-post-content) .wp-block-quote{padding:18px}}
@media(prefers-reduced-motion:reduce){body :is(.wp-block-group.is-style-card,.wp-block-group.is-style-elevated,.vv-poem-card,.gg-poem-card,.ggw-poem-card,.vv-theme-card,.ggw-theme-card,.vv33-elevated),body :is(.entry-content,.wp-block-post-content) .wp-block-button__link{transition:none!important;transform:none!important}}