/**
 * The basket.
 *
 * The cart FORM is WooCommerce's own markup, rendered by the shortcode, so
 * everything below dresses their table rather than replacing it. That keeps
 * nonces, per-item quantity fields and the update behaviour intact on the one
 * page standing between a customer and the checkout.
 */

.ep-cart { background: var(--ep-lt-bg); color: var(--ep-lt-ink); }
.ep-cart__in { padding-top: var(--ep-s-8); padding-bottom: var(--ep-s-12); max-width: 1000px; }

.ep-cart__head { margin-bottom: var(--ep-s-5); }
.ep-cart__head h1 {
	margin: 0;
	font-size: var(--ep-t-2xl);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-head);
	color: var(--ep-lt-ink);
}
.ep-cart__head p { margin: var(--ep-s-1) 0 0; color: var(--ep-lt-mut); font-size: var(--ep-t-sm); }

/* The live cutoff, same component as the product page. */
.ep-ship--cart {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0 0 var(--ep-s-3);
	padding: var(--ep-s-3) var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-left: 3px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-sunk);
	font-size: var(--ep-t-sm);
	color: var(--ep-lt-ink-2);
}
.ep-ship--cart.is-live { border-left-color: var(--ep-lt-ok); background: var(--ep-lt-ok-bg); border-color: #CFE7DA; }
.ep-ship--cart.is-urgent { border-left-color: var(--ep-lt-warn); background: var(--ep-lt-warn-bg); border-color: #EDDFB6; }
.ep-ship--cart .ep-ship__c { font-size: var(--ep-t-xs); color: var(--ep-lt-mut); font-weight: var(--ep-w-semi); }


/* ---------------------------------------------------------------------------
   FURNITURE THAT BELONGS TO THE THEME AND ITS PLUGINS

   Three things render on this page that this plugin does not own: Shoptimizer's
   three step progress bar, CommerceKit's free delivery notice, and the client's
   own cart summary widget. They arrived in the old orange and black palette and
   read as a different site bolted onto this one. They are restyled here rather
   than removed, because all three are content or configuration the client set
   up and none of it is this plugin's to throw away.
   --------------------------------------------------------------------------- */

/* THE THREE STEP TIMELINE.

   Rebuilt around one track rather than a connector per step. The per step
   version drew each line from the middle of its own disc across its own column,
   which is correct arithmetic and fragile markup: it depended on the last item
   hiding its line, on every column being the same width, and it coloured the
   line after the current step as though that step were done. One absolutely
   positioned track between the first and last disc centres cannot do any of
   that. Nothing after the current step is coloured, because nothing after the
   current step has happened.
   --------------------------------------------------------------------------- */
body.express-chrome-on .ep-cart .checkout-wrap { margin: 0 0 var(--ep-s-8); height: auto; }
body.express-chrome-on .ep-cart .checkout-bar {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	counter-reset: ep-step;
}
/* The track. Runs centre to centre, so it never pokes out past either end. */
body.express-chrome-on .ep-cart .checkout-bar::before {
	content: "";
	display: block;
	position: absolute;
	top: 13px;
	left: 16.667%;
	right: 16.667%;
	height: 2px;
	background: var(--ep-lt-line);
	width: auto;
}
body.express-chrome-on .ep-cart .checkout-bar li {
	position: relative;
	z-index: 1;
	width: auto;
	height: auto;
	float: none;
	margin: 0;
	padding: 40px 0 0;
	text-align: center;
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-semi);
	line-height: 1.35;
	color: var(--ep-lt-mut);
	background: none;
	counter-increment: ep-step;
}
body.express-chrome-on .ep-cart .checkout-bar li a { color: inherit !important; text-decoration: none; }
body.express-chrome-on .ep-cart .checkout-bar li::before {
	content: counter(ep-step);
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ep-lt-bg);
	border: 2px solid var(--ep-lt-line-2);
	color: var(--ep-lt-ink-2);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	line-height: 1;
}
/* The last disc sits over the end of the track, so it has to be opaque or the
   track shows through and reads as an overshoot past the final step. */
body.express-chrome-on .ep-cart .checkout-bar li:last-child::before { background: var(--ep-lt-bg); }
/* No per step connectors any more, and the theme's own rail and visited marks
   are drawn over by the track above. */
body.express-chrome-on .ep-cart .checkout-bar li::after,
body.express-chrome-on .ep-cart .checkout-bar li.visited::after { display: none; }
body.express-chrome-on .ep-cart .checkout-bar li.active { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }
body.express-chrome-on .ep-cart .checkout-bar li.active::before {
	background: var(--ep-vio-deep);
	border-color: var(--ep-vio-deep);
	color: #FFFFFF;
	box-shadow: 0 0 0 4px var(--ep-lt-tint);
}

/* CommerceKit's free delivery notice. It is kept and this plugin's own static
   meter was dropped instead: CommerceKit's redraws on every cart fragment
   refresh, so it cannot disagree with the basket the way a server rendered
   figure would once a quantity changes. */
