/* ============================================================================
   Maktune v5 — cart and checkout
   ----------------------------------------------------------------------------
   Loads on /cart/ and /checkout/ only. NOT on My Account, which is still a v3
   screen and keeps checkout-account.css.

   This file styles WooCommerce Blocks markup. The blocks themselves are
   untouched — every class starting `wc-block-` is WooCommerce's, and the rule
   here is to restyle what it renders rather than to hide it and rebuild it.
   Anything hidden below is hidden because it is genuinely duplicated, never
   because it was inconvenient.

   COLOUR
   ------
     warm ivory      the page — the buying surface
     white           the cart lines, so product photography sits on white the way
                     it does on the product pages
     technical grey  the order summary and the review panel: secondary, calm,
                     visibly a different kind of surface from the form
     graphite        all primary text
     cobalt          the one primary action per screen
     orange          genuine savings, and nothing else

   Flat surfaces. One hairline where a boundary is real. No gradients, no
   shadows, no decorative badges — a checkout is not a place to be decorated.
   ========================================================================== */

.v5-purchase-doc { background: var(--v5-ivory); }

/* WooCommerce Blocks ships its own `--wc-*` custom properties and a handful of
   hard defaults. Rebinding them here is cheaper and far less brittle than
   out-specifying every rule that reads them. */
.v5-purchase-doc {
	--wc-blue: var(--v5-blue);
	--wc-red: #B42318;
	--wc-green: var(--mk-green);
	--wc-highlight: var(--v5-blue);
	--wc-content-bg: #fff;
	--wc-form-color-text: var(--v5-ink);
	--wc-form-border-color: #D8D3C9;
	/* --mk-green was derived against white; the summary and several notices sit
	   on warm grey, where it measures 4.3:1. Same re-derivation as the product
	   pages: 5.00 on ivory, 4.57 on stone, 5.44 on white. */
	--mk-green: #0F7A37;
	/*
	 * And the same trap again with orange.
	 *
	 * --mk-orange-ink (#C74B08) was derived as "coral dark enough for white text
	 * ON it" — 4.73:1 that way round. Used as TEXT on the summary's technical
	 * grey it measures 4.14:1, and axe caught the "You save" row on both pages.
	 * #B34206 is the same hue two steps down: 4.97 on the summary grey, 5.22 on
	 * ivory, 5.68 behind white text on the sale badge — better in both roles.
	 */
	--mk-orange-ink: #B34206;
}

/* ============================================================================
   1. Page frame
   ========================================================================== */

.v5-purchase { padding-block: clamp(20px, 2.4vw, 32px) clamp(40px, 5vw, 72px); }

.v5-purchase-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px 32px;
	margin-bottom: clamp(24px, 3vw, 38px);
}
.v5-purchase-head .v5-h2 { font-size: clamp(28px, 3.2vw, 42px); }

/* --------------------------------------------------------------- Steps ---- */
/*
 * Three plain markers, not pills. The v3 bar rendered them as filled blue
 * lozenges, which read as three buttons — on a page where exactly one thing is
 * clickable, that is the wrong signal.
 */
.v5-steps {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	color: var(--mk-muted-soft);
	flex-wrap: wrap;
}
.v5-steps li { display: flex; align-items: center; gap: 8px; }
.v5-steps li + li::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--v5-paper-3);
	margin-right: 10px;
}
.v5-steps-n {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	border-radius: var(--mk-r-circle);
	border: 1px solid var(--v5-paper-3);
	font-size: 11.5px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}
