:root {
	--primary-color: #005694;
	--secondary-color: #03a1fc;
	--dark-bg: #f8f9fa;
	--accent-color: #28a745;
	--text-main: #212529;
	--light-blue: #e3f2fd;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Arial', sans-serif;
	scroll-behavior: smooth;
}

body {
	background-color: #fff;
	color: var(--text-main);
	line-height: 1.6;
}

ul {
	margin-left: 20px;
}

/* --- HEADER & NAVIGATION (Merged) --- */
.header {
	background: #005694;
	padding: 10px 30px;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.logos {
	max-width: 30%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	flex-shrink: 0;
}

.logos img {
	max-width: 200px;
	height: auto;
	width: auto;
	margin: 0 20px;
}

.logo-left,
.logo-right {
	width: 15vw;
}

.navbar {
	display: flex;
	gap: 10px;
	justify-content: space-evenly;
	list-style: none;
	margin-top: 0; /* Adjusted from 20px to align with header-container */
	flex-wrap: nowrap;
	width: auto;
	transition: transform 0.3s ease-in-out;
	/* Never squeeze the menu: js/navbar.js switches to the hamburger instead */
	flex-shrink: 0;
}

.navbar li {
	flex-shrink: 0;
}

.navbar a {
	text-decoration: none;
	color: white;
	font-size: 16px;
	font-weight: bold;
	padding: 10px 15px;
	transition: color 0.3s ease-in-out, 0.3s;
}

.navbar a:hover {
	color: #03a1fc;
}

.navitem {
	list-style: none;
}

/* --- "MODELLEK" DROPDOWN ---
   Hover/focus on desktop. When the menu is collapsed the whole list is shown
   already expanded instead (see the collapsed-navigation rules below). */
.navbar .has-dropdown {
	position: relative;
}

.navbar .has-dropdown > a::after {
	content: "\25BE";
	margin-left: 7px;
	font-size: 12px;
	line-height: 1;
}

.navbar .dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1001;
	margin: 0;
	padding: 8px 0;
	min-width: 190px;
	list-style: none;
	display: flex;
	flex-direction: column;
	background-color: #005694;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.navbar .has-dropdown:hover > .dropdown,
.navbar .has-dropdown:focus-within > .dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.navbar .dropdown a {
	display: block;
	padding: 8px 18px;
	font-weight: normal;
	white-space: nowrap;
}

#kapcsolat {
	scroll-margin-top: 120px;
}

/* --- HAMBURGER MENU --- */
.hamburger {
	display: none;
	cursor: pointer;
	position: relative; /* Add this */
	z-index: 1002; /* Higher than the navbar */
}

.hamburger div {
	width: 25px;
	height: 3px;
	background-color: white;
	margin: 5px;
	transition: all 0.3s ease;
}

.nav-active {
	transform: translateX(0%) !important;
}

.toggle .line1 {
	transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
	opacity: 0;
}
.toggle .line3 {
	transform: rotate(45deg) translate(-5px, -6px);
}

/* --- MAIN LAYOUT & PRODUCTS --- */
main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 30px;
}

.products-container {
	text-align: center;
	padding: 40px 20px;
}

.hero-section {
	display: flex;
	gap: 40px;
	padding: 40px 0;
	align-items: flex-start;
}

.title {
	font-size: 28px;
	color: #005694;
	font-weight: bold;
}

h2 {
	color: #005694;
	font-size: 24px;
	margin-bottom: 20px;
}

.product {
	background: white;
	border-radius: 8px;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin: 20px auto;
	max-width: 900px;
	transition: transform 0.3s ease-in-out;
}

.product:hover {
	transform: translateY(-5px);
}

.product-visuals {
	min-width: 40%;
	text-align: center;
}
#main-product-img {
	max-width: 100%;
	height: auto;
	border-radius: 15px;
}

