header {
    background-color: rgb(var(--black));
    padding: 15px 0;
    min-height: 55px;
}

@media (max-width: 1268px) {
    /* .container {
        overflow-x: hidden;
        overflow-y: visible;
    } */
}

header .col-12 {
    position: relative;
}

.header-menu>ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;

}

.header-menu>ul a {
    color: white;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
}

.header-menu>ul a:hover {
    color: rgb(var(--pink));
}

.header-hamburger {
    display: none;
    height: 27px;
    width: 30px;
    position: absolute;
    right: 10px;
    z-index: 10;
}

.header-hamburger div {
    height: 4px;
    width: 100%;
    background-color: rgb(var(--white));
    position: absolute;
    transition: 0.3s ease-in-out;
}

.header-hamburger div:first-child {
    top: 0;
}

.header-hamburger div:last-child {
    bottom: 0;
}


.header-hamburger div:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.header-hamburger.active div:first-child {
    background-color: rgb(var(--pink));
    transform: rotate(45deg) translate(2px, 15px);
    opacity: 0.7;
}

.header-hamburger.active div:last-child {
    background-color: rgb(var(--blue));
    transform: rotate(-45deg) translate(1px, -15px);
    opacity: 0.7;
}

.header-hamburger.active div:nth-child(2) {
    opacity: 0;
}

main {
    position: relative;
}

.single-product main {
    position: unset;
    padding: 70px 0;
}

main::before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    height: 100%;
    width: 100%;
    background: url("../images/lijnen/lijnen-02.svg");
    background-size: cover;
    background-position: center;
    filter: invert(1) opacity(0.05);
}

section.entry {
    min-height: 100vh;
    position: relative;
    backdrop-filter: blur(10px);
    background-size: cover;
}

section.entry .centered-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section.entry .centered-text h1 {
    color: rgb(var(--blue));
    font-size: 150px;
    font-family: Archivo, sans-serif;
    font-weight: 900;
    text-transform: uppercase;

}

section.entry .headline {
    font-size: 50px;
    color: rgb(var(--white));
    font-family: Archivo, sans-serif;
    font-weight: 900;
    display: flex;
    text-transform: uppercase;
}

section.entry .change-animation {

    position: relative;
    display: inline-block;
    width: min-content;
    margin-left: 10px;
}

section.entry .headline .change-animation>span {
    opacity: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    max-width: 1px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding-right: 7px;
    width: 100%;
    /* text-decoration: underline; */
    display: block;
    white-space: nowrap;
}

section.entry .headline .change-animation span.active {
    opacity: 1;
    position: relative;
    max-width: min-content;
    border-right: rgb(var(--pink)) 7px solid;
    display: block;
    animation:
        typing 1s steps(40, end),
        blink-caret 1.2s step-end infinite;
}

section.entry .filter {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
}

section.cta {
    padding: 120px 0;
}

section.cta .grid {
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-gap: 30px;
}

section.cta-1 {
    background-color: rgb(var(--black));

}


section.cta-1 .grid {
    color: rgb(var(--white));
}

section.cta-1 .title h2,
section.cta-1 .title h3 {
    text-transform: uppercase;
    font-size: 100px;
    font-family: Bebas Neue, sans-serif;
}

section.cta-1 .title h2 {
    font-size: 130px;
}

section.cta-1 .title h2,
section.cta-1 .title h3:last-of-type {
    font-size: 90px;
}

section.cta-1 .text {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 22px;
}

.btn {
    display: block;
    color: rgb(var(--white));
    padding: 20px 50px;
    width: max-content;
    border: rgb(var(--white)) 1.7px solid;
    box-shadow: 2px 2px 0px 0px rgb(var(--white));
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.btn:after,
.btn:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    z-index: -1;
}

.btn:after {
    background-color: rgb(var(--black));
    left: 0;
}

.btn::before {
    left: -100%;
    background-color: rgb(var(--pink));

}

.btn.blue::before {
    background-color: rgb(var(--blue));
}
.btn.blue:hover{
    color: rgb(var(--black));
}

.btn.pink::before {
    background-color: rgb(var(--pink));
}

.btn:hover {
    color: white;
}


.btn:hover::before,
.btn:hover::after {
    transform: translateX(100%);
}

section.cta-2 {
    font-family: "Poppins", sans-serif;
}

section.cta-2 h2 {
    font-size: 3.7vw;
}

section.cta-2 .grid>.img {
    position: relative;
}

section.cta-2 .grid>.img img {
    position: absolute;
}

section.cta-2 .grid>.img img:first-child {
    transform: translate(70%, -30%) rotate(30deg);
}

section.cta-2 .grid>.img img:nth-child(2) {
    z-index: 10;
    transform: translate(-5%, 0) rotate(-10deg);

}

section.cta-2 .grid>.img img:nth-child(3) {
    z-index: 20;
    transform: translate(70%, 70%) rotate(30deg);
}

.photobooth-img {
    padding: 5% 5% 12%;
    background-color: rgb(var(--white));
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.44);
    display: block;
}

.container.products .grid {
    padding: 120px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
}

/* Grid i.p.v. CSS-kolommen (column-count): Safari knipt binnen kolommen alles af wat buiten de
   kolom uitsteekt, waardoor de uitstekende logo's (behalve in de eerste kolom) werden afgekapt.
   Ruime rij-afstand, omdat de logo's boven de kaart uitsteken. */
.container.sponsors .grid {
    padding: 120px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 180px;
}

