.ahw-vk-balken {
	margin: 0px 0;
	font-family: inherit;
	position: relative; /* Anker für die hochschwebenden Partikel */
	background: #f1ece1;
	padding: 25px 20px 18px;
	border-radius: 6px; /* passend zum inneren Balken-Streifen (.ahw-vk-balken__track) */
}

.ahw-vk-particle {
	position: absolute; /* Koordinaten kommen als Seiten-Pixel von JS (document.body-Kontext) */
	top: 0;
	display: inline-block; /* konsistentes Transform-Verhalten für SVG + Emoji */
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
	opacity: 0;
	animation: ahw-vk-float-up 1.1s ease-out forwards;
	z-index: 99999; /* bewusst sehr hoch, damit Divi-Rows/Sections drüber nicht mehr im Weg sind */
}

.ahw-vk-particle svg {
	display: block;
}

.ahw-vk-particle--big {
	font-size: 26px;
	animation-name: ahw-vk-float-up-big;
	animation-duration: 1.7s;
}

@keyframes ahw-vk-float-up {
	0%   { transform: translateY(0) scale(0.6); opacity: 0; }
	15%  { opacity: 1; transform: translateY(-4px) scale(1); }
	100% { transform: translateY(-90px) scale(1.15); opacity: 0; }
}

@keyframes ahw-vk-float-up-big {
	0%   { transform: translateY(0) scale(0.4) rotate(0deg); opacity: 0; }
	20%  { opacity: 1; transform: translateY(-8px) scale(1.3) rotate(-8deg); }
	60%  { transform: translateY(-70px) scale(1.2) rotate(6deg); opacity: 1; }
	100% { transform: translateY(-130px) scale(1) rotate(0deg); opacity: 0; }
}

/* Reveal-Animation: Balken taucht beim ersten Erreichen von 2 kg auf statt
   einfach nur dazustehen – kurzes Reinskalieren + Aufblenden + minimales
   Reinrutschen von unten, ca. eine halbe Sekunde. */
.ahw-vk-balken--revealing {
	animation: ahw-vk-reveal 0.45s ease-out;
}

@keyframes ahw-vk-reveal {
	0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
	60%  { opacity: 1; transform: translateY(-2px) scale(1.03); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ahw-qty-btn {
	width: 34px;
	height: 34px;
	min-width: 34px;
	border: 1px solid #7a2f2f;
	border-radius: 4px;
	background: #fff;
	color: #7a2f2f;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ahw-qty-btn:hover {
	background: #a15d5d;
	border-color: #a15d5d;
	color: #fff;
}

/* Absichtlich NICHT :focus (das bleibt nach einem Klick bestehen, bis der
   Fokus woanders hin wechselt – dadurch blieb die Hover-Farbe "hängen", bis
   man woanders hinklickt). :focus-visible zeigt sich nur bei
   Tastatur-Navigation, nicht bei einem normalen Maus-Klick. */
.ahw-qty-btn:focus-visible {
	outline: 2px solid #a15d5d;
	outline-offset: 2px;
}

.ahw-qty-btn:active {
	background: #7a2f2f;
	border-color: #7a2f2f;
	color: #fff;
}

/* Sanftes 3x-Pulsieren beim Laden der Seite, als Hinweis "hier geht's
   los" – hört über animation-iteration-count von selbst wieder auf. */
.ahw-qty-btn--pulse {
	animation: ahw-vk-pulse 1s ease-in-out 3;
}

@keyframes ahw-vk-pulse {
	0%, 100% { transform: scale(1); box-shadow: none; }
	50%      { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(122, 47, 47, 0.15); }
}

.ahw-qty-suffix {
	margin-left: 6px;
	margin-right: 10px;
	color: #2f3234;
	font-size: 14px;
	white-space: nowrap;
}

.ahw-qty-btn--minus {
	margin-right: 6px;
}

.ahw-qty-btn--plus {
}

.ahw-vk-balken__track {
	background: #f9f9f9;
	border-radius: 6px;
	height: 10px;
	overflow: hidden;
	display: flex;
}

.ahw-vk-balken__fill {
	background: #7a2f2f;
	height: 100%;
	width: 0%;
	flex-shrink: 0;
	transition: width 0.25s ease;
}

.ahw-vk-balken__fill--committed {
	background: #7a2f2f;
}

.ahw-vk-balken__fill--pending {
	background: #a15d5d;
}

.ahw-vk-balken__text {
	margin: 8px 0 0;
	font-size: 0.95em;
	color: #2f3234;
	font-weight: 600;
	padding-bottom: 0;
}

/* Chip-Optik statt reinem Fließtext, damit der Cross-Sell-Hinweis dauerhaft
   aus dem restlichen Balken-Text heraussticht – Bordeaux-Hintergrund statt
   der sonst üblichen Bordeaux-Textfarbe, dafür Beige als Schrift (dieselbe
   Farbe wie sonst der Balken-Hintergrund), abgerundete Ecken, kleiner Pfeil
   davor. */
.ahw-vk-balken__crosssell {
	display: inline-block;
	margin: 6px 0 0;
	padding: 5px 12px !important;
	padding-bottom: 5px !important;
	font-size: 0.85em;
	font-weight: 500;
	background: #7a2f2f;
	color: #f1ece1;
	border-radius: 6px;
}

.ahw-vk-balken__crosssell::before {
	content: "→";
	margin-right: 4px;
}

.ahw-vk-balken__crosssell a {
	color: #f1ece1 !important;
	text-decoration: none;
}

.ahw-vk-balken__crosssell a:hover {
	color: #f1ece1 !important;
	text-decoration: underline;
}

/* Begrenztes Aufmerksamkeits-Pulsieren beim ersten Erscheinen (3x, dann
   bleibt der Chip ruhig stehen) – kein Dauer-Leuchten, das würde auf Dauer
   eher wie ein Werbebanner wirken als zum sonst zurückhaltenden Look
   passen. Nur für Personen ohne Wunsch nach reduzierter Bewegung
   (prefers-reduced-motion) – die sehen direkt die ruhige Chip-Optik. */
@media ( prefers-reduced-motion: no-preference ) {
	.ahw-vk-balken__crosssell {
		animation: ahw-pulse-crosssell 0.6s ease-in-out 3;
	}
}

@keyframes ahw-pulse-crosssell {
	0%, 100% {
		transform: scale( 1 );
	}
	50% {
		transform: scale( 1.06 );
	}
}

.ahw-vk-preisblock {
	margin: 10px 0;
	color: #2f3234;
}

#ahw-vk-mengenpreis {
	margin: 4px 0 6px !important;
}

#ahw-vk-mengenpreis p {
	padding: 0 !important;
	font-size: inherit !important;
}

