/* ==========================================================================
   UI BUTTON & CHIP · components/ui-button.css
   Child-Theme: generatepress-child/assets/css/components/
   ---------------------------------------------------------------------
   STAND 10.09.26 - Architektur-Korrektur: KEIN @layer mehr.

   Vorherige Version lag in @layer components. Per CSS-Spezifikation ist
   ALLES in einem @layer automatisch schwächer als jedes nicht-layered
   CSS - unabhängig von Spezifität. GeneratePress schreibt seine
   Theme-Defaults (main.min.css) und Customizer-Werte (inline <style>)
   nicht-layered. Das Ergebnis: unsere spezifischeren Klassen
   (.ui-button--secondary) verloren gegen GPs bloße Tag-Selektoren
   (button), obwohl Spezifität dafür sprach - einzig weil wir in einem
   Layer steckten. Das musste mit .ui-button.css:hover !important
   an über einem Dutzend Stellen "repariert" werden - keine echte
   Lösung, nur Symptombekämpfung.

   Jetzt: ganz normales, nicht-layered CSS. Unsere Klassen-Selektoren
   (Spezifität 0,1,0) schlagen GPs Tag-Selektoren (Spezifität 0,0,1)
   nach den gewöhnlichen Kaskade-Regeln - kein !important nötig.

   AUSNAHME (10.09.26 ergänzt): border-radius nutzt trotzdem !important.
   Grund: Elementor schreibt eigene Kit-Styles wie
   ".elementor-kit-99 button { border-radius: 0px; }" - die Klasse
   ".elementor-kit-XX" ist pro Umgebung unterschiedlich benannt (dynamisch
   generierte Kit-ID), wir können also nicht einfach spezifischer werden,
   ohne diese ID hart zu verdrahten. Deshalb hier die einzige bewusste
   !important-Ausnahme in dieser Datei.

   ZWEITE AUSNAHME (28.09.26 ergänzt): border-color nutzt jetzt ebenfalls
   !important, aus demselben Grund wie oben, nur mit Ultimate Member statt
   Elementor als Kollisionspartner. UM liefert eigene, mitgelieferte
   CSS-Dateien (u. a. um-combined-styles-*.css), die jQuery-UI-Widgets
   stylen - und jQuery UI nennt seine Buttons traditionell ebenfalls
   ".ui-button" (reiner Namenszufall, hat nichts mit unserem Design-System
   zu tun). Dort steht sinngemäß ".um .ui-button { border: 1px solid
   #c5c5c5; ... }" - exakt dieselbe Spezifität (0,2,0) wie unsere eigene
   .ui-button.ui-button-Verdopplung in der Zusatzdatei "ui-button-um-fix.css"
   (siehe dort). Bei einem Spezifitäts-Gleichstand entscheidet die Lade-
   reihenfolge - und UMs CSS gewann sichtbar (grauer Rahmen z. B. am
   Bearbeiten-Stift im Profil-Header, obwohl --icon-ghost/--icon-only
   eigentlich transparent sein sollen). !important macht das unabhängig
   von der Ladereihenfolge zuverlässig. Betrifft ALLE border-color-Zeilen
   dieser Datei (auch die mit Primary-/Secondary-Farbe, nicht nur
   transparent) - .mp-filter-chip ist ausgenommen, die Klasse kollidiert
   nicht mit UM.

   STAND 10.09.26 (2): .ui-button--icon-ghost ergänzt (transparent im
   Ruhezustand, Rosa nur im Hover - für reine Icon-Buttons wie
   Modal-Close/Card-Edit, siehe Kommentar an der Klasse selbst).

   STAND 10.09.26 (3) - GRÖSSERE KORREKTUR: Der alte "Link-Zustände"-
   Block setzte pauschal "color: #fff" auf .ui-button:hover/:focus/
   :active - für ALLE Varianten, nicht nur Primary. Das führte bei
   Neutral Outline zu Crimson-Text auf Crimson-Fläche im Hover (weil
   .ui-button:hover zusätzlich background:primary-hover lieferte, ohne
   dass die Neutral-Regel das kontert) und zu weißem Text auf weißem
   Grund bei reinem Tastatur-Fokus/Active (keine eigene Farbe definiert,
   fiel auf den weißen Catch-all zurück). Secondary hatte denselben Bug
   beim Fokus/Active, nur seltener bemerkt. Tertiary blieb nur durch ein
   "!important" auf der Default-Farbe zufällig unbeschädigt - keine
   echte Lösung, siehe Begründung oben zu @layer.

   Fix: der pauschale Catch-all ist raus. Jede Variante definiert jetzt
   Default/Hover/Focus/Active selbst vollständig (background, border-
   color, color), verlässt sich auf keine fremde Fallback-Kaskade mehr.
   Neuer Token --mp-primary-active (#6B1530, Guide-Vorgabe "Active
   #6B1530") in mp-tokens.css ergänzt für den bisher fehlenden Primary-
   Active-Zustand.

   Konsumiert AUSSCHLIESSLICH Tokens aus mp-tokens.css (muss vorher
   geladen sein). Keine eigenen Hex-/px-Werte hier.

   Global geladen (nicht an Shortcode/Wrapper gebunden), damit die Klasse
   überall funktioniert.
   ========================================================================== */

