/* =========================================================================
   Trüffelshop – cart page
   Styles the WooCommerce Cart block (Gutenberg) in the shop's skin and keeps
   the classic shortcode cart readable as a fallback. Loaded on the cart page
   only, see functions.php.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Block cart – two columns: line items in a card, summary in a sticky card
   ---------------------------------------------------------------------- */
.woocommerce-cart .wp-block-woocommerce-cart {
	max-width: 100%;
	margin: 0;
	font-family: var(--ts-sans);
	color: var(--ts-text);
}
.woocommerce-cart .wc-block-cart {
	gap: 40px;
}
.woocommerce-cart .wc-block-cart__main {
	padding: 34px 38px;
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius);
	background: var(--ts-card);
	box-shadow: var(--ts-shadow);
}
.woocommerce-cart .wc-block-cart__sidebar {
	padding: 30px 30px 26px;
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius);
	background: var(--ts-card);
	box-shadow: var(--ts-shadow);
	box-sizing: border-box;
}
/* WooCommerce only switches to two columns once its own script has measured
   the block, so the desktop layout is set here instead. */
@media (min-width: 1025px) {
	.woocommerce-cart .wc-block-cart {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
	}
	.woocommerce-cart .wc-block-cart__main {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		padding-right: 38px;
	}
	.woocommerce-cart .wc-block-cart__sidebar {
		flex: 0 0 400px;
		width: 400px;
		max-width: 400px;
		position: sticky;
		top: 24px;
	}
}
.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title,
.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-title {
	margin: 0 0 6px;
	font-family: var(--ts-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ts-ink);
}
.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Table header – WooCommerce also draws a line on the cells, which doubled
   up with the one below the row. */
.woocommerce-cart .wc-block-cart-items__header th {
	border-top: 0 !important;
	border-bottom: 0 !important;
}
.woocommerce-cart .wc-block-cart-items__header {
	border-bottom: 1px solid var(--ts-line);
	font-family: var(--ts-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ts-ink);
}
.woocommerce-cart .wc-block-cart-items__header th {
	padding-bottom: 16px;
}

/* German Market prints its cart note as loose text after the table. */
.woocommerce-cart .wp-block-woocommerce-cart-items-block {
	font-family: var(--ts-sans);
	font-size: 14px;
	line-height: 1.7;
	color: var(--ts-muted);
}
.woocommerce-cart .wp-block-woocommerce-cart-line-items-block {
	margin-bottom: 24px;
}
/* Since WooCommerce 11.1.2 the items table itself carries this class; as a
   block its rows shrink to their content instead of filling the card. */
.woocommerce-cart div.wp-block-woocommerce-cart-line-items-block {
	display: block;
}
@media (max-width: 699px) {
	/* WooCommerce lays the rows out as grids with fixed columns here, which is
	   wider than the card on phones. Image | product | line total instead. */
	.woocommerce-cart .wc-block-cart table.wc-block-cart-items,
	.woocommerce-cart .wc-block-cart table.wc-block-cart-items tbody {
		display: block;
		width: 100%;
	}
	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 74px minmax(0, 1fr) 108px;
		column-gap: 12px;
	}
	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-column: 1;
		padding-right: 0;
	}
	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2;
	}
	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 3;
		grid-row: 1;
		display: block;
		min-width: 0;
		padding-left: 0;
		text-align: right;
	}
}
.woocommerce-cart .wp-block-woocommerce-cart-items-block > a,
.woocommerce-cart .wp-block-woocommerce-cart-items-block > p a {
	color: var(--ts-green-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-cart .wc-block-cart-items {
	font-size: 16px;
	color: var(--ts-text);
}

/* Line items */
.woocommerce-cart .wc-block-cart-items__row {
	border-bottom: 1px solid var(--ts-line-soft);
}
.woocommerce-cart .wc-block-cart-items__row:last-child {
	border-bottom: 0;
}
.woocommerce-cart .wc-block-cart-items__row td {
	padding-top: 24px;
	padding-bottom: 24px;
	vertical-align: top;
}
.woocommerce-cart .wc-block-cart-item__image img {
	width: 100px;
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius-sm);
	background: var(--ts-tint);
}
.woocommerce-cart .wc-block-components-product-name {
	font-family: var(--ts-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ts-ink);
	text-decoration: none;
}
.woocommerce-cart .wc-block-components-product-name:hover {
	color: var(--ts-green-dark);
}
.woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-price {
	display: block;
	margin-top: 6px;
	font-family: var(--ts-serif);
	font-size: 19px;
	font-weight: 500;
	color: var(--ts-green-dark);
}
.woocommerce-cart .wc-block-components-product-metadata,
.woocommerce-cart .wc-block-components-product-metadata .wc-block-components-product-metadata__description p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ts-muted);
}
/* German Market lines (tax note, price per unit, delivery time) */
.woocommerce-cart .wc-block-cart-item__wrap .wgm-info,
.woocommerce-cart .wc-block-cart-item__wrap .woocommerce-de_price_taxrate,
.woocommerce-cart .wc-block-cart-item__wrap .price-per-unit,
.woocommerce-cart .wc-block-cart-item__wrap .shipping_de_string {
	display: block;
	margin-top: 2px;
	font-family: var(--ts-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ts-muted);
}
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-family: var(--ts-serif);
	font-size: 20px;
	font-weight: 500;
	color: var(--ts-ink);
}

