/**
 * Coffeeness new cart page (Warenkorb).
 *
 * Ported from the approved "HTML Templates/warenkorb.html" mockup. Unlike the
 * category/homepage templates this is a pure RE-SKIN: the markup stays the
 * standard WooCommerce cart shortcode + Astra addon output (#ast-cart-wrapper,
 * .ast-qty-placeholder +/- buttons, #ast-checkout-coupon toggle, Germanized
 * unit-price/tax rows, PPCP PayPal button), so cart AJAX, the qty steppers,
 * the coupon toggle and payment buttons keep their existing plugin JS
 * untouched. Only the cross-sells list has a template override
 * (woocommerce/cart/cross-sells.php -> .cn-xsell markup).
 *
 * Everything is scoped under body.woocommerce-cart (WP body class on the cart
 * page) and the stylesheet is only enqueued there (functions.php,
 * child_enqueue_styles). !important is used ONLY where an existing rule forces
 * it (WC core a.remove colors, legacy border-radius in style.css, the old
 * 40%/58% cart layout widths).
 *
 * Colors/spacings mirror the mockup 1:1:
 * dark #032936 | blue #285bb8 | blue hover #284985 | border #efecea
 * gray #9E9E9E | head bg #f3f0ec | input border #d9d4cf | red #e05858
 * disabled #a9bce0 | page bg #f9f9f9 | shadow 0 6px 18px rgba(3,41,54,.05)
 */

/* ==========================================================================
   Page shell
   ========================================================================== */

/* Astra "separate container" paints its own background on the content
   wrappers, which sits ON TOP of a plain body background - cover them all. */
body.woocommerce-cart,
.woocommerce-cart #content,
.woocommerce-cart .site-content,
.woocommerce-cart #primary {
	background: #f9f9f9 !important;
}

/* Astra "separate container" wraps the page in a white box - the design puts
   its own white cards on the gray page background instead. Astra paints the
   white via ".ast-separate-container .ast-article-single:not(.ast-related-post)"
   whose :not() outranks any plain class chain - hence the !important. */
.woocommerce-cart.ast-separate-container .ast-article-single,
.woocommerce-cart.ast-separate-container .ast-article-inner {
	background: transparent !important;
	padding: 0;
	border: 0;
	box-shadow: none;
}

/* Mockup: .cart-sec{padding:44px 0 70px} .cart-sec .wrap{max-width:1360px} */
.woocommerce-cart #primary {
	margin-top: 44px;
	margin-bottom: 70px;
	padding: 0;
}

.woocommerce-cart .site-content > .ast-container {
	max-width: 1360px; /* mockup .wrap: max-width 1360px INCLUDING its 24px side padding */
	padding-left: 24px;
	padding-right: 24px;
}

/* Base typography inside the cart. Astra sets a large body line-height
   (~1.65) that inherits everywhere; the mockup relies on the browser default
   (normal), so without this reset buttons/badges/rows render taller than the
   design. Components below set their own line-height where the mockup does. */
.woocommerce-cart .woocommerce,
.woocommerce-cart .entry-content {
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.04rem;
	color: #032936;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}

/* Mockup: .cart-h1 */
.woocommerce-cart .entry-header {
	margin: 0;
}

.woocommerce-cart h1.entry-title {
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 800;
	letter-spacing: -.01em;
	font-size: clamp(1.7rem, 3vw, 2.2rem);
	line-height: normal;
	color: #032936;
	margin: 0 0 26px;
}

/* ==========================================================================
   Two-column layout (mockup: .cart-layout{grid-template-columns:1fr 340px})

   #ast-cart-wrapper (Astra addon) already wraps exactly the two design
   columns: .ast-cart-non-sticky (cart form + cross-sells) and
   .cart-collaterals (totals). The old 58%/40% float widths in style.css are
   neutralized. If the Astra sticky-cart feature is ever disabled the wrapper
   disappears and the page gracefully falls back to stacked full-width blocks.
   ========================================================================== */

.woocommerce-cart #ast-cart-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 26px;
	align-items: start;
}

.woocommerce-cart #ast-cart-wrapper .ast-cart-non-sticky {
	width: auto !important; /* style.css: 58% */
	min-width: 0;
}

.woocommerce-cart #ast-cart-wrapper > .cart-collaterals {
	width: auto !important; /* style.css: 40% */
	position: sticky;
	top: 96px;
}

/* ==========================================================================
   Cart card (form + table) - mockup .cart-card / .cart-row

   The table is laid out as CSS GRID rows with the mockup's exact column
   template (40px 72px 1fr 120px 140px 140px, 16px gap, 18px 22px row
   padding). A real table layout cannot reproduce the mockup: the "Produkt"
   header label spans the remove + image + name columns (mockup .ch-prod,
   grid-column 1/4) and table cells cannot carry column gaps.
   ========================================================================== */