.v5-steps .is-on { color: var(--v5-ink); font-weight: 620; }
.v5-steps .is-on .v5-steps-n { background: var(--v5-blue); border-color: var(--v5-blue); color: #fff; }
.v5-steps .is-done { color: var(--v5-ink-soft); }
.v5-steps .is-done .v5-steps-n { border-color: var(--mk-green); color: var(--mk-green); }

/* ============================================================================
   2. Layout — cart and checkout share one two-column shape
   ========================================================================== */

/*
 * The grid goes on `.wc-block-components-sidebar-layout`, NOT on
 * `.wc-block-checkout`.
 *
 * The checkout page has TWO elements carrying `wc-block-checkout`: the outer
 * block wrapper the page content emits, and the React root inside it. Styling
 * the class made both a grid — the inner one landing in the outer one's first
 * track and then splitting THAT into 65/35 again. Measured: a 1192px page with a
 * 306px form and 500px of empty space beside it.
 *
 * `wc-block-components-sidebar-layout` is on exactly one element on each page —
 * it is the class WooCommerce itself uses for this layout — so it is the honest
 * target. The outer wrapper is reset to block so it can never compete.
 */
.v5-purchase-doc .wp-block-woocommerce-checkout,
.v5-purchase-doc .wp-block-woocommerce-cart { display: block; }

.v5-purchase-doc .wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: clamp(24px, 3vw, 52px);
	align-items: start;
}
/*
 * width, not just the grid track.
 *
 * WooCommerce sizes these as percentages of a flex row —
 * `.wc-block-components-sidebar-layout .wc-block-components-main { width: 65% }`
 * and `.wc-block-components-sidebar { width: 35% }`. Inside a grid track those
 * percentages become 65% and 35% OF THE TRACK: measured, a 400px sidebar column
 * containing a 140px panel with 260px of nothing beside it.
 */
.v5-purchase-doc .wc-block-cart__main,
.v5-purchase-doc .wc-block-checkout__main {
	min-width: 0;
	width: 100%;
	padding-right: 0;
}
.v5-purchase-doc .wc-block-cart__sidebar,
.v5-purchase-doc .wc-block-checkout__sidebar {
	min-width: 0;
	width: 100%;
	padding-left: 0;
	position: sticky;
	top: calc(var(--v5-hdr-h, 72px) + 20px);
}

/* The summary panel: technical grey, one hairline, square-ish corners. The v3
   version was a blue-tinted card with a 3px blue top border and a large radius,
   which made the numbers look like an advert. */
.v5-purchase-doc .wp-block-woocommerce-cart-order-summary-block,
.v5-purchase-doc .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--v5-mist);
	border: 1px solid #DFE2E5;
	border-radius: var(--mk-r-lg);
	padding: clamp(18px, 2vw, 26px);
}

/*
 * A totals block that renders nothing still occupies a row.
 *
 * The fee and discount blocks return null when there are no fees and no coupon,
 * but their wrapper survives with its padding and top border — leaving two empty
 * ruled bands between the subtotal and the shipping line that read as a
 * rendering fault.
 */
.v5-purchase-doc .wc-block-components-totals-wrapper:empty { display: none; padding: 0; border: 0; }
.v5-purchase-doc .wc-block-cart__sidebar { display: flex; flex-direction: column; gap: 14px; }

.v5-purchase-doc .wc-block-cart__totals-title,
.v5-purchase-doc .wc-block-components-checkout-order-summary__title {
	font-size: 12px !important;
	font-weight: 650 !important;
	letter-spacing: var(--v5-eyebrow-track);
	text-transform: uppercase;
	color: var(--mk-muted-soft) !important;
	padding: 0 0 14px !important;
	margin: 0;
}

/* ============================================================================
   3. Cart line items
   ========================================================================== */

/*
 * The white card is on the WRAPPER, not on the table.
 *
 * WooCommerce ships
 *   table.wc-block-cart-items, …td, …th { background: none !important }
 * so painting the table meant answering an !important with an !important, and
 * two stylesheets shouting at each other on every future release. The wrapper
 * carries the surface and the table stays transparent inside it, which is what
 * WooCommerce expects and is therefore the version that keeps working.
 */
