/* Warenkorb im Kopfbereich — Ersatz fuer den Block-Warenkorb.
   Gestaltung folgt dem Shop: Karten mit 18 px Radius, Markenblau,
   Pill-Buttons. Die Farben kommen aus theme.json. */

.edvr-wk { position: relative; display: inline-flex; }

.edvr-wk__knopf {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0;
	background: none; border: 0; border-radius: 999px;
	color: var(--wp--preset--color--ink, #0f172a);
	cursor: pointer;
	transition: background .15s ease;
}
.edvr-wk__knopf:hover { background: var(--wp--preset--color--surface-2, #f1f5f9); }
.edvr-wk__ico { width: 23px; height: 23px; }

.edvr-wk__zahl {
	position: absolute; top: 2px; right: 1px;
	min-width: 18px; height: 18px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--accent, #16a34a); color: #fff;
	border-radius: 999px;
	font-size: .68rem; font-weight: 700; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.edvr-wk__zahl.is-leer { display: none; }

/* ---- Schublade ---- */
.edvr-wk__lade {
	width: min(420px, 100vw);
	max-width: 100%;
	max-height: 100dvh;
	height: 100dvh;
	margin: 0 0 0 auto;              /* faehrt rechts ein */
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--wp--preset--color--ink, #0f172a);
	box-shadow: -18px 0 48px -18px rgba(15, 23, 42, .3);
	display: flex; flex-direction: column;
}
.edvr-wk__lade::backdrop { background: rgba(15, 23, 42, .45); }
.edvr-wk__lade:not([open]) { display: none; }

.edvr-wk__kopf {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line, #e2e8f0);
	font-size: 1.05rem;
}
.edvr-wk__zu {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0;
	background: none; border: 0; border-radius: 50%;
	color: var(--wp--preset--color--slate, #475569); cursor: pointer;
}
.edvr-wk__zu:hover { background: var(--wp--preset--color--surface-2, #f1f5f9); }
.edvr-wk__zuico { width: 18px; height: 18px; }

.edvr-wk__inhalt { flex: 1; overflow-y: auto; padding: .5rem 1.25rem; }

.edvr-wk__liste { list-style: none; margin: 0; padding: 0; }
.edvr-wk__pos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline; gap: .3rem .7rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line, #e2e8f0);
	font-size: .92rem;
}
.edvr-wk__pos:last-child { border-bottom: 0; }
.edvr-wk__name { font-weight: 500; overflow-wrap: anywhere; }
.edvr-wk__menge { color: var(--wp--preset--color--muted, #64748b); font-size: .85rem; white-space: nowrap; }
.edvr-wk__preis { font-weight: 700; white-space: nowrap; }

.edvr-wk__leer {
	padding: 2.5rem 0; text-align: center; line-height: 1.9;
	color: var(--wp--preset--color--muted, #64748b);
}
.edvr-wk__leer a { color: var(--wp--preset--color--brand-ink, #025b89); font-weight: 600; }

.edvr-wk__fuss {
	padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--line, #e2e8f0);
	background: var(--wp--preset--color--surface, #f8fafc);
	display: grid; gap: .55rem;
}
.edvr-wk__summe {
	display: flex; align-items: baseline; justify-content: space-between;
	margin-bottom: .35rem; font-size: .95rem;
}
.edvr-wk__summe strong { font-size: 1.1rem; }

.edvr-wk__btn {
	display: block; padding: .8rem 1.4rem;
	border-radius: 999px; text-align: center; text-decoration: none;
	font-weight: 600; font-size: .95rem;
	background: var(--wp--preset--color--brand, #0083c4); color: #fff;
	transition: background .15s ease;
}
.edvr-wk__btn:hover { background: var(--wp--preset--color--brand-ink, #025b89); color: #fff; }
.edvr-wk__btn--zweit {
	background: #fff; color: var(--wp--preset--color--brand-ink, #025b89);
	border: 1px solid var(--wp--preset--color--line, #e2e8f0);
}
.edvr-wk__btn--zweit:hover { background: var(--wp--preset--color--surface-2, #f1f5f9); color: var(--wp--preset--color--brand-ink, #025b89); }

@media (prefers-reduced-motion: no-preference) {
	.edvr-wk__lade[open] { animation: edvr-wk-ein .22s ease both; }
	@keyframes edvr-wk-ein { from { transform: translateX(16px); opacity: .6; } }
}