/**
 * Basket page (items present).
 *
 * The markup is WooCommerce's cart table. Everything below turns it into the
 * two-column card layout without changing the table's DOM, so plugins that
 * hook the cart keep working.
 */

body.mr-basket-has-items {
	--mr-navy: #0b2856;
	--mr-red: #ed1111;
	--mr-muted: #5b7091;
	--mr-line: #e3e9f2;
	--mr-green: #1f9d55;
	background: #f4f6fa;
}

body.mr-basket-has-items .page-header {
	display: none;
}

/* ---------- Two column shell ---------- */

body.mr-basket-has-items .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 540px;
	align-items: start;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 26px 32px 40px;
	font-family: Arial, Helvetica, sans-serif;
}

body.mr-basket-has-items .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

body.mr-basket-has-items .mrb-basket,
body.mr-basket-has-items .cart-collaterals {
	background: #fff;
	border: 1px solid var(--mr-line);
	border-radius: 12px;
	padding: 26px 30px 24px;
}

body.mr-basket-has-items .cart-collaterals {
	position: sticky;
	top: 20px;
}

/* ---------- Items card ---------- */

.mrb-basket__title {
	margin: 0 0 4px;
	font-size: 27px;
	font-weight: 800;
	color: var(--mr-navy);
	letter-spacing: -0.3px;
}

.mrb-basket__count {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--mr-muted);
}

/* Strip the table chrome */
body.mr-basket-has-items table.cart,
body.mr-basket-has-items table.cart tbody,
body.mr-basket-has-items table.cart tr,
body.mr-basket-has-items table.cart td {
	display: block;
	width: auto;
	border: 0;
	padding: 0;
	background: none;
}

body.mr-basket-has-items table.cart {
	margin: 0;
	border-collapse: collapse;
}

body.mr-basket-has-items table.cart thead {
	display: none;
}

/* One cart line = one card row */
body.mr-basket-has-items table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 150px 150px;
	align-items: center;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--mr-line);
}

body.mr-basket-has-items table.cart tr.cart_item:first-child {
	padding-top: 4px;
}

/* The default × cell is replaced by the text link in the subtotal cell */
body.mr-basket-has-items table.cart td.product-remove {
	display: none;
}

body.mr-basket-has-items table.cart td.product-thumbnail img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 6px;
	background: #f2f5fa;
}

body.mr-basket-has-items table.cart td.product-name {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: left;
}

.mrb-item__name,
.mrb-item__name a {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mr-navy);
	text-decoration: none;
}

.mrb-item__name a:hover {
	text-decoration: underline;
}

.mrb-item__cat {
	font-size: 13px;
	color: #1a56b8;
}

.mrb-item__stock {
	font-size: 13px;
	font-weight: 600;
}

.mrb-item__stock.is-in {
	color: var(--mr-green);
}

.mrb-item__stock.is-out {
	color: var(--mr-red);
}

/* Woo's own per-unit price cell is redundant; the "each" line covers it */
body.mr-basket-has-items table.cart td.product-price {
	display: none;
}

/* ---------- Quantity stepper ---------- */

body.mr-basket-has-items table.cart td.product-quantity {
	justify-self: center;
}

body.mr-basket-has-items .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid #c8d3e4;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

body.mr-basket-has-items .quantity input.qty {
	width: 46px;
	height: 42px;
	border: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--mr-navy);
	background: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

body.mr-basket-has-items .quantity input.qty::-webkit-outer-spin-button,
body.mr-basket-has-items .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mrb-qty-btn {
	width: 40px;
	height: 42px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 19px;
	line-height: 1;
	color: var(--mr-navy);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mrb-qty-btn:hover {
	background: #eef3fb;
}

.mrb-qty-btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ---------- Line total ---------- */

body.mr-basket-has-items table.cart td.product-subtotal {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}

.mrb-item__total {
	font-size: 16px;
	font-weight: 700;
	color: var(--mr-navy);
}

.mrb-item__each {
	font-size: 13px;
	color: var(--mr-muted);
}

body.mr-basket-has-items .woocommerce a.mrb-item__remove {
	font-size: 13px;
	color: var(--mr-muted);
	text-decoration: underline;
	margin-top: 4px;
}

body.mr-basket-has-items .woocommerce a.mrb-item__remove:hover {
	color: var(--mr-red);
}

/* The stock update form still posts; it just isn't shown */
body.mr-basket-has-items table.cart td.actions {
	display: none !important;
}

.mrb-basket__note {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--mr-muted);
}

.mrb-basket__continue {
	display: inline-block;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 600;
	color: #1a56b8;
	text-decoration: none;
}

.mrb-basket__continue:hover {
	text-decoration: underline;
}

