/* MAWOGE Side Cart */

/* ---------- Trigger (Header-Shortcode): eine weiße Pille im Stil der Header-Rundbuttons */
.msc-trigger{display:inline-flex;align-items:center;gap:9px;cursor:pointer;position:relative;vertical-align:middle;user-select:none;
	background:#fff;color:#1B1918;border:1px solid rgba(0,0,0,.08);border-radius:999px;
	padding:9px 16px 9px 13px;font-size:14px;line-height:1;box-shadow:0 0 15px 2px rgba(0,0,0,.10);
	transition:transform .18s ease,box-shadow .18s ease}
.msc-trigger:hover{transform:translateY(-1px);box-shadow:0 4px 18px 2px rgba(0,0,0,.16)}
.msc-trigger:active{transform:translateY(0)}
/* Ohne Betrag (leerer Warenkorb) wird die Pille kompakt rund */
.msc-trigger:has(.msc-subtotal-inline:empty){padding:9px 13px}
.msc-icon-wrap{position:relative;display:inline-flex}
.msc-bag{width:20px;height:20px;display:block;color:#1B1918}
.msc-count{position:absolute;top:-7px;right:-9px;display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#007759;color:#fff;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px #fff}
.msc-count.msc-zero{display:none}
.msc-count.msc-bumped{animation:msc-bump .45s ease}
@keyframes msc-bump{0%{transform:scale(1)}35%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.msc-subtotal-inline{font-size:13px;font-weight:700;white-space:nowrap;color:#1B1918;letter-spacing:.01em}
.msc-subtotal-inline .woocommerce-Price-amount{font-weight:700}
.msc-subtotal-inline:empty{display:none}

/* ---------- Drawer */
#msc-root{position:fixed;inset:0;z-index:999990;pointer-events:none;visibility:hidden}
#msc-root.msc-open{pointer-events:auto;visibility:visible}
#msc-overlay{position:absolute;inset:0;background:rgba(0,10,31,.45);opacity:0;transition:opacity .25s ease}
#msc-root.msc-open #msc-overlay{opacity:1}
#msc-drawer{position:absolute;top:0;right:0;height:100%;width:min(480px,100vw);background:#fff;color:#000a1f;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.18);transform:translateX(102%);transition:transform .28s ease}
#msc-root.msc-open #msc-drawer{transform:translateX(0)}

.msc-header{display:flex;align-items:center;justify-content:center;position:relative;padding:16px 20px;border-bottom:2px solid #eee;flex:0 0 auto}
.msc-heading{font-size:19px;font-weight:700}
#msc-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:0;font-size:16px;line-height:1;cursor:pointer;color:#000a1f;padding:8px}

#msc-body{flex:1 1 auto;overflow-y:auto;background:#f8f9fa;overscroll-behavior:contain}
#msc-footer{flex:0 0 auto;border-top:2px solid #eee;padding:14px 18px;background:#fff}
#msc-footer:empty{display:none;border:0;padding:0}

/* ---------- Produkte */
.msc-products{padding:10px 12px}
.msc-product{display:flex;gap:12px;background:#fff;border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,.02);padding:12px;margin-bottom:10px}
.msc-img{flex:0 0 72px}
.msc-img img{width:72px;height:auto;border-radius:4px;display:block}
.msc-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.msc-pname{font-size:14px;font-weight:600;line-height:1.35}
.msc-pname a{color:inherit;text-decoration:none}
.msc-pmeta{font-size:12px;color:#5b6472}
.msc-pprice{font-size:12.5px;color:#5b6472}
.msc-badge{display:inline-block;background:#e10600;color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;line-height:1.5}
.msc-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px;text-align:right}
.msc-ptotal{font-size:13.5px;font-weight:700}
.msc-ptotal .wgm-tax,.msc-ptotal .tax_label{font-size:10.5px;font-weight:400;color:#8a93a1}
.msc-del{background:none;border:0;cursor:pointer;color:#8a93a1;padding:2px}
.msc-del:hover{color:#e10600}
.msc-del svg{width:16px;height:16px}

/* Mengen-Stepper */
.msc-qty-box{display:inline-flex;align-items:stretch;border:1px solid #000;border-radius:3px;overflow:hidden;height:28px}
.msc-qty-box button{width:26px;background:#fff;border:0;cursor:pointer;font-size:15px;line-height:1;color:#000}
.msc-qty-box button:hover{background:#f0f0f0}
.msc-qty{width:38px;border:0;border-left:1px solid #000;border-right:1px solid #000;text-align:center;font-size:13px;-moz-appearance:textfield;appearance:textfield}
.msc-qty::-webkit-outer-spin-button,.msc-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.msc-qty-fix{font-size:12.5px;color:#5b6472}

/* Zeile ausgegraut während Update */
.msc-product.msc-busy{opacity:.45;pointer-events:none}

/* ---------- Leerer Warenkorb */
.msc-empty{display:flex;flex-direction:column;align-items:center;gap:18px;padding:60px 24px;text-align:center;font-size:15px}

/* ---------- Empfehlungen */
.msc-suggested{padding:4px 12px 14px}
.msc-sp-head{display:block;font-size:13px;font-weight:700;margin:6px 2px 8px}
.msc-sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr));gap:10px}
.msc-sp{background:#fff;border-radius:5px;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;box-shadow:0 2px 2px rgba(0,0,0,.02)}
.msc-sp img{width:100%;height:auto;border-radius:4px;display:block}
.msc-sp-name{font-size:12px;font-weight:600;color:inherit;text-decoration:none;line-height:1.3}
.msc-sp-price{font-size:12.5px;font-weight:700;line-height:1.35}
.msc-sp-price del{color:#8a93a1;font-weight:400;margin-right:4px}
.msc-sp-price ins{text-decoration:none;color:#e10600}
/* MwSt-Hinweis klein unter dem Preis (nur wenn Steuer anfällt; eigener Baustein) */
.msc-sp-tax{display:block;font-size:9.5px;font-weight:400;color:#8a93a1;margin-top:2px}
.msc-sp-price small:empty{display:none}
/* Screenreader-Texte aus wc_format_sale_price im Drawer nie sichtbar machen */
#msc-body .screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.msc-sp-add{font-size:11.5px;padding:6px 8px;width:100%}

/* ---------- Summen + Buttons */
.msc-totals{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.msc-total-row{display:flex;justify-content:space-between;font-size:14px}
.msc-total-row.msc-discount{color:#007759;font-weight:600}
.msc-total-row.msc-grand{font-size:16px;font-weight:700;border-top:1px solid #eee;padding-top:8px;margin-top:2px}
.msc-total-row .wgm-tax,.msc-total-row .tax_label,.msc-total-row small{font-size:11px;color:#8a93a1;font-weight:400}
.msc-hint{display:block;font-size:11.5px;color:#8a93a1;margin-bottom:12px}

.msc-buttons{display:flex;flex-direction:column;gap:8px}
.msc-btn{display:block;text-align:center;padding:11px 14px;border-radius:4px;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s ease,color .15s ease;border:1px solid #000a1f;line-height:1.3}
.msc-btn-dark{background:#000a1f;color:#fff}
.msc-btn-dark:hover{background:#243046;color:#fff}
.msc-btn-line{background:#fff;color:#000a1f}
.msc-btn-line:hover{background:#000a1f;color:#fff}

/* ---------- Toasts */
#msc-toasts{position:fixed;right:16px;bottom:16px;z-index:999991;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 32px))}
.msc-toast{display:flex;align-items:center;gap:12px;background:#000a1f;color:#fff;padding:12px 14px;border-radius:5px;font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:msc-in .25s ease}
.msc-toast.msc-toast-error{background:#8f1d1d}
.msc-toast button{background:#fff;color:#000a1f;border:0;border-radius:3px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
@keyframes msc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:520px){
	#msc-drawer{width:100vw}
	#msc-toasts{right:8px;bottom:8px}
}

/* ---------- Gratisversand-Fortschritt (ersetzt den statischen Menue-Banner) */
.msc-fs{padding:12px 14px;margin:0 0 12px;background:#F4F3F1;border:1px solid #E0DEDA}
.msc-fs-text{font-size:13px;line-height:1.45;color:#1B1918;margin-bottom:8px}
.msc-fs-text strong{font-weight:700}
.msc-fs-bar{position:relative;height:6px;background:#E0DEDA;overflow:hidden}
.msc-fs-bar > span{display:block;height:100%;background:#1B1918;transition:width .3s ease}
.msc-fs-done{background:#EEF1EC;border-color:#66705C}
.msc-fs-done .msc-fs-bar > span{background:#007759}

/* --- Warenkorb-Auslöser im mobilen Menübalken (27.08.2026) ---
   Auf dem schwarzen Header stand bei leerem Warenkorb eine weiße Fläche von
   48x65 px um ein 20x20 px kleines Symbol: der Platz ist für die Zwischensumme
   daneben reserviert, die bei leerem Warenkorb entfällt (.msc-subtotal-inline
   ist dann leer und ausgeblendet). Das las sich wie ein leeres Rechteck neben
   dem Symbol.
   Deshalb: nur im mobilen Toggle UND nur bei leerem Warenkorb transparent,
   Symbol weiß wie das Burger-Menü daneben. Sobald etwas im Warenkorb liegt,
   kommt die weiße Fläche mit dem Betrag zurück und fällt wieder auf. */
.mega-menu-toggle .msc-trigger:has(.msc-subtotal-inline:empty){
	background:transparent!important;
	border-color:transparent!important;
	box-shadow:none!important;
	color:#fff!important;
}
.mega-menu-toggle .msc-trigger:has(.msc-subtotal-inline:empty):hover{
	background:transparent!important;
	box-shadow:none!important;
	transform:none!important;
}
/* .msc-bag setzt color:#1B1918 fest, das SVG zeichnet mit currentColor.
   Im transparenten Zustand muss das Symbol deshalb ausdruecklich weiss werden,
   sonst steht Ink auf Ink. */
.mega-menu-toggle .msc-trigger:has(.msc-subtotal-inline:empty) .msc-bag{
	color:#fff!important;
	stroke:#fff!important;
}
/* --- Zweit- und Drittziele ohne eigenen Balken (28.08.2026) ---
   msc_ziele_html() gibt nur noch dem naechsten erreichbaren Ziel einen Balken.
   Alle uebrigen kommen mit der Klasse .msc-fs-zeile und brauchen deshalb nur
   den Text, ohne den Abstand, der sonst unter dem Text zum Balken gehoert. */
.msc-fs-zeile .msc-fs-text{margin-bottom:0}

/* --- Mobiler Drawer: Platz fuer die Produkte (28.08.2026) ---
   Befund: der Fussbereich ist fest (flex:0 0 auto) und stand bei 375x812 auf
   507 px. Fuer die Produkte blieben 183 px, eine Produktzeile ist aber 171 px
   hoch: sichtbar war genau ein angeschnittener Artikel, die Empfehlungen
   darunter erreichte niemand. Gegenmittel unten, alles nur bis 620 px, damit
   die Desktop-Ansicht unveraendert bleibt.
   Auf Stage gemessen (Gast, ein Artikel, zwei offene Ziele, 375x812):
   Fuss 507 -> 305 px, Produktflaeche 183 -> 447 px, Produktzeile 171 -> 112 px. */
@media (max-width:620px){

	/* height:100% bezieht sich auf den Layout-Viewport; auf dem Handy verschiebt
	   die ein- und ausfahrende Browserleiste den. dvh folgt ihr. */
	#msc-drawer{height:100dvh}

	/* env(safe-area-inset-bottom) haelt den Kassen-Button ueber der Systemleiste. */
	#msc-footer{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}

	/* Sicherheitsnetz: ein B2B-Warenkorb mit MwSt-Zeilen, Aktionsrabatt und
	   SEPA-Skonto laesst den Fuss wieder wachsen. Ab 36 % der Hoehe scrollt der
	   obere Teil in sich selbst, statt die Produktliste weiter zusammenzudruecken.
	   Die Buttons stehen ausserhalb dieses Kastens und bleiben immer sichtbar. */
	.msc-foot-scroll{
		max-height:36dvh;
		overflow-y:auto;
		overscroll-behavior:contain;
	}

	.msc-fs{padding:8px 10px;margin:0 0 8px}
	.msc-fs-text{font-size:12px;line-height:1.35;margin-bottom:6px}

	/* Zweitziel: kein Kasten, nur eine leise Zeile unter dem Balken */
	.msc-fs-zeile{background:none;border:0;padding:0 2px;margin:0 0 8px}
	.msc-fs-zeile .msc-fs-text{font-size:11.5px;color:#5C5854;margin-bottom:0}

	/* Zwischensumme und Versand sind Zwischenschritte, das Gesamt bleibt laut */
	.msc-totals{gap:2px;margin-bottom:4px}
	.msc-total-row{font-size:12.5px;color:#5b6472}
	.msc-total-row.msc-grand{font-size:15px;padding-top:5px;color:#000a1f}

	.msc-hint{font-size:10.5px;line-height:1.35;margin-bottom:8px}

	/* "Weiter einkaufen" macht dasselbe wie das Kreuz oben und der Tipp neben
	   den Drawer, stand aber genauso gross da wie die Kasse. Mobil entfaellt es,
	   "Warenkorb ansehen" wird zum Textlink unter dem Kassen-Button. */
	.msc-buttons{gap:6px}
	.msc-buttons .msc-close-link{display:none}
	.msc-buttons .msc-btn-dark{order:1;padding:13px 14px;font-size:15px}
	.msc-buttons .msc-btn-line:not(.msc-close-link){
		order:2;
		border:0;
		padding:2px;
		background:none;
		font-size:12.5px;
		font-weight:500;
		text-decoration:underline;
	}
	.msc-buttons .msc-btn-line:not(.msc-close-link):hover{background:none;color:#000a1f}

	/* Kompaktere Produktzeile: 171 -> 112 px. Der Stepper bleibt mit 26 px
	   Hoehe gut treffbar. */
	.msc-products{padding:8px 10px}
	.msc-product{padding:10px;gap:10px;margin-bottom:8px}
	.msc-img{flex:0 0 58px}
	.msc-img img{width:58px}
	.msc-mid{gap:3px}
	.msc-pname{font-size:13px;line-height:1.3}
	.msc-pprice{font-size:11.5px}
	.msc-qty-box{height:26px}
	.msc-qty-box button{width:24px}
	.msc-qty{width:34px}
}