/* Kissenkorner Versandhinweis. Alles unter eigenen Klassen, keine globalen Regeln.
   Nur ACSS-Tokens, Abstände über gap, keine Bauteil-Margins. */

/* Kontrollvariable: Das JS zeichnet nur, wenn dieses CSS geladen ist. */
:root {
	--kk-vh-geladen: 1;
}

/* Für Screenreader, ohne vom Theme abzuhängen. */
.kk-vh-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kk-vh {
	--kk-vh-spur: var(--neutral-light);
	--kk-vh-kreis-flaeche: var(--neutral-ultra-light);
	--kk-vh-flaeche: var(--white); /* Hintergrund hinter dem Balken: unterbricht die Linie um den Lieferwagen */
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	align-self: stretch; /* Bricks-Block setzt align-items: flex-start */
	text-align: start;
}

.kk-vh :where(p, ul) {
	margin: 0;
}

/* Karte: erstes Kind der linken Rasterspalte, Desktop wie mobil dasselbe Element.
   Werte wie .warenkorb__items-container live. */
.kk-vh--karte {
	--kk-vh-spur: var(--white);
	--kk-vh-kreis-flaeche: var(--white);
	--kk-vh-flaeche: var(--neutral-ultra-light);
	padding: var(--space-m);
	background: var(--neutral-ultra-light);
	border: 1px solid var(--neutral-trans-10);
	border-radius: var(--radius-m);
}

/* Liste unter den Artikeln, im grauen Artikel-Feld, mit Linie abgesetzt. */
.kk-vh--liste {
	--kk-vh-spur: var(--white);
	--kk-vh-kreis-flaeche: var(--white);
	--kk-vh-flaeche: var(--neutral-ultra-light);
	padding-block-start: var(--space-s);
	border-block-start: 1px solid var(--neutral-light);
}

/* Kopf: Text und Balken */
.kk-vh__kopf {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.kk-vh__text {
	font-size: var(--text-m);
	color: var(--neutral);
}

@media (min-width: 768px) {
	.kk-vh__text {
		font-size: var(--text-l);
	}
}

.kk-vh__text strong {
	font-weight: 700;
	color: var(--primary);
}

/* Balken */
.kk-vh-balken {
	--kk-vh-kreis: 2rem;
	position: relative;
}

.kk-vh-balken__spur {
	position: relative;
	height: 7px;
	border-radius: var(--radius-circle);
	background: var(--kk-vh-spur);
}

.kk-vh-balken__fuellung {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--primary-semi-dark), var(--primary));
	width: min(var(--kk-vh-p, 0%), 100% - var(--kk-vh-luecke, 0px)); /* --kk-vh-p setzt das JS */
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lichtkante, die über die Füllung läuft, solange das Ziel offen ist. */
.kk-vh-balken__fuellung::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.45) 50%, transparent 80%);
	translate: -100% 0;
	animation: kk-vh-schimmer 2.8s ease-in-out 1s 2; /* zwei Durchläufe, dann Ruhe (WCAG 2.2.2) */
}

.kk-vh-is-erreicht .kk-vh-balken__fuellung::after {
	animation: none;
}

@keyframes kk-vh-schimmer {
	0% { translate: -100% 0; }
	60%, 100% { translate: 100% 0; }
}

/* Icons im Kreis: Lieferwagen, am Ziel der Haken. */
.kk-vh-icon {
	display: inline-grid;
	place-items: center;
}

/* Live gibt allen SVGs min-width/min-height 1em. Ohne Aufheben greift keine kleinere Icongröße. */
.kk-vh-icon svg {
	min-width: 0;
	min-height: 0;
}

