/* =========================================================================
   Krieg - cart
   ========================================================================= */

/* ------------------------------------------- 6. Cart, checkout and account */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	margin: 0 0 var(--k-5);
	padding: var(--k-4) var(--k-5);
	border: 1px solid var(--k-line);
	border-left: 4px solid var(--k-ink);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow);
	background: var(--k-paper);
	font-size: var(--k-t-sm);
	display: flex;
	align-items: center;
	gap: var(--k-4);
	flex-wrap: wrap;
}

.woocommerce-message {
	border-left-color: var(--k-ok);
	background: var(--k-ok-soft);
}

.woocommerce-error {
	border-left-color: var(--k-accent);
	background: var(--k-accent-soft);
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	padding: 11px var(--k-5);
	border-radius: var(--k-radius-sm);
	background: var(--k-ink);
	color: var(--k-white);
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.shop_table {
	width: 100%;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	font-size: var(--k-t-sm);
	background: var(--k-white);
	box-shadow: var(--k-shadow);
}

.shop_table th {
	background: var(--k-paper);
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	padding: var(--k-4);
	border-bottom: 1px solid var(--k-line);
}

.shop_table td {
	padding: var(--k-4);
	border-bottom: 1px solid var(--k-line);
	vertical-align: middle;
}

.shop_table .product-thumbnail img {
	width: 72px;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
}

.shop_table .product-name a {
	text-decoration: none;
	font-weight: 500;
}

@media (max-width: 767px) {
	.shop_table thead {
		display: none;
	}

	.shop_table,
	.shop_table tbody,
	.shop_table tr,
	.shop_table td {
		display: block;
		width: 100%;
	}

	.shop_table tr {
		border-bottom: 1px solid var(--k-line);
		padding: var(--k-3) 0;
		position: relative;
	}

	.shop_table td {
		border: 0;
		padding: 6px var(--k-4);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--k-4);
	}

	.shop_table td::before {
		content: attr(data-title);
		font-family: var(--k-font-display);
		font-size: var(--k-t-xs);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--k-muted);
	}

	.shop_table td.product-thumbnail::before {
		content: none;
	}
}

.cart-collaterals,
.cart_totals {
	margin-top: var(--k-7);
}

.cart_totals h2,
.cross-sells h2 {
	font-size: var(--k-t-h3);
	text-transform: uppercase;
}

.woocommerce-cart .cart-collaterals {
	display: grid;
	gap: var(--k-7);
}

@media (min-width: 900px) {
	.woocommerce-cart .cart-collaterals {
		grid-template-columns: 1fr 420px;
		align-items: start;
	}
}

.cart_totals .order-total {
	font-family: var(--k-font-display);
	font-size: 1.125rem;
	font-weight: 800;
}

.checkout-button,
.wc-proceed-to-checkout .button {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: var(--k-2);
	margin-top: var(--k-4);
	padding: 18px var(--k-6);
	min-height: 58px;
	background: var(--k-grad-accent);
	color: var(--k-white);
	border: 0;
	border-radius: var(--k-radius);
	box-shadow: 0 6px 18px -8px rgba(216, 35, 42, 0.6);
	font-family: var(--k-font-display);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.2;
	transition: box-shadow var(--k-base) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

.checkout-button:hover,
.wc-proceed-to-checkout .button:hover {
	color: var(--k-white);
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-accent);
}

.coupon {
	display: flex;
	gap: var(--k-2);
	flex-wrap: wrap;
	margin-bottom: var(--k-4);
}

.coupon input[type="text"] {
	flex: 1 1 180px;
	padding: 14px var(--k-4);
	background: var(--k-paper);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	font-size: var(--k-t-sm);
	transition: border-color var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease);
}

.coupon input[type="text"]:focus {
	outline: none;
	background: var(--k-white);
	border-color: var(--k-accent);
	box-shadow: 0 0 0 4px var(--k-accent-ring);
}

.woocommerce-checkout .col2-set {
	display: grid;
	gap: var(--k-6);
}

@media (min-width: 768px) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr 1fr;
	}
}

/* #customer_details h3 was here too. It is a checkout selector, and now
   that cart.css loads on the checkout as well it outranked the numbered
   section headings - an ID beats any class rule. */
