/* ==========================================================================
   /cart2 — "Emerald & Slate" redesign (matches checkout2 + the approved demo).
   All rules are scoped under .cart2-page / .cart2-wrap so nothing leaks to the
   legacy /cart. The markup is the theme's cart2/ partials (cart.php,
   cart-items.php, cart-totals.php); this is a re-skin — no markup logic changes
   beyond the agreed structural choices (no coupon on cart, "Delivery FREE").
   ========================================================================== */

body.cart2-page {
	--c2-green: #059669;            /* Emerald accent */
	--c2-green-light: #10b981;      /* hover / gradient stop */
	--c2-green-dark: #047857;       /* gradient stop / strong text */
	--c2-green-ghost: rgba(5, 150, 105, .10);
	--c2-green-soft: #e6f6ef;
	--c2-sale: #c0392b;
	--c2-sale-ghost: rgba(192, 57, 43, .08);
	--c2-ink: #10231b;
	--c2-muted: #7a857e;
	--c2-faint: #9aa0ab;
	--c2-line: #e7ece9;
	--c2-line-soft: #eef2f0;
	--c2-panel: #f4f7f5;
	--c2-radius: 20px;
	--c2-radius-sm: 12px;
	--c2-shadow: 0 2px 6px rgba(16, 32, 24, .04), 0 18px 40px rgba(16, 32, 24, .07);
	--c2-shadow-sm: 0 1px 2px rgba(16, 32, 24, .04);
	--c2-card-shadow: 0 1px 2px rgba(16, 32, 24, .04), 0 8px 24px rgba(16, 32, 24, .06);
	--c2-cta: linear-gradient(135deg, #10b981, #047857);
	--c2-star: #00b67a;
	background: #fff;
	font-family: 'Lato', sans-serif;
	color: var(--c2-ink);
}

/* Container — owns the page width, centring and padding that the theme's
   .grid-container / .content-padding wrappers used to provide. Those classes have
   been removed from the /cart2 markup (page-cart2.php) so the theme's global
   style.css — and its ~125 !important rules — can no longer reach into the cart
   content. The vertical padding replaces .content-padding (was 20px 0 !important);
   the horizontal padding replaces the grid gutter so the content keeps clear of the
   viewport edge on small screens. */
body.cart2-page .cart2-main {
	max-width: 1400px;            /* matches checkout2's .checkout2-page-main */
	margin: 0 auto;
	padding: 24px 20px 64px;      /* vertical = old content-padding; horizontal = mobile gutters */
}
body.cart2-page .cart2-wrap {
	max-width: 1140px;
	margin: 0 auto;
}
@media (max-width: 767px) {
	body.cart2-page .cart2-main { padding: 16px 14px 48px; }
}

/* Isolation reset — pre-empts theme rules leaking into the cart subtree. Kept
   deliberately conservative (NOT `all: unset`): only box-sizing plus the list/paragraph
   defaults that bleed in via inheritance or low-specificity element selectors. Every
   list/element the redesign renders is styled explicitly below, so this only removes
   stray theme indentation/spacing. Scoped to body.cart2-page, so the legacy /cart and
   the shared header/footer chrome are completely untouched.

   The list/paragraph resets use :where() so they carry minimal specificity — enough to
   beat UA defaults and bare-element theme rules, but NOT the component classes below
   (.cart2-item, .cart2-si, .cart2-trust, …). Without :where() the `... li` selector
   (two element + two class) out-ranked `... .cart2-item` (one element + two class) and
   silently zeroed every card/recap/badge padding & margin — content hit the borders. */
body.cart2-page .cart2-wrap,
body.cart2-page .cart2-wrap *,
body.cart2-page .cart2-wrap *::before,
body.cart2-page .cart2-wrap *::after { box-sizing: border-box; }
body.cart2-page .cart2-wrap :where(ul, ol, li) { margin: 0; padding: 0; list-style: none; }
body.cart2-page .cart2-wrap :where(p) { margin: 0; }


/* --- Basket header: icon chip + title + count, breadcrumb centred, continue pill --- */
body.cart2-page .cart2-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 26px; }
body.cart2-page .cart2-head__l { display: flex; align-items: center; gap: 14px; min-width: 0; }
body.cart2-page .cart2-head__ico {
	flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: var(--c2-green-soft);
	color: var(--c2-green-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
	box-shadow: inset 0 0 0 1px rgba(5, 150, 105, .12);
}
body.cart2-page .cart2-head__title { font-size: 27px; font-weight: 900; letter-spacing: -.03em; margin: 0; line-height: 1.1; }
body.cart2-page .cart2-head__count { display: block; color: var(--c2-muted); font-size: 13.5px; font-weight: 700; margin-top: 3px; }
body.cart2-page .cart2-head__count b { color: var(--c2-green-dark); font-weight: 900; }
/* "Continue shopping" rendered as a pill button (matches checkout2 "Back to basket"). */
body.cart2-page .cart2-head__continue {
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	font-size: 13.5px; font-weight: 900; color: var(--c2-green-dark);
	background: #fff; border: 1px solid var(--c2-line); border-radius: 999px;
	padding: 9px 16px; box-shadow: var(--c2-shadow-sm); transition: border-color .15s, color .15s, transform .15s;
}
body.cart2-page .cart2-head__continue,
body.cart2-page .cart2-head__continue:link,
body.cart2-page .cart2-head__continue:visited { color: var(--c2-green-dark); text-decoration: none; }
body.cart2-page .cart2-head__continue:hover { border-color: var(--c2-green); color: var(--c2-green) !important; transform: translateX(-2px); }
body.cart2-page .cart2-head__continue i { font-size: 12px; transition: transform .15s; }
body.cart2-page .cart2-head__continue:hover i { transform: translateX(-2px); }

/* Progress breadcrumb (Basket > Checkout > Wait for delivery) — sits in the header */
/* `background: none` resets the theme's global `nav { background:#2b2b2b }`
   (style.css 1127) — our breadcrumb is a <nav>, so without this it goes black. */
body.cart2-page .cart2-crumbs { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; background: none; }
body.cart2-page .cart2-crumb {
	display: inline-flex; align-items: center; gap: 6px; color: var(--c2-muted); text-decoration: none;
	padding-bottom: 5px; border-bottom: 2.5px solid transparent; white-space: nowrap;
}
body.cart2-page a.cart2-crumb:hover { color: var(--c2-green-dark); }
body.cart2-page .cart2-crumb.is-active { color: var(--c2-green-dark); border-color: var(--c2-green-dark); }
body.cart2-page .cart2-crumb i { font-size: 13px; }
body.cart2-page .cart2-crumb__sep { color: #c2cdc6; font-size: 11px; }

@media (max-width: 760px) { body.cart2-page .cart2-crumbs { order: 3; flex-basis: 100%; margin-top: 12px; font-size: 13.5px; } }
@media (max-width: 560px) { body.cart2-page .cart2-head__ico { display: none; } body.cart2-page .cart2-head__continue span { display: none; } }

/* --- Free-shipping progress bar (auto-hides when no threshold applies) --- */
body.cart2-page .cart2-shipping-bar-wrap:empty { display: none; }
body.cart2-page .cart2-shipping-bar {
	border: 1px solid var(--c2-line);
	border-radius: var(--c2-radius-sm);
	background: #fff;
	padding: 14px 18px;
	margin-bottom: 20px;
	box-shadow: var(--c2-shadow-sm);
}
body.cart2-page .cart2-shipping-bar__msg { margin: 0 0 9px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
body.cart2-page .cart2-shipping-bar__msg i { color: var(--c2-green); }
body.cart2-page .cart2-shipping-bar.is-reached .cart2-shipping-bar__msg { color: var(--c2-green-dark); }
body.cart2-page .cart2-shipping-bar__track { height: 8px; border-radius: 999px; background: #e2e8e5; overflow: hidden; }
body.cart2-page .cart2-shipping-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--c2-green), var(--c2-green-light)); border-radius: 999px; transition: width .4s ease; }

/* --- Notices --- */
body.cart2-page .cart2-notices:empty { display: none; }
body.cart2-page .cart2-notices { margin-bottom: 14px; }
/* WooCommerce notices. Core's notice styling is dequeued on /cart2, so restyle the
   message / error / info banners on-brand (coupon applied, stock limits, etc.). */
body.cart2-page .woocommerce-message,
body.cart2-page .woocommerce-error,
body.cart2-page .woocommerce-info {
	list-style: none; margin: 0 0 12px; padding: 13px 16px; border-radius: var(--c2-radius-sm);
	border: 1px solid var(--c2-line); font-size: 13.5px; font-weight: 700; line-height: 1.4;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
}
body.cart2-page .woocommerce-message { background: var(--c2-green-soft); border-color: transparent; color: var(--c2-green-dark); }
body.cart2-page .woocommerce-error { background: var(--c2-sale-ghost); border-color: transparent; color: var(--c2-sale); }
body.cart2-page .woocommerce-error li { list-style: none; margin: 0; }
body.cart2-page .woocommerce-message .button,
body.cart2-page .woocommerce-info .button {
	margin-left: auto; padding: 8px 14px; border-radius: 9px; background: #fff; border: 1px solid var(--c2-line);
	color: var(--c2-ink); font-weight: 900; font-size: 12.5px; text-decoration: none; line-height: 1;
}

/* --- Grid --- */
body.cart2-page .cart2-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 34px;                    /* matches checkout2's wider column gap */
	align-items: start;
}

/* --- Item cards --- */
body.cart2-page .cart2-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
body.cart2-page .cart2-item {
	position: relative;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--c2-line);
	border-radius: var(--c2-radius);
	box-shadow: var(--c2-shadow-sm);
	padding: 20px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Green accent rail slides in on hover (demo). */
