.wp-block-woocommerce-cart {
	padding-block: var(--wp--preset--spacing--10);
}

/*
 * The Cart block renders nearly everything at 13px in one colour. The page
 * now follows the product page: readable names and prices, the line total as
 * the figure that matters, savings in the site's green, and the checkout
 * button styled like «Купити» (green, dark text, lightning glyph).
 */
.wp-block-woocommerce-cart {
	--ef-cart-green: #1c6b39;
	--ef-cart-green-bg: #e9f7ee;
	--ef-cart-buy: #3ddc84;
	--ef-cart-buy-hover: #32c574;
}

.wc-block-cart-item__prices,
.wc-block-components-product-price {
	color: var(--wp--preset--color--contrast);
}

/* --- Line items ------------------------------------------------------------ */

.wp-block-woocommerce-cart .wc-block-cart-items__header th {
	padding-bottom: var(--wp--preset--spacing--3);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-woocommerce-cart .wc-block-cart-items td {
	padding-block: var(--wp--preset--spacing--6);
}

/* Photos: 112px on wide screens (WooCommerce: 80px); phones keep their own grid below. */
@media (min-width: 700px) {
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header-image,
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		width: 112px;
		padding-right: var(--wp--preset--spacing--5);
	}
}

.wp-block-woocommerce-cart .wc-block-cart-item__image img {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 8px;
	border-radius: 12px;
	background: var(--wp--preset--color--base-subtle);
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
	margin-top: 6px;
	font-size: 15px;
}

.wp-block-woocommerce-cart .wc-block-cart-item__prices ins {
	font-weight: 600;
	text-decoration: none;
}

.wp-block-woocommerce-cart .wc-block-cart-item__prices del {
	font-size: 14px;
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-woocommerce-cart .wc-block-components-product-metadata {
	margin-block: 6px 12px;
}

.wp-block-woocommerce-cart .wc-block-components-product-metadata__description p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-subtle);
}

.wp-block-woocommerce-cart .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	width: 128px;
	height: 44px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector::after {
	display: none;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	font-size: 16px;
	font-weight: 600;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 40px;
	font-size: 20px;
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--contrast-muted);
	transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: #c62828;
}

.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* «Зберегти 3 000,00 ₴»: the saving in green, not a grey label. */
.wp-block-woocommerce-cart .wc-block-components-sale-badge {
	margin-top: 8px;
	padding: 4px 10px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--ef-cart-green-bg);
	color: var(--ef-cart-green);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

/* --- Summary ---------------------------------------------------------------- */

.wp-block-woocommerce-cart-order-summary-block {
	background: var(--wp--preset--color--base-subtle);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--6);
}

.wp-block-woocommerce-cart .wc-block-cart__totals-title {
	padding-bottom: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-size: 16px;
	font-weight: 600;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item {
	font-size: 16px;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wp-block-woocommerce-cart .wc-block-components-totals-shipping .wc-block-components-totals-item__value strong {
	font-size: 14px;
}

.wp-block-woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__value {
	color: var(--ef-cart-green);
	font-weight: 700;
}

/* Tablets and small laptops: WooCommerce's 35% side column is ~240px there,
   too narrow for the totals and the button, so the summary goes under the
   products at full width. */
@media (max-width: 1023px) {
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
		flex-direction: column;
	}

	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main,
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 100%;
		padding-inline: 0;
	}

	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		order: 2;
		margin-top: var(--wp--preset--spacing--6);
	}

	/* Products, then the summary, then «Вам може сподобатися…» (WooCommerce
	   keeps the cross-sells inside the products column, after the summary
	   would only come below them). */
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main {
		display: contents;
	}

	.wp-block-woocommerce-cart .wc-block-cart__main > :not(.wc-block-cart-items) {
		order: 3;
		margin-top: var(--wp--preset--spacing--10);
	}
}

/* --- Checkout button: like «Купити» on the product page -------------------- */