#order_review_heading {
	font-size: var(--k-t-h3);
	text-transform: uppercase;
	padding-bottom: var(--k-3);
	border-bottom: 1px solid var(--k-line);
	margin-bottom: var(--k-5);
}

.woocommerce form .form-row {
	display: grid;
	gap: var(--k-2);
	margin-bottom: var(--k-4);
	padding: 0;
}

.woocommerce form .form-row label {
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

.woocommerce form .form-row .required {
	color: var(--k-accent);
	text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	width: 100%;
	padding: 14px var(--k-4);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	background: var(--k-paper);
	font-size: var(--k-t-sm);
	height: auto;
	line-height: 1.5;
	transition: border-color var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease),
		background var(--k-fast) var(--k-ease);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	background: var(--k-white);
	border-color: var(--k-accent);
	box-shadow: 0 0 0 4px var(--k-accent-ring);
}

.select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.5;
}

.select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: var(--k-3);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--k-accent);
	background: var(--k-accent-soft);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--k-5);
	padding: 0;
	border: 0;
	display: grid;
	gap: var(--k-2);
}

.woocommerce-checkout #payment ul.payment_methods li {
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	padding: var(--k-4) var(--k-5);
	background: var(--k-white);
	transition: border-color var(--k-fast) var(--k-ease), box-shadow var(--k-base) var(--k-ease);
}

.woocommerce-checkout #payment ul.payment_methods li:hover,
.woocommerce-checkout #payment ul.payment_methods li:focus-within {
	border-color: var(--k-accent);
	box-shadow: 0 4px 14px -8px rgba(216, 35, 42, 0.5);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--k-surface);
	border-radius: var(--k-radius-sm);
	padding: var(--k-3) var(--k-4);
	margin-top: var(--k-3);
	font-size: var(--k-t-xs);
}

.woocommerce-checkout #payment div.payment_box::before {
	content: none;
}

#place_order {
	width: 100%;
	padding: 20px var(--k-6);
	border: 0;
	border-radius: var(--k-radius);
	background: var(--k-grad-accent);
	color: var(--k-white);
	font-family: var(--k-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 6px 20px -8px rgba(216, 35, 42, 0.65);
	transition: box-shadow var(--k-base) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

#place_order:hover {
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-accent);
}

#place_order:active {
	transform: translateY(0);
}


/* --------------------------------------------------------- Cart layout */

.k-cartlayout {
	display: grid;
	gap: var(--k-7);
	align-items: start;
}

@media (min-width: 1000px) {
	.k-cartlayout {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--k-8);
	}
}

.k-cartlayout__items {
	min-width: 0;
}

.k-cartlayout__continue {
	margin-top: var(--k-5);
	display: inline-flex;
}

.k-cartlayout .cart-collaterals,
.k-cartlayout .cart_totals {
	margin-top: 0;
	width: auto;
	float: none;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

/* The cell stays a table cell so its colspan keeps working; the flex row
   lives on the wrapper inside it. */
.cart .actions {
	padding: var(--k-4);
	background: var(--k-paper);
}

.k-cartactions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--k-3);
	justify-content: space-between;
}

.k-cartactions .coupon {
	display: flex;
	gap: var(--k-2);
	flex-wrap: wrap;
	margin: 0;
}

.k-cartactions .coupon input[type="text"] {
	flex: 1 1 160px;
	min-width: 0;
}

.woocommerce .cart .button,
.woocommerce .cart input.button {
	float: none;
}

.cart .product-thumbnail img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
}

@media (max-width: 767px) {
	.k-cartactions {
		flex-direction: column;
		align-items: stretch;
	}

	.cart .product-thumbnail {
		justify-content: flex-start;
	}

	.cart .product-thumbnail img {
		width: 64px;
		height: 64px;
	}
}

/* The cart quantity fields get the same stepper as the product page. */

.cart .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	overflow: hidden;
}

.cart .quantity:focus-within {
	border-color: var(--k-accent);
	box-shadow: 0 0 0 3px var(--k-accent-ring);
}

.cart .quantity .k-qtybtn {
	width: 38px;
	border: 0;
	background: var(--k-white);
	color: var(--k-ink);
	display: grid;
	place-items: center;
	transition: background var(--k-fast) var(--k-ease);
}

