/**
 * Warenkorb-Zähler außerhalb der Desktop-Navigation ausblenden.
 */
.childtheme-cart-count {
	display: none;
}


/**
 * Warenkorb-Button im Desktop-Menü
 */
@media only screen and (min-width: 1025px) {

	#menu-item-820 {
		display: flex !important;
		flex: 0 0 54px !important;
		align-items: center !important;
		align-self: center !important;

		width: 54px !important;
		height: 54px !important;
		margin: 0 !important;

		position: relative !important;
		top: 0;

		overflow: visible !important;
	}

	#menu-item-820 > .awb-menu__main-a {
		position: relative !important;

		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		flex: 0 0 54px !important;
		width: 54px !important;
		height: 54px !important;
		min-width: 54px !important;
		min-height: 54px !important;

		margin: 0 !important;
		padding: 0 !important;

		background: var(--awb-custom_color_2) !important;
		border: 0 !important;
		border-radius: 50% !important;
		box-shadow: none !important;

		color: #ffffff !important;
		line-height: 1 !important;

		transition:
			transform 0.2s ease,
			filter 0.2s ease;
	}

	#menu-item-820 > .awb-menu__main-background-default,
	#menu-item-820 > .awb-menu__main-background-active {
		display: none !important;
	}

	#menu-item-820 .menu-text {
		display: none !important;
	}

	#menu-item-820 .fusion-megamenu-icon {
		position: absolute !important;
		inset: 0 !important;

		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		width: 100% !important;
		height: 100% !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	#menu-item-820 .fusion-megamenu-icon i {
		margin: 0 !important;
		padding: 0 !important;

		color: #ffffff !important;
		font-size: 18px !important;
		line-height: 1 !important;
	}

	/* Einkaufswagen durch Einkaufstasche ersetzen */
	#menu-item-820 .fa-shopping-cart::before {
		content: "\f290" !important;
	}

	/**
	 * Dynamischer Warenkorb-Zähler
	 */
	#menu-item-820 .childtheme-cart-count {
		position: absolute;
		z-index: 10;
		top: -7px;
		right: -7px;

		display: flex;
		align-items: center;
		justify-content: center;

		min-width: 21px;
		height: 21px;
		padding: 0 5px;

		background-color: var(--awb-custom_color_5);
		border: 2px solid #ffffff;
		border-radius: 999px;

		color: #ffffff;
		font-family: Arial, sans-serif;
		font-size: 11px;
		font-weight: 700;
		line-height: 1;

		box-sizing: border-box;
		pointer-events: none;
	}

	/* Zähler bei leerem Warenkorb ausblenden */
	#menu-item-820 .childtheme-cart-count.is-empty {
		display: none !important;
	}

	#menu-item-820 > .awb-menu__main-a:hover {
		transform: scale(1.05);
		filter: brightness(1.08);
	}

	#menu-item-820 > .awb-menu__main-a:focus-visible {
		outline: 2px solid var(--awb-custom_color_2);
		outline-offset: 4px;
	}
}

/**
 * Trennlinie vor „Mein Konto“
 */
@media only screen and (min-width: 1025px) {

	.awb-menu .konto-trenner,
	.awb-menu .konto-trenner:hover,
	.awb-menu .konto-trenner:focus-within {
		position: relative !important;
		overflow: visible !important;
	}

	.awb-menu .konto-trenner::after,
	.awb-menu .konto-trenner:hover::after,
	.awb-menu .konto-trenner:focus-within::after {
		content: "" !important;

		position: absolute !important;
		z-index: 100 !important;

		top: 50% !important;
		left: -17px !important;

		display: block !important;
		width: 1px !important;
		height: 34px !important;

		background-color: rgba(31, 39, 51, 0.18) !important;

		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(-50%) !important;

		pointer-events: none;
	}
}

/**
 * Warenkorb-Icon auch bei geöffnetem Off-Canvas anzeigen.
 * Avadas automatisches Kreuz ausblenden.
 */
#menu-item-820 .awb-oc-close-icon,
#menu-item-820 > .awb-oc-menu-item-link .awb-oc-close-icon {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/**
 * Einkaufstasche dauerhaft sichtbar halten.
 */
#menu-item-820 .fusion-megamenu-icon,
#menu-item-820 > .awb-oc-menu-item-link .fusion-megamenu-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	opacity: 1 !important;
	visibility: visible !important;
}

/**
 * Taschen-Symbol erzwingen.
 */
