/*
  shr-cart-2026.css — Cart page (/cart/) redesign, "s2u 2026".

  Flag-gated: only enqueued when shr_is_cart_v2_enabled() (functions.php), on
  the classic [woocommerce_cart] page. Depends on shr-sections.css for the
  design-system tokens, blueprint frame + corner marks, buttons and kickers.
  Scoped to body.s2u-cart-v2 so nothing leaks to other pages.

  Structure is WooCommerce's native cart markup (form + table + collaterals),
  restyled — the qty steppers and auto-update are layered on by
  shr-cart-2026.js against the native quantity inputs + update-cart button.
*/

/* ═══════════ Page frame ═══════════ */
.s2u-cart-v2 .s2u-checkout-steps,
.s2u-cart-v2 .s2u-cart-grid,
.s2u-cart-v2 .s2u-cart-empty {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Storefront prints an <h1 class="entry-title"> "Cart" — the step indicator
   replaces it as the page's orienting element. */
.s2u-cart-v2 .entry-title,
.s2u-cart-v2 .page-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ═══════════ Step indicator (shared with checkout — kept self-contained
   in each page's CSS to avoid a sitewide file edit) ═══════════ */
.s2u-checkout-steps {
	margin: 0 auto clamp(20px, 3vw, 32px);
}
.s2u-checkout-steps__list {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.s2u-checkout-steps__step {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 15px;
	font-weight: 600;
	color: var(--s2u-text-muted, #5b6570);
}
.s2u-checkout-steps__step a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}
.s2u-checkout-steps__step::after {
	content: "\2192"; /* → */
	margin-left: 10px;
	color: var(--s2u-divider);
	font-weight: 400;
}
.s2u-checkout-steps__step:last-child::after {
	content: none;
}
.s2u-checkout-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--s2u-divider);
	font-size: 15px;
	line-height: 1;
}
.s2u-checkout-steps__step.is-current { color: var(--s2u-navy); }
.s2u-checkout-steps__step.is-current .s2u-checkout-steps__num {
	background: var(--s2u-red);
	border-color: var(--s2u-red);
	color: #fff;
}
.s2u-checkout-steps__step.is-done { color: var(--s2u-text); }
.s2u-checkout-steps__step.is-done .s2u-checkout-steps__num {
	background: var(--s2u-navy);
	border-color: var(--s2u-navy);
	color: #fff;
}

/* ═══════════ 2-col grid ═══════════ */
.s2u-cart-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: clamp(20px, 3vw, 32px);
	align-items: start;
}

/* ═══════════ Line items plate ═══════════ */
.s2u-cart-lines {
	position: relative;
	padding: clamp(18px, 2.4vw, 28px);
	background: #fff;
	margin: 0;
}
.s2u-cart-lines__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--s2u-navy);
}
.s2u-cart-lines__title {
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 22px;
	font-weight: 600;
	color: var(--s2u-navy);
}
.s2u-cart-lines__count {
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	font-size: 14px;
	color: var(--s2u-text-muted, #5b6570);
}

/* Native shop_table → block grid rows (cart.js targets inputs by name, not
   table layout, so display:block is safe). */
.s2u-cart-table,
.s2u-cart-table tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}
.s2u-cart-table tr.cart_item {
	display: grid;
	width: 100%;
	box-sizing: border-box;
	grid-template-columns: 76px minmax(0, 1fr) 124px 116px 34px;
	grid-template-areas:
		"thumb name  qty sub remove"
		"thumb price qty sub remove";
	column-gap: 18px;
	row-gap: 2px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--s2u-divider);
}
/* Storefront's .shop_table_responsive td rule adds ~24px padding + a big
   line-height per cell (winning on specificity), which was inflating every
   row to ~220px. Zero it out with the body-class prefix + !important. */
.s2u-cart-v2 .s2u-cart-table td {
	display: block;
	padding: 0 !important;
	border: 0 !important;
	line-height: 1.35;
	font-size: 15px;
}
.s2u-cart-table td::before { content: none !important; } /* kill responsive data-title labels */

.s2u-cart-table .product-thumbnail {
	grid-area: thumb;
	align-self: center;
	width: 76px;
	height: 76px;
	border: 1px solid var(--s2u-divider);
	background: #fff;
}
/* Storefront's own .woocommerce table.cart img rule (with .cart in our table
   class) shrinks cart thumbs to ~25px and out-specifies a plain selector.
   Prefix with the body class + explicit px to win, matching the design. */
