/**
 * MaxiCommerce — Widget „Produkt-Archiv".
 *
 * AUFBAU
 *
 * 1. **Variablen-Vertrag (wie Warenkorb, Menue und Galerie, CLAUDE.md).**
 *    Jedes Stil-Steuerelement im Elementor-Bedienfeld setzt eine
 *    `--mc-pa-*`-Variable, diese Datei liest sie. Kein Steuerelement
 *    schreibt je eine gepanzerte Eigenschaft direkt — Gruppen (Rahmen,
 *    Schatten, Typografie) laufen ueber `fields_options`.
 *
 * 2. **Theme-Panzer nur dort, wo Themes wirklich hinlangen.** Karten-
 *    Knoepfe, der Filter-Knopf, das Sortier-Menue, die Filter-Kaesten, die
 *    Seitenzahlen und `.onsale` sind echte `<button>`, `<select>`,
 *    `<input>`, `<a>` bzw. die eine Klasse, die praktisch jedes Shop-Theme
 *    selbst gestaltet. Genau diese Eigenschaften stehen hier mit
 *    `!important` und lesen ihren Wert IMMER aus einer Variablen. Alles
 *    andere (Bild, Karte, Texte) kommt ohne `!important` aus — dort kann
 *    ein Steuerelement gar nicht tot laufen.
 *
 * 3. **Anordnung ist Grid, nicht Markup.** Spaltenzahl, Seitenverhaeltnis
 *    und der Ort des Filter-Bedienfelds sind Buendel aus CSS-Variablen, die
 *    das Bedienfeld je Endgeraet an der WURZEL setzt. Elementor gibt je
 *    Endgeraet nur CSS aus, nie anderes Markup — anders liesse sich „am
 *    Rechner eine Filterspalte, auf dem Handy eine Schublade" nicht bauen.
 *
 * 4. **Die Schublade ist im geschlossenen Zustand klick-durchlaessig.**
 *    `visibility: hidden` UND `pointer-events: none`; erst `is-open`
 *    schaltet beides frei. Ein bildschirmfuellendes Element, dessen
 *    Unsichtbarkeit nur an einer Verschiebung haengt, schluckt sonst bei
 *    jedem Aussetzer dieser Logik jeden Klick auf der Seite.
 *
 * 5. **Bewegung nur ueber `transform` und `opacity`** — beides laeuft auf
 *    der Grafikkarte. Keine Animation von width/height/margin.
 *
 * @package MaxiCommerce
 * @author Sven Schoening
 */

/* ==========================================================================
   Spezifitaet der gepanzerten Bedienelemente
   ==========================================================================
   Die Basisregeln von Knopf, Filter-Knopf, Sortier-Menue, Ansichts-Schalter,
   Label, Chip, Seitenzahl, Farbfeld und Eingaben nennen ihre Klasse ZWEIMAL
   (`.mc-pa .mc-pa-btn.mc-pa-btn`, also (0,3,0)). Grund: Gegen ein Theme, das
   `.button` selbst mit `!important` einfaerbt, entscheidet die Spezifitaet —
   und bei Gleichstand (0,2,0) gegen (0,2,0) gewinnt schlicht die spaeter
   geladene Datei. Im Browser nachgestellt: Bei einfacher Klasse blieb die
   Theme-Flaeche stehen und der Farbregler war tot, bei doppelter greift er.
   Die Zustands-Regeln (`:hover`, `.is-current`, `.is-active`) setzen nur
   Variablen und brauchen die Anhebung nicht.

   ==========================================================================
   Wurzel
   ========================================================================== */

.mc-pa {
	/* Tempo: „leer" heisst Standardtempo, nicht „keine Bewegung" — deshalb
	   darf das als Token in der Wurzel stehen (Ausnahme wie in den anderen
	   Widgets). */
	--mc-pa-dur: 0.35s;
	--mc-pa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	display: block;
	min-width: 0;
	position: relative;
}

.mc-pa *,
.mc-pa *::before,
.mc-pa *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Tastatur-Fokus
   ==========================================================================
   Der blaue Browser-Ring ist hier weg — er passt in keinen Shop und tauchte
   ausserdem dort auf, wo gar keine Tastatur im Spiel war: Beim Schliessen
   der Schublade gibt das Skript den Fokus an den Filter-Knopf zurueck, und
   ein programmatischer Fokus gilt dem Browser als „sichtbar". Deshalb zwei
   Ebenen:

   1. Der Ring des Browsers und des Themes wird abgeraeumt (`:focus`).
   2. Ein zurueckhaltender, einstellbarer Ring erscheint NUR bei echter
      Tastatur-Bedienung (`:focus-visible`) — und auch der ist waehrend
      einer Fokus-Rueckgabe unterdrueckt (`.mc-pa--noring`, das Skript
      nimmt die Klasse beim naechsten Tastendruck wieder weg).

   Wer gar keinen Ring will, stellt die Farbe im Bedienfeld auf
   durchsichtig — die Bedienung per Tastatur bleibt davon unberuehrt. */

.mc-pa :focus {
	outline: none !important;
}

.mc-pa :focus-visible {
	outline: var(--mc-pa-focus-w, 2px) solid var(--mc-pa-focus-c, rgba(15, 23, 42, 0.45)) !important;
	outline-offset: var(--mc-pa-focus-off, 2px) !important;
}

.mc-pa.mc-pa--noring :focus-visible {
	outline: none !important;
}

.mc-pa .mc-pa-form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	display: block;
}

.mc-pa .mc-pa-shell {
	display: block;
	min-width: 0;
}

.mc-pa .mc-pa-live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mc-pa .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */

.mc-pa .mc-pa-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-pa-bar-gap, 16px);
	padding: var(--mc-pa-bar-pad, 0 0 16px 0);
	margin-bottom: var(--mc-pa-head-mb, 20px);
	border-bottom: 1px solid var(--mc-pa-bar-line, transparent);
	min-width: 0;
}

.mc-pa .mc-pa-head-l,
.mc-pa .mc-pa-head-r {
	display: flex;
	align-items: center;
	gap: var(--mc-pa-bar-gap, 16px);
	flex-wrap: wrap;
	min-width: 0;
}

.mc-pa .mc-pa-count {
	color: var(--mc-pa-count-c, inherit);
	font-family: var(--mc-pa-count-ff, inherit);
	font-size: var(--mc-pa-count-fs, 0.95em);
	font-weight: var(--mc-pa-count-fw, inherit);
	font-style: var(--mc-pa-count-fst, inherit);
	text-transform: var(--mc-pa-count-tt, none);
	text-decoration: var(--mc-pa-count-td, none);
	line-height: var(--mc-pa-count-lh, 1.4);
	letter-spacing: var(--mc-pa-count-ls, normal);
	word-spacing: var(--mc-pa-count-ws, normal);
	white-space: nowrap;
}

