header {
	background-color: var(--font-color);
	width: 100%;
	max-width: 1280px;
	margin: auto;
}

.header-logo {
	height: 38.39px;
	width: 140px;
	object-fit: cover;
}

.headerInfo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
	font-size: 16px;
	color: var(--font-color);
}

.logo-nav-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	height: 75px;
}

.navigation {
	display: flex;
	justify-content: space-between;
	flex-grow: 1;
}

.navigation-menu {
	display: flex;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.navigation-menu a {
	display: block;
	font-size: 16px;
}

.navigation-menu > li > a {
	padding: 8px 16px;
	border-radius: 8px;
	color: var(--primary-color);
}

.navigation-menu a:hover {
	color: var(--font-color) !important;
	background-color: var(--primary-color);
}

.menu-item:hover > a,
.menu-item:hover .sub-menu li:hover > a {
	color: var(--font-color) !important;
	background-color: var(--primary-color);
}

nav.navigation ul.sub-menu {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease;
	list-style: none;
	position: fixed;
	border-radius: 8px;
	padding-left: 0;
	white-space: nowrap;
	z-index: 101;
	background-color: #fff;
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1), 0px 15px 15px 0px rgba(0, 0, 0, 0.09),
		0px 34px 21px 0px rgba(0, 0, 0, 0.05), 0px 61px 25px 0px rgba(0, 0, 0, 0.01), 0px 96px 27px 0px rgba(0, 0, 0, 0);
}

nav.navigation ul.sub-menu a {
	font-family: "Work Sans", serif;
	color: var(--primary-color);
	padding: 16px;
}

.navigation-menu > li.menu-item-has-children,
.navigation-menu > li.menu-item-has-children > a {
	cursor: default;
}

nav.navigation li:hover > ul.sub-menu {
	visibility: visible;
	opacity: 1;
}

/* search bar */
#product-search-form {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	height: 37px;
}

#product-search-form button {
	background-color: var(--primary-color);
	border: none;
	width: 37px;
	border-radius: 0 8px 8px 0;
}
#product-search-form button i {
	font-size: 14px;
	color: #fff;
}

.header-search-input {
	width: 268px;
	padding: 8px 8px 8px 16px;
	font-size: 14px;
	border-radius: 8px 0 0 8px;
	border: 1px solid var(--primary-color);
}

.search-dropdown {
	position: absolute;
	top: 34px;
	width: 100%;
	padding-top: 8px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #ccc;
	z-index: 9999;
}

.search-dropdown .search-results-list {
	color: var(--primary-color);
	list-style: none;
	margin: 0;
	padding: 0;
}

.search-result-item a {
	color: var(--primary-color);
	display: flex;
	align-items: center;
	flex: 1;
	gap: 8px;
	padding-left: 16px;
	margin-bottom: 8px;
}

.search-result-item a:hover {
	background-color: var(--primary-color);
	color: #fff;
}

.search-dropdown .search-result-item img.search-result-thumb {
	width: 40px;
	height: auto;
}

.search-dropdown .no-results {
	width: 100%;
	text-align: center;
}

.search-lang-container {
	font-family: "Work Sans", serif;
	font-size: 14px;
	display: flex;
	gap: 10px;
	margin-left: 8px;
}

.fake-select-container {
	position: relative;
	display: inline-block;
}

.selected-option {
	position: relative;
	font-size: 16px;
	font-family: "Work Sans", serif;
	text-transform: uppercase;
	background-color: #fff;
	color: #000;
	border: 1px solid var(--primary-color);
	border-radius: 6px;
	width: 65px;
	height: 35px;
	padding-left: 12px;
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
}

/* The arrow box is a pseudo‐element with its own background */
.selected-option::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 37px;
	height: 100%;
	background-color: var(--primary-color);
	background-image: url("data:image/svg+xml;utf8,<svg fill='%23fff' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 0 6px 6px 0;
	background-size: 24px 24px;
	pointer-events: none;
}

/* Dropdown list hidden by default */
.options {
	display: none;
	font-size: 16px;
	font-family: "Work Sans", serif;
	text-transform: uppercase;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1), 0px 15px 15px 0px rgba(0, 0, 0, 0.09),
		0px 34px 21px 0px rgba(0, 0, 0, 0.05), 0px 61px 25px 0px rgba(0, 0, 0, 0.01), 0px 96px 27px 0px rgba(0, 0, 0, 0);
	border-radius: 6px;
	background: #fff;
	z-index: 200;
}

.fake-select-container.open .options {
	display: block;
}

.options li {
	padding: 8px 12px;
	cursor: pointer;
	color: var(--primary-color);
}

.options li:hover {
	color: #fff;
	background-color: var(--primary-color);
}

.hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--primary-color);
	font-size: 24px;
}

/* Mobile styles */
@media (max-width: 1280px) {
	.logo-nav-container {
		margin: 0 25px;
	}

	.navigation {
		position: fixed;
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-end;
		top: 0;
		gap: 20px;
		right: -100%;
		height: 100%;
		background-color: var(--primary-color);
		transition: right 0.3s ease;
		z-index: 1000;
		padding: 60px 20px 0 20px;
		box-sizing: border-box;
	}

	.navigation.active {
		right: 0;
		visibility: visible;
	}

	/* Hide navigation when not active */
	.navigation:not(.active) {
		visibility: hidden;
	}

	.navigation-menu {
		flex-direction: column;
		padding: 0;
		margin: 0 0 10px 0;
	}

	.navigation-menu li {
		margin: 10px 0;
	}

	.navigation-menu li a {
		color: var(--font-color);
		text-decoration: none;
		font-size: 18px;
	}

	.navigation-menu li a:hover {
		color: var(--accent-color);
	}

	.button_Prisijungti {
		margin-top: 20px;
	}

	.hamburger {
		display: block;
	}

	/* Overlay to capture clicks outside of the menu */
	.menu-overlay {
		display: none;
		position: fixed;
		margin: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.menu-overlay.active {
		display: block;
	}

	#product-search-form button {
		background-color: var(--accent-color);
	}
}