/**
 * MaxiCommerce Bundles — Frontend (Warenkorb, Slide-In, Checkout, Danke-Seite, Konto).
 *
 * THEME-PROOF: Jede Regel unter der jeweiligen Flächen-Wurzel; der
 * Aufklapp-/Popup-Trigger mit !important-Resets gegen Theme-Button-Styles.
 *
 * LAYOUT-PRINZIP je Fläche:
 * - Warenkorb (Seite, Mobil UND Slide-In) — EINHEITLICH seit 1.9.7: KEIN
 *   Aufklapper. Die Bundle-Karte ist eine ganz normale Artikel-Karte
 *   (Kopf-Wrapper per display:contents aufgelöst), ein Popup-Icon neben
 *   dem Mülleimer öffnet die Artikel-Liste im zentrierten Bundle-Popup
 *   (Shell im Footer). Dadurch gibt es keine Sonder-Geometrie und nichts,
 *   was sich beim Öffnen verschieben könnte.
 * - Checkout/Danke: Zeile oben verankert, Kopf exakt auf Bild-Höhe (64px)
 *   zentriert — zugeklappt mittig wie normale Zeilen, aufgeklappt wächst
 *   nur die Liste nach unten, der Kopf bleibt stehen.
 *   Komponenten-Namen exakt im Songnamen-Stil (12px/400 #6b7280).
 *
 * ZUSTAND: hängt immer am Bundle-Root [data-mc-bundle].is-open — der
 * Slide-In-Root trägt selbst `is-open`.
 */

/* ==================================================================
   Gemeinsame Mechanik — am Bundle-Root verankert
   ================================================================== */

[data-mc-bundle] .mc-cart-bundle-children {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

[data-mc-bundle].is-open .mc-cart-bundle-children {
	grid-template-rows: 1fr;
}

[data-mc-bundle] .mc-cart-bundle-children-inner {
	overflow: hidden;
	min-height: 0;
}

[data-mc-bundle] .mc-bundle-toggle-chevron {
	flex: 0 0 auto;
	transform: none;
	transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

[data-mc-bundle].is-open .mc-bundle-toggle .mc-bundle-toggle-chevron {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	[data-mc-bundle] .mc-cart-bundle-children {
		transition: none;
	}
	[data-mc-bundle] .mc-bundle-toggle-chevron {
		transition: none;
	}
}

/* ==================================================================
   Aufklapp-/Popup-Trigger — überall identisch (12.5px), theme-fest
   ================================================================== */

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-bundle-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
	height: auto !important;
	min-height: 0 !important;
	margin: 3px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: left;
	white-space: nowrap;
	color: #6b7280 !important;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.16s ease;
}

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-bundle-toggle:hover,
:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-bundle-toggle:focus,
:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-bundle-toggle:active {
	background: transparent !important;
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;
	color: #111827 !important;
}

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-bundle-toggle:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px;
}

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-bundle-toggle-label {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font: inherit !important;
	color: inherit !important;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==================================================================
   Komponenten-Zeilen (Warenkorb-Seite + Popup; Checkout eigener Stil)
   ================================================================== */

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	min-width: 0;
}

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child:first-child {
	margin-top: 10px !important;
}

/* Thumbnail der Bundle-Artikel (bewusst OHNE Mengen-Badge — die Stückzahl
   steht an der Bundle-Karte selbst). */
:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child-media {
	position: relative;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: block;
}

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
	background: #f9fafb;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child-img img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	border-radius: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child-info {
	display: block;
	flex: 1 1 0;
	min-width: 0;
}

