/* ==================================================
   HEADER-HOME.CSS - HOMEPAGE HEADER FINAL
   Blocksy Child Theme
   File: assets/css/header-home.css

   Purpose:
   - Homepage-only dark premium header
   - Custom search bar with red submit segment and white magnifier
   - Right action panel: Kontakt / Warenkorb / Konto
   - White desktop menu text with red underline and red dropdown arrows

   Notes:
   - Loaded after header-base.css, header-menu.css and header-panels.css
   - Scoped to body.home to avoid archive/product page conflicts
================================================== */

/* ==================================================
   1. HOMEPAGE HEADER BACKGROUND
================================================== */

body.home #header,
body.home .ct-header,
body.home header[data-id="type-1"] {
	background: #0b0c11 !important;
	background-color: #0b0c11 !important;
}

body.home #header [data-row],
body.home .ct-header [data-row],
body.home .ct-header [data-row] > div,
body.home .ct-header [data-row] .ct-container,
body.home .ct-header [data-row] .ct-container-fluid {
	background-color: transparent !important;
}

body.home #header [data-row="top"],
body.home .ct-header [data-row="top"] {
	min-height: 112px !important;
	background:
		radial-gradient(circle at 8% 50%, rgba(224, 0, 0, 0.34), transparent 24%),
		linear-gradient(90deg, #240303 0%, #0a0b10 36%, #05060a 100%) !important;
	border-bottom: 1px solid rgba(224, 0, 0, 0.55) !important;
	box-shadow:
		inset 0 -1px 0 rgba(255, 255, 255, 0.04),
		0 12px 34px rgba(0, 0, 0, 0.42) !important;
}

body.home #header [data-row="top"] .ct-container,
body.home .ct-header [data-row="top"] .ct-container,
body.home #header [data-row="top"] .ct-container-fluid,
body.home .ct-header [data-row="top"] .ct-container-fluid {
	min-height: 112px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.home #header [data-row="main"],
body.home #header [data-row="middle"],
body.home #header [data-row="bottom"],
body.home .ct-header [data-row="main"],
body.home .ct-header [data-row="middle"],
body.home .ct-header [data-row="bottom"] {
	background: linear-gradient(180deg, #101116 0%, #090a0e 100%) !important;
	border-bottom: 1px solid rgba(255, 23, 23, 0.32) !important;
}

/* ==================================================
   2. LOGO
================================================== */

body.home .ct-header .site-logo-container img,
body.home .ct-header .custom-logo,
body.home .ct-header .ct-logo-container img {
	width: auto !important;
	max-height: 64px !important;
	filter:
		brightness(1.08)
		contrast(1.08)
		drop-shadow(0 0 12px rgba(224, 0, 0, 0.42)) !important;
}

/* ==================================================
   3. SEARCH + ACTIONS WRAPPER
================================================== */

body.home #header .akj-header-tools-pro,
body.home .ct-header .akj-header-tools-pro,
body.home .ct-sticky-container .akj-header-tools-pro {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 28px !important;
	width: 100% !important;
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

/* ==================================================
   4. SEARCH FORM
================================================== */

body.home #header .akj-header-search-pro,
body.home .ct-header .akj-header-search-pro,
body.home .ct-sticky-container .akj-header-search-pro {
	position: relative !important;
	display: flex !important;
	align-items: stretch !important;
	flex: 1 1 620px !important;
	width: 620px !important;
	min-width: 520px !important;
	max-width: 720px !important;
	height: 66px !important;
	min-height: 66px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 18px !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)),
		#111218 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 22px rgba(224, 0, 0, 0.18) !important;
	box-sizing: border-box !important;
}

body.home #header .akj-header-search-field,
body.home .ct-header .akj-header-search-field,
body.home .ct-sticky-container .akj-header-search-field {
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 66px !important;
	min-height: 66px !important;
	margin: 0 !important;
	padding: 0 34px !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #ffffff !important;
	caret-color: #ffffff !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	line-height: 66px !important;
	letter-spacing: 0.01em !important;
	box-sizing: border-box !important;
}

body.home #header .akj-header-search-field::placeholder,
body.home .ct-header .akj-header-search-field::placeholder,
body.home .ct-sticky-container .akj-header-search-field::placeholder {
	color: #ffffff !important;
	opacity: 0.94 !important;
}

body.home #header .akj-header-search-submit,
body.home .ct-header .akj-header-search-submit,
body.home .ct-sticky-container .akj-header-search-submit {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 112px !important;
	width: 112px !important;
	height: 66px !important;
	min-height: 66px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 0 18px 18px 0 !important;
	background:
		linear-gradient(180deg, #ff1616 0%, #d00000 48%, #9b0000 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 0 24px rgba(224, 0, 0, 0.42) !important;
	color: #ffffff !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition:
		background-color 0.2s ease,
		filter 0.2s ease,
		box-shadow 0.2s ease !important;
}

body.home #header .akj-header-search-submit:hover,
body.home #header .akj-header-search-submit:focus-visible,
body.home .ct-header .akj-header-search-submit:hover,
body.home .ct-header .akj-header-search-submit:focus-visible,
body.home .ct-sticky-container .akj-header-search-submit:hover,
body.home .ct-sticky-container .akj-header-search-submit:focus-visible {
	background:
		linear-gradient(180deg, #ff3030 0%, #d00000 55%, #970000 100%) !important;
	filter: brightness(1.08) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.24),
		0 0 28px rgba(255, 0, 0, 0.36) !important;
}

body.home #header .akj-header-search-submit::before,
body.home .ct-header .akj-header-search-submit::before,
body.home .ct-sticky-container .akj-header-search-submit::before {
	content: "" !important;
	position: absolute !important;
	top: 20px !important;
	left: 36px !important;
	width: 22px !important;
	height: 22px !important;
	border: 5px solid #ffffff !important;
	border-radius: 50% !important;
	box-sizing: border-box !important;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)) !important;
	pointer-events: none !important;
}

body.home #header .akj-header-search-submit::after,
body.home .ct-header .akj-header-search-submit::after,
body.home .ct-sticky-container .akj-header-search-submit::after {
	content: "" !important;
	position: absolute !important;
	top: 42px !important;
	left: 57px !important;
	width: 22px !important;
	height: 5px !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	transform: rotate(45deg) !important;
	transform-origin: left center !important;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)) !important;
	pointer-events: none !important;
}

