/**
 * Cart page
 *
 * WooCommerce's cart is a <table>, and it stays a table in the markup so its
 * own scripts and every cart plugin keep working. All of the card layout below
 * is CSS: the rows are turned into grids, which is the same technique
 * WooCommerce uses for `shop_table_responsive` at mobile widths.
 *
 * The lift-and-sheen hover comes from `.ml-glass` in effects.css - only the
 * tilt angle is softened here, because a wide row reads badly with the same
 * rotation a small card uses.
 */

/* -------------------------------------------------------------------------
 * Header band - matches the shop archive
 * ---------------------------------------------------------------------- */

.ml-cart__head {
	background: linear-gradient(180deg, var(--ml-stage) 0%, var(--ml-stage-soft) 100%);
	padding: 22px 24px 26px;
}

.ml-cart__head-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
}

.ml-cart__title {
	margin: 0 0 14px;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ml-navy);
}

.ml-cart__count {
	margin: 0;
	font-size: 15px;
	color: var(--ml-body);
}

.ml-cart__count strong {
	color: var(--ml-navy);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * Body layout
 * ---------------------------------------------------------------------- */

.ml-cart__body {
	padding: 28px 24px 56px;
	background: var(--ml-white);
}

.ml-cart__body-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 28px;
	align-items: start;
}

.ml-cart__main {
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * The items table, rebuilt as cards
 * ---------------------------------------------------------------------- */

.ml-cart__main table.cart {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	background: none;
}

.ml-cart__main table.cart thead,
.ml-cart__main table.cart tbody {
	display: block;
	width: 100%;
}

/* Column labels. The same track sizes as the rows, so they line up. */
.ml-cart__main table.cart thead tr {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 108px 132px 116px 42px;
	grid-template-areas: "thumb name price qty sub remove";
	align-items: center;
	gap: 0 14px;
	padding: 0 16px 10px;
	border: 0;
	background: none;
}

.ml-cart__main table.cart thead th {
	padding: 0;
	border: 0;
	background: none;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ml-muted);
	text-align: left;
}

.ml-cart__main table.cart thead th.product-price,
.ml-cart__main table.cart thead th.product-subtotal {
	text-align: right;
}

.ml-cart__main table.cart thead th.product-thumbnail { grid-area: thumb; }
.ml-cart__main table.cart thead th.product-name { grid-area: name; }
.ml-cart__main table.cart thead th.product-price { grid-area: price; }
.ml-cart__main table.cart thead th.product-quantity { grid-area: qty; }
.ml-cart__main table.cart thead th.product-subtotal { grid-area: sub; }
.ml-cart__main table.cart thead th.product-remove { grid-area: remove; }

/* ---------- A row ---------- */

.ml-cart__main tr.cart_item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 108px 132px 116px 42px;
	grid-template-areas: "thumb name price qty sub remove";
	align-items: center;
	gap: 0 14px;
	padding: 14px 16px;
	margin-bottom: 12px;
	border-radius: 14px;
}

/* Softer tilt than the standard .ml-glass card - a full-width row needs less. */
.ml-cart__main tr.cart_item.ml-glass:hover,
.ml-cart__main tr.cart_item.ml-glass:focus-within {
	transform: perspective(1400px) rotateX(1.1deg) translateY(-3px);
}

.ml-cart__main tr.cart_item td {
	padding: 0;
	border: 0;
	background: none;
	vertical-align: middle;
}

/* ---------- Thumbnail ---------- */

.ml-cart__main td.product-thumbnail {
	grid-area: thumb;
}

.ml-cart__main td.product-thumbnail a,
.ml-cart__main td.product-thumbnail img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 10px;
}

