/**
 * SPD Cart — Page panier (Phases 6A + 6B)
 * ======================================
 * React-faithful cart page on the NATIVE WooCommerce engine.
 * Source of truth: design-spd/src/pages/CartPage.tsx.
 *
 * 6B adds: free-shipping progress card (§16), coupon card (§17),
 * cross-sells rail (§18) and the form-children rhythm (§15).
 *
 * Scope: #spd-cart-page (filled cart) + #spd-cart-empty-page (empty
 * state wrapper). The shared .spd-empty-state component styles live in
 * spd-shell.css (global, reusable on wishlist/orders/search/FAQ…).
 *
 * The markup keeps the native WC AJAX contract: cart.js replaces
 * .woocommerce-cart-form and .cart_totals on every update, so nothing
 * here can rely on element identity persisting.
 */

/* ============================================================
   1. Page wrapper — React: max-w-7xl mx-auto px-4 sm:px-6 py-6
      space-y-8 pb-16 (width/padding from Astra container).
   ============================================================ */
#spd-cart-page {
	padding-top: 24px;      /* py-6 */
	padding-bottom: 64px;   /* pb-16 */
}

#spd-cart-page > * + * {
	margin-top: 32px;       /* space-y-8 */
}

/* React CartPage has NO separate page title — the hierarchy is
   breadcrumb → "Mon Panier (N articles)" h1. Astra renders the WP
   page title ("Panier") above the content; hide it on the cart page
   only. */
body.woocommerce-cart .entry-header { display: none; }

/* ============================================================
   2. Header — React: flex items-center justify-between
      h1 text-2xl sm:text-3xl font-extrabold tracking-tight
      + "Vider tout le panier" text-xs font-semibold slate-400.
   ============================================================ */
.spd-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.spd-cart__title {
	margin: 0;
	font-size: 24px;                        /* text-2xl */
	font-weight: var(--spd-font-weight-extrabold);
	line-height: 1.25;
	letter-spacing: -0.025em;               /* tracking-tight */
	color: #0F172A;                         /* slate-900 */
}

@media (min-width: 640px) {
	.spd-cart__title { font-size: 30px; }   /* sm:text-3xl */
}

.spd-cart__clear {
	display: inline-flex;
	align-items: center;
	gap: 4px;                               /* gap-1 */
	flex-shrink: 0;
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-semibold);
	color: #94A3B8;                         /* slate-400 */
	text-decoration: none;
	transition: color var(--spd-transition-fast);
}

.spd-cart__clear:hover,
.spd-cart__clear:focus-visible {
	color: #D93829;                         /* React hover:text-[#D93829] */
}

.spd-cart__clear .spd-icon {
	width: 14px;                            /* Trash2 size={14} */
	height: 14px;
	display: block;
}

/* ============================================================
   3. Layout — React: grid grid-cols-1 lg:grid-cols-12 gap-8
      items-start. Items col-span-8, summary col-span-4.
   ============================================================ */
.spd-cart__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;                              /* gap-8 */
	align-items: start;
}

@media (min-width: 1024px) {
	.spd-cart__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.spd-cart__items-col { grid-column: span 8 / span 8; }
	.spd-cart__summary-col { grid-column: span 4 / span 4; }
}

/* ============================================================
   4. Items card — React: bg-white rounded-3xl border
      border-slate-200 shadow-xs overflow-hidden.
   ============================================================ */
.spd-cart__items-card {
	background-color: #FFFFFF;
	border: 1px solid #E2E8F0;              /* slate-200 */
	border-radius: 24px;                    /* rounded-3xl */
	box-shadow: var(--spd-shadow-xs);
	overflow: hidden;
}

/* Items list — React: p-4 sm:p-6 divide-y divide-slate-100. */
#spd-cart-page .spd-cart__items {
	list-style: none;
	margin: 0;
	padding: 16px;                          /* p-4 */
	/* Neutralise the native .shop_table styles inherited via the
	   kept WooCommerce classes (shop_table cart). */
	border: 0;
	border-radius: 0;
	width: 100%;
}

@media (min-width: 640px) {
	#spd-cart-page .spd-cart__items { padding: 24px; }  /* sm:p-6 */
}

