: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;
    }
}

* { font-family: var(--wpb-font-family); }
*, *::before, *::after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 10px; height: -webkit-fill-available; scroll-behavior: smooth; }
.wpb-pagewrapper { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
a { color: inherit; text-decoration: none; }
.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 } 

.wpb-body { font-size: var(--global-fs); line-height: var(--global-lh); color: var(--clr-text); min-height: 100dvh; min-height: -webkit-fill-available; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--clr-light);
    &.--no-scroll { overflow: hidden; }
}

.wpb-body.woocommerce.archive,
.wpb-body.woocommerce-checkout,
.wpb-body.woocommerce-cart,
.wpb-body.woocommerce-account,
.wpb-body.search {background-color: #fff;}

/*** Images ***/
.wpb-image img { border-radius: var(--radius, .5rem); }
.wpb-image figcaption { display: block; padding-top: .5rem; font-size: 1.4rem; }
img { display: block; width: 100%; height: auto; }

/*** Loader ***/
.wpb-loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; z-index: 9999; isolation: isolate; background-color: var(--clr-primary); }
.wpb-loading-icon { display: inline-block; transform: translateZ(1px); position: absolute; right: 3.2rem; bottom: 3.2rem; }
.wpb-loading-icon:after { content: ''; display: inline-block; width: 4.8rem; height: 4.8rem; margin: .8rem; border-radius: 50%; background: #fff; -webkit-animation: coin-flip 2.8s cubic-bezier(0, 0.2, 0.8, 1) infinite; animation: coin-flip 2.8s cubic-bezier(0, 0.2, 0.8, 1) infinite; }

@-webkit-keyframes coin-flip { 
    0%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
            animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }
    0% {
        -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(1800deg);
            transform: rotateY(1800deg);
        -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
            animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }
    100% {
        -webkit-transform: rotateY(3600deg);
            transform: rotateY(3600deg);
    }
} 

@keyframes coin-flip { 
    0%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
            animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }
    0% {
        -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(1800deg);
            transform: rotateY(1800deg);
        -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
            animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }
    100% {
        -webkit-transform: rotateY(3600deg);
            transform: rotateY(3600deg);
    }
}