.v5-purchase-doc .wc-block-cart__main {
	background: #fff;
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r-lg);
	overflow: hidden;
}
.v5-purchase-doc .wc-block-cart-items {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}
/* The "Product / Total" header row is two uppercase words above a table that is
   already self-evident. Removed from the visual layer only — it stays in the
   accessibility tree as the table's header row. */
.v5-purchase-doc .wc-block-cart-items__header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.v5-purchase-doc .wc-block-cart-items__row { border: 0; }
/*
 * WooCommerce's own rule for these cells is
 *   .wc-block-cart__main .wc-block-cart-items td  — (0,2,1)
 * so ours matches its shape and adds the page class: (0,3,1). Deliberately one
 * step above, not ten. Every override below that needed help is written the
 * same way, mirroring WooCommerce's chain rather than inventing a longer one.
 */
.v5-purchase-doc .wc-block-cart__main .wc-block-cart-items td {
	border-top: 1px solid var(--v5-paper-3);
	border-bottom: 0;
	padding: clamp(18px, 2vw, 24px) 0 clamp(18px, 2vw, 24px) 16px;
	vertical-align: top;
}
.v5-purchase-doc .wc-block-cart__main .wc-block-cart-items tr:first-child td { border-top: 0; }
.v5-purchase-doc .wc-block-cart__main .wc-block-cart-items { border-bottom: 0; }
.v5-purchase-doc .wc-block-cart__main .wc-block-cart-items td.wc-block-cart-item__image { padding-left: clamp(16px, 1.8vw, 22px); width: 116px; }
.v5-purchase-doc .wc-block-cart-item__image img {
	width: 100%;
	border-radius: var(--mk-r);
	background: #FDFDFC;
	border: 1px solid var(--v5-paper-3);
	padding: 8px;
}
.v5-purchase-doc table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	padding-right: clamp(16px, 1.8vw, 22px);
	font-size: 17px;
	text-align: right;
}

.v5-purchase-doc table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-size: 16px;
	font-weight: 620;
	letter-spacing: -0.014em;
	line-height: 1.32;
	color: var(--v5-ink);
	text-decoration: none;
	max-width: none;
}
.v5-purchase-doc .wc-block-components-product-name:hover { color: var(--v5-blue); }

/* The full short description on a cart line is 90 characters of marketing the
   customer read on the product page. The part number, the fitment and the stock
   state are what they need HERE, and they come from item_data. */
.v5-purchase-doc .wc-block-components-product-metadata__description { display: none; }

/* item_data rows: quiet, tabular, one line each. */
.v5-purchase-doc .wc-block-components-product-details {
	margin: 8px 0 0 !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 13px;
	line-height: 1.45;
}
.v5-purchase-doc .wc-block-components-product-details__name { color: var(--mk-muted-soft); font-weight: 500; }
.v5-purchase-doc .wc-block-components-product-details__value { color: var(--v5-ink-soft); }
.mk-ci-sku { font-family: var(--mk-font-mono); font-size: 12.5px; letter-spacing: .02em; }
/* WooCommerce separates item_data entries with a real
   `<span aria-hidden="true"> / </span>`, which only makes sense when they run
   inline. Stacked one per line, every row ended in a stray slash. It is already
   aria-hidden, so removing it costs a screen reader nothing. */
.v5-purchase-doc .wc-block-components-product-details span[aria-hidden="true"] { display: none; }
.mk-ci-fits { color: var(--v5-ink-soft); }
/* Deliberately not green, not bold and not a badge. The 10-year castor cover is
   a strong claim and the temptation is to decorate it; a cart line is where the
   customer is checking figures, and a warranty term is one more figure to read,
   not a reason to celebrate. */
.mk-ci-warranty { color: var(--v5-ink-soft); }
.mk-ci-stock { color: var(--mk-green); font-weight: 560; }
.mk-ci-stock--out { color: var(--mk-orange-ink); font-weight: 620; }

/* Prices. Struck-through regular price, then the saving in orange — the only
   place orange appears on either page. */
