/* SarvTheme checkout.css — built from modules. Edit modules + run npm run build */

/* --- checkout.css --- */
/**
 * Modern card-based checkout design + order summary.
 * Consumes SarvTheme design tokens.
 */

.woocommerce-checkout,
.st-checkout {
	--st-order-text: var(--sarv-color-text, #0f172a);
	--st-order-muted: var(--sarv-color-text-muted, #6b7280);
	--st-order-border: var(--sarv-color-border, #ededed);
	--st-order-bg: var(--sarv-color-bg, #ffffff);
	--st-order-radius: var(--sarv-radius-md, 12px);
	--st-checkout-card-radius: var(--sarv-radius-md, 12px);
}

/* ── Layout ──
 * Visual LTR columns so "Your order" sits on the physical left,
 * while billing + additional notes stack on the physical right.
 * Coupon sits above .st-checkout-layout (full width) — not inside the grid.
 */
.st-checkout-coupon {
	width: 100%;
	margin: 0 0 var(--sarv-space-xl);
	direction: rtl;
}

.st-checkout-layout {
	display: grid;
	grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
	gap: var(--sarv-space-2xl);
	align-items: start;
	direction: ltr;
}

.st-checkout-layout__form {
	display: contents;
}

.st-checkout-layout__fields,
.st-checkout-layout__summary {
	direction: rtl;
	min-width: 0;
}

.st-checkout-layout__summary {
	grid-column: 1;
	position: sticky;
	top: var(--sarv-space-xl);
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--st-order-border);
	border-radius: var(--st-order-radius);
	background: var(--st-order-bg);
	color: var(--st-order-text);
	box-shadow: var(--sarv-shadow-md, -6px 6px 74px rgba(0, 0, 0, 0.04));
}

.st-checkout-layout__fields {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: var(--sarv-space-lg);
}

/* Stack billing details + additional information vertically */
.st-checkout-layout__fields #customer_details.col2-set,
.st-checkout-layout__fields .col2-set {
	display: flex !important;
	flex-direction: column;
	gap: var(--sarv-space-lg);
	width: 100%;
	float: none;
}

.st-checkout-layout__fields .col2-set::before,
.st-checkout-layout__fields .col2-set::after {
	display: none !important;
	content: none !important;
}

.st-checkout-layout__fields .col2-set .col-1,
.st-checkout-layout__fields .col2-set .col-2 {
	float: none !important;
	width: 100% !important;
	max-width: 100%;
	margin: 0;
}

/* Coupon: WooCommerce default UI (toggle + form.checkout_coupon) */
.st-checkout-coupon .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--st-order-border, var(--sarv-color-border, #ededed));
	border-radius: var(--st-order-radius, var(--sarv-radius-md, 12px));
	background: var(--st-order-bg, var(--sarv-color-bg, #fff));
	color: var(--st-order-text, #0f172a);
	font-size: 0.875rem;
	line-height: 1.5;
}

.st-checkout-coupon .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
	color: var(--sarv-color-primary, #16a34a);
	font-weight: 600;
	text-decoration: none;
}

.st-checkout-coupon .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover {
	text-decoration: underline;
}

/* ── Cards ── */
.st-checkout-card {
	background: var(--st-order-bg);
	border: 1px solid var(--st-order-border);
	border-radius: var(--st-checkout-card-radius);
	padding: var(--sarv-space-lg) var(--sarv-space-xl);
	color: var(--st-order-text);
}

.st-checkout-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sarv-space-md);
	margin-bottom: var(--sarv-space-md);
}

.st-checkout-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--st-order-text);
}

.st-checkout-card__action {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--sarv-color-primary);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}

.st-checkout-card__action:hover {
	text-decoration: underline;
}

.st-checkout-card__empty {
	margin: 0;
	color: var(--st-order-muted);
	font-size: 0.875rem;
}

.st-checkout-summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sarv-space-sm);
}