@media (max-width: 768px) {
    .container.sponsors .grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Kaarten in dezelfde rij even hoog */
.container.sponsors .grid article {
    display: flex;
}

@media (max-width: 1024px) {
    .container.products .grid {
        grid-template-columns: 1fr 1fr;
    }

    .container.products .grid article:nth-child(odd) {
        transform: rotate(2deg) !important;
    }

}

@media (max-width: 425px) {
    .container.products .grid {
        grid-template-columns: 1fr;
    }
}

.container.sponsors .grid article .sponsor-card {
    color: rgb(var(--black));
    background-color: rgb(var(--white));
    text-decoration: none;
    display: block;
    position: relative;
    width: 100%;
    padding: 100px 40px 40px;
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
}

/* Logo als polaroid dat linksboven uit de kaart steekt */
.container.sponsors .grid article .sponsor-card .img {
    padding: 20px 40px 40px 20px;
    background-color: rgb(var(--white));
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(-25%, -70%) rotate(-15deg);
    transform: translate(-25%, -70%) rotate(-15deg);
    height: 250px;
    width: 250px;
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.44);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.container.sponsors .grid article .sponsor-card .img img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-shadow: inset 7px 6px 41px rgba(0, 0, 0, .1);
}

.container.products .grid article a {
    color: rgb(var(--black));
    background-color: rgb(var(--white));
    text-decoration: none;
    display: block;
    padding: 5% 5% 12%;
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.44);
    transition: 0.3s;
}

.container.products .grid article a:hover {
    transform: translateY(-10px);
}

.container.products .grid article:nth-child(odd) {
    transform: rotate(5deg);
}

.container.products .grid article:nth-child(even) {
    transform: rotate(-2deg);
}

.container.products .grid article img {
    height: 300px;
    object-fit: cover;
    transition: 4s 0.3s;
    width: 100%;
}

.container.products .grid article .img {
    position: relative;
    overflow: hidden;

}

.container.products .grid article .img::before {
    content: '';
    z-index: 10;
    position: absolute;
    inset: 0;
    box-shadow: inset 7px 6px 41px rgba(0, 0, 0, .2)
}

.container.products .grid article:hover img {
    transform: scale(105%);
}

.shop-cta {
    background-color: rgb(var(--black));
    color: rgb(var(--white));
    padding: 50px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.shop-cta::before {
    content: "";
    position: absolute;
    background-image: url("../images/xtend-logo-wit.png");
    height: 230%;
    width: 100%;
    background-size: contain;
    pointer-events: none;
    right: 0;
    top: 0;
    background-position: right center;
    transform: translateY(-25%) rotate(20deg);
    filter: blur(6px);
}

.shop-cta h1 {
    font-size: 200px;
    font-family: "Bebas Neue", sans-serif;
    text-transform: uppercase;
}


.single-product .tabs {
    display: none !important;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* The typewriter cursor effect */
@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgb(var(--pink));
    }
}

@media screen and (max-width: 1024px) {
    .header-hamburger {
        display: block;
        cursor: pointer;
    }

    .header-menu {
        position: absolute;
        top: 100%;
        height: max-content;
        background-color: rgb(var(--black));
        display: block;
        left: 0;
        right: 0;
        pointer-events: none;
        z-index: 10;
    }

    .header-menu.mobile_active {
        pointer-events: all;
    }

    .header-menu>ul {
        flex-direction: column;
        position: absolute;
        transform: translateY(-100%);
        transition: 0.3s ease;
        width: 100%;
        padding: 10px 15px;
        background-color: inherit;
    }

    .header-menu.mobile_active>ul {
        transform: translateY(0);
    }


}

.woocommerce div.product div.images img {
    max-height: 450px !important;
    object-fit: cover !important;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover {
    background-color: rgb(var(--black)) !important;

}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt {
    background-color: rgb(var(--black)) !important;
}

.woocommerce .product_meta {
    display: none;
}
.woocommerce-checkout main, .woocommerce-cart main{
    padding: 100px 0;
}


.page-template-template-bestuur .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    padding-bottom: 50px;
}

.page-template-template-bestuur .grid:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 20px;
    height: 100%;
    background-color: rgb(var(--black));
    transform: translateX(-50%);
}


.page-template-template-bestuur .grid>div {
    grid-row: span 2;

    align-self: stretch;
    height: 80%;
}

.page-template-template-bestuur .grid>div:nth-child(odd) {
    grid-column: 1;
    margin-top: -5%;
}

.page-template-template-bestuur .grid>div:nth-child(even) {
    grid-column: 2;
    margin-top: 20%;
    padding-left: 90px;
}

.page-template-template-bestuur .grid>div:nth-child(1) {
    /* margin-top: ; */
}

.page-template-template-bestuur .grid article>div {
    color: rgb(var(--black));
    background-color: rgb(var(--white));
    text-decoration: none;
    display: block;
    padding: 5% 5% 12%;
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.44);
    transition: 0.3s;
    max-width: min-content;
    position: relative;
    z-index: 10;
}

.page-template-template-bestuur .grid>div:before {
    display: block;
    content: " ";
    height: 12px;
    width: 50%;
    position: absolute;
    top: 80px;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' width='20' height='12'%3E%3Cpath d='M0,6 Q5,0 10,6 T20,6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
}

.page-template-template-bestuur .grid>div:nth-child(odd):before {
    left: 50%;
}

.page-template-template-bestuur .grid>div:nth-child(even):before {
    left: 0%;
}


.page-template-template-bestuur .grid article img {
    width: 350px;

    height: 300px;
    max-width: 350px;
    object-fit: contain;
}