/* Name: Farbe des Bundle-Produktnamens, einen Hauch fetter. */
:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child-name {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #111827 !important;
	line-height: 1.35 !important;
	letter-spacing: normal !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child-meta,
:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child-after {
	display: block;
	margin: 1px 0 0;
	font-size: 11.5px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	line-height: 1.3 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:is(#mc-cart-app, .mc-cart--drawer, #mc-cart-drawer, #mc-checkout-app) .mc-cart-bundle-child-meta .mc-cart-item__meta-line {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11.5px !important;
	color: #6b7280 !important;
}

/* Bundle-Bild-Fallback (Platzhalter-Produkt gelöscht) */
.mc-bundle-img-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #9ca3af;
	background: #f9fafb;
}

/* ==================================================================
   Warenkorb (Seite + Slide-In) — Bundle-Karte = ganz normale Karte
   ==================================================================
   EINHEITLICH seit 1.9.7: Es gibt im Warenkorb KEINEN Aufklapper mehr —
   ein Popup-Icon neben dem Mülleimer öffnet die Artikel-Liste im Popup.
   Dadurch braucht die Bundle-Karte keine Sonder-Geometrie: der
   Kopf-Wrapper wird per display:contents aufgelöst, Bild/Name/Preis/
   Stepper/Icons liegen direkt in der Karte und erben exakt das Layout
   normaler Artikel — inklusive vertikaler Zentrierung. */

:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-item--bundle .mc-cart-bundle-head {
	display: contents;
}

:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-item--bundle .mc-cart-item-total {
	padding-top: 0;
}

/* Gesamtpreis mit Streichpreis (rechtsbündig gestapelt) */
:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-item--bundle .mc-cart-item-total .mc-bundle-compare {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #9ca3af;
	text-decoration: line-through;
	line-height: 1.3;
}

:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-item--bundle .mc-cart-item-total .mc-bundle-current {
	display: block;
}

/* --- Mobil (≤760px): Karte bleibt normal, nur der Preis stapelt wie bei
   allen anderen Artikeln (Streichpreis in der Zeile davor). --- */
@media (max-width: 760px) {
	:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-item--bundle .mc-cart-item-total .mc-bundle-compare {
		display: inline;
		margin-right: 6px;
	}

	:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-item--bundle .mc-cart-item-total .mc-bundle-current {
		display: inline;
	}
}

/* --- Slide-In: Preis einzeilig wie in allen Drawer-Karten. Steht bewusst
   NACH dem Mobil-Block, damit im mobilen Drawer diese Regeln gewinnen. --- */
#mc-cart-drawer .mc-cart-item--bundle .mc-cart-item-total .mc-bundle-compare {
	display: inline;
	margin-right: 6px;
	font-size: 12px;
	font-weight: 400;
	color: #9ca3af;
	text-decoration: line-through;
}

#mc-cart-drawer .mc-cart-item--bundle .mc-cart-item-total .mc-bundle-current {
	display: inline;
}

/* ==================================================================
   Popup-Icon — öffnet die Bundle-Artikel-Liste (Seite + Slide-In)
   ==================================================================
   Auf der Warenkorb-SEITE läuft der Button im normalen Fluss mit und steht
   LINKS neben dem Mengen-Schalter (Optik/Größe wie der Mülleimer); im
   Slide-In und im mobilen Layout, wo der Mülleimer absolut oben rechts
   sitzt, wird er ebenfalls absolut daneben gesetzt.
   KEIN Focus-Ring — auch nicht nach dem Klick oder nach dem Schließen des
   Popups (der Fokus kehrt dann per JS auf den Button zurück). */

:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-bundle-popup-btn {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #9ca3af !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
	outline: none !important;
	transition: color var(--mc-cart-transition, 0.15s ease), background var(--mc-cart-transition, 0.15s ease), transform 0.2s ease !important;
}

:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-bundle-popup-btn:hover,
:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-bundle-popup-btn:focus,
:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-bundle-popup-btn:focus-visible,
:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-bundle-popup-btn:active {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 999px !important;
}

:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-bundle-popup-btn:hover {
	background: #f3f4f6 !important;
	color: #111827 !important;
}

:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-bundle-popup-btn:active {
	transform: scale(0.92);
}

/* Mobil: Mülleimer sitzt absolut oben rechts — Icon direkt daneben. */
@media (max-width: 760px) {
	:is(#mc-cart-app, .mc-cart--drawer) .mc-cart-bundle-popup-btn {
		position: absolute;
		top: 12px;
		right: 44px;
		z-index: 2;
		width: 30px !important;
		height: 30px !important;
	}
}

/* Slide-In: Mülleimer 28px oben rechts — Icon in gleicher Größe daneben. */
#mc-cart-drawer .mc-cart-item--bundle .mc-cart-bundle-popup-btn {
	position: absolute;
	top: 10px;
	right: 44px;
	z-index: 2;
	width: 28px !important;
	height: 28px !important;
	border-radius: 7px !important;
}