body.home #header .akj-header-search-icon,
body.home .ct-header .akj-header-search-icon,
body.home .ct-sticky-container .akj-header-search-icon {
	display: block !important;
	width: 38px !important;
	height: 38px !important;
	color: #ffffff !important;
	fill: currentColor !important;
	pointer-events: none !important;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)) !important;
}

body.home #header .akj-header-search-submit:has(.akj-header-search-icon)::before,
body.home #header .akj-header-search-submit:has(.akj-header-search-icon)::after,
body.home .ct-header .akj-header-search-submit:has(.akj-header-search-icon)::before,
body.home .ct-header .akj-header-search-submit:has(.akj-header-search-icon)::after,
body.home .ct-sticky-container .akj-header-search-submit:has(.akj-header-search-icon)::before,
body.home .ct-sticky-container .akj-header-search-submit:has(.akj-header-search-icon)::after {
	display: none !important;
	content: none !important;
}

/* ==================================================
   5. ACTION PANEL
================================================== */

body.home #header .akj-header-actions-pro,
body.home .ct-header .akj-header-actions-pro,
body.home .ct-sticky-container .akj-header-actions-pro {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	align-items: stretch !important;
	justify-content: center !important;
	flex: 0 0 500px !important;
	width: 500px !important;
	min-width: 500px !important;
	max-width: 500px !important;
	height: 74px !important;
	min-height: 74px !important;
	margin: 0 !important;
	padding: 0 18px !important;
	gap: 0 !important;
	border: 1px solid rgba(184, 0, 0, 0.78) !important;
	border-radius: 20px !important;
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 23, 23, 0.11), rgba(255, 23, 23, 0) 48%),
		linear-gradient(180deg, rgba(12, 13, 18, 0.98) 0%, rgba(4, 5, 8, 0.98) 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 0 30px rgba(184, 0, 0, 0.18),
		0 16px 36px rgba(0, 0, 0, 0.34) !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

body.home #header .akj-header-action-item,
body.home .ct-header .akj-header-action-item,
body.home .ct-sticky-container .akj-header-action-item {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 74px !important;
	margin: 0 !important;
	padding: 0 18px !important;
	border: 0 !important;
	background: transparent !important;
	color: #ffffff !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	transition:
		background-color 0.22s ease,
		color 0.22s ease,
		transform 0.18s ease !important;
}

body.home #header .akj-header-action-item + .akj-header-action-item,
body.home .ct-header .akj-header-action-item + .akj-header-action-item,
body.home .ct-sticky-container .akj-header-action-item + .akj-header-action-item {
	border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
}

body.home #header .akj-header-action-item:hover,
body.home #header .akj-header-action-item:focus-visible,
body.home .ct-header .akj-header-action-item:hover,
body.home .ct-header .akj-header-action-item:focus-visible,
body.home .ct-sticky-container .akj-header-action-item:hover,
body.home .ct-sticky-container .akj-header-action-item:focus-visible {
	color: #ffffff !important;
	background: rgba(184, 0, 0, 0.18) !important;
	transform: translateY(-1px) !important;
	outline: 0 !important;
}

body.home #header .akj-header-action-label,
body.home .ct-header .akj-header-action-label,
body.home .ct-sticky-container .akj-header-action-label {
	display: block !important;
	color: #ffffff !important;
	font-size: 17px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: 0.01em !important;
	text-align: center !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* ==================================================
   6. HOMEPAGE DESKTOP MENU OVERRIDES
================================================== */

@media (min-width: 1000px) {
	body.home #header [data-row="middle"] [data-id="menu"] > nav > ul,
	body.home #header [data-row="middle"] [data-id="menu:1"] > nav > ul,
	body.home #header [data-row="bottom"] [data-id="menu"] > nav > ul,
	body.home #header [data-row="bottom"] [data-id="menu:1"] > nav > ul,
	body.home .ct-header [data-row="middle"] [data-id="menu"] > nav > ul,
	body.home .ct-header [data-row="middle"] [data-id="menu:1"] > nav > ul,
	body.home .ct-header [data-row="bottom"] [data-id="menu"] > nav > ul,
	body.home .ct-header [data-row="bottom"] [data-id="menu:1"] > nav > ul,
	body.home .ct-sticky-container [data-id="menu"] > nav > ul,
	body.home .ct-sticky-container [data-id="menu:1"] > nav > ul {
		align-items: center !important;
	}

	body.home #header [data-row="middle"] [data-id="menu"] > nav > ul > li > a,
	body.home #header [data-row="middle"] [data-id="menu:1"] > nav > ul > li > a,
	body.home #header [data-row="bottom"] [data-id="menu"] > nav > ul > li > a,
	body.home #header [data-row="bottom"] [data-id="menu:1"] > nav > ul > li > a,
	body.home .ct-header [data-row="middle"] [data-id="menu"] > nav > ul > li > a,
	body.home .ct-header [data-row="middle"] [data-id="menu:1"] > nav > ul > li > a,
	body.home .ct-header [data-row="bottom"] [data-id="menu"] > nav > ul > li > a,
	body.home .ct-header [data-row="bottom"] [data-id="menu:1"] > nav > ul > li > a,
	body.home .ct-sticky-container [data-id="menu"] > nav > ul > li > a,
	body.home .ct-sticky-container [data-id="menu:1"] > nav > ul > li > a {
		position: relative !important;
		color: #ffffff !important;
		font-size: 17px !important;
		font-weight: 850 !important;
		line-height: 1.2 !important;
		text-decoration: none !important;
		padding-bottom: 17px !important;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72) !important;
	}

	body.home #header [data-row="middle"] [data-id="menu"] > nav > ul > li > a::before,
	body.home #header [data-row="middle"] [data-id="menu:1"] > nav > ul > li > a::before,
	body.home #header [data-row="bottom"] [data-id="menu"] > nav > ul > li > a::before,
	body.home #header [data-row="bottom"] [data-id="menu:1"] > nav > ul > li > a::before,
	body.home .ct-header [data-row="middle"] [data-id="menu"] > nav > ul > li > a::before,
	body.home .ct-header [data-row="middle"] [data-id="menu:1"] > nav > ul > li > a::before,
	body.home .ct-header [data-row="bottom"] [data-id="menu"] > nav > ul > li > a::before,
	body.home .ct-header [data-row="bottom"] [data-id="menu:1"] > nav > ul > li > a::before,
	body.home .ct-sticky-container [data-id="menu"] > nav > ul > li > a::before,
	body.home .ct-sticky-container [data-id="menu:1"] > nav > ul > li > a::before {
		content: "" !important;
		position: absolute !important;
		left: 50% !important;
		bottom: 6px !important;
		width: 42px !important;
		height: 2px !important;
		border-radius: 999px !important;
		background:
			linear-gradient(
				90deg,
				rgba(255, 23, 23, 0) 0%,
				#ff1717 35%,
				#ff1717 65%,
				rgba(255, 23, 23, 0) 100%
			) !important;
		box-shadow: 0 0 10px rgba(255, 0, 0, 0.48) !important;
		transform: translateX(-50%) !important;
		pointer-events: none !important;
	}

	body.home #header [data-row="middle"] [data-id="menu"] > nav > ul > li:hover > a::before,
	body.home #header [data-row="middle"] [data-id="menu:1"] > nav > ul > li:hover > a::before,
	body.home #header [data-row="bottom"] [data-id="menu"] > nav > ul > li:hover > a::before,
	body.home #header [data-row="bottom"] [data-id="menu:1"] > nav > ul > li:hover > a::before,
	body.home .ct-header [data-row="middle"] [data-id="menu"] > nav > ul > li:hover > a::before,
	body.home .ct-header [data-row="middle"] [data-id="menu:1"] > nav > ul > li:hover > a::before,
	body.home .ct-header [data-row="bottom"] [data-id="menu"] > nav > ul > li:hover > a::before,
	body.home .ct-header [data-row="bottom"] [data-id="menu:1"] > nav > ul > li:hover > a::before,
	body.home .ct-sticky-container [data-id="menu"] > nav > ul > li:hover > a::before,
	body.home .ct-sticky-container [data-id="menu:1"] > nav > ul > li:hover > a::before,
	body.home #header [data-row="middle"] [data-id="menu"] > nav > ul > li.current-menu-item > a::before,
	body.home #header [data-row="middle"] [data-id="menu:1"] > nav > ul > li.current-menu-item > a::before,
	body.home #header [data-row="bottom"] [data-id="menu"] > nav > ul > li.current-menu-item > a::before,
	body.home #header [data-row="bottom"] [data-id="menu:1"] > nav > ul > li.current-menu-item > a::before {
		width: 52px !important;
		height: 3px !important;
		box-shadow: 0 0 14px rgba(255, 0, 0, 0.70) !important;
	}

	body.home #header [data-row="middle"] [data-id="menu"] > nav > ul > li > a :is(svg, .ct-icon),
	body.home #header [data-row="middle"] [data-id="menu:1"] > nav > ul > li > a :is(svg, .ct-icon),
	body.home #header [data-row="bottom"] [data-id="menu"] > nav > ul > li > a :is(svg, .ct-icon),
	body.home #header [data-row="bottom"] [data-id="menu:1"] > nav > ul > li > a :is(svg, .ct-icon),
	body.home .ct-header [data-row="middle"] [data-id="menu"] > nav > ul > li > a :is(svg, .ct-icon),
	body.home .ct-header [data-row="middle"] [data-id="menu:1"] > nav > ul > li > a :is(svg, .ct-icon),
	body.home .ct-header [data-row="bottom"] [data-id="menu"] > nav > ul > li > a :is(svg, .ct-icon),
	body.home .ct-header [data-row="bottom"] [data-id="menu:1"] > nav > ul > li > a :is(svg, .ct-icon),
	body.home .ct-sticky-container [data-id="menu"] > nav > ul > li > a :is(svg, .ct-icon),
	body.home .ct-sticky-container [data-id="menu:1"] > nav > ul > li > a :is(svg, .ct-icon) {
		color: #ff1717 !important;
		fill: #ff1717 !important;
		stroke: #ff1717 !important;
	}

	body.home #header [data-row="middle"] [data-id="menu"] .sub-menu a::before,
	body.home #header [data-row="middle"] [data-id="menu:1"] .sub-menu a::before,
	body.home #header [data-row="bottom"] [data-id="menu"] .sub-menu a::before,
	body.home #header [data-row="bottom"] [data-id="menu:1"] .sub-menu a::before,
	body.home .ct-header [data-row="middle"] [data-id="menu"] .sub-menu a::before,
	body.home .ct-header [data-row="middle"] [data-id="menu:1"] .sub-menu a::before,
	body.home .ct-header [data-row="bottom"] [data-id="menu"] .sub-menu a::before,
	body.home .ct-header [data-row="bottom"] [data-id="menu:1"] .sub-menu a::before,
	body.home .ct-sticky-container [data-id="menu"] .sub-menu a::before,
	body.home .ct-sticky-container [data-id="menu:1"] .sub-menu a::before {
		display: none !important;
		content: none !important;
	}
}