/* ---- Basis: teilt sich mit generischen WP/Elementor-Buttons ----
   .mp-btn deckt Fremd-Markup ab (Gutenberg, Elementor, WP-Core),
   .ui-button ist die bewusst gesetzte Komponentenklasse in eigenem
   Markup. Beide bekommen exakt dieselben Basis-Regeln, damit es nie
   zwei visuelle Wahrheiten für "Primary Button" gibt. Diese Basis IST
   bereits die Primary-Variante - ohne zusätzliche --Modifier-Klasse
   sieht ein .ui-button aus wie hier definiert. */
.button,
.wp-block-button__link,
.elementor-button,
.mp-btn,
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  height: var(--mp-btn-height-md);
  padding: 0 var(--mp-btn-paddingx-md);
  border-radius: var(--mp-radius-md) !important;
  border: 1px solid transparent;
  background: var(--mp-primary);
  color: var(--mp-surface);
  font-family: var(--mp-font-body);
  font-weight: 600;
  font-size: var(--mp-btn-fontsize-md);
  line-height: var(--mp-lh-button);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Primary/default links: stronger than Elementor's .elementor-kit-XX a */
a.ui-button,
a.ui-button:visited {
  color: var(--mp-surface);
  text-decoration: none;
}

/* Explicit Primary modifier: used by markup such as ui-button--primary.
   The extra class gives this variant higher specificity than Elementor
   link-colour rules without using !important. */
.ui-button.ui-button--primary,
.ui-button.ui-button--primary:visited {
  color: var(--mp-surface);
}

/* ---- Primary: Default/Hover/Active/Focus ----
   Kein --Modifier nötig, das ist der unveränderte Grundzustand von
   .ui-button. Farben 1:1 aus dem Guide (Buttons-Kapitel):
   Default #951D40, Hover #7C1936, Active #6B1530. ---- */
.button:hover, .wp-block-button__link:hover,
.elementor-button:hover, .mp-btn:hover,
.ui-button:hover {
  background: var(--mp-primary-hover);
  color: var(--mp-surface);
}
.ui-button:active,
.mp-btn:active {
  background: var(--mp-primary-active);
  color: var(--mp-surface);
}
.ui-button:focus-visible,
.mp-btn:focus-visible {
  outline: none;
  box-shadow: var(--mp-shadow-focus);
}

/* ---- Größen ---- */
.ui-button--sm, .mp-btn--sm {
  height: var(--mp-btn-height-sm);
  padding: 0 var(--mp-btn-paddingx-sm);
  font-size: var(--mp-btn-fontsize-sm);
}
.ui-button--lg, .mp-btn--lg {
  height: var(--mp-btn-height-lg);
  padding: 0 var(--mp-btn-paddingx-lg);
  font-size: var(--mp-btn-fontsize-lg);
}