.kk-vh-balken__kreis .kk-vh-icon {
	grid-area: 1 / 1;
	transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kk-vh-balken__kreis .kk-vh-icon--haken,
.kk-vh-is-erreicht .kk-vh-balken__kreis .kk-vh-icon--lkw {
	opacity: 0;
	scale: 0.4;
}

.kk-vh-is-erreicht .kk-vh-balken__kreis .kk-vh-icon--haken {
	opacity: 1;
	scale: 1;
}

.kk-vh-is-gerade-erreicht .kk-vh-balken__kreis {
	animation: kk-vh-sprung 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes kk-vh-sprung {
	0% { scale: 1; box-shadow: 0 0 0 0 var(--primary-trans-40); }
	40% { scale: 1.25; }
	100% { scale: 1; box-shadow: 0 0 0 10px transparent; }
}

/* Solange offen, schaukelt der Lieferwagen ganz leicht, als ob er fährt. */
.kk-vh-balken__kreis .kk-vh-icon--lkw svg {
	animation: kk-vh-fahren 1.6s ease-in-out 3;
}

@keyframes kk-vh-fahren {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -1.5px; }
}

.kk-vh__text.kk-vh-is-neu {
	animation: kk-vh-einblenden 0.5s ease;
}

@keyframes kk-vh-einblenden {
	from { opacity: 0; translate: 0 4px; }
	to { opacity: 1; translate: 0 0; }
}

.kk-vh-balken__kreis {
	display: grid;
	place-items: center;
	width: var(--kk-vh-kreis);
	height: var(--kk-vh-kreis);
	border-radius: var(--radius-50);
	background: var(--kk-vh-kreis-flaeche);
	color: var(--primary);
	transition: background-color 0.3s ease, color 0.3s ease, left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.kk-vh-balken__kreis svg {
	width: 1rem;
	height: 1rem;
	min-width: 0;
	min-height: 0;
}

/* Läufer: Solange offen, sitzt nur der Lieferwagen mittig in der Linie, die Linie ist um ihn herum unterbrochen.
   Am Ziel wird er zum Kreis mit Haken. Solange offen, hält er 40 px Abstand zum Ende, damit er nicht angekommen wirkt.
   Am Ziel fällt der Abstand weg. */
.kk-vh-balken--laeufer {
	--kk-vh-lkw: 1.5rem; /* Icongröße ohne Kreis */
	--kk-vh-luecke: calc(var(--kk-vh-kreis) / 2 + 40px); /* sichtbares Reststück */
	padding-block: calc(max(var(--kk-vh-kreis), var(--kk-vh-lkw)) / 2 - 3.5px);
}

.kk-vh-is-erreicht .kk-vh-balken--laeufer,
.kk-vh-is-am-ziel .kk-vh-balken--laeufer {
	--kk-vh-luecke: 0px;
}

.kk-vh-balken--laeufer .kk-vh-balken__kreis {
	/* Spur bündig mit dem Text, der Kreis bleibt bei 0 und 100 % trotzdem im Rahmen. */
	left: clamp(var(--kk-vh-kreis) / 2, min(var(--kk-vh-p, 0%), 100% - var(--kk-vh-luecke, 0px)), 100% - var(--kk-vh-kreis) / 2);
	position: absolute;
	top: 50%;
	/* Offen: Fläche in Hintergrundfarbe, 4 px breiter als der Lieferwagen je Seite. Die Füllung endet so sichtbar
	   kurz vor seinem Heck, das Grau beginnt kurz nach seiner Front. */
	width: calc(var(--kk-vh-lkw) + 8px);
	height: var(--kk-vh-lkw);
	translate: -50% -50%;
	border-radius: 0;
	background: var(--kk-vh-flaeche);
	color: var(--primary);
	transition: background-color 0.3s ease, color 0.3s ease, left 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
}

.kk-vh-balken--laeufer .kk-vh-icon--lkw svg {
	width: var(--kk-vh-lkw);
	height: var(--kk-vh-lkw);
}

/* Am Ziel: Kreis mit Haken, mittig auf der Linie. */
.kk-vh-is-erreicht .kk-vh-balken--laeufer .kk-vh-balken__kreis {
	width: var(--kk-vh-kreis);
	height: var(--kk-vh-kreis);
	border-radius: var(--radius-50);
	background: var(--primary);
	color: var(--white);
	box-shadow: 0 0 0 3px var(--white);
}

/* Liste "Passt zu deinem Kissen" */
.kk-vh__vorschlaege {
	scroll-margin-top: 11rem; /* Sprung aus der Leiste: Platz für Header und Leiste */
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: start;
}

.kk-vh__label {
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--neutral-semi-dark);
}

.kk-vh__liste {
	display: flex;
	flex-direction: column;
	padding: 0;
	list-style: none;
}

.kk-vh-vorschlag {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--space-xs);
	padding-block: 12px;
	border-block-start: 1px solid var(--neutral-light);
}