.woocommerce-cart .woocommerce-cart-form .shop_table {
	display: block;
	width: 100%;
	/* Astra ".woocommerce-js .woocommerce table.shop_table{margin-bottom:2em}"
	   is one specificity point ahead - without !important the gap to the
	   cross-sells card grows to ~55px instead of the mockup's 22px */
	margin: 0 !important;
	background: #fff;
	border: 1px solid #efecea;
	/* legacy style.css sets 10px !important on .cart.woocommerce-cart-form__contents */
	border-radius: 14px !important;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(3, 41, 54, .05);
}

.woocommerce-cart .woocommerce-cart-form .shop_table thead,
.woocommerce-cart .woocommerce-cart-form .shop_table tbody {
	display: block;
	width: 100%;
}

/* Shared row grid (mockup .cart-row) */
.woocommerce-cart .woocommerce-cart-form .shop_table thead tr,
.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item {
	display: grid;
	grid-template-columns: 40px 72px minmax(0, 1fr) 120px 140px 140px;
	gap: 16px;
	align-items: center;
	padding: 18px 22px;
}

/* Header row (mockup .cart-head) */
.woocommerce-cart .woocommerce-cart-form .shop_table thead tr {
	background: #f3f0ec;
	border-bottom: 1px solid #efecea;
}

.woocommerce-cart .woocommerce-cart-form .shop_table thead th {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
	font-weight: 700;
	font-size: 1.04rem;
	color: #032936;
	text-align: left;
	white-space: nowrap;
	line-height: normal;
}

/* The remove/thumbnail headers only hold screen-reader spans; hiding them
   lets "Produkt" span grid columns 1-3 exactly like the mockup's .ch-prod. */
.woocommerce-cart .woocommerce-cart-form .shop_table thead th.product-remove,
.woocommerce-cart .woocommerce-cart-form .shop_table thead th.product-thumbnail {
	display: none;
}

.woocommerce-cart .woocommerce-cart-form .shop_table thead th.product-name { grid-column: 1 / 4; }
.woocommerce-cart .woocommerce-cart-form .shop_table thead th.product-price { grid-column: 4; }
.woocommerce-cart .woocommerce-cart-form .shop_table thead th.product-quantity { grid-column: 5; }
.woocommerce-cart .woocommerce-cart-form .shop_table thead th.product-subtotal { grid-column: 6; }

/* Item rows (mockup .cart-item) */
.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item {
	border-bottom: 1px solid #efecea;
}

.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
	/* style.css "#content table.cart td{min-height:3.25em}" makes cells taller
	   than their content, pushing text above the centerline */
	min-height: 0 !important;
	text-align: left;
	line-height: normal;
}

/* Exact vertical centering: in the mockup the button/image/stepper ARE the
   grid children. Here they sit inside td wrappers as inline-level elements,
   whose baseline adds descender space below and nudges each cell a few px
   off-center. Each td becomes a flex container centering its content. */
.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-remove,
.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-thumbnail,
.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-subtotal,
.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-quantity {
	display: flex;
	align-items: center;
}

/* The name cell is a plain block: the anchor wraps naturally inside the
   column, and bundle parents' <br> + "Bearbeiten" link fall on their own
   line. The row grid's align-items:center centers the cell vertically. */
.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-name {
	display: block;
	min-width: 0;
	overflow-wrap: break-word;
}

.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-thumbnail a {
	display: block;
	line-height: 0;
}

/* Price cell = mockup .ci-price: flex column, 2px gap (the gap replaces the
   old margin-top on the Germanized unit-price span) */
.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-price {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
}

/* Remove "x" (mockup .ci-remove). WC core forces red/white via !important.
   Astra's filled close-svg renders thinner/paler than the mockup's stroked
   cross, so the icon is redrawn as two CSS bars (matches .ci-x: 13px cross,
   ~1.5px stroke) and the svg is hidden. */
.woocommerce-cart .woocommerce-cart-form td.product-remove .remove {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 1px solid #e3ddd6 !important;
	border-radius: 50%;
	background: #fff !important;
	color: #9E9E9E !important;
	opacity: 1; /* Astra fades a.remove to opacity .5 - the mockup icon is solid */
	font-size: 0;
	line-height: 1;
	transition: all .15s ease;
}

.woocommerce-cart .woocommerce-cart-form td.product-remove .remove:hover {
	border-color: #e05858 !important;
	color: #e05858 !important;
	background: #fff !important;
}

.woocommerce-cart .woocommerce-cart-form td.product-remove .remove .ahfb-svg-iconset {
	display: none;
}

/* The mockup's .ci-x path (M6 6l12 12M18 6L6 18, stroke 2.4, round caps) as a
   mask, painted with currentColor so the gray/red hover keeps working.
   IMPORTANT: Astra also styles a.remove:before (an absolutely-positioned
   full-size circle border) - every one of those properties must be reset
   here or they merge into this pseudo-element and mangle the icon. */
.woocommerce-cart .woocommerce-cart-form td.product-remove .remove::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	width: 13px;
	height: 13px;
	border: 0 !important;
	border-radius: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

