.tkl-fulfillment {
	margin-top: 1.5rem;
}

.tkl-fulfillment__card {
	padding: 1.15rem 1.2rem 1.25rem;
	border: 1px solid rgba(42, 45, 48, 0.12);
	border-radius: 16px;
	background: linear-gradient(160deg, #f7f8f5 0%, #eef1ec 100%);
}

.tkl-fulfillment__title {
	margin: 0 0 0.75rem;
	font-family: Syne, Outfit, system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 650;
	color: #1f2421;
}

.tkl-fulfillment__title--slot {
	margin-top: 1.15rem;
}

.tkl-fulfillment__modes,
.tkl-fulfillment__slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.tkl-fulfillment__mode,
.tkl-fulfillment__slot {
	appearance: none;
	border: 1px solid rgba(31, 36, 33, 0.18);
	background: #fff;
	color: #1f2421;
	border-radius: 999px;
	padding: 0.65rem 1rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tkl-fulfillment__mode:hover,
.tkl-fulfillment__slot:hover {
	transform: translateY(-1px);
	border-color: rgba(31, 36, 33, 0.35);
}

.tkl-fulfillment__mode.is-active,
.tkl-fulfillment__slot.is-active {
	background: #1f2421;
	border-color: #1f2421;
	color: #f4f7f2;
}

.tkl-fulfillment__slots {
	max-height: 12rem;
	overflow: auto;
	padding-right: 0.15rem;
}

.tkl-fulfillment__empty {
	margin: 0;
	color: #5c6560;
	font-size: 0.95rem;
}