body.cart2-page .cart2-item::before {
	content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
	border-radius: 0 4px 4px 0; background: linear-gradient(var(--c2-green), var(--c2-green-light));
	opacity: 0; transition: opacity .2s;
}
body.cart2-page .cart2-item:hover { transform: translateY(-3px); box-shadow: var(--c2-shadow); border-color: #dfe7e2; }
body.cart2-page .cart2-item:hover::before { opacity: 1; }
body.cart2-page .cart2-item__thumb { flex: 0 0 110px; width: 110px; height: 110px; border-radius: 14px; overflow: hidden; background: #f5f7f6; }
body.cart2-page .cart2-item__thumb a,
body.cart2-page .cart2-item__thumb img { display: block; width: 100%; height: 100%; }
body.cart2-page .cart2-item__thumb img { object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
body.cart2-page .cart2-item__details {
	/* flex-basis 0 (not auto): the column's wide content — e.g. a long "Complete your
	   setup" add-on line under the name — must NOT count toward the flex line-break, or
	   the whole details column wraps below the thumb (title drops under the image).
	   minmax(0,1fr) lets the name track shrink so that add-on text wraps in place. */
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"name     subtotal"
		"warranty subtotal"
		"controls subtotal";
	column-gap: 16px;
	align-content: start;
}
body.cart2-page .cart2-item__name { grid-area: name; font-weight: 900; font-size: 17px; letter-spacing: -.015em; line-height: 1.25; }
body.cart2-page .cart2-item__name a { color: var(--c2-ink); text-decoration: none; }
body.cart2-page .cart2-item__name a:hover { color: var(--c2-green); }
body.cart2-page .cart2-item__name .variation,
body.cart2-page .cart2-item__name dl,
body.cart2-page .cart2-item__name .backorder_notification { font-weight: 400; font-size: 13px; color: var(--c2-muted); margin: 6px 0 0; }
body.cart2-page .cart2-item__name .variation dt, body.cart2-page .cart2-item__name .variation dd { display: inline; margin: 0; }
body.cart2-page .cart2-item__controls { grid-area: controls; display: flex; align-items: center; gap: 12px; margin-top: 14px; }
body.cart2-page .cart2-item__subtotal { grid-area: subtotal; text-align: right; font-weight: 900; font-size: 18px; white-space: nowrap; align-self: start; }

/* Item attributes (Grade / storage / unlocked) rendered as pills. */
body.cart2-page .cart2-item__name .variation { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
body.cart2-page .cart2-item__name .variation dt { display: none; }
body.cart2-page .cart2-item__name .variation dd { margin: 0; background: var(--c2-panel); border: 1px solid var(--c2-line); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; color: var(--c2-muted); }
/* Grade (pa_grade) attribute pill highlighted green (matches the design). WC builds
   the class via sanitize_html_class('variation-Grade') (capitalised, not lowercased),
   so match case-insensitively. */
body.cart2-page .cart2-item__name .variation dd[class*="grade" i] { background: var(--c2-green-soft); border-color: transparent; color: var(--c2-green-dark); }
body.cart2-page .cart2-item__name .variation dd p { margin: 0; }

/* Per-item warranty reassurance line. */
body.cart2-page .cart2-item__warranty { grid-area: warranty; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--c2-green-dark); margin-top: 11px; }
body.cart2-page .cart2-item__warranty i { font-size: 13px; }

/* Product-page add-ons selected for this line — a tidy green-tick list (replaces
   WooCommerce's raw <p>/<br> meta blob). */
body.cart2-page .cart2-item__addons { grid-column: 1 / -1; list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
body.cart2-page .cart2-item__addons li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--c2-muted); }
body.cart2-page .cart2-item__addons li i { flex: 0 0 auto; margin-top: 3px; font-size: 10px; color: var(--c2-green); }

/* --- Quantity stepper --- */
body.cart2-page .cart2-qty { display: inline-flex; align-items: center; border: 1px solid var(--c2-line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--c2-shadow-sm); }
body.cart2-page .cart2-qty.is-loading { opacity: .5; pointer-events: none; }
body.cart2-page .cart2-qty-minus,
body.cart2-page .cart2-qty-plus { border: 0; background: #fff; width: 38px; height: 40px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--c2-ink); transition: background .15s, color .15s; }
body.cart2-page .cart2-qty-minus:hover,
body.cart2-page .cart2-qty-plus:hover { background: var(--c2-green); color: #fff; }
body.cart2-page .cart2-qty .quantity { margin: 0; }
body.cart2-page .cart2-qty input.cart2-qty-input {
	width: 44px; height: 40px; border: 0; border-left: 1px solid var(--c2-line); border-right: 1px solid var(--c2-line);
	text-align: center; background: #fff; font-size: 15px; font-weight: 900; font-family: inherit; -moz-appearance: textfield; color: var(--c2-ink);
}
body.cart2-page .cart2-qty input.cart2-qty-input::-webkit-outer-spin-button,
body.cart2-page .cart2-qty input.cart2-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.cart2-page .cart2-qty.is-fixed input.cart2-qty-input { border-left: 0; }
/* At max stock the + is disabled (not a dead button) — greyed, no hover lift, not-allowed. */
body.cart2-page .cart2-qty-plus:disabled { color: var(--c2-faint); cursor: not-allowed; }
body.cart2-page .cart2-qty-plus:disabled:hover { background: #fff; color: var(--c2-faint); }
/* "Only X left" low-stock hint beside the stepper — gentle scarcity + tells the shopper why
   the + is capped. */
body.cart2-page .cart2-qty-stock { font-size: 12px; font-weight: 700; color: var(--c2-sale); white-space: nowrap; }
body.cart2-page .cart2-remove {
	display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--c2-muted);
	line-height: 1; text-decoration: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 12px;
	cursor: pointer; background: none; transition: color .15s, background .15s, border-color .15s;
}
body.cart2-page .cart2-remove i { font-size: 14px; }
body.cart2-page .cart2-remove:hover { color: var(--c2-sale); background: rgba(192, 57, 43, .07); border-color: rgba(192, 57, 43, .18); }

/* In-card add-ons ("Complete your setup") — tick to add (full-width row below the item) */
body.cart2-page .cart2-item { flex-wrap: wrap; row-gap: 0; }
body.cart2-page .cart2-addons { flex-basis: 100%; width: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--c2-line); }
body.cart2-page .cart2-addons__h { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--c2-muted); margin-bottom: 10px; }
body.cart2-page .cart2-addons__h > span { display: inline-flex; align-items: center; gap: 7px; }
body.cart2-page .cart2-addons__h i { color: var(--c2-green-dark); font-size: 13px; }
body.cart2-page .cart2-addons-dismiss { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c2-muted); font-size: 12px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
body.cart2-page .cart2-addons-dismiss:hover { background: var(--c2-line); color: #1a211e; }
body.cart2-page .cart2-addons-dismiss i { color: inherit; font-size: 12px; }
/* Dismiss collapses the block to a slim "Show setup suggestions" restore link (set by
   cart2.js via .is-dismissed) instead of removing it. Once any add-on is in the cart,
   .cart2-has-addon hides every dismiss control. */
body.cart2-page .cart2-addons-restore { display: none; }
body.cart2-page .cart2-addons.is-dismissed .cart2-addons__h,
body.cart2-page .cart2-addons.is-dismissed .cart2-ao { display: none; }
body.cart2-page .cart2-addons.is-dismissed .cart2-addons-restore {
	display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent;
	cursor: pointer; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
	color: var(--c2-muted); transition: color .15s;
}
body.cart2-page .cart2-addons.is-dismissed .cart2-addons-restore:hover { color: var(--c2-green-dark); }
body.cart2-page .cart2-addons.is-dismissed .cart2-addons-restore i { color: var(--c2-green-dark); font-size: 13px; }
body.cart2-page .cart2-wrap.cart2-has-addon .cart2-addons-dismiss { display: none; }
body.cart2-page .cart2-ao { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c2-line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; position: relative; transition: border-color .15s, background .15s; }
body.cart2-page .cart2-ao:last-child { margin-bottom: 0; }
body.cart2-page .cart2-ao:hover { border-color: #c9d4ce; }
body.cart2-page .cart2-ao input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
body.cart2-page .cart2-ao-box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #c2cdc6; position: relative; transition: .15s; }
body.cart2-page .cart2-ao input:checked ~ .cart2-ao-box { border-color: var(--c2-green); background: var(--c2-green); }
body.cart2-page .cart2-ao input:checked ~ .cart2-ao-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
body.cart2-page .cart2-ao:has(input:checked) { border-color: var(--c2-green); background: var(--c2-green-soft); }
/* While an add/remove update is in flight the row is locked (cart2.js) so a rapid
   re-toggle can't fire a contradictory request — dim it and show a progress cursor. */
body.cart2-page .cart2-ao.is-loading { opacity: .6; pointer-events: none; cursor: progress; }
body.cart2-page .cart2-ao-name { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--c2-ink); min-width: 0; }
body.cart2-page .cart2-ao-price { font-weight: 900; font-size: 13.5px; white-space: nowrap; color: var(--c2-ink); }
body.cart2-page .cart2-ao-price del { color: var(--c2-muted); font-weight: 400; font-size: 11px; margin-left: 5px; }
body.cart2-page .cart2-ao-price ins { text-decoration: none; }
/* Quantity stepper, shown on the row only once the add-on is in the cart. The
   buttons stop the click from toggling the row checkbox (handled in cart2.js). */
body.cart2-page .cart2-ao-qty { display: inline-flex; align-items: center; border: 1px solid var(--c2-line); border-radius: 8px; overflow: hidden; background: #fff; }
body.cart2-page .cart2-ao-qty button { width: 26px; height: 26px; border: 0; background: #fff; font-size: 14px; font-weight: 900; line-height: 1; color: var(--c2-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
body.cart2-page .cart2-ao-qty button:hover { background: var(--c2-green-soft); color: var(--c2-green-dark); }
body.cart2-page .cart2-ao-q { min-width: 24px; text-align: center; font-size: 13px; font-weight: 900; }

/* --- Secondary actions (coupon is intentionally NOT shown on /cart2 — it lives on
   /checkout2; see the design). The no-JS "Update cart" button stays styled. --- */
body.cart2-page .cart2-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
body.cart2-page .cart2-actions .button {
	border: 1px solid var(--c2-line);
	background: var(--c2-panel);
	color: var(--c2-ink);
	border-radius: var(--c2-radius-sm);
	padding: 0 20px;
	height: 46px;
	line-height: 44px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	font-family: inherit;
	text-transform: none;
	transition: background .15s, border-color .15s;
}
body.cart2-page .cart2-actions .button:hover { background: #ecefed; border-color: #d4ddd8; color: var(--c2-ink); }

/* --- Summary (right, sticky) ---
   The whole summary COLUMN sticks (card + the express-pay card below it) as one unit, so
   the express buttons can never overlap the trust badges / Trustpilot at the bottom of the
   card on scroll (which happened when only the inner card was sticky and the express card
   was a non-sticky sibling). */
body.cart2-page .cart2-summary {
	position: sticky;
	top: 22px;
	align-self: start;
}
body.cart2-page .cart2-summary-inner {
	position: relative;
	background: #fff;
	border: 1px solid var(--c2-line);
	border-radius: 24px;
	box-shadow: var(--c2-shadow);
	/* One consistent card inset (matches checkout2's .checkout2-summary-inner) instead
	   of each child re-declaring its own 24px horizontal padding/margin. The children
	   below carry vertical rhythm only. */
	padding: 22px 24px;
	/* No overflow:hidden needed — nothing in the card bleeds past the rounded corners. */
}
/* Shipping/totals refresh feedback. #cart2-summary IS this element and persists across
   the fragment swap (only its innerHTML is replaced), so cart2.js toggles .is-updating
   on it for the duration of the set_shipping/calc_shipping AJAX. A flowing emerald
   outline (mirrors checkout2's loading state) signals "working", and the price rows dim
   so the stale totals read as pending — without dimming the shipping cards, whose chosen
   option is already highlighted instantly via :checked. */
body.cart2-page .cart2-summary-inner.is-updating::after {
	content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 2px; pointer-events: none; z-index: 4;
	background: linear-gradient(90deg, var(--c2-green-light), var(--c2-green), var(--c2-green-dark), var(--c2-green-light));
	background-size: 300% 100%; animation: cart2flow 1.6s linear infinite;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes cart2flow { to { background-position: 300% 0; } }
body.cart2-page .cart2-summary-inner .cart2-totals__rows { transition: opacity .2s ease; }
body.cart2-page .cart2-summary-inner.is-updating .cart2-totals__rows { opacity: .5; }
/* Order-summary skeleton shown while the totals refresh — identical to checkout2's
   "Your order" skeleton so both pages refresh the same way. It lives inside the
   #cart2-summary fragment (so each swapped fragment carries its own) and overlays the
   stale content while the AJAX is in flight. Toggled by .is-updating (cart2.js). */
body.cart2-page .cart2-sum-skel { position: absolute; inset: 0; z-index: 6; background: #fff; border-radius: 24px; padding: 22px 24px; display: none; flex-direction: column; }
body.cart2-page .cart2-summary-inner.is-updating .cart2-sum-skel { display: flex; }
@keyframes c2shimmer { to { background-position: -200% 0; } }
body.cart2-page .c2skb { display: block; border-radius: 8px; background: linear-gradient(90deg, #e6ece9 25%, #f3f7f5 37%, #e6ece9 63%); background-size: 200% 100%; animation: c2shimmer 1.2s linear infinite; }
body.cart2-page .c2sk-li { display: flex; align-items: center; gap: 12px; }
body.cart2-page .c2sk-li .c2skc { width: 52px; height: 52px; border-radius: 12px; flex: none; }
body.cart2-page .c2sk-li .c2sk-col { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
body.cart2-page .c2sk-div { height: 1px; background: var(--c2-line-soft); margin: 8px 0 16px; }
body.cart2-page .c2sk-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
body.cart2-page .c2sk-row.c2sk-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--c2-line-soft); }
body.cart2-page .cart2-totals__title {
	margin: 0 0 14px; padding: 0; font-size: 18px; font-weight: 900; letter-spacing: -.02em;
}
/* Product recap line items in the summary (matches the demo "Your order") */
body.cart2-page .cart2-summary-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* align-items:center so the thumbnail sits vertically centred against the whole text
   block (matches checkout2's absolutely-centred .checkout2-item-thumb); the price keeps
   its own align-self:flex-start so it stays top-aligned like checkout2's .product-total. */
body.cart2-page .cart2-si { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 0; padding: 15px 0; border-bottom: 1px solid var(--c2-line-soft); }
/* Soft grey tile, no border, contained image blended into the tile (matches
   checkout2's .checkout2-item-thumb). The image's white backing disappears via
   mix-blend-mode so there's no white box / framed look. */
body.cart2-page .cart2-si__thumb { position: relative; flex: 0 0 auto; width: 54px; height: 54px; background: #f5f7f6; border-radius: 12px; }
body.cart2-page .cart2-si__thumb img { width: 100%; height: 100%; border-radius: 12px; object-fit: contain; padding: 6px; display: block;
	mix-blend-mode: multiply; border: 0; background: none; }
/* flex-basis 0 (not auto): in the narrow summary column the info column's widest line
   — e.g. the trade-in row's "Trade-in value paid separately after we receive it" — must
   not count toward the flex line-break, or the price (+£155.00) wraps onto its own line
   below. With basis 0 the amount stays top-right beside the eyebrow, matching checkout2. */
body.cart2-page .cart2-si__info { flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; justify-content: center; }
body.cart2-page .cart2-si__name { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--c2-ink); overflow-wrap: anywhere; }
/* Add-on recap line — grey, matching checkout2's .c2-li-meta (was green, which made the
   long add-on list read inconsistently between cart2 and checkout2). */
body.cart2-page .cart2-si__meta { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--c2-muted); overflow-wrap: anywhere; }
/* Quantity as a muted text line under the name (matches checkout2's "Qty N"). */
body.cart2-page .cart2-si__qty-line { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--c2-muted); }
/* Stays right-aligned, never shrinks into the text or widens the row. Kept a step
   below the order Total (below) so the Total reads as the single dominant figure. */
body.cart2-page .cart2-si__price { flex: 0 0 auto; align-self: flex-start; padding-top: 2px; text-align: right; font-weight: 900; font-size: 15px; white-space: nowrap; }
/* "Complete your setup" add-on recap — a full-width sub-row that wraps below the device
   line so its price sits in the same right-hand column as the device price. Indented by
   the thumb width + gap (54 + 12) so the name aligns under the product name. */
body.cart2-page .cart2-si__addon { flex-basis: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-left: 66px; margin-top: 8px; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--c2-muted); }
body.cart2-page .cart2-si__addon-name { overflow-wrap: anywhere; }
/* De-emphasise the add-on price: small, regular weight, muted — so even though it sits
   in the same right-hand column as the device price, it reads as a secondary line and
   never as a second product price. Override wc_price's amount markup explicitly. */
body.cart2-page .cart2-si__addon-price { flex: 0 0 auto; white-space: nowrap; }
body.cart2-page .cart2-si__addon-price,
body.cart2-page .cart2-si__addon-price .amount,
body.cart2-page .cart2-si__addon-price .woocommerce-Price-amount { font-size: 12px; font-weight: 400; color: var(--c2-muted); }

/* Buy-basket trade-in line — a read-only "Trade in" row mirroring the
   checkout2 summary row (review-order.php :: .iout-c2-ti-item). The trade-in
   value is a separate post-purchase payout, not a deduction, so the amount is
   green and prefixed "+"; the placeholder tile carries a device glyph. */
body.cart2-page .cart2-si--ti { align-items: flex-start; }
body.cart2-page .cart2-si__thumb--ph { display: flex; align-items: center; justify-content: center; color: var(--c2-green); font-size: 20px; }
body.cart2-page .cart2-si__ti-eyebrow { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 2px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--c2-green); }
body.cart2-page .cart2-si__ti-remove { align-self: flex-start; margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 800; color: var(--c2-faint); }
body.cart2-page .cart2-si__ti-remove:hover { color: var(--c2-sale); text-decoration: underline; }
body.cart2-page .cart2-si__ti-amount { color: var(--c2-green-dark); }

body.cart2-page .cart2-totals__rows { padding: 16px 0 0; }

/* Coupon widget (entered on the basket, above subtotal) */
body.cart2-page .cart2-couponbox { margin: 0 0 14px; }
body.cart2-page .cart2-coupon-toggle {
	display: flex; align-items: center; gap: 8px; width: 100%; font-size: 13px; font-weight: 900; color: var(--c2-green-dark);
	padding: 12px 14px; border: 1px dashed #cdd9d0; border-radius: var(--c2-radius-sm); background: var(--c2-panel);
	cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s;
}
body.cart2-page .cart2-coupon-toggle:hover { background: var(--c2-green-soft); border-color: var(--c2-green); }
body.cart2-page .cart2-coupon-chev { margin-left: auto; transition: transform .2s; }
body.cart2-page .cart2-couponbox.is-open .cart2-coupon-chev { transform: rotate(180deg); }
body.cart2-page .cart2-coupon-row { display: none; gap: 8px; margin-top: 10px; }
body.cart2-page .cart2-couponbox.is-open .cart2-coupon-row { display: flex; }
body.cart2-page .cart2-coupon-row .input-text {
	flex: 1; min-width: 0; border: 1px solid var(--c2-line); border-radius: 9px;
	padding: 11px 13px; font-size: 13px; font-family: inherit; background: #fff;
}
body.cart2-page .cart2-coupon-row .input-text:focus { outline: none; border-color: var(--c2-green); box-shadow: 0 0 0 3px var(--c2-green-ghost); }
body.cart2-page .cart2-coupon-row .cart2-apply-coupon {
	flex: none; padding: 0 18px; border-radius: 9px; font-weight: 900; font-size: 13px; cursor: pointer; font-family: inherit;
	border: 1px solid var(--c2-line); background: #fff; color: var(--c2-ink); transition: border-color .15s, color .15s;
}
body.cart2-page .cart2-coupon-row .cart2-apply-coupon:hover { border-color: var(--c2-green); color: var(--c2-green); }

/* Shipment selector (real WC methods rendered as cards, on the cart) */
body.cart2-page .cart2-shipsec { margin: 8px 0 4px; }
body.cart2-page .cart2-shiplbl { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--c2-muted); margin: 6px 0 10px; }
body.cart2-page .cart2-ship { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--c2-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; cursor: pointer; transition: border-color .15s, background .15s; }
body.cart2-page .cart2-ship:hover { border-color: #c9d4ce; }
body.cart2-page .cart2-ship input { position: absolute; opacity: 0; pointer-events: none; }
body.cart2-page .cart2-ship-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c2cdc6; position: relative; transition: .15s; }
body.cart2-page .cart2-ship-txt { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--c2-ink); }
body.cart2-page .cart2-ship-amt { font-weight: 900; font-size: 13.5px; color: var(--c2-green-dark); white-space: nowrap; }
body.cart2-page .cart2-ship-amt.is-free { color: var(--c2-green); }
body.cart2-page .cart2-ship.is-sel { border-color: var(--c2-green); background: var(--c2-green-soft); }
body.cart2-page .cart2-ship.is-sel .cart2-ship-radio { border-color: var(--c2-green); }
body.cart2-page .cart2-ship.is-sel .cart2-ship-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--c2-green); }
/* Instant feedback: reflect the just-clicked shipping option immediately via :checked,
   before the set_shipping AJAX recalculation re-renders the summary with the server
   `is-sel` class. Without this the click feels dead for the whole round-trip. Mirrors
   checkout2's shipping rows and the add-on :has(input:checked) pattern. */
body.cart2-page .cart2-ship:has( input:checked ) { border-color: var(--c2-green); background: var(--c2-green-soft); }
body.cart2-page .cart2-ship input:checked ~ .cart2-ship-radio { border-color: var(--c2-green); }
body.cart2-page .cart2-ship input:checked ~ .cart2-ship-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--c2-green); }
body.cart2-page .cart2-ship-note { font-size: 12px; color: var(--c2-muted); margin: 10px 0 6px; }
body.cart2-page .cart2-ship-info {
	display: flex; gap: 7px; align-items: flex-start; margin: 2px 0 6px; padding: 10px 12px;
	background: var(--c2-green-soft); border-radius: 10px; font-size: 12px; line-height: 1.4; color: var(--c2-green-dark); font-weight: 700;
}
body.cart2-page .cart2-ship-info i { margin-top: 1px; flex: 0 0 auto; }
body.cart2-page .cart2-calc-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 900; color: var(--c2-green-dark); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; transition: color .15s; }
body.cart2-page .cart2-calc-toggle i { font-size: 13px; }
body.cart2-page .cart2-calc-toggle:hover { color: var(--c2-green); }
body.cart2-page .cart2-calc-form { display: none; flex-direction: column; gap: 9px; margin: 12px 0 4px; }
body.cart2-page .cart2-calc-form.is-open { display: flex; }
body.cart2-page .cart2-calc-form select,
body.cart2-page .cart2-calc-form .input-text { width: 100%; border: 1px solid var(--c2-line); border-radius: 9px; padding: 11px 13px; font-size: 13px; font-family: inherit; background: #fff; color: var(--c2-ink); }
body.cart2-page .cart2-calc-form select:focus,
body.cart2-page .cart2-calc-form .input-text:focus { outline: none; border-color: var(--c2-green); }
body.cart2-page .cart2-calc-update { align-self: flex-start; padding: 10px 18px; border-radius: 9px; font-weight: 900; font-size: 13px; border: 1px solid var(--c2-line); background: #fff; color: var(--c2-ink); cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s; }
body.cart2-page .cart2-calc-update:hover { border-color: var(--c2-green); color: var(--c2-green); }
body.cart2-page .cart2-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; color: var(--c2-muted); }
body.cart2-page .cart2-row span:last-child { color: var(--c2-ink); font-weight: 700; }
body.cart2-page .cart2-row.cart-discount, body.cart2-page .cart2-row.cart-discount span:last-child { color: var(--c2-green-dark); font-weight: 700; }
/* Static "Delivery — FREE" reassurance row (cart shows delivery is free; the method
   is selected on /checkout2). */
body.cart2-page .cart2-row--delivery .cart2-free { color: var(--c2-green); font-weight: 900; }
body.cart2-page .cart2-row.order-total {
	border-top: 1px solid var(--c2-line); margin-top: 8px; padding-top: 16px; align-items: baseline;
}
body.cart2-page .cart2-row.order-total span:first-child { font-weight: 900; font-size: 17px; color: var(--c2-ink); }
/* The total figure is the dominant number in the summary — noticeably larger than the
   per-line product prices (15px) above it. Override wc_price's amount markup so the
   theme's default .amount size can't pull it back down. */
body.cart2-page .cart2-row.order-total span:last-child,
body.cart2-page .cart2-row.order-total span:last-child .amount,
body.cart2-page .cart2-row.order-total span:last-child .woocommerce-Price-amount { font-weight: 900; font-size: 22px; letter-spacing: -.01em; color: var(--c2-ink); }
/* Trade-in attached: the total splits into two full-width rows — "Total due today"
   (paid now) and "Total after trade-in" (net), each label-left / amount-right so the
   labels share a column and the amounts align in a column, mirroring the summary rows
   above. The __row-scoped selectors out-rank the generic order-total span rules. */
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total { display: flex; flex-direction: column; gap: 6px; width: 100%; }
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__row .cart2-ti-total__lbl { font-weight: 900; font-size: 16px; color: var(--c2-ink); }
/* Amount matches its label's size (not larger) — bold weight keeps the emphasis.
   wc_price wraps the figure in .woocommerce-Price-amount, which the generic
   `.order-total span:last-child .woocommerce-Price-amount` rule above sizes to 22px,
   so size the INNER span too (not just the .cart2-ti-total__amt <b>) or the price
   stays 22px/ink. Extra class out-ranks that rule. The currency symbol gets its own
   .woocommerce-Price-currencySymbol span — and since it's the only/last element child
   of its <bdi>, the generic `.order-total span:last-child` rule sizes IT to 22px/ink
   directly (not via inheritance from .woocommerce-Price-amount), so it must be sized
   here too or the £ renders larger/darker than the digits. */
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__row .cart2-ti-total__amt,
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__row .cart2-ti-total__amt .amount,
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__row .cart2-ti-total__amt .woocommerce-Price-amount,
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__row .cart2-ti-total__amt .woocommerce-Price-currencySymbol { font-weight: 900; font-size: 16px; letter-spacing: -.01em; color: var(--c2-ink); white-space: nowrap; }
/* "Total due today" is the dominant figure (above); "Total after trade-in" is the
   secondary line — smaller, lighter weight and muted so the hierarchy is clear. */
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__after .cart2-ti-total__lbl { font-weight: 700; font-size: 13.5px; color: var(--c2-muted); }
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__after .cart2-ti-total__amt,
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__after .cart2-ti-total__amt .amount,
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__after .cart2-ti-total__amt .woocommerce-Price-amount,
body.cart2-page .cart2-row.order-total--ti .cart2-ti-total__after .cart2-ti-total__amt .woocommerce-Price-currencySymbol { font-weight: 700; font-size: 13.5px; color: var(--c2-muted); }
body.cart2-page .cart2-row .woocommerce-remove-coupon { font-size: 12px; margin-left: 6px; font-weight: 400; }

/* Shipment row kept for resilience (normally not shown on /cart2). If WooCommerce
   does render it, flatten the raw <tr><th><td> into clean stacked blocks. */
body.cart2-page .cart2-row--shipping { display: block; padding: 10px 0; border: 0; }
body.cart2-page .cart2-row--shipping table,
body.cart2-page .cart2-row--shipping tbody,
body.cart2-page .cart2-row--shipping tr,
body.cart2-page .cart2-row--shipping th,
body.cart2-page .cart2-row--shipping td { display: block; width: auto; border: 0; padding: 0; margin: 0; text-align: left; }
body.cart2-page .cart2-row--shipping th { font-weight: 700; color: var(--c2-muted); font-size: 13px; margin-bottom: 8px; }
body.cart2-page .cart2-row--shipping #shipping_method { list-style: none; margin: 0; padding: 0; }
body.cart2-page .cart2-row--shipping #shipping_method li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
body.cart2-page .cart2-row--shipping #shipping_method li input { accent-color: var(--c2-green); flex: 0 0 auto; margin: 2px 0 0; }
body.cart2-page .cart2-row--shipping #shipping_method label {
	flex: 1; display: flex; justify-content: space-between; gap: 10px; margin: 0;
	font-weight: 600; line-height: 1.3; color: var(--c2-ink);
}
body.cart2-page .cart2-row--shipping #shipping_method label .amount { font-weight: 800; white-space: nowrap; }
body.cart2-page .cart2-row--shipping .delivery-info { color: var(--c2-faint); }
body.cart2-page .cart2-row--shipping .woocommerce-shipping-calculator,
body.cart2-page .cart2-row--shipping .shipping-calculator-button,
body.cart2-page .cart2-row--shipping > td > .woocommerce-shipping-destination,
body.cart2-page .cart2-row--shipping .woocommerce-shipping-destination { display: block; margin-top: 10px; font-size: 12.5px; color: var(--c2-muted); }
body.cart2-page .cart2-row--shipping .shipping-calculator-button { font-weight: 700; color: var(--c2-green-dark); }