.s2u-cart-v2 .s2u-cart-table .product-thumbnail a {
	display: block !important;
	width: 74px !important;
	height: 74px !important;
}
.s2u-cart-v2 .s2u-cart-table .product-thumbnail img {
	width: 64px !important;
	height: 64px !important;
	max-width: 64px !important;
	margin: 5px;
	object-fit: contain;
	box-sizing: border-box;
}
.s2u-cart-table .product-name {
	grid-area: name;
	align-self: end;
	font-size: 15px;
	line-height: 1.35;
}
.s2u-cart-item__kicker {
	display: block;
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 11px;
	font-weight: 600;
	color: var(--s2u-accent-700);
	margin-bottom: 2px;
}
.s2u-cart-table .product-name > a {
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--s2u-navy);
	text-decoration: none;
}
.s2u-cart-table .product-name > a:hover { color: var(--s2u-red); }
.s2u-cart-table .product-name .variation,
.s2u-cart-table .product-name dl,
.s2u-cart-table .product-name .backorder_notification {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--s2u-text-muted, #5b6570);
}
.s2u-cart-table .product-price {
	grid-area: price;
	align-self: start;
	font-size: 13px;
	color: var(--s2u-text-muted, #5b6570);
}
.s2u-cart-table .product-price::after {
	content: " each";
	font-size: 11px;
}
.s2u-cart-table .product-quantity {
	grid-area: qty;
	align-self: center;
	justify-self: center;
}
.s2u-cart-table .product-subtotal {
	grid-area: sub;
	align-self: center;
	justify-self: end;
	min-width: 96px;
	text-align: right;
	font-family: var(--s2u-font-heading);
	font-size: 20px;
	font-weight: 600;
	color: var(--s2u-navy);
}
.s2u-cart-table .product-subtotal del {
	display: inline-block;
	margin-right: 6px;
	font-size: 14px;
	font-weight: 400;
	color: var(--s2u-text-muted, #5b6570);
}
.s2u-cart-table .product-subtotal ins { text-decoration: none; color: var(--s2u-red); }
.s2u-cart-table .product-remove {
	grid-area: remove;
	align-self: center;
	justify-self: end;
}
/* z-index + a white ring keeps the row/cell rules from appearing to slice
   through the ✕ where it sits next to a divider. */
.s2u-cart-v2 .s2u-cart-table .product-remove a.remove {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 18px;
	line-height: 1;
	color: var(--s2u-text-muted, #5b6570);
	background: #fff;
	text-decoration: none;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #fff;
}
.s2u-cart-v2 .s2u-cart-table .product-remove a.remove:hover {
	color: var(--s2u-red);
	background: #fff; /* keep the ring seamless — Storefront hovers it grey */
}

/* ── Qty stepper (buttons injected by shr-cart-2026.js) ── */
.s2u-cart-table .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--s2u-divider);
}
.s2u-cart-table .quantity input.qty {
	width: 44px;
	height: 38px;
	border: 0;
	border-left: 1px solid var(--s2u-divider);
	border-right: 1px solid var(--s2u-divider);
	border-radius: 0;
	text-align: center;
	font-size: 15px;
	-moz-appearance: textfield;
	appearance: textfield;
	background: #fff;
}
.s2u-cart-table .quantity input.qty::-webkit-outer-spin-button,
.s2u-cart-table .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.s2u-qty-btn {
	width: 34px;
	height: 38px;
	border: 0;
	background: var(--s2u-accent-100);
	color: var(--s2u-navy);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.s2u-qty-btn:hover { background: var(--s2u-accent-400); color: #fff; }

/* ── Actions row: coupon + continue ── */
.s2u-cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding-top: 18px;
}
.s2u-cart-coupon {
	display: flex;
	gap: 0;
}
.s2u-cart-coupon__input {
	height: 42px;
	width: 180px;
	border: 1px solid var(--s2u-divider);
	border-right: 0;
	border-radius: 0;
	padding: 0 12px;
	font-size: 14px;
}
.s2u-cart-coupon__apply {
	height: 42px;
	border: 0;
	border-radius: 0;
	background: var(--s2u-navy);
	color: #fff;
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 0 20px;
	cursor: pointer;
}
.s2u-cart-coupon__apply:hover { background: var(--s2u-navy2); }
.s2u-cart-continue {
	margin-left: auto;
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 14px;
	color: var(--s2u-accent-700);
	text-decoration: none;
}
.s2u-cart-continue:hover { color: var(--s2u-red); }
/* Native update-cart button hidden — shr-cart-2026.js clicks it on qty change. */
.s2u-cart-update {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── Free-delivery note ── */
.s2u-cart-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--s2u-divider);
	background: var(--s2u-accent-100);
	font-size: 13.5px;
	color: var(--s2u-text);
}
.s2u-cart-note svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--s2u-accent-700);
}
.s2u-cart-note a { color: var(--s2u-accent-700); text-decoration: underline; }
.s2u-cart-note a:hover { color: var(--s2u-red); }