/* ---------- Summary panel ---------- */

.mrb-summary__title {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 800;
	color: var(--mr-navy);
}

.mrb-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--mr-line);
	font-size: 15px;
}

.mrb-row__label {
	font-weight: 700;
	color: var(--mr-navy);
}

.mrb-row__value {
	text-align: right;
	color: var(--mr-navy);
}

.mrb-row__value--muted {
	color: var(--mr-muted);
	font-weight: 400;
}

.mrb-row--discount .mrb-row__label,
.mrb-row--discount .mrb-row__value {
	color: var(--mr-red);
}

.mrb-row__sub {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--mr-muted);
	margin-top: 2px;
}

.mrb-row--total {
	border-bottom: 0;
	padding-top: 16px;
	font-size: 17px;
}

.mrb-row--total .mrb-row__label {
	font-size: 19px;
}

.mrb-row--total .mrb-row__value {
	font-size: 22px;
	font-weight: 800;
}

/* ---------- Coupon accordion ---------- */

.mrb-coupon {
	border-top: 1px solid var(--mr-line);
	padding-top: 6px;
}

.mrb-coupon__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 13px 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: #1a56b8;
	text-align: left;
}

.mrb-coupon__tag {
	width: 18px;
	height: 18px;
	fill: var(--mr-navy);
	flex: none;
}

.mrb-coupon__chev {
	width: 18px;
	height: 18px;
	margin-left: auto;
	color: var(--mr-navy);
	transition: transform 0.18s ease;
}

.mrb-coupon__toggle[aria-expanded="true"] .mrb-coupon__chev {
	transform: rotate(180deg);
}

.mrb-coupon__form {
	display: flex;
	gap: 8px;
	padding-bottom: 14px;
}

.mrb-coupon__form input {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #c8d3e4;
	border-radius: 6px;
	font-size: 15px;
}

.mrb-coupon__apply {
	height: 42px;
	padding: 0 18px;
	border: 0;
	border-radius: 6px;
	background: var(--mr-navy);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Checkout button ---------- */

.mrb-summary__cta {
	margin: 6px 0 0;
}

body.mr-basket-has-items .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 17px 20px;
	border-radius: 4px;
	background: var(--mr-red);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

body.mr-basket-has-items .wc-proceed-to-checkout a.checkout-button:hover {
	background: #c90d0d;
}

.mrb-summary__secure,
.mrb-summary__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--mr-navy);
}

.mrb-summary__secure svg {
	width: 16px;
	height: 16px;
	fill: var(--mr-navy);
	flex: none;
}

.mrb-summary__note {
	justify-content: flex-start;
	background: #eef3fb;
	border-radius: 6px;
	padding: 13px 15px;
	font-size: 14px;
}

.mrb-summary__note svg {
	width: 18px;
	height: 18px;
	fill: #1a56b8;
	flex: none;
}

/* ---------- Busy state while totals refresh ---------- */

body.mr-basket-has-items .woocommerce.mrb-updating {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	body.mr-basket-has-items .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 18px 32px;
	}

	body.mr-basket-has-items .cart-collaterals {
		position: static;
	}
}

@media (max-width: 700px) {
	body.mr-basket-has-items .mrb-basket,
	body.mr-basket-has-items .cart-collaterals {
		padding: 18px 16px;
	}

	body.mr-basket-has-items table.cart tr.cart_item {
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas:
			"thumb name"
			"qty   total";
		gap: 12px 14px;
	}

	body.mr-basket-has-items table.cart td.product-thumbnail {
		grid-area: thumb;
	}

	body.mr-basket-has-items table.cart td.product-thumbnail img {
		width: 64px;
		height: 64px;
	}

	body.mr-basket-has-items table.cart td.product-name {
		grid-area: name;
	}

	body.mr-basket-has-items table.cart td.product-quantity {
		grid-area: qty;
		justify-self: start;
	}

	body.mr-basket-has-items table.cart td.product-subtotal {
		grid-area: total;
	}

	.mrb-basket__title {
		font-size: 22px;
	}
}

/* ---------------------------------------------------------------
   Row alignment pass
   Line total sits level with the product name; the secondary lines
   ("In stock", "n x price each", Remove) drop to the bottom of the row.
   --------------------------------------------------------------- */

body.mr-basket-has-items table.cart tr.cart_item {
	align-items: stretch;
	min-height: 96px;
}

body.mr-basket-has-items table.cart td.product-thumbnail {
	align-self: start;
}

body.mr-basket-has-items table.cart td.product-name {
	justify-content: flex-start;
}

/* Push the stock line to the bottom of the description block */
body.mr-basket-has-items .mrb-item__stock {
	margin-top: auto;
	padding-top: 6px;
}

