/* Salient Toolkit – Pill Pagination (carousels set to Pagination Style: Pill) */
.stk-pp { position: relative; } /* Flickity sets this only when it starts; the pill needs it from the first paint. */
.stk-pp .flickity-page-dots { display: none !important; }
.stk-pp .stk-pp-pill {
	--stk-pp-color: currentColor;
	--stk-pp-bg: rgba(128, 128, 128, .14);
	--stk-pp-track-bg: rgba(128, 128, 128, .28);
	--stk-pp-thumb: var(--stk-pp-color);
	--stk-pp-thumb-on: var(--stk-pp-color);
	position: absolute;
	left: 50%;
	bottom: calc(-68px - var(--stk-pp-h, 44px) / 2); /* centred where Salient puts the dots */
	z-index: 10;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	width: var(--stk-pp-w, 190px);
	max-width: calc(100% - 20px);
	height: var(--stk-pp-h, 44px);
	margin: 0;
	padding: 0 var(--stk-pp-pad, 20px);
	border-radius: 999px;
	background: var(--stk-pp-bg);
	cursor: pointer;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.stk-pp .stk-pp-pill {
		--stk-pp-bg: color-mix(in srgb, var(--stk-pp-color) 10%, transparent);
		--stk-pp-track-bg: color-mix(in srgb, var(--stk-pp-color) 20%, transparent);
		--stk-pp-thumb: color-mix(in srgb, var(--stk-pp-color) 62%, transparent);
		--stk-pp-thumb-on: color-mix(in srgb, var(--stk-pp-color) 92%, transparent);
	}
}
.stk-pp .stk-pp-pill[hidden] { display: none !important; }
.stk-pp-track { position: relative; flex: 1 1 auto; height: var(--stk-pp-track, 6px); border-radius: 99px; background: var(--stk-pp-track-bg); transition: height .2s ease; }
.stk-pp-thumb { position: absolute; top: 0; left: 0; width: var(--stk-pp-f, 20%); height: 100%; border-radius: inherit; background: var(--stk-pp-thumb); cursor: grab; will-change: transform; transition: background-color .2s ease, width .3s ease; }
.flickity-rtl .stk-pp-thumb, html[dir="rtl"] .stk-pp:not(.flickity-enabled) .stk-pp-thumb { left: auto; right: 0; }
.stk-pp-count { flex: 0 0 auto; min-width: 4.6em; font-size: 12px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--stk-pp-thumb-on); }
.stk-pp-count:empty::before { content: "01 / " var(--stk-pp-n, ""); }
.stk-pp-pill:hover .stk-pp-track, .stk-pp-pill.is-scrubbing .stk-pp-track { height: var(--stk-pp-track-on, 8px); }
.stk-pp-pill:hover .stk-pp-thumb, .stk-pp-pill.is-scrubbing .stk-pp-thumb { background: var(--stk-pp-thumb-on); }
.stk-pp-pill.is-scrubbing, .stk-pp-pill.is-scrubbing .stk-pp-thumb { cursor: grabbing; }
.stk-pp-pill:focus { outline: none; }
.stk-pp-pill:focus-visible:not(.is-scrubbing) { outline: 2px solid var(--stk-pp-color); outline-offset: 3px; }

/* Salient's Pagination Alignment and Control Coloring. */
.stk-pp[data-pagination-alignment="left"] .stk-pp-pill { left: 0; transform: none; }
.stk-pp[data-pagination-alignment="right"] .stk-pp-pill { left: auto; right: 0; transform: none; }
.stk-pp[data-control-color="accent-color"] .stk-pp-pill { --stk-pp-color: var(--nectar-accent-color, currentColor); }
.stk-pp[data-control-color="extra-color-1"] .stk-pp-pill { --stk-pp-color: var(--nectar-extra-color-1, currentColor); }
.stk-pp[data-control-color="extra-color-2"] .stk-pp-pill { --stk-pp-color: var(--nectar-extra-color-2, currentColor); }
.stk-pp[data-control-color="extra-color-3"] .stk-pp-pill { --stk-pp-color: var(--nectar-extra-color-3, currentColor); }

/* Thumb size and slide count before the carousel exists (Salient's column breakpoints). */
@media only screen and (min-width: 1300px) { .stk-pp-pill { --stk-pp-f: var(--stk-pp-d); } .stk-pp-count { --stk-pp-n: var(--stk-pp-n-d); } }
@media only screen and (min-width: 1000px) and (max-width: 1299px) { .stk-pp-pill { --stk-pp-f: var(--stk-pp-sd); } .stk-pp-count { --stk-pp-n: var(--stk-pp-n-sd); } }
@media only screen and (min-width: 690px) and (max-width: 999px) { .stk-pp-pill { --stk-pp-f: var(--stk-pp-t); } .stk-pp-count { --stk-pp-n: var(--stk-pp-n-t); } }
@media only screen and (max-width: 689px) { .stk-pp-pill { --stk-pp-f: var(--stk-pp-p); } .stk-pp-count { --stk-pp-n: var(--stk-pp-n-p); } }

@media (prefers-reduced-motion: reduce) {
	.stk-pp-track, .stk-pp-thumb { transition: none; }
}