/*
 * Bewusst schlank gehalten: Buttons (.button), Mengenfeld (.quantity/.qty)
 * und Preis-HTML kommen aus WooCommerce/Theme und übernehmen automatisch
 * Farben/Schrift des aktiven Themes (z. B. Flatsome). Hier nur Layout,
 * keine eigene Farbpalette.
 *
 * --enb-ctrl-h: gemeinsame Höhe für Mengensteller + Warenkorb-Button, damit
 * beide exakt auf einer Linie sitzen statt je nach Theme-Padding zu springen.
 */

.enb-catalog {
	font-size: 0.95rem;
	--enb-ctrl-h: 2.3rem;
}

.enb-catalog [hidden] {
	display: none !important;
}

/* Schritt 1: Instrument-Auswahl */
.enb-instrument-step {
	padding: 0.15rem 0 1.25rem;
}

.enb-instrument-step__prompt {
	font-weight: 600;
	margin: 0 0 0.6rem;
}

.enb-instrument-step__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
	gap: 1.1rem;
	align-items: stretch;
}

/* Instrument-Karte: Bild oben, Titel + Beschreibung darunter - bewusst als
   <button> (nicht <a>), damit der bestehende Klick-Handler (data-enb-instrument-choice)
   unverändert greift, egal wo im Markup geklickt wird. Alle Karten sind
   strukturell identisch (fixe Bildfläche + Textbereich mit Zeilenbegrenzung),
   damit eine Reihe unabhängig von Bild-Seitenverhältnis und Textlänge sauber
   gleich hoch bleibt. */
.enb-instrument-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	text-align: left;
	gap: 0;
	padding: 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	font: inherit;
	color: inherit;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.enb-instrument-card:hover,
.enb-instrument-card:focus-visible {
	border-color: rgba(0, 0, 0, 0.28);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.enb-instrument-card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Immer als eigenes, gleich großes Quadrat gerendert - auch ohne Bild
   (Platzhalter-Icon auf dezentem Verlauf) - damit Karten mit und ohne
   hinterlegtes Bild nicht unterschiedlich hoch wirken. */
.enb-instrument-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	line-height: 0;
	background: linear-gradient(155deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02));
	flex: 0 0 auto;
}

.enb-instrument-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.enb-instrument-card--no-image .enb-instrument-card__image {
	font-size: 1.8rem;
	opacity: 0.25;
}

.enb-instrument-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.8rem 0.9rem 0.95rem;
}

.enb-instrument-card__title {
	font-weight: 700;
	font-size: 1.02em;
	line-height: 1.25;
}