.kk-vh-vorschlag__bild {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-xs);
	object-fit: cover;
}

.kk-vh-vorschlag__bild--leer {
	display: block;
	background: var(--neutral-light);
}

/* Feste Spalten: fehlt ein Kind, rutscht trotzdem nichts in die Bildspalte. */
.kk-vh-vorschlag__text {
	grid-column: 2;
}

.kk-vh-vorschlag__preis {
	grid-column: 3;
}

.kk-vh-vorschlag__button {
	grid-column: 4;
}

.kk-vh-vorschlag__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.kk-vh-vorschlag__name {
	font-weight: 600;
	color: var(--neutral);
	text-decoration: none;
}

.kk-vh-vorschlag__name:hover {
	color: var(--primary);
}

.kk-vh-vorschlag__je {
	display: none;
}

.kk-vh-vorschlag__detail,
.kk-vh-vorschlag__einzel {
	font-size: var(--text-s);
	color: var(--neutral-semi-dark);
}

/* Zusatz in eigener Zeile unter der Packungsgröße, sonst bricht er mitten im Satz um. */
.kk-vh-vorschlag__reicht {
	display: block;
	font-weight: 500;
	color: var(--primary);
}

.kk-vh-vorschlag__preis {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	white-space: nowrap;
}

.kk-vh-vorschlag__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none; /* Echte Links: „Hinzufügen“ legt per Ajax in den Korb, „Farbe wählen“ führt zur Produktseite */
	min-width: 8.5rem; /* „Hinzufügen“ und „Farbe wählen“ gleich breit, die Preise bleiben in einer Spalte */
	padding: 0.6em 1.1em;
	border: 1px solid var(--primary);
	border-radius: var(--radius-xs);
	background: var(--white);
	color: var(--primary);
	font: inherit;
	font-size: var(--text-s);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, scale 0.15s ease;
}

.kk-vh-vorschlag__button:hover,
.kk-vh-vorschlag__button:focus-visible {
	background: var(--primary);
	color: var(--white);
}

.kk-vh-vorschlag__button:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.kk-vh-vorschlag__button:active {
	scale: 0.96;
}

