/* =========================================================
   MOBIKECO HEADER
   ========================================================= */

:root {

	--mbk-bg: #000;
	--mbk-black: #000;
	--mbk-white: #fff;
	--mbk-red: #c30000;
	--mbk-green: #3ec45d;

	--mbk-font: 'Oswald', 'Arial Narrow', sans-serif;

	--mbk-header-h: 100px;
	--mbk-btn-h: 58px;
	--mbk-gap: 8px;

}


/* =========================================================
   BASE
   ========================================================= */

html {

	scroll-padding-top:
		var(--mbk-header-h);

	background-color: #000;

}

.elementor-location-header {

	display: none !important;

}

body {

	padding-top:
		var(--mbk-header-h);

	background-color: #000;

}


/* =========================================================
   HEADER
========================================================= */

.mbk-header {

	position: fixed !important;

	top: 0 !important;
	left: 0;
	right: 0;

	width: 100%;

	z-index: 1000;

	background:
		var(--mbk-bg);

	font-family:
		var(--mbk-font);

	box-shadow:
		0 2px 8px rgba(0, 0, 0, .15);

	transition:
		background .2s ease,
		transform .28s ease;

}


@media (min-width: 801px) {

	.mbk-header.mbk-header--scrolled {

		background:
			transparent;

	}

}


.mbk-header__inner {

	width: 100%;

	max-width: 1600px;

	height:
		var(--mbk-header-h);

	margin:
		0 auto;

	padding:
		0 clamp(16px, 8vw, 150px);

	display: grid;

	grid-template-columns:
		1fr
		minmax(0, 700px)
		1fr;

	align-items: center;

	gap: 20px;

	box-sizing: border-box;

}


.mbk-menu-toggle {

	display: none;

}


.mbk-logo {

	display: flex;

	align-items: center;

	justify-content: flex-start;

	min-width: 0;

	text-decoration: none;

}


.mbk-logo model-viewer {

	display: block;

	width: 170px;

	height: 92px;

	pointer-events: none;

	--poster-color: transparent;

	background: transparent;

	animation:
		mbk-bob
		3.5s
		ease-in-out
		infinite;

}


@keyframes mbk-bob {

	0%, 100% {

		transform:
			translateY(-4px);

	}

	50% {

		transform:
			translateY(4px);

	}

}


.mbk-cart {

	justify-self: end;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	position: relative;

	color:
		#ffffff;

	text-decoration: none;

	line-height: 0;

	min-width: 40px;

	min-height: 40px;

	transition:
		color .15s ease,
		transform .15s ease;

}


.mbk-cart svg {

	display: block;

	width: 26px;

	height: auto;

}


.mbk-cart:hover {

	color: #ffffff;

}


.mbk-cart:active {

	transform:
		scale(.96);

}


.mbk-cart-count {

	position: absolute;

	top: -6px;

	right: -10px;

	min-width: 18px;

	height: 18px;

	padding:
		0 5px;

	border-radius: 9px;

	background:
		var(--mbk-black);

	color:
		var(--mbk-white);

	font:
		600 11px/18px var(--mbk-font);

	text-align: center;

	box-sizing: border-box;

}


.mbk-cart-count[hidden] {

	display: none;

}


.mbk-nav {

	position: relative;

	min-width: 0;

}


.mbk-nav__list {

	list-style: none;

	margin: 0;

	padding: 0;

	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 18px;

}


.mbk-btn {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height:
		var(--mbk-btn-h);

	padding:
		0 10px;

	box-sizing: border-box;

	background:
		var(--mbk-white);

	color:
		var(--mbk-black);

	border:
		2px solid var(--mbk-red);

	border-radius: 9px;

	font:
		500 21px/1 var(--mbk-font);

	letter-spacing: .01em;

	text-decoration: none;

	cursor: pointer;

	text-align: center;

	white-space: nowrap;

	transition:
		background .15s ease,
		color .15s ease;

}


.mbk-btn:hover, .mbk-has-panel.is-open > .mbk-btn {

	background:
		var(--mbk-black);

	color:
		var(--mbk-white);

}


