/* CR-3D Warenkorb Redesign v1 - CSS-Reskin des Standard-WooCommerce-Warenkorbs (Shortcode/Classic-Tabelle)
   Struktur/Layout-Vorbild: gardena.com Warenkorb (zweispaltig: Artikelliste links, "Preisübersicht"-Sidebar rechts)
   Farbe: CR-3D Teal statt Gardena-Orange | Form: eckig statt abgerundet | Fonts: CR-3D fonts.css (Montserrat/Martel) */

body.woocommerce-cart {
	--cr3d-bg: #f7f8f9;
	--cr3d-panel: #ffffff;
	--cr3d-border: #e2e5e8;
	--cr3d-border-input: #d7dbdf;
	--cr3d-text: #1a1d20;
	--cr3d-text-dim: #6b7280;
	--cr3d-accent: #07737a;
	--cr3d-accent-hover: #055a5f;
	--cr3d-font-heading: 'Montserrat', sans-serif;
	--cr3d-font-body: 'Montserrat', sans-serif;
}

body.woocommerce-cart .woocommerce,
body.woocommerce-cart .woocommerce input,
body.woocommerce-cart .woocommerce select,
body.woocommerce-cart .woocommerce button {
	font-family: var(--cr3d-font-body);
	color: var(--cr3d-text);
}

/* Zwei-Spalten-Layout wie bei Gardena: Artikelliste links, Summenbox rechts */
body.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 32px;
	align-items: start;
}
body.woocommerce-cart .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}
body.woocommerce-cart .woocommerce-cart-form {
	grid-column: 1;
	/* Ohne min-width:0 hat ein Grid-Item einen impliziten min-width:auto-Boden
	   (= Breite seines breitesten Inhalts). Die Cross-Sells-Karten (Owl-Carousel
	   berechnet dabei feste Pixelbreiten per JS, siehe Kommentar in
	   single-product-redesign.css) sind dadurch breiter als die 1fr-Spalte und
	   haben die ganze Spalte + damit die Preisuebersicht rechts rausgedrueckt/
	   abgeschnitten. min-width:0 erlaubt dem Item, auf die Spaltenbreite zu
	   schrumpfen - der Carousel-Inhalt scrollt/clippt dann intern statt die
	   Spalte zu sprengen. */
	min-width: 0;
}
body.woocommerce-cart .cart-collaterals {
	grid-column: 2;
}

/* Cross-Sells: bewusst KEIN Grid-Item mehr (das hat wiederholt die 2-Spalten-
   Aufteilung durcheinandergebracht). Stattdessen zwei separate Ausgaben, die
   beide AUSSERHALB des Grid-Containers ".woocommerce" sitzen (siehe Hooks in
   functions.php: Desktop-Version innerhalb des Formulars nach der Tabelle/den
   Buttons, Mobile-Version ueber wp_footer ganz am Seitenende) und rein per
   display:none/block je nach Breite gesteuert werden.
   ABER: Das Cross-Sells-Widget wrappt sich selbst nochmal in einen eigenen
   Container mit der Klasse "woocommerce" (WooCommerce-Widget-Konvention) -
   der geriet dadurch versehentlich wieder in die obige Grid-Regel und wurde
   auf eine erzwungene 20px-Spalte zusammengequetscht (Owl-Carousel dadurch
   auf ~20px Breite kollabiert statt Kartenbreite). Hier gezielt zurueckgesetzt. */
body.woocommerce-cart .cross-sells .woocommerce {
	display: block;
	grid-template-columns: none;
}
.cr3d-cross-sells-desktop {
	margin-top: 32px;
	max-width: 100%;
	overflow: hidden;
}
/* Cross-Sells-Ueberschrift ("Das könnte Sie auch interessieren…") in Good Times statt
   Standard-Montserrat, analog zu den "Ähnliche Produkte"-Titeln (shop-global.css) -
   aber deutlich kleiner als deren 32px, da hier im Warenkorb nur ein Nebenelement. */
body.woocommerce-cart .cross-sells h2 {
	font-family: 'Good Times', sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #07737a !important;
}
.cr3d-cross-sells-mobile {
	display: none;
}
/* 999.98px statt 999px: bei einer Viewport-Breite von exakt 999px (z.B. Chrome
   DevTools "999 x ...") wertet der Browser die Media-Query-Breite intern minimal
   groesser aus (Rundung), wodurch "max-width: 999px" erst ab 998px griff statt
   schon bei 999px wie beabsichtigt. .98 schliesst diese Rundungsluecke. */