/* Thumbnail (mockup .ci-imglink img: 64px, radius 9px) */
.woocommerce-cart .woocommerce-cart-form td.product-thumbnail img {
	width: 64px;
	height: 64px;
	/* style.css "#main img{margin:10px 0 20px}" (ID selector) otherwise adds
	   30px of vertical margin - !important is the only way past the ID */
	margin: 0 !important;
	object-fit: cover;
	border-radius: 9px;
	border: 1px solid #efecea;
	background: #f7f4f1;
	display: block;
}

/* Name (mockup .ci-name) */
.woocommerce-cart .woocommerce-cart-form td.product-name a {
	font-weight: 600;
	color: #032936;
	text-decoration: none;
	line-height: 1.35;
}

.woocommerce-cart .woocommerce-cart-form td.product-name a:hover {
	color: #285bb8;
}

/* Price + Germanized unit price (mockup .ci-p / .ci-unit) */
.woocommerce-cart .woocommerce-cart-form td.product-price .woocommerce-Price-amount {
	font-weight: 600;
	color: #032936;
}

.woocommerce-cart .woocommerce-cart-form td.product-price .wc-gzd-cart-info.unit-price {
	display: block;
	margin: 0; /* spacing comes from the price cell's 2px flex gap */
	font-size: .82rem;
	color: #9E9E9E;
	opacity: 1; /* Germanized Pro (loads after this file) sets opacity .7 */
}

.woocommerce-cart .woocommerce-cart-form td.product-price .wc-gzd-cart-info.unit-price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: 400;
	color: inherit;
}

/* ==========================================================================
   WooCommerce Product Bundles rows (e.g. Kaffeebohnen-Probierset)
   The plugin renders the parent as tr.bundle_table_item plus one
   tr.bundled_table_item per child, and its stylesheet adds a FontAwesomePB
   "belongs to bundle" arrow after child prices, wraps child prices in a
   nowrap span, and strips the row borders inside the group with !important.
   ========================================================================== */

/* "Bearbeiten" edit link under the bundle parent's name (plugin colors it
   #888 - restyle as a small blue action link like "Adresse ändern") */
.woocommerce-cart .woocommerce-cart-form td.product-name .edit_in_cart_text {
	margin-top: 3px;
	color: #285bb8;
	text-decoration: none;
}

.woocommerce-cart .woocommerce-cart-form td.product-name .edit_in_cart_text small {
	font-size: .85rem;
	font-weight: 600;
}

.woocommerce-cart .woocommerce-cart-form td.product-name .edit_in_cart_text:hover small {
	text-decoration: underline;
}

/* Child names are plain text (no anchor) - match the product-name weight */
.woocommerce-cart .woocommerce-cart-form tr.bundled_table_item td.product-name {
	font-weight: 600;
}

/* The icon-font arrows clash with the design; the grouped look (smaller
   child rows, no separators inside the group) already conveys hierarchy */
.woocommerce-cart .bundled_table_item_price::after,
.woocommerce-cart .bundled_table_item_subtotal::after {
	content: none !important;
}

.woocommerce-cart .bundled_table_item_price,
.woocommerce-cart .bundled_table_item_subtotal {
	white-space: normal;
}

/* Child price + Germanized unit price stack like normal items do */
.woocommerce-cart .woocommerce-cart-form td.product-price .bundled_table_item_price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* The plugin kills every border inside the bundle group with !important -
   restore the separator after the group's LAST child so the bundle doesn't
   bleed into the next cart item */
.woocommerce-cart .woocommerce-cart-form .shop_table tr.bundled_table_item:not(:has(+ tr.bundled_table_item)) {
	border-bottom: 1px solid #efecea !important;
}

/* Quantity stepper (mockup .qty-stepper). The server renders Astra's
   .ast-qty-placeholder anchors; add-to-cart-quantity-btn.js then swaps them
   for a.minus / a.plus and adds .buttons_added at runtime - style BOTH
   variants so there is no flash of unstyled buttons before the script runs.
   The click handler triggers the change event WC cart.js listens to for
   enabling the update button. */
.woocommerce-cart .woocommerce-cart-form .quantity {
	display: inline-flex !important; /* style.css forces inline-flex on .buttons_added too */
	align-items: stretch;
	border: 1.5px solid #d9d4cf;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	margin: 0;
}

.woocommerce-cart .woocommerce-cart-form .quantity .ast-qty-placeholder,
.woocommerce-cart .woocommerce-cart-form .quantity .minus,
.woocommerce-cart .woocommerce-cart-form .quantity .plus {
	width: 44px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	/* Astra outputs "-" / "+" text; the mockup uses "–" (en dash) and "+" at
	   1.3rem. Hide the text nodes and draw the exact glyphs via ::before. */
	font-size: 0 !important;
	font-weight: 400;
	line-height: 1;
	color: #032936;
	background: #fff !important; /* Astra gives .minus/.plus their own bg + border */
	border: 0 !important;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}

