/* ==========================================================================
   BlockBande – Warenkorb im neuen Design (Leinwand „WarenkorbNeu“, abgenommen 23.10.2026).
   Dunkler Kopf wie im Shop mit drei Schritten, Pakete als Zeilen, Gutschein eingeklappt, rechts die Summe
   mit „Zur Kasse“. Auf dem Handy sitzt „Zur Kasse“ in einer festen Leiste über der Leiste unten.
   Vorlagen: woocommerce/cart/*.php, template-parts/warenkorb-kopf.php. Farben aus --k-… (hell/dunkel).
   WooCommerce lädt seine eigenen Styles mit; die Regeln hier sind deshalb unter .bbwk gebündelt.
   ========================================================================== */

.bbwk {
	display: block;
	padding: 0;
	background: var(--k-bg);
	color: var(--k-text);
	font-family: var(--k-body);
	font-weight: 600;
	line-height: 1.5;
}

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

.bbwk a {
	color: inherit;
	text-decoration: none;
}

.bbwk-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

.bbwk-lab {
	margin: 0;
	font-size: 10.5px;
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-muted);
}

.bbwk .bbsh-ln {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: square;
	stroke-linejoin: miter;
}

.bbwk-short {
	display: none;
}

.bbwk-card {
	background: var(--k-card);
	border: 1px solid var(--k-line);
}

/* Knopf „Tastenkante“ in Gem-Grün (gold kommt aus kopf-fuss.css) */
.bbwk .bb-k--gem {
	--c: var(--k-gem);
	--d: var(--k-gem-edge);
	color: var(--k-gem-on);
}

.bbwk .bb-k--gem:hover {
	color: var(--k-gem-on);
}

.bbwk a.bb-k--gold,
.bbwk a.bb-k--gold:hover {
	color: #1a1200;
}

/* --- Kopf (immer dunkel) ------------------------------------------------------------ */

.bbwk-hero {
	position: relative;
	overflow: hidden;
	background: #0b0c0f;
	border-bottom: 1px solid #1d2027;
	color: #c9cdd6;
}

.bbwk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(520px 320px at 82% 60%, rgba(47, 211, 107, 0.2), transparent 70%), radial-gradient(420px 260px at 8% 0%, rgba(42, 157, 244, 0.12), transparent 70%);
	pointer-events: none;
}

.bbwk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
}

.bbwk-hero__in {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 30px;
	align-items: center;
	padding-top: 24px;
	padding-bottom: 24px;
}

.bbwk-hero .bbwk-lab {
	color: #2fd36b;
}

.bbwk-hero__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bbwk-hero__title {
	margin: 0;
	font: 400 40px/1 var(--k-head);
	color: #fff;
}

.bbwk-hero__title em {
	font-style: normal;
	color: #2fd36b;
}

.bbwk-hero__art {
	height: 170px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.bbwk-hero__art img {
	display: block;
	width: auto;
	height: 200px;
	margin-bottom: -24px;
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.5));
}

/* Schritte: Warenkorb → Kasse → Gems im Spiel */
.bbwk-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bbwk-steps li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #7d8494;
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bbwk-steps li + li::before {
	content: "";
	width: 34px;
	height: 1px;
	margin-right: 2px;
	background: #2a2e37;
}

.bbwk-steps i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid #2a2e37;
	background: #111317;
	color: #c9cdd6;
	font-size: 12px;
	font-style: normal;
	letter-spacing: 0;
}

/* Erledigte Schritte (Kasse, Danke-Seite): grüner Haken, grüne Linie zum nächsten Schritt */
.bbwk-steps li.is-done {
	color: #c9cdd6;
}

.bbwk-steps li.is-done i {
	border-color: #168a40;
	background: rgba(47, 211, 107, 0.14);
	color: #3ee07a;
}

.bbwk-steps i .bbsh-ln {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: square;
	stroke-linejoin: miter;
}

.bbwk-steps li.is-done + li::before {
	background: #168a40;
}

.bbwk-steps li.is-on {
	color: #fff;
}

.bbwk-steps li.is-on i {
	border-color: #2fd36b;
	background: #2fd36b;
	color: #04210d;
	box-shadow: 0 2px 0 #168a40;
}

/* --- Inhalt ---------------------------------------------------------------------------- */

.bbwk-body {
	padding-top: 28px;
	padding-bottom: 144px;
}

.bbwk-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 22px;
	align-items: start;
}

/* Pakete */
.bbwk-item {
	position: relative;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 14px 44px 14px 12px;
	border-top: 1px solid var(--k-line2);
}