/* Homepage dropdown panels only. */
body.home #header [data-row] [data-id="menu"] .sub-menu,
body.home #header [data-row] [data-id="menu:1"] .sub-menu,
body.home .ct-header [data-row] [data-id="menu"] .sub-menu,
body.home .ct-header [data-row] [data-id="menu:1"] .sub-menu,
body.home .ct-sticky-container [data-id="menu"] .sub-menu,
body.home .ct-sticky-container [data-id="menu:1"] .sub-menu {
	background: #0d0e12 !important;
	border: 1px solid rgba(255, 23, 23, 0.30) !important;
	border-radius: 10px !important;
	box-shadow: 0 20px 46px rgba(0, 0, 0, 0.72) !important;
	overflow: hidden !important;
}

body.home #header [data-row] [data-id="menu"] .sub-menu a,
body.home #header [data-row] [data-id="menu:1"] .sub-menu a,
body.home .ct-header [data-row] [data-id="menu"] .sub-menu a,
body.home .ct-header [data-row] [data-id="menu:1"] .sub-menu a,
body.home .ct-sticky-container [data-id="menu"] .sub-menu a,
body.home .ct-sticky-container [data-id="menu:1"] .sub-menu a {
	background: transparent !important;
	color: #ffffff !important;
}

body.home #header [data-row] [data-id="menu"] .sub-menu a:hover,
body.home #header [data-row] [data-id="menu:1"] .sub-menu a:hover,
body.home .ct-header [data-row] [data-id="menu"] .sub-menu a:hover,
body.home .ct-header [data-row] [data-id="menu:1"] .sub-menu a:hover,
body.home .ct-sticky-container [data-id="menu"] .sub-menu a:hover,
body.home .ct-sticky-container [data-id="menu:1"] .sub-menu a:hover {
	background: linear-gradient(90deg, rgba(255, 23, 23, 0.22), rgba(255, 23, 23, 0.05)) !important;
}