.st-checkout-summary-list__item {
	display: flex;
	justify-content: space-between;
	gap: var(--sarv-space-md);
	font-size: 0.875rem;
}

.st-checkout-summary-list__label {
	color: var(--st-order-muted);
}

.st-checkout-summary-list__value {
	font-weight: 600;
	text-align: end;
}

.st-checkout-address__name {
	margin: 0 0 var(--sarv-space-xs);
	font-weight: 700;
}

.st-checkout-address__lines,
.st-checkout-address__postcode {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--st-order-text);
}

.st-checkout-address__postcode {
	margin-top: var(--sarv-space-xs);
	color: var(--st-order-muted);
}

.st-checkout-inline-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sarv-space-md);
}

/* ── Option radio cards ── */
.st-checkout-options {
	list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: var(--sarv-space-sm);
	border: 0 !important;
}

.st-checkout-option {
	margin: 0;
	padding: 0;
	border: 1px solid var(--st-order-border);
	border-radius: var(--sarv-radius-sm);
	background: var(--sarv-color-bg-muted, #f8f8f8);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.st-checkout-option.is-selected,
.st-checkout-option:has(.st-checkout-option__input:checked) {
	border-color: var(--sarv-color-primary);
	background: color-mix(in srgb, var(--sarv-color-primary) 8%, var(--st-order-bg));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--sarv-color-primary) 35%, transparent);
}

.st-checkout-option__label {
	display: flex;
	align-items: flex-start;
	gap: var(--sarv-space-md);
	padding: var(--sarv-space-md) var(--sarv-space-lg);
	cursor: pointer;
	margin: 0;
	width: 100%;
}

.st-checkout-option__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.st-checkout-option__radio {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	border: 2px solid var(--st-order-border);
	border-radius: 50%;
	background: var(--st-order-bg);
	position: relative;
}

.st-checkout-option.is-selected .st-checkout-option__radio,
.st-checkout-option:has(.st-checkout-option__input:checked) .st-checkout-option__radio {
	border-color: var(--sarv-color-primary);
}

.st-checkout-option.is-selected .st-checkout-option__radio::after,
.st-checkout-option:has(.st-checkout-option__input:checked) .st-checkout-option__radio::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--sarv-color-primary);
}

.st-checkout-option__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.st-checkout-option__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sarv-space-sm);
}

.st-checkout-option__title {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--st-order-text);
}

.st-checkout-option__price,
.st-checkout-option__icon {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--st-order-text);
}

.st-checkout-option__desc,
.st-checkout-option__meta {
	font-size: 0.8125rem;
	color: var(--st-order-muted);
	line-height: 1.5;
}

.st-checkout-option .payment_box {
	margin: 0 var(--sarv-space-lg) var(--sarv-space-md);
	padding: var(--sarv-space-md);
	border-radius: var(--sarv-radius-sm);
	background: var(--st-order-bg);
	font-size: 0.8125rem;
	color: var(--st-order-muted);
}

/* Native WC fields — present for validation, visually hidden */
.st-checkout-native-fields {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Guest customer fields stay visible inside card */
.st-checkout-card__fields .form-row {
	margin-bottom: var(--sarv-space-md);
}

.st-checkout-card__fields .form-row label,
.st-checkout-address-modal .form-row label {
	color: var(--st-order-text);
	font-weight: 600;
	font-size: 0.875rem;
}

.st-checkout-card__fields .input-text,
.st-checkout-card__fields select,
.st-checkout-address-modal .input-text,
.st-checkout-address-modal select,
.st-checkout-address-modal textarea {
	border: 1px solid var(--st-order-border);
	border-radius: var(--sarv-radius-sm);
	background: var(--st-order-bg);
	color: var(--st-order-text);
	padding: 0.7rem 0.85rem;
	width: 100%;
}

/* ── Order summary ── */
.st-order-summary__heading,
#order_review_heading.st-order-summary__heading {
	margin: 0;
	padding: 1rem 1.15rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--st-order-text);
	border-bottom: 1px solid var(--st-order-border);
	background: var(--sarv-color-bg-muted, #f8f8f8);
}