#spd-cart-page .spd-cart__items .spd-cart-item + .spd-cart-item {
	border-top: 1px solid #F1F5F9;          /* divide-slate-100 */
}

/* Item row — React: py-4 sm:py-6 first:pt-0 last:pb-0 flex flex-col
   sm:flex-row items-start sm:items-center justify-between gap-4. */
#spd-cart-page .spd-cart-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;                              /* gap-4 */
	padding: 16px 0;                        /* py-4 */
	border: 0;
	margin: 0;
}

#spd-cart-page .spd-cart-item:first-child { padding-top: 0; }
#spd-cart-page .spd-cart-item:last-of-type { padding-bottom: 0; }

@media (min-width: 640px) {
	#spd-cart-page .spd-cart-item {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 24px 0;                    /* sm:py-6 */
	}
}

/* ============================================================
   5. Item main — React: flex items-center gap-4
   ============================================================ */
.spd-cart-item__main {
	display: flex;
	align-items: center;
	gap: 16px;                              /* gap-4 */
	min-width: 0;                           /* allow name truncation */
}

/* Thumbnail tile — React: w-20 h-20 rounded-2xl bg-slate-50 border
   border-slate-200 p-2 flex items-center justify-center shrink-0. */
.spd-cart-item__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 80px;                            /* w-20 */
	height: 80px;                           /* h-20 */
	padding: 8px;                           /* p-2 */
	background-color: #F8FAFC;              /* slate-50 */
	border: 1px solid #E2E8F0;              /* slate-200 */
	border-radius: 16px;                    /* rounded-2xl */
	overflow: hidden;
}

.spd-cart-item__thumb a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.spd-cart-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;                    /* React object-contain */
	margin: 0;
}

/* Name — React: font-bold text-sm sm:text-base text-slate-900. */
.spd-cart-item__name {
	margin: 0;
	font-size: 14px;                        /* text-sm */
	font-weight: var(--spd-font-weight-bold);
	line-height: 1.4;
	color: #0F172A;                         /* slate-900 */
}

@media (min-width: 640px) {
	.spd-cart-item__name { font-size: 16px; }  /* sm:text-base */
}

.spd-cart-item__name a {
	color: inherit;
	text-decoration: none;
}

.spd-cart-item__name a:hover {
	color: #0F5B94;                         /* UI blue */
}

/* Variation data — native dl.variation styled as the React pill:
   inline-block my-1 text-[11px] font-bold text-[#0F5B94]
   bg-[#EBF3F9] px-2.5 py-0.5 rounded-md. */
#spd-cart-page .spd-cart-item .variation {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 4px;
	margin: 4px 0;
	padding: 2px 10px;                      /* py-0.5 px-2.5 */
	background-color: #EBF3F9;
	border-radius: 6px;                     /* rounded-md */
	color: #0F5B94;
	font-size: 11px;                        /* text-[11px] */
	font-weight: var(--spd-font-weight-bold);
	line-height: 1.5;
}

#spd-cart-page .spd-cart-item .variation dt,
#spd-cart-page .spd-cart-item .variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: inherit;
	color: inherit;
}

#spd-cart-page .spd-cart-item .variation dd p {
	display: inline;
	margin: 0;
}

/* Meta line — React: text-xs text-slate-400 mt-0.5
   "{unit} • Prix unitaire: {price} FCFA". */
.spd-cart-item__meta {
	margin: 2px 0 0;                        /* mt-0.5 */
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-normal);
	line-height: 1.5;
	color: #94A3B8;                         /* slate-400 */
}

.spd-cart-item__meta .spd-price,
.spd-cart-item__meta .amount {
	font-weight: inherit;
	color: inherit;
}

/* Remove — React: text-[11px] font-semibold text-[#D93829]
   hover:underline flex items-center gap-1 mt-2.
   WC/Astra restyle a.remove (display:block; width/height:1em → the
   label wraps one char per line; ::before draws an inset-0 circle
   chip that escapes to the nearest positioned ancestor whenever the
   link loses position:relative). The #spd-cart-page prefix + the long
   selector beat both. */
#spd-cart-page .spd-cart-item .product-remove {
	margin: 8px 0 0;                        /* mt-2 */
	padding: 0;
	border: 0;
	font-size: 0;
}

