/* ============================================================
   KRONOTEX · KX-PAGER — unified slider / listing pagination
   ------------------------------------------------------------
   The single, site-wide pagination style for card-list sliders
   (Отзывы, Блог, Похожие декоры, …) and paginated listings
   (catalog / archive). Full-width bar with a thin top border:
   left = "Показано N–M из ВСЕГО", right = "← Назад / 1 2 3 / Дальше →".

   Loaded globally (every page) so the component is available wherever
   a slider or listing appears. Intentionally NOT wrapped in @scope —
   it reads the inherited --kr-* tokens defined by the active body CSS
   (home.css on the front page, chrome.css elsewhere) on both the
   .kr-desktop and .kr-mobile trees.

   Spec: design project Kronotex / SLIDER.md (KX-Pager).
   Two modes share this markup:
     · Slider mode — buttons (<button data-pg>) driven by kx-pager.js.
     · Page mode   — links   (<a class="kx-pgbtn …" href>) for catalog;
                     server-rendered, no JS.
   ============================================================ */

/* Optional wrapper around a track + its pager (slider mode). */
.kx-slider { position: relative; }

.kx-pager {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--kr-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.kx-pager:empty { display: none; }

.kx-pager__info {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--kr-mute);
	margin: 0;
}
.kx-pager__info b {
	color: var(--kr-black);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.kx-pager__nav { display: flex; align-items: center; gap: 6px; }

.kx-pgbtn {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--kr-line);
	background: #fff;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--kr-black);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.kx-pgbtn:hover { border-color: var(--kr-black); }
.kx-pgbtn.on,
.kx-pgbtn[aria-current="page"] {
	background: var(--kr-black);
	border-color: var(--kr-black);
	color: #fff;
}
.kx-pgbtn:disabled,
.kx-pgbtn--disabled {
	border-color: transparent;
	background: transparent;
	color: var(--kr-line-2);
	cursor: not-allowed;
	pointer-events: none;
}

/* Mobile current/total indicator — hidden on desktop. */
.kx-pager__cur {
	display: none;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--kr-mute);
	font-variant-numeric: tabular-nums;
	padding: 0 2px;
}
.kx-pager__cur b { color: var(--kr-black); }

/* ------------------------------------------------------------
   Mobile (.kr-mobile): single row, like desktop.
   Hide page numbers + button text labels — keep only the arrows
   and a compact "current / total" indicator. Inset to the site
   gutter (16px) so the bar isn't flush to the screen edge.
   ------------------------------------------------------------ */
.kr-mobile .kx-pager {
	gap: 10px;
	margin: 22px 16px 0;
	padding-top: 16px;
	flex-wrap: nowrap;
}
.kr-mobile .kx-pager__info { font-size: 13px; white-space: nowrap; }
.kr-mobile .kx-pager__nav { flex-wrap: nowrap; gap: 6px; }
.kr-mobile .kx-pgbtn { min-width: 38px; height: 38px; padding: 0 10px; }
.kr-mobile .kx-pgbtn--num { display: none; }   /* hide page numbers */
.kr-mobile .kx-pgbtn__t  { display: none; }     /* hide "Назад/Дальше" labels — arrows only */
.kr-mobile .kx-pgbtn--nav { min-width: 38px; padding: 0; }
.kr-mobile .kx-pager__cur { display: inline-flex; align-items: center; white-space: nowrap; }

/* ------------------------------------------------------------
   Snap-aware gutter: tracks with scroll-snap-type: x mandatory and
   scroll-snap-align: start would otherwise pin the first card flush
   to the viewport edge, eating the left 16px gutter. scroll-padding
   restores the inset so the first/last cards keep the site gutter.
   Desktop is handled by .container; mobile needs this explicitly.
   ------------------------------------------------------------ */
.kr-mobile [data-kx-track] {
	scroll-padding-left: 16px;
	scroll-padding-right: 16px;
}

/* «Показать ещё N» (blog listing) — appended-page loader button */
.kx-pgbtn--more { width: auto; padding: 0 18px; font-weight: 700; white-space: nowrap; }
.kx-pgbtn--more.is-busy { opacity: 0.5; pointer-events: none; }