.woocommerce-cart .woocommerce-cart-form .quantity .minus::before {
	content: "\2013"; /* en dash, like the mockup's – */
	font-size: 1.3rem;
	line-height: 1;
}

.woocommerce-cart .woocommerce-cart-form .quantity .plus::before {
	content: "+";
	font-size: 1.3rem;
	line-height: 1;
}

.woocommerce-cart .woocommerce-cart-form .quantity .ast-qty-placeholder:hover,
.woocommerce-cart .woocommerce-cart-form .quantity .minus:hover,
.woocommerce-cart .woocommerce-cart-form .quantity .plus:hover {
	background: #f4f2f0 !important;
	color: #032936;
}

.woocommerce-cart .woocommerce-cart-form .quantity .qty {
	width: 46px;
	height: auto;
	margin: 0;
	padding: 11px 0;
	border: 0 !important; /* Astra/theme input borders would split the stepper into boxes */
	border-radius: 0;
	text-align: center;
	font-size: 1.05rem;
	font-weight: 600 !important; /* mockup .qty-input; theme input rules force 400 */
	line-height: 1;
	color: #032936;
	background: #fff;
	box-shadow: none;
	-moz-appearance: textfield;
}

.woocommerce-cart .woocommerce-cart-form .quantity .qty:focus {
	outline: none;
	border: 0 !important;
	box-shadow: none;
}

/* style.css sets ".woocommerce-js #main .quantity input[type=number]
   {padding:.5em!important}" at >=600px - an ID + !important rule that
   shrinks the stepper below the mockup's height. Only a selector that
   carries #main too (with more classes) can outrank it. */
.woocommerce-cart #main .woocommerce-cart-form .quantity .qty {
	padding: 11px 0 !important;
}

.woocommerce-cart .woocommerce-cart-form .quantity .qty::-webkit-outer-spin-button,
.woocommerce-cart .woocommerce-cart-form .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Subtotal (mockup .ci-line) */
.woocommerce-cart .woocommerce-cart-form td.product-subtotal .woocommerce-Price-amount {
	font-weight: 700;
	color: #032936;
}

/* Actions row (mockup .cart-foot): update button right, inline coupon hidden -
   coupons are applied via the Astra toggle in the summary card instead. */
.woocommerce-cart .woocommerce-cart-form .shop_table tbody tr:not(.cart_item) {
	display: block;
}

.woocommerce-cart .woocommerce-cart-form .shop_table td.actions {
	display: flex;
	justify-content: flex-end;
	padding: 16px 22px;
	background: transparent;
	border: 0;
	text-align: right;
}

.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .coupon {
	display: none;
}

.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .button[name="update_cart"] {
	float: none;
	display: inline-block;
	background: #285bb8;
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px 22px;
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700 !important; /* Astra's global button weight otherwise wins */
	font-size: .95rem;
	letter-spacing: normal;
	line-height: normal;
	cursor: pointer;
	transition: background .15s ease;
}

.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .button[name="update_cart"]:hover {
	background: #284985;
	color: #fff;
}

/* Disabled until a quantity changes (WC cart.js toggles the prop).
   Mockup .cart-update: pale blue, not grayed out - override the WC/Astra
   opacity treatment. */
.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .button[name="update_cart"]:disabled,
.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .button[name="update_cart"].disabled {
	background: #a9bce0 !important;
	color: #fff !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

/* ==========================================================================
   Cross-sells (markup: woocommerce/cart/cross-sells.php) - mockup .xsell
   ========================================================================== */

.woocommerce-cart .cn-xsell {
	margin-top: 22px;
	padding: 6px 22px 10px;
	background: #fff;
	border: 1px solid #efecea;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(3, 41, 54, .05);
}

.woocommerce-cart .cn-xsell-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #032936;
	margin: 16px 0 6px !important; /* Astra h2 block margins otherwise inflate the card */
	padding: 0;
	line-height: normal;
}

.woocommerce-cart .cn-xsell-item {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 14px 0 !important;
	border-top: 1px solid #efecea;
	text-decoration: none;
	color: inherit;
	font-size: 1.04rem;
	line-height: normal;
}

/* The WebP plugin may wrap the thumbnail in <picture> - size both cases. */
.woocommerce-cart .cn-xsell-item picture {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.woocommerce-cart .cn-xsell-item img {
	width: 56px;
	height: 56px;
	margin: 0 !important; /* counters style.css "#main img" vertical margins */
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #efecea;
	background: #f7f4f1;
	flex: 0 0 auto;
	display: block;
}

.woocommerce-cart .cn-xsell-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}

/* Mockup .xsell-name/-price rely on the body's normal line-height */
.woocommerce-cart .cn-xsell-name {
	font-weight: 600;
	color: #032936;
	line-height: normal;
}

.woocommerce-cart .cn-xsell-price {
	font-weight: 700;
	color: #032936;
	line-height: normal;
}