.cart .quantity .k-qtybtn:hover {
	background: var(--k-surface);
}

.cart .quantity input.qty {
	width: 46px;
	border: 0;
	border-inline: 1px solid var(--k-line);
	text-align: center;
	font-family: var(--k-font-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	background: var(--k-white);
	padding: 10px 0;
}

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

/* ------------------------------------------------------ Cart reassurance */

.woocommerce-cart .k-trustbox {
	margin-top: var(--k-5);
}

/* .cart-collaterals kept a two-column grid - 1fr 420px - from the layout
   this page had before .k-cartlayout existed. The aside track is 380px now,
   and the summary was landing in that stale 420px second column: it started
   48px in and overhung the column by 88px, so it never lined up with the
   trust tiles directly beneath it. One column, and the summary fills it. */
.k-cartlayout .cart-collaterals {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--k-6);
	width: auto;
}

/* WooCommerce caps cart thumbnails at 32px from
   .woocommerce-cart table.cart img (0,3,2), which beat the theme's
   .cart .product-thumbnail img (0,2,1). Worse, the column then collapsed
   around the small image and max-width:100% squeezed it further - measured
   at 23px. The cell is given a width so the column reserves room, and
   max-width is released so the image can reach its own size. */
body.woocommerce-cart table.cart th.product-thumbnail,
body.woocommerce-cart table.cart td.product-thumbnail,
body.woocommerce-page table.cart th.product-thumbnail,
body.woocommerce-page table.cart td.product-thumbnail {
	width: 104px;
}

body.woocommerce-cart table.cart td.product-thumbnail img,
body.woocommerce-page table.cart td.product-thumbnail img {
	width: 76px;
	height: 76px;
	max-width: none;
	object-fit: cover;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
}

/* The totals panel stays in view while a long cart is edited. */
@media (min-width: 1024px) {
	.k-cartlayout__aside {
		position: sticky;
		top: calc(var(--k-header-h-stuck) + var(--k-5));
	}
}

/* =========================================================================
   Cart audit fixes
   ========================================================================= */

/* WooCommerce sets the coupon field's padding from a four-class selector, so
   it rendered 34px tall beside a 40px button on the same row. Matching that
   weight puts the pair back on one line. */
body.woocommerce-cart table.cart td.actions .coupon .input-text,
body.woocommerce-page table.cart td.actions .coupon .input-text,
body.woocommerce-cart #coupon_code {
	height: 40px;
	padding: 0 var(--k-4);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius-sm);
	background: var(--k-white);
	font-size: var(--k-t-sm);
	line-height: normal;
}

/* Field and button are one row: centre them on each other. */
.k-cartactions .coupon {
	align-items: center;
}

body.woocommerce-cart table.cart td.actions .coupon .input-text:focus,
body.woocommerce-page table.cart td.actions .coupon .input-text:focus {
	outline: none;
	border-color: var(--k-accent);
	box-shadow: 0 0 0 3px var(--k-accent-ring);
}

/* The "View cart" button inside an add-to-cart notice sat at 31px. */
body.woocommerce .woocommerce-message a.button,
body.woocommerce .woocommerce-info a.button,
body.woocommerce-page .woocommerce-message a.button,
body.woocommerce-page .woocommerce-info a.button {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	padding: 10px var(--k-5);
	border-radius: var(--k-radius-sm);
}

/* Match the stepper to the 44px the rest of the controls now use. */
.cart .quantity .k-qtybtn {
	height: 44px;
}

.cart .quantity input.qty {
	min-height: 44px;
}

@media (max-width: 767px) {
	/* WooCommerce's small-screen stylesheet hides the product image in the
	   cart. On a phone that leaves a column of names and numbers with nothing
	   to recognise, which is exactly where people check they picked the right
	   model. The cell is restored and laid out beside the name. */
	body.woocommerce-cart table.shop_table_responsive tr td.product-thumbnail,
	body.woocommerce-page table.shop_table_responsive tr td.product-thumbnail {
		display: block;
		padding-bottom: 0;
	}

	.cart .product-thumbnail {
		justify-content: flex-start;
	}

	/* WooCommerce's small-screen sheet labels every cell with
	   attr(data-title) and caps cart images at 32px, both from selectors the
	   theme's class rules cannot reach. Matched here so the thumbnail reads
	   as a product picture and carries no stray label. */
	body.woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
	body.woocommerce-page table.shop_table_responsive tr td.product-thumbnail::before {
		content: none;
	}

	body.woocommerce-cart table.cart td.product-thumbnail img,
	body.woocommerce-page table.cart td.product-thumbnail img {
		width: 72px;
		height: 72px;
		object-fit: cover;
		border-radius: var(--k-radius-sm);
	}

	.shop_table tr.cart_item {
		padding-top: var(--k-4);
	}
}