/* ============================================================
 * VARIANTEN
 * Jede Variante ist ab hier für sich vollständig: Default, Hover,
 * Active und - wo Farbe betroffen ist - Focus werden explizit
 * gesetzt. Keine Variante verlässt sich mehr darauf, dass eine
 * fremde Regel (z. B. die Primary-Hover/Active-Regeln oben) NICHT
 * zufällig mitgreift.
 * ============================================================ */

/* ---- Secondary: transparent, Crimson-Rahmen/-Text.
   Hover/Active-Rosa nutzt dieselben Alias-Tokens wie mp-tokens.css
   sie bereits für .mp-btn--secondary definiert - keine neuen Werte. ---- */
.ui-button.ui-button--secondary,
.mp-btn--secondary {
  background: var(--mp-btn-secondary-bg);
  border-color: var(--mp-btn-secondary-border) !important;
  color: var(--mp-btn-secondary-text);
}
.ui-button.ui-button--secondary:hover,
.mp-btn--secondary:hover {
  background: var(--mp-btn-secondary-bg-hover);
  border-color: var(--mp-btn-secondary-border-hover) !important;
  color: var(--mp-btn-secondary-text);
}
.ui-button.ui-button--secondary:active,
.mp-btn--secondary:active {
  background: var(--mp-btn-secondary-bg-active);
  border-color: var(--mp-btn-secondary-border-hover) !important;
  color: var(--mp-btn-secondary-text);
}

/* ---- Tertiary: nie eine Fläche, nur Text + Unterstrich im Hover.
   Kein !important mehr nötig, da der Farb-Leak (siehe Kopf-Kommentar)
   behoben ist - die Farbe hält jetzt allein durch korrekte Kaskade. ---- */
.ui-button.ui-button--tertiary {
  background: transparent;
  border-color: transparent !important;
  color: var(--mp-primary);
  padding-left: var(--mp-space-1);
  padding-right: var(--mp-space-1);
}
.ui-button.ui-button--tertiary:hover {
  background: transparent;
  border-color: transparent !important;
  color: var(--mp-primary);
}
.ui-button.ui-button--tertiary:hover span {
  text-decoration: underline;
}
.ui-button.ui-button--tertiary:active {
  background: var(--mp-btn-secondary-bg-hover);
  border-color: transparent !important;
  color: var(--mp-primary);
}

/* ---- Neutral Outline: weiße Fläche, Ink-Rahmen/-Text im Ruhezustand.
   Hover/Active bekommen JEDES betroffene Property explizit gesetzt
   (background UND border-color UND color) - das war exakt die Stelle,
   an der vorher "Crimson auf Crimson" entstand, weil background
   fehlte und von der generischen Hover-Regel weiter oben gefüllt
   wurde. Active bekommt zusätzlich Ink 100 als Flächen-Tönung fürs
   Druckgefühl - im Guide nicht einzeln bemaßt, nutzt aber
   ausschließlich den bestehenden Ink-100-Token, keinen neuen Wert. ---- */
.ui-button.ui-button--neutral-outline {
  background: var(--mp-surface);
  border-color: var(--mp-ink-300) !important;
  color: var(--mp-ink-900);
}
.ui-button.ui-button--neutral-outline:hover {
  background: var(--mp-surface);
  border-color: var(--mp-primary) !important;
  color: var(--mp-primary);
}
.ui-button.ui-button--neutral-outline:active {
  background: var(--mp-ink-100);
  border-color: var(--mp-primary) !important;
  color: var(--mp-primary);
}
.ui-button.ui-button--neutral-outline:focus-visible {
  background: var(--mp-surface);
  border-color: var(--mp-ink-300) !important;
  color: var(--mp-ink-900);
  outline: none;
  box-shadow: var(--mp-shadow-focus);
}
.ui-button.ui-button--neutral-outline:visited {
  color: var(--mp-ink-900);
}

