.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.6rem;
    padding: 1rem 2rem;
    font-family: var(--fontbody);
    font-size: var(--fontsize-body-md);
    font-weight: 700;
    line-height: 2rem;
    background-color: var(--orange);
    color: var(--white);
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .button:before {
        content: "";
        width: 100%;
        height: .5rem;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .14);
    }

    .button span {
        position: relative;
    }

.button--lg {
    min-height: 4.6rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    font-size: 2rem;
}

    .button--lg:before {
        height: .5rem;
    }

.button--green {
    background-color: var(--green);
}

.button--arrow {
    padding-right: 1.5rem;
}

    .button--arrow:after {
        content: "";
        width: 1.8rem;
        height: 1.8rem;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.93947 11.2492V13.6875C8.93947 13.9965 9.19072 14.25 9.50347 14.25C9.64447 14.25 9.78472 14.1968 9.89197 14.0955C11.2232 12.8318 13.6007 10.5765 14.689 9.54375C14.839 9.402 14.923 9.20475 14.923 9C14.923 8.7945 14.839 8.598 14.689 8.45625C13.6007 7.4235 11.2232 5.1675 9.89197 3.90525C9.78472 3.80325 9.64447 3.75 9.50347 3.75C9.19072 3.75 8.93947 4.00275 8.93947 4.3125V6.75075H2.17447C1.77622 6.75075 1.42297 7.10325 1.42297 7.50075V10.4992C1.42297 10.8967 1.77622 11.2492 2.17447 11.2492H8.93947Z' fill='white'/%3E%3C/svg%3E%0A");
    }

    .button--arrow.button--lg:after {
        width: 2.2rem;
        height: 2.2rem;
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.93947 11.2492V13.6875C8.93947 13.9965 9.19072 14.25 9.50347 14.25C9.64447 14.25 9.78472 14.1968 9.89197 14.0955C11.2232 12.8318 13.6007 10.5765 14.689 9.54375C14.839 9.402 14.923 9.20475 14.923 9C14.923 8.7945 14.839 8.598 14.689 8.45625C13.6007 7.4235 11.2232 5.1675 9.89197 3.90525C9.78472 3.80325 9.64447 3.75 9.50347 3.75C9.19072 3.75 8.93947 4.00275 8.93947 4.3125V6.75075H2.17447C1.77622 6.75075 1.42297 7.10325 1.42297 7.50075V10.4992C1.42297 10.8967 1.77622 11.2492 2.17447 11.2492H8.93947Z' fill='white'/%3E%3C/svg%3E%0A");
    }

.button--cart:after {
    content: "";
    width: 2.8rem;
    height: 2.8rem;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_920_1059)'%3E%3Cpath d='M15.5155 4.36337C15.274 4.12304 15.1667 3.82554 15.1667 3.53387C15.1667 2.92254 15.6415 2.33337 16.3567 2.33337C16.6623 2.33337 16.9657 2.45004 17.1978 2.68104L21.6113 7.09454C20.7118 7.23104 19.8613 7.51804 19.0937 7.94154L15.5155 4.36337ZM20.0888 21.6767L19.4227 23.3334H8.57733L4.38083 12.8789L4.36217 12.8334H15.3767C15.5762 11.9922 15.9122 11.2059 16.366 10.5H0V12.8334H0.750167C1.37433 12.8334 1.94133 13.188 2.2155 13.748L7 25.6667H21L22.4117 22.1492C21.5973 22.1142 20.8168 21.9497 20.0888 21.6767ZM12.4845 4.36337C12.726 4.12304 12.8333 3.82554 12.8333 3.53387C12.8333 2.92254 12.3585 2.33337 11.6433 2.33337C11.3388 2.33337 11.0343 2.45004 10.8033 2.68104L5.31883 8.16671H8.68233L12.4845 4.36337ZM22.75 9.33337C19.852 9.33337 17.5 11.6842 17.5 14.5834C17.5 17.4825 19.852 19.8334 22.75 19.8334C25.6457 19.8334 28 17.4825 28 14.5834C28 11.6842 25.6457 9.33337 22.75 9.33337ZM25.6667 15.1667H23.3333V17.5H22.1667V15.1667H19.8333V14H22.1667V11.6667H23.3333V14H25.6667V15.1667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_920_1059'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    transform: translateY(-.2rem);
}

.button--square {
    width: 3.6rem;
    padding: 0;
    justify-content: center;
}

    .button--square.button--lg {
        width: 4.6rem;
    }

@media (pointer: fine) {
    .button, .button:before, .button--arrow:after {
        transition: var(--transition-default);
    }

        .button:hover:before {
            height: 100%;
        }

    .button--arrow:hover:after {
        transform: translateX(.3rem);
    }
}

.button--skipforwcag {
    width: 30rem;
    position: absolute;
    top: 15rem;
    left: -9000px;
    z-index: -999;
    transition: none;
}

    .button--skipforwcag:active,
    .button--skipforwcag:focus {
        left: calc(50% - 15rem);
        z-index: 999;
    }