/* Sorry het kon anders maar dit was sneller dit gaat goed tot bestuur 30 maar dan is Wordpress toch niet meer relevant */
.page-template-template-bestuur .grid>div:nth-child(1) { transform: rotate(-5.2deg); }
.page-template-template-bestuur .grid>div:nth-child(2) { transform: rotate(4.8deg); }
.page-template-template-bestuur .grid>div:nth-child(3) { transform: rotate(-4.5deg); }
.page-template-template-bestuur .grid>div:nth-child(4) { transform: rotate(5.9deg); }
.page-template-template-bestuur .grid>div:nth-child(5) { transform: rotate(-5.8deg); }
.page-template-template-bestuur .grid>div:nth-child(6) { transform: rotate(4.2deg); }
.page-template-template-bestuur .grid>div:nth-child(7) { transform: rotate(-4.0deg); }
.page-template-template-bestuur .grid>div:nth-child(8) { transform: rotate(5.4deg); }
.page-template-template-bestuur .grid>div:nth-child(9) { transform: rotate(-3.9deg); }
.page-template-template-bestuur .grid>div:nth-child(10) { transform: rotate(4.9deg); }
.page-template-template-bestuur .grid>div:nth-child(11) { transform: rotate(-5.7deg); }
.page-template-template-bestuur .grid>div:nth-child(12) { transform: rotate(5.1deg); }
.page-template-template-bestuur .grid>div:nth-child(13) { transform: rotate(-4.6deg); }
.page-template-template-bestuur .grid>div:nth-child(14) { transform: rotate(5.6deg); }
.page-template-template-bestuur .grid>div:nth-child(15) { transform: rotate(-5.2deg); }
.page-template-template-bestuur .grid>div:nth-child(16) { transform: rotate(4.4deg); }
.page-template-template-bestuur .grid>div:nth-child(17) { transform: rotate(-5.9deg); }
.page-template-template-bestuur .grid>div:nth-child(18) { transform: rotate(5.0deg); }
.page-template-template-bestuur .grid>div:nth-child(19) { transform: rotate(-4.3deg); }
.page-template-template-bestuur .grid>div:nth-child(20) { transform: rotate(5.8deg); }
.page-template-template-bestuur .grid>div:nth-child(21) { transform: rotate(-5.4deg); }
.page-template-template-bestuur .grid>div:nth-child(22) { transform: rotate(4.7deg); }
.page-template-template-bestuur .grid>div:nth-child(23) { transform: rotate(-4.8deg); }
.page-template-template-bestuur .grid>div:nth-child(24) { transform: rotate(5.3deg); }
.page-template-template-bestuur .grid>div:nth-child(25) { transform: rotate(-5.1deg); }
.page-template-template-bestuur .grid>div:nth-child(26) { transform: rotate(4.1deg); }
.page-template-template-bestuur .grid>div:nth-child(27) { transform: rotate(-5.6deg); }
.page-template-template-bestuur .grid>div:nth-child(28) { transform: rotate(5.5deg); }
.page-template-template-bestuur .grid>div:nth-child(29) { transform: rotate(-4.7deg); }
.page-template-template-bestuur .grid>div:nth-child(30) { transform: rotate(4.5deg); }

@media screen and (max-width: 1024px) {
    .page-template-template-bestuur .grid {
       display: flex;
       flex-direction: column;
    }
    .page-template-template-bestuur .grid:before {
        left: 100%;
    }
    .page-template-template-bestuur .grid>div {
        margin-top: 10px !important;
    }
    .page-template-template-bestuur .grid>div:nth-child(even):before {
        left: 50%;
    }
}

/* Winkelwagen in het menu */
.header-menu>ul .header-cart {
    position: relative;
    font-size: 14px;
}

.header-cart-count {
    position: absolute;
    top: -8px;
    right: -12px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background-color: rgb(var(--pink));
    color: rgb(var(--black));
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

/* Photobooth foto's op de homepage */
section.cta-2 .grid>.img img {
    width: 55%;
    height: auto;
}

/* Sponsoren op de homepage */
section.home-sponsors {
    padding: 120px 0;
    text-align: center;
    font-family: "Poppins", sans-serif;
}

section.home-sponsors h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 80px;
    margin-bottom: 60px;
}

section.home-sponsors .logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 50px;
    align-items: center;
    margin-bottom: 60px;
}

section.home-sponsors .logos img {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

section.home-sponsors .logos a {
    color: rgb(var(--black));
    text-decoration: none;
}

/* Sponsor zonder logo: naam als tekst */
section.home-sponsors .logos .naam {
    font-family: "Bebas Neue", sans-serif;
    font-size: 36px;
}

section.home-sponsors .home-sponsors-cta {
    color: rgb(var(--black));
    font-size: 20px;
}

section.home-sponsors .home-sponsors-cta:hover {
    color: rgb(var(--pink));
}

@media (max-width: 768px) {
    section.home-sponsors .logos {
        grid-template-columns: 1fr 1fr;
    }
}

/* Footer */
.site-footer {
    background-color: rgb(var(--black));
    color: rgb(var(--white));
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    font-family: "Montserrat", sans-serif;
}

.site-footer .footer-lijnen {
    position: absolute;
    width: 300px;
    opacity: 0.15;
    pointer-events: none;
}

.site-footer .footer-lijnen-links {
    top: 0;
    left: 0;
}

.site-footer .footer-lijnen-rechts {
    bottom: -60px;
    right: 0;
}

.site-footer .footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
    align-items: center;
}

.site-footer .footer-logo img {
    width: 120px;
}

.site-footer h6 {
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.site-footer .footer-socials ul {
    display: flex;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer a {
    color: rgb(var(--white));
}

.site-footer a:hover {
    color: rgb(var(--pink));
}

.site-footer .footer-socials a {
    font-size: 22px;
}

.site-footer .footer-info p {
    margin-bottom: 5px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-footer .footer-socials ul {
        justify-content: center;
    }
}


/* Huidig bestuur op de bestuurpagina */
section.huidig-bestuur {
    /* Antraciet i.p.v. zwart, zodat het blok niet wegvalt tegen de zwarte banner erboven */
    background-color: rgb(20, 20, 20);
    color: rgb(var(--white));
    /* Extra ruimte onderaan: de eerste tijdlijnkaart schuift met een negatieve marge omhoog */
    padding: 100px 0 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Lijnenpatroon van de site op de achtergrond */
section.huidig-bestuur::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/lijnen/lijnen-02.svg") center / cover;
    opacity: 0.06;
    pointer-events: none;
}

section.huidig-bestuur .container {
    position: relative;
}

section.huidig-bestuur h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 80px;
    margin-bottom: 0;
}

/* Blauw streepje onder de kop */
section.huidig-bestuur h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 5px;
    margin: 10px auto 20px;
    background-color: rgb(var(--blue));
}

