/*** ---------- Wux 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; opacity: 0; transition: opacity var(--ts-25) ease; 
    .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); }
    
    &.wpb-offcanvas--left { left: 0; right: auto; }
    &.is-active { opacity: 1; pointer-events: all; }

    &.wpb-offcanvas--contact { background-color: transparent;
        p { margin-bottom: 3.2rem; }
        
        .wpb-offcanvas__header { background-color: #fff; border-radius: 0; display: flex; align-items: center; justify-content: space-between; padding: 2rem 1.6rem; border-bottom: 1px solid var(--clr-border); }
        .wpb-offcanvas__body { flex-grow: 1; background-color: #fff; padding: 2rem 1.6rem; }
        .wpb-offcanvas__footer { background-color: #fff; padding: 0 0 0 2rem; 
            figure img { border-radius: 1.6rem 0 0 0; max-height: 20rem; object-fit: contain; object-position: top;}
        }
        .contact-link { border-radius: .8rem; padding: 1.6rem; border: .1rem solid var(--clr-border); transition: var(--ts-15) ease;
            .wpb-icon-wrapper--outline { border-color: var(--clr-border-dark); }
            + .contact-link { margin-top: 1rem; }
            &:hover { background-color: rgba(var(--clr-blue-rgb), .15); border-color: rgba(var(--clr-blue-rgb), 0); }
        }
    }

    &.wpb-offcanvas--filters { 
        .wpb-offcanvas__footer { border-top: 1px solid var(--clr-border);
            .btn { justify-content: center; }
        }
    }

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

    @media (min-width: 1400px) {
        &.wpb-offcanvas--contact {
            .wpb-offcanvas__header { padding: 3.2rem; }
            .wpb-offcanvas__body { padding: 3.2rem; }
            .wpb-offcanvas__footer { padding: 0 0 0 3.2rem; }

            .contact-link { padding: 2rem; }
        }
    }
}