/* ═══════════ Totals card (sticky) ═══════════ */
/* Storefront's own `.cart-collaterals .cart_totals { float:right; width:48% }`
   out-specifies a plain class and shrinks the summary to half its grid
   column, floating it right — which reads as a big empty gap between the
   line-items plate and the summary. Force both to fill the column. */
.s2u-cart-v2 .s2u-cart-side,
.s2u-cart-v2 .s2u-cart-totals {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}
/* Storefront also paints totals header cells grey — keep the card clean. */
.s2u-cart-v2 .s2u-cart-totals__table th,
.s2u-cart-v2 .s2u-cart-totals__table td {
	background: transparent !important;
}
.s2u-cart-totals {
	position: sticky;
	top: 96px;
	padding: clamp(18px, 2vw, 24px);
	background: #fff;
}
/* Header row: title left, item count right, one shared 2px rule beneath. */
.s2u-cart-totals__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 11px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--s2u-navy);
}
.s2u-cart-totals__title {
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 20px;
	font-weight: 600;
	color: var(--s2u-navy);
	margin: 0;
	padding: 0;
	border: 0;
}
.s2u-cart-totals__count {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--s2u-neutral-600);
}
.s2u-cart-totals__table {
	width: 100%;
	margin: 0;
	border: 0;
}
.s2u-cart-totals__table tr { border: 0; }
.s2u-cart-totals__table th,
.s2u-cart-totals__table td {
	padding: 4.5px 0;
	border: 0;
	font-size: 14.5px;
	text-align: left;
	vertical-align: top;
}
/* Tabular figures so the RM column lines up digit-for-digit down the card. */
.s2u-cart-totals__table td { font-variant-numeric: tabular-nums; }
.s2u-cart-totals__table th {
	padding-right: 16px;
	font-weight: 400;
	color: var(--s2u-neutral-600);
}
.s2u-cart-totals__table td { text-align: right; font-weight: 600; color: var(--s2u-navy); }
.s2u-cart-totals__table td::before { content: none !important; }
.s2u-cart-totals__table .cart-discount td { color: var(--s2u-red); }
.s2u-money { margin-bottom: 0 !important; }

/* Coupon code as a bordered chip beside the "Discount" label, rather than
   Woo's "Coupon: SAVE10" sentence. */
.s2u-coupon-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 5px;
	border: 1px solid var(--s2u-neutral-400);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--s2u-neutral-700);
}

/* ═══════════ Delivery-method picker ═══════════ */
.s2u-delivery {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid var(--s2u-divider);
}
.s2u-delivery__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 11px;
}
.s2u-delivery__label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--s2u-neutral-700);
}
.s2u-delivery__dest {
	text-align: right;
	font-size: 12.5px;
	color: var(--s2u-neutral-600);
}
/* "Change" is a <button> so it toggles the calculator without a href — it must
   not inherit the UA button chrome, and it must not fall back to the browser's
   default link purple (the bug this redesign replaces). */
.s2u-delivery__change {
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--s2u-accent-700);
	cursor: pointer;
}
.s2u-delivery__change:hover,
.s2u-delivery__change:focus { color: var(--s2u-red); }

