/*
 * Der Warenkorb als Schublade.
 *
 * Sie liegt über der Seite und fährt von rechts ein. Der Grund dahinter wird
 * abgedunkelt, damit klar ist: Das hier ist jetzt dran, der Rest wartet.
 *
 * Am Handy nimmt sie 90 % der Breite. Der schmale Streifen daneben ist
 * Absicht: Er sagt, dass die Seite dahinter weitergeht - über die volle
 * Breite sähe es aus, als wäre man woanders gelandet.
 */

.mlk-korb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	justify-content: flex-end;

	/*
	 * Beschnitten, und zwar unbedingt.
	 *
	 * Das Panel steht vor dem Einfahren rechts NEBEN dem Bild. Ohne diese
	 * Zeile ragt es dort hinaus, und die Seite laesst sich seitlich
	 * schieben - auf einen leeren Streifen, mit allem aus der Mitte
	 * gerueckt. Am Handy faellt das am staerksten auf.
	 */
	overflow: hidden;
}

/*
 * Geschlossen heisst hier NICHT display:none.
 *
 * Aus display:none heraus muss der Browser das ganze Panel samt Inhalt neu
 * vermessen - und zwar genau in dem Bild, in dem die Bewegung anfaengt.
 * Das ist das Ruckeln beim Oeffnen. Unsichtbar und nicht anklickbar reicht
 * voellig: Die Masse stehen dann schon fest, und es faehrt sauber ein.
 */
.mlk-korb[hidden] {
	display: flex;
	visibility: hidden;
	pointer-events: none;
}

.mlk-korb__grund {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .25s ease;
	will-change: opacity;
}

.mlk-korb--auf .mlk-korb__grund { opacity: 1; }

.mlk-korb__panel {
	position: relative;

	/*
	 * Am Handy bleibt ein Streifen der Seite stehen. Ueber die ganze Breite
	 * sieht es aus, als waere man woanders gelandet - der schmale Rand sagt:
	 * Das hier liegt nur obendrauf, dahinter geht es weiter.
	 */
	width: min(420px, 90%);
	max-width: 90%;
	height: 100%;
	background: #fff;
	color: #1d2327;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 40px rgba(0, 0, 0, .28);

	/* Startpunkt: außerhalb des Bildes, rechts daneben. */
	transform: translate3d(100%, 0, 0);
	transition: transform .28s cubic-bezier(.22, .61, .36, 1);

	/*
	 * Eigene Ebene fuer die Grafikkarte. Der weiche Schatten oben kostet
	 * sonst in jedem einzelnen Bild neu Rechenzeit - so wird er einmal
	 * gezeichnet und danach nur noch verschoben.
	 */
	will-change: transform;
	backface-visibility: hidden;
}

.mlk-korb--auf .mlk-korb__panel { transform: translate3d(0, 0, 0); }

/* Wer schnelle Bewegungen nicht mag, bekommt sie auch nicht. */
@media (prefers-reduced-motion: reduce) {
	.mlk-korb__panel,
	.mlk-korb__grund { transition: none; }
}

/* --- Kopf --- */

.mlk-korb__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid #e4e4e7;
	flex: none;
}

.mlk-korb__titel { font-size: 17px; }

/*
 * Das Kreuz ist ein Knopf - und Knoepfe faerbt das Theme ein. Ohne diese
 * Zeilen sass oben rechts ein rotes Kaestchen.
 */
.mlk-korb__schliessen {
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 28px;
	line-height: 1;
	padding: 0 4px;
	margin: 0;
	min-width: 0;
	min-height: 0;
	cursor: pointer;
	color: #50575e;
}

.mlk-korb__schliessen:hover,
.mlk-korb__schliessen:focus,
.mlk-korb__schliessen:active {
	background: none;
	background-color: transparent;
	box-shadow: none;
}