.woocommerce-cart .cn-xsell-price del {
	font-weight: 400;
	font-size: .85rem;
	color: #9E9E9E;
	margin-right: 4px;
}

.woocommerce-cart .cn-xsell-add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .9rem;
	font-weight: 600;
	color: #285bb8;
	white-space: nowrap;
}

.woocommerce-cart .cn-xsell-add svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	transition: transform .15s ease;
}

.woocommerce-cart .cn-xsell-item:hover .cn-xsell-add {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-cart .cn-xsell-item:hover .cn-xsell-add svg {
	transform: translateX(3px);
}

.woocommerce-cart .cn-xsell-item:hover .cn-xsell-name {
	color: #285bb8;
}

/* ==========================================================================
   Summary card (mockup .sum-card) - .cart_totals is AJAX-replaced by WC
   cart.js, so everything here targets the WC/Germanized markup as rendered.
   ========================================================================== */

.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	background: #fff;
	border: 1px solid #efecea;
	border-radius: 14px !important; /* legacy style.css: 10px !important */
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(3, 41, 54, .05);
	padding: 24px 22px;
}

/* Astra addon gives the heading a background bar - the mockup has none. */
.woocommerce-cart .cart-collaterals .cart_totals h2 {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	font-size: 1.3rem;
	font-weight: 700;
	color: #032936;
	line-height: normal;
}

/* Rows as flex lines (mockup .sum-row). Flex instead of table display also
   neutralizes WC's small-screen stacking so the card renders identically on
   every viewport. */
.woocommerce-cart .cart-collaterals .cart_totals table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	background: transparent;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals table tbody {
	display: block;
	width: 100%;
}

.woocommerce-cart .cart-collaterals .cart_totals table tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 13px 0;
	border-top: 1px solid #efecea;
}

.woocommerce-cart .cart-collaterals .cart_totals table tr:first-child {
	border-top: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td {
	display: block;
	padding: 0 !important; /* legacy style.css pads these cells */
	border: 0;
	background: transparent;
	font-size: 1.04rem;
	color: #032936;
	/* mockup .sum-row inherits the body's normal line-height; only the
	   shipping value block uses 1.4 (set on its label below) */
	line-height: normal;
}

.woocommerce-cart .cart-collaterals .cart_totals table th {
	font-weight: 400;
	text-align: left;
	flex: 0 0 auto;
	width: auto; /* Astra gives these th a 40% width, squeezing the shipping td (and the calculator form in it) */
	white-space: nowrap;
}

.woocommerce-cart .cart-collaterals .cart_totals table td {
	text-align: right;
	flex: 1;
	min-width: 0;
}

/* Shipping row (mockup .sum-ship): "Deutschland: 4,90 €" with bold amount,
   the calculator link small and blue below it. */
.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
	margin: 0;
}

/* The shipping row cannot stay a flex row: the calculator form lives inside
   the td, so as a flex item the td (and the form) can never exceed the space
   left of the "Sendung" label. Block layout instead - label floated left,
   value right-aligned beside it, and the opened calculator form clears the
   float and spans the FULL card width. */
.woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals {
	display: block;
}

.woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals th {
	float: left;
}

.woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals td {
	width: 100%;
}

.woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
	clear: both;
}

/* Astra styles these via ul#shipping_method (ID selector) - "li label
   {display:inline}" and an inline-CSS li rule carrying TWO ids
   (padding-left 22px, text-indent -22px). The ID must appear in our
   selectors too, plus !important on the li box props, to win. */
.woocommerce-cart .cart_totals ul#shipping_method li {
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
}

/* Mockup .sum-ship .sum-val is a right-aligned flex COLUMN, so the label
   text ("Deutschland:"), the bold amount and the calculator link each sit on
   their own line. The label's text node and price span become separate flex
   items, reproducing exactly that. */
.woocommerce-cart .cart_totals ul#shipping_method li label {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: #032936;
	line-height: 1.4;
}

.woocommerce-cart .cart_totals ul#shipping_method .woocommerce-Price-amount {
	font-weight: 700;
}

/* "Versandoptionen werden während des Bezahlvorgangs aktualisiert." - the
   mockup's shipping row has no room for it. */
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
	display: none;
}

.woocommerce-cart .cart_totals .shipping-calculator-button {
	display: inline-block;
	margin-top: 4px;
	font-size: .85rem;
	font-weight: 400;
	color: #285bb8;
	text-decoration: none;
	white-space: nowrap; /* "Versandkosten berechnen" must not wrap mid-link */
	line-height: 1.4;
}

.woocommerce-cart .cart_totals .shipping-calculator-button:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-cart .cart_totals .shipping-calculator-form {
	margin-top: 12px;
	text-align: left;
}

/* Bootstrap turns p.form-row into a flex container with -5px side margins,
   Astra gives its labels line-height:2 - reset both. The plain p wrapper
   around the "Aktualisieren" button gets the same spacing. */
.woocommerce-cart .cart_totals .shipping-calculator-form p {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	line-height: normal;
}

