/*** Basic style v1 ***/

/*** ---------- Global ---------- ***/
:root {
    --ts-100: 1000ms; --ts-95: 950ms; --ts-90: 900ms; --ts-85: 850ms; --ts-80: 800ms; --ts-75: 750ms; --ts-70: 700ms; --ts-65: 650ms; --ts-60: 600ms; --ts-55: 550ms; --ts-50: 500ms; --ts-45: 450ms; --ts-40: 400ms; --ts-35: 350ms; --ts-30: 300ms; --ts-25: 250ms; --ts-20: 200ms; --ts-15: 150ms; 
}

/*** Disable animations & transitions ***/
@media (prefers-reduced-motion) {
    *, *::before, *::after { transition: 0s; animation: none; }
    :root {
        --ts-100: 0; --ts-95: 0; --ts-90: 0; --ts-85: 0; --ts-80: 0; --ts-75: 0; --ts-70: 0; --ts-65: 0; --ts-60: 0; --ts-55: 0; --ts-50: 0; --ts-45: 0; --ts-40: 0; --ts-35: 0; --ts-30: 0; --ts-25: 0; --ts-20: 0; --ts-15: 0;
    }
}

*, *::before, *::after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; margin: 0; padding: 0; }
.screen-reader-text { clip: rect(1px,1px,1px,1px); word-wrap: normal!important; border: 0; -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute!important; width: 1px }
html { font-family: var(--font-base); font-size: 10px; height: -webkit-fill-available; scroll-behavior: smooth; }
body { font-size: var(--fs); line-height: var(--lh); color: var(--clr-text); min-height: 100dvh; min-height: -webkit-fill-available; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; 
    --no-scroll { overflow: hidden; }
    * { font-variation-settings: "slnt" 0; }
}
.wpb-pagewrapper {background-color: var(--clr-primary-dark);  -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.wpb-main-content {z-index: 1; border-bottom-left-radius: var(--br-xl); border-bottom-right-radius: var(--br-xl); overflow: clip; background-color: var(--clr-light);}
.skip-link { position: absolute; top: -999rem; left: 0; background: #000; color: #fff; padding: 8px 16px; text-decoration: none; z-index: 9999; 
    &:focus { top: 20px; left: 20px; }
}

/*** ---------- Buttons ---------- ***/
a { color: inherit; }

.btn, .gform_button, .gform_next_button, .gform_previous_button, .button, .swiper-button-prev, .swiper-button-next { 
    --fs: var(--fs-md); 
    --lh: 1;
    --min-h: 5.2rem; 
    --p: 0 3.6rem; 
    --gap: 1rem;
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color, box-shadow, -webkit-box-shadow;

    --clr: #fff; --bg-clr: var(--clr-primary); --border: 1px solid var(--clr-primary); --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--clr-primary-dark); --hover-border: 1px solid var(--clr-primary-dark); --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); --focus-bg-clr: var(--hover-bg-clr); --focus-border: var(--hover-border); --focus-box-shadow: none;
    --active-clr: var(--focus-clr); --active-bg-clr: var(--focus-bg-clr); --active-border: var(--focus-border); --active-box-shadow: var(--focus-box-shadow); 

    display: inline-flex; justify-content: center; align-items: center; min-height: var(--min-h) !important; gap: var(--gap) !important; font-family: var(--font-accent) !important; font-size: var(--fs) !important; font-weight: 600 !important; line-height: var(--lh) !important; padding: var(--p)!important; color: var(--clr) !important; background-color: var(--bg-clr)!important; border-radius: var(--br); border: var(--border)!important; box-shadow: var(--box-shadow)!important; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-duration: var(--tsd); transition-timing-function: var(--tsf); font-family: var(--font-base); transition-property: var(--tsp); min-width: fit-content; text-wrap: nowrap;

    span { font: inherit; color: inherit; }
    i { --clr: inherit; color: inherit; transition-duration: var(--tsd); transition-timing-function: var(--tsf); transition-property: var(--tsp); }

    &:hover { color: var(--hover-clr)!important; background-color: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important;
        i { --clr: var(--hover-clr); color: var(--hover-clr); }
    }
    &:focus { color: var(--focus-clr)!important; background-color: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; 
        i { --clr: var(--focus-clr); color: var(--focus-clr); }
    }
    &:active { color: var(--active-clr)!important; background-color: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; 
        i { --clr: var(--active-clr); color: var(--active-clr); }
    }

    /* Button states */
    &.loading { position: relative; 
        &::before, &::after { content: ''; display: block; position: absolute; z-index: 1; border-radius: inherit;}
        &::before { top: 0; right: 0; bottom: 0; left: 0; background: var(--clr-primary); }
        &::after { border-radius: 50%; --w: 2rem; --h: 2rem; width: var(--w); height: var(--h); top: calc(50% - (var(--h) / 2)); left: calc(50% - (var(--w) / 2)); border: 2px solid var(--clr); border-top: 2px solid transparent; animation: rotate .75s linear infinite; }
    }

    /* Button sizes */
    &.btn--small { --p: 0 1.6rem; --fs: 1.6rem; min-height: 3.8rem; }
    &.btn--large { --p: 0 2.4rem; --fs: 1.6rem; min-height: 5.4rem; }

    /* Button variations */
    &.btn--square { --p: 0; aspect-ratio: 1/1; }
    &.btn--secondary { --clr: var(--clr-light); --bg-clr: var(--clr-secondary); --border: 1px solid var(--clr-secondary); --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-secondary-dark); --hover-border: 1px solid var(--clr-secondary-dark); }
    &.btn--light { --clr: var(--clr-dark); --bg-clr: var(--clr-primary-light); --border: 1px solid var(--clr-primary-light); --box-shadow: none; --hover-clr: var(--clr-white); --hover-bg-clr: var(--clr-primary); --hover-border: 1px solid var(--clr-primary); }
    &.btn--white { --clr: var(--clr-dark); --bg-clr: #fff; --border: 1px solid #fff; --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-primary-light); --hover-border: 1px solid var(--clr-primary-light); }
    &.btn--link { --clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid transparent; --box-shadow: none; }
    &.btn--outline { --clr: var(--clr-dark); --bg-clr: transparent; --border: 1px solid var(--clr-dark); --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-dark); --hover-border: 1px solid var(--clr-dark); }
    &.btn--outline-white { --clr: var(--clr-white); --bg-clr: transparent; --border: 1px solid var(--clr-white); --box-shadow: none; --hover-clr: var(--clr-text); --hover-bg-clr: var(--clr-white); --hover-border: 1px solid var(--clr-white); }
    &.btn--link-white {--p: 0 1.4rem; --clr: var(--clr-white); --bg-clr: transparent; --hover-bg-clr: transparent; --border: 1px solid transparent; --hover-border: 1px solid transparent; --box-shadow: none; --hover-clr: var(--clr-primary-dark);}
    &.btn--ghost { --p: 0; --clr: var(--clr-primary-dark); --bg-clr: transparent; --border: none; --box-shadow: none; --hover-clr: var(--clr-primary); --hover-bg-clr: transparent; --hover-border: none; min-height: 0 !important; }

    &.btn--submit {width: 100% !important;}

    &.btn--bookmark {
        i { pointer-events: none; }
        i.is-unchecked { display: none; }
        &[data-bookmarked="true"] i.is-unchecked { display: block; }
        &[data-bookmarked="true"] i.is-checked { display: none; }
    }
}