.v5-purchase-doc .wc-block-components-product-price__regular { color: var(--mk-muted-soft); font-weight: 500; }
.v5-purchase-doc .wc-block-components-product-price__value.is-discounted { font-weight: 680; }
.v5-purchase-doc .wc-block-components-sale-badge {
	background: var(--mk-orange-ink);
	color: #fff;
	border-radius: var(--mk-r-xs);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 4px 8px;
}
.v5-purchase-doc .wc-block-cart-item__total .wc-block-components-product-price { font-size: 17px; font-weight: 680; letter-spacing: -0.01em; }

/* ------------------------------------------------- Quantity and remove ---- */

.v5-purchase-doc .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r);
	background: #fff;
	overflow: hidden;
	max-width: none;
	width: auto;          /* Woo pins it to 107px */
	margin: 14px 0 0;
}
.v5-purchase-doc .wc-block-components-quantity-selector::after { display: none; }   /* Woo's own outline */
.v5-purchase-doc .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	width: 46px;
	min-height: 44px;
	border: 0;
	background: transparent;
	font-size: 16px;          /* 16px or iOS zooms the page on focus */
	font-weight: 620;
	color: var(--v5-ink);
	padding: 0;
}
.v5-purchase-doc .wc-block-components-quantity-selector__button {
	width: 42px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var(--v5-ink);
	font-size: 18px;
	opacity: 1;
	transition: background var(--mk-dur) var(--v5-ease);
}
.v5-purchase-doc .wc-block-components-quantity-selector__button:hover:not([disabled]) { background: var(--v5-paper-2); }
.v5-purchase-doc .wc-block-components-quantity-selector__button[disabled] { color: var(--mk-muted-soft); opacity: 1; }

.v5-purchase-doc table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	color: var(--mk-muted-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.v5-purchase-doc table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover { color: var(--mk-orange-ink); text-decoration: underline; }

/* ============================================================================
   4. Order summary rows
   ========================================================================== */

.v5-purchase-doc .wc-block-components-totals-wrapper { padding: 12px 0; border-top: 1px solid #DFE2E5; }
.v5-purchase-doc .wc-block-components-totals-wrapper:first-child { border-top: 0; padding-top: 0; }
.v5-purchase-doc .wc-block-components-totals-wrapper::after { display: none; }

.v5-purchase-doc .wc-block-components-totals-item,
.mk-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 5px 0;
	font-size: 14.5px;
	color: var(--v5-ink-soft);
}
.v5-purchase-doc .wc-block-components-totals-item__label { font-weight: 500; }
.v5-purchase-doc .wc-block-components-totals-item__value { font-weight: 620; color: var(--v5-ink); font-variant-numeric: tabular-nums; }

/* Our injected rows. */
.mk-summary-lines { display: block; }
.mk-row--regular .wc-block-components-totals-item__value { text-decoration: line-through; color: var(--mk-muted-soft); font-weight: 500; }
.mk-row--offer .wc-block-components-totals-item__label,
.mk-row--offer .wc-block-components-totals-item__value { color: var(--mk-orange-ink); font-weight: 650; }
.mk-row--subtotal .wc-block-components-totals-item__value { font-size: 15.5px; }
/* The tax row states a fact rather than a figure, so it must not look like one. */
.mk-row--note .wc-block-components-totals-item__value { font-weight: 500; color: var(--v5-ink-soft); font-variant-numeric: normal; }

.v5-purchase-doc .wc-block-components-totals-footer-item {
	border-top: 1px solid #CFD5DA;
	margin-top: 6px;
	padding-top: 16px;
	font-size: 15px;
}
.v5-purchase-doc .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 650; color: var(--v5-ink); }
.v5-purchase-doc .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: clamp(22px, 2.2vw, 26px);
	font-weight: 700;
	letter-spacing: -0.025em;
}
.v5-purchase-doc .wc-block-components-totals-footer-item__description { font-size: 12.5px; color: var(--mk-muted-soft); }