/* Quantity stepper, in the same shape as on the product page */
.woocommerce-cart .wc-block-components-quantity-selector {
	width: 132px;
	min-width: 0;
	margin: 12px 0 0;
	border: 1px solid #D4D4BE;
	border-radius: 5px;
	background: var(--ts-tint);
	overflow: hidden;
}
.woocommerce-cart .wc-block-components-quantity-selector::after {
	display: none;
}
.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	min-width: 0;
	padding: 0;
	background: none;
	font-family: var(--ts-sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--ts-ink);
}
.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	width: 40px;
	min-width: 40px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--ts-ink);
	opacity: 1;
}
.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
	color: var(--ts-green-dark);
}
.woocommerce-cart .wc-block-cart-item__remove-link {
	margin-top: 10px;
	font-family: var(--ts-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ts-muted);
	text-underline-offset: 3px;
}
.woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: #C0392B;
}

/* Totals. WooCommerce sets padding/borders per block, so the rhythm is
   forced here to keep the rows evenly spaced. */
.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	padding: 18px 0 !important;
	border-top: 1px solid var(--ts-line-soft) !important;
}
/* Only a wrapper that really is the first element of the summary loses its
   top rule – the blocks are each wrapped separately, so :first-child on its
   own also matched the shipping row. */
.woocommerce-cart .wc-block-cart__sidebar > .wc-block-components-totals-wrapper:first-child {
	padding-top: 0 !important;
	border-top: 0 !important;
}
.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:empty,
.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper.slot-wrapper:not(:has(.wc-block-components-totals-item)) {
	display: none !important;
}
.woocommerce-cart .wc-block-components-totals-wrapper::after {
	display: none;
}
.woocommerce-cart .wc-block-components-totals-item {
	font-family: var(--ts-sans);
	font-size: 16px;
	color: var(--ts-text);
}
.woocommerce-cart .wc-block-components-totals-item__label {
	font-weight: 400;
}
.woocommerce-cart .wc-block-components-totals-item__value {
	font-weight: 500;
	color: var(--ts-ink);
}
.woocommerce-cart .wc-block-components-totals-item__description {
	font-size: 13px;
	color: var(--ts-muted);
}
.woocommerce-cart .wc-block-components-totals-footer-item {
	padding-top: 18px;
	border-top: 1px solid var(--ts-line);
	font-family: var(--ts-serif);
	font-size: 24px;
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--ts-serif);
	font-size: 24px;
	font-weight: 500;
	color: var(--ts-ink);
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--ts-green-dark);
}
.woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	margin: 0;
}
.woocommerce-cart .wc-block-components-panel__button {
	font-family: var(--ts-sans);
	font-size: 15px;
	font-weight: 500;
	color: var(--ts-ink);
}

/* Checkout button */
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block {
	margin-top: 22px;
}
.woocommerce-cart .wc-block-cart__submit-container {
	padding: 0;
}
.woocommerce-cart .wc-block-cart__submit-button {
	width: 100%;
	min-height: 58px;
	border-radius: 600px;
	background: var(--ts-green);
	color: var(--ts-green-ink);
	font-family: var(--ts-sans);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.woocommerce-cart .wc-block-cart__submit-button:hover {
	background: var(--ts-green-dark);
	color: #FFFFFF;
}
.woocommerce-cart .wp-block-woocommerce-cart-accepted-payment-methods-block {
	margin-top: 18px;
}

/* Empty cart */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	max-width: 620px;
	margin: 0 auto;
	padding: 48px 40px;
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius);
	background: var(--ts-card);
	box-shadow: var(--ts-shadow);
	text-align: center;
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-components-notice-banner {
	justify-content: center;
	text-align: left;
}