.enb-instrument-card__text {
	font-size: 0.82em;
	opacity: 0.7;
	line-height: 1.35;
	/* Auf 2 Zeilen begrenzt, damit unterschiedlich lange Beschreibungen nicht
	   zu unterschiedlich hohen Karten in derselben Reihe führen. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Schritt 2: Kopfzeile */
.enb-active-instrument {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	font-size: 0.9em;
	padding: 0.35rem 0 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.enb-change-instrument {
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	padding: 0.2em 0.8em;
	font: inherit;
	font-size: 0.85em;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* Spalten-Flex statt Wrap-Trick: Suche, Kategorie-Filter und Schwierigkeits-
   Filter landen dadurch IMMER strikt untereinander (Suche oben, Filter darunter,
   Filter auch untereinander statt nebeneinander) - unabhängig von der
   verfügbaren Breite. !important haerten das gegen Theme-Floats/-Flex-Regeln
   ab, die sonst z. B. das Filter-Fieldset als Spalte links neben die Tabelle
   haben rutschen lassen konnten. */
.enb-toolbar {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	gap: 0.5rem !important;
	margin-bottom: 0.6rem;
}

.enb-toolbar__search {
	align-self: stretch !important;
	float: none !important;
	width: 100%;
	min-width: 0;
	padding: 0.45em 0.6em;
	height: var(--enb-ctrl-h);
	box-sizing: border-box;
}

/* Kategorie + Schwierigkeitsgrad wieder nebeneinander, aber als eigene Zeile
   UNTER der Suche (eigener Flex-Container statt direkter Toolbar-Kinder). */
.enb-toolbar__filters {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 0.6rem !important;
	width: 100%;
}

.enb-status {
	padding: 0.75rem 0.25rem;
	opacity: 0.7;
}

/* Filtergruppen (Kategorie, Schwierigkeitsgrad): auf schmalen Screens ein
   kompaktes <select>, ab 700px eine untereinanderstehende Checkbox-Liste. */
.enb-filter {
	flex: 0 0 auto !important;
	align-self: flex-start !important;
	float: none !important;
	width: auto !important;
	max-width: 100%;
}

.enb-filter__select {
	display: block !important;
	height: var(--enb-ctrl-h);
	padding: 0.35em 0.5em;
	box-sizing: border-box;
	max-width: 100%;
}

.enb-filter__checks {
	display: none !important;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	padding: 0.4rem 0.7rem !important;
	margin: 0 !important;
	min-width: 0;
	line-height: 1.15;
}

/* Native <legend>/<label>/<input> bringen im Theme oft eigene Abstände mit
   (z. B. großzügiges Label-margin-bottom für normale Formulare) - hier alles
   explizit auf 0, damit die Liste eng bleibt statt riesige Lücken zu zeigen. */
.enb-filter__checks legend {
	display: block;
	font-weight: 600;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	opacity: 0.65;
	margin: 0 !important;
	padding: 0 0 0.25rem !important;
	column-span: all;
}

.enb-filter__check {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.85em;
	line-height: 1.15;
	margin: 0 !important;
	padding: 0.1rem 0 !important;
	cursor: pointer;
	white-space: nowrap;
	break-inside: avoid;
}

.enb-filter__check input {
	margin: 0 !important;
	padding: 0;
	height: auto;
	width: auto;
}

/* Lange Kategorie-/Schwierigkeitsgrad-Listen sollen NICHT als eine hohe
   einspaltige Säule über der Tabelle stehen - stattdessen auf mehrere
   Spalten verteilen, damit z. B. 15 Kategorien nur ~5 Zeilen hoch statt 15
   Zeilen hoch sind. */
@media (min-width: 700px) {
	.enb-filter__select {
		display: none !important;
	}

	.enb-filter__checks {
		display: block !important;
		column-gap: 1.4rem;
		width: max-content;
		max-width: 100%;
	}

	/* Feste Spaltenzahl statt automatischer Berechnung - Kategorie hat
	   deutlich mehr Einträge als Schwierigkeitsgrad, deshalb unterschiedlich. */
	[data-enb-filter="kategorie"] .enb-filter__checks {
		columns: 3;
	}

	[data-enb-filter="schwierigkeit"] .enb-filter__checks {
		columns: 2;
	}
}

/* Kompakte "Tabelle" (Flex statt echtem <table>, damit sie sauber umbricht) */
.enb-table {
	display: block !important;
	width: 100% !important;
	float: none !important;
	clear: both;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.enb-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem 0.9rem;
	padding: 0.5rem 0.15rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.enb-row:nth-child(even) {
	background: rgba(0, 0, 0, 0.015);
}

/* Bild + Titel/Untertitel bilden bewusst eine eigene Gruppe, damit das Bild
   immer direkt neben Titel/Kleingedrucktem sitzt (auch beim Umbruch) statt
   quer über die ganze - ggf. höhere - Zeile inkl. Preis/Menge/Button zentriert
   zu werden. */
.enb-row__heading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1 1 220px;
	min-width: 0;
}

.enb-row__thumb {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.enb-row__thumb img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.enb-row__title {
	flex: 1 1 auto;
	min-width: 0;
}

.enb-row__title-line {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.enb-row__title-line a {
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.enb-row__video {
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	line-height: 1;
	font-size: 0.7em;
	cursor: pointer;
	flex: 0 0 auto;
	padding: 0;
}

.enb-row__subtitle {
	font-size: 0.78em;
	margin-top: 0.15em;
}

.enb-row__subtitle [data-enb-subtitle-static] {
	display: block;
	opacity: 0.65;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Bewusst NICHT gedimmt wie der Kategorie/Schwierigkeitsgrad-Text darüber -
   der Mengenrabatt-Hinweis soll auffallen, nicht im Fließtext untergehen. */
.enb-row__discount-hint {
	display: block;
	margin-top: 0.1em;
	font-weight: 600;
	color: #2e7d32;
}

.enb-row__discount-hint del {
	color: inherit;
	opacity: 0.55;
	font-weight: 400;
	text-decoration: line-through;
	margin-right: 0.35em;
}

.enb-row__meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: nowrap;
	flex: 0 0 auto;
}

.enb-row__price {
	font-weight: 600;
	white-space: nowrap;
	min-width: 4.5em;
	text-align: right;
}

.enb-row__price.is-discounted {
	color: #2e7d32;
}

.enb-row__qty {
	display: inline-flex;
	align-items: stretch;
	gap: 0.2rem;
	height: var(--enb-ctrl-h);
	position: relative;
}

.enb-row__qty input.qty {
	width: 2.6em;
	text-align: center;
	padding: 0;
	height: 100%;
	box-sizing: border-box;
}

.enb-row__qty a.minus,
.enb-row__qty a.plus {
	width: var(--enb-ctrl-h);
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	line-height: 1;
	box-sizing: border-box;
}

.enb-row .add_to_cart_button {
	position: relative;
	white-space: nowrap;
	height: var(--enb-ctrl-h);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0 1em;
	line-height: 1;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.enb-row .add_to_cart_button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Ladeanimation: Icon + Text ausblenden, Spinner zentriert einblenden -
   so ist immer sichtbar, ob der Warenkorb-Request noch läuft oder fertig ist. */
.enb-row__spinner {
	display: none !important;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1em;
	height: 1em;
	margin: -0.5em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: enb-spin 0.6s linear infinite;
}

@keyframes enb-spin {
	to {
		transform: rotate(360deg);
	}
}

.enb-row .add_to_cart_button.is-loading {
	cursor: progress;
}

.enb-row .add_to_cart_button.is-loading .icon-shopping-cart,
.enb-row .add_to_cart_button.is-loading .enb-row__cart-label {
	visibility: hidden !important;
}

.enb-row .add_to_cart_button.is-loading .enb-row__spinner {
	display: block !important;
}

.enb-row .add_to_cart_button.is-added {
	background-color: #2e7d32 !important;
	border-color: #2e7d32 !important;
	color: #fff !important;
}

.enb-popover {
	position: absolute;
	transform: translateY(-100%);
	margin-top: -0.5rem;
	background: #222;
	color: #fff;
	padding: 0.5em 0.7em;
	border-radius: 4px;
	font-size: 0.8em;
	max-width: 220px;
	z-index: 5;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.enb-load-more {
	display: block;
	margin: 1rem auto 0;
}

.enb-video-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	/* Höher als Flatsome-Sticky-Header/-Menü und die WP-Admin-Leiste
	   (#wpadminbar liegt bei 99999), damit das Video wirklich immer obenauf liegt. */
	z-index: 999999;
}

.enb-video-modal {
	position: relative;
	width: 100%;
	max-width: 720px;
}

.enb-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.enb-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.enb-video-close {
	position: absolute;
	top: -2rem;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}

@media (max-width: 560px) {
	.enb-row {
		justify-content: flex-start;
	}

	.enb-row__heading {
		flex-basis: 100%;
	}

	.enb-row__price {
		text-align: left;
		min-width: 0;
	}

	/* Warenkorb-Button wird auf Mobile zum reinen Icon, um in der schmalen
	   Zeile Platz zu sparen - Text bleibt per aria-label zugänglich. */
	.enb-row .add_to_cart_button {
		width: var(--enb-ctrl-h);
		padding: 0;
		justify-content: center;
	}

	.enb-row .add_to_cart_button .enb-row__cart-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Mindestbestellmenge pro Instrument */
.enb-minorder {
	margin: 0 0 1rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-left-width: 4px;
	border-radius: 4px;
	font-size: 0.9em;
}
.enb-minorder.is-incomplete {
	border-left-color: #e08a00;
}
.enb-minorder.is-complete {
	border-left-color: #2e7d32;
}
.enb-minorder__rule {
	margin: 0;
	opacity: 0.75;
}
.enb-minorder__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin-top: 0.4rem;
}
.enb-minorder__line:first-child {
	margin-top: 0;
}
.enb-minorder__label {
	font-weight: 600;
}
.enb-minorder__bar {
	flex: 1 1 8rem;
	max-width: 14rem;
	height: 0.5rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.1);
	overflow: hidden;
}
.enb-minorder__bar > span {
	display: block;
	height: 100%;
	background: #e08a00;
}
.enb-minorder__line.is-done .enb-minorder__bar > span {
	background: #2e7d32;
}
.enb-minorder__state {
	color: #b36b00;
	font-weight: 600;
}
.enb-minorder__line.is-done .enb-minorder__state {
	color: #2e7d32;
}
.enb-minorder__pick {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}
.enb-minorder__others {
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

/* Sortierung + Würfel */
.enb-sort {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
}
.enb-sort__select {
	margin: 0;
	height: var(--enb-ctrl-h);
	min-width: 9rem;
}
.enb-catalog .enb-sort .enb-sort__dice.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	height: var(--enb-ctrl-h) !important;
	width: auto !important;
	aspect-ratio: 1 / 1 !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	font-size: 1.2rem;
}
.enb-sort__dice.is-rolling {
	animation: enb-dice-roll 0.5s ease-out;
}
@keyframes enb-dice-roll {
	0% { transform: rotate(0); }
	60% { transform: rotate(300deg) scale(1.15); }
	100% { transform: rotate(360deg); }
}
.enb-minorder[hidden] {
	display: none;
}

/* Streichpreis: nur sichtbar, wenn ein Mengenrabatt aktiv ist */
.enb-row__price-old {
	color: inherit;
	opacity: 0.55;
	font-weight: 400;
	text-decoration: line-through;
	margin-right: 0.3em;
}

/* Warenkorb / Kasse / Mini-Cart */
.enb-minorder__block {
	margin: 0.5rem 0 0;
	font-weight: 600;
}
.enb-minorder__pick {
	color: inherit;
	text-decoration: underline;
}
.enb-minorder .enb-minorder__line {
	flex-wrap: wrap;
}
.enb-checkout-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
	display: block;
	text-align: center;
}
/* Im Mini-Cart-Popover kann die Box (Fortschritt + Vorschläge) höher werden
   als das Popover selbst - dann lieber die Box scrollen lassen, statt dass
   der Rest des Popovers (Warenkorb-Zeilen, Buttons) aus dem sichtbaren
   Bereich rutscht. overscroll-behavior verhindert, dass ein Scrollen bis zum
   Rand der Box die Seite dahinter mitscrollt. */
.widget_shopping_cart_content .enb-minorder {
	margin: 0.6rem 0;
	font-size: 0.85em;
	max-height: 40vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Im schmalen Mini-Cart-Popover: Vorschläge einspaltig statt im Grid. */
.widget_shopping_cart_content .enb-suggestions__grid {
	grid-template-columns: 1fr;
}

/* Notenvorschläge, Teil der Mindestmengen-Box (render_box() /
   render_suggestions_html()) - erscheint dadurch an allen Warenkorb-Stellen,
   auch im schmalen Mini-Cart-Popover, daher bewusst kompakt gehalten. */
.enb-suggestions {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.enb-suggestions__intro {
	font-weight: 600;
	margin: 0 0 0.5rem;
	font-size: 0.85em;
}

.enb-suggestions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.4rem;
}

/* flex-wrap: wrap ist bewusst gesetzt - der Titel soll nie abgeschnitten
   werden (siehe __title unten). Reicht der Platz neben Bild+Titel nicht mehr
   für den Button, rutscht er als Fallback in eine eigene Zeile statt den
   Titel zu kürzen. */
.enb-suggestions__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
}

.enb-suggestions__thumb {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.enb-suggestions__thumb img {
	width: 2.2rem;
	height: 2.2rem;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.enb-suggestions__body {
	flex: 1 1 8rem;
	min-width: 8rem;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.enb-suggestions__title {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.8em;
	/* Nicht mehr per Ellipsis abschneiden - lieber mehrzeilig (siehe Kommentar
	   bei __item zum Button-Fallback). */
	white-space: normal;
	overflow-wrap: break-word;
	line-height: 1.25;
}

.enb-suggestions__price {
	font-size: 0.78em;
	opacity: 0.75;
}

/* Kompakter Icon-Button (Warenkorb + Plus) statt großem Text-Button - passt
   dadurch auch in einer schmalen Zeile bzw. im Mini-Cart-Popover. */
.enb-suggestions__add {
	flex: 0 0 auto;
	/* Bleibt so auch dann rechtsbündig, wenn er (siehe __item) mangels Platz
	   in eine eigene Zeile rutscht. */
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.05em;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
}

.enb-suggestions__add:hover {
	background: rgba(0, 0, 0, 0.06);
}

.enb-suggestions__add-plus {
	font-size: 0.75em;
	font-weight: 700;
	margin-left: -0.05em;
}

.enb-suggestions__add.is-loading {
	opacity: 0.6;
	cursor: progress;
}