.btn-group { --gap: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }  

/*** ---------- Accordion ---------- ***/
.wpb-accordion {
    --bg: transparent; 
    --active-bg: var(--clr-primary); 
    --active-clr: #fff; 
    --gap: 2rem;
    --p: 0 ; 
    --body-p: 2.4rem 4rem; 
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color, box-shadow, height, border-radius; 

    .collapse:not(.show) { display: none; }

    .wpb-accordion__item { color: var(--clr); border: 0; border-bottom: 1px solid var(--clr-border);
        &:first-of-type { border-top-left-radius: var(--br); border-top-right-radius: var(--br);
            .wpb-accordion__button { border-top-left-radius: var(--br); border-top-right-radius: var(--br); }
        }
        &:last-of-type { border-bottom-left-radius: var(--br); border-bottom-right-radius: var(--br);
            .wpb-accordion__button { border-bottom-left-radius: var(--br); border-bottom-right-radius: var(--br); }
            .wpb-accordion__body { border-bottom-left-radius: var(--br); border-bottom-right-radius: var(--br); }
        }
        &:not(:first-of-type) { border-top: 0; }
        .wpb-accordion__header { --fs: 1.8rem; margin: 0; }
        .wpb-accordion__button { font: inherit; color: inherit; min-height: 6.3rem; cursor: pointer; display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--gap); align-items: center; width: 100%; font-size: 1.6rem; text-align: left; padding: var(--p); background-color: var(--bg); border: 0; overflow-anchor: none; border-radius: 0; transition-duration: var(--tsd); transition-timing-function: var(--tsf); transition-property: var(--tsp);
            span { transition: color var(--tsd) var(--tsf); }
            .wpb-accordion__icon rect {
                transition: y var(--ts-25) ease var(--ts-25), transform var(--ts-25) ease, opacity var(--ts-25) ease;
                transform-origin: center;
            }

            &[aria-expanded="true"] {
                .wpb-accordion__icon .top    { transform: translateY(5px) rotate(90deg); opacity: 0; }
                .wpb-accordion__icon .middle { opacity: 1; }
                .wpb-accordion__icon .bottom { transform: translateY(-5px) rotate(90deg); opacity: 0; }
            }
            &.is-active { 
                i { transform: rotate(-180deg); }
            }
        }
        .wpb-accordion__body { background-color: var(--bg); padding: var(--body-p); padding-top: 0;}    
        .collapsing { height: 0; overflow: hidden; transition: height var(--tsd) var(--tsf); }
    }
}

/*** ---------- Images ---------- ***/
.wpb-image { --br: .5rem; 
    img { border-radius: var(--br); }
    figcaption { display: block; padding-top: .5rem; font-size: 1.4rem; }
}

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

/*** ----- Sections ----- ***/
section { position: relative; }
.has-background-image { position: relative;
    .container { z-index: 1; }
    .wpb-text { color: #fff; --clr: #fff; }
    &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); pointer-events: none; }
}

img.is-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%!important; object-fit: cover; }
figure.is-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
figure.is-background-image img { width: 100%; height: 100%!important; object-fit: cover; }

.wpb-block__header { margin-bottom: 3.2rem;
    .container { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 1.6rem; }
    .wpb-text { margin: 0; }
}


/*** ---------- Icons ---------- ***/
/* .wpb-icon { --src: ; --clr: var(--clr-gradient); --w: 1.8rem; --h: 1.8rem; display: inline-flex; background: transparent; 
    &::after { content:''; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inline-block; width: var(--w); height: var(--h); min-width: var(--w); min-height: var(--h); background-color: var(--clr); transition: background-color var(--ts-duration) var(--ts-function); }
} */