.wpb-cta-content { --image-size: 7.6rem; --mask-image: url('/app/themes/transoplast-core/public/masks/mask-polygon.svg'); display: flex; align-items: center; column-gap: 1.2rem; position: relative;
    .wpb-cta-content__image { width: var(--image-size); height: var(--image-size); overflow: hidden; display: inline-block; flex-shrink: 0; mask-image: var(--mask-image); -webkit-mask-image: var(--mask-image); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain;
        img { width: 100%; height: 100%; object-fit: cover; background-color: #F1F1F1; }
    }
    .wpb-cta-content__text { 
        .wpb-cta-content__title { font-size: 1.8rem; font-weight: 600; }   
        .wpb-cta-content__description { font-size: 1.5rem; opacity: .8; }
        .btn { margin-top: 1em; }
    }
}

/*** ---------- Containers / Display rules ---------- ***/
.d-none { display: none!important; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { --gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); }
.container, .container-fluid { --wpb-width: 100%; --wpb-padding: 1.6rem; width: 100%; max-width: var(--wpb-width); margin-left: auto; margin-right: auto; padding-left: var(--wpb-padding); padding-right: var(--wpb-padding); position: relative; }
.wpb-width--large .container { --wpb-width: 1831px; }

@media (min-width: 576px) {
    .d-sm-none { display: none!important; }
    .d-sm-block { display: block!important; }
    .d-sm-flex { display: flex!important; }
    .d-sm-grid { display: grid!important; }
    body { --wp--style--global--content-size: 540px; } 
    .container { --wpb-width: 540px; }
}

@media (min-width: 768px) {
    .d-md-none { display: none!important; }
    .d-md-block { display: block!important; }
    .d-md-inline { display: inline!important; }
    .d-md-flex { display: flex!important; }
    .d-md-grid { display: grid!important; }
    body { --wp--style--global--content-size: 720px; } 
    .container { --wpb-width: 720px; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none!important; }
    .d-lg-block { display: block!important; }
    .d-lg-inline { display: inline!important; }
    .d-lg-flex { display: flex!important; }
    .d-lg-grid { display: grid!important; }
    body { --wp--style--global--content-size: 960px; } 
    .container { --wpb-width: 960px; }
    .wpb-width--extra-small .container { --wpb-width: 720px; }
}

@media (min-width: 1200px) {
    body { --wp--style--global--content-size: 1140px; } 
    .container { --wpb-width: 1140px; }

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

    .wpb-width--extra-small .container { --wpb-width: 720px; }
    .wpb-width--small .container { --wpb-width: 960px; }
    .wpb-width--medium .container { --wpb-width: 1030px; }
}

@media (min-width: 1400px) {
    .d-xxl-inline-block { display: inline-block!important; }
    body { --wp--style--global--content-size: 1320px; } 
    .container { --wpb-width: 1320px; }

    .wpb-width--extra-small .container { --wpb-width: 720px; }
    .wpb-width--small .container { --wpb-width: 960px; }
    .wpb-width--medium .container { --wpb-width: 1270px; }
}

@media (min-width: 1600px) {
    body { --wp--style--global--content-size: 1480px; } 
    .container { --wpb-width: 1480px; }

    .wpb-width--extra-small .container { --wpb-width: 720px; }
    .wpb-width--small .container { --wpb-width: 960px; }
    .wpb-width--medium .container { --wpb-width: 1270px; }
}


/*** ---------- Sections ---------- ***/
section { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; }
.has-background-image { position: relative; }
.has-background-image::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,.4) 25%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,.8) 100%); border-radius: inherit; }
.has-background-image .wpb-text :is(h1, h2, h3, h4, h5, p, ul, ol, .wpb-breadcrumbs, em) { color: #fff; }
.has-background-image .container { z-index: 1; }
.has-background-image .wpb-text { z-index: 1; position: relative;  }

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-section__header, .wpb-block__header {
    .container { display: -webkit-box; display: -ms-flexbox; 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; }
}

/*** ----- Whitespace ----- ***/
[class*="wpb-wst"] { --wpb-wst: 0; padding-top: var(--wpb-wst); }
[class*="wpb-wsb"] { --wpb-wsb: 0; padding-bottom: var(--wpb-wsb); }

.wpb-wst--none { --wpb-wst: 0; }
.wpb-wst--small { --wpb-wst: 1.8rem; }
.wpb-wst--medium { --wpb-wst: 2.8rem; }
.wpb-wst--large { --wpb-wst: 2.8rem; }

.wpb-wsb--none { --wpb-wsb: 0; }
.wpb-wsb--small { --wpb-wsb: 1.8rem; }
.wpb-wsb--medium { --wpb-wsb: 2.8rem; }
.wpb-wsb--large { --wpb-wsb: 2.8rem; }

@media (min-width: 992px) {
    .wpb-wst--small { --wpb-wst: 3.2rem; }
    .wpb-wst--medium { --wpb-wst: 4.8rem; }
    .wpb-wst--large { --wpb-wst: 6.4rem; }
    
    .wpb-wsb--small { --wpb-wsb: 3.2rem; }
    .wpb-wsb--medium { --wpb-wsb: 4.8rem; }
    .wpb-wsb--large { --wpb-wsb: 6.4rem; }
}

/*** ---------- Background colors ---------- ***/
.wpb-bg-color--transparent { background-color: transparent; }
.wpb-bg-color--white { background-color: #fff; }
.wpb-bg-color--grey { background-color: #f2f2f2; }
.wpb-bg-color--primary { background-color: rgba(var(--clr-blue-rgb), .05); }
.wpb-bg-color--light { background-color: var(--clr-light); }
.wpb-bg-color--white-8 { background-color: rgba(255,255,255,.08); }
.wpb-bg-color--blue { background-color: var(--clr-blue); --contrast-color: #ffffff;  
    .wpb-text-label i { --color: #ffffff; }
    *:not(.btn) { color: #fff; }
}
.wpb-bg-dark { background-color: var(--clr-dark); }
.wpb-bg-pattern--dark { position: relative; background-color: var(--clr-dark);
    &::after { --src: url('/app/themes/transoplast-core/public/img/background-pattern.svg'); content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: 40rem; mask-size: 40rem; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: left center; background-color: rgba(255,255,255,.15); }
    > * { position: relative; z-index: 1; }
    *:not(.btn) { color: #fff; }
    .wpb-text-label i { --color: #ffffff; }
    .btn.btn--blue { --hover-bg-color: #ffffff; --hover-color: var(--clr-headings);
        .wpb-icon-wrapper--outline { border-color: #ffffff; }
        &:hover .wpb-icon-wrapper--outline { border-color: var(--clr-headings) }
    }
}

/*** ----- Trusted shop ----- ***/
.trusted-shops { color: var(--clr-text); text-decoration: none; display: flex; align-items: center; gap: clamp(.5rem, .6vw, 1rem); 
    .trusted-shops__badge { font-size: 1.4rem; display: flex; align-items: center; white-space: nowrap; padding: .6rem .8rem; border-radius: 6.4rem; background-color: var(--clr-blue); 
        * { --inner: #ffffff; color: var(--inner); }    
        strong { font-size: 1.5rem; margin-right: .2rem; }
        span { display: flex; align-items: end; line-height: 1; font-size: 1.3rem; gap: .15rem; }
        .wpb-icon { --color: var(--inner); --width: 1.5rem; --height: 1.5rem; margin-right: 0.5rem; }
    }
    .trusted-shops__text { font-size: 1.3rem; line-height: 1.1; }
}

/*** ----- Typography ----- ***/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--clr-headings); font-size: var(--fs); line-height: var(--lh); }

h1, .h1 { --fs: var(--fs-h1); --lh: 1.15; }
h2, .h2 { --fs: var(--fs-h2); --lh: 1.15; }
h3, .h3 { --fs: var(--fs-h3); --lh: 1.15; }
h4, .h4 { --fs: 1.8rem; --lh: 2rem; }
h5, .h5 { --fs: 1.6rem; --lh: 1.15; }
h6, .h6 { --fs: 1.4rem; --lh: 1.15; }

[class^="fs-"] { font-size: var(--fs); line-height: var(--lh); }

.wpb-text { --mt: 1em;
    > * + * { margin-top: var(--mt); }
    .woocommerce-breadcrumb + *, .wpb-subcategories-ancestors + * { --mt: 1rem; }

    a:not(.btn) { font: inherit; text-underline-offset: .25rem; }

    blockquote { border-left: 4px solid #f2f2f2; padding-left: 1.6rem; }
    
    ul, ol {
        li {font: inherit; }
    }
}

.wpb-text--white *:not(.btn) { color: #fff; }
.wpb-text--white .wpb-text-label i { --color: #ffffff; }

.wpb-text--blue { color: var(--clr-contrast-blue); }
.wpb-text--blue i { --color: var(--clr-contrast-blue); }

.wpb-text-label { display: flex; align-items: center; font-size: 1.5rem; }
.wpb-text-label i { margin-right: .5rem; --width: 1.2rem; --height: 1.3rem; }
.wpb-text-label + * { margin-top: 1.2rem!important; }

.wpb-text :is(ul:not(.woocommerce-MyAccount-navigation ul), ol) { padding-left: 2rem; }

strong, strong * { font: inherit; font-weight: 700; color: inherit; }
em, em * { color: inherit; }


.text-style--list-as-checks {
    .wpb-text *:has(+ h4 + ul){ padding-bottom: 2.4rem; }
    ul { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; padding-top: .5rem; padding-left: 0!important;
        li { font: inherit; font-weight: 600; font-size: 1.4rem; position: relative; line-height: 1.4; 
            &::before { font-family: "Font Awesome 7 Pro"; --fa: "\f058"; content: var(--fa) / ""; font-weight: 400; margin-right: .4rem; color: var(--clr-primary); }
        }
    }
}

.toggle-bookmark { border: none; background: transparent; cursor: pointer;
    i { color: #fff; 
        &.fa-solid { display: none; }
    }
    &.selected {
        i { 
            &.fa-regular { display: none; }
            &.fa-solid { display: block; }
        }
    }
}

/*** ---------- Reviews ----------  ***/
.wpb-review { border: 1px solid var(--clr-border); border-radius: .6rem; padding: 1.6rem; user-select: none; display: flex; flex-direction: column; justify-content: space-between;
    .wpb-review__customer {
        .info {
            .identifier {font-size: 1.4rem; display: flex; align-items: center;
                i.verified {--color: var(--clr-blue); --width: 1.3rem; --height: 1.3rem; margin-left: .4rem;}
            }
            .date { font-size: 1.2rem; }
        }
    }
    .wpb-review__comment { margin-top: 1.2rem;
        .rating { display: flex; align-items: center; margin-bottom: .6rem; line-height: 1;
            .stars { display: flex; align-items: center; column-gap: .18rem; 
                i { color: #d0b673; font-size: 1.1rem; }
            }
            .score { font-size: 1.3rem; margin-left: 0.65rem; line-height: 1; 
                > span { font-weight: 600; font-size: 1.3rem; line-height: 1; }
            }
        }
        > p {font-size: 1.3rem; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;}
    }
    .wpb-review__footer { line-height: 1; margin-top: 1rem;
        > p {font-size: 1.1rem;}
        > span, > a { font-size: 1.2rem; font-weight: 500; line-height: 1; color: var(--clr-headings); }
    }
}

/*** ---------- 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; }
}

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


/*** ---------- Breadcrumb ---------- ***/
.wpb-breadcrumbs { font-size: 1.2rem; display: inline-flex; color: var(--clr-headings); max-width: 100%;
    span, a { color: inherit; text-decoration: none; font-size: 1.4rem; font-weight: 500; }
    a { color: var(--clr-text); text-decoration: none; }
    span { display: inline-flex; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        > * { margin-right: .8rem; font-weight: 500; }
    }
    i.fa-house, i.fa-chevron-right { color: var(--clr-text); font-size: 1rem; }
    .breadcrumb_last { margin-right: 0; }
}

@media (min-width: 992px) {
    .wpb-breadcrumbs { font-size: 1.4rem;}
}

/*** ---------- WooCommerce breadcrumbs ---------- ***/
.woocommerce-breadcrumb { font-size: 1.2rem; display: inline-flex; column-gap: .6rem; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--clr-headings); max-width: 100%; 
    a { color: var(--clr-text); text-decoration: none; }
    i.fa-house, i.fa-chevron-right { color: var(--clr-text);  font-size: 1rem; }
}

@media (min-width: 992px) {
    .woocommerce-breadcrumb { font-size: 1.3rem;}
}

/*** ---------- Modal ---------- ***/
.modal { --modal-border-radius: 1.2rem; --modal-padding: 1.8rem; --modal-backdrop: rgba(0,0,0,.25); position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; padding: 2.2rem; background-color: var(--modal-backdrop); display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; transition: opacity var(--ts-15) ease; z-index: 1090; }
.modal.show { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 1; pointer-events: all; }
.modal.show .modal-dialog { transform: translateY(0); }
.modal .modal-dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: var(--modal-border-radius); 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.modal--small .modal-dialog { max-width: 60rem; max-height: 60rem; }
.modal.modal__large .modal-dialog { max-width: 1230px; max-height: 75rem; }
.modal.modal__fullscreen { padding: 0; }
.modal.modal__fullscreen .modal-dialog { height: 100%; max-height: 100%; max-width: 100%; border-radius: 0; }
.modal .modal-dialog .modal-dialog__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--modal-padding); background-color: #fff; font-family: inherit; }
.modal .modal-dialog .modal-dialog__header .modal-title { font-size: 2rem; margin: 0; }
.modal .modal-dialog .modal-dialog__header p { margin: 0; font-size: 1.6rem; line-height: 1.6rem; }
.modal .modal-dialog .modal-dialog__body { background-color: #fff; padding:  0 var(--modal-padding) var(--modal-padding) var(--modal-padding); overflow-y: auto; overflow-x: hidden; }
.modal .modal-dialog .modal-dialog__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #E4E9EA; background-color: #fff; padding: var(--modal-padding); z-index: 2; margin-top: auto; }

.modal {padding: 1.6rem; --modal-border-radius: 1.2rem; }
.modal #wux_wc_search_input { padding: 0 1.6rem; height: 4rem; border: 0.1rem solid var(--clr-border); border-radius: 4rem; width: 100%; }
.modal #wux_wc_search_input:focus-visible { outline: none; }
.modal .result-group-wrapper { padding: 0; }
.modal .result-group-wrapper .result { justify-content: start; } 
.modal .empty-state { padding: 3.2rem; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.modal .empty-state img { width: 8rem; margin-bottom: 1.6rem; display: inline-block; }
.modal .empty-state h3 { margin-bottom: .4rem; display: inline-block; }
.modal .empty-state p { display: inline-block; }

/* REGION POP-UP */
.modal--localisation .modal-dialog {max-width: 97rem;}
.modal--localisation .modal-dialog .modal-dialog__body .header {display: flex; justify-content: space-between; padding: 3.2rem 0 2.4rem; align-items: center;}
.modal--localisation .modal-dialog .modal-dialog__body .header p {max-width: 600px; margin-top: 6px;}
.modal--localisation .modal-dialog .modal-dialog__body .languages {display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem;}
.modal--localisation .modal-dialog .modal-dialog__body .languages .language {border: 1px solid var(--clr-border); border-radius: .8rem; padding: 2rem 2.8rem; text-decoration: none; transition: border-color .12s ease;}
.modal--localisation .modal-dialog .modal-dialog__body .languages .language .region {display: flex; align-items: center; column-gap: .6rem; font-size: 1.8rem; font-weight: 700; color: var(--clr-dark);}
.modal--localisation .modal-dialog .modal-dialog__body .languages .language:hover {border-color: var(--clr-dark);}
.modal--localisation .modal-dialog .modal-dialog__body .languages .language .region .region-flag {width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover;}
.modal--localisation .modal-dialog .modal-dialog__body .languages .language .is-current {margin-left: 6px; line-height: 1; background-color: #DEECF6; color: var(--clr-blue); font-size: 1.1rem; font-weight: 600; border-radius: .4rem; padding: .12rem .4rem;}

@media (max-width: 576px) {
    .modal--localisation .modal-dialog .modal-dialog__body .header {padding: 2rem 0 1.6rem;}
    .modal--localisation .modal-dialog .modal-dialog__body .header p {font-size: 1.3rem;}
    .modal--localisation .modal-dialog .modal-dialog__body .header .btn {display: none;}
    .modal--localisation .modal-dialog .modal-dialog__body .languages {gap: .6rem; grid-template-columns: repeat(2, 1fr);}
    .modal--localisation .modal-dialog .modal-dialog__body .languages .language {padding: 1rem 1.6rem; border-radius: .4rem; position: relative;}
    .modal--localisation .modal-dialog .modal-dialog__body .languages .language .region {font-size: 1.4rem;}
    .modal--localisation .modal-dialog .modal-dialog__body .languages .language .is-current {position: absolute; right: 8px; top: 8px;}
}

@media (max-width: 576px) {
    .modal.modal__bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 0; --modal-border-radius: 1.2rem 1.2rem 0 0;}
    .modal.modal__bottom .modal-dialog { padding-bottom: 2.8rem; }
}

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

@media (min-width: 768px) {
    .modal.modal__fullscreen { --modal-padding: 2.2rem; --modal-border-radius: 1.6rem; }
    .modal.modal__fullscreen .modal-dialog { max-width: 74rem; height: auto; max-height: 80vh; border-radius: var(--modal-border-radius); }
}

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

/*** Language popup ***/
.wpb-geolocation-popup { position: fixed; z-index: 9999; transform: translateY(100%); transition: .2s transform ease-in-out; left: 0; right: 0; bottom: 0; background-color: var(--clr-dark); padding: 24px 0; color: #fff; box-shadow: 0 -4px 16px 0 rgba(0,0,0,.35); }
.wpb-geolocation-popup .inner { display: flex; align-items: center; justify-content: space-between; }
.wpb-geolocation-popup .inner .wpb-text * {color: #fff;}
.wpb-geolocation-popup .inner .wpb-text .title {font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600;}
.wpb-geolocation-popup .inner .wpb-text .subtitle span {text-transform: capitalize;}
.wpb-geolocation-popup .inner .wpb-text p {margin-top: 0!important;}
.wpb-geolocation-popup .inner .wpb-text .region {display: flex; align-items: center; gap: 1rem; font-weight: 500;}
.wpb-geolocation-popup .inner .wpb-text .region .region-flag { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; }
.wpb-geolocation-popup.wpb-geolocation-show {transform: translateY(0);}
.wpb-geolocation-popup.wpb-geolocation-hide {transform: translateY(100%);}

@media(max-width: 992px) {
    .wpb-geolocation-popup .inner { flex-direction: column; align-items: flex-start; row-gap: 2rem; }
}
@media(max-width: 576px) {   
    .wpb-geolocation-popup {padding-bottom: 3.6rem; padding-top: 2rem;}
    .wpb-geolocation-popup .inner .btn-group .btn {width: 100%;}
} 


/*** ---------- Tooltips ---------- ***/
.wpb-tooltip { --bg: #ffffff; position: fixed; 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); }
.wpb-tooltip::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 5px 5px 5px; border-color: transparent transparent var(--bg) transparent; bottom: 100%; transform: translateX(-50%); left: 50%; }
.wpb-tooltip.wpb-tooltip__left::after { border-width: 7px 0 7px 7px; border-color: transparent transparent transparent var(--bg); top: 50%; transform: translateY(-50%); left: calc(100% - 1px); }
.wpb-tooltip.wpb-tooltip__right::after { border-width: 7px 7px 7px 0; border-color: transparent var(--bg) transparent transparent; top: 50%; transform: translateY(-50%); right: calc(100% - 1px); left: auto; }
.wpb-tooltip.wpb-tooltip__top::after { border-width:  5px 5px 0 5px; border-color: var(--bg) transparent transparent transparent; top: 100%; transform: translateX(-50%); left: 50%; }
.wpb-tooltip.show { opacity: 1; }

.wpb-tooltip { border: 1px solid var(--clr-border); padding: 1rem; box-shadow: 0 0 0.8rem 0.15rem rgba(0,0,0,.05); }
.wpb-tooltip.wpb-tooltip__top::before { z-index: 2; content: ''; width: 1rem; height: 1rem; position: absolute; bottom: -.5rem; left: 50%; transform: translateX(-50%) rotate(45deg); background-color: #fff }
.wpb-tooltip.wpb-tooltip__top::after { z-index: 1; border-width: 8px 8px 0 8px; border-color: var(--clr-border) transparent transparent transparent; }

.wpb-tooltip strong { display: block; font-size: 1.4rem; line-height: 1.2; color: var(--clr-headings); }
.wpb-tooltip span { display: block; font-size: 1.3rem; line-height: 1.2; color: var(--clr-headings); }


/*** ---------- Dropdowns ---------- ***/
.wpb-dropdown { position: relative;
    button { color: var(--clr-text);
        &[aria-expanded="true"] + .wpb-dropdown__menu { opacity: 1; pointer-events: all; z-index: 850; }  
    }
    
    .wpb-dropdown__menu { opacity: 0; pointer-events: none; min-width: 10rem; position: absolute; top: 100%; left: 0; background-color: #fff; padding: 1.25rem; transition: opacity var(--ts-15) ease;
        &.wpb-dropdown__menu-right { left: auto; right: 0; }
        ul { list-style: none;
            .dropdown-item { white-space: nowrap; display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .5rem; text-decoration: none; }
        }
    }

    &.wpb-dropdown__left {
        button .fa-chevron-down { order: -1; transform: rotate(90deg); }
        .wpb-dropdown__menu { top: 0; right: calc(100% + .5rem); left: auto; } 
    }

    &.wpb-dropdown__right {
        button .fa-chevron-down { order: 9999; transform: rotate(-90deg); }
        .wpb-dropdown__menu { top: 0; left: calc(100% + .5rem); right: auto; } 
    }

    /*** ----- Tax switcher ----- ***/
    &.wpb-dropdown--tax {
        .wpb-dropdown__menu { left: 0; right: 0; 
            button { font-size: 1.4rem; width: 100%; text-align: left; cursor: pointer; border: none; background: transparent; font-weight: 600; }
        }
        &.is-loading {
            > button {
                span { color: transparent; }
                i, .wpb-icon { color: transparent; }
            }

            &::after { content: ''; display: block; position: absolute; z-index: 1; --src: url('/app/themes/transoplast-core/public/icons/default/icon_loading.svg'); --color: #ffffff; --width: 2rem; --height: 2rem; -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(--width); height: var(--height); background-color: var(--color); top: calc(50% - (var(--height) / 2)); left: calc(50% - (var(--width) / 2)); animation: woocommerce_rotate 0.5s linear infinite; }
        }
    }

}


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

/*** ---------- Filters ---------- ***/
.wpb-filters form { --gap: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--gap); }

.wpb-toolbar .inner { display: -ms-grid; display: grid; }

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

/*** ---------- Pagination ---------- ***/
.wpb-pagination {  text-align: center; --padding: 0; --color: var(--clr-text); --bg-color: #ffffff; --border: 1px solid var(--clr-border); --border-radius: .6rem; --hover-color: var(--clr-text); --hover-bg-color: var(--bg-color); --hover-border: 1px solid rgba(var(--clr-dark-rgb), .4); --active-color: var(--clr-blue); --active-bg-color: var(--hover-bg-color); --active-border: var(--hover-border); position: relative; }
.wpb-pagination .has-prev-next { padding-left: 4rem; padding-right: 4rem; } 
.wpb-pagination ul { position: relative;  --gap: .5rem; list-style: none!important; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--gap); padding-top: 3.2rem; }
.wpb-pagination li > * { width: 3.8rem; height: 3.8rem; display: inline-grid; place-items: center; font-weight: 600; font-size: 1.6rem; line-height: 1.6; color: #000; color: inherit; padding: var(--padding); color: var(--color); background-color: var(--bg-color); border-radius: var(--border-radius); border: var(--border); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition: color var(--ts-15) ease, background-color var(--ts-15) ease, border-color var(--ts-15) ease;}
.wpb-pagination li > * .wpb-icon { --width: 1.5rem; --height: 1.5rem; pointer-events: none; }
.wpb-pagination li > *:hover .wpb-icon { --color: var(--hover-color) }
.wpb-pagination li:is(:hover, :focus, :active) > * { color: var(--hover-color); background-color: var(--hover-bg-color); border: var(--hover-border); }
.wpb-pagination li > *.current { color: var(--active-color); background-color: var(--active-bg-color); border: var(--active-border); }
.wpb-pagination li:has(.is-dots){ pointer-events: none; }
.wpb-pagination li .page-number__prev { position: absolute; left: 0; }
.wpb-pagination li .page-number__next { position: absolute; right: 0; }

@media (min-width: 992px) {
    .wpb-pagination li > * { font-size: 1.8rem; }
}

@media (min-width: 1200px) {
    .wpb-pagination li > * { font-size: 2rem; }
    .wpb-pagination li > * { width: 4.5rem; height: 4.5rem; }

    .wpb-pagination .has-prev-next { padding-left: 8rem; padding-right: 8rem; } 
}

/*** ---------- Inner class ---------- ***/
:is(.wpb-block, .content-section) .inner.inner--2col{ --gap: 2.4rem; --gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }

@media (min-width: 992px) {
    :is(.wpb-block, .content-section) .inner.inner--2col{ --gap: 4.8rem; --gc: 2; }
}
@media(min-width: 1200px){
    :is(.wpb-block, .content-section) .inner.inner--2col{ --gap: 8rem; }
}

/*** ---------- Archive ---------- ***/
.wpb-archive { --gc: 1; --gap: 2.2rem; }
.wpb-archive .inner { display: -ms-grid; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); -ms-grid-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }

@media (min-width: 768px) {
    .wpb-archive { --gc: 2; }
}

@media (min-width: 992px) {
    .wpb-archive { --gc: 3; }
}

/*** ---------- Single ---------- ***/
.content-section__related { --gc: 1; --gap: 3.2rem; }
.content-section__related .wpb-text { margin-bottom: 3.2rem; }
.content-section__related .inner { display: -ms-grid; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); -ms-grid-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }

@media (min-width: 992px) {
    .content-section__related { --gc: 3; }  
}
.social-share-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: .25rem; }

/*** ----- Aspect ratio's ----- ***/
[data-ratio="none"] img { width: auto; max-width: 100%; }
[data-ratio="1/1"] img { aspect-ratio: 1/1; object-fit: cover; }
[data-ratio="4/3"] img { aspect-ratio: 4/3; object-fit: cover; }
[data-ratio="16/9"] img { aspect-ratio: 16/9; object-fit: cover; }

.wpb-image img, .wpb-youtube .wpb-ratio {
    iframe, img { border-radius: var(--radius, .8rem); }
}

/*** ---------- Aspect ratio ---------- ***/
.wpb-ratio { --wpb-aspect-ratio: 100%; position: relative; width: 100%; }
.wpb-ratio::before { display: block; padding-top: var(--wpb-aspect-ratio); content: ""; }
.wpb-ratio.wpb-ratio--21x9 { --wpb-aspect-ratio: 42.8571428571%; }
.wpb-ratio.wpb-ratio--16x9 { --wpb-aspect-ratio: 56.25%; }
.wpb-ratio.wpb-ratio--1x1 { --wpb-aspect-ratio: 100%; }
.wpb-ratio.wpb-ratio--4x3 { --wpb-aspect-ratio: 75%; }
.wpb-ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wpb-ratio > img { object-fit: cover; } 

/*** ---------- Alerts ---------- ***/
.wpb-alert::before { content: ''; --src: url('/app/themes/transoplast-core/public/icons/circle-info.svg'); z-index: 2; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); left: 1.5em; --color: #ffffff; --width: 2rem; --height: 2rem; -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(--width); height: var(--height); background-color: var(--color); }
.wpb-alert.wpb-alert--info { --color: #ffffff; --bg: var(--clr-blue); }
.wpb-alert.wpb-alert--info-light { --color: var(--clr-blue); --bg: var(--clr-light-blue); }
.wpb-alert.wpb-alert--warning { --color: #ffffff; --bg: var(--clr-orange); }
.wpb-alert.wpb-alert--danger { --color: #ffffff; --bg: var(--clr-red); }
.wpb-alert.wpb-alert--success { --color: #ffffff; --bg: var(--clr-green); }
.wpb-alert.wpb-alert--white { --color: var(--clr-headings); --bg: #ffffff; }

.wpb-alert--bookmark::before { --src: url('/app/themes/transoplast-core/public/icons/bookmark-regular.svg'); --width: 1.6rem; --height: 1.6rem; }
.wpb-alert--bookmark::after { content: ''; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); left: 1em; width: 3.2rem; height: 3.2rem; display: inline-block; background-color: var(--clr-blue); border-radius: 50%; }

.wpb-alert .wpb-alert__text { display: flex; flex-direction: column; font-size: 1.6rem; line-height: 1.2; }

.wpb-alert { position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; align-items: center; --color: #ffffff; --bg: var(--clr-primary); --border-radius: .8rem; padding: .5em 2em .5em 3.5em; min-height: 5.6rem; color: var(--color); background-color: var(--bg); border-radius: var(--border-radius); }
.wpb-alert.wpb-alert-icon { display: -ms-grid; display: grid; grid-template-columns: 2.8rem 1fr; -ms-grid-columns: 2.8rem 1fr; gap: 1.6rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.wpb-alert.wpb-alert-icon .wpb-icon-wrapper { width: 2.8rem; height: 2.8rem; }
.wpb-alert .wpb-alert--content { line-height: 1.2; }
.wpb-alert .wpb-alert--content strong { font-size: 1.6rem; display: block; }
.wpb-alert .wpb-alert--content small { font-size: 1.4rem; }
.wpb-alert *:not(.btn) { color: inherit; }
.wpb-alert > .wpb-icon-wrapper { width: 3.3rem; height: 3.3rem; position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); }
.wpb-alert .btn { font-size: 1.4rem; }
.wpb-alert p {font-size: 1.3rem;}


/*** ---------- Icons ---------- ***/
.wpb-icon-wrapper { display: inline-grid; place-items: center; transition: background-color var(--ts-15) ease, border-color var(--ts-15) ease; --w: 1.7rem; --h: 1.7rem; width: var(--w); min-width: var(--w); height: var(--h); min-height: var(--h); border-radius: 50%; line-height: 1; 
    .wpb-icon { --width: 1rem; --height: 1rem; }
    .fa-regular { font-size: .6em; }
    
    &.wpb-icon-wrapper--outline { border: 1px solid var(--clr-border); }
    &.wpb-icon-wrapper--blue { background-color: var(--clr-blue);
        i { color: #ffffff; font-size: 1.2rem; }
    }

    /* Sizes */
    &.wpb-icon-wrapper--23 { --w: 2.3rem; --h: 2.3rem; }
    &.wpb-icon-wrapper--27 { --w: 2.7rem; --h: 2.7rem; }
    &.wpb-icon-wrapper--30 { --w: 3rem; --h: 3rem; }
}


.wpb-icon { --src: ; --icon-color: var(--color, #000); --width: 2rem; --height: 2rem; -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(--width); min-width: var(--width); height: var(--height); background-color: var(--color); transition: background-color var(--ts-15) ease; 
    
    /* Sizes */
    &.wpb-icon--small { --width: 1.5rem; --height: 1.5rem; }
    &.wpb-icon--large { --width: 2.5rem; --height: 2.5rem; }
    &.wpb-icon-13 { --width: 1.3rem; --height: 1.3rem; }
    &.wpb-icon-15 { --width: 1.5rem; --height: 1.5rem; }
    &.wpb-icon-18 { --width: 1.8rem; --height: 1.8rem; }

}

.wpb-icon.wpb-icon--5stars { --src: url('/app/themes/transoplast-core/public/icons/5stars.svg'); --width: 5.2rem; --height: .9rem; }
.wpb-icon.wpb-icon--custom-cart-full { --src: url('/app/themes/transoplast-core/public/icons/icon_cart_full.svg'); }
.wpb-icon.wpb-icon--custom-add-cart { --src: url('/app/themes/transoplast-core/public/icons/icon_add_cart.svg'); }
.wpb-icon.wpb-icon--favicon-outline { --src: url('/app/themes/transoplast-core/public/icons/favicon.svg'); --width: 60rem; --height: calc(var(--width) * 1.2); --color: var(--clr-border); }
.wpb-icon.wpb-icon--polygon { --src: url('/app/themes/transoplast-core/public/icons/icon_polygon.svg'); --color: var(--clr-dark); }
.wpb-icon.wpb-icon--favicon { --src: url('/app/themes/transoplast-core/public/icons/icon_favicon.svg'); --color: var(--clr-dark); }
.wpb-icon.wpb-icon--trusted-shops { --src: url('/app/themes/transoplast-core/public/img/logo_trusted_shops.svg'); --color: #ffffff; --width: 1.5rem; --height: 1.5rem; }
.wpb-icon.wpb-icon--trademark { --src: url('/app/themes/transoplast-core/public/icons/trademark.svg'); --color: var(--clr-dark);}
.wpb-icon.wpb-icon--draagvermogen-1 { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-1.svg'); --color: #ffffff; --width: 4.5rem; --height: 3.2rem; }
.wpb-icon.wpb-icon--draagvermogen-2 { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-2.svg'); --color: #ffffff; --width: 4.5rem; --height: 3.2rem; }
.wpb-icon.wpb-icon--draagvermogen-3 { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-3.svg'); --color: #ffffff; --width: 4.5rem; --height: 3.2rem; }
.wpb-icon.wpb-icon--draagvermogen-4 { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-4.svg'); --color: #ffffff; --width: 4.5rem; --height: 3.2rem; }
.wpb-icon.wpb-icon--draagvermogen-5 { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-5.svg'); --color: #ffffff; --width: 4.5rem; --height: 3.2rem; }
.wpb-icon.wpb-icon--voedselgeschiktheid { --src: url('/app/themes/transoplast-core/public/icons/voedselgeschiktheid.svg'); --color: #ffffff; --width: 2.9rem; --height: 2.9rem; }
.wpb-icon.wpb-icon--esd { --src: url('/app/themes/transoplast-core/public/icons/esd.svg'); --color: #ffffff; --width: 2.9rem; --height: 2.9rem; }


.wpb-color-variations__icon { position: relative; min-width: 2.2rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; margin: .4rem; box-shadow: 0 0 0 .2rem #fff, 0 0 0 .4rem #D9D9D9; background: conic-gradient(#d4145a 0deg 45deg, #f16900 45deg 90deg, #f8df00 90deg 135deg, #96c11f 135deg 180deg, #0094d9 180deg 225deg, #5929a6 225deg 270deg, #a7348e 270deg 315deg, #d4145a 315deg 360deg );
    &::before { content: ''; display: block; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
}

.mini-title { position: relative; font-size: 1.4rem;
    .mark { position: relative; z-index: 1; padding-right: 1rem; }
    &::after { content: ''; width: 100%; height: 0; border-top: .1rem solid var(--clr-border); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
    &.mark--light {  background-color: var(--clr-light); }
} 

.wpb-backdrop { background-color: rgba(0,0,0,.5); } 

/*** ----- Form: Newsletter ----- ***/
.newsletter {
    .wpb-alert { margin-top: 1rem; font-size: 1.4rem; padding: 1rem; padding-left: 3rem; min-height: unset;
        &::before { left: 1rem; --width: 1.4rem; --height: 1.4rem; }
        &.wpb-alert--error {background-color: var(--clr-dark);}
    }
    .form-group { position: relative; }
    [type="email"] { --border-radius: .5rem!important; --border: 1px solid rgba(255,255,255,.25)!important; --focus-border: 1px solid rgba(255,255,255,.25)!important; font-size: 1.4rem; color: #fff; background-color: transparent; padding-right: 4.5rem!important; padding-left: 2rem!important; min-height: 4.5rem!important; 
        &::placeholder { color: #fff; font-size: 1.4rem; }
        &:focus { border-color: rgba(255,255,255,.75); }
    }
    button { cursor: pointer; border: none; display: inline-grid; place-items: center; position: absolute; top: .5rem; right: .5rem; width: 3.5rem; height: 3.5rem; min-height: 3.5rem; padding: 0; border-radius: .4rem; background-color: var(--clr-blue);
        i { color: #ffffff; font-size: 1.3rem; }
    }

    &.newsletter--dark {
        [type="email"] { border: 1px solid rgba(0,0,0,.25)!important; color: var(--clr-text);
            &:focus { border-color: rgba(0,0,0,.75); }
            &::placeholder { color: var(--clr-text); }
        }
    }
}


/*** ----- Info ----- ***/
.wpb-info { font-size: 1.4rem; }
.wpb-info .wpb-icon-wrapper { margin-right: .6rem; }

/*** ----- USP's ----- ***/
.wpb-usps { font-size: 1.4rem; line-height: 1.15; --color: var(--clr-text); --color-icon: var(--clr-blue); list-style: none; display: flex; color: var(--color); scroll-snap-type: x mandatory; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
    * { color: var(--color); }
    li { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: .5rem; align-items: center; scroll-snap-align: start;
        i { font-size: 1.3rem; color: var(--color-icon); }
        + li { margin-left: 1.8rem; }
    }

    &.wpb-usps--dark {
        * { color: var(--clr-headings); }
        li i { color: var(--clr-blue); }
    }
}


.wpb-usps.wpb-usps__extended li { grid-template-columns: 2.4rem 1fr; column-gap: 1rem; }
.wpb-usps.wpb-usps__extended li .wpb-icon-wrapper { width: 2.4rem; height: 2.4rem; }
.wpb-usps.wpb-usps__extended li .wpb-icon { --color: #ffffff; --width: 1.4rem; --height: 1.4rem; }

[data-count]::after { --size: 1.6rem; content: attr(data-count); display: inline-grid; place-items: center; background-color: var(--clr-blue); color: #fff; font-weight: 600; margin-left: auto; width: var(--size); height: var(--size); font-size: 1rem; line-height: 1rem; border-radius: 50%; }
[data-count="0"]::after { background-color: var(--clr-border); color: var(--clr-text); }

[data-beeldmerk] { position: relative; }
[data-beeldmerk]::after { content: ''; position: absolute; width: 5.5rem; height: 6.5rem; background: url('/app/themes/transoplast-core/public/img/beeldmerk-transoplast-bg-wit.svg') no-repeat center/contain; }

@media (min-width: 992px) {
    [data-beeldmerk]::after { width: 9.5rem; height: 10rem; }
}

/*** ---------- Social media ---------- ***/
.wpb-social-media { display: flex; flex-wrap: wrap; column-gap: .5rem; row-gap: .5rem; 
    a { --size: 3.2rem; background-color: transparent; text-decoration: none; display: inline-flex; width: var(--size); height: var(--size); border-radius: 50%; display: inline-grid; place-items: center; color: #ffffff; font-size: 1.4rem; border: .1rem solid rgba(255,255,255,.35); transition-property: color, background-color, border-color; transition-duration: var(--ts-15); transition-timing-function: ease; 
        &:hover { background-color: #ffffff; border-color: #ffffff; color: var(--clr-dark) }
    }
}

/*** ---------- Sticky contact ---------- ***/
.wpb-sticky-contact { cursor: pointer; z-index: 400; right: 18px; bottom: 18px; position: fixed; }
.wpb-sticky-contact h4 { writing-mode: vertical-rl; text-orientation: mixed; } 
.wpb-sticky-contact p { display: none;}
.wpb-sticky-contact .btn { display: none; column-gap: .8rem; margin-top: 1rem; }   
.wpb-sticky-contact .desktop {display: none;}

.wpb-sticky-contact .mobile {background-color: var(--clr-blue); border-radius: 32px; padding-inline: 1.4rem; column-gap: 6px; display: flex; align-items: center; justify-content: center; height: 4rem;}
.wpb-sticky-contact .mobile .wpb-icon {--color: #ffffff; width: 1.7rem; height: 1.7rem;}
.wpb-sticky-contact .mobile h4 {color: #fff; writing-mode: unset; text-orientation: unset; font-size: 1.4rem;}

@media (min-width: 768px) {
    .wpb-sticky-contact .desktop {display: block;}
    .wpb-sticky-contact .mobile {display: none!important;}
    .wpb-sticky-contact { background-color: #fff; right: 0; bottom: 25%; padding: 2rem; max-width: 23.4rem; border-radius: .8rem 0 0 .8rem; box-shadow: 0 0 2rem 0 rgba(0,0,0,0.05); }
}
@media (min-width: 1625px) {
    .wpb-sticky-contact { width: 100%; bottom: auto; top: 24rem; position: absolute; }
    .wpb-sticky-contact h4 { writing-mode: horizontal-tb;  } 
    .wpb-sticky-contact p { display: inherit; }
    .wpb-sticky-contact .btn { display: flex }
}

/* Contact links */
.contact-link { display: grid; grid-template-columns: 3.2rem 1fr 1.7rem; align-items: center; text-decoration: none; }
.contact-link .wpb-icon-wrapper:nth-of-type(1) { --w: 3.2rem; --h: 3.2rem; }
.contact-link .contact-link__text { padding-left: 1rem; padding-right: 1rem; }
.contact-link strong { display: block; color: var(--clr-headings); line-height: 1.2; }
.contact-link.contact-link__openingstijden span { font-size: 1.4rem; line-height: 1.2; }
@media (min-width: 992px) {
    .contact-link strong { font-size: 2rem; }
}

/*** ---------- Single news ---------- ***/
.content-section.content-section__text .btn-group { margin-top: 1em; }
.content-section.content-section__text .wpb-text + .inner {margin-top: .8rem;}

.content-section .wpb-gc__2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }

.content-section.content-section__youtube figure { position: relative; overflow: hidden; border-radius: 1.2rem; }
.content-section.content-section__youtube figure a { width: 100%; text-decoration: none; font-weight: 500; color: #fff; position: absolute; bottom: 0; left: 0; padding: 2rem; display: flex; align-items: center; column-gap: .9rem; background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); }
.content-section.content-section__youtube figure a .wpb-icon { --color: #ffffff; }

.content-section.content-section__featured_product_categories { container: productCategories / inline-size; }
.content-section.content-section__featured_product_categories .wpb-text { margin-bottom: 3.2rem; }
.content-section.content-section__featured_product_categories .categories { --gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 1.6rem; }
.content-section.content-section__featured_product_categories.is-secondary .categories { gap: 1.4rem; }
.content-section.content-section__featured_product_categories .wpb-card.wpb-card--category h3 { font-size: 1.8rem; }

.content-section.content-section__faq .wpb-accordion .accordion__button { font-size: clamp(1.8rem, 4vw, 2.1rem); }
.content-section.content-section__faq .container .wpb-ratio {  --wpb-aspect-ratio: 62%; }
.content-section.content-section__faq .container .wpb-ratio img { object-fit: cover; overflow: clip; border-radius: 1.2rem;  }
.content-section.wpb-block--text-media figure img { border-radius: 1.2rem; overflow: clip; object-fit: cover; }

.content-section.content-section__images .content-section__body .container { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
.content-section.content-section__images .content-section__footer { font-size: clamp(1.4rem, 4vw, 1.6rem); font-weight: 600; border-bottom: 1px solid var(--clr-border); padding-block: 2rem; }

.content-section.content-section__text-media .content-section__body .container { display: grid; grid-template-columns: minmax(0,1fr); gap: 2.4rem; }
.content-section.content-section__text-media[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) figure img { border-top-left-radius: 0; border-top-right-radius: 0; }
.content-section.content-section__text-media[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) .container { gap: 0; }
.content-section.content-section__text-media[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) .wpb-text { padding: 1.6rem; }

@media(min-width: 992px) {
    .content-section.content-section__images .content-section__body .container { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; }
    .content-section.content-section__images .content-section__footer { padding-block: 2.4rem; }
    
    .content-section.content-section__text-media .content-section__body .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.8rem; }
    .content-section.content-section__text-media .content-section__body figure { position: relative; width: 100%; height: 100%; }
    .content-section.content-section__text-media .content-section__body figure img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    
    .content-section.content-section__text-media[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) .wpb-text { padding: 2.4rem; }    
    .content-section.content-section__text-media[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) figure.order-md-0 img { border-radius: .8rem 0 0 .8rem; }
    .content-section.content-section__text-media[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) figure.order-md-1 img { border-radius: 0 .8rem .8rem 0; }
    .content-section.content-section__text-media.wpb-bg-color--transparent .wpb-text { padding-block: 2rem; }
}
@media(min-width: 1200px) {
    .content-section.content-section__text-media .content-section__body .container { gap: 8rem; }
}

@container productCategories (width > 400px) {
    .content-section.content-section__featured_product_categories .categories { --gc: 2; }
    .content-section.content-section__featured_product_categories.is-secondary .categories { --gc: 3; }
}
@container productCategories (width > 900px) {
    .content-section.content-section__featured_product_categories .categories { --gc: 3; }
    .content-section.content-section__featured_product_categories.is-secondary .categories { --gc: 4; }
}
@container productCategories (width > 1200px) {
    .content-section.content-section__featured_product_categories .categories { --gc: 4; }
    .content-section.content-section__featured_product_categories.is-secondary .categories { --gc: 5; }
}

.content-section.content-section__text img {border-radius: 1.2rem;}

.content-section.content-section__quote .wpb-text { font-size: clamp(1.4rem, 4vw, 1.6rem); line-height: 1.4; color: var(--clr-headings); font-weight: 500; border-left: .4rem solid var(--clr-blue); padding-left: 2rem; }
.content-section.content-section__quote .wpb-text * { color: var(--clr-headings); }
.content-section.content-section__quote .wpb-text .name { font-size: 1.6rem; }

@media (min-width: 768px) { 
    .content-section .wpb-gc__2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .wpb-single__content .popular-news .wpb-card + .wpb-card { padding-top: 2.8rem; }  
}
@media (min-width: 1200px) {
    .content-section.content-section__cta .inner { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: 4.8rem;}
    .content-section__faq .has-image { grid-template-columns: 3fr 2fr; }
}

/* Single content - CTA */
.content-section.content-section__cta .inner{ --p: 1.8rem 1.4rem; --image-width: 10rem; background-color: var(--clr-light); border-radius: .8rem; display: grid; }
.content-section.content-section__cta .inner .wpb-text{ display: flex; flex-direction: column; padding: var(--p); z-index: 1; }
.content-section.content-section__cta .inner .wpb-text h3{ font-size: 1.6rem; display: flex; gap: .8rem; }
.content-section.content-section__cta .inner .wpb-text h3::before{ content: ''; display: block; margin-top: .15em; width: 1.5rem; height: 1.6rem; background: url('/app/themes/transoplast-core/public/img/favicon-grey.svg') no-repeat center/contain; }
.content-section.content-section__cta .inner .wpb-text p{ font-size: clamp(1.3rem, 1.4vw, 1.5rem); }
.content-section.content-section__cta .inner .wpb-text > *:has(+ .btn-group){ padding-bottom: 1em; }
.content-section.content-section__cta .inner .wpb-text .btn-group{ width: fit-content; margin-top: auto !important; }
.content-section.content-section__cta .inner figure:has(img){ display: flex; align-items: end; padding-right: 1.4rem; }

@media(max-width: 440px){
    .content-section.content-section__cta .inner figure:has(img){ width: var(--image-width); height: auto; position: absolute; right: .5rem; bottom: 0; pointer-events: none; }
}
@media(min-width: 440px){
    .content-section.content-section__cta .inner{ grid-template-columns: 1fr var(--image-width); }
}
@media(min-width: 768px){
    .content-section.content-section__cta .inner{ --p: 2.4rem; --image-width: 18rem; }
    .content-section.content-section__cta .inner figure:has(img){ height: calc(100% + 2rem); margin-top: -2rem; }
    .content-section.content-section__cta .inner .wpb-text .btn{ min-height: 5rem; }
}
@media(min-width: 1200px){
    .content-section.content-section__cta .inner{ --p: 2.8rem 3.2rem; --image-width: 24rem; }
}

/** Site notice **/
.site-notice {
    &.is--static-top {background-color: var(--clr-blue); color: #fff; padding: .8rem 0 .5rem; 
        p.h3 {font-size: clamp(1.5rem, 3vw, 1.6rem); margin-bottom: .4rem; color: #fff; font-weight: 700; }
        p {font-size: clamp(1.3rem, 2vw, 1.4rem); color: #fff;}
    }
    &.is--fixed-overlay { display: none; position: fixed; z-index: 100; left: 1.8rem; right: 1.8rem; bottom: 2.8rem; background-color: #fff; max-width: 72rem; border-radius: 1rem; padding: 1.8rem; box-shadow: 0 1rem 3rem 0 rgba(0,0,0,.12);
        .site-notice__body { display: flex; align-items: center; flex-direction: column; column-gap: 3.2rem;}
        p.h3 {font-size: clamp(1.5rem, 3vw, 1.6rem); margin-bottom: 6px; font-weight: 700; }
        p {font-size: clamp(1.3rem, 2vw, 1.4rem); }
        .btn {width: 100%; margin-top: 12px;}
        &.is-visible {display: block;}
    }
}
@media (min-width: 768px) {
    .site-notice {
        &.is--fixed-overlay { left: 3.2rem; bottom: 3.2rem; 
            .site-notice__body {flex-direction: row; justify-content: space-between;}
            .btn {width: unset; margin-top: unset;}
        }
    }
}

.otgs-development-site-front-end { display: none; }


/*** ---------- Blaze Slider ---------- ***/
.blaze-slider {--slides-to-show:5; --slide-gap:8px; direction:ltr}
.blaze-container {position:relative}
.blaze-track-container {overflow:hidden}
.blaze-track {will-change:transform; touch-action:pan-y; display:flex!important; gap:var(--slide-gap)!important; --slide-width: calc( (100% - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show)); box-sizing:border-box;}
.blaze-track > * {box-sizing:border-box; width:var(--slide-width)!important; flex-shrink:0}
.blaze-slider .blaze-nav-btn { --size: 3.6rem; --icon-size: 1.2rem; --bg-color: #FFFF; --inner-color: var(--clr-dark); --br: 50%; cursor: pointer; transition: opacity .12s ease; width: var(--size); height: var(--size); background-color: var(--bg-color); border-radius: var(--br); border: none; outline: none; display: flex; align-items: center; justify-content: center; position: absolute; --offset:calc(100% + 20px); transform: translateY(-50%); top: 50%; transition: opacity var(--ts-15) ease;}
.blaze-slider .blaze-nav-btn .wpb-icon { --width: var(--icon-size); --height: var(--icon-size); background-color: var(--inner-color);}
.blaze-slider .blaze-nav-btn:hover {opacity: .65;}
.blaze-slider .blaze-nav-btn.blaze-prev {right: var(--offset);}
.blaze-slider .blaze-nav-btn.blaze-next {left: var(--offset);}
.blaze-slider.start .blaze-nav-btn.blaze-prev {opacity: 0; pointer-events: none;}
.blaze-slider.end .blaze-nav-btn.blaze-next {opacity: 0; pointer-events: none;}
.blaze-slider.static .blaze-nav-btn {display: none;}
@media (max-width: 768px) {
    .blaze-slider .blaze-nav-btn {display: none;}
}

/* REGION SWITCHER */
.global-region-switcher { display: flex; align-items: center; gap: .4rem; cursor: pointer;
    * { color: #fff;text-transform: uppercase; font-size: 1.4rem; line-height: 1; }
    i { font-size: 1.4rem; }
    .current-language { font-weight: 600; }

    @media (max-width: 768px) {
        padding: 0 1.6rem;
        * {font-size: 1.3rem;}
    }
}

#CybotCookiebotDialog {font-size: 14px!important;}

.wp-block-woocommerce-coming-soon {text-align: center; padding: 0 18px;}
.grecaptcha-badge {display: none!important;}
.o-livechat-root {z-index: 9998!important;}

/*** ---------- Quantity selector ---------- ***/
.wpb-quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--clr-border); border-radius: .6rem; overflow: hidden; }
.wpb-quantity .wpb-quantity-btn { border: none; background-color: transparent; display: flex; align-items: center; cursor: pointer; padding: 0 .5rem; width: 2.8rem; }  
.wpb-quantity .wpb-quantity-btn .wpb-icon { --width: 1rem; --height: 1rem; }
.wpb-quantity .wpb-quantity-btn.minus { justify-content: end; }
.wpb-quantity .wpb-quantity-btn.plus { justify-content: start; }
.wpb-quantity input::-webkit-outer-spin-button,
.wpb-quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wpb-quantity input { color: var(--clr-headings); text-align: center; padding: 0!important; -moz-appearance: textfield; border: none!important; font-weight: 700; width: 3rem!important; height: 5rem; font-size: 1.6rem; background-color: transparent; }
.wpb-quantity input:focus { outline: none!important; border: none!important; }

.prd-sku {font-size: 1.1rem; font-weight: 600; line-height: 1; padding: 2px 3px; background-color: var(--clr-light); border-radius: .3rem; display: inline-block;}
.prd-stock { display: inline-block;  width: .8rem; height: .8rem; border-radius: 50%; margin-right: .4rem; }
.prd-stock.in-stock { background-color: var(--clr-green); }
.prd-stock.out-of-stock { background-color: var(--clr-red); }

@media (min-width: 768px) {
    .prd-sku { font-size: 1.2rem; }
}