@media (max-width: 999.98px) {
	.cr3d-cross-sells-desktop {
		display: none;
	}
	.cr3d-cross-sells-mobile {
		display: block;
		margin: 24px auto 0;
		max-width: 600px;
		padding: 0 20px;
	}
}

/* Artikeltabelle -> Kartenliste */
body.woocommerce-cart table.cart {
	display: block;
	border: none;
	background: none;
	width: 100%;
}
body.woocommerce-cart table.cart thead {
	display: block;
}
body.woocommerce-cart table.cart thead tr {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 20px 10px;
}
body.woocommerce-cart table.cart thead th {
	font-family: var(--cr3d-font-heading);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cr3d-text-dim);
	border: none;
	padding: 0;
	background: none;
}
body.woocommerce-cart table.cart thead th.product-remove {
	width: 28px;
	flex-shrink: 0;
	order: 10;
}
body.woocommerce-cart table.cart thead th.product-thumbnail {
	width: 76px;
	flex-shrink: 0;
}
body.woocommerce-cart table.cart thead th.product-name {
	flex: 1;
}
body.woocommerce-cart table.cart thead th.product-price,
body.woocommerce-cart table.cart thead th.product-subtotal {
	width: 100px;
	text-align: right;
}
body.woocommerce-cart table.cart thead th.product-quantity {
	width: 90px;
	text-align: center;
}

body.woocommerce-cart table.cart tbody {
	display: block;
}
body.woocommerce-cart table.cart tr.cart_item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--cr3d-panel);
	border: 1px solid var(--cr3d-border);
	border-radius: 0;
	padding: 16px 20px;
	margin-bottom: 12px;
}
body.woocommerce-cart table.cart td {
	border: none;
	padding: 0;
	background: none;
}
body.woocommerce-cart table.cart td.product-remove {
	order: 10;
	width: auto;
}
body.woocommerce-cart table.cart td.product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--cr3d-text-dim) !important;
	background: none !important;
	font-size: 20px;
	line-height: 1;
	border-radius: 0 !important;
}
body.woocommerce-cart table.cart td.product-remove a.remove:hover {
	color: #fff !important;
	background: #c0392b !important;
}
body.woocommerce-cart table.cart td.product-thumbnail {
	width: 76px;
	flex-shrink: 0;
}
body.woocommerce-cart table.cart td.product-thumbnail img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border: 1px solid var(--cr3d-border);
	border-radius: 0;
}
body.woocommerce-cart table.cart td.product-name {
	flex: 1;
	font-weight: 600;
}
body.woocommerce-cart table.cart td.product-name a {
	color: var(--cr3d-text);
	text-decoration: none;
}
body.woocommerce-cart table.cart td.product-name a:hover {
	color: var(--cr3d-accent);
}
/* Variantenangabe ("Varianten: X") ist bereits im Produkttitel enthalten - hier nur noch
   dezent/klein als Zusatzinfo, nicht mehr als eigener fett wirkender Block. !important nötig,
   da TM-EPO/Germanized eigene Layout-Regeln (float/position) auf dt/dd legen, die sonst zu
   verschobener Darstellung führen. */
body.woocommerce-cart table.cart td.product-name dl.variation,
body.woocommerce-cart table.cart td.product-name dl.tc-epo-metadata {
	display: block !important;
	position: static !important;
	float: none !important;
	width: auto !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--cr3d-text-dim) !important;
}
body.woocommerce-cart table.cart td.product-name dl.variation dt,
body.woocommerce-cart table.cart td.product-name dl.variation dd,
body.woocommerce-cart table.cart td.product-name dl.tc-epo-metadata dt,
body.woocommerce-cart table.cart td.product-name dl.tc-epo-metadata dd {
	display: inline !important;
	position: static !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: var(--cr3d-text-dim) !important;
}
body.woocommerce-cart table.cart td.product-name dl.variation dd,
body.woocommerce-cart table.cart td.product-name dl.tc-epo-metadata dd {
	margin-left: 4px !important;
}
body.woocommerce-cart table.cart td.product-price {
	width: 100px;
	text-align: right;
	color: var(--cr3d-text-dim);
	font-size: 14px;
}
body.woocommerce-cart table.cart td.product-quantity {
	width: 90px;
	text-align: center;
}
body.woocommerce-cart table.cart td.product-quantity .quantity {
	display: inline-block;
}
body.woocommerce-cart table.cart td.product-quantity .quantity {
	position: relative;
}
body.woocommerce-cart table.cart td.product-quantity input.qty {
	width: 64px;
	height: 34px;
	box-sizing: border-box;
	text-align: center;
	border: 1px solid var(--cr3d-border-input);
	border-radius: 0;
	padding: 0 20px 0 6px;
	background: var(--cr3d-bg) !important;
	color: var(--cr3d-text);
	-moz-appearance: textfield;
}
body.woocommerce-cart table.cart td.product-quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart table.cart td.product-quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
body.woocommerce-cart table.cart td.product-quantity input.qty:focus {
	outline: none;
	border-color: var(--cr3d-accent);
}

