/*
 * WC Product Table
 * Alle Maße und Farben kommen aus CSS-Variablen (--wcpt-*), die die
 * Plugin-Einstellungen oder das Elementor-Widget setzen.
 */

.wcpt {
	container-type: inline-size;
	container-name: wcpt;
	color: var(--wcpt-text, #1a1a1a);
	font-size: var(--wcpt-font-size, 15px);
	position: relative;
}

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

/* WooCommerce legt in Preisspannen einen Text für Screenreader ab.
   Themes ohne eigene Regel dafür würden ihn sichtbar ausgeben. */
.wcpt .screen-reader-text,
.wcpt-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Werkzeugleiste ------------------------------------------------ */

.wcpt-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-block-end: 16px;
}

.wcpt-field {
	flex: 0 1 auto;
}

.wcpt-field--search {
	flex: 1 1 260px;
}

/* Mehrfachauswahl je Filter als Pillen. Das Kästchen bleibt für Tastatur und
   Screenreader im Markup, sichtbar ist nur die Beschriftung. */
.wcpt-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wcpt-pill {
	position: relative;
	display: inline-flex;
	max-inline-size: 100%;
	margin: 0;
	cursor: pointer;
	user-select: none;
}

.wcpt-pill input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.wcpt-pill-text {
	display: inline-flex;
	align-items: center;
	min-block-size: 36px;
	max-inline-size: 100%;
	padding: 7px 14px;
	border: 1px solid #d9dcec;
	border-radius: 18px;
	background: #fff;
	color: #2d3134;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	/* Lange Werte („Nicht resorbierbares chirurgisches Nahtmaterial") brechen
	   um, statt das Panel seitlich scrollbar zu machen. */
	white-space: normal;
	overflow-wrap: anywhere;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wcpt-pill:hover .wcpt-pill-text {
	background: #f5fbff;
}

.wcpt-pill input:checked + .wcpt-pill-text {
	border-color: var(--mn-accent, #283583);
	background: var(--mn-accent, #283583);
	color: #fff;
}

.wcpt-pill input:focus-visible + .wcpt-pill-text {
	box-shadow: 0 0 0 3px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.25);
}

/* Offen in der Leiste (ohne Panel) bleibt die Höhe begrenzt. */
.wcpt-toolbar > .wcpt-field .wcpt-choices {
	max-block-size: 132px;
	overflow-y: auto;
	min-inline-size: 220px;
	padding: 8px;
}

/* Mit .wcpt davor: Themes gestalten input[type="search"] und select über
   Attributselektoren, die eine einzelne Klasse sonst überstimmen. */
.wcpt .wcpt-panel .wcpt-search {
	inline-size: 100%;
}

.wcpt .wcpt-search,
.wcpt .wcpt-perpage {
	inline-size: 100%;
	padding: var(--wcpt-input-py, 10px) var(--wcpt-input-px, 14px);
	font-size: var(--wcpt-input-font-size, 15px);
	font-family: inherit;
	color: var(--wcpt-input-color, #1a1a1a);
	background: var(--wcpt-input-bg, #fff);
	border: var(--wcpt-input-border, 1px) solid var(--wcpt-input-border-color, #e6e6e6);
	border-radius: var(--wcpt-input-radius, 0);
	line-height: 1.4;
}

.wcpt-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 4px;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
}

.wcpt-check input {
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	accent-color: var(--wcpt-btn-bg, #111);
	cursor: pointer;
}

.wcpt .wcpt-search:focus-visible,
.wcpt .wcpt-perpage:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* Suchfeld im Stil der Live-Suche: Lupe, 56 px hoch, runde Ecken, Fokus-Schein.
   Über eigene Variablen anpassbar, unabhängig vom Mengenfeld. */
.wcpt .wcpt-search-wrap {
	--wcpt-search-accent: var(--mn-accent, #283583);
	--wcpt-search-border: #d9dcec;
	--wcpt-search-icon: #7c83bc;
	--wcpt-search-radius: 16px;
	--wcpt-search-height: 56px;

	position: relative;
	display: block;
}

.wcpt .wcpt-search-icon {
	position: absolute;
	top: 50%;
	left: 20px;
	color: var(--wcpt-search-icon);
	transform: translateY(-50%);
	pointer-events: none;
}

.wcpt .wcpt-search-wrap .wcpt-search {
	box-sizing: border-box;
	block-size: var(--wcpt-search-height);
	padding: 0 20px 0 52px;
	border: 1px solid var(--wcpt-search-border);
	border-radius: var(--wcpt-search-radius);
	background: #fff;
	color: #2d3134;
	font-size: 16px;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wcpt .wcpt-search-wrap .wcpt-search::placeholder {
	color: #a6aac4;
	opacity: 1;
}

/* Überfahren: nur der helle Schein. Tippen: zusätzlich der dunkle Rahmen. */
.wcpt .wcpt-search-wrap .wcpt-search:hover {
	box-shadow: 0 0 0 3px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.15);
}

.wcpt .wcpt-search-wrap .wcpt-search:focus,
.wcpt .wcpt-search-wrap .wcpt-search:focus-visible {
	border-color: var(--wcpt-search-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.15);
}

@media (prefers-reduced-motion: reduce) {
	.wcpt .wcpt-search-wrap .wcpt-search {
		transition: none;
	}
}

/* In Elementor-Containern mit Spaltenrichtung und Umbruch (Standard auf dem
   Handy) misst der Browser die Höhe bei kleinstmöglicher Breite – die Tabelle
   wurde dort zehntausende Pixel hoch. Mit fester Breite rechnet er richtig. */
.elementor-widget-wcpt_product_table,
.elementor-widget-wcpt_live_search {
	inline-size: 100%;
}

/* Buttons neben dem Suchfeld: gleiche Höhe, Rahmen, Radius und Schrift wie
   das Suchfeld, Hover mit derselben Kontur wie beim Tippen. */
.wcpt .wcpt-toolbar .wcpt-toggle,
.wcpt .wcpt-toolbar .wcpt-filterbtn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 56px;
	padding: 0 24px;
	border: 1px solid #d9dcec;
	border-radius: 16px;
	background: #fff;
	color: var(--mn-accent, #283583);
	font-size: 15px;
	font-weight: 500;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Hover wie bisher (Fläche), die Kontur ist den Eingabefeldern vorbehalten.
   Hier ausdrücklich gesetzt, weil die Grundregel oben stärker ist. */
.wcpt .wcpt-toolbar .wcpt-toggle:hover:not([aria-pressed="true"]),
.wcpt .wcpt-toolbar .wcpt-filterbtn:hover {
	background: var(--wcpt-hover, #f0f0f0);
}

.wcpt .wcpt-toolbar .wcpt-filterbtn[aria-expanded="true"] {
	border-color: currentColor;
}

/* Handy: Suche über die volle Breite, die beiden Buttons darunter nebeneinander. */
@media (max-width: 767px) {
	.wcpt .wcpt-toolbar {
		gap: 8px;
	}

	.wcpt .wcpt-toolbar .wcpt-field--search {
		flex: 1 1 100%;
	}

	.wcpt .wcpt-toolbar .wcpt-field--stock,
	.wcpt .wcpt-toolbar .wcpt-filterwrap {
		flex: 1 1 0;
		min-inline-size: 0;
	}

	.wcpt .wcpt-toolbar .wcpt-field--stock .wcpt-toggle,
	.wcpt .wcpt-toolbar .wcpt-filterwrap .wcpt-filterbtn {
		inline-size: 100%;
		justify-content: center;
		padding: 0 12px;
		font-size: 14px;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
	}
}

/* Tastatur-Fokus bleibt sichtbar. */
.wcpt .wcpt-toolbar .wcpt-toggle:focus-visible,
.wcpt .wcpt-toolbar .wcpt-filterbtn:focus-visible {
	outline: 2px solid var(--mn-accent, #283583);
	outline-offset: 2px;
}

/* Eingeschaltet: gefüllt in Accent, Hover verstärkt nur den Schein. */
.wcpt .wcpt-toolbar .wcpt-toggle[aria-pressed="true"] {
	border-color: var(--mn-accent, #283583);
	background: var(--mn-accent, #283583);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.wcpt .wcpt-toolbar .wcpt-toggle,
	.wcpt .wcpt-toolbar .wcpt-filterbtn {
		transition: none;
	}
}

/* --- Umschalt-Button (nur vorrätige Artikel) ------------------------ */

/* Ruhezustand wie der Filter-Button, gedrückt wie ein Warenkorb-Button —
   so passt er sich beiden Einstellungen an, ohne eigene Farbregler. */
.wcpt .wcpt-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--wcpt-input-py, 10px) var(--wcpt-input-px, 14px);
	font: inherit;
	font-size: var(--wcpt-input-font-size, 15px);
	color: var(--wcpt-filter-color, #1a1a1a);
	background: var(--wcpt-filter-bg, #fff);
	border: var(--wcpt-filter-border, 1px) solid var(--wcpt-filter-border-color, #d8d8d8);
	border-radius: var(--wcpt-filter-radius, 6px);
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wcpt .wcpt-toggle:hover:not([aria-pressed="true"]) {
	background: var(--wcpt-hover, #f0f0f0);
}

.wcpt .wcpt-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.wcpt .wcpt-toggle[aria-pressed="true"] {
	background: var(--wcpt-btn-bg, #111);
	color: var(--wcpt-btn-color, #fff);
	border-color: var(--wcpt-btn-bg, #111);
}

/* Häkchen erscheint erst im gedrückten Zustand. */
.wcpt .wcpt-toggle[aria-pressed="true"]::before {
	content: "";
	inline-size: 6px;
	block-size: 10px;
	flex: none;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	margin-block-start: -3px;
}

/* Im Panel über die volle Breite, damit er nicht verloren wirkt. */
.wcpt-panel .wcpt-toggle {
	inline-size: 100%;
	justify-content: center;
}

/* --- Filter hinter einem Button ------------------------------------- */

.wcpt-toolbar--panel {
	justify-content: flex-end;
}

.wcpt-filterwrap {
	position: relative;
}

.wcpt .wcpt-filterbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--wcpt-input-py, 10px) var(--wcpt-input-px, 14px);
	font: inherit;
	font-size: var(--wcpt-input-font-size, 15px);
	color: var(--wcpt-filter-color, #1a1a1a);
	background: var(--wcpt-filter-bg, #fff);
	border: var(--wcpt-filter-border, 1px) solid var(--wcpt-filter-border-color, #d8d8d8);
	border-radius: var(--wcpt-filter-radius, 6px);
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Beim Überfahren ein dezenter Flächenton, kein harter Rahmenwechsel — der
   kräftige Rahmen bleibt dem geöffneten Zustand vorbehalten. So lassen sich
   „Maus darüber" und „offen" auseinanderhalten. */
.wcpt .wcpt-filterbtn:hover {
	background: var(--wcpt-hover, #f0f0f0);
}

.wcpt .wcpt-filterbtn[aria-expanded="true"] {
	border-color: currentColor;
}

.wcpt .wcpt-filterbtn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* Schieberegler-Symbol, damit der Button ohne Bilddatei auskommt. */
.wcpt-filterbtn-icon {
	inline-size: 14px;
	block-size: 10px;
	background:
		linear-gradient(currentColor, currentColor) left 0 top 1px / 14px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) left 0 bottom 1px / 14px 1.5px no-repeat;
	position: relative;
	flex: none;
}

.wcpt-filterbtn-icon::before,
.wcpt-filterbtn-icon::after {
	content: "";
	position: absolute;
	inline-size: 4px;
	block-size: 4px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: var(--wcpt-filter-bg, #fff);
}

.wcpt-filterbtn-icon::before {
	inset-block-start: -2px;
	inset-inline-start: 3px;
}

.wcpt-filterbtn-icon::after {
	inset-block-end: -2px;
	inset-inline-end: 3px;
}

/* Zähler wie im Warenkorb: zeigt eingeklappt, dass gefiltert wird. */
.wcpt-filterbtn-count {
	min-inline-size: 20px;
	padding: 0 6px;
	background: var(--wcpt-badge-bg, #111);
	color: var(--wcpt-badge-color, #fff);
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

/* --- Leiste der aktiven Filter --------------------------------------- */

/* --- Produktkacheln über dem Katalog (Renderer::product_bar) ------------ */

.wcpt-prodbar {
	--wcpt-prod-accent: var(--mn-accent, #283583);
	--wcpt-prod-text: #2d3134;
	--wcpt-prod-border: #e3e6f0;
	--wcpt-prod-muted: #5b6190;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-block-end: 28px;
}

.wcpt-prodbar[hidden] {
	display: none;
}

.wcpt-prodbar-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 0;
	line-height: 1.4;
}

.wcpt-prodbar-title {
	color: var(--wcpt-prod-accent);
	font-size: 12px;
	font-weight: 600;
}

.wcpt-prodbar-hint {
	color: var(--wcpt-prod-muted);
	font-size: 13px;
}

.wcpt-prodlist {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Kachel: weiße Karte, Bild auf zarter Produktfarbe, darunter Merkmal, Name, Zahl. */
.wcpt-kachel {
	--wcpt-prod-color: #b9bedc;
	position: relative;
	margin: 0;
	border: 1px solid var(--wcpt-prod-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wcpt-kachel:hover {
	box-shadow: 0 12px 28px -14px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.3);
	transform: translateY(-2px);
}

/* Ausgewählt: Kontur in mednaht-Blau. */
.wcpt-kachel:has(.wcpt-prod-btn[aria-pressed="true"]) {
	border-color: var(--wcpt-prod-accent);
	box-shadow: 0 0 0 1px var(--wcpt-prod-accent), 0 12px 28px -16px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.35);
}

.wcpt-kachel-inhalt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px 6px 12px;
	color: var(--wcpt-prod-text);
}

.wcpt-kachel-bild {
	display: block;
	overflow: hidden;
	margin-block-end: 4px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--wcpt-prod-color) 22%, #fff);
	aspect-ratio: 2 / 1;
}

.wcpt-kachel-bild img.wcpt-kachel-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.3s ease;
}

.wcpt-kachel:hover .wcpt-kachel-img {
	transform: scale(1.04);
}

/* Freigestellte Packung (Filter wcpt_product_bar_image): frei auf dem
   farbigen Grund, mit Luft und weichem Schatten. */
.wcpt-kachel-bild img.wcpt-kachel-img--frei {
	box-sizing: border-box;
	padding: 10px 14px;
	mix-blend-mode: normal;
	filter: drop-shadow(0 6px 8px rgba(20, 30, 80, 0.18));
}

/* Merkmal als kleine Pille mit Farbpunkt. */
.wcpt-kachel-pille {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin-inline: 6px;
	padding: 2px 9px 2px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wcpt-prod-color) 16%, #fff);
	color: var(--wcpt-prod-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
}

.wcpt-prod-dot {
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 999px;
	background: var(--wcpt-prod-color);
}

.wcpt-kachel .wcpt-prod-name {
	display: -webkit-box;
	overflow: hidden;
	margin-inline: 6px;
	color: var(--wcpt-prod-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wcpt-kachel-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 10px;
	margin: 2px 6px 0;
	color: var(--wcpt-prod-muted);
	font-size: 12px;
	line-height: 1.4;
}

/* Die ganze Kachel ist der Knopf, der das Produkt für den Katalog wählt;
   das Kästchen oben links zeigt nur den Zustand. */
.wcpt .wcpt-prodbar .wcpt-prod-btn,
.wcpt .wcpt-prodbar .wcpt-prod-btn:hover,
.wcpt .wcpt-prodbar .wcpt-prod-btn:focus {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 15px;
	background: transparent;
	box-shadow: none;
	color: transparent;
	cursor: pointer;
}

.wcpt .wcpt-prodbar .wcpt-prod-btn:focus-visible {
	outline: 2px solid var(--wcpt-prod-accent);
	outline-offset: 2px;
}

.wcpt-prod-check {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	display: grid;
	place-items: center;
	inline-size: 24px;
	block-size: 24px;
	border: 1.5px solid #c9cde3;
	border-radius: 7px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.12);
	color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wcpt .wcpt-prodbar .wcpt-prod-btn:hover .wcpt-prod-check {
	border-color: var(--wcpt-prod-accent);
}

.wcpt .wcpt-prodbar .wcpt-prod-btn[aria-pressed="true"] .wcpt-prod-check {
	border-color: var(--wcpt-prod-accent);
	background: var(--wcpt-prod-accent);
	color: #fff;
}

.wcpt-prod-check svg {
	inline-size: 15px;
	block-size: 15px;
}

/* Eigener Weg zur Produktseite, über dem Knopf der Kachel. */
.wcpt .wcpt-prodbar .wcpt-kachel-produkt {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: -6px -6px -6px auto;
	padding: 6px;
	border-radius: 8px;
	color: var(--wcpt-prod-accent);
	font-weight: 600;
	text-decoration: none;
}

.wcpt .wcpt-prodbar .wcpt-kachel-produkt:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wcpt .wcpt-prodbar .wcpt-kachel-produkt:focus-visible {
	outline: 2px solid var(--wcpt-prod-accent);
	outline-offset: 0;
}

.wcpt-kachel-produkt svg {
	inline-size: 14px;
	block-size: 14px;
}

/* Schmaler als sechs Kacheln: dieselbe Reihe, wischbar. */
@media (max-width: 1100px) and (min-width: 768px) {
	.wcpt-prodlist {
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 36px) / 4);
		grid-template-columns: none;
		overflow-x: auto;
		scrollbar-width: none;
	}
}

/* Handy: eine wischbare Reihe statt vieler Zeilen über der Tabelle. */
@media (max-width: 767px) {
	.wcpt-prodlist {
		grid-auto-flow: column;
		grid-auto-columns: 46%;
		grid-template-columns: none;
		padding: 2px 0 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.wcpt-prodlist::-webkit-scrollbar {
		display: none;
	}

	.wcpt-kachel {
		scroll-snap-align: start;
	}

	.wcpt-kachel:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcpt-kachel,
	.wcpt-kachel-img,
	.wcpt-prod-check {
		transition: none;
	}

	.wcpt-kachel:hover,
	.wcpt-kachel:hover .wcpt-kachel-img {
		transform: none;
	}
}

/* --- Rahmen um Suche, Filter und Tabelle ---------------------------------
   Doppelte Kontur: weiße Fläche mit feiner Linie, außen ein schmaler heller
   Rand mit zweiter Linie. Per Schatten statt Hülle – kein overflow, damit der
   mitlaufende Tabellenkopf (position: sticky) weiter klebt. */
.wcpt-rahmen {
	margin: 7px;
	padding: 20px;
	border: 1px solid #e3e6f0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 0 0 6px #f4f6fb, 0 0 0 7px #e6e9f2;
}

@media (max-width: 767px) {
	.wcpt-rahmen {
		margin: 4px;
		padding: 12px;
		border-radius: 14px;
		box-shadow: 0 0 0 4px #f4f6fb, 0 0 0 5px #e6e9f2;
	}
}

.wcpt-activebar {
	margin-block-end: 16px;
}

.wcpt-activebar[hidden] {
	display: none;
}

.wcpt-active-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcpt-active-list li {
	margin: 0;
}

.wcpt-active-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-inline-size: 100%;
	min-block-size: 36px;
	padding: 4px 4px 4px 14px;
	border: 1px solid var(--mn-accent, #283583);
	border-radius: 18px;
	background: #f5fbff;
	color: var(--mn-accent, #283583);
	font-size: 14px;
	line-height: 1.3;
}

.wcpt-active-group {
	color: #666c96;
	white-space: nowrap;
}

.wcpt-active-value {
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* ✕ und „Alle entfernen": Hover und Fokus ausdrücklich, gegen die
   Button-Stile der Website-Einstellungen. */
.wcpt .wcpt-active-remove,
.wcpt .wcpt-active-remove:focus {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--mn-accent, #283583);
	cursor: pointer;
	box-shadow: none;
}

.wcpt .wcpt-active-remove:hover {
	background: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.1);
	color: var(--mn-accent, #283583);
}

.wcpt .wcpt-active-clear,
.wcpt .wcpt-active-clear:focus {
	padding: 8px 6px;
	border: 0;
	background: none;
	color: var(--mn-accent, #283583);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: none;
}

.wcpt .wcpt-active-clear:hover {
	background: none;
	color: var(--mn-accent, #283583);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wcpt .wcpt-active-remove:focus-visible,
.wcpt .wcpt-active-clear:focus-visible {
	outline: 2px solid var(--mn-accent, #283583);
	outline-offset: 2px;
}

/* --- Filter-Panel: Optik wie die Navigation -------------------------- */

.wcpt-panel {
	--wcpt-panel-accent: var(--mn-accent, #283583);
	--wcpt-panel-text: #2d3134;
	--wcpt-panel-muted: #666c96;
	--wcpt-panel-line: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.09);

	position: absolute;
	z-index: 30;
	inset-block-start: calc(100% + 12px);
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	inline-size: min(var(--wcpt-panel-width, 380px), calc(100vw - 32px));
	max-block-size: min(70vh, 620px);
	overflow: hidden;
	border: 1px solid var(--wcpt-panel-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 64px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.14);
	color: var(--wcpt-panel-text);
	text-align: start;
	/* Auf- und Zugehen animiert product-table.js mit Motion (aus mednaht Design). */
	transform-origin: top right;
}

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

.wcpt-panel:focus-visible {
	outline: 2px solid var(--wcpt-panel-accent);
	outline-offset: 2px;
}

/* Kopf- und Fußzeile stehen fest, nur die Gruppen scrollen. */
.wcpt-panel-titlebar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px 14px 20px;
	border-block-end: 1px solid var(--wcpt-panel-line);
}

.wcpt-panel-title {
	margin: 0;
	color: var(--wcpt-panel-text);
	font-size: 15px;
	font-weight: 600;
}

.wcpt-panel-body {
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wcpt-panel-group {
	padding: 0 20px;
	border-block-end: 1px solid var(--wcpt-panel-line);
}

.wcpt-panel-group:last-of-type {
	border-block-end: 0;
}

.wcpt-panel-grouphead {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Knöpfe im Panel: Hover und Fokus ausdrücklich gesetzt – sonst färben die
   Button-Stile der Website-Einstellungen sie grau oder lila ein. */
.wcpt .wcpt-panel .wcpt-panel-toggle,
.wcpt .wcpt-panel .wcpt-panel-toggle:hover,
.wcpt .wcpt-panel .wcpt-panel-toggle:focus {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	min-block-size: 52px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wcpt-panel-text);
	font: inherit;
	text-align: start;
	cursor: pointer;
	box-shadow: none;
}

.wcpt .wcpt-panel .wcpt-panel-toggle:hover .wcpt-panel-label {
	color: var(--wcpt-panel-accent);
}

.wcpt .wcpt-panel .wcpt-panel-toggle:focus-visible {
	outline: 2px solid var(--wcpt-panel-accent);
	outline-offset: 2px;
}

.wcpt .wcpt-panel .wcpt-panel-label {
	color: var(--wcpt-panel-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.wcpt-panel-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 20px;
	block-size: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--wcpt-panel-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

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

/* Pfeil wie im Mega-Menü, immer sichtbar */
.wcpt-panel-arrow {
	inline-size: 8px;
	block-size: 8px;
	flex: none;
	margin-inline-start: auto;
	margin-block-start: -3px;
	border-inline-end: 2px solid var(--wcpt-panel-muted);
	border-block-end: 2px solid var(--wcpt-panel-muted);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.wcpt .wcpt-panel-toggle[aria-expanded="true"] .wcpt-panel-arrow {
	margin-block-start: 3px;
	transform: rotate(-135deg);
}

.wcpt-panel-groupbody {
	padding-block-end: 18px;
}

/* Zurücksetzen einer Gruppe: nur das Symbol, nur bei Auswahl */
.wcpt .wcpt-panel .wcpt-panel-reset,
.wcpt .wcpt-panel .wcpt-panel-reset:focus {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--wcpt-panel-muted);
	cursor: pointer;
	box-shadow: none;
}

.wcpt .wcpt-panel .wcpt-panel-reset:hover {
	background: #f5fbff;
	color: var(--wcpt-panel-accent);
}

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

.wcpt .wcpt-panel .wcpt-panel-close,
.wcpt .wcpt-panel .wcpt-panel-close:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 1px solid var(--wcpt-panel-line);
	border-radius: 999px;
	background: #fff;
	color: var(--wcpt-panel-accent);
	cursor: pointer;
	box-shadow: none;
}

.wcpt .wcpt-panel .wcpt-panel-close:hover {
	background: #f5fbff;
}

.wcpt .wcpt-panel .wcpt-panel-reset:focus-visible,
.wcpt .wcpt-panel .wcpt-panel-close:focus-visible {
	outline: 2px solid var(--wcpt-panel-accent);
	outline-offset: 2px;
}

/* Fußzeile: Zurücksetzen als Text, Anzeigen als Hauptknopf */
.wcpt-panel-foot {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	border-block-start: 1px solid var(--wcpt-panel-line);
	background: #fff;
}

.wcpt .wcpt-panel .wcpt-panel-resetall,
.wcpt .wcpt-panel .wcpt-panel-resetall:focus {
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--wcpt-panel-accent);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: none;
}

.wcpt .wcpt-panel .wcpt-panel-resetall:hover {
	background: none;
	color: var(--wcpt-panel-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wcpt .wcpt-panel .wcpt-panel-show,
.wcpt .wcpt-panel .wcpt-panel-apply {
	min-block-size: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--wcpt-panel-accent);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.wcpt .wcpt-panel .wcpt-panel-show:hover,
.wcpt .wcpt-panel .wcpt-panel-apply:hover {
	background: #1f2a6b;
	color: #fff;
}

.wcpt .wcpt-panel .wcpt-panel-show:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Handy: Blatt von unten über der abgedunkelten Seite */
@media (max-width: 767px) {
	/* !important: Die Panel-Breite aus dem Elementor-Widget ist spezifischer,
	   als Blatt von unten muss das Panel aber die volle Breite haben. */
	.wcpt-panel {
		position: fixed;
		z-index: 100001;
		inset: auto 0 0;
		inline-size: auto !important;
		max-block-size: 88vh;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 0 0 100vmax rgba(20, 24, 50, 0.45);
	}

	.wcpt-panel-foot {
		padding-block-end: max(14px, env(safe-area-inset-bottom));
	}

	.wcpt .wcpt-panel .wcpt-panel-show,
	.wcpt .wcpt-panel .wcpt-panel-apply {
		flex: 1;
		min-block-size: 48px;
	}
}

html.wcpt-sheet-offen,
html.wcpt-sheet-offen body {
	overflow: hidden;
}

html.wcpt-sheet-offen .elementor-widget-contact-buttons,
html.wcpt-sheet-offen .e-contact-buttons {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.wcpt-pill-text,
	.wcpt-panel-arrow {
		transition: none;
	}
}

/* --- Mehrfachauswahl ----------------------------------------------- */

.wcpt-bulkbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcpt-bulkbar-gap, 16px);
	align-items: center;
	padding: var(--wcpt-bulkbar-py, 16px) var(--wcpt-bulkbar-px, 20px);
	background: var(--wcpt-bulkbar-bg, #fff);
	border: 1px solid var(--wcpt-row-border-color, #e6e6e6);
	/* Eigener Radius: die Leiste schwebt über der Tabelle und gehört optisch
	   zu Panel und Buttons, nicht zum Tabellenrahmen. Am Tabellenradius hing
	   sie vorher — und der steht standardmäßig auf 0. */
	border-radius: var(--wcpt-bulkbar-radius, 6px);
}

.wcpt-bulkbar[hidden] {
	display: none;
}

/* Fest über der Tabelle. */
.wcpt-bulkbar--top {
	margin-block-end: 12px;
}

/*
 * Schwebend: die Leiste steht im Quelltext hinter der Tabelle und wird von
 * dort nach oben in den sichtbaren Bereich gezogen, solange die Tabelle im
 * Bild ist. Bewusst sticky statt fixed — der Tabellenrahmen ist wegen
 * container-type ein Bezugsrahmen für fixed und würde die Leiste einsperren.
 */
.wcpt-bulkbar--float {
	position: sticky;
	inset-block-end: 16px;
	z-index: 5;
	margin-block-start: 16px;
	box-shadow: 0 8px 28px rgb(0 0 0 / 0.16);
}

/* Schwebende Kontakt-Buttons (WhatsApp) würden die Leiste verdecken. */
body:has(.wcpt-bulkbar--float:not([hidden])) .e-contact-buttons {
	visibility: hidden;
	opacity: 0;
}

/* Ohne Zähler links: Buttons rechtsbündig, die Anzahl steht im Button. */
.wcpt-bulkbar--float .wcpt-bulk-add {
	margin-inline-start: auto;
}

@media (max-width: 600px) {
	.wcpt-bulkbar--float {
		inset-block-end: 8px;
	}

	.wcpt-bulkbar--float .wcpt-bulk-add {
		flex: 1 1 100%;
	}
}

.wcpt .wcpt-bulk-clear:hover {
	background: none;
	color: var(--wcpt-text, #1a1a1a);
}

.wcpt .wcpt-bulk-clear {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wcpt-muted, #666);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

/* --- Tabelle -------------------------------------------------------- */

.wcpt-tablewrap {
	overflow-x: auto;
	border: var(--wcpt-table-border, 0) solid var(--wcpt-row-border-color, #e6e6e6);
	border-radius: var(--wcpt-table-radius, 0);
	-webkit-overflow-scrolling: touch;
}

.wcpt-tablewrap:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wcpt-table {
	inline-size: 100%;
	border-collapse: collapse;
	margin: 0;
	background: transparent;
}

.wcpt-th,
.wcpt-td {
	padding: var(--wcpt-cell-py, 16px) var(--wcpt-cell-px, 16px);
	text-align: var(--wcpt-align, left);
	vertical-align: middle;
	border: 0;
	border-block-end: var(--wcpt-row-border, 1px) var(--wcpt-row-border-style, solid) var(--wcpt-row-border-color, #e6e6e6);
}

/* Hello Elementor setzt über „table thead:first-child tr:first-child th" eine
   graue Linie über den Kopf, die das border: 0 oben nicht erreicht. */
.wcpt .wcpt-table .wcpt-th {
	border-block-start: 0;
}

.wcpt-th {
	background: var(--wcpt-header-bg, #fff);
	color: var(--wcpt-header-color, #1a1a1a);
	font-size: var(--wcpt-header-font-size, 14px);
	font-weight: var(--wcpt-header-weight, 600);
	text-transform: var(--wcpt-header-transform, none);
	letter-spacing: var(--wcpt-header-spacing, normal);
	white-space: nowrap;
	border-block-end: var(--wcpt-header-border, 1px) var(--wcpt-row-border-style, solid) var(--wcpt-header-border-color, #e6e6e6);
}

.wcpt[data-sticky="1"] .wcpt-th {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
}

.wcpt-align--center { text-align: center; }
.wcpt-align--right  { text-align: right; }
.wcpt-align--left   { text-align: left; }

/* Zeilenflächen liegen auf den Zellen, nicht auf der Zeile: Themes streifen
   Tabellen gern über eigene td-Regeln, die sonst durchschlagen — die Tabelle
   sähe gestreift aus, obwohl das Zebra hier aus ist. */
.wcpt-table tbody tr .wcpt-td {
	background: var(--wcpt-row-bg, transparent);
}

.wcpt-table tbody tr:nth-child(even) .wcpt-td {
	background: var(--wcpt-zebra, transparent);
}

.wcpt-table tbody tr:hover .wcpt-td {
	background: var(--wcpt-hover, #f0f0f0);
}

.wcpt-row--out {
	color: var(--wcpt-muted, #666);
}

/* --- Neue Artikel als Block vorn (Query::neue_zuerst) --------------- */

/* Zwischenüberschrift „Neu im Sortiment" bzw. „Alle weiteren Artikel". */
.wcpt-table .wcpt-group th {
	padding: 14px var(--wcpt-cell-px, 16px) 10px;
	border: 0;
	border-block-end: var(--wcpt-row-border, 1px) solid var(--wcpt-row-border-color, #e6e6e6);
	background: transparent;
	color: var(--wcpt-group-color, var(--wcpt-text, #1a1a1a));
	font-size: 13px;
	font-weight: 700;
	text-align: start;
}

/* Abstand zwischen neuen und übrigen Artikeln. */
.wcpt-table .wcpt-group-gap td {
	block-size: var(--wcpt-group-gap, 32px);
	padding: 0;
	border: 0;
	background: transparent;
}

.wcpt-table tbody tr.wcpt-group:hover th,
.wcpt-table tbody tr.wcpt-group-gap:hover td {
	background: transparent;
}

/* --- Auswahl per Zeilenklick ---------------------------------------- */

/* Auswählbar ist nur, was ein Kästchen hat — das zeigt schon der Mauszeiger. */
.wcpt-row:has(.wcpt-select) {
	cursor: pointer;
}

/* Gewählte Zeilen müssen sich gegen Zebra und Hover durchsetzen, sonst
   verschwindet die Markierung, sobald die Maus darüberfährt. */
.wcpt-table tbody tr.wcpt-row:has(.wcpt-select:checked) .wcpt-td,
.wcpt-table tbody tr.wcpt-row:has(.wcpt-select:checked):hover .wcpt-td {
	background: var(--wcpt-selected, #eaf1fb);
}

/* --- Sortierung ----------------------------------------------------- */

.wcpt .wcpt-sort {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: inherit;
	color: inherit;
	cursor: pointer;
}

/* Hintergrund ausdrücklich zurücksetzen: Themes gestalten button:hover gern
   mit einer Akzentfarbe, und der Sortierkopf sitzt mitten in der Kopfzeile. */
/* Farbe ausdrücklich: sonst färbt „.elementor-kit-… button:hover/:focus" aus
   den Website-Einstellungen die Schrift weiß. */
.wcpt .wcpt-sort:hover,
.wcpt .wcpt-sort:focus {
	background: none;
	color: inherit;
	box-shadow: none;
}

.wcpt .wcpt-sort:hover {
	opacity: 0.7;
}

.wcpt .wcpt-sort:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.wcpt-sort-icon {
	inline-size: 8px;
	block-size: 12px;
	position: relative;
	flex: none;
	opacity: 0.35;
}

.wcpt-sort-icon::before,
.wcpt-sort-icon::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	border-inline: 4px solid transparent;
}

.wcpt-sort-icon::before {
	inset-block-start: 0;
	border-block-end: 4px solid currentColor;
}

.wcpt-sort-icon::after {
	inset-block-end: 0;
	border-block-start: 4px solid currentColor;
}

.wcpt-sort.is-active .wcpt-sort-icon { opacity: 1; }
.wcpt-sort.is-active.is-asc  .wcpt-sort-icon::after  { opacity: 0.2; }
.wcpt-sort.is-active.is-desc .wcpt-sort-icon::before { opacity: 0.2; }

/* --- Zellinhalte ---------------------------------------------------- */

.wcpt-image {
	display: block;
	inline-size: var(--wcpt-image-size, 90px);
	block-size: auto;
	aspect-ratio: var(--wcpt-image-ratio, 1);
	object-fit: var(--wcpt-image-fit, contain);
	border-radius: var(--wcpt-image-radius, 4px);
	margin-inline: auto;
}

/* Feste Spaltenbreite fürs Bild: Ohne sie verteilt Safari die automatische
   Tabellenbreite anders als Chrome und Firefox – Bilder und Zeilen wurden dort
   kleiner. 9.3 % entspricht dem bisherigen Bild in Chrome. */
.wcpt-table .wcpt-th--image {
	width: 9.3%;
}

.wcpt-image-link {
	display: inline-block;
	line-height: 0;
}

.wcpt a.wcpt-name,
.wcpt .wcpt-name {
	font-weight: 500;
	color: inherit;
	text-decoration: none;
}

.wcpt a.wcpt-name:hover,
.wcpt a.wcpt-name:focus-visible {
	text-decoration: underline;
}

/* Manche Themes hängen nach dem Hinzufügen einen eigenen Link an. */
.wcpt .added_to_cart {
	display: none;
}

.wcpt-variation {
	display: block;
	font-size: 0.85em;
	color: var(--wcpt-muted, #666);
	margin-block-start: 2px;
}

.wcpt-sku {
	color: var(--wcpt-muted, #666);
	font-variant-numeric: tabular-nums;
}

.wcpt-description {
	color: var(--wcpt-muted, #666);
	display: block;
	max-inline-size: 46ch;
}

/* Beschreibung unter dem Artikelnamen statt in eigener Spalte. */
.wcpt-td--name .wcpt-description {
	margin-block-start: 4px;
	font-size: 0.9em;
	line-height: 1.45;
}

.wcpt-price {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.wcpt-price del { opacity: 0.55; margin-inline-end: 6px; }
.wcpt-price ins { text-decoration: none; font-weight: 600; }

.wcpt-empty,
.wcpt-oos {
	color: var(--wcpt-muted, #666);
}

.wcpt-oos {
	white-space: nowrap;
}

.wcpt-stock--in       { color: #1c7c3c; }
.wcpt-stock--out      { color: var(--wcpt-muted, #666); }
.wcpt-stock--backorder{ color: #a06000; }

.wcpt-terms a {
	color: inherit;
}

/* --- Menge und Warenkorb -------------------------------------------- */

/* Gleiche Höhe und Radien wie Suche und Filter, nur etwas kompakter für die Zeile.
   Eigene Variablen: Die globalen Plugin-Einstellungen (--wcpt-btn-*) stammen
   noch aus dem schwarzen Grunddesign. Die Elementor-Regler setzen diese hier. */
.wcpt {
	--wcpt-cart-height: 44px;
	--wcpt-cart-radius: 12px;
	--wcpt-cart-border: #d9dcec;
	--wcpt-cart-accent: var(--mn-accent, #283583);
	--wcpt-cart-bg: #fff;
	--wcpt-cart-color: var(--mn-accent, #283583);
	--wcpt-cart-border-color: #d9dcec;
	--wcpt-cart-bg-hover: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.08);
	--wcpt-cart-color-hover: var(--mn-accent, #283583);
	--wcpt-cart-border-color-hover: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.35);
}

.wcpt-cart-group {
	display: inline-flex;
	align-items: stretch;
	gap: 8px;
	justify-content: center;
	flex-wrap: nowrap;
}

.wcpt .quantity {
	display: inline-flex;
	margin: 0;
}

.wcpt .quantity .qty,
.wcpt .quantity .qty:hover,
.wcpt .quantity .qty:focus,
.wcpt-qty {
	box-sizing: border-box;
	inline-size: 64px;
	block-size: var(--wcpt-cart-height);
	padding: 0 6px;
	text-align: center;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: #2d3134;
	background: #fff;
	border: 1px solid var(--wcpt-cart-border);
	border-radius: var(--wcpt-cart-radius);
	box-shadow: none;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Wie die Suche: Überfahren nur der helle Schein, Tippen zusätzlich der dunkle Rahmen. */
.wcpt .quantity .qty:hover {
	box-shadow: 0 0 0 3px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.15);
}

.wcpt .quantity .qty:focus,
.wcpt .quantity .qty:focus-visible {
	border-color: var(--wcpt-cart-accent);
	box-shadow: 0 0 0 3px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.15);
}

/* Mengenwähler: − Feld + in einem Rahmen, wie im ausklappbaren Warenkorb. */
.wcpt .wcpt-stepper {
	box-sizing: border-box;
	display: inline-flex;
	flex: none;
	align-items: stretch;
	block-size: var(--wcpt-cart-height);
	border: 1px solid var(--wcpt-cart-border);
	border-radius: var(--wcpt-cart-radius);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wcpt .wcpt-stepper:hover {
	box-shadow: 0 0 0 3px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.15);
}

.wcpt .wcpt-stepper:focus-within {
	border-color: var(--wcpt-cart-accent);
	box-shadow: 0 0 0 3px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.15);
}

.wcpt .wcpt-stepper .wcpt-step,
.wcpt .wcpt-stepper .wcpt-step:hover,
.wcpt .wcpt-stepper .wcpt-step:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wcpt-cart-accent);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wcpt .wcpt-stepper .wcpt-step:hover:not(:disabled) {
	background: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.08);
}

.wcpt .wcpt-stepper .wcpt-step:focus-visible {
	outline: 2px solid var(--wcpt-cart-accent);
	outline-offset: -2px;
}

.wcpt .wcpt-stepper .wcpt-step:disabled {
	color: #b9bedc;
	cursor: default;
}

.wcpt .wcpt-stepper .wcpt-step svg {
	inline-size: 14px;
	block-size: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* Feld im Rahmen: ohne eigenen Rahmen und Schein, nur Trennlinien. */
/* :is(.wcpt, #…) zählt wie eine ID: Im Wähler gilt immer diese Regel – auch
   wenn im Elementor-Widget unter „Mengenfeld" ein eigener Rahmen eingestellt
   ist (sonst Rahmen im Rahmen, so auf der Startseite). */
:is(.wcpt, #wcpt-stepper-vorrang) .wcpt-stepper .quantity .qty,
:is(.wcpt, #wcpt-stepper-vorrang) .wcpt-stepper .quantity .qty:hover,
:is(.wcpt, #wcpt-stepper-vorrang) .wcpt-stepper .quantity .qty:focus,
:is(.wcpt, #wcpt-stepper-vorrang) .wcpt-stepper .quantity .qty:focus-visible {
	inline-size: 44px;
	block-size: 100%;
	padding: 0 2px;
	border: 0;
	border-inline: 1px solid #eceef6;
	border-radius: 0;
	box-shadow: none;
	font-weight: 600;
}

.wcpt .quantity .qty::-webkit-outer-spin-button,
.wcpt .quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.wcpt-qty-fixed {
	color: var(--wcpt-muted, #666);
}

/* Drei Klassen plus Zustand: Die Button-Stile des Elementor-Kits
   (.elementor-kit-6 button:hover/:focus) färben sonst beim Klicken um. */
.wcpt .wcpt-btn,
.wcpt .wcpt-btn:hover,
.wcpt .wcpt-btn:focus,
.wcpt .wcpt-btn:active,
.wcpt .wcpt-btn:visited {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: var(--wcpt-cart-height);
	padding: 0 20px;
	background: var(--wcpt-cart-bg);
	color: var(--wcpt-cart-color);
	border: 1px solid var(--wcpt-cart-border-color);
	border-radius: var(--wcpt-cart-radius);
	box-shadow: none;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wcpt .wcpt-btn:hover,
.wcpt .wcpt-btn:focus-visible {
	background: var(--wcpt-cart-bg-hover);
	border-color: var(--wcpt-cart-border-color-hover);
	color: var(--wcpt-cart-color-hover);
}

.wcpt .wcpt-btn:focus-visible {
	outline: 2px solid var(--wcpt-cart-accent);
	outline-offset: 2px;
}

/* „Ausgewählte in den Warenkorb" in der Auswahl-Leiste bleibt die gefüllte Hauptaktion. */
.wcpt .wcpt-btn.wcpt-bulk-add,
.wcpt .wcpt-btn.wcpt-bulk-add:focus {
	background: var(--mn-accent, #283583);
	border-color: var(--mn-accent, #283583);
	color: #fff;
}

.wcpt .wcpt-btn.wcpt-bulk-add:hover,
.wcpt .wcpt-btn.wcpt-bulk-add:focus-visible {
	background: #1d2766;
	border-color: #1d2766;
	color: #fff;
}

/* „Weiterlesen"/„Ausführung wählen": führt zur Produktseite, daher zurückhaltend. */
.wcpt .wcpt-btn.wcpt-btn--link,
.wcpt .wcpt-btn.wcpt-btn--link:visited,
.wcpt .wcpt-btn.wcpt-btn--link:focus {
	background: #fff;
	border-color: var(--wcpt-cart-border);
	color: var(--wcpt-cart-accent);
	font-weight: 500;
}

.wcpt .wcpt-btn.wcpt-btn--link:hover,
.wcpt .wcpt-btn.wcpt-btn--link:focus-visible {
	background: var(--wcpt-hover, #f5fbff);
	border-color: var(--wcpt-cart-border);
	color: var(--wcpt-cart-accent);
}

.wcpt .wcpt-btn[disabled],
.wcpt .wcpt-btn.is-busy {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* Kurz nach dem Hinzufügen: Haken statt Text, mittig über dem Button.
   Absolut positioniert, damit der Button nicht breiter wird – sonst verteilt
   die Tabelle die Spalten neu, die Bilder schrumpfen und die Seite springt. */
.wcpt .wcpt-btn.wcpt-add {
	position: relative;
}

.wcpt .wcpt-btn.is-done,
.wcpt .wcpt-btn.is-done:hover,
.wcpt .wcpt-btn.is-done:focus {
	color: transparent;
}

.wcpt .wcpt-btn.is-done::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	inline-size: 20px;
	block-size: 20px;
	margin: -10px 0 0 -10px;
	background: var(--wcpt-cart-color, var(--mn-accent, #283583));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.wcpt .quantity .qty,
	.wcpt .wcpt-stepper,
	.wcpt .wcpt-step,
	.wcpt .wcpt-btn {
		transition: none;
	}
}

.wcpt-details {
	color: inherit;
}

.wcpt .wcpt-select,
.wcpt .wcpt-select-all {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	inline-size: 22px;
	block-size: 22px;
	margin: 0;
	padding: 0;
	border: 1.5px solid #b9bedc;
	border-radius: 7px;
	background: #fff;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Wie Suche und Mengenfeld: Überfahren nur der helle Schein. */
.wcpt .wcpt-select:hover,
.wcpt .wcpt-select-all:hover {
	border-color: var(--mn-accent, #283583);
	box-shadow: 0 0 0 3px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.15);
}

.wcpt .wcpt-select:focus-visible,
.wcpt .wcpt-select-all:focus-visible {
	outline: 2px solid var(--mn-accent, #283583);
	outline-offset: 2px;
}

.wcpt .wcpt-select:checked,
.wcpt .wcpt-select-all:checked,
.wcpt .wcpt-select-all:indeterminate {
	border-color: var(--mn-accent, #283583);
	background: var(--mn-accent, #283583);
}

/* Haken bzw. Strich (teilweise ausgewählt) als Maske in Weiß. */
.wcpt .wcpt-select:checked::after,
.wcpt .wcpt-select-all:checked::after,
.wcpt .wcpt-select-all:indeterminate::after {
	content: "";
	position: absolute;
	inset: 2px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wcpt .wcpt-select-all:indeterminate::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	.wcpt .wcpt-select,
	.wcpt .wcpt-select-all {
		transition: none;
	}
}

/* --- Fußzeile und Blätterung ---------------------------------------- */

.wcpt-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-block-start: 16px;
}

.wcpt-count {
	margin: 0;
	color: var(--wcpt-muted, #666);
	font-size: 0.9em;
}

.wcpt-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcpt .wcpt-page,
.wcpt .wcpt-page:hover,
.wcpt .wcpt-page:focus {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	block-size: 44px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #d9dcec;
	border-radius: 12px;
	box-shadow: none;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--mn-accent, #283583);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wcpt .wcpt-page:hover:not(.is-active):not(.is-disabled) {
	background: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.08);
	border-color: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.35);
}

.wcpt .wcpt-page:focus-visible {
	outline: 2px solid var(--mn-accent, #283583);
	outline-offset: 2px;
}

.wcpt .wcpt-page.is-active,
.wcpt .wcpt-page.is-active:hover,
.wcpt .wcpt-page.is-active:focus {
	background: var(--mn-accent, #283583);
	border-color: var(--mn-accent, #283583);
	color: #fff;
	font-weight: 600;
	cursor: default;
}

.wcpt .wcpt-page.is-disabled,
.wcpt-ellipsis {
	opacity: 0.4;
	cursor: default;
	border-color: transparent;
}

.wcpt-pagination--more {
	inline-size: 100%;
	display: flex;
	justify-content: center;
}

.wcpt-empty-result {
	padding: 32px 16px;
	text-align: center;
	color: var(--wcpt-muted, #666);
}

/* --- Ladezustand und Meldungen -------------------------------------- */

.wcpt:is(.is-loading, .is-suche) .wcpt-inner {
	opacity: 0.45;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

/* Drehender Kreis (Suchfeld, Ladeanzeige). */
.wcpt-kreisel,
.wcpt.is-suche .wcpt-search-wrap::after {
	box-sizing: border-box;
	inline-size: 16px;
	block-size: 16px;
	border: 2px solid rgba(var(--mn-accent-rgb, 40, 53, 131), 0.18);
	border-top-color: var(--mn-accent, #283583);
	border-radius: 50%;
	animation: wcpt-drehen 0.7s linear infinite;
}

@keyframes wcpt-drehen {
	to { transform: rotate(360deg); }
}

/* Suchfeld: Statt der Lupe dreht sich der Kreis, solange gesucht wird. */
.wcpt.is-suche .wcpt-search-icon {
	opacity: 0;
}

.wcpt.is-suche .wcpt-search-wrap::after {
	content: "";
	position: absolute;
	inset-block-start: calc(50% - 8px);
	inset-inline-start: 22px;
}

/* „Ergebnisse werden geladen …" über der Tabelle, läuft beim Scrollen mit. */
.wcpt-laden {
	position: sticky;
	inset-block-start: 120px;
	z-index: 6;
	display: flex;
	justify-content: center;
	block-size: 0;
	pointer-events: none;
}

.wcpt-laden-pille {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	block-size: fit-content;
	margin-block-start: 72px;
	padding: 10px 18px 10px 14px;
	border: 1px solid #e3e6f0;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 12px 32px -12px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.35);
	color: var(--mn-accent, #283583);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.wcpt:is(.is-loading, .is-suche) .wcpt-laden-pille {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wcpt-kreisel,
	.wcpt.is-suche .wcpt-search-wrap::after {
		animation-duration: 2s;
	}

	.wcpt-laden-pille {
		transition: none;
	}
}

/* --- Rückmeldung „In den Warenkorb gelegt" ---------------------------- */

#wcpt-notices {
	--wcpt-notice-accent: var(--mn-accent, #283583);
	--wcpt-notice-text: #2d3134;
	--wcpt-notice-muted: #5b6190;
	--wcpt-notice-border: #d9dcec;
	--wcpt-notice-error: #b3261e;
	/* Über dem WhatsApp-Button unten rechts (65 px hoch, 25 px Abstand). */
	--wcpt-notice-bottom: 104px;
	position: fixed;
	inset-block-end: var(--wcpt-notice-bottom);
	inset-inline-end: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	inline-size: min(400px, calc(100vw - 48px));
	pointer-events: none;
}

#wcpt-notices .wcpt-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	inline-size: 100%;
	box-sizing: border-box;
	padding: 16px 12px 16px 16px;
	border: 1px solid var(--wcpt-notice-border);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	box-shadow: 0 12px 32px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.16), 0 2px 6px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.06);
	color: var(--wcpt-notice-text);
	font-size: 15px;
	line-height: 1.45;
	pointer-events: auto;
	animation: wcpt-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#wcpt-notices .wcpt-notice.is-leaving {
	animation: wcpt-out 0.2s ease forwards;
}

#wcpt-notices .wcpt-notice-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--wcpt-notice-accent);
	color: #fff;
}

/* Fehler in Rot, damit sie auch im Augenwinkel auffallen. */
#wcpt-notices .wcpt-notice--error {
	border-color: var(--wcpt-notice-error);
	background: rgba(253, 236, 234, 0.96);
	box-shadow: 0 12px 32px rgba(179, 38, 30, 0.22), 0 2px 6px rgba(179, 38, 30, 0.1);
}

#wcpt-notices .wcpt-notice--error .wcpt-notice-icon {
	background: var(--wcpt-notice-error);
}

#wcpt-notices .wcpt-notice--error .wcpt-notice-text {
	color: #7a1a14;
}

#wcpt-notices .wcpt-notice--error a.wcpt-notice-link {
	background: var(--wcpt-notice-error);
}

#wcpt-notices .wcpt-notice--error a.wcpt-notice-link:is(:hover, :focus-visible) {
	background: #8c1d17;
}

#wcpt-notices .wcpt-notice.wcpt-notice--error .wcpt-notice-close {
	color: var(--wcpt-notice-error);
}

#wcpt-notices .wcpt-notice-sku {
	color: var(--wcpt-notice-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

#wcpt-notices .wcpt-notice svg {
	inline-size: 18px;
	block-size: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#wcpt-notices .wcpt-notice-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-inline-size: 0;
	padding-block-start: 1px;
}

#wcpt-notices .wcpt-notice-title {
	color: var(--wcpt-notice-accent);
	font-size: 15px;
	font-weight: 600;
}

#wcpt-notices .wcpt-notice--error .wcpt-notice-title {
	color: var(--wcpt-notice-error);
}

#wcpt-notices .wcpt-notice-text {
	color: var(--wcpt-notice-muted);
	font-size: 14px;
	overflow-wrap: anywhere;
}

/* Sammelkarte: mehrere Artikel als kurze Liste, der zuletzt hinzugefügte oben. */
#wcpt-notices .wcpt-notice-list {
	display: grid;
	gap: 4px;
	inline-size: 100%;
	margin: 8px 0 0;
	padding: 8px 0 0;
	border-block-start: 1px solid var(--wcpt-notice-border);
	list-style: none;
}

#wcpt-notices .wcpt-notice-list[hidden] {
	display: none;
}

#wcpt-notices .wcpt-notice-list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	color: var(--wcpt-notice-muted);
	font-size: 13px;
	line-height: 1.35;
}

#wcpt-notices .wcpt-notice-list li.is-neu {
	color: var(--wcpt-notice-text);
}

#wcpt-notices .wcpt-notice-menge {
	color: var(--wcpt-notice-accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

#wcpt-notices .wcpt-notice-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wcpt-notices .wcpt-notice-list .wcpt-notice-sku {
	font-size: 12px;
	white-space: nowrap;
}

#wcpt-notices .wcpt-notice-list li.wcpt-notice-mehr {
	display: block;
	font-weight: 600;
}

/* Knöpfe der Karte: „Warenkorb ansehen" gefüllt, „3 Stück hinzufügen" nur mit Kontur. */
#wcpt-notices .wcpt-notice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 10px;
}

#wcpt-notices .wcpt-notice .wcpt-notice-rest,
#wcpt-notices .wcpt-notice .wcpt-notice-rest:is(:hover, :focus) {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 7px 15px;
	border: 1px solid var(--wcpt-notice-accent);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--wcpt-notice-accent);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#wcpt-notices .wcpt-notice--error .wcpt-notice-rest,
#wcpt-notices .wcpt-notice--error .wcpt-notice-rest:is(:hover, :focus) {
	border-color: var(--wcpt-notice-error);
	color: var(--wcpt-notice-error);
}

#wcpt-notices .wcpt-notice--error .wcpt-notice-rest:hover {
	background: rgba(179, 38, 30, 0.08);
}

#wcpt-notices .wcpt-notice .wcpt-notice-rest:focus-visible {
	outline: 2px solid var(--wcpt-notice-error);
	outline-offset: 2px;
}

#wcpt-notices a.wcpt-notice-link,
#wcpt-notices a.wcpt-notice-link:visited {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--wcpt-notice-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

#wcpt-notices a.wcpt-notice-link:hover,
#wcpt-notices a.wcpt-notice-link:focus-visible {
	background: #1d2766;
	color: #fff;
}

#wcpt-notices a.wcpt-notice-link:focus-visible,
#wcpt-notices .wcpt-notice .wcpt-notice-close:focus-visible {
	outline: 2px solid var(--wcpt-notice-accent);
	outline-offset: 2px;
}

#wcpt-notices .wcpt-notice .wcpt-notice-close,
#wcpt-notices .wcpt-notice .wcpt-notice-close:hover,
#wcpt-notices .wcpt-notice .wcpt-notice-close:focus {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	margin: -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--wcpt-notice-muted);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#wcpt-notices .wcpt-notice .wcpt-notice-close:hover {
	background: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.08);
	color: var(--wcpt-notice-accent);
}

/* Handy: unten über die volle Breite. */
@media (max-width: 767px) {
	#wcpt-notices {
		inset-block-end: calc(var(--wcpt-notice-bottom) + env(safe-area-inset-bottom, 0px));
		inset-inline: 16px;
		inline-size: auto;
	}
}

@keyframes wcpt-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@keyframes wcpt-out {
	to { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
	#wcpt-notices *,
	.wcpt *,
	.wcpt *::before,
	.wcpt *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* --- Schmale Container: Zeilen als Karten --------------------------- */

@container wcpt (max-width: 720px) {
	.wcpt--stack .wcpt-table thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.wcpt--stack .wcpt-table,
	.wcpt--stack .wcpt-table tbody,
	.wcpt--stack .wcpt-table tr,
	.wcpt--stack .wcpt-table td {
		display: block;
		inline-size: 100%;
	}

	.wcpt--stack .wcpt-table tr {
		border-block-end: var(--wcpt-row-border, 1px) solid var(--wcpt-row-border-color, #e6e6e6);
		padding-block: 8px;
	}

	/* .wcpt-table im Selektor: sonst gewinnt „.wcpt--stack .wcpt-table td"
	   oben (display: block) und Spaltenname und Wert kleben aneinander. */
	.wcpt--stack .wcpt-table .wcpt-td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		border: 0;
		padding-block: 6px;
		text-align: end;
	}

	/* Lange Werte (Name, Preis-Hinweis) umbrechen statt aus der Karte zu laufen. */
	.wcpt--stack .wcpt-table .wcpt-td > * {
		min-inline-size: 0;
		overflow-wrap: anywhere;
	}

	/* Name und Preis haben oft mehrere Teile (Name + Merkmale, Hinweis mit Links):
	   Spaltenname darüber, Wert darunter in voller Breite. */
	.wcpt--stack .wcpt-table .wcpt-td--name,
	.wcpt--stack .wcpt-table .wcpt-td--price {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		text-align: start;
	}

	.wcpt--stack .wcpt-table .wcpt-td--price .wcpt-price {
		white-space: normal;
	}

	.wcpt--stack .wcpt-td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--wcpt-header-color, #1a1a1a);
		text-align: start;
		flex: none;
	}

	.wcpt--stack .wcpt-td--image::before,
	.wcpt--stack .wcpt-td--checkbox::before {
		content: none;
	}

	.wcpt--stack .wcpt-td--image {
		justify-content: center;
	}

	/* Menge und Button nehmen die ganze Kartenbreite ein, der Spaltenname
	   „Warenkorb" ist hier überflüssig. */
	.wcpt--stack .wcpt-td--cart::before {
		content: none;
	}

	.wcpt--stack .wcpt-table .wcpt-td--cart {
		padding-block-start: 12px;
	}

	.wcpt--stack .wcpt-td--cart > .wcpt-cart-group,
	.wcpt--stack .wcpt-td--cart > .wcpt-btn {
		flex: 1 1 auto;
		inline-size: 100%;
	}

	.wcpt--stack .wcpt-td--cart .wcpt-cart-group .wcpt-btn {
		flex: 1 1 auto;
	}

	.wcpt--stack .wcpt-description {
		max-inline-size: none;
	}
}

/* -----------------------------------------------------------------
 * Anmelde-Popover für Gäste (Klick auf eine Zeile ohne Auswahl).
 * ----------------------------------------------------------------- */

#wcpt-anmelden {
	--wcpt-anm-accent: var(--mn-accent, #283583);
	--wcpt-anm-text: #2d3134;
	--wcpt-anm-muted: #5b6190;
	--wcpt-anm-border: #d9dcec;
	--wcpt-anm-error: #b3261e;
	position: absolute;
	z-index: 10000;
	box-sizing: border-box;
	inline-size: min(360px, calc(100vw - 32px));
	padding: 20px;
	border: 1px solid var(--wcpt-anm-border);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	box-shadow: 0 16px 40px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.18), 0 2px 6px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.06);
	color: var(--wcpt-anm-text);
	font-size: 14px;
	line-height: 1.45;
	text-align: start;
	animation: wcpt-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#wcpt-anmelden.is-leaving {
	animation: wcpt-out 0.16s ease forwards;
}

#wcpt-anmelden:focus {
	outline: none;
}

/* Schmal: als Leiste am unteren Rand, Tastatur schiebt sie mit. */
#wcpt-anmelden.is-schmal {
	position: fixed;
	inset: auto 8px 8px;
	inline-size: auto;
	max-block-size: calc(100dvh - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

#wcpt-anmelden .wcpt-anmelden-titel {
	display: block;
	margin: 0 36px 12px 0;
	color: var(--wcpt-anm-accent);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

#wcpt-anmelden .wcpt-anmelden-zu,
#wcpt-anmelden .wcpt-anmelden-zu:hover,
#wcpt-anmelden .wcpt-anmelden-zu:focus {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wcpt-anm-muted);
	cursor: pointer;
	box-shadow: none;
}

#wcpt-anmelden .wcpt-anmelden-zu:hover {
	background: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.08);
	color: var(--wcpt-anm-accent);
}

#wcpt-anmelden .wcpt-anmelden-zu svg {
	inline-size: 18px;
	block-size: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

#wcpt-anmelden .wcpt-anmelden-vorteile {
	display: grid;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

#wcpt-anmelden .wcpt-anmelden-vorteile li {
	position: relative;
	margin: 0;
	padding-inline-start: 24px;
}

/* Haken vor jedem Vorteil. */
#wcpt-anmelden .wcpt-anmelden-vorteile li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.2em;
	inset-inline-start: 0;
	inline-size: 16px;
	block-size: 16px;
	border-radius: 50%;
	background: var(--wcpt-anm-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}

#wcpt-anmelden .wcpt-anmelden-form {
	display: grid;
	gap: 10px;
	margin: 0;
}

#wcpt-anmelden .wcpt-anmelden-form label {
	display: grid;
	gap: 4px;
	margin: 0;
	color: var(--wcpt-anm-muted);
	font-size: 13px;
	font-weight: 500;
}

#wcpt-anmelden .wcpt-anmelden-form input {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--wcpt-anm-border);
	border-radius: 12px;
	background: #fff;
	color: var(--wcpt-anm-text);
	font: inherit;
	font-size: 16px; /* iOS zoomt sonst beim Fokus. */
	box-shadow: none;
}

#wcpt-anmelden .wcpt-anmelden-form input:focus {
	border-color: var(--wcpt-anm-accent);
	outline: 2px solid rgba(var(--mn-accent-rgb, 40, 53, 131), 0.2);
	outline-offset: 0;
}

#wcpt-anmelden .wcpt-anmelden-fehler {
	margin: 0;
	color: var(--wcpt-anm-error);
	font-size: 13px;
}

#wcpt-anmelden .wcpt-anmelden-los,
#wcpt-anmelden .wcpt-anmelden-los:hover,
#wcpt-anmelden .wcpt-anmelden-los:focus {
	block-size: 44px;
	margin: 4px 0 0;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	background: var(--wcpt-anm-accent);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#wcpt-anmelden .wcpt-anmelden-los:hover {
	background: #1d2766;
}

#wcpt-anmelden .wcpt-anmelden-los:focus-visible,
#wcpt-anmelden a:focus-visible,
#wcpt-anmelden .wcpt-anmelden-zu:focus-visible {
	outline: 2px solid var(--wcpt-anm-accent);
	outline-offset: 2px;
}

#wcpt-anmelden .wcpt-anmelden-los:disabled {
	opacity: 0.7;
	cursor: progress;
}

#wcpt-anmelden a,
#wcpt-anmelden a:visited {
	color: var(--wcpt-anm-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#wcpt-anmelden .wcpt-anmelden-vergessen {
	justify-self: center;
	font-size: 13px;
}

#wcpt-anmelden .wcpt-anmelden-fuss {
	display: grid;
	gap: 8px;
	margin-block-start: 16px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--wcpt-anm-border);
	font-size: 13px;
	text-align: center;
}

#wcpt-anmelden .wcpt-anmelden-fuss p {
	margin: 0;
	color: var(--wcpt-anm-muted);
}

@media (prefers-reduced-motion: reduce) {
	#wcpt-anmelden,
	#wcpt-anmelden.is-leaving {
		animation: none;
	}
}