.ahw-vk-mengenpreis__preis,
.ahw-vk-mengenpreis__kilopreis {
	font-weight: 400;
	color: #6b6b6b;
}

/* egal welche der beiden Zeilen gerade die "Hauptzahl" ist (mit Auswahl:
   die Auswahl-Zeile; ohne Auswahl: der reine Kilopreis) – per JS
   umgeschaltet, siehe render() in ahw-balken.js */
.ahw-vk-mengenpreis__primary {
	font-weight: 700 !important;
	color: #7a2f2f !important;
}

/* Kilopreis in Klammern direkt in der Hauptzeile (17.08. umgestellt, siehe
   ahw-balken.js) – nutzt schon die bestehende .ahw-vk-mengenpreis__ust-inline
   für die 11px-Größe, keine eigene .ahw-vk-mengenpreis__secondary-Zeile mehr
   nötig. */
.ahw-vk-mengenpreis__ust-inline {
	font-style: normal;
	font-weight: 400;
	font-size: 11px;
	color: #2f3234;
	margin-left: 5px;
}

/* Eigene, statische Zeile – hängt nicht von der Mengenauswahl ab, deshalb
   fest im HTML statt per JS gesetzt. Gleiche Schriftgröße wie der
   "inkl. X % USt."-Zusatz, für PAngV-konforme "unmittelbare Nähe zum
   Preis". Link führt zur Versandinformationen-Seite, analog zu German
   Market's Darstellung in der Produktliste/Kategorieseite. */
#ahw-vk-mengenpreis p.ahw-vk-mengenpreis__zzgl {
	font-size: 11px !important;
	font-weight: 400;
	color: #2f3234;
}

.ahw-vk-mengenpreis__zzgl a {
	color: inherit;
	text-decoration: underline;
}

.ahw-vk-preisblock__prompt {
	margin: 6px 0;
	font-size: 0.9em;
	color: #6b6b6b;
	font-style: italic;
}

.ahw-vk-preisblock__label {
	margin: 0 0 6px;
	font-size: 0.78em;
	color: #8a8a8a;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ahw-vk-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 0.95em;
}

.ahw-vk-row__label {
	color: #2f3234;
}

.ahw-vk-row__value {
	font-weight: 600;
	white-space: nowrap;
}

.ahw-vk-row--verpackung {
	color: #7a2f2f;
	border-top: 1px solid #e2e2e2;
	padding-top: 10px;
}

