/**
 * COMMERCE — the cart page, the checkout page, and the incentive/cross-sell blocks that the
 * product-page drawer shares with both.
 *
 * ⚠️ ONE COPY OF THE INCENTIVE AND CROSS-SELL RULES. They render in three places (the drawer, the
 *   cart, the checkout) and two copies is how three surfaces slowly stop matching. This file is
 *   therefore enqueued on single product pages too - see afw-native-cart.php.
 *
 * ⚠️ MOST OF WHAT IS STYLED HERE IS WOOCOMMERCE'S MARKUP, NOT OURS: `.cart_totals`,
 *   `#customer_details`, `#order_review`, `.woocommerce-checkout-review-order-table`,
 *   `.quantity`, `.woocommerce-info`. Those class names are the contract - the checkout form is
 *   never rebuilt, only laid out - so the selectors below are written against WooCommerce's names
 *   and must survive its markup, not replace it.
 */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   1. PAGE SHELL
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.afw-cartmain,
.afw-cartwrap {
	width: min(1220px, 100% - 40px);
	margin: 0 auto;
}
@media (max-width: 600px) {
	.afw-cartwrap { width: calc(100% - 32px); }
}

.afw-crumbs {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 26px 0 0;
	font: 400 12.5px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.02em;
	color: var(--afw-meta, #6e6b7b);
}
.afw-crumbs a { color: inherit; text-decoration: none; }
.afw-crumbs a:hover { color: var(--afw-ink, #1c1a22); text-decoration: underline; }
.afw-crumbs [aria-current] { color: var(--afw-ink, #1c1a22); }
.afw-crumbs span[aria-hidden] {
	width: 5px;
	height: 5px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
}

.afw-cart-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 18px 0 26px;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
	margin-bottom: 30px;
}
.afw-cart-title {
	margin: 0;
	font: 400 clamp(30px, 4vw, 42px)/1.05 var(--afw-serif, Georgia, serif);
	letter-spacing: -0.015em;
	color: var(--afw-ink, #1c1a22);
	text-wrap: balance;
}
.afw-cart-back {
	font: 500 13.5px/1 var(--afw-sans, sans-serif);
	color: var(--afw-mauve-strong, #5f4a8a);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color 0.16s linear;
}
.afw-cart-back:hover { border-bottom-color: currentColor; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   2. THE CART: items on the left, the summary on the right
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.afw-cartpage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 34px;
	align-items: start;
}
@media (max-width: 1000px) {
	.afw-cartpage { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
.afw-cartpage-main { min-width: 0; }

.afw-cartlist {
	background: var(--afw-card, #fff);
	border: 1px solid var(--afw-hair, #eeeaf3);
	border-radius: 18px;
	overflow: hidden;
}
.afw-cartlist-head,
.afw-cartrow {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) 128px 104px 34px;
	gap: 18px;
	align-items: center;
}
.afw-cartlist-head {
	grid-template-columns: 84px minmax(0, 1fr) 128px 104px 34px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
	background: var(--afw-band, #f5f2f8);
	font: 500 11px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
}
.afw-ch-item { grid-column: 1 / 3; }
.afw-ch-qty { grid-column: 3; }
.afw-ch-sub { grid-column: 4; text-align: right; }

.afw-cartrow {
	position: relative;
	padding: 20px;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
}
.afw-cartrow:last-of-type { border-bottom: 0; }

.afw-cartrow-media img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 13px;
	background: var(--afw-band, #f5f2f8);
	display: block;
}
.afw-cartrow-body { min-width: 0; }
.afw-cartrow-name,
.afw-cartrow-body > a {
	display: block;
	font: 500 15px/1.35 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	text-decoration: none;
	text-wrap: pretty;
}
.afw-cartrow-name:hover { text-decoration: underline; }
.afw-cartrow-unit {
	display: block;
	margin-top: 5px;
	font: 400 13px/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
	font-variant-numeric: tabular-nums;
}
.afw-cartrow-each { opacity: 0.8; }
.afw-cartrow-body .variation,
.afw-cartrow-body dl.variation {
	margin: 5px 0 0;
	font: 400 12.5px/1.5 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
}
.afw-cartrow-body .variation dt,
.afw-cartrow-body .variation dd { display: inline; margin: 0; }
.afw-cartrow-body .variation dd { margin-right: 8px; }
.afw-cartrow-body .variation p { display: inline; margin: 0; }
.afw-cartrow-body .backorder_notification {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--afw-clay, #7a3b33);
}

.afw-cartrow-sub {
	text-align: right;
	font: 600 16px/1.2 var(--afw-serif, Georgia, serif);
	color: var(--afw-ink, #1c1a22);
	font-variant-numeric: tabular-nums;
}
.afw-cartrow-remove { text-align: right; }
.afw-cartrow-remove .remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 19px;
	line-height: 1;
	text-decoration: none;
	color: var(--afw-meta, #6e6b7b);
	background: transparent;
	transition: background 0.16s linear, color 0.16s linear;
}
.afw-cartrow-remove .remove:hover {
	background: var(--afw-clay-soft, #f7eae7);
	color: var(--afw-clay, #7a3b33);
}

/* the quantity stepper — WooCommerce's own .quantity wrapper */
.afw-cartrow-qty .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 11px;
	overflow: hidden;
	background: #fff;
}
.afw-cartrow-qty .quantity input[type="number"],
.afw-cartrow-qty .quantity .qty {
	width: 52px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font: 500 14px/1 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}
.afw-cartrow-qty .quantity input::-webkit-outer-spin-button,
.afw-cartrow-qty .quantity input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.afw-cartrow-qty .quantity input:focus { outline: none; box-shadow: none; }
.afw-cartrow-qty .quantity .ecomus-qty-button,
.afw-cartrow-qty .quantity button {
	width: 36px;
	height: 42px;
	border: 0;
	background: transparent;
	color: var(--afw-ink-2, #4c4a57);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	transition: background 0.14s linear;
}
.afw-cartrow-qty .quantity .ecomus-qty-button:hover,
.afw-cartrow-qty .quantity button:hover { background: var(--afw-band, #f5f2f8); }

/* the actions row: coupon on the left, update on the right */
.afw-cartactions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 18px 20px;
	border-top: 1px solid var(--afw-hair, #eeeaf3);
	background: var(--afw-paper, #fbfafc);
}
.afw-coupon {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 280px;
	min-width: 0;
}
.afw-coupon .input-text {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 11px;
	background: #fff;
	font: 400 14px/1 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
}
.afw-coupon .input-text:focus {
	outline: none;
	border-color: var(--afw-control, #8c7ba6);
	box-shadow: 0 0 0 3px rgba(140, 123, 166, 0.16);
}
.afw-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 11px;
	background: #fff;
	font: 600 13.5px/1 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.16s linear, background 0.16s linear, opacity 0.16s linear;
}
.afw-btn-ghost:hover {
	border-color: var(--afw-mauve-soft, #a78bc9);
	background: var(--afw-band, #f5f2f8);
}
.afw-btn-ghost:disabled,
.afw-btn-ghost[disabled] { opacity: 0.45; cursor: default; }
.afw-btn-ghost:focus-visible {
	outline: 2px solid var(--afw-control, #8c7ba6);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   3. THE SUMMARY PANEL — WooCommerce's .cart_totals, restyled in place
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.afw-cartpage-side { position: sticky; top: 24px; }
@media (max-width: 1000px) {
	.afw-cartpage-side { position: static; }
}
.afw-sum {
	background: var(--afw-card, #fff);
	border: 1px solid var(--afw-hair, #eeeaf3);
	border-radius: 18px;
	overflow: hidden;
}
.afw-sum-h {
	margin: 0;
	padding: 20px 22px 16px;
	font: 500 16px/1.2 var(--afw-sans, sans-serif);
	letter-spacing: -0.005em;
	color: var(--afw-ink, #1c1a22);
}
.afw-sum .afw-inc { padding: 0 22px 16px; border-bottom: 1px solid var(--afw-hair, #eeeaf3); background: none; }
.afw-sum-totals { padding: 4px 22px 0; }
.afw-sum-totals .cart_totals > h2 { display: none; }        /* our own heading is above */
.afw-sum-totals table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}
.afw-sum-totals table.shop_table th,
.afw-sum-totals table.shop_table td {
	padding: 13px 0;
	border: 0;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
	font: 400 14px/1.45 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
	vertical-align: top;
	background: none;
}
.afw-sum-totals table.shop_table th {
	font-weight: 400;
	text-align: left;
	white-space: nowrap;
}
.afw-sum-totals table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.afw-sum-totals tr:last-child th,
.afw-sum-totals tr:last-child td { border-bottom: 0; }
.afw-sum-totals .order-total th,
.afw-sum-totals .order-total td { padding-top: 16px; padding-bottom: 18px; }
.afw-sum-totals .order-total th { font-weight: 500; color: var(--afw-ink, #1c1a22); font-size: 15px; }
.afw-sum-totals .order-total td .amount,
.afw-sum-totals .order-total .woocommerce-Price-amount {
	font: 600 24px/1.1 var(--afw-serif, Georgia, serif);
	color: var(--afw-ink, #1c1a22);
}
/* a negative fee — our bundle saving — reads as a saving, not as a charge */
.afw-sum-totals .fee th { color: var(--afw-sage-ink, #2f5439); }
.afw-sum-totals .fee td { color: var(--afw-sage, #3f6b4a); font-weight: 600; }

/* one rule means one option: the radio would be a choice with nothing to choose */
.afw-sum-totals .woocommerce-shipping-destination { font-size: 12.5px; color: var(--afw-meta, #6e6b7b); }
.afw-sum-totals .shipping-calculator-button {
	font-size: 12.5px;
	color: var(--afw-mauve-strong, #5f4a8a);
}

/* proceed to checkout */
.afw-sum-totals .wc-proceed-to-checkout { padding: 18px 0 20px; }
.afw-sum-totals .checkout-button,
.afw-sum-totals a.checkout-button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--afw-mauve, #7a62a8), var(--afw-mauve-strong, #5f4a8a));
	font: 600 15px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.01em;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	box-shadow: 0 14px 28px -16px rgba(95, 74, 138, 0.95);
	transition: transform 0.16s var(--afw-ease, ease), box-shadow 0.16s linear;
}
.afw-sum-totals .checkout-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 34px -16px rgba(95, 74, 138, 1);
}
.afw-sum-totals .checkout-button:focus-visible {
	outline: 2px solid var(--afw-control, #8c7ba6);
	outline-offset: 3px;
}

.afw-sum-note {
	margin: 0;
	padding: 0 22px 14px;
	font: 400 12.5px/1.5 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
}
.afw-sum-trust {
	list-style: none;
	margin: 0;
	padding: 14px 22px 20px;
	border-top: 1px solid var(--afw-hair, #eeeaf3);
	display: flex;
	flex-direction: column;
	gap: 7px;
	font: 400 12.5px/1.45 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
}
.afw-sum-trust li { padding-left: 16px; position: relative; }
.afw-sum-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--afw-mauve-soft, #a78bc9);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   4. THE INCENTIVE PANEL — shared by the drawer, the cart and the checkout
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.afw-inc:empty { display: none; }
.afw-cart .afw-inc {
	padding: 14px 20px 15px;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
	background: linear-gradient(180deg, var(--afw-wash, #f1ebf8) 0%, rgba(241, 235, 248, 0) 100%);
}
.afw-inc-line {
	margin: 0 0 9px;
	font: 400 13.5px/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
}
.afw-inc-line strong { font-weight: 600; color: var(--afw-ink, #1c1a22); white-space: nowrap; }
.afw-inc-line .amount { font-variant-numeric: tabular-nums; }
.afw-inc-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	margin-right: 6px;
	vertical-align: -3px;
	border-radius: 50%;
	background: var(--afw-sage-soft, #e8f0e9);
	color: var(--afw-sage, #3f6b4a);
}
.afw-inc-bar {
	position: relative;
	height: 5px;
	border-radius: 999px;
	background: rgba(120, 80, 192, 0.13);
	overflow: hidden;
}
.afw-inc-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--afw-mauve-soft, #a78bc9), var(--afw-mauve-brand, #7850c0));
	transition: width 0.5s var(--afw-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.afw-inc-ship.is-done .afw-inc-fill {
	background: linear-gradient(90deg, #7fae8c, var(--afw-sage, #3f6b4a));
}
.afw-inc-tier {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 11px;
	font: 400 12.5px/1.4 var(--afw-sans, sans-serif);
	color: var(--afw-meta, #6e6b7b);
}
.afw-inc-tier:empty { display: none; }
.afw-inc-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--afw-sage-soft, #e8f0e9);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.01em;
	color: var(--afw-sage-ink, #2f5439);
}
@media (prefers-reduced-motion: reduce) {
	.afw-inc-fill { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   5. THE CROSS-SELL STRIP — derived from the basket, never from the old cross-sell boxes
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   ⚠️ `.afw-xsell` IS A FRAGMENT SELECTOR: WooCommerce replaces the whole element after every cart
     change, so nothing may be attached to it from JavaScript - it would be wiped on the next add. */
.afw-xsell.is-empty { display: none; }
.afw-cart .afw-xsell {
	padding: 18px 0 6px;
	border-top: 1px solid var(--afw-hair, #eeeaf3);
	margin-top: 4px;
}
.afw-cartpage-main .afw-xsell {
	margin-top: 26px;
	padding: 22px;
	border: 1px solid var(--afw-hair, #eeeaf3);
	border-radius: 18px;
	background: var(--afw-card, #fff);
}
.afw-xsell-h {
	margin: 0 0 14px;
	font: 500 12px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
}
.afw-xsell-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.afw-cartpage-main .afw-xsell-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}
.afw-xsell-item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 8px;
	border: 1px solid var(--afw-hair, #eeeaf3);
	border-radius: 14px;
	background: var(--afw-card, #fff);
	transition: border-color 0.16s linear, box-shadow 0.16s linear;
}
.afw-xsell-item:hover {
	border-color: var(--afw-mauve-soft, #a78bc9);
	box-shadow: 0 10px 24px -18px rgba(28, 26, 34, 0.5);
}
.afw-xsell-img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--afw-band, #f5f2f8);
}
.afw-xsell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.afw-xsell-body { min-width: 0; }
.afw-xsell-name {
	font: 500 13px/1.35 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	text-decoration: none;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.afw-xsell-name:hover { text-decoration: underline; }
.afw-xsell-price {
	display: block;
	margin-top: 2px;
	font: 600 12.5px/1.3 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
	font-variant-numeric: tabular-nums;
}
.afw-xsell-price del { opacity: 0.5; font-weight: 400; margin-right: 4px; }
.afw-xsell-price ins { text-decoration: none; }
.afw-xsell-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 10px;
	background: #fff;
	font: 600 12.5px/1 var(--afw-sans, sans-serif);
	color: var(--afw-mauve-strong, #5f4a8a);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.16s linear, border-color 0.16s linear, color 0.16s linear;
}
.afw-xsell-add:hover {
	background: var(--afw-mauve-strong, #5f4a8a);
	border-color: var(--afw-mauve-strong, #5f4a8a);
	color: #fff;
}
.afw-xsell-add.loading { opacity: 0.6; pointer-events: none; }
.afw-xsell-add.added { display: none; }
.afw-xsell .added_to_cart { display: none; }
.afw-xsell-add:focus-visible { outline: 2px solid var(--afw-control, #8c7ba6); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   7. NARROW SCREENS — the cart row becomes a card, with no duplicated markup
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
	.afw-cartlist-head { display: none; }
	.afw-cartrow {
		grid-template-columns: 76px minmax(0, 1fr) 30px;
		grid-template-areas:
			"media body remove"
			"media qty  sub";
		gap: 10px 14px;
		padding: 16px;
	}
	.afw-cartrow-media { grid-area: media; align-self: start; }
	.afw-cartrow-media img { width: 76px; height: 76px; }
	.afw-cartrow-body { grid-area: body; }
	.afw-cartrow-qty { grid-area: qty; }
	.afw-cartrow-sub { grid-area: sub; text-align: right; align-self: center; }
	.afw-cartrow-remove { grid-area: remove; align-self: start; }
	.afw-cartrow-qty .quantity input[type="number"],
	.afw-cartrow-qty .quantity .qty { width: 42px; height: 38px; }
	.afw-cartrow-qty .quantity .ecomus-qty-button,
	.afw-cartrow-qty .quantity button { width: 32px; height: 38px; }
	.afw-cartactions { padding: 16px; }
	.afw-coupon { flex: 1 1 100%; }
	.afw-update { width: 100%; }
	.afw-cart-hero { padding: 14px 0 20px; margin-bottom: 22px; }
	.afw-cartpage-main .afw-xsell { padding: 18px; }
	.afw-sum-h { padding: 18px 18px 14px; }
	.afw-sum .afw-inc { padding: 0 18px 14px; }
	.afw-sum-totals { padding: 4px 18px 0; }
	.afw-sum-note { padding: 0 18px 12px; }
	.afw-sum-trust { padding: 12px 18px 18px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════

   🔴 THE ROW COLLAPSED TO ONE LETTER PER LINE AND THE CAUSE WAS NOT IN OUR CSS.
     Measured in the browser: `.afw-cartpage-main` was 814px, and `.woocommerce-cart-form` inside


   ⚠️ SO BOTH WRAPPERS ARE EXPLICITLY RELEASED. `width`, `max-width` and `float` all have to go -
     releasing only the width leaves the float, and only the float leaves the width. */
.afw-cartpage .woocommerce-cart-form,
.afw-cartpage .afw-cartlist,
.afw-cartpage .cart-collaterals,
.afw-cartpage .cart-collaterals .cart_totals,
.afw-cartpage .afw-sum-totals {
	width: 100%;
	max-width: none;
	float: none;
	margin-left: 0;
	margin-right: 0;
}
.afw-cartpage .cart-collaterals::before,
.afw-cartpage .cart-collaterals::after { content: none; }
.afw-cartpage .afw-cartlist { min-width: 0; }

/* the theme adds its own order-notes box to the CART page through a WooCommerce hook. It is

/* WooCommerce's own "shipping will be updated during checkout" line is long; let it wrap inside
   the narrow summary column instead of forcing the table wider than its track */
.afw-sum-totals table.shop_table th,
.afw-sum-totals table.shop_table td { white-space: normal; word-break: normal; }
.afw-sum-totals .shipping td { text-align: right; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════

   🔴 ecomus/woocommerce.css, inside @media (min-width: 1025px):
        .woocommerce-cart .woocommerce-cart-form { width: calc(100% - 490px); float: left }
        .woocommerce-cart .cart-collaterals      { width: 490px;              float: left }


   ⚠️ `position` HAS TO BE RESET TOO. The theme also makes both boxes `sticky`; our layout does its
     own sticking on `.afw-cartpage-side`, and two sticky ancestors fight. */
body.afw-cart .afw-cartpage .woocommerce-cart-form,
body.afw-cart .afw-cartpage .afw-cartlist,
body.afw-cart .afw-cartpage .cart-collaterals,
body.afw-cart .afw-cartpage .afw-sum-totals,
body.afw-cart .afw-cartpage .cart-collaterals .cart_totals {
	width: 100%;
	max-width: none;
	min-width: 0;
	float: none;
	position: static;
	margin-left: 0;
	margin-right: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════

/* (a) a box inside a box, with two headings saying the same thing.
   The real nesting is  .cart-collaterals > .cart_totals > .cart_totals_summary > h2 + table,
   so the earlier `.cart_totals > h2` never matched - the h2 is a grandchild. */
body.afw-cart .afw-sum-totals .cart_totals_summary {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
body.afw-cart .afw-sum-totals .cart_totals_summary > h2,
body.afw-cart .afw-sum-totals .cart_totals > h2 { display: none; }

/* (b) the shipping row. WooCommerce puts the whole thing in one colspan cell, so the label and the
   value are laid out inside that cell rather than as table columns. */
body.afw-cart .afw-sum-totals .woocommerce-shipping-totals th { display: none; }
body.afw-cart .afw-sum-totals .woocommerce-shipping-totals td {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	text-align: left;
}
body.afw-cart .afw-sum-totals .shipping-title {
	margin: 0;
	font: 400 14px/1.45 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
	text-align: left;
}

/* ⚠️ THE SHIPPING CALCULATOR IS HIDDEN, AND ONLY BECAUSE THERE IS NOW ONE RULE WORLDWIDE.
     "Shipping options will be updated during checkout" and "Calculate shipping" both invite the
     shopper to discover a rate that cannot vary: $99+ is free everywhere, below it is $9.95
     everywhere. Offering a calculator for a single fixed answer reads as a hidden cost.
     ⚠️ If a zone with a different rate is ever added, UNHIDE THESE - they stop being noise and
       start being necessary the moment the price can differ by destination. */
body.afw-cart .afw-sum-totals .woocommerce-shipping-destination,
body.afw-cart .afw-sum-totals .shipping-calculator-button,
body.afw-cart .afw-sum-totals .shipping-calculator-form { display: none; }

/* (c) the quantity stepper kept the theme's grey fill */
body.afw-cart .afw-cartrow-qty .quantity,
body.afw-cart .afw-cartrow-qty .quantity input[type="number"],
body.afw-cart .afw-cartrow-qty .quantity .qty {
	background: #fff;
	background-color: #fff;
}

/* (d) the order-notes field the theme adds to the cart form is `.form-row.notes`, not
   `.woocommerce-additional-fields` - so it needed its own selector, not a guess. */
body.afw-cart .woocommerce-cart-form #order_comments_field,
body.afw-cart .afw-cartpage-main .form-row.notes {
	display: block;
	margin: 22px 0 0;
	padding: 22px;
	border: 1px solid var(--afw-hair, #eeeaf3);
	border-radius: 18px;
	background: var(--afw-card, #fff);
}
body.afw-cart .woocommerce-cart-form #order_comments_field label {
	display: block;
	margin: 0 0 10px;
	font: 500 15px/1.2 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
}
body.afw-cart .woocommerce-cart-form #order_comments_field textarea {
	width: 100%;
	min-height: 92px;
	padding: 12px 14px;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 12px;
	background: #fff;
	font: 400 14px/1.5 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	resize: vertical;
}
body.afw-cart .woocommerce-cart-form #order_comments_field textarea:focus {
	outline: none;
	border-color: var(--afw-control, #8c7ba6);
	box-shadow: 0 0 0 3px rgba(140, 123, 166, 0.16);
}

/* (e) THE CART'S EXPRESS BUTTON.
   ⚠️ IT WAS ALREADY RENDERING BEFORE ANY OF THIS WAS WRITTEN. Core's `cart/cart-totals.php` fires
     `woocommerce_proceed_to_checkout` and the Stripe plugin renders its cart buttons there at
     priority 30, so `.wc-stripe-cart-checkout-container` and the plugin's own "- or -" were
     already in the page. What was missing was any treatment beyond "room to breathe".

   🔴 AND LIKE THE CHECKOUT BAND, IT IS HIDDEN UNTIL A BUTTON MOUNTS. The `<li>` is emitted on
     every request and filled by JavaScript only where the device can pay. Without the `:has()`
     guard, every visitor without Apple Pay saw a "- or -" divider under the checkout button with
     nothing on the other side of it. `:has()` is live, so it switches on the instant the button
     appears, and where it is unsupported the block stays hidden - a missing convenience rather
     than a broken layout. */
body.afw-cart .afw-sum-totals .wc-proceed-to-checkout > * + * { margin-top: 10px; }
body.afw-cart .afw-sum-totals .wc-stripe-cart-checkout-container { display: none; }
body.afw-cart .afw-sum-totals .wc-stripe-cart-checkout-container:has(.payment-box > *) {
	display: block;
	margin-top: 14px;
}
body.afw-cart .afw-sum-totals .wc_stripe_cart_payment_methods {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.afw-cart .afw-sum-totals .wc-stripe-payment-method { margin: 0; padding: 0; }
body.afw-cart .afw-sum-totals .wc-stripe-payment-method .payment-box > * {
	display: block;
	width: 100%;
	min-height: 48px;
}
body.afw-cart .afw-sum-totals apple-pay-button {
	--apple-pay-button-width: 100%;
	--apple-pay-button-height: 48px;
	--apple-pay-button-border-radius: 12px;
	width: 100%;
	height: 48px;
}
/* the plugin's "- or -" becomes a rule with a word in it */
body.afw-cart .afw-sum-totals .wc-stripe-payment-method.or { margin: 0; }
body.afw-cart .afw-sum-totals .wc-stripe-cart-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font: 500 11px/1 var(--afw-sans, sans-serif);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
	white-space: nowrap;
}
body.afw-cart .afw-sum-totals .wc-stripe-cart-or::before,
body.afw-cart .afw-sum-totals .wc-stripe-cart-or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--afw-hair, #eeeaf3);
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════

   ⚠️ `.afw-reco` AND `.afw-xsell` ARE FRAGMENT SELECTORS. WooCommerce replaces each element
     wholesale after every cart change, so nothing may be attached to them from JavaScript and
     nothing inside them may be built client-side - it would be wiped on the next add. */
.afw-reco.is-empty,
.afw-xsell.is-empty { display: none; }

.afw-reco-head {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0 0 13px;
}
.afw-reco-h {
	margin: 0;
	font: 500 11.5px/1.3 var(--afw-sans, sans-serif);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--afw-meta, #6e6b7b);
}
.afw-reco-note {
	margin: 0;
	font: 400 12.5px/1.45 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
}

.afw-reco-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.afw-reco-item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 13px;
	align-items: center;
	padding: 9px 10px;
	border: 1px solid var(--afw-hair, #eeeaf3);
	border-radius: 14px;
	background: var(--afw-card, #fff);
	transition: border-color 0.16s linear, box-shadow 0.16s linear;
}
.afw-reco-item:hover {
	border-color: var(--afw-mauve-soft, #a78bc9);
	box-shadow: 0 10px 24px -18px rgba(28, 26, 34, 0.5);
}
.afw-reco-img {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 11px;
	overflow: hidden;
	background: var(--afw-band, #f5f2f8);
	flex: none;
}
.afw-reco-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.afw-reco-body { min-width: 0; }
.afw-reco-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font: 500 13px/1.35 var(--afw-sans, sans-serif);
	color: var(--afw-ink, #1c1a22);
	text-decoration: none;
}
.afw-reco-name:hover { text-decoration: underline; }
.afw-reco-price {
	display: block;
	margin-top: 3px;
	font: 600 12.5px/1.3 var(--afw-sans, sans-serif);
	color: var(--afw-ink-2, #4c4a57);
	font-variant-numeric: tabular-nums;
}
.afw-reco-price del { opacity: 0.5; font-weight: 400; margin-right: 4px; }
.afw-reco-price ins { text-decoration: none; }

.afw-reco-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	min-height: 36px;
	padding: 0 13px;
	border: 1px solid var(--afw-line, #e4deec);
	border-radius: 11px;
	background: #fff;
	font: 600 12.5px/1 var(--afw-sans, sans-serif);
	color: var(--afw-mauve-strong, #5f4a8a);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.16s linear, border-color 0.16s linear, color 0.16s linear;
}
.afw-reco-add:hover {
	background: var(--afw-mauve-strong, #5f4a8a);
	border-color: var(--afw-mauve-strong, #5f4a8a);
	color: #fff;
}
/* ⚠️ "Choose" is a LINK to the product page, not an add. A variable product cannot be added from
   a strip - see afw_cart_product_card(). It is deliberately quieter than Add so the one-click
   option reads as the easy one. */
.afw-reco-add.is-choose {
	color: var(--afw-meta, #6e6b7b);
	border-style: dashed;
}
.afw-reco-add.is-choose:hover {
	background: var(--afw-band, #f5f2f8);
	border-color: var(--afw-mauve-soft, #a78bc9);
	color: var(--afw-ink, #1c1a22);
	border-style: solid;
}
.afw-reco-add.loading { opacity: 0.55; pointer-events: none; }
.afw-reco-add.added { display: none; }
/* WooCommerce appends its own "View cart" link after a loop add; inside a basket panel that is a
   link to the thing already on screen */
.afw-reco .added_to_cart,
.afw-xsell .added_to_cart { display: none; }
.afw-reco-add:focus-visible {
	outline: 2px solid var(--afw-control, #8c7ba6);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════

/* (a) 🔴 THE ORDER NOTES CARD WAS 405px WIDE INSIDE AN 814px COLUMN.
   It is a `.form-row`, and the theme sizes form rows for a two-up address form. In the cart it is
   the only field on the row, so it takes the full width like every other card on the page. */
body.afw-cart .afw-cartpage-main #order_comments_field,
body.afw-cart .afw-cartpage-main .form-row.notes,
body.afw-cart .woocommerce-cart-form .form-row {
	width: 100%;
	max-width: none;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

/* (b) the header row and the item rows share ONE column definition, so the labels sit over the
   things they label. They were declared twice with the same values, which is how they drift. */
body.afw-cart .afw-cartlist-head,
body.afw-cart .afw-cartrow {
	grid-template-columns: 88px minmax(0, 1fr) 132px 110px 36px;
	gap: 20px;
	padding-left: 22px;
	padding-right: 22px;
}
body.afw-cart .afw-cartlist-head { padding-top: 14px; padding-bottom: 14px; }
body.afw-cart .afw-cartrow { padding-top: 22px; padding-bottom: 22px; }
body.afw-cart .afw-ch-item { grid-column: 1 / 3; }
body.afw-cart .afw-ch-qty  { grid-column: 3; text-align: left; }
body.afw-cart .afw-ch-sub  { grid-column: 4; text-align: right; }
body.afw-cart .afw-cartrow-media img { width: 88px; height: 88px; }
body.afw-cart .afw-cartrow-qty { justify-self: start; }
body.afw-cart .afw-cartrow-sub { justify-self: end; }
body.afw-cart .afw-cartrow-remove { justify-self: end; }

/* (c) the summary's shipment row: label left, value right, on one line */
body.afw-cart .afw-sum-totals .woocommerce-shipping-totals td {
	flex-wrap: wrap;
	row-gap: 2px;
}
body.afw-cart .afw-sum-totals .shipping-title { white-space: nowrap; }

/* (d) the summary panel's own rhythm - the incentive band had a different inset from the table
   under it, which is why the top of the card looked misaligned */
body.afw-cart .afw-sum-h { padding: 22px 22px 14px; }
body.afw-cart .afw-sum .afw-inc {
	margin: 0;
	padding: 0 22px 16px;
	border-bottom: 1px solid var(--afw-hair, #eeeaf3);
	background: none;
}
body.afw-cart .afw-sum .afw-inc-bar { height: 6px; }
body.afw-cart .afw-sum-totals { padding: 6px 22px 0; }
body.afw-cart .afw-sum-note { padding: 2px 22px 14px; }
body.afw-cart .afw-sum-trust { padding: 14px 22px 20px; }

/* (e) the two strips on the cart page: cards side by side where there is room */
body.afw-cart .afw-cartpage-main .afw-reco,
body.afw-cart .afw-cartpage-main .afw-xsell {
	margin-top: 22px;
	padding: 22px;
	border: 1px solid var(--afw-hair, #eeeaf3);
	border-radius: 18px;
	background: var(--afw-card, #fff);
}
body.afw-cart .afw-cartpage-main .afw-reco-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
}
/* the gap-filler strip is the one the shopper is being asked to act on, so it is the one with a
   tint - the companion strip stays quiet */
body.afw-cart .afw-cartpage-main .afw-reco {
	border-color: var(--afw-wash-2, #e7def3);
	background: linear-gradient(180deg, rgba(241, 235, 248, 0.6) 0%, rgba(255, 255, 255, 1) 62%);
}

@media (max-width: 720px) {
	body.afw-cart .afw-cartlist-head,
	body.afw-cart .afw-cartrow { padding-left: 16px; padding-right: 16px; gap: 12px 14px; }
	body.afw-cart .afw-cartrow { padding-top: 16px; padding-bottom: 16px; }
	body.afw-cart .afw-cartrow-media img { width: 76px; height: 76px; }
	body.afw-cart .afw-cartpage-main .afw-reco,
	body.afw-cart .afw-cartpage-main .afw-xsell { padding: 18px; }
	body.afw-cart .afw-sum-h { padding: 18px 18px 12px; }
	body.afw-cart .afw-sum .afw-inc { padding: 0 18px 14px; }
	body.afw-cart .afw-sum-totals { padding: 6px 18px 0; }
	body.afw-cart .afw-sum-note { padding: 2px 18px 12px; }
	body.afw-cart .afw-sum-trust { padding: 12px 18px 18px; }
}


/* ── 15. after looking at the rebuilt pages — 2026-09-20 ─────────────────────────────────────── */

/* (a) "Standard Shipping:$9.95" had no space between the label and the amount: the theme's label

/* (b) the cards on the cart page had too little room for a name once the image and the button had
   taken their share, so two-line names were ending in an ellipsis mid-word */
body.afw-cart .afw-cartpage-main .afw-reco-list {
	grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
body.afw-cart .afw-cartpage-main .afw-reco-img,
body.afw-cart .afw-cartpage-main .afw-reco-img img {
	width: 48px;
	height: 48px;
}
body.afw-cart .afw-cartpage-main .afw-reco-item {
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: 11px;
}
body.afw-cart .afw-cartpage-main .afw-reco-add { min-width: 58px; padding: 0 11px; }


/* (c) THE NAMES WERE STILL TRUNCATING AFTER ONE WORD. Three cards across an 814px column leaves
   each card about 230px, and the image, the gap and the Add button take 128 of them - so a real
   product name ("Jellycat Amuseable Coffee-To-Go Bag Charm") had roughly 100px to live in. Two
   cards across with four cards per strip gives each name about 270px and fills the grid exactly,
   with no card orphaned on a row of its own. */
body.afw-cart .afw-cartpage-main .afw-reco-list {
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 12px;
}
body.afw-cart .afw-cartpage-main .afw-reco-name {
	-webkit-line-clamp: 2;
	font-size: 13.5px;
}