/* Etheria Lab — high-fidelity native WooCommerce block pages.
   Loaded after WooCommerce and the theme's base commerce stylesheet.
   Selectors below were verified against WooCommerce 10.9.4's shipped CSS and
   compiled component markup; no remembered or guessed block classes.

   Sizing: the approved mockups are drawn on a ~1180px CSS frame, and that is
   taken literally — every value here is the mockup's own pixel value. Nothing
   is scaled to the viewport, so at 1440px, 1920px or wider the type, controls,
   cards and icons stay exactly the size they are at 1180px; only the amount of
   whitespace around the centred container changes. */

/* =========================================================================
   PAGE SHELL
   ========================================================================= */

body.woocommerce-cart,
.woocommerce-cart #page,
.woocommerce-cart .site-content {
	background: var(--eth-bg);
}

/* Storefront constrains .col-full and adds viewport margins below 66em. The
   cart heading, grid and reassurance strip share the site container — same
   max-width and same inner padding as .eth-nav__inner and .eth-contact__inner,
   so the card edges line up with the logo above and the contact block below. */
.woocommerce-cart #content > .col-full {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--eth-max);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--eth-pad);
	padding-left: var(--eth-pad);
	padding-top: clamp(26px, 4vw, 48px);
	padding-bottom: clamp(44px, 6vw, 72px);
}
.woocommerce-cart #primary,
.woocommerce-cart .site-main,
.woocommerce-cart article.hentry,
.woocommerce-cart .entry-content {
	float: none;
	width: 100%;
	margin: 0;
}
/* .entry-header goes too: once the title inside it is hidden it is an empty
   wrapper, but it keeps Storefront's ~96px padding-bottom. */
.woocommerce-cart .entry-header,
.woocommerce-cart .entry-title,
.woocommerce-cart .page-header,
.woocommerce-cart .woocommerce-breadcrumb,
.woocommerce-cart .storefront-breadcrumb {
	display: none !important;
}

/* The cart block ships with `alignwide`, which Storefront turns into a negative
   margin + max-width:1000%. That pulls the cart grid out of the shared frame
   and leaves it misaligned with the heading and the reassurance strip. */
.woocommerce-cart .entry-content .wp-block-woocommerce-cart,
.woocommerce-cart .wp-block-woocommerce-cart.alignwide {
	width: 100% !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	font-family: var(--eth-serif);
}

/* =========================================================================
   FILLED CART

   Verified hierarchy:
   row > image / product > __wrap > name, prices, metadata, quantity > total.
   ========================================================================= */

/* Two columns, ~55/45 as in the mockup, top-aligned; one column on tablets. */
.woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	align-items: start;
	gap: 30px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* render_block wrappers keep the link with the items and the totals in one card. */
.eth-cart-maincol {
	min-width: 0;
}
.eth-cart-summary {
	position: sticky;
	top: 88px;
	box-sizing: border-box;
	min-width: 0;
	padding: 22px;
	border: 1px solid var(--eth-line);
	border-radius: 14px;
	background: var(--eth-bg-alt);
}

/* WooCommerce leaves the unused main/sidebar shells in the layout; empty, they
   would still draw as grid cells (and used to paint a stray rule above the
   reassurance strip). */
.woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-cart__main:empty,
.woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-cart__sidebar:empty {
	display: none !important;
}

/* Filled cart heading. */
.eth-cart-head {
	width: 100%;
	margin: 0 0 30px;
	text-align: center;
}
.eth-cart-head .eth-kicker {
	font-size: 10px;
	letter-spacing: .24em;
}
.eth-cart-head__title {
	margin: 8px 0 0;
	color: var(--eth-green);
	font-family: var(--eth-serif-display);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 500;
	line-height: 1.08;
}
.eth-cart-head__sub {
	margin: 6px 0 0;
	color: var(--eth-muted);
	font-family: var(--eth-serif);
	font-size: 16px;
	line-height: 1.45;
}

/* --- White product card -------------------------------------------------- */