.st-order-summary #order_review,
.st-order-summary .woocommerce-checkout-review-order {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.st-order-summary .st-checkout-card--payment {
	margin: 0;
	border: 0;
	border-radius: 0;
	border-top: 1px solid var(--st-order-border);
	box-shadow: none;
}

/* Div-based review order (replaces table markup) */
.st-order-summary .woocommerce-checkout-review-order-table,
.st-order-summary .st-review-order {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--st-order-text);
}

.st-order-summary .st-review-order__items,
.st-order-summary .st-review-order__totals {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.st-order-summary .st-review-order__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sarv-space-md);
	margin: 0;
	padding: 1rem 1.15rem;
	border-bottom: 1px solid var(--st-order-border);
	font-size: 0.875rem;
	line-height: 1.5;
}

.st-order-summary .st-review-order__items .st-review-order__row:last-child {
	border-bottom: 0;
}

.st-order-summary .st-review-order__totals {
	border-top: 1px solid var(--st-order-border);
}

.st-order-summary .st-review-order__label {
	flex: 1 1 auto;
	min-width: 0;
	text-align: start;
	color: var(--st-order-muted);
	font-weight: 600;
}

.st-order-summary .st-review-order__value {
	flex: 0 0 auto;
	text-align: end;
	white-space: nowrap;
	color: var(--st-order-text);
	font-weight: 500;
}

.st-order-summary .st-review-order__row.cart_item .st-review-order__label,
.st-order-summary .st-review-order__row.cart_item .product-name {
	font-weight: 600;
	color: var(--st-order-text);
	white-space: normal;
}

.st-order-summary .st-review-order__row.cart_item .product-quantity {
	display: inline-block;
	margin-inline-start: 0.25rem;
	color: var(--st-order-muted);
	font-weight: 500;
}

.st-order-summary .st-review-order__row.cart-subtotal .st-review-order__label,
.st-order-summary .st-review-order__row.cart-discount .st-review-order__label,
.st-order-summary .st-review-order__row.shipping .st-review-order__label,
.st-order-summary .st-review-order__row.fee .st-review-order__label,
.st-order-summary .st-review-order__row.tax-rate .st-review-order__label,
.st-order-summary .st-review-order__row.tax-total .st-review-order__label {
	font-weight: 500;
}

.st-order-summary .st-review-order__row.order-total {
	align-items: center;
	background: color-mix(in srgb, var(--sarv-color-primary, #16a34a) 6%, var(--st-order-bg));
	border-bottom: 0;
}

.st-order-summary .st-review-order__row.order-total .st-review-order__label,
.st-order-summary .st-review-order__row.order-total .st-review-order__value {
	padding-block: 0.1rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--st-order-text);
}

.st-order-summary .st-review-order__row.cart-discount .st-review-order__value,
.st-order-summary .st-review-order__row.cart-discount .woocommerce-remove-coupon {
	color: var(--sarv-color-primary, #16a34a);
}

.st-order-summary .woocommerce-remove-coupon {
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.st-order-summary .woocommerce-remove-coupon:hover {
	text-decoration: underline;
}

.st-order-summary .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	text-align: end;
}

.st-order-summary .woocommerce-shipping-methods li {
	margin: 0;
	padding: 0;
}

.st-order-summary .woocommerce-shipping-methods label {
	cursor: pointer;
	font-weight: 600;
	color: var(--st-order-text);
	white-space: normal;
}

.st-order-summary .woocommerce-Price-amount {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 0.35rem;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.st-order-summary .woocommerce-Price-currencySymbol {
	display: inline;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: normal;
	line-height: inherit;
}

/* Payment + place order inside summary card */
.st-order-summary #payment {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--st-order-border);
	border-radius: 0 !important;
	background: transparent !important;
}

.st-order-summary #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0.85rem 1.15rem;
	border: 0;
	border-bottom: 1px solid var(--st-order-border);
}

.st-order-summary #payment ul.payment_methods li {
	margin: 0;
	padding: 0.35rem 0;
	line-height: 1.5;
	font-size: 0.875rem;
}