/* ------------------------------------------------------------- Coupon ---- */
/*
 * Available, quiet, closed. The brief asks that it not dominate, and a coupon
 * field left open on a store with no coupons is an invitation to go hunting for
 * a code that does not exist and abandon the cart looking for it.
 */
.v5-purchase-doc .wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-size: 13.5px !important;
	font-weight: 560 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--v5-ink-soft) !important;
	padding: 4px 0 !important;
}
.v5-purchase-doc .wc-block-components-totals-coupon .wc-block-components-panel__button:hover { color: var(--v5-blue) !important; }
.v5-purchase-doc .wc-block-components-totals-coupon__form { margin-top: 12px; }
.v5-purchase-doc .wc-block-components-totals-coupon__button { min-height: 44px; }

/* ------------------------------------------------- Proceed / place order -- */

.v5-purchase-doc .wc-block-cart__submit-container { padding: 0; }
.v5-purchase-doc .wc-block-cart__submit-button,
.v5-purchase-doc .wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 54px;
	border-radius: var(--mk-r) !important;
	background: var(--v5-blue) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 640 !important;
	letter-spacing: -0.005em;
	box-shadow: none !important;
	transition: background var(--mk-dur) var(--v5-ease), transform var(--mk-dur) var(--v5-ease);
}
.v5-purchase-doc .wc-block-cart__submit-button:hover,
.v5-purchase-doc .wc-block-components-checkout-place-order-button:hover { background: var(--mk-blue-dark) !important; transform: translateY(-1px); }

/* Woo prints its own accepted-methods strip under the cart button. The payment
   note below the block already says the same thing in a sentence. */
.v5-purchase-doc .wp-block-woocommerce-cart-accepted-payment-methods-block { display: none; }

/* ============================================================================
   5. Checkout form
   ========================================================================== */

.v5-purchase-doc .wc-block-checkout__form { max-width: none; }

.v5-purchase-doc .wc-block-components-checkout-step {
	border: 0;
	padding: 0 0 clamp(26px, 3vw, 38px);
	margin: 0 0 clamp(26px, 3vw, 38px);
	border-bottom: 1px solid var(--v5-paper-3);
}
.v5-purchase-doc .wc-block-components-checkout-step:last-of-type { border-bottom: 0; margin-bottom: 0; }
.v5-purchase-doc .wc-block-components-checkout-step__heading { margin: 0 0 6px; }
.v5-purchase-doc .wc-block-components-checkout-step__title {
	font-size: clamp(18px, 1.9vw, 22px) !important;
	font-weight: 650 !important;
	letter-spacing: -0.018em !important;
	text-transform: none !important;   /* v3 shouted these in tracked uppercase */
	color: var(--v5-ink) !important;
}
.v5-purchase-doc .wc-block-components-checkout-step__description { font-size: 14px; color: var(--v5-ink-soft); margin: 4px 0 0; }
.v5-purchase-doc .wc-block-components-checkout-step__content { margin-top: 18px; }

/* ------------------------------------------------------------- Fields ---- */

.v5-purchase-doc .wc-blocks-components-form .wc-block-components-text-input input[type=text],
.v5-purchase-doc .wc-blocks-components-form .wc-block-components-text-input input[type=email],
.v5-purchase-doc .wc-blocks-components-form .wc-block-components-text-input input[type=tel],
.v5-purchase-doc .wc-blocks-components-form .wc-block-components-text-input input[type=number],
.v5-purchase-doc .wc-block-components-text-input input,
.v5-purchase-doc .wc-blocks-components-select .wc-blocks-components-select__select,
.v5-purchase-doc .wc-block-components-textarea {
	min-height: 54px;              /* comfortable on a phone, per the brief */
	border: 1px solid #D8D3C9;
	border-radius: var(--mk-r);
	background: #fff;
	font-size: 16px;               /* 16px or iOS zooms on focus */
	color: var(--v5-ink);
	padding: 22px 14px 6px;
	box-shadow: none;
}
.v5-purchase-doc .wc-block-components-textarea { padding: 14px; min-height: 96px; }
.v5-purchase-doc .wc-block-components-text-input input:focus,
.v5-purchase-doc .wc-blocks-components-select__select:focus,
.v5-purchase-doc .wc-block-components-textarea:focus {
	outline: 2px solid var(--v5-blue);
	outline-offset: -2px;
	border-color: var(--v5-blue);
	box-shadow: none;
}
.v5-purchase-doc .wc-block-components-text-input label,
.v5-purchase-doc .wc-blocks-components-select__label { color: var(--mk-muted-soft); font-size: 15px; }
.v5-purchase-doc .wc-block-components-text-input.is-active label,
.v5-purchase-doc .wc-blocks-components-select__label { font-size: 12.5px; }

