/* cf-patches — Cart page restyle. Loaded ONLY on /cart when the
 * "Restyle the Cart Page to Match the Slide-Cart" patch is on; the body then
 * carries .cf-cart-clean (added in PHP). A real stylesheet (not inline) so it
 * survives Autoptimize.
 *
 * Scope: everything is under body.cf-cart-clean and leans on !important where
 * WooCommerce's / Shopkeeper's own shop_table_responsive rules sit at
 * equal-or-higher specificity. Fonts are inherited from the theme on purpose so
 * the cart reads as the store, not a bolt-on.
 *
 * The reflow runs to 1024px (phones AND tablets — the theme's stacked/huge-image
 * view runs well past 768, so a 768 cut left a broken middle band). Desktop
 * above 1024 keeps WooCommerce's normal table.
 *
 * The card mirrors the CheckoutWC slide-cart:
 *   thumbnail (square, centred) · name · colour · ± quantity · line total · ✕
 * The live ± stepper is wired by cf-cart.js (ajax cart update, no reload).
 */

/* ══════════════════════════════════════════════════════════════════════════
   PHONE + TABLET — reflow the responsive cart table into slide-cart cards.
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and ( max-width: 1024px ) {

	/* A little air at the top of the page. */
	body.cf-cart-clean .woocommerce-cart-form { margin-top: 10px; }

	body.cf-cart-clean .woocommerce table.shop_table_responsive.cart thead { display: none !important; }
	body.cf-cart-clean .woocommerce table.cart,
	body.cf-cart-clean .woocommerce table.cart tbody { display: block; width: 100%; }
	body.cf-cart-clean .woocommerce table.cart tr { display: block; }

	/* Each product row → a card. Price is vertically centred on the right; the
	   remove ✕ floats in the top-right corner. */
	body.cf-cart-clean .woocommerce table.cart tr.woocommerce-cart-form__cart-item {
		position: relative;
		box-sizing: border-box !important;   /* keep the right padding INSIDE 100% (no overflow) */
		display: grid !important;
		grid-template-columns: 68px minmax( 0, 1fr ) auto;
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: 14px;
		row-gap: 7px;
		padding: 16px 30px 16px 0 !important;   /* right pad clears the ✕ */
		margin: 0 !important;
		border: 0 !important;
		border-bottom: 1px solid #ededf1 !important;
	}
	/* Nothing in the cart may add width on top of 100% (Foundation nests the cart
	   in negative-margin rows; a content-box padding would spill past the edge). */
	body.cf-cart-clean .woocommerce-cart-form,
	body.cf-cart-clean .woocommerce-cart-form *,
	body.cf-cart-clean .cart-collaterals,
	body.cf-cart-clean .cart-collaterals * { box-sizing: border-box; }
	body.cf-cart-clean table.cart tr.cart_item td {
		display: block !important;
		padding: 0 !important; margin: 0 !important; border: 0 !important;
		text-align: left !important; width: auto !important; font-size: inherit;
	}
	body.cf-cart-clean table.cart tr.cart_item td::before { display: none !important; content: "" !important; }

	/* Thumbnail — forced square, vertically centred. */
	body.cf-cart-clean td.product-thumbnail { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
	body.cf-cart-clean td.product-thumbnail a { display: block; line-height: 0; }
	body.cf-cart-clean .woocommerce table.cart td.product-thumbnail img {
		width: 68px !important; height: 68px !important; max-width: 68px !important; min-width: 68px;
		object-fit: cover !important; border-radius: 10px; background: #fff; border: 1px solid #ececf1;
		display: block; margin: 0 !important; padding: 0 !important; box-sizing: border-box; overflow: hidden;
	}

	body.cf-cart-clean td.product-name { grid-column: 2; grid-row: 1; align-self: end; }
	body.cf-cart-clean td.product-name > a { font-weight: 600; font-size: 14.5px; line-height: 1.28; color: #23252b; display: block; }
	body.cf-cart-clean td.product-name dl.variation { margin: 4px 0 0; color: #7c7c85; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 3px 6px; }
	body.cf-cart-clean td.product-name dl.variation dt { font-weight: 600; margin: 0; }
	body.cf-cart-clean td.product-name dl.variation dd { margin: 0; }
	body.cf-cart-clean td.product-name dl.variation p { margin: 0; }

	/* Quantity — the ± pill (buttons injected by cf-cart.js). */
	body.cf-cart-clean td.product-quantity { grid-column: 2; grid-row: 2; align-self: start; }
	body.cf-cart-clean td.product-quantity .quantity {
		display: inline-flex !important; align-items: stretch; border: 1px solid #d9d9e0;
		border-radius: 999px; overflow: hidden; height: 34px; background: #fff;
	}
	body.cf-cart-clean td.product-quantity .quantity .cf-qty-step {
		width: 34px; display: flex; align-items: center; justify-content: center;
		font-size: 18px; line-height: 1; color: #5c5c66; background: #fff; cursor: pointer;
		user-select: none; -webkit-user-select: none; border: 0;
	}
	body.cf-cart-clean td.product-quantity .quantity .cf-qty-step:hover { background: #f4f4f6; color: #23252b; }
	body.cf-cart-clean td.product-quantity .quantity .cf-qty-step.is-disabled { opacity: .35; pointer-events: none; }
	body.cf-cart-clean td.product-quantity .quantity input.qty {
		width: 40px !important; height: 100%; border: 0 !important; border-left: 1px solid #ededf1 !important;
		border-right: 1px solid #ededf1 !important; border-radius: 0 !important; padding: 0 !important;
		text-align: center; font-weight: 700; background: #fff; -moz-appearance: textfield;
	}
	body.cf-cart-clean td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
	body.cf-cart-clean td.product-quantity .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

	/* Line total — right, vertically centred, lighter than before. */
	body.cf-cart-clean td.product-subtotal { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; }
	body.cf-cart-clean td.product-subtotal .amount { font-weight: 500; font-size: 15px; color: #3c3c43; font-variant-numeric: tabular-nums; }
	body.cf-cart-clean table.cart tr.cart_item td.product-price { display: none !important; }

	/* Remove ✕ — top-right corner of the card. */
	body.cf-cart-clean td.product-remove { position: absolute; top: 12px; right: 0; grid-row: auto; }
	body.cf-cart-clean td.product-remove a.remove {
		color: #c2c2cb !important; font-size: 19px; line-height: 1; width: 24px; height: 24px;
		display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none;
	}
	body.cf-cart-clean td.product-remove a.remove:hover { color: #23252b !important; background: #f2f2f5; }

	/* No stray space between the form and the collaterals below it. */
	body.cf-cart-clean .woocommerce-cart-form { margin-bottom: 0 !important; }
	body.cf-cart-clean .cart-collaterals { margin-top: 0 !important; padding-top: 0 !important; }
	body.cf-cart-clean .cross-sells { margin-top: 0 !important; }

	/* ── Cross-sells: a little room under the line above, 2-up cards ── */
	body.cf-cart-clean .cross-sells {
		padding: 18px 0 10px !important; margin: 0 !important; background: none !important;
		border-bottom: 1px solid #ededf1;
	}
	body.cf-cart-clean .cross-sells ul.products {
		display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 !important; padding: 0 !important;
	}
	body.cf-cart-clean .cross-sells ul.products li.product {
		width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
	}
	body.cf-cart-clean .cross-sells ul.products li.product > a img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
	body.cf-cart-clean .cross-sells ul.products::before,
	body.cf-cart-clean .cross-sells ul.products::after { display: none !important; }

	/* Mobile: every dollar amount shares the totals' right edge (16px inset). On desktop
	   these already align; the responsive stylesheet is what knocks them out of column. */
	/* Shipping-method rows: the theme forces the <label> back to block on mobile, so
	   space-between goes inert and the price just trails the name. Re-assert the flex row
	   and push the price to a 16px inset with margin-left:auto. */
	body.cf-cart-clean .cart_totals .woocommerce-shipping-methods li label {
		display: flex !important; justify-content: space-between; align-items: baseline;
		gap: 10px; padding-right: 16px !important; box-sizing: border-box;
	}
	body.cf-cart-clean .cart_totals .woocommerce-shipping-methods li label .amount { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
	/* Totals amounts render as width-constrained display:block on mobile (theme rule), so
	   their digits overflow the box by their own width and each row lands on a DIFFERENT
	   right edge (subtotal, tax, total never matched). Force them inline so they right-align
	   cleanly on the same edge as the shipping / item amounts above. */
	body.cf-cart-clean .cart_totals tr.cart-subtotal td,
	body.cf-cart-clean .cart_totals tr.cart-discount td,
	body.cf-cart-clean .cart_totals tr.tax-total td,
	body.cf-cart-clean .cart_totals tr.tax-rate td,
	body.cf-cart-clean .cart_totals tr.fee td,
	body.cf-cart-clean .cart_totals tr.order-total td { display: block !important; text-align: right !important; }
	body.cf-cart-clean .cart_totals tr.cart-subtotal td .amount,
	body.cf-cart-clean .cart_totals tr.cart-subtotal td strong,
	body.cf-cart-clean .cart_totals tr.cart-subtotal td bdi,
	body.cf-cart-clean .cart_totals tr.cart-discount td .amount,
	body.cf-cart-clean .cart_totals tr.cart-discount td strong,
	body.cf-cart-clean .cart_totals tr.cart-discount td bdi,
	body.cf-cart-clean .cart_totals tr.tax-total td .amount,
	body.cf-cart-clean .cart_totals tr.tax-total td strong,
	body.cf-cart-clean .cart_totals tr.tax-total td bdi,
	body.cf-cart-clean .cart_totals tr.tax-rate td .amount,
	body.cf-cart-clean .cart_totals tr.tax-rate td strong,
	body.cf-cart-clean .cart_totals tr.tax-rate td bdi,
	body.cf-cart-clean .cart_totals tr.fee td .amount,
	body.cf-cart-clean .cart_totals tr.fee td strong,
	body.cf-cart-clean .cart_totals tr.fee td bdi,
	body.cf-cart-clean .cart_totals tr.order-total td .amount,
	body.cf-cart-clean .cart_totals tr.order-total td strong,
	body.cf-cart-clean .cart_totals tr.order-total td bdi { display: inline !important; float: none !important; width: auto !important; }

	/* Item line subtotal sits inside the card's 30px ✕-clearance padding; nudge it the
	   extra 14px (30→16) so it lands on the same edge without shrinking the ✕ gap. */
	body.cf-cart-clean td.product-subtotal { transform: translateX( 14px ); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ALL WIDTHS — cross-sell card typography (reads well on desktop too).
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Coupon, totals, free-ship bar, checkout (ALL WIDTHS incl. desktop) — the
   toggle/steppers JS runs at every width, and the shipping row needs the totals
   table to be block so it can span full-width, so these are not mobile-only. */
/* ── Coupon + Update cart (the .actions row) ──
   Symmetric padding so the coupon sits centred between the hairline above
   (last item) and the one below it, with modest breathing room. */
body.cf-cart-clean td.actions {
	display: block !important; padding: 12px 0 12px !important; border: 0 !important;
	border-bottom: 1px solid #ededf1 !important; text-align: left !important;
}
body.cf-cart-clean td.actions::before { display: none !important; }
/* Collapsed (the "Have a coupon code?" link showing) gets a touch more room;
   expanded (the field showing) is tighter. */
body.cf-cart-clean td.actions:has( .coupon.cf-coupon-collapsed ) { padding-bottom: 14px !important; }
body.cf-cart-clean td.actions:has( .coupon:not( .cf-coupon-collapsed ) ) { padding: 12px 0 12px !important; }
/* Coupon collapses behind a "Have a coupon code?" link (cf-cart.js injects the
   link + the collapsed class). */
body.cf-cart-clean .cf-coupon-toggle {
	display: block; float: none !important; text-align: center; text-transform: none;
	background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
	color: #9c13d1; font-weight: 600; font-size: 13.5px; cursor: pointer; width: 100% !important;
	text-decoration: underline; text-underline-offset: 3px;
}
body.cf-cart-clean td.actions .coupon { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
/* The theme sets .coupon padding: 0 calc(5%+15px) 40px with a 6-class !important
   selector — out-specify it to kill the 40px bottom gap + horizontal indent. */
body.cf-cart-clean .woocommerce-cart-form .shop_table.cart tbody tr td.actions .coupon { padding: 0 !important; border: 0 !important; }
body.cf-cart-clean .woocommerce-cart-form .shop_table.cart tbody tr td.actions .coupon button.button { padding: 3px 24px 0 !important; min-width: 0 !important; width: auto !important; }   /* +3 top optically centres the uppercase APPLY (high-spec so it wins over the base button padding) */
body.cf-cart-clean td.actions .coupon.cf-coupon-collapsed { display: none !important; }
body.cf-cart-clean td.actions .coupon::before { display: none !important; content: none !important; }
body.cf-cart-clean td.actions .coupon label { position: absolute !important; left: -9999px; }
body.cf-cart-clean td.actions .coupon input#coupon_code {
	flex: 1 1 auto !important; min-width: 0; width: auto !important; margin: 0 !important; height: 46px !important; line-height: normal !important; box-sizing: border-box !important;
	border: 1px solid #d9d9e0 !important; border-radius: 10px !important; padding: 2px 14px 0 !important;   /* +2 top / 0 bottom optically centres the placeholder */
	background: #fff !important; background-image: none !important;
}
/* Apply Coupon → matches the PROCEED TO CHECKOUT button (solid purple). */
body.cf-cart-clean td.actions .coupon button {
	flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; height: 46px !important; box-sizing: border-box !important; border: 0 !important; background: #b11ad2 !important;
	border-radius: 10px !important; padding: 0 20px !important; color: #fff !important; font-weight: 700;
	font-size: 12px; letter-spacing: .05em; text-transform: uppercase; width: auto !important; white-space: nowrap; cursor: pointer;
}
body.cf-cart-clean td.actions .coupon button:hover { background: #9814b3 !important; }
/* CheckoutWC injects the bad-coupon message as p.coupon-error-notice INSIDE .coupon;
   drop it onto its own full-width line below the input+button (the wrap above lets it). */
body.cf-cart-clean td.actions .coupon .coupon-error-notice {
	flex: 0 0 100% !important;
	width: 100% !important;
	margin: 4px 0 0 !important;
	padding: 10px 14px !important;
	box-sizing: border-box;
	background: #fdecef !important;
	border: 1px solid #f4b8c2 !important;
	border-radius: 10px !important;
	color: #b3123a !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	text-align: left !important;
}
/* "Update cart": hidden until a qty change enables it (Phase 1 fallback); with
   the ± ajax stepper it stays out of the way entirely. */
body.cf-cart-clean td.actions button[name="update_cart"] { display: none !important; }
/* One or the other: while a coupon is applied, hide the whole coupon actions block ("Have a coupon
   code?" toggle + field). The applied coupon shows instead — in the toggle's slot on mobile, and
   natively in the totals on desktop. (cf-cart.js sets body.cf-has-coupon.) */
body.cf-has-coupon.cf-cart-clean form.woocommerce-cart-form td.actions { display: none !important; }

/* ══ Totals block ══ On phones/tablets, neutralise Shopkeeper's grey scallop
   "receipt" box and go full-width. On DESKTOP keep the theme's grey box + its
   float/position (only the table inside becomes block so the shipping row can
   span it) — that's why this neutralise is mobile-only. */
@media screen and ( max-width: 1024px ) {
	body.cf-cart-clean .cart-collaterals,
	body.cf-cart-clean .cart-collaterals .cart_totals {
		width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important;
		background: none !important; box-shadow: none !important; border: 0 !important;
	}
	body.cf-cart-clean .cart_totals::before, body.cf-cart-clean .cart_totals::after,
	body.cf-cart-clean .cart-collaterals::before, body.cf-cart-clean .cart-collaterals::after { display: none !important; content: none !important; background: none !important; }
	body.cf-cart-clean .cart_totals > h2 { display: none !important; }
}
body.cf-cart-clean .cart_totals table { display: block !important; width: 100% !important; border: 0 !important; margin: 0 !important; background: none !important; }
body.cf-cart-clean .cart_totals tbody { display: block !important; }
body.cf-cart-clean .cart_totals tr { display: block; }
body.cf-cart-clean .cart_totals tr td::before { display: none !important; content: "" !important; }

/* Simple label ↔ amount rows. */
body.cf-cart-clean .cart_totals tr.cart-subtotal,
body.cf-cart-clean .cart_totals tr.cart-discount,
body.cf-cart-clean .cart_totals tr.tax-total,
body.cf-cart-clean .cart_totals tr.tax-rate,
body.cf-cart-clean .cart_totals tr.fee,
body.cf-cart-clean .cart_totals tr.order-total {
	display: flex !important; align-items: baseline; justify-content: space-between;
	gap: 12px; padding: 12px 16px 12px 0 !important; margin: 0 !important; border: 0 !important;   /* 8px right keeps the amount clear of the scrollbar / inside the divider */
	border-bottom: 1px solid #ededf1 !important;
}
body.cf-cart-clean .cart_totals tr.cart-subtotal th, body.cf-cart-clean .cart_totals tr.cart-subtotal td,
body.cf-cart-clean .cart_totals tr.cart-discount th, body.cf-cart-clean .cart_totals tr.cart-discount td,
body.cf-cart-clean .cart_totals tr.tax-total th, body.cf-cart-clean .cart_totals tr.tax-total td,
body.cf-cart-clean .cart_totals tr.tax-rate th, body.cf-cart-clean .cart_totals tr.tax-rate td,
body.cf-cart-clean .cart_totals tr.fee th, body.cf-cart-clean .cart_totals tr.fee td,
body.cf-cart-clean .cart_totals tr.order-total th, body.cf-cart-clean .cart_totals tr.order-total td {
	display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
	background: none !important; width: auto !important; white-space: nowrap;
	position: relative; top: 2px;   /* optically centre uppercase labels / figures (no descenders => they ride high in the line box) */
}
body.cf-cart-clean .cart_totals tr th { text-align: left; font-weight: 700; }
body.cf-cart-clean .cart_totals tr td { text-align: right; }
body.cf-cart-clean .cart_totals tr.order-total th,
body.cf-cart-clean .cart_totals tr.order-total td,
body.cf-cart-clean .cart_totals tr.order-total td strong,
body.cf-cart-clean .cart_totals tr.order-total td strong .amount,
body.cf-cart-clean .cart_totals tr.order-total .amount { font-size: 18px !important; font-weight: 800 !important; }
/* Total amount stays whole and never wraps. */
body.cf-cart-clean .cart_totals tr.order-total td .amount { white-space: nowrap; }
body.cf-cart-clean .cart_totals td .amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Applied-coupon row: label left (one line), discount + remove-× right. */
body.cf-cart-clean .cart_totals tr.cart-discount { align-items: center !important; }
body.cf-cart-clean .cart_totals tr.cart-discount th { white-space: nowrap; }
/* Keep '-', the amount and the remove-× on ONE right-aligned line. On mobile the theme
   forces .amount to display:block (stacking them) and overrides a flex td, so instead of
   flexing the td we just force its pieces inline + nowrap — robust against both. */
body.cf-cart-clean .cart_totals tr.cart-discount td { white-space: nowrap !important; text-align: right; }
body.cf-cart-clean .cart_totals tr.cart-discount td .amount { display: inline-block !important; vertical-align: baseline; }
/* JS relocates the remove-× into the label; sit it just right of 'Coupon: CODE'. */
body.cf-cart-clean .cart_totals tr.cart-discount th .woocommerce-remove-coupon { display: inline-block; margin-left: 10px; vertical-align: middle; position: relative; top: -1px; }


/* Our free-shipping cart bar row — equidistant between the line above and the
   shipment section below. */
body.cf-cart-clean .cart_totals tr.cf-fsinline-row { display: block !important; border: 0 !important; }
body.cf-cart-clean .cart_totals tr.cf-fsinline-row td { display: block !important; padding: 0 !important; border: 0 !important; }
body.cf-cart-clean .cart_totals tr.cf-fsinline-row .cf-fsinline { margin: 20px 0 10px !important; }

/* Prominent checkout + continue-shopping. */
body.cf-cart-clean .wc-proceed-to-checkout { margin-top: 18px; padding: 0; }
body.cf-cart-clean .wc-proceed-to-checkout a.checkout-button {
	display: block !important; width: 100%; text-align: center; box-sizing: border-box;
	background: #b11ad2 !important; color: #fff !important; border: 0 !important;
	padding: 16px !important; border-radius: 12px !important; font-weight: 700 !important;
	font-size: 16px !important; letter-spacing: .01em;
	box-shadow: 0 8px 20px -8px rgba( 177, 26, 210, .6 );
}
body.cf-cart-clean .wc-proceed-to-checkout a.checkout-button:hover { background: #9814b3 !important; }
body.cf-cart-clean .shopkeeper-continue-shopping { text-align: center; margin: 14px 0 0; }
body.cf-cart-clean .shopkeeper-continue-shopping .button { background: none; color: #7c7c85; font-weight: 600; }

/* ── Shipping section (ALL WIDTHS incl. desktop) — stack the label + full-width
   method list left-aligned with SHIPPING, instead of the theme's indented value
   column. Desktop keeps the normal totals table for the other rows. */
/* Shipping row — stacked: label, then the method list full-width (never clipped). */
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals {
	display: flex !important; flex-direction: column; align-items: stretch;   /* flex (not block) so a <tr> spans full width instead of being column-wrapped by the table */
	width: 100% !important; padding: 12px 0 0 !important; margin: 0 !important; border: 0 !important;
}
/* Prod's "Local Pickup Plus" wraps the methods in a NESTED <table class=
   "lpp-shipping-package-wrapper"> inside the shipping cell, re-introducing a
   2-column (label|value) indent on desktop. Flatten the whole nested structure
   AND the outer cell to full-width block so the methods align under the label. */
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals > th,
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals > td,
body.cf-cart-clean table.lpp-shipping-package-wrapper,
body.cf-cart-clean table.lpp-shipping-package-wrapper > tbody,
body.cf-cart-clean table.lpp-shipping-package-wrapper > tbody > tr,
body.cf-cart-clean table.lpp-shipping-package-wrapper > tbody > tr > th,
body.cf-cart-clean table.lpp-shipping-package-wrapper > tbody > tr > td {
	display: block !important; width: 100% !important; max-width: none !important; float: none !important;
	margin-left: 0 !important; padding-left: 0 !important; box-sizing: border-box;
}
/* The lpp OUTER row uses class 'woocommerce-shipping-total' (SINGULAR) whose <td>
   stayed a table-cell (indented). Flatten it too — and hide the redundant inner
   'Shipment' package label so only the outer 'Shipping' label shows. */
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-total,
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-total > td {
	display: block !important; width: 100% !important; max-width: none !important; float: none !important;
	margin-left: 0 !important; padding-left: 0 !important; box-sizing: border-box; text-align: left !important;
}
/* The lpp wrapper <td> also carries 15px top/bottom padding -> big empty gap above TAX
   (and above the methods). Zero it so the shipping block keeps the same 12px rhythm as
   the other totals rows (the inner row's own 12px top + TAX's 12px top do the spacing). */
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-total > td { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Kill the redundant outer "Shipping" label (it just flips to "Local Pickup" and
   duplicates the "Shipment" package heading). */
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-total > th { display: none !important; }

/* Local pickup selected → the delivery address + "Change address" are meaningless,
   so hide the whole address row. */
body.cf-cart-clean .woocommerce-shipping-totals td:has( input.shipping_method[value*="pickup"]:checked ) .cf-ship-destrow,
body.cf-cart-clean .woocommerce-shipping-totals:has( input.shipping_method[value*="pickup"]:checked ) .cf-ship-destrow { display: none !important; }
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals th {
	display: block !important; text-align: left; font-weight: 700; padding: 0 !important; margin: 0 0 8px !important; border: 0 !important;
}
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals td {
	display: block !important; width: auto !important; text-align: left !important;
	padding: 0 !important; margin: 0 !important; border: 0 !important; white-space: normal;
}
body.cf-cart-clean ul#shipping_method,
body.cf-cart-clean ul.woocommerce-shipping-methods {
	display: block !important; width: 100% !important; max-width: none !important; float: none !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important; box-sizing: border-box;
}
/* Grid keeps the radio in column 1 and the label (which wraps its own text)
   next to it in column 2 — NOT flex-wrap, which shoved a long label onto its
   own line below the radio. Extra content a method prints (local-pickup
   location, item list, descriptions) auto-places under the label in column 2. */
body.cf-cart-clean ul.woocommerce-shipping-methods li {
	display: grid !important; grid-template-columns: auto minmax( 0, 1fr ); column-gap: 9px;
	align-items: baseline; padding: 6px 0 !important; margin: 0 !important; text-indent: 0 !important;
}
body.cf-cart-clean ul.woocommerce-shipping-methods li::before { display: none !important; }
body.cf-cart-clean ul.woocommerce-shipping-methods li input.shipping_method { grid-column: 1; grid-row: 1; margin: 3px 0 0 !important; }
body.cf-cart-clean ul.woocommerce-shipping-methods li label {
	grid-column: 2; grid-row: 1; margin: 0 !important;
	display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
	font-size: 12px !important; line-height: 1.3; letter-spacing: 0 !important;
}
body.cf-cart-clean ul.woocommerce-shipping-methods li label .amount { flex: 0 0 auto; white-space: nowrap; font-weight: 700; }
body.cf-cart-clean ul.woocommerce-shipping-methods li > *:not( input ):not( label ) {
	grid-column: 2; width: 100% !important; margin: 4px 0 0 !important; padding: 0 !important;
	font-size: 12.5px; color: #7c7c85; text-align: left !important;
}
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals td,
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals td * { text-align: left !important; }
/* ...but the UPDATE button in that td is a real button — keep its label centred (the `td *`
   left-align above out-specifies the base button rule, so restore center at higher specificity). */
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals td .shipping-calculator-form button,
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals td .shipping-calculator-form button.button { text-align: center !important; }

/* Destination + Change-address on ONE line (subtotal-style: text left, action
   right), with their own divider above. cf-cart.js wraps them in .cf-ship-destrow
   and moves the button up beside the destination; the address form stays below. */
body.cf-cart-clean .cf-ship-destrow {
	display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
	border-top: 1px solid #ededf1; border-bottom: 1px solid #ededf1; padding: 12px 0 !important; margin-top: 12px !important;
}
body.cf-cart-clean .cf-ship-destrow .woocommerce-shipping-destination {
	flex: 1 1 auto; width: auto !important; margin: 0 !important; color: #7c7c85; font-size: 12.5px; text-align: left !important;
}
body.cf-cart-clean .cf-ship-destrow .shipping-calculator-button {
	flex: 0 0 auto; white-space: nowrap; color: #9c13d1; font-weight: 600; margin: 0 !important; text-align: right !important;
}
/* Change-address form (revealed on click) — full width, fields never smushed. */
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-calculator { width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; }
/* Shopkeeper forces margin:15px 0 0 auto on the calculator via a (0,5,3) selector, which
   beats the rule above — and since the calculator is collapsed (its button lives in the
   destrow now) that 15px is dead space that shows up as a big gap above TAX (both widths).
   Out-specify it (0,5,4). Expanded-state spacing lives on .shipping-calculator-form. */
body.cf-cart-clean .cart-collaterals .cart_totals table.shop_table tr td .woocommerce-shipping-calculator { margin: 0 !important; }
body.cf-cart-clean .shipping-calculator-form { margin: 10px 0 0 !important; }
body.cf-cart-clean .shipping-calculator-form .form-row {
	width: 100% !important; max-width: none !important; float: none !important; margin: 0 0 10px !important; padding: 0 !important; box-sizing: border-box;
}
body.cf-cart-clean .shipping-calculator-form label { display: block; font-weight: 700; margin: 0 0 4px !important; text-align: left !important; }
body.cf-cart-clean .shipping-calculator-form select,
body.cf-cart-clean .shipping-calculator-form input[type="text"],
body.cf-cart-clean .shipping-calculator-form .select2-container {
	width: 100% !important; max-width: 100% !important; box-sizing: border-box; height: 44px;
}
/* Country/State are select2 here: only the .select2-container was sized (44px); its inner
   selection box defaults to ~33px, so the field renders visibly SHORT. Size the inner box, its
   text, and the arrow so it stands the same 44px as the country/city/zip inputs. */
body.cf-cart-clean .shipping-calculator-form .select2-selection--single {
	height: 44px !important; display: flex !important; align-items: center !important;
	border-color: #d9d9e0 !important; border-radius: 8px !important;
}
body.cf-cart-clean .shipping-calculator-form .select2-selection--single .select2-selection__rendered {
	line-height: 1.4 !important; padding-left: 4px !important;
}
body.cf-cart-clean .shipping-calculator-form .select2-selection--single .select2-selection__arrow {
	height: 42px !important; top: 1px !important;
}
/* The change-address UPDATE button matches PROCEED TO CHECKOUT. */
body.cf-cart-clean .shipping-calculator-form button,
body.cf-cart-clean .shipping-calculator-form button.button {
	display: block !important; width: 100% !important; box-sizing: border-box;
	background: #b11ad2 !important; color: #fff !important; border: 0 !important;
	padding: 14px !important; border-radius: 12px !important; font-weight: 700 !important;
	font-size: 14px !important; letter-spacing: .01em; text-transform: uppercase; text-align: center !important; margin: 4px 0 0 !important; cursor: pointer;
	box-shadow: 0 8px 20px -8px rgba( 177, 26, 210, .6 );
}
body.cf-cart-clean .shipping-calculator-form button:hover { background: #9814b3 !important; }
/* On desktop the totals stay a <table>; make just the shipping row + its cells
   block so it can span full width within it. */
body.cf-cart-clean .cart_totals tr.woocommerce-shipping-totals { width: 100% !important; }

body.cf-cart-clean .cross-sells > h2 {
	font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7c7c85; margin: 0 0 14px;
}
body.cf-cart-clean .cross-sells ul.products li.product > a img { background: #f5f5f7; border: 1px solid #ececf1; border-radius: 11px; }
body.cf-cart-clean .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size: 13px; font-weight: 600; color: #23252b; }
body.cf-cart-clean .cross-sells ul.products li.product .price { color: #23252b; font-weight: 700; }
body.cf-cart-clean .cross-sells ul.products li.product .button { color: #9c13d1; font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }

/* ± quantity pill (steppers injected by cf-cart.js) — styled at ALL widths so it
   also looks right in the desktop table. */
body.cf-cart-clean td.product-quantity .quantity {
	display: inline-flex !important; align-items: stretch; border: 1px solid #d9d9e0;
	border-radius: 999px; overflow: hidden; height: 34px; background: #fff; max-width: 130px;
}
body.cf-cart-clean td.product-quantity .quantity .cf-qty-step {
	width: 34px; display: flex; align-items: center; justify-content: center;
	font-size: 18px; line-height: 1; color: #5c5c66; background: #fff; cursor: pointer;
	user-select: none; -webkit-user-select: none; border: 0;
}
body.cf-cart-clean td.product-quantity .quantity .cf-qty-step:hover { background: #f4f4f6; color: #23252b; }
body.cf-cart-clean td.product-quantity .quantity .cf-qty-step.is-disabled { opacity: .35; pointer-events: none; }
body.cf-cart-clean td.product-quantity .quantity input.qty {
	width: 40px !important; height: 100%; box-sizing: border-box; border: 0 !important;
	border-left: 1px solid #ededf1 !important; border-right: 1px solid #ededf1 !important;
	border-radius: 0 !important; padding: 0 !important; text-align: center; font-weight: 700;
	background: #fff; -moz-appearance: textfield;
}
body.cf-cart-clean td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
body.cf-cart-clean td.product-quantity .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* While a quantity sync is in flight, dim ONLY the totals column so it reads as
   "updating" — the ± pills and the rest of the cart stay fully interactive, so
   nothing feels frozen. */
body.cf-cart-clean .cart-collaterals.cf-cart-busy { opacity: .5; transition: opacity .1s ease; }

/* Guard against horizontal overflow (a wide shipping <select> or a long string
   pushing the right-hand column — prices, ✕ — off-screen). */
body.cf-cart-clean .woocommerce-cart-form,
body.cf-cart-clean .cart-collaterals,
body.cf-cart-clean .cross-sells,
body.cf-cart-clean table.cart,
body.cf-cart-clean .cart_totals table { max-width: 100% !important; box-sizing: border-box; }
body.cf-cart-clean .shipping-calculator-form select,
body.cf-cart-clean .shipping-calculator-form input,
body.cf-cart-clean .shipping-calculator-form { max-width: 100% !important; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════════════
   OPTIONAL DECLUTTER TOGGLES — gated by their OWN body classes (NOT cf-cart-clean),
   so each works independently of the restyle. cf-cart.js toggles cf-tax-zero-hidden.
   ══════════════════════════════════════════════════════════════════════════ */
/* Hide the Tax row while it is $0.00 (JS adds/removes cf-tax-zero-hidden reactively). */
body.cf-hide-zero-tax tr.tax-total.cf-tax-zero-hidden { display: none !important; }

/* Hide the redundant Local Pickup 'Pickup Location: …' line + the duplicate item readout,
   keeping the street address and the pick-up instructions link. */
body.cf-hide-pickup-readout .woocommerce-shipping-methods .pickup-location-field > small,
body.cf-hide-pickup-readout p.woocommerce-shipping-contents { display: none !important; }

/* Cross-sells moved under the items (cart_crosssells_under_items) — on DESKTOP the theme
   stretches them across the full items column, so the cards read huge. Constrain to normal
   product-card widths (auto-fill 180–210px, left-aligned) and add breathing room above the
   heading. Mobile keeps its own 2-up grid from the restyle. */
@media screen and ( min-width: 1025px ) {
	body.cf-cross-under .cross-sells { margin-top: 44px !important; }
	body.cf-cross-under .cross-sells ul.products {
		display: grid !important;
		grid-template-columns: repeat( auto-fill, minmax( 180px, 210px ) ) !important;
		justify-content: start;
		gap: 22px 26px !important;
		margin: 0 !important; padding: 0 !important;
	}
	body.cf-cross-under .cross-sells ul.products li.product {
		width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
	}
	body.cf-cross-under .cross-sells ul.products li.product img {
		width: 100% !important; height: auto !important; aspect-ratio: 1 !important; object-fit: contain !important;
		background: #f5f5f7; border: 1px solid #ececf1; border-radius: 11px; box-sizing: border-box;
	}
	body.cf-cross-under .cross-sells ul.products::before,
	body.cf-cross-under .cross-sells ul.products::after { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BUYABLE CROSS-SELLS (cart_crosssells_buyable → body.cf-cross-buy) — cart-style
   rows with in-place add-to-cart. Controls join the item grid (display:contents) so
   the dropdown / qty / Add line up across rows regardless of title length.
   ══════════════════════════════════════════════════════════════════════════ */
body.cf-cross-buy .cross-sells.cf-cross-buy { margin-top: 34px; width: 100%; }
body.cf-cross-buy .cross-sells.cf-cross-buy > h2 {
	font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7c7c85; margin: 0 0 6px;
}
body.cf-cross-buy .cf-xsell-list { list-style: none; margin: 0; padding: 0; display: block; }
body.cf-cross-buy .cf-xsell-list::before, body.cf-cross-buy .cf-xsell-list::after { display: none !important; content: none !important; }

body.cf-cross-buy .cf-xsell-item {
	display: grid; grid-template-columns: 20px 104px minmax( 0, 1fr ) auto auto auto; align-items: center;
	column-gap: 12px; padding: 14px 0; margin: 0; border-bottom: 1px solid #ededf1; box-sizing: border-box; position: relative;
}
body.cf-cross-buy .cf-xsell-dismiss {
	grid-column: 1; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
	color: #c2c2cb; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; justify-self: start;
}
body.cf-cross-buy .cf-xsell-dismiss:hover { color: #23252b; background: #f2f2f5; }
body.cf-cross-buy .cf-xsell-item:last-child { border-bottom: 0; }
body.cf-cross-buy .cf-xsell-thumb { grid-column: 2; line-height: 0; }
body.cf-cross-buy .cf-xsell-thumb img {
	width: 100px; height: 100px; object-fit: cover; border-radius: 10px; background: #fff;
	border: 1px solid #ececf1; padding: 0; box-sizing: border-box; display: block; overflow: hidden;
}
body.cf-cross-buy .cf-xsell-info { grid-column: 3; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.cf-cross-buy .cf-xsell-name { font-weight: 600; font-size: 14px; line-height: 1.3; color: #23252b; text-decoration: none; }
body.cf-cross-buy .cf-xsell-name:hover { color: #b11ad2; }
body.cf-cross-buy .cf-xsell-meta { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #9a9aa2; }
body.cf-cross-buy .cf-xsell-meta strong { color: #3c3c43; font-weight: 700; }
/* Single-choice items show their colour/option as a static label; sit it in the variation
   column so it lines up with the dropdown on multi-choice rows (desktop). */
body.cf-cross-buy .cf-xsell-metaline { grid-column: 4; justify-self: end; align-self: center; white-space: nowrap; }
body.cf-cross-buy .cf-xsell-price { font-weight: 700; font-size: 13.5px; color: #3c3c43; font-variant-numeric: tabular-nums; margin-top: 1px; }
body.cf-cross-buy .cf-xsell-price del { color: #a0a0a8; font-weight: 400; margin-right: 5px; }
body.cf-cross-buy .cf-xsell-price ins { text-decoration: none; }

/* The form + its buy wrapper dissolve into the item grid so each control gets its own
   column and lines up across every row. */
body.cf-cross-buy .cf-xsell-buy, body.cf-cross-buy .cf-xsell-form, body.cf-cross-buy .cf-xsell-actions { display: contents; }
body.cf-cross-buy .cf-xsell-variation {
	grid-column: 4; justify-self: end;
	height: 34px; border: 1px solid #d9d9e0 !important; border-radius: 9px !important; padding: 0 26px 0 12px !important;
	background-color: #fff !important; background-image: none; font-size: 13px; width: 130px !important; max-width: 130px !important; min-width: 130px !important; color: #23252b; box-sizing: border-box;
}
body.cf-cross-buy .cf-xsell-qty {
	grid-column: 5; display: inline-flex; align-items: stretch; border: 1px solid #d9d9e0; border-radius: 999px;
	overflow: hidden; height: 34px; background: #fff; justify-self: start;
}
body.cf-cross-buy .cf-xsell-qty .cf-qty-step {
	width: 34px; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1;
	color: #5c5c66; background: #fff; cursor: pointer; user-select: none; -webkit-user-select: none;
}
body.cf-cross-buy .cf-xsell-qty .cf-qty-step:hover { background: #f4f4f6; color: #23252b; }
body.cf-cross-buy .cf-xsell-qtyinput {
	width: 40px; height: 100%; border: 0 !important; border-left: 1px solid #ededf1 !important; border-right: 1px solid #ededf1 !important;
	border-radius: 0 !important; padding: 0 !important; text-align: center; font-weight: 700; background: #fff; -moz-appearance: textfield; box-sizing: border-box;
}
body.cf-cross-buy .cf-xsell-qtyinput::-webkit-outer-spin-button,
body.cf-cross-buy .cf-xsell-qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.cf-cross-buy .cf-xsell-add,
body.cf-cross-buy .cf-xsell-options {
	grid-column: 6; justify-self: end;
	height: 34px; display: inline-flex !important; width: auto !important; flex: 0 0 auto; min-width: 0 !important;
	align-items: center; justify-content: center; padding: 2px 12px 0 !important; margin: 0;
	border: 0 !important; border-radius: 9px !important; background: #b11ad2 !important; color: #fff !important;
	font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
	cursor: pointer; text-decoration: none; box-sizing: border-box;
}
body.cf-cross-buy .cf-xsell-add:hover,
body.cf-cross-buy .cf-xsell-options:hover { background: #9814b3 !important; }
body.cf-cross-buy .cf-xsell-add.cf-xsell-loading { opacity: .55; pointer-events: none; }

/* Colour chips inside the closed select face — ported from the List view. The dot's
   colour is --cf-chip, set per selection by cf-cart.js. */
body.cf-cross-buy .cf-xsell-variation.has-chips {
	-webkit-appearance: none; appearance: none; overflow: hidden; text-overflow: ellipsis;
	padding-left: 10px !important; padding-right: 24px !important; background-color: #fff !important;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23555555' stroke-width='1.5' fill='none'/></svg>" );
	background-position: right 8px center !important; background-size: 10px 6px !important; background-repeat: no-repeat !important;
	background-origin: border-box !important; background-clip: border-box !important;
}
body.cf-cross-buy .cf-xsell-variation.has-chips.has-chip {
	padding-left: 30px !important;
	background-image:
		radial-gradient( circle at 8px 8px, var( --cf-chip, transparent ) 6px, rgba( 0, 0, 0, .22 ) 6.5px 7.5px, transparent 8px ),
		url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23555555' stroke-width='1.5' fill='none'/></svg>" );
	background-position: left 8px center, right 8px center !important; background-size: 16px 16px, 10px 6px !important;
	background-repeat: no-repeat, no-repeat !important; background-origin: border-box, border-box !important; background-clip: border-box, border-box !important;
}
body.cf-cross-buy .cf-xsell-variation.has-chips.has-chip-img {
	padding-left: 30px !important;
	background-image:
		var( --cf-chip-img, none ),
		url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23555555' stroke-width='1.5' fill='none'/></svg>" );
	background-position: left 8px center, right 8px center !important; background-size: 16px 16px, 10px 6px !important;
	background-repeat: no-repeat, no-repeat !important; background-origin: border-box, border-box !important; background-clip: border-box, border-box !important;
}

/* Swatches INSIDE the open dropdown, where Chromium's customizable select allows it
   (appearance:base-select). Ported from the List view; each option paints its --cf-chip. */
@supports ( appearance: base-select ) {
	body.cf-cross-buy .cf-xsell-variation.has-chips,
	body.cf-cross-buy .cf-xsell-variation.has-chips::picker( select ) { -webkit-appearance: base-select; appearance: base-select; }
	body.cf-cross-buy .cf-xsell-variation.has-chips { padding-top: 0; padding-bottom: 0; line-height: 32px; align-content: center; }
	body.cf-cross-buy .cf-xsell-variation.has-chips::picker-icon { display: none; }
	body.cf-cross-buy .cf-xsell-variation.has-chips option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; }
	body.cf-cross-buy .cf-xsell-variation.has-chips option::before {
		content: ""; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
		background-color: var( --cf-chip, transparent ); box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .22 );
	}
	body.cf-cross-buy .cf-xsell-variation.has-chips option[style*="--cf-chip-img"]::before {
		background-color: transparent; background-image: var( --cf-chip-img ); background-size: 14px 14px;
		background-repeat: no-repeat; background-position: center; box-shadow: none;
	}
	body.cf-cross-buy .cf-xsell-variation.has-chips option:not( [style*="--cf-chip"] )::before { visibility: hidden; }
}

/* Mobile: a card — thumbnail left, name/meta/price stacked, then the controls on their
   own row (matches the slide-cart look). Undo display:contents so they group in a flex row. */
/* Phone/tablet (same breakpoint the cart items reflow at): mirror the cart-item card —
   thumb left, name/meta on the left with the price on the right (info is its own 2-col
   grid), controls floated LEFT under them (like the qty pill above), X in the corner. */
@media screen and ( max-width: 1024px ) {
	/* Centre the "you may need these" heading on phones/tablets. */
	body.cf-cross-buy .cross-sells.cf-cross-buy > h2 { text-align: center; }
	/* Subtotal lifted above the coupon (cf-cart.js relocateSubtotal): style it in its new home
	   inside the cart form to read like the totals-block subtotal it came from. */
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-subtotal.cf-sub-moved {
		display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px;
		padding: 16px 2px 16px 0 !important; margin: 0 !important;
		border: 0 !important; border-bottom: 1px solid #ededf1 !important; box-sizing: border-box;   /* item above already draws the top hairline; own hairline separates us from the coupon */
	}
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-subtotal.cf-sub-moved th,
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-subtotal.cf-sub-moved td {
		display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
		background: none !important; width: auto !important; white-space: nowrap; float: none !important;
	}
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-subtotal.cf-sub-moved th {
		text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #23252b;
	}
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-subtotal.cf-sub-moved td,
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-subtotal.cf-sub-moved td .amount {
		text-align: right; font-size: 16px; font-weight: 600; color: #23252b;
	}
	/* Kill the theme's responsive "Subtotal:" data-title pseudo-label (the totals block hides it,
	   but here the row lives in the form so that rule doesn't reach it). */
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-subtotal.cf-sub-moved td::before {
		display: none !important; content: "" !important;
	}
	/* Applied coupon lifted into the toggle's slot (cf-cart.js): style it in its new home in the
	   form — "COUPON: CODE ×" on the left, the discount amount on the right, like the totals row. */
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-discount.cf-disc-moved {
		display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
		padding: 14px 2px 14px 0 !important; margin: 0 !important;
		border: 0 !important; border-bottom: 1px solid #ededf1 !important; box-sizing: border-box;
	}
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-discount.cf-disc-moved th,
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-discount.cf-disc-moved td {
		display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
		background: none !important; width: auto !important; white-space: nowrap; float: none !important;
	}
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-discount.cf-disc-moved th {
		text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #23252b;
	}
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-discount.cf-disc-moved td,
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-discount.cf-disc-moved td .amount {
		text-align: right; font-size: 15px; font-weight: 600; color: #23252b;
	}
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-discount.cf-disc-moved td::before { display: none !important; content: "" !important; }
	body.cf-cart-clean form.woocommerce-cart-form tr.cart-discount.cf-disc-moved .woocommerce-remove-coupon { margin-left: 8px; color: #b11ad2; text-decoration: none; font-weight: 700; }
	body.cf-cross-buy .cf-xsell-item {
		grid-template-columns: 64px minmax( 0, 1fr ); grid-template-rows: auto auto;
		row-gap: 10px; column-gap: 14px; padding-right: 26px;
	}
	body.cf-cross-buy .cf-xsell-dismiss {
		position: absolute; top: 12px; right: 0; grid-column: auto; justify-self: auto;
		width: 24px; height: 24px; color: #c2c2cb !important; font-size: 19px;
	}
	body.cf-cross-buy .cf-xsell-dismiss:hover { color: #23252b !important; background: #f2f2f5; }
	body.cf-cross-buy .cf-xsell-thumb { grid-column: 1; grid-row: 1 / span 2; }
	body.cf-cross-buy .cf-xsell-thumb img { width: 64px; height: 64px; }
	/* Info: name/meta left, price right (spanning, vertically centred) — like the cart items. */
	body.cf-cross-buy .cf-xsell-info {
		grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr auto;
		grid-template-rows: auto auto; column-gap: 10px; align-items: start;
	}
	body.cf-cross-buy .cf-xsell-name { grid-column: 1; grid-row: 1; }
	/* Static colour label now lives on the controls row: push it hard-left so the qty pill +
	   ADD stay grouped on the right (matches the dropdown rows visually). */
	body.cf-cross-buy .cf-xsell-metaline { margin-right: auto; align-self: center; grid-column: auto; }
	body.cf-cross-buy .cf-xsell-price {
		grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; margin-top: 0;
		font-size: 15px; font-weight: 500; color: #3c3c43;
	}
	body.cf-cross-buy .cf-xsell-price .amount { font-weight: 500; }
	/* Controls float RIGHT under the name, all one height. */
	body.cf-cross-buy .cf-xsell-buy {
		grid-column: 2; grid-row: 2; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
	}
	/* Controls dissolve into the buy flex, but qty + ADD stay welded as ONE unit so the
	   variation-thing (dropdown / colour label) holds line 1 and the qty+ADD pair wraps together
	   beneath it — never ADD peeling off alone. */
	body.cf-cross-buy .cf-xsell-form { display: contents; }
	body.cf-cross-buy .cf-xsell-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
	body.cf-cross-buy .cf-xsell-variation { grid-column: auto; justify-self: auto; width: 130px !important; max-width: 130px !important; min-width: 130px !important; }
	body.cf-cross-buy .cf-xsell-qty { grid-column: auto; justify-self: auto; }
	body.cf-cross-buy .cf-xsell-add, body.cf-cross-buy .cf-xsell-options { grid-column: auto; justify-self: auto; }
}

/* Optional: hide the site footer on /cart at phone/tablet widths so checkout is the end of
   the page (cart_hide_footer_mobile → body.cf-cart-hide-footer). Desktop keeps the footer. */
@media screen and ( max-width: 1024px ) {
	body.cf-cart-hide-footer footer.site-footer,
	body.cf-cart-hide-footer footer.elementor-location-footer,
	body.cf-cart-hide-footer footer[class*="elementor-location-footer"],
	body.cf-cart-hide-footer > footer { display: none !important; }
}

/* ══ Floating checkout button (cart_sticky_checkout -> body.cf-cart-sticky-checkout) ══
   Mobile only. cf-cart.js appends .cf-sticky-checkout to <body> and toggles .is-show on scroll
   (shown once past the first item AND while the real checkout button is off-screen). No price by
   design. */
body.cf-cart-sticky-checkout .cf-sticky-checkout {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: #fff; border-top: 1px solid #ededf1; box-shadow: 0 -6px 22px -10px rgba( 0, 0, 0, .25 );
	padding: 12px 16px calc( 12px + env( safe-area-inset-bottom ) );
	/* Reveal via opacity, NOT transform: a fixed element whose transform slides off-screen and back
	   makes iOS Safari lose the layer and flash the background through on later scroll. Opacity keeps
	   the element still, so the compositor never loses it. */
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
body.cf-cart-sticky-checkout .cf-sticky-checkout.is-show {
	opacity: 1; visibility: visible; pointer-events: auto;
	transition: opacity .25s ease, visibility 0s;
}
body.cf-cart-sticky-checkout .cf-sticky-checkout__btn {
	display: block; width: 100%; box-sizing: border-box; background: #b11ad2; color: #fff !important;
	text-align: center; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
	padding: 15px; border-radius: 11px; text-decoration: none; box-shadow: 0 8px 20px -8px rgba( 177, 26, 210, .6 );
}
body.cf-cart-sticky-checkout .cf-sticky-checkout__btn:active { background: #9814b3; }
body.cf-cart-sticky-checkout .cf-sticky-checkout.is-pulse .cf-sticky-checkout__btn { animation: cfStickyPulse 1.15s ease-out 2; }
@keyframes cfStickyPulse {
	0%   { box-shadow: 0 8px 20px -8px rgba( 177, 26, 210, .6 ), 0 0 0 0 rgba( 177, 26, 210, .5 ); }
	100% { box-shadow: 0 8px 20px -8px rgba( 177, 26, 210, .6 ), 0 0 0 16px rgba( 177, 26, 210, 0 ); }
}
/* Never on desktop (JS only builds it on mobile; this guards a resize from mobile -> desktop). */
@media screen and ( min-width: 1025px ) { body.cf-cart-sticky-checkout .cf-sticky-checkout { display: none !important; } }
@media ( prefers-reduced-motion: reduce ) {
	body.cf-cart-sticky-checkout .cf-sticky-checkout { transition: none; }
	body.cf-cart-sticky-checkout .cf-sticky-checkout.is-pulse .cf-sticky-checkout__btn { animation: none; }
}

/* cache-bust: v2.246 */