.mbk-panel {

	position: absolute;

	left: 0;

	right: 0;

	top:
		calc(
			100%
			+
			(var(--mbk-header-h) - var(--mbk-btn-h)) / 2
			+
			var(--mbk-gap)
		);

	background:
		var(--mbk-white);

	border-radius: 9px;

	padding:
		26px 30px;

	box-shadow:
		3px 5px 14px rgba(0, 0, 0, .3);

	display: flex;

	flex-direction: column;

	gap: 18px;

	box-sizing: border-box;

	max-height:
		calc(
			100vh
			-
			var(--mbk-header-h)
			-
			20px
		);

	overflow-y: auto;

	overscroll-behavior: contain;

}


.mbk-panel::before {

	content: '';

	position: absolute;

	left: 0;

	right: 0;

	top: -50px;

	height: 50px;

}


.mbk-panel[hidden], .mbk-children[hidden] {

	display: none;

}


.mbk-panel.is-opening {

	animation:
		mbk-drop
		.16s
		ease-out;

}


@keyframes mbk-drop {

	from {

		opacity: 0;

		transform:
			translateY(-6px);

	}

}


.mbk-grid {

	list-style: none;

	margin: 0;

	padding: 0;

	display: grid;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	gap:
		18px 16px;

}


.mbk-grid li {

	min-width: 0;

}


.mbk-chip {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 48px;

	padding:
		0 8px;

	box-sizing: border-box;

	border:
		2px solid var(--mbk-red);

	border-radius: 8px;

	font:
		500 19px/1 var(--mbk-font);

	text-decoration: none;

	text-align: center;

	background:
		var(--mbk-white);

	color:
		var(--mbk-black);

	cursor: pointer;

	transition:
		background .15s ease,
		color .15s ease;

}


.mbk-chip:hover {

	background:
		var(--mbk-red);

	color:
		var(--mbk-white);

}


.mbk-chip--parent {

	background:
		var(--mbk-black);

	color:
		var(--mbk-white);

}


.mbk-chip--parent:hover {

	background:
		#1c1c1c;

	color:
		var(--mbk-white);

}


.mbk-chip--parent[aria-expanded="true"] {

	box-shadow:
		2px 3px 5px rgba(0, 0, 0, .35);

}


.mbk-btn:focus-visible, .mbk-chip:focus-visible, .mbk-cart:focus-visible, .mbk-menu-toggle:focus-visible {

	outline:
		3px solid var(--mbk-green);

	outline-offset: 3px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1250px) {

	.mbk-header__inner {

		padding-left: 40px;

		padding-right: 40px;

		gap: 16px;

	}


	.mbk-nav__list {

		gap: 12px;

	}


	.mbk-btn {

		font-size: 18px;

		padding-left: 6px;

		padding-right: 6px;

	}


	.mbk-logo model-viewer {

		width: 150px;

		height: 84px;

	}

}


@media (max-width: 1100px) {

	:root {

		--mbk-header-h: 88px;

		--mbk-btn-h: 48px;

	}


	.mbk-header__inner {

		padding-left: 24px;

		padding-right: 24px;

		gap: 12px;

		grid-template-columns:
			150px
			minmax(0, 1fr)
			45px;

	}


	.mbk-logo model-viewer {

		width: 135px;

		height: 76px;

	}


	.mbk-nav__list {

		gap: 10px;

	}


	.mbk-btn {

		font-size: 17px;

		border-radius: 8px;

	}


	.mbk-cart {

		min-width: 38px;

		min-height: 38px;

	}


	.mbk-cart svg {

		width: 25px;

	}


	.mbk-panel {

		padding: 20px;

		gap: 14px;

	}


	.mbk-grid {

		grid-template-columns:
			repeat(4, minmax(0, 1fr));

		gap: 12px;

	}


	.mbk-chip {

		height: 42px;

		font-size: 16px;

	}

}