.woocommerce-cart .cart_totals .shipping-calculator-form p:last-of-type {
	margin-bottom: 0; /* no dangling gap under the Aktualisieren button */
}

.woocommerce-cart .cart_totals .shipping-calculator-form label {
	display: block;
	margin: 0 0 4px;
	font-size: .85rem;
	color: #9E9E9E;
	line-height: 1.4;
}

/* The state field wraps its label+select in a plain inline <span>; block it
   so the field spans the full row like the others. */
.woocommerce-cart .cart_totals .shipping-calculator-form p > span {
	display: block;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .input-text,
.woocommerce-cart .cart_totals .shipping-calculator-form select {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid #d9d4cf;
	border-radius: 8px;
	font-size: .9rem;
	font-family: inherit;
	color: #032936;
	background: #fff;
	box-shadow: none;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .input-text:focus,
.woocommerce-cart .cart_totals .shipping-calculator-form select:focus {
	outline: none;
	border-color: #285bb8;
}

/* WooCommerce replaces the country/state selects with select2 spans - style
   the rendered control like the design inputs above. */
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container .select2-selection--single {
	height: auto;
	padding: 9px 12px;
	border: 1.5px solid #d9d4cf;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: none;
}

.woocommerce-cart .cart_totals .shipping-calculator-form .select2-selection__rendered {
	padding: 0;
	font-size: .9rem;
	color: #032936;
	line-height: normal;
}

.woocommerce-cart .cart_totals .shipping-calculator-form button[name="calc_shipping"] {
	display: inline-block;
	background: #285bb8;
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px 16px;
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 600 !important;
	font-size: .9rem;
	line-height: normal;
	cursor: pointer;
	transition: background .15s ease;
}

.woocommerce-cart .cart_totals .shipping-calculator-form button[name="calc_shipping"]:hover {
	background: #284985;
}

/* Total row (mockup .sum-total) */
.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total th,
.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total td {
	font-weight: 700;
	font-size: 1.1rem;
}

/* Astra sets font-weight:400 on every .woocommerce-Price-amount SPAN inside
   shop_table - that beats the bold inherited from the <strong> wrapper, so
   the Gesamtsumme amount rendered regular. Target the span directly. */
.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total strong,
.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total .woocommerce-Price-amount {
	font-weight: 700;
}

/* Germanized already renders its own "inkl. 7 % MwSt." row below - the
   inline "(inkl. 2,47 € MwSt. 7 % DE)" small print would duplicate it. */
.woocommerce-cart .cart_totals tr.order-total .includes_tax {
	display: none;
}

/* Tax row (mockup .sum-tax) */
.woocommerce-cart .cart-collaterals .cart_totals table tr.order-tax {
	border-top: 0;
	padding: 6px 0 13px;
}

.woocommerce-cart .cart-collaterals .cart_totals table tr.order-tax th,
.woocommerce-cart .cart-collaterals .cart_totals table tr.order-tax td {
	color: #9E9E9E;
	font-size: .86rem;
	font-weight: 400;
}

/* Coupon toggle (Astra addon #ast-checkout-coupon; mockup .sum-coupon).
   NOTE: no display property on .coupon - Astra's JS show/hide owns that. */
/* Consistent 12px rhythm: coupon block, checkout button and PayPal button
   are all separated by exactly 12px. */
.woocommerce-cart #ast-checkout-coupon {
	margin: 12px 0;
}

.woocommerce-cart #ast-coupon-trigger {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 1.04rem;
	color: #032936;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	line-height: normal;
}

.woocommerce-cart #ast-coupon-trigger:hover {
	color: #285bb8;
	text-decoration: underline;
}

.woocommerce-cart #ast-checkout-coupon .ast-coupon-label {
	display: none;
}

/* Astra's JS opens .coupon as display:flex (inline style) with 70%/28% ID
   widths on the fields - restyle as one row at the same 48px height as the
   "Weiter zur Kasse" / PayPal buttons. No display property here: Astra's
   show/hide owns that. */
.woocommerce-cart #ast-checkout-coupon .coupon {
	/* Astra hides the trigger while the field is open, so the container's own
	   12px margin already provides the spacing - no extra offset here. */
	margin-top: 0;
	align-items: stretch;
	gap: 8px;
}

.woocommerce-cart #ast-checkout-coupon #ast-coupon-code {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid #d9d4cf;
	border-radius: 10px;
	font-size: .95rem;
	font-family: inherit;
	color: #032936;
	background: #fff;
	box-shadow: none;
	line-height: normal;
}

.woocommerce-cart #ast-checkout-coupon #ast-coupon-code:focus {
	outline: none;
	border-color: #285bb8;
}

.woocommerce-cart #ast-checkout-coupon #ast-apply-coupon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	flex: 0 0 auto;
	height: 48px;
	margin: 0;
	background: #285bb8;
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 0 20px;
	text-align: center;
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 600 !important;
	font-size: .95rem;
	line-height: normal;
	cursor: pointer;
	transition: background .15s ease;
}

