/* =========================================================================
   Teamfootball — каталог, пошук, таксономії. Server-rendered; JS переносить
   форму фільтрів у sheet на компактних екранах.
   ====================================================================== */
.tf-catalog-main { padding-block: var(--tf-space-4) var(--tf-space-9); }
.tf-catalog__head { display: grid; gap: var(--tf-space-3); margin-block-end: var(--tf-space-5); }
.tf-catalog__head h1 { font-size: var(--tf-size-heading); }
.tf-catalog__lede { color: var(--tf-text-muted); max-inline-size: 60ch; }
/* Гіди вибору під вступом посадкової добірки (покриття, колекція; inc/catalog-landing.php): посилання 44 px. */
.tf-catalog__guides ul { display: flex; flex-wrap: wrap; gap: 0 var(--tf-space-4); margin: 0; padding: 0; list-style: none; }
.tf-catalog__guides a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); }
.tf-catalog__search { margin-block-end: var(--tf-space-5); max-inline-size: 42rem; }
.tf-catalog__search .tf-search { inline-size: 100%; }
.tf-catalog__context { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin-block-end: var(--tf-space-4); }
.tf-catalog__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2); margin-block-end: var(--tf-space-5); font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-catalog__clear,
.tf-catalog__reset { display: inline-flex; align-items: center; min-block-size: var(--tf-target); border: 0; background: transparent; color: var(--tf-text-muted); font-size: var(--tf-size-small); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; padding: 0; } /* tf-native-exception: transparent. */
.tf-catalog__clear:hover,
.tf-catalog__reset:hover { color: var(--tf-text); }
.tf-catalog__layout { display: grid; grid-template-columns: 16.25rem minmax(0, 1fr); gap: var(--tf-space-6); align-items: start; }
.tf-catalog__main { min-inline-size: 0; }

/* Фільтри (sidebar) */
.tf-catalog__filters { position: sticky; inset-block-start: calc(var(--tf-header-h) + var(--tf-space-4)); min-inline-size: 0; }
.tf-catalog__filters > summary { list-style: none; }
.tf-catalog__filters > summary::-webkit-details-marker { display: none; } /* tf-native-exception: none. */
.tf-catalog__filters > summary { display: none; } /* tf-native-exception: none — на wide фільтри завжди видимі. */
.tf-catalog__filters-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-3); min-block-size: var(--tf-target); margin-block-end: var(--tf-space-2); }
.tf-catalog__filters-head h2 { font-size: var(--tf-size-lede); }
.tf-filters { display: grid; }
.tf-filter { border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-filter__title { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-2); min-block-size: var(--tf-control); padding-block: var(--tf-space-3); font-weight: 700; font-size: var(--tf-size-small); list-style: none; }
.tf-filter__title::-webkit-details-marker { display: none; } /* tf-native-exception: none. */
.tf-filter__title::after { content: "+"; font-family: var(--tf-font-mono); color: var(--tf-text-muted); }
.tf-filter[open] > .tf-filter__title::after { content: "−"; }
.tf-filter__selected { margin-inline-start: auto; margin-inline-end: var(--tf-space-2); padding: 0 var(--tf-space-2); border-radius: var(--tf-radius-s); background: var(--tf-text); color: var(--tf-on-inverse); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); }
.tf-filter__body { display: grid; gap: 0; padding-block: 0 var(--tf-space-4); }
.tf-filter__help { margin: 0; padding-block: 0 var(--tf-space-3); font-size: var(--tf-size-small); } /* «Що означають рівні?» під фасетом «Рівень». */
.tf-filter__help a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); }
.tf-filter__price { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tf-space-2); }
.tf-filter__price label { display: grid; gap: var(--tf-space-1); font-size: var(--tf-size-caption); }
.tf-filters__submit { inline-size: 100%; margin-block-start: var(--tf-space-4); }

/* Toolbar */
.tf-catalog__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tf-space-3) var(--tf-space-4); margin-block-end: var(--tf-space-5); }
.tf-catalog__count { margin-inline-end: auto; font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-catalog__count strong { color: var(--tf-text); }
.tf-catalog__count span { margin-inline-start: var(--tf-space-2); }
.tf-catalog__filter-trigger { gap: var(--tf-space-2); }
.tf-catalog__filter-count { display: inline-grid; place-items: center; min-inline-size: 1.25rem; padding-inline: var(--tf-space-1); border-radius: var(--tf-radius-s); background: var(--tf-accent); color: var(--tf-on-accent); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); }
.tf-catalog__sort { display: flex; align-items: center; gap: var(--tf-space-3); }
.tf-catalog__sort label { display: flex; align-items: center; gap: var(--tf-space-2); font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-catalog__sort .tf-select { inline-size: 13rem; min-block-size: var(--tf-control-compact); border-radius: var(--tf-radius-pill); border-color: var(--tf-border); font-size: var(--tf-size-small); }
.tf-js .tf-catalog__sort-submit { display: none; } /* tf-native-exception: none — з JS select застосовується одразу. */

/* Пагінація */
.tf-catalog__pagination-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tf-space-4); 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); }
.tf-catalog__pagination-row p { font-size: var(--tf-size-caption); color: var(--tf-text-muted); }