/* -------------------------------------------------------------------------
   Classic shortcode cart – kept as a safety net
   ---------------------------------------------------------------------- */
.woocommerce-cart .woocommerce-cart-form {
	padding: 30px 34px;
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius);
	background: var(--ts-card);
	box-shadow: var(--ts-shadow);
}
.woocommerce-cart .woocommerce-cart-form table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table thead th {
	background: none;
	border-bottom: 1px solid var(--ts-line);
}
.woocommerce-cart .woocommerce-cart-form .product-name a {
	font-family: var(--ts-serif);
	font-size: 19px;
	color: var(--ts-ink);
	text-decoration: none;
}
.woocommerce-cart .woocommerce-cart-form img {
	width: 84px;
	border-radius: var(--ts-radius-sm);
	background: var(--ts-tint);
}
.woocommerce-cart .woocommerce-cart-form .product-remove a.remove {
	width: 28px;
	height: 28px;
	line-height: 26px;
	color: var(--ts-muted) !important;
	font-size: 20px;
}
.woocommerce-cart .woocommerce-cart-form .product-remove a.remove:hover {
	background: none;
	color: #C0392B !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	padding: 28px 30px;
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius);
	background: var(--ts-card);
	box-shadow: var(--ts-shadow);
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
	font-size: 13px;
	font-family: var(--ts-sans);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
	border: 0;
	background: none;
	box-shadow: none;
}
.woocommerce-cart .cart-collaterals .cart_totals .order-total .amount {
	font-family: var(--ts-serif);
	font-size: 24px;
	color: var(--ts-green-dark);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
}
.woocommerce-cart .cart-empty.woocommerce-info {
	justify-content: center;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.woocommerce-cart .wc-block-cart {
		gap: 26px;
	}
	.woocommerce-cart .wc-block-cart__main {
		padding: 26px 24px;
	}
	.woocommerce-cart .wc-block-cart__sidebar {
		padding: 24px 22px 22px;
	}
}

@media (max-width: 767px) {
	.woocommerce-cart .wc-block-cart__main,
	.woocommerce-cart .woocommerce-cart-form {
		padding: 18px 16px;
	}
	.woocommerce-cart .wc-block-cart__sidebar,
	.woocommerce-cart .cart-collaterals .cart_totals {
		padding: 20px 18px 18px;
	}
	.woocommerce-cart .wc-block-cart-item__image img {
		width: 74px;
	}
	/* The tax note sits inside the line total, so the column needs room. */
	.woocommerce-cart .wc-block-cart-item__total {
		min-width: 108px;
		padding-left: 8px;
	}
	.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
		display: block;
		font-family: var(--ts-sans);
		font-size: 12px;
		line-height: 1.45;
		color: var(--ts-muted);
	}
	.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
		display: block;
		margin-bottom: 2px;
		font-family: var(--ts-serif);
		font-size: 17px;
		color: var(--ts-ink);
	}
	.woocommerce-cart .wc-block-components-product-name {
		font-size: 17px;
	}
	.woocommerce-cart .wc-block-components-quantity-selector {
		width: 118px;
	}
	.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
		width: 34px;
		min-width: 34px;
	}
	.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 20px;
	}
	.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
		padding: 30px 20px;
	}
}

/* -------------------------------------------------------------------------
   Product grids that WooCommerce shows in the empty cart (cross-sells and
   "Neu im Shop"), toned down to match the shop cards
   ---------------------------------------------------------------------- */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-heading {
	margin: 34px 0 18px;
	font-family: var(--ts-serif);
	font-size: 26px;
	font-weight: 500;
	color: var(--ts-ink);
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator {
	margin: 30px auto;
	border: 0;
	border-top: 1px solid var(--ts-line);
	opacity: 1;
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-product-template li,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-post {
	padding: 16px 14px;
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius-sm);
	background: var(--ts-card);
	text-align: center;
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-post-title {
	font-family: var(--ts-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ts-ink);
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-components-product-price {
	font-family: var(--ts-serif);
	font-size: 17px;
	font-weight: 500;
	color: var(--ts-green-dark);
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block img {
	border-radius: 10px;
}
/* Product buttons in those grids follow the shop's green pill. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-components-product-button a,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 22px !important;
	border: 0 !important;
	border-radius: 600px !important;
	background: var(--ts-green) !important;
	color: var(--ts-green-ink) !important;
	font-family: var(--ts-sans);
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-components-product-button a:hover {
	background: var(--ts-green-dark) !important;
	color: #FFFFFF !important;
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-components-product-title a,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-post-title a {
	text-decoration: none;
}