.woocommerce-cart #ast-checkout-coupon #ast-apply-coupon:hover {
	background: #284985;
	color: #fff;
}

/* Checkout button (mockup .btn-checkout) + PayPal smart button below */
.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout {
	padding: 0;
	margin: 0;
}

.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
	display: block;
	margin: 0;
	background: #285bb8;
	color: #fff;
	text-align: center;
	/* Astra applies 'Open Sans' + weight 400 to every .button element
	   directly - the mockup buttons are Public Sans bold, so each button
	   declares the stack and forces the weight. */
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700 !important;
	font-size: 1.04rem;
	padding: 15px;
	border: 0;
	border-radius: 10px;
	line-height: normal;
	text-decoration: none;
	transition: background .15s ease;
}

.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover {
	background: #284985;
	color: #fff;
}

.woocommerce-cart .cart-collaterals .ppc-button-wrapper {
	margin-top: 12px;
}

/* ==========================================================================
   AJAX loading state
   Keyed off the .processing class WC cart.js puts on the form and cart_totals
   for the whole request - NOT off blockUI's overlay div, whose inline styles
   and Astra-addon skeleton rules are unreliable. blockUI's (now invisible)
   overlay still blocks clicks; these rules only provide the visuals.
   ========================================================================== */

.woocommerce-cart .woocommerce-cart-form .blockUI.blockOverlay,
.woocommerce-cart .cart_totals .blockUI.blockOverlay {
	background: transparent !important;
	border: 0 !important;
}

.woocommerce-cart .woocommerce-cart-form .blockUI.blockOverlay::before,
.woocommerce-cart .cart_totals .blockUI.blockOverlay::before {
	content: none !important;
	display: none !important;
}

.woocommerce-cart .woocommerce-cart-form.processing,
.woocommerce-cart .cart_totals.processing {
	position: relative;
}

/* dim the whole card while updating */
.woocommerce-cart .woocommerce-cart-form.processing::after,
.woocommerce-cart .cart_totals.processing::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, .65);
	border-radius: 14px;
	z-index: 95;
}

/* spinner inside the update button (kept above the dim layer) */
.woocommerce-cart .woocommerce-cart-form.processing button[name="update_cart"] {
	position: relative;
	z-index: 96;
	pointer-events: none;
	color: transparent !important;
}

.woocommerce-cart .woocommerce-cart-form.processing button[name="update_cart"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cn-cart-spin .7s linear infinite;
}

/* centered spinner on the summary card */
.woocommerce-cart .cart_totals.processing::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 3px solid #d9d4cf;
	border-top-color: #285bb8;
	border-radius: 50%;
	z-index: 96;
	animation: cn-cart-spin .7s linear infinite;
}

@keyframes cn-cart-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Notices + empty cart
   ========================================================================== */

.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error li {
	background: #fff;
	border: 1px solid #efecea;
	border-left: 4px solid #285bb8;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(3, 41, 54, .05);
	color: #032936;
	padding: 14px 18px;
	margin: 0 0 18px;
}

/* WC's icon is absolutely positioned for the default 3.5em padding - reserve
   room for it and center it against the reduced card padding */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info {
	position: relative;
	/* 56px (~3.5em) clears the check icon incl. its circle - 46px overlapped */
	padding-left: 56px !important;
	align-items: center;
}

.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info::before {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	margin: 0;
}