.bbwk-item:first-child {
	border-top: 0;
}

.bbwk-item__pic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	background: radial-gradient(closest-side, var(--k-gem-bg), transparent);
}

.bbwk .bbwk-item__pic img {
	display: block;
	width: auto;
	height: auto;
	max-width: 78px;
	max-height: 78px;
	margin: 0;
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
}

.bbwk-item__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.bbwk-item__name {
	font: 400 22px/1.05 var(--k-head);
	color: var(--k-strong);
}

.bbwk-item__bonus {
	margin-top: 6px;
	padding: 2px 7px;
	background: var(--k-gem-bg);
	color: var(--k-gem-text);
	font-size: 11.5px;
	font-weight: 900;
}

.bbwk-item__unit {
	margin-top: 5px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--k-muted);
}

.bbwk-item__unit del {
	margin-right: 4px;
	opacity: 0.8;
}

.bbwk-item__buy {
	display: flex;
	align-items: center;
	gap: 18px;
}

.bbwk-item__sum {
	min-width: 96px;
	text-align: right;
	font: 400 22px/1 var(--k-head);
	color: var(--k-strong);
	white-space: nowrap;
}

/* MwSt.-Zusatz von German Market je Zeile weglassen – steht einmal unter der Gesamtsumme. */
.bbwk .bbwk-item .wgm-tax,
.bbwk .bbwk-item .wgm-break,
.bbwk .bbwk-item__sum br {
	display: none;
}

.bbwk-item__rm {
	position: absolute;
	top: 8px;
	right: 8px;
}

.bbwk-item__rm a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--k-muted);
}

.bbwk-item__rm a:hover {
	background: var(--k-card2);
	color: var(--k-danger-text);
}

.bbwk-item__rm .bbsh-ln {
	width: 15px;
	height: 15px;
}

/* Menge −/+ (Knöpfe aus inc/woocommerce.php, Logik in theme.js) */
.bbwk .quantity {
	display: flex;
	align-items: stretch;
	height: 38px;
	margin: 0;
	border: 1px solid var(--k-line);
	background: var(--k-field);
}

.bbwk .quantity .bb-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--k-strong);
	font: 800 18px/1 var(--k-body);
	cursor: pointer;
}

.bbwk .quantity .bb-qty__btn:hover:not(:disabled) {
	background: var(--k-card2);
}

.bbwk .quantity .bb-qty__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.bbwk .quantity input.qty {
	width: 36px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--k-line);
	border-right: 1px solid var(--k-line);
	border-radius: 0;
	background: transparent;
	color: var(--k-strong);
	font: 900 15px/1 var(--k-body);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

/* Gutschein (eingeklappt) */
.bbwk-actions {
	border-top: 1px solid var(--k-line);
}

.bbwk-coupon summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	color: var(--k-link);
	font-size: 13px;
	font-weight: 800;
	list-style: none;
	cursor: pointer;
}

.bbwk-coupon summary::-webkit-details-marker {
	display: none;
}

.bbwk-coupon summary:hover {
	text-decoration: underline;
}

.bbwk-coupon .bbsh-ln {
	width: 15px;
	height: 15px;
}

.bbwk-coupon .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 16px 14px;
}

.bbwk-coupon #coupon_code {
	flex: 1 1 200px;
	min-width: 0;
	height: 36px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--k-line);
	border-radius: 0;
	background: var(--k-field);
	color: var(--k-strong);
	font: 700 14px var(--k-body);
}

.bbwk-coupon #coupon_code:focus {
	border-color: var(--k-accent);
	outline: none;
}

.bbwk-coupon .bb-k {
	height: 36px;
	padding: 0 16px;
}

.bbwk-coupon .coupon-error-notice {
	flex: 0 0 100%;
	margin: 0;
	color: var(--k-danger-text);
	font-size: 13px;
	font-weight: 800;
}

/* „Warenkorb aktualisieren“ macht theme.js automatisch; ohne JavaScript bleibt der Knopf sichtbar. */
.bbwk .bbwk-update {
	margin: 0 16px 14px;
}

.bb-js .bbwk .bbwk-update {
	display: none;
}

/* Summe */
.bbwk .cart-collaterals {
	width: auto;
}

.bbwk .cart_totals.bbwk-sum {
	float: none;
	width: auto;
	padding: 18px 18px 16px;
}

.bbwk-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 700;
}

.bbwk-row a {
	color: var(--k-link);
	font-size: 12.5px;
	font-weight: 800;
}

