/**
 * Shared pagination presentation.
 *
 * The final horizontal correction is supplied by pagination.js because some
 * archives render pagination inside a results column beside a filter sidebar.
 */
html body :is(
	.woocommerce-pagination,
	.jas-pagination,
	.navigation.pagination,
	.ft-pager
) {
	box-sizing: border-box !important;
	clear: both !important;
	float: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: none !important;
	margin: 36px auto 24px !important;
	padding-inline: 0 !important;
	overflow: visible !important;
}

html body :is(
	ul.page-numbers,
	.navigation.pagination .nav-links,
	.ft-pager-list
) {
	--ft-pagination-shift: 0px;
	box-sizing: border-box !important;
	clear: both !important;
	float: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	width: max-content !important;
	max-width: calc(100vw - 32px) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none !important;
	transform: translateX(var(--ft-pagination-shift)) !important;
	transition: none !important;
}

html body :is(ul.page-numbers, .ft-pager-list) > li {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body :is(
	ul.page-numbers,
	.navigation.pagination .nav-links,
	.ft-pager-list
) :is(a, span) {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 42px !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 1px solid #d6e2ea !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: #12354d !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
}

html body :is(
	ul.page-numbers,
	.navigation.pagination .nav-links,
	.ft-pager-list
) :is(.current, a:hover, a:focus-visible) {
	border-color: #1694ab !important;
	background: #1694ab !important;
	color: #fff !important;
	box-shadow: 0 8px 20px rgb(22 148 171 / 20%) !important;
}

html body :is(
	ul.page-numbers,
	.navigation.pagination .nav-links,
	.ft-pager-list
) .dots {
	min-width: 26px !important;
	padding-inline: 4px !important;
	border-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
}

@media (max-width: 767px) {
	html body :is(
		.woocommerce-pagination,
		.jas-pagination,
		.navigation.pagination,
		.ft-pager
	) {
		margin-block: 28px 20px !important;
	}

	html body :is(
		ul.page-numbers,
		.navigation.pagination .nav-links,
		.ft-pager-list
	) {
		gap: 6px !important;
		max-width: calc(100vw - 24px) !important;
	}

	html body :is(
		ul.page-numbers,
		.navigation.pagination .nav-links,
		.ft-pager-list
	) :is(a, span) {
		min-width: 38px !important;
		height: 38px !important;
		padding-inline: 10px !important;
		border-radius: 9px !important;
		font-size: 13px !important;
	}
}