section.huidig-bestuur h3 {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    margin-bottom: 60px;
}

section.huidig-bestuur h3 .jaar {
    color: rgb(var(--blue));
    margin-left: 8px;
}

/* Flex i.p.v. grid: een losse kaart op de laatste rij komt in het midden te staan */
section.huidig-bestuur .leden {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

section.huidig-bestuur .bestuurslid {
    flex: 0 1 200px;
    max-width: 260px;
}

.bestuurslid {
    background-color: rgb(var(--white));
    color: rgb(var(--black));
    /* Vaste padding: een percentage wordt berekend t.o.v. de hele rij en maakt de kaarten te breed */
    padding: 14px 14px 24px;
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.44);
    transition: 0.3s;
}

.bestuurslid:nth-child(odd) {
    transform: rotate(-3deg);
}

.bestuurslid:nth-child(even) {
    transform: rotate(3deg);
}

.bestuurslid:hover {
    transform: rotate(0deg) scale(1.03);
}

.bestuurslid .img {
    aspect-ratio: 1;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: inset 7px 6px 41px rgba(0, 0, 0, .1);
}

.bestuurslid .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bestuurslid h4 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    margin-bottom: 4px;
}

.bestuurslid p {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgb(var(--black));
    margin: 0;
}

/* Standaardafbeelding voor een bestuur zonder foto: wit logo op antraciet */
.page-template-template-bestuur .grid article .img-standaard {
    background-color: rgb(20, 20, 20);
}

.page-template-template-bestuur .grid article .img-standaard img {
    padding: 50px;
}

/* Jaar en leden in de bestuurskaarten */
.page-template-template-bestuur .grid article .jaar {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: rgba(var(--black), 0.6);
    margin-bottom: 10px;
}

.page-template-template-bestuur .grid article .bestuursleden {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
    font-size: 15px;
}

.page-template-template-bestuur .grid article .bestuursleden li {
    padding: 4px 0;
    border-bottom: 1px dashed rgba(var(--black), 0.2);
}

.page-template-template-bestuur .grid article .bestuursleden li:last-child {
    border-bottom: 0;
}

/* Onder 1024px heeft de tijdlijn geen negatieve marge meer, dus minder ruimte nodig */
@media (max-width: 1024px) {
    section.huidig-bestuur {
        padding-bottom: 80px;
    }
}

@media (max-width: 768px) {
    section.huidig-bestuur {
        padding: 60px 0;
    }

    section.huidig-bestuur h2 {
        font-size: 56px;
    }

    section.huidig-bestuur h3 {
        margin-bottom: 40px;
    }

    section.huidig-bestuur .leden {
        gap: 25px;
    }

    section.huidig-bestuur .bestuurslid {
        flex-basis: calc(50% - 13px);
    }

    .bestuurslid h4 {
        font-size: 16px;
    }

    .bestuurslid p {
        font-size: 11px;
    }
}

/* Productbeschrijving als donkere band over de volle breedte (zelfde stijl als "Huidig bestuur") */

/* Op productpagina's staat <main> binnen de smalle content-kolom; zonder dit wordt de
   achtergrond van de band afgeknipt op de breedte van de kolom */
.single-product main {
    overflow-x: visible;
    /* De donkere band sluit direct aan op de footer */
    padding-bottom: 0;
}

.single-product div.product .woocommerce-tabs {
    position: relative;
    clear: both;
    z-index: -10;
    margin: 80px 0 0;
    padding: 80px 0;
    color: rgb(var(--white));
    background-color: rgb(20, 20, 20);
    box-shadow: 0 0 0 100vmax rgb(20, 20, 20);
    clip-path: inset(0 -100vmax);
}

.single-product div.product .woocommerce-tabs .panel {
    position: relative;
    max-width: 800px;
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
}

.single-product div.product .woocommerce-tabs .panel h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 60px;
    font-weight: 400;
    margin-bottom: 0;
}

/* Blauw streepje onder de kop */
.single-product div.product .woocommerce-tabs .panel h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 5px;
    margin: 10px 0 30px;
    background-color: rgb(var(--blue));
}

.single-product div.product .woocommerce-tabs .panel a {
    color: rgb(var(--blue));
}

@media (max-width: 768px) {
    .single-product div.product .woocommerce-tabs {
        margin: 50px 0 0;
        padding: 50px 0;
    }

    .single-product div.product .woocommerce-tabs .panel {
        font-size: 16px;
    }

    .single-product div.product .woocommerce-tabs .panel h2 {
        font-size: 44px;
    }
}

/* Commissiepagina */
section.commissies-intro {
    padding: 80px 0 20px;
    text-align: center;
    position: relative;
}

section.commissies-intro p {
    max-width: 760px;
    margin: 0 auto;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 20px;
}

/* Kaarten in kolommen (masonry), omdat de teksten verschillend lang zijn */
section.commissies {
    padding: 60px 0 100px;
    column-count: 3;
    column-gap: 40px;
}

.commissie {
    position: relative;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 40px;
    padding: 40px 30px;
    background-color: rgb(var(--white));
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
    transition: transform 0.3s, box-shadow 0.3s;
    /* Eigen, vaste laag per gedraaide kaart: voorkomt dat Safari kaarten bij scrollen "vergeet" te tekenen */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.commissie:nth-child(odd) {
    transform: rotate(-1deg);
}

.commissie:nth-child(even) {
    transform: rotate(1deg);
}

.commissie:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.3);
}