.woocommerce-cart .eth-cart-maincol .wc-block-cart__main {
	box-sizing: border-box;
	width: 100%;
	padding: 22px;
	border: 1px solid var(--eth-line);
	border-radius: 14px;
	background: #fff;
}
.woocommerce-cart table.wc-block-cart-items,
.woocommerce-cart table.wc-block-cart-items tbody {
	display: block;
	width: 100%;
	border: 0;
	border-spacing: 0;
}
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header {
	display: none;
}
.woocommerce-cart .wc-block-cart__main .wc-block-cart-items {
	border: 0;
}
.woocommerce-cart .wc-block-cart__main .wc-block-cart-items__row {
	position: relative;
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	column-gap: 16px;
	align-items: stretch;
	width: 100%;
	padding: 0;
	border: 0;
}
.woocommerce-cart .wc-block-cart__main .wc-block-cart-items__row + .wc-block-cart-items__row {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--eth-line);
}
.woocommerce-cart .wc-block-cart__main .wc-block-cart-item__image {
	grid-column: 1 !important;
	grid-row: 1 !important;
	width: var(--eth-thumb-w, 88px);
	padding: 0 !important;
}
.woocommerce-cart .wc-block-cart-item__image > a,
.woocommerce-cart .wc-block-cart-item__image .wc-block-components-product-image {
	display: block;
	width: var(--eth-thumb-w, 88px);
	height: var(--eth-thumb-h, 104px);
}
.woocommerce-cart .wc-block-cart-item__image img {
	display: block;
	box-sizing: border-box;
	width: var(--eth-thumb-w, 88px);
	height: var(--eth-thumb-h, 104px);
	margin: 0;
	border: 1px solid var(--eth-line);
	border-radius: 8px;
	background: #f1ece1;
	object-fit: cover;
}
.woocommerce-cart .wc-block-cart__main .wc-block-cart-item__product {
	grid-column: 2 !important;
	grid-row: 1 !important;
	min-width: 0;
	padding: 0 !important;
}

/*
 * Design order in the product column: name → badge → answers → price+quantity.
 *
 * WooCommerce's DOM order is name, price, quantity, answers, so the design's
 * order is produced entirely with `order` and grid placement. This is
 * deliberate: the row lives inside woocommerce/cart-line-items-block, which
 * React owns and re-renders on every cart change, so the theme must not move
 * or re-parent a single node in here.
 *
 * The two columns put the unit price and the quantity stepper side by side on
 * one line (they stack again on phones, further down).
 */
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	column-gap: 14px;
	row-gap: 0;
	min-width: 0;
	height: 100%;
}
.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-name {
	order: 1;
	grid-column: 1 / -1;
}
.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-metadata {
	order: 3;
	grid-column: 1 / -1;
}
/* Both selectors match WooCommerce's own depth for these two children, which
   otherwise pin them to column 1 / row 2 of the cart-row grid. */
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__prices {
	order: 4;
	grid-column: 1;
	grid-row: auto;
	align-self: center;
	margin-top: 16px;
}
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
	order: 5;
	grid-column: 2;
	grid-row: auto;
	align-self: center;
	justify-self: start;
	margin-top: 16px;
	padding: 0;
}

