/* dl-search
   Farben kommen aus den CSS-Variablen, die das Plugin je Site setzt.
   Nichts hier hardcodieren, sonst passt die Suche nur zu einem Shop. */

.dls {
	position: relative;
	width: 100%;
	max-width: 100%;
}

/* Eigene Regel statt Verlass auf .screen-reader-text des Themes. Fehlt die dort,
   stünde sonst „Suchbegriff" sichtbar neben der Lupe. */
.dls .dls-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.dls-field {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 999px;
	padding: 0 5px 0 16px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.dls-field:focus-within {
	border-color: var(--dls-accent, #2b6cb0);
	box-shadow: 0 0 0 3px var(--dls-accent-soft, rgba(0, 0, 0, .08));
}

/* ⚠️ Farbe hier explizit setzen, NICHT erben. Menü-Plugins färben im Header
   alles weiß, unser Feld hat aber weißen Hintergrund. */
.dls-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 15px;
	line-height: 1.4;
	padding: 9px 0;
	color: var(--dls-text, #1a1a1a);
	box-shadow: none;
}

.dls-input::placeholder {
	color: var(--dls-text, #1a1a1a);
	opacity: .5;
}

.dls-input::-webkit-search-cancel-button {
	cursor: pointer;
}

.dls-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dls-icon, #2b6cb0);
	cursor: pointer;
}

.dls-submit:hover {
	background: var(--dls-accent-soft, rgba(0, 0, 0, .06));
}

.dls-submit svg {
	fill: currentColor;
}

/* Im Menü: Breite begrenzen, damit das Feld die Navigation nicht aufschiebt.
   Das Panel darf breiter sein als das Feld, sonst passen Titel und Preis nicht. */

/* Im Menü bleibt es die Lupe und klappt nach links auf, genau wie vorher.
   Grund: zwischen dem letzten Menüpunkt und dem Warenkorb ist kein Platz,
   ein dauerhaft sichtbares Feld bricht die Menüzeile auf drei Zeilen um.
   Das Feld liegt deshalb absolut und schiebt nichts weg. */

/* ⚠️ Der seitliche Abstand muss hier gesetzt werden. Die übrigen Menüpunkte
   bekommen ihren Abstand aus dem Innenabstand ihres <a>, unser Element hat
   keins und klebt sonst direkt an den Nachbarn. Zielgröße: dieselbe Gesamt-
   breite wie ein Icon-Menüpunkt daneben (mawoge 48px = 34 Kreis + 2×7). */

/* ⚠️ Die Höhe kommt aus --dls-row, das JavaScript aus der Zeilenhöhe der
   Nachbar-Menüpunkte misst. Grund: nicht jedes Mega-Menu-Layout ist Flex.
   Auf mawoges Startseiten-Header ist das <ul> `display:block` mit 75px hohen
   Zeilen, unser 34px-Element saß dort 20px zu hoch. Mit gleicher Zeilenhöhe
   und mittiger Ausrichtung stimmt es in beiden Layouts. */

.dls-in-menu {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: var(--dls-circle, 40px);
	height: var(--dls-row, var(--dls-circle, 40px));
	margin: 0 var(--dls-menu-gap, 0);
}

.dls-in-menu .dls {
	position: static;
}

/* ⚠️ Eingeklappt MUSS gap und padding auf 0 stehen. Das Feld ist dann exakt
   40 px breit, der Knopf braucht selbst 40. Mit dem sonst üblichen gap von
   6 px ergibt das 46 px, und overflow:hidden schneidet dem Kreis rechts
   6 px ab. Er sieht dann eckig aus, obwohl border-radius korrekt 50 % ist. */

.dls-in-menu .dls-field {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: var(--dls-circle, 40px);
	height: var(--dls-circle, 40px);
	gap: 0;
	padding: 0;

	/* Rahmen muss hier weg, nicht nur transparent werden: bei box-sizing:border-box
	   bleiben sonst innen nur 38 px, und dem 40-px-Kreis wird rechts 1 px gekappt. */
	border-width: 0;
	background: transparent;
	overflow: hidden;
	transition: width .18s ease, background-color .18s ease, border-color .18s ease;
}

.dls-in-menu.is-open .dls-field {
	width: 300px;
	height: var(--dls-circle, 40px);
	max-width: calc(100vw - 32px);
	gap: 6px;
	padding: 0 5px 0 18px;
	background: #fff;
	border-width: 1px;
	border-color: rgba(0, 0, 0, .18);
}

.dls-in-menu .dls-input {
	font-size: 14px;
	width: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease;
}

.dls-in-menu.is-open .dls-input {
	width: auto;
}

.dls-in-menu.is-open .dls-input {
	opacity: 1;
	pointer-events: auto;
}

/* Eingeklappt: weißer Kreis mit farbigem Lupen-Icon. */
.dls-in-menu .dls-submit {
	width: var(--dls-circle, 40px);
	height: var(--dls-circle, 40px);
	background: #fff;
	border-radius: 50%;
	color: var(--dls-icon, #252e46);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	transition: background-color .18s ease, box-shadow .18s ease;
}

.dls-in-menu .dls-submit:hover {
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

/* Icon mit dem Kreis mitskalieren, sonst schwimmt es bei kleinen Kreisen. */
.dls-in-menu .dls-submit svg {
	width: calc(var(--dls-circle, 40px) * .5);
	height: calc(var(--dls-circle, 40px) * .5);
}

/* Aufgeklappt sitzt der Knopf im weißen Feld, dort wäre der Kreis nur Kante. */
.dls-in-menu.is-open .dls-submit {
	background: transparent;
	box-shadow: none;
}

.dls-in-menu.is-open .dls-submit:hover {
	background: var(--dls-accent-soft, rgba(0, 0, 0, .06));
	box-shadow: none;
}

.dls-in-menu .dls-panel {
	width: 380px;
	max-width: calc(100vw - 24px);
	left: auto;
	right: 0;
}

/* Variante "open": dauerhaft sichtbares Feld im Menü, wenn dort Platz ist.
   Breite kommt aus --dls-menu-width, damit sie je Site passt. */

.dls-in-menu--open {
	width: var(--dls-menu-width, 230px);
	height: 40px;
}

.dls-in-menu--open .dls-field,
.dls-in-menu--open.is-open .dls-field {
	position: relative;
	width: 100%;
	height: 40px;
	gap: 6px;
	padding: 0 5px 0 16px;
	background: #fff;
	border-width: 1px;
	border-color: rgba(0, 0, 0, .16);
}

.dls-in-menu--open .dls-input {
	width: auto;
	opacity: 1;
	pointer-events: auto;
}

.dls-in-menu--open .dls-submit {
	background: transparent;
	box-shadow: none;
}

/* Dropdown */

.dls-panel {
	position: absolute;
	z-index: 99999;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	color: #1a1a1a;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
	padding: 6px 0 0;
	text-align: left;
}

.dls-panel[hidden] {
	display: none;
}

.dls-panel.is-loading {
	opacity: .6;
}

.dls-group {
	margin: 6px 0 2px;
	padding: 0 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .45);
}

.dls-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dls-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dls-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px;
	text-decoration: none;
	color: inherit;
}

.dls-item:hover,
.dls-item.is-active {
	background: var(--dls-accent-soft, rgba(0, 0, 0, .06));
	text-decoration: none;
}

.dls-thumb {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background: var(--dls-muted, #f4f4f5);
	overflow: hidden;
}

.dls-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dls-thumb--icon svg {
	fill: rgba(0, 0, 0, .35);
}

.dls-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.dls-title {
	font-size: 14px;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dls-meta {
	font-size: 12px;
	line-height: 1.35;
	color: rgba(0, 0, 0, .55);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dls-meta .dls-price {
	color: inherit;
	font-weight: 600;
}

.dls-hl {
	background: var(--dls-highlight, rgba(0, 0, 0, .12));
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}

.dls-badge {
	flex: 0 0 auto;
	font-size: 11px;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 20px;
	background: var(--dls-muted, #f4f4f5);
	color: rgba(0, 0, 0, .6);
	white-space: nowrap;
}

.dls-badge--product {
	background: var(--dls-accent-soft, rgba(0, 0, 0, .08));
	color: var(--dls-accent, #2b6cb0);
}

.dls-badge--term {
	background: var(--dls-accent, #2b6cb0);
	color: #fff;
}

.dls-corrected {
	margin: 0;
	padding: 8px 14px;
	font-size: 13px;
	color: rgba(0, 0, 0, .6);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.dls-empty {
	padding: 16px 14px;
	font-size: 14px;
	color: rgba(0, 0, 0, .6);
}

.dls-all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 6px;
	padding: 11px 14px;
	border-top: 1px solid rgba(0, 0, 0, .08);
	font-size: 13px;
	font-weight: 600;
	color: var(--dls-accent, #2b6cb0);
	text-decoration: none;
}

.dls-all:hover {
	background: var(--dls-accent-soft, rgba(0, 0, 0, .06));
	text-decoration: none;
}

.dls-all-count {
	font-weight: 400;
	opacity: .7;
}

/* Ergebnisseite */

.dls-page-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 20px 60px;
}

.dls-results-title {
	margin: 0 0 6px;
}

.dls-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 26px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.dls-tab {
	padding: 6px 14px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 20px;
	font-size: 14px;
	text-decoration: none;
	color: inherit;
}

.dls-tab:hover {
	border-color: var(--dls-accent, #2b6cb0);
	text-decoration: none;
}

.dls-tab.is-active {
	background: var(--dls-accent, #2b6cb0);
	border-color: var(--dls-accent, #2b6cb0);
	color: #fff;
}

.dls-results-group {
	margin: 0 0 30px;
}

.dls-list--page .dls-item {
	padding: 10px 8px;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	gap: 14px;
}

.dls-list--page .dls-thumb {
	width: 56px;
	height: 56px;
}

.dls-list--page .dls-title {
	font-size: 16px;
	white-space: normal;
}

.dls-list--page .dls-meta {
	white-space: normal;
}

.dls-help {
	margin: 14px 0 0;
	padding-left: 18px;
	color: rgba(0, 0, 0, .6);
	font-size: 14px;
}

.dls-page-search {
	max-width: 460px;
	margin: 30px 0 0;
}

/* Mobil. Die Grenze ist bewusst 768px: das ist der `responsive_breakpoint`
   von Max Mega Menu auf dieser Site. Eine abweichende Grenze würde einen
   Streifen erzeugen, in dem das Menü noch im Desktop-Modus ist, unsere
   Regeln aber schon im Mobil-Modus. */

@media (max-width: 768px) {
	.dls-panel {
		position: fixed;
		top: auto;
		left: 12px;
		right: 12px;
		max-height: 60vh;
	}

	.dls-item {
		padding: 9px 12px;
	}

	/* Im ausgeklappten Mobilmenü ist senkrecht Platz genug. Das Feld steht
	   dort dauerhaft offen und über die volle Breite.
	   ⚠️ Das Mobilmenü ist nur 300px breit. Ein 300px-Feld mit right:0 liefe
	      links aus dem Bild, gemessen bei -535px. */
	.dls-in-menu {
		width: 100%;
		height: auto;
	}

	.dls-in-menu .dls-field,
	.dls-in-menu.is-open .dls-field {
		position: static;
		width: 100%;
		max-width: 100%;
		height: 40px;
		gap: 6px;
		padding: 0 5px 0 16px;
		background: #fff;
		border-width: 1px;
		border-color: rgba(0, 0, 0, .18);
	}

	.dls-in-menu .dls-input {
		width: auto;
		opacity: 1;
		pointer-events: auto;
	}

	.dls-in-menu .dls-submit {
		background: transparent;
		box-shadow: none;
	}

	.dls-in-menu .dls-panel {
		width: auto;
		left: 12px;
		right: 12px;
	}
}