/* Backefix Cart Rewards – Belohnungs-Fortschrittsleiste (yfood-Stil) */

.bx-cr {
	--bx-cr-green: #1f8a5b;
	--bx-cr-track: #e6e9e6;
	font-family: inherit;
	position: relative;
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #f5f8f5;
	border: 1px solid rgba(31, 138, 91, 0.18);
	border-radius: 14px;
	box-sizing: border-box;
}

/* Belohnung beim Stufen-Sprung: kurze Lob-Pille + Konfetti-Canvas (rein clientseitig) */
.bx-cr__cheer {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 6;
	padding: 5px 13px;
	background: var(--bx-cr-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(31, 138, 91, 0.35);
	pointer-events: none;
	opacity: 0;
	animation: bx-cr-cheer 2.2s ease forwards;
}
@keyframes bx-cr-cheer {
	0%   { opacity: 0; transform: translate(-50%, -42%) scale(0.9); }
	12%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	82%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -58%) scale(0.97); }
}
.bx-cr__confetti {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-radius: 14px;
}

.bx-cr__msg {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.35;
	color: #1a1a1a;
}
.bx-cr__msg svg { color: var(--bx-cr-green); vertical-align: -2px; margin-right: 3px; }
.bx-cr__msg strong { white-space: nowrap; }
.bx-cr__ul { text-decoration: underline; text-underline-offset: 2px; }

/* Restbetrag: hervorgehoben; im Nähe-Modus (kleine Lücke) sanft pulsierend */
.bx-cr__amt { font-weight: 600; color: var(--bx-cr-green); white-space: nowrap; display: inline-block; }
.bx-cr.is-nudge .bx-cr__amt { animation: bx-cr-amt 1.6s ease-in-out infinite; }
@keyframes bx-cr-amt {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(1.05); }
}
.bx-cr.is-nudge .bx-cr__more-arrow { animation: bx-cr-arrow 1.2s ease-in-out infinite; }
@keyframes bx-cr-arrow {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
	.bx-cr.is-nudge .bx-cr__amt,
	.bx-cr.is-nudge .bx-cr__more-arrow { animation: none; }
}

.bx-cr__track {
	position: relative;
	height: 8px;
	background: var(--bx-cr-track);
	border-radius: 999px;
	margin: 16px 0 8px;
}

.bx-cr__fill {
	height: 100%;
	background: var(--bx-cr-green);
	border-radius: 999px;
}
/* Bewegung der Füllung kommt bewusst NUR über die inszenierte JS-Sequenz (bx-cr-anim),
   nicht mehr automatisch beim Rendern – sonst ist alles vorbei, bevor der Drawer offen ist. */