.ep-cart .cgkit-fsn-bar,
.shoptimizer-mini-cart-wrap .cgkit-fsn-bar { padding: var(--ep-s-2) 0; }
.ep-cart .cgkit-fsn-progress-bar,
.shoptimizer-mini-cart-wrap .cgkit-fsn-progress-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--ep-lt-line) !important;
	overflow: hidden;
}
.ep-cart .cgkit-fsn-amount,
.shoptimizer-mini-cart-wrap .cgkit-fsn-amount {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--ep-vio-deep) !important;
	transition: width var(--ep-dur-2) var(--ep-ease);
}
.ep-cart .cgkit-fsn-notice,
.shoptimizer-mini-cart-wrap .cgkit-fsn-notice {
	display: block;
	margin-top: var(--ep-s-2);
	font-size: var(--ep-t-xs);
	color: var(--ep-lt-ink-2);
}
.ep-cart .cgkit-fsn-notice strong { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }
.ep-cart .cgkit-fsn-shop-link { color: var(--ep-vio-deep) !important; font-weight: var(--ep-w-semi); }
/* Qualified. The bar turns green because the customer has earned something,
   which is worth saying in colour and not only in words. */
.ep-cart .ckit-fsn-bar-active .cgkit-fsn-amount,
.shoptimizer-mini-cart-wrap .ckit-fsn-bar-active .cgkit-fsn-amount { background: var(--ep-lt-ok) !important; }
.ep-cart .ckit-fsn-bar-active .cgkit-fsn-title,
.shoptimizer-mini-cart-wrap .ckit-fsn-bar-active .cgkit-fsn-title {
	display: inline-block;
	margin-top: var(--ep-s-2);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ok);
}
/* The plugin draws its tick from the bar colour set in its own options. Once
   the basket qualifies, that reads better green than brand violet. */
.ep-cart .ckit-fsn-bar-active .cgkit-fsn-title::before,
.shoptimizer-mini-cart-wrap .ckit-fsn-bar-active .cgkit-fsn-title::before { background: var(--ep-lt-ok) !important; }

/* ---------------------------------------------------------------------------
   WOOCOMMERCE'S CART TABLE

   Left as a table, because a screen reader reading a basket benefits from real
   row and column semantics. On a phone it becomes a stack of cards through
   display rules rather than through different markup.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   THE TWO COLUMNS

   Shoptimizer floats the cart form left and the totals right inside
   .shoptimizer-cart-wrapper, and that wrapper contains neither of them: it
   measured 0px tall on a page with a full basket, so the payment marks, the
   trust tiles and the reviews all flowed up alongside the floats and collided
   with the table. Grid replaces the floats outright, which both fixes the
   overlap and contains the children by definition.
   --------------------------------------------------------------------------- */
.ep-cart .shoptimizer-cart-wrapper { display: block; }
.ep-cart .shoptimizer-cart-wrapper > .woocommerce-cart-form,
.ep-cart .shoptimizer-cart-wrapper > .cart-collaterals {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}
.ep-cart .woocommerce-cart-form { margin-bottom: var(--ep-s-6); }

/* The theme's link colour is the old orange, and it is still inherited by every
   plain link the shortcode renders. Buttons keep their own colours. */
.ep-cart .woocommerce a:not(.button):not(.checkout-button):not(.remove) { color: var(--ep-vio-deep); }

.ep-cart .shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	overflow: hidden;
}
.ep-cart .shop_table thead th {
	text-align: left;
	padding: var(--ep-s-3) var(--ep-s-4);
	background: var(--ep-lt-sunk);
	border-bottom: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-cart .shop_table td {
	padding: var(--ep-s-4);
	border-bottom: 1px solid var(--ep-lt-line);
	vertical-align: middle;
	font-size: var(--ep-t-sm);
}
.ep-cart .shop_table tr:last-child td { border-bottom: 0; }
body.express-chrome-on .ep-cart table.cart .product-thumbnail img {
	width: 62px; height: 62px;
	max-width: 62px;
	object-fit: contain;
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-sunk);
	display: block;
}
.ep-cart .product-name a { color: var(--ep-lt-ink) !important; font-weight: var(--ep-w-bold); }
.ep-cart .product-name a:hover { color: var(--ep-vio-deep) !important; }
.ep-cart .product-price, .ep-cart .product-subtotal { font-variant-numeric: tabular-nums; }
.ep-cart .product-subtotal { font-weight: var(--ep-w-bold); color: var(--ep-lt-ink); }

/* Remove control. Woo renders a bare x; it needs to be a real tap target and
   it must not look like the primary way out of the page. */
.ep-cart a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	color: var(--ep-lt-mut) !important;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}
.ep-cart a.remove:hover { background: var(--ep-lt-err-bg); color: var(--ep-lt-err) !important; }