/* Filter-Knopf — echter `<button>`, deshalb gepanzert. */
.mc-pa .mc-pa-fbtn.mc-pa-fbtn {
	display: var(--mc-pa-fbtn-d, inline-flex) !important;
	align-items: center !important;
	gap: 8px !important;
	padding: var(--mc-pa-fbtn-pad, 10px 16px) !important;
	margin: 0 !important;
	border-radius: var(--mc-pa-fbtn-radius, 999px) !important;
	border-style: var(--mc-pa-fbtn-border-style, solid) !important;
	border-width: var(--mc-pa-fbtn-border-w, 1px) !important;
	border-color: var(--mc-pa-fbtn-border-color, currentColor) !important;
	background: var(--mc-pa-fbtn-bg, transparent) !important;
	color: var(--mc-pa-fbtn-c, inherit) !important;
	box-shadow: none !important;
	cursor: pointer;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	font-family: var(--mc-pa-fbtn-ff, inherit) !important;
	font-size: var(--mc-pa-fbtn-fs, 1em) !important;
	font-weight: var(--mc-pa-fbtn-fw, 500) !important;
	font-style: var(--mc-pa-fbtn-fst, inherit) !important;
	text-transform: var(--mc-pa-fbtn-tt, none) !important;
	text-decoration: var(--mc-pa-fbtn-td, none) !important;
	line-height: var(--mc-pa-fbtn-lh, 1.2) !important;
	letter-spacing: var(--mc-pa-fbtn-ls, normal) !important;
	word-spacing: var(--mc-pa-fbtn-ws, normal) !important;
	transition: background var(--mc-pa-dur) var(--mc-pa-ease), color var(--mc-pa-dur) var(--mc-pa-ease), border-color var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-fbtn-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: currentColor;
	font-size: 0.78em;
	line-height: 1;
}