#spd-cart-page .spd-cart-item .product-remove a.remove.spd-cart-item__remove {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 4px;                               /* gap-1 */
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 11px;                        /* text-[11px] */
	font-weight: var(--spd-font-weight-semibold);
	line-height: 1.5;
	white-space: nowrap;
	color: #D93829;
	text-decoration: none;
}

#spd-cart-page .spd-cart-item .product-remove a.remove.spd-cart-item__remove::before,
#spd-cart-page .spd-cart-item .product-remove a.remove.spd-cart-item__remove::after {
	display: none;                          /* kills Astra's circle chip */
	content: none;
}

#spd-cart-page .spd-cart-item .product-remove a.remove.spd-cart-item__remove:hover,
#spd-cart-page .spd-cart-item .product-remove a.remove.spd-cart-item__remove:focus-visible {
	background: transparent !important;     /* beats .woocommerce a.remove:hover !important */
	color: #D93829 !important;
	text-decoration: underline;
}

.spd-cart-item__remove .spd-icon {
	width: 12px;                            /* Trash2 size={12} */
	height: 12px;
	display: block;
}

/* Native backorder notice — kept readable inside the info column. */
#spd-cart-page .spd-cart-item .backorder_notification {
	margin: 4px 0 0;
	font-size: 11px;
	font-weight: var(--spd-font-weight-semibold);
	color: var(--spd-warning);
}

/* ============================================================
   6. Item side — React: flex items-center justify-between
      w-full sm:w-auto sm:gap-6 (qty + line total).
   ============================================================ */
.spd-cart-item__side {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;                            /* w-full */
	gap: 16px;
}

@media (min-width: 640px) {
	.spd-cart-item__side {
		width: auto;                        /* sm:w-auto */
		gap: 24px;                          /* sm:gap-6 */
	}
}

/* QuantitySelector — React: inline-flex items-center border
   border-slate-200 rounded-xl bg-white shadow-xs overflow-hidden
   select-none (same component as the single-product stepper). */
#spd-cart-page .quantity {
	float: none; /* neutralise WC/Astra */
	display: inline-flex;
	align-items: center;
	border: 1px solid #E2E8F0;
	border-radius: 12px;                    /* rounded-xl */
	background-color: #FFFFFF;
	box-shadow: var(--spd-shadow-xs);
	overflow: hidden;
	user-select: none;
	margin: 0;
	width: auto;
}

#spd-cart-page .quantity .spd-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;                            /* w-9 */
	height: 36px;                           /* h-9 */
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: #475569;                         /* slate-600 */
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#spd-cart-page .quantity .spd-qty__btn:hover {
	background-color: #F1F5F9;              /* slate-100 */
	color: #0F172A;                         /* slate-900 */
}

#spd-cart-page .quantity .spd-qty__btn:active {
	background-color: #E2E8F0;              /* slate-200 */
}

#spd-cart-page .quantity .spd-qty__btn:disabled {
	opacity: 0.4;
	pointer-events: none;
}

#spd-cart-page .quantity .spd-qty__btn:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: -2px;
}

#spd-cart-page .quantity .spd-qty__btn .spd-icon {
	width: 15px;                            /* Minus/Plus size={15} */
	height: 15px;
	display: block;
}

/* Native input — React: w-10 text-sm font-bold text-slate-900
   text-center tabular-nums. Stays a real WC input.qty. */
#spd-cart-page .quantity input.qty {
	float: none;
	width: 40px;                            /* w-10 */
	height: 36px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 14px;
	font-weight: var(--spd-font-weight-bold);
	line-height: 1.5;
	color: #0F172A;
	text-align: center;
	font-variant-numeric: tabular-nums;
	appearance: textfield;
	-moz-appearance: textfield;
}

#spd-cart-page .quantity input.qty::-webkit-outer-spin-button,
#spd-cart-page .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#spd-cart-page .quantity input.qty:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: -2px;
}

/* Line total — React: text-right, label text-xs text-slate-400
   block sm:hidden, value font-extrabold text-base sm:text-lg. */
.spd-cart-item__total {
	text-align: right;
	flex-shrink: 0;
}

.spd-cart-item__total-label {
	display: block;
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-normal);
	color: #94A3B8;                         /* slate-400 */
}

@media (min-width: 640px) {
	.spd-cart-item__total-label { display: none; }  /* sm:hidden */
}