.s2u-rates {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.s2u-rate { margin: 0; }
.s2u-rate__row {
	display: grid;
	grid-template-columns: 14px 1fr auto;
	align-items: start;
	column-gap: 11px;
	padding: 11px 12px;
	border: 1px solid var(--s2u-divider);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.s2u-rate__row:hover { border-color: var(--s2u-accent); }
/* The native radio stays in the DOM and focusable (Woo's AJAX binds to it) —
   clipped rather than display:none, which would drop it from the tab order. */
.s2u-rate__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.s2u-rate__dot {
	width: 14px;
	height: 14px;
	margin-top: 2px;
	border: 1px solid var(--s2u-neutral-400);
	background: #fff;
}
.s2u-rate__body { display: block; min-width: 0; }
.s2u-rate__name {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--s2u-navy);
}
.s2u-rate__meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--s2u-neutral-600);
}
.s2u-rate__cost {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--s2u-navy);
}
.s2u-rate--selected .s2u-rate__row {
	border-color: var(--s2u-accent);
	background: var(--s2u-accent-100);
}
.s2u-rate--selected .s2u-rate__dot {
	border-color: var(--s2u-accent);
	/* 6px centre square via an inset shadow — keeps the row markup to one
	   element and matches the system's square registration grammar. */
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 14px var(--s2u-accent);
}
.s2u-rate__row:has(.s2u-rate__input:focus-visible) {
	outline: 2px solid var(--s2u-accent);
	outline-offset: 2px;
}

.s2u-delivery__none {
	margin: 0;
	padding: 11px 12px;
	border: 1px solid var(--s2u-divider);
	font-size: 13px;
	line-height: 1.5;
	color: var(--s2u-neutral-700);
}

/* Explains the RM0.00 East Malaysia option. Sits under the rates rather than
   in the notice queue, so it reads as guidance on the choice above it, not as
   a page-level alert. */
.s2u-delivery__note {
	margin: 10px 0 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--s2u-neutral-700);
}

/* Inline shipping calculator revealed by "Change". Woo ships its own toggle
   link above the form; ours replaces it, so that one is hidden and the form
   is forced open whenever the wrapper is. */
.s2u-delivery__calc { margin-top: 12px; }
.s2u-delivery__calc .shipping-calculator-button { display: none !important; }
.s2u-delivery__calc .shipping-calculator-form { display: block !important; }
.s2u-delivery__calc .form-row { margin: 0 0 10px; }
.s2u-delivery__calc input,
.s2u-delivery__calc select,
.s2u-delivery__calc .select2-container .select2-selection {
	width: 100%;
	border: 1px solid var(--s2u-neutral-400);
	border-radius: 0;
	background: #fff;
	font-family: var(--s2u-font-body);
	font-size: 13.5px;
}
.s2u-delivery__calc button[name="calc_shipping"] {
	width: 100%;
	border-radius: 0;
	background: var(--s2u-navy);
	color: #fff;
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.s2u-delivery__calc button[name="calc_shipping"]:hover { background: var(--s2u-red); }

/* ═══════════ Total ═══════════ */
.s2u-cart-totals__total {
	margin-top: 16px !important;
	padding-top: 14px;
	border-top: 2px solid var(--s2u-navy);
}
.s2u-cart-totals__table .order-total th {
	padding-top: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--s2u-navy);
}
.s2u-cart-totals__table .order-total td {
	padding-top: 0;
	font-family: var(--s2u-font-heading);
	font-size: 30px;
	line-height: 1;
	color: var(--s2u-navy);
}
.s2u-cart-totals__caption {
	display: block;
	margin-top: 5px;
	font-family: var(--s2u-font-body);
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--s2u-neutral-600);
}

.s2u-cart-totals__checkout { margin-top: 18px; }
.s2u-cart-totals__checkout .checkout-button,
.s2u-cart-totals__checkout a.button {
	display: block;
	width: 100%;
	text-align: center;
	padding: 15px 20px;
	background: var(--s2u-red);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 18px;
	font-weight: 600;
}
/* Hover floats the button up off the card — the design file's .s2u-btn-anim
   (translateY(-3px) + shadow on hover, -1px on press), same motion as the
   sitewide .s2u-lift. The primary CTA is the one place on the page where a
   raised state is worth the ink. */
.s2u-cart-totals__checkout .checkout-button,
.s2u-cart-totals__checkout a.button {
	transition: background-color .16s ease, transform .18s ease, box-shadow .18s ease;
}
.s2u-cart-totals__checkout .checkout-button:hover,
.s2u-cart-totals__checkout a.button:hover {
	background: var(--s2u-red-dark);
	transform: translateY(-3px);
	box-shadow: var(--s2u-shadow-md);
}
.s2u-cart-totals__checkout .checkout-button:active,
.s2u-cart-totals__checkout a.button:active { transform: translateY(-1px); }