.kk-vh-vorschlag__button[aria-disabled="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* Status blendet beim Hinzufügen ein, zeitgleich mit Balken und Warenkorb-Zeile. */
.kk-vh-vorschlag__button.kk-vh-is-im-korb.kk-vh-is-neu,
.kk-vh-vorschlag__status.kk-vh-is-neu {
	animation: kk-vh-einblenden 0.5s ease;
}

/* Nach dem Hinzufügen: ruhiger Zustand, die Zeile bleibt stehen. */
.kk-vh-vorschlag__button.kk-vh-is-im-korb {
	border-color: transparent;
	background: none;
	color: var(--primary);
	cursor: default;
}

/* Status in der Detailzeile, nur mobil sichtbar (Desktop zeigt ihn an Stelle des Knopfs). */
.kk-vh-vorschlag__status {
	display: none;
	align-items: center;
	gap: 4px;
	color: var(--primary);
	font-weight: 500;
}

.kk-vh-vorschlag__status::before {
	content: "·";
	color: var(--neutral-semi-dark);
	font-weight: 400;
}

.kk-vh-vorschlag__status .kk-vh-icon svg,
.kk-vh-vorschlag__button .kk-vh-icon svg {
	width: 1em;
	height: 1em;
	min-width: 0;
	min-height: 0;
}

/* Neue oder geänderte Warenkorb-Zeile leuchtet kurz auf (Woo-Zeile, nur diese Markierung gehört dem Plugin). */
.cart_item.kk-vh-neu > * {
	animation: kk-vh-markieren 1.6s ease;
}

@keyframes kk-vh-markieren {
	0%, 30% { background-color: var(--primary-ultra-light); }
	100% { background-color: transparent; }
}

/* Handy: Bild, Text und Preis rechts oben in einer Zeile, darunter ein flacher Knopf über die volle Breite.
   Nach dem Hinzufügen steht statt des Knopfs nur ein kleiner Status in der Textspalte. */
@media (max-width: 767px) {
	.kk-vh-vorschlag {
		grid-template-columns: 48px minmax(0, 1fr) auto;
		column-gap: 12px;
		row-gap: 10px;
	}

	.kk-vh-vorschlag__bild {
		grid-row: 1;
		align-self: start;
		width: 48px;
		height: 48px;
	}

	/* Text über die volle Breite, damit Detail und „Reicht …“ unter den Preis laufen. Nur der Name hält Abstand zum Preis. */
	.kk-vh-vorschlag__text {
		grid-column: 2 / -1;
		grid-row: 1;
	}

	.kk-vh-vorschlag__name {
		padding-inline-end: 4.5rem;
	}

	/* Nur der Gesamtpreis, auf Höhe des Namens. Der Einzelpreis steht in der Detailzeile („2 × 1 Liter, je 2,90 €“). */
	.kk-vh-vorschlag__preis {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
		align-items: flex-end;
		font-weight: 600;
	}

	.kk-vh-vorschlag__einzel {
		display: none;
	}

	.kk-vh-vorschlag__je {
		display: inline;
	}

	.kk-vh-vorschlag__button {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		min-width: 0;
		padding: 0.45em 1em;
	}

	/* Im Korb: kein Knopf und keine eigene Zeile, der Status steht hinten in der Detailzeile. */
	.kk-vh-vorschlag__button.kk-vh-is-im-korb {
		display: none;
	}

	.kk-vh-vorschlag__status {
		display: inline-flex;
	}
}

/* Klebende Info-Leiste unter dem Header, nur mobil. Sie gleitet herein, sobald die Karte unter dem Header verschwunden ist.
   --kk-vh-kopf-unten setzt das JS Bild für Bild aus dem echten Header-Unterrand. Kein top in den Transitions,
   sonst hinkt die Leiste dem Header hinterher, den Bricks selbst per transform wegfahren lässt. */
.kk-vh-infoleiste {
	display: none;
}

a.kk-vh-infoleiste {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 767px) {
	.kk-vh-infoleiste {
		position: fixed;
		inset-inline: 0;
		top: var(--kk-vh-kopf-unten, 0px);
		z-index: 50;
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 10px 16px 12px;
		background: var(--white);
		box-shadow: 0 4px 12px rgb(0 0 0 / 0.06);
		text-align: center;
		translate: 0 -100%;
		opacity: 0;
		visibility: hidden;
		transition: translate 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
	}

	.kk-vh-infoleiste.kk-vh-is-sichtbar {
		translate: 0 0;
		opacity: 1;
		visibility: visible;
		transition: translate 0.3s ease, opacity 0.3s ease;
	}

	.kk-vh-infoleiste .kk-vh__text {
		font-size: var(--text-s);
	}

	/* Kleine Schrift, kleiner Kreis: Text und Balken rücken zusammen. */
	.kk-vh-infoleiste .kk-vh__kopf {
		gap: 6px;
	}

	.kk-vh-infoleiste .kk-vh-balken {
		--kk-vh-kreis: 1.25rem;
		--kk-vh-lkw: 1.25rem;
	}

	/* Haken im kleinen Kreis: knapp die Hälfte, damit er nicht am Rand klebt. */
	.kk-vh-infoleiste .kk-vh-balken__kreis .kk-vh-icon--haken svg {
		width: 0.625rem;
		height: 0.625rem;
	}

	.kk-vh-infoleiste .kk-vh-is-erreicht .kk-vh-balken--laeufer .kk-vh-balken__kreis {
		box-shadow: 0 0 0 2px var(--white);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kk-vh,
	.kk-vh *,
	.kk-vh-infoleiste,
	.kk-vh-infoleiste *,
	.cart_item.kk-vh-neu > * {
		animation: none !important;
		transition: none !important;
	}
}