.commissie .icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    background-color: rgb(var(--black));
    color: rgb(var(--blue));
    font-size: 26px;
    transform: rotate(-6deg);
}

.commissie:nth-child(even) .icoon {
    color: rgb(var(--pink));
    transform: rotate(6deg);
}

.commissie h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 36px;
    margin-bottom: 10px;
}

.commissie .beschrijving {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
}

.commissie .beschrijving p {
    margin: 0 0 12px;
}

.commissie .beschrijving > :last-child {
    margin-bottom: 0;
}

/* Aanmeld-blok onderaan, sluit aan op de footer */
section.commissies-cta {
    position: relative;
    padding: 100px 0;
    background-color: rgb(20, 20, 20);
    color: rgb(var(--white));
    overflow: hidden;
}

section.commissies-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/lijnen/lijnen-02.svg") center / cover;
    opacity: 0.06;
    pointer-events: none;
}

section.commissies-cta .grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 60px;
    align-items: center;
}

section.commissies-cta h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 90px;
    margin-bottom: 0;
}

section.commissies-cta h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 5px;
    margin: 10px 0 25px;
    background-color: rgb(var(--blue));
}

section.commissies-cta p {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 20px;
    margin-bottom: 30px;
}

section.commissies-cta .img img {
    width: 80%;
    height: auto;
    margin: 0 auto;
    transform: rotate(4deg);
}

@media (max-width: 1024px) {
    section.commissies {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    section.commissies-intro {
        padding: 50px 0 10px;
    }

    section.commissies-intro p {
        font-size: 17px;
    }

    section.commissies {
        column-count: 1;
        padding: 40px 0 60px;
    }

    section.commissies-cta {
        padding: 60px 0;
    }

    section.commissies-cta .grid {
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }

    section.commissies-cta h2 {
        font-size: 60px;
    }

    section.commissies-cta p {
        font-size: 17px;
    }
}

/* Contactpagina */
section.contact-gegevens {
    position: relative;
    padding: 80px 0;
}

/* auto-fit: werkt met één tegel (gecentreerd) en blijft werken als er tegels bijkomen */
section.contact-gegevens .tegels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 340px));
    justify-content: center;
    grid-gap: 40px;
}

section.contact-gegevens .tegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px;
    background-color: rgb(var(--white));
    color: rgb(var(--black));
    text-decoration: none;
    text-align: center;
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
    transition: 0.3s;
}

section.contact-gegevens .tegel:first-child {
    transform: rotate(-2deg);
}

section.contact-gegevens .tegel:last-child {
    transform: rotate(2deg);
}

section.contact-gegevens .tegel:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.3);
}

section.contact-gegevens .tegel .icoon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    background-color: rgb(var(--black));
    color: rgb(var(--blue));
    font-size: 28px;
    transform: rotate(-6deg);
}

section.contact-gegevens .tegel:last-child .icoon {
    color: rgb(var(--pink));
    transform: rotate(6deg);
}

section.contact-gegevens .tegel .label {
    font-family: "Bebas Neue", sans-serif;
    font-size: 36px;
    line-height: 1;
}

section.contact-gegevens .tegel .waarde {
    margin-top: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
}

/* Bestuur op de contactpagina: zelfde stijl als "Huidig bestuur", sluit aan op de footer */
section.contact-bestuur {
    padding: 100px 0;
}

.bestuurslid .beschrijving {
    margin-top: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(var(--black), 0.7);
}

.bestuurslid .btn {
    margin: 20px auto 0;
    padding: 10px 28px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    text-decoration: none;
}

@media (max-width: 768px) {
    section.contact-gegevens {
        padding: 50px 0;
    }

    section.contact-gegevens .tegels {
        grid-template-columns: 1fr;
        grid-gap: 25px;
    }

    section.contact-bestuur {
        padding: 60px 0;
    }

    .bestuurslid .beschrijving {
        font-size: 12px;
    }

    .bestuurslid .btn {
        padding: 8px 18px;
        font-size: 13px;
    }
}

/* Sponsorpagina: bedrijven aansporen om sponsor te worden */
.shop-cta .sponsor-intro {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 20px;
}

.shop-cta .sponsor-knop {
    margin: 30px auto 10px;
    text-decoration: none;
}

section.sponsor-voordelen {
    position: relative;
    padding: 100px 0 40px;
    text-align: center;
}

section.sponsor-voordelen h2,
.sponsors-kop {
    font-family: "Bebas Neue", sans-serif;
    font-size: 70px;
    text-align: center;
    margin-bottom: 0;
}

section.sponsor-voordelen h2::after,
.sponsors-kop::after {
    content: "";
    display: block;
    width: 80px;
    height: 5px;
    margin: 10px auto 25px;
    background-color: rgb(var(--blue));
}

section.sponsor-voordelen .intro {
    max-width: 700px;
    margin: 0 auto 60px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 18px;
}

section.sponsor-voordelen .voordelen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}

.voordeel {
    padding: 30px 20px;
    background-color: rgb(var(--white));
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
    transition: 0.3s;
}

.voordeel:nth-child(odd) {
    transform: rotate(-1.5deg);
}

.voordeel:nth-child(even) {
    transform: rotate(1.5deg);
}

.voordeel:hover {
    transform: rotate(0deg) scale(1.03);
}

.voordeel .icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 15px;
    background-color: rgb(var(--black));
    color: rgb(var(--blue));
    font-size: 24px;
    transform: rotate(-6deg);
}

.voordeel:nth-child(even) .icoon {
    color: rgb(var(--pink));
    transform: rotate(6deg);
}

.voordeel h3 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 30px;
    margin-bottom: 6px;
}

.voordeel p {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 15px;
    margin: 0;
}