.mlk-korb__schliessen:hover { color: #1d2327; }

/* --- Inhalt --- */

.mlk-korb__inhalt {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 18px 18px;
}

.mlk-korb__leer {
	margin: 32px 0 16px;
	text-align: center;
	color: #50575e;
}

.mlk-korb__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Die Zeile ist ein Block, keine Reihe.
 *
 * Der Hauptposten bildet die Reihe (Bild neben Text), die Motive stehen
 * darunter. Waere die Zeile selbst die Reihe, wuerden die Motive zu
 * weiteren Spalten daneben und liefen aus dem Panel heraus.
 */
.mlk-korb__zeile {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid #f0f0f1;
}

.mlk-korb__haupt {
	display: flex;
	gap: 12px;
}

.mlk-korb__bildplatz {
	flex: none;
	width: 72px;
}

.mlk-korb__bildplatz img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	background: #f6f7f7;
}

.mlk-korb__text {
	flex: 1;
	min-width: 0;
}

.mlk-korb__name {
	margin: 0 0 2px;
	font-weight: 600;
	line-height: 1.3;
}

.mlk-korb__angaben {
	margin: 0 0 6px;
	font-size: 13px;
	color: #50575e;
}

/*
 * Die Motive stehen als eigene Zeilen unter ihrem Feuerkorb.
 *
 * Sie sehen aus wie Artikel - Bild, Name, Preis - und haben doch weder
 * Menge noch Entfernen: beides gehoert dem Korb darueber. Die Linie links
 * und der Einzug sagen, dass sie dazugehoeren, ohne dass an jeder Zeile
 * "gehoert zu: Grosser Feuerkorb ..." stehen muss.
 */
.mlk-korb__motiv {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 10px 0 0 24px;
	padding-left: 12px;
	border-left: 2px solid #e4e4e7;
}

.mlk-korb__motivbild {
	flex: none;
	width: 48px;
}

.mlk-korb__motivbild img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	background: #f6f7f7;
}

.mlk-korb__motivtext {
	flex: 1;
	min-width: 0;
}

.mlk-korb__motivname {
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	color: #1d2327;
}

