.commerce-auth-cart-experience {
	--commerce-auth-cart-accent: var(--ca-color-accent, var(--commerce-auth-accent, #b5842d));
	--commerce-auth-cart-success: var(--ca-color-success, var(--commerce-auth-success, #16803c));
	--commerce-auth-cart-border: var(--ca-color-border, var(--commerce-auth-border, #ded3c0));
	--commerce-auth-cart-surface: var(--ca-color-surface, var(--commerce-auth-surface, #fffdf8));
	margin: 0 0 16px;
	padding: 10px 10px 0;
	border: 1px solid var(--commerce-auth-cart-border);
	border-radius: 10px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--commerce-auth-cart-success) 6%, var(--commerce-auth-cart-surface)),
		color-mix(in srgb, var(--commerce-auth-cart-success) 2%, var(--commerce-auth-cart-surface))
	);
	color: var(--ca-color-text, var(--commerce-auth-heading, #221f1a));
	overflow: visible;
}

.commerce-auth-cart-experience__status {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 13px;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity 360ms ease,
		transform 360ms ease;
}

.commerce-auth-cart-experience.is-animation-complete .commerce-auth-cart-experience__status {
	opacity: 1;
	transform: translateY(0);
}

.commerce-auth-cart-experience__status strong {
	font-size: 14px;
	font-weight: 650;
}

.commerce-auth-cart-experience__status span {
	color: var(--ca-color-muted, var(--commerce-auth-body, #756f65));
	white-space: nowrap;
}

.commerce-auth-cart-experience__rail {
	position: relative;
	height: 9px;
	margin: 0 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--commerce-auth-cart-border) 72%, white);
	box-shadow: inset 0 1px 2px rgb(35 29 20 / 8%);
}

.commerce-auth-cart-experience__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	max-width: 100%;
	overflow: hidden;
	border-radius: inherit;
	background: linear-gradient(90deg, color-mix(in srgb, var(--commerce-auth-cart-success) 78%, white), var(--commerce-auth-cart-success));
}

.commerce-auth-cart-experience__fill::after {
	content: '';
	position: absolute;
	inset: -4px auto -4px 0;
	width: 38%;
	background: linear-gradient(105deg, transparent 0%, rgb(255 255 255 / 10%) 28%, rgb(255 255 255 / 78%) 50%, rgb(255 255 255 / 12%) 72%, transparent 100%);
	opacity: 0;
	transform: translateX(-145%) skewX(-14deg);
	pointer-events: none;
}

.commerce-auth-cart-experience.is-sweep-active .commerce-auth-cart-experience__fill::after {
	opacity: .78;
	animation: commerce-auth-cart-gloss-sweep 2s ease-in-out infinite;
}

.commerce-auth-cart-experience__marker {
	position: absolute;
	top: 50%;
	width: 20px;
	height: 20px;
	border: 2px solid var(--commerce-auth-cart-border);
	border-radius: 50%;
	background: var(--commerce-auth-cart-surface);
	box-shadow: 0 2px 7px rgb(35 29 20 / 10%);
	transform: translate(-50%, -50%);
	z-index: 2;
}

.commerce-auth-cart-experience__marker::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: inherit;
	background: transparent;
}

.commerce-auth-cart-experience__marker.is-unlocked {
	border-color: var(--commerce-auth-cart-success);
}

.commerce-auth-cart-experience__marker.is-unlocked::after {
	background: var(--commerce-auth-cart-success);
}

.commerce-auth-cart-experience__marker.is-start {
	width: 14px;
	height: 14px;
}

.commerce-auth-cart-experience__marker.is-start::after {
	inset: 3px;
}

.commerce-auth-cart-experience__milestones {
	position: relative;
	height: 42px;
	margin: 12px 7px 0;
}

.commerce-auth-cart-experience__milestone {
	position: absolute;
	top: 0;
	display: grid;
	gap: 1px;
	width: max-content;
	max-width: 130px;
	color: var(--ca-color-muted, var(--commerce-auth-body, #756f65));
	font-size: 11px;
	line-height: 1.25;
	text-align: center;
	transform: translateX(-50%);
}

.commerce-auth-cart-experience__milestone.is-start {
	text-align: left;
	transform: none;
}

.commerce-auth-cart-experience__milestone:last-child {
	text-align: right;
	transform: translateX(-100%);
}

.commerce-auth-cart-experience__milestone strong {
	font-size: 12px;
	font-weight: 650;
}

.commerce-auth-cart-experience__milestone.is-unlocked strong {
	color: var(--commerce-auth-cart-success);
}

.commerce-auth-cart-experience__marker.is-celebrating {
	animation: commerce-auth-milestone-acknowledgement 620ms var(--ca-ease-standard, cubic-bezier(.22, 1, .36, 1));
}

@keyframes commerce-auth-milestone-acknowledgement {
	0%, 100% {
		box-shadow: 0 2px 7px rgb(35 29 20 / 10%);
		transform: translate(-50%, -50%) scale(1);
	}
	42% {
		box-shadow:
			0 2px 7px rgb(35 29 20 / 10%),
			0 0 0 6px color-mix(in srgb, var(--commerce-auth-cart-success) 14%, transparent);
		transform: translate(-50%, -50%) scale(1.1);
	}
}

@keyframes commerce-auth-cart-gloss-sweep {
	0%, 18% { transform: translateX(-145%) skewX(-14deg); }
	62%, 100% { transform: translateX(365%) skewX(-14deg); }
}

.commerce-auth-cart-experience__confetti-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: var(--ca-toast-z-index, 9999);
}

/*
 * The Theme deliberately compacts cart cross-sells. The Plugin Cart Experience
 * restores the shared global product-card presentation without editing Theme
 * source, while retaining the cart's horizontal discovery row.
 */
#ca-app-root .ca-cart-page__extras .cross-sells ul.products {
	grid-auto-columns: minmax(15rem, 18rem);
	gap: var(--ca-space-4);
	padding: .55rem .3rem .65rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-padding-inline: .3rem;
}

#ca-app-root .ca-cart-page__extras .cross-sells h2 {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--ca-color-text);
	border: 0;
	font-family: var(--ca-font-heading);
	font-size: clamp(1.15rem, calc(1.4vw + .45rem), 1.65rem);
	font-weight: var(--ca-weight-heavy);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

#ca-app-root .ca-cart-page__extras .cross-sells h2 a {
	color: inherit;
	text-decoration: none;
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
	padding: 0;
	box-shadow: var(--ca-shadow-xs);
	transform: none;
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card:hover,
#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card:focus-within {
	box-shadow: var(--ca-shadow-sm);
	transform: translateY(-2px);
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__media {
	aspect-ratio: 1 / .9;
	padding: clamp(.7rem, 1.25vw, 1rem) clamp(.7rem, 1.25vw, 1rem) 0;
	border-radius: calc(var(--ca-radius-md) - var(--ca-border-width)) calc(var(--ca-radius-md) - var(--ca-border-width)) var(--ca-radius-sm) var(--ca-radius-sm);
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ca-space-2);
	padding: var(--ca-space-4);
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__rating,
#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__discount,
#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__stock {
	display: flex;
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__sale-badge {
	display: inline-flex;
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__title {
	display: block;
	grid-column: auto;
	overflow: visible;
	margin: 0;
	font-size: var(--ca-text-lg);
	line-height: 1.22;
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__price {
	grid-column: auto;
	align-self: auto;
	font-size: var(--ca-text-lg);
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__price del {
	display: inline;
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__button {
	grid-column: auto;
	min-height: var(--ca-control-height);
	margin-top: auto;
	padding: 0 var(--ca-space-4);
	color: var(--ca-button-primary-text) !important;
	background:
		var(--ca-button-primary-hover-layer) left center / 0% 100% no-repeat,
		var(--ca-button-primary-bg) !important;
	border-color: var(--ca-button-primary-border) !important;
	box-shadow: var(--ca-button-shadow);
	font-size: inherit;
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__button::before {
	display: none;
	content: none;
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__button:hover,
#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__button:focus {
	color: var(--ca-button-primary-text-hover) !important;
	background-size: 100% 100%, auto !important;
	border-color: var(--ca-button-primary-border-hover) !important;
	box-shadow: var(--ca-button-shadow-hover);
	transform: translateY(-.0625rem);
}

#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__button.ca-product-card__button--disabled,
#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__button.ca-product-card__button--disabled:hover,
#ca-app-root .ca-cart-page__extras .cross-sells .ca-product-card__button.ca-product-card__button--disabled:focus {
	color: var(--ca-button-disabled-text) !important;
	background: var(--ca-button-disabled-bg) !important;
	border-color: color-mix(in srgb, var(--ca-color-border) 84%, transparent) !important;
	box-shadow: none;
	transform: none;
}

@media (max-width: 749px) {
	.commerce-auth-cart-experience {
		margin-bottom: 12px;
	}

	.commerce-auth-cart-experience__status {
		gap: 5px;
		margin-bottom: 16px;
		font-size: clamp(9px, 2.65vw, 11px);
		white-space: nowrap;
	}

	.commerce-auth-cart-experience__status strong {
		font-size: inherit;
		white-space: nowrap;
	}

	.commerce-auth-cart-experience__rail {
		height: 6px;
	}

	.commerce-auth-cart-experience__milestone {
		max-width: 78px;
		font-size: 9px;
	}

	.commerce-auth-cart-experience__milestone strong {
		font-size: 10px;
	}

	#ca-app-root .ca-cart-page__extras .cross-sells ul.products {
		grid-auto-columns: minmax(13.25rem, 14.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.commerce-auth-cart-experience__status {
		opacity: 1;
		transform: none;
	}

	.commerce-auth-cart-experience__fill,
	.commerce-auth-cart-experience__fill::after,
	.commerce-auth-cart-experience__marker,
	.commerce-auth-cart-experience__status {
		animation: none !important;
		transition: none !important;
	}

	.commerce-auth-cart-experience__confetti-canvas {
		display: none !important;
	}
}