.st-order-summary #payment ul.payment_methods li label {
	cursor: pointer;
	font-weight: 600;
	color: var(--st-order-text);
}

.st-order-summary #payment div.payment_box {
	margin: 0.5rem 0 0.35rem;
	padding: 0.75rem 0.85rem;
	border-radius: var(--sarv-radius-sm, 6px);
	background: var(--sarv-color-bg-muted, #f8f8f8);
	color: var(--st-order-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.st-order-summary #payment div.payment_box::before {
	display: none;
}

.st-order-summary #payment .place-order,
.st-order-summary .st-checkout-place-order {
	margin: 0;
	padding: 1rem 1.15rem 1.15rem;
}

.st-order-summary #payment .form-row {
	margin: 0;
	padding: 0;
}

.st-order-summary #payment .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 0.85rem;
	font-size: 0.8125rem;
	color: var(--st-order-muted);
	line-height: 1.6;
}

.st-order-summary #payment .woocommerce-privacy-policy-text p,
.st-order-summary #payment .woocommerce-terms-and-conditions-checkbox-text {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.st-checkout-place-order__btn,
.st-checkout-place-order #place_order,
.st-order-summary #place_order,
.st-order-summary .place-order .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: var(--sarv-radius-md, 12px);
	background: var(--sarv-color-primary);
	color: var(--sarv-color-on-primary);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.3;
	padding: 0.9rem 1.25rem;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.st-checkout-place-order__btn:hover,
.st-checkout-place-order #place_order:hover,
.st-order-summary #place_order:hover,
.st-order-summary .place-order .button:hover {
	filter: brightness(0.96);
	color: var(--sarv-color-on-primary);
}

.st-checkout-place-order__btn:disabled,
.st-order-summary #place_order:disabled,
.st-order-summary .place-order .button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	filter: none;
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: none !important;
	border-radius: 0 !important;
}

.place-order .button {
	width: 100%;
}

@media (max-width: 991.98px) {
	.st-checkout-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sarv-space-xl);
	}

	.st-checkout-layout__summary,
	.st-checkout-layout__fields {
		grid-column: 1;
	}

	.st-checkout-layout__summary {
		position: static;
	}

	.st-checkout-coupon {
		margin-bottom: var(--sarv-space-lg);
	}

	.st-checkout-inline-fields {
		grid-template-columns: 1fr;
	}
}

/* --- cart-stepper.css --- */
/**
 * Cart / Checkout Stepper — visual styles for rendered markup:
 * .st-cart-stepper-wrap > .container > nav.st-cart-stepper > ol.st-cart-stepper__list > li
 */

