/* ====================================================================
 * KENDA. Подгрузка товаров вместо страниц каталога.
 *
 * Разметку печатает mu-plugins/kenda-podgruzka.php, поведение podgruzka.js.
 * ==================================================================== */

.k-esche {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 30px 0 6px;
}

.k-esche__knopka {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	min-width: 220px;
	padding: 0 26px;
	border: 1px solid #e0e3e8;
	border-radius: 12px;
	background: #fff;
	color: #16181a;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.k-esche__knopka:visited {
	color: #16181a;
}

.k-esche__knopka:hover {
	border-color: #d81f2a;
	background: #d81f2a;
	color: #fff;
}

.k-esche__knopka:focus-visible {
	outline: 2px solid #d81f2a;
	outline-offset: 3px;
}

/* ⭐ Кружок появляется только на время загрузки: до этого кнопка обычная. */
.k-esche__krug {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: k-esche-vrashchenie .7s linear infinite;
}

.k-esche--gruzim .k-esche__krug {
	display: block;
}

.k-esche--gruzim .k-esche__knopka {
	pointer-events: none;
	opacity: .8;
}

@keyframes k-esche-vrashchenie {
	to { transform: rotate(360deg); }
}

/* ⚠️ Кружок не крутится, если человек просил меньше движения. Кнопка при этом
   всё равно показывает состояние: она гаснет и не нажимается. */
@media (prefers-reduced-motion: reduce) {
	.k-esche__krug {
		animation: none;
	}
	.k-esche__knopka {
		transition: none;
	}
}

.k-esche__schet {
	margin: 0;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.3;
}

.k-esche--vsyo .k-esche__schet {
	color: #8b929b;
}

/* ------------------------------------------------- штатная нумерация */
/* ⛔ Нумерацию НЕ удаляем из разметки: без скрипта каталог обязан листаться, а
   поисковики обязаны видеть ссылки на остальные страницы. Прячем её только
   тогда, когда скрипт ожил и повесил свой класс. */
.k-esche--zhivoy ~ .woocommerce-pagination,
.k-esche--zhivoy ~ nav.woocommerce-pagination {
	display: none;
}

@media (max-width: 690px) {
	.k-esche {
		margin-top: 22px;
	}

	.k-esche__knopka {
		width: 100%;
		min-width: 0;
	}
}