/* Mobile bottom bar (below 1025px) and mobile navigation */
.bdk-mobile-bar { display: none; }
.bdk-menu-toggle { display: none; }

@media (max-width: 1024px) {
	.bdk-menu-toggle { display: inline-flex; }
	body.bdk-has-mobile-bar { padding-bottom: 55px; }
	.bdk-mobile-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		display: block;
		height: 55px;
		background: var(--bdk-surface);
		box-shadow: 0 0 9px rgba(0, 0, 0, .12);
	}
	.bdk-mobile-bar ul { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
	.bdk-mobile-bar__item { flex: 1; margin: 0; }
	.bdk-mobile-bar__item a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: var(--bdk-text);
		font: 600 11px/1 var(--bdk-font);
		text-decoration: none;
	}
	.bdk-mobile-bar__icon { position: relative; display: block; margin-bottom: 5px; }
	.bdk-mobile-bar__icon .bdk-count { top: -6px; right: -10px; background: var(--bdk-accent); color: #fff; box-shadow: none; }
}

#bdk-mobile-nav .bdk-offcanvas__body { padding: 0; }
.bdk-mobile-nav__tabs { display: flex; border-bottom: 1px solid var(--bdk-border); }
.bdk-mobile-nav__tabs [role="tab"] {
	flex: 1;
	padding: 15px 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--bdk-muted);
	font: 600 14px/1 var(--bdk-font);
	text-transform: uppercase;
	cursor: pointer;
}
.bdk-mobile-nav__tabs [aria-selected="true"] { border-bottom-color: var(--bdk-accent); color: var(--bdk-dark); }
.bdk-mobile-nav__menu, .bdk-mobile-nav__menu .sub-menu { margin: 0; padding: 0; list-style: none; }
.bdk-mobile-nav__menu li { position: relative; margin: 0; border-bottom: 1px solid var(--bdk-border); }
.bdk-mobile-nav__menu .sub-menu li:last-child { border-bottom: 0; }
.bdk-mobile-nav__menu a {
	display: block;
	padding: 14px 56px 14px 20px;
	color: var(--bdk-text);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.bdk-mobile-nav__menu .sub-menu { border-top: 1px solid var(--bdk-border); background: var(--bdk-soft); }
.bdk-mobile-nav__menu .sub-menu a { padding-left: 35px; font-weight: 400; }
.bdk-mobile-nav__menu .sub-menu .sub-menu a { padding-left: 50px; }
.bdk-mobile-nav__toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 48px;
	border: 0;
	border-left: 1px solid var(--bdk-border);
	background: none;
	color: var(--bdk-text);
	cursor: pointer;
}
.bdk-mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }