/* =============================================================
 * ASI — Cart "Vault" Skin
 *
 * Layered ON TOP of the existing cart styling in custom.css.
 * Loaded only on /cart/ via inc/cart/cart-page.php. Mirrors the
 * pay-for-order aesthetic so cart → checkout → pay reads as one
 * continuous flow:
 *
 *   • Hero "Subtotal" amount card + breathing brand halo
 *   • Refined proceed-to-checkout button (gradient + sheen + arrow)
 *   • Item-row tightening + pill freeship meter polish
 *
 * Uses CSS logical properties throughout for RTL parity.
 * ============================================================= */

/* Halo angle / strength — registered so we can interpolate the
   conic-gradient smoothly. Falls back to a static ring on browsers
   that don't support @property. */
@property --asi-cart-halo-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@property --asi-cart-halo-strength {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

.woocommerce-cart,
.woocommerce-checkout {
	--cv-blue:        #0155B7;
	--cv-blue-2:      #013A7A;
	--cv-green:       #72B94A;
	--cv-orange:      #F59E0B;
	--cv-ink:         #0F172A;
	--cv-ink-70:      #334155;
	--cv-ink-60:      #475569;
	--cv-ink-40:      #64748B;
	--cv-surface:     #FFFFFF;
	--cv-surface-2:   #F8FAFC;
	--cv-surface-3:   color-mix(in srgb, #0155B7 4%, #F8FAFC);
	--cv-border:      color-mix(in srgb, #0F172A 10%, transparent);
	--cv-border-2:    color-mix(in srgb, #0F172A 16%, transparent);
	--cv-radius:      18px;
	--cv-radius-sm:   12px;
	--cv-shadow-sm:   0 1px 2px color-mix(in srgb, #0F172A 6%, transparent);
	--cv-shadow:      0 1px 2px color-mix(in srgb, #0F172A 6%, transparent),
	                  0 12px 28px -14px color-mix(in srgb, #0F172A 22%, transparent);
	--cv-shadow-blue: 0 2px 6px color-mix(in srgb, #0F172A 8%, transparent),
	                  0 24px 48px -18px color-mix(in srgb, #0155B7 36%, transparent);
	--cv-ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Hero — subtotal card + halo ─────────────────────────────
   The existing .asi-page-hero shell stays. We refine the right
   side: the title-row becomes a true two-column flex on desktop,
   with our amount card occupying the inline-end column. */

:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero {
	background: linear-gradient(180deg, var(--cv-surface) 0%, var(--cv-surface-3) 100%);
	border-color: var(--cv-border);
	border-radius: var(--cv-radius);
	box-shadow: var(--cv-shadow);
	overflow: clip;
	isolation: isolate;
}

:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__title-row {
	align-items: end;
	justify-content: space-between;
	gap: 18px 32px;
}

:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__title-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
	flex: 1 1 auto;
}

/* Bigger, weightier title to feel like the pay-page amount label. */
:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero .wp-block-post-title {
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
}

/* Keep the meta line below the title on the start column */
:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__meta {
	margin-block-start: 6px;
	font-size: 0.875rem;
}

/* ── Amount card — the "wow" piece carried over from the pay page. */

:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount {
	position: relative;
	display: grid;
	gap: 4px;
	text-align: start;
	z-index: 1;
	flex-shrink: 0;
}

@media (min-width: 760px) {
	:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount {
		justify-items: end;
		text-align: end;
	}
}

:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-label {
	font-family: var(--asi-font-family);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cv-ink-40);
	font-weight: 700;
}

:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value {
	font-family: var(--asi-font-family);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, var(--cv-ink) 0%, color-mix(in srgb, var(--cv-blue) 28%, var(--cv-ink)) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value bdi {
	unicode-bidi: plaintext;
}

/* Arabic context — Tajawal has taller ascenders than Poppins, so the
 * tight `line-height: 1.05` clips the top of the digits ("2.000" looks
 * cropped at the top edge). Loosening line-height + a hair of leading
 * padding restores breathing room without growing the card noticeably.
 * Tabular numerals stay aligned because we don't change letter-spacing
 * or font-variant-numeric. */
[lang="ar"] :is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value,
:lang(ar) :is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value {
	line-height: 1.2;
	padding-block-start: 0.06em;
}

:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value .woocommerce-Price-currencySymbol {
	font-size: 0.9em;
	font-weight: 700;
	color: var(--cv-ink-60);
	-webkit-text-fill-color: currentColor;
	margin-inline: 0.18em;
	letter-spacing: 0;
}

.asi-currency-sar:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value .woocommerce-Price-currencySymbol {
	display: inline-block;
	inline-size: 0.72em;
	block-size: 0.82em;
	background: var(--cv-ink) !important;
	background-color: var(--cv-ink) !important;
	color: var(--cv-ink) !important;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1;
	margin-inline: 0.18em;
	overflow: hidden;
	text-indent: -999em;
	vertical-align: -0.06em;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: var(--cv-ink) !important;
	-webkit-mask: var(--asi-sar-symbol-mask) center / contain no-repeat;
	mask: var(--asi-sar-symbol-mask) center / contain no-repeat;
}

.asi-currency-sar:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value .asi-sar-money {
	color: var(--cv-ink) !important;
	-webkit-text-fill-color: var(--cv-ink) !important;
}

.asi-currency-sar:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value .asi-sar-symbol {
	background: var(--cv-ink) !important;
	background-color: var(--cv-ink) !important;
	color: var(--cv-ink) !important;
	-webkit-text-fill-color: var(--cv-ink) !important;
}

/* "Charged as X KD" disclosure — appears only when the displayed
   currency differs from the store base. Same vocabulary as the pay
   page so the two surfaces feel native to each other. */
:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-disclosure {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.78125rem;
	color: var(--cv-ink-60);
	background: color-mix(in srgb, var(--cv-blue) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--cv-blue) 18%, transparent);
	border-radius: 100px;
	padding: 3px 9px;
	font-weight: 500;
	cursor: help;
	font-variant-numeric: tabular-nums;
	margin-block-start: 4px;
	white-space: nowrap;
}

:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-disclosure svg {
	color: var(--cv-blue);
	flex-shrink: 0;
}

/* Soft conic ring that breathes behind the amount on the inline-end. */
:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-halo {
	position: absolute;
	inline-size: 280px;
	block-size: 280px;
	inset-block-start: 50%;
	inset-inline-end: -120px;
	transform: translateY(-50%);
	border-radius: 50%;
	background:
		conic-gradient(
			from var(--asi-cart-halo-angle),
			transparent 0deg,
			color-mix(in srgb, var(--cv-blue) 38%, transparent) 60deg,
			color-mix(in srgb, var(--cv-green) 28%, transparent) 180deg,
			color-mix(in srgb, var(--cv-blue) 38%, transparent) 300deg,
			transparent 360deg
		);
	filter: blur(48px);
	opacity: calc(0.55 * var(--asi-cart-halo-strength, 0));
	pointer-events: none;
	z-index: -1;
	animation: asi-cart-halo-spin 14s linear infinite,
	           asi-cart-halo-breathe 4.6s var(--cv-ease) infinite alternate;
}

@media (min-width: 760px) {
	:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-halo {
		inset-inline-end: -80px;
		inline-size: 340px;
		block-size: 340px;
	}
}

@keyframes asi-cart-halo-spin {
	to { --asi-cart-halo-angle: 360deg; }
}

@keyframes asi-cart-halo-breathe {
	from { --asi-cart-halo-strength: 0.7; }
	to   { --asi-cart-halo-strength: 1; }
}

/* Strengthen the gradient accent at the bottom of the hero so the
   visual weight matches the pay-page chassis. */
:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__accent {
	block-size: 3px;
	background: linear-gradient(135deg, var(--cv-blue) 0%, var(--cv-blue-2) 50%, color-mix(in srgb, var(--cv-green) 60%, var(--cv-blue)) 100%);
	opacity: 0.85;
}

/* Live count + amount feedback — when JS updates the meta or amount,
   add a tiny pulse so changes don't go unnoticed. */
:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value.is-changed,
:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__meta.is-changed {
	animation: asi-cart-amount-pulse 600ms var(--cv-ease);
}

@keyframes asi-cart-amount-pulse {
	0%   { transform: translateY(0);    filter: brightness(1); }
	35%  { transform: translateY(-2px); filter: brightness(1.1); }
	100% { transform: translateY(0);    filter: brightness(1); }
}

/* ─── Main card + sidebar — tighter borders + radius to match Vault */

.wc-block-cart .wc-block-cart__main {
	border-color: var(--cv-border);
	border-radius: var(--cv-radius);
	box-shadow: var(--cv-shadow-sm);
}

.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-totals-block {
	border-color: var(--cv-border);
	border-radius: var(--cv-radius);
	box-shadow: var(--cv-shadow);
}

/* ─── Proceed-to-checkout button — match asi-pay__btn ─────────── */

.wc-block-cart .wc-block-cart__submit-container {
	padding: 14px 18px 18px;
}

.wc-block-cart .wc-block-cart__submit-button {
	position: relative;
	overflow: hidden;
	min-block-size: 56px;
	padding: 14px 22px;
	border-radius: 14px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #FFFFFF;
	background: linear-gradient(135deg, var(--cv-blue) 0%, var(--cv-blue-2) 100%);
	box-shadow: var(--cv-shadow-blue);
	gap: 10px;
	text-shadow: 0 1px 0 color-mix(in srgb, var(--cv-blue-2) 60%, transparent);
	transition: transform 220ms var(--cv-ease), box-shadow 220ms var(--cv-ease), filter 220ms var(--cv-ease);
}

.wc-block-cart .wc-block-cart__submit-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg,
		transparent 30%,
		color-mix(in srgb, #FFFFFF 28%, transparent) 50%,
		transparent 70%);
	transform: translateX(-120%);
	transition: transform 700ms var(--cv-ease);
	pointer-events: none;
}

.wc-block-cart .wc-block-cart__submit-button::after {
	content: "";
	display: inline-block;
	inline-size: 16px;
	block-size: 16px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>') no-repeat center / contain;
	transition: transform 220ms var(--cv-ease);
}

[dir="rtl"] .wc-block-cart .wc-block-cart__submit-button::after {
	transform: scaleX(-1);
}

.wc-block-cart .wc-block-cart__submit-button:hover {
	transform: translateY(-1px);
	box-shadow:
		0 4px 8px color-mix(in srgb, #0F172A 12%, transparent),
		0 28px 56px -16px color-mix(in srgb, var(--cv-blue) 50%, transparent);
	filter: saturate(1.05);
}

.wc-block-cart .wc-block-cart__submit-button:hover::before {
	transform: translateX(120%);
}

[dir="rtl"] .wc-block-cart .wc-block-cart__submit-button:hover::before {
	transform: translateX(-120%);
}

.wc-block-cart .wc-block-cart__submit-button:hover::after {
	transform: translateX(2px);
}

[dir="rtl"] .wc-block-cart .wc-block-cart__submit-button:hover::after {
	transform: scaleX(-1) translateX(2px);
}

.wc-block-cart .wc-block-cart__submit-button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--cv-blue) 50%, transparent);
	outline-offset: 3px;
}

/* ─── Checkout end-stack: order-note → Place Order → terms ────
   Default WC source order is order-note → terms → actions, with
   each block wrapped in its own card, separated by the same gap as
   the rest of the checkout steps. That puts the terms text in a
   heavy white card above the button, and the ~14px gap between
   each block accumulates into a lot of empty rhythm at the end of
   the form.

   We use CSS `order` to flip terms below the actions row, drop the
   card chrome from the terms block (it's microcopy, not a step),
   and tighten the gap between the last three siblings. */

.wp-block-woocommerce-checkout-fields-block {
	display: flex !important;
	flex-direction: column !important;
}

/* CSS `order` only kicks in when the parent is actually flex, which
   we just forced above. Belt-and-braces with !important so the
   skeleton/loading styles don't undo this after hydration. */
.wp-block-woocommerce-checkout-fields-block > * {
	order: 0;
}

.wp-block-woocommerce-checkout-fields-block > .wp-block-woocommerce-checkout-order-note-block {
	order: 8 !important;
	margin-block-end: 4px;
}

.wp-block-woocommerce-checkout-fields-block > .wp-block-woocommerce-checkout-actions-block {
	order: 9 !important;
	margin-block-end: 0;
}

.wp-block-woocommerce-checkout-fields-block > .wp-block-woocommerce-checkout-terms-block {
	order: 10 !important;
}

/* The terms block itself — strip the card chrome and the inherited
   step margin so it sits as a single line of microcopy under the
   button. The WC React block injects its checkbox + label inside
   .wc-block-checkout__terms; we restyle that. */

.wc-block-checkout .wc-block-components-checkout-step.wp-block-woocommerce-checkout-terms-block,
.wp-block-woocommerce-checkout-terms-block {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 8px 12px 0 !important;
	margin-block: 0 !important;
}

.wc-block-checkout .wc-block-checkout__terms,
.wc-block-checkout .wc-block-components-checkout-step .wc-block-checkout__terms {
	margin: 0;
	padding: 0;
	font-size: 0.78125rem;
	line-height: 1.5;
	color: var(--cv-ink-40);
	text-align: center;
	font-weight: 400;
}

.wc-block-checkout .wc-block-checkout__terms a,
.wc-block-checkout .wc-block-checkout__terms a:visited {
	color: var(--cv-ink-60);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--cv-ink-40) 50%, transparent);
	text-underline-offset: 2px;
	transition: color 160ms var(--cv-ease), text-decoration-color 160ms var(--cv-ease);
}

.wc-block-checkout .wc-block-checkout__terms a:hover {
	color: var(--cv-blue);
	text-decoration-color: var(--cv-blue);
}

/* If the terms block renders the agreement copy as a heading, the
   site-wide rule at custom.css:9449 turns it into a bold 1rem
   step-heading. That selector is specificity 0,4,0 with
   !important, so we MUST match or beat it here. We chain the body
   class + checkout shell + fields-block + terms-block to land at
   0,5,0, then add !important. */
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block .wp-block-heading,
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block h2,
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block h3,
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block .wc-block-components-checkout-step__title {
	font-size: 0.78125rem !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	color: var(--cv-ink-40) !important;
	text-align: center !important;
	margin: 0 !important;
	display: block !important;
	font-family: var(--asi-font-family) !important;
	gap: 0 !important;
}

.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block .wp-block-heading::before,
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block .wc-block-components-checkout-step__title::before {
	display: none !important;
}

/* Catch-all for whatever element WC's React block uses to render
   the agreement copy (could be <p>, <span>, or .wc-block-checkout__terms-text).
   Same specificity bump applies. */
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block,
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block * {
	font-weight: 400 !important;
}

.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block .wc-block-components-checkout-step__heading-content,
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block p,
.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-fields-block .wp-block-woocommerce-checkout-terms-block .wc-block-checkout__terms-text {
	font-size: 0.78125rem !important;
	line-height: 1.5 !important;
	color: var(--cv-ink-40) !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	margin: 0 !important;
}

/* Order-note block — also drop the heavy card; keep it tight to
   the actions row below. */
.wp-block-woocommerce-checkout-fields-block > .wp-block-woocommerce-checkout-order-note-block .wc-block-components-checkout-step {
	padding-block: 14px;
}

/* Tighten the actions card so the gap between order note → button
   and the trailing terms feels intentional, not accidental. */
.wp-block-woocommerce-checkout-fields-block > .wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-step {
	padding-block: 16px;
	margin-block-end: 0;
}

.wc-block-checkout .wc-block-checkout__actions_row {
	padding-block-start: 0;
}

/* ─── Checkout: Place Order button — match asi-pay__btn ─────
   Layered background carries both the brand gradient and a moving
   sheen on a single element, so we don't fight the existing
   ::before padlock (which lives in custom.css). Trailing arrow is
   appended via ::after, mirroring the cart submit button. */

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	min-block-size: 56px;
	border-radius: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	gap: 10px;
	background:
		linear-gradient(120deg,
			transparent 30%,
			color-mix(in srgb, #FFFFFF 28%, transparent) 50%,
			transparent 70%) -110% 0 / 220% 100% no-repeat,
		linear-gradient(135deg, var(--cv-blue) 0%, var(--cv-blue-2) 100%);
	box-shadow: var(--cv-shadow-blue);
	text-shadow: 0 1px 0 color-mix(in srgb, var(--cv-blue-2) 60%, transparent);
	transition: background-position 700ms var(--cv-ease),
	            transform 220ms var(--cv-ease),
	            box-shadow 220ms var(--cv-ease),
	            filter 220ms var(--cv-ease);
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button::after {
	content: "";
	display: inline-block;
	inline-size: 16px;
	block-size: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") no-repeat center / contain;
	flex-shrink: 0;
	transition: transform 220ms var(--cv-ease);
}

[dir="rtl"] .wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button::after {
	transform: scaleX(-1);
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
	background-position: 110% 0, 0 0;
	transform: translateY(-1px);
	box-shadow:
		0 4px 8px color-mix(in srgb, #0F172A 12%, transparent),
		0 28px 56px -16px color-mix(in srgb, var(--cv-blue) 50%, transparent);
	filter: saturate(1.05);
}

[dir="rtl"] .wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
	background-position: -110% 0, 0 0;
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover::after {
	transform: translateX(2px);
}

[dir="rtl"] .wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover::after {
	transform: scaleX(-1) translateX(2px);
}

.wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--cv-blue) 50%, transparent);
	outline-offset: 3px;
}

/* Loading / busy state — hide the trailing arrow so the spinner
   inside the button reads cleanly without a competing icon. */
.wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button--loading::after,
.wc-block-checkout .wc-block-components-checkout-place-order-button[aria-busy="true"]::after {
	display: none;
}

/* Checkout sidebar totals card — same surface vocabulary as cart. */
.wc-block-checkout .wp-block-woocommerce-checkout-totals-block,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	border-radius: var(--cv-radius);
}

/* ─── Item rows — softer thumb backdrop + tighter type ─────── */

.wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__image {
	background: var(--cv-surface-2);
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-sm);
	min-inline-size: 72px;
	inline-size: 72px;
	block-size: 72px;
	padding: 6px;
}

.wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.wc-block-cart .wc-block-cart-items__row .wc-block-components-product-name {
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.wc-block-cart .wc-block-cart-items__row .wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--cv-ink);
}

.wc-block-cart .wc-block-cart-items__row .wc-block-components-product-price bdi {
	unicode-bidi: plaintext;
}

/* Quantity selector — pill aesthetic to match brand chips. */
.wc-block-cart .wc-block-cart-items__row .wc-block-components-quantity-selector {
	border-radius: 100px;
	border-color: var(--cv-border-2);
	background: var(--cv-surface);
}

.wc-block-cart .wc-block-cart-items__row .wc-block-components-quantity-selector:focus-within {
	border-color: var(--cv-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-blue) 14%, transparent);
}

.wc-block-cart .wc-block-cart-items__row .wc-block-components-quantity-selector__input {
	border-color: var(--cv-border);
	font-weight: 700;
	color: var(--cv-ink);
	font-variant-numeric: tabular-nums;
}

/* Remove button — small × chip on hover instead of icon-only. */
.wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__remove-link {
	font-size: 0.75rem !important;
	letter-spacing: 0.02em;
	border-radius: 100px;
	padding: 4px 10px;
	color: var(--cv-ink-40) !important;
	opacity: 0.85;
	transition: background 160ms var(--cv-ease), color 160ms var(--cv-ease), opacity 160ms var(--cv-ease);
	font-weight: 600;
	text-transform: lowercase;
	letter-spacing: 0.04em;
}

/* ─── Free-shipping nudge — tighter pill aesthetic ───────────── */

.wc-block-cart .asi-freeship {
	background: color-mix(in srgb, var(--cv-blue) 4%, var(--cv-surface-2));
	border: 1px solid color-mix(in srgb, var(--cv-blue) 14%, transparent);
	border-radius: var(--cv-radius-sm);
	padding: 12px 14px;
	margin-block: 12px 0;
}

.wc-block-cart .asi-freeship.is-qualified {
	background: color-mix(in srgb, var(--cv-green) 8%, var(--cv-surface-2));
	border-color: color-mix(in srgb, var(--cv-green) 30%, transparent);
}

.wc-block-cart .asi-freeship__text strong {
	color: var(--cv-blue);
	font-variant-numeric: tabular-nums;
}

.wc-block-cart .asi-freeship.is-qualified .asi-freeship__text {
	color: #1f6314;
	font-weight: 600;
}

.wc-block-cart .asi-freeship__bar {
	background: color-mix(in srgb, var(--cv-blue) 10%, transparent);
	border-radius: 100px;
	overflow: hidden;
}

.wc-block-cart .asi-freeship__fill {
	background: linear-gradient(90deg, var(--cv-blue) 0%, color-mix(in srgb, var(--cv-green) 50%, var(--cv-blue)) 100%);
	border-radius: 100px;
	transition: inline-size 480ms var(--cv-ease);
}

.wc-block-cart .asi-freeship.is-qualified .asi-freeship__fill {
	background: linear-gradient(90deg, var(--cv-green) 0%, color-mix(in srgb, var(--cv-blue) 30%, var(--cv-green)) 100%);
}

/* ─── Cart trust strip (under proceed) — match pay trust ──── */

.wc-block-cart .asi-cart-trust {
	border-top: 1px solid var(--cv-border);
	padding: 14px 18px;
}

.wc-block-cart .asi-cart-trust__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: center;
	font-size: 0.78125rem;
	color: var(--cv-ink-60);
	font-weight: 500;
}

.wc-block-cart .asi-cart-trust__list svg {
	color: var(--cv-green);
}

/* ─── Cart totals heading polish ─────────────────────────────── */

.wc-block-cart .wc-block-components-totals-wrapper {
	font-variant-numeric: tabular-nums;
}

.wc-block-cart .wc-block-cart__totals-title {
	font-family: var(--asi-font-family);
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--cv-ink);
}

/* ─── Empty cart — refresh hero card to Vault surfaces ───── */

.asi-empty-cart .asi-empty-cart__hero {
	background: linear-gradient(180deg, var(--cv-surface) 0%, var(--cv-surface-3) 100%);
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	box-shadow: var(--cv-shadow);
}