.sponsors-kop {
    padding-top: 60px;
    /* De gedraaide logo's steken boven de kaarten uit */
    margin-bottom: 80px;
}

/* Oproep onderaan, sluit aan op de footer */
section.sponsor-cta {
    position: relative;
    padding: 100px 0;
    background-color: rgb(20, 20, 20);
    color: rgb(var(--white));
    text-align: center;
    overflow: hidden;
}

section.sponsor-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/lijnen/lijnen-02.svg") center / cover;
    opacity: 0.06;
    pointer-events: none;
}

section.sponsor-cta .container {
    position: relative;
}

section.sponsor-cta h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 70px;
    margin-bottom: 0;
}

section.sponsor-cta h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 5px;
    margin: 10px auto 25px;
    background-color: rgb(var(--blue));
}

section.sponsor-cta p {
    max-width: 600px;
    margin: 0 auto 30px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 20px;
}

section.sponsor-cta .knoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

section.sponsor-cta .btn {
    margin: 0;
    text-decoration: none;
}

@media (max-width: 1024px) {
    section.sponsor-voordelen .voordelen {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .shop-cta .sponsor-intro {
        font-size: 17px;
    }

    section.sponsor-voordelen {
        padding: 60px 0 20px;
    }

    section.sponsor-voordelen h2,
    .sponsors-kop,
    section.sponsor-cta h2 {
        font-size: 48px;
    }

    section.sponsor-voordelen .intro,
    section.sponsor-cta p {
        font-size: 16px;
    }

    section.sponsor-voordelen .voordelen {
        grid-gap: 20px;
    }

    .voordeel {
        padding: 20px 12px;
    }

    .voordeel h3 {
        font-size: 24px;
    }

    .voordeel p {
        font-size: 13px;
    }

    section.sponsor-cta {
        padding: 60px 0;
    }
}

/* Mijn account (inloggen, wachtwoord vergeten, bestellingen, accountgegevens) */
section.xtend-account {
    position: relative;
    padding: 80px 0 120px;
    font-family: "Poppins", sans-serif;
}

/* Velden en knoppen in de stijl van de site */
.xtend-account .woocommerce form .form-row label {
    font-weight: 500;
    margin-bottom: 6px;
}

.xtend-account .woocommerce form .form-row .input-text,
.xtend-account .woocommerce form .form-row select {
    padding: 12px 14px;
    border: 1.5px solid rgb(var(--black));
    border-radius: 0;
    background-color: rgb(var(--white));
    font-family: "Poppins", sans-serif;
}

.xtend-account .woocommerce form .form-row .input-text:focus,
.xtend-account .woocommerce form .form-row select:focus {
    outline: 3px solid rgb(var(--blue));
    outline-offset: 1px;
}

.xtend-account .woocommerce .button,
.xtend-account .woocommerce button.button,
.xtend-account .woocommerce a.button {
    padding: 14px 32px;
    border: 0;
    border-radius: 0;
    background-color: rgb(var(--black));
    color: rgb(var(--white));
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    box-shadow: 4px 4px 0 rgb(var(--blue));
    transition: 0.2s;
}

.xtend-account .woocommerce .button:hover,
.xtend-account .woocommerce button.button:hover,
.xtend-account .woocommerce a.button:hover {
    background-color: rgb(var(--pink));
    color: rgb(var(--black));
    box-shadow: 4px 4px 0 rgb(var(--black));
}

.xtend-account a {
    color: rgb(var(--black));
}

.xtend-account a:hover {
    color: rgb(var(--pink));
}

/* Uitgelogd: inloggen en wachtwoord vergeten als witte kaart in het midden */
.xtend-account.uitgelogd .woocommerce {
    max-width: 520px;
    margin: 0 auto;
}

.xtend-account.uitgelogd .woocommerce > h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 48px;
    text-align: center;
    margin-bottom: 20px;
}

.xtend-account.uitgelogd .woocommerce form.login,
.xtend-account.uitgelogd .woocommerce form.register,
.xtend-account.uitgelogd .woocommerce form.lost_reset_password {
    margin: 0;
    padding: 40px;
    border: 0;
    border-radius: 0;
    background-color: rgb(var(--white));
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
}

/* In de smalle kaart altijd volle breedte (WooCommerce zet sommige velden op een halve kolom) */
.xtend-account.uitgelogd .woocommerce form .form-row-first,
.xtend-account.uitgelogd .woocommerce form .form-row-last,
.xtend-account.uitgelogd .woocommerce form .form-row {
    float: none;
    width: 100%;
}

.xtend-account.uitgelogd .woocommerce form .input-text {
    width: 100%;
}

.xtend-account.uitgelogd .woocommerce form.lost_reset_password > p:first-child {
    margin-bottom: 20px;
}

.xtend-account .woocommerce-form-login .woocommerce-form-login__rememberme {
    display: block;
    margin: 0 0 20px;
}

.xtend-account .woocommerce-LostPassword {
    margin: 20px 0 0;
}

/* Ingelogd: menu links, inhoud rechts */
.xtend-account.ingelogd .woocommerce {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-gap: 50px;
    align-items: start;
}

.xtend-account.ingelogd .woocommerce::before,
.xtend-account.ingelogd .woocommerce::after {
    display: none;
}

/* Extra .woocommerce in de selector: WooCommerce zet hier zelf float en width: 30%/68% */
.xtend-account .woocommerce .woocommerce-MyAccount-navigation,
.xtend-account .woocommerce .woocommerce-MyAccount-content {
    float: none;
    width: auto;
}

.xtend-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: rgb(var(--white));
    box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
}

.xtend-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 16px 20px;
    border-left: 5px solid transparent;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
}

.xtend-account .woocommerce-MyAccount-navigation li + li a {
    border-top: 1px solid rgba(var(--black), 0.08);
}