body.mr-basket-has-items table.cart td.product-quantity {
	align-self: center;
}

/* Total at the top, per-unit price and Remove at the bottom */
body.mr-basket-has-items table.cart td.product-subtotal {
	justify-content: flex-start;
}

body.mr-basket-has-items .mrb-item__each {
	margin-top: auto;
	padding-top: 6px;
}

/* ---------------------------------------------------------------
   Totals panel: stop the VAT note wrapping through the total
   --------------------------------------------------------------- */

body.mr-basket-has-items .mrb-row--total .mrb-row__value {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.15;
}

body.mr-basket-has-items .mrb-row--total .mrb-row__value .woocommerce-Price-amount {
	white-space: nowrap;
}

body.mr-basket-has-items .mrb-row--total .includes_tax {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 400;
	color: var(--mr-muted);
	white-space: nowrap;
}

body.mr-basket-has-items .mrb-row--total .includes_tax .woocommerce-Price-amount {
	font-size: 12px;
	font-weight: 400;
	color: var(--mr-muted);
}

/* ---------------------------------------------------------------
   Page width on the basket
   Elementor's container caps content at 1140px and a legacy rule caps
   .woocommerce at 1180px. The design is drawn at 1440. Widened here on
   the basket page only, using selectors specific enough to win without
   resorting to !important.
   --------------------------------------------------------------- */

body.mr-basket-has-items .elementor-section > .elementor-container {
	max-width: 1460px;
}

body.mr-basket-has-items .elementor-shortcode > .woocommerce {
	max-width: 1460px;
}

/* ---------------------------------------------------------------
   Summary panel width
   WooCommerce floats .cart_totals at 48% inside the collaterals wrapper,
   which left the summary using only ~200px of its 540px card and caused
   the VAT note and the secure-checkout line to wrap.
   --------------------------------------------------------------- */

body.mr-basket-has-items .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

body.mr-basket-has-items .mrb-summary__secure {
	flex-wrap: nowrap;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   Remove link alignment
   WooCommerce sizes a.remove at width:1em/height:1em for its "x" glyph,
   so the word "Remove" overflowed ~38px past the right edge of the
   column instead of aligning with the line total above it.
   --------------------------------------------------------------- */

body.mr-basket-has-items .woocommerce a.mrb-item__remove {
	display: inline-block;
	width: auto;
	height: auto;
	line-height: 1.35;
	text-align: right;
}

/* ---------------------------------------------------------------
   Tighten the gap under the step bar
   The Elementor section wrapping the cart carries 60px of top padding,
   the .woocommerce shell adds 32px, and the notices wrapper holds an
   empty grid row even with nothing to show.
   --------------------------------------------------------------- */

body.mr-basket-has-items .elementor-section:has(.woocommerce) {
	padding-top: 0;
}

body.mr-basket-has-items .woocommerce {
	padding-top: 14px;
}

body.mr-basket-has-items .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ---------------------------------------------------------------
   Close the gap between the stepper and the line total
   Fixed 150px columns left ~125px of dead space between them; sizing
   both to content and pushing the stepper right brings them together.
   --------------------------------------------------------------- */

body.mr-basket-has-items table.cart tr.cart_item {
	grid-template-columns: 88px minmax(0, 1fr) auto auto;
	column-gap: 24px;
}

body.mr-basket-has-items table.cart td.product-quantity {
	justify-self: end;
}

/* ---------------------------------------------------------------
   SKU line (replaces the old category line) and back-order state
   --------------------------------------------------------------- */

.mrb-item__sku {
	font-size: 13px;
	color: var(--mr-muted);
	letter-spacing: 0.2px;
}

.mrb-item__stock.is-backorder {
	color: #b06a00;
}

/* Same spacing trim on the basket page */
body.mr-basket-empty .elementor-section:has(.mrb-trust),
body.mr-basket-has-items .elementor-section:has(.mrb-trust) {
	padding-top: 10px;
	padding-bottom: 26px;
}

body.mr-basket-has-items .elementor-section:has(.woocommerce) {
	padding-bottom: 0;
}

body.mr-basket-has-items .woocommerce {
	padding-bottom: 20px;
}
/* ---------------------------------------------------------------
   Step indicator — completed state (green circle + green line)
   Active is red (set inline in the page widget).
   is-done = steps behind the current active step.
   --------------------------------------------------------------- */
.mr-step.is-done {
	color: #1a7a4a;
}
.mr-step.is-done span {
	background: #1a7a4a;
}
.mr-step.is-done::after {
	background: #1a7a4a;
}
.mr-step.is-done a {
	color: inherit;
	text-decoration: none;
}