.asi-empty-cart .asi-empty-cart__cta--primary {
	background: linear-gradient(135deg, var(--cv-blue) 0%, var(--cv-blue-2) 100%);
	box-shadow: var(--cv-shadow-blue);
	border: 0;
	color: #fff;
}

.asi-empty-cart .asi-empty-cart__cta--primary:hover {
	transform: translateY(-1px);
	filter: saturate(1.05);
	box-shadow:
		0 4px 8px color-mix(in srgb, #0F172A 12%, transparent),
		0 28px 56px -16px color-mix(in srgb, var(--cv-blue) 50%, transparent);
}

/* ─── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-halo,
	.wc-block-cart .wc-block-cart__submit-button::before,
	:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-value.is-changed,
	:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__meta.is-changed,
	.wc-block-cart .asi-freeship__fill,
	.wc-block-checkout .wc-block-components-checkout-place-order-button {
		animation: none !important;
		transition: none !important;
	}
	:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-halo {
		opacity: 0;
	}
	.wc-block-cart .wc-block-cart__submit-button:hover,
	.wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
		transform: none !important;
	}
}

/* ─── Mobile fine-tune ─────────────────────────────────────── */

@media (max-width: 760px) {
	:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__title-row {
		flex-direction: column;
		align-items: stretch;
	}
	:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount {
		text-align: start;
		justify-items: start;
	}
	:is(.woocommerce-cart, .woocommerce-checkout) .asi-page-hero__amount-halo {
		inline-size: 220px;
		block-size: 220px;
		inset-inline-end: -100px;
	}
	.wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__image {
		min-inline-size: 60px;
		inline-size: 60px;
		block-size: 60px;
	}
}