.spd-cart-item__subtotal {
	display: block;
	font-size: 16px;                        /* text-base */
	font-weight: var(--spd-font-weight-extrabold);
	line-height: 1.4;
	color: #0F172A;                         /* slate-900 */
	font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
	.spd-cart-item__subtotal { font-size: 18px; }   /* sm:text-lg */
}

.spd-cart-item__subtotal .spd-price,
.spd-cart-item__subtotal .amount {
	font-weight: inherit;
	color: inherit;
}

/* ============================================================
   7. Actions row (update cart button + nonce) — hidden when JS
      is on: qty changes auto-submit via the native AJAX update
      flow. Visible again under woocommerce-no-js so the form can
      still be submitted without JavaScript.
   ============================================================ */
#spd-cart-page .spd-cart__actions {
	display: none;
	margin: 0;
	padding: 16px 24px;
	border-top: 1px solid #F1F5F9;
	text-align: right;
}

.woocommerce-no-js #spd-cart-page .spd-cart__actions {
	display: block;
}

/* ============================================================
   8. Items footer — React: p-4 bg-slate-50 border-t
      border-slate-100 flex items-center justify-between.
   ============================================================ */
.spd-cart__items-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;                          /* p-4 */
	background-color: #F8FAFC;              /* slate-50 */
	border-top: 1px solid #F1F5F9;          /* slate-100 */
}

/* React: text-xs font-bold text-[#0F5B94] hover:underline. */
.spd-cart__continue {
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-bold);
	color: #0F5B94;
	text-decoration: none;
}

.spd-cart__continue:hover,
.spd-cart__continue:focus-visible {
	text-decoration: underline;
	color: #0F5B94;
}

/* ============================================================
   9. Summary column — neutralise native .cart-collaterals /
      .cart_totals floats & widths (WC's default 48% float right
      would break the React sidebar column).
   ============================================================ */
#spd-cart-page .cart-collaterals {
	width: 100%;
}

#spd-cart-page .cart-collaterals::after {
	content: none;
	display: none;
}

#spd-cart-page .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	margin: 0;
}

/* Summary card — React: bg-white rounded-3xl border
   border-slate-200 p-5 sm:p-6 shadow-xs space-y-4. */
#spd-cart-page .cart_totals .spd-cart-summary {
	display: flex;
	flex-direction: column;
	gap: 16px;                              /* space-y-4 */
	padding: 20px;                          /* p-5 */
	background-color: #FFFFFF;
	border: 1px solid #E2E8F0;              /* slate-200 */
	border-radius: 24px;                    /* rounded-3xl */
	box-shadow: var(--spd-shadow-xs);
}

@media (min-width: 640px) {
	#spd-cart-page .cart_totals .spd-cart-summary { padding: 24px; }  /* sm:p-6 */
}

/* Title — React: font-bold text-base text-slate-900 pb-3
   border-b border-slate-100. */
.spd-cart-summary__title {
	margin: 0;
	padding-bottom: 12px;                   /* pb-3 */
	border-bottom: 1px solid #F1F5F9;       /* slate-100 */
	font-size: 16px;                        /* text-base */
	font-weight: var(--spd-font-weight-bold);
	line-height: 1.4;
	color: #0F172A;                         /* slate-900 */
}

/* Rows — React: space-y-2.5 text-xs sm:text-sm. */
.spd-cart-summary__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;                              /* space-y-2.5 */
	font-size: 12px;                        /* text-xs */
}

@media (min-width: 640px) {
	.spd-cart-summary__rows { font-size: 14px; }  /* sm:text-sm */
}

.spd-cart-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	color: #475569;                         /* slate-600 */
}

.spd-cart-summary__label {
	font-weight: var(--spd-font-weight-normal);
}