.ep-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-card);
	overflow: hidden;
	height: 42px;
}
body.express-chrome-on .ep-cart table.cart .quantity input.qty,
.ep-cart .quantity input.qty {
	width: 46px; height: 100%;
	min-height: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	border: 0; background: transparent; text-align: center;
	font: inherit; font-weight: var(--ep-w-semi);
	font-variant-numeric: tabular-nums;
	color: var(--ep-lt-ink);
	-moz-appearance: textfield;
}
.ep-cart .quantity input::-webkit-outer-spin-button,
.ep-cart .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The coupon row and Update basket sit in the last table row. */
.ep-cart .coupon { display: flex; gap: var(--ep-s-2); flex-wrap: wrap; }
.ep-cart .coupon input[type="text"] {
	min-height: var(--ep-control-sm);
	padding: 0 var(--ep-s-3);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-card);
	font: inherit;
	color: var(--ep-lt-ink);
}

/* ---------------------------------------------------------------------------
   TOTALS AND CHECKOUT
   --------------------------------------------------------------------------- */
.ep-cart .cart-collaterals { display: block; width: 100%; }
.ep-cart .cart_totals {
	width: 100%;
	padding: var(--ep-s-5);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
}
.ep-cart .cart_totals h2 {
	margin: 0 0 var(--ep-s-3);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-cart .cart_totals table { width: 100%; border-collapse: collapse; }
/* These carry table.shop_table because content.css styles every theme rendered
   table on the site at body.express-chrome-on .woocommerce table.shop_table td,
   which is (0,3,3) and was reimposing 16px of padding on the totals rows. */
/* The shipping method marker. The theme's rules carry an id, so these have to
   match on the id too rather than out-classing them. */
.ep-cart ul#shipping_method > li > input[type="radio"]:checked + label::before,
.ep-cart ul#shipping_method li:only-child label::before { background: var(--ep-vio-deep); }
body.express-chrome-on .ep-cart .cart_totals table.shop_table th,
body.express-chrome-on .ep-cart .cart_totals table.shop_table td {
	padding: var(--ep-s-2) 0;
	border-top: 0;
	border-bottom: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-sm);
	text-align: left;
}
body.express-chrome-on .ep-cart .cart_totals table.shop_table th { color: var(--ep-lt-mut); font-weight: var(--ep-w-regular); }
body.express-chrome-on .ep-cart .cart_totals table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
/* The shipping cell holds a list of methods, a note and a calculator link, not
   a figure, so right aligning it turns three left hung lines into a ragged
   right hand column. */
body.express-chrome-on .ep-cart .cart_totals table.shop_table .woocommerce-shipping-totals td { text-align: left; }
.ep-cart .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
.ep-cart .woocommerce-shipping-destination { margin: var(--ep-s-2) 0 0; font-size: var(--ep-t-xs); color: var(--ep-lt-mut); }
body.express-chrome-on .ep-cart .cart_totals table.shop_table .order-total th,
body.express-chrome-on .ep-cart .cart_totals table.shop_table .order-total td {
	border-bottom: 0;
	padding-top: var(--ep-s-3);
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-black);
	color: var(--ep-lt-ink);
}

/* The checkout button is the point of the page. */
.ep-cart .wc-proceed-to-checkout { padding: var(--ep-s-4) 0 0; }
.ep-cart .checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--ep-control);
	border-radius: var(--ep-r-md);
	background: var(--ep-vio-deep) !important;
	color: #FFFFFF !important;
	font-size: var(--ep-t-base);
	font-weight: var(--ep-w-bold);
	border: 0;
	box-shadow: 0 8px 22px rgba(109, 40, 217, 0.28);
}
.ep-cart .checkout-button:hover { background: #5B21B6 !important; }

/* Shared blocks, on the light cart ground. */
.ep-cart .ep-foot__pay {
	margin: var(--ep-s-4) 0 0;
	padding-top: var(--ep-s-4);
	border-top: 1px solid var(--ep-lt-line);
}
.ep-cart .ep-foot__payl { color: var(--ep-lt-mut); font-size: var(--ep-t-xs); }
.ep-cart .ep-foot__pmset { color: var(--ep-lt-ink-2); opacity: 0.6; }
.ep-cart .ep-foot__gw { border-color: var(--ep-lt-line); color: var(--ep-lt-ink); font-size: var(--ep-t-xs); }

/* ---------------------------------------------------------------------------
   REVIEWS
   Real reviews, on the page where hesitation happens.
   --------------------------------------------------------------------------- */
.ep-cart__revs { margin-top: var(--ep-s-10); }
.ep-cart__revs h2 {
	margin: 0 0 var(--ep-s-4);
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-lt-ink);
}
.ep-cart__revgrid { display: grid; grid-template-columns: 1fr; gap: var(--ep-s-3); }


.ep-cart__empty { padding: var(--ep-s-10) 0; text-align: center; }
.ep-cart__empty p { margin: 0 0 var(--ep-s-4); color: var(--ep-lt-mut); }