.st-cart-stepper-wrap {
	--st-stepper-size: 3rem;
	--st-stepper-gap: 0.55rem;
	--st-stepper-line: 3px;
	--st-stepper-ink: var(--sarv-color-text, #111827);
	--st-stepper-muted: var(--sarv-color-text-muted, #6b7280);
	--st-stepper-border: var(--sarv-color-border, #e5e7eb);
	--st-stepper-bg: var(--sarv-color-bg, #ffffff);
	--st-stepper-primary: var(--sarv-color-primary, #16a34a);
	--st-stepper-on-primary: var(--sarv-color-on-primary, #ffffff);
	width: 100%;
	padding: 1.5rem 0 1.25rem;
	margin: 0;
	background: transparent;
}

.st-cart-stepper-wrap .container {
	width: 100%;
}

.st-cart-stepper {
	display: block;
	width: 100%;
	color: var(--st-stepper-ink);
}

.st-cart-stepper ol.st-cart-stepper__list,
.st-cart-stepper__list {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	justify-content: stretch !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
}

.st-cart-stepper__list > li,
.st-cart-stepper__step {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	position: relative;
	text-align: center;
}

.st-cart-stepper__list > li::marker,
.st-cart-stepper__list > li::before,
.st-cart-stepper__list > li::after {
	content: none !important;
	display: none !important;
}

.st-cart-stepper__link,
a.st-cart-stepper__link,
span.st-cart-stepper__link {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: var(--st-stepper-gap) !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-decoration: none !important;
	color: inherit !important;
	cursor: default;
}

a.st-cart-stepper__link {
	cursor: pointer;
}

a.st-cart-stepper__link:hover,
a.st-cart-stepper__link:focus,
a.st-cart-stepper__link:focus-visible {
	text-decoration: none !important;
	outline: none;
}

/* Marker + connecting lines row */
.st-cart-stepper__rail {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	min-height: var(--st-stepper-size);
}

.st-cart-stepper__line {
	flex: 1 1 auto;
	height: var(--st-stepper-line);
	min-width: 0.5rem;
	background: var(--st-stepper-border);
	border-radius: 999px;
}

.st-cart-stepper__line.is-hidden {
	visibility: hidden;
	background: transparent !important;
}

.st-cart-stepper__marker {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: grid !important;
	place-items: center;
	width: var(--st-stepper-size);
	height: var(--st-stepper-size);
	margin-inline: 0.35rem;
	border-radius: 999px;
	border: 2px solid var(--st-stepper-border);
	background: var(--st-stepper-bg);
	color: var(--st-stepper-muted);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.st-cart-stepper__icon,
.st-cart-stepper__check {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	line-height: 0;
	width: 1.35rem;
	height: 1.35rem;
}

.st-cart-stepper__check {
	display: none;
}

.st-cart-stepper__icon-svg,
.st-cart-stepper__marker .st-cart-stepper__icon-svg,
.st-cart-stepper__marker .st-menu-icon__svg,
.st-cart-stepper__marker svg {
	width: 1.25rem !important;
	height: 1.25rem !important;
	max-width: 1.25rem !important;
	max-height: 1.25rem !important;
	display: block !important;
	stroke: currentColor;
	color: inherit;
}

.st-cart-stepper__num {
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
}

.st-cart-stepper__title {
	display: block;
	padding-inline: 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--st-stepper-muted);
	text-align: center;
	word-break: break-word;
}

/* Completed */
.st-cart-stepper__step[data-st-step-status="completed"] .st-cart-stepper__marker,
.st-cart-stepper__step--status-completed .st-cart-stepper__marker {
	border-color: var(--st-stepper-primary);
	background: color-mix(in srgb, var(--st-stepper-primary) 12%, var(--st-stepper-bg));
	color: var(--st-stepper-primary);
	box-shadow: none;
}

.st-cart-stepper__step[data-st-step-status="completed"] .st-cart-stepper__icon,
.st-cart-stepper__step--status-completed .st-cart-stepper__icon {
	display: none;
}

.st-cart-stepper__step[data-st-step-status="completed"] .st-cart-stepper__check,
.st-cart-stepper__step--status-completed .st-cart-stepper__check {
	display: grid;
}

.st-cart-stepper__step[data-st-step-status="completed"] .st-cart-stepper__title,
.st-cart-stepper__step--status-completed .st-cart-stepper__title {
	color: var(--st-stepper-ink);
}

.st-cart-stepper__step[data-st-step-status="completed"] .st-cart-stepper__line--after,
.st-cart-stepper__step--status-completed .st-cart-stepper__line--after {
	background: var(--st-stepper-primary);
}

.st-cart-stepper__step[data-st-step-status="completed"] + .st-cart-stepper__step .st-cart-stepper__line--before,
.st-cart-stepper__step--status-completed + .st-cart-stepper__step .st-cart-stepper__line--before {
	background: var(--st-stepper-primary);
}

/* Active */
.st-cart-stepper__step[data-st-step-status="active"] .st-cart-stepper__marker,
.st-cart-stepper__step--status-active .st-cart-stepper__marker {
	border-color: var(--st-stepper-primary);
	background: var(--st-stepper-primary);
	color: var(--st-stepper-on-primary);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--st-stepper-primary) 18%, transparent);
}

.st-cart-stepper__step[data-st-step-status="active"] .st-cart-stepper__title,
.st-cart-stepper__step--status-active .st-cart-stepper__title {
	color: var(--st-stepper-ink);
	font-weight: 700;
}

.st-cart-stepper__step[data-st-step-status="active"] .st-cart-stepper__line--before,
.st-cart-stepper__step--status-active .st-cart-stepper__line--before {
	background: var(--st-stepper-primary);
}

a.st-cart-stepper__link:hover .st-cart-stepper__title {
	color: var(--st-stepper-primary);
}

/* Upcoming — not yet reached */
.st-cart-stepper__step[data-st-step-status="upcoming"] .st-cart-stepper__marker,
.st-cart-stepper__step--status-upcoming .st-cart-stepper__marker {
	border-color: var(--st-stepper-border);
	background: color-mix(in srgb, var(--st-stepper-border) 35%, var(--st-stepper-bg));
	color: color-mix(in srgb, var(--st-stepper-muted) 85%, transparent);
	box-shadow: none;
	opacity: 0.92;
}

.st-cart-stepper__step[data-st-step-status="upcoming"] .st-cart-stepper__icon,
.st-cart-stepper__step--status-upcoming .st-cart-stepper__icon {
	display: grid;
}

.st-cart-stepper__step[data-st-step-status="upcoming"] .st-cart-stepper__check,
.st-cart-stepper__step--status-upcoming .st-cart-stepper__check {
	display: none;
}

.st-cart-stepper__step[data-st-step-status="upcoming"] .st-cart-stepper__title,
.st-cart-stepper__step--status-upcoming .st-cart-stepper__title {
	color: var(--st-stepper-muted);
	font-weight: 500;
	opacity: 0.85;
}

.st-cart-stepper__step[data-st-step-status="upcoming"] .st-cart-stepper__line--before,
.st-cart-stepper__step[data-st-step-status="upcoming"] .st-cart-stepper__line--after,
.st-cart-stepper__step--status-upcoming .st-cart-stepper__line--before,
.st-cart-stepper__step--status-upcoming .st-cart-stepper__line--after {
	background: var(--st-stepper-border);
}

.st-cart-stepper__step[data-st-step-status="upcoming"] span.st-cart-stepper__link,
.st-cart-stepper__step--status-upcoming span.st-cart-stepper__link {
	cursor: default;
	pointer-events: none;
}

.st-cart-stepper__step[data-st-step-status="upcoming"] .st-cart-stepper__marker svg,
.st-cart-stepper__step--status-upcoming .st-cart-stepper__marker svg {
	opacity: 0.72;
}

/* Mobile */
@media (max-width: 767.98px) {
	.st-cart-stepper-wrap {
		--st-stepper-size: 2.5rem;
		padding: 1rem 0;
	}

	.st-cart-stepper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.st-cart-stepper::-webkit-scrollbar {
		display: none;
	}

	.st-cart-stepper ol.st-cart-stepper__list,
	.st-cart-stepper__list {
		min-width: max-content;
		width: max-content !important;
	}

	.st-cart-stepper__list > li,
	.st-cart-stepper__step {
		flex: 0 0 5.25rem !important;
		width: 5.25rem !important;
	}

	.st-cart-stepper__title {
		font-size: 0.7rem;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.st-cart-stepper__icon-svg,
	.st-cart-stepper__marker .st-cart-stepper__icon-svg,
	.st-cart-stepper__marker .st-menu-icon__svg,
	.st-cart-stepper__marker svg {
		width: 1.05rem !important;
		height: 1.05rem !important;
		max-width: 1.05rem !important;
		max-height: 1.05rem !important;
	}
}