/* Eigenes Plus/Minus-Pärchen anstelle der ausgeblendeten nativen Spinner-Pfeile (siehe
   buildQuantitySteppers() in cart-redesign.js) - rechts im Feld, wie native Number-Spinner.
   Transparenter Hintergrund (kein eigener Panel-Ton) und knappe Höhe, wirkt sonst zu wuchtig. */
body.woocommerce-cart table.cart td.product-quantity .cr3d-qty-stepper {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 16px;
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--cr3d-border-input);
}
body.woocommerce-cart table.cart td.product-quantity .cr3d-qty-stepper button {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--cr3d-text-dim);
	padding: 0;
	line-height: 1;
	cursor: pointer;
}
body.woocommerce-cart table.cart td.product-quantity .cr3d-qty-stepper button:hover {
	background: var(--cr3d-accent);
	color: #fff;
}
body.woocommerce-cart table.cart td.product-quantity .cr3d-qty-stepper-up {
	border-bottom: 1px solid var(--cr3d-border-input);
}
body.woocommerce-cart table.cart td.product-quantity .cr3d-qty-stepper-up::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 2.5px solid transparent;
	border-right: 2.5px solid transparent;
	border-bottom: 3px solid currentColor;
}
body.woocommerce-cart table.cart td.product-quantity .cr3d-qty-stepper-down::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 2.5px solid transparent;
	border-right: 2.5px solid transparent;
	border-top: 3px solid currentColor;
}
/* Nur Desktop (wie gewünscht) - auf Touch-Geräten sind 9px-hohe Tap-Ziele unbrauchbar, dort
   bleibt die native Tastatur/direkte Eingabe die bessere Bedienung. */
@media (max-width: 767.98px) {
	body.woocommerce-cart table.cart td.product-quantity .cr3d-qty-stepper {
		display: none;
	}
	body.woocommerce-cart table.cart td.product-quantity input.qty {
		padding: 8px 6px;
	}
}
body.woocommerce-cart table.cart td.product-subtotal {
	width: 100px;
	text-align: right;
	font-weight: 700;
}

/* Aktionszeile: nur noch "Warenkorb aktualisieren" (Gutschein wandert per JS in die Sidebar, siehe unten) */
body.woocommerce-cart table.cart tr:has(td.actions) {
	display: flex;
	padding: 16px 20px 0;
}
body.woocommerce-cart table.cart td.actions {
	display: flex;
	width: 100%;
	padding: 4px 0 0;
}
body.woocommerce-cart table.cart .button {
	font-family: var(--cr3d-font-heading);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	background: var(--cr3d-panel);
	border: 1px solid var(--cr3d-text);
	color: var(--cr3d-text);
	border-radius: 0;
	padding: 10px 20px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.woocommerce-cart table.cart .button:hover {
	background: var(--cr3d-text);
	color: #fff;
}
/* "Warenkorb aktualisieren": solange keine Mengenaenderung vorliegt, deaktiviert WooCommerce
   diesen Button per "disabled"-Attribut (siehe cart.js input_changed()/init()) - sobald er
   klickbar wird, hier in Teal statt neutralem Schwarz/Weiss hervorheben, damit der Zustands-
   wechsel auffaellt (Kundenwunsch 2026-07-30). */
body.woocommerce-cart table.cart button[name="update_cart"]:not([disabled]) {
	background: var(--cr3d-accent);
	border-color: var(--cr3d-accent);
	color: #fff;
}
body.woocommerce-cart table.cart button[name="update_cart"]:not([disabled]):hover {
	background: var(--cr3d-accent-hover);
	border-color: var(--cr3d-accent-hover);
}

/* Preisübersicht-Sidebar */
body.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--cr3d-panel);
	border: 1px solid var(--cr3d-border);
	border-radius: 0;
	padding: 24px;
	width: 100% !important;
	float: none !important;
	box-sizing: border-box;
}

