/* Mobile header: the theme stacks a 160px dark bar with a 231x128 logo above a separate 52px white
   bar holding the menu and search icons (212px before any content). Combine them into one compact
   dark bar: logo on the left, white icons on the right. Tablets use the same mobile menu, but the
   theme laid it out as a white icon block beside a shifted logo bar, so apply this up to 991px. */
@media (max-width: 991px) {
	.pbr-page-inner {
		position: relative;
	}

	#pbr-topbar {
		box-sizing: border-box;
		height: 72px; /* 10px + 52px logo + 10px; theme spacing otherwise adds ~10px below the logo */
		float: none !important; /* the theme floats it right on tablets */
		width: auto !important;
		margin-left: 0 !important;
		padding: 10px 0 !important;
		overflow: hidden;
	}

	#pbr-topbar .container {
		padding-left: 16px;
		padding-right: 120px; /* room for the icons */
	}

	#pbr-topbar .row {
		margin: 0;
	}

	#pbr-topbar .row > div {
		width: auto;
		float: none;
		padding: 0;
	}

	/* The last topbar column (hotline) is empty on phones; the address column is already hidden. */
	#pbr-topbar .row > div:last-child {
		display: none;
	}

	#pbr-topbar .logo-wrapper,
	#pbr-topbar .logo {
		margin: 0;
		padding: 0;
		line-height: 0;
		text-align: left !important;
	}

	#pbr-topbar .logo-wrapper a {
		display: inline-block;
	}

	#pbr-topbar .logo img {
		display: block;
		width: auto;
		height: 52px;
	}

	/* Menu + search icons, moved into the dark bar. */
	.pbr-page-inner > .topbar-mobile {
		position: absolute !important;
		top: 0;
		right: 8px;
		left: auto;
		width: auto !important;
		z-index: 20;
		display: flex !important;
		align-items: center;
		height: 72px;
		background: transparent !important;
	}

	.topbar-mobile .active-mobile,
	.topbar-mobile .topbar-inner {
		float: none;
	}

	/* Search first, menu on the far right. */
	.topbar-mobile > .topbar-inner {
		order: 1;
	}

	.topbar-mobile > .active-mobile {
		order: 2;
	}

	.topbar-mobile .active-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.topbar-mobile .btn-offcanvas,
	.topbar-mobile .fa {
		padding: 0;
		border: 0;
		background: transparent;
		font-size: 20px;
		color: #fff;
	}

	.topbar-mobile .search-popup .active-content {
		right: 0;
		left: auto;
	}

	/* The menu button is on the right, so slide the off-canvas menu in from the right too.
	   overflow-x: clip keeps the parked panel from adding sideways scroll. */
	.pbr-page-inner {
		overflow-x: clip;
	}

	.pbr-page-inner .pbr-off-canvas.sidebar-offcanvas {
		left: auto !important;
		right: -100%;
	}

	.pbr-page-inner.active .pbr-off-canvas.sidebar-offcanvas,
	.pbr-page-inner .pbr-off-canvas.sidebar-offcanvas.active {
		right: 0;
	}

	/* Close (×) button on the right, under the thumb that opened the menu. */
	.pbr-off-canvas .offcanvas-head {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
	}

	.pbr-off-canvas .offcanvas-head > span {
		margin: 0 0 0 20px;
	}
}