/* ---- Icon-Ghost: für reine Icon-Buttons ohne Text ----
   Einsatz: Modal-Close (X), Card-Edit-Stift, alles wo NUR ein Icon in
   einer 44x44-Klickfläche sitzt (siehe .ui-button--icon-only unten,
   beide Klassen gehören zusammen). Ruhezustand komplett neutral/
   transparent - Crimson erscheint ausschließlich im Hover/Active als
   helles Rosa-Feld, nie als Solid-Fill. ---- */
.ui-button.ui-button--icon-ghost {
  background: transparent;
  border-color: transparent !important;
  color: var(--mp-ink-700);
}
.ui-button.ui-button--icon-ghost:visited {
  color: var(--mp-ink-700);
}
.ui-button.ui-button--icon-ghost:hover {
  background: var(--mp-btn-secondary-bg-hover);
  border-color: transparent !important;
  color: var(--mp-primary);
}
.ui-button.ui-button--icon-ghost:active {
  background: var(--mp-btn-secondary-bg-active);
  border-color: transparent !important;
  color: var(--mp-primary);
}
.ui-button.ui-button--icon-ghost:focus-visible {
  background: transparent;
  border-color: transparent !important;
  color: var(--mp-ink-700);
  outline: none;
  box-shadow: var(--mp-shadow-focus);
}
.ui-button.ui-button--icon-ghost:disabled,
.ui-button.ui-button--icon-ghost[aria-disabled="true"] {
  background: transparent;
  border-color: transparent !important;
  color: var(--mp-btn-secondary-text-disabled);
}

/* ---- Icon-Handling ----
   Icons erben ihre Farbe von color: currentColor - keine eigene
   color-Regel nötig. */
.ui-button i { font-size: 20px; }

.ui-button--icon-only {
  width: var(--mp-size-icon-btn);
  height: var(--mp-size-icon-btn);
  padding: 0;
}

/* Icon-only + Secondary zusammen: verhält sich wie --icon-ghost
   (transparent im Ruhezustand, Rosa nur im Hover/Active) statt wie
   normales Secondary mit Rahmen - Text-Secondary-Buttons wie
   "Abbrechen" (ohne --icon-only) bleiben unverändert mit Rahmen.
   Zentral hier definiert statt Markup in jedem Snippet anzufassen -
   die Klassen-Kombination im HTML bleibt überall gleich. */
.ui-button--secondary.ui-button--icon-only,
.mp-btn--secondary.mp-btn--icon-only {
  background: transparent;
  border-color: transparent !important;
  color: var(--mp-ink-700);
}
.ui-button--secondary.ui-button--icon-only:hover,
.mp-btn--secondary.mp-btn--icon-only:hover {
  background: var(--mp-btn-secondary-bg-hover);
  border-color: transparent !important;
  color: var(--mp-primary);
}
.ui-button--secondary.ui-button--icon-only:active,
.mp-btn--secondary.mp-btn--icon-only:active {
  background: var(--mp-btn-secondary-bg-active);
  border-color: transparent !important;
  color: var(--mp-primary);
}
.ui-button--secondary.ui-button--icon-only:focus-visible,
.mp-btn--secondary.mp-btn--icon-only:focus-visible {
  background: transparent;
  border-color: transparent !important;
  color: var(--mp-ink-700);
  outline: none;
  box-shadow: var(--mp-shadow-focus);
}

/* ---- Zustände: native Attribute, keine eigene .is-disabled Klasse ----
   Disabled sieht bei ALLEN Varianten gleich aus (Standard-UX-Pattern,
   Zustand ist wichtiger als Variante) - deshalb hier bewusst nicht
   pro Variante aufgesplittet, nur icon-ghost braucht eine eigene
   Zeile, weil es die einzige transparente Variante ohne Rahmen ist. ---- */