/* Gutschein-Feld (per JS vor die Zusammenfassung verschoben, siehe cart-redesign.js) - immer offen,
   kein Klapp-Toggle, nur kurzer Hinweistext darüber. */
body.woocommerce-cart .cart-collaterals .coupon {
	display: block;
	background: var(--cr3d-bg);
	border: 1px solid var(--cr3d-border);
	padding: 14px 16px;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--cr3d-text-dim);
}
body.woocommerce-cart .cart-collaterals .coupon .cr3d-coupon-summary {
	margin-bottom: 10px;
	color: var(--cr3d-text-dim);
}
body.woocommerce-cart .cart-collaterals .coupon .cr3d-coupon-fields {
	display: flex;
	gap: 8px;
}
body.woocommerce-cart .cart-collaterals .coupon .input-text {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--cr3d-border-input);
	border-radius: 0;
	padding: 10px 12px;
	background: var(--cr3d-panel);
	color: var(--cr3d-text);
}
body.woocommerce-cart .cart-collaterals .coupon .input-text:focus {
	outline: none;
	border-color: var(--cr3d-accent);
}
body.woocommerce-cart .cart-collaterals .coupon .button {
	font-family: var(--cr3d-font-heading);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	background: var(--cr3d-text);
	border: none;
	color: #fff;
	border-radius: 0;
	padding: 10px 16px;
	cursor: pointer;
	white-space: nowrap;
}
body.woocommerce-cart .cart-collaterals .coupon .button:hover {
	background: var(--cr3d-accent);
}
body.woocommerce-cart .cart_totals h2 {
	font-family: var(--cr3d-font-heading);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0 0 16px;
}
body.woocommerce-cart .cart_totals table.shop_table {
	border: none;
	width: 100%;
}
body.woocommerce-cart .cart_totals table.shop_table tr {
	display: flex !important;
	justify-content: space-between;
	align-items: baseline;
	border: none;
	padding: 8px 0;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	display: block !important;
	border: none;
	padding: 0;
	background: none;
	text-align: right;
}
body.woocommerce-cart .cart_totals table.shop_table th {
	font-weight: 400;
	color: var(--cr3d-text-dim);
	text-align: left;
}
body.woocommerce-cart .cart_totals .cart-subtotal th {
	white-space: nowrap;
}
body.woocommerce-cart .cart_totals .cart-subtotal td,
body.woocommerce-cart .cart_totals .order-tax td {
	color: var(--cr3d-text);
}
/* Eigene "inkl. X% MwSt."-Zeile oberhalb von Gesamt ausblenden - die Angabe steht jetzt
   bereits als kleine Zeile direkt unter GESAMT (small.includes_tax), das wäre doppelt. */
body.woocommerce-cart .cart_totals table.shop_table tr.order-tax {
	display: none !important;
}
body.woocommerce-cart .cart_totals tr.order-total {
	border-top: 1px solid var(--cr3d-border);
	margin-top: 4px;
	padding-top: 10px;
	padding-bottom: 4px;
}
body.woocommerce-cart .cart_totals tr.order-total th {
	font-family: var(--cr3d-font-heading);
	font-weight: 700;
	color: var(--cr3d-text);
	text-transform: uppercase;
	font-size: 14px;
}
body.woocommerce-cart .cart_totals tr.order-total td strong {
	font-size: 20px;
	font-weight: 700;
}
body.woocommerce-cart .cart_totals tr.order-total td small.includes_tax {
	display: block !important;
	width: 100%;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	color: var(--cr3d-text-dim);
}
/* "[Entfernen]"-Link hinter dem Rabattbetrag der Gutschein-Zeile (".cart-discount", Core-Template
   cart-totals.php) - per default genauso gross/dunkel wie der Preis daneben. */