/* Neu eingeblendeter Geschenk-2-Meilenstein „ploppt" rein */
.bx-cr__tick--new {
	animation: bx-cr-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bx-cr-pop {
	0%   { transform: translate(-50%, -50%) scale(0); }
	70%  { transform: translate(-50%, -50%) scale(1.18); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

.bx-cr__tick {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--bx-cr-track);
	color: #b3b3b3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bx-cr__tick svg { width: 14px; height: 14px; }
.bx-cr__tick--end { left: 100%; }
.bx-cr__tick.is-done {
	border-color: var(--bx-cr-green);
	background: var(--bx-cr-green);
	color: #fff;
}

/* „Weiter einkaufen"-Button (y-food-Stil): schlicht, rechtsbündig, Pfeil rückt beim Hover */
.bx-cr__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}
.bx-cr__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	color: #282828;
	text-decoration: none;
	line-height: 1;
}
.bx-cr__more:hover { color: var(--bx-cr-green); }
.bx-cr__more-arrow { transition: transform 0.18s ease; font-size: 15px; }
.bx-cr__more:hover .bx-cr__more-arrow { transform: translateX(3px); }

/* Gratis-Backform-Teaser (erscheint ab Versandfrei) */
.bx-cr__gift {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 7px 9px;
	background: #fff;
	border: 1px dashed rgba(31, 138, 91, 0.5);
	border-radius: 12px;
	text-decoration: none;
	color: #1a1a1a;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.bx-cr__gift:hover { border-color: var(--bx-cr-green); background: #fbfdfb; }
.bx-cr__gift.is-unlocked {
	border-style: solid;
	background: #eef7f1;
}
.bx-cr__gift.is-unlocked .bx-cr__gift-txt strong { color: var(--bx-cr-green); }
.bx-cr__gift-img {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bx-cr__gift-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bx-cr__gift-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; }
.bx-cr__gift-txt strong { font-size: 14.5px; font-weight: 600; }
.bx-cr__gift-txt small { font-size: 12px; color: #6a6a6a; }
/* „Treue-Geschenk"-Badge auf der obersten Stufe – warmes Gold signalisiert Wertschätzung */
.bx-cr__gift-loyal {
	display: inline-block;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	color: #8a6512;
	background: #f6e9c8;
	border-radius: 999px;
}

/* In den engen Spalten von Drawer/Checkout etwas kompakter */
.widget_shopping_cart_content .bx-cr,
.woocommerce-mini-cart__total ~ .bx-cr { margin: 0 0 12px; }

/* ===================== CHECKOUT-SPEZIFISCH ===================== */
/* Letzter Schritt vor dem Kauf: noch fehlende Geschenke ausgrauen (Drawer/Warenkorb bleiben unverändert). */
.bx-cr--checkout .bx-cr__g:not(.is-unlocked) .bx-cr__g-head {
	opacity: 0.6;
	filter: grayscale(1);
}

/* ===================== BLOCK-WARENKORB/-KASSE: KONTRAST & ELEGANZ ===================== */
/* „Spare X"-Badge invertiert: Weiß auf dunklem Markengrün (#146c49) – Kontrast ~6,4:1, sicher WCAG AA.
   Hohe Spezifität + Kind-Selektor: Schrift bleibt auch dann weiß & kräftig, wenn ein anderes Plugin
   (z. B. Barrierefreiheits-Optimierung) Farbregeln auf verschachtelte Elemente legt. */
html body .wc-block-components-sale-badge {
	background: #146c49 !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 2px 10px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
html body .wc-block-components-sale-badge,
html body .wc-block-components-sale-badge * {
	color: #ffffff !important;
	font-weight: 700 !important;
}
/* Durchgestrichener Alt-Preis: sattes, lesbares Grau (Kontrast > 5:1) */
.wc-block-components-product-price del,
.wc-block-components-order-summary-item del {
	color: #6b6b6b !important;
}
/* Aktionspreis (z. B. €0,00 beim Geschenk): dunkles Markengrün, ohne Unterstreichung */
.wc-block-components-product-price ins {
	color: #146c49 !important;
	font-weight: 600;
	text-decoration: none;
}

/* Geschenk-Preis: durchgestrichener Verkaufswert + „Geschenkt" (Fly-In-Cart, klassisch) */
.bx-cr-was {
	color: #9a9a9a;
	text-decoration: line-through;
	margin-right: 4px;
	font-weight: 400;
}
.bx-cr-gifted {
	color: #1f8a5b;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
	background: none;
}

/* Reveal-Sequenz (Geschenk 1 rastet ein -> Pause -> Stufe 3 fährt aus) */
.bx-cr.bx-cr-hidemsg .bx-cr__msg { visibility: hidden; } /* Höhe bleibt -> kein Layout-Sprung */
.bx-cr__tick { transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.bx-cr.bx-cr-anim .bx-cr__tick { transition: left 0.8s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
/* Füllung fährt sichtbar, aber flott (Dauer muss zu FILL_MS im JS passen) und läuft sanft aus */
.bx-cr.bx-cr-anim .bx-cr__fill { transition: width 1.1s cubic-bezier(0.3, 0.55, 0.25, 1); }
/* Frisch erreichter Meilenstein „ploppt" */
.bx-cr__tick.bx-cr-pop2 { animation: bx-cr-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bx-cr-rowin { animation: bx-cr-rowin 0.45s ease; }
@keyframes bx-cr-rowin {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bx-cr.bx-cr-anim .bx-cr__tick,
	.bx-cr.bx-cr-anim .bx-cr__fill { transition: none; }
	.bx-cr-rowin { animation: none; }
}

/* Edel: schlanke Geschenk-Zeilen – die Produktkarte (mit Wert) klappt erst auf Klick auf */
.bx-cr__g { margin-top: 7px; }
.bx-cr__g-head {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 11px;
	background: #fff;
	border: 1px dashed rgba(31, 138, 91, 0.4);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	color: #6a6a6a;
	text-align: left;
	cursor: pointer;
}
.bx-cr__g.is-unlocked .bx-cr__g-head {
	border-style: solid;
	border-color: rgba(31, 138, 91, 0.35);
	background: #fbfdfb;
	color: #1a1a1a;
}
.bx-cr__g-chk { color: var(--bx-cr-green); font-weight: 700; }
.bx-cr__g-label { flex: 1 1 auto; min-width: 0; }
.bx-cr__g-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #8a8a8a; }
.bx-cr__g-w2 { display: none; }
.bx-cr__g.is-open .bx-cr__g-w1 { display: none; }
.bx-cr__g.is-open .bx-cr__g-w2 { display: inline; }
.bx-cr__g-ic { transition: transform 0.25s ease; }
.bx-cr__g.is-open .bx-cr__g-ic { transform: rotate(180deg); }
.bx-cr__g-body { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
.bx-cr__g.is-open .bx-cr__g-body { max-height: 220px; }
.bx-cr__g-body .bx-cr__gift { margin-top: 6px; }

/* Besitz-Karte: erreichte Stufe als fester Kasten (Endowment-Effekt) – kein Akkordeon, kein Bedienelement */
.bx-cr__g--own {
	padding: 8px 10px;
	background: #fbfdfb;
	border: 1px solid rgba(31, 138, 91, 0.35);
	border-radius: 10px;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.bx-cr__own-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #1a1a1a;
}
.bx-cr__g--own .bx-cr__gift { margin-top: 6px; border-color: rgba(31, 138, 91, 0.18); }
/* Schloss-Choreografie auf der Besitz-Karte: kurz „verschlossen" (gestrichelt, gedeckt), dann schnappt sie auf */
.bx-cr__g--own.bx-cr-relock {
	border-style: dashed;
	border-color: rgba(31, 138, 91, 0.4);
	background: #fff;
}
.bx-cr__g--own.bx-cr-relock .bx-cr__own-head { color: #6a6a6a; }

/* „Passt dazu"-Tipp: EIN kuratierter Lücken-Füller im Nähe-Modus (Warenkorb/Kasse) */
.bx-cr__tip {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid rgba(31, 138, 91, 0.35);
	border-radius: 10px;
	animation: bx-cr-rowin 0.45s ease;
}
.bx-cr__tip-label { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--bx-cr-green); }
.bx-cr__tip-link {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: #1a1a1a;
}
.bx-cr__tip-img {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	overflow: hidden;
	background: #f3f3f3;
}
.bx-cr__tip-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bx-cr__tip-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bx-cr__tip-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
/* Ergebnis-Versprechen: welche Tür dieser eine Artikel öffnet (keine Lücken-Arithmetik) */
.bx-cr__tip-goal { font-size: 11.5px; font-weight: 600; color: var(--bx-cr-green); line-height: 1.25; }
.bx-cr__tip-price { flex: 0 0 auto; font-size: 13px; color: #1a1a1a; }
.bx-cr__tip-add {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: var(--bx-cr-green);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bx-cr__tip-add:hover { background: #19724b; }
.bx-cr__tip-add:disabled { opacity: 0.5; cursor: default; }
/* Während des inszenierten Holds verrät auch der Tipp nichts */
.bx-cr.bx-cr-hidemsg .bx-cr__tip { visibility: hidden; }

/* Lock-Unlock-Effekt: Zeile erscheint verschlossen, Bügel springt auf, Haken übernimmt */
.bx-cr__g-head { transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease; }
.bx-cr__g.bx-cr-relock .bx-cr__g-head {
	border-style: dashed;
	border-color: rgba(31, 138, 91, 0.4);
	background: #fff;
	color: #6a6a6a;
}
.bx-cr__g-lock svg { display: block; }
.bx-cr__g-lock .bx-cr-shackle {
	transform-box: fill-box;
	transform-origin: 90% 100%;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bx-cr__g-lock.bx-cr-open .bx-cr-shackle { transform: rotate(-32deg) translateY(-1.5px); }
@keyframes bx-cr-chkpop {
	0%   { transform: scale(0); }
	70%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}
.bx-cr__g-chk.bx-cr-chkpop { display: inline-block; animation: bx-cr-chkpop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (prefers-reduced-motion: reduce) {
	.bx-cr__g-lock .bx-cr-shackle { transition: none; }
	.bx-cr__g-chk.bx-cr-chkpop { animation: none; }
}

/* Treue-Stufe vor dem Freischalten: gedimmt (Fakt, kein Auftrag) – nur das Gold-Badge bleibt farbig */
.bx-cr__g[data-tier="2"]:not(.is-unlocked) .bx-cr__g-head {
	color: #9a9a9a;
	border-color: #ddd;
}
.bx-cr__g[data-tier="2"]:not(.is-unlocked) .bx-cr__g-more { color: #b3b3b3; }

/* Unterstrichenes Wort im Text (z. B. „Danke") ist klickbar und öffnet die Treue-Zeile */
.bx-cr__msg u { cursor: pointer; text-underline-offset: 2px; }

/* Ganze Leiste einklappen (gegrillt, v1.38): nur Warenkorb/Kasse. Klick auf den Satz/Chevron
   fährt alles unter dem Satz nach oben weg – übrig bleibt nur die eine Zeile. Persistent (localStorage),
   Standard offen, bei echtem Stufen-Sprung klappt JS einmalig automatisch auf. */
/* WICHTIG: KEIN display:flex auf .bx-cr__msg! Flex macht jedes Inline-Element (Beträge, <strong>, <u>)
   zum Flex-Item und fügt mit gap Abstände ringsum ein -> sichtbare „Lücken" vor/hinter Beträgen
   (war die wahre Ursache der „Leerzeichen", NICHT wc_price/Cache). Stattdessen normaler Textfluss;
   der Chevron sitzt absolut oben rechts. */
.bx-cr.is-collapsible { position: relative; }
.bx-cr.is-collapsible .bx-cr__msg { cursor: pointer; padding-right: 26px; }
.bx-cr__collapse-btn {
	position: absolute;
	top: 10px;
	right: 12px;
	padding: 2px 4px;
	background: none;
	border: 0;
	color: var(--bx-cr-green);
	cursor: pointer;
	line-height: 1;
}
.bx-cr__collapse-btn:hover { color: #19724b; }
.bx-cr__collapse-btn .bx-cr__g-ic { transition: transform 0.25s ease; display: inline-block; font-size: 18px; }
/* Offen = Chevron zeigt nach oben (▴); eingeklappt = nach unten (▾, „mehr") */
.bx-cr.is-collapsible:not(.is-collapsed) .bx-cr__collapse-btn .bx-cr__g-ic { transform: rotate(180deg); }
/* Seitlicher Innenabstand 14px + negativer Außenabstand: Inhalt bleibt exakt bündig wie zuvor,
   aber der über das Balkenende hinausragende End-Tick (12px) wird nicht mehr abgeschnitten. */
.bx-cr__collapse { overflow: hidden; max-height: 1200px; opacity: 1; padding: 0 14px; margin: 0 -14px; transition: max-height 0.4s ease, opacity 0.3s ease; }
.bx-cr.is-collapsed .bx-cr__collapse { max-height: 0; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.bx-cr__collapse { transition: none; }
	.bx-cr__collapse-btn .bx-cr__g-ic { transition: none; }
}

/* Mobil: fixes Google-Bewertungs-Popup ausblenden, solange der Warenkorb-Drawer offen ist */
.bx-cr-hidden-review { opacity: 0 !important; pointer-events: none !important; }

/* Fly-In-Cart: weicher Fade-Out am oberen Rand – nur sobald gescrollt wird (Klasse per JS),
   damit der Inhalt beim Hochscrollen sanft ausblendet statt hart abzuschneiden (wie bei yfood). */
#nm-cart-panel-list-wrap.bx-cr-fade {
	-webkit-mask-image: linear-gradient( to bottom, transparent 0, #000 38px );
	        mask-image: linear-gradient( to bottom, transparent 0, #000 38px );
}

/* Mobil: die Sticky-„In den Warenkorb"-Leiste hinter den geöffneten Warenkorb-Drawer legen
   (Drawer liegt bei z-index 1020), damit sie nicht über Button + Zahlungs-Icons liegt. */
body.cart-panel-open #bx-sticky-atc {
	z-index: 1 !important;
	pointer-events: none !important;
}

/* Fly-In-Cart-Footer: Schatten nach oben + Zahlungs-Marken-Streifen */
.nm-cart-panel-summary.bx-cr-summary {
	box-shadow: 0 -6px 18px rgba(40, 40, 40, 0.10);
}
.bx-cr-pay {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
}
.bx-cr-pay svg {
	display: block;
	width: 34px;
	height: 22px;
}

/* "Geschenk"-Badge an Auto-Add-Positionen im Warenkorb/Checkout */
.bx-cr-giftbadge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	color: #fff;
	background: #1f8a5b;
	border-radius: 999px;
	vertical-align: middle;
}

/* ============ Anti-Layout-Shift Skeleton (v1.37) ============
   #bx-cr-block reserviert den Platz der Belohnungs-Leiste sofort (min-height per JS),
   bis das echte Fragment geladen ist – verhindert das Nachrutschen im Block-Checkout. */
#bx-cr-block.bx-cr-block--reserving { margin-bottom: 14px; }
/* Der Platzhalter spannt sich über die volle Breite der Checkout-Spalte – die Leiste selbst
   (.bx-cr--checkout) richtet die Breite über die Seiten-Tuning-Regeln an den Formularfeldern aus.
   KEINE eigene max-width hier (rechnete relativ zur vollen Breite inkl. Sidebar -> zu schmal). */
.bx-cr-skel {
	display: block;
	border: 1px solid #e8e6e1;
	border-radius: 14px;
	background: #fff;
	padding: 16px 18px;
	overflow: hidden;
}
.bx-cr-skel__line,
.bx-cr-skel__bar,
.bx-cr-skel__row {
	display: block;
	border-radius: 8px;
	background: linear-gradient( 90deg, #eceae6 25%, #f4f2ee 37%, #eceae6 63% );
	background-size: 400% 100%;
	animation: bxCrSkel 1.4s ease infinite;
}
.bx-cr-skel__line { width: 62%; height: 14px; margin-bottom: 14px; }
.bx-cr-skel__bar  { width: 100%; height: 10px; border-radius: 999px; margin-bottom: 16px; }
.bx-cr-skel__row  { width: 100%; height: 40px; border-radius: 10px; }
@keyframes bxCrSkel {
	0%   { background-position: 100% 0; }
	100% { background-position: 0 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	.bx-cr-skel__line, .bx-cr-skel__bar, .bx-cr-skel__row { animation: none; }
}