/*
 * THE TILE COLOUR MOVED FROM THE IMAGE TO ITS LINK, AND THE IMAGE MULTIPLIES
 * (2026-09-15).
 *
 * A background on the <img> itself cannot be blended into: it is part of the
 * element that multiplies, so a pure-white packshot covered its own tile and the
 * row behind is white - a white square either way. The row is `.ml-glass`,
 * which sets `isolation: isolate`, so the only ground inside the blend group is
 * what the row paints. Painting --ml-stage-soft on the <a> puts the tile inside
 * that group, directly under the image. `> img` keeps the old tile for an item
 * WooCommerce renders without a link (a hidden product), where nothing can
 * blend - rare, and no worse than before.
 *
 * The hover scale now moves the artwork over a still tile; the 88% fill of the
 * packshots keeps the carton inside the 96px box at 1.06.
 */
.ml-cart__main td.product-thumbnail a,
.ml-cart__main td.product-thumbnail > img {
	background: var(--ml-stage-soft);
}

.ml-cart__main td.product-thumbnail img {
	object-fit: cover;
	mix-blend-mode: multiply;
	transition: transform 0.4s var(--ml-e-enter);
}

.ml-cart__main tr.cart_item:hover td.product-thumbnail img {
	transform: scale(1.06);
}

/* ---------- Name + category ---------- */

.ml-cart__main td.product-name {
	grid-area: name;
	min-width: 0;
	font-size: 15.5px;
	line-height: 1.4;
}

.ml-cart__main td.product-name > a {
	display: block;
	color: var(--ml-navy);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--ml-t-base) var(--ml-e-standard);
}

.ml-cart__main td.product-name > a:hover,
.ml-cart__main td.product-name > a:focus-visible {
	color: var(--ml-cyan);
}

.ml-cart__item-cat {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.ml-cart__main td.product-name .backorder_notification {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: #b26a00;
}

/* ---------- Price + subtotal ---------- */

.ml-cart__main td.product-price {
	grid-area: price;
	text-align: right;
	font-size: 14.5px;
	color: var(--ml-body);
	font-variant-numeric: tabular-nums;
}

.ml-cart__main td.product-subtotal {
	grid-area: sub;
	text-align: right;
	font-size: 16px;
	font-weight: 700;
	color: var(--ml-navy);
	font-variant-numeric: tabular-nums;
}

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

.ml-cart__main td.product-quantity {
	grid-area: qty;
}

.ml-cart__main td.product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ml-line);
	border-radius: 9px;
	overflow: hidden;
	background: var(--ml-white);
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-cart__main td.product-quantity .quantity:focus-within {
	border-color: var(--ml-cyan);
	box-shadow: 0 0 0 3px rgba(0, 175, 240, 0.16);
}

.ml-cart__main td.product-quantity input.qty {
	width: 74px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--ml-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--ml-navy);
}

/* ---------- Remove ---------- */

.ml-cart__main td.product-remove {
	grid-area: remove;
	text-align: right;
}

.ml-cart__main td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--ml-line);
	background: var(--ml-white);
	color: var(--ml-muted);
	font-size: 19px;
	line-height: 1;
	text-decoration: none;
	transition: transform var(--ml-t-base) var(--ml-e-standard), background-color var(--ml-t-base) var(--ml-e-standard), color var(--ml-t-base) var(--ml-e-standard), border-color var(--ml-t-base) var(--ml-e-standard);
}

/*
 * Astra filters `woocommerce_cart_item_remove_link` and swaps WooCommerce's
 * "&times;" character for a 24px SVG in a wrapper span. Sized down here rather
 * than filtered away, so Astra's icon set stays the single source for it.
 */
.ml-cart__main td.product-remove a.remove .ahfb-svg-iconset,
.ml-cart__main td.product-remove a.remove svg {
	display: block;
	width: 13px;
	height: 13px;
}

.ml-cart__main td.product-remove a.remove:hover,
.ml-cart__main td.product-remove a.remove:focus-visible {
	transform: scale(1.08);
	background: #fdecec;
	border-color: #f3c2c2;
	color: #d33a3a;
	outline: none;
}