.cta {
    font-weight: 700;
    align-items: center;
    line-height: var(--lineheight-body);
}

    .cta:after {
        content: "";
        width: 1.7rem;
        height: 1.7rem;
        margin-left: .5rem;
        background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.22392 10.6243V12.927C9.22392 13.2189 9.46121 13.4583 9.75658 13.4583C9.88975 13.4583 10.0222 13.408 10.1235 13.3124C11.3808 12.1188 13.6262 9.98888 14.654 9.0135C14.7957 8.87963 14.875 8.69333 14.875 8.49996C14.875 8.30588 14.7957 8.12029 14.654 7.98642C13.6262 7.01104 11.3808 4.88038 10.1235 3.68825C10.0222 3.59192 9.88975 3.54163 9.75658 3.54163C9.46121 3.54163 9.22392 3.78033 9.22392 4.07288V6.37567H2.83475C2.45862 6.37567 2.125 6.70858 2.125 7.084V9.91592C2.125 10.2913 2.45862 10.6243 2.83475 10.6243H9.22392Z' fill='url(%23paint0_linear_314_678)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_314_678' x1='2.125' y1='8.49996' x2='14.875' y2='8.49996' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23DC5828'/%3E%3Cstop offset='1' stop-color='%23E87722'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    }

.label {
    height: 3.6rem;
    padding: 1rem;
    display: inline-flex;
    align-items: center;
    font-size: var(--fontsize-body-md);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--orange);
    background-color: var(--white);
    border: .4rem solid var(--orange);
    border-radius: 1.5rem;
}

.downloads {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-flow: column;
    gap: .5rem;
}

    .downloads li {
        padding-left: 3rem !important;
    }

    .downloads li:before {
        width: 2.1rem !important;
        height: 2.1rem !important;
        top: .5rem !important;
        background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_787_251)'%3E%3Cpath d='M5.25 11.375H8.75V5.25H12.25V11.375H15.75L10.5 16.625L5.25 11.375ZM19.25 10.5C19.25 15.3247 15.3247 19.25 10.5 19.25C5.67525 19.25 1.75 15.3247 1.75 10.5C1.75 5.67525 5.67525 1.75 10.5 1.75C15.3247 1.75 19.25 5.67525 19.25 10.5ZM21 10.5C21 4.70138 16.2986 0 10.5 0C4.70138 0 0 4.70138 0 10.5C0 16.2986 4.70138 21 10.5 21C16.2986 21 21 16.2986 21 10.5Z' fill='%23DC5828'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_787_251'%3E%3Crect width='21' height='21' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") !important;
    }

        .downloads li a:not(:hover) {
            color: var(--orange) !important;
            background-image: linear-gradient(transparent, transparent) !important;
        }

.iframe__container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

    .iframe__container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

[class*="maxline--"] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maxline--1 {
    -webkit-line-clamp: 1;
}

.maxline--2 {
    -webkit-line-clamp: 2;
}

.maxline--3 {
    -webkit-line-clamp: 3;
}

.maxline--4 {
    -webkit-line-clamp: 4;
}

.grid {
    display: grid;
    gap: var(--padding-grid);
    grid-template-columns: repeat(1, 1fr);
}

@media(min-width:576px) {
    .grid[data-grid="2"],
    .grid[data-grid="3"],
    .grid[data-grid="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width:1024px) {

    .grid[data-grid="3"] {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid[data-grid="4"] {
        grid-template-columns: repeat(4, 1fr);
    }
}

dialog {
    z-index: 999;
    top: 0;
    right: 0;
    left: unset;
    max-height: 100vh;
    height: 100vh;
    max-width: 40rem;
    border: none;
    overflow: hidden;
    padding: var(--padding);
    font-size: var(--fontsize-body-sm);
    transform: translateX(100%);
    opacity: 0;
    transition: opacity .3s ease-out, transform .3s ease-out, overlay .3s ease-out allow-discrete, display .3s ease-out allow-discrete;
}

    dialog::backdrop {
        background-color: var(--black);
        opacity: .5;
    }

    dialog:open {
        transform: translateX(0);
        opacity: 1;
    }

    dialog h3 {
        font-size: 2rem !important;
        margin: 0 6rem var(--padding) 0 !important;
    }

    dialog hr {
        transform: translateX(calc(var(--padding) * -1));
        width: calc(var(--padding) * 2 + 100%);
        border-top-color: rgba(0, 0, 0, .1) !important;
        margin: 0 0 var(--padding) !important;
    }

    dialog .button {
        position: absolute;
        top: var(--padding);
        right: var(--padding);
        width: 2rem;
        height: 2rem;
        min-height: 2rem;
        padding: 0;
        background-color: var(--grey);
    }

        dialog .button svg {
            width: 1.6rem;
            height: 1.6rem;
        }

@starting-style {
    /* moet altijd na dialog:open staan */
    dialog:open {
        opacity: 0;
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion) {
    dialog {
        transition: none !important;
    }
}


.paginator {
    width: 100%;
    grid-column: 1 / -1; /* start at first column and end at last column */
    padding-top: 5rem;
    border-top: .1rem solid var(--grey-medium);
}

    .paginator ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 2rem;
    }

    .paginator .pagination__prev:after {
        transform: scale(-1) translateX(.5rem);
    }

    .paginator a:not(.button) {
        width: 3.6rem;
        height: 4.6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        font-weight: 700;
        border-bottom: .2rem solid var(--white);
    }

    .paginator .active a:not(.button) {
        color: var(--orange);
        border-color: var(--orange);
    }

@media(pointer: fine) {
    .paginator a:not(.button) {
        transition: var(--transition-default);
    }

        .paginator a:not(.button):hover {
            color: var(--black-deep);
            border-bottom-color: var(--black-deep);
        }
}