.s2u-cart-totals__quote {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	padding: 13px 20px;
	background: transparent;
	color: var(--s2u-navy);
	border: 1px solid var(--s2u-navy);
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 15px;
	text-decoration: none;
	box-sizing: border-box;
}
.s2u-cart-totals__quote:hover { background: var(--s2u-navy); color: #fff; }

.s2u-cart-totals__b2b {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--s2u-divider);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--s2u-text-muted, #5b6570);
}
.s2u-cart-totals__b2b a { color: var(--s2u-accent-700); text-decoration: underline; }
.s2u-cart-totals__b2b a:hover { color: var(--s2u-red); }

/* Cross-sells (if any) render inside collaterals above totals — keep tidy */
.s2u-cart-side .cross-sells { margin-bottom: 20px; }

/* ═══════════ Empty cart ═══════════ */
.s2u-cart-empty {
	position: relative;
	max-width: 640px;
	margin: clamp(20px, 4vw, 40px) auto;
	padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
	text-align: center;
	background: #fff;
}
.s2u-cart-empty__title {
	font-family: var(--s2u-font-heading);
	text-transform: uppercase;
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 600;
	color: var(--s2u-navy);
	margin: 0 0 12px;
}
.s2u-cart-empty__copy {
	max-width: 460px;
	margin: 0 auto 24px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--s2u-text-muted, #5b6570);
}
.s2u-cart-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* ═══════════ Mobile ═══════════ */
@media (max-width: 900px) {
	.s2u-cart-grid { grid-template-columns: minmax(0, 1fr); }
	.s2u-cart-totals { position: static; top: auto; }
}

@media (max-width: 560px) {
	/* Remove (✕) gets its OWN column here — previously it shared the name
	   area and overlapped the brand kicker. */
	.s2u-cart-table tr.cart_item {
		grid-template-columns: 60px minmax(0, 1fr) 26px;
		grid-template-areas:
			"thumb name   remove"
			"thumb price  remove"
			"thumb qty    remove"
			"thumb sub    remove";
		column-gap: 12px;
		row-gap: 6px;
	}
	/* Storefront's .shop_table_responsive right-aligns td on narrow screens
	   (its label-left/value-right pattern) — we render real columns, so keep
	   everything left-aligned. */
	.s2u-cart-v2 .s2u-cart-table td {
		text-align: left !important;
	}
	.s2u-cart-table .product-thumbnail {
		align-self: start;
		width: 60px;
		height: 60px;
	}
	.s2u-cart-v2 .s2u-cart-table .product-thumbnail a {
		width: 58px !important;
		height: 58px !important;
	}
	.s2u-cart-v2 .s2u-cart-table .product-thumbnail img {
		width: 50px !important;
		height: 50px !important;
		max-width: 50px !important;
		margin: 4px;
	}
	.s2u-cart-table .product-name {
		align-self: start;
		padding-right: 0;
	}
	.s2u-cart-table .product-remove {
		grid-area: remove;
		align-self: start;
		justify-self: end;
	}
	.s2u-cart-table .product-quantity { justify-self: start; }
	.s2u-cart-table .product-subtotal {
		justify-self: start;
		min-width: 0;
		text-align: left !important;
	}
	.s2u-cart-continue { margin-left: 0; width: 100%; }
}

/* ── Bundled add-ons: nested under their parent ─────────────────────────────
   Product Bundles emits add-ons as ordinary sibling rows, so without this an
   add-on reads as an independent purchase. Row classes come from
   woocommerce/cart/cart.php (s2u-cart-row--parent / --addon).
   !important throughout: Storefront's .shop_table_responsive td rules beat
   plain class selectors here — see the catalogue in the project notes. */

/* No divider between a parent and its add-ons, so the group reads as one unit. */
.s2u-cart-table tr.s2u-cart-row--parent td {
	border-bottom: 0 !important;
	padding-bottom: 6px !important;
}

.s2u-cart-table tr.s2u-cart-row--addon td {
	padding-top: 6px !important;
	padding-bottom: 10px !important;
}

/* Indent the whole child row and draw the connector against the first cell. */
.s2u-cart-table tr.s2u-cart-row--addon td.product-thumbnail {
	position: relative;
	padding-left: 34px !important;
}

.s2u-cart-table tr.s2u-cart-row--addon td.product-thumbnail::before {
	content: "";
	position: absolute;
	left: 14px;
	top: -6px;
	bottom: 50%;
	width: 1px;
	background: var(--s2u-divider);
}