#mc-cart-drawer .mc-cart-item--bundle .mc-cart-bundle-popup-btn:hover,
#mc-cart-drawer .mc-cart-item--bundle .mc-cart-bundle-popup-btn:focus,
#mc-cart-drawer .mc-cart-item--bundle .mc-cart-bundle-popup-btn:focus-visible,
#mc-cart-drawer .mc-cart-item--bundle .mc-cart-bundle-popup-btn:active {
	border-radius: 7px !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ==================================================================
   Bundle-Popup (Slide-In) — zentriert, über allem
   ================================================================== */

.mc-bundle-popup-root {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	/* Geschlossen kein Klick-Fänger (seit 1.24.6) — dieselbe Härtung wie beim
	   Slide-In: Eine bildschirmfüllende Fläche darf nie über der Seite liegen,
	   nur weil ein Attribut verloren geht. */
	pointer-events: none;
}

.mc-bundle-popup-root.is-open {
	pointer-events: auto;
}

.mc-bundle-popup-root[hidden] {
	display: none !important;
}

.mc-bundle-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.16s ease;
}

.mc-bundle-popup-root.is-open .mc-bundle-popup-overlay {
	opacity: 1;
}

.mc-bundle-popup-sheet {
	position: relative;
	width: min(420px, 100%);
	max-height: min(640px, 86vh);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 28px 72px -18px rgba(15, 23, 42, 0.4);
	overflow: hidden;
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.mc-bundle-popup-root.is-open .mc-bundle-popup-sheet {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.mc-bundle-popup-overlay,
	.mc-bundle-popup-sheet {
		transition: none;
	}
}

.mc-bundle-popup-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 18px 14px;
	border-bottom: 1px solid #f3f4f6;
}

/* Bundle-Bild im Kopf — Markup stammt aus der Karte (Frame + Mengen-Badge);
   Größen/Radien hier eigenständig, da die Karten-Regeln außerhalb ihrer
   Flächen-Wurzeln nicht greifen. */
.mc-bundle-popup-thumb {
	position: relative;
	flex: 0 0 52px;
	display: block;
	width: 52px;
	height: 52px;
}

.mc-bundle-popup-thumb[hidden] {
	display: none !important;
}

.mc-bundle-popup-thumb .mc-cart-item-img-frame {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 11px;
	overflow: hidden;
	background: #f9fafb;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.mc-bundle-popup-thumb img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.mc-bundle-popup-thumb .mc-bundle-img-fallback {
	border-radius: 0;
}

.mc-bundle-popup-thumb .mc-cart-item-img-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	z-index: 2;
	display: block;
	box-sizing: border-box;
	width: 19px;
	height: 19px;
	min-width: 19px;
	padding: 2px 0 0;
	border-radius: 50%;
	background: #1a1a1a;
	color: #fff !important;
	font-family: var(--mc-ui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif) !important;
	font-size: 9.5px !important;
	font-weight: 600 !important;
	line-height: 17px !important;
	letter-spacing: 0 !important;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
	pointer-events: none;
	overflow: hidden;
}

.mc-bundle-popup-head-text {
	flex: 1 1 auto;
	min-width: 0;
}

.mc-bundle-popup-title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit;
	font-size: 16.5px !important;
	font-weight: 650 !important;
	color: #111827 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-bundle-popup-sub {
	margin: 3px 0 0 !important;
	padding: 0 !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	color: #9ca3af !important;
	line-height: 1.3 !important;
}

.mc-bundle-popup-close {
	flex: 0 0 auto;
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: none !important;
	border-radius: 999px !important;
	background: #f3f4f6 !important;
	color: #6b7280 !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease, color 0.15s ease;
}

.mc-bundle-popup-close:hover,
.mc-bundle-popup-close:focus,
.mc-bundle-popup-close:focus-visible,
.mc-bundle-popup-close:active {
	background: #e5e7eb !important;
	color: #111827 !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 999px !important;
}

.mc-bundle-popup-body {
	padding: 4px 18px 12px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
}

/* Komponenten im Popup: großzügiger als in den Listen (48px + Badge). */
.mc-bundle-popup-body .mc-cart-bundle-child {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0 !important;
	padding: 10px 0 !important;
	min-width: 0;
	border-bottom: 1px solid #f3f4f6;
}

.mc-bundle-popup-body .mc-cart-bundle-child:last-child {
	border-bottom: none;
}