.xtend-account .woocommerce-MyAccount-navigation li.is-active a {
    background-color: rgb(var(--black));
    color: rgb(var(--white));
    border-left-color: rgb(var(--blue));
}

.xtend-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: rgba(var(--black), 0.6);
}

.xtend-account .woocommerce-MyAccount-content {
    font-size: 16px;
}

/* Bestellingen-tabel */
.xtend-account .woocommerce table.shop_table {
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
}

/* Alleen de kolomkoppen: WooCommerce gebruikt ook <th> voor het bestelnummer in elke rij */
.xtend-account .woocommerce table.shop_table thead th {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgb(var(--black));
}

.xtend-account .woocommerce table.shop_table td {
    border-top: 1px solid rgba(var(--black), 0.1);
}

.xtend-account .woocommerce table.shop_table .button {
    padding: 8px 18px;
    box-shadow: 3px 3px 0 rgb(var(--blue));
}

/* Accountgegevens: blokken voor wachtwoord wijzigen */
.xtend-account .woocommerce fieldset {
    margin: 30px 0;
    padding: 25px;
    border: 1.5px solid rgba(var(--black), 0.15);
}

.xtend-account .woocommerce fieldset legend {
    padding: 0 10px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
}

@media (max-width: 768px) {
    section.xtend-account {
        padding: 50px 0 70px;
    }

    .xtend-account.ingelogd .woocommerce {
        grid-template-columns: 1fr;
        grid-gap: 30px;
    }

    .xtend-account.uitgelogd .woocommerce form.login,
    .xtend-account.uitgelogd .woocommerce form.lost_reset_password {
        padding: 25px;
    }
}

/* Activiteitenpagina: horizontaal scrollbare rij kaarten (bewust niet gedraaid, i.v.m. Safari) */
section.activiteiten {
    position: relative;
    padding: 80px 0 100px;
    font-family: "Poppins", sans-serif;
}

.activiteiten-intro {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
    font-weight: 300;
    font-size: 20px;
}

.activiteiten-kop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.activiteiten-kop h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 60px;
    margin: 0;
}

.activiteiten-kop h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 5px;
    margin-top: 8px;
    background-color: rgb(var(--blue));
}

.activiteiten-pijlen {
    display: flex;
    gap: 10px;
}

.activiteiten-pijl {
    width: 48px;
    height: 48px;
    border: 0;
    background-color: rgb(var(--black));
    color: rgb(var(--white));
    font-size: 18px;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgb(var(--blue));
}

.activiteiten-pijl:hover {
    background-color: rgb(var(--pink));
    color: rgb(var(--black));
}

.activiteiten-rij {
    /* position: relative, zodat offsetLeft van de kaarten gemeten wordt t.o.v. de rij (pijlknoppen) */
    position: relative;
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Ruimte voor de schaduw van de kaarten, die anders door de scrollrand wordt afgekapt */
    padding: 10px 30px 40px 5px;
    scrollbar-width: thin;
}

.activiteiten-rij:focus-visible {
    outline: 3px solid rgb(var(--blue));
}

.activiteit {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background-color: rgb(var(--white));
    box-shadow: 10px 10px 30px 0px rgba(var(--black), 0.14);
}

.activiteit-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: rgb(20, 20, 20);
    overflow: hidden;
}

.activiteit-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activiteit-foto img.standaard {
    object-fit: contain;
    padding: 40px;
}

/* Datum als blokje linksboven op de foto */
.activiteit-datum {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 62px;
    padding: 6px 10px;
    background-color: rgb(var(--white));
    color: rgb(var(--black));
    box-shadow: 4px 4px 0 rgb(var(--blue));
    line-height: 1;
}

.activiteit-datum .dag {
    font-family: "Bebas Neue", sans-serif;
    font-size: 34px;
}

.activiteit-datum .maand {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.activiteit-inhoud {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px;
}

.activiteit-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.activiteit-labels .label {
    padding: 3px 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activiteit-labels .label.iedereen {
    background-color: rgb(var(--blue));
    color: rgb(var(--black));
}

.activiteit-labels .label.leden {
    background-color: rgb(var(--pink));
    color: rgb(var(--black));
}

.activiteit h3 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 32px;
    margin-bottom: 10px;
}

.activiteit-details {
    list-style: none;
    margin: 0 0 15px;
    padding: 0;
    font-size: 14px;
}

.activiteit-details li {
    margin-bottom: 4px;
}

.activiteit-details i {
    width: 18px;
    color: rgba(var(--black), 0.6);
}

.activiteit-uitleg {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
}

.activiteit-uitleg p {
    margin-bottom: 10px;
}

/* Knop altijd onderaan de kaart */
.activiteit .btn {
    margin-top: auto;
    padding: 12px 28px;
    font-size: 14px;
    text-decoration: none;
}

.activiteiten-leeg {
    text-align: center;
    font-size: 18px;
}

/* Afgelopen activiteiten: uitklapmenu onder de rij */
.activiteiten-afgelopen {
    margin-top: 40px;
    border-top: 2px solid rgb(var(--black));
}

.activiteiten-afgelopen summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: 32px;
    cursor: pointer;
    list-style: none;
}

/* Standaard driehoekje van <details> verbergen (ook in Safari), we gebruiken een eigen pijltje */
.activiteiten-afgelopen summary::-webkit-details-marker {
    display: none;
}

.activiteiten-afgelopen summary .aantal {
    color: rgba(var(--black), 0.5);
}

.activiteiten-afgelopen summary i {
    margin-left: auto;
    font-size: 18px;
    transition: transform 0.2s;
}

.activiteiten-afgelopen[open] summary i {
    transform: rotate(180deg);
}

.activiteiten-afgelopen summary:hover {
    color: rgb(var(--pink));
}

.activiteiten-afgelopen ul {
    list-style: none;
    margin: 0;
    padding: 0 0 10px;
}