/* ==================================================
   7. RESPONSIVE SAFETY
================================================== */

@media (max-width: 1200px) {
	body.home #header .akj-header-tools-pro,
	body.home .ct-header .akj-header-tools-pro,
	body.home .ct-sticky-container .akj-header-tools-pro {
		gap: 18px !important;
		max-width: 100% !important;
	}

	body.home #header .akj-header-search-pro,
	body.home .ct-header .akj-header-search-pro,
	body.home .ct-sticky-container .akj-header-search-pro {
		min-width: 300px !important;
		height: 56px !important;
		min-height: 56px !important;
	}

	body.home #header .akj-header-actions-pro,
	body.home .ct-header .akj-header-actions-pro,
	body.home .ct-sticky-container .akj-header-actions-pro {
		flex-basis: 430px !important;
		width: 430px !important;
		min-width: 430px !important;
		max-width: 430px !important;
		height: 68px !important;
		min-height: 68px !important;
	}

	body.home #header .akj-header-action-item,
	body.home .ct-header .akj-header-action-item,
	body.home .ct-sticky-container .akj-header-action-item {
		min-height: 68px !important;
		padding: 0 12px !important;
	}

	body.home #header .akj-header-action-label,
	body.home .ct-header .akj-header-action-label,
	body.home .ct-sticky-container .akj-header-action-label {
		font-size: 15px !important;
	}
}

@media (max-width: 1100px) {
	body.home #header .akj-header-search-pro,
	body.home .ct-header .akj-header-search-pro,
	body.home .ct-sticky-container .akj-header-search-pro {
		display: none !important;
	}

	body.home #header .akj-header-tools-pro,
	body.home .ct-header .akj-header-tools-pro,
	body.home .ct-sticky-container .akj-header-tools-pro {
		justify-content: flex-end !important;
	}
}

@media (max-width: 767px) {
	body.home #header [data-row="top"],
	body.home .ct-header [data-row="top"] {
		min-height: 72px !important;
	}

	body.home #header .akj-header-actions-pro,
	body.home .ct-header .akj-header-actions-pro,
	body.home .ct-sticky-container .akj-header-actions-pro {
		display: none !important;
	}

	body.home .ct-header .site-logo-container img,
	body.home .ct-header .custom-logo,
	body.home .ct-header .ct-logo-container img {
		max-height: 44px !important;
	}
}