/* Required marker: unmistakable, and stated once in a legend rather than as a
   red asterisk repeated beside every label. */
.v5-purchase-doc .wc-block-components-checkout-step__heading-content { font-size: 13.5px; color: var(--mk-muted-soft); }

/* --------------------------------------------------------- Validation ---- */
/*
 * Next to the field, in words, and never covering it. WooCommerce already puts
 * the message inside the field's own wrapper and moves focus there — this only
 * changes how it reads.
 */
.v5-purchase-doc .wc-block-components-validation-error {
	margin-top: 7px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #B42318;
	display: flex;
	align-items: flex-start;
	gap: 7px;
}
.v5-purchase-doc .wc-block-components-validation-error::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	border-radius: 50%;
	background: #B42318;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1zm0 10.5a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1zm0 10.5a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.v5-purchase-doc .has-error input,
.v5-purchase-doc .has-error .wc-blocks-components-select__select { border-color: #B42318; }
.v5-purchase-doc .has-error input:focus { outline-color: #B42318; }

/* --------------------------------------- Shipping and payment options ---- */

.v5-purchase-doc .wc-block-components-radio-control__option,
.v5-purchase-doc .wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r);
	background: #fff;
	padding: 16px 18px 16px 46px;
	margin-bottom: 10px;
}
.v5-purchase-doc .wc-block-components-radio-control__option--checked-option-highlighted,
.v5-purchase-doc .wc-block-components-radio-control-accordion-option:has(input:checked) {
	border-color: var(--v5-blue);
	box-shadow: inset 0 0 0 1px var(--v5-blue);
	background: #fff;
}
.v5-purchase-doc .wc-block-components-radio-control__label { font-weight: 600; font-size: 15px; }
.v5-purchase-doc .wc-block-components-radio-control__secondary-label { font-weight: 620; color: var(--mk-green); }
.v5-purchase-doc .wc-block-components-radio-control__description { font-size: 13.5px; color: var(--v5-ink-soft); }

/* Order note stays secondary — a closed checkbox row, not an open textarea. */
.v5-purchase-doc .wp-block-woocommerce-checkout-order-note-block .wc-block-components-checkout-step { border-bottom: 0; padding-bottom: 0; }

/* ----------------------------------------------------- Terms and action -- */