.wpb-icon__wrapper {display: flex; align-items: center;
    .wpb-icon {font-size: var(--fs-md); background: -webkit-linear-gradient(var(--clr-primary-light), var(--clr-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
}

/*** ---------- Typography ---------- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {--mt: 1rem; font-family: var(--font-accent); font-size: var(--fs); line-height: var(--lh);}
h1, .h1 { --fs: var(--fs-h1); --lh: 1.1; text-wrap: auto;}
h2, .h2 { --fs: var(--fs-h2); --lh: 1.1; text-wrap: balance;}
h3, .h3 { --fs: var(--fs-h3); --lh: 1.1; text-wrap: balance;}
h4, .h4 { --fs: var(--fs-h4, 1.8rem); --lh: 1.2; }
h5, .h5 { --fs: var(--fs-h5, 1.6rem); --lh: 1.2; }
h6, .h6 { --fs: var(--fs-h6, 1.4rem); --lh: 1.2; }

.wpb-text { --mt: 1em; 
    > * + *:not(.btn .blockquote) { margin-top: var(--mt); } 
    ul, ol { padding-left: 3.8rem;
        li { font: inherit; }
    }
    ul { list-style-type: square; 
        li::marker { font-size: 1.2rem; }
    }
    a:not(.btn) { font: inherit; text-underline-offset: .25rem; }
    blockquote { border-left: 4px solid #f2f2f2; padding-left: 1.6rem; }
    iframe { width: 100%; height: 100%; aspect-ratio: 16/9; border-radius: 1rem; }
}

.wpb-label {--clr: var(--clr-primary); font-family: var(--font-accent); display: inline-flex; gap: 0.8rem; align-items: center; color: var(--clr); font-weight: 600; font-size: 1.8rem;
    &::before { content: ''; width: 1rem; height: 1rem; clip-path: polygon(50% 5%, 100% 50%, 50% 95%, 0% 50%); background-color: var(--clr); }
}

/*** ---------- Tabs ---------- ***/
.wpb-tabs { 
    --p: 0 2rem; 
    --clr: var(--clr-text); 
    --bg-clr: transparent; 
    --br: .5rem;
    --border: .1rem solid transparent; 
    --active-clr: var(--clr-primary); 
    --active-bg-clr: #fff; 
    --active-border: .1rem solid var(--clr-border);
    --tsd: var(--ts-duration);
    --tsf: var(--ts-function);
    --tsp: color, background-color, border-color;

    display: grid;

    .wpb-tabs__header { display: flex; flex-wrap: wrap; position: relative; z-index: 1; margin-bottom: -0.1rem; }
    .tab-button { font: inherit; display: inline-block; padding: var(--p); color: var(--clr); min-height: 4.3rem; background-color: var(--bg-clr); border-radius: var(--br) var(--br) 0 0; border: var(--border); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-duration: var(--tsd); transition-timing-function: var(--tsf); transition-property: var(--tsp);
        &.is-active { color: var(--active-clr); border-color: var(--active-clr); background-color: var(--active-bg-clr); border: var(--active-border); border-bottom: 1px solid transparent; }

    }
    .wpb-tabs__content { background-color: #fff; display: grid; border: .1rem solid var(--clr-border); border-radius: 0 0 var(--br) var(--br);
        .tab-pane { grid-column: 1/-1; grid-row: 1/-1; pointer-events: none; opacity: 0; padding: 2rem; transition: opacity var(--tsd) var(--tsf);
            &.is-active { pointer-events: all; opacity: 1; }
            > * + * { margin-top: 1em; }
        }
    }
}

/*** ---------- Alignment ---------- ***/
.wpb-align--y-top .inner { -webkit-box-align: start; -ms-flex-align: start; align-items: start; }
.wpb-align--y-center .inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.wpb-align--y-bottom .inner { -webkit-box-align: end; -ms-flex-align: end; align-items: end; }

@media (min-width: 992px) {
    .wpb-align-left { order: -1; }
    .wpb-align-right { order: 999; }
}


/*** ---------- USPS ---------- ***/
.wpb-usps-wrapper {list-style: none; padding: 0 !important;
    &.wpb-usps-wrapper--small {  
        .wpb-usp {display: flex; gap: .8rem; 
            .wpb-text { width: fit-content;
                .wpb-usp__text {font-size: var(--fs-lg); font-weight: 600;}
            }
        }
    }
    &.wpb-usps-wrapper--large { display: flex; flex-direction: column; gap: .8rem; 
        .wpb-usp {--gap: 1.6rem; --bg-clr: var(--clr-white); --p: 3.2rem; padding: var(--p); display: flex; align-items: flex-start; gap: var(--gap); border-radius: .4rem !important; background-color: var(--bg-clr);
            .wpb-icon__wrapper {height: 3.2rem;}
            .wpb-text { width: fit-content;
                .wpb-usp__title {font-family: var(--font-accent); font-size: var(--fs-xxl); font-weight: 600; line-height: 1.1; }
                .wpb-usp__text {font-size: var(--fs-md);}
            }
        }
    }

    @media (min-width: 992px) {
        &.wpb-usps-wrapper--small { }
        &.wpb-usps-wrapper--large {
            .wpb-usp {--gap: 2.4rem;}
        }
    }
}


/*** ---------- Stappen ---------- ***/
.wpb-steps {--p: 3.2rem; counter-reset: list; list-style: none; padding: 0 !important; 
    li { display: flex; gap: 6rem; border-bottom: 1px solid var(--clr-border); padding: var(--p) 0;
        &::before { counter-increment: list; content: counter(list, decimal-leading-zero); color: var(--clr-primary); font-weight: 600; font-family: var(--font-accent);}
        &:first-child { padding-top: 0;}

        .wpb-step__title {font-family: var(--font-accent); font-size: var(--fs-xxl); font-weight: 600; line-height: 1.1; }
        .wpb-step__text {font-size: var(--fs-md);}
    }

    @media (min-width: 768px) {--p: 4rem;}
    @media (min-width: 992px) {--p: 4.8rem;}
    @media (min-width: 1200px) {--p: 6rem;}
}


/*** ---------- Badge ---------- ***/
.badge-group { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.badge { 
    --fs: 1.3rem; 
    --fw: 500; 
    --lh: 1; 
    --p: .8rem 1.2rem; 
    --br: 2rem; 
    
    --clr: var(--clr-text); --bg-clr: var(--clr-dark); --border: none; --box-shadow: none; 
    --hover-clr: var(--clr); --hover-bg-clr: var(--bg-clr); --hover-border: var(--border); --hover-box-shadow: var(--box-shadow);
    
    display: inline-flex; gap: .4rem; align-items: center; padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; user-select: none; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); transition-property: color, background-color, border-color, box-shadow; 
    font-family: var(--font-accent); font-weight: var(--fw); font-size: var(--fs); line-height: var(--lh); text-wrap: nowrap; width: fit-content;

    &:hover { color: var(--hover-clr); background-color: var(--hover-bg-clr); border: var(--hover-border); box-shadow: var(--hover-box-shadow); }

    /* Badge variations */
    &.badge--primary { --bg-clr: var(--clr-primary); }
    &.badge--primary-light { --bg-clr: var(--clr-primary-light); }
    &.badge--light { --bg-clr: var(--clr-light); }
    &.badge--dark {--clr: var(--clr-white); --bg-clr: var(--clr-primary-dark); }
    &.badge--white {--p: .8rem; --fw: 400; --clr: var(--clr-text); --bg-clr: transparent; opacity: .5;}
    &.badge--ghost {--p: 0; --fs: 1.6rem; --fw: 400; --clr: var(--clr-text); --bg-clr: transparent; }
}


/*** ---------- Author ---------- ***/
.wpb-author { display: flex; align-items: center; gap: .8rem;
    .wpb-image { width: 4.4rem; height: 4.4rem; border-radius: 50%; overflow: hidden; background-color: var(--clr-primary-dark); aspect-ratio: 1 / 1;
        img { width: 100%; height: 100%; object-fit: cover; object-position: top; aspect-ratio: 1 / 1;}
    }
    .wpb-text { --mt: 0; display: flex; flex-direction: column; font-family: var(--font-accent); color: var(--clr-primary-dark); line-height: 1.2;
        .wpb-author__name {  font-size: var(--fs-md); font-weight: 600; }
        .wpb-author__label { font-size: var(--fs-sm); font-weight: 400; opacity: .5;}
    }
}


/*** ---------- Rulings ---------- ***/
.wpb-rulings { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.6rem;
    .wpb-ruling {--p: 2.4rem 3.2rem; padding: var(--p);  display: flex; justify-content: space-between; align-items: center; background-color: var(--clr-white); text-decoration: none; position: relative; border-radius: var(--br-sm);
        .wpb-ruling__content { display: flex; align-items: center; gap: .8rem;
            .wpb-image { width: 4.4rem; height: 4.4rem; border-radius: 50%; overflow: hidden; background-color: var(--clr-light); aspect-ratio: 1 / 1;
                img { width: 100%; height: 100%; object-fit: cover; object-position: top; aspect-ratio: 1 / 1;}
            }
            .wpb-text { --mt: 0; display: flex; flex-direction: column; font-family: var(--font-accent); color: var(--clr-primary-dark); line-height: 1.2;
                .wpb-ruling__title { font-size: var(--fs-md); font-weight: 600;}
                .wpb-ruling__name {  font-size: var(--fs-sm); font-weight: 400; opacity: .5;}
            }
        }
        .wpb-ruling__button {
            &::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
        }

    }
}


/*** ---------- backdrop ---------- ***/
.wpb-backdrop { background-color: rgba(0,0,0,.35); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; opacity: 0; pointer-events: none; transition: opacity var(--ts-25) ease; 
    &.active { opacity: 1; pointer-events: all; }
}  

/*** ---------- Breadcrumb ---------- ***/
.wpb-breadcrumbs {margin-bottom: .6rem; margin-top: 3.2rem;
    :is(span, a) { display: flex; align-items: center; color: inherit; text-decoration: none; font-size: 1.4rem; }
    a:hover { text-decoration: underline }
    .breadcrumb_last { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    > span { display: flex; column-gap: .8rem; min-width: 0; overflow: hidden; }
    .fa-chevron-right { font-size: 1rem; color: var(--clr-primary); }
}

/*** ---------- Social media ---------- ***/
.wpb-social-media {
    --br: 50%; 
    --clr: var(--clr-primary-dark); 
    --bg-clr: var(--clr-white); 
    --border: none; 
    --box-shadow: none; 
    --hover-clr: var(--clr-white); 
    --hover-bg-clr: var(--clr-secondary); 
    --hover-border: var(--border); 
    --hover-box-shadow: var(--box-shadow); 
    --focus-clr: var(--hover-clr); 
    --focus-bg-clr: var(--hover-bg-clr); 
    --focus-border: var(--hover-border); 
    --focus-box-shadow: var(--hover-box-shadow); 
    --active-clr: var(--focus-clr); 
    --active-bg-clr: var(--focus-bg-clr); 
    --active-border: var(--focus-border); 
    --active-box-shadow: var(--focus-box-shadow); 

    display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 1rem; font-size: var(--fs-xs);

    a {color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); text-decoration: none; width: 3.2rem; height: 3.2rem; display: inline-grid; place-items: center; transition: all var(--ts-duration) ease-in-out;
        i { color: inherit; transition: all var(--ts-duration) ease-in-out;}
        &:hover { background-color: var(--hover-bg-clr)!important; border: var(--hover-border)!important; box-shadow: var(--hover-box-shadow)!important;
            i { color: var(--hover-clr); }
        }
        &:focus { background-color: var(--focus-bg-clr)!important; border: var(--focus-border)!important; box-shadow: var(--focus-box-shadow)!important; 
            i { color: var(--focus-clr); }
        }
        &:active { background-color: var(--active-bg-clr)!important; border: var(--active-border)!important; box-shadow: var(--active-box-shadow)!important; 
            i { color: var(--active-clr); }
        }
    }
}


/*** ---------- Newsletter ---------- ***/
.wpb-newsletter {overflow: hidden; flex: 0 0 auto; --p: 2rem; container: wpb-newsletter / inline-size; background-color: var(--clr-primary-dark); padding: var(--p); border-radius: var(--br-lg); border: 1px solid rgba(var(--clr-border-light)); 
    .wpb-text {z-index: 1; color: var(--clr-white); position: relative;
        .wpb-label { --clr: var(--clr-primary-light);}
        &::after {z-index: -1; pointer-events: none; content: '';  position: absolute; top: -75%; left: 0; width: 100%; height: 100%;  background-image: url(/app/themes/wux-theme/assets/img/brandmark.svg); background-position: center; background-size: cover; background-repeat: no-repeat;  filter: var(--blur-lg);  transform: rotate(135deg) translate(50%, 50%); transform-origin: center;}
    }
    .wpb-newsletter__form { position: relative;
        .gform-body { margin-top: 2.4rem;
            input[type="email"] {height: 5.2rem; background-color: var(--clr-white); color: var(--clr-text); transition: background-color var(--ts-duration) var(--ts-function); border: none !important;
                &::placeholder {opacity: .4; }
                &:active, &:focus { background-color: var(--clr-light); outline: none !important;}
            }
        }
        .gform-footer {
            .form-privacy-notice {opacity: .8; font-size: var(--fs-xs); max-width: 28rem; text-align: start;
                a {opacity: 1; text-decoration: underline; color: var(--clr-white); transition: color var(--ts-duration) var(--ts-function);
                    &:hover { color: var(--clr-primary-light); }
                }
            }
        }
    }



    @media (min-width: 768px) {--p: 3.2rem; }
    @media (min-width: 1200px) {width: clamp(32rem, 25vw, 48rem); }
}
@container wpb-newsletter (max-width: 359.98px) {
    .wpb-newsletter__form {
        .gform-footer { margin-top: 0.8rem !important;
            .btn--submit {width: 100% !important;}
        } 
    }
}
@container wpb-newsletter (min-width: 360px) {
    .wpb-newsletter__form { --w: 16rem;
        .gform-body {
            input[type="email"] {width: calc(100% - var(--w)) !important; border-bottom-right-radius: 0; border-top-right-radius: 0;}
        }
        .gform-footer {
            .btn--submit {position: absolute; top: 0; right: 0; width: var(--w) !important; border: none !important; border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important;} 
        }
    }
}


/*** ---------- Footer CTA ---------- ***/
.wpb-footer-cta { --p: 3.2rem;
    .wpb-footer__inner { color: var(--clr-white); overflow: hidden; border-radius: var(--br-lg); 
        &::before { z-index: 0; pointer-events: none; content: ''; position: absolute; top: -5%; right: -5%; bottom: -5%; left: -5%;  width: 110%; height: 110%;  background-image: url('/app/themes/wux-theme/assets/img/brandmark.svg'); background-size: cover; background-repeat: no-repeat; background-position: center; filter: var(--blur);}
        .wpb-footer-cta__content {position: relative; display: flex; align-items: center; justify-content: center; padding: var(--p); z-index: 2;
            .wpb-text { max-width: 64rem; text-align: center;
                .wpb-brandmark {width: 3.2rem; height: auto; margin: auto;}
                .btn-group { justify-content: center; }
            }
        }
        .wpb-footer-cta__members {position: relative; width: 100%; display: flex; justify-content: center; z-index: 1; 
            .wpb-footer-cta__members-group {display: flex;}
        }
    }

    @media (max-width: 767.98px)  {
        .wpb-footer__inner {
            .wpb-footer-cta__members {
                .wpb-footer-cta__members-group {
                    &.group--left {margin-left: -10%;}
                    .wpb-footer-cta__member img {width: 130%; margin-left: -10%; height: 100%; object-fit: cover;
                        &:first-of-type {margin-left: 0;}
                    }
                }
            }
        }
    } 

    @media (min-width: 768px)  { --p: 6rem 0 20rem 0; 
        .wpb-footer__inner {
            .wpb-footer-cta__content {  
                .wpb-text { 
                    p {padding: 0 8rem;}
                }
            }
            .wpb-footer-cta__members {--w: 2vw; position: absolute; left: calc(var(--w) / -1); bottom: 0; width: calc(100% + (var(--w) * 2)); justify-content: space-between; 
                .wpb-footer-cta__members-group {
                    &.group--left {justify-content: flex-start;
                        .wpb-footer-cta__member:last-of-type {margin-left: -8vw;}
                    }
                    &.group--right {justify-content: flex-end;
                        .wpb-footer-cta__member:first-of-type {margin-right: -8vw;}
                    }
                    .wpb-footer-cta__member {
                        img {width: auto; height: auto; max-width: 18vw; max-height: 54vh; height: 100%; object-fit: cover;}
                    }
                }
            }
        }
    }
    @media (min-width: 992px)  { --p: 12rem 0; 
        .wpb-footer__inner {
            .wpb-footer-cta__members { --w: 4vw;}
        }
    }
}


/*** ---------- Footer ---------- ***/
.wpb-footer {--p: 3.2rem; margin-top: -2.4rem; color: var(--clr-white); z-index: 0;
    /* &::before {z-index: 1; pointer-events: none; content: ''; position: relative; display: block; background-color: var(--clr-light); width: 100%; height: 2.4rem; border-bottom-left-radius: var(--br-xl); border-bottom-right-radius: var(--br-xl);} */
    &::after  {z-index: 0; pointer-events: none; content: ''; position: absolute; top: 12rem; left: -10%; width: 120%; height: 100%; background-image: url('/app/themes/wux-theme/assets/img/brandmark.svg'); background-position: top center; background-size: cover; background-repeat: no-repeat;  filter: var(--blur-lg);}

    .footer-menu__title { display: block; padding: 0 0 1rem 0; font-size: 2rem; color: var(--clr-primary-light); text-decoration: none; font-weight: bold; }

    .wpb-footer__top {position: relative; z-index: 1; --gc: 2; margin-top: 2.4rem;
        .inner { display: flex; flex-wrap: wrap; column-gap: 9rem; row-gap: 3.2rem; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(var(--clr-border-light)); padding: var(--p) 0;
            .logo { position: relative;
                &::before { content: ''; position: absolute; top: 0; left: 0; border-radius: 50%; opacity: .4; display: block; z-index: -1; width: 12rem; height: 12rem; background-color: var(--clr-primary-light); filter: var(--blur-lg); }
                img { width: 24rem; height: auto; }
            }

            .wpb-footer__contact { display: flex; align-items: center; column-gap: 9rem; row-gap: 2rem; flex-wrap: wrap;
                .contact-link { gap: 1rem; align-items: center; line-height: 1; transition: color var(--ts-duration) var(--ts-function);
                    .wpb-icon { font-size: var(--fs-xs); width: fit-content; transition: color var(--ts-duration) var(--ts-function);}

                    &:hover { color: var(--clr-primary-light);
                        .wpb-icon { --clr: var(--clr-primary-light); }
                    }
                }
            }
        }
    }

    .wpb-footer__main {position: relative; z-index: 1; --gc: 1; padding: var(--p) 0;
        .container { display: flex; flex-direction: column; gap: 2rem; }
        .wpb-footer__content {flex: 1;  display: grid; grid-template-columns: repeat(var(--gc), auto); column-gap: 2rem; row-gap: 2rem; 
            .wpb-footer__menu {
                .footer-link { transition: color var(--ts-duration) var(--ts-function);
                    &:hover { color: var(--clr-primary-light); }
                }
                ul { list-style: none; display: flex; flex-direction: column; gap: .8rem;
                    .menu-item {font-family: var(--font-accent); transform: translateX(-2.4rem); transition: all var(--ts-duration) var(--ts-function); 
                        a {text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; 
                            i { opacity: 0; transition: opacity var(--ts-35) var(--ts-function);
                            }
                        }
                        &:hover{ color: var(--clr-primary-light); transform: translateX(0); 
                            i { opacity: 1; }
                        }
                    }
                }
            }
        }
    }

    .wpb-footer__bottom {position: relative; z-index: 1;
        .inner { display: flex; flex-direction: column; justify-content: space-between; align-items: center; column-gap: 2rem; row-gap: 2rem; border-top: 1px solid rgba(var(--clr-border-light)); padding: calc(var(--p) / 2) 0; 
            .wpb-footer__sub-links { --fs: 1.4rem; text-align: center;  display: flex; flex-wrap: wrap; column-gap: 2rem;
                * { display: flex; column-gap: 2rem; text-decoration: none; }

                a {transition: color var(--ts-duration) var(--ts-function);
                    &:hover { color: var(--clr-primary-light); }
                }
            }
        }
    }

    @media (max-width: 991.98px) {
        &::after { transform: rotate(180deg); top: 0; height: 36rem;}
    }    
    @media (min-width: 480px) {
        .wpb-footer__main { --gc: 2; }
    }
    @media (min-width: 768px) {
        .wpb-footer__main { --gc: 2;}
    }
    @media (min-width: 992px) { --p: 4.8rem;
        .wpb-footer__top { 
            .inner {
                .logo { position: relative; margin: 0; }
            }
        }
        .wpb-footer__main { --gc: 4; }
    }
    @media (min-width: 1200px) { --p: 6rem;
        .wpb-footer__main {
            .container {flex-direction: row;}
        }
        .wpb-footer__bottom {
            .inner { flex-direction: row; }
        }
    }
} 


/*** ---------- Modal ---------- ***/
.modal { 
    --br: 1.6rem; 
    --p: 2rem; 
    --backdrop-clr: rgba(0,0,0,.45); 
    
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; padding: 2rem; background-color: var(--backdrop-clr); display: none; justify-content: center; align-items: center; transition: opacity var(--ts-duration) ease-in-out; z-index: 1090; 

    .modal-dialog { display: flex; flex-direction: column; border-radius: var(--br); width: 100%; max-width: 74rem; height: auto; max-height: 80vh; transform: translateY(5rem); transition: transform var(--ts-25) ease; background-color: #fff; overflow: hidden; 
        .modal-dialog__header { display: flex; justify-content: space-between; align-items: center; padding: var(--p); background-color: #fff; font-family: inherit; 
            .modal-title { font-size: 2rem; margin: 0; } 
        }    
        .modal-dialog__body { background-color: #fff; padding: var(--p); overflow-y: auto; overflow-x: hidden; }
        .modal-dialog__footer { display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #E4E9EA; background-color: #fff; padding: var(--p); z-index: 2; margin-top: auto; }
    }
    
    &.show { display: flex; opacity: 1; pointer-events: all; 
        .modal-dialog { transform: translateY(0); }
    }

    /* Modal variations */
    &.modal--small .modal-dialog { max-width: 60rem; max-height: 60rem; }
    &.modal--large .modal-dialog { max-width: 100rem; max-height: 60rem; }
    &.modal--fullscreen { padding: 0; }
    &.modal--fullscreen .modal-dialog { height: 100%; max-height: 100%; max-width: 100%; border-radius: 0; }
}

@media (min-width: 576px) {
    .modal.modal--fullscreen { --p: 2rem calc((100% - 540px) / 2 + 2rem); }
}

@media (min-width: 768px) {
    .modal.modal--fullscreen { --p: 2rem; }
    .modal.modal--fullscreen .modal-dialog { max-width: 74rem; height: auto; max-height: 80vh; border-radius: var(--br); }
}

@media (min-width: 992px) {
    .modal { --p: 3.2rem; }
    .modal.modal--fullscreen { --p: 3.2rem; }
}

/*** ---------- Tooltips ---------- ***/
.wpb-tooltip { --bg: rgb( 255,255,255); position: absolute; pointer-events: none; opacity: 0; background-color: var(--bg); color: inherit; font-size: 1.3rem; line-height: 2rem; padding: .5rem 1rem; border-radius: .5rem; z-index: 9999; box-shadow: 0 0 .75rem .25rem rgba(0,0,0,.1);
    &::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 .5rem .5rem .5rem; border-color: transparent transparent var(--bg) transparent; bottom: 100%; transform: translateX(-50%); left: 50%; }

    /* Tooltip variations */
    &.wpb-tooltip--left::after { border-width: .7rem 0 .7rem .7rem; border-color: transparent transparent transparent var(--bg); top: 50%; transform: translateY(-50%); left: calc(100% - 1px); }
    &.wpb-tooltip--right::after { border-width: .7rem .7rem .7rem 0; border-color: transparent var(--bg) transparent transparent; top: 50%; transform: translateY(-50%); right: calc(100% - 1px); left: auto; }
    &.wpb-tooltip--top::after { border-width:  .5rem .5rem 0 .5rem; border-color: var(--bg) transparent transparent transparent; top: 100%; transform: translateX(-50%); left: 50%; }

}
.wpb-tooltip.show { opacity: 1; }

/*** ---------- Dropdowns ---------- ***/
.wpb-dropdown { position: relative; 

    .wpb-dropdown__menu { display: block; z-index: 850; opacity: 0; pointer-events: none; min-width: 10rem; border-radius: .5rem; position: absolute; top: calc(100% + .5rem); left: 0; background-color: #fff; box-shadow: 0 0.5rem 0.5rem rgb(21, 47, 51, .1); border: 1px solid rgba(var(--clr-border)); padding: 1.25rem; transition: opacity var(--ts-duration) ease-in-out; 
        ul { list-style: none; 
            .dropdown-item { white-space: nowrap; display: flex; gap: .5rem; text-decoration: none; }
        }
    }
    .wpb-dropdown__menu-right { left: auto; right: 0; }
    .wpb-dropdown__toggle[aria-expanded="true"] + .wpb-dropdown__menu { opacity: 1; pointer-events: all; }  

    /* Dropdown variations */
    &.wpb-dropdown__left {
        .wpb-dropdown__menu { top: 0; right: calc(100% + .5rem); left: auto; } 
        .wpb-dropdown__toggle i { order: -1; transform: rotate(90deg); }
    } 
    &.wpb-dropdown__right {
        .wpb-dropdown__menu { top: 0; left: calc(100% + .5rem); right: auto; } 
        .wpb-dropdown__toggle i { order: 9999; transform: rotate(-90deg); }
    }
}

/*** ---------- Tables ---------- ***/
.wpb-table { overflow-x: auto; }
table { 
    --clr: var(--clr-text); 
    --border-clr: var(--clr-border); 
    --accent-bg-clr: transparent; 
    --hover-clr: var(--clr-text); 
    --hover-bg-clr: rgba(0, 0, 0, 0.075); 
    --border-width: .1rem; 
    
    border-collapse: collapse; width: 100%; color: var(--clr); vertical-align: top; border-color: var(--border-clr); border-spacing: 0; }
table td, table th {padding: 1em 1.41575em; text-align: left; vertical-align: top; border-color: inherit; border-style: solid; border-width: 0; border-bottom-width: var(--border-width); }
table thead { vertical-align: bottom; }

/*** ---------- Filters ---------- ***/
.wpb-toolbar .container { display: grid; grid-template-columns: 1fr; }

@media (width > 576px) {
    .wpb-toolbar .container { grid-template-columns: 1fr 20rem; }
}

/*** ---------- Pagination ---------- ***/
.wpb-pagination { --size: 3.2rem; --p: 0; --clr: var(--clr-text); --bg-clr: transparent; --border: 1px solid var(--clr-light); --br: .4rem; --hover-clr: var(--clr-primary); --hover-bg-clr: transparent; --hover-border: var(--border); --active-color: var(--clr-white); --active-bg-clr: var(--clr-primary-dark); --active-border: var(--clr-primary-dark); position: relative; display: flex; justify-content: center; 
    .has-prev-next { padding-left: var(--size); padding-right: var(--size); } 
    ul { position: relative; --gap: .8rem; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--gap); padding-top: 3.2rem; }
    li {
        > * { width: var(--size); height: var(--size); min-width: var(--size); display: inline-grid; place-items: center; font-weight: 600; font-size: 1.6rem; line-height: 1.6; padding: var(--p); color: var(--clr); background-color: var(--bg-clr); border-radius: var(--br); border: var(--border); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition-property: color, background-color, border-color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); 
            i { font-size: 1.4rem; pointer-events: none; }    
        }
        > *:hover, > *:focus, > *:active { color: var(--hover-clr); background-color: var(--hover-bg-clr); border: var(--hover-border); }
        > *:hover i { --clr: var(--hover-clr) }
        > *.current { color: var(--active-color); background-color: var(--active-bg-clr); border: var(--active-border); }
        .page-number__prev { position: absolute; left: 0; }
        .page-number__next { position: absolute; right: 0; }
        :has([data-page="…"]), [data-page="…"] { pointer-events: none!important; }
    }

    @media (min-width: 768px) {--size: 4.8rem; }
}

/*** ---------- Offcanvas ---------- ***/
.wpb-offcanvas { --p: 1.8rem; width: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: auto; flex-direction: column; z-index: 9999; background-color: #fff; transform: translate3d(100%, 0, 0); transition: transform var(--ts-35) ease; 
    &.wpb-offcanvas--left { transform: translate3d(-100%, 0, 0); top: 0; right: auto; bottom: 0; left: 0; }
    &.is-active { pointer-events: all; transform: translate3d(0%, 0, 0); }
    
    .wpb-offcanvas__header { display: flex; justify-content: space-between; align-items: center; padding: var(--p); }
    .wpb-offcanvas__body { padding: var(--p); flex-grow: 1; overflow-y: auto; }
    .wpb-offcanvas__footer { display: grid; padding: var(--p); }

}
.btn[data-target="#productFilters"] { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 600; }
.wpb-offcanvas.wpb-offcanvas--filters form > * + * { margin-top: 2rem; }

@media (min-width: 576px) {
    .wpb-offcanvas { max-width: 45rem; }
}

@media (min-width: 992px) {
    .wpb-offcanvas.wpb-offcanvas--filters { --p: 0; display: flex!important; position: static; transform: none; z-index: 1; }
    .wpb-offcanvas.wpb-offcanvas--filters .wpb-offcanvas__header,
    .wpb-offcanvas.wpb-offcanvas--filters .wpb-offcanvas__footer { display: none; }
    .btn[data-target="#productFilters"] { display: none; }
}

/* Contact links */
.contact-link { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; text-decoration: none; 
    strong { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; width: 100%; }
}

/*** ---------- Archive ---------- ***/
.wpb-archive { --gc: 1; --gap: 1rem;
    .container {
        &.container--filters { margin-bottom: 3.2rem; 
            .wpb-filters__multiselect {}
            .wpb-filters__filters { display: flex; gap: 1rem; flex-direction: column;}
        }
        &.container--results { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
    }

    @media (min-width: 768px) { --gc: 2;
        .container {
            &.container--filters { 
                .wpb-filters__filters {flex-direction: row;}
            }
        }    
     }
    @media (min-width: 992px) { --gc: 3; --gap: 2.2rem;
        .container {
            &.container--filters {
                .wpb-filters__multiselect {grid-column: span 2;}
            }
        }
    }
}



/*** ---------- Aspect ratio ---------- ***/
.wpb-ratio { --wpb-aspect-ratio: 100%; position: relative; width: 100%;
    > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    > img { object-fit: cover; } 

    &::before { display: block; padding-top: var(--wpb-aspect-ratio); content: ""; }

    &.wpb-ratio--21x9 { --wpb-aspect-ratio: 42.8571428571%; }
    &.wpb-ratio--16x9 { --wpb-aspect-ratio: 56.25%; }
    &.wpb-ratio--1x1 { --wpb-aspect-ratio: 100%; }
    &.wpb-ratio--4x3 { --wpb-aspect-ratio: 75%; }
}

/*** ---------- Alerts ---------- ***/
.wpb-alert { --clr: #fff; --bg: var(--clr-primary); --br: .35rem; display: block; padding: 1.6rem; color: var(--clr); background-color: var(--bg); border-radius: var(--br); 
    *:not(.btn) { color: inherit; }

    &.wpb-alert--info { --border: 1px solid rgb(0, 143, 214); --bg: rgb(0, 143, 214); }
    &.wpb-alert--warning { --border: 1px solid rgb(194, 100, 47); --bg: rgb(194, 100, 47); }
    &.wpb-alert--danger { --border: 1px solid rgb(216, 19, 19); --bg: rgb(216, 19, 19); }
    &.wpb-alert--success { --border: 1px solid rgb(78, 168, 69); --bg: rgb(78, 168, 69); }
}

/*** ---------- Search results ---------- ***/
.search-form__results {
    .wpb-search-result { display: flex; align-items: center; gap: 1.6rem; text-decoration: none;
        .wpb-search-result__image img { width: 4.8rem; height: 4.8rem; object-fit: cover; }
        .wpb-search-result__title { margin-right: auto; }
    
        + .wpb-search-result { margin-top: .5rem; }
    }

    .wpb-search-results__group {
        + .wpb-search-results__group { margin-top: 2rem; }
    }
}

/* Add to cart/bookmark animation */
.add-success, .saved-success { position: fixed; top: 3.2rem; right: 3.2rem; background-color: var(--clr-primary); z-index: 9999; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: inline-grid; place-items: center; transform: scale(0); animation: scale .5s cubic-bezier(0,0,.5,1.5) forwards, transform .5s forwards; animation-delay: 0s, 1.6s; 
    i { color: #fff; }
    &:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; animation: pulse 1s forwards; animation-delay: .6s; }
} 

/*** ---------- Wux Bulk Pricing ---------- ***/
.wpb-bp-overview { margin-bottom: 2.2rem; }
.wpb-bp-overview .wpb-bp-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule { cursor: pointer; border: 1px solid var(--clr-border); border-radius: .5rem; display: grid;}
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span { font-size: 1.6rem; line-height: 1; padding: 1rem 1.5rem; display: flex; gap: .5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span strong { font-size: 1.8rem; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span small { margin-left: auto; font-size: 1.2rem; line-height: 1; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span small * { font-size: inherit; line-height: inherit; }
.wpb-bp-overview .wpb-bp-rules .wpb-bp-rule > span + * { border-top: 1px solid var(--clr-border); }

@media (min-width: 992px) {
    .wpb-bp-overview { margin-bottom: 3.2rem; }
}


/*** ---------- Temlate: Contact ---------- ***/
.page-template-template-contact {--gc: 1; --grid: repeat(1, minmax(0, 1fr)); --gap: 2.2rem;
    .wpb-header {
        .container {display: grid; grid-template-columns: var(--grid) !important; gap: var(--gap); -webkit-box-align: center; -ms-flex-align: center; align-items: center;
            .wpb-text {gap: 0 !important;}
            .wpb-image {
                img {border-radius: var(--br-md); max-height: unset !important;}
            }
        }
        .wpb-contact__info {display: flex; flex-direction: column; gap: 2.4rem; font-size: var(--fs-md);
            .contact-info__title { display: block; padding: 0 0 1rem 0; font-size: 2rem; color: var(--clr-primary-dark); text-decoration: none; font-weight: bold; }
            
            .contact-link { gap: 1rem; align-items: center; line-height: 1; transition: color var(--ts-duration) var(--ts-function);
                .wpb-icon {color: var(--clr-primary); font-size: var(--fs-xs); width: fit-content; transition: color var(--ts-duration) var(--ts-function);}
                
                &:hover { color: var(--clr-primary);
                    .wpb-icon { --clr: var(--clr-primary); }
                }
            }

            .info-item--kvk-btw {grid-column: span 2;}
            .wpb-social-media {--bg-clr: var(--clr-primary-light); --hover-bg-clr: var(--clr-primary-dark); --hover-clr: var(--clr-white);}
        }
    }

    .wpb-contact {
        .container {display: grid; grid-template-columns: var(--grid); gap: var(--gap); align-items: stretch;  -webkit-box-align: start; -ms-flex-align: start; align-items: start; 
            .wpb-text { display: flex; flex-direction: column; height: 100%;
                .wpb-image { flex: 1; min-height: 0; overflow: hidden;
                    img { width: 100%; height: 100%; object-fit: cover; display: block;}
                }
            }
        }
    }

    @media (min-width: 500px) {
        .wpb-header {
            .wpb-contact__info {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
        }
    }
    @media (min-width: 768px)  { --gap: 3.2rem; }
    @media (min-width: 992px)  { --grid: repeat(2, minmax(0, 1fr)); --gap: 4.8rem; }
    @media (min-width: 1200px) { --grid: minmax(0, 48rem) minmax(0, 100%); --gap: 6rem;}
}


/*** ---------- Temlate: Afspraak ---------- ***/
.page-template-template-appointment {--gc: 1;
    .wpb-appointment { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr));
        .btn--back { font-weight: 600 !important; --gap: .2rem;
            i {color: var(--clr-primary-light);}
        }
        .wpb-card--appointment-form {margin-top: 2.4rem; height: fit-content}
        .wpb-image {--br: 0; position: relative; 
            img {position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; right: 0; bottom: 0;}
        }
    }

    @media (min-width: 768px)  { 
        .wpb-appointment {
            .container { }
        }
    }
    @media (min-width: 992px)  { --gc: 2;
        .wpb-appointment {
            .container { }
        }
    }
    @media (min-width: 1200px) { 
        .wpb-appointment {
            .container {}
        }
    }
}


/*** ---------- Keyframes ---------- ***/
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes scale {
    0% { transform: scale(0); }
    100% { transform: scale(100%); }
}

@keyframes transform {
    0% { transform: scale(100%) translateY(0px); opacity: 1; }
    100% { transform: scale(100%)  translateY(-10rem); opacity: 0; }
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--clr-primary); opacity: .7; }
    70% { transform: scale(1); box-shadow: 0 0 0 1.5rem var(--clr-primary); opacity: 0; }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--clr-primary); opacity: 0; }
}