/* -------------------------------------------------------------------------
 * Actions row - coupon, continue shopping, update cart
 * ---------------------------------------------------------------------- */

.ml-cart__main tr.ml-cart__actions-row {
	display: block;
	margin-top: 18px;
}

.ml-cart__main td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--ml-line);
	border-radius: 14px;
	background: var(--ml-stage-soft);
}

.ml-cart__main td.actions .coupon {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ml-cart__main td.actions input#coupon_code {
	width: 190px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--ml-line);
	border-radius: 9px;
	background: var(--ml-white);
	font-family: var(--ml-font);
	font-size: 14.5px;
	color: var(--ml-navy);
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-cart__main td.actions input#coupon_code:focus {
	outline: none;
	border-color: var(--ml-cyan);
	box-shadow: 0 0 0 3px rgba(0, 175, 240, 0.16);
}

.ml-cart__actions-end {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

/* Both secondary buttons share one outline treatment. */
.ml-cart__main td.actions button.button {
	height: 46px;
	padding: 0 22px;
	border: 1px solid var(--ml-cyan);
	border-radius: 9px;
	background: var(--ml-white);
	color: var(--ml-cyan);
	font-family: var(--ml-font);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: transform var(--ml-t-base) var(--ml-e-standard), background-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

.ml-cart__main td.actions button.button:hover:not(:disabled),
.ml-cart__main td.actions button.button:focus-visible:not(:disabled) {
	transform: translateY(-2px);
	background: #f1fbff;
	box-shadow: 0 12px 22px -14px rgba(var(--ml-shadow-tint), 0.9);
}

/* WooCommerce disables Update cart until a quantity actually changes. */
.ml-cart__main td.actions button.button:disabled {
	opacity: 0.45;
	cursor: default;
	transform: none;
	box-shadow: none;
}

.ml-cart__continue {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ml-body);
	text-decoration: none;
	transition: color var(--ml-t-base) var(--ml-e-standard), transform var(--ml-t-base) var(--ml-e-standard);
}

.ml-cart__continue:hover,
.ml-cart__continue:focus-visible {
	color: var(--ml-cyan);
	transform: translateX(-2px);
}

/* -------------------------------------------------------------------------
 * Order summary
 * ---------------------------------------------------------------------- */

.ml-cart__aside {
	position: sticky;
	top: 24px;
}

/*
 * THE CART'S TOTALS CARD RENDERED SQUARE - measured 2026-09-14. WooCommerce's
 * `.woocommerce-cart .cart-collaterals .cart_totals` (0,3,0) sets border-radius 0,
 * padding 0 20px and a --ast-border-color border, and on the cart it beat this
 * rule and .ml-glass's own border; the same card on checkout was never reached.
 * The second selector is (0,4,0). Its hover twin restates the .ml-glass:hover
 * tint from effects.css, which the raised border would otherwise swallow.
 */
.ml-summary,
.woocommerce-cart .cart-collaterals .cart_totals.ml-summary {
	padding: 22px;
	border: 1px solid var(--ml-line);
	border-radius: 14px;
}

.woocommerce-cart .cart-collaterals .cart_totals.ml-summary:hover,
.woocommerce-cart .cart-collaterals .cart_totals.ml-summary:focus-within {
	border-color: #cde7f7;
}

/* The sheen sweep is distracting on a card the eye rests on while reading
   totals - keep the lift and shadow, drop the sweep. */
.ml-summary.ml-glass:hover,
.ml-summary.ml-glass:focus-within {
	transform: translateY(-3px);
}

.ml-summary.ml-glass::after {
	display: none;
}

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

/*
 * (0,4,1): on the cart WooCommerce's `.woocommerce-cart .cart-collaterals
 * .cart_totals>h2 { margin: 0 -20px 20px }` (0,3,1) owned this title - 20px
 * below it and a -20px pull outside the card's padding on both sides. 22px is
 * heading -> content on the spacing scale (CLAUDE.md).
 */
.ml-cart-page .cart-collaterals .cart_totals > h2.ml-summary__title {
	margin: 0 0 22px;
}

.ml-summary__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.ml-summary__table tr {
	border: 0;
}

.ml-summary__table th,
.ml-summary__table td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--ml-line);
	background: none;
	font-size: 14.5px;
	vertical-align: top;
}