.activiteiten-afgelopen li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 15px;
    padding: 14px 0;
    border-top: 1px solid rgba(var(--black), 0.1);
    font-size: 15px;
}

.activiteiten-afgelopen .datum {
    min-width: 110px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(var(--black), 0.6);
}

.activiteiten-afgelopen .naam {
    font-weight: 500;
}

.activiteiten-afgelopen .label {
    padding: 2px 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.activiteiten-afgelopen .label.iedereen {
    background-color: rgb(var(--blue));
}

.activiteiten-afgelopen .label.leden {
    background-color: rgb(var(--pink));
}

.activiteiten-afgelopen .locatie {
    margin-left: auto;
    color: rgba(var(--black), 0.6);
    font-size: 14px;
}

@media (max-width: 768px) {
    section.activiteiten {
        padding: 50px 0 70px;
    }

    .activiteiten-intro {
        font-size: 17px;
    }

    .activiteiten-kop h2 {
        font-size: 44px;
    }

    .activiteiten-pijl {
        width: 40px;
        height: 40px;
    }

    /* Op mobiel bijna schermbreed, zodat je ziet dat er nog een kaart volgt */
    .activiteit {
        flex-basis: 82%;
    }
}

/* ---------------------------------------------------------------------------------------------
   MOBIEL
------------------------------------------------------------------------------------------------ */

/* Footer altijd onderaan, ook op korte pagina's */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    /* Gedraaide kaarten en foto's mogen niet buiten het scherm uitsteken */
    overflow-x: clip;
}

/* Grote koppen schalen mee met het scherm */
@media (max-width: 768px) {
    section.entry .centered-text {
        width: 100%;
        padding: 0 15px;
    }
}

section.entry .centered-text h1 {
    font-size: clamp(56px, 11vw, 150px);
    line-height: 1;
}

section.entry .headline {
    font-size: clamp(20px, 3.7vw, 50px);
    flex-wrap: wrap;
}

.shop-cta h1 {
    font-size: clamp(56px, 15vw, 200px);
}

.footer-socials a {
    display: inline-block;
    padding: 8px;
}

@media (max-width: 1024px) {
    section.cta-1 .title h2,
    section.cta-1 .title h3,
    section.cta-1 .title h3:last-of-type {
        font-size: clamp(40px, 9vw, 90px);
    }

    section.cta-2 h2 {
        font-size: clamp(28px, 5vw, 40px);
    }

    /* Grotere menu-items zodat ze makkelijk aan te tikken zijn */
    .header-menu>ul a {
        display: block;
        padding: 10px 0;
        font-size: 16px;
    }

    .header-menu>ul .header-cart {
        display: inline-block;
    }

    .header-cart-count {
        top: 2px;
    }
}

@media (max-width: 768px) {
    section.cta {
        padding: 70px 0;
    }

    section.cta .grid {
        grid-template-columns: 1fr;
    }

    section.cta-1 .text {
        font-size: 17px;
    }

    /* Photobooth foto's: ruimte geven omdat ze absoluut gepositioneerd zijn */
    section.cta-2 .grid>.img {
        height: 380px;
    }

    section.cta-2 .grid>.img img {
        width: 50%;
    }

    section.home-sponsors {
        padding: 70px 0;
    }

    section.home-sponsors h2 {
        font-size: 56px;
        margin-bottom: 40px;
    }

    /* Bestuur: kaarten onder elkaar op volle breedte */
    .page-template-template-bestuur .grid>div:nth-child(even) {
        padding-left: 0;
    }

    .page-template-template-bestuur .grid article>div {
        max-width: 100%;
    }

    .page-template-template-bestuur .grid article img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 300px;
    }

    .page-template-template-bestuur .grid:before {
        left: auto;
        right: 0;
        transform: none;
    }

    .single-product .content-area {
        padding: 0 15px;
    }
}

@media (max-width: 425px) {
    /* Sponsor-logo kleiner en naar rechts, zodat het niet buiten het scherm valt */
    .container.sponsors .grid article .sponsor-card .img {
        height: 180px;
        width: 180px;
        -webkit-transform: translate(40%, -70%) rotate(14deg);
        transform: translate(40%, -70%) rotate(14deg);
    }
}


/* ---------------------------------------------------------------------------------------------
   SAFARI
   Safari tekent gedraaide kaarten met een hover-animatie bij scrollen niet altijd goed opnieuw
   (kaarten verdwijnen of krijgen zwarte hoekjes). Daarom staat het hover-effect in Safari uit:
   de kaarten houden hun draai en schaduw, maar bewegen niet. "font: -apple-system-body" bestaat
   alleen in Safari (WebKit), dus Chrome, Edge en Firefox slaan dit blok over.
------------------------------------------------------------------------------------------------ */
@supports (font: -apple-system-body) and (-webkit-appearance: none) {

    .commissie,
    .bestuurslid,
    .voordeel,
    section.contact-gegevens .tegel {
        transition: none;
    }

    .commissie:nth-child(odd):hover {
        transform: rotate(-1deg);
        box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
    }

    .commissie:nth-child(even):hover {
        transform: rotate(1deg);
        box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
    }

    .bestuurslid:nth-child(odd):hover {
        transform: rotate(-3deg);
    }

    .bestuurslid:nth-child(even):hover {
        transform: rotate(3deg);
    }

    .voordeel:nth-child(odd):hover {
        transform: rotate(-1.5deg);
    }

    .voordeel:nth-child(even):hover {
        transform: rotate(1.5deg);
    }

    section.contact-gegevens .tegel:first-child:hover {
        transform: rotate(-2deg);
        box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
    }

    section.contact-gegevens .tegel:last-child:hover {
        transform: rotate(2deg);
        box-shadow: 10px 10px 40px 0px rgba(var(--black), 0.14);
    }
}