/* Порожній стан */
.tf-catalog__empty { display: grid; gap: var(--tf-space-4); justify-items: start; padding: var(--tf-space-7) var(--tf-space-6); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); }
.tf-catalog__empty p:not(.tf-eyebrow) { color: var(--tf-text-muted); max-inline-size: 48ch; }
.tf-catalog__empty-actions { display: flex; flex-wrap: wrap; gap: var(--tf-space-3); }
.tf-catalog__alternatives,
.tf-catalog__try { inline-size: 100%; }
.tf-catalog__alternatives h3,
.tf-catalog__try h3 { margin: 0 0 var(--tf-space-2); font-size: var(--tf-size-small); font-weight: 700; }
.tf-catalog__alternatives ul { display: flex; flex-wrap: wrap; gap: var(--tf-space-2) var(--tf-space-4); margin: 0; padding: 0; list-style: none; }
.tf-catalog__alternatives a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); font-weight: 600; }
.tf-catalog__try .tf-catalog__context { margin-block-end: 0; }
.tf-catalog__main[aria-busy="true"] { opacity: 0.6; transition: opacity var(--tf-motion-fast) var(--tf-easing); }

/* Sheet (compact) */
.tf-catalog-sheet { position: fixed; inset: 0 auto 0 0; margin: 0; padding: 0; border: 0; inline-size: min(26.25rem, 100%); max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh; background: var(--tf-canvas); color: var(--tf-text); }
.tf-catalog-sheet[open] { display: flex; flex-direction: column; }
.tf-catalog-sheet::backdrop { background: var(--tf-ink-scrim); }
body.tf-catalog-sheet-open { overflow: hidden; }
.tf-catalog-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-3); padding: var(--tf-space-4) var(--tf-space-5) 0; flex: none; }
.tf-catalog-sheet__head h2 { font-size: var(--tf-size-heading-small); }
#tf-catalog-sheet-description { flex: none; padding: var(--tf-space-2) var(--tf-space-5) var(--tf-space-4); font-size: var(--tf-size-caption); color: var(--tf-text-muted); border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-catalog-sheet__body { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--tf-space-2) var(--tf-space-5) var(--tf-space-5); }
.tf-catalog-sheet__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-3); flex: none; padding: var(--tf-space-3) var(--tf-space-5) calc(var(--tf-space-5) + env(safe-area-inset-bottom)); border-block-start: var(--tf-bw-divider) solid var(--tf-border); background: var(--tf-surface); }
.tf-catalog-sheet__actions > .tf-button { flex: 1 1 auto; }
.tf-catalog-sheet .tf-filters__submit { display: none; } /* tf-native-exception: none — у sheet кнопка «Показати результати» внизу. */
.tf-catalog-sheet .tf-catalog__filters-head { display: none; } /* tf-native-exception: none. */

/* ---------- Responsive ---------- */
@media (min-width: 64rem) {
	.tf-js .tf-filters__submit { display: none; } /* tf-native-exception: none — на wide з JS зміна фільтра застосовується одразу (D-06 B); без JS кнопка лишається. */
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
	.tf-catalog__layout { grid-template-columns: 13.75rem minmax(0, 1fr); gap: var(--tf-space-5); }
}
@media (max-width: 63.99rem) {
	.tf-catalog__layout { display: block; }
	.tf-catalog__filters { position: static; margin-block-end: var(--tf-space-5); padding-block-end: var(--tf-space-4); border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
	.tf-catalog__filters > summary { display: inline-flex; margin-block-end: var(--tf-space-4); }
	/* Клас tf-js ставиться інлайн у <head> до першого рендера (Assets::mark_javascript), тому панель не з'являється
	   й не зникає після завантаження відкладеного JS — без стрибка контенту (CLS). */
	.tf-js .tf-catalog__filters { display: none; } /* tf-native-exception: none — з JS форму показує sheet. */
	.tf-js .tf-catalog__filter-trigger[hidden] { display: inline-flex !important; }
}
@media (max-width: 47.99rem) {
	.tf-catalog-main { padding-block-end: var(--tf-space-7); }
	.tf-catalog__toolbar { align-items: stretch; flex-direction: column; }
	.tf-catalog__count { margin-inline-end: 0; }
	.tf-catalog__sort,
	.tf-catalog__sort label,
	.tf-catalog__sort .tf-select { inline-size: 100%; }
	.tf-catalog__sort label { flex-direction: column; align-items: stretch; }
	.tf-catalog__pagination-row { flex-direction: column; align-items: flex-start; }
	.tf-catalog__empty { padding: var(--tf-space-5) var(--tf-space-4); }
}