@media (min-width: 700px) {
	.ep-cart__in { padding-top: var(--ep-s-10); }
	.ep-cart__revgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   THE CART SUMMARY WIDGET

   This is the client's own Custom HTML widget in Shoptimizer's cart-summary
   area, and it carried a whole second design in inline styles: black panels,
   #FF6B00 headings in Anton, orange numbered discs. Inline styles cannot be
   overridden from a stylesheet, so the widget row itself was rewritten to carry
   class names instead. Every word in it is unchanged; only the styling moved
   here, where it can be changed again without editing the database.
   --------------------------------------------------------------------------- */
.ep-cart .cart-summary { margin-top: var(--ep-s-6); }
.ep-cart .cart-summary .widget { margin: 0; padding: 0; border: 0; background: none; }
.ep-cart .cart-summary .widget-title { display: none; }

/* The theme styles every li inside a widget, at a specificity that beats a
   single class. Cleared here so the rules below are the ones that apply. */
.ep-cart .cart-summary .widget ul,
.ep-cart .cart-summary .widget ol { margin: 0; padding: 0; list-style: none; }
/* Shoptimizer prints five orange stars above every <strong> inside a widget
   list item (.cart-summary .widget li strong::before). In a five step How it
   works list that is five rows of stars meaning nothing, and it was what kept
   each step 49px tall. */
.ep-cart .cart-summary .widget li strong::before { content: none; }
/* The same customizer block turns every <strong> in a widget list item into a
   block with a top margin, which broke each step of How it works onto its own
   line: "Press", then "Place Order", then "below". */
.ep-cart .cart-summary .widget li strong { display: inline; margin: 0; }
/* And it hangs a 1px full height divider off the right of each item above
   768px, which drew a stray rule down the inside of the box. */
.ep-cart .cart-summary .widget li::after { content: none; }

.ep-cart .cart-summary .widget li {
	margin: 0;
	padding: 0;
	background: none;
	font-size: inherit;
	line-height: inherit;
	border: 0;
	width: auto;
	float: none;
}

.ep-cart .cart-summary .ep-cs { display: grid; gap: var(--ep-s-3); }
.ep-cart .cart-summary .ep-cs h3 {
	margin: 0 0 var(--ep-s-2);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-cart .cart-summary .ep-cs p { margin: 0; font-size: var(--ep-t-sm); line-height: 1.6; color: var(--ep-lt-ink-2); }
.ep-cart .cart-summary .ep-cs strong { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }

/* What happens next. The one block on the page that answers the question a
   customer actually stops to ask before handing over a card. */
.ep-cart .cart-summary .ep-cs__next {
	padding: var(--ep-s-4) var(--ep-s-5);
	background: var(--ep-lt-tint);
	border: 1px solid var(--ep-lt-tint-e);
	border-left: 3px solid var(--ep-vio-deep);
	border-radius: var(--ep-r-md);
}
.ep-cart .cart-summary .ep-cs__next h3 { color: var(--ep-vio-deep); }

/* The three claims. */
.ep-cart .cart-summary .ep-cs__marks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ep-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ep-cart .cart-summary .ep-cs__marks li {
	margin: 0;
	padding: var(--ep-s-3) var(--ep-s-2);
	text-align: center;
	background: var(--ep-lt-sunk);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.04em;
	color: var(--ep-lt-ink-2);
}

.ep-cart .cart-summary .ep-cs__pay {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ep-s-2);
	padding: var(--ep-s-3) var(--ep-s-4);
	background: var(--ep-lt-sunk);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
}
.ep-cart .cart-summary .ep-cs__lab {
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
.ep-cart .cart-summary .ep-cs__opts { display: flex; flex-wrap: wrap; gap: var(--ep-s-2); }
.ep-cart .cart-summary .ep-cs__opts b {
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink-2);
}

/* The WhatsApp line. The original carried an empty orange square where an icon
   was meant to be; the mark is drawn here instead, so the widget row stays
   plain text and nothing in the database has to hold an SVG. */
.ep-cart .cart-summary .ep-cs__wa {
	position: relative;
	padding: var(--ep-s-3) var(--ep-s-4) var(--ep-s-3) 46px;
	background: var(--ep-lt-ok-bg);
	border: 1px solid rgba(15, 123, 79, 0.2);
	border-radius: var(--ep-r-sm);
	font-size: var(--ep-t-sm);
	color: var(--ep-lt-ink-2);
}
.ep-cart .cart-summary .ep-cs__wa::before {
	content: "";
	position: absolute;
	left: var(--ep-s-4);
	top: 50%;
	margin-top: -11px;
	width: 22px;
	height: 22px;
	background: var(--ep-lt-ok);
	-webkit-mask: var(--ep-icon-wa) center / contain no-repeat;
	mask: var(--ep-icon-wa) center / contain no-repeat;
}

/* How it works. An ordered list, so the numbering is the list's own and not
   five hand written discs. */
.ep-cart .cart-summary .ep-cs__how {
	padding: var(--ep-s-4) var(--ep-s-5);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
}
.ep-cart .cart-summary .ep-cs__how ol {
	counter-reset: ep-how;
	display: grid;
	gap: var(--ep-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ep-cart .cart-summary .ep-cs__how li {
	position: relative;
	display: block;
	padding-left: 34px;
	margin: 0;
	font-size: var(--ep-t-sm);
	line-height: 1.5;
	color: var(--ep-lt-ink-2);
	counter-increment: ep-how;
}
.ep-cart .cart-summary .ep-cs__how li::before {
	content: counter(ep-how);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ep-lt-tint);
	color: var(--ep-vio-deep);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	line-height: 1;
}

/* ---------------------------------------------------------------------------
   DESKTOP: BASKET LEFT, MONEY RIGHT

   The totals card is what the page is for, so it stays in view while a long
   basket scrolls past it.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.ep-cart .shoptimizer-cart-wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--ep-s-6);
		align-items: start;
	}
	.ep-cart .cart-collaterals { position: sticky; top: var(--ep-s-6); }
	.ep-cart .woocommerce-cart-form { margin-bottom: 0; }
	body.express-chrome-on .ep-cart .checkout-bar li { font-size: var(--ep-t-sm); }
}

/* ---------------------------------------------------------------------------
   TIGHTENING PASS

   Everything below fixes spacing and stray fills that survived the structural
   work. Each one is a measured value, not a taste call.
   --------------------------------------------------------------------------- */

/* THE HEADER FILL ON ROW LABELS. content.css gives every th on a theme rendered
   table a sunk background, which is right for a real column header and wrong
   in the totals card, where th is the label at the start of a row: it painted a
   grey block behind Subtotal, Shipment and Total that stopped halfway across. */
body.express-chrome-on .ep-cart .cart_totals table.shop_table th,
body.express-chrome-on .ep-cart .shop_table thead th { background: none; }

/* THE STEP BAR sat in a full width grey band with square corners, which read as
   an unstyled strip rather than part of the page. The discs and connectors
   carry it on their own. */
body.express-chrome-on .ep-cart .checkout-bar { background: none; padding: var(--ep-s-2) 0 0; }
body.express-chrome-on .ep-cart .checkout-wrap {
	margin: 0 0 var(--ep-s-6);
	padding-bottom: var(--ep-s-5);
	border-bottom: 1px solid var(--ep-lt-line);
}

/* THE FREE DELIVERY ROW measured 114px for a 6px bar and one line of text: 16px
   of cell padding around a bar carrying 20px and 10px of its own margin. */
body.express-chrome-on .ep-cart .shop_table td .cgkit-fsn-bar { margin: 0; padding: 0; }
body.express-chrome-on .ep-cart .shop_table tr td:only-child:not(.actions) { padding: var(--ep-s-4); }

/* THE COUPON ROW. Woo floats .coupon and the input carries a 5px right margin,
   so input plus button came to exactly the float's width and the button wrapped
   onto its own line while Update cart sat up on the first. One flex row. */
/* The cell stays a table cell. Giving it display:flex took it out of the table
   layout entirely and it collapsed to 212px inside a 576px table. */
body.express-chrome-on .ep-cart td.actions {
	display: table-cell;
	padding: var(--ep-s-4);
	text-align: left;
	white-space: nowrap;
}
body.express-chrome-on .ep-cart td.actions .coupon {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	gap: var(--ep-s-2);
	float: none;
	width: auto;
	margin: 0;
}
body.express-chrome-on .ep-cart td.actions [name="update_cart"] { float: right; }
body.express-chrome-on .ep-cart td.actions .coupon input[type="text"] {
	width: 180px;
	margin: 0;
	height: var(--ep-control-sm);
}
body.express-chrome-on .ep-cart td.actions .button {
	height: var(--ep-control-sm);
	margin: 0;
}

/* THE TOTALS CARD. The theme leaves 26px hanging under the checkout block, and
   the rows want a little more air than 8px between label and figure. */
body.express-chrome-on .ep-cart .wc-proceed-to-checkout { margin: 0; padding: var(--ep-s-5) 0 0; }
body.express-chrome-on .ep-cart .cart_totals table.shop_table th,
body.express-chrome-on .ep-cart .cart_totals table.shop_table td { padding: var(--ep-s-3) 0; }
body.express-chrome-on .ep-cart .cart_totals h2 { margin-bottom: var(--ep-s-4); }
.ep-cart .cart_totals .woocommerce-shipping-methods li { margin: 0 0 var(--ep-s-1); }
.ep-cart .cart_totals .shipping-calculator-button { font-size: var(--ep-t-xs); }

/* THE REVIEW STARS came out 52px square. The review card is a <figure>, and
   kirki.min.css sets figure svg to 100% width and height, so the 12px stars
   stretched to fill the line box. */
.ep-cart__revgrid { align-items: stretch; }

/* THE DISPATCH PANEL AND THE CARD LIST wanted the same air as everything else. */
.ep-ship--cart { padding: var(--ep-s-4) var(--ep-s-5); margin-bottom: var(--ep-s-5); }
.ep-cart__head { margin-bottom: var(--ep-s-6); }
.ep-cart .cart-summary { margin-top: var(--ep-s-8); }
/* Full width now that it sits under both columns, so the blocks inside it can
   sit side by side rather than stacking down a 576px strip. */
@media (min-width: 900px) {
	.ep-cart .cart-summary .ep-cs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
	.ep-cart .cart-summary .ep-cs__next,
	.ep-cart .cart-summary .ep-cs__how { grid-row: span 2; }
	.ep-cart .cart-summary .ep-cs__how { grid-column: 2; grid-row: 1 / span 3; }
}
.ep-cart__revs { margin-top: var(--ep-s-10); }

/* ---------------------------------------------------------------------------
   THE TOTALS CARD, THE SHIPPING CHOICE, AND THE REVIEWS
   --------------------------------------------------------------------------- */

/* A CARD INSIDE A CARD. .ep-cart .shop_table gives every table a border and a
   14px radius, which is right for the basket and wrong here: the totals table
   sits inside a card that already has both, so it drew a second outline 20px
   inside the first and squeezed the rows against it. */
body.express-chrome-on .ep-cart .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}
body.express-chrome-on .ep-cart .cart_totals table.shop_table th,
body.express-chrome-on .ep-cart .cart_totals table.shop_table td {
	padding: var(--ep-s-4) 0;
	border-top: 0;
	border-bottom: 1px solid var(--ep-lt-line);
}
body.express-chrome-on .ep-cart .cart_totals table.shop_table tr:first-child th,
body.express-chrome-on .ep-cart .cart_totals table.shop_table tr:first-child td { padding-top: 0; }
body.express-chrome-on .ep-cart .cart_totals table.shop_table .order-total th,
body.express-chrome-on .ep-cart .cart_totals table.shop_table .order-total td {
	border-bottom: 0;
	padding-bottom: 0;
}
/* Shipment is a heading for the rows under it, not a label with a missing
   figure beside it, so it reads as one. */
body.express-chrome-on .ep-cart .cart_totals .woocommerce-shipping-totals th {
	padding-bottom: var(--ep-s-2);
	border-bottom: 0;
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}
body.express-chrome-on .ep-cart .cart_totals .woocommerce-shipping-totals td { padding-top: 0; }

/* --- THE SHIPPING CHOICE -------------------------------------------------- */

/* It was a 7px dot beside a run of text, which is neither a control a thumb can
   find nor a row that shows which option is chosen. Each method is a real
   selectable row now, with the price at the end of it. */
.ep-cart ul#shipping_method { display: grid; gap: var(--ep-s-2); margin: 0; padding: 0; list-style: none; }
.ep-cart ul#shipping_method li { margin: 0; padding: 0; }
.ep-cart ul#shipping_method li input.shipping_method { position: absolute; opacity: 0; pointer-events: none; }
.ep-cart ul#shipping_method li label {
	display: flex;
	align-items: center;
	gap: var(--ep-s-3);
	margin: 0;
	padding: var(--ep-s-3) var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-card);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink);
	cursor: pointer;
	transition: border-color var(--ep-dur-1) var(--ep-ease), background var(--ep-dur-1) var(--ep-ease);
}
.ep-cart ul#shipping_method li label:hover { border-color: var(--ep-lt-line-2); }
/* The ring. The theme already draws a pseudo element here, so it is reshaped
   rather than replaced, and the id in the selector matches the id in theirs. */