.v5-purchase-doc .wc-block-checkout__terms {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--v5-ink-soft);
	margin: 0 0 18px;
}
.v5-purchase-doc .wc-block-checkout__terms a { color: var(--v5-blue); text-decoration: underline; text-underline-offset: 2px; }
.v5-purchase-doc .wc-block-checkout__actions { padding-top: 4px; }
.v5-purchase-doc .wc-block-checkout__actions_row { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.v5-purchase-doc .wc-block-components-checkout-return-to-cart-button {
	order: 2;
	align-self: center;
	font-size: 14px;
	color: var(--v5-ink-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.v5-purchase-doc .wc-block-components-checkout-return-to-cart-button:hover { color: var(--v5-blue); }

/* ------------------------------------------------- Checkout order summary - */

.v5-purchase-doc .wc-block-components-order-summary-item__image img {
	border-radius: var(--mk-r-sm);
	background: #fff;
	border: 1px solid #DFE2E5;
	padding: 5px;
}
.v5-purchase-doc .wc-block-components-order-summary-item__quantity {
	background: var(--v5-ink);
	color: #fff;
	border: 0;
	font-weight: 650;
}
.v5-purchase-doc .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description { display: none; }
.v5-purchase-doc .wc-block-components-order-summary__button-text { font-size: 14px; font-weight: 600; }

/* ============================================================================
   6. Notices
   ========================================================================== */

.v5-purchase-doc .wc-block-components-notice-banner {
	border-radius: var(--mk-r);
	border-width: 1px;
	font-size: 14.5px;
	align-items: flex-start;
}
.v5-purchase-doc .wc-block-components-notice-banner.is-error { border-color: #F0C2BD; background: #FEF4F3; color: #7A1B12; }
.v5-purchase-doc .wc-block-components-notice-banner.is-success { border-color: #B7E0C6; background: #F2FBF5; color: #0B5227; }
.v5-purchase-doc .wc-block-components-notice-banner.is-info { border-color: #C7D2F5; background: #F4F6FE; color: #1D2C6B; }

/* Loading state: the panel dims rather than being replaced by a skeleton that
   changes height and makes the page jump under the cursor. */
.v5-purchase-doc .wc-block-components-loading-mask__children { opacity: .45; transition: opacity .2s var(--v5-ease); }
.v5-purchase-doc .wc-block-components-loading-mask .components-spinner { color: var(--v5-blue); }

/* ============================================================================
   7. Empty cart
   ========================================================================== */

.mk-empty {
	max-width: 560px;
	margin: clamp(24px, 5vw, 56px) auto;
	padding: clamp(32px, 5vw, 56px) clamp(22px, 3vw, 40px);
	text-align: center;
	background: #fff;
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r-lg);
}
.mk-empty svg { color: var(--mk-muted-soft); }
.mk-empty h2 {
	font-size: clamp(23px, 2.4vw, 30px);
	font-weight: 700;
	letter-spacing: var(--v5-display-snug);
	margin: 16px 0 0;
	color: var(--v5-ink);
}
.mk-empty p { margin: 12px auto 0; max-width: 44ch; font-size: 15px; line-height: 1.6; color: var(--v5-ink-soft); }
.mk-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* WooCommerce's own empty-cart heading is replaced by ours, not shown above it. */
.v5-purchase-doc .wp-block-woocommerce-empty-cart-block > .wp-block-heading,
.v5-purchase-doc .wp-block-woocommerce-empty-cart-block > .wp-block-separator,
.v5-purchase-doc .wp-block-woocommerce-empty-cart-block > .wc-block-grid { display: none; }

/* ============================================================================
   8. Reassurance
   ========================================================================== */

.v5-purchase-assure { padding-block: 0 clamp(44px, 5vw, 76px); }
.v5-purchase-assure .v5-wrap { border-top: 1px solid var(--v5-paper-3); padding-top: clamp(26px, 3vw, 40px); }

.mk-assure-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.6vw, 40px);
}
.mk-assure-grid h3 { font-size: 15px; font-weight: 620; letter-spacing: -0.014em; margin: 0 0 8px; color: var(--v5-ink); }
.mk-assure-grid p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--v5-ink-soft); }
.mk-assure-grid strong { display: block; margin-top: 6px; color: var(--v5-ink); font-weight: 560; }
.mk-assure-grid a { color: var(--v5-blue); text-decoration: underline; text-underline-offset: 2px; }

.mk-paynote {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: clamp(22px, 2.6vw, 32px) 0 0;
	font-size: 14px;
	color: var(--v5-ink-soft);
}
.mk-paynote svg { flex: none; color: var(--mk-green); }

/* ============================================================================
   9. Breakpoints
   ----------------------------------------------------------------------------
   Mobile checkout is the primary case, not a squeezed desktop one.
   ========================================================================== */

@media (max-width: 1080px) {
	.v5-purchase-doc .wc-block-components-sidebar-layout { grid-template-columns: 1fr; }
	.v5-purchase-doc .wc-block-cart__sidebar,
	.v5-purchase-doc .wc-block-checkout__sidebar { position: static; }

	/*
	 * On checkout the summary moves ABOVE the form. WooCommerce collapses it
	 * into its own expandable panel at this width, so it costs one row and the
	 * customer can check what they are paying for before they start typing —
	 * rather than filling in six fields on faith and scrolling past the whole
	 * form to find the total.
	 */
	.v5-purchase-doc .wc-block-checkout__sidebar { order: -1; margin-bottom: 8px; }
	.v5-purchase-doc .wp-block-woocommerce-checkout-order-summary-block { padding: 16px 18px; }

	/* On the cart the summary stays BELOW the items: the items are the reason
	   you are on the page, and burying them under a total is backwards. */
	.v5-purchase-doc .wc-block-cart__sidebar { order: 0; }

	.mk-assure-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.v5-purchase-head { flex-direction: column; align-items: flex-start; gap: 14px; }

	/*
	 * The cart row on a phone: image, then name and controls, then the price
	 * top-right.
	 *
	 * WooCommerce's own mobile rules put BOTH the product cell and the total
	 * cell on `grid-row-start: 1` in a two-track `80px 132px` grid — so the
	 * price renders on top of the product name. Measured at 390px: two cells
	 * with identical rects, "₹12,999" struck through the middle of "Maktune
	 * Flex Ergonomic Office Chair".
	 *
	 * Every selector here mirrors WooCommerce's own chain
	 *   .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row …
	 * and adds the page class, because its mobile rules are (0,3,1)/(0,4,1) and
	 * a shorter selector loses to them.
	 */
	.v5-purchase-doc .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr) auto;
		gap: 0 14px;
		padding: 18px 16px;
		border-top: 1px solid var(--v5-paper-3);
	}
	.v5-purchase-doc .wc-block-cart table.wc-block-cart-items tr:first-child .wc-block-cart-items__row,
	.v5-purchase-doc .wc-block-cart table.wc-block-cart-items tr:first-child { border-top: 0; }
	.v5-purchase-doc .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td { border: 0; padding: 0; }
	.v5-purchase-doc .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-column: 1; grid-row: 1; width: auto; padding: 0;
	}
	.v5-purchase-doc .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2; grid-row: 1; justify-self: stretch;
	}
	.v5-purchase-doc .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 3; grid-row: 1;
		align-self: start;
		text-align: right;
		padding: 0;
		font-size: 16px;
		white-space: nowrap;
	}

	/* Quantity and remove side by side, both comfortably tappable. WooCommerce
	   hides the remove link entirely at this width and leaves only a small icon
	   inside the stepper; an explicit labelled control is the better target. */
	.v5-purchase-doc .wc-block-cart-item__quantity { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
	.v5-purchase-doc .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
		display: inline-block;
		margin-top: 12px;
	}
	.v5-purchase-doc .wc-block-cart__main .wc-block-components-quantity-selector { margin-top: 12px; }

	.mk-assure-grid { grid-template-columns: 1fr; gap: 22px; }
	.v5-steps { font-size: 12.5px; gap: 6px; }
	.v5-steps li + li::before { width: 12px; margin-right: 6px; }
}

@media (max-width: 480px) {
	/*
	 * Address fields go full width. WooCommerce pairs first/last name and
	 * city/state on one row, which at 320px clips each label mid-word.
	 */
	.v5-purchase-doc .wc-block-components-address-form .wc-block-components-text-input,
	.v5-purchase-doc .wc-block-components-address-form .wc-blocks-components-select { width: 100%; flex-basis: 100%; }
	.v5-purchase-doc .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 0 12px; padding: 16px 12px; }
}