/* Mise Pro — cart tip card. Uses theme CSS tokens where present, with neutral
   fallbacks so it reads well in any theme. AA contrast; touch targets >= 44px. */
.mts-msp-tip {
	margin: 0 0 18px;
	max-width: 420px;
}
.mts-msp-tip-card {
	border: 1px solid var( --hairline, #e6e0d6 );
	border-radius: var( --radius-lg, 14px );
	background: var( --bg-alt, var( --cream-2, #fbf7f0 ) );
	padding: 16px 18px;
	box-shadow: var( --shadow-sm, 0 1px 2px rgba( 0, 0, 0, 0.06 ) );
}
.mts-msp-tip-heading {
	margin: 0 0 12px;
	font-family: var( --font-heading, inherit );
	font-size: var( --fs-h5, 1.05rem );
	line-height: var( --lh-snug, 1.25 );
	color: var( --ink, #23180f );
}
.mts-msp-tip-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.mts-msp-tip-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 56px;
	padding: 0 14px;
	border: 1.5px solid var( --hairline-dark, #d8cebd );
	border-radius: var( --radius-pill, 999px );
	background: var( --bg-page, #fff );
	color: var( --ink-80, #3a2c1d );
	font-weight: 600;
	cursor: pointer;
	transition: border-color var( --dur-fast, 0.15s ) var( --ease-out, ease ), background-color var( --dur-fast, 0.15s ) var( --ease-out, ease );
}
.mts-msp-tip-pill:hover {
	border-color: var( --action-primary, #b3420b );
}
/* Visually-hidden radio; the label is the pill. */
.mts-msp-tip-pill input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.mts-msp-tip-pill input:checked + span {
	color: #fff;
}
.mts-msp-tip-pill:has( input:checked ) {
	background: var( --action-primary, #b3420b );
	border-color: var( --action-primary, #b3420b );
	color: #fff;
}
/* Fallback for engines without :has — keep the label readable. */
.mts-msp-tip-pill input:checked + span {
	font-weight: 700;
}
.mts-msp-tip-pill input:focus-visible + span {
	outline: var( --focus-ring, 2px solid #7a5cff );
	outline-offset: 3px;
	border-radius: var( --radius-pill, 999px );
}
.mts-msp-tip-custom-group {
	display: flex;
	align-items: center;
	margin-top: 10px;
	max-width: 180px;
	border: 1.5px solid var( --hairline-dark, #d8cebd );
	border-radius: var( --radius-md, 10px );
	background: var( --bg-page, #fff );
	overflow: hidden;
}
.mts-msp-tip-custom-group:focus-within {
	border-color: var( --action-primary, #b3420b );
}
.mts-msp-tip-currency {
	padding: 0 4px 0 12px;
	color: var( --ink-60, #6b5c4a );
	font-weight: 600;
}
.mts-msp-tip-custom {
	flex: 1;
	min-height: 44px;
	border: 0;
	background: transparent;
	padding: 0 12px 0 2px;
	font-size: var( --fs-body, 1rem );
	color: var( --ink, #23180f );
	width: 100%;
}
.mts-msp-tip-custom:focus {
	outline: none;
}
.mts-msp-tip-note {
	margin: 12px 0 0;
	color: var( --ink-60, #6b5c4a );
	font-size: var( --fs-small, 0.82rem );
	line-height: var( --lh-body, 1.5 );
}
.mts-msp-tip-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
}
.mts-msp-tip-apply {
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: var( --radius-md, 10px );
	background: var( --action-primary, #b3420b );
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.mts-msp-tip-apply:hover {
	background: var( --action-primary-hover, #97370a );
}
.mts-msp-tip-remove {
	border: 0;
	background: none;
	padding: 6px 2px;
	color: var( --ink-60, #6b5c4a );
	text-decoration: underline;
	font-size: var( --fs-small, 0.82rem );
	cursor: pointer;
}
.mts-msp-tip-remove:hover {
	color: var( --action-primary, #b3420b );
}
.mts-msp-tip.is-busy {
	opacity: 0.6;
	pointer-events: none;
}
@media ( max-width: 600px ) {
	.mts-msp-tip {
		max-width: none;
	}
	.mts-msp-tip-pill {
		flex: 1;
	}
}