:root {
	/* Mobile first breakpoints */
	--breakpoint-xs: 480px;        /* extra small devices */
	--breakpoint-sm: 768px;        /* tablets */
	--breakpoint-md: 992px;        /* desktops */
	--breakpoint-lg: 1200px;       /* large desktops */
	--breakpoint-xl: 1440px;       /* extra large screens */

	/* Navigation breakpoint z webu */
	--breakpoint-navigation: 767px;

	/* Starší hodnoty pro kompatibilitu */
	--breakpoint-mobile: 768px;
	--breakpoint-tablet: 992px;
	--breakpoint-desktop: 1200px;
	--breakpoint-large: 1440px;
}

.homepage-box {
    background-color: #ffffff;
    border-bottom-color: var(--colors-foregrounds-borders-secondary);
    border-top-color: var(--colors-foregrounds-borders-secondary);
}


.navigation-in {
    font-size: 18px;
    line-height: 18px;
}




#header{
	.site-name{
		a img{
			max-height: 110px;
			margin-left: -20px;
		}
	}
	.header-top{
		height: auto;
		padding-block: 0;
		.site-name-wrapper{
			flex: 1 1 auto;
		}
		.navigation-buttons{
			flex: 0 0 30%;
		}
		.search{
			min-width: 300px;
		}
	}
	.menu-helper{
		top: auto;
		bottom: 10px;
		right: 10px;
	}
}

.top-navigation-tools{
	.toggle-window{
		&:before{
			font-size: 24px;
			color: #3466B2;
		}
	}
	.toggle-window:last-child{
		background-color: transparent;
		color: black ;
		&:before{
			background-color: transparent !important;
			color: black !important;
			font-size: 25px !important;
			border-radius: 0 !important;
			font-weight: 700;
		}
	}
}

#navigation {
	height: auto !important;
	.menu {
		position: relative !important;
	}
	.menu-level-1{
		>li{
			>a{
				min-height: 50px !important;
				display: flex;
				align-items: center;
			}
		}
	}
}

#formSearchForm{
	.search-input{
		height: 50px;
		padding-right: 30px;
		font-size: 16px;
	}
	.btn{
		top: 50%;
		right: 4px;
		transform: translateY(-50%);
		height: 40px;
		border-radius: 5px;
		padding: 2px 25px;
		text-transform: none;
		font-weight: 700;
		letter-spacing: 0.04em;
		font-size: 16px;;
	}
}

.overall-wrapper .top-navigation-bar {
	border: none;
	padding-block: 5px;
	background-color: #F5F5F5;
	.top-navigation-menu{
		order: -1;
		background-color: transparent;
	}
	.top-navigation-contacts{
		background-color: transparent;
		order: 5;
		text-align: right !important;
		a{
			padding: 0;
			font-size: 18px;
			color: #355A90;
		}
	}

	.top-navigation-bar-menu{
		background-color: transparent;
		text-transform: none;
		display: flex;
		margin-left: -20px;
		li{
			&:before{
				/*	display: none;*/
				content: '';
				width: 1px;
				height: 10px;
				background-color: #485156;
				top: 50%;
				transform: translateY(-50%);
				margin-top: 0;

			}
		}
	}

}

.login{
	opacity: 0;
	transition: all 0.5s ease;
}

.show-block{
	opacity: 1 !important;
}

#header .navigation-buttons{
	.top-nav-button-login.login{
		&:before{
			content: "\e901";
			font-family: 'icomoon';
		}
	}
	.cart-count{
		&::before{
			font-family: 'icomoon';
			content: "\e902";
		}
	}

	@media (min-width: 768px){
		display: flex;
		align-items: center;
		column-gap: 20px;
		a{
			display: flex;
			align-items: center;
			column-gap: 15px;
			font-size: 16px;
			*{
				color: #485156;
			}
			&:before{
				transition: all 0.3s ease;
				font-size: 30px;
				color: #485156;
			}
			&:hover{
				color: #000;
				&:before{
					color: #000;
					transform: scale(1.1);
				}
			}
		}
		.top-nav-button-login.login{
			color: inherit;
			background-color: transparent;
			display: flex;
			align-items: center;
			width: auto;
			&:before{
				transition: all 0.3s ease;
				content: "\e901";
				font-family: 'icomoon';
				font-size: 40px;

			}

			@media (max-width: 1200px) {
				span{
					display: none;
				}
			}
		}
		.cart-count{
			&::before{
				transition: all 0.3s ease;
				font-size: 40px;
				margin: 0;
			}
		}
	}
	@media (max-width: 768px){
		.cart-count{
			top: -37px;
		}
		.top-nav-button-login.login{
			display: none;
		}
	}
}

.row.banners-row{
	.banner-wrapper{
		img{
			display: block;
			width: 100%;
		}
		a{
			display: block;
		}
	}
}


.popup-widget.login-widget{
	@media (min-width: 992px) {
		top: 110px;
		&:before{
			left: 180px;
			right: auto;
		}
	}
}
.navigation-in > ul > li.ext > ul > li > div > ul{
	display: none;
}