.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: var(--grey-100);
    --bs-table-active-color: #212529;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: calc(100% - var(--table-padding-inline));
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6;
}
figure.table {
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: var(--table-padding-block) var(--table-padding-inline);
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table > tbody {
    vertical-align: inherit;
}
.table > thead {
    vertical-align: bottom;
}
.table > :not(:first-child) {
    border-top: 2px solid currentColor;
}

.caption-top {
    caption-side: top;
}

.table-sm > :not(caption) > * > * {
    padding: calc(var(--table-padding-block) / 2) calc(var(--table-padding-block) / 2);
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0;
}
.table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
    border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

.table-active {
    --bs-table-accent-bg: var(--bs-table-active-bg);
    color: var(--bs-table-active-color);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

.table-dark {
    --bs-table-bg: #212529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #373b3e;
}

.table-basic {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: inherit;
    --bs-table-active-bg: transparent;
    --bs-table-active-color: inherit;
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: inherit;
    color: inherit;
    border-color: var(--border-color);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.bs-container,
.bs-container-fluid,
.bs-container-xxl,
.bs-container-xl,
.bs-container-lg,
.bs-container-md,
.bs-container-sm,

.wrapper {
    width: 100%;
    box-sizing: border-box;
    /*padding-right: var(--bs-gutter-x, 0.75rem);*/
    /*padding-left: var(--bs-gutter-x, 0.75rem);*/
    padding-left: var(--st-container-space-x, 10px);
    padding-right: var(--st-container-space-x, 10px);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .bs-container-sm, .bs-container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .bs-container-md, .bs-container-sm, .bs-container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .bs-container-lg, .bs-container-md, .bs-container-sm, .bs-container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .bs-container-xl, .bs-container-lg, .bs-container-md, .bs-container-sm, .bs-container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .bs-container-xxl, .bs-container-xl, .bs-container-lg, .bs-container-md, .bs-container-sm, .bs-container {
        max-width: 1320px;
    }
}

:root {
    --st-gutter-x: 1.5rem;
    --st-gutter-y: 0;
}

.row {
    --bs-gutter-x: var(--st-gutter-x);
    --bs-gutter-y: var(--st-gutter-y);
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}
.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.col {
    flex: 1 0 0%;
}

.row-cols-auto > * {
    flex: 0 0 auto;
    width: auto;
}

.row-cols-1 > * {
    flex: 0 0 auto;
    width: 100%;
}

.row-cols-2 > * {
    flex: 0 0 auto;
    width: 50%;
}

.row-cols-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
}

.row-cols-4 > * {
    flex: 0 0 auto;
    width: 25%;
}

.row-cols-5 > * {
    flex: 0 0 auto;
    width: 20%;
}

.row-cols-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
}

@media (min-width: 320px) {
    .col-xs {
        flex: 1 0 0%;
    }

    .row-cols-xs-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xs-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xs-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xs-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-xs-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xs-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xs-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}

@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
    }

    .row-cols-sm-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-sm-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-sm-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-sm-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-sm-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-sm-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}
@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
    }

    .row-cols-md-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-md-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-md-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-md-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}
@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
    }

    .row-cols-lg-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-lg-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-lg-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-lg-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-lg-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}
@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
    }

    .row-cols-xl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-xl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
}

/*commented because never used*/
/*@media (min-width: 1400px) {*/
/*    .col-xxl {*/
/*        flex: 1 0 0%;*/
/*    }*/

/*    .row-cols-xxl-auto > * {*/
/*        flex: 0 0 auto;*/
/*        width: auto;*/
/*    }*/

/*    .row-cols-xxl-1 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 100%;*/
/*    }*/

/*    .row-cols-xxl-2 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 50%;*/
/*    }*/

/*    .row-cols-xxl-3 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 33.3333333333%;*/
/*    }*/

/*    .row-cols-xxl-4 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 25%;*/
/*    }*/

/*    .row-cols-xxl-5 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 20%;*/
/*    }*/

/*    .row-cols-xxl-6 > * {*/
/*        flex: 0 0 auto;*/
/*        width: 16.6666666667%;*/
/*    }*/
/*}*/

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 320px) {
    .col-xs-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xs-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xs-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xs-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xs-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xs-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xs-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xs-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xs-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xs-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xs-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xs-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xs-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 576px) {
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (min-width: 992px) {
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (min-width: 1200px) {
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/*@media (min-width: 1400px) {*/
/*    .col-xxl-auto {*/
/*        flex: 0 0 auto;*/
/*        width: auto;*/
/*    }*/

/*    .col-xxl-1 {*/
/*        flex: 0 0 auto;*/
/*        width: 8.33333333%;*/
/*    }*/

/*    .col-xxl-2 {*/
/*        flex: 0 0 auto;*/
/*        width: 16.66666667%;*/
/*    }*/

/*    .col-xxl-3 {*/
/*        flex: 0 0 auto;*/
/*        width: 25%;*/
/*    }*/

/*    .col-xxl-4 {*/
/*        flex: 0 0 auto;*/
/*        width: 33.33333333%;*/
/*    }*/

/*    .col-xxl-5 {*/
/*        flex: 0 0 auto;*/
/*        width: 41.66666667%;*/
/*    }*/

/*    .col-xxl-6 {*/
/*        flex: 0 0 auto;*/
/*        width: 50%;*/
/*    }*/

/*    .col-xxl-7 {*/
/*        flex: 0 0 auto;*/
/*        width: 58.33333333%;*/
/*    }*/

/*    .col-xxl-8 {*/
/*        flex: 0 0 auto;*/
/*        width: 66.66666667%;*/
/*    }*/

/*    .col-xxl-9 {*/
/*        flex: 0 0 auto;*/
/*        width: 75%;*/
/*    }*/

/*    .col-xxl-10 {*/
/*        flex: 0 0 auto;*/
/*        width: 83.33333333%;*/
/*    }*/

/*    .col-xxl-11 {*/
/*        flex: 0 0 auto;*/
/*        width: 91.66666667%;*/
/*    }*/

/*    .col-xxl-12 {*/
/*        flex: 0 0 auto;*/
/*        width: 100%;*/
/*    }*/
/*}*/

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-content-start {
    align-content: flex-start !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

.align-self-auto {
    align-self: auto !important;
}

.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}

.order-first {
    order: -1 !important;
}

.order-0 {
    order: 0 !important;
}

.order-1 {
    order: 1 !important;
}

.order-2 {
    order: 2 !important;
}

.order-3 {
    order: 3 !important;
}

.order-4 {
    order: 4 !important;
}

.order-5 {
    order: 5 !important;
}

.order-6 {
    order: 6 !important;
}

.order-last {
    order: 999 !important;
}

@media (min-width: 320px) {
    .d-xs-flex {
        display: flex !important;
    }

    .d-xs-inline-flex {
        display: inline-flex !important;
    }

    .flex-xs-row {
        flex-direction: row !important;
    }

    .flex-xs-column {
        flex-direction: column !important;
    }

    .flex-xs-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-xs-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-xs-start {
        justify-content: flex-start !important;
    }

    .justify-content-xs-end {
        justify-content: flex-end !important;
    }

    .justify-content-xs-center {
        justify-content: center !important;
    }

    .justify-content-xs-between {
        justify-content: space-between !important;
    }

    .justify-content-xs-around {
        justify-content: space-around !important;
    }

    .justify-content-xs-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-xs-start {
        align-items: flex-start !important;
    }

    .align-items-xs-end {
        align-items: flex-end !important;
    }

    .align-items-xs-center {
        align-items: center !important;
    }

    .align-items-xs-baseline {
        align-items: baseline !important;
    }

    .align-items-xs-stretch {
        align-items: stretch !important;
    }

    .align-content-xs-start {
        align-content: flex-start !important;
    }

    .align-content-xs-end {
        align-content: flex-end !important;
    }

    .align-content-xs-center {
        align-content: center !important;
    }

    .align-content-xs-between {
        align-content: space-between !important;
    }

    .align-content-xs-around {
        align-content: space-around !important;
    }

    .align-content-xs-stretch {
        align-content: stretch !important;
    }

    .align-self-xs-auto {
        align-self: auto !important;
    }

    .align-self-xs-start {
        align-self: flex-start !important;
    }

    .align-self-xs-end {
        align-self: flex-end !important;
    }

    .align-self-xs-center {
        align-self: center !important;
    }

    .align-self-xs-baseline {
        align-self: baseline !important;
    }

    .align-self-xs-stretch {
        align-self: stretch !important;
    }

    .order-xs-first {
        order: -1 !important;
    }

    .order-xs-0 {
        order: 0 !important;
    }

    .order-xs-1 {
        order: 1 !important;
    }

    .order-xs-2 {
        order: 2 !important;
    }

    .order-xs-3 {
        order: 3 !important;
    }

    .order-xs-4 {
        order: 4 !important;
    }

    .order-xs-5 {
        order: 5 !important;
    }

    .order-xs-6 {
        order: 6 !important;
    }

    .order-xs-last {
        order: 999 !important;
    }
}

@media (min-width: 576px) {
    .d-sm-flex {
        display: flex !important;
    }

    .d-sm-inline-flex {
        display: inline-flex !important;
    }

    .flex-sm-row {
        flex-direction: row !important;
    }

    .flex-sm-column {
        flex-direction: column !important;
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-sm-start {
        justify-content: flex-start !important;
    }

    .justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .justify-content-sm-center {
        justify-content: center !important;
    }

    .justify-content-sm-between {
        justify-content: space-between !important;
    }

    .justify-content-sm-around {
        justify-content: space-around !important;
    }

    .justify-content-sm-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-sm-start {
        align-items: flex-start !important;
    }

    .align-items-sm-end {
        align-items: flex-end !important;
    }

    .align-items-sm-center {
        align-items: center !important;
    }

    .align-items-sm-baseline {
        align-items: baseline !important;
    }

    .align-items-sm-stretch {
        align-items: stretch !important;
    }

    .align-content-sm-start {
        align-content: flex-start !important;
    }

    .align-content-sm-end {
        align-content: flex-end !important;
    }

    .align-content-sm-center {
        align-content: center !important;
    }

    .align-content-sm-between {
        align-content: space-between !important;
    }

    .align-content-sm-around {
        align-content: space-around !important;
    }

    .align-content-sm-stretch {
        align-content: stretch !important;
    }

    .align-self-sm-auto {
        align-self: auto !important;
    }

    .align-self-sm-start {
        align-self: flex-start !important;
    }

    .align-self-sm-end {
        align-self: flex-end !important;
    }

    .align-self-sm-center {
        align-self: center !important;
    }

    .align-self-sm-baseline {
        align-self: baseline !important;
    }

    .align-self-sm-stretch {
        align-self: stretch !important;
    }

    .order-sm-first {
        order: -1 !important;
    }

    .order-sm-0 {
        order: 0 !important;
    }

    .order-sm-1 {
        order: 1 !important;
    }

    .order-sm-2 {
        order: 2 !important;
    }

    .order-sm-3 {
        order: 3 !important;
    }

    .order-sm-4 {
        order: 4 !important;
    }

    .order-sm-5 {
        order: 5 !important;
    }

    .order-sm-6 {
        order: 6 !important;
    }

    .order-sm-last {
        order: 999 !important;
    }
}

@media (min-width: 768px) {
    .d-md-flex {
        display: flex !important;
    }

    .d-md-inline-flex {
        display: inline-flex !important;
    }

    .flex-md-row {
        flex-direction: row !important;
    }

    .flex-md-column {
        flex-direction: column !important;
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-md-start {
        justify-content: flex-start !important;
    }

    .justify-content-md-end {
        justify-content: flex-end !important;
    }

    .justify-content-md-center {
        justify-content: center !important;
    }

    .justify-content-md-between {
        justify-content: space-between !important;
    }

    .justify-content-md-around {
        justify-content: space-around !important;
    }

    .justify-content-md-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-md-start {
        align-items: flex-start !important;
    }

    .align-items-md-end {
        align-items: flex-end !important;
    }

    .align-items-md-center {
        align-items: center !important;
    }

    .align-items-md-baseline {
        align-items: baseline !important;
    }

    .align-items-md-stretch {
        align-items: stretch !important;
    }

    .align-content-md-start {
        align-content: flex-start !important;
    }

    .align-content-md-end {
        align-content: flex-end !important;
    }

    .align-content-md-center {
        align-content: center !important;
    }

    .align-content-md-between {
        align-content: space-between !important;
    }

    .align-content-md-around {
        align-content: space-around !important;
    }

    .align-content-md-stretch {
        align-content: stretch !important;
    }

    .align-self-md-auto {
        align-self: auto !important;
    }

    .align-self-md-start {
        align-self: flex-start !important;
    }

    .align-self-md-end {
        align-self: flex-end !important;
    }

    .align-self-md-center {
        align-self: center !important;
    }

    .align-self-md-baseline {
        align-self: baseline !important;
    }

    .align-self-md-stretch {
        align-self: stretch !important;
    }

    .order-md-first {
        order: -1 !important;
    }

    .order-md-0 {
        order: 0 !important;
    }

    .order-md-1 {
        order: 1 !important;
    }

    .order-md-2 {
        order: 2 !important;
    }

    .order-md-3 {
        order: 3 !important;
    }

    .order-md-4 {
        order: 4 !important;
    }

    .order-md-5 {
        order: 5 !important;
    }

    .order-md-6 {
        order: 6 !important;
    }

    .order-md-last {
        order: 999 !important;
    }
}

@media (min-width: 992px) {
    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-inline-flex {
        display: inline-flex !important;
    }

    .flex-lg-row {
        flex-direction: row !important;
    }

    .flex-lg-column {
        flex-direction: column !important;
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-lg-start {
        justify-content: flex-start !important;
    }

    .justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .justify-content-lg-center {
        justify-content: center !important;
    }

    .justify-content-lg-between {
        justify-content: space-between !important;
    }

    .justify-content-lg-around {
        justify-content: space-around !important;
    }

    .justify-content-lg-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-lg-start {
        align-items: flex-start !important;
    }

    .align-items-lg-end {
        align-items: flex-end !important;
    }

    .align-items-lg-center {
        align-items: center !important;
    }

    .align-items-lg-baseline {
        align-items: baseline !important;
    }

    .align-items-lg-stretch {
        align-items: stretch !important;
    }

    .align-content-lg-start {
        align-content: flex-start !important;
    }

    .align-content-lg-end {
        align-content: flex-end !important;
    }

    .align-content-lg-center {
        align-content: center !important;
    }

    .align-content-lg-between {
        align-content: space-between !important;
    }

    .align-content-lg-around {
        align-content: space-around !important;
    }

    .align-content-lg-stretch {
        align-content: stretch !important;
    }

    .align-self-lg-auto {
        align-self: auto !important;
    }

    .align-self-lg-start {
        align-self: flex-start !important;
    }

    .align-self-lg-end {
        align-self: flex-end !important;
    }

    .align-self-lg-center {
        align-self: center !important;
    }

    .align-self-lg-baseline {
        align-self: baseline !important;
    }

    .align-self-lg-stretch {
        align-self: stretch !important;
    }

    .order-lg-first {
        order: -1 !important;
    }

    .order-lg-0 {
        order: 0 !important;
    }

    .order-lg-1 {
        order: 1 !important;
    }

    .order-lg-2 {
        order: 2 !important;
    }

    .order-lg-3 {
        order: 3 !important;
    }

    .order-lg-4 {
        order: 4 !important;
    }

    .order-lg-5 {
        order: 5 !important;
    }

    .order-lg-6 {
        order: 6 !important;
    }

    .order-lg-last {
        order: 999 !important;
    }
}

@media (min-width: 1200px) {
    .d-xl-flex {
        display: flex !important;
    }

    .d-xl-inline-flex {
        display: inline-flex !important;
    }

    .flex-xl-row {
        flex-direction: row !important;
    }

    .flex-xl-column {
        flex-direction: column !important;
    }

    .flex-xl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-xl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-xl-start {
        justify-content: flex-start !important;
    }

    .justify-content-xl-end {
        justify-content: flex-end !important;
    }

    .justify-content-xl-center {
        justify-content: center !important;
    }

    .justify-content-xl-between {
        justify-content: space-between !important;
    }

    .justify-content-xl-around {
        justify-content: space-around !important;
    }

    .justify-content-xl-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-xl-start {
        align-items: flex-start !important;
    }

    .align-items-xl-end {
        align-items: flex-end !important;
    }

    .align-items-xl-center {
        align-items: center !important;
    }

    .align-items-xl-baseline {
        align-items: baseline !important;
    }

    .align-items-xl-stretch {
        align-items: stretch !important;
    }

    .align-content-xl-start {
        align-content: flex-start !important;
    }

    .align-content-xl-end {
        align-content: flex-end !important;
    }

    .align-content-xl-center {
        align-content: center !important;
    }

    .align-content-xl-between {
        align-content: space-between !important;
    }

    .align-content-xl-around {
        align-content: space-around !important;
    }

    .align-content-xl-stretch {
        align-content: stretch !important;
    }

    .align-self-xl-auto {
        align-self: auto !important;
    }

    .align-self-xl-start {
        align-self: flex-start !important;
    }

    .align-self-xl-end {
        align-self: flex-end !important;
    }

    .align-self-xl-center {
        align-self: center !important;
    }

    .align-self-xl-baseline {
        align-self: baseline !important;
    }

    .align-self-xl-stretch {
        align-self: stretch !important;
    }

    .order-xl-first {
        order: -1 !important;
    }

    .order-xl-0 {
        order: 0 !important;
    }

    .order-xl-1 {
        order: 1 !important;
    }

    .order-xl-2 {
        order: 2 !important;
    }

    .order-xl-3 {
        order: 3 !important;
    }

    .order-xl-4 {
        order: 4 !important;
    }

    .order-xl-5 {
        order: 5 !important;
    }

    .order-xl-6 {
        order: 6 !important;
    }

    .order-xl-last {
        order: 999 !important;
    }
}
/*commented because never used*/
/*@media (min-width: 1400px) {*/
/*    .d-xxl-flex {*/
/*        display: flex !important;*/
/*    }*/

/*    .d-xxl-inline-flex {*/
/*        display: inline-flex !important;*/
/*    }*/

/*    .flex-xxl-row {*/
/*        flex-direction: row !important;*/
/*    }*/

/*    .flex-xxl-column {*/
/*        flex-direction: column !important;*/
/*    }*/

/*    .flex-xxl-row-reverse {*/
/*        flex-direction: row-reverse !important;*/
/*    }*/

/*    .flex-xxl-column-reverse {*/
/*        flex-direction: column-reverse !important;*/
/*    }*/

/*    .justify-content-xxl-start {*/
/*        justify-content: flex-start !important;*/
/*    }*/

/*    .justify-content-xxl-end {*/
/*        justify-content: flex-end !important;*/
/*    }*/

/*    .justify-content-xxl-center {*/
/*        justify-content: center !important;*/
/*    }*/

/*    .justify-content-xxl-between {*/
/*        justify-content: space-between !important;*/
/*    }*/

/*    .justify-content-xxl-around {*/
/*        justify-content: space-around !important;*/
/*    }*/

/*    .justify-content-xxl-evenly {*/
/*        justify-content: space-evenly !important;*/
/*    }*/

/*    .align-items-xxl-start {*/
/*        align-items: flex-start !important;*/
/*    }*/

/*    .align-items-xxl-end {*/
/*        align-items: flex-end !important;*/
/*    }*/

/*    .align-items-xxl-center {*/
/*        align-items: center !important;*/
/*    }*/

/*    .align-items-xxl-baseline {*/
/*        align-items: baseline !important;*/
/*    }*/

/*    .align-items-xxl-stretch {*/
/*        align-items: stretch !important;*/
/*    }*/

/*    .align-content-xxl-start {*/
/*        align-content: flex-start !important;*/
/*    }*/

/*    .align-content-xxl-end {*/
/*        align-content: flex-end !important;*/
/*    }*/

/*    .align-content-xxl-center {*/
/*        align-content: center !important;*/
/*    }*/

/*    .align-content-xxl-between {*/
/*        align-content: space-between !important;*/
/*    }*/

/*    .align-content-xxl-around {*/
/*        align-content: space-around !important;*/
/*    }*/

/*    .align-content-xxl-stretch {*/
/*        align-content: stretch !important;*/
/*    }*/

/*    .align-self-xxl-auto {*/
/*        align-self: auto !important;*/
/*    }*/

/*    .align-self-xxl-start {*/
/*        align-self: flex-start !important;*/
/*    }*/

/*    .align-self-xxl-end {*/
/*        align-self: flex-end !important;*/
/*    }*/

/*    .align-self-xxl-center {*/
/*        align-self: center !important;*/
/*    }*/

/*    .align-self-xxl-baseline {*/
/*        align-self: baseline !important;*/
/*    }*/

/*    .align-self-xxl-stretch {*/
/*        align-self: stretch !important;*/
/*    }*/

/*.order-xxl-first {*/
/*    order: -1 !important;*/
/*}*/

/*.order-xxl-0 {*/
/*    order: 0 !important;*/
/*}*/

/*.order-xxl-1 {*/
/*    order: 1 !important;*/
/*}*/

/*.order-xxl-2 {*/
/*    order: 2 !important;*/
/*}*/

/*.order-xxl-3 {*/
/*    order: 3 !important;*/
/*}*/

/*.order-xxl-4 {*/
/*    order: 4 !important;*/
/*}*/

/*.order-xxl-5 {*/
/*    order: 5 !important;*/
/*}*/

/*.order-xxl-6 {*/
/*    order: 6 !important;*/
/*}*/

/*.order-xxl-last {*/
/*    order: 999 !important;*/
/*}*/
/*}*/

.offset-0 {
    margin-left: 0;
}

.offset-1 {
    margin-left: 8.33333333%;
}

.offset-2 {
    margin-left: 16.66666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.33333333%;
}

.offset-5 {
    margin-left: 41.66666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.33333333%;
}

.offset-8 {
    margin-left: 66.66666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.33333333%;
}

.offset-11 {
    margin-left: 91.66666667%;
}

@media (min-width: 320px) {
    .offset-xs-0 {
        margin-left: 0;
    }

    .offset-xs-1 {
        margin-left: 8.33333333%;
    }

    .offset-xs-2 {
        margin-left: 16.66666667%;
    }

    .offset-xs-3 {
        margin-left: 25%;
    }

    .offset-xs-4 {
        margin-left: 33.33333333%;
    }

    .offset-xs-5 {
        margin-left: 41.66666667%;
    }

    .offset-xs-6 {
        margin-left: 50%;
    }

    .offset-xs-7 {
        margin-left: 58.33333333%;
    }

    .offset-xs-8 {
        margin-left: 66.66666667%;
    }

    .offset-xs-9 {
        margin-left: 75%;
    }

    .offset-xs-10 {
        margin-left: 83.33333333%;
    }

    .offset-xs-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 576px) {
    .offset-sm-0 {
        margin-left: 0;
    }

    .offset-sm-1 {
        margin-left: 8.33333333%;
    }

    .offset-sm-2 {
        margin-left: 16.66666667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.33333333%;
    }

    .offset-sm-5 {
        margin-left: 41.66666667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.33333333%;
    }

    .offset-sm-8 {
        margin-left: 66.66666667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.33333333%;
    }

    .offset-sm-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 768px) {
    .offset-md-0 {
        margin-left: 0;
    }

    .offset-md-1 {
        margin-left: 8.33333333%;
    }

    .offset-md-2 {
        margin-left: 16.66666667%;
    }

    .offset-md-3 {
        margin-left: 25%;
    }

    .offset-md-4 {
        margin-left: 33.33333333%;
    }

    .offset-md-5 {
        margin-left: 41.66666667%;
    }

    .offset-md-6 {
        margin-left: 50%;
    }

    .offset-md-7 {
        margin-left: 58.33333333%;
    }

    .offset-md-8 {
        margin-left: 66.66666667%;
    }

    .offset-md-9 {
        margin-left: 75%;
    }

    .offset-md-10 {
        margin-left: 83.33333333%;
    }

    .offset-md-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 992px) {
    .offset-lg-0 {
        margin-left: 0;
    }

    .offset-lg-1 {
        margin-left: 8.33333333%;
    }

    .offset-lg-2 {
        margin-left: 16.66666667%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }

    .offset-lg-4 {
        margin-left: 33.33333333%;
    }

    .offset-lg-5 {
        margin-left: 41.66666667%;
    }

    .offset-lg-6 {
        margin-left: 50%;
    }

    .offset-lg-7 {
        margin-left: 58.33333333%;
    }

    .offset-lg-8 {
        margin-left: 66.66666667%;
    }

    .offset-lg-9 {
        margin-left: 75%;
    }

    .offset-lg-10 {
        margin-left: 83.33333333%;
    }

    .offset-lg-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 1200px) {
    .offset-xl-0 {
        margin-left: 0;
    }

    .offset-xl-1 {
        margin-left: 8.33333333%;
    }

    .offset-xl-2 {
        margin-left: 16.66666667%;
    }

    .offset-xl-3 {
        margin-left: 25%;
    }

    .offset-xl-4 {
        margin-left: 33.33333333%;
    }

    .offset-xl-5 {
        margin-left: 41.66666667%;
    }

    .offset-xl-6 {
        margin-left: 50%;
    }

    .offset-xl-7 {
        margin-left: 58.33333333%;
    }

    .offset-xl-8 {
        margin-left: 66.66666667%;
    }

    .offset-xl-9 {
        margin-left: 75%;
    }

    .offset-xl-10 {
        margin-left: 83.33333333%;
    }

    .offset-xl-11 {
        margin-left: 91.66666667%;
    }
}
/*commented because never used*/
/*@media (min-width: 1400px) {*/
/*    .offset-xxl-0 {*/
/*        margin-left: 0;*/
/*    }*/

/*    .offset-xxl-1 {*/
/*        margin-left: 8.33333333%;*/
/*    }*/

/*    .offset-xxl-2 {*/
/*        margin-left: 16.66666667%;*/
/*    }*/

/*    .offset-xxl-3 {*/
/*        margin-left: 25%;*/
/*    }*/

/*    .offset-xxl-4 {*/
/*        margin-left: 33.33333333%;*/
/*    }*/

/*    .offset-xxl-5 {*/
/*        margin-left: 41.66666667%;*/
/*    }*/

/*    .offset-xxl-6 {*/
/*        margin-left: 50%;*/
/*    }*/

/*    .offset-xxl-7 {*/
/*        margin-left: 58.33333333%;*/
/*    }*/

/*    .offset-xxl-8 {*/
/*        margin-left: 66.66666667%;*/
/*    }*/

/*    .offset-xxl-9 {*/
/*        margin-left: 75%;*/
/*    }*/

/*    .offset-xxl-10 {*/
/*        margin-left: 83.33333333%;*/
/*    }*/

/*    .offset-xxl-11 {*/
/*        margin-left: 91.66666667%;*/
/*    }*/
/*}*/
.d-grid {
    display: grid !important;
}

@media (min-width: 320px) {
    .d-xs-grid {
        display: grid !important;
    }
}

@media (min-width: 576px) {
    .d-sm-grid {
        display: grid !important;
    }
}

@media (min-width: 768px) {
    .d-md-grid {
        display: grid !important;
    }
}

@media (min-width: 992px) {
    .d-lg-grid {
        display: grid !important;
    }
}

@media (min-width: 1200px) {
    .d-xl-grid {
        display: grid !important;
    }
}

@media (min-width: 1400px) {
    .d-xxl-grid {
        display: grid !important;
    }
}


.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}

@media (min-width: 320px) {
    .gap-xs-0 {
        gap: 0 !important;
    }

    .gap-xs-1 {
        gap: 0.25rem !important;
    }

    .gap-xs-2 {
        gap: 0.5rem !important;
    }

    .gap-xs-3 {
        gap: 1rem !important;
    }

    .gap-xs-4 {
        gap: 1.5rem !important;
    }

    .gap-xs-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 576px) {
    .gap-sm-0 {
        gap: 0 !important;
    }

    .gap-sm-1 {
        gap: 0.25rem !important;
    }

    .gap-sm-2 {
        gap: 0.5rem !important;
    }

    .gap-sm-3 {
        gap: 1rem !important;
    }

    .gap-sm-4 {
        gap: 1.5rem !important;
    }

    .gap-sm-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 768px) {
    .gap-md-0 {
        gap: 0 !important;
    }

    .gap-md-1 {
        gap: 0.25rem !important;
    }

    .gap-md-2 {
        gap: 0.5rem !important;
    }

    .gap-md-3 {
        gap: 1rem !important;
    }

    .gap-md-4 {
        gap: 1.5rem !important;
    }

    .gap-md-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 992px) {
    .gap-lg-0 {
        gap: 0 !important;
    }

    .gap-lg-1 {
        gap: 0.25rem !important;
    }

    .gap-lg-2 {
        gap: 0.5rem !important;
    }

    .gap-lg-3 {
        gap: 1rem !important;
    }

    .gap-lg-4 {
        gap: 1.5rem !important;
    }

    .gap-lg-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 1200px) {
    .gap-xl-0 {
        gap: 0 !important;
    }

    .gap-xl-1 {
        gap: 0.25rem !important;
    }

    .gap-xl-2 {
        gap: 0.5rem !important;
    }

    .gap-xl-3 {
        gap: 1rem !important;
    }

    .gap-xl-4 {
        gap: 1.5rem !important;
    }

    .gap-xl-5 {
        gap: 3rem !important;
    }
}
/*commented because never used*/
/*@media (min-width: 1400px) {*/
/*    .gap-xxl-0 {*/
/*        gap: 0 !important;*/
/*    }*/

/*    .gap-xxl-1 {*/
/*        gap: 0.25rem !important;*/
/*    }*/

/*    .gap-xxl-2 {*/
/*        gap: 0.5rem !important;*/
/*    }*/

/*    .gap-xxl-3 {*/
/*        gap: 1rem !important;*/
/*    }*/

/*    .gap-xxl-4 {*/
/*        gap: 1.5rem !important;*/
/*    }*/

/*    .gap-xxl-5 {*/
/*        gap: 3rem !important;*/
/*    }*/
/*}*/
/* todo: bootstrap styling die we niet nodig hebben weghalen, ook de css variabelen omzetten naar die van nieuwe thema builder */
:root {
    --btn-line-height: 1.5em; /* em unit required - 1em so btn-icon aligns with normal btn */

    /* bereken totale button hoogte */
    --btn-total-height: calc(
            (var(--btn-font-size) * 1.5) +
            (var(--btn-padding-block) * 2) +
            (var(--btn-border-width) * 2)
    );
}

.btn {
    --bs-btn-padding-x: var(--btn-padding-inline);
    --bs-btn-padding-y: var(--btn-padding-block);
    --bs-btn-font-family: var(--btn-font-family);
    --bs-btn-font-size: var(--btn-font-size);
    --bs-btn-font-weight: var(--btn-font-weight);
    --bs-btn-line-height: var(--btn-line-height);
    --bs-btn-color: var(--grey-700);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--btn-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--btn-border-radius);
    /*--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);*/
    --bs-btn-disabled-opacity: 0.65;
    /*--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);*/
    box-sizing: border-box;
    display: inline-flex; /* was eerst inline-block - veranderd ivm icons in buttons uitlijnen */
    align-items: center;
    justify-content: center;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    text-transform: var(--btn-text-transform);
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}
.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.btn-check:focus + .btn, .btn:focus {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    /*outline: 0;*/
    /*box-shadow: var(--bs-btn-focus-box-shadow);*/
}
.btn-check:checked + .btn, .btn-check:active + .btn, .btn:active, .btn.active, .btn.show {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
/*.btn-check:checked + .btn:focus, .btn-check:active + .btn:focus, .btn:active:focus, .btn.active:focus, .btn.show:focus {*/
/*    box-shadow: var(--bs-btn-focus-box-shadow);*/
/*}*/
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    --bs-btn-disabled-color: var(--btn-disabled-text-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg-color);
    --bs-btn-disabled-border-color: var(--btn-disabled-border-color);

    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
}

.btn-primary {
    --bs-btn-color: var(--btn-primary-text-color);
    --bs-btn-bg: var(--btn-primary-bg-color);
    --bs-btn-border-color: var(--btn-primary-border-color);
    --bs-btn-hover-color: var(--btn-primary-text-color-hover);
    --bs-btn-hover-bg: var(--btn-primary-bg-color-hover);
    --bs-btn-hover-border-color: var(--btn-primary-border-color-hover);
    /*--bs-btn-focus-shadow-rgb: 49, 132, 253;*/
    --bs-btn-active-color: var(--btn-primary-text-color-hover);
    --bs-btn-active-bg: var(--btn-primary-bg-color-hover);
    --bs-btn-active-border-color: var(--btn-primary-border-color-hover);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #0d6efd;*/
    /*--bs-btn-disabled-border-color: #0d6efd;*/
}

.btn-secondary {
    --bs-btn-color: var(--btn-secondary-text-color);
    --bs-btn-bg: var(--btn-secondary-bg-color);
    --bs-btn-border-color: var(--btn-secondary-border-color);
    --bs-btn-hover-color: var(--btn-secondary-text-color-hover);
    --bs-btn-hover-bg: var(--btn-secondary-bg-color-hover);
    --bs-btn-hover-border-color: var(--btn-secondary-border-color-hover);
    /*--bs-btn-focus-shadow-rgb: 130, 138, 145;*/
    --bs-btn-active-color: var(--btn-secondary-text-color-hover);
    --bs-btn-active-bg: var(--btn-secondary-bg-color-hover);
    --bs-btn-active-border-color: var(--btn-secondary-border-color-hover);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #6c757d;*/
    /*--bs-btn-disabled-border-color: #6c757d;*/
}

.btn-tertiary {
    --bs-btn-color: var(--btn-tertiary-text-color);
    --bs-btn-bg: var(--btn-tertiary-bg-color);
    --bs-btn-border-color: var(--btn-tertiary-border-color);
    --bs-btn-hover-color: var(--btn-tertiary-text-color-hover);
    --bs-btn-hover-bg: var(--btn-tertiary-bg-color-hover);
    --bs-btn-hover-border-color: var(--btn-tertiary-border-color-hover);
    /*--bs-btn-focus-shadow-rgb: 130, 138, 145;*/
    --bs-btn-active-color: var(--btn-tertiary-text-color-hover);
    --bs-btn-active-bg: var(--btn-tertiary-bg-color-hover);
    --bs-btn-active-border-color: var(--btn-tertiary-border-color-hover);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #6c757d;*/
    /*--bs-btn-disabled-border-color: #6c757d;*/
}


.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--success-600);
    --bs-btn-border-color: var(--success-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--success-700);
    --bs-btn-hover-border-color: var(--success-700);
    /*--bs-btn-focus-shadow-rgb: 60, 153, 110;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--success-700);
    --bs-btn-active-border-color: var(--success-700);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #198754;*/
    /*--bs-btn-disabled-border-color: #198754;*/
}

.btn-info {
    --bs-btn-color: var(--grey-900);
    --bs-btn-bg: var(--info-500);
    --bs-btn-border-color: var(--info-500);
    --bs-btn-hover-color: var(--grey-900);
    --bs-btn-hover-bg: var(--info-600);
    --bs-btn-hover-border-color: var(--info-600);
    /*--bs-btn-focus-shadow-rgb: 11, 172, 204;*/
    --bs-btn-active-color: var(--grey-900);
    --bs-btn-active-bg: var(--info-600);
    --bs-btn-active-border-color: var(--info-600);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #000;*/
    /*--bs-btn-disabled-bg: #0dcaf0;*/
    /*--bs-btn-disabled-border-color: #0dcaf0;*/
}

.btn-warning {
    --bs-btn-color: var(--grey-900);
    --bs-btn-bg: var(--warning-500);
    --bs-btn-border-color: var(--warning-500);
    --bs-btn-hover-color: var(--grey-900);
    --bs-btn-hover-bg: var(--warning-600);
    --bs-btn-hover-border-color: var(--warning-600);
    /*--bs-btn-focus-shadow-rgb: 217, 164, 6;*/
    --bs-btn-active-color: var(--grey-900);
    --bs-btn-active-bg: var(--warning-600);
    --bs-btn-active-border-color: var(--warning-600);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #000;*/
    /*--bs-btn-disabled-bg: #ffc107;*/
    /*--bs-btn-disabled-border-color: #ffc107;*/
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--error-500);
    --bs-btn-border-color: var(--error-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--error-600);
    --bs-btn-hover-border-color: var(--error-600);
    /*--bs-btn-focus-shadow-rgb: 225, 83, 97;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--error-600);
    --bs-btn-active-border-color: var(--error-600);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #dc3545;*/
    /*--bs-btn-disabled-border-color: #dc3545;*/
}

.btn-light {
    --bs-btn-color: var(--grey-600);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--grey-300);
    --bs-btn-hover-color: var(--grey-700);
    --bs-btn-hover-bg: var(--grey-100);
    --bs-btn-hover-border-color: var(--grey-400);
    /*--bs-btn-focus-shadow-rgb: 211, 212, 213;*/
    --bs-btn-active-color: var(--grey-700);
    --bs-btn-active-bg: var(--grey-100);
    --bs-btn-active-border-color: var(--grey-400);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #000;*/
    /*--bs-btn-disabled-bg: #f8f9fa;*/
    /*--bs-btn-disabled-border-color: #f8f9fa;*/
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--grey-800);
    --bs-btn-border-color: var(--grey-800);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--grey-900);
    --bs-btn-hover-border-color: var(--grey-900);
    /*--bs-btn-focus-shadow-rgb: 66, 70, 73;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--grey-900);
    --bs-btn-active-border-color: var(--grey-900);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #fff;*/
    /*--bs-btn-disabled-bg: #212529;*/
    /*--bs-btn-disabled-border-color: #212529;*/
}

/* TODO*/
/*.btn-outline-primary {*/
/*    --bs-btn-color: #0d6efd;*/
/*    --bs-btn-border-color: #0d6efd;*/
/*    --bs-btn-hover-color: #fff;*/
/*    --bs-btn-hover-bg: #0d6efd;*/
/*    --bs-btn-hover-border-color: #0d6efd;*/
/*    --bs-btn-focus-shadow-rgb: 13, 110, 253;*/
/*    --bs-btn-active-color: #fff;*/
/*    --bs-btn-active-bg: #0d6efd;*/
/*    --bs-btn-active-border-color: #0d6efd;*/
/*    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
/*    --bs-btn-disabled-color: #0d6efd;*/
/*    --bs-btn-disabled-bg: transparent;*/
/*    --bs-btn-disabled-border-color: #0d6efd;*/
/*    --bs-gradient: none;*/
/*}*/

/* TODO */
/*.btn-outline-secondary {*/
/*    --bs-btn-color: #6c757d;*/
/*    --bs-btn-border-color: #6c757d;*/
/*    --bs-btn-hover-color: #fff;*/
/*    --bs-btn-hover-bg: #6c757d;*/
/*    --bs-btn-hover-border-color: #6c757d;*/
/*    --bs-btn-focus-shadow-rgb: 108, 117, 125;*/
/*    --bs-btn-active-color: #fff;*/
/*    --bs-btn-active-bg: #6c757d;*/
/*    --bs-btn-active-border-color: #6c757d;*/
/*    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
/*    --bs-btn-disabled-color: #6c757d;*/
/*    --bs-btn-disabled-bg: transparent;*/
/*    --bs-btn-disabled-border-color: #6c757d;*/
/*    --bs-gradient: none;*/
/*}*/

.btn-outline-success {
    --bs-btn-color: var(--success-700);
    --bs-btn-border-color: var(--success-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--success-500);
    --bs-btn-hover-border-color: var(--success-500);
    /*--bs-btn-focus-shadow-rgb: 25, 135, 84;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--success-500);
    --bs-btn-active-border-color: var(--success-500);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #198754;*/
    /*--bs-btn-disabled-bg: transparent;*/
    /*--bs-btn-disabled-border-color: #198754;*/
    /*--bs-gradient: none;*/
}

.btn-outline-info {
    --bs-btn-color: var(--info-700);
    --bs-btn-border-color: var(--info-500);
    --bs-btn-hover-color: var(--grey-900);
    --bs-btn-hover-bg: var(--info-500);
    --bs-btn-hover-border-color: var(--info-500);
    /*--bs-btn-focus-shadow-rgb: 13, 202, 240;*/
    --bs-btn-active-color: var(--grey-900);
    --bs-btn-active-bg: var(--info-500);
    --bs-btn-active-border-color: var(--info-500);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #0dcaf0;*/
    /*--bs-btn-disabled-bg: transparent;*/
    /*--bs-btn-disabled-border-color: #0dcaf0;*/
    /*--bs-gradient: none;*/
}

.btn-outline-warning {
    --bs-btn-color: var(--warning-700);
    --bs-btn-border-color: var(--warning-500);
    --bs-btn-hover-color: var(--grey-900);
    --bs-btn-hover-bg: var(--warning-500);
    --bs-btn-hover-border-color: var(--warning-500);
    /*--bs-btn-focus-shadow-rgb: 255, 193, 7;*/
    --bs-btn-active-color: var(--grey-900);
    --bs-btn-active-bg: var(--warning-500);
    --bs-btn-active-border-color: var(--warning-500);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #ffc107;*/
    /*--bs-btn-disabled-bg: transparent;*/
    /*--bs-btn-disabled-border-color: #ffc107;*/
    /*--bs-gradient: none;*/
}

.btn-outline-danger {
    --bs-btn-color: var(--error-700);
    --bs-btn-border-color: var(--error-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--error-500);
    --bs-btn-hover-border-color: var(--error-500);
    /*--bs-btn-focus-shadow-rgb: 220, 53, 69;*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--error-500);
    --bs-btn-active-border-color: var(--error-500);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #dc3545;*/
    /*--bs-btn-disabled-bg: transparent;*/
    /*--bs-btn-disabled-border-color: #dc3545;*/
    /*--bs-gradient: none;*/
}

 /*TODO*/
/*.btn-outline-light {*/
/*    --bs-btn-color: #f8f9fa;*/
/*    --bs-btn-border-color: #f8f9fa;*/
/*    --bs-btn-hover-color: #000;*/
/*    --bs-btn-hover-bg: #f8f9fa;*/
/*    --bs-btn-hover-border-color: #f8f9fa;*/
/*    !*--bs-btn-focus-shadow-rgb: 248, 249, 250;*!*/
/*    !*--bs-btn-active-color: #000;*!*/
/*    !*--bs-btn-active-bg: #f8f9fa;*!*/
/*    !*--bs-btn-active-border-color: #f8f9fa;*!*/
/*    !*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*!*/
/*    !*--bs-btn-disabled-color: #f8f9fa;*!*/
/*    !*--bs-btn-disabled-bg: transparent;*!*/
/*    !*--bs-btn-disabled-border-color: #f8f9fa;*!*/
/*    !*--bs-gradient: none;*!*/
/*}*/

/*TODO*/
/*.btn-outline-dark {*/
/*    --bs-btn-color: #212529;*/
/*    --bs-btn-border-color: #212529;*/
/*    --bs-btn-hover-color: #fff;*/
/*    --bs-btn-hover-bg: #212529;*/
/*    --bs-btn-hover-border-color: #212529;*/
/*    !*--bs-btn-focus-shadow-rgb: 33, 37, 41;*!*/
/*    !*--bs-btn-active-color: #fff;*!*/
/*    !*--bs-btn-active-bg: #212529;*!*/
/*    !*--bs-btn-active-border-color: #212529;*!*/
/*    !*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*!*/
/*    !*--bs-btn-disabled-color: #212529;*!*/
/*    !*--bs-btn-disabled-bg: transparent;*!*/
/*    !*--bs-btn-disabled-border-color: #212529;*!*/
/*    !*--bs-gradient: none;*!*/
/*}*/

.btn-link {
    --bs-btn-font-weight: var(--font-weight-normal);
    --bs-btn-color: var(--link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--link-color-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--link-color-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--grey-400);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    text-decoration: underline;
}
.btn-link:focus {
    color: var(--bs-btn-color);
}
.btn-link:hover {
    color: var(--bs-btn-hover-color);
}

.btn-link--no-padding {
    padding: 0 !important;
    --btn-padding: 0 !important;
    --btn-padding-block:  0 !important;
    --btn-padding-inline: 0 !important;
}

.btn-lg, .btn-group-lg > .btn {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-font-size: 1.25rem;
    /*--bs-btn-border-radius: 0.5rem;*/
}

.btn-sm, .btn-group-sm > .btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.875rem;
    /*--bs-btn-border-radius: 0.25rem;*/
}

/* custom - niet Bootstrap original */
.btn-xs, .btn-group-xs > .btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: var(--text-size-xs);
    /*--bs-btn-border-radius: 0.25rem;*/
}


.btn .st-icon {
    --st-icon-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-line-height); /* min-height = line-height, want de icon pakte de line-height zelf niet - nu toch goed uitgelijnd en even hoog als normale btn */
}

/* space between icon and text in button */
/*.btn span + .st-icon,*/
/*.btn .st-icon + span{*/
/*    margin-left: 0.5em;*/
/*}*/

.btn-icon,
.configuration_btn.btn-icon {
    /*padding-block: var(--btn-padding-block);*/
    /*padding-inline: var(--btn-padding-block);*/
    --bs-btn-padding-x: var(--bs-btn-padding-y);
}

.btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn-icon-lg .st-icon {
    --st-icon-size: 1.125em !important;
}

.btn-icon .st-icon,
.btn-icon .fa-icon {
    min-width: var(--btn-line-height); /* btn-icon moet vierkant zijn, daarom ook hier de min-WIDTH de line-height */
}
/* todo: bootstrap styling die we niet nodig hebben weghalen, ook de css variabelen omzetten naar die van nieuwe thema builder */

.dropup,
.dropend,
.dropdown,
.dropstart,
.dropup-center,
.dropdown-center {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropdown-menu {
    --bs-dropdown-min-width: 10rem; /* 160px */
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-color: #212529;
    --bs-dropdown-bg: #fff;
    /*--bs-dropdown-border-color: var(--bs-border-color-translucent);*/
    --bs-dropdown-border-color: var(--border-color);

    --bs-dropdown-border-radius: var(--border-radius-small);
    --bs-dropdown-border-width: 0; /* was 1px - weggehaald om uiterlijk subtieler te maken */

    --bs-dropdown-inner-border-radius: calc(var(--bs-dropdown-border-radius) - var(--bs-dropdown-border-width));
    /*--bs-dropdown-divider-bg: var(--bs-border-color-translucent);*/
    --bs-dropdown-divider-bg: var(--border-color);
    --bs-dropdown-divider-margin-y: 0.5rem;
    --bs-dropdown-link-color: var(--grey-700);
    --bs-dropdown-link-hover-color: var(--grey-800);
    --bs-dropdown-link-hover-bg: #fff;
    --bs-dropdown-link-active-color: var(--grey-800);
    --bs-dropdown-link-active-bg: #fff;
    --bs-dropdown-link-disabled-color: var(--grey-400);
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-header-color: var(--grey-700);
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: 0 0 var(--bs-dropdown-border-radius) var(--bs-dropdown-border-radius);
    box-shadow: var(--shadow-md);
}
.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 0;
    margin-top: var(--bs-dropdown-spacer);
}

.dropdown-menu-start {
    --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
    right: auto;
    left: 0;
}

.dropdown-menu-end {
    --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
    right: 0;
    left: auto;
}

/* Pas aanzetten als we dit nodig hebben. */
/*
@media (min-width: 576px) {
    .dropdown-menu-sm-start {
        --bs-position: start;
    }
    .dropdown-menu-sm-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-sm-end {
        --bs-position: end;
    }
    .dropdown-menu-sm-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width: 768px) {
    .dropdown-menu-md-start {
        --bs-position: start;
    }
    .dropdown-menu-md-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-md-end {
        --bs-position: end;
    }
    .dropdown-menu-md-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width: 992px) {
    .dropdown-menu-lg-start {
        --bs-position: start;
    }
    .dropdown-menu-lg-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-lg-end {
        --bs-position: end;
    }
    .dropdown-menu-lg-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width: 1200px) {
    .dropdown-menu-xl-start {
        --bs-position: start;
    }
    .dropdown-menu-xl-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-xl-end {
        --bs-position: end;
    }
    .dropdown-menu-xl-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
@media (min-width: 1400px) {
    .dropdown-menu-xxl-start {
        --bs-position: start;
    }
    .dropdown-menu-xxl-start[data-bs-popper] {
        right: auto;
        left: 0;
    }
    .dropdown-menu-xxl-end {
        --bs-position: end;
    }
    .dropdown-menu-xxl-end[data-bs-popper] {
        right: 0;
        left: auto;
    }
}
*/

/* Pas aanzetten als we dit nodig hebben. */
/* DROPUP */
/*
.dropup .dropdown-menu[data-bs-popper] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--bs-dropdown-spacer);
}
.dropup .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0;
    border-right: 0.3em solid transparent;
    border-bottom: 0.3em solid;
    border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
    margin-left: 0;
}
*/

/* Pas aanzetten als we dit nodig hebben. */
/* DROPEND */ /*
.dropend .dropdown-menu[data-bs-popper] {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}
.dropend .dropdown-toggle:empty::after {
    margin-left: 0;
}
.dropend .dropdown-toggle::after {
    vertical-align: 0;
}
*/
/* Pas aanzetten als we dit nodig hebben. */
/* DROPSTART */ /*
.dropstart .dropdown-menu[data-bs-popper] {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: var(--bs-dropdown-spacer);
}
.dropstart .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
}
.dropstart .dropdown-toggle::after {
    display: none;
}
.dropstart .dropdown-toggle::before {
    display: inline-block;
    margin-right: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0.3em solid;
    border-bottom: 0.3em solid transparent;
}
.dropstart .dropdown-toggle:empty::after {
    margin-left: 0;
}
.dropstart .dropdown-toggle::before {
    vertical-align: 0;
}
*/

.dropdown-divider {
    height: 0;
    margin: var(--bs-dropdown-divider-margin-y) 0;
    overflow: hidden;
    border-top: 1px solid var(--bs-dropdown-divider-bg);
    opacity: 1;
}

.dropdown-item {
    display: block;
    box-sizing: border-box; /* fix */
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: var(--font-weight-normal);
    color: var(--bs-dropdown-link-color) !important; /* TODO: important vanwege .topmenu a color - dit fixen zonder important */
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
    text-decoration: underline;
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
    color: var(--bs-dropdown-link-disabled-color);
    pointer-events: none;
    background-color: transparent;
}

.dropdown-menu.show,
.dropdown-menu.is-open {
    display: block;
}

.dropdown-header {
    display: block;
    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--bs-dropdown-header-color);
    white-space: nowrap;
}

.dropdown-item-text {
    display: block;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    color: var(--bs-dropdown-link-color);
}

.dropdown-menu:has(.dropdown-menu.show) {
    padding: 0;
}

.dropdown-menu .dropdown-menu.show {
    box-shadow: none;
}

/* Pas aanzetten als we dark mode nodig hebben */
/*
.dropdown-menu-dark {
    --bs-dropdown-color: #dee2e6;
    --bs-dropdown-bg: #343a40;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-box-shadow: ;
    --bs-dropdown-link-color: #dee2e6;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-header-color: #adb5bd;
}
*/


/* LET OP: Deze styling is aangepast. Wij hebben er variabelen aan toegevoegd. Let hier op bij evt. updaten van Bootstrap versies */


/*:root {*/
/*    --input-padding-y: x;*/
/*    --input-padding-x: x;*/
/*    --input-padding:   var(--input-padding-y) var(--input-padding-x);*/

/*    --input-padding-lg-x: x;*/
/*    --input-padding-lg-y: x;*/
/*    --input-padding-lg:   var(--input-padding-lg-y) var(--input-padding-lg-x);*/

/*    --input-padding-sm-x: x;*/
/*    --input-padding-sm-y: x;*/
/*    --input-padding-sm:   var(--input-padding-sm-y) var(--input-padding-sm-x);*/
/*}*/




/* globaal */
.form-label {
    margin-bottom: 0.5rem;
}

/* Labels on the side of the input instead of above it */
.col-form-label {
    padding-top: calc(0.375rem + var(--input-border-width));
    padding-bottom: calc(0.375rem + var(--input-border-width));
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.col-form-label-lg {
    padding-top: calc(0.5rem + var(--input-border-width));
    padding-bottom: calc(0.5rem + var(--input-border-width));
    font-size: var(--text-size-lg);
}

.col-form-label-sm {
    padding-top: calc(0.25rem + var(--input-border-width));
    padding-bottom: calc(0.25rem + var(--input-border-width));
    font-size: var(--text-size-sm);
}

.form-text {
    margin-top: 0.25rem;
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
}

/* Oude classes */
.general_input_textarea,
.general_input_field,
/* Nieuwe class */
.form-control {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: var(--input-font-size, 1rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--input-text-color);
    background-color: var(--input-bg-color, #fff);
    background-clip: padding-box;
    border: var(--input-border-width) solid var(--input-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-control {
        transition: none;
    }
}
.form-control[type=file] {
    overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
}

/* Browsers doen met muis focus ook deze focus-visible styling */
.form-control:focus-visible {
    color: var(--input-text-color-focus);
    background-color: var(--input-bg-color-focus, #fff);
    border-color: var(--input-border-color-focus);
    /*outline: 0;*/
    outline: var(--input-outline-focus);
    /* een box-shadow bij focus is echt té Bootstrap */
    /*box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);*/
}
.form-control::-webkit-date-and-time-value {
    height: 1.5em;
}
.form-control::-moz-placeholder {
    color: var(--input-placeholder-text-color);
    opacity: 1;
}
.form-control::placeholder {
    color: var(--input-placeholder-text-color);
    opacity: 1;
}
.form-control:disabled {
    background-color: var(--grey-200);
    opacity: 1;
}

.form-control::-webkit-file-upload-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem -0.75rem;
    -webkit-margin-end: 0.75rem;
    margin-inline-end: 0.75rem;
    color: var(--grey-900);
    background-color: var(--grey-200);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--input-border-width);
    border-radius: 0;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control::file-selector-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem -0.75rem;
    -webkit-margin-end: 0.75rem;
    margin-inline-end: 0.75rem;
    color: var(--grey-900);
    background-color: var(--grey-200);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--input-border-width);
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-control::-webkit-file-upload-button {
        -webkit-transition: none;
        transition: none;
    }
    .form-control::file-selector-button {
        transition: none;
    }
}
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--grey-300);
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--grey-300);
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding: 0.375rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--grey-900);
    background-color: transparent;
    border: solid transparent;
    border-width: var(--input-border-width) 0;
}
.form-control-plaintext:focus-visible {
    outline: var(--input-outline-focus);
}
.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
    padding-right: 0;
    padding-left: 0;
}

.form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--input-sm-border-radius);
}
.form-control-sm::-webkit-file-upload-button {
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    -webkit-margin-end: 0.5rem;
    margin-inline-end: 0.5rem;
}
.form-control-sm::file-selector-button {
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    -webkit-margin-end: 0.5rem;
    margin-inline-end: 0.5rem;
}

.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: var(--input-lg-border-radius);
}
.form-control-lg::-webkit-file-upload-button {
    padding: 0.5rem 1rem;
    margin: -0.5rem -1rem;
    -webkit-margin-end: 1rem;
    margin-inline-end: 1rem;
}
.form-control-lg::file-selector-button {
    padding: 0.5rem 1rem;
    margin: -0.5rem -1rem;
    -webkit-margin-end: 1rem;
    margin-inline-end: 1rem;
}

textarea.general_input_textarea,
textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
}

textarea.form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
}

textarea.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
}


/* color picker input */
/*
.form-control-color {
    width: 3rem;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem;
}
.form-control-color:not(:disabled):not([readonly]) {
    cursor: pointer;
}
.form-control-color::-moz-color-swatch {
    border: 0 !important;
    border-radius: 0.375rem;
}
.form-control-color::-webkit-color-swatch {
    border-radius: 0.375rem;
}
.form-control-color.form-control-sm {
    height: calc(1.5em + 0.5rem + 2px);
}
.form-control-color.form-control-lg {
    height: calc(1.5em + 1rem + 2px);
}
*/

select,
.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: var(--input-font-size, 1rem);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--input-text-color);
    background-color: var(--input-bg-color, #fff);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
@media (prefers-reduced-motion: reduce) {
    .form-select {
        transition: none;
    }
}

.form-select:focus-visible {
    border-color: var(--input-border-color-focus);
    outline: var(--input-outline-focus);
    /*box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);*/
}
.form-select[multiple],
.form-select[size]:not([size="1"]) {
    padding-right: 0.75rem;
    background-image: none;
}
.form-select:disabled {
    background-color: var(--grey-200);
}
.form-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--grey-900);
}

.form-select-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--input-sm-border-radius);
}

.form-select-lg {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
    border-radius: var(--input-lg-border-radius);
}

:root {
    --input-checkbox-size: 1.125rem;
    --input-checkbox-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: var(--input-checkbox-size);
    margin-bottom: 0.125rem;
}
.form-check .form-check-input {
    float: left;
    margin-left: calc(-1 * var(--input-checkbox-size));
}

.form-check-reverse {
    padding-right: 1.5em;
    padding-left: 0;
    text-align: right;
}
.form-check-reverse .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}






.form-check-input:hover, .form-check-label:hover {
    cursor: pointer;
    color: var(--link-color-hover);
}

/*
not :checked   : bg-color: var(--grey-100); bg img: var(--input-checkbox-icon)
*/


.form-check-label a {
    text-decoration: underline;
    color: var(--link-color);
}
.form-check-label a:hover {
    color: var(--link-color-hover);
}

.form-check-label {
    padding-left: .75rem;
    user-select: none;
}

/* Hover styling voor de checkbox: vinkje op hover. Misschien andere kleur vinkje? */
.form-check:has(.form-check-input[type="checkbox"]:not(:checked):hover) .form-check-input[type="checkbox"],
.form-check:has(.form-check-label:hover) .form-check-input[type="checkbox"]:not(:checked) {
    background-color: var(--grey-100);
    background-image: var(--input-checkbox-icon);
}





/*TODO: var maken voor height etc.*/


.form-check-input {
    width: var(--input-checkbox-size);
    height: var(--input-checkbox-size);
    margin-top: .125rem;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /*border: 1px solid rgba(0, 0, 0, 0.25);*/
    border: 1.5px solid var(--input-border-color);
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
    border-radius: var(--border-radius-small);
}
.form-check-input[type=radio] {
    border-radius: 50%;
}
.form-check-input:active {
    filter: brightness(90%);
}



/* TODO: Box shadow kleur aanpassen */
.form-check-input:focus {
    border-color: var(--info-500);
    outline: 0;
    /*box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);*/
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--info-500) 25%, transparent);

}
.form-check-input:checked {
    background-color: var(--info-500);
    border-color: var(--info-500);
}

/* TODO: kijken of eigen iconen hiero kunnen */
.form-check-input:checked[type=checkbox] {
    background-image: var(--input-checkbox-icon);
}
.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--info-500);
    border-color: var(--info-500);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
    cursor: default;
    opacity: 0.5;
}

.form-switch {
    padding-left: 2.5em;
}
.form-switch .form-check-input {
    width: 2em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input {
        transition: none;
    }
}
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
    padding-right: 2.5em;
    padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
    margin-right: -2.5em;
    margin-left: 0;
}

.form-check-inline {
    display: inline-block;
    margin-right: 1rem;
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.btn-check[disabled] + .btn,
.btn-check:disabled + .btn {
    pointer-events: none;
    filter: none;
    opacity: 0.65;
}

.form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.form-range:focus {
    outline: 0;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem color-mix(in srgb, var(--info-500) 25%, transparent);
}
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem color-mix(in srgb, var(--info-500) 25%, transparent);
}
.form-range::-moz-focus-outer {
    border: 0;
}
.form-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}
@media (prefers-reduced-motion: reduce) {
    .form-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none;
    }
}
.form-range::-webkit-slider-thumb:active {
    background-color: #b6d4fe;
}
.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem;
}
.form-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -moz-appearance: none;
    appearance: none;
}
@media (prefers-reduced-motion: reduce) {
    .form-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none;
    }
}
.form-range::-moz-range-thumb:active {
    background-color: #b6d4fe;
}
.form-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem;
}
.form-range:disabled {
    pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
    background-color: #adb5bd;
}
.form-range:disabled::-moz-range-thumb {
    background-color: #adb5bd;
}

/* ###form-floating */
.form-floating {
    --form-floating-label-opacity: 0.75;
    position: relative;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}
.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-floating > label {
        transition: none;
    }
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    padding: 1rem 0.75rem;
}
.form-floating > .form-control::-moz-placeholder,
.form-floating > .form-control-plaintext::-moz-placeholder {
    color: transparent;
}
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
    color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown),
.form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control-plaintext:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    opacity: var(--form-floating-label-opacity);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
    opacity: var(--form-floating-label-opacity);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:-webkit-autofill ~ label {
    opacity: var(--form-floating-label-opacity);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control-plaintext ~ label {
    border-width: 1px 0;
}


/*TODO: info kleur, */


/* ###input-group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group :is(.form-control, .form-select):focus {
    outline-color: transparent;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
    z-index: 3;
}
.input-group .btn {
    position: relative;
    z-index: 2;
}
.input-group .btn:focus {
    z-index: 3;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: var(--input-font-size, 1rem);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--grey-900);
    text-align: center;
    white-space: nowrap;
    background-color: var(--grey-200);
    border: var(--input-border-width) solid #ced4da;
    border-radius: var(--input-border-radius);
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
    padding: 0.5rem 1rem;
    font-size: var(--text-size-md);
    border-radius: 0.5rem;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--input-sm-border-radius);
}

.input-group-lg > .form-select,
.input-group-sm > .form-select {
    padding-right: 3rem;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.form-floating):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(.form-control-visually-first),
.input-group > .form-floating:not(:first-child) > .form-control,
.input-group > .form-floating:not(:first-child) > .form-select {
    margin-left: calc(-1 * var(--input-border-width));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}



/* .btn-input-group heeft dezelfde styling als de input */
.btn-input-group {
    --bs-btn-color: var(--input-text-color);
    --bs-btn-bg: var(--input-bg-color, #fff);
    --bs-btn-border-color: var(--input-border-color);
    --bs-btn-hover-color: var(--input-text-color);
    --bs-btn-hover-border-color: var(--input-border-color);
    --bs-btn-active-color: var(--input-text-color);
    --bs-btn-active-border-color: var(--input-border-color);

    --bs-btn-hover-bg: var(--grey-100);
    --bs-btn-active-bg: var(--grey-100);

    border-width: var(--input-border-width);
}

.input-group:has(.form-control:focus) .btn-input-group {
    --bs-btn-color: var(--input-text-color-focus);
    --bs-btn-bg: var(--input-bg-color-focus, #fff);
    --bs-btn-border-color: var(--input-border-color-focus);
    --bs-btn-hover-color: var(--input-text-color-focus);
    --bs-btn-hover-border-color: var(--input-border-color-focus);
    --bs-btn-active-color: var(--input-text-color-focus);
    --bs-btn-active-border-color: var(--input-border-color-focus);
}

/* als een input group een .btn-input-group heeft, dan moet de form-control geen border-right-color hebben */
.input-group:has(.btn-input-group) .form-control {
    border-right: none;
}

.btn-input-group {
    border-left: none !important;
}



/* validation styling - mag extern - todo: aparte file van maken zodat deze evt. extern kan. De rest intern eventueel als dat nodig is */
/* TODO: kleuren wijzigen */
.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    /*color: #198754;*/
    color: var(--success-700);
}

/*.valid-tooltip {*/
/*    position: absolute;*/
/*    top: 100%;*/
/*    z-index: 5;*/
/*    display: none;*/
/*    max-width: 100%;*/
/*    padding: 0.25rem 0.5rem;*/
/*    margin-top: 0.1rem;*/
/*    font-size: 0.875rem;*/
/*    color: #fff;*/
/*    !*background-color: rgba(25, 135, 84, 0.9);*!*/
/*    background-color: var(--success-700);*/
/*    border-radius: 0.375rem;*/
/*}*/

.was-validated :valid ~ .valid-feedback,
/*.was-validated :valid ~ .valid-tooltip,*/
.is-valid ~ .valid-feedback
/*,.is-valid ~ .valid-tooltip*/
{
    display: block;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    /*border-color: #198754;*/
    border-color: var(--success-700);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    /*border-color: #198754;*/
    border-color: var(--success-700);
    /*box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);*/
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:valid,
.form-select.is-valid {
    /*border-color: #198754;*/
    border-color: var(--success-700);
}
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
    /*border-color: #198754;*/
    border-color: var(--success-700);
    /*box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);*/
}

.was-validated .form-control-color:valid,
.form-control-color.is-valid {
    width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:valid,
.form-check-input.is-valid {
    /*border-color: #198754;*/
    border-color: var(--success-700);
}
.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
    /*background-color: #198754;*/
    background-color: var(--success-700);
}
/*.was-validated .form-check-input:valid:focus,
.form-check-input.is-valid:focus {*/
/*    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);*/
/*}*/
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
    /*color: #198754;*/
    color: var(--success-700);
}

.form-check-inline .form-check-input ~ .valid-feedback {
    margin-left: 0.5em;
}

.was-validated .input-group .form-control:valid,
.input-group .form-control.is-valid,
.was-validated .input-group .form-select:valid,
.input-group .form-select.is-valid {
    z-index: 1;
}
.was-validated .input-group .form-control:valid:focus,
.input-group .form-control.is-valid:focus,
.was-validated .input-group .form-select:valid:focus,
.input-group .form-select.is-valid:focus {
    z-index: 3;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    /*color: #dc3545;*/
    color: var(--error-700);
}

/*.invalid-tooltip {*/
/*    position: absolute;*/
/*    top: 100%;*/
/*    z-index: 5;*/
/*    display: none;*/
/*    max-width: 100%;*/
/*    padding: 0.25rem 0.5rem;*/
/*    margin-top: 0.1rem;*/
/*    font-size: 0.875rem;*/
/*    color: #fff;*/
/*    !*background-color: rgba(220, 53, 69, 0.9);*!*/
/*    background-color: var(--error-700);*/
/*    border-radius: 0.375rem;*/
/*}*/

.was-validated :invalid ~ .invalid-feedback,
/*.was-validated :invalid ~ .invalid-tooltip,*/
.is-invalid ~ .invalid-feedback
/*,.is-invalid ~ .invalid-tooltip*/
{
    display: block;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--error-700);
    padding-right: calc(1.5em + 0.75rem);
    background-color: var(--error-50);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--error-700);
    /*box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);*/
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:invalid,
.form-select.is-invalid {
    border-color: var(--error-700);
}
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--error-700);
    /*box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);*/
}

.was-validated .form-control-color:invalid,
.form-control-color.is-invalid {
    width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
    border-color: var(--error-700);
}
.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
    background-color: var(--error-700);
}
/*.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {*/
/*    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);*/
/*}*/
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
    color: var(--error-700);
}

.form-check-inline .form-check-input ~ .invalid-feedback {
    margin-left: 0.5em;
}

.was-validated .input-group .form-control:invalid,
.input-group .form-control.is-invalid,
.was-validated .input-group .form-select:invalid,
.input-group .form-select.is-invalid {
    z-index: 2;
}
.was-validated .input-group .form-control:invalid:focus,
.input-group .form-control.is-invalid:focus,
.was-validated .input-group .form-select:invalid:focus,
.input-group .form-select.is-invalid:focus {
    z-index: 3;
}

body.using-keyboard :is(input, select, textarea):focus-visible {
    outline: auto !important;
}
.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    /*--bs-card-border-width: var(--card-border-width);*/
    --bs-card-border-color: var(--card-border-color);
    --bs-card-border-color-hover: var(--card-border-color-hover);
    --bs-card-border-radius: var(--card-border-radius);
    /*--bs-card-box-shadow: var(--card-shadow);*/
    --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
    /*--bs-card-cap-color: ;*/
    /*--bs-card-height: ;*/
    --bs-card-color: var(--body-text-color);
    --bs-card-bg: var(--card-background-color);
    --bs-card-img-overlay-padding: 1.25rem;
    --bs-card-group-margin: 0.75rem;
    --card-font-weight: var(--font-weight-bold);

    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--bs-card-box-shadow);

    transition-property: box-shadow, border-color;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);
}

/*.card:has(.stretched-link):hover,*/
/*.card:has(.stretched-link):focus {*/
/*    --bs-card-box-shadow: var(--card-shadow-hover);*/
/*}*/


/* Todo: alleen hover styling als card clickable is, nu heb je altijd hover, wat niet wenselijk is */
/*.card:hover,*/
/*.card:focus {*/
/*    border: var(--bs-card-border-width) solid var(--bs-card-border-color-hover);*/
/*}*/

.card > hr {
    margin-right: 0;
    margin-left: 0;
}

.card > .list-group {
    border-top: inherit;
    border-bottom: inherit;
}

.card > .list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card > .list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card > .card-header + .list-group,
.card > .list-group + .card-footer {
    border-top: 0;
}

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6,
.card-body .h1,
.card-body .h2,
.card-body .h3,
.card-body .h4,
.card-body .h5,
.card-body .h6 {
    color: var(--bs-card-color);
}

.card-title {
    font-weight: var(--card-font-weight);
}

/* Alleen de standaard margin van headings binnen .card-title resetten */
.card-title > :is(h1, h2, h3, h4, h5, h6, p) {
    margin-bottom: 0;
}

/* voorkomen dat het margin-bottom krijgt als het geen item na zich heeft. */
.card-title:not(:last-child) {
    margin-bottom: var(--bs-card-title-spacer-y);
}

.card-subtitle {
    margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link + .card-link {
    margin-left: var(--bs-card-spacer-x);
}

.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    /*color: var(--bs-card-cap-color);*/
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-footer {
    padding-block-end: var(--bs-card-spacer-y);
    padding-inline: var(--bs-card-spacer-x);
    /*color: var(--bs-card-cap-color);*/
    /*background-color: var(--bs-card-cap-bg);*/
    /*border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);*/
}

.card-footer:last-child {
    border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card-header-tabs {
    margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
    margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
    margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
    border-bottom: 0;
}

.card-header-tabs .nav-link.active {
    background-color: var(--bs-card-bg);
    border-bottom-color: var(--bs-card-bg);
}

.card-header-pills {
    margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
    margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    border-radius: var(--bs-card-inner-border-radius);
    box-sizing: border-box;
}

.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
}

.card-img,
.card-img-top {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card-group > .card {
    margin-bottom: var(--bs-card-group-margin);
}

@media (min-width: 576px) {
    .card-group {
        display: flex;
        flex-flow: row wrap;
    }

    .card-group > .card {
        flex: 1 0 0%;
        margin-bottom: 0;
    }

    .card-group > .card + .card {
        margin-left: 0;
        border-left: 0;
    }

    .card-group > .card:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .card-group > .card:not(:last-child) .card-img-top,
    .card-group > .card:not(:last-child) .card-header {
        border-top-right-radius: 0;
    }

    .card-group > .card:not(:last-child) .card-img-bottom,
    .card-group > .card:not(:last-child) .card-footer {
        border-bottom-right-radius: 0;
    }

    .card-group > .card:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .card-group > .card:not(:first-child) .card-img-top,
    .card-group > .card:not(:first-child) .card-header {
        border-top-left-radius: 0;
    }

    .card-group > .card:not(:first-child) .card-img-bottom,
    .card-group > .card:not(:first-child) .card-footer {
        border-bottom-left-radius: 0;
    }
}


/* Aangepaste spacers i.v.m. de ingebakken padding van het Paperform formulier. Wordt gebruikt in Back in Stock Add-on, en ook voor Maatwerk paperform oplossingen. */
.card.card-paperform-embed {
    padding-inline: calc(var(--bs-card-spacer-x) - 25px);
    padding-bottom: calc(var(--bs-card-spacer-y) - 32px);
}


/* card-lg & card-xl are custom */
.card-xl {
    --bs-card-box-shadow: var(--shadow-md);
}

@media (min-width: 576px) {
    .card-xl {
        --bs-card-spacer-y: 1.75rem;
        --bs-card-spacer-x: 2rem;
        --bs-card-box-shadow: var(--shadow-lg);
    }
}

@media (min-width: 768px) {
    .card-lg {
        --bs-card-spacer-y: 1.75rem;
        --bs-card-spacer-x: 2rem;
        --bs-card-box-shadow: var(--shadow-lg);
    }

    .card-xl {
        --bs-card-spacer-y: 2.5rem;
        --bs-card-spacer-x: 3rem;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen
*/


* {
    padding: 0;
    margin: 0;
}

*, a img {
    border: 0;
}

a, button {
    /*outline: 0;*/
    cursor: pointer;
}

button {
    font-family: unset;
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
}

dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

dt {
    font-weight: 700;
    display: inline-block;
}

dd {
    /*margin-bottom: 0.5rem;*/
    margin-left: 0;
    display: inline-block;
}

article, aside, code, details, figcaption, figure, footer, header, hgroup, menu, nav, pre, section {
    display: block;
}

a, a i[class^=icon-] {
    text-decoration: none;
}

button, div#menu_top ul.loggedin-box > li#logged-in-bar > span, div.ac_results li, div.accordion_heading, div.already_account h2, div.form_section h2.opc.already_account, div.form_section h2.opc.no_account, div.no_account h2, div.searchbox span.searchSubmit, div.table-section table.checkout_payment tr:hover, div.table-section table.checkout_payment_address tr:hover, div.table-section table.checkout_shipping tr:hover, div.table-section table.checkout_shipping_address tr:hover, div.table-section table.onTableRowClick tr, span.checkCoupon {
    cursor: pointer;
}

blockquote, q {
    quotes: none;
}

blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none;
}

.ui-slider-vertical .ui-slider-range-min, div.product-card-slide-image img.subimage1, div.products_gallery_row_imagecontainer img.subimage1, div.products_gallery_row_imagecontainer img.subimage2, div.products_gallery_row_imagecontainer img.subimage_normal {
    bottom: 0;
}

table.inhoud_address_book tr, table.newsletters tr {
    vertical-align: top;
}

div#inner_menu, div.box, div.box div.box_content, div.box div.box_stars, div.box_product_image, div.box_top, div.content_section, div.form_section, div.form_section h2 span, div.form_section h2.opc span, div.stap, div.table-section {
    position: relative;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen
*/

:root {
    --section-space-y-min: 1.25rem;
    --section-space-y-max: 2.5rem;

    /* deze clamp functie zorgt dat de spacer schaalt van kleine viewport naar grote viewport - TODO: netter maken, denk aan utopia.fyi generator */
    /* de unit van space is in rem, dus max container width ook uitgedrukt in rem. TODO: dit dynamisch maken afhankelijk van current max container width */
    /*--section-space-y: clamp(var(--section-space-y-min), calc( (var(--section-space-y-max) / 1rem) / 75 * 100vw), var(--section-space-y-max));*/ /* werkt niet want het moet unitless */
    --section-space-y: clamp(var(--section-space-y-min), calc(2.5 / 75 * 100vw), var(--section-space-y-max));
}

/* Spacing */
:root {
    --gutter: 1rem;
    --gutter-half: calc(var(--gutter) / 2);

    /* default spacing variables */
    --st-spacing-3xs: .125rem;
    --st-spacing-2xs: .25rem;
    --st-spacing-xs: .5rem;
    --st-spacing-sm: .75rem;
    --st-spacing-md: 1rem;
    --st-spacing-lg: 1.125rem;
    --st-spacing-xl: 1.25rem;
    --st-spacing-2xl: 1.5rem;
    --st-spacing-3xl: 1.75rem;
    --st-spacing-4xl: 2rem;

    /* em spacing variables */
    --st-spacing-3xs-em: .125em;
    --st-spacing-2xs-em: .25em;
    --st-spacing-xs-em: .5em;
    --st-spacing-sm-em: .75em;
    --st-spacing-md-em: 1em;
    --st-spacing-lg-em: 1.125em;
    --st-spacing-xl-em: 1.25em;
    --st-spacing-2xl-em: 1.5em;
    --st-spacing-3xl-em: 1.75em;
    --st-spacing-4xl-em: 2em;
}


:root {
/*
https://www.lockedownseo.com/social-media-colors/
*/

    --whatsapp-green: #25d366;
    --whatsapp-green-dark: #075e54;
    --color-whatsapp: var(--whatsapp-green);

    --facebook-blue: #1877F2;
    --facebook-blue-dark: #3B5998;
    --color-facebook: var(--facebook-blue);

    /*--instagram-gradient: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);*/
    --instagram-magenta: #D300C5;
    --instagram-pink: #FF0069;
    /*--instagram-magenta: #C32AA3;*/
    --color-instagram: var(--instagram-magenta);

    --twitter-blue: #1DA1F2;
    --twitter-black: #000;
    --color-twitter: var(--twitter-black);

    --color-pinterest: #bd081c;

    --color-linkedin-blue: #0a66c2;
    --color-linkedin-pink: #f0b6a8;
    --color-linkedin-white: #fff;
    --color-linkedin-black: #000;


    /* Nog niet in gebruik */
    /*--youtube-red: #FF0000;*/
    /*--youtube-grey: #282828;*/
    /*--color-youtube: var(--youtube-red);*/

    /*--google-blue: #4285F4;*/
    /*--google-red: #DB4437;*/
    /*--google-yellow: #F4B400;*/
    /*--google-green: #0F9D58;*/
    /*--color-google: var(--google-blue);*/

    /*--color-vimeo: #1ab7ea;*/

    /*--snapchat-yellow: #FFFC00;*/
    /*--snapchat-black: #000000;*/
    /*--color-snapchat: var(--color-snapchat-yellow);*/

    /*--color-dribbble: #ea4c89;*/

    /*--color-skype: #00AFF0;*/

    /*--color-yahoo: #430297;*/
}

/******************** Z-INDEX ********************/

/* z-index allemaal bij elkaar zodat je niet hoeft te gissen en maar gewoon 9999 overal invult. */
:root {
    /* Topmenu kan op position:fixed; komen te staan. Moet dus boven andere header onderdelen uitkomen. */
    --skip-link-z-index: 99999999;
    --topmenu-z-index: 9000;

    --header-z-index: 7770;
    --header-basket-z-index: 7780;

    --header-mobile-z-index: 9999;
    --mobile-menu-flyout-z-index: 10010;

    --site-nav-z-index: 7760;
    --dropdown-z-index: 9999;
    --mega-menu-dropdown-z-index: var(--dropdown-z-index);
    --autocomplete-z-index: 10000;
    --overlay-searchbar-z-index: calc(var(--autocomplete-z-index) - 1);

    --scroll-to-top-link-z-index: 2000;

    --quick-access-panel-z-index: 9998;

    --widget-newsletter-z-index: 10;
    --recaptcha-z-index: calc(var(--widget-newsletter-z-index) + 1);


    --cookie-bar-z-index: 16000003;

    --spaarpunten-bottom-button-z-index: 7760;
}

/* eigenlijk een variable */
:root  {
    --preferred-form-width: 65ch;
}

/******************** FILTER BLUR ********************/
:root {
    --blur-xs: blur(2px);
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);
    --blur-xl: blur(16px);
    --blur-2xl: blur(24px);
    --blur-3xl: blur(40px);
    --blur-4xl: blur(64px);
}
.blur-xs {filter: var(--blur-xs);}
.blur-sm {filter: var(--blur-sm);}
.blur-md {filter: var(--blur-md);}
.blur-lg {filter: var(--blur-lg);}
.blur-xl {filter: var(--blur-xl);}
.blur-2xl {filter: var(--blur-2xl);}
.blur-3xl {filter: var(--blur-3xl);}
.blur-4xl {filter: var(--blur-4xl);}

/******************** BACKDROP BLUR ********************/
:root {
    --backdrop-blur-xs: var(--blur-xs);
    --backdrop-blur-sm: var(--blur-sm);
    --backdrop-blur-md: var(--blur-md);
    --backdrop-blur-lg: var(--blur-lg);
    --backdrop-blur-xl: var(--blur-xl);
    --backdrop-blur-2xl: var(--blur-2xl);
    --backdrop-blur-3xl: var(--blur-3xl);
    --backdrop-blur-4xl: var(--blur-4xl);
}
.backdrop-blur-xs {backdrop-filter: var(--backdrop-blur-xs);}
.backdrop-blur-sm {backdrop-filter: var(--backdrop-blur-sm);}
.backdrop-blur-md {backdrop-filter: var(--backdrop-blur-md);}
.backdrop-blur-lg {backdrop-filter: var(--backdrop-blur-lg);}
.backdrop-blur-xl {backdrop-filter: var(--backdrop-blur-xl);}
.backdrop-blur-2xl {backdrop-filter: var(--backdrop-blur-2xl);}
.backdrop-blur-3xl {backdrop-filter: var(--backdrop-blur-3xl);}
.backdrop-blur-4xl {backdrop-filter: var(--backdrop-blur-4xl);}


/******************** FONT-WEIGHT ********************/
:root {
    --font-weight-thin:         100;
    --font-weight-extralight:   200;
    --font-weight-light:        300;
    --font-weight-normal:       400;
    --font-weight-regular:      var(--font-weight-normal);
    --font-weight-medium:       500;
    --font-weight-semibold:     600;
    --font-weight-bold:         700;
    --font-weight-extrabold:    800;
    --font-weight-black:        900;
}
.font-weight-thin {font-weight: var(--font-weight-thin);}
.font-weight-extralight {font-weight: var(--font-weight-extralight);}
.font-weight-light {font-weight: var(--font-weight-light);}
.font-weight-normal {font-weight: var(--font-weight-normal);}
.font-weight-medium {font-weight: var(--font-weight-medium);}
.font-weight-semibold {font-weight: var(--font-weight-semibold);}
.font-weight-bold {font-weight: var(--font-weight-bold);}
.font-weight-extrabold {font-weight: var(--font-weight-extrabold);}
.font-weight-black {font-weight: var(--font-weight-black);}


/******************** BOX-SHADOW ********************/
:root {
    --shadow-rgb: 0,0,0;

    --shadow-xs: 0 1px 2px 0 rgba(var(--shadow-rgb), 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(var(--shadow-rgb), 0.1), 0 1px 2px -1px rgba(var(--shadow-rgb), 0.1);
    --shadow-md: 0 4px 6px -1px rgba(var(--shadow-rgb), 0.1), 0 2px 4px -2px rgba(var(--shadow-rgb), 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(var(--shadow-rgb), 0.1), 0 4px 6px -4px rgba(var(--shadow-rgb), 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(var(--shadow-rgb), 0.1), 0 8px 10px -6px rgba(var(--shadow-rgb), 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(var(--shadow-rgb), 0.25);

    --shadow-xs-light: 0 1px 2px 0 rgba(var(--shadow-rgb), 0.025);
    --shadow-sm-light: 0 1px 3px 0 rgba(var(--shadow-rgb), 0.05), 0 1px 2px -1px rgba(var(--shadow-rgb), 0.05);
    --shadow-md-light: 0 4px 6px -1px rgba(var(--shadow-rgb), 0.05), 0 2px 4px -2px rgba(var(--shadow-rgb), 0.05);
    --shadow-lg-light: 0 10px 15px -3px rgba(var(--shadow-rgb), 0.05), 0 4px 6px -4px rgba(var(--shadow-rgb), 0.05);
    --shadow-xl-light: 0 20px 25px -5px rgba(var(--shadow-rgb), 0.05), 0 8px 10px -6px rgba(var(--shadow-rgb), 0.05);
    --shadow-2xl-light: 0 25px 50px -12px rgba(var(--shadow-rgb), 0.125);

    --shadow-backdrop: 0 0 0 100vh rgba(0,0,0,0.25);

    --shadow-inner-xs: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.05);
    --shadow-inner-sm: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.1);
    --shadow-inner-md: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.15);
    --shadow-inner-lg: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.20);
    --shadow-inner-xl: inset 0 2px 4px 0 rgba(var(--shadow-rgb), 0.3);
}

.shadow-xs {box-shadow: var(--shadow-xs);}
.shadow-sm {box-shadow: var(--shadow-sm);}
.shadow-md {box-shadow: var(--shadow-md);}
.shadow-lg {box-shadow: var(--shadow-lg);}
.shadow-xl {box-shadow: var(--shadow-xl);}
.shadow-2xl {box-shadow: var(--shadow-2xl);}

.shadow-xs-light {box-shadow: var(--shadow-xs-light);}
.shadow-sm-light {box-shadow: var(--shadow-sm-light);}
.shadow-md-light {box-shadow: var(--shadow-md-light);}
.shadow-lg-light {box-shadow: var(--shadow-lg-light);}
.shadow-xl-light {box-shadow: var(--shadow-xl-light);}
.shadow-2xl-light {box-shadow: var(--shadow-2xl-light);}

.shadow-inner-xs {box-shadow: var(--shadow-inner-xs);}
.shadow-inner-sm {box-shadow: var(--shadow-inner-sm);}
.shadow-inner-md {box-shadow: var(--shadow-inner-md);}
.shadow-inner-lg {box-shadow: var(--shadow-inner-lg);}
.shadow-inner-xl {box-shadow: var(--shadow-inner-xl);}
.shadow-none {box-shadow: none !important;}


/******************** FILTER SHADOW DROP-SHADOW ********************/
:root {
    --drop-shadow-xs: drop-shadow(0 1px 1px rgba(var(--shadow-rgb), 0.05));
    --drop-shadow-sm: drop-shadow(0 1px 2px rgba(var(--shadow-rgb), 0.1)) drop-shadow(0 1px 1px rgba(var(--shadow-rgb), 0.06));
    --drop-shadow-md: drop-shadow(0 4px 3px rgba(var(--shadow-rgb), 0.07)) drop-shadow(0 2px 2px rgba(var(--shadow-rgb), 0.06));
    --drop-shadow-lg: drop-shadow(0 10px 8px rgba(var(--shadow-rgb), 0.04)) drop-shadow(0 4px 3px rgba(var(--shadow-rgb), 0.1));
    --drop-shadow-xl: drop-shadow(0 20px 13px rgba(var(--shadow-rgb), 0.03)) drop-shadow(0 8px 5px rgba(var(--shadow-rgb), 0.08));
    --drop-shadow-2xl: drop-shadow(0 25px 25px rgba(var(--shadow-rgb), 0.15));

    --drop-shadow-xs-light: drop-shadow(0 1px 1px rgba(var(--shadow-rgb), 0.025));
    --drop-shadow-sm-light: drop-shadow(0 1px 2px rgba(var(--shadow-rgb), 0.05)) drop-shadow(0 1px 1px rgba(var(--shadow-rgb), 0.03));
    --drop-shadow-md-light: drop-shadow(0 4px 3px rgba(var(--shadow-rgb), 0.035)) drop-shadow(0 2px 2px rgba(var(--shadow-rgb), 0.03));
    --drop-shadow-lg-light: drop-shadow(0 10px 8px rgba(var(--shadow-rgb), 0.02)) drop-shadow(0 4px 3px rgba(var(--shadow-rgb), 0.05));
    --drop-shadow-xl-light: drop-shadow(0 20px 13px rgba(var(--shadow-rgb), 0.015)) drop-shadow(0 8px 5px rgba(var(--shadow-rgb), 0.04));
    --drop-shadow-2xl-light: drop-shadow(0 25px 25px rgba(var(--shadow-rgb), 0.075));
}
.drop-shadow-xs {filter: var(--drop-shadow-xs);}
.drop-shadow-sm {filter: var(--drop-shadow-sm);}
.drop-shadow-md {filter: var(--drop-shadow-md);}
.drop-shadow-lg {filter: var(--drop-shadow-lg);}
.drop-shadow-xl {filter: var(--drop-shadow-xl);}
.drop-shadow-2xl {filter: var(--drop-shadow-2xl);}

.drop-shadow-xs-light { filter: var(--drop-shadow-xs-light); }
.drop-shadow-sm-light { filter: var(--drop-shadow-sm-light); }
.drop-shadow-md-light { filter: var(--drop-shadow-md-light); }
.drop-shadow-lg-light { filter: var(--drop-shadow-lg-light); }
.drop-shadow-xl-light { filter: var(--drop-shadow-xl-light); }
.drop-shadow-2xl-light { filter: var(--drop-shadow-2xl-light); }

/******************** BORDER-RADIUS ********************/
:root {
    --border-radius-xs: .125rem; /* 2px */
    --border-radius-sm: .25rem;  /* 4px */
    --border-radius-md: .375rem; /* 6px */
    --border-radius-lg: .5rem;   /* 8px */
    --border-radius-xl: .75rem;  /* 12px */
    --border-radius-2xl: 1rem;   /* 16px */
    --border-radius-3xl: 1.5rem; /* 24px */
    --border-radius-4xl: 2rem;   /* 32px */
    --border-radius-5xl: 3rem;   /* 48px */
    --border-radius-6xl: 4rem;   /* 64px */
    --border-radius-pill: 1000px;
}
.border-radius-xs {border-radius: var(--border-radius-xs);}
.border-radius-sm {border-radius: var(--border-radius-sm);}
.border-radius-md {border-radius: var(--border-radius-md);}

.border-radius {border-radius: var(--border-radius);}

.border-radius-lg {border-radius: var(--border-radius-lg);}
.border-radius-xl {border-radius: var(--border-radius-xl);}
.border-radius-2xl {border-radius: var(--border-radius-2xl);}
.border-radius-3xl {border-radius: var(--border-radius-3xl);}
.border-radius-4xl {border-radius: var(--border-radius-4xl);}
.border-radius-5xl {border-radius: var(--border-radius-5xl);}
.border-radius-6xl {border-radius: var(--border-radius-6xl);}
.border-radius-pill {border-radius: var(--border-radius-pill);}


/******************** BORDER-COLORS ********************/
:root {
    --border-color-transparent: transparent;
    --border-color-transparent-dark: rgba(0,0,0,.05);
    --border-color-transparent-light: rgba(255,255,255,.05);

    --border-transparent-dark: 1px solid var(--border-color-transparent-dark);
    --border-transparent-light: 1px solid var(--border-color-transparent-light);
}


/*TODO: deze tiny, small, big en huge zijn classes van CKEditor 5. Het liefst zou ik dat CKEditor 5 ONZE classes er op zet. Kijken of dat kan.*/
.text-size-xs, .text-tiny  {font-size: var(--text-size-xs)!important;}
.text-size-sm, .text-small {font-size: var(--text-size-sm)!important;}
.text-size-md              {font-size: var(--text-size-md)!important;}
.text-size-lg, .text-big   {font-size: var(--text-size-lg)!important;}
.text-size-xl, .text-huge  {font-size: var(--text-size-xl)!important;}


/* Tailwind */
.object-contain {object-fit: contain !important;}
.object-cover {object-fit: cover !important;}
.object-fill {object-fit: fill !important;}
.object-none {object-fit: none !important;}
.object-scale-down {object-fit: scale-down !important;}

/* Bootstrap */
.text-start { text-align: left !important;}
.text-end { text-align: right !important;}
.text-center { text-align: center !important;}

.text-decoration-underline {
    text-decoration: underline !important;
}

.h-100 { height: 100% !important;}
.w-100 { width: 100% !important;}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}

.cursor-pointer {
    cursor: pointer;
}

/* als er vraag naar is: media query classes toevoegen voor deze utilities */
.section-my { margin-block: var(--section-space-y)!important;}
.section-mbs { margin-block-start: var(--section-space-y)!important;}
.section-mbe { margin-block-end: var(--section-space-y)!important;}
.section-py { padding-block: var(--section-space-y)!important;}
.section-pbs { padding-block-start: var(--section-space-y)!important;}
.section-pbe { padding-block-end: var(--section-space-y)!important;}

@media (min-width: 576px) {
    .section-my-sm { margin-block:    var(--section-space-y)!important;}
    .section-mbs-sm { margin-top:      var(--section-space-y)!important;}
    .section-mbe-sm { margin-bottom:   var(--section-space-y)!important;}
    .section-py-sm { padding-block:   var(--section-space-y)!important;}
    .section-pbs-sm { padding-top:     var(--section-space-y)!important;}
    .section-pbe-sm { padding-bottom:  var(--section-space-y)!important;}
}
@media (min-width: 768px) {
    .section-my-md { margin-block:    var(--section-space-y)!important;}
    .section-mbs-md { margin-top:      var(--section-space-y)!important;}
    .section-mbe-md { margin-bottom:   var(--section-space-y)!important;}
    .section-py-md { padding-block:   var(--section-space-y)!important;}
    .section-pbs-md { padding-top:     var(--section-space-y)!important;}
    .section-pbe-md { padding-bottom:  var(--section-space-y)!important;}
}
@media (min-width: 992px) {
    .section-my-lg { margin-block:    var(--section-space-y)!important;}
    .section-mbs-lg { margin-top:      var(--section-space-y)!important;}
    .section-mbe-lg { margin-bottom:   var(--section-space-y)!important;}
    .section-py-lg { padding-block:   var(--section-space-y)!important;}
    .section-pbs-lg { padding-top:     var(--section-space-y)!important;}
    .section-pbe-lg { padding-bottom:  var(--section-space-y)!important;}
}
@media (min-width: 1200px) {
    .section-my-xl { margin-block:    var(--section-space-y)!important;}
    .section-mbs-xl { margin-top:      var(--section-space-y)!important;}
    .section-mbe-xl { margin-bottom:   var(--section-space-y)!important;}
    .section-py-xl { padding-block:   var(--section-space-y)!important;}
    .section-pbs-xl { padding-top:     var(--section-space-y)!important;}
    .section-pbe-xl { padding-bottom:  var(--section-space-y)!important;}
}
@media (min-width: 1400px) {
    .section-my-xxl { margin-block:    var(--section-space-y)!important;}
    .section-mbs-xxl { margin-top:      var(--section-space-y)!important;}
    .section-mbe-xxl { margin-bottom:   var(--section-space-y)!important;}
    .section-py-xxl { padding-block:   var(--section-space-y)!important;}
    .section-pbs-xxl { padding-top:     var(--section-space-y)!important;}
    .section-pbe-xxl { padding-bottom:  var(--section-space-y)!important;}
}


/* vertical spacings die net zo groot zijn als een gutter-x */
.my-gutter { margin-block: var(--st-gutter-x)!important;}
.mbs-gutter { margin-block-start: var(--st-gutter-x)!important;}
.mbe-gutter { margin-block-end: var(--st-gutter-x)!important;}
.py-gutter { padding-block: var(--st-gutter-x)!important;}
.pbs-gutter { padding-block-start: var(--st-gutter-x)!important;}
.pbe-gutter { padding-block-end: var(--st-gutter-x)!important;}

/* border utilities */
.border {
    border: var(--border);
}

.border-top {
    border-top: var(--border);
}

.border-bottom {
    border-bottom: var(--border);
}

.border-block {
    border-top: var(--border);
    border-bottom: var(--border);
}

.border-left {
    border-left: var(--border);
}

.border-right {
    border-right: var(--border);
}

.border-inline {
    border-left: var(--border);
    border-right: var(--border);
}

/******************** CARD-COLORS ********************/
.card.card-main-light {
    --bs-card-bg: var(--main-100);
    --bs-card-color: var(--main-900);
}

.card.card-main-dark {
    --bs-card-bg: var(--main-800);
    --bs-card-color: var(--main-50);
}

.card.card-supporting-light {
    --bs-card-bg: var(--supporting-100);
    --bs-card-color: var(--supporting-900);
}

.card.card-supporting-dark {
    --bs-card-bg: var(--supporting-800);
    --bs-card-color: var(--supporting-50);
}

.card.card-accent-light {
    --bs-card-bg: var(--accent-100);
    --bs-card-color: var(--accent-900);
}

.card.card-accent-dark {
    --bs-card-bg: var(--accent-800);
    --bs-card-color: var(--accent-50);
}

.card.card-info-light {
    --bs-card-bg: var(--info-100);
    --bs-card-color: var(--info-900);
}

.card.card-info-dark {
    --bs-card-bg: var(--info-800);
    --bs-card-color: var(--info-50);
}

.card.card-success-light {
    --bs-card-bg: var(--success-100);
    --bs-card-color: var(--success-900);
}

.card.card-success-dark {
    --bs-card-bg: var(--success-800);
    --bs-card-color: var(--success-50);
}

.card.card-light {
    --bs-card-bg: var(--grey-50);
    --bs-card-color: var(--grey-900);
}

.card.card-dark {
    --bs-card-bg: var(--grey-900);
    --bs-card-color: var(--grey-50);
}

.card.card-panel {
    --bs-card-bg: var(--grey-100);
    --bs-card-color: var(--grey-900);
    box-shadow: none !important;
    border: 0 !important;
}

/* dit is om de card uit te laten lijnen met andere kaarten. */
/*.card.card-invisible {*/
/*    --bs-card-bg: transparent;*/
/*    --bs-card-color: inherit;*/
/*    box-shadow: none !important;*/
/*    border: 0 !important;*/
/*}*/


.card.card-dark .form-control {
    background-color: var(--grey-900);
    border-color: var(--grey-700);
    color: var(--grey-50);
}

/******************** DISPLAY ********************/
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ###################################################################################### */
/* ###################################################################################### */

/* DEPRECATED - Hieronder is oud. Niet meer gebruiken. Waar het nog gebruikt wordt vervangen indien mogelijk */

/* ###################################################################################### */
/* ###################################################################################### */

/* todo: kijken of deze nog moeten blijven of niet EDIT: Weg er mee! Wegsmijten bij nieuwe .tpl's!*/
.no-border-top {
    border-top: 0;
}

.box-shadow, .hover-box-shadow:hover {
    box-shadow: 0 1px 6px 0 #CCC;
}

.box-corner-radius-5x {
    border-radius: .25rem;
}

.box-corner-radius-10x {
    border-radius: .5rem;
}

.box-corner-radius-15x {
    border-radius: 1.25rem;
}

.box-corner-radius-5x-top {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.box-corner-radius-10x-top {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.box-corner-radius-15x-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.box-corner-radius-20x-top {
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

.box-positioning-absolute {
    position: absolute;
}

.box-textalign-right {
    text-align: right;
}

.box-textalign-left {
    text-align: left;
}

.box-textalign-center {
    text-align: center;
}

.display-none {
    display: none !important;
}

.display-flex {
    display: flex;
}

span.required {
    margin: 0 .25rem;
    color: var(--error-700);
}

div.no-padding {
    padding: 0;
}

div.no-border {
    border: 0;
}

div.corner {
    border-radius: .25rem;
}

div.halfwidth {
    position: relative;
    width: 49%;
}

div.left {
    float: left;
}

div.right {
    float: right;
}

div.top {
    margin-top: .5rem;
}

div.last {
/*    float: right;*/
    margin-right: 0;
}

.break_rule {
    width: 100%;
}

/* Bij oude spaarpunten popup als ingelogd */
.box-padding-10x {
    padding: .5rem;
}

:root {
    --fx-duration: .2s;
    --fx-timing-function: ease-in-out;

    --fx-scale: 1;
    --fx-scale-hover: 1.0375;

    --fx-darken: brightness(1);
    --fx-darken-hover: brightness(0.85);

    --fx-brighten: brightness(1);
    --fx-brighten-hover: brightness(1.1);

    --fx-opacity: opacity(1);
    --fx-opacity-hover: opacity(0.75);

    /*
    --fx-vivid: saturate(1) brightness(1);
    --fx-vivid-hover: saturate(1.1) brightness(1.05);
     */

    --fx-greyscale: grayscale(0);
    --fx-greyscale-hover: grayscale(100%);

    --fx-colorize: grayscale(100%);
    --fx-colorize-hover: grayscale(0);
}

.img-fx {
    height: auto;
    overflow: hidden!important;
}

.img-fx img {
    transition-property: transform, filter;
    transition-duration: var(--fx-duration), var(--fx-duration);
    transition-timing-function: var(--fx-timing-function), var(--fx-timing-function);
    transform-origin: center center;
}

/* De hover media query zorgt er voor dat hover niet triggert als je op mobiel eroverheen swipet, maar alleen bij een tap. En natuurlijk muis-cursor-hover. */
@media (hover: hover) {
    /* ZOOM */
    .img-fx-scale img {transform: scale(var(--fx-scale));}
    .img-fx-scale:hover img {transform: scale(var(--fx-scale-hover));}

    /* DARKEN */
    .img-fx-darken img {filter: var(--fx-darken);}
    .img-fx-darken:hover img {filter: var(--fx-darken-hover);}

    /* BRIGHTEN */
    .img-fx-brighten img {filter: var(--fx-brighten);}
    .img-fx-brighten:hover img {filter: var(--fx-brighten-hover);}

    /* Greyscale */
    .img-fx-greyscale img {filter: var(--fx-greyscale);}
    .img-fx-greyscale:hover img {filter: var(--fx-greyscale-hover);}

    /* COLORIZE */
    .img-fx-colorize img {filter: var(--fx-colorize);}
    .img-fx-colorize:hover img {filter: var(--fx-colorize-hover);}

    /* Opacity */
    .img-fx-opacity img {filter: var(--fx-opacity);}
    .img-fx-opacity:hover img {filter: var(--fx-opacity-hover);}

    /* VIVIDNESS */
    /*
    .img-fx-vivid img {filter: var(--fx-vivid);}
    .img-fx-vivid:hover img {filter: var(--fx-vivid-hover);}
    */
}

/* Geen effect als gebruiker heeft ingesteld dat hij verminderde beweging wilt. */
@media (prefers-reduced-motion: reduce) {
    .img-fx img {
        transition: none;
        filter: none;
        transform: none;
    }

    .img-fx:hover img {
        filter: none !important;
        transform: none;
    }
}
/* ==========================================================================
   Scroll-reveal — entrance-animatie voor de PageBuilder
   --------------------------------------------------------------------------
   Blokken op de homepage (en standalone PageBuilder-pagina's) faden + schuiven
   omhoog zodra hun rij in beeld scrollt.

   - Per shop in te stellen via SCROLL_ANIMATIONS (Website uiterlijk ->
     HomepageBuilder -> Animaties). Waarde 'false' = geen animatie: dan wordt dit
     bestand niet eens in de CSS-bundel opgenomen (CssBuilder.yml, include_when) en
     laadt fx-reveal.js niet. Elke andere waarde is een animatiesoort en komt als
 body-class binnen: 'fade-up' -> body.fx-scroll-fade-up.
   - Een tweede animatiesoort toevoegen = 1 optie in Appearance.php + 1 variant-regel
     hieronder. De gedeelde basis (verbergen, timing, stagger) hoeft niet mee.
   - Alleen opacity + transform: nul CLS (nooit geometrie animeren).
   - Elke rij doet mee, boxed én full-width: één beweging voor de hele pagina.
   - Uitgezonderd zijn alleen widgets met eigen motion/render (SlideShow,
     VideoBanner, GoogleMaps, CodeEditor, CategorySearch) — zie homepagebuilder.tpl.
   - Startstate staat achter html.fx-js: zonder JS blijft alles zichtbaar.
   - Volledig uit bij prefers-reduced-motion (startstate zit in no-preference).
   - Keyboard-navigatie (body.using-keyboard, gezet op de eerste Tab): alles direct
     zichtbaar, geen animatie — tabben springt sneller dan de reveal/scroll bijhoudt.
   - Alleen desktop (min-width: 768px): op mobiel uitgeschakeld. JS draait daar nog wel maar is een no-op.
   - Trigger: fx-reveal.js zet .fx-revealed op de rij (.widget-section) zodra die
     in beeld komt. De eerste rij krijgt .fx-revealed direct (hero animeert niet).
   ========================================================================== */
:root {
    --fx-reveal-distance: 22px;             /* slide-up afstand */
    --fx-reveal-duration: .7s;
    --fx-reveal-easing: ease;
    --fx-reveal-stagger: 120ms;             /* delay per blok binnen een rij */
    --fx-reveal-stagger-max: 4;             /* cap: hoogstens 4 blokken staggeren */
    /* --fx-reveal-index wordt per blok inline gezet (kolomvolgorde binnen de rij). */
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    /* --- Gedeelde basis: geldt voor elke animatiesoort ---------------------
       Verborgen startstate, alleen met JS (html.fx-js).
       Startopacity .01, niet 0: een element met opacity:0 telt in Chrome niet mee
       als LCP-kandidaat en zou de LCP-meting vertragen. .01 is voor het oog niet van
       0 te onderscheiden, maar houdt elk blok LCP-eligible. Extra vangnet daarbovenop:
       de eerste rij wordt sowieso nooit verborgen (fx-reveal.js). */
    .fx-js .fx-scroll .fx-reveal {
        opacity: .01;
        transition: opacity var(--fx-reveal-duration) var(--fx-reveal-easing),
                    transform var(--fx-reveal-duration) var(--fx-reveal-easing);
        transition-delay: calc(
            min(var(--fx-reveal-index, 0), var(--fx-reveal-stagger-max)) * var(--fx-reveal-stagger)
        );
    }

    /* --- Varianten: één regel per animatiesoort ---------------------------- */

    /* 'Zacht omhoog' (SCROLL_ANIMATIONS = fade-up): fade + slide vanaf onderen. */
    .fx-js .fx-scroll-fade-up .fx-reveal {
        transform: translateY(var(--fx-reveal-distance));
    }

    /* Onthuld: rij is in beeld gekomen. Geldt voor elke variant. */
    .fx-scroll .widget-section.fx-revealed .fx-reveal {
        opacity: 1;
        transform: none;
    }

    /* Keyboard-navigatie: tabben springt sneller dan de reveal/scroll bijhoudt, dus de
       animatie werkt averechts. body.using-keyboard (jqueryGeneral.js, gezet op de eerste
       Tab) => elk blok direct zichtbaar, zonder transitie. keydown('Tab') vuurt vóór de
       focus verspringt, dus het doelblok staat al zichtbaar wanneer de focus erop landt. */
    .fx-js .fx-scroll.using-keyboard .fx-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Print: nooit verborgen content op papier/PDF (IO vuurt niet zonder scroll). */
@media print {
    .fx-scroll .fx-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen (?)
*/

:root {
    --selection-bg-color: var(--main-500);
    --selection-text-color: var(--main-50);

    --scroll-margin-top-min: 1rem;
    --scroll-margin-top-preferred: 3vw;
    --scroll-margin-top-max: 2rem;
    --scroll-margin-top-fluid: clamp(var(--scroll-margin-top-min), var(--scroll-margin-top-preferred), var(--scroll-margin-top-max));
    --scroll-margin-top: calc(var(--all-sticky-headers-height, 0px) + var(--scroll-margin-top-fluid)); /* de fallback moet met px unit */
}


/* In dynamic4000.css.tpl staat een toevoeging met scroll-margin-top als mobile header sticky is */
[id],
:focus {
    scroll-margin-top: var(--scroll-margin-top, 1rem);
}

/*:focus {*/
/*    outline-offset: 2px;*/
/*    outline-offset: 4px;*/
/*}*/

/* Dit moet in aparte selectors, anders werkt het niet. */
::-moz-selection { /* Code for Firefox */
    color: var(--selection-text-color);
    background: var(--selection-bg-color);
}
::selection {
    color: var(--selection-text-color);
    background: var(--selection-bg-color);
}


@media screen and (min-width: 767px) and (max-width: 991px) {
    iframe {
        max-width: 962px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    iframe {
        max-width: 1200px;
    }
}


/*LET OP: position:sticky; (wordt gebruikt voor de sticky headers)  werkt alleen als een parent div GEEN overflow-x: HIDDEN; heeft.*/
/* Daarom is body ingesteld op overflow-x: CLIP; met !important om te voorkomen dat JS libraries (zoals tooltipster v3) dit overschrijven met overflow-x: hidden */
html,
body {
    overflow-x: clip !important;
}


@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

.skip-link,
.skip-region-link,
.skip-link-group {
    display: none;
}

.skip-link-group {
    margin-block-end: var(--st-spacing-md);
}

.using-keyboard .skip-link,
.using-keyboard .skip-region-link,
.using-keyboard .skip-link-group {
    display: block;
}

.skip-link_btn {
    position: fixed;
    transform: translateY(-120%);
    left: .5rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    top: 0;
    z-index: var(--skip-link-z-index);
}

@media (prefers-reduced-motion: no-preference) {
    .skip-link_btn {
        transition: transform 325ms ease-in;
    }
}

.skip-link_btn:focus {
    transform: translateY(0);
}

.visually-hidden-focusable {
    display: none;
}

.visually-hidden-focusable:focus {
    display: block;
}

.page_placeholder_layover,
#wishlist_popup,
#mobile_menu_container,
#quickview_overlay,
#quickview_holder,
.floating_basket_wrapper
/*,*/
/*.mobile_menu_search_bar */
{
    display: none;
}

.clear {
    clear: both;
}

body {
    background-color: var(--webshop-background-color);
    color: var(--body-text-color);
}

.st-usp-bar a,
.st-usp-list a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--link-color-hover);
}

.wrapper.header_bottom .bottom-menu-usps,
.st-usp-bar {
    display: flex;
}

.st-usp-bar * {
    font-size: var(--text-size-sm);
}

.wrapper.header_bottom .bottom-menu-usps ul,
.st-usp-bar ul,
.st-usp-bar,
.st-usp-list,
.st-custom-list {
    display: flex;
    width: 100%;
    list-style: none !important;
    margin-inline-start: 0 !important;
}

.st-usp-list,
.st-custom-list {
    flex-direction: column;
}

.wrapper.header_bottom .bottom-menu-usps ul > li,
.st-usp-bar ul > li,
.st-usp-list > li,
.st-custom-list > li {
    position: relative;
}

.wrapper.header_bottom .bottom-menu-usps ul > li,
.st-usp-bar ul > li,
.st-usp-bar > li {
    margin-block: .75rem;
    margin-inline: .5rem 1rem;
}

.st-usp-bar ul > li {
    display: inline-flex;
}

.st-usp-list > li,
.st-custom-list > li {
    display: flex;
}

.st-usp-list > li {
    margin-block: .5rem;
}

ol {
    margin-inline-start: 1rem;
}

:root {
    --usp-icon-color: var(--success-500)
}

/* Zet deze op de .usp-bar div. Zo kan je in het topmenu met één class dynamisch icon zelfde als tekstkleur maken. Voor als groene kleur niet wenselijk is. */
.usp-icon-color--current-color {
    --usp-icon-color: currentColor !important;
}

.wrapper.header_bottom .bottom-menu-usps ul > li:before,
.st-usp-bar ul > li:before,
.st-usp-bar > li:before,
.st-usp-list > li:before {
    --st-icon-size: var(--text-size-xl);
    content: '';
    margin-inline-end: var(--st-spacing-xs);
    -webkit-mask-image: var(--usp-check-icon);
    mask-image: var(--usp-check-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--usp-icon-color);
    min-width: 1em;
    min-height: 1em;
    height: var(--st-icon-size);
    display: inline-block;
    vertical-align: text-bottom;
}

a {
    color: var(--link-color);
}

a:hover, a:focus {
    color: var(--link-color-hover);
}

blockquote {
    font-weight: 500;
    font-style: italic;
    font-size: var(--text-size-lg);
    --text-line-height: 2;
    border-left: .25rem solid var(--grey-300);
    quotes: "\201C""\201D""\2018""\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em
}

blockquote p:first-of-type:before {
    content: open-quote;
}

blockquote p:last-of-type:after {
    content: close-quote;
}

hr {
    border: var(--border-width) solid var(--border-color);
    margin-top: 3em;
    margin-bottom: 3em
}

code,
pre {
    white-space: pre;
    background-color: #ededed;
    border-bottom: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
    width: 100%;
    margin: .25rem 0;
    padding: .25rem;
    line-height: 125%;
    overflow: hidden;
}

#pages ol li,
#pages ul:not(.dropdown-menu) li {
    margin-left: 1rem;
}

span.content-header {
    display: block;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

#content ul {
    margin-left: 1rem;
}

.changetable img {
    max-width: 100%;
    vertical-align: top;
}

.contentBlockContainer {
    position: relative;
}

.contentBlock {
    position: relative;
}

.contentBlock img {
    vertical-align: top;
}

.contentBlock.topBlock {
    margin-bottom: var(--gutter);
}

.contentBlock_left {
    position: relative;
    float: left;
    width: calc(50% - .25rem);
}

.contentBlock_right {
    position: relative;
    float: right;
    width: calc(50% - .25rem);
}

.contentBlock.double_height, .contentBlock.half_height {
    width: 100%;
}

/* kaders kopje */
table thead,.opc_melding,
a.ui-spinner-button .ui-button-text {
    background-color: var(--webshop-background-color);
}

/*kaders*/
hr.grafeer_spacer{
    background-color: var(--border-color);
}

.form_section, table.checkout_shipping, table.checkout_payment, .box-border, .cart-notification{
    border-color: var(--border-color);
}

.form_section a:not(.configuration_button_general, .btn){
    color: var(--body-text-color);
}

.clearfix:after,
.menu_top:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*todo: uitzoeken waar de styles die hieronder staan moeten komen*/
.minimalistBlack {
    border: 0 solid #ddd;
    border-collapse: collapse;
    margin-top: .25rem;
    text-align: left;
    width: 78%;
}

.ac_results {
    width: 155px !important;
    background: #fff;
    box-shadow: 0 2px 4px 1px #CCC;
    z-index: 100;
    color: #000;
}

.ac_results li {
    display: block;
    list-style: none;
    padding: 3px 0 3px 10px;
    margin: 0;
}

.ac_results li:hover {
    background-color: #f0f0f0;
}

.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw div, .gm-style .gm-style-iw label, .gm-style .gm-style-iw span {
    color: #000;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen
*/

@media only screen and (max-width: 768px) {
    :root {
        --h1-font-size: var(--h1-font-size-mobile) !important;
        --h2-font-size: var(--h2-font-size-mobile) !important;
        --h3-font-size: var(--h3-font-size-mobile) !important;
        --h4-font-size: var(--h4-font-size-mobile) !important;
        --h5-font-size: var(--h5-font-size-mobile) !important;
        --h6-font-size: var(--h6-font-size-mobile) !important;

        --display-1-font-size: var(--display-1-font-size-mobile) !important;
        --display-2-font-size: var(--display-2-font-size-mobile) !important;
        --display-3-font-size: var(--display-3-font-size-mobile) !important;
        --display-4-font-size: var(--display-4-font-size-mobile) !important;
        --display-5-font-size: var(--display-5-font-size-mobile) !important;
        --display-6-font-size: var(--display-6-font-size-mobile) !important;
    }
}

:root {
    --text-color-muted: var(--grey-600);
    --body-text-size: var(--text-size-md);
    --text-line-height: 1.5;

    --heading-font-weight: var(--font-weight-bold);
    --heading-line-height: 1.2;
    --heading-letter-spacing: 0;

    --display-heading-font-weight: var(--font-weight-bold);
    --display-heading-line-height: 1.2;
    --display-heading-letter-spacing: 0;

    --max-width-text: 40em;
}
.max-width-text {max-width: var(--max-width-text);}
.text-muted { color: var(--text-color-muted);}

.lead {
    font-size: var(--text-size-lg);
}

.body-font-family {
    font-family: var(--body-font-stack) !important;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    color: var(--display-color) !important;
    font-family: var(--display-font-stack) !important;
    font-weight: var(--display-heading-font-weight) !important;
    line-height: var(--display-heading-line-height) !important;
    letter-spacing: var(--display-heading-letter-spacing) !important;
}

.display-1 {font-size: var(--display-1-font-size) !important;}
.display-2 {font-size: var(--display-2-font-size) !important;}
.display-3 {font-size: var(--display-3-font-size) !important;}
.display-4 {font-size: var(--display-4-font-size) !important;}
.display-5 {font-size: var(--display-5-font-size) !important;}
.display-6 {font-size: var(--display-6-font-size) !important;}

/* BODY TEXT */
body, p, a, span.text {
    font-family: var(--body-font-stack);
    font-size: var(--body-text-size);
    line-height: var(--text-line-height);
}

/* als een semantische header normale body styling moet krijgen */
.heading-body {
    font-family: var(--body-font-stack);
    font-size: inherit;
    font-weight: inherit;
    line-height: var(--text-line-height);
    color: var(--body-text-color);
    letter-spacing: inherit;
}

/* HEADINGS */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
.content-header {
    color: var(--heading-color);
    font-family: var(--heading-font-stack);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
}

.h1,h1 {
    font-size: var(--h1-font-size);
}

.h2, h2,
.content-header,
.aanbevolen_artikelen_title.content-header,
.alternatieve_artikelen_title.content-header {
    font-size: var(--h2-font-size);
}

.h3,h3 {
    font-size: var(--h3-font-size);
}

.h4,h4 {
    font-size: var(--h4-font-size);
}

.h5,h5 {
    font-size: var(--h5-font-size);
}

.h6,h6 {
    font-size: var(--h6-font-size);
}

h1 {
    margin-bottom: var(--st-spacing-xs);
}

.content-header,
#leeftijdcontrole h2,
h2,
.box_product_name h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
    margin-bottom: var(--st-spacing-sm);
}

/* Sidebar en Footer headings */
#filterContainer div.filter-header,
.box_top p {
    font-size: var(--box-heading-font-size);
}

.box ul li a.active_cat_bold,
span.required {
    font-weight: var(--font-weight-bold);
}

.productinfo_attribute .optie_select_strong,
.box .box_content p,
.user_input p,
.productinfo_description p,
.productinfo_short_description p,
#content .bottom_mainpage p,
#content .top_mainpage p {
    margin-bottom: var(--st-spacing-xs);
}

.box .box_content p:last-child,
.user_input p:last-child,
.productinfo_description p:last-child,
.productinfo_short_description p:last-child,
#content .bottom_mainpage p:last-child,
#content .top_mainpage p:last-child {
    margin-bottom: 0;
}
/*------ CKEditor ------*/
/*------ Image Alignment ------*/
/* block */
.content_section figure.image,
.changetable figure.image,
.widget-texteditor__content figure.image,
.box_content figure.image,
.tep-section-content figure.image {
    margin-inline: auto;
    width: -moz-fit-content;
    width: fit-content;
}

/* inline left */
.content_section .image-style-align-left,
.changetable .image-style-align-left,
.widget-texteditor__content .image-style-align-left,
.box_content .image-style-align-left,
.tep-section-content .image-style-align-left {
    float: left;
    margin-inline-end: 1.5em !important;
}

/* inline right */
.content_section .image-style-align-right,
.changetable .image-style-align-right,
.widget-texteditor__content .image-style-align-right,
.tep-section-content .image-style-align-right,
.box_content .image-style-align-right {
    float: right;
    margin-inline-start: 1.5em !important;
}

/* block left */
.content_section .image-style-block-align-left,
.changetable .image-style-block-align-left,
.widget-texteditor__content .image-style-block-align-left,
.box_content .image-style-block-align-left,
.tep-section-content .image-style-block-align-left {
    display: block;
    margin-inline-start: 0 !important;
}

/* block right */
.content_section .image-style-block-align-right,
.changetable .image-style-block-align-right,
.widget-texteditor__content .image-style-block-align-right,
.box_content .image-style-block-align-right,
.tep-section-content .image-style-block-align-right {
    display: block;
    margin-inline-end: 0 !important;
}

/*------ PLAT-9066: TipTap emits alignment classes directly on <img> (no <figure> ------
   wrapper, because Image is inline and a block <figure> breaks ProseMirror's schema).
   The existing rules above target classes regardless of element, so float left/right
   already works on <img>. We add a few extra rules to cover what the figure.image
   base rule provided for block-aligned and centered cases. ------*/

/* centered (img-direct) */
.content_section img.image-style-align-center,
.changetable img.image-style-align-center,
.widget-texteditor__content img.image-style-align-center,
.box_content img.image-style-align-center,
.tep-section-content img.image-style-align-center {
    display: block;
    margin-inline: auto;
}

/* block-aligned img — push to the opposite-side gutter with margin-inline auto */
.content_section img.image-style-block-align-left,
.changetable img.image-style-block-align-left,
.widget-texteditor__content img.image-style-block-align-left,
.box_content img.image-style-block-align-left,
.tep-section-content img.image-style-block-align-left {
    margin-inline-end: auto !important;
}
.content_section img.image-style-block-align-right,
.changetable img.image-style-block-align-right,
.widget-texteditor__content img.image-style-block-align-right,
.box_content img.image-style-block-align-right,
.tep-section-content img.image-style-block-align-right {
    margin-inline-start: auto !important;
}
/*
Met de .prose class kan je eenvoudig vanilla HTML stylen zonder op elk HTML element een class te plaatsen.
Plaats de .prose class in een parent element.


Als je ergens een stukje content wilt tonen zonder de prose styling, gebruik dan .not-prose.
VOORBEELD:
<div class="prose">
    [content gestyled met prose]
    <div class="not-prose">
        [geen prose]
    </div>
</div>


UITLEG van de selectors
elk strong element die binnen een .prose zit, behalve als er een .not-prose omheen zit.
.prose :where(strong):not(:where([class~=not-prose] *)) {...}
*/


/* settings */
/* hr & blockquote styling zijn als standaard toegevoegd in _global.css */
.prose {
    --st-prose-link-text-decoration: underline;
    --st-prose-marker-color: var(--grey-400);
    /*--st-prose-hr-color: var(--border-color);*/
    --st-prose-figcaption-color: var(--text-color-muted);
    --st-prose-figcaption-font-size: var(--text-size-sm);
    /*--st-prose-blockquote-font-size: var(--text-size-lg);*/
    /*--st-prose-blockquote-border-color: var(--grey-300);*/
}

.prose {
    --text-line-height: 1.75;
}

.prose :where(strong):not(:where([class~=not-prose] *)) {
    font-weight: 700
}

.prose :where(ol):not(:where([class~=not-prose] *)) {
    list-style-type: decimal;
    padding-left: 1.625em
}


/*
Deze styling is om lijstjes met bijvoorbeeld Romeinse tekens aan te geven.
Niet nodig voor nu dus niet loze code inladen.
Ondertussen staat het hier niet in de weg. */

/*
.prose :where(ol[type=A]):not(:where([class~=not-prose] *)) {
    list-style-type: upper-alpha
}

.prose :where(ol[type=a]):not(:where([class~=not-prose] *)) {
    list-style-type: lower-alpha
}

.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)) {
    list-style-type: upper-alpha
}

.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)) {
    list-style-type: lower-alpha
}

.prose :where(ol[type=I]):not(:where([class~=not-prose] *)) {
    list-style-type: upper-roman
}

.prose :where(ol[type=i]):not(:where([class~=not-prose] *)) {
    list-style-type: lower-roman
}

.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)) {
    list-style-type: upper-roman
}

.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)) {
    list-style-type: lower-roman
}

.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)) {
    list-style-type: decimal
} */

.prose :where(ul):not(:where([class~=not-prose] *)) {
    list-style-type: disc;
    padding-left: 0
}

/* het getalletje */
.prose :where(ol>li):not(:where([class~=not-prose] *))::marker {
    font-weight: var(--font-weight-normal);
}

/* de kleur van de bullet */
.prose :where(ul>li):not(:where([class~=not-prose] *))::marker {
    color: var(--st-prose-marker-color);
}


/* hr styling is als standaard toegevoegd in _global.css */
/*.prose :where(hr):not(:where([class~=not-prose] *)) {*/
/*    border: 1px solid var(--st-prose-hr-color);*/
/*    margin-top: 3em;*/
/*    margin-bottom: 3em*/
/*}*/


/* Blockquote styling is als standaard toegevoegd in _global.css */
/*.prose :where(blockquote):not(:where([class~=not-prose] *)) {*/
/*    font-weight: 500;*/
/*    font-style: italic;*/
/*    font-size: var(--st-prose-blockquote-font-size);*/
/*    --text-line-height: 2;*/
/*    border-left: .25rem solid var(--st-prose-blockquote-border-color);*/
/*    quotes: "\201C""\201D""\2018""\2019";*/
/*    margin-top: 1.6em;*/
/*    margin-bottom: 1.6em;*/
/*    padding-left: 1em*/
/*}*/

/*.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before {*/
/*    content: open-quote*/
/*}*/

/*.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after {*/
/*    content: close-quote*/
/*}*/

.prose :where(h1):not(:where([class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: min(.9em,1.8rem);
    line-height: 1.1
}

.prose :where(h2):not(:where([class~=not-prose] *)) {
    margin-top: min(1.5em, 3rem);
    margin-bottom: min(.65em, 1.3rem);
    line-height: 1.3
}

.prose :where(h3):not(:where([class~=not-prose] *)) {
    margin-top: min(1.5em,3rem);
    margin-bottom: min(.6em,1.2rem);
    line-height: 1.4
}

.prose :where(h4):not(:where([class~=not-prose] *)) {
    margin-top: min(1.5em,1rem);
    margin-bottom: min(.5em,1rem);
    line-height: 1.5;
}

.prose :where(h5):not(:where([class~=not-prose] *)) {
    margin-top: min(1.25em,2.5rem);
    margin-bottom: min(1.25em,2.5rem);
}

.prose :where(h6):not(:where([class~=not-prose] *)) {
    margin-top: min(1.25em,2.5rem);
    margin-bottom: min(1.25em,2.5rem);
}



.prose :where(p):not(:where([class~=not-prose] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose :where(img):not(:where([class~=not-prose] *)) {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose :where(video):not(:where([class~=not-prose] *)) {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose :where(figure):not(:where([class~=not-prose] *)) {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose :where(figure>*):not(:where([class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0
}

.prose :where(figcaption):not(:where([class~=not-prose] *)) {
    color: var(--st-prose-figcaption-color);
    font-size: var(--st-prose-figcaption-font-size);
    line-height: 1.4;
    margin-top: .85em
}

.prose :where(li):not(:where([class~=not-prose] *)) {
    margin-top: .5em;
    margin-bottom: .5em
}

/* PLAT-9066: TipTap wrapt inline content in <li>, <td> en <th> in een <p>.
   Onder CKEditor 5 bleef die wrap-p achterwege. De p-margin hier nullen
   zodat de visuele spacing identiek blijft aan de CKEditor-output.
   Spacing tussen list-items blijft van de .prose li-regel hierboven komen. */
.prose :where(li > p):not(:where([class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
    line-height: inherit;
}

.prose :where(td > p, th > p):not(:where([class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

/* PLAT-9066: TipTap's block+ schema vereist een block child binnen structurele <div>.
   Inline content (een enkel icoon-span, een korte regel tekst, een afbeelding) wordt
   daardoor in een <p> gewikkeld. Voor de gevallen waar customer-content een <div>
   gebruikt als visuele wrapper (flex containers met align-items:center, fixed-height
   icoon-cells, etc.) moet die wrap-<p> geen verticale margin krijgen, anders schuift
   de inhoud uit het midden. Selectors: <p> dat het ENIGE block child is van zijn parent
   <div>, ZONDER eigen class (customer-authored <p class="..."> behoudt zijn margin).

   Scope: zowel binnen .prose (formeel content-styled blocks) als binnen
   .widget-texteditor__content (HPB Tekstverwerker-widgets zonder prose). Beide zijn
   customer-content containers; de wrap-<p> moet in beide gevallen onzichtbaar zijn. */
.prose :where(div > p:only-child):not([class]):not(:where([class~=not-prose] *)),
.widget-texteditor__content :where(div > p:only-child):not([class]):not(:where([class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0;
    line-height: inherit;
}

.prose :where(ol>li):not(:where([class~=not-prose] *)) {
    padding-left: .375em
}

.prose :where(ul>li):not(:where([class~=not-prose] *)) {
    padding-left: .5em;
    position: relative
}

.prose>:where(ul>li p):not(:where([class~=not-prose] *)) {
    margin-top: .75em;
    margin-bottom: .75em
}

.prose>:where(ul>li>:first-child):not(:where([class~=not-prose] *)) {
    margin-top: 1.25em
}

.prose>:where(ul>li>:last-child):not(:where([class~=not-prose] *)) {
    margin-bottom: 1.25em
}

.prose>:where(ol>li>:first-child):not(:where([class~=not-prose] *)) {
    margin-top: 1.25em
}

.prose>:where(ol>li>:last-child):not(:where([class~=not-prose] *)) {
    margin-bottom: 1.25em
}

.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)) {
    margin-top: .75em;
    margin-bottom: .75em
}

.prose :where(hr+*):not(:where([class~=not-prose] *)) {
    margin-top: 0
}

.prose :where(h2+*):not(:where([class~=not-prose] *)) {
    margin-top: 0
}

.prose :where(h3+*):not(:where([class~=not-prose] *)) {
    margin-top: 0
}

.prose :where(h4+*):not(:where([class~=not-prose] *)) {
    margin-top: 0
}

.prose>:where(:first-child):not(:where([class~=not-prose] *)) {
    margin-top: 0
}
/* als <header> first-child is, en de first-child daar weer van, die mot geen margin-top :)  */
.prose header:first-child > :where(:first-child):not(:where([class~=not-prose] *)) {
    margin-top: 0;
}

.prose>:where(:last-child):not(:where([class~=not-prose] *)) {
    margin-bottom: 0
}

/*.prose :where(h1,h2,h3):not(:where([class~=not-prose] *)) {*/
/*    letter-spacing: -.025em*/
/*}*/

.prose :where(a):not(:where([class~=not-prose] *)):not(.btn) {
    text-decoration: var(--st-prose-link-text-decoration);
}

.prose :where(a strong):not(:where([class~=not-prose] *)) {
    color: inherit;
    font-weight: inherit
}

.prose :where(figure>figcaption):not(:where([class~=not-prose] *)) {
    margin-top: .85em
}
/*icon styles*/
.has_icon_left i[class*="fa-"] {
    margin-inline-end: .5rem;
}

.has_icon_right i[class*="fa-"] {
    margin-inline-start: .5rem;
}

i.fa-star {
    color: var(--stars-color);
}

i.fa-check {
    color: var(-usp-icon-color);;
}
/* Tipso Bubble Styles */
.tipso_bubble,.tipso_bubble > .tipso_arrow{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tipso_bubble{position:absolute;text-align:center;border-radius:6px;z-index:9999}.tipso_style{cursor:help;border-bottom:1px dotted}.tipso_title{border-radius:6px 6px 0 0}.tipso_content{word-wrap:break-word;padding:0.5em;background-color:#fff;color:#333;border:1px solid#ccc;border-radius:4px;font-size:14px}.tipso_bubble.tiny{font-size:0.6rem}.tipso_bubble.small{font-size:0.8rem}.tipso_bubble.default{font-size:1rem}.tipso_bubble.large{font-size:1.2rem;width:100%}.tipso_bubble > .tipso_arrow{position:absolute;width:0;height:0;border:8px solid;pointer-events:none}.tipso_bubble.top > .tipso_arrow{border-top-color:#000;border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent;top:100%;left:50%;margin-left:-8px}.tipso_bubble.bottom > .tipso_arrow{border-bottom-color:#000;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent;bottom:100%;left:50%;margin-left:-8px}.tipso_bubble.left > .tipso_arrow{border-left-color:#000;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent;top:50%;left:100%;margin-top:-8px}.tipso_bubble.right > .tipso_arrow{border-right-color:#000;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;top:50%;right:100%;margin-top:-8px}.tipso_bubble .top_right_corner,.tipso_bubble.top_right_corner{border-bottom-left-radius:0}.tipso_bubble .bottom_right_corner,.tipso_bubble.bottom_right_corner{border-top-left-radius:0}.tipso_bubble .top_left_corner,.tipso_bubble.top_left_corner{border-bottom-right-radius:0}.tipso_bubble .bottom_left_corner,.tipso_bubble.bottom_left_corner{border-top-right-radius:0}
.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height 50ms ease-in-out;-moz-transition:height 50ms ease-in-out;-ms-transition:height 50ms ease-in-out;-o-transition:height 50ms ease-in-out;transition:height 50ms ease-in-out}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0,0)}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{display:none}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-item img{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:transparent}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:45%;top:45%;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:scale 100ms ease;-moz-transition:scale 100ms ease;-ms-transition:scale 100ms ease;-o-transition:scale 100ms ease;transition:scale 100ms ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}.play-btn__svg{fill: #d6d6d6;}
.owl-theme .owl-nav{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1;*display:inline}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;-webkit-transition:opacity 200ms ease;-moz-transition:opacity 200ms ease;-ms-transition:opacity 200ms ease;-o-transition:opacity 200ms ease;transition:opacity 200ms ease;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
/**
 * Swiper 8.4.6
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 17, 2023
 */

/* TODO: effecten die we niet gebruiken commenten */

@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0px, 0, 0)
}

.swiper-pointer-events {
    touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered > .swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical > .swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: calc((var(--text-size-md) * 1.5) + (var(--btn-padding-block) * 2) + (var(--btn-border-width) * 2));
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    /*top: calc(50% + var(--st-icon-size));*/
    top: 50%;
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

/* pointer event normaal gezet, want bij snelle navigatie bij inline buttons klik je anders op de slide. */
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    /*pointer-events: none*/
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: 'prev'
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: 10px;
    left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: 'next'
}

.swiper-button-lock {
    display: none
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: 50%;
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    transform: translate3d(0px, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical > .swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .1)
}

.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical > .swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column > .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next + .swiper-slide,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}
/*
CSS onderverdeling
Welke pagina's / globaal: PDP. Is deze file alleen voor PDP swiper of voor alle swipers?
Is het cruciaal boven de vouw?: Ja op PDP wel

dus ---> Intern inladen op PDP sowieso
*/

.productinfo-image-item {
    display: flex;
    place-content: center;
}

.productinfo-image-popup-link {
    display: inline-flex;
    width: 100%;
}


.swiper-slide * {
    user-select: none;
    -webkit-user-select: none;
}

/* Pre-Swiper-init CLS-fix voor HPB-sliders.
   Zonder deze rule krijgt .swiper-slide van swiper-v8.css default width:100%.
   Gecombineerd met child-elementen die aspect-ratio gebruiken (bijv.
   .categories_imagecontainer in dynamic4000.css) geeft dat pre-init enorme
   hoogtes die bij Swiper-init terugspringen -> CLS.
   Oplossing: slide-width + gap afdwingen via custom props op de swiper
   container. --slide-cols-* zijn inline per widget-instance (in de swiper
   tpl), --slide-gap is inline op <body> (header_eind.tpl). Inline-vars
   hebben hoogste cascade-priority en zijn direct bij first paint beschikbaar.
   Bij Swiper-init vervalt de :not()-match en nemen Swipers eigen styles over. */
.homepage-categories-swiper:not(.swiper-initialized) .swiper-slide,
.homepage-products-swiper:not(.swiper-initialized) .swiper-slide,
.merken-swiper:not(.swiper-initialized) .swiper-slide,
.reviews-swiper:not(.swiper-initialized) .swiper-slide,
.blog-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - (var(--slide-cols, 4) - 1) * var(--slide-gap, 16px)) / var(--slide-cols, 4));
    margin-right: var(--slide-gap, 16px);
}

.homepage-categories-swiper:not(.swiper-initialized) .swiper-slide:last-child,
.homepage-products-swiper:not(.swiper-initialized) .swiper-slide:last-child,
.merken-swiper:not(.swiper-initialized) .swiper-slide:last-child,
.reviews-swiper:not(.swiper-initialized) .swiper-slide:last-child,
.blog-swiper:not(.swiper-initialized) .swiper-slide:last-child {
    margin-right: 0;
}

@media screen and (max-width: 991px) {
    .homepage-categories-swiper:not(.swiper-initialized) .swiper-slide,
    .homepage-products-swiper:not(.swiper-initialized) .swiper-slide,
    .merken-swiper:not(.swiper-initialized) .swiper-slide,
    .reviews-swiper:not(.swiper-initialized) .swiper-slide,
    .blog-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - (var(--slide-cols-tablet, 4) - 1) * var(--slide-gap, 16px)) / var(--slide-cols-tablet, 4));
    }
}

@media screen and (max-width: 767px) {
    .homepage-categories-swiper:not(.swiper-initialized) .swiper-slide,
    .homepage-products-swiper:not(.swiper-initialized) .swiper-slide,
    .merken-swiper:not(.swiper-initialized) .swiper-slide,
    .reviews-swiper:not(.swiper-initialized) .swiper-slide,
    .blog-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - (var(--slide-cols-mobile, 2) - 1) * var(--slide-gap, 16px)) / var(--slide-cols-mobile, 2));
    }
}

/* images in main slider en thumb slider */
.swiper-slide img {
    display: inline-block;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
}

.productinfo-layover-image {
    width: 100%;
}


/* THUMBNAILS */
.productinfo-thumbs {
    --number-of-productinfo-thumbs-desktop: 5;
    --number-of-productinfo-thumbs-mobile: 3;
}

.productinfo-thumbs .swiper-slide {
    --gutter: 4rem;
    --thumb-space-between: 10px;
    /*--container-width: calc(50% - calc(var(--gutter) / 2));*/
    --max-space-between: calc(var(--thumb-space-between) * (var(--number-of-productinfo-thumbs-desktop) - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    /*min-width: calc((100% - var(--max-spacing)) / var(--number-of-thumbs)) !important;*/
    max-width: calc((100% - var(--max-spacing)) / var(--number-of-productinfo-thumbs-desktop)) !important;
    width: calc((100% - var(--max-spacing)) / var(--number-of-productinfo-thumbs-desktop)) !important;
    margin-right: var(--thumb-space-between);
}

@media screen and (max-width: 767px) {
    .productinfo-thumbs .swiper-slide {
        --max-space-between: calc(var(--thumb-space-between) * (var(--number-of-productinfo-thumbs-mobile) - 1));
        max-width: calc((100% - var(--max-spacing)) / var(--number-of-productinfo-thumbs-mobile)) !important;
        width: calc((100% - var(--max-spacing)) / var(--number-of-productinfo-thumbs-mobile)) !important;
    }
}

.productinfo-thumbs {
    margin-top: 10px;
}

.hide-from-swiper {
    display: none !important;
}

/* Todo: dit nog beter testen */
/*.swiper-slide {*/
/*    cursor: grab;*/
/*}*/

.productinfo-thumbs .swiper-slide {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    cursor: pointer;
}

.productinfo-thumbs .swiper-slide-thumb-active {
    --pdp-swiper-thumb-active-outline-color: var(--grey-300);
    z-index: 1;
    outline: 2px solid var(--pdp-swiper-thumb-active-outline-color);
    outline-offset: -2px;
    background-color: #fff;
}

.swiper-thumbs-center {
    justify-content: center;
}

/* merken en product card sliders */
.swiper-navigation {
    display: inline-flex;
    gap: .5rem;
}

.swiper-header {
    --swiper-header-margin-block-end: var(--gutter);
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-block-end: var(--swiper-header-margin-block-end);
}

.swiper-header h2,
.swiper-header .h2 {
    margin-bottom: 0;
}

.merken-swiper .swiper-wrapper,
.meebestellen-swiper .swiper-wrapper,
.product-history-swiper .swiper-wrapper {
    display: flex;
}

.product-history-swiper .swiper-wrapper {
    height: fit-content;
}

/* product card sliders */
.meebestellen-swiper,
.product-history-swiper {
    position: relative;
}

.product-card-slide,
.homepage-categories-slide {
    margin-bottom: 8px; /* ruimte ivm shadow op hover - TODO: EDIT-Andert: shadow issue opgelossen met zelf-compenserende margin of iets anders */
}

.swiper:has(.product-card-slide) .swiper-button-next,
.swiper:has(.product-card-slide) .swiper-button-prev,
.swiper:has(.homepage-categories-slide) .swiper-button-next,
.swiper:has(.homepage-categories-slide) .swiper-button-prev {
    top: calc(50% - 8px);
}

.swiper-inline-navigation-btn {
    background-color: rgba(255,255,255,.85);
    border: var(--border-transparent-dark);
    border-radius: 100px;
    box-shadow: var(--shadow-xs);
}

.swiper-inline-navigation-btn:hover,
.swiper-inline-navigation-btn:focus {
    box-shadow: var(--shadow-md-light);
}

/* PRODUCT CARD SLIDE */
.product-card-slide,
.card-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    outline: var(--card-border);
    outline-offset: -1px;
    background-color: var(--card-background-color);
    border-radius: var(--card-border-radius);

    transition-property: box-shadow, outline;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);
}

.swiper-slide.product-card-slide,
.swiper-slide.product-card-slides,
.swiper-slide.card-slide {
    height: auto;
}

.product-card-slide:hover,
.product-card-slide:focus,
.card-slide:hover,
.card-slide:focus {
    box-shadow: var(--card-shadow-hover);
    outline: var(--card-border-hover);
}

.product-card-slide .products_gallery_row {
    height: 100%;
}

/* PRODUCT CARD SLIDE - IMAGE */
.product-card-slide-image {
    position: relative;
    margin: var(--gutter-half);
}

.product-card-slide-image img {
    border-radius: var(--card-border-radius) var(--card-border-radius) var(--border-radius-small) var(--border-radius-small);
}

.product-card-slide-image img.subimage_normal {
    z-index: 3;
}

/* PRODUCT CARD SLIDE - ARTICLE LAYOVER*/
.product-card-slide #artikellayover {
    height: auto !important;
}

/* PRODUCT CARD SLIDE - NAME */
.product-card-slide-name {
    flex: 1 1 auto;
    line-height: 1.2;
    margin-inline: var(--gutter-half);
}

.product-card-slide-name a {
    font-size: var(--text-size-md);
    color: var(--body-text-color);
    font-family: var(--body-font-stack);
    font-weight: var(--font-weight-bold);
}

.product-card-slide:hover .product-card-name a {
    color: var(--body-text-color);
}

/* PRODUCT CARD SLIDE - PRICE */
.product-card-slide-price {
    margin: var(--gutter-half);
}

.product-card-slide-price .oldPrice {
    font-size: var(--text-size-md);
}


.product-card-slide-price .normalPrice,
.product-card-slide-price .specialPrice {
    font-size: var(--text-size-xl);
}

/* PRODUCT CARD SLIDE - BUTTONS */
.product-card-slide-buttons {
    margin-inline: .5rem;
    margin-block-end: .5rem;
}

.product-card-slide-buttons .btn {
    width: -webkit-fill-available;
    width: -moz-available;
}

.swiper-product-card .swiper-slide {
    --container: var(--max-container-width);
    --max-space-between: calc(var(--slider-space-between) * (var(--slider-number-of-cols) - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    max-width: calc((var(--container) - var(--max-spacing)) / var(--slider-number-of-cols));
    margin-right: var(--slider-space-between);
}

.product-history-swiper.swiper-product-card .swiper-slide {
    --container: var(--max-container-width);
    --max-space-between: calc(var(--slider-space-between) * (var(--last-viewed-slider-number-of-cols) - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    max-width: calc((var(--container) - var(--max-spacing)) / var(--last-viewed-slider-number-of-cols));
    margin-right: var(--slider-space-between);
}

.merken-swiper .swiper-slide {
    --container: var(--max-container-width);
    --max-space-between: calc(var(--merken-slider-space-between) * (var(--merken-slider-number-of-cols) - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    max-width: calc((var(--container) - var(--max-spacing)) / var(--merken-slider-number-of-cols));
    margin-right: var(--merken-slider-space-between);
}

.testimonials-swiper .swiper-slide {
    --container: var(--max-container-width);
    --max-space-between: calc(16px * (3 - 1));
    --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
    --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
    max-width: calc((var(--container) - var(--max-spacing)) / 3);
    margin-right: 16px;
}

@media screen and (max-width: 991px) {
    .swiper-product-card .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--slider-space-between) * (var(--slider-number-of-cols-tablet) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--slider-number-of-cols-tablet));
    }

    .product-history-swiper.swiper-product-card .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--slider-space-between) * (var(--last-viewed-slider-number-of-cols-tablet) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--last-viewed-slider-number-of-cols-tablet));
    }

    .merken-swiper .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--merken-slider-space-between-tablet) * (var(--merken-slider-number-of-cols-tablet) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--merken-slider-number-of-cols-tablet));
        margin-right: var(--merken-slider-space-between-tablet);
    }
}

@media screen and (max-width: 767px) {
    .swiper-product-card .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--slider-space-between) * (var(--slider-number-of-cols-mobile) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--slider-number-of-cols-mobile));
    }

    .product-history-swiper.swiper-product-card .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--slider-space-between) * (var(--last-viewed-slider-number-of-cols-mobile) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--last-viewed-slider-number-of-cols-mobile));
    }

    .merken-swiper .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(var(--merken-slider-space-between-mobile) * (var(--merken-slider-number-of-cols-mobile) - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / var(--merken-slider-number-of-cols-mobile));
        margin-right: var(--merken-slider-space-between-mobile);
    }

    .testimonials-swiper .swiper-slide {
        --container: var(--max-container-width);
        --max-space-between: calc(16px * (1 - 1));
        --max-spacing-container: calc(var(--st-container-space-x, 10px) * 2);
        --max-spacing: calc(var(--max-space-between) + var(--max-spacing-container));
        max-width: calc((var(--container) - var(--max-spacing)) / 1);
        margin-right: 16px;
    }
}

/* Video */
.swiper-video {
    width: inherit;
}

.swiper-video iframe {
    width: -webkit-fill-available;
    width: -moz-available;
    height: -webkit-fill-available;
    height: -moz-available;
}

/* Inline Swiper navigation buttons*/
.swiper-col {
    position: relative;
}

.swiper-button-inline-next:after,
.swiper-button-inline-prev:after,
.swiper-button-next:after,
.swiper-button-prev:after {
    content: '';
}

/* navigation buttons */
.swiper-button-inline-next,
.swiper-button-inline-prev,
.swiper-button-next,
.swiper-button-prev {
    --st-icon-size: var(--text-size-md);
    --swiper-nav-inline-icon-color: var(--body-text-color);
}

.swiper-button-inline-next:hover,
.swiper-button-inline-next:focus,
.swiper-button-inline-prev:hover,
.swiper-button-inline-prev:focus,
.swiper-button-next:hover,
.swiper-button-next:focus,
.swiper-button-prev:hover,
.swiper-button-prev:focus {
    --swiper-nav-inline-icon-color: var(--main-500);
}

.swiper-button-inline-next:after,
.swiper-button-inline-prev:after,
.swiper-button-next:after,
.swiper-button-prev:after {
    -webkit-mask-image: var(--swiper-nav-inline-icon);
    mask-image: var(--swiper-nav-inline-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--swiper-nav-inline-icon-color);
    cursor: pointer;
    min-width: var(--st-icon-size);
    min-height: var(--st-icon-size);
    height: var(--st-icon-size);
    display: inline-block;
    vertical-align: text-bottom;
}

.swiper-button-inline-next:after,
.swiper-button-next:after {
    --swiper-nav-inline-icon: var(--chevron-right-icon);
}
.swiper-button-inline-prev:after,
.swiper-button-prev:after {
    --swiper-nav-inline-icon: var(--chevron-left-icon);
}


/* pagination */
.st-swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(var(--text-size-md) * var(--text-line-height));
    margin-block-start: .5rem;
}

.swiper-pagination-bullet {
    background-color: var(--btn-disabled-bg-color);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--main-500);
}

/* gallery slider */
.gallery-slide {
    display: flex;
    justify-content: center;
}
:root {
    /* self-alias variabelen met fallback om ellende te voorkomen als thema niet goed inlaad ofzo */
    --st-container-space-x: var(--custom-st-container-space-x, 10px);
    --sidebar-width: var(--custom-sidebar-width, 20%);
    --actual-container-width: calc(var(--max-container-width) - (var(--st-container-space-x, 10px) * 2));
}

.content:not(.col_left) #column_left,
.content:not(.col_right) #column_right {
    --sidebar-width: 0;
}

.wrapper {
    position: relative;
}

.container {
    padding-block: .5rem;
    margin: 0 auto;
    position: relative;
}

.st_homepage .container {
    padding-top: 0;
}

#column_left, #column_right {
    box-sizing: border-box;
    position: relative;
    float: left;
}

/* these are supposed to be different values */
#column_left { --padding-column-left: 1rem; padding-right: var(--padding-column-left); }
#column_right { --padding-column-right: 2rem; padding-left: var(--padding-column-right); }

/* wordt gebruikt bij checkout page */
.col-50 {
    flex: 50%;
}

@media screen and (max-width: 767px) {
    div.halfwidth {
        position: relative;
        float: left;
    }

    div.changetable td {
        border: none;
    }

    div.changetable.user_input td {
        border: none;
        width: 100%;
    }

    div.changetable .form_section table tr td, div.changetable .form_section table tr th {
        padding-bottom: 0;
        padding-top: 0;
    }

    div.changetable .table-section table tr td:first-child, div.changetable .table-section table tr th:first-child {
        padding-left: 0;
    }

    div.changetable .table-section table tr td:last-child, div.changetable .table-section table tr th:last-child {
        padding-left: 0;
        padding-right: 0;
    }

    div.changetable textarea {
        min-width: 95%;
        max-width: 95%;
        width: 95%;
    }

    div.changetable select.big {
        width: 90%;
    }
}

@media screen and (max-width: 991px) {
    .wrapper {
        position: relative;
        width: 100%;
        float: none;
    }

    .lastViewedProduct_box_container .lastViewedProduct_box { margin-inline: calc(var(--st-container-space-x) * -1); }
    .lastViewedProduct_box_container .lastViewedProduct_box .lastViewedProduct:first-of-type { margin-inline-start: var(--st-container-space-x); }
    .lastViewedProduct_box_container .lastViewedProduct_box .lastViewedProduct:last-of-type { margin-inline-end: var(--st-container-space-x); }


    #column_left, #column_right {
        display: none;
    }
}

@media screen and (min-width: 992px) {
    #column_left, #column_right {
        width: var(--sidebar-width);
    }

    /********* NO SIDEBARS *********/
    .wrapper.content.no_col #content {
        position: relative;
        width: 100%;
    }

    .wrapper.content.no_col #content:empty {
        display: none;
    }

    /********* LEFT OR RIGHT SIDEBAR *********/
    .wrapper.content #content.col_left,
    .wrapper.content #content.col_right {
        position: relative;
        float: left;
        width: calc(100% - var(--sidebar-width));
    }
}


/* Dit werkt niet lekker, want door die compensating margin is het element wel groter, en overlapt het buttons enzo die er na komen.
Daarom zijn die niet meer klikbaar die buttons dan, dus andere oplossing zoeken voor shadow-afkap */
/* Dit is bedoeld zodat de schaduwen niet afgekapt worden */
/*
:root {
    --compensating-offset: 50px;
}
.swiper:has(.product-card-slide) {
    margin-bottom: calc(-1 * var(--compensating-offset)) !important;
}
.swiper-wrapper:has(.product-card-slide) {
    margin-bottom: var(--compensating-offset) !important;
}
*/


/* TEST NIEUW */

/* container max width */
.wrapper:not(.full),
#slider-homepage.standaard,
.bs-container {
    max-width: var(--max-container-width) !important;
}

@media screen and (min-width: 992px) {
    .wrapper:not(.full),
    #slider-homepage.standaard,
    .bs-container{
        width: 98% !important;
        /* TODO bij deze media query geen padding-inline, zodat de container bijv. 1200px ipv 1180px breed wordt. Nu komt de waarde overeen met BOWU 'maximale containerbreedte'. Dit is handiger voor klanten met het maken van afbeeldingen. */
        /*padding-inline: 0;*/
    }
}

@media screen and (max-width: 991px) {
    :root {
        --gutter: var(--st-container-space-x);
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: ???
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/

section.tep-section div ul {
    margin-left: 20px;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Listing pagina's (Home, PLP, PDP)
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen
*/

.listing,
.home_page_listing.categoriesclass,
.home_page_listing.productsclass {
    display: grid;
    grid-column-gap: var(--products-grid-space-between);
    grid-row-gap: var(--products-grid-space-between);
}

.home_page_listing.productsclass.clear {
    display: none;
}

/* categorie listing */
.home_page_listing.categoriesclass {
    grid-template-columns: repeat(var(--categorie-listing-number-of-cols), 1fr);
    margin-block: var(--gutter);
}

.home_page_listing.categoriesclass:not(:has(.categories_row)) {
    display: none;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .home_page_listing.categoriesclass {
        --categorie-listing-number-of-cols-tablet: 3;
        grid-template-columns: repeat(var(--categorie-listing-number-of-cols-tablet), 1fr) !important;
    }
}

@media screen and (max-width: 767px) {
    .home_page_listing.categoriesclass {
        grid-template-columns: repeat(var(--categorie-listing-number-of-cols-mobile), 1fr) !important;
    }
}

/* product listing */
.home_page_listing.productsclass {
    grid-template-columns: repeat(var(--listing-number-of-cols), 1fr);
    margin-block: var(--gutter);
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .home_page_listing.productsclass {
        grid-template-columns: repeat(var(--listing-number-of-cols-tablet), 1fr);
    }
}

@media screen and (max-width: 767px){
    .home_page_listing.productsclass {
        grid-template-columns: repeat(var(--listing-number-of-cols-mobile), 1fr);
    }
}

/* widget listings - categories en products */
.widget-homepage-categories .home_page_listing,
.widget-homepage-products .home_page_listing {
    margin-block: 0;
}

/* blog listing */
.blog-listing {
    grid-template-columns: repeat(var(--blog-listing-number-of-cols), 1fr);
    margin-block-end: var(--blog-grid-space-between);
}

:root {
    --blog-listing-number-of-cols: 2;
}

@media screen and (max-width: 575px) {
    :root {
        --blog-listing-number-of-cols: 1;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: ???????
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/




:root {
    --st-icon-size: var(--text-size);
}

.icongreen,
.st-icon-green .st-icon {
    color: var(--success-500);
}

.iconred,
.st-icon-red .st-icon {
    color: var(--error-500);
}

.iconpink {
    color: var(--error-300);
}

.iconorange,
.st-icon-orange .st-icon {
    color: var(--warning-500);
}

.iconyellow {
    color: var(--warning-300);
}

.iconblue {
    color: var(--info-500);
}

.search-icon {
    -webkit-tap-highlight-color: transparent;
}

.icon_spin {
    display: inline-block;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

table i.btw.icon-checkmark {
    color: green;
}

table i.btw.icon-cross {
    color: red;
}

/* NIEUW */
.st-icon {
    --st-icon-color: inherit;
    color: var(--st-icon-color);
    display: inline-flex;
}

:root {--st-icon-min-size: 1em;}

.st-icon > svg {
    fill: currentColor;
    min-width: var(--st-icon-min-size);
    min-height: var(--st-icon-min-size);
    height: var(--st-icon-size);
}

.loader {
    display: inline-flex;
    align-self: flex-start;
}

.loader {
    -webkit-animation: icon-spinning 2s infinite linear;
    animation: icon-spinning 2s infinite linear;
}

@keyframes icon-spinning {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/* todo: font-family op span kan weggehaald worden als icomoon niet meer gebruikt wordt*/
/*.icon-left span,*/
/*.icon-right span {*/
/*    font-family: var(--body-font-stack);*/
/*}*/
/* eind to-do */

.icon-right-text span.button-text,
.has_icon_left .st-icon,
.has_icon_left .fa-icon {
    margin-right: .5rem;
}

.icon-left-text span.button-text,
.has_icon_right .st-icon,
.has_icon_right .fa-icon {
    margin-left: .5rem;
}

/* DUOTONE ICONS */
.fa-secondary {
    opacity:.4;
}

[class*="st-icon-caret-"] svg,
.fa-icon.fa-icon-caret-left:before,
.fa-icon.fa-icon-caret-right:before,
.fa-icon.fa-icon-caret-down:before,
.fa-icon.fa-icon-caret-up:before {
    --st-icon-caret-height: .875em;
    min-height: var(--st-icon-caret-height);
    min-width: var(--st-icon-caret-height);
    max-height: var(--st-icon-caret-height);
    max-width: var(--st-icon-caret-height);
}

.show-chevron-right .st-icon-chevron-down,
.show-chevron-down .st-icon-chevron-right {
    display: none;
}

.show-chevron-right .fa-icon-chevron-right::before {
    min-width: .75em;
}

/* ICONS */
.fa-icon {
    position: relative;
}

.fa-icon:before {
    --text-size-around-icon: var(--text-size-md);
    --icon-color: currentColor;
    --st-icon-size: calc(var(--text-size-around-icon) * var(--text-line-height));
    --icon-align-y: text-bottom;

    content: '';
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--icon-color);
    min-width: 1em;
    min-height: 1em;
    height: var(--st-icon-size);
    display: inline-block;
    vertical-align: var(--icon-align-y);
}

.fa-icon.fa-icon-check:before {
    --icon: var(--usp-check-icon);
    --icon-color: var(--usp-icon-color);
}

.fa-icon.fa-icon-circle-check:before {
    --icon: var(--usp-circle-check-icon);
    --icon-color: var(--usp-icon-color);
}

.fa-icon.fa-icon-envelope:before {
    --icon: var(--envelope-icon);
}

.fa-icon.fa-icon-arrow-left:before {
    --icon: var(--arrow-left-icon);
}

.fa-icon.fa-icon-arrow-right:before {
    --icon: var(--arrow-right-icon);
}

.fa-icon.fa-icon-chevron-left:before {
    --icon: var(--chevron-left-icon);
}

.fa-icon.fa-icon-chevron-right:before {
    --icon: var(--chevron-right-icon);
}

.fa-icon.fa-icon-chevron-down:before {
    --icon: var(--chevron-down-icon);
}

.fa-icon.fa-icon-chevron-up:before {
    --icon: var(--chevron-up-icon);
}

.fa-icon.fa-icon-caret-left:before {
    --icon: var(--caret-left-icon);
}

.fa-icon.fa-icon-caret-right:before {
    --icon: var(--caret-right-icon);
}

.fa-icon.fa-icon-caret-down:before {
    --icon: var(--caret-down-icon);
}

.fa-icon.fa-icon-caret-up:before {
    --icon: var(--caret-up-icon);
}

.fa-icon.fa-icon-star:before,
.fa-icon.fa-icon-star-full:before {
    --icon: var(--star-full-icon);
}

.fa-icon.fa-icon-star-empty:before {
    --icon: var(--star-full-icon);
}

.fa-icon.fa-icon-star-empty-stroke:before {
    --icon: var(--star-empty-stroke-icon);
}

.fa-icon.fa-icon-star-half:before {
    --icon: var(--star-half-stroke-icon);
}

.fa-icon.fa-icon-home:before {
    --icon: var(--home-icon);
}

.fa-icon.fa-icon-thumbs-up:before {
    --icon: var(--thumbs-up-icon);
}

.fa-icon.fa-icon-user:before {
    --icon: var(--user-icon);
}

.fa-icon.fa-icon-phone:before {
    --icon: var(--phone-icon);
}

.fa-icon.fa-icon-facebook:before {
    --icon: var(--facebook-icon);
}

.fa-icon.fa-icon-facebook-f:before {
    --icon: var(--facebook-f-icon);
}

.fa-icon.fa-icon-square-facebook:before {
    --icon: var(--facebook-square-icon);
}

.fa-icon.fa-icon-instagram:before {
    --icon: var(--instagram-icon);
}

.fa-icon.fa-icon-youtube:before {
    --icon: var(--youtube-icon);
}

.fa-icon.fa-icon-linkedin:before {
    --icon: var(--linkedin-icon);
}

.fa-icon.fa-icon-linkedin-in:before {
    --icon: var(--linkedin-in-icon);
}

.fa-icon.fa-icon-twitter:before {
    --icon: var(--twitter-icon);
}

.fa-icon.fa-icon-square-twitter:before {
    --icon: var(--twitter-square-icon);
}

.fa-icon.fa-icon-whatsapp:before {
    --icon: var(--whatsapp-icon);
}

.fa-icon.fa-icon-dribbble:before {
    --icon: var(--dribbble-icon);
}

.fa-icon.fa-icon-pinterest:before {
    --icon: var(--pinterest-icon);
}

.fa-icon.fa-icon-pinterest-p:before {
    --icon: var(--pinterest-p-icon);
}

.fa-icon.fa-icon-square-pinterest:before {
    --icon: var(--pinterest-square-icon);
}

.fa-icon.fa-icon-vimeo:before {
    --icon: var(--vimoe-icon);
}

.fa-icon.fa-icon-vimeo-v:before {
    --icon: var(--vimoe-v-icon);
}

.fa-icon.fa-icon-plus:before {
    --icon: var(--plus-icon);
}

.fa-icon.fa-icon-minus:before {
    --icon: var(--minus-icon);
}

.fa-icon.fa-icon-location-dot:before {
    --icon: var(--location-dot-icon);
}

.fa-icon.fa-icon-cart:before {
    --icon: var(--cart-icon);
}

.fa-icon.fa-icon-heart-empty:before {
    --icon: var(--heart-empty-icon);
}

.topmenu {
    background-color: var(--topmenu-bg-color);
    height: var(--topmenu-height);
    width: 100%;
    z-index: var(--topmenu-z-index);
}

.topmenu,
.topmenu a {
    color: var(--topmenu-text-color);
}

/*TODO: mooier oplossen als t ff kan*/
.user_pass_forgotten,
.user_create_account {
    --topmenu-text-color: var(--bs-dropdown-link-color);
}

.topmenu a:hover,
.topmenu-loggedin:hover{
    color: var(--topmenu-text-color-hover);
}

.topmenu * {
    font-size: var(--text-size-sm);
}

.topmenu .fa-icon:before {
    --text-size-around-icon: var(--text-size-sm);
}

.topmenu ul {
    list-style: none;
}

.topmenu-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}


.topmenu-inner-col {
    display: flex;
    height: 100%;
    width: auto;
}

.topmenu-content {
    display: flex;
    align-items: center;
}

.topmenu-nav {
    display: flex;
}

/* line-height aanpassen zodat alles uitgelijnd staat */
.topmenu-content *,
.topmenu-nav-item > a,
.login-button a {
    line-height: normal;
}

.topmenu-nav-item {
    display: flex;
    align-items: center;
}

.topmenu-nav-item > a,
.login-button,
.login-button > a,
.topmenu_loggedin-box,
.logged-in-bar {
    display: flex;
    height: 100%;
    align-items: center;
}

.topmenu-nav-item > a,
.login-button > a,
.loggedin,
.logout {
    padding-inline: var(--topmenu-items-padding-x);
}

/* Hide 'Create account' / 'Account aanmaken' menu item if user is logged in */
body.logged-in .topmenu-nav a[href$="create_account.php"] {
    display: none;
}

/* Top-menu USP's */
.top-menu-usps {
    display: flex;
}

.top-menu-usps li:not(:last-child) {
    margin-inline-end: var(--st-spacing-sm);
}

.top-menu-usps .fa-icon:before {
    --st-icon-size: var(--text-size);
}
/* NIEUWE STYLING */
.site-header {
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    z-index: var(--header-z-index);
}

.site-header a:hover,
.site-header a:focus {
    color: var(--header-text-color-hover);
}

/* Extra icon als knop: button-hoverkleur behouden i.p.v. de header-tekst-hoverkleur */
.site-header a.header-extra-icon-btn:hover,
.site-header a.header-extra-icon-btn:focus {
    color: var(--bs-btn-hover-color);
}

/* remove options to set height and width of logo and make sure logo is always not bigger than the dropdown items */
/*.site-header-small .col-logo img {*/
/*    --header-logo-padding: calc(var(--header-logo-padding-top) + var(--header-logo-padding-bottom));*/
/*    max-height: calc(var(--site-nav-height) - var(--header-logo-padding)) !important;*/
/*}*/

/* site-header column padding. Except for logo, it has its own custom vertical padding */
.site-header-inner > *:not(.col-logo):not(.col-nav) {
    padding-block: .5rem;
}

.site-header {
    --header-searchbar-max-width: 50rem;
}

.site-header.site-header-large-logo-center {
    --header-searchbar-max-width: 18rem;
}

/* Zoekbalk */
.site-header-searchbar {
    max-width: var(--header-searchbar-max-width);
}

.site-header-searchbar .form-control,
.mobile-searchbox .form-control {
    /*De zoekbalk in de header mag wel een volledige ronde hoek aan linkerzijde*/
    --input-border-radius: var(--btn-border-radius);
}

.site-header-large-logo-left .site-header-searchbar,
.site-header-small-nav-left .site-header-searchbar {
    margin-inline: auto;
    padding-inline: 5%;
    width: 100%;
    box-sizing: border-box;
}

/* Icon navigatie in Site Header */
:root {
    --header-icons-btn-size: 40px;
}

.site-header-nav {
    align-items: center;
}

.site-header-nav-item {
    --header-icons-border-radius: var(--border-radius-pill);
    --header-icons-border-width: var(--btn-border-width);

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--header-icons-btn-size);
    height: var(--header-icons-btn-size);
    border-radius: var(--header-icons-border-radius);
    color: var(--header-icons-color);
    background-color: var(--header-icons-bg-color);
    border: var(--header-icons-border-color) solid var(--header-icons-border-width);
}

.site-header-nav-item .st-icon-caret-down {
    margin-inline-start: .25em;
}

.site-header-nav-item:not(.site-header-language-popup) a {
    color: var(--header-icons-color);
}

.site-header-basket-wrapper:hover .site-header-nav-item a,
.site-header-basket-wrapper:focus-within .site-header-nav-item a,
.site-header-nav-item:not(.site-header-language-popup):hover a,
.site-header-nav-item:not(.site-header-language-popup):focus a,
.header-account:hover .site-header-nav-item a,
.header-account:focus .site-header-nav-item a {
    color: var(--header-icons-color-hover);
}

.site-header-basket-wrapper:hover .site-header-nav-item,
.site-header-basket-wrapper:focus-within .site-header-nav-item,
.site-header-nav-item:not(.site-header-language-popup):hover,
.site-header-nav-item:not(.site-header-language-popup):focus {
    color: var(--header-icons-color-hover) !important;
}

.site-header-basket-wrapper:hover .site-header-nav-item,
.site-header-basket-wrapper:focus-within .site-header-nav-item,
.site-header-nav-item:hover,
.site-header-nav-item:focus {
    /*background-image: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.2) 100%);*/
    background-color: var(--header-icons-bg-color-hover);
    border: var(--header-icons-border-color-hover) solid var(--header-icons-border-width);
}

.site-header-nav-item .st-icon {
    display: flex;
    justify-content: center;
    align-content: center;
}

.site-header-basket-wrapper .site-header-nav-item .basket-button span:last-of-type {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
}

/* width icon button with text */
.site-header-nav .site-header-nav-item-containing-text {
    width: max-content;
}

.site-header-nav .site-header-nav-item-containing-text .st-icon:last-of-type {
    margin-inline-end: 0;
}

.header-account .dropdown-item {
    font-size: var(--text-size-sm);
}

/* EINDE Icon navigatie in Site Header */

/******************** QUANTITY BADGE  ********************/
/* Bij de quantity tekstje zijn bg en color inverse van de cart-button zelf (alleen bij de button type, niet bij de icon type) */
.site-header-basket-wrapper .quantity,
.header-mobile-icon .quantity {
    font-size: var(--text-size-xs);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    min-height: .8rem;
    min-width: .8rem;
    width: fit-content;
    width: -moz-fit-content;
    padding: 4px;
    border-radius: 100px;
    line-height: 1;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.site-header-basket-wrapper .quantity {
    margin-left: .5rem;
}

.site-header-basket-wrapper .site-header-nav-item .quantity {
    background-color: var(--header-icons-color);
    color:  var(--header-bg-color);
}

.site-header-basket-wrapper:hover .site-header-nav-item .quantity,
.site-header-basket-wrapper:focus-within .site-header-nav-item .quantity {
    background-color: var(--header-icons-color-hover);
}

.site-header-basket-wrapper .site-header-basket-button .quantity {
    background-color: var(--btn-cart-text-color);
    color:  var(--btn-cart-bg-color);
}

.site-header-basket-wrapper:hover .site-header-basket-button .quantity,
.site-header-basket-wrapper:focus-within .site-header-basket-button .quantity {
    color: var(--btn-cart-bg-color-hover);
    background-color: var(--btn-cart-text-color-hover);
}

.header-mobile-icon .quantity {
    position: absolute;
    top: .5rem;
    right: -2px;
    background-color: var(--header-mobile-text-color);
    color:  var(--header-mobile-bg-color);
}

@keyframes cart-badge-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.quantity.cart-bump {
    animation: cart-badge-bump 0.35s ease-in-out;
}

/*********************************** HEADER SHOPPING CART ************************************/
/* ---- CART ---- */
.basket_wrapper {
    position: relative;
    margin-inline-start: 1rem;
}

.site-header-basket-wrapper.basket_wrapper {
    margin-inline-start: 0;
}

.site-header-basket-button .btn {
    --bs-btn-color: var(--btn-cart-text-color);
    --bs-btn-bg: var(--btn-cart-bg-color);
    --bs-btn-border-color: var(--btn-cart-border-color);
    --bs-btn-hover-color: var(--btn-cart-text-color-hover);
    --bs-btn-hover-bg: var(--btn-cart-bg-color-hover);
    --bs-btn-hover-border-color: var(--btn-cart-border-color-hover);
    /*--bs-btn-focus-shadow-rgb: 211, 212, 213;*/
    --bs-btn-active-color: var(--btn-cart-text-color-hover);
    --bs-btn-active-bg: var(--btn-cart-bg-color-hover);
    --bs-btn-active-border-color: var(--btn-cart-border-color-hover);
    /*--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);*/
    /*--bs-btn-disabled-color: #000;*/
    /*--bs-btn-disabled-bg: #f8f9fa;*/
    /*--bs-btn-disabled-border-color: #f8f9fa;*/
}

.site-header-basket-wrapper .site-header-basket-button a {
    color: var(--bs-btn-color);
}

.site-header-basket-wrapper:hover .site-header-basket-button a,
.site-header-basket-wrapper:focus-within .site-header-basket-button a {
    color: var(--bs-btn-hover-color);
}

.site-header-basket-wrapper:hover .site-header-basket-button,
.site-header-basket-wrapper:focus-within .site-header-basket-button {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.site-header-basket-button a:last-of-type {
    display: inline-flex;
}

.basket_wrapper,
.site-header-basket-wrapper {
    z-index: var(--header-basket-z-index);
}

.site-header-basket-wrapper {
    position: relative;
}

.site-header-basket-button {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* CART BUTTON ICON (ICON FONT) */
.site-header-basket-button .st-icon {
    /*margin-left: 1rem;*/ /* waarvoor is deze margin-left? Om welke icon gaat dit? Is deze selector uberhaupt nog nodig? */
    font-size: var(--btn-font-size);
}

.header-mobile-icon.shopping-icon {
    position: relative;
}

/******************** BASKET WEIGHT  ********************/
.shopping_cart_basket-weight {
    text-align: right;
    margin: 0.5rem;
}
/*------ Searchbar Overlay on Focus ------*/
.overlay-searchbar {
    position: fixed;
    background-color: rgba(0,0,0,.25);
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--overlay-searchbar-z-index);
    opacity: 0;
    transition: width, height, opacity 0.3s ease-in-out;
}


body:has(.site-header-searchbar input.form-control:focus) .overlay-searchbar {
    opacity: 1;
    width: 100vw;
    height: 100vh;
}

body:has(.site-header-searchbar input.form-control:focus) .site-header-searchbar form[name="advanced_search"] {
    z-index: 99999;
    position: relative;
}

body:has(.site-header-searchbar input.form-control:focus) .topmenu {
    z-index: var(--header-z-index);
}

:root {
    --site-nav-height: 50px;
}

.site-nav {
    --site-nav-item-padding-y: 1rem;

    /* GEEN BORDER-BOTTOM - Want dan kan je niet goed hoveren naar de dropdown, en er is vaak een ongewenste rand.
      ipv border-bottom extra box-shadow gebruiken of een outline als dat werkt. */

    background-color: var(--nav-bg-color);
    height: var(--site-nav-height);
    z-index: var(--site-nav-z-index);
}

.site-header-large .site-nav {
    box-shadow: var(--shadow-xs);
}

/* header small height en kleuren */
.site-nav.site-nav-header-small {
    background-color: var(--header-bg-color);
}

.site-nav.site-nav-header-small .site-nav-container {
    height: 100%;
    display: flex;
    align-items: center;
}

/* header small mega menu alignment */
.site-header-small-logo-left .hasSubChilds.mega-menu,
.site-header-small-logo-left .all-cats-mega-menu {
    --logo-padding-x: calc((var(--bs-gutter-x) * .5) * 2);
    --menu-padding-x: var(--st-container-space-x, 10px);

    left: calc((var(--logo-padding-x) + var(--desktop-logo-max-width)) * -1);
}

/* header big height, kleuren, border en box-shadow */
.site-nav.site-nav-header-big {
    height: var(--site-nav-height);
    background-color: var(--nav-bg-color);
    box-shadow: var(--shadow-xs);
    z-index: var(--site-nav-z-index);
}


.site-nav * {
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;
}

/* <li> */
.site-nav.site-nav-header-big .site-nav-item--level-0 {
    height: var(--site-nav-height);
}

/* <a> */
.site-nav-item-link {
    transition-property: background-color, color;
    transition-duration: .2s;
}

.site-nav-item-link--level-0 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-inline: var(--site-nav-item-padding-x);
    color: var(--nav-text-color);
}

/* hover first level nav-item - colors */
.site-nav-item--level-0:hover,
.site-nav-item--level-0:focus,
.site-nav-item-link--level-0:hover,
.site-nav-item-link--level-0:focus,
.js-hover .site-nav-item-link--level-0 {
    background-color: var(--nav-items-bg-color);
    color: var(--nav-text-color-hover) !important;
}

/* Als alle dropdown-menu items een dropdown hebben, toon dan geen dropdown pijltje  */
/* (afgeleid van grote webshops zoals Coolblue die ook geen pijltje hebben omdat alles dropdown is) */
/* if .site-nav hasn't got a .site-nav-item-link that is not also a .dropdown-toggle, then disable the after element on the .dropdown-toggle  */

/*.site-nav:not(:has(.site-nav-item-link--level-0:not(.dropdown-toggle))) .dropdown-toggle:after {*/
/*    display: none;*/
/*}*/

/*.site-nav:not(:has(.site-nav-item-link--level-0:not(.dropdown-toggle))) .dropdown-toggle:after {*/
/*    display: none;*/
/*}*/

/*.site-nav:not(:has(.site-nav-item-link--level-0:not(:has(.st-icon)))) ..site-nav-item-link--level-0 > .st-icon {*/
/*    display: none;*/
/*}*/

/*TODO: bovenstaande testen met icons */



.site-nav.site-nav-header-big .site-nav--justify-content-center {
    justify-content: center;
}
.site-nav.site-nav-header-big .site-nav--justify-content-between {
    justify-content: space-between;
}
.site-nav.site-nav-header-big .site-nav--justify-content-end {
    justify-content: flex-end;
}
.site-nav--justify-content-between .site-nav-item--level-0 {
    flex-grow: 1;
}

/* Kleine header met logo links: zelfde menu-uitlijning als de grote header */
.site-header-small-logo-left .site-nav--justify-content-center {
    justify-content: center;
}
.site-header-small-logo-left .site-nav--justify-content-between {
    justify-content: space-between;
}
.site-header-small-logo-left .site-nav--justify-content-end {
    justify-content: flex-end;
}


.site-nav-inner {
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
}

/* Menu back link voor kbn */
.menu-backlink {
    display: none;
}

.using-keyboard .site-nav-item:focus-within .menu-backlink {
    display: block;
}
.all-cats-mega-menu {
    --all-cats-max-image-width: 20px;
    --all-cats-image-placeholder-width: var(--all-cats-list-item-inner-height);
    --all-cats-image-placeholder-height: var(--all-cats-list-item-inner-height);
    --all-cats-empty-image-width: calc(var(--all-cats-max-image-width) + var(--all-cats-item-gutter));
}

.all-cats-mega-menu__list-item-link--image {
    display: flex;
    align-items: var(--all-cats-item-link-alignment);
    max-height: var(--all-cats-image-placeholder-height);
    max-width: var(--all-cats-image-placeholder-width);
}

.all-cats-mega-menu__list-item-link--image .menu-title-img {
    max-width: var(--all-cats-max-image-width);
    max-height: var(--all-cats-image-placeholder-height);
}

.menu-title-img-empty {
    margin-inline-start: var(--all-cats-empty-image-width);
}

:root {
    --header-mobile-height: 50px;
}

#mobile_menu_container .bs-container {
    width: 100% !important;
    margin: 0 !important;
}

/*----------------------------------------*/
/*------------- MOBILE MENU --------------*/
/*----------------------------------------*/

.main-header-mobile {
    z-index: var(--header-mobile-z-index);
}

.header-mobile {
    display: flex;
    height: var(--header-mobile-height);
    background-color: var(--header-mobile-bg-color);
    box-shadow: var(--shadow-xs);
    /*z-index: var(--header-mobile-z-index);*/ /* niet nodig want parent .main-header-mobile heeft al z-index. */

    border-bottom: var(--border-transparent-dark);
/*    We're not using "box-sizing:border-box;" here since the border pushes the logo upwards considerably, even with a border-width of just 1px. */
}


/*TODO: Zie Monday 3876000247*/
/* header mobile layout opties */
/*.header-mobile.header-mobile--logo-left .header-mobile-col:last-child {*/
/*    margin-left: auto;*/
/*}*/

/*.header-mobile.header-mobile--logo-center .header-mobile-col {*/
/*    flex: 1;*/
/*}*/

/*@media screen and (max-width: 767px) {*/
/*    .header-mobile.header-mobile--space-between .header-mobile-container {*/
/*        justify-content: space-between;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 768px) {*/
/*    .header-mobile.header-mobile--space-between .header-mobile-col {*/
/*        flex: 1;*/
/*    }*/
/*}*/
/*END TODO: Zie Monday 3876000247*/

/* Mobiel logo in menu links uitlijnen (standaard gecentreerd) */
.header-mobile--logo-left .header-mobile-col:first-child {
    flex: 0 0 auto !important;
}
/*.header-mobile--logo-left .header-mobile-logo {*/
/*    margin-left: var(--st-spacing-xs, .5rem);*/
/*}*/




/*align-items: center; werkt niet ivm counter element*/
.header-mobile-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-mobile-col {
    display: flex;
    max-height: 100%;
}


.header-mobile-icon {
    cursor: pointer;
    color: var(--header-mobile-text-color);
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.header-mobile-icon:hover{
    color: var(--header-mobile-text-color-hover);
    background-color: var(--header-mobile-bg-color-hover);
    -webkit-tap-highlight-color: var(--header-mobile-bg-color-hover);
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.header-mobile-icon > a,
.header-mobile-icon > button {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.header-mobile-icon > button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.header-mobile .header-mobile-icon,
.header-mobile .header-mobile-icon a,
.header-mobile-open .header-mobile-icon,
.header-mobile-open .header-mobile-icon a {
    font-size: 1.25rem;
}

#mobile_menu_close,
.header-mobile .header-mobile-icon,
.header-mobile .header-mobile-icon a {
    color: var(--header-mobile-text-color);
}

/*TODO: logo moet fullheight clickable*/
/* mobile logo */
.header-mobile-logo {
    box-sizing: border-box;
    height: var(--header-mobile-height, 50px);
    padding: .5rem;
}
.header-mobile-logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.header-mobile-logo-image {
    /*box-sizing: border-box;*/
    max-height: 100%;
    /*padding: .5rem;*/
}

/* Standaard zoekbalk verborgen zetten */
.js-header-mobile-search {
    display: none;
}

.header-mobile-search {
    --header-mobile-searchbox-padding-y: .25rem;
}

/* Zonder border-bottom of bg-color is er geen padding-bottom nodig  */
.header-mobile-search {
    padding-bottom: var(--header-mobile-searchbox-padding-y);
    background-color: var(--grey-50);
    border-bottom: 1px solid var(--border-color); /* Todo: ipv de border op header-mobile-search, de border-top op .wrapper.content - dan is de animatie wat eleganter */
    box-shadow: var(--shadow-inner-xs);
}

/* Mobiele zoekbalk onder de header */
.mobile-searchbox {
    padding-top: var(--header-mobile-searchbox-padding-y);
}

/*----------------------------------------*/
/*----------- MOBILE MENU OPEN -----------*/
/*----------------------------------------*/
/* stop scrolling van body wanneer flyout active is */
.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

/* overlay */
#mobile_menu_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: calc(var(--mobile-menu-flyout-z-index) - 1);
}

/* mobile menu fly-out */
#mobile_menu.mobile_menu_open {
    position: relative;
    overflow: hidden;
    max-width: calc(100% - 2rem);
}

#mobile_menu {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0;
    width: 100%;
    z-index: var(--mobile-menu-flyout-z-index);
    transition-duration: .4s;
    transition-property: left;
    left: -101%;
}

/*#mobile_menu .header-mobile-col {*/
/*    flex: 1;*/
/*}*/

#mobile_menu,
.menu-header a {
    color: var(--body-text-color);
}

#mobile_menu,
.menu-header {
    background-color: #fff;
}

#mobile_menu.mobile_menu_open {
    display: block;
    left: 0;
    right: 0;
    transition-duration: .4s;
    transition-property: left;
    position: fixed;
    z-index: var(--mobile-menu-flyout-z-index);
}

#mobile_menu_container.mobile_menu_open {
    display: block;
    overflow-x: unset;
}

#mobile_menu .box_top,
#mobile_menu .box_content,
#mobile_menu select,
#mobile_menu input {
    font-size: var(--text-size-md);
}

.header-mobile-open {
    position: relative;
    display: flex;
    height: var(--header-mobile-height);
    z-index: var(--mobile-menu-flyout-z-index);

    border-bottom: var(--border-transparent-dark);
}

.header-mobile-open .header-mobile-container {
    width: 100%;
    padding-inline: .5rem 0;
    background-color: var(--header-mobile-bg-color);
}

.mobile-menu-header {
    margin-bottom: 0;
    font-size: var(--text-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--header-mobile-text-color);
}

.header-mobile-open .header-mobile-icon,
.header-mobile-open .header-mobile-icon a {
    color: var(--header-mobile-text-color);
}

#mobile_menu .box {
    background-color: transparent !important;
}

.mobile_menu_extra_items {
    display: flex;
}

.mobile_menu_language,
.mobile_menu_currencies {
    height: var(--header-mobile-height);
}

.mobile_menu_currencies #language {
    padding-left: .5rem;
}

/* Mobile categories */
#cols_mobile,
#mobile_nav_container {
    overflow-y: auto;
    height: calc(100% - var(--header-mobile-height));
}

.mobile_box .box_content {
    padding: 0;
}

.mobile_box .menu-header a.active_cat_bold {
    font-weight: 700;
}

.mobile_box .menu-header {
    position: relative;
}

.mobile_box .menu-header .item,
.sub-menu-mobile__top-menu-content .top_menu li[class*="item"] {
    --mobile-menu-item-border: 1px solid var(--border-color);

    display: block;
    padding: 0 var(--header-mobile-item-padding-x);
    height: var(--header-mobile-height);
    line-height: var(--header-mobile-height);
    cursor: pointer;
}

.mobile_box .menu-header .item {
    border-top: var(--mobile-menu-item-border);
}

.sub-menu-mobile__top-menu-content .top_menu li[class*="item"] {
    border-bottom: var(--mobile-menu-item-border);
}

.mobile_box .menu-header .submenu-toggle:has(.expand) {
    position: absolute;
    top: .25rem;
    right: 0;
    line-height: var(--header-mobile-height);
    height: var(--header-mobile-height);
    width: var(--header-mobile-height);
    text-align: center;
    cursor: pointer;
    background-color: transparent;
}

.mobile_box .menu-header .item:focus-visible,
.mobile_box .menu-header .item a:focus-visible,
.mobile_menu_extra_items .language-link:focus-visible {
    outline-offset: -2px;
}

.mobile_box .menu-header .submenu-toggle:focus-visible {
    outline-offset: -4px;
}

.categories_box.mobile_box {
    border: 0;
}

.categories_box.mobile_box .box_content .menu-content[hidden] {
    display: none;
}

@media screen and (min-width: 992px) {
    #mobile_menu.mobile_menu_open {
        max-width: calc(100% - 3rem);
    }
}

.header-mobile-top-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    background-color: var(--webshop-background-color);
}

.header-mobile-top-logo-image {
    width: auto;
}

#mobile_menu_container.contains_submenu #mobile_menu.mobile_menu_open #cols_mobile #categories {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 70px);
}

.sub-menu-mobile {
    border-top: 1px solid var(--border-color);
}

.sub-menu-mobile .top_menu li[class*="item"] a {
    color: var(--body-text-color);
}

.mobile-menu-socialmedia {
    margin-top: 1rem;
    margin-left: .5rem;
}

.sub-menu-mobile__social-media-items .menu-top-content__social-media-items {
    font-size: 1.5em;
}

.sub-menu-mobile__social-media-items .mobile-menu-socialmedia .social-media-item {
    font-size: var(--text-size-xl);
    padding: .5rem;
}

.sub-menu-mobile__social-media-items .mobile-menu-socialmedia a.social-media-item {
    color: var(--grey-500);
}

.social-media-item.facebook:hover,
.social-media-item.facebook:focus {
    color: var(--color-facebook) !important;
}

.social-media-item.twitter:hover,
.social-media-item.twitter:focus {
    color: var(--color-twitter) !important;
}

.social-media-item.pinterest:hover,
.social-media-item.pinterest:focus {
    color: var(--color-pinterest) !important;
}

.social-media-item.linkedin:hover,
.social-media-item.linkedin:focus {
    color: var(--color-linkedin-blue) !important;
}

.social-media-item.instagram:hover,
.social-media-item.instagram:focus {
    color: var(--color-instagram) !important;
}

.wwk--sidebar-mobile.wwk--sidebar-mobile-bottom {
    z-index: 99998 !important;
}

/* Van toepassing bij header-review-widget.tpl */
.header-review-link {
    margin-inline-end: var(--st-spacing-xs);
}

.header-review-count {
    font-size: var(--text-size-xs);
    color: var(--header-text-color);
    opacity: .8;
}

.header-review-count:hover,
.header-review-count:focus {
    color: var(--header-text-color-hover);
}

.header-review-score-value {
    --header-review-score-size: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--header-review-score-size);
    height: var(--header-review-score-size);
    aspect-ratio: 1;
    background-color: var(--header-text-color);
    border-radius: var(--border-radius-pill);
    margin-inline-end: .5rem;
    color: var(--header-bg-color);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size);
    line-height: normal;
}

.header-review-stars {
    --st-icon-min-size: var(--st-icon-size);
    display: flex;
    gap: .1em;
    margin-block-end: .25em;
}

/* zorgen dat bij duotone icon style de halve ster outline zelfde opacity heeft als lege ster outline */
.header-review-stars .st-icon-style-duotone.st-icon-star-half-stroke .fa-secondary {
    opacity: 1;
}

/* Note for Andert : dit oplossen met gap ipv margin-left */

.loggedin .st-icon,
.login-button .st-icon,
.site-nav-item-link .st-icon:not(.st-icon-house),
.site-nav-meer-btn .st-icon {
    margin-left: .255em;
}

.loggedin-bar .st-icon {
    margin-right: .255em;
}
:root {
    --message-border-width: var(--border-width);
    --message-padding: .5rem 1rem;
    --message-my: .5rem;

    --message-font-weight: var(--font-weight-normal);

    --message-error-text-color: var(--error-700);
    --message-error-border-color: var(--error-700);
    --message-error-background-color: var(--error-100);

    --message-warning-text-color: var(--warning-700);
    --message-warning-border-color: var(--warning-700);
    --message-warning-background-color: var(--warning-100);

    --message-success-text-color: var(--success-700);
    --message-success-border-color: var(--success-700);
    --message-success-background-color: var(--success-100);

    --message-info-text-color: var(--info-700);
    --message-info-border-color: var(--info-700);
    --message-info-background-color: var(--info-100);
}

.notification {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-size-sm);
    font-family: var(--body-font-family);
    font-weight: var(--message-font-weight);
    padding: var(--message-padding);
    border-radius: var(--btn-border-radius);
    text-align: center;
}

.notification > * {
    font-size: var(--text-size-sm);
    font-family: var(--body-font-family);
    font-weight: var(--message-font-weight);
}

.notification-info {
    background-color: var(--message-info-background-color);
    color: var(--message-info-text-color);
    border: var(--message-border-width) solid var(--message-info-border-color);
}

.messageStackError,
.messageStackSuccess,
.messageStackWarning {
    padding: 0;
    border: 0;
}

.alert-message:empty,
.message:empty {
    display: none!important;
}

.alert-message,
.messageStackInfo .message,
.messageStackSuccess .message,
.messageStackWarning .message,
.messageStackError .message,
.checkout_opc .payment_error,
#st_miscellaneous .upload_image_message {
    display: block;
    font-family: var(--body-font-family);
    font-size: var(--text-size-sm);
    font-weight: var(--message-font-weight);
    padding: var(--message-padding);
    border-radius: var(--btn-border-radius);
    text-align: center;
}

.wrapper.content table.messageStackTable,
table.messageStackTable {
    width: 100%;
}

.cart-notification div[data-bind="css: message_class"]:not(:last-of-type),
.cart-notification div[data-bind="if: position() == 'top'"]:not(:last-of-type),
.checkout_opc .payment_error:not(:last-of-type),
.messageStackErrorLeftAlign .message:not(:last-of-type),
#st_miscellaneous .upload_image_message:not(:last-of-type),
#st_miscellaneous .upload_image_message:not(:last-of-type) {
    margin-block-end: var(--message-my);
}

/*--- Error aligned left ---*/
.messageStackErrorLeftAlign .message {
    border-radius: var(--btn-border-radius);
    margin-inline-start: var(--message-my);
    text-align: left;
    background-color: var(--message-error-background-color);
    border: var(--message-border-width) solid var(--message-error-border-color);
    color: var(--message-error-text-color);
}

/*--- Error colors ---*/
.alert-message-error,
.checkout_opc .payment_error,
.messageStackError .message {
    background-color: var(--message-error-background-color);
    border: var(--message-border-width) solid var(--message-error-border-color);
    color: var(--message-error-text-color);
    margin-bottom: 2px;
}

.alert-message-warning,
.messageStackWarning .message {
    background-color: var(--message-warning-background-color);
    border: var(--message-border-width) solid var(--message-warning-border-color);
    color: var(--message-warning-text-color);
}

.alert-message-success,
.messageStackSuccess .message {
    background-color: var(--message-success-background-color);
    border: var(--message-border-width) solid var(--message-success-border-color);
    color: var(--message-success-text-color);
}

.alert-message-info,
.messageStackInfo .message {
    background-color: var(--message-info-background-color);
    border: var(--message-border-width) solid var(--message-info-border-color);
    color: var(--message-info-text-color);
}

/*--- Error icon spacing ---*/
/*.messageStackError .message i,*/
/*.messageStackSuccess .message i {*/
/*    margin-inline-end: var(--message-icon-mxe);*/
/*}*/

/*------ Shopping cart ------*/
#st_miscellaneous .error_checkout a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--message-error-text-color) !important;
    font-family: var(--body-font-family);
}

#st_miscellaneous .upload_image_message {
    color: var(--message-info-text-color);
    border: var(--message-border-width) solid var(--message-info-border-color);
    background-color: var(--message-info-background-color);
}

/*------ Checkout ------*/
.checkout-notification-container .error_checkout {
    margin-block-start: var(--message-my);
}

.checkout-notification-container .error_checkout a {
    display: flex;
    align-items: center;
    color: var(--message-error-text-color);
}

.checkout_opc .not_active_area.opc_error_red,
.checkout_opc .opc_error_red,
.checkout_opc .checkout_payment.opc .opc_error_red {
    border: var(--error-message-border-width) solid var(--message-error-border-color);
}
/* zorgen dat tussen widgets boven elkaar evenveel ruimte hebben als naast elkaar */
/* we gebruiken row-gap want dan heb je alleen maar ruimte tussen columns in de row, niet een de buitenzijde - zag er raar uit */

/* dit klopt nu eigenlijk niet. Op mobiel is container gutter --st-container-space-x , die is anders dan --bs-gutter-x */
/* Daarnaast zou dit niet een halve maar hele --bs-gutter-x moeten zijn. Maar dat valt nu nog niet op omdat de columns pas bij -lg breakpoint hebben */
/* todo: --bs-gutter-x en --st-container-space-x mergen - dan deze onderstaande niet * 0.5 ,
    de gutter zal dan smaller zijn op desktop, dan kunnen we met een media query de gutter overal op mobile kleiner maken en groter op desktop  */
.row-gutter-y {
    row-gap: calc(var(--bs-gutter-x) * .5);
}

.row-gutter-y-none {
    row-gap: 0;
}

/* De padding staat standaard aan dus deze class heeft nu nog geen toegevoegde waarde. */
/*.row-gutter-x {*/
/*    */
/*}*/

/* ik gebruik geen .gx-0 want dan is gelijk --bs-gutter-x op 0. Die kan ik dan niet gebruiken, dat is niet wenselijk. */
.row-gutter-x-none.row>* {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.widget-container-fullwidth-with-gutter {
    padding-inline: calc(var(--st-gutter-x) / 2);
}

/* is p-fluid goede naam? Aangezien het gebaseerd is op gutter? Is het met een gutter-min-value algemeen genoeg? */
:root {
    --p-fluid-min: calc(var(--st-gutter-x) * .5);
    --p-fluid-preferred: 8.33333333%; /* equal to one bootstrap column (100% / 12) */
    --p-fluid-max: 5rem;
    --p-fluid: clamp(var(--p-fluid-min), var(--p-fluid-preferred), var(--p-fluid-max));
}

.p-fluid {padding: var(--p-fluid);}
.py-fluid {padding-block: var(--p-fluid);}
.pbs-fluid {padding-block-start: var(--p-fluid);}
.pbe-fluid {padding-block-end: var(--p-fluid);}
.px-fluid {padding-inline: var(--p-fluid);}
.pis-fluid {padding-inline-start: var(--p-fluid);}
.pie-fluid {padding-inline-end: var(--p-fluid);}


/* zorgen dat .wrapper.content fullwidth is, zodat widget-sections ook fullwidth kunnen zijn.
   Alleen op pagebuilder-pagina's (.pagebuilder-page, gezet in smarty_wrapper_begin.php): daar
   zet elke widget-section zelf .bs-container terug. Op pagina's zonder pagebuilder — account,
   winkelwagen, checkout, zoekresultaten — moet de wrapper zijn eigen breedte houden, anders
   moet elk blok daarbinnen los .bs-container terugzetten wat hier wordt weggehaald. */
body:not(#st_product) .wrapper.content.no_col.pagebuilder-page:not(:has(#info-section)) {
    width: 100% !important;
    margin-inline: auto;
    padding-inline: 0;
    max-width: unset !important;
}

/*.pagebuilder-category .widget-container-fullwidth-with-gutter,*/
/*.pagebuilder-category .widget-container.bs-container {*/
/*    padding-inline: 0 !important;*/
/*    margin-inline: 0 !important;*/
/*    width: 100% !important;*/
/*}*/
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen ?????
*/


.form_section table tr td,
.form_section table tr th {
    text-align: left;
}

.form_section {
    margin-bottom: var(--gutter);
}

.form_section.nomargin {
    margin-bottom: 0;
}

.form_section.nomargin.margintop {
    margin-top: var(--gutter);
}

.form_section h2 span {
    left: .25rem;
    margin-right: .5rem;
}

.form_section h2 span.rating_stars {
    margin-right: 0;
}

.form_section h2 span.left {
    position: relative;
    top: .25rem;
    float: left;
    margin-right: .5rem;
}

input.general_input_field.no-border {
    border: 0;
    border-radius: 0;
}

.form-section .login input:not(:last-of-type) {
    margin-bottom: var(--gutter);
}

label {
    display: block;
}

input.general_input_field.medium {
    width: 125px;
}

input.general_input_field.mediumfull {
    width: 310px;
}

input.general_input_field.small {
    width: 80px !important;
}

select.big {
    width: 521px;
}

select.normal {
    width: 175px;
}

select.auto_invullen {
    width: auto;
}

.has-js .label_check,
.has-js .label_radio {
    padding-left: 34px;
}

.has-js .label_radio.no_text {
    padding-left: 22px;
}

.has-js .label_radio.no_text.small {
    padding-left: 12px;
}

.has-js .label_radio {
    background: url(/themes/11.0/images/radio/radio-off.png) no-repeat;
}

.has-js .label_check {
    background: url(/themes/11.0/images/checkbox/check-off.png) no-repeat;
}

.has-js label.c_on {
    background: url(/themes/11.0/images/checkbox/check-on.png) no-repeat;
}

.has-js label.r_on {
    background: url(/themes/11.0/images/radio/radio-on.png) no-repeat;
}

.has-js .label_check input, .has-js .label_radio input {
    position: absolute;
    left: -9999px;
}

label.label_check, label.label_radio {
    position: relative;
    /*top: 5px;*/
    cursor: pointer;
    display: inline-block;
    height: 22px;
}

label.label_check.notext {
    padding-left: 22px;
}

span.status {
    position: relative;
    margin-right: 5px;
    top: 1px;
}

.dynamic_number_input {
    min-width: 30px !important;
    max-width: 65px !important;
    transition: width .3s;
    text-align: center;
}

a.address_selected {
    display: none;
    right: 30px !important;
    color: var(--success-500);
}

.optionSelected a.address_selected {
    display: block;
}

input, select, textarea {
    font-family: var(--input-font-stack);
}

textarea {
    font-size: var(--input-font-size);
}

.form_section.box-border {
    border-color: var(--border-color);
}

/* Nieuw: */

.form-col {
    margin-bottom: 1rem;
}

input[readonly].form-control {
    background-color: var(--grey-100);
}

input[readonly].form-control::placeholder{
    color: var(--grey-500);
}

/* CSS specific to iOS devices - only Safari iOS supports -webkit-touch-callout */
@supports (-webkit-touch-callout: none) {
    /* Minimaal 16px font-size i.v.m. iOS input zoom, ook voor -sm varianten met vaste 0.875rem */
    input, select, textarea {
        font-size: max(16px, var(--input-font-size)) !important;
    }
}

textarea {
    height: 6em;
    resize: vertical;
}

/* Geboortedatum datepicker */
.ui-datepicker {
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

/* account_edit.php */
body[class~="account-edit.php"] form[name="account_edit"],

/* account_options.php */
.form-account-options,

/* account_newsletter.php */
body[class~="account-newsletters.php"] form[name="account_newsletter"],

/* account_password.php */
.form-new-password,

/* password_forgotten.php */
.password-forgotten-section,

/* guestbook_sign.tpl */
.form-guestbook,

/* create_account.php */
.form-create-account {
    max-width: var(--preferred-form-width);
    margin-inline: auto;
}
/* met zo'n groot formulier iets meer contrast met alle form-notes etc. */
.form-create-account .form-control {
    box-shadow: var(--shadow-xs);
}

.form-note {
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
    margin-bottom: 1rem;
}

.form-input-note {
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
    margin-top: .25rem;
}

/* RECAPTCHA min-height CLS */
.g-recaptcha[data-size="compact"] {
    min-height: 140px;
}

.g-recaptcha { 
    z-index: var(--recaptcha-z-index, 3000);
}

/* Numeric input field with no spinners */
.numeric-field_no-spinner {
    -moz-appearance: textfield; /* Voor Firefox */
    -webkit-appearance: none; /* Voor Safari en Chrome */
    appearance: none;
}

.numeric-field_no-spinner::-webkit-outer-spin-button,
.numeric-field_no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Verwijdert de extra ruimte */
}



/* Password checklist styling */
.password-checklist {
    list-style: none;
    margin-block: .5rem;
    margin-left: 0 !important;
}

.password-checklist li {
    display: flex;
    align-items: start;
    gap: var(--st-spacing-xs);
    padding-left: 0;
    font-size: var(--text-size-base);
}

/* icon */
.password-checklist li::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    min-width: 1em;
    mask-image: var(--password-check-icon); /* jouw groene check icoon */
    -webkit-mask-image: var(--password-check-icon);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--grey-500); /* default grijs/rood */
    flex-shrink: 0;
    margin-top: 0.2em;
}

/* kleurt tekst en icoon */
.password-checklist li.valid {
    color: var(--success-700);
}
.password-checklist li.valid::before {
    background-color: var(--usp-icon-color); /* bijv. groen */
    --password-check-icon: var(--usp-circle-check-icon-solid);
}

.password-checklist li.invalid::before {
    --password-check-icon: var(--usp-circle-check-icon-regular);
}

.password-checklist li.invalid {
    color: var(--text-color-muted);
}
/*
CSS onderverdeling
Welke pagina's / globaal: Dit zijn twee onderdelen in feite: header login en login page.
Is het cruciaal boven de vouw?: Ja, login box wel - loginpage alleen bij login page

dus ---> onderverdelen en loginpage intern op loginpage, en loginbox intern globaal bij desktop? of ook mobiel nodig?
*/




/*----------------------------------------------*/
/*----------------- LOGIN PAGE -----------------*/
/*----------------------------------------------*/
body[class~="login.php"] form[name="login"] {
    margin-top: var(--gutter);
}

body[class~="login.php"] form[name="login"] .message {
    margin-bottom: var(--gutter);
}

.login-create-account-section {
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
}

.guest-account-section,
.login-create-account-section,
.login-account-section {
    padding: var(--gutter-half) var(--gutter);
}

.guest-account-section .content_section,
.login-create-account-section .content_section,
.login-account-section .content_section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.login-account-content .login {
    margin-bottom: var(--gutter);
}

.login-account-buttons {
    margin-top: var(--gutter);
}

a.user_pass_forgotten:hover,
a.user_pass_forgotten:focus {
    color: var(--link-color-hover);
}

@media screen and (min-width: 992px) {
    .login-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: var(--gutter);
    }

    .guest-account-section,
    .login-create-account-section,
    .login-account-section {
        margin-bottom: 0;
    }
}

/*----------------------------------------------*/
/*----------------- LOGIN BOX IN HEADER ------------------*/
/*----------------------------------------------*/
.topmenu_login-button,
.header-account {
    position: relative;
}

.topmenu_login-box {
    position: relative;
}

.topmenu_login-box .login-button.clicked > a,
.topmenu_login-box .login-button.clicked > a > i {
    color: var(--topmenu-text-color-hover) !important;
}

.loggedin-bar,
#login-bar {
    position: absolute;
    z-index: var(--topmenu-z-index);
}

.account-dropdown,
#login-bar {
    top: var(--topmenu-height, 40px);
}

#loggedin-bar-header {
    --loggedin-bar-top: calc(var(--header-icons-btn-size, 40px) + .25em);
    top: var(--loggedin-bar-top, 40px);
    right: 0;
}

.loggedin-bar {
    display: none;
    background-color: transparent;
}

.loggedin-bar:not([hidden]) {
    display: block;
}

/* Geen absolute, want dan zie je de animatie nog. Anders heb je een delay */
.loggedin-bar .dropdown-menu {
    position: relative;
}

.loggedin-bar .dropdown-menu i {
    display: none;
}

.loggedin-bar .dropdown-menu a {
    line-height: 2;
}

#login-bar {
    right: 0;
    width: 275px;
    padding-block: 1.5rem;
    padding-inline: 1rem;
}

#login-bar-password,
.login-bar-submit,
#login-bar-password-forgotten,
#login-bar-create-account {
    margin-top: .5rem;
}

#login-bar-password-forgotten a:hover,
#login-bar-create-account a:hover {
    color: var(--link-color-hover);
}

.login-bar-submit {
    display: flex;
    justify-content: flex-end;
}

.loggedin {
    display: inline-flex;
    align-items: center;
}

.btn-topmenu {
    background-color: transparent;
    color: var(--topmenu-text-color);
    height: 100%;
}

.btn-topmenu:hover,
.btn-topmenu:focus,
.btn-topmenu:active {
    color: var(--topmenu-text-color-hover);
}

.loggedin-bar li .dropdown-item {
    display: flex;
    align-items: center;
}

/* todo: kijken of dit weg kan of anders waar dit moet komen te staan */
/*div.ac_results {*/
/*    border-radius: var(--border-radius-sm, 4px);*/
/*}*/






.form-create-account__login-link {
    text-align: center;
    margin-top: 1rem;
}

.form-create-account__login-link a {
    text-decoration: underline;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Is dit shoppingcart page?
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/


.shopping-cart_heading {
    margin-block-end: var(--st-spacing-md);
}

#st_miscellaneous #shipping_form > .form_section,
#st_miscellaneous #shipping_form > .form_section .form_section:last-of-type {
    margin-bottom: 0;
}

#st_miscellaneous #shoppingcart .shopping_cart_coupons,
#st_miscellaneous #shoppingcart .shopping_cart_totals,
#st_miscellaneous #shoppingcart .shopping_cart_shipping {
    width: auto;
    margin-bottom: 0;
}

#st_miscellaneous #shoppingcart > .cart-notification {
    margin-block-end: var(--section-space-y);
}


/* Bespreken: geen extra margin toevoegen. Er is namelijk al een flex-gap, anders is de afreken knop niet direct zichtbaar. */
/*#st_miscellaneous #shoppingcart .shopping_cart_coupons,*/
/*#st_miscellaneous #shoppingcart .form_section.shopping_cart_totals,*/
/*#st_miscellaneous #shoppingcart .shopping_cart_shipping,*/
/*#st_miscellaneous #shoppingCartContainer .shopping-cart_buttons {*/
/*    margin-block-start: var(--section-space-y);*/
/*}*/

#st_miscellaneous .shopping_cart article {
    border: var(--border);
    border-radius: var(--border-radius);
}

#st_miscellaneous .shopping_cart_titles {
    display: flex;
    justify-content: space-between;
    padding-bottom: .5rem;
}

#st_miscellaneous .shopping_cart.products {
    display: flex;
    flex-direction: column;
    gap: var(--st-spacing-md);
    padding: 1rem;
}

#st_miscellaneous .shopping_cart_product {
    display: flex;
    justify-content: space-between;
    width: -moz-available;
    width: -webkit-fill-available;
}

#st_miscellaneous .shopping_cart_image_and_name {
    display: flex;
}

#st_miscellaneous .shopping_cart .shopping_cart_image img {
    max-width: 75px;
    height: 75px;
    /*padding: 1rem 0 1rem 1rem;*/
}

#st_miscellaneous .shopping_cart .shopping_cart_name {
    padding: 1rem;
}

#st_miscellaneous .shopping_cart .shopping_cart_name .product_name,
#st_miscellaneous .shopping_cart .shopping_cart_name .product_name small {
    font-size: var(--text-size-xs);
}

#st_miscellaneous .shopping_cart .shopping_cart_name b {
    font-size: var(--text-size-md);
}

#st_miscellaneous .shopping_cart .shopping_cart_name b:after {
    content: "\a";
    white-space: pre;
}

#st_miscellaneous .shopping_cart .shopping_cart_name .product_name a {
    color: var(--body-text-color);
}

#st_miscellaneous .shopping_cart .shopping_cart_name .product_name a:hover {
    color: var(--link-color-hover);
}

#st_miscellaneous .shopping_cart .shopping_cart_total {
    padding: 1rem 1rem 1rem 0;
    text-align: right;
}

#st_miscellaneous .shopping_cart thead .shopping_cart_name,
#st_miscellaneous .shopping_cart thead .shopping_cart_total {
    padding-block: .5rem;
    padding-inline: 0;
}

@media screen and (min-width: 412px) {
    #st_miscellaneous .shopping_cart .shopping_cart_total {
        min-width: 85px;
    }
}

@media screen and (max-width: 575px) {
    .shopping_cart.products tr[valign="top"] {
        display: flex;
    }

    .shopping_cart.products .shopping_cart_image,
    .shopping_cart.products .shopping_cart_total {
        flex: 1;
    }

    .shopping_cart.products .shopping_cart_name {
        flex: 2;
    }

    .shopping_cart.products .shopping_cart_total {
        display: inline-flex;
        justify-content: flex-end;
    }
}

#st_miscellaneous .shopping_cart_actions .cart_aantal {
    padding-right: .5rem;
    min-height: 38px;
    display: flex;
    align-items: center;
}

#st_miscellaneous .shopping_cart_actions .cart_count {
    margin-right: 1rem;
}

#st_miscellaneous .shopping_cart_actions .cart_spinner {
    margin-right: .5rem;
}

@media screen and (max-width: 359px) {
    #st_miscellaneous .shopping_cart_actions .cart_aantal {
        padding-right: .25rem;
    }

    #st_miscellaneous .shopping_cart_actions .cart_count {
        margin-right: .25rem;
    }

    #st_miscellaneous .shopping_cart_actions .cart_spinner {
        margin-right: .25rem;
    }
}

#st_miscellaneous .shopping_cart_actions .cart_remove a {
    color: var(--body-text-color);
}

/*.shopping_cart_actions .cart_spinner,*/
/*.shopping_cart_actions .cart_remove {*/
/*    margin-top: 2px;*/
/*}*/

/*@media screen and (min-width: 120px) and (max-width: 479px) {*/
/*    #st_miscellaneous .shopping_cart tr td.col1 {*/
/*        width: 50px;*/
/*    }*/

/*    #st_miscellaneous .shopping_cart tr td.col1 div.product_image {*/
/*        height: 50px;*/
/*        text-align: center;*/
/*    }*/
/*}*/

/*@media screen and (min-width: 480px) and (max-width: 724px) {*/
/*    #st_miscellaneous .shopping_cart tr td.col1 {*/
/*        width: 75px;*/
/*    }*/

/*    #st_miscellaneous .shopping_cart tr td.col1 div.product_image {*/
/*        height: 75px;*/
/*        text-align: center;*/
/*    }*/
/*}*/

@media screen and (min-width: 120px) and (max-width: 962px) {
    #st_miscellaneous #shoppingcart .form_section {
        width: -webkit-fill-available;
        width: -moz-available;
    }
}

/*@media screen and (min-width: 725px) and (max-width: 962px) {*/
/*    #st_miscellaneous .shopping_cart.mobile tr td.shopping_cart_name {*/
/*        width: 474px;*/
/*    }*/

/*    #st_miscellaneous .shopping_cart.mobile tr td.shopping_cart_name div.product_name {*/
/*        position: relative;*/
/*        width: 474px;*/
/*        white-space: nowrap;*/
/*        overflow: hidden;*/
/*        text-overflow: ellipsis;*/
/*    }*/
/*}*/

/*#st_miscellaneous .shopping_cart.mobile tr td.shopping_cart_price,*/
/*#st_miscellaneous .shopping_cart.mobile tr th.shopping_cart_price {*/
/*    padding-left: 1rem;*/
/*    padding-right: 1rem;*/
/*    padding-bottom: 1rem;*/
/*}*/

/*#st_miscellaneous #content #shoppingcart td.shopping_cart_price a {*/
/*    text-decoration: none;*/
/*}*/

#st_miscellaneous #shoppingcart .cart_button,
#st_miscellaneous #shoppingcart .cart_button a,
#st_miscellaneous #shoppingcart .cart_button input {
    position: relative;
    float: left;
}

#st_miscellaneous #shoppingcart .cart_button.cart_remove,
#st_miscellaneous #shoppingcart .opc_cart_price {
    position: relative;
    float: right;
}

/*#st_miscellaneous #shoppingcart div.cart_button.cart_remove i {*/
/*    position: relative;*/
/*    left: 1px;*/
/*}*/

/*#st_miscellaneous #shoppingcart div.cart_button.cart_remove a {*/
/*    display: block;*/
/*}*/

/*#st_miscellaneous #shoppingcart div.cart_button.pointer {*/
/*    cursor: pointer;*/
/*}*/

/*#st_miscellaneous #shoppingcart div.ui-spinner {*/
/*    position: relative;*/
/*    top: 2px;*/
/*    margin-left: 10px;*/
/*}*/

#st_miscellaneous #shoppingcart table.checkout_shipping tr:hover {
    cursor: unset;
}

#st_miscellaneous #shoppingcart table.checkout_shipping tr:hover td {
    background-color: inherit;
}

/*#st_miscellaneous #shoppingcart .coupon tbody tr {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(2, auto);*/
/*}*/

/*#st_miscellaneous #shoppingcart .coupon tbody tr td {*/
/*    display: flex;*/
/*    padding: 0;*/
/*}*/

/*#st_miscellaneous #shoppingcart .coupon tbody tr td:last-of-type {*/
/*    justify-content: flex-end;*/
/*    align-items: flex-start;*/
/*}*/

#st_miscellaneous .coupon-wrapper-cart {
    margin-inline-end: var(--st-spacing-md) !important;
}

@media screen and (max-width: 375px) {
    #st_miscellaneous .coupon-wrapper-cart,
    #st_miscellaneous .coupon-wrapper-cart input {
        width: 120px;
    }
}

/*@media screen and (min-width: 415px) {*/
/*    #st_miscellaneous #shoppingcart .coupon tbody tr td {*/
/*        align-items: center;*/
/*    }*/
/*}*/

@media screen and (max-width: 399px) {
    #st_miscellaneous #shoppingcart .cart_button.cart_remove {
        float: unset !important;
    }

    #st_miscellaneous #shoppingcart .cart_button {
        margin-top: .5rem;
    }
}

#st_miscellaneous #shoppingcart #total {
    background-color: var(--grey-100);
}

/*#st_miscellaneous #shoppingcart > div:nth-of-type(5) .store_info_text {*/
#st_miscellaneous #shoppingcart #shoppingcart-calculate-shipping .store_info_text {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: -moz-available;
    width: -webkit-fill-available;
    border: 1px solid var(--info-700);
    color: var(--info-700);
    background-color: var(--info-50);
    padding: .25rem .5rem;
    margin: 1rem 0;
    border-radius: var(--border-radius);
}

/*#st_miscellaneous #shoppingcart > div:nth-of-type(5) .store_info_text tbody > tr > td:nth-of-type(2) {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*}*/

/*#st_miscellaneous #shoppingcart #total,*/
/*#st_miscellaneous #shoppingcart > div:nth-of-type(3),*/
/*#st_miscellaneous #shoppingcart > div:nth-of-type(5) {*/
#st_miscellaneous #shoppingcart #total,
#st_miscellaneous #shoppingcart #shoppingcart-coupons,
#st_miscellaneous #shoppingcart #shoppingcart-calculate-shipping {
    border: var(--border);
    border-radius: var(--border-radius);
    padding: var(--st-spacing-md);
}

#shoppingcart .form_section.shopping_cart_totals tr.order_total td:last-of-type {
    text-align: right;
}

/*cart notifications*/
.cart-notification {
    box-shadow: none;
}

.cart-notification h2 {
    padding-block: .25rem;
}

#st_miscellaneous .shopping-cart_buttons {
    --shopping-cart-buttons-margin-y: var(--gutter);

    display: flex;
    justify-content: space-between;
    margin-top: var(--shopping-cart-buttons-margin-y);
}

@media screen and (max-width: 767px) {
    #st_miscellaneous .shopping-cart_buttons {
        flex-direction: column;
    }

    #st_miscellaneous .shopping-cart_buttons .checkout-nav-options,
    #st_miscellaneous .shopping-cart_buttons a,
    #st_miscellaneous .shopping-cart_buttons button,
    #st_miscellaneous .error-message {
        width: -webkit-fill-available;
        width: -moz-available;
    }

    #st_miscellaneous .shopping-cart_buttons .back_buttons > div,
    #st_miscellaneous .shopping-cart_buttons .checkout_buttons > div:not(:last-of-type) {
        margin-bottom: .5rem;
    }
}

#st_miscellaneous .checkout_buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#st_miscellaneous .checkout_buttons .error-message:not(:empty) {
    margin-top: .5rem;
}

/* UPLOAD IMAGE */
#st_miscellaneous .upload_image p {
    font-size: var(--text-size-xs);
}

#st_miscellaneous .upload_image_message span {
    color: inherit !important;
}

#st_miscellaneous .upload_image_message-uploaded {
    margin-block-start: .5rem;
}

/* spaarpunten op winkelwagenpagina */
.savings_cards {
    margin-block-end: var(--gutter);
}

.savings_cards .block:not(:empty) {
    margin-block-start: var(--st-spacing-md);
}

/*!* hoort bij kader op shopping_cart *!*/
/*table.shopping_cart a{*/
/*    color: var(--body-text-color);*/
/*}*/

/*todo: waar komt #shopping-cart-carrousel voor? */
/*!*Items same height with flex properties on parents and children*!*/
/*#shopping-cart-carrousel .owl-stage {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    float: left;*/
/*}*/

/*#shopping-cart-carrousel .owl-item {*/
/*    display: flex;*/
/*    margin-right: 10px;*/
/*}*/

/*#shopping-cart-carrousel .item {*/
/*    border: 1px solid #eaeaea;*/
/*    border-radius: 5px;*/
/*    min-width: 150px !important;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    flex-wrap: wrap;*/
/*    flex: auto;*/
/*}*/

/*#shopping-cart-carrousel .products_gallery_row_name {*/
/*    flex: 1 1 auto;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/

/*#shopping-cart-carrousel .item {*/
/*    border: 1px solid #eaeaea;*/
/*    min-width: 150px !important;*/
/*    width: calc(100% - 20px);*/
/*}*/

/*@media screen and (max-width: 725px){*/
/*    #shopping-cart-carrousel .item {*/
/*        width: calc(100% - 20px);*/
/*    }*/
/*}*/

/*#shopping-cart-carrousel .owl-item {*/
/*    margin-right: 10px;*/
/*}*/

/*#shopping-cart-popup-carrousel .owl-nav{*/
/*    display: none;*/
/*}*/

/*------ Shopping cart layout 1 (2 columns, stacked) ------*/
.shopping-cart-content-wrapper {
    gap: 1rem;
}

@media screen and (min-width: 992px) {
    .shopping-cart-content-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .shopping-cart-content-wrapper #shipping_form {
        grid-column: 1 / span 2;
    }
}

@media screen and (max-width: 991px) {
    .shopping-cart-content-wrapper {
        display: flex;
        flex-direction: column;
    }
}
/*!**/
/*CSS onderverdeling*/
/*Welke pagina's / globaal: Checkout iig*/
/*Is het cruciaal boven de vouw?: JA*/

/*dus ---> Intern inladen op sws checkout*/
/**!*/

.checkout-form {
    --checkout-radio-button-width: 22px;
    --checkout-radio-button-height: 22px;
    --checkout-product-image-width: 75px;
    --checkout-product-image-height: 75px;
    --checkout-grid-price-cell-width: 75px;
    --checkout-header-price-cell-width: calc(var(--checkout-grid-price-cell-width) + var(--checkout-radio-button-width));
    --checkout-payment-image-width: 65px;
    --checkout-payment-image-height: 40px;
}

.checkout-form {
    margin-block-start: var(--gutter);
}

.checkout_opc .checkout-form {
    display: grid;
    gap: var(--gutter);
}

.checkout_opc .checkout-form {
    grid-template-columns: 1fr;
}

@media screen and (min-width: 900px) {
    .checkout_opc .checkout-form {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*------ Columns ------*/
.left_col_opc .checkout-customer-col,
.left_col_opc .checkout-customer-col #cpCustomer,
.mid_col_opc #cpShipping > div,
.mid_col_opc #cpPayment > div,
.right_col_opc #cpConfirm > div {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--gutter);
}

.mid_col_opc #cpPayment {
    margin-block-start: var(--gutter);
}

/*------ Steps ------*/
.checkout-form .stap-container {
    display: flex;
    align-items: center;
    gap: var(--st-spacing-xs);
}

.checkout-form .stap-container .stap-heading h2 {
    margin-bottom: 0;
}

.checkout-form .stap {
    --stap-text-color: var(--success-600);
    --stap-bg-color: var(--success-50);
    --stap-border-color: var(--success-500);
    --stap-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: var(--stap-size);
    height: var(--stap-size);
    line-height: var(--stap-size);
    font-size: var(--text-size-lg);
    background-color: var(--stap-bg-color);
    color: var(--stap-text-color);
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--stap-border-color);
}

/* checkout formulier een kleinere gutter */
.form-checkout .row {
    --bs-gutter-x: 1rem !important;
}

/*------ Radio buttons ------*/
.checkout-form .checkout_payment .radio,
.checkout-form .checkout_shipping .radio,
.checkout-form .shipping_methods .radio {
    background-position: center center;
    background-image: url(/themes/11.0/images/radio/radio-off.png);
    background-repeat: no-repeat;
    width: var(--checkout-radio-button-width);
    height: var(--checkout-radio-button-height);
    cursor: pointer!important;
}

.checkout-form .checkout_payment .optionSelected .radio,
.checkout-form .checkout_shipping .optionSelected .radio,
.checkout-form .shipping_methods .optionSelected .radio,
.checkout-form .checkout_shipping .timeframes .option.active .radio {
    background-position: center center;
    background-image: url(/themes/11.0/images/radio/radio-on.png);
    background-repeat: no-repeat;
    width: var(--checkout-radio-button-width);
    height: var(--checkout-radio-button-height);
}

/*------ Active row option ------*/
.checkout-form .optionSelected {
    background-color: var(--grey-50);
    border-radius: var(--border-radius);
}

/*------ Checkout Customer ------*/
.checkout-customer-section-divider {
    --divider-line-width: 1px;
    --divider-color: var(--grey-300);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--gutter);
}

.checkout-customer-section-divider p {
    color: var(--divider-color);
    font-size: var(--h4-font-size);
}

.checkout-customer-section-divider::before,
.checkout-customer-section-divider::after {
    content: "";
    border-top: var(--divider-line-width) double var(--divider-color);
    align-self: center;
}

#st_checkout .tep_meta_continue,
#st_checkout .tep_meta_login {
    padding: 0 !important;
}

@media screen and (max-width: 767px) {
    #st_checkout .tep_meta_continue .configuration_btn,
    #st_checkout .tep_meta_login .configuration_btn {
        width: -webkit-fill-available;
        width: -moz-available;
    }
}

#st_checkout .tep_meta_continue {
    position: relative;
    float: right;
}

#st_checkout .tep_meta_login {
    position: relative;
}

#st_checkout .tep_meta_continue a,
#st_checkout .tep_meta_general a {
    position: relative;
}


.checkout-form #cpCustomer .optionSelected td {
    padding: .5rem;
    border-radius: var(--border-radius-small);
}

/*--- Shipping methods ---*/
.checkout-form .store_info_text {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.checkout-shipping-item-wrapper {
    display: grid;
    grid-template-columns: 1fr var(--checkout-grid-price-cell-width) var(--checkout-radio-button-width);
    gap: .5rem;
    padding: .5rem;
    cursor: pointer;
}

.checkout-form .checkout_shipping_header {
    display: grid;
    grid-template-columns: 1fr var(--checkout-header-price-cell-width);
    gap: .5rem;
    padding: .5rem 1rem .5rem .5rem;
}

.checkout-form .checkout_shipping_heading {
    font-weight: var(--font-weight-bold);
}

#st_checkout .bezorgmethode_placeholder .checkout_shipping.opc .currency_procent {
    display: none;
}

.checkout-form .checkout_shipping .timeframes {
    padding: var(--st-spacing-xs) 0 var(--st-spacing-xs) var(--st-spacing-xs);
}

.checkout-form .checkout_shipping .timeframes .timeframes-slider ul.option-list {
    list-style: none;
    margin-inline-start: 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--st-spacing-xs);
}

.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option {
    border-radius: var(--border-radius);
}

.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option:hover,
.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option:focus,
.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option.active {
    background-color: var(--grey-50);
}

.checkout-form .checkout_shipping .timeframes .timeframes-slider li.option .content {
    display: flex;
    gap: var(--st-spacing-md);
    align-items: center;
    padding: var(--st-spacing-xs);
}

/*--- Payment methods ---*/
.checkout-payment-item-wrapper {
    display: grid;
    grid-template-columns: 1fr var(--checkout-radio-button-width);
    padding: .5rem;
    cursor: pointer;
}

.checkout-payment-item {
    display: grid;
    /*grid-template-columns: var(--checkout-payment-image-width) 1fr 1fr 0;*/
    grid-template-columns: var(--checkout-payment-image-width) 1fr 0;
    gap: .5rem;
}

.checkout-payment-item:has(div[data-bind="visible: issuerData().length > 0 && !$root.idealBanksDropdown"]:not([style="display: none;"])) {
    grid-template-columns: var(--checkout-payment-image-width) 1fr 2fr 0;
}

.checkout-payment-item:has(select:empty) {
    grid-template-columns: var(--checkout-payment-image-width) 1fr 0;
}

.checkout-payment-item div[data-bind="visible: issuerData().length > 0 && !$root.idealBanksDropdown"] .pay_issuer_list {
    display: grid;
    grid-template-columns: var(--checkout-radio-button-width) 1fr;
    gap: .5rem;
}

.checkout-payment-item div[data-bind="visible: issuerData().length > 0 && !$root.idealBanksDropdown"] .pay_issuer_list .pay_issuer_image {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;

    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .5rem;
}

.checkout-payment-item div[data-bind="visible: issuerData().length > 0 && !$root.idealBanksDropdown"] .pay_issuer_list .pay_issuer_image.paynl_ideal {
    display: block;
}

.checkout-form .checkout-payment-image img {
    max-width: var(--checkout-payment-image-width);
    max-height: var(--checkout-payment-image-height);
    vertical-align: middle;
}

/*--- Totals ---*/
.checkout-form .shopping_cart_item {
    display: grid;
    grid-template-columns: var(--checkout-product-image-width) 1fr var(--checkout-product-image-width);
    padding: .5rem;
    margin-block: .5rem;
    gap: .5rem;
    background-color: var(--grey-50);
    border-radius: var(--border-radius);
}

.checkout-form .shopping_cart_image img {
    max-width: var(--checkout-product-image-width);
    max-height: var(--checkout-product-image-height);
    border-radius: var(--border-radius);
    vertical-align: middle;
}

.checkout-form .shopping_cart_price {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-end;
}

.checkout-form .cart_button.cart_aantal {
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
}

.checkout-form .opc_cart_price {
    font-weight: var(--font-weight-bold);
}

.checkout-form .order_total {
    display: grid;
    grid-template-columns: 1fr var(--checkout-grid-price-cell-width);
    gap: .5rem;
    padding: .25rem .5rem;
    border-bottom: 1px solid var(--grey-200);
}

.checkout-form .order_total:last-child {
    border-bottom: 0;
}

.checkout-form .order_total_confirmation .order_total div:not([data-bind="html: title"]) {
    text-align: right;
}

.checkout-form .order_total_confirmation .order_total:nth-child(3) {
    font-weight: var(--font-weight-bold);
}

/*--- Totals - Buttons ---*/
#st_checkout .checkout_totals_submit {
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.25rem;
}

#st_checkout .checkout_totals_submit button.configuration_button_submit.has_icon_right .st-icon {
    margin-left: 0;
}

#st_checkout .checkout_totals_submit button.configuration_button_submit.has_icon_right div {
    margin-left: .5rem;
}

#st_checkout .checkout_totals_submit button.configuration_button_submit div[data-bind="visible: !busyCheckingOut()"] {
    display: inline-flex;
    align-items: center;
}

/*--- Terms and conditions ---*/
.algemene_voorwaarden > div:not(:first-child){
    margin-top: .5rem;
}

/*--- Terms and conditions - Checkboxes ---*/
.checkout_page_checkbox,
.terms-and-conditions .opc_label {
    display: flex;
    align-items: start;
}

/*--- Retour ---*/
textarea#retour_commenting {
    width: 300px;
    height: 50px;
    min-height: 50px;
    min-width: 300px;
    max-height: 50px;
    max-width: 300px;
}

div.retour_image img {
    margin-right: .5rem;
    max-height: 75px !important;
    max-width: 75px !important;
}

.form_section.form_section--retour textarea {
    min-height: 75px !important;
    max-height: 75px !important;
    height: 75px !important;
}

/*--- Boekuwzending---*/
#boekuwzending_pickup_block{
    background-color: var(--grey-50);
}

#boekuwzending_pickup_block .custom-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0.6rem;
    margin-bottom: 0.4rem;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Hover effect */
#boekuwzending_pickup_block .custom-radio:hover {
    border-color: #ccc;
    background-color: #f8f8f8;
}

/* Radio-mark styled als afbeelding (compatibel met checkout-stijl) */
#boekuwzending_pickup_block .radio-mark {
    width: var(--checkout-radio-button-width);
    height: var(--checkout-radio-button-height);
    background-image: url(/themes/11.0/images/radio/radio-off.png);
    background-position: center center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Wanneer geselecteerd */
#boekuwzending_pickup_block input[type="radio"]:checked + .radio-mark {
    background-image: url(/themes/11.0/images/radio/radio-on.png);
}

/* Verberg native radio */
#boekuwzending_pickup_block input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* De blok met tekst rechts */
.boekuwzending_pickup_block_name {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Tekst opmaak */
.boekuwzending_pickup_block_name .title {
    font-weight: bold;
    font-size: 0.95rem;
}

.boekuwzending_pickup_block_name .address {
    color: #555;
    font-size: 0.85rem;
}

.boekuwzending_pickup_block_name .tipso.tipso_style {
    display: unset;
}
/* LET OP: Ook CSS aanwezig in views/bernini/cssbuilder/dynamic4000.css.tpl zoek op: "Language Switch" */
/*-------- CSS in dynamic4000.css.tpl is gerelateerd aan language sswitch in topmenu */

/*.language-popup {*/
/*    display: none;*/
/*}*/

/*.language-popup.active {*/
/*    display: block;*/
/*}*/

.language-popup-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--st-spacing-xs);
}

.language-popup-button .language-flag {
    display: flex;
}

.language-popup .form_section label {
    font-weight: var(--font-weight-bold);
}

.language-popup-button_text {
    display: flex;
    gap: .25em;
    color: var(--header-icons-color);
}

.language-popup-button_lang-key,
.language-popup-button_valuta-key {
    text-transform: uppercase;
}

.language-popup-button_valuta-key {
    display: flex;
    gap: .25em;
}

.language-popup-button_valuta-key > span:empty {
    display: none;
}

.language-popup-close {
    cursor: pointer;
}

.language-popup .modal-content {
    max-width: var(--preferred-form-width);
}
/* Topmenu en mobiel menu weergave van valuta */
.topmenu #currencies_container,
#mobile_menu .mobile_menu_currencies {
    display: flex;
    justify-content: center;
    align-items: center;
}

.topmenu .currencies_controller select[name="currency"],
#mobile_menu .currencies_controller select[name="currency"] {
    border: none;
    cursor: pointer;
}

.topmenu .currencies_controller select[name="currency"] {
    --input-text-color: var(--topmenu-text-color);
    --input-bg-color: var(--topmenu-bg-color);
}

.topmenu #currencies_container:before,
#mobile_menu .mobile_menu_currencies:before {
    content: "";
    height: 1.5em;
    width: var(--border-width);
    background-color: var(--topmenu-text-color);
    margin-inline: var(--st-spacing-2xs);
}

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen - zeker weten
*/

/*============================== BREADCRUMBS ==============================*/

/* Basisstijl voor de breadcrumblijst */
.breadcrumbs-listing {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
}

/* Stijl per breadcrumb-item */
.breadcrumbs-listing .breadcrumb {
    display: flex;
    align-items: center;
    color: var(--body-text-color);
    text-decoration: none;
}

.breadcrumbs-listing li,
.breadcrumbs-listing a {
    font-size: var(--text-size-sm);
}

/* Stijl scheidingsteken */
.breadcrumbs-listing .raquo {
    margin: 0 .25rem;
}

/* Optioneel: hover effect */
.breadcrumbs-listing .breadcrumb a:hover,
.breadcrumbs-listing .breadcrumb a:focus {
    color: var(--link-color-hover);
    text-decoration: underline;
}

/*============================== BREADCRUMBS SCROLLABLE ==============================*/
/* Scrollbare container op alle schermformaten */
.breadcrumbs-scroll-container {
    width: 100%;
    overflow: hidden;
}

.breadcrumbs-scroll-container .breadcrumbs-listing {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-height: none; /* for Firefox */
    scrollbar-width: none; /* for Firefox */
}

.breadcrumbs-scroll-container .breadcrumbs-listing::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen (?)
*/

.cart_button.cart_spinner,
.cart_button.cart_remove,
a.configuration_btn,
.configuration_btn,
#wishlist_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    border-radius: var(--btn-border-radius);
    border-style: solid;
    border-width: var(--btn-border-width);
    text-transform: var(--btn-text-transform);
    line-height: var(--btn-line-height);
}

.cart_button {
    cursor: pointer;
}

/*hack - voortaan gwn btn class gebruiken*/
.cart_button.cart_remove > a {
    line-height: .5 !important;
}

a.configuration_btn,
.configuration_btn,
#wishlist_button {
    font-size: var(--btn-font-size);
    padding: var(--btn-padding);
}

/* Nieuw */
a.configuration_btn i[class*="icon"],
.configuration_btn i[class*="icon"]{
    font-size: .8em;
}

.cart_button.cart_spinner,
.cart_button.cart_remove {
    padding: var(--btn-padding-block);
}


/*weggehaald - wenselijk dit per geval apart te bepalen. Met een class zoals 'btn-block' + 'btn-md-auto' ofzo  */
/*@media screen and (max-width: 767px) {*/
/*    .btn {*/
/*        width: -moz-available;*/
/*        width: -webkit-fill-available;*/
/*    }*/

/*    .back_to_listing .btn,*/
/*    .btn-wishlist.btn,*/
/*    .input-group .btn {*/
/*        width: auto;*/
/*    }*/
/*}*/



/* ---- PRIMARY ---- */
.configuration_button_productinfo, /*artikelinformatiepagina winkelwagen button*/
.configuration_button_submit { /*winkelwagen, afrekenknop button*/
    color: var(--btn-primary-text-color);
    background-color: var(--btn-primary-bg-color);
    border-color: var(--btn-primary-border-color);
}

.configuration_button_productinfo:hover,
.configuration_button_productinfo:focus,
.configuration_button_submit:hover,
.configuration_button_submit:focus {
    color: var(--btn-primary-text-color-hover) !important;
    background-color: var(--btn-primary-bg-color-hover);
    border-color: var(--btn-primary-border-color-hover);
}
/* ---- END PRIMARY ---- */

/* ---- PRIMARY ---- */
.configuration_button_listing_submit { /*artikeloverzicht winkelwagen button*/
    color: var(--btn-primary-text-color);
    background-color: var(--btn-primary-bg-color);
    border-color: var(--btn-primary-border-color);
}

.configuration_button_listing_submit:hover,
.configuration_button_listing_submit:focus {
    color: var(--btn-primary-text-color-hover);
    background-color: var(--btn-primary-bg-color-hover);
    border-color: var(--btn-primary-border-color-hover);
}
/* ---- END PRIMARY  ---- */

/* ---- SECONDARY ---- */
.configuration_btn.product_listing_quotation_button,
.configuration_button_general { /*artikeloverzicht details button*/
    color: var(--btn-secondary-text-color);
    background-color: var(--btn-secondary-bg-color);
    border-color: var(--btn-secondary-border-color);
}

.configuration_btn.product_listing_quotation_button:hover,
.configuration_btn.product_listing_quotation_button:focus,
.configuration_button_general:hover,
.configuration_button_general:focus {
    color: var(--btn-secondary-text-color-hover);
    background-color: var(--btn-secondary-bg-color-hover);
    border-color: var(--btn-secondary-border-color-hover);
}
/* ---- END SECONDARY ---- */

/* ---- TERTIARY ---- */ /*Overige knoppen*/

/* productlisting detailsknop */
.configuration_button_listing {
    color: var(--btn-tertiary-text-color);
    background-color: var(--btn-tertiary-bg-color);
    border-color: var(--btn-tertiary-border-color);
}


/* productlisting detailsknop */
.configuration_button_listing:hover,
.configuration_button_listing:focus {
    color: var(--btn-tertiary-text-color-hover);
    background-color: var(--btn-tertiary-bg-color-hover);
    border-color: var(--btn-tertiary-border-color-hover);
}

.configuration_button_general {
    padding: var(--btn-padding-block) var(--btn-padding-inline) !important;
    margin: 0 var(--btn-onhover-underline-margin-inline);
}

/* underline tertiairy button styling */
/*.configuration_button_general:not(.btn-prev-next):before {*/
/*    display: var(--btn-onhover-underline-display);*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 0;*/
/*    height: var(--btn-onhover-underline-height);*/
/*    bottom: var(--btn-onhover-underline-bottom);*/
/*    left: 0;*/
/*    background-color: var(--btn-tertiary-text-color-hover);*/
/*    visibility: hidden;*/
/*    transition: all 0.3s ease-in-out;*/
/*    border-radius: var(--btn-onhover-underline-border-radius);*/
/*}*/

/*.configuration_button_general:not(.btn-prev-next):hover:before {*/
/*    visibility: visible;*/
/*    width: 100%;*/
/*}*/
/*---- END TERTIARY ----*/

.btn .fa-icon:before {
    --st-icon-size: var(--btn-line-height);
    --icon-align-y: bottom;
}

/*.btn-icon .fa-icon:before {*/
/*    min-width: 0;*/
/*}*/

.btn-close .st-icon {
    --st-icon-size: 1.4rem;
}

.btn-primary .fa-icon:before {
    --icon-color: var(--btn-primary-text-color);
}

.btn-primary:hover .fa-icon:before,
.btn-primary:focus .fa-icon:before {
    --icon-color: var(--btn-primary-text-color-hover);
}

.btn-secondary .fa-icon:before {
    --icon-color: var(--btn-secondary-text-color);
}

.btn-secondary:hover .fa-icon:before,
.btn-secondary:focus .fa-icon:before {
    --icon-color: var(--btn-secondary-text-color-hover);
}

.btn-tertiary .fa-icon:before {
    --icon-color: var(--btn-tertiary-text-color);
}

.btn-tertiary:hover .fa-icon:before,
.btn-tertiary:focus .fa-icon:before {
    --icon-color: var(--btn-tertiary-text-color-hover);
}

.btn-transparent .fa-icon:before {
    --icon-color: var(--btn-transparent-text-color);
}

.btn-transparent:hover .fa-icon:before,
.btn-transparent:focus .fa-icon:before {
    --icon-color: var(--btn-transparent-text-color-hover);
}

/*---- START TRANSPARENT ----*/

.cart_button.cart_remove,
.cart_button.cart_remove i,
.cart_button.cart_spinner,
.btn-transparent {
    --btn-transparent-text-color: var(--grey-900);
    --btn-transparent-text-color-hover: var(--grey-500);
    --btn-transparent-bg-color: transparent;
    --btn-transparent-bg-color-hover: transparent;
    --btn-transparent-border-color: transparent;
    --btn-transparent-border-color-hover: transparent;
    --btn-transparent-danger-text-color-hover: var(--error-600);
    --btn-transparent-danger-bg-color-hover: transparent;
    --btn-transparent-danger-border-color-hover: transparent;

    color: var(--btn-transparent-text-color);
    background-color: var(--btn-transparent-bg-color);
    border-color: var(--btn-transparent-border-color);
}

.cart_button.cart_spinner:hover,
.cart_button.cart_spinner:focus,
.btn-transparent:hover,
.btn-transparent:focus {
    color: var(--btn-transparent-text-color-hover);
    background-color: var(--btn-transparent-bg-color-hover);
    border-color: var(--btn-transparent-border-color-hover);
}

.btn-icon.btn-transparent .fa-icon:before {
    padding: 0 5px;
}

.btn-transparent .fa-icon:before {
    --icon-color: var(--btn-transparent-text-color);
}

.btn-transparent:hover .fa-icon:before,
.btn-transparent:focus .fa-icon:before {
    --icon-color: var(--btn-transparent-text-color-hover);
}

/* DANGER BUTTONS */
.cart_button.cart_remove:hover,
.cart_button.cart_remove:focus,
.cart_button.cart_remove:hover .st-icon,
.cart_button.cart_remove:focus .st-icon {
    color: var(--btn-transparent-danger-text-color-hover);
    background-color: var(--btn-transparent-danger-bg-color-hover);
    border-color: var(--btn-transparent-danger-border-color-hover);
}

/*---- END TRANSPARENT ----*/

.configuration_btn i {
    margin-right: 4px;
}

.configuration_btn i.align-right {
    margin-right: 0;
    margin-left: 4px;
}

.wrapper.col_right:not(.col_left) #PRODUCT_INFO_PRICE_BOX #productinfo_price_buttons_right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#PRODUCT_INFO_PRICE_BOX #productinfo_price_buttons_right {
    display: inline-flex;
    justify-content: flex-end;
}

#PRODUCT_INFO_PRICE_BOX #productinfo_price_box_buttons {
    display: inline-flex;
    align-items: flex-end;
    flex-wrap: wrap;
}

.productinfo_sold_out_overzicht span.configuration_button_listing_submit,
.productinfo_sold_out_overzicht:hover span.configuration_button_listing_submit{
    color: var(--color-error) !important;
    background-color: transparent !important;
}

/*close buttons*/
.btn-close,
.close,
.closein3 {
    color: var(--grey-400);
}

.btn-close:hover,
.btn-close:focus,
.close:hover,
.closein3:hover,
.close:focus,
.closein3:focus {
    color: var(--grey-700);
    cursor: pointer;
}

.btn-close .st-icon > svg,
.close .st-icon > svg,
.closein3 .st-icon > svg {
    min-width: 1.5em;
    min-height: 1.5em;
}

/*whatsapp button*/
.whatsapp-button {
    position: fixed;
    bottom: 0;
    left: 10px;
    z-index: 4;
    filter: var(--drop-shadow-sm);
}

/*product options (product info page)*/
ul.addon_radios_ul{
    list-style-type: none;
    margin-left: 0 !important;
}
ul.addon_radios_ul .addon_product_option{
    --btn-product-options-text-color: var(--grey-800);
    --btn-product-options-border-color: var(--grey-200);
    --btn-product-options-bg-color: var(--grey-50);

    --btn-product-options-text-color-selected: var(--supporting-800);
    --btn-product-options-border-color-selected: var(--supporting-400);
    --btn-product-options-bg-color-selected: var(--supporting-200);

    --btn-product-options-text-color-inactive: var(--grey-400);
    --btn-product-options-border-color-inactive: var(--btn-product-options-border-color);
    --btn-product-options-bg-color-inactive: var(--btn-product-options-bg-color);

    --btn-product-options-border-radius: var(--border-radius-small);
    --btn-product-options-border-width: 1px;
    --btn-product-options-padding: 1rem;

    display: inline-block;
    margin: .125rem;
    height: 0;
    line-height: 0;
    border-radius: var(--btn-product-options-border-radius);
}

ul.addon_radios_ul .addon_product_option input.hidden_radios{
    /*display: none;*/
    /*visibility: hidden;*/
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Active */
ul.addon_radios_ul .addon_product_option{
    box-shadow: 0 0 0 var(--btn-product-options-border-width) var(--btn-product-options-border-color);
    color: var(--btn-product-options-text-color);
    background-color: var(--btn-product-options-bg-color);
    padding: var(--btn-product-options-padding);
    line-height: 0;
    cursor: pointer;
    transition: 300ms all ease;
}

/* Active, selected / hover */
ul.addon_radios_ul .addon_product_option.addon_selected_option,
ul.addon_radios_ul .addon_product_option:hover,
ul.addon_radios_ul .addon_product_option:focus {
    box-shadow: 0 0 0 var(--btn-product-options-border-width) var(--btn-product-options-border-color-selected);
    color: var(--btn-product-options-text-color-selected);
    background-color: var(--btn-product-options-bg-color-selected);
    /*padding: var(--btn-product-options-padding);*/
    /*transition: 300ms all ease;*/
}


/* NOT active */
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active,
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active.addon_selected_option {
    color: var(--btn-product-options-text-color-inactive);
    position: relative;
}

/* NOT active, NOT selected */
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active {
    box-shadow: 0 0 0 var(--btn-product-options-border-width) var(--btn-product-options-border-color-inactive);
    background-color: var(--btn-product-options-bg-color-inactive);
}

/* NOT active, selected or hover */
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active:hover,
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active.addon_selected_option {
    box-shadow: 0 0 0 var(--btn-product-options-border-width) var(--error-500) !important;
    background-color: var(--error-100) !important;
}

/* schuine streep bij opties die niet op voorraad zijn bijv. */
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active:before,
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active:hover:before,
#productinfo_attributes ul.addon_radios_ul li.addon_product_option.not_active.addon_selected_option:before {
    --strike-width: 2px;
    --strike-color: var(--error-500);
    position: absolute;
    content: "";
    inset: 0;
    background: linear-gradient(
            to bottom right,                                                /* richting van de gradient */
            transparent calc(50% - calc(var(--strike-width) / 2)),          /* tot nét vóór het midden is transparant */
            var(--strike-color) calc(50% - calc(var(--strike-width) / 2)),     /* vanaf dat punt rood */
            var(--strike-color) calc(50% + calc(var(--strike-width) / 2)),     /* tot nét na het midden rood blijven */
            transparent calc(50% + calc(var(--strike-width) / 2))           /* daarna weer transparant */
    );
}

.addon_product_option.has-focus {
    outline: 2px solid #000;
    /*outline-color: inherit;*/ /* TODO: hoe deze de standaard browser outline kleur laten krijgen? */
    /*outline-offset: 3px;*/
}


/*Disabled*/
.st-swiper-button.swiper-button-disabled,
.configuration_btn.disabled,
button:disabled,
button[disabled] {
    color: var(--btn-disabled-text-color);
    background-color: var(--btn-disabled-bg-color);
    border-color: var(--btn-disabled-border-color);
    cursor: default;
}

.st-swiper-button.swiper-button-disabled:hover,
.st-swiper-button.swiper-button-disabled:focus,
.configuration_btn.disabled:hover,
.configuration_btn.disabled:focus,
button:disabled:hover,
button:disabled:focus,
button[disabled]:hover,
button[disabled]:focus {
    color: var(--btn-disabled-text-color-hover);
    background-color: var(--btn-disabled-bg-color-hover);
    border-color: var(--btn-disabled-border-color-hover);
}

.st-swiper-button.btn-icon.swiper-button-disabled .fa-icon:before {
    --icon-color: var(--btn-disabled-text-color);
}

.btn-empty-space {
    background-color: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    background-image: none !important;
    outline: 0 !important;
    cursor: auto !important;
    width: 100%;
}

/*button lists*/
.configuration_tep_meta.general {
    margin-top: var(--st-spacing-md);
}

.configuration_tep_meta.general,
.configuration_tep_meta.general .tep_meta_continue,
.configuration_tep_meta.general .tep_meta_general {
    display: inline-flex;
    width: 100%;
}

.configuration_tep_meta.general .tep_meta_general {
    justify-content: flex-start;
}

.configuration_tep_meta.general .tep_meta_continue {
    justify-content: flex-end;
}

@media screen and (max-width: 767px) {
    .configuration_tep_meta.general {
        flex-direction: column;
        gap: var(--st-spacing-xs);
    }

    .configuration_tep_meta.general .tep_meta_continue .configuration_btn,
    .configuration_tep_meta.general .tep_meta_general .configuration_btn {
        width: -webkit-fill-available;
        width: -moz-available;
    }
}

/* backorder */
.btn-backorder{
    --btn-font-size: var(--text-size-xs);
    border-radius: var(--btn-border-radius);
}
.btn-backorder,
.btn-backorder:hover,
.btn-backorder:focus {
    background-color: var(--error-50);
    border: var(--border-width) solid var(--error-700);
    color: var(--error-700);
    cursor: default;
}

/* soldout button */
.soldout-textonly {
    color: var(--error-500);
}

/*link button*/
.btn-link span.st-icon {
    color: var(--bs-btn-color);
}

.btn-link span.fa-icon:before {
    background-color: var(--bs-btn-color);
}

.btn-link:hover span.st-icon,
.btn-link:focus span.st-icon {
    color: var(--bs-btn-hover-color);
}

.btn-link:hover span.fa-icon:before,
.btn-link:focus span.fa-icon:before {
    background-color: var(--bs-btn-hover-color);
}

/*------ Button Groups ------*/
.btn-group {
    display: flex;
    gap: var(--st-spacing-xs);
    margin-block-start: var(--st-spacing-md);
    flex-wrap: wrap;
}

.card-footer .btn-group {
    margin-block-start: 0;
}

.btn-group.btn-fill .btn {
    flex: 1;
}

.btn-group.btn-fullwidth {
    flex-direction: column;
}

@media screen and (max-width: 767px) {
    .btn-group.btn-fill .btn {
        flex: unset;
    }

    .btn-group.btn-fullwidth {
        flex-direction: unset;
    }

    .btn-group.btn-fill-mobile .btn {
        flex: 1;
    }

    .btn-group.btn-fullwidth-mobile {
        flex-direction: column;
    }
}

.cart_button,
.configuration_btn,
.btn, button,
input, select, textarea,
.addon_product_option.has-focus {
    outline-offset: 3px;
}


/* TODO: hier een generiekere naam voor maken : linkje of button die ná een input group komt ofzo. */
.btn-clear-coupon {
    margin-top: .25rem;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen - zeker weten. Ivm CLS
*/

a img, img {
    height: auto;
    max-width: 100%;
}

img.header-logo-image {
    width: auto;
}

/* Deze optie is niet meer actief */
/*
.product-card-slide-image.langwerpig {
    aspect-ratio: auto 5 / 6;
}
 */

.product-card-slide-image.vierkant {
    aspect-ratio: auto 1 / 1;
}

.product-card-slide-image img,
.products_gallery_row_imagecontainer img,
.categories_imagecontainer img,
#mobile_menu_logo img,
#preview img {
    width: auto;
    height: auto;
}

/* Als er binnenkort meer afbeeldingen met width en height attributes komen,
 dan kan de styling globaler en alleen op de <img> tag*/

/*!* Header (top) *!*/
/*.menu_top_content img,*/
/*    !* Header (onder menu) *!*/
/*.header_bottom img,*/
/*    !* Footer *!*/
/*.site-footer-socket img,*/
/*    !* boxes *!*/
/*.box_content img,*/
/*    !* Product descriptions *!*/
/*#PRODUCT_INFO_DESCRIPTION_BOX img,*/
/*    !* Artikelpagina's USP's *!*/
/*.price_box img,*/
/*    !* Blog post *!*/
/*#blog img,*/
/*    !* Globaal *!*/
/*.changetable img {*/
/*    height: auto;*/
/*}*/
/*
CSS onderverdeling
Welke pagina's / globaal: Overal waar de zijbalken aan staan. (en footer misschien ook)
Is het cruciaal boven de vouw?: Ja, voor de zijbalken

dus ---> Intern inladen: overal of overal waar zijbalk aan staat?
*/

[id^=column_] .box,
[id^=column_] #filterContainer {
    margin-bottom: 1.25rem; /* slightly larger compared with filter margin bottom */
}

/* TODO: Voor nu standaard dat box-headings en filter-headings een border-bottom hebben.
    In latere fase evt. optioneel maken. Goed kijken naar padding en margin van filter-headings etc. Deze zijn specifiek zo ingesteld in combinatie met border-bottom */
/* TODO: is geen filter maar andere box heading - combineren en makkelijker optie maken wel of geen border-bottom overal in sidebar */
[id^=column_]:not(:has(.category_search_box)) .box_top {
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: .5rem;
}
/* TODO: is geen filter maar andere box heading - combineren en makkelijker optie maken wel of geen border-bottom overal in sidebar */
#filterContainer .filter-header {
    color: var(--body-text-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: .5rem; /* Ruimte boven eerste filter optie - is met .5rem in balans met filter optie padding */
    font-weight: var(--box-titles-font-weight);
}

[id^=column_] .box:last-child {
    margin-bottom: 0;
}

[id^=column_] .box ul li td.liicon {
    width: 20px;
}

.box ul li {
    list-style: none;
}

[id^=column_] .box ul li li {
    padding-left: 10px;
}

[id^=column_] .box_top {
    width: 100%;
    text-transform: var(--box-titles-transform);
    font-weight: var(--box-titles-font-weight);
}

[id^=column_] .box_top p {
    position: relative;
}

[id^=column_] .box_content .icon-li {
    font-size: var(--text-size-xs);
}


/*#column_left .box_content li {*/
/*    line-height: 2.2em;*/
/*}*/
[id^=column_] .box_content li {
    line-height: 1.2em;
    margin-block: .85em;
}

/* nog geen alternatieve goede styling gemaakt */
/*.box_content .icon-li {*/
/*    display: none;*/
/*}*/

[id^=column_] .active_cat {
    color: var(--link-color) !important;
    text-decoration: underline;
    font-weight: var(--font-weight-bold);
}

/*[id^=column_] .box input.input_styling {*/
/*    position: relative;*/
/*    float: left;*/
/*    height: 28px;*/
/*    width: -moz-calc(100% - 42px);*/
/*    width: -webkit-calc(100% - 42px);*/
/*    width: calc(100% - 42px);*/
/*    border-right: 0;*/
/*    border-radius: 5px 0 0 5px;*/
/*    padding: 0 5px;*/
/*}*/

[id^=column_] .box_top,
[id^=column_] .box_top a {
    color: var(--body-text-color);
}

[id^=column_] .box_content a {
    color: var(--body-text-color);
}

[id^=column_] .box_content a:hover{
    color: var(--link-color);
}

.column-widget li a {
    display: inline-flex;
    align-items: center;
}

.column-widget .fa-icon.fa-icon-caret-right:before {
    --icon-align-y: baseline;
}

/* Manufacturers */
/*.box_content form[name="manufacturers"]*/

/* Category Search Box */
.category_search_box {
    padding: var(--st-spacing-xs) var(--st-spacing-md) var(--st-spacing-md);
    background-color: var(--grey-200);
    border-radius: var(--border-radius);
}

.category_search_box .form-col {
    margin-block-end: var(--st-spacing-xs);
}
.box_product {
    padding: var(--gutter-half);
    text-align: center;
}

.box_product .box_product_image img {
    border-radius: var(--border-radius);
}

.box_product .box_product_name {
    padding-block: var(--st-spacing-xs);
}

.box_product .box_stars {
    display: flex;
    justify-content: center;
    padding-block: var(--st-spacing-xs);
}

.box_product .box_review-text a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    hyphens: auto;
    font-size: var(--text-size-sm);
}
/**/

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal op desktop
Is het cruciaal boven de vouw?: Alleen bij hover op de cart.

dus ---> Extern omdat het pas bij hover zichtbaar is, of intern omdat het direct zichtbaar is? -
alleen inladen als desktopheader actief is? (dus kijken naar breakpointsetting in BO)
*/

.floating_basket_wrapper:not(.is-open) {
    display: none;
}

.site-header-basket-wrapper:hover .floating_basket_wrapper,
.floating_basket_wrapper.is-open {
    display: flex !important;
    flex-direction: column;
    right: 0;
    width: 375px;
    padding: 10px;
    box-shadow: var(--shadow-md);
    color: var(--grey-700); /* todo: dropdown variabelen voor bg en txt colors */
    background-color: #fff;
    border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
}

.basket_wrapper .loading {
    height: 100px;
}

.basket_content {
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
}

.load_cart_content {
    position: relative;
    display: block;
    float: right;
    height: 15px;
    right: 6px;
    width: 15px;
    top: 7px;
    background: url(../cart_content_loader.gif) no-repeat !important;
}

#skip-to-checkout {
    display: none;
}

.using-keyboard .site-header-basket-wrapper:focus-within #skip-to-checkout {
    display: block;
}

.basket_content::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

.basket_content::-webkit-scrollbar {
    width: 4px;
    background-color: inherit;
}

.basket_content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #777;
}

.basket_content table tr td {
    border-bottom: 1px dotted #fff;
}

.basket_content table tr td.product_image_cell {
    padding: 5px 0;
    text-align: center;
    width: 75px;
    height: 75px;
}

.basket_content table tr td.product_image_cell .product_image {
    position: relative;
    height: 75px;
}

.basket_content table tr td.product_name_cell {
    padding: 0 5px;
}

.basket_content table tr td.product_name_cell p:first-of-type,
.basket_content table tr td.product_name_cell a {
    color: var(--body-text-color);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.basket_content table tr:hover td.product_name_cell,
.basket_content table tr:hover td.product_name_cell a,
.basket_content table tr:hover td.product_name_cell span,
.basket_content table tr:hover td.product_name_cell p {
    color: var(--body-text-color);
}

.basket_content table tr td.product_price_cell {
    width: 30px;
    text-align: center;
}

.basket_content table tr td.product_price_cell .btn-transparent {
    --btn-transparent-text-color-hover: var(--error-500);
}

.basket_content table tr td.product_price_cell:hover .btn-transparent {
    color: var(--error-500);
}

.floating_basket_total {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin-top: .5rem;
}

.floating_basket_total a {
    position: relative;
    margin-left: auto;
}

.floating_basket_total h4,
.floating_basket_total .floating_basket_total_price {
    position: relative;
    color: var(--price-text-color);
    font-size: var(--h2-font-size);
    font-weight: var(--font-weight-bold);
}

span.basket_content_product_name {
    font-weight: var(--font-weight-bold);
}

.basket_content table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
/*
CSS onderverdeling
Welke pagina's / globaal: ???
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/

table {
    --table-padding-block: .5rem;
    --table-padding-inline: .5rem;
}

table tr td.col_25 {
    width: 25px;
}

table tr td.col_35 {
    width: 35px;
}

table tr td.col_50 {
    width: 50px;
}

table tr td.col_75 {
    width: 75px;
}

table tr td.col_100 {
    width: 100px;
}

table tr td.col_125 {
    width: 125px;
}

table tr td.col_150 {
    width: 150px;
}

table tr td.col_175 {
    width: 175px;
}

table tr td.col_200 {
    width: 200px;
}

table tr td.col_225 {
    width: 225px;
}

table tr td.col_250 {
    width: 250px;
}

.wrapper.content table {
    border-collapse: collapse;
    border-spacing: 0;
    width: calc(100% - var(--table-padding-inline));
}

tr.onHover td {
    transition: background .5s ease 0s;
}

.table-section table tr td:last-child, .table-section table tr th:last-child {
    padding-right: 0;
}

table tr:first-child td, table tr:first-child th {
    border-top: 0;
}

table.top {
    margin-top: 10px;
}

div table.no-padding tr td, div table.no-padding tr th {
    padding-left: 0;
}

div table.no-border tr td, div table.no-border tr th, table.price_box td {
    border: 0;
}

table.border {
    border: 1px solid #d9d9d9;
}

tr.required td {
    color: #fff;
    background: red;
}

table.inner_image tr {
    vertical-align: bottom;
}

table.inner_image tr td {
    height: 75px;
    width: 75px;
}

table.inner_image tr td img {
    max-height: 75px;
    max-width: 75px;
}


/* conflicteert met ckeditor tabel styling */
/*.table {*/
/*    display: table;*/
/*}*/

/*.tableHeading {*/
/*    display: table-header-group;*/
/*}*/

/*.tableBody {*/
/*    display: table-row-group;*/
/*}*/

/*.tableRow {*/
/*    display: table-row;*/
/*}*/

/*.divTableHead, .tableCell {*/
/*    display: table-cell;*/
/*}*/

/*.tableFoot {*/
/*    display: table-footer-group;*/
/*}*/

/*.table img {*/
/*    vertical-align: middle;*/
/*}*/

/*
CSS onderverdeling
Welke pagina's / globaal: Listings: Zoekresultaten, PLP, Blog
Is het cruciaal boven de vouw?: Ja, bij PLP

dus ---> Intern inladen (?) - zo ja, waar allemaal?
*/

.sortby {
    display: flex;
    align-items: center;
}

.sortby.product_listing_sorting {
    margin-block-start: var(--gutter);
    justify-content: flex-end;
}

.sortby.product_listing_pagination {
    margin-top: var(--gutter);
}


.product_listing_sorting-total_articles {
    margin-inline-end: var(--gutter);
}

.total_articles-content p span {
    font-weight: var(--font-weight-bold);
}

.sortby.product_listing_pagination {
    justify-content: center;
}

/* PAGINATION BUTTONS */
.pagination_buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-pagination {
    --btn-pagination-border-radius: var(--border-radius-small);
    --btn-pagination-font-weight: var(--btn-font-weight);
    --btn-pagination-padding-block: .5rem;
    --btn-pagination-padding-inline: 1rem;
    --btn-pagination-margin-block-start: .5rem;
    --btn-pagination-margin-inline-start: .25rem;
    --btn-pagination-margin-inline-end: 0;
    --btn-pagination-next-prev-padding-inline: .75rem;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-block-start: var(--btn-pagination-margin-block-start);
    margin-inline-start: var(--btn-pagination-margin-inline-start);
    margin-inline-end: var(--btn-pagination-margin-inline-end);
    padding: var(--btn-pagination-padding-block) var(--btn-pagination-padding-inline);
    border-radius: var(--btn-pagination-border-radius);
    font-family: var(--btn-font-family);
    font-weight: var(--btn-pagination-font-weight);
    cursor: pointer;
}

.btn-pagination-next,
.btn-pagination-previous {
    padding-inline: var(--btn-pagination-next-prev-padding-inline);
}

.btn-pagination {
    color: var(--btn-pagination-text-color);
    background-color: var(--btn-pagination-bg-color);
    border: var(--btn-pagination-border-width) solid var(--btn-pagination-border-color);
}

.btn-pagination:hover,
.btn-pagination:focus {
    color: var(--btn-pagination-text-color-hover);
    background-color: var(--btn-pagination-bg-color-hover);
    border: var(--btn-pagination-border-width) solid var(--btn-pagination-border-color-hover);
}

.btn-pagination-active,
.btn-pagination-active:hover,
.btn-pagination-active:focus {
    color: var(--btn-pagination-text-color-active);
    background-color: var(--btn-pagination-bg-color-active);
    border: var(--btn-pagination-border-width) solid var(--btn-pagination-border-color-active);
}

.btn-pagination-dots,
.btn-pagination-dots:hover,
.btn-pagination-dots:focus {
    color: var(--body-text-color);
    background-color: var(--webshop-background-color);
    border-color: var(--webshop-background-color);
}

.btn-pagination-disabled {
    color: var(--btn-disabled-text-color);
    background-color: var(--btn-disabled-bg-color);
    border-color: var(--btn-disabled-border-color);
    cursor: default;
}

.btn-pagination-disabled:hover,
.btn-pagination-disabled:focus {
    color: var(--btn-disabled-text-color-hover);
    background-color: var(--btn-disabled-bg-color-hover);
    border-color: var(--btn-disabled-border-color-hover);
}

/* SORTING */
.product_sorting-select input.submit-btn {
    display: none;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Listings bij setting. En altijd op PDP
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen?
*/

:root {
    --stars-color: #ffb400;
}

.rating_stars {
    display: inline-flex;
    align-items: center;
}

.rating_stars .st-icon {
    color: var(--stars-color);
}

.rating_stars .st-icon svg,
.rating_stars .fa-icon:before {
    --st-icon-size: var(--text-size-sm);
    --st-icon-min-size: var(--st-icon-size);
}

.rating_stars .fa-icon:before {
    --icon-color: var(--stars-color);
}

.rating_stars .st-icon:not(:last-of-type),
.rating_stars .fa-icon:not(:last-of-type) {
    --stars-spacing: .125rem;
    margin-right: var(--stars-spacing);
}



/* Alleen de daadwerkelijke rating stars geel maken */
.rating_stars .st-icon.st-icon-star-empty {
    color: var(--grey-300);
}

.rating_stars .fa-icon.fa-icon-star-empty:before,
.rating_stars .fa-icon.fa-icon-star-empty-stroke:before {
    --icon-color: var(--grey-300);
}

/* Ster grootte en uitlijning aanpassen wanneer sterren in een .content-header h2 getoond worden */
.content-header h2 > .rating_stars {
    font-size: var(--h2-font-size);
    vertical-align: bottom;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Listings bij setting. En altijd bij PDP
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen (?)
*/

.normalPrice,
.specialPrice {
    --price-font-weight: var(--font-weight-bold);

    font-weight: var(--price-font-weight);
}

.oldPrice {
    --old-price-font-weight: var(--font-weight-normal);

    color: var(--grey-500);
    font-weight: var(--old-price-font-weight);
}

.specialPrice {
    color: var(--action-price-text-color);
}

.normalPrice {
    color: var(--price-text-color);
}

.strikethrough {
    --strikethrough-border-width: 2px;

    position: relative;
}

.strikethrough:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: var(--strikethrough-border-width) solid;
    border-color: inherit;
    border-radius: var(--border-radius-small);
    transform:rotate(-5deg);
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: Denk het niet? Tooltip pas zichtbaar na een user-interaction

dus ---> Extern en nonrenderblocking inladen
*/

.tooltipster-light {
    border-radius: 5px;
    border: 1px solid #cccccc;
    background: #ededed;
    color: #666666;
}
.tooltipster-light .tooltipster-content {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    padding: 8px 10px;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Homepage als slider aan staat, en bij merkenslider. Winkelwagenextended popup.
Is het cruciaal boven de vouw?: JA bij homepage slider wel.

dus ---> Als homepage slider aan staat sowieso intern. Wat bij merkenslider? Wat bij WWextended?

Wat is handig, de ene keer wel intern en de andere keer niet?
Of als je het ene doet omdat homepage slider aan staat dat je het dan overal intern houd als WWExtended aan hebt staan?
*/




/* Inner dot */
.productinfo_imagecontainer .owl-theme .owl-dots .owl-dot span {
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    margin: 4px;
    background-color: transparent;
    border: 1px solid var(--supporting-500);
    border-radius: 100px;
}

/* inner dot - Active and hover color */
.productinfo_imagecontainer .owl-theme .owl-dots .owl-dot.active span,
.productinfo_imagecontainer .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--supporting-500);
}

/* Outer button */
button.owl-dot {
    border-radius: 100px;
    transition-duration: .2s;
    transition-property: border, background-color;
}

.productinfo_imagecontainer .owl-theme .owl-nav {
    margin-top: unset;
}

.owl-prev path,
.owl-next path {
    stroke: var(--grey-400) !important;
}

.owl-prev.disabled path,
.owl-next.disabled path {
    stroke: var(--grey-300) !important;
}

#owl-carousel-thumb .owl-item.current .owl-thumb {
    border: 1px solid var(--supporting-500) !important;
}

div#owl-carousel-thumb div.owl-stage div.owl-item {
    border: none !important;
}
/*
CSS onderverdeling
Welke pagina's / globaal: ????
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/

.fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp {
    padding:0;
    margin:0;
    border:0;
    outline:none;
    vertical-align:top;
}

.fancybox-wrap {
    position:absolute;
    top:0;
    left:0;
    z-index:8020;
}

.fancybox-skin {
    position:relative;
    background:#f9f9f9;
    color:#444;
    text-shadow:none;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

.fancybox-opened {
    z-index:8030;
}

.fancybox-opened .fancybox-skin {
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

.fancybox-outer,.fancybox-inner {
    position:relative;
}

.fancybox-inner {
    overflow:hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling:touch;
}

.fancybox-error {
    color:#444;
    font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin:0;
    padding:15px;
    white-space:nowrap;
}

.fancybox-image,.fancybox-iframe {
    display:block;
    width:100%;
    height:100%;
}

.fancybox-image {
    max-width:100%;
    max-height:100%;
}

#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span {
    background-image:url(/themes/11.0/images/fancybox/fancybox_sprite.png);
}

#fancybox-loading {
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-22px;
    margin-left:-22px;
    background-position:0 -108px;
    opacity:.8;
    cursor:pointer;
    z-index:8060;
}

#fancybox-loading div {
    width:44px;
    height:44px;
    background:url(/themes/11.0/images/fancybox/fancybox_loading.gif) center center no-repeat;
}

.fancybox-close {
    position:absolute;
    top:-18px;
    right:-18px;
    width:36px;
    height:36px;
    cursor:pointer;
    z-index:8040;
}

.fancybox-nav {
    position:absolute;
    top:0;
    width:40%;
    height:100%;
    cursor:pointer;
    text-decoration:none;
    background:transparent url(/themes/11.0/images/fancybox/blank.gif);
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    z-index:8040;
}

.fancybox-prev {
    left:0;
}

.fancybox-next {
    right:0;
}

.fancybox-nav span {
    position:absolute;
    top:50%;
    width:36px;
    height:34px;
    margin-top:-18px;
    cursor:pointer;
    z-index:8040;
    visibility:hidden;
}

.fancybox-prev span {
    left:10px;
    background-position:0 -36px;
}

.fancybox-next span {
    right:10px;
    background-position:0 -72px;
}

.fancybox-nav:hover span {
    visibility:visible;
}

.fancybox-tmp {
    position:absolute;
    top:-99999px;
    left:-99999px;
    visibility:hidden;
    max-width:99999px;
    max-height:99999px;
    overflow:visible!important;
}

.fancybox-lock {
    overflow:hidden!important;
    width:auto;
}

.fancybox-lock body {
    overflow:hidden!important;
}

.fancybox-lock-test {
    overflow-y:hidden!important;
}

.fancybox-overlay {
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    display:none;
    z-index:8010;
    background:url(/themes/11.0/images/fancybox/fancybox_overlay.png);
}

.fancybox-overlay-fixed {
    position:fixed;
    bottom:0;
    right:0;
}

.fancybox-lock .fancybox-overlay {
    overflow:auto;
    overflow-y:scroll;
}

.fancybox-title {
    visibility:hidden;
    font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position:relative;
    text-shadow:none;
    z-index:8050;
}

.fancybox-opened .fancybox-title {
    visibility:visible;
}

.fancybox-title-float-wrap {
    position:absolute;
    bottom:0;
    right:50%;
    margin-bottom:-35px;
    z-index:8050;
    text-align:center;
}

.fancybox-title-float-wrap .child {
    display:inline-block;
    margin-right:-100%;
    padding:2px 20px;
    background:transparent;
    background:rgba(0,0,0,0.8);
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
    text-shadow:0 1px 2px #222;
    color:#fff;
    font-weight:700;
    line-height:24px;
    white-space:nowrap;
}

.fancybox-title-outside-wrap {
    position:relative;
    margin-top:10px;
    color:#fff;
}

.fancybox-title-inside-wrap {
    padding-top:10px;
}

.fancybox-title-over-wrap {
    position:absolute;
    bottom:0;
    left:0;
    color:#fff;
    padding:10px;
    background:#000;
    background:rgba(0,0,0,0.8);
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) {
    #fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span {
        background-image:url(/themes/11.0/images/fancybox/fancybox_sprite@2x.png);
        background-size:44px 152px;
    }

    #fancybox-loading div {
        background-image:url(/themes/11.0/images/fancybox/fancybox_loading@2x.gif);
        background-size:24px 24px;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Zijbalken iig, en checkout
Is het cruciaal boven de vouw?: Ja (?)

dus ---> Intern inladen
*/


.has-js .label_radio {
    background: url("/themes/11.0/images/radio/radio-off.png") no-repeat;
}

.has-js .label_check {
    background: url("/themes/11.0/images/checkbox/check-off.png") no-repeat;
}

.has-js label.c_on {
    background: url("/themes/11.0/images/checkbox/check-on.png") no-repeat;
}

.has-js label.r_on {
    background: url("/themes/11.0/images/radio/radio-on.png") no-repeat;
}

.has-js .label_check input,
.has-js .label_radio input {
    position: absolute;
    left: -9999px;
}

label.label_check,
label.label_check span.checkboxtext,
label.label_radio,
label.label_radio span.checkboxtext {
    position: relative;
    display: inline-block;
}

label.label_check.checkbox_only,
label.label_radio.radio_only {
    margin-left: 5px;
    margin-right: 5px;
    width: 21px;
}

label.label_radio {
    /*top: 5px;*/
    margin-right: 20px;
    cursor: pointer;
}

label.no_margin_right {
    margin-right: 0;
}

.input-radio-container {
    margin-bottom: .5rem;
}

/*label.label_radio span.checkboxtext {*/
/*    top: -7px;*/
/*}*/

label.label_check {
    /*top: 5px;*/
    cursor: pointer;
}

/*label.label_check span.checkboxtext {*/
/*    top: -3px;*/
/*}*/

label.label_check:last-child,
label.label_radio:last-child {
    margin-bottom: 0;
}

label.label_check.error {
    border: 1px solid red;
}

label.label_radio.r_disabled {
    opacity: 0.5;
}
/*color swatches*/
.filter-color:has(.filter-color-swatch) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.filter-color-swatch {
    position: relative;
    width: var(--color-swatches-width); /* bijv. 20px of 24px */
    height: var(--color-swatches-width);
    border-radius: 50%;
    padding: 0;
    margin: .25rem;
    box-shadow:
            0 0 0 var(--color-swatches-border-width) var(--color-swatches-border-color),
            0 0 0 calc(var(--color-swatches-outline) + var(--color-swatches-border-width)) var(--color-swatches-border-color);
    cursor: pointer;
    display: inline-block;
}

.filter-color-swatch[style*="background-color"],
#productinfo_attributes .addon_product_option[style*="background-color"] {
    --color-swatches-light-shadow: rgba(0, 0, 0, .05);
    --color-swatches-dark-shadow: rgba(255, 255, 255, .1);
    --color-swatches-bg: linear-gradient(to right, var(--color-swatches-light-shadow) 0, var(--color-swatches-light-shadow) 50%, rgba(0, 0, 0, .0) 50%, rgba(0, 0, 0, .0) 100%);
    --color-swatches-bg-dark-swatch: linear-gradient(to right, var(--color-swatches-dark-shadow) 0, var(--color-swatches-dark-shadow) 50%, rgba(255, 255, 255, .0) 50%, rgba(255, 255, 255, .0) 100%);
    --color-swatches-border-color: var(--grey-300);
    --color-swatches-border-color-selected: var(--grey-50);
    --color-swatches-border-width: 2px;
    --color-swatches-border-width-total: calc(var(--color-swatches-border-width) * 2);
    --color-swatches-outline: 1px;
    --color-swatches-width: 34px;
    --color-swatches-checkmark-width: 20px;
    --color-swatches-border-radius: var(--border-radius-pill);

    position: relative;
    border-radius: var(--color-swatches-border-radius);
    /*border: var(--color-swatches-border-width) solid var(--color-swatches-border-color);*/
    /*outline: var(--color-swatches-outline) solid var(--color-swatches-border-color);*/
    box-shadow:
            0 0 0 var(--color-swatches-border-width) var(--color-swatches-border-color),
            0 0 0 calc(var(--color-swatches-outline) + var(--color-swatches-border-width)) var(--color-swatches-border-color);
}

.filter-color-swatch[style*="background-color"]::before,
#productinfo_attributes .addon_product_option[style*="background-color"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-swatches-bg);
    width: -webkit-fill-available;
    width: -moz-available;
    height: -webkit-fill-available;
    height: -moz-available;
    max-height: var(--color-swatches-width);
    border-radius: var(--color-swatches-border-radius);
}

.filter-color-swatch[style*="#000000"]::before,
#productinfo_attributes .addon_product_option[style*="#000000"]::before {
    --color-swatches-bg: var(--color-swatches-bg-dark-swatch);
}

.filter-color-label {
    font-size: var(--text-size-xs);
    margin-top: 2px;
    color: var(--body-text-color);
    white-space: normal;
    word-break: break-word;
    line-height: var(--text-line-height);
}

.filter-color-swatch[style*="background-color"] .label_check.c_on:after,
#productinfo_attributes .addon_product_option[style*="background-color"].addon_selected_option:after {
    position: absolute;
    content: var(--color-swatches-check-icon);
    width: var(--color-swatches-checkmark-width);
}

/* filter colors */
.filter-color-swatch[style*="background-color"] .label_check {
    padding-left: var(--color-swatches-width);
    padding-top: calc((var(--color-swatches-width) / 2) - (var(--color-swatches-border-width-total) + 1px));
}

.filter-color-swatch[style*="background-color"] .label_check,
.filter-color-swatch[style*="background-color"] .label_check.c_on {
    background-image: none;
}

.filter-color-swatch[style*="background-color"] .checkboxtext.filter_name {
    display: none;
}

.filter-color-swatch[style*="background-color"]:has( > .label_check.c_on),
.filter-color-swatch[style*="background-color"]:hover,
.filter-color-swatch[style*="background-color"]:focus,
.filter-color-swatch[style*="background-color"]:focus-within,
#productinfo_attributes .addon_product_option[style*="background-color"].addon_selected_option,
#productinfo_attributes .addon_product_option[style*="background-color"]:hover,
#productinfo_attributes .addon_product_option[style*="background-color"]:focus {
    box-shadow:
            0 0 0 var(--color-swatches-border-width) var(--color-swatches-border-color-selected),
            0 0 0 calc(var(--color-swatches-outline) + var(--color-swatches-border-width)) var(--color-swatches-border-color);
    /*border-color: var(--color-swatches-border-color-selected);*/
}

.using-keyboard .filter-color-swatch[style*="background-color"]:focus-within {
    border-color: var(--info-500);
    outline: auto !important;
    outline-offset: 6px;
}

.filter-color-swatch[style*="background-color"] .label_check.c_on:after {
    top: .5rem;
    left: .5rem;
}

/*PDP product options*/
/*#productinfo_attributes .addon_product_option[style*="background-color"] {*/
/*    box-shadow: none;*/
/*}*/

#productinfo_attributes .addon_product_option[style*="background-color"].addon_selected_option,
#productinfo_attributes .addon_product_option[style*="background-color"]:hover,
#productinfo_attributes .addon_product_option[style*="background-color"]:focus {
    position: relative;
    /*border: var(--color-swatches-border-width) solid var(--color-swatches-border-color-selected);*/
}

#productinfo_attributes .addon_product_option[style*="background-color"].addon_selected_option:after {
    top: .35rem;
    left: .45rem;
}

/* If there is also a normal checkbox between the swatches */
.filter-color-swatches.swatches-with-normal-checkboxes > li:not(.filter-color) {
    flex-basis: 100%;
    order: -1;
    padding-block-end: 0;
}

.filter-color-swatches.swatches-with-normal-checkboxes:not(:has(li.filter-color)) {
    display: block;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Sowieso Checkout, waar nog meer?
Is het cruciaal boven de vouw?: Nee

dus ---> Extern en non-renderblocking inladen, altijd of alleen op bepaalde pagina's?
*/

#ui-datepicker-div {
    background: #f5f5f5;
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0;
}

.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev-hover {
    top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px;
}

.ui-datepicker .ui-datepicker-next span, .ui-datepicker .ui-datepicker-prev span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 45%;
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: 700;
    border: 0;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

.ui-datepicker td a, .ui-datepicker td span {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em;
    width: auto;
    overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}

#ui-datepicker-div .ui-icon {
    width: 16px;
    height: 16px;
    text-indent: -9999px;
}

#ui-datepicker-div .ui-icon, #ui-datepicker-div .ui-state-active .ui-icon, #ui-datepicker-div .ui-state-default .ui-icon, #ui-datepicker-div .ui-state-error .ui-icon, #ui-datepicker-div .ui-state-error-text .ui-icon, #ui-datepicker-div .ui-state-focus .ui-icon, #ui-datepicker-div .ui-state-highlight .ui-icon, #ui-datepicker-div .ui-state-hover .ui-icon, #ui-datepicker-div .ui-widget-content .ui-icon, #ui-datepicker-div .ui-widget-header .ui-icon {
    background-image: url(/themes/11.0/images/jqueryui/ui-icons_222222_256x240.png);
}

#ui-datepicker-div .ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

#ui-datepicker-div .ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: Nee

dus ---> Extern en non-renderblocking inladen. Want modal is pas zichtbaar na user-interaction
*/


@media screen and (max-width: 991px) {
    .modal-content {
        width: 80% !important;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 10011;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto;
}

.modal.active {
    display: block !important;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    background-color: var(--webshop-background-color);
    padding: 1rem 1.5rem;
    /*margin: 5% auto;*/
    border-radius: var(--border-radius-small);
    color: var(--body-text-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.modal-title {
    margin-bottom: 0 !important;
}

.modal-body ul {
    margin-block: .75rem;
}

/*
CSS onderverdeling
Welke pagina's / globaal: Is dit de prijs range slider?
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/


div.ui-slider .ui-state-default, div.ui-slider .ui-widget-content div.ui-slider .ui-state-default {
    border: 1px solid var(--grey-400);
    background: var(--grey-400);
    font-weight: 700;
    color: #1c94c4;
    border-radius: 50%;
    box-shadow: var(--shadow-xs);
}

.ui-slider {
    position: relative;
    text-align: left;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    background-color: var(--grey-100);
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-inner-xs);
}

.ui-slider-horizontal {
    border: 1px solid var(--grey-100);
    height: .8em;
    margin: 0 8px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
    cursor: pointer;
}

.ui-slider-horizontal .ui-slider-range {
    height: 100%;
    top: 0;
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}

/*
CSS onderverdeling
Welke pagina's / globaal: ??? Sowieso op PDP als social-share buttons onder productimage aan staan. Nog op andere plekken?
Is het cruciaal boven de vouw?: Ja, als setting aan staat.

dus ---> ... inladen
*/


/*.js-social-popup {*/
/*    width: 53px;*/
/*}*/


.socialshare-button-container {
    display: flex;
    gap: .5rem;
}

.btn-socialshare--facebook {
    --st-icon-color: var(--color-facebook);
    --bs-btn-hover-border-color: var(--color-facebook);
}
.btn-socialshare--twitter {
    --st-icon-color: var(--color-twitter);
    --bs-btn-hover-border-color: var(--color-twitter);
}
.btn-socialshare--pinterest {
    --st-icon-color: var(--color-pinterest);
    --bs-btn-hover-border-color: var(--color-pinterest);
}

.socialshare-count {
    display: none;
}

/* Wordt gebruikt in de Back in Stock Add-on, en ook voor Maatwerk paperform oplossingen. */
/* Kan ook elders gebruikt worden los. */
/* Plaats een .st-loader binnen een .st-loading-content; zodra er een iframe in laadt
   (bijv. het Paperform-formulier) verbergt de generieke regel onderaan de spinner automatisch. */

.st-loader {
    --st-loader-size: 50px;
    --st-loader-border-width: 8px;
    border: var(--st-loader-border-width) solid var(--grey-300);
    border-top: var(--st-loader-border-width) solid var(--grey-700);
    border-radius: 50%;
    width: var(--st-loader-size);
    height: var(--st-loader-size);
    margin: auto;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Verberg de spinner zodra het formulier (iframe) geladen is. Generiek, dus werkt
   overal: maatwerk-PDP, Paperform-widget en losse toepassingen. */
.st-loading-content:has(iframe) .st-loader {
    display: none;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Alleen als promotiebanner is geactiveerd
Is het cruciaal boven de vouw?: JA

dus ---> Intern inladen als promotiebanner aan staat
*/

#wrapper_promotion_banner {
    background-color: transparent;
}

#container_promotion_banner {
    padding: 20px;
}

a#anchor_promotion_banner {
    padding: 5px;
    text-decoration: none;
    display: block;
}

/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

.categories {
    --categories-name-padding-block: .5rem;
    --categories-name-padding-inline: .5rem;
    --categorie-name-link-opacity-hover: .8;

    transition-property: box-shadow, border-color;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);

    position: relative;
}

.categories_row:hover {
    box-shadow: var(--card-shadow-hover);
}

.categories_row {
    background-color: var(--card-background-color);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
}

.categories_row:hover {
    border: var(--card-border-hover);
}

.categories_name_heading {
    display: flex;
    align-items: var(--category-titles-align-items);

    padding-block: var(--categories-name-padding-block);
    padding-inline: var(--categories-name-padding-inline);

    font-size: var(--text-size-md) !important;
    margin-bottom: 0 !important;
    container: categories-name-heading / inline-size;
    word-break: break-word;
}

@container categories-name-heading (max-width: 9rem) {
    .categories_name_link {
        font-size: var(--text-size-sm) !important;
    }
}

.categories_name_link {
    color: var(--body-text-color);
    width: -webkit-fill-available;
    width: -moz-available;
}

.categories_name_link:hover,
.categories_name_link:focus,
.categories_row:hover .categories_name_link {
    color: var(--body-text-color);
    opacity: var(--categorie-name-link-opacity-hover);
}

.categories_imagecontainer {
    position: relative;
    text-align: center;
}

.categories_imagecontainer img {
    border-radius: var(--border-radius);
}

.categories_imagecontainer img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    max-width: 100%;
    max-height: 100%;
}

/* Category Card Style: Round */
.categories_row.category-card_round {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent;
}

.categories_row.category-card_round img {
    border-radius: var(--border-radius-pill);
    object-fit: cover;
    min-width: -webkit-fill-available;
    min-width: -moz-available;
    min-height: -webkit-fill-available;
    min-height: -moz-available;
}

.categories_row.category-card_round .categories_imagecontainer {
    aspect-ratio: 1 / 1 !important;
}

.categories_row.category-card_round:hover img,
.categories_row.category-card_round:focus img {
    filter: var(--drop-shadow-sm);
}

.categories_row.category-card_round:hover img {
    opacity: .8;
    filter: var(--drop-shadow-sm);
}
.categories_row.category-card_round img {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Category Card Style: Tekst op afbeelding (overlay) */
/* Gemodelleerd naar de "Overlay en tekst kleur"-optie van de afbeelding-card widget. */
.categories_row.category-card_overlay {
    position: relative;
    overflow: hidden;
}

/* De afbeelding vult de kaart en wordt netjes bijgesneden */
.categories_row.category-card_overlay .categories_imagecontainer img {
    object-fit: cover;
    min-width: -webkit-fill-available;
    min-width: -moz-available;
    min-height: -webkit-fill-available;
    min-height: -moz-available;
}

/* De categorienaam over de afbeelding leggen. De verticale positie (boven /
   midden / onder) volgt de "Positie van categorie titels in heading box"-optie. */
.categories_row.category-card_overlay .categories_name {
    position: absolute;
    inset: 0;
    z-index: 5;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: var(--category-titles-align-items, flex-end);
}

/* Subtiele gradient onderaan de afbeelding voor leesbaarheid */
.categories_row.category-card_overlay .categories_imagecontainer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

/* Variant: donkere overlay, lichte tekst */
.categories_row.category-card_overlay--light-text .categories_imagecontainer::after {
    background-image: linear-gradient(to top, rgba(24, 24, 27, .55), transparent 4.5rem);
}

.categories_row.category-card_overlay--light-text .categories_name_link,
.categories_row.category-card_overlay--light-text .categories_name_link:hover,
.categories_row.category-card_overlay--light-text .categories_name_link:focus,
.categories_row.category-card_overlay--light-text:hover .categories_name_link {
    color: #fff;
    text-shadow: 0 0 4px #000;
}

/* Variant: lichte overlay, donkere tekst */
.categories_row.category-card_overlay--dark-text .categories_imagecontainer::after {
    background-image: linear-gradient(to top, rgba(255, 255, 255, .65), transparent 4.5rem);
}

.categories_row.category-card_overlay--dark-text .categories_name_link,
.categories_row.category-card_overlay--dark-text .categories_name_link:hover,
.categories_row.category-card_overlay--dark-text .categories_name_link:focus,
.categories_row.category-card_overlay--dark-text:hover .categories_name_link {
    color: var(--grey-900);
    text-shadow: 0 0 4px #fff;
}
/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/


/* --------------------------------------- */
/* ------- PRODUCT LISTING GENERAL ------- */
/* --------------------------------------- */

.products_gallery_row,
.products_lijst_row {
    position: relative;

    transition-property: box-shadow, border-color;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);
}

.products_gallery_row,
.products_lijst_row {
    background-color: var(--card-background-color);
    border: var(--card-border);
    border-radius: var(--border-radius);
}

.products_lijst_row:hover,
.products_lijst_row:focus,
.products_gallery_row:hover,
.products_gallery_row:focus {
    border: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
}

.products_lijst_row:hover .products_lijst_row_name a,
.products_lijst_row:focus .products_lijst_row_name a,
.products_gallery_row:hover .products_gallery_row_name a,
.products_gallery_row:focus .products_gallery_row_name a {
    color: var(--link-color-hover);
}

.products_gallery_row_buttons,
.products_lijst_row_buttons,
.products_gallery_row_compare,
.products_lijst_row_compare {
    margin-top: var(--gutter-half);
}




/* TODO: deze in gallery en list plaatsen */
/*.products_gallery_row_price,*/
/*.products_gallery_row_model,*/
/*.products_gallery_row_levertijden,*/
/*.products_gallery_row_description,*/
/*.products_gallery_row_meebestellen,*/
/*.products_lijst_row_price,*/
/*.products_lijst_row_model,*/
/*.products_lijst_row_levertijden,*/
/*.products_lijst_row_description,*/
/*.products_lijst_row_meebestellen {*/
/*    margin-bottom: .5rem;*/
/*}*/

/*.products_gallery_row_price,*/
/*.products_lijst_row_price {*/
/*    margin-top: 1rem;*/
/*}*/

/*.products_gallery_row_review_stars,*/
/*.products_lijst_row_review_stars {*/
/*    margin-bottom: 1rem;*/
/*}*/




/* PRODUCT IMAGE */
.products_lijst_row_imagecontainer,
.products_gallery_row_imagecontainer {
    position: relative;
}

.products_lijst_row_imagecontainer.vierkant,
.products_gallery_row_imagecontainer.vierkant {
    aspect-ratio: 1 / 1;
}

/* todo: relatieve border-radius obv calc() rekening houdende met buitenste border-radius */
.products_lijst_row_imagecontainer img,
.products_gallery_row_imagecontainer img {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

div.box_product_image img.subimage1,
div.box_product_image img.subimage2,
div.box_product_image img.subimage_normal,
div.products_gallery_row_imagecontainer img,
div.products_lijst_row_imagecontainer img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 4;
    max-width: 100%;
    max-height: 100%;
}

.products_gallery_row_imagecontainer > a:focus-visible > img {
    color: #000;
    outline: auto;
}

div.product_image img {
    max-height: 100%;
    max-width: 100%;
}

div#preview img {
    max-width: 100%;
}

/* PRODUCT NAME */
.products_name_heading {
    --product-name-heading-font-weight: var(--font-weight-bold);

    font-family: var(--body-font-stack);
    color: var(--body-text-color);
    font-weight: var(--product-name-heading-font-weight);
}

/* MANUFACTURER */
.products_lijst_row_manufacturer p,
.products_gallery_row_manufacturer p {
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
}

/* PRICE */
.products_price .normalPrice,
.products_price .specialPrice,
.custom_price_mtw_listing .normalPrice,
.custom_price_mtw_listing .specialPrice {
    font-size: var(--text-size-xl);
}

/* Aangezien de lege div ruimte innam comment ik dit nu. Bij 20 shops heb ik getest. Bij veel gaat de prijs beter staan zonder min-height. /Andert */
/* DIT HIERONDER MOET ZELFDE ZIJN ALS FONT-SIZE WAARDE VAN DE PRIJS */
/* .products_gallery_row_price:not(:has(.normalPrice:empty)) */
/*.products_gallery_row_price {*/
/*    min-height: var(--actual-text-xl-line-height);*/
/*}*/

.products_price .oldPrice,
.custom_price_mtw_listing .oldPrice {
    font-size: var(--text-size-sm);
}

/* REVIEW STARS */
.products_review_stars {
    display: inline-flex;
}

/* ARTICLENUMBER */
.product_listing_productmodel {
    font-size: var(--text-size-sm);
    font-style: normal;
}

/* DESCRIPTION */
.products_description p {
    font-size: var(--text-size-sm);
}

.products_lijst_row_description p,
.products_gallery_row_description p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    /* number of lines to show */
    -webkit-line-clamp: var(--number-of-lines-plp-description);
    line-clamp: var(--number-of-lines-plp-description);

    /*word-wrap: break-word;*/
    /*-webkit-hyphens: auto;*/
    /*-ms-hyphens: auto;*/
    /*hyphens: auto;*/
}

 /*BUTTONS*/
/*.products_lijst_row .configuration_btn,*/
/*.products_gallery_row .configuration_btn {*/
/*    min-height: 20px;*/
/*}*/

/*.productcatalog_backorder,*/
/*.product_listing_sold_out_button .configuration_btn {*/
/*    min-height: 26px;*/
/*    line-height: 1.1em;*/
/*}*/

.product_listing_quotation_button,
.products_lijst_row_buttons,
.products_gallery_row_buttons,
.product_listing_buttons,
.buttons_shoppingcart {
    gap: var(--gutter-half);
}

/*.products_lijst_row input[name="product_cart_quantity"],*/
/*.products_gallery_row input[name="product_cart_quantity"],*/
.products_lijst_row select[name="product_cart_quantity"],
.products_gallery_row select[name="product_cart_quantity"] {
    width: 80px !important;
    padding-inline-end: 0;
    padding-block: 0;
}

@media screen and (max-width: 1399px) {
    .products_gallery_row input[name="product_cart_quantity"],
    .products_gallery_row select[name="product_cart_quantity"] {
        width: 50px !important;
    }
}

@media screen and (max-width: 767px) {
    .products_gallery_row input[name="product_cart_quantity"],
    .products_gallery_row select[name="product_cart_quantity"] {
        /*width: 50px !important;*/
        /*padding-left: .75rem;*/
        background-position: right .25rem center;
    }
}

/* SHOW SIZE */
div.show_sizes_onhover {
    display: none;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 9999;
    padding-left: .25rem;
    padding-right: .25rem;
    width: -moz-available;
    width: -webkit-fill-available;
    background: rgba(255, 255, 255, .9);
    font-size: var(--text-size-sm);
    color: var(--grey-500);
    text-align: center;
    overflow-y: auto;
    max-height: 90%;
}

span.show_sizes_onhover_title {
    display: inline-block;
    padding-top: .25rem;
    font-weight: 700;
    color: var(--grey-700);
}

/**
 * Price label (https://shoptrader.atlassian.net/browse/PLAT-6609)
 */
.products_price,
.productlisting_price_label {
    position: relative;
    clear: both;
    width: 100%;
}

/* CONTAINER QUERY */
/* Dit werd gebruikt o de shopping cart buttons te laten wrappen, maar dat gebeurt nu altijd automatisch, als het nodig is. */
/*
.products_gallery_row .buttons_shoppingcart a {
    container: shopping-card-button / inline-size;
}

@container shopping-card-button (min-width: 140px) {
    .buttons_shoppingcart {
        flex-wrap: wrap;
    }
}
*/

/* Back in Stock button in PLP: ervoor zorgen dat de tekst zo lang mogelijk op 1 lijn blijft staan */
.products_gallery_row .backinstock-button {
    container: back-in-stock-btn / inline-size;
}

@container back-in-stock-btn (max-width: 236px) {
    .backinstock-button span:not(.st-icon) {
        font-size: var(--text-size-xs);
    }

    .backinstock-button {
        padding-inline: .5rem;
    }
}

/*------ Artikelkaart stijlen ------*/
/* Artikelkaart stijl - Lichtgrijze achtergrond en donkere tekst */
.plp-card-light {
    --card-background-color: var(--grey-50);
    color: var(--grey-900);
}

.plp-card-light .products_name_heading {
    color: var(--grey-900) !important;
}

/* Artikelkaart stijl - Donkergrijze achtergrond en lichte tekst */
.plp-card-dark {
    --card-background-color: var(--grey-900);
    --text-color-muted: var(--grey-400);
    --price-text-color: var(--grey-50);
    color: var(--grey-50);
}

.plp-card-dark .products_name_heading {
    color: var(--grey-50) !important;
}

.plp-card-dark .oldPrice {
    color: var(--text-color-muted) !important;
}

/* Artikelkaart stijl - Lichte doorschijnende achtergrond (maakt de kaart iets lichter dan de pagina) */
.plp-card-light-overlay {
    --card-background-color: rgba(255, 255, 255, 0.2); /* fallback */
    --card-background-color: color-mix(in srgb, var(--webshop-background-color) 85%, #fff);
}

/* Artikelkaart stijl - Donkere doorschijnende achtergrond (maakt de kaart iets donkerder dan de pagina) */
.plp-card-dark-overlay {
    --card-background-color: rgba(0, 0, 0, 0.1); /* fallback */
    --card-background-color: color-mix(in srgb, var(--webshop-background-color) 90%, #000);
}

/* Artikelkaart stijl - Geen achtergrondkleur (transparant) */
.product-card-slide:has(.plp-card-transparent),
.plp-card-transparent {
    --card-background-color: transparent;
}
/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/


/*----------------------------------------------*/
/*------------------ GLOBAL --------------------*/
/*----------------------------------------------*/
.col4.order-status-row-price,
.col6.order-status-row-totals {
    text-align: right;
}

.col7.order-status-row-icons {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--actual-text-md-line-height);
}

@media screen and (min-width: 768px) {
    .col7.order-status-row-icons {
        width: 100%;
    }
}

/*----------------------------------------------*/
/*----------------- ACCOUNT --------------------*/
/*----------------------------------------------*/
.account-table .col2 {
    width: 75px;
}

.account-table .col3 {
    text-align: center;
    width: 100px;
}

.return-request-open {
    color: var(--error-500);
}

.return-request-almost-done {
    color: var(--warning-500);
}

.return-request-done {
    color: var(--success-500);
}

@media screen and (max-width: 767px) {
    .account-overview-details {
        overflow-x: scroll;
    }

    .col7.order-status-row-icons {
        min-width: 75px;
    }
}

.account-list-information-section {
    --account-list-section-margin-block-start: 1.5rem;
    margin-top: var(--account-list-section-margin-block-start);
}

.account-list-information-section a {
    color: var(--body-text-color);
}

.account-list-information-section.prose a {
    --st-prose-link-text-decoration: none;
}

.account-list-information-section a:hover,
.account-list-information-section a:focus {
    color: var(--link-color-hover);
}

.mijn_account ul {
    list-style: none;
    margin-left: 0 !important;
}

.mijn_account a {
    display: inline-flex;
    align-items: center;
}

/*----------------------------------------------*/
/*--------------- EDIT ACCOUNT -----------------*/
/*----------------------------------------------*/
/* Bij het maken van nieuwe .tpl's dit doen zoals bij create_account.php met bootstrap etc. */
.account_edit td.col1 {
    margin-top: 1rem;
}

/*----------------------------------------------*/
/*--------------- FORGET PASSWORD --------------*/
/*----------------------------------------------*/
.password_forgotten_form {
    margin-top: 1rem;
}

/*----------------------------------------------*/
/*--------------- CREATE ACCOUNT --------------*/
/*----------------------------------------------*/
.password-help {
    display: inline-flex;
}

/*----------------------------------------------*/
/*--------------- ACCOUNT OPTIONS --------------*/
/*----------------------------------------------*/
.recaptcha-security-image {
    display: flex;
    flex-direction: column;
}

.recaptcha-security-image img#captcha {
    max-width: 50%;
    margin-top: .5rem;
}

.user_pass_forgotten,
.no-security-code {
    font-size: var(--text-size-sm);
}

.user_pass_forgotten:hover,
.no-security-code:hover {
    color: var(--link-color-hover);
}

/*----------------------------------------------*/
/*--------------- RETURN REQUEST ---------------*/
/*----------------------------------------------*/
.return-request-header {
    display: inline-flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.return-request-confirmation__divider {
    max-width: 24rem;
    gap: var(--st-spacing-sm, 1rem);
}

.return-request-confirmation__divider-line {
    flex: 1;
}

#return-request-table .number_product {
    min-width: 75px;
}

#return-request-table .order-status-row-product {
    display: flex;
    gap: .5rem;
}

#return-request-table .order-status-row-product .order-product_image {
    max-width: 75px;
}

#return-request-table .order-status-row-product .order-product_name {
    display: flex;
    align-items: center;
    width: 100%;
}

@media screen and (max-width: 767px) {
    #return-request-table .col1 {
        min-width: 225px;
    }

    .order-status-row-status {
        min-width: 100px;
    }

    .col4.order-status-row-price {
        min-width: 75px;
    }
}

/* ACCOUNT HISTORY INFO */
.account-history-info-section {
    margin-top: 1.5rem;
}

.account-history-info-heading {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.account-history-info-order-status {
    font-size: var(--text-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--success-700);
}

.account-history-info-order-overview {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

.account-history-info-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--gutter);
}

.account-history-info-box {
    padding: .5rem;
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
}

.account-history-info-box h2 {
    font-size: var(--h4-font-size) !important;
}

.account-history-info-savings {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.account-history-info-savings-item {
    display: grid;
    grid-template-columns: 200px max-content;
    grid-column-gap: .5rem;
}

.account-history-info-savings-not-processed {
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-bold);
}

@media screen and (max-width: 767px) {
    .account-history-info-order-overview {
        flex-direction: column;
    }
}

.account-history-info-table a {
    color: var(--body-text-color);
}

.account-history-info-table a:hover,
.account-history-info-table a:focus {
    color: var(--link-color-hover);
}

.order-overview-row-product-image {
    width: 44px;
}

.account-history-info-overview .col1.order-overview-row-product {
    text-align: left;
}

.account-history-info-overview .col3.order-overview-row-download,
.account-history-info-overview .col2.order-overview-row-price {
    text-align: right;
}

.account-history-info-overview .col2.order-overview-row-price {
    padding-inline-end: .5rem;
}

.order-total-confirmation {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    margin-right: 0.5rem;
}

.order-total-confirmation-item {
    display: grid;
    grid-template-columns: 250px 50px;
    grid-column-gap: .5rem;
    padding-block: .25rem;
}

.order-total-confirmation-item:not(:last-of-type) {
    border-bottom: 1px solid var(--border-color);
}

.order-total-confirmation-item-price {
    text-align: right;
}

.col1.order-history-row-date,
.col2.order-history-row-status,
.col3.order-history-row-tracking,
.col1.order-history-row-comment{
    text-align: left;
}

.button-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.5rem;
}

.button-list-left {
    display: flex;
    gap: .5rem;
}

.button-list-right {
    display: flex;
    justify-content: flex-end;
}

.button-list .tep_meta_continue,
.button-list .tep_meta_general {
    width: auto !important;
}

@media screen and (max-width: 767px) {
    .order-total-confirmation-item {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .button-list {
        display: flex !important;
        flex-direction: column;
        gap: .5rem;
    }

    .button-list-left {
        flex-direction: column;
    }

    .button-list a,
    .button-list button,
    .button-list-left form,
    .button-list-right form {
        width: -webkit-fill-available;
        width: -moz-available;
    }

    .button-list-left .tep_meta_continue {
        margin-top: 0 !important;
    }
}










/*table.account_edit tr td.col1,*/
/*table.account_password tr td.col1 {*/
/*    width: 200px;*/
/*}*/

/*table.checkout_payment_address tr td.col2,*/
/*table.checkout_payment_address tr th.col2,*/
/*table.checkout_shipping_address tr td.col2,*/
/*table.checkout_shipping_address tr th.col2 {*/
/*    text-align: center;*/
/*}*/

/*#cpCustomer div.already_account.active_area {*/
/*    margin-bottom: 20px;*/
/*}*/

.label_check.create_account_label {
    padding-left: 30px !important;
}

#ChangePasswordForm .box,
#checkout_page .box,
#create_account_form .box,
#password-strength .box {
    display: inline-block;
    text-align: center;
    border-radius: 5px;
}

#ChangePasswordForm .box,
#password-strength .box {
    position: relative;
    width: calc(90% + 10px);
    height: 35px;
    background-color: var(--grey-200);
}

#create_account_form .box {
    position: relative;
    width: 100%;
    height: 25px;
    background-color: var(--grey-200);
}

#create_account_form .box div.bar-text,
#ChangePasswordForm .box div.bar-text,
#password-strength .box div.bar-text {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #000;
    text-align: center;
    font-size: var(--text-size-xs);
    z-index: 3;
    line-height: 25px;
}

#create_account_form .box div.bar,
#cpCustomer .box div.bar,
#ChangePasswordForm .box div.bar {
    position: absolute;
    width: 0;
    height: 100%;
    z-index: 2;
    transition: 1s;
}

#create_account_form .medium .box div.bar-text,
#create_account_form .normal .box div.bar-text,
#create_account_form .strong .box div.bar-text,
#create_account_form .vstrong .box div.bar-text,
#ChangePasswordForm .medium .box div.bar-text,
#ChangePasswordForm .normal .box div.bar-text,
#ChangePasswordForm .strong .box div.bar-text,
#ChangePasswordForm .vstrong .box div.bar-text,
#cpCustomer .medium .box div.bar-text,
#cpCustomer .normal .box div.bar-text,
#cpCustomer .strong .box div.bar-text,
#cpCustomer .vstrong .box div.bar-text {
    color: #000;
}

#create_account_form .normal .box div.bar,
#ChangePasswordForm .normal .box div.bar,
#cpCustomer .normal .box div.bar {
    background: var(--error-500);
    border-radius: 5px;
    width: 25%;
}

#create_account_form .medium .box div.bar,
#ChangePasswordForm .medium .box div.bar,
#cpCustomer .medium .box div.bar {
    background: var(--warning-500);
    border-radius: 5px;
    width: 50%;
}

#create_account_form .strong .box div.bar,
#ChangePasswordForm .strong .box div.bar,
#cpCustomer .strong .box div.bar {
    background: var(--info-500);
    border-radius: 5px;
    width: 75%;
}

#create_account_form .vstrong .box div.bar,
#ChangePasswordForm .vstrong .box div.bar,
#cpCustomer .vstrong .box div.bar {
    background: var(--success-500);
    border-radius: 5px;
    width: 100%;
}

/*----------------------------------------------*/
/*---------------- ADDRESS BOOK ----------------*/
/*----------------------------------------------*/
.address-row {
    display: flex;
}

.address-col {
    flex: 1;
}

.address_book_primary {
    margin-block-end: var(--section-space-y);
}

.inhoud_address_book {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
}

.address-book-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
}

.address-book-col.address-details {
    flex: 1;
    min-width: 200px;
}

.address-book-col.address-actions {
    flex: 2;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--st-spacing-2xs);
}

.address-book-footer {
    display: flex;
    gap: var(--st-spacing-xs);
    margin-top: var(--st-spacing-xs);
    flex-wrap: wrap;
}

.address-book-divider {
    align-self: center;
}

.inhoud_address_book .address-book-row .btn {
    max-width: fit-content;
}


/*
CSS onderverdeling
Welke pagina's / globaal: Zoekresultaten
Is het cruciaal boven de vouw?: Ja ? - Maar pas zichtbaar na user interaction.

dus ---> Extern en non renderblocking inladen
*/

/* TODO: Het liefst ff unieke class op die form plaatsen - nog beter om gelijk een goed ontwerp te maken met evt. een zijbalk en minder gigantisch blok bovenaan */
body[class*="advanced-search-result.php"] #content form[name="advanced_search"] {
    padding-top: .5rem;
    padding-inline: .75rem; /* zelfde als pagination/sortby block */
    padding-bottom: .75rem;
    background-color: var(--grey-50); /* kader/box/widget background similarities - maybe introduce new color-variable  */
    border-radius: var(--border-radius-sm); /* zelfde als pagination/sortby block. Zou mooi zijn dat die visueel gelijk waren. */
    border: 1px solid var(--border-color);
}

@media screen and (min-width: 992px) {
    body[class*="advanced-search-result.php"] #content form[name="advanced_search"] {
        padding-inline: 1rem; /* zelfde als pagination/sortby block */
        padding-bottom: 1rem;
    }
}

.advanced-search__price-slider {
    margin-block: auto;
}

body[class*="advanced-search-result.php"] #content form[name="advanced_search"] .configuration_tep_meta {
    margin-top: var(--gutter);
}

body[class*="advanced-search-result.php"] #content form[name="advanced_search"] .form_section {
    margin-bottom: 0;
}

/* slider is te klein op mobiel, en je kan trouwens ook niet echt vegen met touch device - grondige verbetering nodig */
@media screen and (max-width: 767px) {
    .advanced-search__price-slider {
        display: none;
    }
}


/* uitgebreid zoeken dropdown */
#containerDropdown{
    display: flex;
    gap: 10px;
    font-size: 21px;
    cursor: pointer;
    width: max-content;
}

/* display none voor dropdown functie */
.priceSlider,
.options,
.categorySelect,
.dropdownIconUp{
    display: none;
}

/* No results */
.advanced-search-no-results {
    display: flex;
    justify-content: center;
    margin-block-start: var(--section-space-y);
}



/*
CSS onderverdeling
Welke pagina's / globaal: Alleen op infopages die formulier hebben en/of contact details
Is het cruciaal boven de vouw?: Ja?

dus ---> Intern inladen als formulier / company details aan staan
*/



/* CONTACT FORM + COMPANY DETAILS */

/*the section on infopages with google maps, form and company details*/
.infopage-contact-section {
    margin-top: var(--section-space-y);
}

/* geen margin-block-end gebruiken want het moet inline styling overschrijden */
.infopage__map {
    margin-bottom: var(--section-space-y) !important;
}

.infopage__map:empty {
    display: none;
}

.company-details__address,
.company-details__phone,
.company-details__email,
.company-details__whatsapp,
.company-details__phone a,
.company-details__email a,
.company-details__whatsapp a {
    display: flex;
    gap: .5rem
}

.company-details__icon {
    display: flex;
}

.company-details__address {
    margin-bottom: 1rem;
}

.company-details__address .company-details__icon {
    margin-top: .25rem;
}

.company-details__phone,
.company-details__email,
.company-details__whatsapp,
.company-details__phone a,
.company-details__email a,
.company-details__whatsapp a {
    align-items: center;
}

/* De kaart zelf. Zit los van <address> zodat de widget openingstijden en IBAN/BIC/KvK/Btw
   binnen de kaart maar buiten <address> kan zetten — daar hoort semantisch alleen
   contactinfo. Op de contactpagina draagt het <address> deze class rechtstreeks, zodat
   shop-maatwerk op .company-details address (live sinds 2022) dezelfde box blijft raken. */
.company-details__card {
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
    padding: .5rem var(--gutter);
    /* Kwam voorheen uit de address-reset (_reset.css), toen <address> zelf de kaart was.
       Op de contactpagina is dat nog steeds hetzelfde element en dezelfde 1rem. */
    margin-bottom: 1rem;
}

/* <address> is binnen de widget-kaart een gewoon blok: de kaart levert de padding, en de
   reset-margin eronder zou het van de blokken erna wegduwen. */
.company-details__card > address {
    margin-bottom: 0;
}

/* Gedeelde label/waarde-lijst (openingstijden en IBAN/BIC/KvK/Btw) */
.details-list {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem .5rem;
    margin: 0;
}

.details-list__row {
    display: contents;
}

.details-list__label,
.details-list__value {
    margin: 0;
}

.details-list__value {
    text-align: right;
}

.details-list__row dt {
    font-weight: var(--font-weight-normal);
}

.details-list--label-bold .details-list__label {
    font-weight: var(--font-weight-bold);
}

.details-list--value-bold .details-list__value {
    font-weight: var(--font-weight-bold);
}

/* Vaste dikgedrukt-keuzes, voorheen vier toggles in de widget (zie CompanyDetails.php).
   Openingstijden: waarde vet, label normaal. IBAN/BIC/KvK/Btw: label vet, waarde normaal.
   Dit zijn precies de oude defaults. De --label-bold/--value-bold modifiers hierboven
   blijven staan: dat is het mechanisme waarmee de toggles teruggezet kunnen worden.
   Moet specifieker zijn dan .details-list__row dt hierboven, vandaar de blok-selector. */
.company-details-opening-hours .details-list__value,
.company-additional-info .details-list__label {
    font-weight: var(--font-weight-bold);
}

/* Op één rij (naast elkaar), met optioneel scheidingsteken tussen de items.
   Iets specifieker (.details-list.details-list--inline) zodat flex wint van een
   eventueel meegegeven .company-additional-info { display: grid }. */
.details-list.details-list--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: .25rem;
}

.details-list--inline .details-list__row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.details-list--inline .details-list__row:not(:last-child) {
    margin-inline-end: 1rem;
}

.details-list--inline.details-list--separator-dash .details-list__row:not(:last-child),
.details-list--inline.details-list--separator-pipe .details-list__row:not(:last-child) {
    margin-inline-end: 0;
}

.details-list--inline.details-list--separator-dash .details-list__row:not(:last-child)::after,
.details-list--inline.details-list--separator-pipe .details-list__row:not(:last-child)::after {
    margin-inline-end: .5rem;
    opacity: .5;
}

.details-list--inline.details-list--separator-dash .details-list__row:not(:last-child)::after {
    content: "-";
}

.details-list--inline.details-list--separator-pipe .details-list__row:not(:last-child)::after {
    content: "|";
}

/* IBAN/BIC/KvK/Btw-blok (widget en o.a. de contactpagina) */
.company-additional-info {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-column-gap: .5rem;
}

/* De widget bouwt dit blok als .details-list (dt/dd) en lijnt de waarde rechts uit;
   daar hoort de labelkolom de vrije ruimte op te vullen. Deze regel moet specifieker
   zijn dan .company-additional-info hierboven, want die staat later in het bestand dan
   de 1fr auto van .details-list zelf. Contact.tpl gebruikt nog kale <p>'s zonder
   .details-list__value en houdt daarmee de max-content-kolommen. */
.details-list.company-additional-info {
    grid-template-columns: 1fr auto;
}

.company-additional-info-title {
    font-weight: var(--font-weight-bold);
}

.company-details:not(.company-details-extended) .company-additional-info:not(.company-additional-info--inside) {
    margin-bottom: 1rem;
}

.company-additional-info--inside {
    margin-block-start: var(--gutter);
    padding-block-start: var(--gutter);
}

.company-additional-info--divider {
    border-block-start: var(--border-width) solid color-mix(in srgb, currentColor 20%, transparent);
}

.company-details-subtitle {
    margin-bottom: 1rem;
}

.company-details-image {
    margin-bottom: 1rem;
}

.company-details-image__visual {
    max-width: 100%;
    height: auto;
}

.company-details-footer-text {
    margin-top: 1rem;
}

/* Uitgebreide weergave */
.company-details-extended {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.company-details-extended__item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.company-details-extended__icon {
    --st-icon-size: 1.25rem;
    /* Doorzichtigheid van de achtergrond, voorheen de dropdown iconBoxOpacity in de widget
       (zie CompanyDetails.php). Vast op 100% = volledig zichtbaar; per shop bij te stellen
       via CSS-maatwerk op deze custom property. Wordt uitgelezen door de color-mix in
       company-details.dynamic.css.tpl, dus de eenheid (%) hoort in de waarde. */
    --company-details-icon-box-opacity: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--border-radius);
    background-color: var(--grey-100);
    color: var(--body-text-color);
}

.company-details-extended__body {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.company-details-extended__label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .7;
}

.company-details-extended__value {
    font-size: var(--text-size-lg, 1.125rem);
}

.company-details-extended__value span {
    display: block;
    margin: 0;
}

.company-details-extended--value-bold .company-details-extended__value-strong {
    font-weight: var(--font-weight-bold);
}

/* Vaste dikgedrukt-keuze, voorheen de toggle extendedValueBold (zie CompanyDetails.php).
   Dit is de oude default. De modifier hierboven blijft staan als terugzet-mechanisme. */
.company-details-extended .company-details-extended__value-strong {
    font-weight: var(--font-weight-bold);
}

/* Links volgen de eigen tekstkleur van de rij (--heading-color) als die is ingesteld,
   anders de standaard linkkleur. Zo houdt de extended-weergave zich aan de rij-kleur. */
.company-details-extended__value a {
    text-decoration: none;
    color: var(--heading-color, var(--link-color));
}

.company-details-extended__value a:hover,
.company-details-extended__value a:focus {
    color: var(--heading-color, var(--link-color-hover));
}

.company-details-extended__description {
    margin: 0;
    opacity: .7;
}

/* Openingstijden */
.company-details:not(.company-details-extended) .company-details-opening-hours {
    margin-block: var(--gutter);
}

.company-details-opening-hours__header {
    margin-bottom: .75rem;
}

.company-details-opening-hours__icon {
    --st-icon-size: 1em;
    display: inline-flex;
    flex-shrink: 0;
}

/* De icon staat in het titel-element, zodat 1em meeschaalt met de gekozen tag/stijl */
.company-details-opening-hours__title {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.company-details-opening-hours__caption {
    margin-top: .75rem;
    margin-bottom: 0;
    opacity: .7;
}

/* Eigen card (openingstijden en IBAN/BIC/KvK/Btw) */
.company-details-opening-hours--card,
.company-additional-info--card {
    padding: var(--gutter);
    border-radius: var(--border-radius);
    background-color: var(--grey-100);
}

textarea.form-control.contactform-message {
    min-height: 10em;
}

@media screen and (min-width: 768px) {
    .company-details.bg-width-fit-content .company-details__card {
        width: fit-content;
        width: -moz-fit-content;
    }

    .company-details-opening-hours--fit-content {
        width: fit-content;
        width: -moz-fit-content;
    }

    /* Zo breed als de inhoud: kolommen hugpen de inhoud en de waarde weer links uitgelijnd */
    .details-list--fit-content {
        width: fit-content;
        width: -moz-fit-content;
        grid-template-columns: max-content max-content;
    }

    .details-list--fit-content .details-list__value {
        text-align: left;
    }
}

/*
CSS onderverdeling
Welke pagina's / globaal: Manufacturers.php en ???
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

/*------------------------------------------*/
/*------- MANUFACTURERS CATEGORY PAGE ------*/
/*------------------------------------------*/
.manufacturer-page .categories_info p {
    margin-bottom: 1rem;
}

div.manufacturer_image img {
    max-width: 300px;
    max-height: 300px;
    border-radius: var(--border-radius-small);
}

/*------------------------------------------*/
/*----------- MANUFACTURERS PAGE -----------*/
/*----------- manufacturers.php ------------*/
/*------------------------------------------*/
.manufacturers-listing {
    display: grid;
    grid-template-columns: repeat(var(--categorie-listing-number-of-cols), 1fr);
    grid-column-gap: var(--gutter);
    grid-row-gap: var(--gutter);
    margin-block: var(--gutter);
}

.manufacturers-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background-color: var(--card-background-color);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
    text-align: center;

    transition-property: box-shadow, border-color;
    transition-duration: var(--card-shadow-hover-duration);
    transition-timing-function: var(--card-shadow-hover-timing-function);
}

.manufacturers-card:hover {
    border: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
}

.manufacturers-card_image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    height: -webkit-fill-available;
    height: -moz-available;
}

.manufacturers-card_image a {
    width: 100%;
}

.manufacturers-card_image img {
    display: block;
    width: -webkit-fill-available;
    width: -moz-available;
    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}

.manufacturers-card_name {
    padding-block: .5rem;
}

.manufacturers-card_name h2 {
    overflow: hidden;
    padding: 0 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manufacturers-card_name-heading {
    font-size: var(--text-size-md) !important;
    margin-bottom: 0 !important;
    container: categories-name-heading / inline-size;
}

.manufacturers-card_name-heading a {
    color: var(--body-text-color);
}

@media screen and (max-width: 767px) {
    .manufacturers-listing {
        grid-template-columns: repeat(var(--categorie-listing-number-of-cols-mobile), 1fr);
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

@media only screen and (max-width: 480px) {
    .product_review_image img {
        max-width: 200px;
        max-height: 200px;
    }
}

@media only screen and (min-width: 800px) {
    .left_review_column {
        width: 60%;
    }

    .right_review_column {
        width: 40%;
        float: right;
    }

    .product_review_your_review {
        width: 90%;
    }

    .product_review_image {
        width: 100%;
        text-align: right;
    }
}

div.user_review_control {
    position: relative;
    margin-left: 5px;
    margin-top: 15px;
    float: left;
    background-color: #d9d9d9;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
}

div.user_review_control a {
    position: relative;
    display: block;
    float: left;
    z-index: 3;
}

div.user_review_control a#share-it-review {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

div.user_review_control i {
    padding: 2px 6px 3px;
}

div.user_review_control i span {
    display: none;
}

.product_review_fields div:not(:last-of-type) {
    margin-block-end: .5rem;
}

.product_review_fields input {
    height: 35px;
}

.product_review_fields input,
.product_review_name {
    margin-right: 10px;
}

.product_review_image img {
    max-width: 300px;
    max-height: 300px;
}

.row_review {
    display: flex;
    flex-wrap: wrap;
    /*padding: 5px;*/
}

/*.product_review_your_review {*/
/*    padding: 5px;*/
/*}*/

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked) > input {
    position: absolute;
    display: none;
}

.rate:not(:checked) > label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

/*.rate:not(:checked) > label:before {*/
/*    content: '★ ';*/
/*}*/

.rate > input:checked ~ label {
    color: #F4C737;
}

.rate:not(:checked) > label:hover, .rate:not(:checked) > label:hover ~ label {
    color: #F4C737;
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

/* review stars zonder tabbladen*/
h2 span.rating_stars{
    font-size: var(--text-size-md);
}

/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

.quotation-form {
    --gutter: 4rem;
    display: grid;
    grid-template-columns: repeat(2, max(calc(50% - calc(var(--gutter) / 2))));
    column-gap: var(--gutter);
    margin-top: 2rem;
}

.quotation-form-product-image {
    margin-bottom: 1rem;
}

.quotation-form-product-image img {
    border-radius: var(--border-radius-small);
}

.quotation-form-additional-info {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.quotation-form-additional-info-item {
    display: grid;
    grid-template-columns: 150px 1fr;;
}

@media screen and (max-width: 767px) {
    .quotation-form {
        display: flex;
        flex-direction: column;
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Checkout zo te zien.
Is het cruciaal boven de vouw?: Nee ?

dus ---> ... inladen
*/



table.algemene_voorwaarden a {
    text-decoration: underline;
}

/*
CSS onderverdeling
Welke pagina's / globaal: ?
Is het cruciaal boven de vouw?: ?

dus ---> ... inladen
*/

.sitemap ul, .sitemap ul > ul {
    margin-left: 15px;
}

/* Homepage block content */
.contentBlockContainer {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--gutter);
    margin-bottom: var(--section-space-y);
}


@media screen and (max-width: 575px) {
    .w25, .w33, .w50, .w66, .w75, .w100, .wrapper {
        grid-column: span 12;
    }

    .contentBlock:not(.last) {
        margin-bottom: var(--gutter);
    }
}

@media screen and (min-width: 576px) {
    .w25 {
        grid-column: span 3;
    }

    .w33 {
        grid-column: span 4;
    }

    .w50 {
        grid-column: span 6;
    }

    .w66 {
        grid-column: span 8;
    }

    .w75 {
        grid-column: span 9;
    }

    .w100 {
        grid-column: span 12;
    }
}
/* Homepage slider */
#slider-homepage #preview img {
    margin: auto;
}

#owl-carousel-homepage img {
    height: auto;
}


/* Merkenslider */
#owl-carousel-merkenslider {
    margin-top: 2.5rem;
}
/* Dit is het standaard thema van het platform - de leidraad is Mantel.com / Coolblue - Uiteindelijk kan deze wellicht als thema 'strak, eenvoudig, oid' gebruikt worden  */

/* todo: sommige variabelen hoeven helemaal geen thema te zijn. Vaak is het voor alle shops goed of voor geen een. Bijv. input placeholder txt color of sidebar width.
    Bij verzoek om aan te passen best practice handhaven en anders maatwerk, geen thema - waar dan variabelen plaatsen? Liever in een echte css file  */

:root {
    /*LAYOUT*/
    --custom-st-container-space-x: 10px; /* de ruimte aan de linker en rechter kant van de container op mobiel */
    --custom-sidebar-width: clamp(270px, 20%, 320px); /* todo: min, max, preferred width toevoegen? Value ontleden voor betere flexibiliteit? */

    /*MEGAMENU*/
    --mega-menu-dropdown-border-radius: 0;

    /* FORMS AND INPUTS */
    /* todo: border-radius afhankelijk maken van gekozen button-border-radius in thema builder */
    --input-border-radius-max: .5rem;
    --input-sm-border-radius: min(var(--btn-border-radius), var(--input-border-radius-max));
    --input-border-radius: min(var(--btn-border-radius), var(--input-border-radius-max));
    --input-lg-border-radius: min(var(--btn-border-radius), var(--input-border-radius-max));

    --input-font-stack: var(--body-font-stack);
    --input-font-size: var(--text-size-md);
    --input-border-width: 1px;
    --input-text-color: var(--grey-700);
    --input-bg-color: #fff;
    --input-border-color: var(--grey-500); /* Voor EAA donkerdere kleur dan --border-color. Evt een speciale var aanmaken hiervoor? */
    --input-placeholder-text-color: var(--grey-400);

    --input-text-color-focus: var(--input-text-color);
    --input-bg-color-focus: var(--input-bg-color);
    --input-border-color-focus: var(--grey-500);

    /*--input-outline-focus: var(--grey-500) solid 2px;*/
    --input-outline-focus: color-mix(in srgb, var(--grey-500), transparent) solid 2px;


    /* CARDS (products, categories, laatst bekeken) */
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);
    --card-background-color: #fff;
    --card-border-width: 1px;
    --card-border-color: var(--border-color-transparent-dark);
    --card-border-color-hover: var(--border-color-transparent-dark);
    --card-border: var(--card-border-width) solid var(--card-border-color);
    --card-border-hover: var(--card-border-width) solid var(--card-border-color-hover);
    --card-border-radius: var(--border-radius);

    --card-shadow-hover-duration: .1s;
    --card-shadow-hover-timing-function: ease;

    /*BOX HEADINGS*/
    --box-heading-font-size: var(--text-size-lg);
}
.header-mobile-search-inside-menu {
    --header-mobile-searchbox-inside-menu-padding-y: var(--st-spacing-xs);
    --header-mobile-searchbox-inside-menu-padding-x: var(--header-mobile-item-padding-x);

    padding-block: var(--header-mobile-searchbox-inside-menu-padding-y);
    padding-inline: var(--header-mobile-searchbox-inside-menu-padding-x);
}
/*-----------------------*/
/*-------- POPUP --------*/
/*-----------------------*/
.warningBox-popup-carrousel .modal-content {
    width: 80%;
    max-height: calc(90vh - 5%);
    overflow: auto;
}

@media screen and (min-width: 992px) {
    .warningBox-popup-carrousel .modal-content {
        width: 800px;
    }
}

/*.warningBox-popup-carrousel {*/
/*    position: fixed;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    background: none repeat scroll 0 0 #FFFFFF;*/
/*    border: 1px solid #eaeaea;*/
/*    border-radius: 4px;*/
/*    font-size: var(--text-size-sm);*/
/*    color: #000;*/
/*    padding: 1rem;*/
/*    z-index: 9999;*/
/*}*/

.uadWarningBoxtext{
    height: 367px;
    overflow-y: auto;
}

.uadWarningBoxButtons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

@media screen and (max-width: 820px) {
    .uadWarningBoxButtons {
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
    }

    .uadWarningBoxButtons .btn{
        margin-top:10px;
    }
}

    /* BACKGROUND OVERLAY */
#lightBoxOpacity {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 9998;
    opacity: 0.2;
}

/* LOADER */
img#ajax-loader {
    border: 0;
}

/* BUTTONS */
.popup_cart_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

#continue_shopping {
    cursor: pointer;
}

#checkout {
    cursor: pointer;
}

/* POPUP TITLES */
.popup_add_product_container_title,
.popup_add_product_container_title_aanbevolen{
    font-size: var(--h4-font-size);
    font-family: var(--body-font-stack);
    font-weight: var(--font-weight-bold);
    color: inherit;
}

.popup_add_product_container_title_aanbevolen .h4 {
    color: inherit;
}

/* PRODUCT */
.popup_add_product_container_wrapper {
    display: flex;
    margin-top: 1rem;
}

@media screen and (max-width: 767px) {
    .popup_add_product_container_wrapper {
        display: flex;
    }
}

/* PRODUCT NAME */
.popup_product_name {
    font-size: var(--text-size-md);
    font-weight: var(--font-weight-bold);
}

@media screen and (max-width: 575px) {
    .recommended-products-slider .item .products_gallery_row_name {
        min-height: unset;
    }
}

/* PRODUCT INFO */
.popup_product_info_container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: .75rem;
}
.popup_product_info_container .product_options p {
    font-size: var(--text-size-sm);
}

.popup_product_content {
    max-width: 80%;
}

/* PRODUCT IMAGE */
.popup_product_image_container {
    width: 75px;
    display: inline-block;
}

.recommended-products-slider__title {
    margin-bottom: .5rem;
}

/* PRODUCT PRICE */
.popup_product_price {
    font-size: var(--text-size-md);
    font-weight: var(--font-weight-bold);
    color: inherit;
}

@media screen and (max-width: 575px) {
    .popup_product_price {
        display: inline-flex;
    }
}
/*---------------------------------*/
/*------ POPUP CROSS SELLING ------*/
/*---------------------------------*/
@media screen and (min-width: 120px) and (max-width: 767px) {
    .popup_cart_footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .popup_cart_footer #continue_shopping {
        margin-bottom: .5rem;
    }

    .popup_cart_footer #continue_shopping,
    .popup_cart_footer #checkout {
        width: -moz-available;
        width: -webkit-fill-available;
    }
}

.shopingCartPopup {
    margin-top: 1.5rem;
}

/*----------------------*/
/*------ CAROUSEL ------*/
/*----------------------*/
.winkelwagen-extended-recommended-products-slider .products_name_heading {
    margin-block-start: var(--gutter-half);
    color: inherit;
}

.winkelwagen-extended-recommended-products-slider .product_gallery_footer .products_gallery_row_price .custom_price_mtw_listing {
    display: flex;
    flex-direction: column;
}

.winkelwagen-extended-recommended-products-slider .product_gallery_footer .products_gallery_row_price .custom_price_mtw_listing > span {
    width: max-content;
}

/* PRODUCT LISTING FOOTER (Price + button inline) */
.winkelwagen-extended-recommended-products-slider .products_gallery_header {
    flex: 1 1 auto;
    /*padding-inline: .5rem;*/ /* padding op card zelf plaatsen? */
}

.winkelwagen-extended-recommended-products-slider .product_gallery_footer_buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: var(--gutter-half);
    gap: var(--gutter-half);
    /*padding: 0 .5rem .5rem .5rem;*/ /* padding op card zelf plaatsen? */
}

.winkelwagen-extended-recommended-products-slider .product_gallery_footer_buttons  {
    flex-direction: row;
}

/* TODO: Bij aantal input button andere styling - geen column en geen fill-available */
.winkelwagen-extended-recommended-products-slider .product_gallery_footer .products_gallery_row_price,
.winkelwagen-extended-recommended-products-slider .product_gallery_footer .products_gallery_row_buttons,
.winkelwagen-extended-recommended-products-slider .product_gallery_footer .btn.btn-icon {
    width: fit-content !important;
    width: -moz-fit-content !important;
}

.winkelwagen-extended-recommended-products-slider .normalPrice {
    color: inherit;
}

@media screen and (min-width: 120px) and (max-width: 479px) {
    hr.grafeer_spacer {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    tr.grafeer_row td {
        display: block;
    }

    table.shopping_cart tr td table.grafeer tr td:first-child, table.shopping_cart tr td table.grafeer tr td:last-child {
        padding: 0 10px;
    }
}

table.shopping_cart tr td table.grafeer tr td, table.shopping_cart.addon-grafeer tr td {
    border: 0;
}

table.shopping_cart.addon-grafeer th.shopping_cart_total {
    text-align: right;
}

table.shopping_cart tr td table.grafeer tr td:first-child {
    padding-left: 10px;
}

table.shopping_cart tr td table.grafeer tr td:last-child {
    padding-right: 10px;
}

hr.grafeer_spacer {
    position: relative;
    height: 1px;
}
.guestbook_header h1 {
    margin-block-end: var(--gutter);
}

[class*="guestbook.php"] table:has(.message) {
    margin-block-end: var(--gutter);
}
.meebestelmodule {
    margin-block-start: var(--section-space-y);
}

.meebestellen-swiper .product-card-slide-name {
    min-height: calc(var(--article-names-reserved-height-desktop) * var(--actual-text-md-line-height));
}

@media screen and (max-width: 767px) {
    .meebestellen-swiper .product-card-slide-name {
        min-height: calc(var(--article-names-reserved-height-mobile) * var(--actual-text-md-line-height));
    }
}

.newsletters .col1 {
    display: flex;
}

div.box input.newsletter.input_styling {
    width: inherit;
}

div.addthis_default_style {
    position: relative;
    float: left;
    margin-top: 19px;
    z-index: 10;
}
/* Gecombineerde deferred payments styling */
.productinfo_deferred-payments {
    margin-block-end: 1.5rem;
}

.productinfo_deferred-payments *,
.deferred-payments-text {
    font-size: var(--text-size-sm);
    margin: 0;
}

.deferred-link {
    font-weight: 700;
}

.st-icon.in3-logo-small svg {
    margin-bottom: 2px;
    --st-icon-size: 1.2em;
}

.in3-logo-small {
    display: inline-flex;
    vertical-align: middle;
    margin-inline-start: 0.25rem;
}
#aanbevolen_artikelen,
#alternatieve_artikelen,
.recommended_products,
.alternative_products {
    margin-block-start: var(--section-space-y);
}

#aanbevolen_artikelen .products_gallery_row,
#alternatieve_artikelen .products_gallery_row {

    /*Max height werd geintroduceerd voor mho en benu, bij andere shops gaf dit issues. Daarom nu weggehaald in bij mho/benu in default gezet.*/
    /*--alternative-aanbevolen-card-max-height: 350px;*/
    /*max-height: var(--alternative-aanbevolen-card-max-height);*/

    /*height: -webkit-fill-available;*/
    /*height: -moz-available;*/
    height: auto;
    flex-grow: 1;
}

/* Content en winkelwagenpopup */
.recommended-products-container {
    margin-block-start: var(--st-spacing-md);
}

.recommended-products-container .skip-link:last-of-type {
    margin-block-end: var(--st-spacing-md);
}

/* TODO: onderstaande alleen inladen als reacties aan staan */
.st-comment-listing {
    margin-block-start: var(--st-spacing-4xl);
}

.st-comment:not(:last-of-type) {
    padding-block-end: var(--st-spacing-2xl);
    border-bottom: 1px solid var(--border-color); /* Toepassen op alle elementen behalve het laatste item */
    margin-block-end: var(--st-spacing-2xl);
}

.st-comment-author {
    font-weight: var(--font-weight-bold);
}

.st-comment-details {
    font-size: var(--text-size-sm);
    text-transform: uppercase;
    letter-spacing: .05em; /* todo: evt. uitbreiden naar meer values voor utilities */
    color: var(--text-color-muted);
}

.st-comment-details-divider:after {
    content:"\00a0"; /* hiermee kan je een spatie plaatsen achter een element */
}
/*
CSS onderverdeling
Welke pagina's / globaal: PLP - alleen als relevante optie aan staat
Is het cruciaal boven de vouw?: JA?

dus ---> ... inladen
*/


/* --------------------------------------- */
/* ------- PRODUCT LISTING GALLERY ------- */
/* --------------------------------------- */

.products_gallery_row {
    display: flex;
    flex-direction: column;
    font-size: var(--text-size);
    padding: var(--gutter-half);
}

.products_gallery_header {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.product_listing_productmodel {
    font-size: var(--text-size-xs);
    color: var(--text-color-muted);
    line-height: 1em;
    min-height: 1em;
    margin-top: var(--gutter-half);
}

.products_gallery_row_manufacturer {
    margin-top: auto;
    padding-top: 2px;
}

.products_gallery_row_review_stars {
    --plp-review-stars-margin-top: var(--gutter-half);
    margin-top: var(--plp-review-stars-margin-top);
    font-size: var(--text-size-md);
    --st-icon-size: 1em;
}

.products_gallery_row_description {
    margin-top: var(--gutter-half);
    min-height: calc( var(--number-of-lines-plp-description) * var(--actual-text-sm-line-height) );
}


/* DELIVERY TIMES */
.products_gallery_row_levertijden,
.products_gallery_row_levertijden p {
    font-size: var(--text-size-sm);
}
.products_gallery_row_levertijden {
    min-height: calc(1 * var(--actual-text-sm-line-height));
}

@supports selector(:has(a, b)) {
    /* If listing does not contain ANY description or ANY delivery time, hide it. */
    .home_page_listing:not(:has(.products_gallery_row_description p)) .products_gallery_row_description,
    .home_page_listing:not(:has(.products_gallery_row_levertijden p)) .products_gallery_row_levertijden,
    .home_page_listing:not(:has(.product_listing_quotation_button)) .btn-empty-space--quotation {
        display: none;
    }
}

/*.products_gallery_row_price,*/
/*.products_gallery_row_model,*/
/*.products_gallery_row_levertijden,*/
/*.products_gallery_row_description,*/
/*.products_gallery_row_meebestellen {*/
/*    margin-bottom: .5rem;*/
/*}*/

/*.products_gallery_row_price {*/
/*    margin-top: 1rem;*/
/*}*/

/*.products_gallery_row_review_stars {*/
/*    margin-bottom: 1rem;*/
/*}*/


/*.products_gallery_row .product_listing_quotation_button.quotation_shoppingcart_button {*/
/*    margin-bottom: .5rem;*/
/*}*/




/* PRODUCT NAME */
.products_name_heading {
    font-size: var(--text-size-md);
    line-height: 1.2;
    margin-top: calc(var(--gutter-half) / 2);
    margin-bottom: 0;
}


.products_gallery_row_name {
    min-height: calc(var(--article-names-reserved-height-desktop) * var(--actual-text-md-line-height));
}

@media screen and (max-width: 767px) {
    .products_gallery_row_name {
        min-height: calc(var(--article-names-reserved-height-mobile) * var(--actual-text-md-line-height));
    }
}

/* PRICE WITH TAX */
.products_price-tax {
    display: flex;
    flex-direction: column;
}

/* PRICE */
.products_gallery_row_price {
    display: flex;
    align-items: baseline;
    column-gap: .25rem;
}


/* BUTTONS */
.products_gallery_row_buttons {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@container products-gallery-row (max-width: 180px) {
    .products_gallery_row_buttons .configuration_btn {
        /* De teksten in de buttons kleiner maken wanneer de product card smaller is */
        font-size: var(--text-size-sm);
    }
}

.products_gallery_row_buttons .configuration_btn {
    /* De teksten in de buttons niet kunnen laten wrappen */
    white-space: nowrap;
}

.products_gallery_row_buttons .product_listing_sold_out_button .configuration_btn {
    /* De teksten in de sold out button wel kunnen laten wrappen */
    white-space: unset;
}

.products_gallery_row_buttons .product_listing_quotation_button.offerte_and_details_button,
.products_gallery_row_buttons .product_listing_buttons.details_button.out_of_stock_button,
.products_gallery_row_buttons .product_listing_buttons.details_button.backorder_button,
.products_gallery_row_buttons .product_listing_buttons.shopping_and_details_button {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gutter-half);
}

.product_listing_details_button,
.product_listing_quotation_button,
.product_listing_sold_out_button {
    display: flex;
}

.products_gallery_row_buttons .buttons_shoppingcart {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.products_gallery_footer .buttons_shoppingcart {
    justify-content: flex-end;
    width: auto;
}

.products_gallery_row_buttons .product_listing_buttons:not(.details_button) .product_listing_sold_out_button {
    width: 100%;
}

.products_gallery_row_buttons .product_listing_buttons.backorder_button {
    flex-direction: column;
}

.products_gallery_row_buttons .product_listing_buttons.backorder_button .btn-backorder,
.products_gallery_row_buttons .product_listing_buttons .configuration_btn,
.products_gallery_row_buttons .product_listing_quotation_button,
.products_gallery_row_buttons .product_listing_sold_out_button button {
    flex-grow: 1;
}

.product_gallery_footer_buttons-extra .btn {
    width: 100%;
}

/* COMPARE PRODUCTS */
.products_gallery_row_compare {
    padding-top: calc(var(--gutter-half) / 4);
    border-top: 1px solid var(--border-color);
}

/* PRODUCT LISTING FOOTER (Price + button inline) */
.product_gallery_footer {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-half);
}

.product_gallery_footer_buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-block-start: var(--gutter-half);
    gap: var(--gutter-half);
}

.product_gallery_footer_buttons .shopping_and_details_button {
    grid-template-columns: 1fr max-content !important;
}

.product_gallery_footer_buttons .details_button.backorder_button {
    grid-template-columns: 1fr !important;
}

.product_gallery_footer_buttons .products_gallery_row_price {
    flex-wrap: wrap;
    flex: 1;
}

.product_gallery_footer_buttons .products_gallery_row_buttons {
    margin-block-start: 0;
}

.product_gallery_footer_buttons .buttons_shoppingcart a {
    container: unset;
}

/* Andert: Deze code is uitgezet omdat de combinatie van de detailsknop (hernoemd naar 'meer info') en de bestel-icon-button leidde tot wrapping issues. De code is gecommentarieerd om aan te geven dat dit eerder anders was. */
/*.product_gallery_footer_buttons .products_gallery_row_buttons .configuration_btn {*/
/*     white-space: normal;*/
/*}*/

.product_gallery_footer_buttons .product_listing_quotation_button {
    width: 100%;
}

@media screen and (max-width: 456px) {
    .product_gallery_footer .products_gallery_row_buttons {
        width: 100%;
    }

    .product_gallery_footer .product_listing_details_button {
        width: -moz-available;
        width: -webkit-fill-available;
    }
}

/* CONTAINER QUERY */
.products_gallery_row {
    container: products-gallery-row / inline-size;
}

@container products-gallery-row (max-width: 9rem) {
    .products_name_heading {
        font-size: var(--text-size-sm);
    }
}

@container products-gallery-row (max-width: 223px) {
    .products_gallery_row_buttons .product_listing_quotation_button.offerte_and_details_button,
    .products_gallery_row_buttons .product_listing_buttons,
    .products_gallery_row_buttons .product_listing_buttons.details_button.out_of_stock_button,
    .products_gallery_row_buttons .product_listing_buttons.details_button.backorder_button,
    .products_gallery_row_buttons .product_listing_buttons.shopping_and_details_button {
        display: flex;
    }

    .products_gallery_row_buttons .product_listing_quotation_button.offerte_and_details_button,
    .products_gallery_row_buttons .product_listing_buttons,
    .products_gallery_row_buttons .product_listing_buttons.out_of_stock_button {
        flex-direction: column;
    }

    /* TODO: Bij aantal input button andere styling - geen column en geen fill-available */
    /* EDIT-Andert : Deze width fill-available heb ik weggehaald en op .product_gallery_footer flex-wrap:wrap geplaatst zodat er geen container-query meer nodig is maar het automatisch wrapt als er geen ruimte meer is.  */
    /*
    .products_gallery_row_buttons .configuration_btn,
    .product_gallery_footer .products_gallery_row_price,
    .product_gallery_footer .products_gallery_row_buttons {
        width: -moz-available !important;
        width: -webkit-fill-available !important;
    }
     */

    .product_gallery_footer .shopping_and_details_button {
        flex-direction: row !important;
    }

    /*.product_gallery_footer .btn.btn-icon {*/
    /*    width: 100%;*/
    /*}*/
}

/* Text alignment PLP Gallery Card */
.products_gallery_row.text-center .products_gallery_row_price {
    justify-content: center;
}

/*.products_gallery_row.text-end .products_gallery_row_price {*/
/*    justify-content: end;*/
/*}*/
@media screen and (min-width: 768px) {
    .categories_name_heading {
        max-height: calc(var(--category-titles-reserved-height-desktop) * var(--actual-text-md-line-height));
    }

    .categories_name_link {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        /* number of lines to show */
        -webkit-line-clamp: var(--category-titles-reserved-height-desktop);
        line-clamp: var(--category-titles-reserved-height-desktop);
    }
}
@media screen and (max-width: 767px) {
    .categories_name_heading {
        max-height: calc(var(--category-titles-reserved-height-mobile) * var(--actual-text-md-line-height));
    }

    .categories_name_link {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        /* number of lines to show */
        -webkit-line-clamp: var(--category-titles-reserved-height-mobile);
        line-clamp: var(--category-titles-reserved-height-mobile);
    }
}
.categories_name {
    text-align: center;
}
.categories_row {
    display: flex;
    flex-direction: column;
}

.categories_name {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/*
CSS onderverdeling
Welke pagina's / globaal: Geen idee??????
Is het cruciaal boven de vouw?:

dus ---> ... inladen
*/


.coupon-wrapper {
    display: inline-block;
}

.coupon-wrapper span {
    display: inline-block;
    font-size: smaller;
    float: right;
    cursor: pointer;
}

.coupon td {
    vertical-align: middle;
}

.coupon-wrapper-cart span {
    padding-left: 5px;
    font-size: smaller;
}

.mfp-bg,.mfp-wrap{position:fixed;left:0;top:0}.mfp-bg,.mfp-container,.mfp-wrap{height:100%;width:100%}.mfp-arrow:after,.mfp-arrow:before,.mfp-container:before,.mfp-figure:after{content:''}.mfp-bg{z-index:7882;overflow:hidden;background:#0b0b0b;opacity:.8}.mfp-wrap{z-index:7883;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container:before{display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#CCC;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#CCC}.mfp-close,.mfp-preloader a:hover{color:#FFF}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}.mfp-figure:after,.mfp-iframe-scaler iframe{box-shadow:0 0 8px rgba(0,0,0,.6);position:absolute;left:0}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow:after,.mfp-arrow:before{display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #FFF;margin-left:31px}.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3F3F3F}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #FFF;margin-left:39px}.mfp-arrow-right:before{border-left:27px solid #3F3F3F}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{display:block;top:0;width:100%;height:100%;background:#000}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{top:40px;bottom:40px;right:0;z-index:-1;background:#444}.mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}

/* ##################################################################### */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* ##################################################################### */  /*

LET OP!:
Deze styling is bijna deprecated.
- Owl slider wordt vervangen met waarschijnlijk Swiper.js
- De homepage carousel krijgt dan een redesign

*/
/* ##################################################################### */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* ##################################################################### */



#productinfo_left > .productinfo_imagecontainer.tep-section-imagecontainer > #owl-carousel-big.owl-carousel.owl-theme .item {
    display: none !important;
}
#productinfo_left > .productinfo_imagecontainer.tep-section-imagecontainer > #owl-carousel-big.owl-carousel.owl-theme.owl-loaded .item {
    display: block !important;
}

#productinfo_left > .productinfo_imagecontainer.tep-section-imagecontainer > #owl-carousel-thumb.owl-carousel.owl-theme .item {
    display: none !important;
}
#productinfo_left > .productinfo_imagecontainer.tep-section-imagecontainer > #owl-carousel-thumb.owl-carousel.owl-theme.owl-loaded .item {
    display: block !important;
}

#owl-carousel-big .item, #owl-carousel-big .item {
    margin: 5px auto;
    color: #FFF;
    border-radius: 3px;
    text-align: center
}

#owl-carousel-big .owl-carousel .owl-stage-outer {
    transition: 0.1s;
}

.item-video.photoswipe {
    max-height: 400px !important;
}

#owl-carousel-thumb .item {
    cursor: pointer
}

#owl-carousel-thumb .item h1 {
    font-size: 18px
}

.owl-theme .owl-nav [class*=owl-] {
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease
}

.owl-theme .owl-nav [class*=owl-].disabled:hover {
    background-color: transparent
}

#owl-carousel-big {
    position: relative;
    overflow: hidden;
}

#owl-carousel-big + #owl-carousel-thumb:not(owl-loaded) .owl-thumb {
    border: 0;
}

#owl-carousel-big.owl-carousel .owl-stage-outer {
    transition: 0.1s;
}

#owl-carousel-big:not(.owl-loaded) a.popup {
    margin: 0 auto;
}

#owl-carousel-homepage.owl-theme .owl-next,
#owl-carousel-homepage.owl-theme .owl-prev,
#owl-carousel-big.owl-theme .owl-next,
#owl-carousel-big.owl-theme .owl-prev {
    width: 42px;
    height: 80px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#owl-carousel-big.owl-theme .owl-prev,
#owl-carousel-homepage .owl-prev {
    left: 10px
}

#owl-carousel-big.owl-theme .owl-next,
#owl-carousel-homepage .owl-next {
    right: 10px
}

#owl-carousel-homepage.owl-theme .owl-dots .owl-dot span {
    border-radius: 100%;
}

#owl-carousel-homepage .owl-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.owl-theme .owl-dots .owl-dot {
    background: transparent !important
}

.owl-theme .owl-dots .owl-dot span {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.owl-theme .owl-nav [class*=owl-] {
    background-color: transparent
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: 0 0
}

.owl-thumb {
    border: 1px solid #D6D6D6
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: pointer
}

.item a {
    outline-color: transparent !important
}

.owl-stage {
    margin: auto
}

div#preview {
    height: auto
}

.owl-carousel .owl-item img {
    width: unset;
}

div.zoomContainer {
    z-index: 1 !important
}

.preload {
    display: none !important;
}

div#beschrijving > ul > li {
    float: left;
    list-style: none;
}

div#owl-carousel-thumb div.owl-stage {
    display: flex;
}

div#owl-carousel-thumb div.owl-stage div.owl-item {
    display: flex;
    border: 1px solid #d6d6d6;
    margin: 0px 2.5px;
}

div#owl-carousel-thumb div.owl-stage div.owl-item div.item {
    align-self: center;
    border: none;
    text-align: center;
}

.owl-carousel .owl-video-play-icon {
    height: 72px !important;
    width: 72px !important;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAA8pJREFUeNrs2+2LVVUUx/HL2GjNlOUIWhljNo4MVhONOalFDyJBSEMiUVlCGFEGRlQYBlKRPVCmMZSlmC+M1MYkK8geMUSzpvv68+9Mb/aFy2Ee7p17Hva5zYvf27P373vvOXutvdaqTExMVP7PqswBmJioIEstQD8exvN4F5/iS5zAcXyOA9iNx7EOPY2uESuALqzFLhzFz/gb1Rl0HmfwDrZgWdkADOI1/NSA2UY0jkN4FNfEDGAobLSaoX7Fs+iOCcByHM7Y+GSvyZMxAHgOl3M2X69j6CsCwNLwFa9GoHFsyRPA7fgtEvP12pMHgPvwb4Tma/oQnVkB2Bj+btXIdSALALfhnxKYr+ntNAH0phjU5KmdaQE4XELzNW1sFcDOEpuvRY49swUwgL9KDqCK3bMFcKgNzNe0vlkAw21kvorRZgGMprTwBWyL5N801CiAoRSjvfFwjFbwVMjiCosSGwXwasoL99c9ezHeKgjAH1g6E4Br8WOGAGq6taBscvtMAO7KYNH+aeKMreGszgvA/pkA7MoZQAXz8UpOucafydcgCeBoAQBq6sORHCAMTwWgO4P3vxkANT2I7zME8Aw6kgA6sSqj0LdZABVcgRdxMYP97MXiJIAl4banGgmAmm4IFaM093MEK5MAerE5QgD1ofk3Ke3nawwmAawMR1KsACqYh+0pRJOn65OjGoCBELPHDKD++/BFC/v5AZuSAFaFqmzsALpCTtFK8HQWDyQBrMBI5AAeSSlqPIU1SQDL8FCkAAZSDpCOY3USwMKQBscEYBH2ZLCfj3HTZJHg9SFlLBpARziRLmT0g7yErqlygbGCAdwZzuksc4HN0yVD7xUE4Ea8n1NK3DcdgJGcAXTiaVzKyfxJLJgOwPIcAdwfgpJCawST3QkezBhALz4p6F7w3kYAPJYRgG68XGCJfazRW+GFOJfSopfDa7U2xWfOVtuaKYzsSGnRSyH7Krq34BwWNQOgB7+0UWlsx2yKo0+0ifmx+siv2f6Az9oAwIZWGiT6StYblNSbabTIbC2p+WOYn1aX2BslM38RN6fdJ/hBicwPZ9UperAEAO7JslW2A/siNX5+qi6QLLrFX4jM/AmsyHteYH0oNxdtfh/mFTUwcR1eL8j42TBdFsXM0FCL1Zpm9HuYG7oqxqmxQXyUUVn7TCjfXV2GucEl4a5vtMXvxOkwTHl3GQcn61PrdaEzY2+o8pzEt+FO8LtQ+v4K+8O9/QhuCZempZ0cnSyG6Aml+DuwAZvC5egarA4luiubffbc8PQcgNnrvwEAsxcdIYUgbTwAAAAASUVORK5CYII=) no-repeat center center;
}

.owl-caption a {
    font-size: 4em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 15px #222;
}

/*Mobile scroll possible (product page only)*/
#owl-carousel-big .owl-stage, .owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto;
    touch-action: auto;
}

@media (max-width: 576px) {
    .hidden-sm {
        display: none !important;
    }
}

/*--Elevate zoom--*/
div#preview img {
    width: unset !important;
    left: 0;
    right: 0;
}

/*--Magnify zoom--*/
.magnify {
    height: unset !important;
}


/***************************************** Slider home *****************************************/

#owl-carousel-homepage {
    z-index: unset;
}

#owl-carousel-homepage .owl-caption {
    display: none;
    bottom: 10px;
    font-size: 20px;
    padding: 5px 10px;
    position: absolute;
    right: 10px;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, .8)
}


#owl-carousel-homepage img {
    margin: auto;
    width: 100%;
}


#owl-carousel-homepage .owl-nav {
    height: 0;
    margin-top: 0;
}

#slider-homepage {
    position: relative;
}

#static_slider_content {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


#static_slider_content h1 {
    --text-shadow-lg: 0 .025em .25em rgba(0,0,0,.25);
    --text-shadow-sm: 0 .025em .1em rgba(0,0,0,0.5);
    color: #fff;
    text-shadow: var(--text-shadow-sm), var(--text-shadow-lg);
    /* display: none; */
    margin-bottom: 0.5em;
}


@media screen and (max-width: 963px) {
    #owl-carousel-homepage.owl-theme .owl-next,
    #owl-carousel-homepage.owl-theme .owl-prev{
        display: none
    }
}

@media screen and (max-width: 500px) {
    div#static_slider_content {
        width: 80%;
    }

    .owl-stage-outer .btn-carousel {
        display: none !important;
    }
}



.btn-carousel {
    --bs-btn-color: var(--btn-carousel-color);
    --bs-btn-bg: var(--btn-carousel-bg-color);
    --bs-btn-border-color: var(--btn-carousel-border-color);
    --bs-btn-hover-color: var(--btn-carousel-hover-color);
    --bs-btn-hover-bg: var(--btn-carousel-hover-bg-color);
    --bs-btn-hover-border-color: var(--btn-carousel-hover-border-color);
}
.spaarpunten-bottom {
    position: fixed;
    z-index: 9998;
    width: fit-content;
    bottom: 0;
}

@media screen and (min-width: 992px) {
    .spaarpunten-bottom {
        right: 6rem;
    }
}

@media screen and (max-width: 992px) {
    .spaarpunten-bottom {
        right: 4rem;
    }
}

.spaarpunten-bottom-button .btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

td.spaarpunten-popup-center span.bold {
    width: 200px;
    font-weight: var(--font-weight-bold);
}

#spaarpunten-nologin-container table tr td {
    text-align: center;
}

a.show-spaarpunten-button {
    display: block;
    border: 1px solid #a5a5a5;
    border-radius: 5px;
    padding: 4px 8px;
    margin-top: 8px;
    background: #f5f5f5;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
}

a.show-spaarpunten-button:hover {
    background: #c5c5c5;
}

.spaarpunten-button-container {
    margin-block-start: 1rem;
}

.tep_meta_login {
    float: left;
}

.tep_meta_register {
    float: right;
}

span.user_pass_forgotten {
    cursor: pointer;
}

#spaarpunten-login-container:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#spaarpunten-left-container {
    background-color: #393939;
    color: #ffffff;
    height: 500px;
    width: 25%;
    position: relative;
    float: left;
}

#spaarpunten-right-container {
    position: relative;
    float: left;
    width: 75%;
    padding: 8px;
    max-height: 490px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

@media screen and (max-width: 479px) {
    #spaarpunten-right-container,
    #spaarpunten-nologin-container {
        margin-bottom: 4rem;
    }
}

#spaarpunten-right-container h3 {
    margin-bottom: 10px;
}

.spaarpunten-right-share-top {
    font-size: 18px;
    width: 60%;
    margin-top: 35px;
    margin-bottom: 35px;
}

.spaarpunten-right-big-icon {
    font-size: 30px;
}

.spaarpunten-right-share-buttons {
    margin-bottom: 25px;
    width: 100%;
    float: left;
}

.spaarpunten-right-share-tiny-link {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
}

.form_section .spaarpunten-right-share-buttons a:not(.configuration_button_general) {
    padding: 5px 16px;
    margin-right: 10px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 5px;
    float: left;
    width: 100px;
}

.spaarpunten-right-deserve-container {
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: .5rem;
}

span.deserve-points {
    font-weight: var(--font-weight-bold);
}

span.deserve-points:not(.deserve-points--inline) {
    margin-left: 33px;
}

.spaarpunten-right-deserve-container div.deserve-header-icon, div.spaarpunten-right-deserve-container div.deserve-header-text {
    float: left;
}

.spaarpunten-right-deserve-container div.deserve-header-icon {
    margin-right: 12px;
}

.deserve-header {
    font-weight: var(--font-weight-bold);
    font-size: 20px;
}

a.spaarpunten-share-button .icon-twitter,
a.spaarpunten-share-button .icon-facebook,
a.spaarpunten-share-button .icon-mail-send {
    float: left;
    margin-right: 15px;
}

a#spaarpunten-tweet-link {
    background-color: #00ABF0;
    margin-left: 80px;
}

a#spaarpunten-facebook-link {
    background-color: #3b5998;
}

a#spaarpunten-email-link {
    background-color: #393939;
}

.share-button-text {
    float: left;
}

#spaarpunten-left-points {
    height: 50px;
    text-align: right;
}

span.customer-punten {
    font-weight: 700;
}

ul.spaarpunten-left-menu {
    margin: 0 -10px;
    list-style-type: none;
}

ul.spaarpunten-left-menu li.active {
    background-color: #a5a5a5;
    color: #000000;
}

ul.spaarpunten-left-menu li a {
    display: block;
    color: #ffffff;
    padding: 4px 8px;
    cursor: pointer;
}

ul.spaarpunten-left-menu li a:hover {
    background-color: #6B6B6B;
}

#spaarpunten_popup table.table-activities th {
    background-color: #ededed;
}

.form_section ul.spaarpunten-left-menu li a:not(.configuration_button_general) {
    color: #ffffff;
}

.form_section table tr th.header-center, .form_section table tr td.header-center {
    text-align: center;
    width: 125px;
}

span.loyalty-status {
    padding: 3px 16px;
    color: #ffffff;
    width: 125px;
    text-align: center;
    display: inline-block;
}

span.loyalty-pending {
    background-color: #f47a20;
}

span.loyalty-accepted {
    background-color: #4e7d0e;
}

span.loyalty-refused {
    background-color: #aa1317;
}

span.loyalty-exchanged {
    background-color: #1D2773;
}

span.loyalty-full {
    width: 84%;
}

th.header-status {
    width: 200px;
}

div.spaarpunten-right-reward-container {
    float: left;
    width: calc((100% / 3) - 9px);
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    text-align: center;
    background-color: #e5e5e5;
    margin: 0 10px 10px 0;
}

div.spaarpunten-right-reward-container a.more-points-needed {
    border-radius: 0 0 5px 5px;
}

@media screen and (max-width: 767px) {
    div.spaarpunten-right-reward-container {
        width: calc((100% / 2) - 7px);
    }

    div.spaarpunten-right-reward-container:nth-of-type(2n) {
        margin-right: 0;
    }
}

@media screen and (min-width: 768px) {
    div.spaarpunten-right-reward-container:nth-of-type(3n) {
        margin-right: 0;
    }
}

div.reward-good {
    background-color: #B5E4C8;
}

div.spaarpunten-right-reward-container h3 {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    margin-top: 8px;
}

div.spaarpunten-right-reward-container a {
    background-color: #393939;
    margin-top: 8px;
    display: block;
}

div.form_section div.spaarpunten-right-reward-container a:not(.configuration_button_general) {
    color: #ffffff;
}

div#spaarpunten-login-container div.accordion_heading span.right {
    position: absolute;
    right: 20px;
}

.spaarpunten_shop_container .inwissel-container {
    margin: 20px 0 0 0;
}

@media screen and (min-width: 120px) and (max-width: 724px) {

    div.spaarpunten-button-container {
        width: 100%;
    }

    /* at screensize when table is scrollable, give padding as to indicate the end of the scrollable table */
    table.table-activities {
        padding-right: 10px;
    }

}

#spaarpunten_popup.active {
    display: block;
}

#spaarpunten_popup .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

#spaarpunten_popup .modal-header {
    flex-shrink: 0;
}

#spaarpunten_popup .modal-body {
    overflow-y: auto;
    flex: 1;
}

#spaarpunten-left-sub-header,
#spaarpunten-left-sub-header h3,
#spaarpunten-left-points {
    display: inline-block;
}

#spaarpunten-left-points {
    float: right;
    height: auto;
}

@media screen and (max-width: 1023px) {
    #spaarpunten-left-container {
        height: auto;
        width: 100%;
    }

    ul.spaarpunten-left-menu {
        margin-top: 1rem;
    }

    #spaarpunten-right-container {
        width: 100%;
        padding: 10px; /* this is the same as the inline styling for "div#spaarpunten-left-container" */
        max-height: none;
        overflow: scroll;
    }

    #spaarpunten_popup table.table-activities tr th:first-child {
        min-width: 8em;
    }

    #spaarpunten_popup table.table-activities td {
        padding: 0.2em .5em;
    }

    /* enable popup to be scrollable (via modal-body, zodat modal-header zichtbaar blijft) */
    #spaarpunten_popup .modal-content {
        max-height: 540px;
    }
}

#spaarpunten_popup .form_section table tr td, #spaarpunten_popup .form_section table tr th {
    text-align: center;
    padding: 8px;
    font-size: 14px;
}

#spaarpunten_popup table.table-activities td {
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}

#spaarpunten_popup table.table-activities tr {
    border-left: 1px solid #ededed;
}

#spaarpunten_popup div#create_account {
    height: 500px;
    overflow: auto;
}

#spaarpunten_popup div.form_section {
    background-color: #ffffff;
    border: none;
    margin-bottom: 0 !important;
}

ul.loggedin-box > li#logged-in-bar > span {
    cursor: pointer;
}

/* TOOLTIP */
/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
    border-radius: 5px;
    border: 2px solid #000;
    background: #4c4c4c;
    color: #fff;
}

/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
    font-size: 14px;
    line-height: 16px;
    padding: 12px 16px 8px 16px;
    overflow: hidden;
    width: 250px;
    text-align: center;
}

/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
    /* border-color: ... !important; */
}

/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
    cursor: help;
    margin-left: 4px;
}

/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
    padding: 0;
    font-size: 0;
    line-height: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--spaarpunten-bottom-button-z-index);
    pointer-events: none;
    width: auto;
    overflow: visible;
}

.tooltipster-base .tooltipster-content {
    overflow: hidden;
}

/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.tooltipster-arrow span, .tooltipster-arrow-border {
    display: block;
    width: 0;
    height: 0;
    position: absolute;
}

.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid;
    bottom: -7px;
}

.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top: 9px solid;
    bottom: -7px;
}

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid;
    top: -7px;
}

.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid;
    top: -7px;
}

.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
    left: 6px;
}

.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    left: 5px;
}

.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {
    right: 6px;
}

.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
    right: 5px;
}

.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 8px solid;
    top: 50%;
    margin-top: -7px;
    right: -7px;
}

.tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important;
    border-left: 9px solid;
    margin-top: -8px;
}

.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right: 8px solid;
    top: 50%;
    margin-top: -7px;
    left: -7px;
}

.tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important;
    border-right: 9px solid;
    margin-top: -8px;
}

/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
.tooltipster-fade {
    opacity: 0;
    transition-property: opacity;
}

.tooltipster-fade-show {
    opacity: 1;
}

.tooltipster-grow {
    transform: scale(0, 0);
    transition-property: transform;
    -webkit-backface-visibility: hidden;
}

.tooltipster-grow-show {
    transform: scale(1, 1);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-swing {
    opacity: 0;
    transform: rotateZ(4deg);
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform;
}

.tooltipster-swing-show {
    opacity: 1;
    transform: rotateZ(0deg);
    transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
    top: 0;
    transition-property: top;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-fall-show {
}

.tooltipster-fall.tooltipster-dying {
    transition-property: all;
    top: 0 !important;
    opacity: 0;
}

.tooltipster-slide {
    left: -40px;
    transition-property: left;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-slide.tooltipster-slide-show {
}

.tooltipster-slide.tooltipster-dying {
    transition-property: all;
    left: 0 !important;
    opacity: 0;
}

/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
    opacity: 0.5;
    transform: scale(1.1, 1.1);
}
/* artikel layover */
.eyecatcher_imagecontainer .subimage1,
.product-card-slide-image .subimage1,
.box_product_image .subimage1,
.products_gallery_row_imagecontainer .subimage1,
.products_wishlist_imagecontainer .subimage1,
.products_lijst_row_imagecontainer .subimage1{
    z-index: 3;
}

.eyecatcher_imagecontainer .subimage2,
.product-card-slide-image .subimage2,
.box_product_image .subimage2,
.products_gallery_row_imagecontainer .subimage2,
.products_wishlist_imagecontainer .subimage2,
.products_lijst_row_imagecontainer .subimage2{
    display: none;
    z-index: 4;
}

.productinfo-layover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 5;
    height: 100%;
    width: 100%;
    border-radius: var(--card-border-radius) var(--card-border-radius) var(--border-radius-small) var(--border-radius-small);
}

.product-card-slide-image img.subimage2 {
    z-index: 4;
}

#artikellayover img,
.products_gallery_row_imagecontainer .layover img,
.meebestellen-layover {
    z-index: 6;
}

.product-card-slide-image img.subimage2,
.products_gallery_row_imagecontainer .layover img,
#artikellayover img,
.meebestellen-layover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}
a#top-link {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: var(--scroll-to-top-link-z-index);
}

a#top-link span {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: calc(var(--scroll-to-top-link-z-index) + 1);
    width: 40px;
    height: 40px;
    border-radius: 100px;
    /*border: 1px solid var(--border-color);*/
    background: rgba(255,255,255,.75);
    line-height: 40px;
    text-align: center;
    color: var(--grey-500);
    filter: var(--drop-shadow-sm);
    backdrop-filter: var(--backdrop-blur-md);
}

a#top-link span:hover{
    background-color: var(--grey-100)
}
/*#wishlist_popup.active {*/
/*    display: block;*/
/*}*/

/*Wishlist button Product overview*/
.btn-wishlist.plp_btn-wishlist {
    position: absolute;
    top: 1rem;
    /*right: 1rem;*/
    z-index: 7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    /*padding: 16px;*/
    /*background-color: #fff;*/
    padding: 4px;
    background-color: #fff;
    border-radius: var(--border-radius-pill);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--grey-100);
}

.btn-wishlist.plp_btn-wishlist:hover,
.btn-wishlist.plp_btn-wishlist:focus {
    box-shadow: var(--shadow-md);
    border-color: var(--grey-200);
}

/*Wishlist button Product Details Page*/
.productinfo_btn-wishlist {
    /*margin-left: .5rem;*/
    border-color: var(--grey-500);
}

/*Wishlist button Product Details Page & Product overview*/
.btn-wishlist:hover,
.btn-wishlist:focus {
    border-color: var(--grey-700);
}

.btn-wishlist {
    color: var(--grey-500);
}

.btn-wishlist:hover,
.btn-wishlist:focus {
    color: var(--grey-700);
}

/*wishlist popup*/
#st_index:not(.logged-in) #wishlist_popup .modal-body > .table-section,
#st_product:not(.logged-in) #wishlist_popup .modal-body > .table-section {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 1199px) {
    #wishlist_popup > .table-section {
        flex-direction: column;
    }
}

@media screen and (max-width: 767px) {
    #st_index:not(.logged-in) #wishlist_popup .modal-body > .table-section,
    #st_product:not(.logged-in) #wishlist_popup .modal-body > .table-section {
        flex-direction: column;
    }
}

#wishlist_popup h2 {
    margin-bottom: .5rem;
}

#wishlist_popup td {
    padding-bottom: 0;
}

#wishlist_popup .form_section {
    margin-bottom: 0;
}

#wishlist_popup .table-section #new_customer,
#wishlist_popup .table-section #login {
    flex: 1;
    padding: 1rem;
}

#wishlist_popup .table-section #new_customer {
    background-color: var(--grey-100);
}

#wishlist_popup .table-section #login {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#wishlist_popup .button_checkout {
    margin-top: 1rem;
}

/* Wishlist account page */
#wishlist_container .form_section {
    margin-bottom: 0;
}

.wishlist_section-header,
.wishlist_section-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
}

.wishlist_section-header-title,
.wishlist_row-product {
    grid-column: 1 / span 6;
}

.wishlist_section-header-total,
.wishlist_row-price {
    grid-column: 7 / span 2;
}

.wishlist_section-header-quantity,
.wishlist_row-quantity,
.wishlist_row-soldout {
    grid-column: 9 / span 2;
}

.wishlist_row-delete {
    grid-column: 12;
}

.wishlist_section-row {
    --wishlist-row-border: var(--card-border);
    border: var(--wishlist-row-border);
    border-radius: var(--border-radius);
}

.wishlist_section-row:not(:last-of-type) {
    margin-bottom: var(--gutter);
}

.wishlist_section-row > div {
    padding-block: var(--gutter);
}

.wishlist_section-row > div:first-of-type {
    padding-inline-start: var(--gutter);
}

.wishlist_section-row > div:last-of-type {
    padding-inline-end: var(--gutter);
}

.wishlist_row-product {
    display: flex;
    flex-direction: row;
    gap: var(--gutter);
}


.wishlist_row-image img {
    max-width: 75px;
    max-height: 75px;
}

.wishlist_row-options span {
    font-size: var(--text-size-xs);
}

.wishlist_row-name b:after {
    content: "\a";
    white-space: pre;
}

.wishlist_row-soldout .h3 {
    font-size: var(--text-size-md);
}

.wishlist_row-check .label_check {
    margin-top: .125rem;
}

.wishlist_row-delete a {
    float: right;
}

@media screen and (max-width: 767px) {
    .wishlist_section-header-quantity {
        display: none;
    }

    .wishlist_section-header-title,
    .wishlist_row-product {
        grid-column: 1 / span 9;
    }

    .wishlist_section-header-total,
    .wishlist_row-price {
        grid-column: 10 / span 3
    }

    .wishlist_row-soldout,
    .wishlist_row-quantity {
        grid-column: 1 / span 6;
        padding-inline-start: var(--gutter);
    }

    .wishlist_row-soldout {
        display: flex;
        align-items: center;
    }

    .wishlist_row-soldout .h3 {
        margin-bottom: 0;
    }

    .wishlist_row-check {
        grid-column: 7 / span 2;
    }

    .wishlist_row-delete {
        grid-column: 11 / span 2;
    }
}

#st_account table tr td.messageStackSuccess div {
    margin-bottom: 1rem;
}
/****************************************/
/************* BLOG LISTING *************/
/****************************************/
.blog_tags_box .box_content li,
.blog_tags_box .box_content a{
    font-size: var(--text-size-sm);
}

.blog-card {
    --card-shadow: none;
}

.blog-card:hover .blog-card-image {
    filter: brightness(1.05); /* todo: evt. uitbreiden naar meer values voor utilities */
}

.blog-card-image {
    --blog-card-image-aspect-ratio: 2 / 1; /* todo: evt. backoffice optie van maken */
    background: var(--grey-100);
    object-fit: cover !important;
    aspect-ratio: var(--blog-card-image-aspect-ratio);
    transition: filter .1s ease;
}

.blog-card-info {
    margin-bottom: .5rem;
    font-size: var(--text-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em; /* todo: evt. uitbreiden naar meer values voor utilities */
    color: var(--text-color-muted);
}

.blog-card-heading {
    font-family: var(--heading-font-stack);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    font-size: var(--text-size-lg);
}

.blog-card-text {
    font-size: var(--text-size-sm);
}

/* TODO: deze media query vervangen met container query */
@media (min-width: 992px) {
    .blog-card-heading {
        font-size: var(--text-size-lg);
    }

    .blog-card-text {
        font-size: var(--text-size-md);
    }
}


/******************************************/
/************* BLOG POST PAGE *************/
/******************************************/
.blog-post-featured-image img {
    height: auto;
    width: 100%;
    border-radius: var(--border-radius);
}

.blog-post-author {
    font-weight: var(--font-weight-bold);
}

.blog-post-date {
    font-size: var(--text-size-sm);
    text-transform: uppercase;
    letter-spacing: .05em; /* todo: evt. uitbreiden naar meer values voor utilities */
    color: var(--text-color-muted);
}

.blog-post__socialshare-button-container {
    margin-top: .5rem;
}

.blog-post-content {
    margin-top: 2rem;
}

.blog-post-content p {
    margin-bottom: 1rem;
}


/******************************************/
/********* BLOG POST — AUTHOR CARD *********/
/******************************************/
.blog-post-author-card {
    margin-top: 2rem;
    margin-bottom: 3rem;
    padding-top: 1.5rem;
    border-top: var(--border);
}

.blog-post-author-label {
    margin-bottom: .75rem;
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
}

.blog-post-author-row {
    gap: 1rem;
}

.blog-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: var(--border-transparent-dark);
}

.blog-avatar-lg {
    width: 96px;
    height: 96px;
}

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

.blog-post-author-name {
    margin-bottom: 0;
    font-weight: var(--font-weight-bold);
}

.blog-post-author-name a {
    color: inherit;
    text-decoration: none;
}

.blog-post-author-name a:hover {
    text-decoration: underline;
}

.blog-post-author-role {
    margin-bottom: .5rem;
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
}

.blog-post-author-bio {
    margin-bottom: .75rem;
    font-size: var(--text-size-sm);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/******************************************/
/*********** BLOG AUTHOR PAGE *************/
/******************************************/
.blog-author-page {
    --blog-listing-number-of-cols: 3;
}

.blog-author-header {
    display: block;
    margin-bottom: 1.5rem;
}

.blog-author-identity {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.blog-author-meta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.blog-author-name,
.blog-author-role,
.blog-author-expertise {
    margin: 0;
}

.blog-author-name {
    font-size: var(--text-size-lg);
    line-height: 1.25;
}

.blog-author-role {
    font-size: var(--text-size-sm);
    color: var(--text-color-muted);
}

.blog-author-contact {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.blog-author-bio {
    margin-block: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: var(--border);
}

.blog-author-bio * {
    font-size: var(--text-size-sm);
}

.blog-author-bio p:last-child {
    margin-bottom: 0;
}

.blog-author-socials {
    margin-right: -.5rem;
    margin-block-start: 0;
    flex-wrap: nowrap;
}

@media (max-width: 991px) {
    .blog-author-page {
        --blog-listing-number-of-cols: 2;
    }
}

@media (max-width: 767px) {
    .blog-author-identity {
        flex-wrap: wrap;
    }

    .blog-author-contact {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .blog-author-socials {
        margin-right: 0;
        margin-left: -.5rem;
    }
}

@media (max-width: 575px) {
    .blog-author-page {
        --blog-listing-number-of-cols: 1;
    }
}
.ui-menu {
    --autocomplete-image-border-width: 1px;
    --autocomplete-image-border-color: var(--border-color);
    --autocomplete-image-max-width: 50px;
    --autocomplete-image-max-height: 50px;
    --autocomplete-padding: var(--st-spacing-xs);
    --autocomplete-border-radius: var(--border-radius-small);
}

ul.ui-autocomplete {
    width: unset !important;
    box-shadow: var(--shadow-lg);
    border: none;
    z-index: var(--autocomplete-z-index);

}

ul.ui-autocomplete,
.autocomplete-item-wrapper.ui-menu-item:last-of-type {
    border-bottom-left-radius: var(--autocomplete-border-radius);
    border-bottom-right-radius: var(--autocomplete-border-radius);
}

.ui-menu a {
    color: var(--grey-600);
}

.ui-menu a:hover {
    color: var(--grey-800);
}

.ui-menu span {
    display: table-cell;
    text-align: center;
    border: var(--autocomplete-image-border-width) solid var(--autocomplete-image-border-color);
    border-radius: var(--autocomplete-border-radius);
}

.ui-menu span img {
    max-width: var(--autocomplete-image-max-width);
    max-height: var(--autocomplete-image-max-height);
    border-radius: var(--autocomplete-border-radius);
}

li.autocomplete-item-wrapper:hover,
li.autocomplete-item-wrapper:focus-within {
    background: var(--grey-100) !important;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    padding: var(--autocomplete-padding);
}

.autocomplete-item img {
    vertical-align: middle;
}

.autocomplete-text {
    padding-left: var(--autocomplete-padding);
    width: 250px;
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
}

.autocomplete-price {
    margin-left: auto;
    padding-inline: var(--autocomplete-padding);
    font-weight: var(--font-weight-bold);
}
.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    _width: 160px;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px
}

/*.ui-autocomplete .ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap
}*/

.ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-hover, .ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none
}
div#owl-carousel-merkenslider .owl-stage {
    display: flex;
    align-items: center;
}

#owl-carousel-merkenslider .owl-item img {
    margin: 0 auto;
    max-height: 60px;
}

div#owl-carousel-merkenslider div.owl-nav {
    height: 0px !Important;
}
div#owl-carousel-merkenslider .owl-nav.disabled {
    display: block;
}

div#owl-carousel-merkenslider .owl-prev,
div#owl-carousel-merkenslider .owl-next {
    width: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
}

div#owl-carousel-merkenslider .owl-prev {
    left:0%;
}div#owl-carousel-merkenslider .owl-next {
    right:0%;
}

div#owl-carousel-merkenslider .owl-dots {
    display: none;
}
#nieuwsbriefpopup {
    position: fixed;
    top: 50%;
    z-index: 9999;
    padding: 1rem 1.5rem;
}

#inner_nieuwsbriefpopup {
    position: relative;
    margin: .5rem;
}

#nieuwsbriefpopup .btn-close {
    position: relative;
    float: right;
    margin-inline-start: var(--st-spacing-xs);
    z-index: 1;
}


#inner_nieuwsbriefpopup .g-recaptcha {
    display: none;
    margin-top: 1rem;
}

#nieuwsbriefpopup .configuration_btn {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
}


@media only screen and (max-width: 768px) {
    #nieuwsbriefpopup {
        top: 60%;
        width: 340px;
        margin-left: -170px;
    }
}

/* todo: remove when icomoon is removed from the project */
#nieuwsbriefpopup span.icon-cross::before {
    content: "";
}

#nieuwsbriefpopup .input-group.contact_us {
    margin-block: var(--st-spacing-md);
}
:root {
    --qap-icon-size: var(--text-size-xl);
}

.quick-access-panel_wrapper {
    --st-icon-min-size: var(--qap-icon-size);
    --st-icon-size: var(--qap-icon-size);

    position: fixed;

    background-color: transparent;
    z-index: var(--quick-access-panel-z-index);
}

.quick-access-panel_wrapper img {
    max-width: var(--qap-icon-size);
    max-height: var(--qap-icon-size);
}

.quick-access-panel_block {
    background-color: var(--qap-bg-color);
}

.quick-access-panel_block p {
    line-height: 1;
}

.quick-access-panel_block a {
    color: var(--qap-text-color);
    background-color: transparent;
}

/* Alleen hover styling toepassen als er een pointing device aanwezig is, zoals een cursor. Zo voorkomen dat je op mobiel bij elke swipe steeds hover triggert. */
@media (hover: hover) {
    .quick-access-panel_block a:hover,
    .quick-access-panel_block a:focus {
        color: var(--qap-text-color-hover);
    }

    .quick-access-panel_block:hover,
    .quick-access-panel_block:focus{
        background-color: var(--qap-bg-color);
    }
}

@media screen and (max-width: 767px) {
    :root {
        --qap-number-of-blocks: 4.5;
        --qap-block-height: 70px;
        --qap-block-width-min: 70px;
        --qap-block-width-max: 100px;
        --qap-block-width: clamp(var(--qap-block-width-min), calc(100vw / var(--qap-number-of-blocks)), var(--qap-block-width-max));
        --qap-box-shadow: 0 0 8px 0 #0003;
        --qap-border: 1px solid rgba(0,0,0,.125);
        --qap-content-gap: var(--st-spacing-xs);
    }
    /*.quick-access-panel_container-desktop {*/
    /*    display: none;*/
    /*}*/

    .quick-access-panel_wrapper {
        width: 100%;
        bottom: 0;
        box-shadow: var(--qap-box-shadow);
    }

    .quick-access-panel_container {
        display: flex;
        overflow-x: auto;
    }

    .quick-access-panel_block {
        min-width: var(--qap-block-width);
        max-width: 100%;
        flex: 1;
    }

    .quick-access-panel_block:not(:first-child) {
        border-left: var(--qap-border);
    }

    .quick-access-panel_block a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--qap-content-gap);
        height: var(--qap-block-height);
    }

    .quick-access-panel_block p {
        font-size: var(--text-size-xs);
    }

    body:has(.quick-access-panel_wrapper) .site-footer {
        margin-bottom: var(--qap-block-height);
    }

    a#top-link {
        bottom: calc(1rem + var(--qap-block-height));
    }

    body:not(#st_product) #spaarpunten-bottom-container {
        bottom: 4.25rem !important;
    }
}

@media screen and (min-width: 768px) {
    :root {
        --qap-icon-size: 1.5em;
        --qap-padding-x: .625rem;
        --qap-padding-inline: calc(var(--qap-padding-x) * 2);
        --qap-width: 200px;
        --qap-width-visible: calc(var(--qap-icon-size) + var(--qap-padding-inline));
        --qap-width-hidden: calc(var(--qap-width) - var(--qap-width-visible));
        --qap-width-hover: -110px;
        --qap-content-gap: calc(var(--st-spacing-xs) * 2);
        --qap-margin-block-end: var(--st-spacing-2xs);
        --qap-transition-speed: .5s;
    }
    /*.quick-access-panel_container-mobile {*/
    /*    display: none;*/
    /*}*/

    .quick-access-panel_block p {
        font-weight: var(--btn-font-weight);
    }

    .quick-access-panel_wrapper {
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
    }

    .quick-access-panel_container {
        padding: 0;
        transform: translate(var(--qap-width-hidden),0);
    }

    .quick-access-panel_block {
        display: block;
        width: var(--qap-width);
        text-align: right;
        transition: all var(--qap-transition-speed);
        box-shadow: var(--shadow-sm);
        border-radius: var(--border-radius) 0 0 var(--border-radius);
    }

    .quick-access-panel_block:hover {
        transform: translate(var(--qap-width-hover),0);
    }

    .quick-access-panel_block:not(:last-child) {
        margin-block-end: var(--qap-margin-block-end);
    }

    .quick-access-panel_block a {
        display: flex;
        align-items: center;
        gap: var(--qap-content-gap);
        padding: var(--qap-padding-x);
    }
}
/*
CSS onderverdeling
Welke pagina's / globaal: Globaal
Is het cruciaal boven de vouw?: Nee

dus ---> ... inladen - Uittesten met CLS?
*/


/*
--section-space-y was hier te krap. Omdat de footer een andere bg color heeft en veel content bevat moet deze meer ademruimte hebben dan normale secties.
*/

.site-footer {
    /*--footer-margin-y: .5rem;*/
    --footer-padding-y: clamp(2rem, calc(3 / 75 * 100vw), 3rem);
    --footer-font-size: var(--text-size-sm);
    --footer-margin-y-start: clamp(2rem, calc(3 / 75 * 100vw), 3rem);

    --footer-socket-font-size: var(--text-size-sm);
    --footer-socket-padding-y: 2rem;

    --footer-caret-icons-display: flex;

    margin-block-start: var(--footer-margin-y-start);
    color: var(--footer-text-color);
    background-color: var(--footer-bg-color);
}

/* Footer grid */
.site-footer .one,
.site-footer .two,
.site-footer .three,
.site-footer .four {
    position: relative;
}

.site-footer-inner {
    --footer-box-gutter: var(--gutter);
    --footer-box-gutter-y: var(--footer-box-gutter);
    --footer-box-gutter-x: var(--footer-box-gutter);

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /*grid-column-gap: var(--footer-box-gutter-x);*/ /* zorgde voor overflow problemen, daarnaast zit er al padding op de boxes. */
    grid-row-gap: var(--footer-box-gutter-y);
}

@media screen and (max-width: 575px) {
    .site-footer .four,
    .site-footer .one,
    .site-footer .three,
    .site-footer .two {
        grid-column: span 12;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .site-footer .four,
    .site-footer .one,
    .site-footer .three,
    .site-footer .two {
        grid-column: span 6;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .site-footer .four,
    .site-footer .one,
    .site-footer .three,
    .site-footer .two {
        grid-column: span 4;
    }
}

@media screen and (min-width: 992px) /*and (max-width: 1199px)*/ {
    .site-footer .one {
        grid-column: span 12;
    }
    .site-footer .two {
        grid-column: span 6;
    }
    .site-footer .three {
        grid-column: span 4;
    }
    .site-footer .four {
        grid-column: span 3;
    }
}

.site-footer-inner .clear {
    display: none;
}

/* Footer styling */


.site-footer-inner {
    padding-block: var(--footer-padding-y);
}

/* Misschien is in percentage niet heel mooi - wellicht met breakpoints werken */
.site-footer .box {
    margin-right: 10%;
    margin-bottom: 1rem;
}

/* FOOTER HEADINGS */
.site-footer .box_top {
    width: 100%;
    margin-bottom: var(--box-margin-y);
    text-transform: var(--box-titles-transform);
}
.site-footer .box_top p {
    font-weight: var(--box-titles-font-weight);
}
.site-footer .box_top h2 {
    margin: 0;
}

/* FOOTER BOX CONTENT */
.site-footer .box_content * {
    font-size: var(--footer-font-size);
}

.site-footer a:not(.btn):hover {
    text-decoration: underline;
}

.poweredby a:not(.btn),
.site-footer-inner > a:not(.btn),
.site-footer-inner .box_top,
.site-footer-inner .box_top a:not(.btn),
.site-footer-inner .box_content,
.site-footer-inner .box_content a:not(.btn) {
    color: var(--footer-text-color);
}

.poweredby a:not(.btn):hover,
.site-footer-inner > a:not(.btn):hover,
.site-footer-inner .box_top a:not(.btn):hover,
.site-footer-inner .box_content a:not(.btn):hover,
.poweredby a:not(.btn):active,
.site-footer-inner > a:not(.btn):active,
.site-footer-inner .box_top a:not(.btn):active,
.site-footer-inner .box_content a:not(.btn):active,
.poweredby a:not(.btn):focus,
.site-footer-inner > a:not(.btn):focus,
.site-footer-inner .box_top a:not(.btn):focus,
.site-footer-inner .box_content a:not(.btn):focus {
    color: var(--footer-text-color-hover);
}

.site-footer .box_content li span.st-icon-caret-right {
    display: var(--footer-caret-icons-display);
}

.site-footer .column-widget li {
    margin-block: .5em;
}

/***************** SOCKET (balk onder de footer) ********************/
.site-footer-socket {
    background-color: var(--footer-socket-bg-color);
    text-align: center;
}

.site-footer-socket,
.site-footer-socket * {
    font-size: var(--footer-socket-font-size);
    color: var(--footer-socket-text-color);
}

.site-footer-socket a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

.site-footer-socket a:hover {
    color: var(--footer-socket-text-color-hover);
}

.site-footer-socket-inner {
    padding-block: var(--footer-socket-padding-y);
}
/*Eigen css*/
:root {
  	--stars-color: var(--accent-500);
}

.breadcrumbs-listing .breadcrumb a {
 	color: var(--body-text-color) !important; 
}

.breadcrumbs-listing .breadcrumb a:hover, 
.breadcrumbs-listing .breadcrumb a:focus {
    color: var(--link-color-hover) !important;
}

.st_homepage {
	--webshop-background-color: #000;
  	--body-text-color: var(--main-500);
  	--heading-color: var(--main-500);
  	--card-background-color: var(--main-500);
  	--text-color-muted: var(--main-800);
  	--border-color: var(--main-500);
}

.mobile_box .menu-header .item, 
.sub-menu-mobile__top-menu-content .top_menu li[class*="item"] {
    --border-color: var(--grey-900);
}

#mobile_menu, 
.menu-header a {
    --body-text-color: var(--grey-900);
}

.site-header-basket-wrapper:hover .site-header-basket-button a, 
.site-header-basket-wrapper:focus-within .site-header-basket-button a {
 	background-color: var(--bs-btn-hover-bg);
}

.site-header-basket-wrapper:hover .site-header-nav-item .quantity,
.site-header-basket-wrapper:focus .site-header-nav-item .quantity {
 	color: var(--supporting-900);
}

.header_bottom {
 	padding-block: var(--gutter-half); 
  	border-bottom: 1px solid;
}

.st_homepage .products_name_heading,
.st_homepage .categories_name_link {
 	color: var(--grey-900) !important; 
}

.st_homepage .rating_stars .fa-icon.fa-icon-star-empty:before, 
.st_homepage .rating_stars .fa-icon.fa-icon-star-empty-stroke:before {
 	--icon-color: var(--main-300); 
}

.floating_basket_wrapper {
 	--body-text-color: #000; 
}

.reviews_box .box_product > *:not(.box_product_image) {
 	 display: none;
}

.reviews_box .box_product .box_product_image {
 	max-width: 100px; 
}