/* Списки закладів: віджети на головній і «Відкрийте для себе» в сайдбарі статті.
   Токени — у site.css, картки .mt-card — у today.css. */

.mp-tone--restaurant { --mp-accent: #ba1a84; --mp-tint: rgba(186, 26, 132, 0.1); }
.mp-tone--cafe { --mp-accent: #b45309; --mp-tint: rgba(180, 83, 9, 0.11); }
.mp-tone--bar { --mp-accent: #4338ca; --mp-tint: rgba(67, 56, 202, 0.1); }
.mp-tone--fast { --mp-accent: #0f766e; --mp-tint: rgba(15, 118, 110, 0.11); }
.mp-tone--other { --mp-accent: #475569; --mp-tint: rgba(71, 85, 105, 0.1); }

.mp-mark {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: var(--mp-accent);
	background-color: var(--mp-tint);
}

.mp-mark--small {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	font-size: 13px;
}

.mp-rating {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-inline-start: auto;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: #7a4f00;
	background-color: #fff1cc;
	font-variant-numeric: tabular-nums;
}

.mpw-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpw-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding-block: 8px;
	border-top: 1px solid var(--clr-sub-border);
}

.mpw-rank {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--theme-color);
	background-color: rgba(186, 26, 132, 0.08);
	font-variant-numeric: tabular-nums;
}

.mpw-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mpw-name,
.mpw-meta {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mpw-name {
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	color: var(--clr-foreground);
	transition: color 150ms ease-out;
}

/* Увесь рядок клікабельний */
.mpw-name::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mpw-item:hover .mpw-name,
.mpw-name:focus-visible {
	color: var(--theme-color);
}

.mpw-meta {
	font-size: var(--font-size-xs);
	color: var(--text-color-light);
}

/* «Відкрийте для себе» в сайдбарі статті */

.merkury-discover {
	--mt-pad: 20px;
	margin-bottom: 30px;
}