body.woocommerce-cart .cart_totals .woocommerce-remove-coupon {
	font-size: 11px;
	color: #07737a;
	text-decoration: none;
	margin-left: 4px;
}
body.woocommerce-cart .cart_totals .woocommerce-remove-coupon:hover {
	color: #055a5f;
	text-decoration: underline;
}
body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals {
	display: block !important;
	padding: 6px 0;
}
body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
	display: block !important;
	width: 100% !important;
	text-align: left;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px 12px;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
	padding: 3px 0;
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	position: relative;
}
/* Abholung vor Ort zuerst, DHL Paket danach (unabhängig von der Render-Reihenfolge) */
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li:has(input[value^="local_pickup"]) {
	order: 1;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li:has(input[value^="wbs"]) {
	order: 2;
}
/* Preis aus dem Label ausblenden - wird stattdessen gesammelt als "Versandkosten:"-Zeile
   darunter angezeigt (siehe cart-redesign.js), damit die Bullets kompakt nebeneinander passen. */
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label .woocommerce-Price-amount {
	display: none;
}
body.woocommerce-cart .cart_totals .cr3d-shipping-cost-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--cr3d-border);
	font-size: 14px;
	text-align: left;
	color: var(--cr3d-text-dim);
}
body.woocommerce-cart .cart_totals .cr3d-shipping-cost-line strong {
	color: var(--cr3d-text);
	font-weight: 600;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.3;
	text-align: left;
	color: var(--cr3d-text-dim);
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods input[type="radio"] {
	accent-color: var(--cr3d-accent);
	margin-right: 8px;
}
body.woocommerce-cart .shipping-calculator-button {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--cr3d-font-heading);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--cr3d-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--cr3d-accent);
}
body.woocommerce-cart .shipping-calculator-button:hover {
	color: var(--cr3d-accent-hover);
	border-color: var(--cr3d-accent-hover);
}

/* Versandkostenrechner-Formular (Land/Bundesland/Stadt/PLZ) */
body.woocommerce-cart .shipping-calculator-form {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cr3d-border);
}
body.woocommerce-cart .shipping-calculator-form .form-row {
	display: block;
	margin: 0 0 12px;
}
body.woocommerce-cart .shipping-calculator-form label {
	display: block;
	font-family: var(--cr3d-font-heading);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--cr3d-text-dim);
	margin-bottom: 6px;
	text-align: left;
}
body.woocommerce-cart .shipping-calculator-form span {
	display: block;
}
body.woocommerce-cart .shipping-calculator-form select,
body.woocommerce-cart .shipping-calculator-form input.input-text {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--cr3d-border-input);
	border-radius: 0;
	padding: 10px 12px;
	background: var(--cr3d-panel);
	color: var(--cr3d-text);
	font-size: 14px;
	text-align: left;
}
body.woocommerce-cart .shipping-calculator-form select:focus,
body.woocommerce-cart .shipping-calculator-form input.input-text:focus {
	outline: none;
	border-color: var(--cr3d-accent);
}

/* Select2 ersetzt Land/Bundesland optisch durch eigenes Markup - Original-<select> bleibt
   unsichtbar (width:1px), daher hier den sichtbaren Select2-Container stylen. */
body.woocommerce-cart .shipping-calculator-form .select2-container {
	width: 100% !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-selection--single {
	height: auto;
	border: 1px solid var(--cr3d-border-input);
	border-radius: 0;
	background: var(--cr3d-panel);
}
body.woocommerce-cart .shipping-calculator-form .select2-selection__rendered {
	padding: 10px 12px;
	font-family: var(--cr3d-font-body);
	font-size: 14px;
	color: var(--cr3d-text);
	line-height: 1.4;
}
body.woocommerce-cart .shipping-calculator-form .select2-selection__arrow {
	height: 100%;
	top: 0;
	right: 8px;
}
body.woocommerce-cart .shipping-calculator-form .select2-container--open .select2-selection--single,
body.woocommerce-cart .shipping-calculator-form .select2-container--focus .select2-selection--single {
	border-color: var(--cr3d-accent);
}
body.woocommerce-cart .shipping-calculator-form .button {
	font-family: var(--cr3d-font-heading);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	background: var(--cr3d-text);
	color: #fff;
	border: none;
	border-radius: 0;
	padding: 10px 20px;
	cursor: pointer;
}
body.woocommerce-cart .shipping-calculator-form .button:hover {
	background: var(--cr3d-accent);
}

/* Weiter zur Kasse */
body.woocommerce-cart .wc-proceed-to-checkout {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
body.woocommerce-cart .wc-proceed-to-checkout > * {
	flex: 1 1 100%;
	margin-top: 0;
}
/* Apple Pay + Google Pay nebeneinander in einer Zeile (spart vertikalen Platz).
   PayPals eigenes JS verschiebt diese Container zur Laufzeit teils in .ppc-button-wrapper
   hinein - daher beide möglichen Elternebenen als Flex behandeln. */
body.woocommerce-cart .wc-proceed-to-checkout #ppc-button-applepay-container,
body.woocommerce-cart .wc-proceed-to-checkout #ppc-button-googlepay-container,
body.woocommerce-cart .ppc-button-wrapper #ppc-button-applepay-container,
body.woocommerce-cart .ppc-button-wrapper #ppc-button-googlepay-container {
	flex: 1 1 calc(50% - 4px) !important;
	width: auto !important;
}
body.woocommerce-cart .ppc-button-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body.woocommerce-cart .ppc-button-wrapper > *:not(#ppc-button-applepay-container):not(#ppc-button-googlepay-container) {
	flex: 1 1 100%;
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--cr3d-accent);
	border: none;
	border-radius: 0;
	color: #fff;
	font-family: var(--cr3d-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 14px 24px;
	text-decoration: none;
}
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--cr3d-accent-hover);
	color: #fff;
}