.spd-cart-summary__value {
	font-weight: var(--spd-font-weight-bold);
	color: #1E293B;                         /* slate-800 */
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.spd-cart-summary__value .spd-price,
.spd-cart-summary__value .amount {
	font-weight: inherit;
	color: inherit;
}

/* Coupon discount row — React: text-emerald-600 font-semibold. */
.spd-cart-summary__row--discount {
	color: #059669;                         /* emerald-600 */
	font-weight: var(--spd-font-weight-semibold);
}

.spd-cart-summary__row--discount .spd-cart-summary__value {
	color: #059669;
	font-weight: var(--spd-font-weight-semibold);
}

/* Native coupon remove link (a.woocommerce-remove-coupon) — handled
   by cart.js AJAX; styled to stay readable inside the row. */
.spd-cart-summary__row--discount .woocommerce-remove-coupon {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	margin-left: 2px;
}

.spd-cart-summary__row--discount .woocommerce-remove-coupon:hover {
	text-decoration: underline;
}

/* Total row — React: pt-3 border-t border-slate-100 text-base
   sm:text-lg font-black text-slate-900, value text-[#D93829]. */
.spd-cart-summary__row--total {
	padding-top: 12px;                      /* pt-3 */
	border-top: 1px solid #F1F5F9;          /* slate-100 */
	align-items: center;
	font-size: 16px;                        /* text-base */
	font-weight: var(--spd-font-weight-black);
	color: #0F172A;                         /* slate-900 */
}

@media (min-width: 640px) {
	.spd-cart-summary__row--total { font-size: 18px; }  /* sm:text-lg */
}

.spd-cart-summary__total {
	color: #D93829;
	font-weight: var(--spd-font-weight-black);
}

.spd-cart-summary__total .spd-price,
.spd-cart-summary__total .amount {
	font-weight: inherit;
	color: inherit;
}

/* ============================================================
   10. Checkout CTA — React: w-full py-4 bg-[#0F5B94]
       hover:bg-[#0A436D] text-white font-black text-sm
       sm:text-base rounded-2xl gap-2 shadow-md active:scale-98.
   ============================================================ */
#spd-cart-page .wc-proceed-to-checkout {
	margin: 0;
	padding: 0;
}

#spd-cart-page .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;                               /* gap-2 */
	width: 100%;
	margin: 0;
	padding: 16px;                          /* py-4 */
	border: 0;
	border-radius: 16px;                    /* rounded-2xl */
	background-color: #0F5B94;
	color: #FFFFFF;
	font-size: 14px;                        /* text-sm */
	font-weight: var(--spd-font-weight-black);
	line-height: 1.4;
	text-decoration: none;
	box-shadow: var(--spd-shadow-md);
	transition: background-color var(--spd-transition-fast),
	            transform var(--spd-transition-fast);
}

@media (min-width: 640px) {
	#spd-cart-page .wc-proceed-to-checkout a.checkout-button { font-size: 16px; }  /* sm:text-base */
}

#spd-cart-page .wc-proceed-to-checkout a.checkout-button:hover,
#spd-cart-page .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background-color: #0A436D;
	color: #FFFFFF;
}

#spd-cart-page .wc-proceed-to-checkout a.checkout-button:active {
	transform: scale(0.98);                 /* active:scale-98 */
}

#spd-cart-page .wc-proceed-to-checkout a.checkout-button .spd-icon {
	width: 18px;                            /* ArrowRight size={18} */
	height: 18px;
	display: block;
	flex-shrink: 0;
}

/* ============================================================
   11. Reassurance — React: pt-3 border-t border-slate-100
       space-y-2 text-[11px] text-slate-500.
   ============================================================ */
.spd-cart-summary__reassurance {
	display: flex;
	flex-direction: column;
	gap: 8px;                               /* space-y-2 */
	padding-top: 12px;                      /* pt-3 */
	border-top: 1px solid #F1F5F9;          /* slate-100 */
	font-size: 11px;                        /* text-[11px] */
	font-weight: var(--spd-font-weight-normal);
	line-height: 1.5;
	color: #64748B;                         /* slate-500 */
}

.spd-cart-summary__reassurance-item {
	display: flex;
	align-items: center;
	gap: 8px;                               /* gap-2 */
}

.spd-cart-summary__reassurance-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.spd-cart-summary__reassurance-icon .spd-icon {
	width: 14px;                            /* size={14} */
	height: 14px;
	display: block;
}