.wc-block-cart__submit-container .wp-element-button,
a.wp-block-woocommerce-proceed-to-checkout-block,
.wc-block-cart__submit .wp-block-button__link,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	border: 0;
	border-radius: 12px;
	background: var(--ef-cart-buy, #3ddc84);
	color: #0a0a0a;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.wc-block-cart__submit-container .wp-element-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
	background: var(--ef-cart-buy-hover, #32c574);
	color: #0a0a0a;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.4 2.2 4.6 13.3a.6.6 0 0 0 .5 1h5.6l-1.3 7.2c-.1.6.6.9 1 .4l8.8-11.1a.6.6 0 0 0-.5-1h-5.6l1.3-7.2c.1-.6-.6-.9-1-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.4 2.2 4.6 13.3a.6.6 0 0 0 .5 1h5.6l-1.3 7.2c-.1.6.6.9 1 .4l8.8-11.1a.6.6 0 0 0-.5-1h-5.6l1.3-7.2c.1-.6-.6-.9-1-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.wc-block-cart .wc-block-components-checkout-return-to-cart-button {
	border-radius: 8px;
}

/* --- Empty cart ------------------------------------------------------------ */

/*
 * WooCommerce's defaults read upside down: the message itself was a 16px
 * line under an 83px crying face, while the "Новинки" heading below it was
 * 40px. The message is now the page's headline, the icon a quiet cart glyph,
 * "Новинки" a secondary heading, and the catalogue link (added in
 * inc/checkout.php) sits right under the message.
 */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	margin-top: var(--wp--preset--spacing--6);
	font-size: var(--wp--preset--font-size--xl-3);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
	width: 64px;
	height: 64px;
	margin-bottom: var(--wp--preset--spacing--5);
	background-color: var(--wp--preset--color--contrast-muted);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.4a2 2 0 0 0 2 1.6h7.5a2 2 0 0 0 2-1.55L20.5 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.4a2 2 0 0 0 2 1.6h7.5a2 2 0 0 0 2-1.55L20.5 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.ecoflow-empty-cart__cta {
	margin: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--10);
	text-align: center;
}

.ecoflow-empty-cart__cta .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 var(--wp--preset--spacing--8);
	border-radius: 8px;
	text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
	font-size: var(--wp--preset--font-size--xl-2);
	letter-spacing: -0.02em;
}

/* "Новинки" cards: the button sits on each card's floor, so a two-line
   product name no longer drops that card's button below its neighbours'. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
	margin-top: auto;
}

/* --- Totals hierarchy ----------------------------------------------------- */

/*
 * The grand total rendered at 19px/500 against 13px/400 lines above it - bigger,
 * but not heavier, so it did not read as the number that matters. It is now the
 * one bold, large figure in the summary.
 */
.wc-block-cart .wc-block-components-totals-footer-item {
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--3);
}

/* The label steps down as the figure steps up, so the pair still fits one
   line in the ~380px summary column. */
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
}

/* Where the column is narrower (the 700-1023px sidebar) and the pair does
   wrap, the figure keeps to the right edge like every other value. */
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	margin-left: auto;
	font-size: clamp(1.625rem, 2.2vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* --- Line items on phones ------------------------------------------------- */

/*
 * WooCommerce's phone layout (max-width: 699px) is `grid-template-columns:
 * 80px 132px` with the product cell spanning 2 / 4 - so the line total lands
 * in an implicit fourth column and every row needs ~388px whatever the screen.
 * On a 375-430px phone the total (and the "Зберегти ..." badge) was pushed
 * past the content edge and clipped by the page's overflow-x: clip.
 *
 * Instead each row becomes a card: photo | details, with the line total on
 * its own line under the quantity controls (right-aligned, as WooCommerce
 * already aligns that cell). The selectors repeat
 * WooCommerce's own (0,3,1) plus `tbody` so they win without !important.
 */
@media (max-width: 699px) {
	.wc-block-cart table.wc-block-cart-items tbody .wc-block-cart-items__row {
		grid-template-columns: 80px minmax(0, 1fr);
	}

	.wc-block-cart table.wc-block-cart-items tbody .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2;
		min-width: 0;
	}

	.wc-block-cart table.wc-block-cart-items tbody .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2;
		grid-row-start: 2;
		padding-top: var(--wp--preset--spacing--3);
	}

	.wc-block-cart table.wc-block-cart-items tbody .wc-block-cart-item__total .wc-block-components-product-price {
		font-weight: 700;
	}

	.wc-block-cart table.wc-block-cart-items tbody .wc-block-cart-item__total .wc-block-components-sale-badge {
		margin: 0;
	}
}

