/**
 * Warenkorb: Divi-Modul "Warenkorb-Produkte", angeglichen an das Produktmodul
 * (zw-add-to-cart.css). Klasse .zw-cart wird von zw-cart.js gesetzt.
 * Hohe Spezifitaet + teils !important, da Divi-Modul-Styles sonst gewinnen.
 */

.et-db #et-boc .et-l .et_pb_module.zw-cart {
	--zw-cart-text: #333;
	--zw-cart-muted: #6b6b6b;
	--zw-cart-border: #9a9a9a;
	--zw-cart-border-light: #d6d6d6;
	--zw-cart-field-h: 46px;
	/* Button (CI) - Kontraste: #2b2625 auf #f67828 = 5,4:1, #fff auf #4e7d3a = 4,9:1 */
	--zw-cart-btn: #f67828;
	--zw-cart-btn-text: #2b2625;
	--zw-cart-btn-hover: #4e7d3a;
	--zw-cart-btn-hover-text: #fff;
}

/* ---------- Tabelle: Spalten nach Inhalt ---------- */

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart {
	table-layout: auto !important;
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: collapse !important;
	border-radius: 0 !important;
	background: none !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart th,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td {
	padding: 16px 12px !important;
	vertical-align: middle !important;
	text-align: left;
	color: var(--zw-cart-text);
	background: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--zw-cart-border-light) !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart th:first-child,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td:first-child {
	padding-left: 0 !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart th:last-child,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td:last-child {
	padding-right: 0 !important;
}

/* Kopfzeile wie die Feld-Labels im Produktmodul */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart thead th {
	padding-top: 0 !important;
	padding-bottom: 10px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--zw-cart-muted) !important;
	white-space: nowrap;
}

/* Schmale Spalten: so breit wie ihr Inhalt */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart .product-remove,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart .product-thumbnail,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart .product-price,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart .product-quantity,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart .product-subtotal {
	width: 1% !important;
	white-space: nowrap;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart .product-subtotal {
	text-align: right !important;
}

/* Entfernen */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-remove a.remove {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: var(--zw-cart-muted) !important;
	background: transparent !important;
	border-radius: 50% !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Divi blendet mobil "Löschen" per ::after ein (Link hat bereits aria-label) */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-remove a.remove::before,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-remove a.remove::after {
	display: none !important;
	content: none !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-remove a.remove:hover,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-remove a.remove:focus-visible {
	color: var(--zw-cart-text) !important;
	background: #f4f4f4 !important;
}

/* Bild 60x60 */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-thumbnail a {
	display: block;
	width: 60px;
	height: 60px;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-thumbnail img {
	display: block !important;
	width: 60px !important;
	height: 60px !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: none !important;
}

/* Produktname */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-name,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-name a {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--zw-cart-text) !important;
	text-decoration: none;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-name a:hover,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-name a:focus-visible {
	text-decoration: underline;
}

/* Preis + Zwischensumme */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-price,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.product-subtotal {
	font-size: 16px !important;
	color: var(--zw-cart-text) !important;
}

/* Abo-Intervall unter dem Preis */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart .subscription-details {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--zw-cart-muted);
}

/* Menge */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart .quantity.zw-qty-stepper {
	width: 120px;
	--zw-qty-h: var(--zw-cart-field-h);
	--zw-qty-border: var(--zw-cart-border);
	--zw-qty-text: var(--zw-cart-text);
}

/* ---------- Aktionen: Gutschein + Aktualisieren ---------- */

/* Zelle bleibt table-cell (colspan), Inhalt links Gutschein / rechts Aktualisieren */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions {
	padding: 20px 0 0 !important;
	text-align: left !important;
	border-bottom: 0 !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .coupon {
	display: inline-flex !important;
	flex-wrap: wrap;
	gap: 12px;
	float: none !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions > button[name="update_cart"] {
	float: right !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .coupon input#coupon_code {
	width: 220px !important;
	max-width: 100%;
	height: var(--zw-cart-field-h) !important;
	margin: 0 !important;
	padding: 0 14px !important;
	font-size: 16px !important;
	color: var(--zw-cart-text) !important;
	background: #fff !important;
	border: 1px solid var(--zw-cart-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .coupon input#coupon_code::placeholder {
	color: var(--zw-cart-muted);
	opacity: 1;
}

/* Buttons im CI (wie "In den Warenkorb") */
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .button {
	float: none !important;
	width: auto !important;
	height: var(--zw-cart-field-h) !important;
	margin: 0 !important;
	padding: 0 20px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	white-space: nowrap;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	color: var(--zw-cart-btn-text) !important;
	background: var(--zw-cart-btn) !important;
	border: 1px solid var(--zw-cart-btn) !important;
	border-radius: 0.5rem !important;
	box-shadow: none !important;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .button::after {
	display: none !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .button:not(:disabled):hover,
.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .button:not(:disabled):focus-visible {
	color: var(--zw-cart-btn-hover-text) !important;
	background: var(--zw-cart-btn-hover) !important;
	border-color: var(--zw-cart-btn-hover) !important;
	outline: 2px solid var(--zw-cart-btn-hover) !important;
	outline-offset: 2px !important;
	padding: 0 20px !important;
}

.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .button:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed;
}

/* ---------- Mobil: jede Position als kompakte Karte ---------- */

@media (max-width: 767px) {
	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart,
	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tbody {
		display: block !important;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart thead {
		display: none !important;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr.cart_item {
		display: grid !important;
		grid-template-columns: 60px minmax(0, 1fr) auto !important;
		grid-template-areas:
			"thumb name remove"
			"thumb price price"
			"qty qty subtotal" !important;
		gap: 6px 12px !important;
		align-items: center;
		padding: 16px 0 !important;
		border-bottom: 1px solid var(--zw-cart-border-light) !important;
		background: none !important;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr.cart_item td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		text-align: left !important;
		white-space: normal;
		border: 0 !important;
	}

	/* WooCommerce-Spaltenlabels ("Preis:", "Anzahl:") ausblenden */
	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr.cart_item td::before {
		display: none !important;
		content: none !important;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr.cart_item td.product-thumbnail {
		grid-area: thumb;
		align-self: start;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr.cart_item td.product-name {
		grid-area: name;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr.cart_item td.product-remove {
		grid-area: remove;
		align-self: start;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr.cart_item td.product-price {
		grid-area: price;
		align-self: start;
		font-size: 15px !important;
		color: var(--zw-cart-muted) !important;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr.cart_item td.product-quantity {
		grid-area: qty;
		margin-top: 8px;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr.cart_item td.product-subtotal {
		grid-area: subtotal;
		margin-top: 8px;
		text-align: right !important;
		white-space: nowrap;
	}

	/* Aktionen untereinander, volle Breite */
	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart tr:not(.cart_item),
	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions {
		display: block !important;
		width: 100% !important;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .coupon {
		display: flex !important;
		width: 100%;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .coupon input#coupon_code {
		flex: 1 1 140px;
		width: auto !important;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions .button {
		flex: 1 1 auto;
		width: 100% !important;
		padding: 0 12px !important;
		font-size: 15px !important;
		letter-spacing: 1px !important;
	}

	.et-db #et-boc .et-l .et_pb_module.zw-cart table.shop_table.cart td.actions > button[name="update_cart"] {
		float: none !important;
	}
}