/* --- Express pay row (auto-hides when no gateway renders one) --- */
body.cart2-page .cart2-express:empty { display: none; }
body.cart2-page .cart2-express { margin: 4px 0 0; }

/* Express checkout buttons (Apple/Google Pay, PayPal). The buttons themselves are
   brand-controlled (Apple/Google/PayPal mandate their look), so we can't recolour them —
   instead we own the container so they sit in a card that matches the order summary and
   clearly belongs to it: same white/border/radius/shadow as .cart2-summary-inner, the
   same 24px inset, a tidy "Or pay faster with" divider, and full-width buttons. It lives
   just below the summary card, OUTSIDE #cart2-summary, so the cart's AJAX refresh never
   wipes or re-initialises the gateway buttons. */
body.cart2-page .cart2-express-pay {
	margin-top: 14px;
	background: #fff;
	border: 1px solid var(--c2-line);
	border-radius: 24px;
	box-shadow: var(--c2-shadow);
	padding: 18px 24px;
}
body.cart2-page .cart2-express-pay:empty { display: none; }
body.cart2-page .cart2-express-pay__label {
	display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
	color: var(--c2-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
body.cart2-page .cart2-express-pay__label::before,
body.cart2-page .cart2-express-pay__label::after { content: ""; flex: 1; height: 1px; background: var(--c2-line-soft); }
/* Stretch whatever each gateway renders to the card width so the buttons line up with
   the summary's CTA instead of sitting at their default intrinsic width. */
body.cart2-page .cart2-express-pay > *:not(.cart2-express-pay__label) { width: 100%; max-width: 100%; }
body.cart2-page .cart2-express-pay .button,
body.cart2-page .cart2-express-pay [type="button"] { width: 100%; }

/* --- Proceed CTA (gradient) --- */
body.cart2-page .cart2-checkout-btn {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	margin: 12px 0 0; background: var(--c2-cta); color: #fff; text-align: center;
	border-radius: 14px; padding: 17px 18px; font-weight: 900; font-size: 16px;
	text-decoration: none; box-shadow: 0 12px 26px rgba(5, 150, 105, .28); transition: transform .18s, box-shadow .18s, filter .18s;
}
body.cart2-page .cart2-checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(5, 150, 105, .36); filter: brightness(1.04); }
/* Beat the theme's global `a { color:#007811 }` so the label stays white. */
body.cart2-page .cart2-checkout-btn,
body.cart2-page .cart2-checkout-btn:link,
body.cart2-page .cart2-checkout-btn:visited,
body.cart2-page .cart2-checkout-btn:hover { color: #fff !important; }

/* --- Payment-method banners (payment chosen on the cart -> /checkout2/?method=) --- */
body.cart2-page .cart2-paystack { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; }
body.cart2-page .cart2-pgate {
	display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 13px 15px;
	border: 2px solid transparent; text-decoration: none; position: relative; transition: filter .15s;
}
body.cart2-page .cart2-pgate:hover { filter: brightness(.97); }
body.cart2-page .cart2-pgate.is-disabled { opacity: .7; pointer-events: none; }
body.cart2-page .cart2-pg-main { flex: 1; min-width: 0; }
body.cart2-page .cart2-pg-title { font-size: 14.5px; font-weight: 900; display: flex; align-items: center; gap: 5px; line-height: 1.2; }
body.cart2-page .cart2-pg-title i { font-size: 11px; }
body.cart2-page .cart2-pg-sub { display: block; font-size: 12px; font-weight: 400; margin-top: 3px; opacity: .9; }
body.cart2-page .cart2-pg-logo { flex: none; font-weight: 900; font-size: 12px; border-radius: 6px; padding: 5px 8px; white-space: nowrap; }
/* Brand colours (anchored + :link/:visited to beat the global `a{color:#007811}`) */
body.cart2-page .cart2-pg-card { background: #1c7c2b; }
body.cart2-page .cart2-pg-clearpay { background: #b2fce4; }
body.cart2-page .cart2-pg-klarna { background: #ffb3c7; }
body.cart2-page .cart2-pg-raylo { background: #4b50ef; }
body.cart2-page .cart2-pg-card, body.cart2-page .cart2-pg-card:link, body.cart2-page .cart2-pg-card:visited,
body.cart2-page .cart2-pg-raylo, body.cart2-page .cart2-pg-raylo:link, body.cart2-page .cart2-pg-raylo:visited { color: #fff; }
body.cart2-page .cart2-pg-clearpay, body.cart2-page .cart2-pg-clearpay:link, body.cart2-page .cart2-pg-clearpay:visited { color: #0a241d; }
body.cart2-page .cart2-pg-klarna, body.cart2-page .cart2-pg-klarna:link, body.cart2-page .cart2-pg-klarna:visited { color: #1a1310; }
body.cart2-page .cart2-pg-clearpay .cart2-pg-logo { background: #000; color: #b2fce4; }
body.cart2-page .cart2-pg-klarna .cart2-pg-logo { background: transparent; color: #000; padding: 0; font-size: 15px; }
body.cart2-page .cart2-pg-raylo .cart2-pg-logo { background: #101014; color: #fff; }

/* --- Trust badges (2x2) ---
   Sized to fit inside the summary card's 24px inset: smaller icon/label + min-width:0
   so the longer labels ("Free 30-day returns") wrap gracefully instead of running to
   the card edge. Drops to a single column on very narrow phones. */
body.cart2-page .cart2-trust {
	list-style: none; margin: 24px 0 0; padding: 22px 0 0;
	border-top: 1px solid var(--c2-line-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px;
}
body.cart2-page .cart2-trust li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--c2-ink); }
body.cart2-page .cart2-trust li span { min-width: 0; }
body.cart2-page .cart2-trust i {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--c2-green-soft);
	color: var(--c2-green-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}

/* --- Trustpilot rating line (summary) --- */
body.cart2-page .c2-tp {
	display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
	margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--c2-line-soft);
	font-size: 12.5px; color: var(--c2-muted);
}
body.cart2-page .c2-tp__stars { color: #00b67a; font-weight: 900; white-space: nowrap; }
body.cart2-page .c2-tp > span { white-space: nowrap; }
body.cart2-page .c2-tp b { color: var(--c2-ink); }

/* --- Product recommendations / cross-sells ---
   On /cart2 the recommendation engine's products are relocated into the line-item
   card as the "Complete your setup" add-ons (see cart2.js harvestAddons), so the
   stock block at the foot of the cart is hidden. --- */
body.cart2-page .cart2-cross-sells,
body.cart2-page .cross-sells,
body.cart2-page [id^="wc-prl-deployment-"],
body.cart2-page .wc-prl-recommendations { display: none !important; }

/* --- Responsive --- */
@media (max-width: 900px) {
	body.cart2-page .cart2-grid { grid-template-columns: 1fr; gap: 18px; }
	body.cart2-page .cart2-summary { order: 2; position: static; }
	body.cart2-page .cart2-summary-inner { position: relative; }
}
@media (max-width: 560px) {
	/* Re-flow each line as a grid: the image and product name share the top row
	   (the name fills what was dead white space beside the thumb), with price,
	   warranty, the stepper and subtotal stacked full-width beneath. display:contents
	   lifts the .cart2-item__details children up so the name can sit next to the image. */
	body.cart2-page .cart2-item {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 0;
		align-items: start;
		padding: 14px;
	}
	body.cart2-page .cart2-item__details { display: contents; }
	/* Square thumb: width AND height are 84px so the image no longer leaves a grey gap below it. */
	body.cart2-page .cart2-item__thumb { grid-column: 1; grid-row: 1; width: 84px; height: 84px; }
	body.cart2-page .cart2-item__name { grid-column: 2; grid-row: 1; align-self: center; }
	body.cart2-page .cart2-item__warranty { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; }
	body.cart2-page .cart2-item__controls { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; }
	body.cart2-page .cart2-item__subtotal { grid-column: 1 / -1; grid-row: 4; text-align: left; margin-top: 10px; }
	body.cart2-page .cart2-addons { grid-column: 1 / -1; }
}

/* --- USP / feature strip (rendered by header_main + footer_main, top & bottom) ---
   Emerald restyle, scoped to /cart2 only so the global strip elsewhere is unchanged.
   #usp sits outside .cart2-page, so these use literal Emerald values (not the vars). */
body.page-template-page-cart2-php #usp {
	background: #fff;
	border-top: 1px solid #e7ece9;
	border-bottom: 1px solid #e7ece9;
	font-family: 'Lato', sans-serif;
}
body.page-template-page-cart2-php #usp .nusps {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 0;
	height: auto;       /* override global .nusps{height:40px} so taller items don't overflow */
	padding: 6px 0;
}
body.page-template-page-cart2-php #usp .nusps > div {
	flex: 1 1 0;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 7px;
	padding: 16px 14px;
	position: relative;
}
body.page-template-page-cart2-php #usp .nusps > div + div::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 40px;
	width: 1px;
	background: #eef2f0;
}
body.page-template-page-cart2-php #usp .nusps i {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: #e6f6ef;
	color: #047857;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	line-height: 1;
}
body.page-template-page-cart2-php #usp .usp-header {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .01em;
	color: #10231b;
	line-height: 1.25;
}
body.page-template-page-cart2-php #usp .usp-sub {
	font-size: 12px;
	font-weight: 400;
	color: #7a857e;
	line-height: 1.3;
}
body.page-template-page-cart2-php #usp .usp-sub br { display: none; }

/* ==========================================================================
   Empty basket — Emerald empty state + "You might like" recommendations.
   Renders via cart2/cart-empty.php when the basket is empty (the default
   WooCommerce empty-cart markup is swapped out only on /cart2).
   ========================================================================== */
body.cart2-page .cart2-empty {
	text-align: center;
	background: #fff;
	border: 1px solid var(--c2-line);
	border-radius: var(--c2-radius);
	box-shadow: var(--c2-card-shadow);
	padding: 56px 28px 48px;
	margin: 8px 0 36px;
}
body.cart2-page .cart2-empty__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 88px; height: 88px; margin-bottom: 22px;
	border-radius: 50%;
	background: var(--c2-green-soft);
	color: var(--c2-green-dark);
	font-size: 34px;
}
body.cart2-page .cart2-empty__title {
	margin: 0 0 10px;
	font-size: 28px; font-weight: 900; color: var(--c2-ink);
	line-height: 1.2;
}
body.cart2-page .cart2-empty__sub {
	margin: 0 auto 26px;
	max-width: 460px;
	font-size: 16px; color: var(--c2-muted); line-height: 1.5;
}
body.cart2-page .cart2-empty__notice {
	margin: 0 auto 22px; max-width: 460px;
	font-size: 14px; color: var(--c2-muted);
}
body.cart2-page .cart2-empty__notice p { margin: 0; }
body.cart2-page .cart2-empty__cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	background: var(--c2-cta); text-align: center;
	border-radius: 14px; padding: 15px 30px; font-weight: 900; font-size: 16px;
	text-decoration: none; box-shadow: 0 12px 26px rgba(5, 150, 105, .28);
	transition: transform .18s, box-shadow .18s, filter .18s;
}
body.cart2-page .cart2-empty__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(5, 150, 105, .36); filter: brightness(1.04); }
/* Beat the theme's global `a { color:#007811 }` so the label stays white. */
body.cart2-page .cart2-empty__cta,
body.cart2-page .cart2-empty__cta:link,
body.cart2-page .cart2-empty__cta:visited,
body.cart2-page .cart2-empty__cta:hover { color: #fff !important; }
body.cart2-page .cart2-empty__cta i { font-size: 13px; transition: transform .15s; }
body.cart2-page .cart2-empty__cta:hover i { transform: translateX(-3px); }

/* Recommendations grid */
body.cart2-page .cart2-recs {
	margin: 8px 0;
	padding-top: 30px;
	border-top: 1px solid var(--c2-line-soft);
}
body.cart2-page .cart2-recs__title {
	margin: 0 0 4px;
	font-size: 21px; font-weight: 900; color: var(--c2-ink);
	text-align: center;
}
/* Sub-label under the heading so the section reads as a friendly suggestion, not a bare grid. */
body.cart2-page .cart2-recs__sub {
	margin: 0 0 22px;
	text-align: center; font-size: 13.5px; font-weight: 600; color: var(--c2-muted);
}
body.cart2-page .cart2-recs__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
body.cart2-page .cart2-rec-card {
	background: #fff;
	border: 1px solid var(--c2-line);
	border-radius: var(--c2-radius-sm);
	box-shadow: var(--c2-card-shadow);
	overflow: hidden;
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
body.cart2-page .cart2-rec-card:hover { transform: translateY(-3px); box-shadow: var(--c2-shadow); border-color: #dfe7e2; }
body.cart2-page .cart2-rec-card__link {
	display: flex; flex-direction: column; height: 100%;
	padding: 12px; text-decoration: none; color: var(--c2-ink);
}
body.cart2-page .cart2-rec-card__thumb {
	display: block; margin-bottom: 12px;
	border-radius: 8px; overflow: hidden; background: var(--c2-panel);
}
body.cart2-page .cart2-rec-card__thumb img {
	display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
}
body.cart2-page .cart2-rec-card__name {
	display: block; flex: 1 0 auto;
	font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--c2-ink);
	margin-bottom: 8px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.cart2-page .cart2-rec-card__price {
	display: block; font-size: 15px; font-weight: 900; color: var(--c2-green-dark);
}
body.cart2-page .cart2-rec-card__price del { color: var(--c2-faint); font-weight: 600; margin-right: 5px; }
body.cart2-page .cart2-rec-card__price ins { text-decoration: none; }

@media (max-width: 900px) {
	body.cart2-page .cart2-recs__grid { grid-template-columns: repeat(3, 1fr); }
	/* Below desktop the trade-in card stacks full width — return the "See how trade-in
	   works" link to a left-aligned row with the chevron back at the right edge. */
	body.cart2-page .basket-trade__info-button { justify-content: space-between; }
	body.cart2-page .basket-trade__info-button .fa-chevron-right { position: static; top: auto; right: auto; transform: none; }
	body.cart2-page .basket-trade__info-button:hover .fa-chevron-right { transform: translateX(3px); }
}
@media (max-width: 560px) {
	body.cart2-page .cart2-empty { padding: 40px 18px 36px; }
	body.cart2-page .cart2-empty__title { font-size: 23px; }
	body.cart2-page .cart2-recs__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ===========================================================================
   Trade-in basket module ("Get this for even less with trade-in").
   Sits below the basket items; emerald-branded to match the cart2 redesign.
   =========================================================================== */
/* The header X dismisses the whole card for the session (cart2-tradein.js):
   fade + lift out, then drop it from the layout. */
body.cart2-page #cart2-trade-in { transition: opacity .28s ease, transform .28s ease; }
body.cart2-page #cart2-trade-in.is-dismissing { opacity: 0; transform: translateY(-6px); pointer-events: none; }
body.cart2-page #cart2-trade-in.is-dismissed { display: none; }
body.cart2-page .basket-trade {
	position: relative; margin-top: 18px; padding: 22px;
	border-radius: var(--c2-radius); border: 1px solid var(--c2-line);
	background: linear-gradient(135deg, #ffffff 0%, #f1faf5 100%);
	box-shadow: var(--c2-card-shadow); overflow: hidden;
	animation: bt-intro .55s cubic-bezier(.4, 0, .2, 1) both;
	transition: box-shadow .4s ease, border-color .4s ease;
}
body.cart2-page .basket-trade.is-confirmed { border-color: #bfe6d4; box-shadow: 0 2px 6px rgba(16, 32, 24, .04), 0 18px 44px rgba(4, 120, 87, .14); }
body.cart2-page .basket-trade::before {
	content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .5s ease;
	background: linear-gradient(130deg, rgba(5, 150, 105, .10) 0%, rgba(4, 120, 87, .10) 100%);
}
body.cart2-page .basket-trade:hover::before { opacity: 1; }
body.cart2-page .basket-trade__header { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; margin-bottom: 16px; }
body.cart2-page .basket-trade__detail { flex: 1; }
body.cart2-page .basket-trade .bt-icon {
	position: relative; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px;
	background: var(--c2-green-soft); color: var(--c2-green-dark);
	display: flex; align-items: center; justify-content: center; font-size: 22px; z-index: 1;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
body.cart2-page .basket-trade.is-confirmed .bt-icon { transform: rotate(360deg); background: #d6f3e4; }
body.cart2-page .basket-trade .bt-icon::after {
	content: ""; position: absolute; inset: -9px; border-radius: 50%; z-index: -1;
	background: radial-gradient(50% 50% at 50% 50%, rgba(5, 150, 105, .30) 0%, rgba(5, 150, 105, 0) 70%);
	animation: bt-pulse 4.5s ease-in-out infinite;
}
body.cart2-page .basket-trade__title { font-size: 17px; font-weight: 900; margin: 0 0 4px; color: var(--c2-ink); line-height: 1.3; }
body.cart2-page .basket-trade__copy { font-size: 13.5px; margin: 0; color: var(--c2-muted); line-height: 1.45; }
body.cart2-page .basket-trade__dismiss {
	position: absolute; top: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid var(--c2-line); background: #fff; color: var(--c2-muted);
	cursor: pointer; font-size: 13px; line-height: 1; z-index: 2; transition: .18s;
}
body.cart2-page .basket-trade__dismiss:hover { color: var(--c2-ink); border-color: #cdd6d1; transform: rotate(90deg); }
/* Mobile: tighten the header and reserve room on the right so the title/copy never run
   under the dismiss X, and the icon/padding aren't cramped on narrow screens. */
@media (max-width: 560px) {
	body.cart2-page .basket-trade { padding: 18px; }
	body.cart2-page .basket-trade__header { gap: 13px; margin-bottom: 14px; }
	body.cart2-page .basket-trade .bt-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 19px; }
	body.cart2-page .basket-trade__detail { padding-right: 30px; }
	body.cart2-page .basket-trade__title { font-size: 16px; }
	body.cart2-page .basket-trade__dismiss { top: 0; right: 0; }
}

body.cart2-page .bt-stage { position: relative; z-index: 1; overflow: hidden; }
body.cart2-page .bt-pane { transition: opacity .22s ease; }
/* Pane/element visibility — JS and PHP toggle .is-hidden to swap panes. Without
   this rule every pane (collapsed + search + confirmed) renders stacked, so the
   search field and offer box appear before "Assess my device" is ever clicked. */
body.cart2-page .basket-trade .is-hidden,
body.cart2-page .bt-pane.is-hidden { display: none !important; }

body.cart2-page .basket-trade .bt-assess {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
	padding: 14px 20px; border: 0; border-radius: 12px; cursor: pointer;
	font-size: 15px; font-weight: 900; color: #fff; background: var(--c2-cta);
	box-shadow: 0 10px 22px rgba(4, 120, 87, .22); position: relative; z-index: 1; overflow: hidden;
	transition: transform .18s, box-shadow .18s;
}
body.cart2-page .basket-trade .bt-assess:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(4, 120, 87, .28); }
body.cart2-page .basket-trade .bt-assess:active { transform: translateY(0) scale(.99); }
body.cart2-page .basket-trade .bt-assess::after {
	content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-18deg); transition: left .6s ease;
}
body.cart2-page .basket-trade .bt-assess:hover::after { left: 130%; }

/* Desktop: the label is centred in the button with the chevron pinned to the right
   edge (it reverts to a left-aligned space-between row on narrow screens, below). */
body.cart2-page .basket-trade__info-button {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	margin-top: 12px; padding: 11px 14px; cursor: pointer; background: #fff;
	border: 1px solid var(--c2-line); border-radius: 12px; color: var(--c2-ink); font: inherit;
	position: relative; z-index: 1; transition: .18s;
}
body.cart2-page .basket-trade__info-button:hover { border-color: #bfe6d4; background: #f7fcf9; }
body.cart2-page .basket-trade__info-button:hover .fa-chevron-right { transform: translateY(-50%) translateX(3px); }
body.cart2-page .basket-trade__info-button-text { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; }
body.cart2-page .basket-trade__info-button .bt-grad { color: var(--c2-green); font-size: 16px; }
body.cart2-page .basket-trade__info-button .fa-chevron-right { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--c2-faint); font-size: 12px; transition: transform .18s; }

body.cart2-page .basket-trade__search .bt-subtitle { font-size: 14px; font-weight: 900; margin: 0 0 10px; color: var(--c2-ink); }
body.cart2-page .bt-search-field { position: relative; }
body.cart2-page .bt-search-field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c2-faint); font-size: 14px; transition: color .2s; }
body.cart2-page .bt-search-field.is-focus i { color: var(--c2-green); }
body.cart2-page .bt-search-input {
	width: 100%; box-sizing: border-box; padding: 13px 14px 13px 38px; border: 1px solid var(--c2-line);
	border-radius: 12px; font: inherit; font-size: 14.5px; color: var(--c2-ink); background: #fff;
	transition: border-color .18s, box-shadow .18s;
}
body.cart2-page .bt-search-input:focus { outline: none; border-color: var(--c2-green); box-shadow: 0 0 0 3px var(--c2-green-ghost); }
body.cart2-page .bt-results { list-style: none; margin: 6px 0 0; padding: 6px; border: 1px solid var(--c2-line); border-radius: 12px; background: #fff; box-shadow: var(--c2-shadow); }
body.cart2-page .bt-results li { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; animation: bt-pop .28s cubic-bezier(.34, 1.4, .64, 1) both; }
body.cart2-page .bt-results li:hover { background: var(--c2-green-soft); }
body.cart2-page .bt-results .bt-result-empty { cursor: default; color: var(--c2-faint); font-size: 13px; }
body.cart2-page .bt-results .bt-r-img { width: 38px; height: 38px; border-radius: 8px; background: #f1f4f2; display: flex; align-items: center; justify-content: center; color: var(--c2-faint); font-size: 16px; flex: 0 0 auto; overflow: hidden; }
body.cart2-page .bt-results .bt-r-img img { width: 100%; height: 100%; object-fit: contain; }
body.cart2-page .bt-results .bt-r-text { flex: 1; }
body.cart2-page .bt-results .bt-r-label { font-size: 13.5px; font-weight: 700; color: var(--c2-ink); }
body.cart2-page .bt-results .bt-r-go { color: var(--c2-faint); font-size: 12px; }
body.cart2-page .basket-trade .bt-hint { font-size: 12px; margin: 8px 2px 0; color: var(--c2-faint); }
/* "Or browse by category" teasers under the search box (open the drill-down drawer). */
body.cart2-page .bt-cats-wrap { margin-top: 15px; }
body.cart2-page .bt-cats-wrap.is-hidden { display: none; }
body.cart2-page .bt-cats-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--c2-faint); margin: 0 2px 9px; }
/* 2-up grid of column cards (icon, name, "Up to £X"); the row chevron is dropped. */
body.cart2-page .bt-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.cart2-page .bt-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; text-align: left; padding: 14px 14px 13px; border: 1.5px solid var(--c2-line); border-radius: 16px; background: #fff; cursor: pointer; font-family: inherit; transition: border-color .15s, box-shadow .15s, transform .12s; }
body.cart2-page .bt-cat:hover { border-color: var(--c2-green); box-shadow: var(--c2-shadow-sm); transform: translateY(-2px); }
body.cart2-page .bt-cat__img { box-sizing: border-box; width: 52px; height: 52px; padding: 6px; border-radius: 13px; background: var(--c2-green-soft); display: flex; align-items: center; justify-content: center; color: var(--c2-green-dark); font-size: 20px; flex: 0 0 auto; overflow: hidden; }
body.cart2-page .bt-cat__img img { width: 100%; height: 100%; object-fit: contain; }
body.cart2-page .bt-cat__name { flex: none; font-size: 14px; font-weight: 800; color: var(--c2-ink); }
body.cart2-page .bt-cat__upto { font-size: 12.5px; font-weight: 800; color: var(--c2-green-dark); white-space: nowrap; }
body.cart2-page .bt-cat__go { display: none; }
/* Odd number of categories: the lone last card spans the full width as a horizontal row,
   so the 2-up grid never leaves an empty cell in the bottom-right. */
body.cart2-page .bt-cats > .bt-cat:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
body.cart2-page .bt-cats > .bt-cat:last-child:nth-child(odd) .bt-cat__name { flex: 1 1 auto; }
/* The browse-by-category drill-down drawer (reuses .bt-drawer slide-in). */
.bt-flow .bt-drawer__head { padding-left: 70px; padding-right: 60px; }
.bt-flow__back { position: absolute; top: 20px; left: 22px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e7ece9; background: #fff; color: #10231b; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: .18s; }
.bt-flow__back[hidden] { display: none; }
.bt-flow__back:hover { background: #f4f7f5; }
.bt-flow__body { display: flex; flex-direction: column; gap: 0; }
.bt-flow-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border: 1px solid #e7ece9; border-radius: 12px; background: #fff; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: #10231b; transition: border-color .15s, background .15s; animation: bt-pop .26s cubic-bezier(.34, 1.4, .64, 1) both; }
.bt-flow-row:hover { border-color: #059669; background: #f6fbf8; }
.bt-flow-row__img { width: 40px; height: 40px; border-radius: 8px; background: #f1f4f2; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; }
.bt-flow-row__img img { width: 100%; height: 100%; object-fit: contain; }
/* Brand tiles: real brand logo in full colour on a soft tint, sized up so marks read
   clearly. The letter-monogram fallback shares the same 48px footprint. */
body.cart2-page .bt-flow-row__img.bt-brand-img,
body.cart2-page .bt-flow-row__img.bt-brand-mono { box-sizing: border-box; width: 48px; height: 48px; border-radius: 12px; background: var(--c2-panel); }
body.cart2-page .bt-brand-img { padding: 8px; }
body.cart2-page .bt-brand-img img { width: 100%; height: 100%; object-fit: contain; }
body.cart2-page .bt-brand-mono { background: var(--c2-green-soft); color: var(--c2-green-dark); font-weight: 900; font-size: 19px; }
.bt-flow-row__label { flex: 1; }
.bt-flow-row__go { color: #9aa0ab; font-size: 13px; }
.bt-flow__loading { text-align: center; padding: 44px 0; color: #059669; font-size: 26px; }
.bt-flow__msg { padding: 22px 2px; color: #6b7280; font-size: 14px; }
/* In-drawer search: filters the visible list AND queries the catalogue, so a shopper who
   knows their device finds it without leaving the category drill-down. */
.bt-flow-search { position: relative; margin-bottom: 13px; }
.bt-flow-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--c2-faint); font-size: 14px; pointer-events: none; transition: color .18s; }
.bt-flow-search.is-focus i { color: var(--c2-green); }
.bt-flow-search-input { width: 100%; box-sizing: border-box; padding: 13px 14px 13px 42px; border: 1.5px solid var(--c2-line); border-radius: 14px; font: inherit; font-size: 14.5px; color: var(--c2-ink); background: #fff; transition: border-color .18s, box-shadow .18s; }
.bt-flow-search-input:focus { outline: none; border-color: var(--c2-green); box-shadow: 0 0 0 3px var(--c2-green-ghost); }
/* Context note above the variant rows — e.g. the watch size when the rows themselves
   only let the customer pick connectivity. */
.bt-flow-note { margin: 0 0 11px; padding: 9px 13px; border-radius: 11px; background: var(--c2-green-soft); color: var(--c2-green-dark); font-size: 12.5px; font-weight: 800; }
.bt-flow-rows { display: flex; flex-direction: column; gap: 9px; }
.bt-flow-search-results { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.bt-flow-search-results.is-hidden { display: none; }
.bt-flow-results-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--c2-faint); margin: 6px 2px 0; }
.bt-flow-noresults { color: var(--c2-muted); font-size: 14px; line-height: 1.5; padding: 18px 2px; margin: 0; }
.bt-flow-noresults.is-hidden { display: none; }

body.cart2-page .bt-decline {
	width: 100%; margin-top: 14px; padding: 12px; cursor: pointer; background: #fff;
	border: 1px solid var(--c2-line); border-radius: 12px; font: inherit; font-size: 13.5px;
	font-weight: 800; color: var(--c2-muted); transition: .18s;
}
body.cart2-page .bt-decline:hover { border-color: #cdd6d1; color: var(--c2-ink); }
body.cart2-page .bt-remove { margin-top: 16px; }

body.cart2-page .trade-in-offer {
	box-sizing: border-box; width: 100%; max-width: 100%;
	border: 1.5px solid var(--c2-green); border-radius: 14px; padding: 18px; margin-top: 14px;
	text-align: center; background: #fff; box-shadow: 0 12px 30px rgba(4, 120, 87, .10);
}
body.cart2-page .trade-in-offer.is-entering { animation: bt-offer-in .4s cubic-bezier(.34, 1.3, .64, 1) both; }
body.cart2-page .trade-in-offer__title { font-size: 15px; font-weight: 900; margin: 0 0 6px; color: var(--c2-ink); }
body.cart2-page .trade-in-offer__value { font-size: 36px; font-weight: 900; color: var(--c2-green-dark); margin: 0 0 6px; letter-spacing: -.5px; line-height: 1; display: inline-block; }
body.cart2-page .trade-in-offer__value.is-bump { animation: bt-bump .4s cubic-bezier(.34, 1.5, .64, 1); }
body.cart2-page .trade-in-offer__product { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; color: var(--c2-ink); }
body.cart2-page .trade-in-offer__note { font-size: 12.5px; line-height: 1.4; margin: 0 0 12px; color: var(--c2-muted); }
body.cart2-page .trade-in-offer__note strong { color: var(--c2-ink); font-weight: 900; }
body.cart2-page .trade-in-offer__message { font-size: 13.5px; color: var(--c2-muted); margin: 6px 0 0; }
body.cart2-page .trade-in-offer__message--error { color: var(--c2-sale); }
body.cart2-page .trade-in-offer__spinner { color: var(--c2-green); font-size: 22px; margin-bottom: 10px; }
/* "Choose a different device" — return to search/categories without clearing the card. */
body.cart2-page .trade-in-offer__back { display: flex; width: fit-content; align-items: center; gap: 7px; margin: -2px 0 12px; padding: 2px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--c2-muted); transition: color .15s; }
body.cart2-page .trade-in-offer__back:hover { color: var(--c2-green-dark); }
body.cart2-page .trade-in-offer__back i { font-size: 11px; }
/* Device thumbnail: the product photo when available, else a device-type icon tile. */
body.cart2-page .trade-in-offer__thumb {
	display: flex; width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 14px;
	background: var(--c2-green-soft); color: var(--c2-green-dark); align-items: center;
	justify-content: center; font-size: 22px; overflow: hidden;
}
/* Inset the photo so it isn't clipped by the tile's rounded corners (matches the
   summary/line thumbnails, which all pad their images). */
body.cart2-page .trade-in-offer__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
/* Prompt above the condition cards, so the step reads as a choice. */
body.cart2-page .trade-in-offer__pick { font-size: 13px; font-weight: 900; color: var(--c2-ink); margin: 0 0 9px; }
body.cart2-page .trade-in-offer__pick span { font-weight: 700; font-size: 12px; color: var(--c2-muted); }

/* Bold, equal-width 3-up tiles that don't wrap (Excellent / Good / Poor side by side). */
/* Top margin leaves room for the "Best offer" badge, which floats fully above the cards. */
body.cart2-page .trade-in-offer__conditions { display: flex; flex-wrap: nowrap; gap: 8px; margin: 18px 0 12px; align-items: stretch; }
body.cart2-page .trade-in-offer__condition { position: relative; display: flex; flex: 1 1 0; min-width: 0; animation: bt-pop .3s cubic-bezier(.34, 1.4, .64, 1) both; }
body.cart2-page .trade-in-offer__condition-button {
	position: relative; width: 100%; box-sizing: border-box; border: 2px solid var(--c2-line); border-radius: 14px;
	background: #fafdfb; padding: 24px 10px 16px; text-align: center; display: flex; flex-direction: column;
	align-items: center; gap: 5px; cursor: pointer; transition: border-color .18s, background .18s, transform .15s, box-shadow .18s;
}
body.cart2-page .trade-in-offer__condition-button:hover { border-color: var(--c2-green); background: #fff; transform: translateY(-2px); }
body.cart2-page .trade-in-offer__condition-button.is-active { border-color: var(--c2-green); background: var(--c2-green-ghost); box-shadow: 0 0 0 3px var(--c2-green-ghost); }
body.cart2-page .trade-in-offer__condition-label { font-size: 13px; font-weight: 900; color: var(--c2-ink); }
body.cart2-page .trade-in-offer__condition-amount { font-size: 18px; font-weight: 900; color: var(--c2-green-dark); }
body.cart2-page .trade-in-offer__condition-hint { font-size: 11px; font-weight: 700; color: var(--c2-muted); line-height: 1.2; margin-top: auto; padding-top: 8px; text-align: center; }
/* Selected-state tick — shown only on the active tile, as a filled green check in the
   top-right corner (no empty ring on the others, which read as floating radios). It sits
   just below the "Best offer" badge (which floats above the card), so the two never
   collide even on narrow mobile cards where the badge spans most of the width. */
body.cart2-page .trade-in-offer__condition-check {
	display: none; position: absolute; top: 10px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--c2-green); color: #fff; align-items: center; justify-content: center; font-size: 10px;
}
body.cart2-page .trade-in-offer__condition-button.is-active .trade-in-offer__condition-check { display: inline-flex; }
body.cart2-page .trade-in-offer__best {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--c2-cta);
	color: #fff; font-size: 9.5px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
	padding: 3px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 10px rgba(4, 120, 87, .3); z-index: 3;
}
/* Always-visible write-up for the selected condition. */
body.cart2-page .trade-in-offer__detail { background: var(--c2-panel); border: 1px solid var(--c2-line-soft); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; text-align: left; }
body.cart2-page .trade-in-offer__detail:empty { display: none; }
body.cart2-page .trade-in-offer__detail-head { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; color: var(--c2-green-dark); margin: 0 0 6px; }
/* Bulleted, uniform type for the condition write-up. Two sources render here: the default
   copy is a <ul><li> list; category ACF copy is wpautop'd into <p> paragraphs. Style both
   identically and draw the bullet ourselves (::before) on every content line — but NOT on
   the heading paragraph — so each line reads as a bullet whatever the source. We draw the
   marker manually (rather than list-style) because the .cart2-wrap :where(ul,ol,li) reset
   above sets list-style:none directly on the <li>, which beats an inherited list-style. */
body.cart2-page .trade-in-offer__detail ul { margin: 0; padding-left: 0; list-style: none; }
body.cart2-page .trade-in-offer__detail li,
body.cart2-page .trade-in-offer__detail p:not(.trade-in-offer__detail-head) {
	position: relative; margin: 0; padding-left: 18px; color: #46514b; font-size: 12.5px; line-height: 1.5;
}
body.cart2-page .trade-in-offer__detail li::before,
body.cart2-page .trade-in-offer__detail p:not(.trade-in-offer__detail-head)::before { content: "•"; position: absolute; left: 4px; color: #46514b; }
body.cart2-page .trade-in-offer__detail li + li,
body.cart2-page .trade-in-offer__detail p:not(.trade-in-offer__detail-head) + p,
body.cart2-page .trade-in-offer__detail ul + p,
body.cart2-page .trade-in-offer__detail p + ul { margin-top: 5px; }
body.cart2-page .trade-in-offer__confirm {
	width: 100%; padding: 14px; border: 0; border-radius: 12px; cursor: pointer; position: relative;
	overflow: hidden; font-size: 15px; font-weight: 900; color: #fff; background: var(--c2-cta);
	box-shadow: 0 10px 22px rgba(4, 120, 87, .22); transition: transform .18s, box-shadow .18s;
}
body.cart2-page .trade-in-offer__confirm:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(4, 120, 87, .3); }
body.cart2-page .trade-in-offer__confirm.is-done { background: var(--c2-green-dark); }

/* Confirmed trade-in — a compact chip (check + value + device line) above the Remove
   control, replacing the old rotated "stamp" ribbon. */
body.cart2-page .bt-confirmed { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 16px 18px; border: 1px solid #bfe6d4; border-radius: 14px; background: linear-gradient(180deg, var(--c2-green-soft), #fff); }
body.cart2-page .bt-confirmed__check { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--c2-green-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
body.cart2-page .bt-confirmed__t b { display: block; font-size: 18px; font-weight: 900; color: var(--c2-green-dark); letter-spacing: -.02em; line-height: 1.15; }
body.cart2-page .bt-confirmed__t span { font-size: 12.5px; color: var(--c2-muted); }

/* Order-summary cashback reassurance line (the negative fee row carries the figure) */
body.cart2-page .cart2-ti-applied {
	display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 9px 12px;
	background: var(--c2-green-soft); border-radius: 10px; font-size: 12.5px; font-weight: 800; line-height: 1.4; color: var(--c2-green-dark);
}
/* Tick sits next to the first line (not vertically centred against the wrapped text). */
body.cart2-page .cart2-ti-applied i { flex: 0 0 auto; margin-top: 2px; }
body.cart2-page .cart2-row.fee span:last-child { color: var(--c2-green-dark); font-weight: 900; }

/* "How does trade-in work?" drawer */
.bt-drawer-backdrop { position: fixed; inset: 0; background: rgba(16, 35, 27, .45); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 9000; }
.bt-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.bt-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw; background: #fff; z-index: 9001; transform: translateX(100%); transition: transform .42s cubic-bezier(.4, 0, .2, 1); box-shadow: -20px 0 50px rgba(16, 35, 27, .18); display: flex; flex-direction: column; font-family: 'Lato', sans-serif; }
.bt-drawer.is-open { transform: translateX(0); }
.bt-drawer__head { padding: 24px 26px 18px; border-bottom: 1px solid #e7ece9; position: relative; }
.bt-drawer__eyebrow { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; color: #059669; margin: 0 0 6px; }
.bt-drawer__title { font-size: 22px; font-weight: 900; margin: 0; color: #10231b; }
.bt-drawer__close { position: absolute; top: 20px; right: 22px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e7ece9; background: #fff; color: #7a857e; cursor: pointer; font-size: 15px; transition: .18s; }
.bt-drawer__close:hover { background: #f4f7f5; transform: rotate(90deg); }
.bt-drawer__body { padding: 22px 26px; overflow-y: auto; }
.bt-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #eef2f0; opacity: 0; transform: translateX(14px); }
.bt-drawer.is-open .bt-step { animation: bt-line-x .45s cubic-bezier(.4, 0, .2, 1) forwards; }
.bt-drawer.is-open .bt-step:nth-child(1) { animation-delay: .14s; }
.bt-drawer.is-open .bt-step:nth-child(2) { animation-delay: .22s; }
.bt-drawer.is-open .bt-step:nth-child(3) { animation-delay: .3s; }
.bt-drawer.is-open .bt-step:nth-child(4) { animation-delay: .38s; }
.bt-step:last-child { border-bottom: 0; }
.bt-step__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: #e6f6ef; color: #047857; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.bt-step__n { font-size: 11px; font-weight: 900; color: #059669; text-transform: uppercase; letter-spacing: .5px; }
.bt-step h3 { font-size: 15px; font-weight: 900; margin: 2px 0 4px; color: #10231b; }
.bt-step p { font-size: 13px; line-height: 1.5; margin: 0; color: #7a857e; }

@keyframes bt-intro { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bt-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes bt-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bt-offer-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bt-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes bt-line-x { to { opacity: 1; transform: translateX(0); } }
@keyframes bt-spin { to { transform: rotate(360deg); } }
.bt-spin { animation: bt-spin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
	body.cart2-page .basket-trade, body.cart2-page .basket-trade *, .bt-drawer, .bt-drawer * { animation: none !important; transition: none !important; }
}