@media (max-width: 900px) {

	:root {

		--mbk-header-h: 116px;

		--mbk-btn-h: 44px;

	}


	.mbk-header__inner {

		grid-template-columns:
			130px
			minmax(0, 1fr)
			40px;

		padding-left: 18px;

		padding-right: 18px;

	}


	.mbk-logo model-viewer {

		width: 120px;

		height: 68px;

	}


	.mbk-nav__list {

		gap: 7px;

	}


	.mbk-btn {

		font-size: 15px;

	}


	.mbk-grid {

		grid-template-columns:
			repeat(3, minmax(0, 1fr));

	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

	:root {

		--mbk-header-h: 70px;

	}


	html {

		scroll-padding-top:
			var(--mbk-header-h);

	}


	body {

		padding-top:
			var(--mbk-header-h);

		background-color: #000;

	}


	.mbk-header {

		background:
			#000;

		z-index: 1000;

	}


	.mbk-header__inner {

		height:
			var(--mbk-header-h);

		padding:
			6px 14px;

		display: grid;

		grid-template-columns:
			44px
			1fr
			44px;

		grid-template-areas:
			"menu logo cart";

		align-items: center;

		gap: 8px;

		box-sizing: border-box;

		position: relative;

	}


	.mbk-menu-toggle {

		grid-area: menu;

		display: flex;

		align-items: center;

		justify-content: center;

		flex-direction: column;

		gap: 5px;

		width: 42px;

		height: 42px;

		padding: 0;

		margin: 0;

		border: 0;

		background: transparent;

		color: #fff;

		cursor: pointer;

		-webkit-tap-highlight-color: transparent;

	}


	.mbk-menu-toggle span {

		display: block;

		width: 27px;

		height: 3px;

		border-radius: 3px;

		background: #fff;

		transform-origin: center;

		transition:
			transform .2s ease,
			opacity .15s ease;

	}


	.mbk-menu-toggle.is-open span:nth-child(1) {

		transform:
			translateY(8px)
			rotate(45deg);

	}


	.mbk-menu-toggle.is-open span:nth-child(2) {

		opacity: 0;

		transform:
			scaleX(0);

	}


	.mbk-menu-toggle.is-open span:nth-child(3) {

		transform:
			translateY(-8px)
			rotate(-45deg);

	}


	.mbk-logo {

		grid-area: logo;

		justify-content: center;

		height: 58px;

	}


	.mbk-logo model-viewer {

		width: 115px;

		height: 58px;

	}


	.mbk-cart {

		grid-area: cart;

		justify-self: end;

		width: 42px;

		height: 42px;

		min-width: 42px;

		min-height: 42px;

	}


	.mbk-cart svg {

		width: 25px;

	}


	.mbk-cart-count {

		top: -3px;

		right: -5px;

		min-width: 18px;

		height: 18px;

		font-size: 10px;

		line-height: 18px;

	}


	.mbk-nav {

		position: absolute;

		top: 100%;

		left: 0;

		right: 0;

		width: 100%;

		background: #000;

		padding:
			14px;

		box-sizing: border-box;

		box-shadow:
			0 8px 18px rgba(0, 0, 0, .35);

		visibility: hidden;

		opacity: 0;

		transform:
			translateY(-8px);

		pointer-events: none;

		transition:
			opacity .18s ease,
			transform .18s ease,
			visibility .18s ease;

		z-index: 1001;

		max-height:
			calc(
				100vh
				-
				var(--mbk-header-h)
			);

		overflow-y: auto;

		-webkit-overflow-scrolling: touch;

		overscroll-behavior: contain;

	}


	.mbk-nav.is-mobile-open {

		visibility: visible;

		opacity: 1;

		transform:
			translateY(0);

		pointer-events: auto;

	}


	.mbk-nav__list {

		display: flex;

		flex-direction: column;

		gap: 9px;

		width: 100%;

	}


	.mbk-nav__list li {

		width: 100%;

	}


	.mbk-btn {

		height: 45px;

		font-size: 17px;

		border-radius: 8px;

		padding:
			0 12px;

	}


	.mbk-panel {

		position: relative;

		top: auto;

		left: auto;

		right: auto;

		width: 100%;

		margin-top: 10px;

		padding:
			12px;

		border-radius: 8px;

		gap: 10px;

		box-sizing: border-box;

		max-height: none;

		overflow: visible;

	}


	.mbk-panel::before {

		display: none;

	}


	.mbk-grid {

		grid-template-columns:
			repeat(
				auto-fit,
				minmax(130px, 1fr)
			);

		gap: 8px;

	}


	.mbk-chip {

		height: 40px;

		font-size: 15px;

		border-radius: 7px;

		padding:
			0 6px;

	}


	.mbk-panel.is-opening {

		animation:
			mbk-drop-mobile
			.16s
			ease-out;

	}

}


@keyframes mbk-drop-mobile {

	from {

		opacity: 0;

		transform:
			translateY(-5px);

	}

}