/* Product name. The selector matches WooCommerce's own
   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name`
   depth so the design type scale wins without !important. */
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-components-product-name {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0 34px 0 0;
	color: var(--eth-green);
	font-family: var(--eth-serif-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.15;
	text-decoration: none;
}
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-components-product-name:hover {
	color: var(--eth-gold);
}
/*
 * The "SUR-MESURE" badge, as a pseudo-element rather than an injected node.
 *
 * A pseudo-element is invisible to React, so the theme adds nothing to a DOM
 * subtree WooCommerce re-renders. The label itself still comes from PHP —
 * inc/commerce-fidelity.php sets --eth-badge-label from a translated string —
 * so no French text is hardcoded in CSS. :has() limits it to lines that carry a
 * personalization profile, so a future non-bespoke product is not mislabelled.
 * Without the variable the fallback is `none`, which draws nothing at all.
 */
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__wrap:has(.wc-block-components-product-details) > .wc-block-components-product-name::after {
	content: var(--eth-badge-label, none);
	display: block;
	margin-top: 3px;
	color: var(--eth-gold);
	font-family: var(--eth-mono);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: .14em;
	line-height: 1.35;
	text-transform: uppercase;
}

/* --- Personalization answers: muted label left, answer right ------------- */

.woocommerce-cart .wc-block-cart-item__wrap > .wc-block-components-product-metadata {
	margin: 11px 0 0;
	gap: 0;
	color: var(--eth-ink);
	font-family: var(--eth-serif);
	font-size: 13px;
	line-height: 1.35;
}
.woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-metadata__description,
.woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-metadata > p:first-of-type {
	display: none;
}
/* The doubled class matches WooCommerce's own
   `.wc-block-components-product-details.wc-block-components-product-details`
   rule, which otherwise pins the answers at 12.25px. */
.woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-details.wc-block-components-product-details {
	display: grid !important;
	gap: 5px;
	margin: 0 !important;
	padding: 0;
	font-size: inherit;
	line-height: 1.35;
	list-style: none;
}
/*
 * WooCommerce 10.9.4 renders each answer as one direct child <span> holding a
 * __name, a __value and an aria-hidden separator. Two controlled columns —
 * label at its natural width, answer taking the rest and wrapping on word
 * boundaries.
 */
.woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-details > span {
	display: grid !important;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 12px;
	margin: 0 !important;
}
.woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-details > span > [aria-hidden="true"] {
	display: none !important;
}
.woocommerce-cart .wc-block-components-product-details__name {
	max-width: none !important;
	margin: 0 !important;
	color: #8a9081 !important;
	font-family: var(--eth-serif);
	font-weight: 400 !important;
}
.woocommerce-cart .wc-block-components-product-details__value {
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	color: var(--eth-ink) !important;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* --- Unit price + quantity ---------------------------------------------- */

/* Placement is handled by the grid above; these are the two children's own
   styles. Neither is ever moved in the DOM. */
.woocommerce-cart .wc-block-cart-item__prices {
	gap: 8px;
	color: var(--eth-gold);
	font-family: var(--eth-sans);
	line-height: 1.2;
	white-space: nowrap;
}
.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__regular {
	color: #9a9584;
	font-size: 14px;
}
.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value {
	color: var(--eth-gold);
	font-family: var(--eth-sans);
	font-size: 16px;
	font-weight: 600;
}
.woocommerce-cart .wc-block-components-quantity-selector {
	box-sizing: border-box;
	width: var(--eth-qty-w, 94px);
	height: 36px;
	margin: 0 !important;
	overflow: hidden;
	border: 1px solid var(--eth-line) !important;
	border-radius: 8px !important;
	background: var(--eth-bg-alt);
}
.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 34px;
	color: var(--eth-green-soft) !important;
	font-family: var(--eth-sans);
	font-size: 17px;
	opacity: 1;
}
.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: var(--eth-green) !important;
	background: rgba(31, 61, 40, .05);
}
.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	opacity: .45;
}
.woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-width: 26px;
	padding: 0;
	color: var(--eth-ink);
	font-family: var(--eth-sans);
	font-size: 14px;
}

/* --- Remove control: the circled x at the row's top-right ---------------- */

.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__remove-link {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--eth-line);
	border-radius: 50%;
	background: var(--eth-bg-alt);
	color: var(--eth-muted) !important;
	font-size: 0;
	line-height: 1;
	text-decoration: none !important;
}
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__remove-link svg {
	display: none;
}
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__remove-link::before {
	content: "\00d7";
	color: var(--eth-muted);
	font-family: var(--eth-sans);
	font-size: 15px;
}
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__remove-link:hover {
	border-color: var(--eth-gold);
}
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__remove-link:hover::before {
	color: var(--eth-green);
}
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__remove-link:focus-visible {
	outline: 2px solid var(--eth-gold);
	outline-offset: 2px;
}

/* --- Line total: third real table cell, bottom-right -------------------- */

.woocommerce-cart .wc-block-cart__main .wc-block-cart-item__total {
	position: static;
	grid-column: 3 !important;
	grid-row: 1 !important;
	align-items: flex-end;
	align-self: stretch;
	justify-content: flex-end;
	padding: 0 !important;
}
.woocommerce-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	align-items: flex-end;
	align-self: flex-end;
}
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price,
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
	color: var(--eth-green);
	font-family: var(--eth-sans);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__regular,
.woocommerce-cart .wc-block-components-sale-badge {
	display: none;
}

/* --- Link under the white card ------------------------------------------ */

.eth-continue {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 18px;
	color: var(--eth-green);
	font-family: var(--eth-sans);
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
}
.eth-continue > [aria-hidden="true"] {
	font-size: 15px;
}
.eth-continue:hover {
	color: var(--eth-gold);
}