/* WooCommerce sizes the Proceed to checkout button from a three-class
   selector that sets both font-size: 1.25em and padding: 1em, which inflated
   it to 60px and 20px type - out of step with Place order on the next screen
   and with every other primary button in the theme. */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-page .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout a.button.alt {
	font-size: 0.9375rem;
	line-height: 1.2;
	padding: 18px var(--k-6);
	min-height: 58px;
}

/* =========================================================================
   PASS 6 - Cart rebuilt against the owner's other two shops
   -------------------------------------------------------------------------
   What makes those checkouts feel finished is not decoration. The page
   answers four questions in order: where am I, what am I buying, what will
   it cost, and what happens next. Every block below serves one of them.

   Nothing here claims free shipping, a delivery window or a payment logo.
   Those are the parts of the reference sites that rest on configured
   shipping zones and a live gateway, and this store has neither yet, so
   printing them would be a promise the shop cannot keep.
   ========================================================================= */

/* --------------------------------------------------------------- Progress */

/* Three steps across the top of the cart and the checkout. Without it a
   shopper has no idea whether checkout is one screen or four, and an unknown
   number of remaining steps is itself a reason to abandon a cart. */
.k-steps {
	margin-bottom: var(--k-7);
}

/* Left-aligned rather than centred. Every other block on this page starts
   at the same left edge as the header, and a centred bar would give the eye a
   second axis to track for no gain. */
.k-steps__list {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-steps__item {
	display: flex;
	align-items: center;
	min-width: 0;
}

/* The connector belongs to the step on its right. That is deliberate: CSS can
   look forward from a sibling but not back, so hanging the line on the later
   step is the only way the earlier one can mark it as travelled. */
.k-steps__item + .k-steps__item::before {
	content: "";
	flex: 0 0 auto;
	width: clamp(18px, 7vw, 64px);
	height: 2px;
	margin-inline: var(--k-3);
	border-radius: 2px;
	background: var(--k-line-strong);
	transition: background var(--k-base) var(--k-ease);
}

.k-steps__item.is-done + .k-steps__item::before {
	background: var(--k-ink);
}

.k-steps__link {
	display: inline-flex;
	align-items: center;
	gap: var(--k-2);
	min-width: 0;
	color: var(--k-muted);
	text-decoration: none;
}

.k-steps__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 2px solid var(--k-line-strong);
	border-radius: 50%;
	background: var(--k-white);
	color: var(--k-muted);
	font-family: var(--k-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	transition: background var(--k-base) var(--k-ease), border-color var(--k-base) var(--k-ease),
		color var(--k-base) var(--k-ease);
}

.k-steps__label {
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--k-fast) var(--k-ease);
}

.k-steps__item.is-done .k-steps__num {
	border-color: var(--k-ink);
	background: var(--k-ink);
	color: var(--k-white);
}

.k-steps__item.is-done .k-steps__label {
	color: var(--k-ink);
}

a.k-steps__link:hover .k-steps__label,
a.k-steps__link:focus-visible .k-steps__label {
	color: var(--k-accent);
}

a.k-steps__link:hover .k-steps__num {
	border-color: var(--k-accent);
	background: var(--k-accent);
}

/* The step someone is on is the only accent on the row, so it reads as
   position rather than as something to click. */
.k-steps__item.is-current .k-steps__num {
	border-color: var(--k-accent);
	background: var(--k-accent);
	color: var(--k-white);
	box-shadow: 0 0 0 4px var(--k-accent-ring);
}

.k-steps__item.is-current .k-steps__label {
	color: var(--k-ink);
}