.ml-summary__table th {
	font-weight: 500;
	color: var(--ml-body);
	text-align: left;
}

.ml-summary__table td {
	text-align: right;
	font-weight: 600;
	color: var(--ml-navy);
	font-variant-numeric: tabular-nums;
}

.ml-summary__table tr.cart-discount td {
	color: #23a455;
}

.ml-summary__table tr.order-total th,
.ml-summary__table tr.order-total td {
	padding-top: 15px;
	border-bottom: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--ml-navy);
}

/* Shipping choices, when more than one method is configured. */
.ml-summary__table ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

.ml-summary__table ul#shipping_method li {
	margin: 0 0 6px;
	font-weight: 500;
}

.ml-summary__table .woocommerce-shipping-destination {
	margin: 8px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--ml-muted);
	text-align: right;
}

.ml-summary__table .shipping-calculator-button {
	font-size: 13px;
	font-weight: 600;
	color: var(--ml-cyan);
}

.ml-summary__table .shipping-calculator-form {
	margin-top: 10px;
	text-align: left;
}

/* -------------------------------------------------------------------------
 * Shipping calculator fields
 *
 * The wrappers above were styled but the fields inside never were. They sit in
 * `p.form-row` on the CART page, so the .ml-checkout-page / .ml-account-page
 * form-row rules do not reach them, and they fell through to Astra's
 * `input[type="…"]` at (0,1,1): 40px tall, square, grey-bordered, 16px text -
 * next to a 46px, 9px-radius coupon field. Same treatment as that coupon field.
 * ---------------------------------------------------------------------- */

.ml-cart-page .ml-summary__table .shipping-calculator-form .form-row {
	margin: 0 0 10px;
}

.ml-cart-page .ml-summary__table .shipping-calculator-form label {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ml-navy);
}

/*
 * The `select` line carries an extra ancestor class its siblings do not need,
 * and it is load-bearing: WooCommerce ships
 * `.woocommerce-cart .cart-collaterals .cart_totals table select { width:100% }`
 * at (0,3,2). Without .woocommerce-shipping-calculator this rule is (0,3,1) and
 * loses - it only agreed with that rule by coincidence of value. Do not shorten
 * it back. The other two selectors are already (0,4,1) and (0,5,0).
 */
.ml-cart-page .ml-summary__table .shipping-calculator-form input.input-text,
.ml-cart-page .ml-summary__table .woocommerce-shipping-calculator .shipping-calculator-form select,
.ml-cart-page .ml-summary__table .shipping-calculator-form .select2-container .select2-selection--single {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--ml-line);
	border-radius: 9px;
	background: var(--ml-white);
	box-shadow: none;
	font-family: var(--ml-font);
	font-size: 14.5px;
	color: var(--ml-navy);
	transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

/* select2 enhances the country field here exactly as it does at checkout. */
.ml-cart-page .ml-summary__table .shipping-calculator-form .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.ml-cart-page .ml-summary__table .shipping-calculator-form .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--ml-navy);
}

.ml-cart-page .ml-summary__table .shipping-calculator-form .select2-selection__arrow {
	height: 44px;
	right: 8px;
}

.ml-cart-page .ml-summary__table .shipping-calculator-form input.input-text:focus,
.ml-cart-page .ml-summary__table .shipping-calculator-form select:focus,
.ml-cart-page .ml-summary__table .shipping-calculator-form .select2-container--focus .select2-selection--single,
.ml-cart-page .ml-summary__table .shipping-calculator-form .select2-container--open .select2-selection--single {
	outline: none;
	border-color: var(--ml-cyan);
	box-shadow: 0 0 0 3px rgba(0, 175, 240, 0.16);
}