/* Abstand nach unten, damit die Sidebar nicht direkt am Footer klebt */
body.woocommerce-cart .cart-collaterals {
	margin-bottom: 25px;
}

/* Mittlerer Bereich (1000-1250px): Sidebar bleibt noch in Spalte 2 (siehe oben), aber die
   Artikelkarte hat neben der 360px-Sidebar nicht mehr genug Platz für Bild+Titel+Preis+Anzahl+
   Gesamt in einer Zeile. Bild links, rechts daneben oben eine volle Titelzeile (+ kleine
   Variante direkt darunter), darunter Preis/Anzahl/Gesamt als 3 Spalten. */
@media (max-width: 1199px) and (min-width: 1000px) {
	body.woocommerce-cart table.cart thead {
		display: none;
	}
	body.woocommerce-cart table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 76px minmax(0, 140px) minmax(0, 90px) minmax(0, 120px);
		grid-template-rows: auto auto;
		column-gap: 16px;
		row-gap: 6px;
		align-items: start;
		max-width: 520px;
	}
	body.woocommerce-cart table.cart td.product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	body.woocommerce-cart table.cart td.product-name {
		grid-column: 2 / span 3;
		grid-row: 1;
	}
	body.woocommerce-cart table.cart td.product-price,
	body.woocommerce-cart table.cart td.product-quantity,
	body.woocommerce-cart table.cart td.product-subtotal {
		grid-row: 2;
		width: auto;
		text-align: left;
	}
	body.woocommerce-cart table.cart td.product-price {
		grid-column: 2;
		font-size: 11px;
	}
	body.woocommerce-cart table.cart td.product-quantity {
		grid-column: 3;
	}
	body.woocommerce-cart table.cart td.product-subtotal {
		grid-column: 4;
		text-align: right;
	}
	body.woocommerce-cart table.cart td.product-price::before,
	body.woocommerce-cart table.cart td.product-quantity::before,
	body.woocommerce-cart table.cart td.product-subtotal::before {
		display: block;
		font-size: 11px;
		font-weight: 400;
		color: var(--cr3d-text-dim);
		margin-bottom: 4px;
	}
	body.woocommerce-cart table.cart td.product-price::before {
		content: 'Einzelpreis:';
	}
	body.woocommerce-cart table.cart td.product-quantity::before {
		content: 'Anzahl:';
	}
	body.woocommerce-cart table.cart td.product-subtotal::before {
		content: 'Gesamt:';
	}
	body.woocommerce-cart table.cart td.product-remove {
		grid-column: 4;
		grid-row: 1;
		justify-self: end;
	}
}

/* Ab hier (<1000px) bricht auch die Sidebar aus Spalte 2 raus und rutscht unter die Artikelliste.
   Die Preisübersicht selbst bleibt volle Breite - nur die großen Buttons (Weiter zur Kasse,
   PayPal-Express-Buttons etc.) wirken sonst überdimensioniert, daher hier begrenzt+zentriert.
   Die Artikelkarte bleibt einfach (Flex-Wrap), keine 3-Spalten-Quetscherei mehr. */