.spd-cart-summary__reassurance-icon--success { color: #059669; }  /* emerald-600 */
.spd-cart-summary__reassurance-icon--blue { color: #0F5B94; }

/* ============================================================
   12. Notices — keep WooCommerce notices inside the React layout.
   ============================================================ */
#spd-cart-page .woocommerce-notices-wrapper,
.spd-cart-empty .woocommerce-notices-wrapper {
	margin-bottom: 16px;
}

/* ============================================================
   13. Empty cart page — React CartPage empty view:
       max-w-4xl mx-auto px-4 py-16 text-center space-y-6.
       The .wc-empty-cart-message node must stay in the DOM
       (cart.js uses it to swap in the empty view after an AJAX
       remove) but the native info banner is visually hidden —
       the designed empty state replaces it.
   ============================================================ */
#spd-cart-empty-page {
	max-width: 896px;                       /* max-w-4xl */
	margin-left: auto;
	margin-right: auto;
	padding: 64px 16px;                     /* py-16 px-4 */
	text-align: center;
}

#spd-cart-empty-page > * + * {
	margin-top: 24px;                       /* space-y-6 */
}

#spd-cart-empty-page .wc-empty-cart-message {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   14. Small screens — the React row already stacks on mobile
       (flex-col); the side row keeps qty left + total right.
   ============================================================ */
@media (max-width: 380px) {
	.spd-cart-item__thumb {
		width: 64px;
		height: 64px;
	}
}

/* ============================================================
   Phase 6B — coupon, free-shipping progress, cross-sells
   ============================================================ */

/* ============================================================
   15. Form children rhythm — React wraps header / progress /
       grid in space-y-8 (32px). These siblings live inside
       form.woocommerce-cart-form in the SPD markup.
   ============================================================ */
#spd-cart-page .woocommerce-cart-form > * + * {
	margin-top: 32px;                       /* space-y-8 */
}

/* ============================================================
   16. Free-shipping progress — React CartPage.tsx:106-133:
       bg-white rounded-2xl border border-slate-200 p-4 sm:p-5
       shadow-xs space-y-2.
   ============================================================ */
.spd-cart-freeship {
	display: flex;
	flex-direction: column;
	gap: 8px;                               /* space-y-2 */
	padding: 16px;                          /* p-4 */
	background-color: #FFFFFF;
	border: 1px solid #E2E8F0;              /* slate-200 */
	border-radius: 16px;                    /* rounded-2xl */
	box-shadow: var(--spd-shadow-xs);
}

@media (min-width: 640px) {
	.spd-cart-freeship { padding: 20px; }   /* sm:p-5 */
}

/* Text row — React: flex items-center justify-between
   text-xs sm:text-sm font-semibold. */
.spd-cart-freeship__text {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-semibold);
	line-height: 1.45;
}

@media (min-width: 640px) {
	.spd-cart-freeship__text { font-size: 14px; }  /* sm:text-sm */
}

/* Message — React: flex items-center gap-2 text-slate-700. */
.spd-cart-freeship__msg {
	display: inline-flex;
	align-items: center;
	gap: 8px;                               /* gap-2 */
	color: #334155;                         /* slate-700 */
}

.spd-cart-freeship__msg--success {
	color: #047857;                         /* emerald-700 */
	font-weight: var(--spd-font-weight-bold);
}

.spd-cart-freeship__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: #0F5B94;                         /* Truck text-[#0F5B94] */
}

.spd-cart-freeship__msg--success .spd-cart-freeship__icon {
	color: #059669;                         /* CheckCircle2 emerald-600 */
}

.spd-cart-freeship__icon .spd-icon {
	width: 18px;                            /* size={18} */
	height: 18px;
	display: block;
}

/* Remaining amount — React: strong text-[#0F5B94] font-extrabold. */
.spd-cart-freeship__amount {
	color: #0F5B94;
	font-weight: var(--spd-font-weight-extrabold);
}

.spd-cart-freeship__amount .amount,
.spd-cart-freeship__amount .spd-price {
	font-weight: inherit;
	color: inherit;
}

/* Percent badge — React: text-xs font-bold text-slate-400. */
.spd-cart-freeship__percent {
	flex-shrink: 0;
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-bold);
	color: #94A3B8;                         /* slate-400 */
	font-variant-numeric: tabular-nums;
}

/* Track — React: w-full h-2.5 rounded-full bg-slate-100
   overflow-hidden. */
.spd-cart-freeship__bar {
	width: 100%;
	height: 10px;                           /* h-2.5 */
	background-color: #F1F5F9;              /* slate-100 */
	border-radius: 9999px;                  /* rounded-full */
	overflow: hidden;
}