.ml-summary__table .shipping-calculator-form .button {
	width: 100%;
	height: 42px;
	margin-top: 8px;
	border: 1px solid var(--ml-cyan);
	border-radius: 9px;
	background: var(--ml-white);
	color: var(--ml-cyan);
	font-family: var(--ml-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

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

.wc-proceed-to-checkout {
	margin-top: 18px;
	padding: 0;
}

/*
 * `.ml-summary` AND `.button` are both in the selector on purpose, and the
 * DOUBLED `.ml-summary__cta` takes it to (0,4,0) - corrected 2026-09-14. At
 * (0,3,0) WooCommerce's `.woocommerce-cart .wc-proceed-to-checkout
 * a.checkout-button` (0,3,1) still set font-size 1.1em and padding 1em on the
 * cart, so Proceed to checkout read 17.6px beside Place order's 16px - one
 * class, two sizes. The doubled class is not a typo.
 *
 * This class sits on two elements, and Astra reaches BOTH:
 *
 *   cart      <a class="checkout-button button alt wc-forward ml-summary__cta">
 *   checkout  <button class="button alt ml-summary__cta" id="place_order">
 *
 * At (0,1,0) this block lost to Astra's inline `.woocommerce-js a.button`
 * (0,2,1) on the cart, so Proceed to checkout rendered as ASTRA's outline
 * button - transparent fill, `--ast-global-color-0` text and border, a 30px
 * radius and 10px/20px padding instead of the cyan fill, 8px radius and the
 * theme's own sizing.
 *
 * ON CHECKOUT IT WAS NEVER BROKEN - corrected 2026-09-07. `<body>` there
 * carries only `woocommerce-page`, NOT `woocommerce`, so
 * `.woocommerce button.button` cannot match the Place order button; the only
 * Astra rule that reaches it is the plain `.button` block, which is (0,1,0) -
 * a straight tie with the rule this block replaced.
 *
 * An earlier revision claimed Astra won that tie on source order. **It does
 * not.** Measured on four pages: Astra's inline `<style>` sits around byte
 * 5-11k and the child theme's stylesheets start around 108k, so THE CHILD
 * THEME IS LATER and wins every tie. The Place order button is covered here
 * only because it shares the class; it needed no fix.
 *
 * The hover below is (0,4,0) so it clears `.woocommerce-js a.button:hover`,
 * which is (0,3,1) - the tier that beat the (0,2,0) this rule used to be.
 */
.ml-summary .ml-summary__cta.ml-summary__cta.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-family: var(--ml-font);
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 14px 26px -16px rgba(var(--ml-shadow-tint), 0.95);
	transition: transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

/*
 * Geometry is NOT restated here - it all lives in the rest rule above, which
 * keeps matching while the button is hovered, so there is no size jump.
 */
.ml-summary .ml-summary__cta.button:hover,
.ml-summary .ml-summary__cta.button:focus-visible {
	background: var(--ml-cyan-dark);
	transform: translateY(-2px);
	color: var(--ml-white);
	box-shadow: 0 22px 34px -16px rgba(var(--ml-shadow-tint), 1);
}

/*
 * Astra's `button:focus, button:active { outline: 0 }` at (0,1,1) suppresses
 * the browser's default focus ring, and this control carried no author outline
 * - so it had no visible focus indicator at all. Same treatment as the product
 * page's Buy It Now: it paints, it does not move, it adds no transition.
 */
.ml-summary .ml-summary__cta.button:focus-visible {
	outline: 2px solid var(--ml-navy);
	outline-offset: 2px;
}

/* ---------- Reassurance lines ---------- */

.ml-summary__notes {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ml-line);
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.ml-summary__notes li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ml-body);
}

/* The shared trust icon renders at 30px; this card wants it smaller. */
.ml-summary__notes .medlife-trust__icon {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	color: var(--ml-cyan);
}