.ep-cart ul#shipping_method > li > label::before,
.ep-cart ul#shipping_method li:only-child label::before {
	content: "";
	position: static;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 50%;
	border: 2px solid var(--ep-lt-line-2);
	background: transparent;
	transition: border-color var(--ep-dur-1) var(--ep-ease), box-shadow var(--ep-dur-1) var(--ep-ease);
}
/* WooCommerce renders a HIDDEN input, not a radio, when there is only one
   method to choose from, so :checked never matches and the single option drew
   as an empty ring. When it is the only one it is the one being used. */
.ep-cart ul#shipping_method > li > input.shipping_method:checked + label,
.ep-cart ul#shipping_method li:only-child label {
	border-color: var(--ep-vio-deep);
	background: var(--ep-lt-tint);
}
.ep-cart ul#shipping_method > li > input.shipping_method:checked + label::before,
.ep-cart ul#shipping_method li:only-child label::before {
	border-color: var(--ep-vio-deep);
	background: transparent;
	box-shadow: inset 0 0 0 3px var(--ep-lt-tint), inset 0 0 0 9px var(--ep-vio-deep);
}
/* Keyboard users get the same ring the rest of the site uses. */
.ep-cart ul#shipping_method > li > input.shipping_method:focus-visible + label {
	outline: var(--ep-focus);
	outline-offset: var(--ep-focus-offset);
}
/* The price sits at the end of its row. */
.ep-cart ul#shipping_method li label .woocommerce-Price-amount {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-weight: var(--ep-w-bold);
	color: var(--ep-lt-ink);
}
.ep-cart .woocommerce-shipping-destination {
	margin: var(--ep-s-3) 0 0;
	font-size: var(--ep-t-xs);
	line-height: 1.5;
	color: var(--ep-lt-mut);
}
.ep-cart .shipping-calculator-button { display: inline-block; margin-top: var(--ep-s-2); font-size: var(--ep-t-xs); font-weight: var(--ep-w-semi); }

