/* Sticky Side Menu – front-end */
.ssm-wrap {
	--ssm-pw: min(var(--ssm-panel-w, 560px), calc(100vw - var(--ssm-tab-w, 48px)));
	position: fixed;
	top: var(--ssm-top, 50%);
	left: 0;
	z-index: var(--ssm-z, 9999);
	display: flex;
	align-items: center;
	font-family: var(--ssm-font, inherit);
	transform: translate3d(calc(-1 * var(--ssm-pw)), -50%, 0);
	transition: transform var(--ssm-dur, 500ms) var(--ssm-ease, cubic-bezier(.77, 0, .175, 1));
	will-change: transform;
}
.ssm-wrap.is-open { transform: translate3d(0, -50%, 0); }

/* Right-hand side variant */
.ssm-wrap.ssm-pos-right {
	left: auto;
	right: 0;
	flex-direction: row-reverse;
	transform: translate3d(var(--ssm-pw), -50%, 0);
}
.ssm-wrap.ssm-pos-right.is-open { transform: translate3d(0, -50%, 0); }

/* Panel */
.ssm-wrap .ssm-panel {
	box-sizing: border-box;
	flex: none;
	width: var(--ssm-pw);
	max-height: 90vh;
	overflow-y: auto;
	padding: 56px 64px;
	background: var(--ssm-bg, #ebebeb);
	color: var(--ssm-color, #000);
	visibility: hidden; /* keeps links out of tab order while closed */
	transition: visibility 0s linear var(--ssm-dur, 500ms);
}
.ssm-wrap.is-open .ssm-panel { visibility: visible; transition-delay: 0s; }

.ssm-wrap .ssm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ssm-gap, 40px); }
.ssm-wrap .ssm-li { margin: 0; padding: 0; list-style: none; }

.ssm-wrap .ssm-item {
	display: flex;
	align-items: center;
	gap: 28px;
	color: inherit;
	text-decoration: none;
	font-size: var(--ssm-fs, 14px);
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: var(--ssm-case, uppercase);
	box-shadow: none;
	border: 0;
}
.ssm-wrap .ssm-item:hover .ssm-label { text-decoration: underline; text-underline-offset: 4px; }
.ssm-wrap .ssm-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--ssm-icon, 32px); height: var(--ssm-icon, 32px); }
.ssm-wrap .ssm-icon svg,
.ssm-wrap .ssm-icon img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }

.ssm-wrap .ssm-btn {
	display: inline-block;
	margin-top: 44px;
	padding: 14px 22px;
	border: 1px solid var(--ssm-btn-bd, #000);
	background: transparent;
	color: inherit;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: var(--ssm-case, uppercase);
	text-decoration: none;
	line-height: 1;
	transition: background-color .25s ease, color .25s ease;
}
.ssm-wrap .ssm-btn:hover,
.ssm-wrap .ssm-btn:focus-visible { background: var(--ssm-color, #000); color: var(--ssm-bg, #ebebeb); }

/* Vertical tab */
.ssm-wrap .ssm-tab {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--ssm-tab-w, 48px);
	min-height: 0;
	margin: 0;
	padding: 28px 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--ssm-tab-bg, #000);
	color: var(--ssm-tab-color, #fff);
	font-family: inherit;
	font-size: var(--ssm-tab-fs, 12px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: var(--ssm-case, uppercase);
	white-space: nowrap;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	cursor: pointer;
}
.ssm-wrap .ssm-tab:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

/* Items fade/slide in one by one after the panel starts opening */
.ssm-wrap .ssm-li { opacity: 0; transform: translateX(-18px); transition: opacity .35s ease, transform .35s ease; }
.ssm-wrap.ssm-pos-right .ssm-li { transform: translateX(18px); }
.ssm-wrap.is-open .ssm-li { opacity: 1; transform: none; transition-delay: calc(var(--ssm-i, 0) * 60ms + 150ms); }
.ssm-wrap.ssm-no-stagger .ssm-li { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
	.ssm-wrap, .ssm-wrap .ssm-li, .ssm-wrap .ssm-panel { transition-duration: .01ms !important; transition-delay: 0s !important; }
}