.ahw-vk-row--verpackung .ahw-vk-row__label,
.ahw-vk-row--verpackung .ahw-vk-row__value,
.ahw-vk-row--verpackung .ahw-vk-row__rate {
	color: #7a2f2f;
}

.ahw-vk-row--gesamt {
	border-top: 1px solid #e2e2e2;
	margin-top: 4px;
	padding-top: 6px;
	font-size: 1.1em;
	font-weight: 700;
}

.ahw-vk-row--gesamt .ahw-vk-row__label,
.ahw-vk-row--gesamt .ahw-vk-row__value {
	font-weight: 700;
}

.ahw-vk-row__ust {
	margin: 2px 0 0;
	font-size: 0.78em;
	color: #8a8a8a;
}

.ahw-vk-note {
	margin: 2px 0 0;
	font-size: 0.85em;
	color: #6b6b6b;
}

.ahw-vk-row__rate {
	font-weight: 400;
	font-size: 0.85em;
	color: #6b6b6b;
	margin-right: 4px;
}

.ahw-vk-cart-items {
	margin: 6px 0;
	padding: 8px 0px;
	border-radius: 4px;
}

.ahw-vk-cart-items__title {
	margin: 0 0 4px;
	font-size: 0.8em;
	color: #8a8a8a;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ahw-vk-cart-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.9em;
	padding: 2px 0;
}

.ahw-vk-cart-item__remove,
.ahw-vk-current-selection__remove {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	line-height: 16px;
	padding: 0;
	border: 1px solid #cfcfcf;
	border-radius: 50%;
	background: #fff;
	color: #8a8a8a;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
}

.ahw-vk-cart-item__remove:hover,
.ahw-vk-current-selection__remove:hover {
	border-color: #7a2f2f;
	color: #7a2f2f;
}

.ahw-vk-cart-item__qty {
	color: #6b6b6b;
	white-space: nowrap;
	flex-shrink: 0;
}

.ahw-vk-cart-item__name {
	color: #2f3234;
	flex: 1;
	text-decoration: none;
}

a.ahw-vk-cart-item__name:hover {
	text-decoration: underline;
	color: #7a2f2f;
}

.ahw-vk-cart-item__preis {
	color: #2f3234;
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Bordeaux-Puls: kurz aufleuchten, wenn sich Menge/Preis einer Position in
   "Bereits im Warenkorb" gerade erhöht hat (z. B. nach "In den Warenkorb"
   für ein Produkt, das schon mit einer anderen Menge drin lag) – macht die
   Änderung sichtbar, ohne dass man's erklären muss. Läuft einmal durch
   (0.9s) und lässt keine Dauerfarbe zurück, die Klasse wird per JS nach
   Ablauf wieder entfernt. */
@keyframes ahw-pulse-bordeaux {
	0% {
		background-color: transparent;
	}
	30% {
		background-color: rgba(122, 47, 47, 0.16);
	}
	100% {
		background-color: transparent;
	}
}

.ahw-vk-cart-item--updated {
	animation: ahw-pulse-bordeaux 0.9s ease-out;
	border-radius: 4px;
}

.ahw-vk-row--versandwahl {
	align-items: center;
}

.ahw-vk-select {
	max-width: 100%;
}

/* Divi lässt unter dem Add-to-Cart-Modul (Spaltenbreite 3/5) auf Desktop
   einen zusätzlichen Modul-Abstand nach unten stehen, zusätzlich zu unserem
   eigenen margin-top auf dem "In den Warenkorb"-Button. Per Inspector
   getestet und für gut befunden – hier dauerhaft hinterlegt, damit es nicht
   bei jedem Cache-Leeren/Update wieder verschwindet. */
@media (min-width: 981px) {
	.et_pb_gutters3 .et-db #et-boc .et-l > .et_pb_column_3_5.et_block_column .et_pb_module,
	.et_pb_gutters3.et-db #et-boc .et-l .et_pb_column_3_5.et_block_column .et_pb_module {
		margin-bottom: 0 !important;
	}
}

/* Mobil: Mengenfeld bekommt die volle Zeile für sich, kg + Minus/Plus
   rutschen als eigene Zeile darunter (der Abstand dazwischen kommt vom
   "gap: 10px" auf form.cart, das ihr bereits in den Divi Theme Options
   gesetzt habt – hier also keine zusätzliche Marge nötig). Sonst wird das
   Feld auf schmalen Bildschirmen zu schmal, um die Zahl noch lesen zu
   können. */
@media (max-width: 767px) {
	.woocommerce div.product form.cart .quantity {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.ahw-qty-btn {
		flex: 0 0 auto !important;
		width: 44px !important;
	}

	.ahw-qty-suffix {
		flex: 0 0 auto !important;
	}
}