#menu-item-820 .fa-shopping-cart::before {
	content: "\f290" !important;
}

/* =========================================================
   Mobile Kopfleiste: Suche, Konto, Warenkorb

   Gilt bis 1024px, also dort, wo die Desktop-Regeln oben noch
   nicht greifen.

   Der Warenkorb wird ueber die Klasse hof-menu-cart gestaltet,
   die inc/woocommerce/cart.php an Warenkorb-Menuepunkte haengt,
   und zusaetzlich ueber sein Ziel: jedes Listenelement, dessen
   Link auf das Warenkorb-Off-Canvas #awb-oc__813 zeigt. Das
   greift auch, wenn Avada die Adresse erst beim Ausgeben setzt
   und die Klasse deshalb fehlt. Suche und Konto ueber Avadas
   eigene Klassen der Spezial-Menuepunkte (custom-menu-search,
   avada-menu-login-box). Keine Menue-IDs.

   Ziel: drei gleich grosse Tippflaechen von 44px, Suche und
   Konto als ruhige dunkle Symbole, der Warenkorb als oranger
   Kreis mit Zaehler wie auf dem Desktop.
   ========================================================= */

@media only screen and (max-width: 1024px) {

	/* --- gemeinsame Tippflaeche fuer Suche und Konto --- */

	/* Die Listenelemente sind hoeher als die 44px-Flaeche und
	   setzten Suche und Konto ohne Zentrierung 10px zu hoch an
	   (gemessen). Das Such-Dropdown bleibt absolut positioniert
	   und ist davon nicht betroffen. */
	.awb-menu .custom-menu-search,
	.awb-menu .avada-menu-login-box {
		display: flex !important;
		align-items: center !important;
	}

	.awb-menu .custom-menu-search > .awb-menu__main-a,
	.awb-menu .avada-menu-login-box > .awb-menu__main-a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		min-width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		color: var(--awb-custom_color_1, #432c23) !important;
	}

	.awb-menu .custom-menu-search .awb-menu__i,
	.awb-menu .avada-menu-login-box .awb-menu__i {
		margin: 0 !important;
		padding: 0 !important;
	}

	.awb-menu .custom-menu-search .awb-menu__i i,
	.awb-menu .avada-menu-login-box .awb-menu__i i {
		color: inherit !important;
		font-size: 19px !important;
		line-height: 1 !important;
	}

	/* Schriftzug "Suche" nur noch fuer Screenreader; der Link
	   traegt ohnehin aria-label="Suche". */
	.awb-menu .custom-menu-search > .awb-menu__main-a .menu-title {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
	}

	/* Pfeil neben dem Konto-Symbol */
	.awb-menu .avada-menu-login-box .awb-menu__open-nav-submenu-hover {
		display: none !important;
	}

	/* Avadas Hover-Hintergruende der Menuepunkte ausblenden */
	.awb-menu .custom-menu-search > .awb-menu__main-background-default,
	.awb-menu .custom-menu-search > .awb-menu__main-background-active,
	.awb-menu .avada-menu-login-box > .awb-menu__main-background-default,
	.awb-menu .avada-menu-login-box > .awb-menu__main-background-active,
	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) > .awb-menu__main-background-default,
	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) > .awb-menu__main-background-active {
		display: none !important;
	}

	.awb-menu .custom-menu-search > .awb-menu__main-a:focus-visible,
	.awb-menu .avada-menu-login-box > .awb-menu__main-a:focus-visible {
		outline: 2px solid var(--awb-color5, #74763b);
		outline-offset: 2px;
		border-radius: 50%;
	}


	/* --- Warenkorb: oranger Kreis wie auf dem Desktop --- */

	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		margin-left: 6px !important;
		overflow: visible !important;
	}

	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) > .awb-menu__main-a {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		min-width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: var(--awb-custom_color_2, #c06c4e) !important;
		color: #fff !important;
		line-height: 1 !important;
	}

	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) .menu-text,
	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) .awb-oc-close-icon {
		display: none !important;
	}

	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) .fusion-megamenu-icon {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) .fusion-megamenu-icon i {
		margin: 0 !important;
		color: #fff !important;
		font-size: 17px !important;
		line-height: 1 !important;
	}

	/* Einkaufstasche statt Einkaufswagen, wie auf dem Desktop */
	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) .fa-shopping-cart::before {
		content: "\f290" !important;
	}

	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) > .awb-menu__main-a:focus-visible {
		outline: 2px solid var(--awb-custom_color_2, #c06c4e);
		outline-offset: 3px;
	}

	/* Zaehler, gleiche Gestaltung wie auf dem Desktop */
	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) .childtheme-cart-count {
		position: absolute;
		z-index: 10;
		top: -6px;
		right: -6px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		background-color: var(--awb-custom_color_5, #5e602f);
		border: 2px solid #fff;
		border-radius: 999px;
		color: #fff;
		font-family: Arial, sans-serif;
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
		box-sizing: border-box;
		pointer-events: none;
	}

	.awb-menu :is(.hof-menu-cart, li:has(> a[href="#awb-oc__813"])) .childtheme-cart-count.is-empty {
		display: none !important;
	}


	/* --- Trennstrich zwischen Suche und Konto ---

	   Gleiche Linie wie auf dem Desktop (dort ab 1025px an
	   .konto-trenner). Etwas Abstand links, damit der Strich
	   nicht an der Lupe klebt. */

	.awb-menu .avada-menu-login-box.konto-trenner {
		position: relative !important;
		margin-left: 10px !important;
	}

	.awb-menu .avada-menu-login-box.konto-trenner::after {
		content: "";
		position: absolute;
		top: 50%;
		left: -5px;
		width: 1px;
		height: 24px;
		background-color: rgba(31, 39, 51, 0.18);
		transform: translateY(-50%);
		pointer-events: none;
	}


	/* --- Such-Dropdown ueber die volle Breite ---

	   Avada richtet das Dropdown am Such-Menuepunkt aus, der nur
	   44px breit ist. Dazwischen liegen drei positionierte
	   Ebenen: Listenelement, Menueliste, Spalte und Reihe. Nur in
	   genau dem Zweig, der die Suche enthaelt, werden sie auf
	   static gestellt. Dann richtet sich das Dropdown am
	   vollbreiten Avada-Container aus (gemessen: x = 0, volle
	   Breite) und haengt direkt unter der Kopfleiste.

	   Die uebrigen absolut positionierten Elemente in diesem
	   Bereich sitzen in anderen Listenelementen (Warenkorb-
	   Zaehler, Menue-Hintergruende) und sind davon nicht
	   betroffen (geprueft). */

	.fusion-builder-row:has(> .fusion-layout-column .custom-menu-search),
	.fusion-layout-column:has(.custom-menu-search),
	.awb-menu__main-ul:has(> .custom-menu-search),
	.awb-menu .custom-menu-search {
		position: static !important;
	}

	.fusion-fullwidth:has(.custom-menu-search) {
		position: relative !important;
	}

	.awb-menu .custom-menu-search > .awb-menu__sub-ul {
		display: block !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 14px 24px 16px !important;
		box-sizing: border-box !important;
		background: #fff !important;
		border: 0 !important;
		border-top: 1px solid rgba(116, 118, 59, 0.2) !important;
		box-shadow: 0 10px 18px rgba(81, 69, 62, 0.1) !important;
	}

	.awb-menu .custom-menu-search > .awb-menu__sub-ul > li {
		width: 100% !important;
		padding: 0 !important;
	}

	/* Avada gibt der Formularhuelle 20px Innenabstand mit; ohne
	   ihn schliesst das Feld buendig mit dem Seiteninhalt ab. */
	.awb-menu .custom-menu-search > .awb-menu__sub-ul .fusion-search-form,
	.awb-menu .custom-menu-search > .awb-menu__sub-ul .fusion-search-form-content {
		width: 100% !important;
	}

	.awb-menu .custom-menu-search > .awb-menu__sub-ul .fusion-search-form-content {
		padding: 0 !important;
	}
}