.s2u-cart-table tr.s2u-cart-row--addon td.product-thumbnail::after {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 12px;
	height: 1px;
	background: var(--s2u-divider);
}

/* Smaller thumbnail so the add-on visibly sits below its parent in hierarchy.
   The framed box (76px, bordered, white) is dropped too — at 44px the frame
   was much larger than the image inside it and read as a stray grey block. */
.s2u-cart-table tr.s2u-cart-row--addon td.product-thumbnail {
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
}

.s2u-cart-table tr.s2u-cart-row--addon td.product-thumbnail img {
	width: 44px !important;
	height: 44px !important;
}

/* Lighter title — the add-on is a modifier, not a headline. */
.s2u-cart-table tr.s2u-cart-row--addon td.product-name a,
.s2u-cart-table tr.s2u-cart-row--addon td.product-name {
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

/* "add-on" label replaces the brand kicker on child rows. */
.s2u-cart-item__addon {
	display: block;
	margin-bottom: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--s2u-neutral-700);
}

@media (max-width: 768px) {
	.s2u-cart-table tr.s2u-cart-row--addon td.product-thumbnail {
		padding-left: 26px !important;
	}

	.s2u-cart-table tr.s2u-cart-row--addon td.product-thumbnail::before,
	.s2u-cart-table tr.s2u-cart-row--addon td.product-thumbnail::after {
		left: 8px;
	}
}

/* Calculator shown on its own when WooCommerce will not price delivery yet
   (address outside the ship-to countries, or none entered) — no rate rows to
   sit under, so it needs its own top gap. */
.s2u-delivery__calc--bare { margin-top: 12px; }

/* Any link inside the summary card takes its colour from the token sheet.
   Woo's coupon "[Remove]" had no rule of its own and was rendering in the
   browser's default visited purple — handover.md: "No purple, ever". The
   two CTAs and the Change control keep their own styling. */
.s2u-cart-totals a:not(.button):not(.checkout-button):not(.s2u-cart-totals__quote) {
	color: var(--s2u-accent-700);
}
.s2u-cart-totals a:not(.button):not(.checkout-button):not(.s2u-cart-totals__quote):hover {
	color: var(--s2u-red);
}

/* Instruction above the bare address form — deliberately unboxed. With the
   .s2u-delivery__none hairline it looked like an empty text field. */
.s2u-delivery__hint {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--s2u-neutral-600);
}

/* WooCommerce notices ("… has been added to your cart", "Shipping costs
   updated") are output above the page grid, outside every container, so they
   ran the full viewport width while the plate, the summary card and the
   checkout's coupon/login bars are all capped at the 1200px content column.
   Cap them to match — same width the checkout's "Have a coupon?" bar uses. */
.s2u-cart-v2 .woocommerce-message,
.s2u-cart-v2 .woocommerce-info,
.s2u-cart-v2 .woocommerce-error {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ═══════════ Rate-refresh feedback ═══════════
   A destination change means a live courier API call (measured 2.1–3.9s), so
   the rate rows can sit stale for long enough to look broken. `.s2u-rates-busy`
   is set on <body> for the duration — body survives Woo's fragment swap, the
   card does not. Overriding [hidden] in CSS rather than toggling the attribute
   keeps the reveal declarative, and a fresh fragment comes back hidden again
   with no cleanup needed. */
.s2u-delivery__busy,
.s2u-delivery__incomplete {
	margin: 0 0 9px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--s2u-neutral-700);
}
.s2u-rates-busy .s2u-delivery__busy[hidden] { display: block; }
.s2u-rates-busy .s2u-rates {
	opacity: .45;
	pointer-events: none;
	transition: opacity .15s ease;
}
.s2u-delivery__incomplete {
	padding-left: 9px;
	border-left: 2px solid var(--s2u-accent-700);
	color: var(--s2u-text);
}

/* The page <h1> ("Cart") is visually hidden above, but its wrapping
   header.entry-header keeps Storefront's own bottom margin — 96px of empty
   space between the breadcrumb and the step indicator. Collapse the wrapper's
   box rather than display:none it, so the hidden <h1> stays in the document
   for assistive tech and SEO. */
.s2u-cart-v2 .entry-header {
	margin: 0 !important;
	padding: 0 !important;
}