.product-img img {
	width: 100%;
	max-width: 300px;
	display: block;
	margin: 0 auto;
	transition: transform 0.3s ease-in-out;
}

.product-img img:hover {
	transform: scale(1.05);
}

.product-name,
.product-name a,
.product-name a:visited {
	font-size: 22px;
	font-weight: bold;
	color: #005694;
	text-decoration: none;
}

.product-name {
	margin-top: 15px;
}

.main-image img {
	width: 50%;
	max-width: 500px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	transition: transform 0.3s ease-in-out;
}

.product-price-discount {
	color: #03a1fc;
	font-size: 20px;
	font-weight: bold;
}

.product-description p {
	font-size: 16px;
	margin-top: 10px;
}

.price-tag {
	font-size: 2rem;
	font-weight: 800;
	color: #000;
	margin: 10px 0;
}
.price-sub {
	font-size: 1.2rem;
	color: #495057;
	font-weight: 600;
	margin-bottom: 20px;
}

/* --- COMPONENTS & CARDS --- */
.badge-new {
	background: var(--accent-color);
	color: white;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 15px;
}

.spec-container,
.feature-columns {
	display: flex;
	gap: 15px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.spec-item,
.feature-item {
	padding: 15px;
	border-radius: 10px;
	text-align: center;
	flex: 1 1 calc(50% - 15px);
}

.spec-item {
	background: var(--dark-bg);
	border: 1px solid #e9ecef;
}
.spec-item strong {
	display: block;
	font-size: 1.1rem;
	color: var(--primary-color);
	margin-top: 5px;
}

.feature-item h3 {
	color: var(--primary-color);
	margin-bottom: 12px;
	font-size: 1.3rem;
}

.full-width-card {
	background: #fff;
	padding: 40px;
	margin: 40px 0;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	border: 1px solid #f1f3f5;
}

.full-width-card h2 {
	color: var(--primary-color);
	font-size: 1.8rem;
	margin-bottom: 25px;
	border-bottom: 3px solid var(--light-blue);
	padding-bottom: 10px;
	display: inline-block;
}

/* --- COLOR SELECTOR --- */
.color-selector-container {
	margin-top: 25px;
}
.color-selector {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 10px;
}

.color-dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	border: 3px solid #dee2e6;
	transition: 0.2s;
	background-clip: content-box;
	padding: 2px;
}

.color-dot:hover,
.color-dot:focus {
	transform: scale(1.1);
	outline: 2px solid var(--primary-color);
	outline-offset: 3px;
}
.color-dot.active {
	border-color: var(--primary-color);
	transform: scale(1.1);
}

/* --- GALLERY --- */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 15px;
	padding: 40px;
}

.gallery img {
	width: 100%;
	border-radius: 5px;
	transition: transform 0.3s ease-in-out;
}
.gallery img:hover {
	transform: scale(1.1);
}

/* --- CAROUSEL (All Selectors Restored) --- */
.carousel-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
}
.carousel-wrapper {
	position: relative;
	width: 100%;
	padding-top: 75%;
	touch-action: pan-y pinch-zoom;
}
.carousel-track {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	transition: transform 0.4s ease-in-out;
}
.carousel-slide {
	min-width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.carousel-slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 24px;
	cursor: pointer;
	z-index: 10;
	transition: background 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.carousel-arrow:hover {
	background: rgba(0, 0, 0, 0.8);
}
.carousel-arrow:active {
	transform: translateY(-50%) scale(0.95);
}
.carousel-arrow-left {
	left: 10px;
}
.carousel-arrow-right {
	right: 10px;
}

.carousel-indicators {
	position: absolute;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10;
}
.carousel-indicator {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}
.carousel-indicator.active {
	background: rgba(255, 255, 255, 1);
	transform: scale(1.2);
}

/* --- CONTACT --- */
.contact {
	background: var(--primary-color);
	color: white;
	padding: 40px 20px;
	text-align: center;
}

.contact h2 {
	font-size: 24px;
	margin-bottom: 20px;
	color: white;
}
.contact a {
	color: var(--secondary-color);
	text-decoration: none;
	font-weight: bold;
}
.contact a:hover {
	text-decoration: underline;
}

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4); /* Dims the background */
    z-index: 999; /* Sits behind the navbar (1000+) but above the content */
    display: none; /* Hidden by default */
    cursor: pointer;
}

