.pavo-offcanvas {
	position: fixed;
	inset: 0;
	/* Falls back to the widget's own Z-Index control default (999999) —
	   comfortably above WordPress's own #wpadminbar (99999) — even before
	   that control's own generated CSS has a chance to apply, so a logged-
	   in admin never sees the toolbar sit on top of an open panel. The
	   Z-Index control's own `{{WRAPPER}} .pavo-offcanvas` selector still
	   wins over this whenever a value is actually set. */
	z-index: 999999;
	display: flex;
	justify-content: var( --pavo-offcanvas-justify-content, flex-start );
	align-items: var( --pavo-offcanvas-align-items, flex-start );
	visibility: hidden;
	pointer-events: none;
}

.pavo-offcanvas--open {
	visibility: visible;
	pointer-events: auto;
}

.pavo-offcanvas__overlay {
	position: absolute;
	inset: 0;
	opacity: var( --pavo-offcanvas-overlay-opacity, 1 );
	transition: opacity var( --pavo-offcanvas-animation-duration, 0.4s ) ease;
	pointer-events: none;
}

.pavo-offcanvas--open .pavo-offcanvas__overlay {
	pointer-events: auto;
}

.pavo-offcanvas__panel {
	position: relative;
	width: var( --pavo-offcanvas-width, 360px );
	max-width: 100%;
	height: var( --pavo-offcanvas-height, 100vh );
	max-height: 100%;
}

.pavo-offcanvas__panel.animated {
	animation-duration: var( --pavo-offcanvas-animation-duration, 0.4s );
}

.pavo-offcanvas__content {
	width: 100%;
	height: 100%;
	overflow: var( --pavo-offcanvas-content-overflow, auto );
}

body.pavo-offcanvas-lock-scroll {
	overflow: hidden;
}