@media (max-width: 999.98px) {
	body.woocommerce-cart .woocommerce {
		display: block;
	}
	body.woocommerce-cart .cart-collaterals {
		margin-top: 24px;
	}
	body.woocommerce-cart table.cart thead {
		display: none;
	}
	/* WooCommerce's eigene "shop_table_responsive"-Mobilansicht (data-title-Labels per
	   ::before, Spalten ausblenden) kollidiert unterhalb von ~768px mit unserem Layout
	   (doppelte Labels, verstecktes Produktbild, verklebter Text) - hier komplett deaktiviert. */
	body.woocommerce-cart table.cart td::before,
	body.woocommerce-cart .cart_totals td::before,
	body.woocommerce-cart .cart_totals th::before {
		content: none !important;
	}
	body.woocommerce-cart table.cart td.product-thumbnail {
		display: block !important;
	}
	/* WooCommerce's eigenes woocommerce-smallscreen.css setzt auf jeder 2. Artikelzeile
	   ein Zebra-Streifen-Grau (rgba(0,0,0,.025)) auf ALLE td - sieht aus wie das Grau der
	   Anzahl-Box und wirkt wie ein Bug. Hier für alle td deaktiviert; die Anzahl-Box bekommt
	   ihr Grau explizit selbst (siehe input.qty weiter unten). */
	body.woocommerce-cart table.cart tr.cart_item:nth-child(2n) td {
		background-color: transparent !important;
	}
	/* Titel+Variante oben, Einzelpreis immer als eigene Zeile darunter, dann nur noch
	   Anzahl + Gesamtpreis als 2 Spalten (jeweils mit Label). WooCommerce's eigenes
	   woocommerce-smallscreen.css setzt "text-align:right !important" auf ALLE td dieser
	   responsiven Tabelle - hier mit gleicher/höherer Spezifität + !important übersteuert. */
	body.woocommerce-cart table.cart tr.cart_item {
		display: grid !important;
		position: relative;
		grid-template-columns: 76px 1fr 1fr;
		grid-template-rows: auto auto auto;
		column-gap: 16px;
		row-gap: 4px;
		align-items: start;
		max-width: 600px;
		padding-right: 44px;
	}
	body.woocommerce-cart table.cart td.product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 3;
	}
	body.woocommerce-cart table.cart td.product-name {
		grid-column: 2 / span 2;
		grid-row: 1;
		text-align: left !important;
	}
	body.woocommerce-cart table.cart td.product-price {
		display: block !important;
		grid-column: 2 / span 2;
		grid-row: 2;
		width: auto;
		text-align: left !important;
		font-size: 11px !important;
	}
	body.woocommerce-cart table.cart td.product-price::before {
		content: 'Einzelpreis:' !important;
		display: block !important;
		float: none !important;
		color: var(--cr3d-text-dim);
		font-weight: 400 !important;
		margin-bottom: 4px;
	}
	body.woocommerce-cart table.cart td.product-quantity {
		grid-column: 2;
		grid-row: 3;
		width: auto;
		text-align: left !important;
		margin-top: 22px;
	}
	body.woocommerce-cart table.cart td.product-quantity::before {
		content: 'Anzahl:' !important;
		display: block !important;
		float: none !important;
		color: var(--cr3d-text-dim);
		font-size: 11px;
		font-weight: 400;
		margin-bottom: 4px;
	}
	body.woocommerce-cart table.cart td.product-subtotal {
		grid-column: 3;
		grid-row: 3;
		width: auto;
		text-align: right !important;
		margin-top: 22px;
	}
	body.woocommerce-cart table.cart td.product-subtotal::before {
		content: 'Gesamt: ' !important;
		display: block !important;
		float: none !important;
		color: var(--cr3d-text-dim);
		font-weight: 400;
		font-size: 11px;
		margin-bottom: 4px;
	}
	/* Entfernen-Button per Absolutposition oben rechts - nimmt keinen Grid-Platz mehr weg,
	   daher überlagert er den Titel nicht mehr (card bekommt dafür padding-right). */
	body.woocommerce-cart table.cart td.product-remove {
		position: absolute;
		top: 16px;
		right: 20px;
	}
	body.woocommerce-cart .wc-proceed-to-checkout,
	body.woocommerce-cart .ppc-button-wrapper {
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
}