/* Fill — React: h-full transition-all duration-500 rounded-full
   bg-[#0F5B94] / bg-emerald-500 when reached. */
.spd-cart-freeship__fill {
	height: 100%;
	background-color: #0F5B94;
	border-radius: 9999px;
	transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1); /* duration-500 */
}

.spd-cart-freeship--reached .spd-cart-freeship__fill {
	background-color: #10B981;              /* emerald-500 */
}

/* ============================================================
   17. Coupon card — React CartPage.tsx:210-251:
       bg-white rounded-2xl border border-slate-200 p-4 sm:p-5
       shadow-xs space-y-3, in the summary column above totals.
   ============================================================ */
.spd-cart-coupon {
	display: flex;
	flex-direction: column;
	gap: 12px;                              /* space-y-3 */
	padding: 16px;                          /* p-4 */
	background-color: #FFFFFF;
	border: 1px solid #E2E8F0;              /* slate-200 */
	border-radius: 16px;                    /* rounded-2xl */
	box-shadow: var(--spd-shadow-xs);
}

@media (min-width: 640px) {
	.spd-cart-coupon { padding: 20px; }     /* sm:p-5 */
}

/* Sibling rhythm inside the summary column — React stacks the
   coupon card and the totals card with space-y-4 (16px). The
   coupon renders via woocommerce_before_cart_collaterals as a
   sibling of .cart-collaterals inside .spd-cart__summary-col. */
#spd-cart-page .spd-cart__summary-col > * + * {
	margin-top: 16px;                       /* space-y-4 */
}

/* Title — React: text-xs font-bold uppercase tracking-wider
   text-slate-700 flex items-center gap-1.5 + Tag icon #0F5B94. */
.spd-cart-coupon__title {
	display: flex;
	align-items: center;
	gap: 6px;                               /* gap-1.5 */
	margin: 0;
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-bold);
	line-height: 1.4;
	letter-spacing: 0.05em;                 /* tracking-wider */
	text-transform: uppercase;
	color: #334155;                         /* slate-700 */
}

.spd-cart-coupon__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: #0F5B94;
}

.spd-cart-coupon__icon .spd-icon {
	width: 14px;                            /* Tag size={14} */
	height: 14px;
	display: block;
}

/* Applied chip — React: flex items-center justify-between
   bg-emerald-50 border-emerald-200 text-emerald-800 p-2.5
   rounded-xl text-xs font-semibold. */
.spd-cart-coupon__applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px;                          /* p-2.5 */
	background-color: #ECFDF5;              /* emerald-50 */
	border: 1px solid #A7F3D0;              /* emerald-200 */
	border-radius: 12px;                    /* rounded-xl */
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-semibold);
	color: #065F46;                         /* emerald-800 */
}

.spd-cart-coupon__applied-info {
	min-width: 0;
	overflow-wrap: anywhere;
}

.spd-cart-coupon__code {
	text-transform: uppercase;              /* React input uppercases */
	font-weight: var(--spd-font-weight-bold);
}

/* "Retirer" — React: text-emerald-700 hover:text-emerald-900
   font-bold underline. Native a.woocommerce-remove-coupon →
   cart.js handles the removal via AJAX. */
.spd-cart-coupon__remove {
	flex-shrink: 0;
	color: #047857;                         /* emerald-700 */
	font-weight: var(--spd-font-weight-bold);
	text-decoration: underline;
}

.spd-cart-coupon__remove:hover,
.spd-cart-coupon__remove:focus-visible {
	color: #064E3B;                         /* emerald-900 */
}

/* Form — React: flex gap-2. The .coupon class is required by
   cart.js (it locates the wrapper to append .coupon-error-notice
   under the field on invalid codes). flex-wrap lets that notice
   take a full row below input + button. */
.spd-cart-coupon__form {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 8px;                               /* gap-2 */
	margin: 0;
}

/* Input — React: flex-1 bg-slate-50 border-slate-200 rounded-xl
   px-3 py-2 text-xs font-semibold uppercase
   focus:ring-2 focus:ring-[#0F5B94]. */