.ml-summary__notes a {
	color: var(--ml-cyan);
	font-weight: 600;
	text-decoration: none;
}

/*
 * Cyan + underline on hover and keyboard focus, like every text link.
 * Astra's inline `.ast-single-post .entry-content .woocommerce a { text-decoration:
 * none }` is (0,3,1) and reaches every link inside a WooCommerce shortcode
 * wrapper - cart, checkout and all account screens. The doubled container
 * class plus [href] makes this (0,4,1), one tier above (2026-09-15).
 * Checkout reuses this list, and this rule, from cart.css.
 */
.ml-summary__notes.ml-summary__notes a[href]:hover,
.ml-summary__notes.ml-summary__notes a[href]:focus-visible {
	color: var(--ml-cyan);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Empty state
 * ---------------------------------------------------------------------- */

.ml-cart__body--empty .ml-cart__empty {
	max-width: 620px;
	margin: 0 auto;
	padding: 46px 32px 40px;
	border-radius: 18px;
	text-align: center;
}

.ml-cart__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--ml-stage);
	color: var(--ml-cyan);
}

.ml-cart__empty-title {
	margin: 0 0 10px;
	font-size: 25px;
	font-weight: 700;
	color: var(--ml-navy);
}

.ml-cart__empty-text {
	margin: 0 auto 26px;
	max-width: 44ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ml-body);
}

.ml-cart__empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 52px;
	padding: 0 30px;
	border-radius: 10px;
	background: var(--ml-cyan);
	color: var(--ml-white);
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 14px 26px -16px rgba(var(--ml-shadow-tint), 0.95);
	transition: transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}

/*
 * POINTER-FOCUS PIN - the sitewide sweep of 2026-09-13 missed this one, and
 * the keyboard-ring pass of 2026-09-14 missed it for the same reason: BOTH
 * RAN WITH A FILLED CART, so cart-empty.php never rendered and this anchor was
 * never in the sample. Found 2026-09-20 by a sweep that loaded the cart empty.
 *
 * Astra's `a:focus { outline: thin dotted }` is (0,1,1) and beats the rest
 * rule's (0,1,0), so a CLICKED "Continue shopping" kept a dotted ring until
 * focus moved. Its `a:focus { color: ... }` won the ink for the same reason.
 * Pinned at (0,3,0); `:not(:focus-visible)` means no keyboard ring can be
 * touched. Placed BEFORE the hover group, per the house rule.
 */
.ml-cart__empty-cta:focus:not(:focus-visible) {
	color: var(--ml-white);
	outline: none;
}

.ml-cart__empty-cta:hover,
.ml-cart__empty-cta:focus-visible {
	background: var(--ml-cyan-dark);
	transform: translateY(-2px);
	color: var(--ml-white);
	box-shadow: 0 22px 34px -16px rgba(var(--ml-shadow-tint), 1);
}

/*
 * The keyboard ring, in its own rule so the group above keeps owning the fill.
 * `border-radius` is NAMED because a rule wins only the properties it names -
 * without it the ring squares off against the control's own 10px corners. The
 * rest rule transitions `transform` and `box-shadow` only, so the ring does
 * not fade in.
 */
.ml-cart__empty-cta:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 10px;
}

.ml-cart__empty-cats {
	margin-top: 32px;
	padding-top: 26px;
	border-top: 1px solid var(--ml-line);
}

