/**
 * NOMA: кнопка с вертикальной линией под подписью (при hover — круглая точка ближе к кнопке).
 *
 * Разметка:
 * <button type="button" class="t-btnflex">
 *   <span class="t-btnflex__text">Текст</span>
 * </button>
 *
 * Классы можно комбинировать с другими (например .noma-uc__primary.t-btnflex).
 */

.t-btnflex {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
	/* место под вертикаль (top: 55px + высота 30px от .t-btnflex__text) */
	padding-bottom: calc(55px + 30px + 12px);
}

.t-btnflex__text {
	position: relative;
	display: inline-block;
}

.t-btnflex__text::after {
	content: "";
	position: absolute;
	top: 55px;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 30px;
	background-color: #848484;
	transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, border-radius 0.3s ease,
		background-color 0.3s ease;
	pointer-events: none !important;
}

.t-btnflex:hover .t-btnflex__text::after,
.t-btnflex:focus-visible .t-btnflex__text::after {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	top: 55px;
	background-color: #151515 !important;
}

/* Виджет «Единая корзина»: кнопки на всю ширину. */
.noma-uc .noma-uc__primary.t-btnflex {
	width: 100%;
}


@media (max-width: 768px) {
.t-btnflex__text::after {
	top: 50px;
}

.t-btnflex:hover .t-btnflex__text::after,
.t-btnflex:focus-visible .t-btnflex__text::after {
	top: 50px;
}
}