/* =========================================================================
   SUMMARY CARD
   ========================================================================= */

.woocommerce-cart .eth-cart-summary .wc-block-cart__sidebar {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.eth-recap-kicker {
	margin: 0 0 16px;
	font-size: 10px;
	letter-spacing: .2em;
}
.woocommerce-cart .eth-cart-summary .wp-block-woocommerce-cart-order-summary-block {
	margin: 0;
	border: 0;
	font-family: var(--eth-sans);
	font-size: 14px;
	line-height: 1.4;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-wrapper {
	padding: 0;
	border: 0;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	min-height: 0;
	padding: 0;
	gap: 12px;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-item__label {
	color: var(--eth-muted);
	font-family: var(--eth-sans);
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-item__value {
	color: var(--eth-ink);
	font-family: var(--eth-sans);
	text-align: right;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-shipping strong,
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-item__value strong {
	color: var(--eth-green);
	font-weight: 600;
	text-transform: none;
}
/* Subtotal / shipping rhythm from the mockup. */
.woocommerce-cart .eth-cart-summary .wp-block-woocommerce-cart-order-summary-totals-block {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-top: 16px;
	padding: 0;
	border: 0;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-item__description:empty {
	display: none;
}
/* The one hairline above the total (class added by cart-refinement.js; the
   :has() rule covers the same wrapper when scripts have not run yet). */
.woocommerce-cart .eth-cart-summary .eth-cart-total,
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--eth-line);
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-footer-item {
	align-items: baseline;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--eth-green);
	font-family: var(--eth-serif-display);
	font-size: 20px;
	font-weight: 600;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--eth-green);
	font-family: var(--eth-serif-display);
	font-size: 24px;
	font-weight: 600;
}

/* --- Gift/coupon panel: native disclosure, design label and tag icon ----- */

.woocommerce-cart .eth-cart-summary .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	padding: 0 0 16px;
	border-bottom: 1px solid var(--eth-line);
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon {
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon .wc-block-components-panel__button {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--eth-green);
	font-family: var(--eth-sans);
	font-size: 13px;
	font-weight: 500;
	text-align: left;
}
/* The mockup's collapsed row is icon + label only — no disclosure chevron. */
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon .wc-block-components-panel__button > svg {
	display: none !important;
}
/* The gift-tag mark, as a pseudo-element — same approach as the checkout, and
   nothing for React to trip over inside the totals panel. */
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon .wc-block-components-panel__button::before {
	content: "";
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 12.5V8.6a1.6 1.6 0 0 0-.9-1.4l-6.4-3.1a1.6 1.6 0 0 0-1.4 0L4.9 7.2A1.6 1.6 0 0 0 4 8.6v6.8a1.6 1.6 0 0 0 .9 1.4l6.4 3.1a1.6 1.6 0 0 0 1.4 0l3-1.5' stroke='%23b08d4f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='10' r='1.3' fill='%23b08d4f'/%3E%3C/svg%3E");
}
/* Open state: input + "Appliquer", exactly as in CouponField. */
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon__content {
	margin-top: 12px;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon__form {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 0;
}
/* The field keeps WooCommerce's own metrics (its label floats inside the input,
   so a forced height would clip it) — only the skin is ours. */
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon__form input {
	border-radius: 8px !important;
	font-size: 16px !important; /* >=16px avoids iOS zoom-on-focus */
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon__form input:focus {
	outline-color: var(--eth-gold);
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	min-height: 0;
	margin: 0 !important;
	padding: 0 18px !important;
	border: 1px solid var(--eth-green) !important;
	border-radius: 8px !important;
	background: none !important;
	color: var(--eth-green) !important;
	font-family: var(--eth-sans) !important;
	font-size: 13px;
	font-weight: 600 !important;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon__button:hover:not(:disabled) {
	background: var(--eth-green) !important;
	color: var(--eth-bg) !important;
}
.woocommerce-cart .eth-cart-summary .wc-block-components-totals-coupon__button:disabled {
	border-color: var(--eth-line) !important;
	color: #9a9584 !important;
}

/* --- Green conversion button and COD reassurance ------------------------- */

.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block {
	margin-top: 18px;
}
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit,
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-container {
	margin: 0;
	padding: 0;
}
.woocommerce-cart .wc-block-cart__submit-button {
	width: 100%;
	min-height: 52px;
	border-radius: 9px !important;
	background: var(--eth-green) !important;
	color: var(--eth-bg) !important;
	font-family: var(--eth-sans) !important;
	font-size: 15px;
	font-weight: 600 !important;
	letter-spacing: .02em;
	text-decoration: none !important;
}
.woocommerce-cart .wc-block-cart__submit-button:hover {
	background: #16301f !important;
	color: var(--eth-bg) !important;
}
.woocommerce-cart .wc-block-cart__submit-button span {
	text-decoration: none !important;
}
.eth-cod-note {
	margin: 12px 0 0;
	color: #8a9081;
	font-family: var(--eth-serif);
	font-size: 12.5px;
	line-height: 1.4;
	text-align: center;
}

/* =========================================================================
   EMPTY CART (content from inc/shop-tweaks.php)
   ========================================================================= */

.eth-empty {
	box-sizing: border-box;
	max-width: 520px;
	margin: 0 auto;
	padding: 30px 0 40px;
	text-align: center;
}
.eth-empty__mark {
	display: block;
	width: 78px;
	height: auto;
	margin: 0 auto 20px;
}
.eth-empty__kicker {
	margin: 0;
	font-size: 10px;
	letter-spacing: .24em;
}
.eth-empty__title {
	margin: 8px 0 0;
	color: var(--eth-green);
	font-family: var(--eth-serif-display);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 500;
	line-height: 1.08;
}
.eth-empty__lede {
	max-width: 400px;
	margin: 10px auto 26px;
	color: var(--eth-muted);
	font-family: var(--eth-serif);
	font-size: 16.5px;
	line-height: 1.6;
}
.eth-empty__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.eth-empty__cta .eth-btn {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 9px;
	font-size: 15px;
	text-decoration: none;
}
.eth-empty__cta .eth-btn--ghost {
	border-color: #cbb98f;
}

/* When the last line is removed the block cart swaps to its empty state in
   place — the filled-cart heading and reassurance strip, printed server-side,
   have to go with it. */
.woocommerce-cart:not(.eth-cart-has-items) .eth-cart-head,
.woocommerce-cart:not(.eth-cart-has-items) .eth-reassure {
	display: none;
}

/* =========================================================================
   REASSURANCE STRIP — same frame as the cart grid, no separator above it.
   ========================================================================= */

.eth-reassure {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	margin: 34px 0 0;
	border: 0;
}
.eth-reassure__item {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 16px;
	border: 1px solid var(--eth-line);
	border-radius: 12px;
	background: var(--eth-bg-alt);
	color: var(--eth-green-soft);
	font-family: var(--eth-serif);
	font-size: 14px;
	line-height: 1.4;
}
.eth-reassure__item svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Tablet and below: one column. The threshold sits above 1024px on purpose —
   at that width a 55/45 split leaves the answer column too narrow to keep the
   label/value pair readable. */
@media (max-width: 1080px) {
	.woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart {
		grid-template-columns: minmax(0, 1fr);
	}
	.eth-cart-summary {
		position: static;
	}
}

@media (max-width: 700px) {
	.eth-reassure {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	/*
	 * The line total moves to the card's bottom-right so the product copy gets
	 * the whole remaining width instead of leaving the answers in a
	 * one-character-wide third column.
	 */
	.woocommerce-cart .wc-block-cart__main .wc-block-cart-items__row {
		grid-template-columns: auto minmax(0, 1fr) !important;
	}
	.woocommerce-cart .wc-block-cart__main .wc-block-cart-item__total {
		position: absolute !important;
		right: 0 !important;
		bottom: 0 !important;
		display: flex !important;
		width: auto !important;
		height: auto !important;
	}
	/* The mockup puts the unit price on its own line, then the stepper on the
	   left of the next one with the line total facing it. Giving each the full
	   width drops them onto their own grid rows. */
	.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__prices,
	.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
		grid-column: 1 / -1;
	}
	.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
		margin-top: 14px;
	}
}

/* Narrow phones: trim the thumbnail and the stepper so the quantity and the
   line total always fit on one line. */
@media (max-width: 420px) {
	.woocommerce-cart .wc-block-cart-items__row {
		--eth-thumb-w: 76px;
		--eth-thumb-h: 90px;
		--eth-qty-w: 88px;
		column-gap: 12px;
	}
}