.mc-pa .mc-pa-ico {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sortier-Menue — echtes `<select>`, deshalb gepanzert. */
.mc-pa .mc-pa-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.mc-pa .mc-pa-sort-l {
	color: var(--mc-pa-count-c, inherit);
	font-family: var(--mc-pa-count-ff, inherit);
	font-size: var(--mc-pa-count-fs, 0.95em);
	white-space: nowrap;
}

.mc-pa .mc-pa-sel {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.mc-pa .mc-pa-sel-i.mc-pa-sel-i {
	appearance: none !important;
	-webkit-appearance: none !important;
	padding: var(--mc-pa-sel-pad, 10px 40px 10px 16px) !important;
	margin: 0 !important;
	border-radius: var(--mc-pa-sel-radius, 999px) !important;
	border-style: var(--mc-pa-sel-border-style, solid) !important;
	border-width: var(--mc-pa-sel-border-w, 1px) !important;
	border-color: var(--mc-pa-sel-border-color, currentColor) !important;
	background: var(--mc-pa-sel-bg, transparent) !important;
	background-image: none !important;
	color: var(--mc-pa-sel-c, inherit) !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	cursor: pointer;
	font-family: var(--mc-pa-sel-ff, inherit) !important;
	font-size: var(--mc-pa-sel-fs, 1em) !important;
	font-weight: var(--mc-pa-sel-fw, inherit) !important;
	font-style: var(--mc-pa-sel-fst, inherit) !important;
	text-transform: var(--mc-pa-sel-tt, none) !important;
	line-height: var(--mc-pa-sel-lh, 1.2) !important;
	letter-spacing: var(--mc-pa-sel-ls, normal) !important;
	word-spacing: var(--mc-pa-sel-ws, normal) !important;
	text-decoration: var(--mc-pa-sel-td, none) !important;
}

.mc-pa .mc-pa-sel-c {
	position: absolute;
	right: 14px;
	pointer-events: none;
	color: var(--mc-pa-sel-c, inherit);
}

/* Ansichts-Umschalter. */
.mc-pa .mc-pa-view {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mc-pa .mc-pa-view-l {
	color: var(--mc-pa-count-c, inherit);
	font-family: var(--mc-pa-count-ff, inherit);
	font-size: var(--mc-pa-count-fs, 0.95em);
	white-space: nowrap;
}

.mc-pa .mc-pa-view-b {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mc-pa .mc-pa-vb.mc-pa-vb {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--mc-pa-vb-size, 40px) !important;
	height: var(--mc-pa-vb-size, 40px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--mc-pa-vb-radius, 999px) !important;
	border-style: var(--mc-pa-vb-border-style, solid) !important;
	border-width: var(--mc-pa-vb-border-w, 1px) !important;
	border-color: var(--mc-pa-vb-border-color, transparent) !important;
	background: var(--mc-pa-vb-bg, transparent) !important;
	color: var(--mc-pa-vb-c, inherit) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background var(--mc-pa-dur) var(--mc-pa-ease), color var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-vb svg {
	width: 55%;
	height: 55%;
	fill: currentColor;
	stroke: none;
}

/* ==========================================================================
   Koerper — Filterspalte + Raster
   ========================================================================== */

.mc-pa .mc-pa-body {
	display: grid;
	/* Die Spaltenzahl kommt aus dem Buendel — in der Schublade ist es EINE
	   Spalte. Mit einer nur 0 px breiten ersten Spalte bliebe sonst der
	   Spalten-Abstand als Einzug stehen, und das Raster staende links
	   eingerueckt gegen die Kopfzeile (Betreiber-Befund 1.60.1). */
	grid-template-columns: var(--mc-pa-body-cols, var(--mc-pa-sidebar-w, 260px) minmax(0, 1fr));
	gap: var(--mc-pa-body-gap, 40px);
	align-items: start;
	min-width: 0;
}

/* In der Schublade verschwindet die Huelle aus dem Raster (`contents`):
   Das Bedienfeld selbst steht dann `fixed`, ist also aus dem Fluss — und
   das Raster bleibt die einzige Spalte. */
.mc-pa .mc-pa-panelwrap {
	display: var(--mc-pa-panelwrap-d, block);
	min-width: 0;
}

.mc-pa .mc-pa-main {
	min-width: 0;
}

.mc-pa .mc-pa-results {
	min-width: 0;
}

.mc-pa .mc-pa-results[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity var(--mc-pa-dur) var(--mc-pa-ease);
}

/* Ohne Filter-Gruppen entfaellt die Spalte vollstaendig — sonst bliebe der
   Abstand zwischen zwei Spalten stehen, obwohl die erste leer ist. */
.mc-pa.mc-pa--nofilters .mc-pa-body {
	grid-template-columns: minmax(0, 1fr);
}

.mc-pa .mc-pa-grid {
	display: grid;
	grid-template-columns: var(--mc-pa-cols, repeat(4, minmax(0, 1fr)));
	column-gap: var(--mc-pa-gap-x, 24px);
	row-gap: var(--mc-pa-gap-y, 40px);
	min-width: 0;
}

.mc-pa.mc-pa--dense .mc-pa-grid {
	grid-template-columns: var(--mc-pa-cols-d, repeat(6, minmax(0, 1fr)));
}

/* ==========================================================================
   Karte
   ========================================================================== */

.mc-pa .mc-pa-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
	text-align: var(--mc-pa-ta, left);
	padding: var(--mc-pa-card-pad, 0px);
	background: var(--mc-pa-card-bg, transparent);
	border-radius: var(--mc-pa-card-radius, 0px);
	border-style: var(--mc-pa-card-border-style, none);
	border-width: var(--mc-pa-card-border-w, 0px);
	border-color: var(--mc-pa-card-border-color, transparent);
	box-shadow: var(--mc-pa-card-shadow, none);
	transition: transform var(--mc-pa-dur) var(--mc-pa-ease), box-shadow var(--mc-pa-dur) var(--mc-pa-ease), background var(--mc-pa-dur) var(--mc-pa-ease), border-color var(--mc-pa-dur) var(--mc-pa-ease);
}

/* Anheben nur in den Formen, die es vorsehen — und der Ausloeser sitzt an
   der Karte selbst, die sich dabei nur VERSCHIEBT (nicht skaliert): Ihre
   Trefferflaeche wandert damit nicht unter dem Zeiger weg, es gibt kein
   Zittern (Regel aus dem Menue-Widget). */
.mc-pa--fx-lift .mc-pa-card:hover,
.mc-pa--fx-both .mc-pa-card:hover {
	transform: translateY(calc(-1 * var(--mc-pa-card-lift, 6px)));
}

.mc-pa .mc-pa-info {
	display: flex;
	flex-direction: column;
	align-items: var(--mc-pa-ai, flex-start);
	gap: var(--mc-pa-info-gap, 6px);
	margin-top: var(--mc-pa-info-mt, 14px);
	min-width: 0;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Bild
   -------------------------------------------------------------------------- */

.mc-pa .mc-pa-media {
	position: relative;
	display: block;
	width: 100%;
	background: var(--mc-pa-media-bg, transparent);
	border-radius: var(--mc-pa-media-radius, 0px);
	border-style: var(--mc-pa-media-border-style, none);
	border-width: var(--mc-pa-media-border-w, 0px);
	border-color: var(--mc-pa-media-border-color, transparent);
	padding: var(--mc-pa-media-pad, 0px);
	overflow: hidden;
	isolation: isolate;

	/* Bild, Labels und Knopf liegen in DERSELBEN Grid-Zelle — sie decken
	   damit exakt das Bild ab, ohne eine einzige absolute Positionierung
	   (dasselbe Muster wie in der Produktgalerie). */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
}

.mc-pa .mc-pa-medialink {
	grid-area: 1 / 1;
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--mc-pa-ratio, 1);
	border: 0;
	box-shadow: none;
	text-decoration: none;
	overflow: hidden;
	border-radius: inherit;
}

.mc-pa .mc-pa-imgwrap {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.mc-pa .mc-pa-img {
	display: block;
	width: 100%;
	height: var(--mc-pa-img-h, 100%);
	max-width: 100%;
	object-fit: var(--mc-pa-img-fit, cover);
	object-position: center;
	border-radius: inherit;
	transition: transform var(--mc-pa-dur) var(--mc-pa-ease), opacity var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.mc-pa .mc-pa-card:hover .mc-pa-imgwrap.has-alt .mc-pa-img--main {
	opacity: 0;
}

.mc-pa .mc-pa-card:hover .mc-pa-imgwrap.has-alt .mc-pa-img--alt {
	opacity: 1;
}

.mc-pa--fx-zoom .mc-pa-card:hover .mc-pa-img,
.mc-pa--fx-both .mc-pa-card:hover .mc-pa-img {
	transform: scale(var(--mc-pa-img-scale, 1.05));
}

/* --------------------------------------------------------------------------
   Labels — dieselbe Grid-Zelle wie das Bild, keine absolute Positionierung
   -------------------------------------------------------------------------- */

.mc-pa .mc-pa-badges {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: var(--mc-pa-badge-ai, flex-start);
	justify-content: var(--mc-pa-badge-ji, flex-start);
	gap: var(--mc-pa-badge-gap, 6px);
	padding: var(--mc-pa-badge-off, 12px);
	pointer-events: none;
	z-index: 2;
}

/* `.onsale` ist die eine Klasse, die praktisch jedes Shop-Theme selbst
   gestaltet — regelmaessig mit `position: absolute`, eigenem `top/left` und
   `border-radius: 100%`, oft spezifischer als eine einfache Klasse. Deshalb
   steht sie hier gepanzert. */
.mc-pa .mc-pa-badge.mc-pa-badge {
	position: static !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	inset: auto !important;
	margin: 0 !important;
	padding: var(--mc-pa-badge-pad, 5px 10px) !important;
	border-radius: var(--mc-pa-badge-radius, 999px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	line-height: var(--mc-pa-badge-lh, 1.2) !important;
	font-family: var(--mc-pa-badge-ff, inherit) !important;
	font-size: var(--mc-pa-badge-fs, 0.78em) !important;
	font-weight: var(--mc-pa-badge-fw, 600) !important;
	font-style: var(--mc-pa-badge-fst, inherit) !important;
	text-transform: var(--mc-pa-badge-tt, none) !important;
	text-decoration: var(--mc-pa-badge-td, none) !important;
	letter-spacing: var(--mc-pa-badge-ls, normal) !important;
	word-spacing: var(--mc-pa-badge-ws, normal) !important;
	color: var(--mc-pa-badge-c, #ffffff) !important;
	background: var(--mc-pa-badge-bg, #111111) !important;
	box-shadow: none !important;
	pointer-events: auto;
}

.mc-pa .mc-pa-badge--sale {
	--mc-pa-badge-bg: #c0392b;
}

.mc-pa .mc-pa-badge--oos {
	--mc-pa-badge-bg: #6b7280;
}

.mc-pa .mc-pa-badge--new {
	--mc-pa-badge-bg: #111827;
}

/* --------------------------------------------------------------------------
   Knopf auf dem Bild
   -------------------------------------------------------------------------- */

.mc-pa .mc-pa-quick {
	grid-area: 1 / 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--mc-pa-badge-off, 12px);
	pointer-events: none;
	z-index: 3;
}

.mc-pa .mc-pa-quick > * {
	pointer-events: auto;
}

/* „Erst beim Ueberfahren zeigen": Auf Geraeten ohne Zeiger gibt es kein
   Ueberfahren — dort bleibt der Knopf sichtbar, sonst waere er fuer immer
   unerreichbar (dieselbe Notausgang-Regel wie bei den Galerie-Pfeilen). */
@media (hover: hover) and (pointer: fine) {
	.mc-pa--reveal .mc-pa-quick {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity var(--mc-pa-dur) var(--mc-pa-ease), transform var(--mc-pa-dur) var(--mc-pa-ease);
	}

	.mc-pa--reveal .mc-pa-card:hover .mc-pa-quick,
	.mc-pa--reveal .mc-pa-card:focus-within .mc-pa-quick {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Texte
   -------------------------------------------------------------------------- */

.mc-pa .mc-pa-cat,
.mc-pa .mc-pa-cat a {
	color: var(--mc-pa-cat-c, inherit);
	font-family: var(--mc-pa-cat-ff, inherit);
	font-size: var(--mc-pa-cat-fs, 0.8em);
	font-weight: var(--mc-pa-cat-fw, inherit);
	font-style: var(--mc-pa-cat-fst, inherit);
	text-transform: var(--mc-pa-cat-tt, uppercase);
	text-decoration: var(--mc-pa-cat-td, none);
	line-height: var(--mc-pa-cat-lh, 1.3);
	letter-spacing: var(--mc-pa-cat-ls, 0.04em);
	word-spacing: var(--mc-pa-cat-ws, normal);
}

.mc-pa .mc-pa-title {
	margin: 0;
	padding: 0;
	color: var(--mc-pa-title-c, inherit);
	font-family: var(--mc-pa-title-ff, inherit);
	font-size: var(--mc-pa-title-fs, 1em);
	font-weight: var(--mc-pa-title-fw, 600);
	font-style: var(--mc-pa-title-fst, inherit);
	text-transform: var(--mc-pa-title-tt, none);
	line-height: var(--mc-pa-title-lh, 1.35);
	letter-spacing: var(--mc-pa-title-ls, normal);
	word-spacing: var(--mc-pa-title-ws, normal);
	overflow-wrap: anywhere;
}

/* Der Produktname ist ein `<a>` — Themes faerben Links und geben ihnen
   Unterstreichungen, oft spezifischer als eine Klasse. Gepanzert. */
.mc-pa .mc-pa-titlelink.mc-pa-titlelink {
	color: inherit !important;
	text-decoration: var(--mc-pa-title-td, none) !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	transition: color var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em;
	color: var(--mc-pa-price-c, inherit);
	font-family: var(--mc-pa-price-ff, inherit);
	font-size: var(--mc-pa-price-fs, 1em);
	font-weight: var(--mc-pa-price-fw, 500);
	font-style: var(--mc-pa-price-fst, inherit);
	text-transform: var(--mc-pa-price-tt, none);
	text-decoration: var(--mc-pa-price-td, none);
	line-height: var(--mc-pa-price-lh, 1.3);
	letter-spacing: var(--mc-pa-price-ls, normal);
	word-spacing: var(--mc-pa-price-ws, normal);
	justify-content: var(--mc-pa-ai, flex-start);
	width: 100%;
}

.mc-pa .mc-pa-price .price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.mc-pa .mc-pa-price del,
.mc-pa .mc-pa-price del .amount,
.mc-pa .mc-pa-price del bdi {
	color: var(--mc-pa-price-del-c, currentColor);
	opacity: 0.6;
	text-decoration: line-through;
	font-weight: 400;
}

.mc-pa .mc-pa-price ins,
.mc-pa .mc-pa-price ins .amount,
.mc-pa .mc-pa-price ins bdi {
	color: var(--mc-pa-price-sale-c, currentColor);
	background: none;
	text-decoration: none;
}

.mc-pa .mc-pa-price-pre {
	opacity: 0.8;
}

.mc-pa .mc-pa-excerpt {
	margin: 0;
	color: var(--mc-pa-exc-c, inherit);
	font-family: var(--mc-pa-exc-ff, inherit);
	font-size: var(--mc-pa-exc-fs, 0.9em);
	font-weight: var(--mc-pa-exc-fw, inherit);
	font-style: var(--mc-pa-exc-fst, inherit);
	text-transform: var(--mc-pa-exc-tt, none);
	text-decoration: var(--mc-pa-exc-td, none);
	line-height: var(--mc-pa-exc-lh, 1.5);
	letter-spacing: var(--mc-pa-exc-ls, normal);
	word-spacing: var(--mc-pa-exc-ws, normal);
}

/* --------------------------------------------------------------------------
   Sterne
   --------------------------------------------------------------------------
   `MC_Product_Archive::star_row()` zeichnet jeden Stern als eigenes SVG.
   Groesse, Abstand und Farben kommen aus den Variablen des Widgets; die
   Masse stehen mit `!important`, weil Themes Inline-SVGs gern selbst
   bemessen (`svg { width: … }`). */

.mc-pa .mc-pa-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.mc-pa .mc-pa-stars {
	display: inline-flex !important;
	gap: var(--mc-pa-star-gap, 1px) !important;
	line-height: 0 !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
}

.mc-pa .mc-pa-stars svg {
	display: block !important;
	flex: none !important;
	width: var(--mc-pa-star-size, 15px) !important;
	height: var(--mc-pa-star-size, 15px) !important;
}

/* Im Bewertungsfilter feste, etwas kleinere Sterne — die Regler fuer
   Groesse und Abstand gelten den Karten. */
.mc-pa .mc-pa-opts--rating .mc-pa-stars {
	gap: 2px !important;
}

.mc-pa .mc-pa-opts--rating .mc-pa-stars svg {
	width: 14px !important;
	height: 14px !important;
}

/* Runde Zacken: Das Polygon wird in seiner eigenen Farbe mit rundem
   Join/Cap umrandet — der Stroke fuellt die spitzen Ecken auf.
   `stroke-width` in User-Units (viewBox 24), damit die Rundung in jeder
   Groesse gleich wirkt. */
.mc-pa .mc-pa-star-f,
.mc-pa .mc-pa-star-e {
	stroke-width: 2.6px !important;
	stroke-linejoin: round !important;
	stroke-linecap: round !important;
	stroke-miterlimit: 1 !important;
	paint-order: stroke fill !important;
}

.mc-pa .mc-pa-star-f {
	fill: var(--mc-pa-star-c, #1c1c1c) !important;
	stroke: var(--mc-pa-star-c, #1c1c1c) !important;
}

.mc-pa .mc-pa-star-e {
	fill: var(--mc-pa-star-e, #d8dbe0) !important;
	stroke: var(--mc-pa-star-e, #d8dbe0) !important;
}

.mc-pa .mc-pa-rating-n {
	color: var(--mc-pa-ratingn-c, inherit);
	font-family: var(--mc-pa-ratingn-ff, inherit);
	font-size: var(--mc-pa-ratingn-fs, 0.85em);
	font-weight: var(--mc-pa-ratingn-fw, inherit);
	font-style: var(--mc-pa-ratingn-fst, inherit);
	text-transform: var(--mc-pa-ratingn-tt, none);
	text-decoration: var(--mc-pa-ratingn-td, none);
	line-height: var(--mc-pa-ratingn-lh, 1.2);
	letter-spacing: var(--mc-pa-ratingn-ls, normal);
	word-spacing: var(--mc-pa-ratingn-ws, normal);
}

/* --------------------------------------------------------------------------
   Farbfelder
   -------------------------------------------------------------------------- */

.mc-pa .mc-pa-swatches {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mc-pa-sw-gap, 6px);
	justify-content: var(--mc-pa-ai, flex-start);
	width: 100%;
}

.mc-pa .mc-pa-sw.mc-pa-sw {
	display: block !important;
	width: var(--mc-pa-sw-size, 18px) !important;
	height: var(--mc-pa-sw-size, 18px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--mc-pa-sw-radius, 50%) !important;
	border-style: var(--mc-pa-sw-border-style, solid) !important;
	border-width: var(--mc-pa-sw-border-w, 1px) !important;
	border-color: var(--mc-pa-sw-border-color, rgba(0, 0, 0, 0.14)) !important;
	background-color: var(--mc-pa-sw-c, #e5e7eb) !important;
	background-size: cover !important;
	background-position: center !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: border-color var(--mc-pa-dur) var(--mc-pa-ease), transform var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-sw-more {
	font-size: 0.8em;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Knopf der Karte
   -------------------------------------------------------------------------- */

.mc-pa .mc-pa-actions {
	width: 100%;
	display: flex;
	justify-content: var(--mc-pa-ai, flex-start);
}

/* WooCommerce' eigener Knopf traegt `.button` — die Klasse, die jedes Theme
   gestaltet. Gepanzert, aber jede Eigenschaft aus einer Variablen. */
.mc-pa .mc-pa-btn.mc-pa-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: var(--mc-pa-btn-w, 100%) !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: var(--mc-pa-btn-pad, 12px 20px) !important;
	margin: 0 !important;
	border-radius: var(--mc-pa-btn-radius, 999px) !important;
	border-style: var(--mc-pa-btn-border-style, solid) !important;
	border-width: var(--mc-pa-btn-border-w, 1px) !important;
	border-color: var(--mc-pa-btn-border-color, currentColor) !important;
	background: var(--mc-pa-btn-bg, #111111) !important;
	color: var(--mc-pa-btn-c, #ffffff) !important;
	box-shadow: var(--mc-pa-btn-shadow, none) !important;
	text-decoration: var(--mc-pa-btn-td, none) !important;
	text-align: center !important;
	cursor: pointer;
	font-family: var(--mc-pa-btn-ff, inherit) !important;
	font-size: var(--mc-pa-btn-fs, 0.95em) !important;
	font-weight: var(--mc-pa-btn-fw, 600) !important;
	font-style: var(--mc-pa-btn-fst, inherit) !important;
	text-transform: var(--mc-pa-btn-tt, none) !important;
	line-height: var(--mc-pa-btn-lh, 1.2) !important;
	letter-spacing: var(--mc-pa-btn-ls, normal) !important;
	word-spacing: var(--mc-pa-btn-ws, normal) !important;
	transition: background var(--mc-pa-dur) var(--mc-pa-ease), color var(--mc-pa-dur) var(--mc-pa-ease), border-color var(--mc-pa-dur) var(--mc-pa-ease), box-shadow var(--mc-pa-dur) var(--mc-pa-ease);
}

/* WooCommerce haengt nach einem AJAX-Kauf ein „Warenkorb ansehen" hinter den
   Knopf. Es bleibt sichtbar, faellt aber in die Zeile darunter statt den
   Knopf zu verschieben. */
.mc-pa .mc-pa-actions .added_to_cart,
.mc-pa .mc-pa-quick .added_to_cart {
	display: block;
	width: 100%;
	margin-top: 8px;
	font-size: 0.85em;
	text-align: center;
}

/* ==========================================================================
   Filter-Bedienfeld
   ==========================================================================
   EIN Markup, zwei Betriebsarten: feste Spalte oder Schublade. Welche gilt,
   entscheidet je Endgeraet das Buendel an der Wurzel (`--mc-pa-panel-*`).
   Geschlossen ist die Schublade unsichtbar UND klick-durchlaessig. */

.mc-pa .mc-pa-panel {
	/* Das Bedienfeld ist ein `<dialog>`. Die Stile des Browsers dafuer
	   (Rahmen, Innenabstand, weisser Grund, `margin: auto`, Hoechstmasse)
	   werden hier abgeraeumt — sonst schluege das UA-Stylesheet auf jeden
	   Regler durch. */
	margin: 0;
	max-width: 100%;
	max-height: none;
	/* `height: auto` ist Pflicht: Das UA-Stylesheet gibt einem `<dialog>`
	   `height: fit-content` — damit spannt es sich NICHT zwischen `top` und
	   `bottom` auf, sondern wird nur so hoch wie sein Inhalt und haengt oben
	   am Rand. Genau so sah die Schublade nach der Umstellung auf `<dialog>`
	   aus (Betreiber-Befund 1.62.0). Erst mit `auto` gilt wieder die Regel
	   „oben UND unten gesetzt = aufspannen", und die Schublade reicht wie
	   der Slide-in-Warenkorb von Kante zu Kante. */
	height: auto;
	color: inherit;
	overscroll-behavior: contain;

	position: var(--mc-pa-panel-pos, sticky);
	inset: var(--mc-pa-panel-inset, 20px auto auto auto);
	width: var(--mc-pa-panel-w, 100%);
	background: var(--mc-pa-panel-bg, transparent);
	padding: var(--mc-pa-panel-pad, 0px);
	border-radius: var(--mc-pa-panel-radius, 0px);
	border-style: var(--mc-pa-panel-border-style, none);
	border-width: var(--mc-pa-panel-border-w, 0px);
	border-color: var(--mc-pa-panel-border-color, transparent);
	box-shadow: var(--mc-pa-panel-shadow, none);
	overflow: var(--mc-pa-panel-ov, visible);
	transform: var(--mc-pa-panel-t, none);
	min-width: 0;

	/* Schliessen: kurz und sauber — dieselbe Kurve und dieselbe Dauer wie
	   der Slide-in-Warenkorb. */
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* NUR im geoeffneten Zustand ein Flex-Container. Ohne die Bindung an
   `[open]` schluege die Regel das UA-`dialog:not([open]) { display: none }`
   — Autoren-Stile gewinnen immer gegen das UA-Stylesheet — und ein
   geschlossenes Bedienfeld staende sichtbar in der Seite. */
.mc-pa .mc-pa-panel[open] {
	display: flex;
	flex-direction: column;
}

/* Modal geoeffnet raeumt der Browser eigene Hoechstmasse ein — die muessen
   ebenfalls weg, sonst passt die Schublade nicht an den Bildschirmrand. */
.mc-pa .mc-pa-panel:modal {
	max-width: 100%;
	max-height: none;
}

/* Die Abdunklung zeichnet der BROWSER (`::backdrop`), nicht mehr ein
   eigenes bildschirmfuellendes Element in der Seite. Sie liegt damit in
   derselben Ebene wie das Bedienfeld (Top Layer) und deckt den Sichtbereich
   vollstaendig ab — dasselbe Bild wie beim Slide-in-Warenkorb, aber ohne
   dass etwas davon im Seiten-Inhalt haengt. Farbe und Zeiten sind
   uebernommen. */
.mc-pa .mc-pa-panel::backdrop {
	background: var(--mc-pa-scrim, rgba(15, 23, 42, 0.55));
	opacity: 0;
	transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mc-pa.is-open .mc-pa-panel::backdrop {
	opacity: 1;
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Offen: kraftvoller Slide mit weicher Landung — exakt die Kurve des
   Slide-in-Warenkorbs. Der Zustand steht AM BEDIENFELD, nicht an der
   Wurzel: An der Wurzel haette er dieselbe Spezifitaet wie das
   Endgeraete-Buendel und das Ergebnis hinge an der Ladereihenfolge. */
.mc-pa.is-open .mc-pa-panel {
	transform: translateX(0) !important;
	transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* Der Inhalt zieht mit leichtem Versatz nach — dieselbe Tiefe wie im
   Warenkorb, dieselben Kurven, dieselbe Staffelung. */
@keyframes mcPaDrawerIn {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
}

.mc-pa.is-open .mc-pa-panel-head {
	animation: mcPaDrawerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
}

.mc-pa.is-open .mc-pa-panel-b,
.mc-pa.is-open .mc-pa-panel-f {
	animation: mcPaDrawerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

.mc-pa .mc-pa-panel-head {
	display: var(--mc-pa-panel-h-d, none);
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: var(--mc-pa-panel-hpad, 0px);
	border-bottom: 1px solid var(--mc-pa-g-line, rgba(0, 0, 0, 0.1));
	flex: 0 0 auto;
}

.mc-pa .mc-pa-panel-t {
	color: var(--mc-pa-ptitle-c, inherit);
	font-family: var(--mc-pa-ptitle-ff, inherit);
	font-size: var(--mc-pa-ptitle-fs, 18px);
	font-weight: var(--mc-pa-ptitle-fw, 800);
	letter-spacing: var(--mc-pa-ptitle-ls, -0.02em);
	font-style: var(--mc-pa-ptitle-fst, inherit);
	text-transform: var(--mc-pa-ptitle-tt, none);
	text-decoration: var(--mc-pa-ptitle-td, none);
	line-height: var(--mc-pa-ptitle-lh, 1.2);
	word-spacing: var(--mc-pa-ptitle-ws, normal);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/* Zaehler-Pille neben der Ueberschrift — das Gegenstueck zum Artikel-
   Zaehler im Slide-in-Warenkorb. */
.mc-pa .mc-pa-panel-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--mc-pa-panel-bg-muted, rgba(0, 0, 0, 0.04));
	border: 1px solid var(--mc-pa-g-line, rgba(0, 0, 0, 0.1));
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
}

.mc-pa .mc-pa-panel-x.mc-pa-panel-x {
	all: unset;
	display: var(--mc-pa-panel-x-d, none) !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 999px !important;
	color: var(--mc-pa-close-c, #9ca3af) !important;
	cursor: pointer !important;
	flex: none !important;
	transition: color 0.16s ease, background 0.16s ease !important;
}

.mc-pa .mc-pa-panel-x.mc-pa-panel-x:hover {
	background: var(--mc-pa-panel-bg-muted, rgba(0, 0, 0, 0.04)) !important;
	color: var(--mc-pa-ptitle-c, #111827) !important;
}

.mc-pa .mc-pa-panel-b {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: var(--mc-pa-panel-bpad, 0px);
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
}

.mc-pa .mc-pa-panel-f {
	display: var(--mc-pa-panel-f-d, none);
	/* Spaltenweise, nicht nebeneinander: Der Knopf traegt die volle
	   Breite, der Ruecksetz-Link steht mittig darunter — dieselbe
	   Anordnung wie „Sicher zur Kasse" und „Warenkorb ansehen" im
	   Slide-in-Warenkorb. */
	flex-direction: column;
	align-items: stretch;
	padding: var(--mc-pa-panel-fpad, 0px);
	border-top: 1px solid var(--mc-pa-g-line, rgba(0, 0, 0, 0.1));
	background: var(--mc-pa-panel-bg, transparent);
	flex: 0 0 auto;
}

/* Der Ruecksetz-Link — das Gegenstueck zu „Warenkorb ansehen" unter dem
   Checkout-Knopf: mittig, zurueckhaltend, ohne Unterstreichung. Er wird
   ueberhaupt nur ausgegeben, wenn es etwas zurueckzusetzen gibt. */
.mc-pa .mc-pa-panel-clear.mc-pa-panel-clear {
	display: block !important;
	margin-top: 12px !important;
	padding: 0 !important;
	text-align: center !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--mc-pa-clear-c, rgba(15, 23, 42, 0.55)) !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: color 0.16s ease !important;
}

.mc-pa .mc-pa-panel-clear.mc-pa-panel-clear:hover {
	color: var(--mc-pa-clear-c-h, var(--mc-pa-apply-bg, #111827)) !important;
}

/* Der Knopf ist Zeile fuer Zeile der Checkout-Knopf des Slide-in-
   Warenkorbs: volle Breite, 16/24 Innenabstand, 16 px / 700, weicher
   Schatten, beim Ueberfahren dunkler und etwas tiefer — und KEIN
   `transform` (der Ausloeser saesse am Knopf selbst, seine Trefferflaeche
   wanderte unter dem Zeiger weg; dieselbe Rueckkopplung wie im Warenkorb,
   dort 1.27.2 entfernt). */
.mc-pa .mc-pa-panel-apply.mc-pa-panel-apply {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: var(--mc-pa-apply-pad, 16px 24px) !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--mc-pa-apply-radius, 14px) !important;
	background: var(--mc-pa-apply-bg, #111827) !important;
	color: var(--mc-pa-apply-c, #ffffff) !important;
	box-shadow: var(--mc-pa-apply-shadow, 0 8px 24px rgba(15, 23, 42, 0.14)) !important;
	cursor: pointer;
	font-family: var(--mc-pa-apply-ff, inherit) !important;
	font-size: var(--mc-pa-apply-fs, 16px) !important;
	font-weight: var(--mc-pa-apply-fw, 700) !important;
	font-style: var(--mc-pa-apply-fst, inherit) !important;
	text-transform: var(--mc-pa-apply-tt, none) !important;
	text-decoration: var(--mc-pa-apply-td, none) !important;
	line-height: var(--mc-pa-apply-lh, 1.2) !important;
	letter-spacing: var(--mc-pa-apply-ls, -0.01em) !important;
	word-spacing: var(--mc-pa-apply-ws, normal) !important;
	text-align: center !important;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.mc-pa .mc-pa-panel-apply.mc-pa-panel-apply:hover:not([disabled]) {
	background: var(--mc-pa-apply-bg-h, #0f172a) !important;
	color: var(--mc-pa-apply-c-h, var(--mc-pa-apply-c, #ffffff)) !important;
	box-shadow: var(--mc-pa-apply-shadow-h, 0 12px 28px rgba(15, 23, 42, 0.18)) !important;
}

.mc-pa .mc-pa-panel-apply.mc-pa-panel-apply:active:not([disabled]) {
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

/* Ohne Treffer fuehrt der Knopf nirgendwohin — dann sagt er das auch. */
.mc-pa .mc-pa-panel-apply.mc-pa-panel-apply[disabled] {
	opacity: 0.45 !important;
	cursor: not-allowed;
	box-shadow: none !important;
}

.mc-pa .mc-pa-apply-i {
	width: 1.1em;
	height: 1.1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Gruppen
   -------------------------------------------------------------------------- */

.mc-pa .mc-pa-g {
	border-bottom: 1px solid var(--mc-pa-g-line, rgba(0, 0, 0, 0.1));
}

.mc-pa .mc-pa-g-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: var(--mc-pa-gt-pad, 16px) 0;
	cursor: pointer;
	list-style: none;
	color: var(--mc-pa-gt-c, inherit);
	font-family: var(--mc-pa-gt-ff, inherit);
	font-size: var(--mc-pa-gt-fs, 1em);
	font-weight: var(--mc-pa-gt-fw, 600);
	font-style: var(--mc-pa-gt-fst, inherit);
	text-transform: var(--mc-pa-gt-tt, none);
	text-decoration: var(--mc-pa-gt-td, none);
	line-height: var(--mc-pa-gt-lh, 1.3);
	letter-spacing: var(--mc-pa-gt-ls, normal);
	word-spacing: var(--mc-pa-gt-ws, normal);
}

.mc-pa .mc-pa-g-h::-webkit-details-marker {
	display: none;
}

.mc-pa .mc-pa-g-i {
	display: inline-flex;
	transition: transform var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-g[open] > .mc-pa-g-h .mc-pa-g-i {
	transform: rotate(45deg);
}

.mc-pa .mc-pa-g-b {
	padding-bottom: var(--mc-pa-gt-pad, 16px);
}

.mc-pa .mc-pa-opts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mc-pa-opt-gap, 10px);
}

/* Farbfelder und Kacheln laufen in Zeilen statt untereinander. */
.mc-pa .mc-pa-g--d-swatch .mc-pa-opts,
.mc-pa .mc-pa-g--d-chips .mc-pa-opts {
	flex-direction: row;
	flex-wrap: wrap;
}

.mc-pa .mc-pa-opt {
	margin: 0;
	color: var(--mc-pa-opt-c, inherit);
	font-family: var(--mc-pa-opt-ff, inherit);
	font-size: var(--mc-pa-opt-fs, 0.95em);
	font-weight: var(--mc-pa-opt-fw, inherit);
	font-style: var(--mc-pa-opt-fst, inherit);
	text-transform: var(--mc-pa-opt-tt, none);
	text-decoration: var(--mc-pa-opt-td, none);
	line-height: var(--mc-pa-opt-lh, 1.3);
	letter-spacing: var(--mc-pa-opt-ls, normal);
	word-spacing: var(--mc-pa-opt-ws, normal);
}

.mc-pa .mc-pa-opt-l {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	min-width: 0;
	margin: 0;
	font: inherit;
	color: inherit;
}

/* Das echte Kaestchen bleibt bedienbar (Tastatur, Screenreader), ist aber
   unsichtbar — gezeichnet wird `.mc-pa-opt-box`. */
.mc-pa .mc-pa-opt-i.mc-pa-opt-i {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.mc-pa .mc-pa-opt-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--mc-pa-check-size, 20px);
	height: var(--mc-pa-check-size, 20px);
	border-radius: 5px;
	border: 1px solid var(--mc-pa-check-line, rgba(0, 0, 0, 0.28));
	background: transparent;
	transition: background var(--mc-pa-dur) var(--mc-pa-ease), border-color var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-opt-box svg {
	width: 70%;
	height: 70%;
	fill: none;
	stroke: #ffffff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--mc-pa-dur) var(--mc-pa-ease), transform var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-opt-i:checked ~ .mc-pa-opt-box {
	background: var(--mc-pa-check-bg, #111111);
	border-color: var(--mc-pa-check-bg, #111111);
}

.mc-pa .mc-pa-opt-i:checked ~ .mc-pa-opt-box svg {
	opacity: 1;
	transform: none;
}

.mc-pa .mc-pa-opt-i:focus-visible ~ .mc-pa-opt-box {
	outline: var(--mc-pa-focus-w, 2px) solid var(--mc-pa-focus-c, rgba(15, 23, 42, 0.45));
	outline-offset: var(--mc-pa-focus-off, 2px);
}

.mc-pa.mc-pa--noring .mc-pa-opt-i:focus-visible ~ .mc-pa-opt-box {
	outline: none;
}

.mc-pa .mc-pa-opt-t {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mc-pa .mc-pa-opt-c {
	margin-left: auto;
	color: var(--mc-pa-optc-c, inherit);
	opacity: 0.7;
	font-size: 0.9em;
	flex: none;
}

.mc-pa .mc-pa-opt-sw {
	display: inline-block;
	flex: none;
	width: var(--mc-pa-sw-size, 18px);
	height: var(--mc-pa-sw-size, 18px);
	border-radius: var(--mc-pa-sw-radius, 50%);
	border: 1px solid rgba(0, 0, 0, 0.14);
	background-color: var(--mc-pa-sw-c, #e5e7eb);
	background-size: cover;
	background-position: center;
}

/* Farbfelder-Darstellung: das Kaestchen entfaellt, gewaehlt wird am Ring. */
.mc-pa .mc-pa-g--d-swatch .mc-pa-opt-box {
	display: none;
}

.mc-pa .mc-pa-g--d-swatch .mc-pa-opt-l {
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.mc-pa .mc-pa-g--d-swatch .mc-pa-opt-sw {
	width: calc(var(--mc-pa-sw-size, 18px) * 1.8);
	height: calc(var(--mc-pa-sw-size, 18px) * 1.8);
	outline: 2px solid transparent;
	outline-offset: 3px;
	transition: outline-color var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-g--d-swatch .mc-pa-opt-i:checked ~ .mc-pa-opt-sw {
	outline-color: var(--mc-pa-check-bg, #111111);
}

/* Kachel-Darstellung. */
.mc-pa .mc-pa-g--d-chips .mc-pa-opt-box {
	display: none;
}

.mc-pa .mc-pa-g--d-chips .mc-pa-opt-l {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--mc-pa-check-line, rgba(0, 0, 0, 0.28));
	transition: background var(--mc-pa-dur) var(--mc-pa-ease), border-color var(--mc-pa-dur) var(--mc-pa-ease), color var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-g--d-chips .mc-pa-opt-i:checked ~ .mc-pa-opt-t {
	font-weight: 600;
}

.mc-pa .mc-pa-g--d-chips .mc-pa-opt.is-on .mc-pa-opt-l {
	background: var(--mc-pa-check-bg, #111111);
	border-color: var(--mc-pa-check-bg, #111111);
	color: #ffffff;
}

.mc-pa .mc-pa-opts-more.mc-pa-opts-more {
	margin-top: 10px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--mc-pa-opt-c, inherit) !important;
	box-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	text-decoration: underline !important;
	cursor: pointer;
	font: inherit !important;
}

/* Eintraege, die der „Alle anzeigen"-Knopf erst nachreicht. */
.mc-pa .mc-pa-opt.is-hidden {
	display: none;
}

/* --------------------------------------------------------------------------
   Preis
   -------------------------------------------------------------------------- */

.mc-pa .mc-pa-price-f {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mc-pa .mc-pa-range {
	position: relative;
	height: 22px;
	display: flex;
	align-items: center;
}

.mc-pa .mc-pa-range-t,
.mc-pa .mc-pa-range-a {
	position: absolute;
	height: 4px;
	border-radius: 999px;
	pointer-events: none;
}

.mc-pa .mc-pa-range-t {
	inset-inline: 0;
	background: var(--mc-pa-check-line, rgba(0, 0, 0, 0.18));
}

.mc-pa .mc-pa-range-a {
	left: var(--mc-pa-range-a, 0%);
	right: var(--mc-pa-range-b, 0%);
	background: var(--mc-pa-check-bg, #111111);
}

.mc-pa .mc-pa-range-i.mc-pa-range-i {
	position: absolute !important;
	inset-inline: 0 !important;
	width: 100% !important;
	height: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	pointer-events: none;
}

.mc-pa .mc-pa-range-i::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--mc-pa-check-bg, #111111);
	border: 2px solid #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
	cursor: grab;
}

.mc-pa .mc-pa-range-i::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--mc-pa-check-bg, #111111);
	border: 2px solid #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
	cursor: grab;
}

.mc-pa .mc-pa-range-i::-moz-range-track {
	background: transparent;
	border: 0;
}

.mc-pa .mc-pa-price-in {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mc-pa .mc-pa-price-fld {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid var(--mc-pa-check-line, rgba(0, 0, 0, 0.28));
}

.mc-pa .mc-pa-price-cur {
	opacity: 0.6;
	flex: none;
}

.mc-pa .mc-pa-price-i.mc-pa-price-i {
	width: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--mc-pa-opt-c, inherit) !important;
	box-shadow: none !important;
	outline: none !important;
	font: inherit !important;
}

.mc-pa .mc-pa-price-i::-webkit-outer-spin-button,
.mc-pa .mc-pa-price-i::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Aktive Filter
   -------------------------------------------------------------------------- */

.mc-pa .mc-pa-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.mc-pa .mc-pa-chip.mc-pa-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 12px !important;
	margin: 0 !important;
	border-radius: var(--mc-pa-chip-radius, 999px) !important;
	border-style: var(--mc-pa-chip-border-style, solid) !important;
	border-width: var(--mc-pa-chip-border-w, 1px) !important;
	border-color: var(--mc-pa-chip-border-color, rgba(0, 0, 0, 0.18)) !important;
	background: var(--mc-pa-chip-bg, transparent) !important;
	color: var(--mc-pa-chip-c, inherit) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	font-size: 0.88em !important;
	line-height: 1.2 !important;
	cursor: pointer;
}

.mc-pa .mc-pa-chip .mc-pa-ico {
	width: 0.9em;
	height: 0.9em;
}

.mc-pa .mc-pa-chip--reset {
	--mc-pa-chip-border-color: transparent;
	text-decoration: underline !important;
}

/* Scroll-Sperre der Seite, solange die Schublade offen ist — wie beim
   Slide-in-Warenkorb: `overscroll-behavior: none` verhindert, dass ein
   Wisch ueber der Schublade auf den Dokument-Scroller durchschlaegt
   (Scroll-Ketten, Pull-to-Refresh). Der Ausgleich der Rollbalken-Breite
   (`--mc-pa-lockgap`, vom Skript gemessen) nimmt zusaetzlich den Sprung,
   den ein blosses `overflow: hidden` erzeugt. */
html.mc-pa-lock,
html.mc-pa-lock body {
	overflow: hidden !important;
	overscroll-behavior: none !important;
}

html.mc-pa-lock {
	padding-right: var(--mc-pa-lockgap, 0px);
}

/* Mobil: fast volle Breite, weiterhin schwebend mit runden Ecken — genau
   wie der Slide-in-Warenkorb. */
@media (max-width: 520px) {
	.mc-pa .mc-pa-panel {
		inset: var(--mc-pa-panel-inset-m, var(--mc-pa-panel-inset, 20px auto auto auto));
		width: var(--mc-pa-panel-w-m, var(--mc-pa-panel-w, 100%));
	}
}

/* ==========================================================================
   Seitenanzeige
   ========================================================================== */

.mc-pa .mc-pa-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--mc-pa-pg-gap, 8px);
	margin-top: var(--mc-pa-pager-mt, 40px);
}

.mc-pa .mc-pa-pg.mc-pa-pg {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: var(--mc-pa-pg-size, 42px) !important;
	height: var(--mc-pa-pg-size, 42px) !important;
	min-height: 0 !important;
	padding: 0 10px !important;
	margin: 0 !important;
	border-radius: var(--mc-pa-pg-radius, 999px) !important;
	border-style: var(--mc-pa-pg-border-style, solid) !important;
	border-width: var(--mc-pa-pg-border-w, 1px) !important;
	border-color: var(--mc-pa-pg-border-color, transparent) !important;
	background: var(--mc-pa-pg-bg, transparent) !important;
	color: var(--mc-pa-pg-c, inherit) !important;
	box-shadow: none !important;
	text-decoration: var(--mc-pa-pg-td, none) !important;
	font-family: var(--mc-pa-pg-ff, inherit) !important;
	font-size: var(--mc-pa-pg-fs, 0.95em) !important;
	font-weight: var(--mc-pa-pg-fw, 500) !important;
	font-style: var(--mc-pa-pg-fst, inherit) !important;
	text-transform: var(--mc-pa-pg-tt, none) !important;
	line-height: var(--mc-pa-pg-lh, 1) !important;
	letter-spacing: var(--mc-pa-pg-ls, normal) !important;
	word-spacing: var(--mc-pa-pg-ws, normal) !important;
	transition: background var(--mc-pa-dur) var(--mc-pa-ease), color var(--mc-pa-dur) var(--mc-pa-ease), border-color var(--mc-pa-dur) var(--mc-pa-ease);
}

.mc-pa .mc-pa-pg--gap {
	border: 0 !important;
	background: none !important;
	min-width: 1.5em !important;
	padding: 0 !important;
}

.mc-pa .mc-pa-more.mc-pa-more {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: var(--mc-pa-more-pad, 14px 32px) !important;
	margin: 0 !important;
	border-radius: var(--mc-pa-more-radius, 999px) !important;
	border-style: var(--mc-pa-more-border-style, solid) !important;
	border-width: var(--mc-pa-more-border-w, 1px) !important;
	border-color: var(--mc-pa-more-border-color, currentColor) !important;
	background: var(--mc-pa-more-bg, transparent) !important;
	color: var(--mc-pa-more-c, inherit) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	font: inherit !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.mc-pa .mc-pa-more-s {
	display: none;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: mc-pa-spin 0.7s linear infinite;
}

.mc-pa .mc-pa-more.is-busy .mc-pa-more-s {
	display: inline-block;
}

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

/* ==========================================================================
   Leerzustand und Hinweis
   ========================================================================== */

.mc-pa .mc-pa-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 60px 20px;
	text-align: center;
	color: var(--mc-pa-empty-c, inherit);
	font-family: var(--mc-pa-empty-ff, inherit);
	font-size: var(--mc-pa-empty-fs, 1em);
	font-weight: var(--mc-pa-empty-fw, inherit);
	font-style: var(--mc-pa-empty-fst, inherit);
	text-transform: var(--mc-pa-empty-tt, none);
	text-decoration: var(--mc-pa-empty-td, none);
	line-height: var(--mc-pa-empty-lh, 1.5);
	letter-spacing: var(--mc-pa-empty-ls, normal);
	word-spacing: var(--mc-pa-empty-ws, normal);
}

.mc-pa .mc-pa-empty-i {
	width: 42px;
	height: 42px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	opacity: 0.5;
}

.mc-pa .mc-pa-empty-s {
	opacity: 0.7;
	font-size: 0.92em;
}

.mc-pa-note {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	text-align: center;
}

/* ==========================================================================
   Kleine Bildschirme
   ==========================================================================
   Die Kopfzeile darf auf dem Handy nie umbrechen, bis der Filter-Knopf
   allein steht — Trefferzahl und Beschriftungen weichen zuerst. */

@media (max-width: 767px) {
	.mc-pa .mc-pa-sort-l,
	.mc-pa .mc-pa-view-l {
		display: none;
	}

	.mc-pa .mc-pa-head {
		gap: 10px;
	}

	.mc-pa .mc-pa-head-l,
	.mc-pa .mc-pa-head-r {
		gap: 10px;
	}
}

/* ==========================================================================
   Weniger Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mc-pa *,
	.mc-pa *::before,
	.mc-pa *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}