.close__label {
	position: absolute;
	right: 1.5rem;
	top: 2rem;
	z-index: 20;
}

.sidemenu,
.sidemenu .pannel  {
	padding: 0;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	background: var(--wp--preset--color--beige-pale);
	width: min(100%, 480px);
	margin: 0;
	transition : all ease-in-out 0.2s;
}

.sidemenu  {
	z-index: 5;	
	overflow: clip;
	opacity: 0;
	pointer-events: none;
	translate: 25% 0;
}

#sidemenu_toggle:checked ~ .sidemenu {
	opacity: 1;
	pointer-events: all;
	translate: 0 0;
}

.sidemenu .pannel  {
	translate: 0 0;
}

.sidemenu label:has(input) + .pannel {
	translate: 25% 0;
	opacity: 0;
	pointer-events: none;
}

.sidemenu label:has(input:checked) + .pannel {
	translate: 0 0;
	opacity: 1;
	pointer-events: all;
}

.sidemenu_overlay  {
	position: fixed;
	inset: 0;
	background: rgba(95, 95, 95, 0.35);
	z-index: 4;
	opacity: 0;
	pointer-events: none;
	transition : all ease-in-out 0.2s;
	margin: 0!important;
}

#sidemenu_toggle:checked ~ .sidemenu_overlay {
	opacity: 1;
	pointer-events: all;
}

#sidemenu_toggle:not(:checked) ~ .sidemenu  * {
	pointer-events: none;
}


.sidemenu ul {
	padding: 0;
	padding-block-start: 3rem;
	margin: 0;
	height: 100%;
	list-style: none;
	position: absolute;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
}




.sidemenu li  {
	padding-inline: 1rem 3rem;
	line-height: 1.2;
	padding-block-end: 0.75rem;
}

.sidemenu li:last-child  {
	padding-block-end: 3rem;
}

.sidemenu :is(a, label)  {
	cursor: pointer;
	text-decoration: none;
	text-transform: uppercase;
}
.sidemenu :is(a, label):hover  {
	color: var(--wp--preset--color--gold);
}
.sidemenu :is(a, label).back  {
	text-transform: lowercase;
	font-size: 0.8em;
}
.sidemenu :is(a, label).back:before  {
	content : ' ';
	font-weight: 300;
	font-family: "Font Awesome 6 Sharp";
	font-size: 0.8em;
}

.sidemenu li:has(ul) > :is(label, a):after  {
	content: ' ';
	font-weight: 300;
	font-family: "Font Awesome 6 Sharp";
}