.woocommerce-cart .woocommerce-notices-wrapper ul.woocommerce-error {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* the error icon lives on the ul, which is no longer the card - hide it,
   the red left border marks the error state */
.woocommerce-cart .woocommerce-notices-wrapper ul.woocommerce-error::before {
	content: none;
}

.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error li {
	border-left-color: #e05858;
}

.woocommerce-cart .wc-empty-cart-message {
	margin: 0 0 22px;
}

.woocommerce-cart .return-to-shop .button {
	display: inline-block;
	background: #285bb8;
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 13px 22px;
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700 !important;
	font-size: .95rem;
	line-height: normal;
	text-decoration: none;
	transition: background .15s ease;
}

.woocommerce-cart .return-to-shop .button:hover {
	background: #284985;
	color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Between 769px and 1250px the wide grid's fixed columns (120/140/140px)
   would squeeze the name column to almost nothing and the name text collides
   with the price - use narrower fixed columns and a compact stepper so the
   name always keeps readable room. */
@media (min-width: 922px) and (max-width: 1250px) {
	.woocommerce-cart .woocommerce-cart-form .shop_table thead tr,
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item {
		grid-template-columns: 30px 52px minmax(0, 1fr) 92px 116px 112px;
		gap: 10px;
		padding: 16px;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table thead th {
		font-size: .95rem;
	}

	.woocommerce-cart .woocommerce-cart-form td.product-thumbnail img {
		width: 48px;
		height: 48px;
	}

	.woocommerce-cart .woocommerce-cart-form .quantity .ast-qty-placeholder,
	.woocommerce-cart .woocommerce-cart-form .quantity .minus,
	.woocommerce-cart .woocommerce-cart-form .quantity .plus {
		width: 34px;
	}

	.woocommerce-cart .woocommerce-cart-form .quantity .qty {
		width: 38px;
	}
}

/* Summary drops below the cart. 1100px instead of the mockup's 900px: with
   the 340px sidebar still present below ~1100px even the compact columns
   leave the product name too little room. */
@media (max-width: 1100px) {
	.woocommerce-cart #ast-cart-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-cart #ast-cart-wrapper > .cart-collaterals {
		position: static;
	}

	/* Single column order: cart, summary, cross-sells. The form and the
	   cross-sells share the .ast-cart-non-sticky wrapper - display:contents
	   promotes them to grid items so the summary can slot between them. */
	.woocommerce-cart #ast-cart-wrapper > .ast-cart-non-sticky {
		display: contents;
	}

	.woocommerce-cart #ast-cart-wrapper .woocommerce-cart-form {
		order: 1;
	}

	.woocommerce-cart #ast-cart-wrapper > .cart-collaterals {
		order: 2;
	}

	.woocommerce-cart #ast-cart-wrapper .cn-xsell {
		order: 3;
		margin-top: 0; /* the wrapper grid's gap provides the spacing */
	}

	/* WC/Astra give .cart_totals a bottom margin - it would add to the grid
	   gap and make the space under the summary larger than between the other
	   tiles */
	.woocommerce-cart #ast-cart-wrapper > .cart-collaterals,
	.woocommerce-cart #ast-cart-wrapper > .cart-collaterals .cart_totals {
		margin-bottom: 0 !important;
	}
}

/* 921px = Astra's tablet breakpoint: below it Astra applies WooCommerce's
   responsive-table styles (inline data-title labels, right-aligned cells)
   which wreck the grid - so the stacked card layout takes over from exactly
   there: remove + image + name on one line, then Preis/Anzahl/Zwischensumme
   as label:value lines. */
@media (max-width: 921px) {
	/* Astra drops the container side padding below its breakpoint - keep the
	   same gutter as desktop (24px), just smaller */
	.woocommerce-cart .site-content > .ast-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* small breathing room above "Dein Warenkorb" */
	.woocommerce-cart h1.entry-title {
		padding-top: 14px;
	}

	/* Astra's smallscreen CSS injects data-title labels ("Zwischensumme:",
	   "Sendung:") into the summary tds - the th already shows the label */
	.woocommerce-cart .cart_totals table td::before {
		content: none !important;
	}

	/* PayPal smart buttons carry an inline max-width of 750px - at full-width
	   single-column sizes the button must stretch like "Weiter zur Kasse" */
	.woocommerce-cart .cart-collaterals .ppc-button-wrapper .paypal-buttons {
		max-width: 100% !important;
		width: 100% !important;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table,
	.woocommerce-cart .woocommerce-cart-form .shop_table tbody {
		display: block;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table thead {
		display: none;
	}

	/* Item card, first line: [x] [image] [title, vertically centered] */
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item {
		display: grid;
		grid-template-columns: 26px 64px minmax(0, 1fr);
		gap: 10px 12px;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid #efecea;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		background: transparent !important; /* WC smallscreen zebra-stripes rows */
		text-align: left;
	}

	/* Selectors below carry tr.cart_item to outrank the desktop per-cell flex
	   rules (which are equally specific) - the media block must win here. */
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-remove {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-thumbnail {
		grid-column: 2;
		grid-row: 1;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-name {
		grid-column: 3;
		grid-row: 1;
	}

	/* WC smallscreen injects "data-title: " labels via ::before floats -
	   replaced by the mockup's own label:value lines below. */
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td::before {
		content: none;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-price,
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-quantity,
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-subtotal {
		grid-column: 1 / -1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding-top: 8px;
		border-top: 1px dashed #efecea;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-price::before,
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-quantity::before,
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-subtotal::before {
		content: attr(data-title);
		float: none;
		margin: 0;
		font-size: .85rem;
		font-weight: 600;
		color: #9E9E9E;
	}

	/* Preis line: label left, price mid, unit price right (mockup .ci-price) */
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-price .wc-gzd-cart-info.unit-price {
		display: inline;
		margin: 0 0 0 auto;
	}

	/* Bundled child items: price + unit price stack right-aligned against the
	   "Preis" label (the wrapper span is the single flex item on the row) */
	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-price .bundled_table_item_price {
		align-items: flex-end;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table tr.cart_item td.product-price .bundled_table_item_price .wc-gzd-cart-info.unit-price {
		margin: 0;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table tr:not(.cart_item) {
		display: block;
	}

	.woocommerce-cart .woocommerce-cart-form .shop_table td.actions {
		display: flex;
		justify-content: flex-end;
		padding: 14px 16px;
		border: 0;
		background: transparent !important;
	}
}