.bbwk-row + .bbwk-total {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--k-line);
}

.bbwk-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 8px;
}

.bbwk-total > span {
	color: var(--k-strong);
	font-size: 14px;
	font-weight: 800;
}

.bbwk-total b {
	font: 400 32px/1 var(--k-head);
	color: var(--k-strong);
}

.bbwk-vat {
	margin: 4px 0 0;
	text-align: right;
	font-size: 12px;
	font-weight: 700;
	color: var(--k-muted);
}

.bbwk .wc-proceed-to-checkout {
	margin: 16px 0 0;
	padding: 0;
}

.bbwk .bb-cart-bar__total {
	display: none;
}

/* WooCommerce setzt am Kassen-Knopf Schrift 1.25em und Innenabstand 1em (.woocommerce-cart .wc-proceed-to-checkout
   a.checkout-button) – deshalb hier mit höherer Spezifität. Der Pfeil sitzt rechts außen, damit der Text mittig steht.
   Oben 3px Innenabstand: Die dunkle Kante unten (3px) gehört fürs Auge zum Knopf, der Text steht so mittig auf Fläche + Kante. */
.bbwk .wc-proceed-to-checkout a.checkout-button.bbwk-go {
	position: relative;
	display: flex;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 3px 40px 0;
	font-size: 13.5px;
	line-height: 1;
	text-align: center;
	text-indent: 0.09em;
}

/* Senkrecht nach der Höhe der Großbuchstaben mitteln, nicht nach der Zeilenhöhe der Schrift (sonst je nach Gerät versetzt). */
.bbwk-go__t {
	display: block;
	line-height: 1;
	text-box: trim-both cap alphabetic;
}

.bbwk .wc-proceed-to-checkout a.checkout-button.bbwk-go .bbsh-ln {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 16px;
	height: 16px;
	margin-top: -6.5px;
}

/* Knöpfe anderer Plugins (z. B. Express-Zahlung) unter „Zur Kasse“ */
.bbwk .wc-proceed-to-checkout > :not(.bb-cart-bar__total):not(.checkout-button) {
	margin-top: 10px;
}

.bbwk-trust {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.bbwk-trust li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--k-text);
}

.bbwk-trust .bbsh-ln {
	width: 15px;
	height: 15px;
	color: var(--k-gem-text);
}

.bbwk-back {
	display: inline-flex;
	margin-top: 14px;
	color: var(--k-muted);
	font-size: 12.5px;
	font-weight: 800;
}

.bbwk a.bbwk-back:hover {
	color: var(--k-strong);
}

/* Leerer Warenkorb */
.bbwk-empty {
	max-width: 560px;
	margin: 0 auto;
	padding: 34px 28px;
	text-align: center;
}

.bbwk-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	background: var(--k-chip-on);
	color: var(--k-accent);
}

.bbwk-empty__icon .bbsh-ln {
	width: 30px;
	height: 30px;
}

.bbwk-empty h2 {
	margin: 0;
	font: 400 26px/1.1 var(--k-head);
	color: var(--k-strong);
}

.bbwk-empty p {
	margin: 8px 0 20px;
	font-size: 14px;
}

.bbwk-empty .bb-k {
	height: 44px;
	padding: 0 22px;
	font-size: 12.5px;
}

/* Hinweise von WooCommerce (z. B. „entfernt – Rückgängig?“, Gutschein angewendet) */
.bbwk .woocommerce-notices-wrapper:empty {
	display: none;
}

.bbwk .woocommerce-message,
.bbwk .woocommerce-info,
.bbwk .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--k-info-line);
	border-left-width: 3px;
	background: var(--k-info-bg);
	color: var(--k-info-text);
	font-size: 14px;
	font-weight: 700;
	list-style: none;
}

.bbwk .woocommerce-message {
	border-color: var(--k-ok-line);
	background: var(--k-ok-bg);
	color: var(--k-ok-text);
}

.bbwk .woocommerce-error {
	border-color: var(--k-err-line);
	background: var(--k-err-bg);
	color: var(--k-err-text);
}

.bbwk .woocommerce-message::before,
.bbwk .woocommerce-info::before,
.bbwk .woocommerce-error::before {
	content: none;
}

.bbwk .woocommerce-error li {
	margin: 0;
}

.bbwk .woocommerce-message a,
.bbwk .woocommerce-info a,
.bbwk .woocommerce-error a {
	color: inherit;
	font-weight: 900;
	text-decoration: underline;
}