/* 320-359px: the stepper and bin (~176px) need a slightly narrower photo
   column to fit beside it. */
@media (max-width: 359px) {
	.wc-block-cart table.wc-block-cart-items tbody .wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.wc-block-cart table.wc-block-cart-items tbody .wc-block-cart-item__quantity {
		gap: 4px;
	}
}

/* --- Sticky checkout button (phones/tablets) ------------------------------ */

/*
 * Up to 782px WooCommerce renders the checkout button only as a fixed bar
 * (82px: 16px padding + 50px button) - there is no in-flow copy. Two
 * problems with its defaults:
 *
 * - z-index 9999 put it above the header (100) and the mobile menu drawer
 *   (95), so it sat on top of an open menu. 90 matches the product page's
 *   purchase bar: above the page, below site navigation.
 * - nothing reserved room for it, so at the bottom of the page it covered
 *   the last 82px of the footer (copyright and the legal links). The page
 *   now pays that height once, as the product page does for its bar.
 *
 * Same conditions as WooCommerce's own: it hides the bar above 782px and on
 * screens 500px tall or less.
 */
@media (max-width: 782px) and (min-height: 501px) {
	.wc-block-cart .wc-block-cart__submit-container--sticky {
		z-index: 90;
	}

	/*
	 * Keyed to the checkout button's container, not to its sticky modifier:
	 * WooCommerce only makes the button sticky while its in-flow position is
	 * off screen, so tying the padding to the modifier would change the page
	 * height mid-scroll. The container only exists in a filled cart (the
	 * empty-cart markup has none - unlike the filled-cart block wrapper, which
	 * stays in the DOM either way), so the empty cart reserves nothing. When
	 * the bar is not showing, the strip is painted the footer's colour so it
	 * reads as part of the footer rather than a white band under it.
	 */
	.wp-site-blocks:has(.wc-block-cart__submit-container) {
		padding-bottom: 82px;
		background: linear-gradient(var(--wp--preset--color--base-dark), var(--wp--preset--color--base-dark)) bottom / 100% 82px no-repeat;
	}
}

/* --- Touch targets ------------------------------------------------------- */

/*
 * WooCommerce's stepper is 27px tall with 30px buttons and the bin icon a
 * 24px target - fine for a mouse, too small for a thumb. On touch screens
 * and narrow windows both grow to 44px.
 */
@media (max-width: 699px), (pointer: coarse) {
	/* WooCommerce fixes the stepper at 107px; with 44px buttons it needs to
	   grow instead of squeezing the number between them. */
	.wc-block-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
		width: auto;
		min-height: 44px;
	}

	.wc-block-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
		min-width: 44px;
	}

	.wc-block-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
		flex: 0 0 40px;
	}

	.wc-block-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/*
 * Active promo codes under the «Знижка» row (assets/js/promo-cart.js). The
 * campaign code takes the campaign's tint (tokens in promo.css, with these
 * fallbacks for when the campaign is over).
 */
.ec-cart-promo {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.ec-cart-promo__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #b9e2c6;
	border-radius: 12px;
	background: #eef8f1;
	color: #141414;
}

.ec-cart-promo__item.is-campaign {
	border-color: var(--pr-tint-border, #ffd8bc);
	background: var(--pr-tint, #fff5ed);
}

.ec-cart-promo__art {
	flex: none;
	width: 26px;
	height: 26px;
}

.ec-cart-promo__art svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ec-cart-promo__art .pr-halo,
.ec-cart-promo__art .pr-inner {
	display: none;
}

.ec-cart-promo__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 13px;
	line-height: 18px;
	color: #4a4a4a;
}

.ec-cart-promo__meta {
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
}

/* WooCommerce's own chip for the code, upper case like everywhere else. */
.wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__text {
	text-transform: uppercase;
}

.ec-cart-promo__text b {
	font-size: 14px;
	line-height: 20px;
	font-weight: 800;
	color: #1c6b39;
	overflow-wrap: anywhere;
}