/* =========================================================================
   Каталог «Номер на спині» (вісь surfaces = number; підключається з каталогом лише для сайту з віссю number):
   заголовок з лідом праворуч, лінія кольору тексту над фільтрами й результатами, групи фільтрів — гротеск великими,
   три колонки карток поруч із фільтрами. Макет: design/concept-catalog-tf.html.
   ====================================================================== */
.tf-variant-surfaces-number .tf-catalog__head { gap: var(--tf-space-1) var(--tf-space-6); margin-block-end: var(--tf-space-4); }
.tf-variant-surfaces-number .tf-catalog__head .tf-eyebrow {
	/* tf-native-exception: none — у макеті над заголовком каталогу підпису немає; рубрику називає h1. */
	display: none;
}
.tf-variant-surfaces-number .tf-catalog__lede { max-inline-size: 52ch; }
.tf-variant-surfaces-number .tf-catalog__context { margin-block-end: var(--tf-space-5); }
.tf-variant-surfaces-number .tf-catalog__layout { padding-block-start: 0; border-block-start: var(--tf-bw-control) solid var(--tf-text); }
.tf-variant-surfaces-number .tf-catalog__filters-head { min-block-size: 3.25rem; margin: 0; border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-surfaces-number .tf-catalog__filters-head h2 { font-size: var(--tf-size-heading-small); letter-spacing: 0.03em; }
.tf-variant-surfaces-number .tf-catalog__reset { color: var(--tf-brand); font-weight: 700; }
.tf-variant-surfaces-number .tf-filter { border-block-start: 0; border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-surfaces-number .tf-filter__title { min-block-size: 3.25rem; padding-block: 0; font-family: var(--tf-font-display); font-size: var(--tf-size-heading-small); font-weight: var(--tf-weight-heading); letter-spacing: 0.03em; text-transform: uppercase; }
.tf-variant-surfaces-number .tf-filter__selected { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: 0; }
.tf-variant-surfaces-number .tf-choice { font-size: 0.9375rem; }
.tf-variant-surfaces-number .tf-catalog__toolbar { min-block-size: 3.25rem; margin-block-end: 0; }
.tf-variant-surfaces-number .tf-catalog__count { color: var(--tf-text-muted); font-weight: 700; }
.tf-variant-surfaces-number .tf-catalog__sort label { font-weight: 700; }
.tf-variant-surfaces-number .tf-catalog__sort .tf-select { inline-size: auto; min-inline-size: 13rem; min-block-size: var(--tf-target); border-color: var(--tf-control-border); font-size: var(--tf-size-body); }
.tf-variant-surfaces-number .tf-catalog__main .tf-grid { border-block-start-width: var(--tf-bw-divider); border-block-start-color: var(--tf-border); }
.tf-variant-surfaces-number .tf-catalog__pagination-row { border-block-start-color: var(--tf-border); }
.tf-variant-surfaces-number .tf-catalog__empty { border-radius: 0; border-color: var(--tf-border); }
@media (min-width: 64rem) {
	.tf-variant-surfaces-number .tf-catalog__head { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
	.tf-variant-surfaces-number .tf-catalog__lede { padding-block-end: var(--tf-space-1); }
	.tf-variant-surfaces-number .tf-catalog__guides { grid-column: 2; }
	.tf-variant-surfaces-number .tf-grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tf-variant-card-number .tf-grid--catalog > li:nth-child(4n) { border-inline-end: var(--tf-bw-divider) solid var(--tf-border); }
	.tf-variant-card-number .tf-grid--catalog > li:nth-child(3n) { border-inline-end: 0; }
}

/* Автопрогрузка (вісь discovery; власник 2026-10-02, гібрид): прогрес і «Показати ще» замість пагінації,
   «Показати попередні» над сіткою, коли каталог відкрито не з першої сторінки. Без JS блоки приховані — пагінація.
   Логіка — assets/js/catalog-more.js. */
.tf-variant-discovery-number .tf-catalog__more { display: grid; justify-items: center; gap: var(--tf-space-3); margin-block-start: var(--tf-space-7); padding-block-start: var(--tf-space-5); border-block-start: var(--tf-bw-divider) solid var(--tf-border); text-align: center; }
.tf-variant-discovery-number .tf-catalog__more-progress { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-mono); color: var(--tf-text-muted); }
.tf-variant-discovery-number .tf-catalog__more-bar { display: block; inline-size: min(100%, 16rem); block-size: 0.25rem; background: var(--tf-border); }
.tf-variant-discovery-number .tf-catalog__more-bar > span { display: block; inline-size: var(--tf-more-progress, 0%); block-size: 100%; background: var(--tf-text); transition: inline-size var(--tf-motion-normal) var(--tf-easing); }
.tf-variant-discovery-number .tf-catalog__more-button { min-inline-size: min(100%, 18rem); gap: var(--tf-space-2); }
.tf-variant-discovery-number .tf-catalog__more-error { color: var(--tf-danger); font-size: var(--tf-size-small); }
.tf-variant-discovery-number .tf-catalog__prev { display: grid; justify-items: center; gap: var(--tf-space-3); padding-block: var(--tf-space-4); border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
/* Відновлення після «Назад»: поки попередні сторінки повертаються в сітку, не показуємо сторінку, з якої почали. */
.tf-variant-discovery-number .tf-catalog__main.is-restoring .tf-grid--catalog { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
	.tf-variant-discovery-number .tf-catalog__more-bar > span { transition: none; }
}