/* --- THE REVIEWS ---------------------------------------------------------- */

.ep-revs__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ep-s-2) var(--ep-s-5);
	margin-bottom: var(--ep-s-5);
}
.ep-cart__revs h2 { margin: 0; }
.ep-revs__sum {
	display: flex;
	align-items: center;
	gap: var(--ep-s-2);
	margin: 0;
	font-size: var(--ep-t-sm);
}
.ep-revs__stars { display: inline-flex; gap: 2px; color: #E0AC42; }
.ep-revs__stars svg { width: 14px; height: 14px; }
.ep-revs__sum b { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }
.ep-revs__sum .ep-revs__n { color: var(--ep-lt-mut); }

.ep-cart .ep-crev {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--ep-s-5);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-left: 3px solid var(--ep-vio-deep);
	border-radius: var(--ep-r-md);
}
.ep-cart .ep-crev__s { display: flex; gap: 2px; color: #E0AC42; margin-bottom: var(--ep-s-3); }
.ep-cart .ep-crev__s svg { width: 14px; height: 14px; max-width: 14px; max-height: 14px; flex: 0 0 auto; }
.ep-cart .ep-crev blockquote { flex: 1 1 auto; margin: 0 0 var(--ep-s-4); }
.ep-cart .ep-crev__t {
	display: block;
	margin-bottom: var(--ep-s-1);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-bold);
	color: var(--ep-lt-ink);
}
.ep-cart .ep-crev blockquote p {
	margin: 0;
	font-size: var(--ep-t-sm);
	line-height: 1.6;
	color: var(--ep-lt-ink-2);
}
/* The attribution. An initial rather than a stock avatar, because a made up
   face on a real customer's words is the one thing here that would be a lie. */