@media (max-width: 520px) {
	.k-steps {
		margin-bottom: var(--k-6);
	}

	.k-steps__num {
		width: 24px;
		height: 24px;
		font-size: 0.75rem;
	}

	.k-steps__label {
		font-size: 0.625rem;
		letter-spacing: 0.05em;
	}

	.k-steps__item + .k-steps__item::before {
		margin-inline: var(--k-2);
	}
}

/* -------------------------------------------------------- The cart line */

.k-cartitem {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	min-width: 0;
}

.k-cartitem__name {
	margin: 0;
	font-family: var(--k-font-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

/* .cart .product-name a and .shop_table .product-name a both carry two
   classes, so a single-class selector here would lose to them. */
.cart .k-cartitem__name a {
	color: var(--k-ink);
	font-weight: 700;
	text-decoration: none;
	transition: color var(--k-fast) var(--k-ease);
}

.cart .k-cartitem__name a:hover {
	color: var(--k-accent);
}

.k-cartitem__meta {
	margin: 0;
	color: var(--k-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* The stock line the product page gave, repeated where someone commits.
   "Only 2 left" is the one sentence on this page that changes a decision,
   so it is a badge and not body copy. */
.k-cartitem__stock {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 2px 0 0;
	padding: 3px 9px 3px 7px;
	border-radius: 999px;
	font-family: var(--k-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
}

.k-cartitem__stock svg {
	flex: 0 0 auto;
}

.k-cartitem__stock--ok {
	background: var(--k-ok-soft);
	color: var(--k-ok);
}

.k-cartitem__stock--low {
	background: var(--k-warn-soft);
	color: var(--k-warn);
}

.k-cartitem__stock--out {
	background: var(--k-accent-soft);
	color: var(--k-accent);
}

/* Remove had a column of its own: a 44px cell holding one glyph, under a
   header with no label, on a table already short of width. It now sits under
   the item it removes and says what it does.

   It has to out-rank WooCommerce's a.remove, which sets colour with
   !important and forces a 1em square - hence the body prefix and the one
   !important in this stylesheet that is not avoidable. */
body.woocommerce .k-cartitem__remove,
body.woocommerce-page .k-cartitem__remove {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: auto;
	height: auto;
	margin-top: 3px;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--k-muted) !important;
	font-family: var(--k-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	transition: color var(--k-fast) var(--k-ease);
}

body.woocommerce .k-cartitem__remove:hover,
body.woocommerce-page .k-cartitem__remove:hover {
	background: none;
	color: var(--k-accent) !important;
}

.k-cartitem__remove svg {
	flex: 0 0 auto;
}

.k-cartitem__remove span {
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

.k-summary {
	padding: var(--k-5);
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	box-shadow: var(--k-shadow);
}

/* .cart_totals h2 is a two-part selector, so this needs the parent class to
   win against it on the very same element. */
.cart_totals .k-summary__title {
	display: flex;
	align-items: center;
	gap: var(--k-2);
	margin: 0 0 var(--k-4);
	padding-bottom: var(--k-4);
	border-bottom: 1px solid var(--k-line);
	color: var(--k-ink);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.k-summary__title svg {
	flex: 0 0 auto;
	color: var(--k-accent);
}

.k-summary__rows {
	display: grid;
	gap: var(--k-3);
}

.k-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--k-4);
	font-size: var(--k-t-sm);
}

.k-summary__row > span:first-child,
.k-summary__row > th {
	color: var(--k-muted);
	font-weight: 400;
	text-align: left;
}

.k-summary__row > span:last-child,
.k-summary__row > strong,
.k-summary__row > td {
	color: var(--k-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.k-summary__row--credit > span:last-child {
	color: var(--k-ok);
}

/* The total is the figure being decided on, so it is the largest thing in
   the panel and the only one allowed above the small type. */
.k-summary__row--total {
	align-items: center;
	margin-top: var(--k-2);
	padding-top: var(--k-4);
	border-top: 1px solid var(--k-line);
}

.k-summary__row--total > span:first-child {
	color: var(--k-ink);
	font-family: var(--k-font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.k-summary__row--total > strong {
	font-family: var(--k-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
}

.k-summary__row--total .woocommerce-Price-taxLabel,
.k-summary__row--total small {
	display: block;
	color: var(--k-muted);
	font-family: var(--k-font-body);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Shipping is settled at checkout on this store rather than quoted here.
   Saying so beats a silent gap, where a shopper assumes a surprise is
   coming - and it stays true until shipping zones are configured. */
.k-summary__note {
	display: flex;
	align-items: flex-start;
	gap: var(--k-2);
	margin: var(--k-4) 0 0;
	padding: var(--k-3);
	border-radius: var(--k-radius-sm);
	background: var(--k-paper);
	color: var(--k-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.k-summary__note svg {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--k-ink);
}

.k-summary__or {
	position: relative;
	margin: var(--k-4) 0;
	text-align: center;
}

.k-summary__or::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 1px;
	background: var(--k-line);
}

.k-summary__or span {
	position: relative;
	padding: 0 var(--k-3);
	background: var(--k-white);
	color: var(--k-muted);
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* The proceed button is the panel's own hook output and keeps its
   WooCommerce classes; only the space around it belongs here. */
.k-summary .wc-proceed-to-checkout {
	margin: var(--k-5) 0 0;
	padding: 0;
}

.k-summary .wc-proceed-to-checkout .checkout-button,
.k-summary .wc-proceed-to-checkout .button {
	margin-top: 0;
}

/* ---------------------------------------------------------- Coupon bar */

/* The coupon row was an input and a button adrift on a white strip, reading
   like a field the order needed. Tinting the bar and labelling it marks it
   as optional, which is what stops people leaving to hunt for a code they
   were never given. */
.k-cartactions__label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--k-2);
	color: var(--k-ink);
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.k-cartactions__label svg {
	flex: 0 0 auto;
	color: var(--k-accent);
}

.k-cartactions__coupon {
	flex: 1 1 320px;
	min-width: 0;
}

/* WooCommerce floats td.actions .coupon. While .coupon was itself the flex
   item that float was ignored - floats do not apply to flex items - but
   nested inside .k-cartactions__coupon it is a plain block again, so the
   float came back, shrank the row to fit its content and pushed Apply onto a
   second line. Measured at 169px inside a 662px parent. */
body.woocommerce table.cart td.actions .k-cartactions__coupon .coupon,
body.woocommerce-page table.cart td.actions .k-cartactions__coupon .coupon {
	float: none;
	width: 100%;
	margin: 0;
}

/* --------------------------------------------------- Cart reassurance */

/* The four promises were a plain list in the sidebar. As a two-column grid
   of tiles they carry the same words with the weight of a panel, which is
   what the reference shops do at exactly this point in the page. */
.woocommerce-cart .k-cartlayout__aside .k-trustbox {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin-top: var(--k-5);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	background: var(--k-line);
	list-style: none;
}

.woocommerce-cart .k-cartlayout__aside .k-trustbox li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	margin: 0;
	padding: var(--k-4);
	background: var(--k-white);
	color: var(--k-ink);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
}

.woocommerce-cart .k-cartlayout__aside .k-trustbox li svg {
	flex: 0 0 auto;
	color: var(--k-accent);
}

@media (max-width: 420px) {
	.woocommerce-cart .k-cartlayout__aside .k-trustbox {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------ Small screens */

@media (max-width: 767px) {
	/* WooCommerce labels every responsive cell with attr(data-title). On the
	   product cell that printed "Product" above the product's own name. */
	body.woocommerce table.shop_table_responsive tr td.product-name::before,
	body.woocommerce-page table.shop_table_responsive tr td.product-name::before {
		content: none;
	}

	/* and the cell holds a stacked block, not a label and value pair, so it
	   wants the full width rather than the flex row the sheet gives it. */
	body.woocommerce table.shop_table_responsive tr td.product-name,
	body.woocommerce-page table.shop_table_responsive tr td.product-name {
		display: block;
		padding-top: var(--k-2);
		text-align: left;
	}

	.k-summary {
		padding: var(--k-4);
	}

	.k-summary__row--total > strong {
		font-size: 1.375rem;
	}

	/* Remove measures 25px, which is fine with a mouse and short of a tap
	   target on a phone. It gains the height without gaining a visible box. */
	body.woocommerce .k-cartitem__remove,
	body.woocommerce-page .k-cartitem__remove {
		padding: 10px 0;
	}
}