/* =========================================================
   Suche im Menue (Overlay und Live-Ergebnisse)

   Avada faerbt Eingabe und Platzhalter mit den globalen
   Formularfarben. Gemessen war das #e2c39a, auf Weiss nur etwa
   1,8:1 Kontrast - deshalb wirkte die Eingabe so blass. Diese
   Farben hier nur fuer die Suche zu setzen ist sicherer, als
   die globalen Formularfarben zu aendern; daran haengen auch
   Kasse und Kontaktformular.

   Gruen ist das Olivgruen der Palette (--awb-color5), Text und
   Titel stehen im Braun (--awb-color3), damit sie lesbar
   bleiben.

   Spezifitaet: Avada setzt das Eingabefeld ueber
   .searchform .fusion-search-form-content .fusion-search-field input
   mit (0,3,1). Die eigenen Regeln nehmen zusaetzlich
   .fusion-live-search am selben Element und liegen damit hoeher.
   ========================================================= */

/* --- Eingabefeld --- */

/* Rand dauerhaft gruen - vorher nur im Fokus, sonst Beige.
   Gilt fuer das Desktop-Overlay (Formular "classic") und das
   mobile Dropdown (Formular "clean") gleichermassen. */
.searchform.fusion-live-search .fusion-search-form-content .fusion-search-field input {
	border: 1px solid var(--awb-color5, #74763b);
	border-radius: 3px;
	color: var(--awb-color3, #51453e);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.searchform.fusion-live-search .fusion-search-form-content .fusion-search-field input::placeholder {
	color: rgba(81, 69, 62, 0.55);
	opacity: 1;
}

.searchform.fusion-live-search .fusion-search-form-content .fusion-search-field input:focus {
	border-color: var(--awb-custom_color_5, #5e602f);
	box-shadow: 0 0 0 3px rgba(116, 118, 59, 0.16);
	outline: none;
}

/* --- Lupe im Suchfeld ---

   Die Lupe ist der Absende-Button mit Avadas Icon-Schrift.
   Avada faerbt ihn per JavaScript aus dem Attribut data-color
   (gemessen: rgb(226,195,154)) und schreibt die Farbe direkt
   ans Element. Ein Inline-Wert laesst sich nur mit !important
   ueberstimmen - das ist hier die Ausnahme, nicht die Regel.

   Sauberer waere, die Farbe in den Avada-Optionen zu aendern;
   dort haengt sie aber an den globalen Formularfarben, die auch
   Kasse und Kontaktformular betreffen. */

.searchform.fusion-live-search .fusion-search-button,
.searchform.fusion-live-search .fusion-search-submit {
	color: var(--awb-custom_color_1, #432c23) !important;
}

.searchform.fusion-live-search .fusion-search-button:hover,
.searchform.fusion-live-search .fusion-search-submit:hover {
	color: var(--awb-color5, #74763b) !important;
}

/* Die Lupe im Menue, die das Overlay oeffnet */
.awb-menu__overlay-search-trigger {
	color: var(--awb-custom_color_1, #432c23);
}


/* --- Kreuz zum Leeren des Feldes ---

   Das ist das browsereigene Symbol von input type="search".
   Chrome zeichnet es blau, was hier fremd wirkt. Es wird durch
   ein eigenes Kreuz als Maske ersetzt, damit es die Farben der
   Website uebernimmt. Firefox zeigt an dieser Stelle gar kein
   Symbol, dort aendert sich nichts. */

.searchform.fusion-live-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	margin-left: 8px;
	cursor: pointer;
	background-color: rgba(81, 69, 62, 0.55);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") center / contain no-repeat;
}

.searchform.fusion-live-search input[type="search"]::-webkit-search-cancel-button:hover {
	background-color: var(--awb-color5, #74763b);
}

/* Schliessen-Kreuz im Overlay */

.awb-menu__search-overlay .fusion-close-search::before,
.awb-menu__search-overlay .fusion-close-search::after {
	background: var(--awb-color3, #51453e);
}

/* --- Liste der Live-Ergebnisse --- */

.searchform.fusion-live-search .fusion-search-results {
	border: 1px solid rgba(116, 118, 59, 0.35);
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(81, 69, 62, 0.12);
}

.searchform.fusion-live-search .fusion-search-results .fusion-search-result {
	border-bottom: 1px solid rgba(116, 118, 59, 0.18);
	transition: background-color 0.15s ease;
}

.searchform.fusion-live-search .fusion-search-results .fusion-search-result:last-child {
	border-bottom: 0;
}

.searchform.fusion-live-search .fusion-search-results .fusion-search-result:hover,
.searchform.fusion-live-search .fusion-search-results .fusion-search-result:focus-within {
	background-color: rgba(116, 118, 59, 0.08);
}

.searchform.fusion-live-search .fusion-search-results .fusion-search-post-title {
	color: var(--awb-color3, #51453e);
}

.searchform.fusion-live-search .fusion-search-results .fusion-search-result:hover .fusion-search-post-title {
	color: var(--awb-color5, #74763b);
}

/* Die Zeile "Produkt" unter dem Titel */

.searchform.fusion-live-search .fusion-search-results .fusion-search-post-type {
	color: rgba(81, 69, 62, 0.6);
}