.ui-button:disabled,
.ui-button[aria-disabled="true"],
.mp-btn:disabled,
.mp-btn[aria-disabled="true"] {
  background: var(--mp-btn-secondary-bg-disabled, var(--mp-ink-100));
  border-color: var(--mp-btn-secondary-border-disabled) !important;
  color: var(--mp-btn-secondary-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.ui-button.ui-button--secondary:visited {
  color: var(--mp-btn-secondary-text);
}
.ui-button.ui-button--tertiary:visited {
  color: var(--mp-primary);
}

.ui-button.ui-button--tertiary:hover {
  background: transparent;
  border-color: transparent !important;
  color: var(--mp-primary);
}

/* ==========================================================================
   CHIP / PILL
   ========================================================================== */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  height: var(--mp-height-badge);
  padding: 0 var(--mp-space-3);
  border-radius: var(--mp-radius-pill) !important;
  background: var(--mp-ink-100);
  color: var(--mp-ink-700);
  font-size: var(--mp-fs-caption);
  font-weight: 500;
  transition: background-color .15s ease;
}
.ui-chip--removable { padding-right: var(--mp-space-2); }

.ui-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 999px !important;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: .7;
  transition: opacity .15s ease, background-color .15s ease;
}
.ui-chip__remove:hover { opacity: 1; background: rgba(20, 22, 28, .08); }
.ui-chip__remove:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: var(--mp-shadow-focus);
}

/* ---- Farbvarianten (Guide: Neutral = Basis .ui-chip, plus 6 Modifier).
   Icon optional: einfach ein <i> als erstes Kind setzen, gap auf
   .ui-chip positioniert es automatisch korrekt neben dem Text. ---- */
.ui-chip--primary  { background: var(--mp-primary-tint, #FBE9EF); color: var(--mp-primary); }
.ui-chip--info     { background: var(--mp-info-bg);    color: var(--mp-info); }
.ui-chip--success  { background: var(--mp-success-bg); color: var(--mp-success); }
.ui-chip--warning  { background: var(--mp-warning-bg); color: var(--mp-warning); }
.ui-chip--error    { background: var(--mp-error-bg);   color: var(--mp-error); }

/* "Neu" - einzige Variante mit vollflächigem statt Tint-Hintergrund */
.ui-chip--solid {
	background: var(--mp-primary);
	color: #fff;
}

.ui-chip i { font-size: 13px; }

/* ==========================================================================
   FILTER-CHIP (eigenständige Komponente, kein .ui-chip-Modifier)
   ---------------------------------------------------------------------
   Anders als .ui-chip: 36px hoch, größere Schrift (body-s statt
   caption), fett, echter Auswahl-Zustand statt reiner Info-Anzeige.
   Braucht mp-filter-chip.js für den Toggle.
   ========================================================================== */
.mp-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--mp-space-2);
	height: 36px;
	padding: 0 var(--mp-space-4);
	border-radius: var(--mp-radius-pill);
	border: 1px solid var(--mp-ink-300);
	background: var(--mp-surface, #fff);
	color: var(--mp-ink-900);
	font-family: var(--mp-font-body);
	font-size: var(--mp-fs-body-s);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mp-filter-chip:hover { border-color: var(--mp-ink-500); }
.mp-filter-chip:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }

.mp-filter-chip[aria-pressed="true"] {
	background: var(--mp-primary);
	border-color: var(--mp-primary);
	color: #fff;
}

/* X nur sichtbar, wenn der Chip aktiv ist - kein separates Markup pro
   Zustand nötig, das <span> steht immer im Markup, CSS blendet es aus/ein */
.mp-filter-chip__remove { display: none; }
.mp-filter-chip[aria-pressed="true"] .mp-filter-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	opacity: .85;
}
.mp-filter-chip[aria-pressed="true"] .mp-filter-chip__remove:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .2);
}
.mp-filter-chip__remove i { font-size: 14px; }