.ml-cart__empty-cats-label {
	display: block;
	margin-bottom: 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.ml-cart__empty-cats .ml-shop__pills {
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Cross-sells, full width below the cart
 * ---------------------------------------------------------------------- */

.ml-cart__cross {
	padding: 0 24px 56px;
	background: var(--ml-white);
}

.ml-cart__cross-inner {
	max-width: var(--ml-container);
	margin: 0 auto;
}

.ml-cart__cross .cross-sells > h2 {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	color: var(--ml-navy);
}

/* -------------------------------------------------------------------------
 * WooCommerce notices
 * ---------------------------------------------------------------------- */

.ml-cart-page .woocommerce-message,
.ml-cart-page .woocommerce-info,
.ml-cart-page .woocommerce-error {
	max-width: var(--ml-container);
	margin: 0 auto 20px;
	border-radius: 10px;
	font-size: 14.5px;
}

/* -------------------------------------------------------------------------
 * Astra reset - the cart page carries no title or content padding
 * ---------------------------------------------------------------------- */

.ml-cart-page .site-content > .ast-container {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}

.ml-cart-page #primary,
.ml-cart-page .ast-article-single {
	margin: 0;
	padding: 0;
	border: 0;
}

.ml-cart-page .entry-content {
	margin: 0;
}

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

@media (max-width: 1100px) {
	.ml-cart__body-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ml-cart__aside {
		position: static;
	}

	.ml-summary {
		max-width: 460px;
		margin-left: auto;
	}
}

@media (max-width: 820px) {
	.ml-cart__main table.cart thead {
		display: none;
	}

	.ml-cart__main tr.cart_item {
		grid-template-columns: 84px minmax(0, 1fr) 36px;
		grid-template-areas:
			"thumb name   remove"
			"thumb price  price"
			"qty   sub    sub";
		gap: 8px 14px;
		padding: 16px;
	}

	.ml-cart__main td.product-thumbnail a,
	.ml-cart__main td.product-thumbnail img {
		width: 84px;
		height: 84px;
	}

	.ml-cart__main td.product-price {
		text-align: left;
		align-self: start;
	}

	.ml-cart__main td.product-quantity {
		margin-top: 6px;
	}

	.ml-cart__main td.product-subtotal {
		margin-top: 6px;
		align-self: center;
	}

	/* Labels the hidden <thead> used to carry. */
	.ml-cart__main td.product-price::before,
	.ml-cart__main td.product-subtotal::before {
		content: attr(data-title) ": ";
		font-size: 12.5px;
		font-weight: 500;
		color: var(--ml-muted);
	}

	.ml-cart__main td.actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ml-cart__main td.actions .coupon {
		width: 100%;
	}

	.ml-cart__main td.actions input#coupon_code {
		flex: 1 1 auto;
		width: auto;
	}

	.ml-cart__actions-end {
		margin-left: 0;
		justify-content: space-between;
	}

	.ml-summary {
		max-width: none;
	}
}

@media (max-width: 520px) {
	.ml-cart__head,
	.ml-cart__body,
	.ml-cart__cross {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ml-cart__main tr.cart_item {
		grid-template-columns: 68px minmax(0, 1fr) 34px;
	}

	.ml-cart__main td.product-thumbnail a,
	.ml-cart__main td.product-thumbnail img {
		width: 68px;
		height: 68px;
	}

	.ml-cart__main td.product-quantity input.qty {
		width: 64px;
		height: 40px;
	}

	.ml-cart__body--empty .ml-cart__empty {
		padding: 36px 20px 32px;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 *
 * effects.css already neutralises .ml-glass; these are the transforms this
 * file adds on top of it.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ml-cart__main tr.cart_item.ml-glass:hover,
	.ml-cart__main tr.cart_item.ml-glass:focus-within,
	.ml-summary.ml-glass:hover,
	.ml-summary.ml-glass:focus-within,
	.ml-summary .ml-summary__cta.button:hover,
	.ml-summary .ml-summary__cta.button:focus-visible,
	.ml-cart__empty-cta:hover,
	.ml-cart__empty-cta:focus-visible,
	.ml-cart__continue:hover,
	.ml-cart__continue:focus-visible,
	.ml-cart__main td.actions button.button:hover:not(:disabled),
	.ml-cart__main td.product-remove a.remove:hover,
	.ml-cart__main tr.cart_item:hover td.product-thumbnail img {
		transform: none;
	}

	.ml-cart-page .ml-summary__table .shipping-calculator-form input.input-text,
	.ml-cart-page .ml-summary__table .shipping-calculator-form select,
	.ml-cart-page .ml-summary__table .shipping-calculator-form .select2-container .select2-selection--single {
		transition: none;
	}

	.ml-cart__main td.product-thumbnail img,
	.ml-summary .ml-summary__cta.ml-summary__cta.button,
	.ml-cart__empty-cta,
	.ml-cart__continue,
	.ml-cart__main td.actions button.button,
	.ml-cart__main td.product-remove a.remove {
		transition: none;
	}
}

/*
 * POINTER FOCUS - ASTRA a:focus { outline: thin dotted } (main.min.css L3).
 * A mouse click leaves :focus set, so every anchor that names no outline of its
 * own kept a thin dotted ring until focus moved. Measured 2026-09-13 by the
 * sitewide anchor sweep (CLAUDE.md, "Anchor pointer-focus sweep").
 *
 * :not(:focus-visible) IS LOAD-BEARING: this only ever applies to pointer focus,
 * so the keyboard ring each family already has is untouched. Outline only -
 * nothing moves, so there is no reduced-motion twin.
 */
.woocommerce-cart-form__cart-item a:focus:not(:focus-visible),
.ml-summary__notes a:focus:not(:focus-visible),
a.remove:focus:not(:focus-visible),
a.ml-cart__continue:focus:not(:focus-visible),
a.shipping-calculator-button:focus:not(:focus-visible) {
	outline: none;
}

/*
 * KEYBOARD RINGS - 2026-09-14. These families had NO focus ring of their own:
 * keyboard focus showed only Astra's a:focus-visible 1px dotted in the text
 * colour, or nothing at all where a theme rule said outline: none. Measured by
 * the sitewide anchor sweep (CLAUDE.md, "Keyboard ring pass").
 *
 * Light surface: 3px --ml-cyan offset 3px. Navy surface: 2px. border-radius is
 * RESTATED on every ring - a rule wins only the properties it names, and a
 * shared focus rule has squared a round control on this site before. Text links
 * take 4px corners; boxed controls keep their own radius.
 *
 * The pointer pin (:focus:not(:focus-visible)) above is untouched - the two
 * selectors can never match the same state. Contrast: cyan on white 2.50:1 is
 * the owner's recorded decision (CLAUDE.md, "THE FOCUS-RING RULE").
 */
.woocommerce-cart-form__cart-item a:not(.remove):focus-visible,
a.ml-cart__continue:focus-visible,
a.shipping-calculator-button:focus-visible,
.ml-summary__notes a:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}
/*
 * THE REMOVE BUTTON HAD outline: none ON :focus-visible, grouped with :hover in
 * .ml-cart__main td.product-remove a.remove at (0,4,1). One element deeper,
 * (0,4,2), restores the ring; the scale and red tint are untouched. 50% keeps
 * the ring round.
 */
.ml-cart__main table td.product-remove a.remove:focus-visible {
	outline: 3px solid var(--ml-cyan);
	outline-offset: 3px;
	border-radius: 50%;
}

/*
 * RING FADE - ASTRA'S INLINE `a { transition: all .2s linear }`. "all" includes
 * outline, so these families' keyboard rings slid and faded in over 200ms
 * instead of appearing at once. Each family now names exactly what its hover /
 * focus-visible state really changes, measured 2026-09-14 (CLAUDE.md, "Ring fade
 * pass"): colour where Astra's a:hover repaints the ink, nothing at all where
 * only the (discrete) underline changes or nothing visible changes.
 * Outline is never in the list. Colour-only fades need no reduced-motion twin.
 */
.woocommerce-cart-form__cart-item a:not(.remove) {
	transition: color var(--ml-t-base) var(--ml-e-standard);
}
a.shipping-calculator-button,
.ml-summary__notes a {
	transition: none;
}