.d4ca-offcanvas{--d4ca-speed:400ms;--d4ca-scrollbar-size:8px;--d4ca-scrollbar-thumb:#999;--d4ca-scrollbar-track:transparent}.d4ca-offcanvas__toggle,.d4ca-menu-trigger,.d4ca-offcanvas__close{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:inherit}.d4ca-offcanvas__toggle.is-full{width:100%}.d4ca-toggle-close-icon,.d4ca-trigger-close-icon{display:none}.d4ca-offcanvas__toggle.is-active .d4ca-toggle-open-icon,.d4ca-menu-trigger.is-active .d4ca-trigger-open-icon{display:none}.d4ca-offcanvas__toggle.is-active .d4ca-toggle-close-icon,.d4ca-menu-trigger.is-active .d4ca-trigger-close-icon{display:inline-flex}.d4ca-offcanvas__portal{position:fixed;inset:0;height:100vh;height:100dvh;z-index:999999;pointer-events:none;visibility:hidden;transition:visibility 0s linear var(--d4ca-speed)}.d4ca-offcanvas.is-open .d4ca-offcanvas__portal{pointer-events:auto;visibility:visible;transition:visibility 0s linear 0s}.d4ca-offcanvas.is-closing .d4ca-offcanvas__portal{pointer-events:none;visibility:visible}.d4ca-offcanvas__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity var(--d4ca-speed) ease}.d4ca-offcanvas.is-open .d4ca-offcanvas__overlay{opacity:1}.d4ca-offcanvas__panel{--d4ca-panel-width:40%;--d4ca-panel-height:100%;position:absolute;background:#fff;max-width:100vw;max-height:100vh;max-height:100dvh;overflow:auto;transition:transform var(--d4ca-speed) cubic-bezier(.22,.61,.36,1),opacity var(--d4ca-speed) ease;scrollbar-color:var(--d4ca-scrollbar-thumb) var(--d4ca-scrollbar-track);scrollbar-width:auto}.d4ca-offcanvas__panel::-webkit-scrollbar{width:var(--d4ca-scrollbar-size);height:var(--d4ca-scrollbar-size)}.d4ca-offcanvas__panel::-webkit-scrollbar-thumb{background:var(--d4ca-scrollbar-thumb)}.d4ca-offcanvas__panel::-webkit-scrollbar-track{background:var(--d4ca-scrollbar-track)}.d4ca-hide-scrollbar .d4ca-offcanvas__panel{scrollbar-width:none}.d4ca-hide-scrollbar .d4ca-offcanvas__panel::-webkit-scrollbar{display:none}.d4ca-dir-right .d4ca-offcanvas__panel{right:0;top:0;width:var(--d4ca-panel-width);height:var(--d4ca-panel-height);transform:translate3d(100%,0,0)}.d4ca-dir-left .d4ca-offcanvas__panel{left:0;top:0;width:var(--d4ca-panel-width);height:var(--d4ca-panel-height);transform:translate3d(-100%,0,0)}.d4ca-dir-top .d4ca-offcanvas__panel{left:0;top:0;width:100%;height:var(--d4ca-panel-height);transform:translate3d(0,-100%,0)}.d4ca-dir-bottom .d4ca-offcanvas__panel{left:0;bottom:0;width:100%;height:var(--d4ca-panel-height);transform:translate3d(0,100%,0)}.d4ca-type-fade .d4ca-offcanvas__panel{left:50%;top:50%;width:var(--d4ca-panel-width);height:auto;max-height:var(--d4ca-panel-height);transform:translate(-50%,-48%) scale(.97);opacity:0}.d4ca-offcanvas.is-open .d4ca-offcanvas__panel{transform:translate3d(0,0,0)}.d4ca-type-fade.is-open .d4ca-offcanvas__panel{transform:translate(-50%,-50%) scale(1);opacity:1}.d4ca-offcanvas__close-wrap{display:flex;padding:16px 16px 0}.d4ca-offcanvas__close-wrap.d4ca-close-custom-pos{position:absolute;padding:0;z-index:5}.d4ca-offcanvas__close{line-height:1;--d4ca-trigger-size:1em;--d4ca-line:0.08em}.d4ca-offcanvas__close .d4ca-hamburger{vertical-align:middle}.d4ca-offcanvas__content{padding:20px}.d4ca-basic-menu{list-style:none;margin:0;padding:0}.d4ca-basic-menu ul{list-style:none}.d4ca-body-locked{overflow:hidden!important}.d4ca-menu-trigger{--d4ca-trigger-size:28px;--d4ca-line:2px;gap:8px}.d4ca-hamburger{position:relative;width:var(--d4ca-trigger-size);height:calc(var(--d4ca-trigger-size)*.72);display:inline-block}.d4ca-hamburger i{position:absolute;left:0;width:100%;height:var(--d4ca-line);background:currentColor;border-radius:99px;transition:transform .3s ease,top .3s ease,left .25s ease,opacity .2s ease,width .25s ease}.d4ca-hamburger i:nth-child(1){top:0}.d4ca-hamburger i:nth-child(2){top:50%;transform:translateY(-50%)}.d4ca-hamburger i:nth-child(3){top:calc(100% - var(--d4ca-line))}.d4ca-ham-spin.is-active .d4ca-hamburger{transform:rotate(180deg);transition:transform .35s ease}.d4ca-ham-spin.is-active .d4ca-hamburger i:nth-child(1),.d4ca-ham-squeeze.is-active .d4ca-hamburger i:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}.d4ca-ham-spin.is-active .d4ca-hamburger i:nth-child(2),.d4ca-ham-squeeze.is-active .d4ca-hamburger i:nth-child(2){opacity:0}.d4ca-ham-spin.is-active .d4ca-hamburger i:nth-child(3),.d4ca-ham-squeeze.is-active .d4ca-hamburger i:nth-child(3){top:50%;transform:translateY(-50%) rotate(-45deg)}
/* "Elastic (Converge & Spin)" hamburger style — approximates a Velocity.js
 * reference animation (McButton, https://codepen.io/filippo/pen/WvGbJB)
 * using pure CSS transitions, so no animation library is loaded.
 * Opening: bar1 + bar3 slide to the centre (200ms), then bar3 rotates 90deg
 * while the whole button rotates 135deg (800ms, delayed 200ms, overshoot
 * easing) — bar1 + bar2 end up overlapping into one arm of the X, bar3
 * forms the other. Closing plays the same stages in reverse order/timing.
 * A true elastic "spring" (Velocity's tension/friction easing) can't be
 * reproduced exactly in CSS; cubic-bezier(.68,-.55,.265,1.55) gives the
 * closest single-overshoot "snap and settle" approximation. */
.d4ca-ham-elastic{transform-origin:center;transition:transform 800ms cubic-bezier(.68,-.55,.265,1.55) 200ms}
.d4ca-ham-elastic .d4ca-hamburger i:nth-child(1){transition:top 200ms ease}
.d4ca-ham-elastic .d4ca-hamburger i:nth-child(3){transition:top 200ms ease,transform 800ms cubic-bezier(.68,-.55,.265,1.55) 200ms}
.d4ca-ham-elastic:not(.is-active){transition:transform 800ms cubic-bezier(.68,-.55,.265,1.55) 0ms}
.d4ca-ham-elastic:not(.is-active) .d4ca-hamburger i:nth-child(1){transition:top 200ms ease 800ms}
.d4ca-ham-elastic:not(.is-active) .d4ca-hamburger i:nth-child(3){transition:transform 800ms cubic-bezier(.68,-.55,.265,1.55) 0ms,top 200ms ease 800ms}
.d4ca-ham-elastic.is-active{transform:rotate(135deg)}
.d4ca-ham-elastic.is-active .d4ca-hamburger i:nth-child(1){top:50%;transform:translateY(-50%)}
.d4ca-ham-elastic.is-active .d4ca-hamburger i:nth-child(3){top:50%;transform:translateY(-50%) rotate(90deg)}
/* "Collapse" — bar1 + bar2 form one arm of the X at the centre, bar3 fades
 * and shrinks away entirely instead of forming the second arm. A simpler,
 * asymmetric alternative to Spin/Squeeze's fully-symmetric X. */
.d4ca-ham-collapse.is-active .d4ca-hamburger i:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.d4ca-ham-collapse.is-active .d4ca-hamburger i:nth-child(2){transform:translateY(-50%) rotate(-45deg)}
.d4ca-ham-collapse.is-active .d4ca-hamburger i:nth-child(3){top:50%;opacity:0;transform:translateY(-50%) scaleX(.4)}

/* "Vortex" — the same converge-to-X as Spin, but the whole icon spins
 * through 900deg (two and a half turns) instead of 180deg before landing
 * in the same X, so it visibly winds up on open and unwinds on close.
 * The transition lives on the unconditional ".d4ca-ham-vortex .d4ca-hamburger"
 * rule (not scoped to .is-active) so both directions animate the full
 * sweep — scoping it inside .is-active only would animate the spin-up but
 * let the close snap back instantly. */
.d4ca-ham-vortex .d4ca-hamburger{transition:transform .8s cubic-bezier(.6,.05,.28,.91)}
.d4ca-ham-vortex.is-active .d4ca-hamburger{transform:rotate(900deg)}
.d4ca-ham-vortex.is-active .d4ca-hamburger i:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.d4ca-ham-vortex.is-active .d4ca-hamburger i:nth-child(2){opacity:0}
.d4ca-ham-vortex.is-active .d4ca-hamburger i:nth-child(3){top:50%;transform:translateY(-50%) rotate(-45deg)}

/* "Arrow" — bars shrink and angle from a fixed left pivot to form a
 * left-pointing chevron/arrow instead of an X; bar2 stays as the shaft.
 * Shared by the Menu Trigger and the Off Canvas close icon — left-pointing
 * is the Menu Trigger's intended direction, so this stays fixed regardless
 * of which way any given off-canvas panel opens. If a close icon needs to
 * point toward wherever its panel exits, use "Arrow On Hover" below instead
 * of this as the resting style — it's independent of Animation Style and
 * always points right. */
.d4ca-ham-arrow .d4ca-hamburger i:nth-child(1),.d4ca-ham-arrow .d4ca-hamburger i:nth-child(3){transform-origin:left center}
.d4ca-ham-arrow.is-active .d4ca-hamburger i:nth-child(1){top:50%;width:60%;transform:translateY(-50%) rotate(-40deg)}
.d4ca-ham-arrow.is-active .d4ca-hamburger i:nth-child(3){top:50%;width:60%;transform:translateY(-50%) rotate(40deg)}

/* Hover Line Expand — an idle-state affordance, independent of which
 * animation style above is chosen: the top/bottom bars sit shorter than
 * the middle bar by --d4ca-hover-inset (default 4px) and grow to full
 * width on hover. Only applies while the trigger hasn't been clicked yet
 * (:not(.is-active)) — once a style has morphed the bars into an X/arrow,
 * "full width" no longer means anything for them. */
.d4ca-ham-hover-expand:not(.is-active) .d4ca-hamburger i:nth-child(1),.d4ca-ham-hover-expand:not(.is-active) .d4ca-hamburger i:nth-child(3){width:calc(100% - var(--d4ca-hover-inset,4px))}
.d4ca-ham-hover-expand:not(.is-active):hover .d4ca-hamburger i:nth-child(1),.d4ca-ham-hover-expand:not(.is-active):hover .d4ca-hamburger i:nth-child(3){width:100%}

/* Close-button "Arrow On Hover" — the close icon is always shown already-active
 * (as an X), so on its own it has no click feedback at all. On hover it morphs
 * into a long right-pointing arrow instead: bar 2 reappears as the full-width
 * shaft, and bars 1/3 shrink to 60% width and shift to hug the right edge
 * (left:40%) — the same proportions the "Arrow" style uses, just mirrored —
 * so their transform-origin:right-center pivot sits exactly on the container's
 * right edge, where the shaft ends. Rotating them to +/-40deg from there (vs.
 * the +/-45deg the X styles use, pivoted from the centre) makes their free
 * ends fan out to the upper-left/lower-left while staying anchored at that
 * single point on the right, forming a clean arrowhead sitting on the end of
 * the shaft — "----->" — rather than a full-width bend through the centre.
 * This overrides whichever close_hamburger_style is selected — same three
 * bars, just re-aimed — and relies on the base .d4ca-hamburger i transition
 * (transform/top/left/width/opacity) already declared above for the morph
 * animation, so no extra transition rules are needed here.
 * The Spin style also rotates the whole .d4ca-hamburger container 180deg (not
 * just the bars) — reset that back to none on hover so the arrow forms the
 * right way round instead of mirrored inside a still-flipped container. */
.d4ca-close-hover-arrow:hover .d4ca-hamburger{transform:none}
.d4ca-close-hover-arrow:hover .d4ca-hamburger i:nth-child(1){top:50%;left:40%;width:60%;transform-origin:right center;transform:translateY(-50%) rotate(40deg)}
.d4ca-close-hover-arrow:hover .d4ca-hamburger i:nth-child(2){opacity:1;transform:translateY(-50%)}
.d4ca-close-hover-arrow:hover .d4ca-hamburger i:nth-child(3){top:50%;left:40%;width:60%;transform-origin:right center;transform:translateY(-50%) rotate(-40deg)}

@media(max-width:1024px){.d4ca-offcanvas__panel{--d4ca-panel-width:60%}}@media(max-width:767px){.d4ca-offcanvas__panel{--d4ca-panel-width:100%}}

/* When logged in (WP admin toolbar in play), push a custom-positioned close
 * button down an extra 50px so it doesn't sit flush against the toolbar area.
 * Reads the Top offset the user actually configured (via --d4ca-close-top,
 * set alongside the literal `top` value by the close_pos_top control) and adds
 * 50px on top of it, rather than overriding it outright — so this still
 * respects whatever Top value was set in Elementor, logged-in or not. */
body.logged-in .d4ca-offcanvas__close-wrap.d4ca-close-custom-pos{top:calc(var(--d4ca-close-top, 0px) + 50px)}