.mc-bundle-popup-body .mc-cart-bundle-child-media {
	position: relative;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: block;
}

.mc-bundle-popup-body .mc-cart-bundle-child-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: #f9fafb;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.mc-bundle-popup-body .mc-cart-bundle-child-img img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0 !important;
	margin: 0 !important;
}

.mc-bundle-popup-body .mc-cart-bundle-child-info {
	display: block;
	flex: 1 1 0;
	min-width: 0;
}

.mc-bundle-popup-body .mc-cart-bundle-child-name {
	display: block !important;
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: #111827 !important;
	line-height: 1.35 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-bundle-popup-body .mc-cart-bundle-child-meta,
.mc-bundle-popup-body .mc-cart-bundle-child-after {
	display: block;
	margin: 2px 0 0;
	font-size: 12px !important;
	color: #6b7280 !important;
	line-height: 1.3 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Die Popup-Shell steht im Footer, also AUSSERHALB von #mc-cart-app &
   Co. — die Zeilen-Regel weiter oben greift hier nicht. Ohne diese
   Entsprechung liefen mehrere Meta-Zeilen einer Komponente im Popup
   ineinander. Schriftgröße/Farbe erben bewusst vom Block darüber (12px). */
.mc-bundle-popup-body .mc-cart-bundle-child-meta .mc-cart-item__meta-line {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-bundle-popup-foot {
	border-top: 1px solid #f3f4f6;
	background: #f9fafb;
	padding: 13px 18px 15px;
}

.mc-bundle-popup-total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.mc-bundle-popup-total-label {
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
}

.mc-bundle-popup-total-value {
	font-size: 15.5px;
	font-weight: 700;
	color: #111827;
	white-space: nowrap;
}

.mc-bundle-popup-total-value .mc-bundle-compare {
	margin-right: 7px;
	font-size: 12px;
	font-weight: 400;
	color: #9ca3af;
	text-decoration: line-through;
}

/* ==================================================================
   Checkout-Bestellübersicht + Danke-Seite (#mc-checkout-app)
   ================================================================== */

/* FESTER KOPF: Zeile oben verankert, der Kopf exakt auf Bild-Höhe (64px)
   zentriert — zugeklappt identisch zu normalen Zeilen, aufgeklappt wächst
   NUR die Liste nach unten; Name/Preis bewegen sich dabei nicht. */
#mc-checkout-app .mc-cart-item--bundle {
	align-items: flex-start !important;
}

#mc-checkout-app .mc-cart-item--bundle > td {
	align-self: flex-start !important;
}

#mc-checkout-app .mc-cart-item--bundle td.mc-cart-item__content {
	justify-content: flex-start !important;
}

#mc-checkout-app .mc-cart-item--bundle .mc-cart-item__head {
	min-height: 64px;
	align-items: center !important;
}

#mc-checkout-app .mc-cart-item--bundle .mc-cart-item__title-block {
	justify-content: center;
}

#mc-checkout-app .mc-cart-item--bundle .mc-cart-item__image-wrap {
	width: 64px;
	height: 64px;
}

/* Artikel-Liste unter dem Kopf (der Kopf bringt bereits Rest-Luft mit);
   Zeilen etwas größer (40px-Thumbs), Namen EXAKT im Songnamen-Stil
   (12px/400 #6b7280, line-height 1.3).

   WICHTIG: Der Abstand über der ersten Zeile MUSS ein Außen-Abstand der
   Zeile sein — der Aufklapp-Container clippt für die Höhen-Animation und ist
   zugeklappt exakt 0 hoch; ein Innen-Abstand am Container würde nicht
   mitclippen und im zugeklappten Zustand als Streifen durchscheinen. */
#mc-checkout-app .mc-cart-bundle-children--summary .mc-cart-bundle-child {
	margin-top: 9px !important;
}

#mc-checkout-app .mc-cart-bundle-children--summary .mc-cart-bundle-child:first-child {
	margin-top: 1px !important;
}

#mc-checkout-app .mc-cart-bundle-children--summary .mc-cart-bundle-child-media {
	flex-basis: 40px;
	width: 40px;
	height: 40px;
}

#mc-checkout-app .mc-cart-bundle-children--summary .mc-cart-bundle-child-img {
	border-radius: 8px;
}