.ep-cart .ep-crev__by {
	display: flex;
	align-items: center;
	gap: var(--ep-s-2);
	padding-top: var(--ep-s-4);
	border-top: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-xs);
}
.ep-cart .ep-crev__av {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ep-lt-tint);
	color: var(--ep-vio-deep);
	font-weight: var(--ep-w-bold);
	font-size: var(--ep-t-xs);
	line-height: 1;
}
.ep-cart .ep-crev__by .ep-crev__n { font-weight: var(--ep-w-semi); color: var(--ep-lt-ink); }
.ep-cart .ep-crev__v {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--ep-lt-ok-bg);
	color: var(--ep-lt-ok);
	font-weight: var(--ep-w-semi);
	white-space: nowrap;
}
.ep-cart .ep-crev__v::before {
	content: "";
	width: 11px;
	height: 11px;
	background: var(--ep-lt-ok);
	-webkit-mask: var(--ep-icon-tick) center / contain no-repeat;
	mask: var(--ep-icon-tick) center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   THE PHONE

   A five column table at 375px is unreadable, so each row becomes a card. The
   markup does not change, only the presentation, so the row and column
   semantics survive for a screen reader.

   Every rule here carries body.express-chrome-on. WooCommerce's own
   shop_table_responsive rules are (0,2,2) and they blockify the cells, right
   align them and print a "Subtotal: " label in front of each value from
   data-title. Matching that weight is not enough, because the theme's sheets
   are enqueued after this one and a tie goes to whoever comes last.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body.express-chrome-on .ep-cart .shop_table thead { display: none; }
	body.express-chrome-on .ep-cart .woocommerce-cart-form__contents,
	body.express-chrome-on .ep-cart .woocommerce-cart-form__contents tbody,
	body.express-chrome-on .ep-cart .woocommerce-cart-form__contents tr,
	body.express-chrome-on .ep-cart .woocommerce-cart-form__contents td { display: block; width: 100%; }

	body.express-chrome-on .ep-cart .shop_table tr.woocommerce-cart-form__cart-item {
		position: relative;
		display: grid;
		/* The quantity stepper is about 114px wide, so it cannot live in the
		   62px thumbnail column: it was overlapping the subtotal beside it.
		   It gets the bottom row across both left columns instead, with the
		   figure it changes sitting at the end of the same row. */
		grid-template-columns: 62px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name  name"
			"thumb price price"
			"qty   qty   subtotal";
		gap: var(--ep-s-2) var(--ep-s-3);
		padding: var(--ep-s-4);
		border-bottom: 1px solid var(--ep-lt-line);
	}
	body.express-chrome-on .ep-cart table.cart tr td {
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}
	/* The data-title labels. They exist so a blockified table still says which
	   number is which; the card says that with position instead, and left as
	   they were they printed "Subtotal: " across the middle of the row. */
	body.express-chrome-on .ep-cart table.cart tr td[data-title]::before { content: none; }

	body.express-chrome-on .ep-cart table.cart tr td.product-remove {
		position: absolute;
		top: var(--ep-s-2);
		right: var(--ep-s-2);
		width: auto;
	}
	body.express-chrome-on .ep-cart table.cart tr td.product-thumbnail { grid-area: thumb; }
	body.express-chrome-on .ep-cart table.cart tr td.product-name { grid-area: name; padding-right: var(--ep-s-8); }
	body.express-chrome-on .ep-cart table.cart tr td.product-price { grid-area: price; color: var(--ep-lt-mut); }
	body.express-chrome-on .ep-cart table.cart tr td.product-quantity { grid-area: qty; justify-self: start; }
	body.express-chrome-on .ep-cart table.cart tr td.product-subtotal {
		grid-area: subtotal;
		text-align: right;
		align-self: center;
	}

	body.express-chrome-on .ep-cart table.cart tr td.actions {
		display: block;
		padding: var(--ep-s-4);
		white-space: normal;
	}
	body.express-chrome-on .ep-cart td.actions .coupon { display: flex; flex-wrap: nowrap; width: 100%; }
	/* flex-basis auto plus min-width auto means the input refuses to shrink below
	   its content size, so input and button came to more than the row and wrapped
	   anyway. Zero basis and zero minimum let it give way to the button. */
	body.express-chrome-on .ep-cart td.actions .coupon input[type="text"] {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
	/* table.cart td.actions button is width:100% below 992px, which is what put
	   Apply coupon on its own row under the input. Update cart keeps the full
	   width, because there it is the right shape for a thumb. */
	body.express-chrome-on .ep-cart td.actions .coupon .button {
		flex: 0 0 auto;
		width: auto;
		margin: 0;
	}
	body.express-chrome-on .ep-cart td.actions [name="update_cart"] {
		float: none;
		width: 100%;
		margin: var(--ep-s-3) 0 0;
	}

	/* The totals. Woo blockifies these too, which left "Shipment" as a 522px
	   wide block inside a 305px card. Label and figure go back to being a row;
	   the shipping row keeps its own line, because a list of methods with radio
	   buttons does not fit beside a label at this width. */
	/* The totals stop being a table here. Half table half block was the worst of
	   both: a block level tr inside a table display tbody took the width of the
	   widest column, so the shipping options were laid out in 189px of a 263px
	   card and wrapped. Rows are flex, label at one end, figure at the other. */
	body.express-chrome-on .ep-cart .cart_totals { max-width: none; }
	body.express-chrome-on .ep-cart .cart_totals table,
	body.express-chrome-on .ep-cart .cart_totals tbody { display: block; width: 100%; }
	body.express-chrome-on .ep-cart .cart_totals tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--ep-s-3);
		width: 100%;
	}
	body.express-chrome-on .ep-cart .cart_totals th,
	body.express-chrome-on .ep-cart .cart_totals td { display: block; width: auto; }
	/* The shipping row stacks: a list of methods with radio rows does not sit
	   beside a label at this width. */
	body.express-chrome-on .ep-cart .cart_totals tr.woocommerce-shipping-totals {
		display: block;
	}
	body.express-chrome-on .ep-cart .cart_totals .woocommerce-shipping-totals th,
	body.express-chrome-on .ep-cart .cart_totals .woocommerce-shipping-totals td {
		display: block;
		width: 100%;
		text-align: left;
	}
	body.express-chrome-on .ep-cart .cart_totals .woocommerce-shipping-totals th { border-bottom: 0; padding-bottom: var(--ep-s-2); }

	/* The step bar. The theme hides the labels below 700px and leaves three
	   discs floating in a grey band, which says nothing at all. */
	body.express-chrome-on .ep-cart .checkout-bar { background: none; }
	body.express-chrome-on .ep-cart .checkout-bar li span,
	body.express-chrome-on .ep-cart .checkout-bar li a { visibility: visible; }
	body.express-chrome-on .ep-cart .checkout-bar li { padding-top: 34px; font-size: 11px; }
	body.express-chrome-on .ep-cart .checkout-bar li::before { width: 24px; height: 24px; }
	body.express-chrome-on .ep-cart .checkout-bar li::after { top: 11px; }

	/* The client's cart summary. Shoptimizer hides this widget area entirely on
	   a phone, so What happens next and How it works, the two things on the page
	   that answer a customer's actual question, were invisible on the device
	   most of them are using. */
	body.express-chrome-on .ep-cart .cart-summary { display: block; }
}