/* Show the overlay when the menu is active */
.nav-overlay.active {
    display: block;
}

/* --- COLLAPSED (HAMBURGER) NAVIGATION ---
   js/navbar.js adds .nav-collapsed to <body> as soon as the menu items no
   longer fit next to the logos, whatever the viewport width happens to be, so
   the items never wrap onto a second row or collide with the logos. The 992px
   media query below repeats the same rules so narrow screens are already
   collapsed on the very first paint (and stay usable if the script fails). */
body.nav-collapsed .navbar {
	position: fixed;
	right: 0px;
	top: 0px;
	height: 100vh;
	width: 60%;
	background-color: #005694;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	padding: 90px 0 30px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.5s ease-in;
	box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.2);
}

body.nav-collapsed .hamburger {
	display: block;
}

/* In the slide-in panel the models are already unfolded - there is nothing to
   hover, so the list is shown in full and the caret is dropped. */
body.nav-collapsed .navbar .has-dropdown {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.nav-collapsed .navbar .has-dropdown > a::after {
	content: none;
}

body.nav-collapsed .navbar .dropdown {
	position: static;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 14px 0 0;
	padding: 0;
	min-width: 0;
	opacity: 1;
	visibility: visible;
	transform: none;
	background-color: transparent;
	box-shadow: none;
	border-radius: 0;
}

body.nav-collapsed .navbar .dropdown a {
	padding: 0 10px;
}

/* While navbar.js measures the menu it briefly forces it back into its
   single-row form - including out of the media query below - so the measured
   width is always the real width of one row. Restored in the same task, so
   this state is never painted. */
body.nav-measuring .navbar {
	position: absolute;
	left: -99999px;
	top: 0;
	width: max-content;
	max-width: none;
	height: auto;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	background-color: transparent;
	box-shadow: none;
	transform: none;
	transition: none !important;
}

body.nav-measuring .navbar a {
	white-space: nowrap;
}

/* The dropdown is never part of the row's width. */
body.nav-measuring .navbar .dropdown {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	margin: 0;
	padding: 0;
}

/* --- MEDIA QUERIES (Merged Redundancies) --- */
@media (max-width: 992px) {
	/* Mirrors the body.nav-collapsed rules above - keep the two in step. */
	.navbar {
		position: fixed;
		right: 0px;
		top: 0px;
		height: 100vh;
		width: 60%;
		background-color: #005694;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 18px;
		padding: 90px 0 30px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.5s ease-in;
		box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.2);
	}
	.hamburger {
		display: block;
	}
	.navbar .has-dropdown {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.navbar .has-dropdown > a::after {
		content: none;
	}
	.navbar .dropdown {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		margin: 14px 0 0;
		padding: 0;
		min-width: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		background-color: transparent;
		box-shadow: none;
		border-radius: 0;
	}
	.navbar .dropdown a {
		padding: 0 10px;
	}
}

@media (max-width: 768px) {
	.navbar {
		gap: 10px;
		text-align: center;
	} /* Keeps the column flow if not using fixed side-nav */
	.hero-section {
		flex-direction: column;
		align-items: center;
	}
	.product-visuals {
		width: 80vw;
	}
	.product {
		max-width: 100%;
		padding: 15px;
	}
	.logo-left,
	.logo-right {
		width: 30vw;
	}
	.full-width-card {
		padding: 25px;
	}
}

@media (max-width: 576px) {
	.feature-columns {
		flex-direction: column;
	}

	.logos img {
		margin-left: 100px;
	}
}