#spd-cart-page .spd-cart-coupon__input {
	flex: 1 1 0%;
	min-width: 0;                           /* never overflow the card */
	padding: 8px 12px;                      /* py-2 px-3 */
	margin: 0;
	background-color: #F8FAFC;              /* slate-50 */
	border: 1px solid #E2E8F0;              /* slate-200 */
	border-radius: 12px;                    /* rounded-xl */
	box-shadow: none;
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-semibold);
	line-height: 1.45;
	color: #0F172A;                         /* slate-900 */
	text-transform: uppercase;              /* React uppercase input */
}

#spd-cart-page .spd-cart-coupon__input:focus {
	outline: none;
	border-color: #0F5B94;
	box-shadow: 0 0 0 2px rgba(15, 91, 148, 0.35); /* ring-2 #0F5B94 */
}

/* Invalid-code state — added by cart.js (.has-error on the input,
   .coupon-error-notice appended inside .coupon). */
#spd-cart-page .spd-cart-coupon__input.has-error {
	border-color: #D93829;
}

#spd-cart-page .spd-cart-coupon__input.has-error:focus {
	box-shadow: 0 0 0 2px rgba(217, 56, 41, 0.35);
}

#spd-cart-page .coupon-error-notice {
	flex: 1 1 100%;
	margin: 0;
	font-size: 11px;                        /* text-[11px] */
	font-weight: var(--spd-font-weight-semibold);
	line-height: 1.45;
	color: #D93829;
}

/* Apply button — React: bg-[#0F5B94] hover:bg-[#0A436D]
   text-white px-3.5 py-2 rounded-xl text-xs font-bold. */
#spd-cart-page .spd-cart-coupon__apply {
	flex-shrink: 0;
	padding: 8px 14px;                      /* py-2 px-3.5 */
	margin: 0;
	border: 0;
	border-radius: 12px;                    /* rounded-xl */
	background-color: #0F5B94;
	color: #FFFFFF;
	font-size: 12px;                        /* text-xs */
	font-weight: var(--spd-font-weight-bold);
	line-height: 1.45;
	box-shadow: none;
	transition: background-color var(--spd-transition-fast);
}

#spd-cart-page .spd-cart-coupon__apply:hover,
#spd-cart-page .spd-cart-coupon__apply:focus-visible {
	background-color: #0A436D;
	color: #FFFFFF;
}

/* Hint — React: text-[11px] text-slate-400, code font-bold
   text-slate-600. Rendered only when a REAL coupon exists. */
.spd-cart-coupon__hint {
	margin: 0;
	font-size: 11px;                        /* text-[11px] */
	font-weight: var(--spd-font-weight-normal);
	line-height: 1.5;
	color: #94A3B8;                         /* slate-400 */
}

.spd-cart-coupon__hint code {
	font-weight: var(--spd-font-weight-bold);
	color: #475569;                         /* slate-600 */
}

/* ============================================================
   18. Cross-sells — native woocommerce_cross_sell_display()
       re-homed on woocommerce_after_cart (full width below the
       page). Renders ONLY when products declare cross-sells;
       each card is the canonical product-card.php inside the
       shared .spd-product-cards scope. Section position mirrors
       the related-products rail (spd-single-product.css).
   ============================================================ */
.spd-cross-sells {
	margin-top: 32px;                       /* space-y-8 vs page */
}

.spd-cross-sells__title {
	margin: 0 0 24px;                       /* mb-6 */
	padding: 0;
	font-size: 20px;                        /* text-xl */
	font-weight: var(--spd-font-weight-extrabold);
	line-height: 1.3;
	letter-spacing: var(--spd-tracking-tight);
	color: #0F172A;                         /* slate-900 */
}

@media (min-width: 640px) {
	.spd-cross-sells__title { font-size: 24px; }  /* sm:text-2xl */
}

/* Grid — same responsive rhythm as .spd-related__grid:
   1 col → sm:2 → md:4, gap-4 sm:gap-6. */
.spd-cross-sells__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;                              /* gap-4 */
	align-items: stretch;
	min-width: 0;
}

@media (min-width: 640px) {
	.spd-cross-sells__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;                          /* sm:gap-6 */
	}
}

@media (min-width: 1024px) {
	.spd-cross-sells__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Visually-hidden utility for the coupon label (screen readers). */
#spd-cart-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}