#mc-checkout-app .mc-cart-bundle-children--summary .mc-cart-bundle-child-name {
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	line-height: 1.3 !important;
}

#mc-checkout-app .mc-cart-bundle-children--summary .mc-cart-bundle-child-meta,
#mc-checkout-app .mc-cart-bundle-children--summary .mc-cart-bundle-child-after {
	font-size: 11.5px !important;
	color: #9ca3af !important;
}

#mc-checkout-app .mc-cart-item--bundle.is-open .mc-cart-bundle-children--summary .mc-cart-bundle-children-inner {
	padding-bottom: 2px;
}

/* Etwas dichter an den Aufklapper: Der Kopf ist auf Bild-Höhe (64px) fixiert
   und lässt unter dem Aufklapp-Text Rest-Luft — davon holt die geöffnete
   Liste 5px zurück. Nur im offenen Zustand, der Kopf selbst bleibt exakt
   stehen (zugeklappt ändert sich nichts). Der Margin animiert synchron zur
   Höhen-Animation, damit beim Zuklappen nichts springt. */
#mc-checkout-app .mc-cart-bundle-children--summary {
	transition:
		grid-template-rows 0.3s cubic-bezier(0.32, 0.72, 0, 1),
		margin-top 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

#mc-checkout-app .mc-cart-item--bundle.is-open .mc-cart-bundle-children--summary {
	margin-top: -5px;
}

@media (prefers-reduced-motion: reduce) {
	#mc-checkout-app .mc-cart-bundle-children--summary {
		transition: none;
	}
}

/* ==================================================================
   Kundenbereich — Bestell-Detail (natives <details>)
   ================================================================== */

.mc-acc-order-bundle {
	display: block;
	border-bottom: 1px solid var(--mc-acc-border-light, #f3f4f6);
}

.mc-acc-order-bundle:last-child {
	border-bottom: none;
}

.mc-acc-order-bundle > summary {
	list-style: none !important;
	cursor: pointer;
	border-bottom: none !important;
	-webkit-tap-highlight-color: transparent;
}

.mc-acc-order-bundle > summary::-webkit-details-marker {
	display: none;
}

.mc-acc-order-bundle > summary::marker {
	content: none;
}

.mc-acc-order-bundle > summary:focus {
	outline: none;
}

.mc-acc-order-bundle > summary:focus-visible {
	outline: 2px solid var(--mc-acc-primary, #015BD1);
	outline-offset: -2px;
	border-radius: 8px;
}

.mc-acc-order-bundle-toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	margin: 3px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	color: var(--mc-acc-text-secondary, #6b7280) !important;
	line-height: 1.3 !important;
	width: fit-content;
	transition: color 0.2s ease;
}

.mc-acc-order-bundle > summary:hover .mc-acc-order-bundle-toggle {
	color: var(--mc-acc-text, #111827) !important;
}

.mc-acc-order-bundle-toggle-hide {
	display: none;
}

.mc-acc-order-bundle[open] .mc-acc-order-bundle-toggle-show {
	display: none;
}

.mc-acc-order-bundle[open] .mc-acc-order-bundle-toggle-hide {
	display: inline;
}

.mc-acc-order-bundle-chevron {
	flex: 0 0 auto;
	transform: none;
	transition: transform 0.25s ease;
}

.mc-acc-order-bundle[open] .mc-acc-order-bundle-chevron {
	transform: rotate(180deg);
}

.mc-acc-order-bundle-children {
	padding: 0 20px 16px 92px;
}

.mc-acc-order-bundle-child {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	min-width: 0;
}

.mc-acc-order-bundle-child:first-child {
	margin-top: 0;
}

.mc-acc-order-bundle-child-media {
	position: relative;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: block;
}

.mc-acc-order-bundle-child-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
	background: #f9fafb;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.mc-acc-order-bundle-child-img img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0 !important;
	margin: 0 !important;
}

.mc-acc-order-bundle-child-info {
	display: block;
	flex: 1 1 0;
	min-width: 0;
}

.mc-acc-order-bundle-child-name {
	display: block;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--mc-acc-text, #111827) !important;
	line-height: 1.35 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-acc-order-bundle-child-info .mc-cart-item__meta {
	display: block;
}

@media (max-width: 600px) {
	.mc-acc-order-bundle-children {
		padding-left: 20px;
	}
}