.mlk-korb__motivwort {
	margin: 1px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

.mlk-korb__motivfeld {
	margin: 1px 0 0;
	font-size: 12px;
	color: #787c82;
}

.mlk-korb__motivpreis {
	font-size: 14px;
	white-space: nowrap;
	color: #50575e;
}

.mlk-korb__zeile-fuss {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.mlk-korb__menge {
	display: inline-flex;
	align-items: center;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	overflow: hidden;
	line-height: 1;
}

/*
 * Mittig, und zwar aus eigener Kraft.
 *
 * Das Theme gibt Knöpfen eine eigene Zeilenhöhe und ein eigenes Innenmaß
 * mit; damit saß das Minus tiefer als das Plus. Flexbox stellt beides genau
 * in die Mitte, unabhängig davon, was von außen kommt.
 */
.mlk-korb__mengeknopf {
	background: none;
	border: 0;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	color: #1d2327;
}

.mlk-korb__mengeknopf:hover { background: #f0f0f1; }

.mlk-korb__zahl {
	min-width: 28px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mlk-korb__preis {
	margin-left: auto;
	font-weight: 600;
	white-space: nowrap;
}

.mlk-korb__weg {
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	color: #787c82;
	text-decoration: underline;
	cursor: pointer;
}

.mlk-korb__weg:hover { color: #b32d2e; }

/* --- Fuß --- */

.mlk-korb__fuss {
	border-top: 1px solid #e4e4e7;
	padding: 16px 0 4px;
	position: sticky;
	bottom: 0;
	background: #fff;
}

.mlk-korb__summe {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 2px;
	font-size: 16px;
}

.mlk-korb__hinweis {
	margin: 0 0 12px;
	font-size: 12px;
	color: #787c82;
}

.mlk-korb__kasse,
.mlk-korb__weiter {
	display: block;
	width: 100%;
	text-align: center;
	padding: 13px 16px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
}

.mlk-korb__kasse {
	background: #1d2327;
	color: #fff;
	text-decoration: none;
	margin-bottom: 8px;
}

.mlk-korb__kasse:hover { background: #000; color: #fff; }

.mlk-korb__weiter {
	background: #fff;
	color: #1d2327;
	border-color: #dcdcde;
}

.mlk-korb__weiter:hover { background: #f6f7f7; }

/*
 * Am Handy schwebt sie als Karte, statt von Kante zu Kante zu gehen.
 *
 * Über die volle Höhe wirkt sie wie eine neue Seite; mit Luft oben und unten
 * und einer sichtbaren Kante bleibt erkennbar, dass sie nur obendrauf liegt.
 * Am Schreibtisch bleibt es bei der ganzen Höhe - dort ist der Bildschirm
 * breit genug, dass das Panel ohnehin als Streifen zu erkennen ist.
 */
@media (max-width: 780px) {

	.mlk-korb {
		align-items: center;
		padding: 14px 10px 14px 0;
	}

	.mlk-korb__panel {
		height: 100%;
		max-height: 100%;
		border-radius: 16px;
		border: 1px solid rgba(0, 0, 0, .14);
		box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
	}

	/* Der Fuß sitzt jetzt in einer Karte mit runden Ecken. */
	.mlk-korb__fuss {
		border-radius: 0 0 15px 15px;
		padding-left: 18px;
		padding-right: 18px;
		margin: 0 -18px;
	}
}

/* --- Der Knopf, der sie öffnet --- */

.mlk-korbknopf {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border: 0;
	border-radius: 999px;
	background: #1d2327;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

.mlk-korbknopf[hidden] { display: none; }

.mlk-korbknopf__zahl {
	background: #fff;
	color: #1d2327;
	border-radius: 999px;
	min-width: 22px;
	padding: 1px 7px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* Am Handy weiter oben, damit er nicht auf der Preisleiste des
   Konfigurators sitzt. */
@media (max-width: 780px) {
	.mlk-korbknopf { bottom: 84px; }
}


/* =====================================================================
 * Die Warenkorbseite am Handy: Bilder wieder einblenden
 *
 * WooCommerce blendet die Bildspalte unter 768 Pixeln aus:
 *
 *     .woocommerce #content table.cart .product-thumbnail { display: none }
 *
 * Das stammt aus der Zeit, als dort ueberall dasselbe Artikelfoto stand
 * und nur Platz kostete. Hier ist es umgekehrt: Bei einem Wunschmotiv
 * steht dort das Bild, das der Kunde hochgeladen hat - die einzige
 * Stelle, an der er vor dem Kauf sieht, ob er die richtige Datei
 * erwischt hat.
 *
 * !important ist hier ausnahmsweise noetig: In WooCommerces Regel steckt
 * eine ID (#content), und dagegen kommt keine Klasse an. Die Alternative
 * waere, selbst eine ID zu erfinden - das waere schlechter.
 * ================================================================== */

@media (max-width: 767px) {

	.woocommerce table.cart .product-thumbnail,
	.woocommerce-page table.cart .product-thumbnail,
	.woocommerce table.shop_table_responsive .product-thumbnail {
		display: block !important;
		text-align: left !important;
		padding: 12px 0 0 !important;
		border-bottom: 0 !important;
	}

	/* Die Beschriftung, die WooCommerce jeder Zeile voranstellt. */
	.woocommerce table.cart .product-thumbnail::before,
	.woocommerce-page table.cart .product-thumbnail::before {
		content: none !important;
	}

	/*
	 * Auch die Masse muessen sich durchsetzen: Das Theme gibt Bildern in
	 * Tabellen eigene Groessen mit, und daraus wurden hochkante 84 x 112 -
	 * vier Zeilen mit unterschiedlich hohen Bildern sehen unruhig aus.
	 */
	.woocommerce table.cart .product-thumbnail img,
	.woocommerce-page table.cart .product-thumbnail img {
		width: 76px !important;
		height: 76px !important;
		max-width: 76px !important;
		object-fit: cover;
		border-radius: 8px;
		background: #f6f7f7;
		display: block;
	}

	/* In der Kopfzeile der Tabelle hat die leere Zelle nichts zu suchen. */
	.woocommerce table.cart thead .product-thumbnail,
	.woocommerce-page table.cart thead .product-thumbnail {
		display: none !important;
	}

	/* -----------------------------------------------------------------
	 * Aus der zerfallenen Tabelle wird eine Karte
	 *
	 * Am Handy macht WooCommerce aus jeder Zelle eine eigene Zeile mit
	 * vorangestellter Beschriftung: Entfernen, Bild, Name, Preis, Anzahl,
	 * Zwischensumme - untereinander. Ein einziger Artikel war damit
	 * 532 Pixel hoch, und die Seite las sich als Formular statt als
	 * Warenkorb. Die Kasse daneben zeigt kompakte Karten, weil sie schon
	 * in der neuen Bauart steckt.
	 *
	 * Statt die Seite umzubauen - was die Verbindung von Feuerkorb und
	 * Motiven zerreissen wuerde - bekommt die Tabelle dieselbe Form:
	 *
	 *     [ Bild ]  Name und Angaben          Betrag
	 *               [ Anzahl ]
	 *
	 * Es bleibt eine Tabelle; nur ihre Anordnung ist eine andere.
	 * ----------------------------------------------------------------- */

	.woocommerce table.cart tbody tr.cart_item,
	.woocommerce-page table.cart tbody tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		grid-template-areas:
			"bild name"
			"bild fuss";
		align-items: start;
		gap: 8px 12px;
		margin: 0 0 12px;
		padding: 14px 40px 14px 14px;
		border: 1px solid #e2ddd6;
		border-radius: 12px;
		background: #fff;
	}

	.woocommerce table.cart tbody tr.cart_item td,
	.woocommerce-page table.cart tbody tr.cart_item td {
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
	}

	/* Die Beschriftungen, die WooCommerce jeder Zelle voranstellt. */
	.woocommerce table.cart tbody tr.cart_item td::before,
	.woocommerce-page table.cart tbody tr.cart_item td::before {
		content: none !important;
	}

	.woocommerce table.cart tbody .product-thumbnail,
	.woocommerce-page table.cart tbody .product-thumbnail {
		grid-area: bild;
		padding: 0 !important;
	}

	.woocommerce table.cart tbody .product-name,
	.woocommerce-page table.cart tbody .product-name {
		grid-area: name;
		font-size: 15px;
		line-height: 1.35;
	}

	.woocommerce table.cart tbody .product-quantity,
	.woocommerce-page table.cart tbody .product-quantity { grid-area: fuss; }

	.woocommerce table.cart tbody .product-subtotal,
	.woocommerce-page table.cart tbody .product-subtotal {
		grid-area: fuss;
		justify-self: end;
		align-self: center;
		font-weight: 700;
		white-space: nowrap;
	}

	/*
	 * Der Einzelpreis bleibt weg. Er steht bei Menge 1 doppelt da, und
	 * genau das ist der Normalfall - ein Feuerkorb wird selten zweimal
	 * bestellt. Was zaehlt, ist der Betrag rechts.
	 */
	.woocommerce table.cart tbody .product-price,
	.woocommerce-page table.cart tbody .product-price { display: none !important; }

	/* Das Entfernen-Kreuz sitzt oben rechts in der Karte. */
	.woocommerce table.cart tbody .product-remove,
	.woocommerce-page table.cart tbody .product-remove {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 28px;
	}

	/*
	 * Motive gehoeren sichtbar zu ihrem Feuerkorb - eingerueckt und mit
	 * einer Linie daneben, so wie in der Schublade auch.
	 */
	.woocommerce table.cart tbody tr.cart_item:has(.mlk-cart-kind) {
		margin-left: 18px;
		border-left: 3px solid #e2ddd6;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	.woocommerce table.cart .mlk-cart-edit {
		display: inline-block;
		margin-top: 4px;
		font-size: 13px;
	}
}