/* ==========================================================================
   PAGINATION (.mp-pagination)
   ---------------------------------------------------------------------
   Aus eigenständigem mp_pagination-Snippet integriert. Besteht
   ausschließlich aus .ui-button-Bausteinen (Seitenzahlen, Zurück/
   Weiter) + einer schlichten Ellipsis - deshalb hier statt in
   ui-card.css (keine eigene Box-Anatomie wie Card/Progress/Empty
   State, reine Button-Komposition).

   Deaktivierter Zustand (Zurück auf Seite 1, Weiter auf letzter
   Seite) nutzt bereits die bestehende generische
   .ui-button[aria-disabled="true"]-Regel weiter oben in dieser Datei -
   die Ursprungsversion hatte dafür eine EIGENE, zusätzliche Regel
   (".mp-pagination a[aria-disabled='true']"), die nie griff (Markup
   rendert an dieser Stelle <span>, nicht <a>) und ohnehin eine
   Parallelstruktur zur bestehenden Disabled-Regel gewesen wäre -
   ersatzlos entfernt.

   Fallback-Hex-Werte aus der Ursprungsversion entfernt (Tokens sind
   ohnehin immer geladen).
   ========================================================================== */

.mp-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
}

.mp-pagination__page.ui-button {
	min-width: var(--mp-btn-height-sm);
	padding: 0 var(--mp-space-2);
	text-align: center;
}

.mp-pagination__ellipsis {
	padding: 0 var(--mp-space-1);
	color: var(--mp-ink-500);
	font-size: var(--mp-fs-body-m);
	user-select: none;
}

/* ==========================================================================
   FILTER-TAGS-LEISTE (.mp-filter-tags)
   ---------------------------------------------------------------------
   Zeigt aktive Filter aus einem .mp-filter-panel als entfernbare Pillen
   an - nutzt AUSSCHLIESSLICH bestehendes .ui-chip/.ui-chip--removable,
   keine neue Chip-Optik. Checkbox bleibt die einzige Quelle der
   Wahrheit (siehe mp-filter-tags.js) - die Pillen sind nur eine
   automatisch mitlaufende Anzeige, kein eigener Zustand.
   ========================================================================== */

.mp-filter-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mp-space-2);
}

.mp-filter-tags__clear {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--mp-font-body);
	font-size: var(--mp-fs-caption);
	font-weight: 600;
	color: var(--mp-primary);
	cursor: pointer;
	text-decoration: underline;
}
.mp-filter-tags__clear:hover {
	color: var(--mp-primary-hover);
}
/* ---- Icon-Ghost, Danger-Variante: NUR für zerstörerische Aktionen
   (Löschen). Ruhezustand identisch zu --icon-ghost, im Hover/Active
   wird aber --mp-error statt --mp-primary genutzt, damit "Löschen"
   sich klar vom normalen Rosa-Hover unterscheidet. Kein neuer Token -
   nutzt den bestehenden --mp-error aus mp-tokens.css. ---- */
.ui-button--icon-ghost--danger:hover {
	background: var(--mp-error-bg);
	color: var(--mp-error);
}
.ui-button--icon-ghost--danger:active {
	background: var(--mp-error-bg);
	color: var(--mp-error);
}

/* ============================================================
 * MP CHAT-BUTTON (Better Messages)  - Stand 28.09.26 (v3)
 * Markup: mp_render_chat_button() im Snippet "MP Chat starten (Komponente)".
 * Seit v3 übernimmt die Komponente von Better Messages NUR die Ziel-Adresse
 * (href), nie deren Klassen/Attribute - der Link trägt ausschließlich
 * .ui-button-Klassen. Darum braucht es HIER keine Überschreibungen mehr:
 * .mp-chat-button ist ein normaler .ui-button und folgt automatisch Primary
 * (Standard), --secondary, --tertiary wie jeder andere Button auch.
 * Dieser Abschnitt bleibt nur als Fallback für den seltenen Fall, dass BM
 * kein <a href> liefert und mp_render_chat_button() BMs Original-Markup
 * unverändert zurückgibt (dann trägt der Link wieder BMs eigene Klasse).
 * ============================================================ */
.bm-pm-button.mp-chat-button {
  font-family: var(--mp-font-body) !important;
  font-size: var(--mp-btn-fontsize-md) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  background: var(--mp-primary) !important;
  color: var(--mp-surface) !important;
  transform: none !important;
  transition: background-color .15s ease !important;
}
.bm-pm-button.mp-chat-button:hover {
  background: var(--mp-primary-hover) !important;
  transform: none !important;
}