.bbwk .woocommerce-message .button,
.bbwk .woocommerce-info .button {
	float: none;
	order: 2;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 13px;
	text-decoration: underline;
}

/* Während WooCommerce neu lädt */
.bbwk .blockUI.blockOverlay {
	background: var(--k-bg) !important;
}

/* --- Tablet ---------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.bbwk-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Handy ---------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.bbwk-wrap {
		padding: 0 16px;
	}

	.bbwk-long {
		display: none;
	}

	.bbwk-short {
		display: inline;
	}

	.bbwk-hero__in {
		grid-template-columns: minmax(0, 1fr) 112px;
		gap: 10px;
		padding-top: 16px;
		padding-bottom: 14px;
	}

	.bbwk-hero__text {
		gap: 12px;
	}

	.bbwk-hero .bbwk-lab {
		display: none;
	}

	.bbwk-hero__title {
		font-size: 24px;
		line-height: 1.02;
	}

	.bbwk-hero__art {
		height: 92px;
	}

	.bbwk-hero__art img {
		height: 104px;
		margin-bottom: -16px;
	}

	.bbwk-steps {
		gap: 6px;
	}

	.bbwk-steps li {
		gap: 5px;
		font-size: 9.5px;
	}

	.bbwk-steps li + li::before {
		width: 12px;
		margin-right: 1px;
	}

	.bbwk-steps i {
		width: 20px;
		height: 20px;
		font-size: 11px;
	}

	.bbwk-body {
		padding-top: 16px;
		padding-bottom: 40px;
	}

	.bbwk-grid {
		gap: 12px;
	}

	.bbwk-item {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 10px 12px;
		padding: 12px 12px 12px 8px;
	}

	.bbwk-item__pic {
		width: 64px;
		height: 64px;
	}

	.bbwk .bbwk-item__pic img {
		max-width: 58px;
		max-height: 58px;
	}

	.bbwk-item__name {
		padding-right: 28px;
		font-size: 19px;
	}

	.bbwk-item__unit {
		display: none;
	}

	.bbwk-item__buy {
		grid-column: 2;
		justify-content: space-between;
	}

	.bbwk-item__sum {
		min-width: 0;
		font-size: 20px;
	}

	.bbwk .quantity {
		height: 36px;
	}

	.bbwk-coupon #coupon_code {
		font-size: 16px;
	}

	.bbwk .cart_totals.bbwk-sum {
		padding: 14px 16px;
	}

	.bbwk-sum .bbwk-lab {
		display: none;
	}

	.bbwk-total {
		margin-top: 0;
	}

	.bbwk-total b {
		font-size: 26px;
	}

	/* Trust-Zeilen und „Weiter einkaufen“ unter der Summen-Karte statt darin */
	.bbwk-trust {
		margin-top: 14px;
	}

	/* Feste Kassen-Leiste unten mit Gesamtsumme und Knopf – wie in einer Shopping-App */
	.bbwk .wc-proceed-to-checkout {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 12px;
		margin: 0;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--k-line);
		background: var(--k-top);
		box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.18);
	}

	body.bb-has-tabs .bbwk .wc-proceed-to-checkout {
		bottom: calc(var(--k-tabs-h) + env(safe-area-inset-bottom));
		padding-bottom: 10px;
	}

	.bbwk .bb-cart-bar__total {
		display: flex;
		flex: none;
		flex-direction: column;
		line-height: 1.1;
	}

	.bbwk .bb-cart-bar__total > span {
		color: var(--k-muted);
		font-size: 10.5px;
		font-weight: 900;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.bbwk .bb-cart-bar__total strong {
		font: 400 22px/1.1 var(--k-head);
		color: var(--k-strong);
	}

	.bbwk .wc-proceed-to-checkout a.checkout-button.bbwk-go {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: 46px;
		padding: 3px 34px 0;
		font-size: 13px;
	}

	.bbwk .wc-proceed-to-checkout a.checkout-button.bbwk-go .bbsh-ln {
		right: 12px;
	}

	.bbwk .wc-proceed-to-checkout > :not(.bb-cart-bar__total):not(.checkout-button) {
		flex: 0 0 100%;
	}

	/* Platz, damit die feste Leiste nichts verdeckt (leerer Warenkorb hat keine Leiste) */
	body.bb-has-tabs.woocommerce-cart.bb-neu .bb-mft {
		padding-bottom: 96px;
	}

	body.bb-has-tabs.woocommerce-cart.bb-neu:has(.bbwk-empty) .bb-mft {
		padding-bottom: 18px;
	}
}