/* =========================================================================
   Teamfootball «Номер на спині» — спільні компоненти всіх маршрутів: оболонка (осі header і surfaces) і картка
   товару (вісь card). Підключається лише для сайту, у якого хоч одна вісь варіанта — number (Assets::enqueue);
   кожне правило — під класом своєї осі на body. Стилі окремих маршрутів — pages/*-number.css.

   Оболонка (осі header і surfaces = number).
   Світла сервісна смуга з телефоном; липка лише смуга 64 px — логотип, пошук, іконки (до 48rem шапка не липка:
   на телефоні липкий лише ряд «Фільтри / Сортування» каталогу); ряд рубрик із панеллю «Каталог» з 64rem, до 64rem —
   шторка меню; світлий футер зі слоганом. Макети: design/concept-*-tf.html (огляд F002, F009, F017).
   ====================================================================== */

/* Обгортка частини шапки (div.wp-block-template-part) не обмежує липкість: смуга й ряд рубрик стають дітьми
   .wp-site-blocks. Обгортка — div без семантики; header і nav лишаються в дереві доступності. */
.tf-variant-header-number .wp-site-blocks > .wp-block-template-part:has(> .tf-site-header) { display: contents; }
html:has(> body.tf-variant-header-number) { scroll-padding-block-start: calc(var(--tf-header-h) + var(--tf-space-4)); }

/* ---------- Сервісна смуга: світла, мітки моно; Telegram (чи телефон) праворуч з 64rem ---------- */
.tf-variant-header-number .tf-usp {
	background: var(--tf-canvas);
	color: var(--tf-text-muted);
	border-block-end: var(--tf-bw-divider) solid var(--tf-border);
	font-family: var(--tf-font-mono);
	font-size: var(--tf-size-label);
	font-weight: 700;
	letter-spacing: var(--tf-ls-mono);
	text-transform: uppercase;
}
.tf-variant-header-number .tf-usp__inner { flex-wrap: wrap; gap: var(--tf-space-1) var(--tf-space-6); min-block-size: 2.25rem; padding-block: var(--tf-space-1); }
.tf-variant-header-number .tf-usp__list { gap: var(--tf-space-1) var(--tf-space-6); }
.tf-variant-header-number .tf-usp__list li::before { inline-size: 0.375rem; block-size: 0.375rem; border-radius: var(--tf-radius-dot); background: var(--tf-accent); }
.tf-variant-header-number .tf-usp a { color: var(--tf-text); }
.tf-variant-header-number .tf-usp :where(a):focus-visible { outline-color: var(--tf-focus); }
.tf-usp__contact { display: inline-flex; align-items: center; min-block-size: var(--tf-target); margin-block: calc(var(--tf-space-2) * -1); }
.tf-usp__contact .tf-icon { inline-size: 1rem; block-size: 1rem; }

/* Бігучий рядок переваг (до 48rem, власник 2026-10-01): класи ставить site-header.js — is-line (один рядок),
   is-running (рух, копії пунктів aria-hidden), is-paused (кнопка). Без JS і з prefers-reduced-motion — як раніше. */
.tf-usp__toggle {
	/* tf-native-exception: none — кнопка паузи лише для запущеного рядка на телефоні. */
	display: none;
}
@keyframes tf-usp-run {
	to { transform: translateX(var(--tf-usp-shift, 0)); }
}

/* ---------- Смуга 64 px ---------- */
.tf-variant-header-number .tf-site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--tf-layer-header);
	background: var(--tf-canvas);
	backdrop-filter: none;
	border-block-end: var(--tf-bw-divider) solid var(--tf-border);
}
/* Відкрита шторка — над липкими шарами сторінки (тулбар каталогу, панель покупки). */
.tf-variant-header-number .tf-site-header:has(.tf-nav-disclosure[open]) { z-index: var(--tf-layer-drawer); }
.tf-bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "logo search actions";
	align-items: center;
	gap: var(--tf-space-6);
	inline-size: min(var(--tf-wide-max), calc(100% - var(--tf-gutter) * 2));
	min-block-size: var(--tf-header-h);
	margin-inline: auto;
}
.tf-bar > .tf-nav-disclosure {
	grid-area: menu;
	/* tf-native-exception: none — з 64rem меню — ряд рубрик під смугою. */
	display: none;
}
.tf-bar > .tf-wordmark { grid-area: logo; }
.tf-bar .tf-wordmark .tf-brand-logo { block-size: 1.75rem; }
.tf-bar > .tf-header-actions { grid-area: actions; gap: var(--tf-space-1); margin-inline-start: 0; }

/* Пошук — поле 48 px з рамкою кольору тексту і кнопкою «Шукати» на всю висоту; 16 px — iOS не масштабує сторінку.
   Те саме поле — у панелі пошуку телефона (.tf-search-panel). */
.tf-bar .tf-search {
	inline-size: 100%;
	min-block-size: 3rem;
	padding: 0;
	gap: 0;
	border-color: var(--tf-control-border);
	overflow: visible;
}
.tf-bar > .tf-search { grid-area: search; max-inline-size: 38.75rem; margin-inline: auto; }
/* Іконка пошуку з панеллю — лише до 48rem; відкрита панель показує на іконці хрестик. */
.tf-bar > .tf-search-disclosure {
	grid-area: find;
	/* tf-native-exception: none — з 48rem поле пошуку стоїть у смузі. */
	display: none;
}
.tf-search-toggle .tf-icon--close,
.tf-search-disclosure[open] > .tf-search-toggle .tf-icon--search {
	/* tf-native-exception: none — видно лише дію, доступну зараз. */
	display: none;
}
.tf-search-disclosure[open] > .tf-search-toggle .tf-icon--close { display: block; }
.tf-bar .tf-search > .tf-icon {
	/* tf-native-exception: none — поле підписане й має кнопку «Шукати»; лупа ліворуч дублювала б її. */
	display: none;
}
.tf-bar .tf-search__input { align-self: stretch; padding-inline: var(--tf-space-4); font-size: var(--tf-size-body); }
.tf-bar .tf-search__submit { align-self: stretch; min-block-size: 0; padding-inline: var(--tf-space-5); border-radius: 0; font-size: var(--tf-size-small); }

/* Іконки: без рамок, тло при наведенні; лічильник — усередині цілі 44 px. */
.tf-bar .tf-icon-button { border-color: transparent; background: transparent; } /* tf-native-exception: transparent — іконки смуги без рамок, як у макеті. */
.tf-bar .tf-icon-button:hover { border-color: transparent; background: var(--tf-surface-subtle); } /* tf-native-exception: transparent. */
.tf-bar .tf-cart-count { inset-block-start: 0.125rem; inset-inline-end: 0.125rem; min-inline-size: 1.1875rem; block-size: 1.1875rem; }

/* ---------- Повідомлення обраного й порівняння (saved.js): картка зверху екрана ----------
   Власник 2026-10-01: «просто текст без нормальної верстки». Картка поверх сторінки (не зсуває вміст), рамка кольору
   тексту, квадрат акценту, посилання на список і «Закрити» 44 px; зникає за 6 с (поки немає курсора чи фокуса). */
.tf-variant-header-number .tf-toast {
	position: fixed;
	inset-block-start: calc(var(--tf-header-h) + var(--tf-space-3));
	inset-inline: auto max(var(--tf-gutter), calc((100% - var(--tf-wide-max)) / 2));
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--tf-target);
	align-items: center;
	gap: 0 var(--tf-space-2);
	inline-size: min(24rem, calc(100% - var(--tf-gutter) * 2));
	margin: 0;
	padding: var(--tf-space-2) var(--tf-space-1) var(--tf-space-2) var(--tf-space-4);
	background: var(--tf-canvas);
	border: var(--tf-bw-control) solid var(--tf-text);
	box-shadow: var(--tf-shadow-overlay);
	animation: tf-toast-in var(--tf-motion-fast) var(--tf-easing);
}
.tf-variant-header-number .tf-toast:empty {
	/* tf-native-exception: none — порожній live-регіон не показується. */
	display: none;
}
@keyframes tf-toast-in {
	from { opacity: 0; transform: translateY(calc(var(--tf-space-2) * -1)); }
}
.tf-toast__text { display: flex; align-items: center; gap: var(--tf-space-2); margin: 0; font-weight: 700; line-height: 1.3; }
.tf-toast__text::before { content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; background: var(--tf-accent); }
.tf-toast__link { grid-column: 1; display: inline-flex; align-items: center; justify-self: start; min-block-size: var(--tf-target); color: var(--tf-text); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.25em; }
.tf-toast__link::after { content: "→"; margin-inline-start: var(--tf-space-2); text-decoration: none; }
.tf-toast__link:hover { color: var(--tf-brand); }
.tf-toast__close { grid-column: 2; grid-row: 1 / span 2; align-self: start; inline-size: var(--tf-target); block-size: var(--tf-target); padding: 0; border: 0; background: transparent; color: var(--tf-text); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; } /* tf-native-exception: transparent — хрестик без рамки всередині картки. */
.tf-toast__close:hover { background: var(--tf-surface-subtle); }

/* ---------- Ряд рубрик, панелі «Каталог» і «Футбольне взуття» (з 64rem) ---------- */
.tf-rubrics {
	/* tf-native-exception: none — до 64rem рубрики в шторці меню. */
	display: none;
}
.tf-rubrics__list,
.tf-rubrics__aux,
.tf-mega__list,
.tf-mega__list ul,
.tf-ladder__tiers { list-style: none; margin: 0; padding: 0; }
.tf-catalog-panel > summary { list-style: none; }
.tf-catalog-panel > summary::-webkit-details-marker {
	/* tf-native-exception: none — шеврон поруч із «Каталог» є affordance розкриття. */
	display: none;
}

.tf-mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	padding-block: var(--tf-space-7) var(--tf-space-4);
	background: var(--tf-canvas);
	border-block-end: var(--tf-bw-control) solid var(--tf-text);
	box-shadow: var(--tf-shadow-overlay);
	/* Панель довша за екран (вузьке вікно, 200% zoom) прокручується сама. */
	max-block-size: calc(100vh - 7.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.tf-mega__grid,
.tf-mega__all { inline-size: min(var(--tf-wide-max), calc(100% - var(--tf-gutter) * 2)); margin-inline: auto; }
.tf-mega__grid { display: grid; grid-template-columns: 3fr 1fr; gap: var(--tf-space-6); }
.tf-mega--rubric .tf-mega__grid { grid-template-columns: 1.25fr 1.25fr 0.75fr 0.75fr; }
/* Рубрики колонками: рубрика з підрубриками не розривається між колонками. */
.tf-mega__rubrics .tf-mega__list { columns: 3; column-gap: var(--tf-space-6); }
.tf-mega__rubrics .tf-mega__list > li { break-inside: avoid; }
.tf-mega__h { margin: 0 0 var(--tf-space-1); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; line-height: var(--wp--custom--teamfootball--typography--label-line-height); letter-spacing: var(--tf-ls-mono); color: var(--tf-text-muted); }
.tf-mega__list a { display: flex; align-items: center; gap: var(--tf-space-3); min-block-size: var(--tf-target); color: var(--tf-text); text-decoration: none; }
.tf-mega__list a:hover { color: var(--tf-brand); }
.tf-mega__list a:hover b { text-decoration: underline; text-underline-offset: 0.2em; }
.tf-mega__list ul a { padding-inline-start: var(--tf-space-4); font-size: var(--tf-size-small); color: var(--tf-text-muted); }
/* Підрубрики компактні (власник 2026-10-01): 2rem, на touch 2.25rem — виняток із правила 44 px, як чипи quick-add
   (≥ 24 px WCAG 2.5.8 AA); рубрики й бренди лишаються 44 px. */
.tf-mega__rubrics .tf-mega__list ul a { min-block-size: 2rem; }
.tf-mega__rubrics .tf-mega__list ul { padding-block-end: var(--tf-space-2); }
.tf-mega__list [aria-current="page"] { color: var(--tf-brand); }
.tf-mega__list .tf-mega__help { color: var(--tf-brand); font-weight: 700; }
.tf-mega__all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-1) var(--tf-space-7); margin-block-start: var(--tf-space-3); padding-block-start: var(--tf-space-1); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-mega__all a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; }

/* Рівні за драбиною бренду: бренд моно над рівнями в рядок (панель і шторка). */
.tf-ladder__brand { display: flex; align-items: center; gap: var(--tf-space-3); padding-block-start: var(--tf-space-2); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-mono); color: var(--tf-text-muted); }
.tf-ladder__tiers { display: flex; flex-wrap: wrap; column-gap: var(--tf-space-4); }
.tf-mega__list .tf-ladder__tiers a { padding-inline: 0; font-size: var(--tf-size-body); color: var(--tf-text); }
.tf-mega__list .tf-ladder__tiers a:hover { color: var(--tf-brand); }

/* Логотип бренду поруч із назвою (панелі, шторка): слот однакової ширини — назви стоять рівно. */
.tf-nav-mark { --tf-brand-mark-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 3rem; block-size: 1.5rem; }
.tf-nav-mark .tf-brand-mark { color: currentColor; }
.tf-ladder__brand .tf-nav-mark { --tf-brand-mark-size: 1rem; inline-size: 2.5rem; justify-content: flex-start; color: var(--tf-text); }

/* Код покриття бейджем: моно з рамкою (панель, шторка). */
.tf-code-badge { display: inline-grid; place-items: center; flex: none; min-inline-size: 2rem; padding: 0.125rem var(--tf-space-1); border: var(--tf-bw) solid var(--tf-text-muted); border-radius: var(--tf-radius-s); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; line-height: 1.2; letter-spacing: var(--tf-ls-mono); color: var(--tf-text); }

/* ---------- Шторка меню (до 64rem) ---------- */
.tf-variant-header-number .tf-drawer { gap: 0; }
.tf-variant-header-number .tf-nav-disclosure[open] .tf-drawer {
	inline-size: min(22.5rem, 92vw);
	padding: 0 0 max(var(--tf-space-4), env(safe-area-inset-bottom));
	border-inline-end: var(--tf-bw-control) solid var(--tf-text);
}
.tf-variant-header-number .tf-drawer .tf-navigation-panel__head {
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
	padding: var(--tf-space-1) var(--tf-space-1) var(--tf-space-1) var(--tf-space-4);
	background: var(--tf-canvas);
	border-block-end: var(--tf-bw-control) solid var(--tf-text);
}
.tf-drawer__title { margin: 0; font-family: var(--tf-font-display); font-size: 1.75rem; font-weight: var(--tf-weight-heading); line-height: 1; text-transform: uppercase; }
.tf-drawer .tf-nav-close { border-color: transparent; background: transparent; } /* tf-native-exception: transparent — кнопка закриття без рамки. */
.tf-drawer__list,
.tf-drawer__links,
.tf-drawer__list ul { list-style: none; margin: 0; padding: 0; }
.tf-drawer__list > li { border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-drawer__list summary,
.tf-drawer__top { display: flex; align-items: center; gap: var(--tf-space-3); min-block-size: 3.25rem; padding-inline: var(--tf-space-4); color: var(--tf-text); font-weight: 700; text-decoration: none; list-style: none; cursor: pointer; }
.tf-drawer__list summary::-webkit-details-marker {
	/* tf-native-exception: none — шеврон є affordance розкриття. */
	display: none;
}
.tf-drawer__list summary .tf-icon { margin-inline-start: auto; transition: transform var(--tf-motion-fast) var(--tf-easing); }
.tf-drawer__list details[open] > summary .tf-icon { transform: rotate(180deg); }
.tf-drawer__list ul { padding-block-end: var(--tf-space-2); }
.tf-drawer__list details details > summary { min-block-size: var(--tf-target); padding-inline-start: 1.75rem; }
.tf-drawer__list details details ul a { padding-inline-start: 2.75rem; }
.tf-drawer__list .tf-ladder { padding-inline: 2.75rem var(--tf-space-4); }
.tf-drawer__list .tf-ladder__tiers a { padding-inline: 0; }
.tf-drawer__list .tf-mega__help { color: var(--tf-brand); font-weight: 700; }
.tf-drawer__list ul a { display: flex; align-items: center; gap: var(--tf-space-2); min-block-size: var(--tf-target); padding-inline: 1.75rem var(--tf-space-4); color: var(--tf-text); text-decoration: none; }
.tf-drawer__links { padding-block: var(--tf-space-2); border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
/* Гіди, обране, порівняння й кабінет — звичайним шрифтом, щоб відрізнялися від рубрик (власник 2026-10-01). */
.tf-drawer__links a { display: flex; align-items: center; min-block-size: var(--tf-target); padding-inline: var(--tf-space-4); color: var(--tf-text); font-weight: 400; text-decoration: none; }
.tf-drawer :where(.tf-drawer__list, .tf-drawer__links) a:hover { color: var(--tf-brand); }
.tf-drawer [aria-current="page"] { color: var(--tf-brand); text-decoration: underline; text-underline-offset: 0.25em; }
.tf-drawer__contact { display: grid; justify-items: start; gap: var(--tf-space-2); padding: var(--tf-space-4); }
.tf-drawer__contact p { margin: 0; color: var(--tf-text-muted); }

/* ---------- Футер: світлий, лінія кольору тексту зверху ---------- */
.tf-variant-surfaces-number .tf-site-footer { background: var(--tf-canvas); color: var(--tf-text-muted); border-block-start: var(--tf-bw-control) solid var(--tf-text); padding-block: var(--tf-space-7) var(--tf-space-4); }
.tf-variant-surfaces-number .tf-site-footer::after { content: none; }
.tf-variant-surfaces-number .tf-footer-heading,
.tf-variant-surfaces-number .tf-footer-contacts .tf-footer-subheading { color: var(--tf-text-muted); letter-spacing: var(--tf-ls-mono); }
.tf-variant-surfaces-number .tf-footer-menu { font-size: var(--tf-size-body); }
.tf-variant-surfaces-number .tf-site-footer a { color: var(--tf-text); }
.tf-variant-surfaces-number .tf-site-footer a:hover { color: var(--tf-brand); }
.tf-variant-surfaces-number .tf-footer-menu [aria-current="page"] { color: var(--tf-brand); font-weight: 700; }
.tf-footer-slogan { margin: var(--tf-space-4) 0 var(--tf-space-2); font-family: var(--tf-font-display); font-size: 1.75rem; font-weight: var(--tf-weight-heading); line-height: 1; letter-spacing: var(--tf-ls-heading); text-transform: uppercase; color: var(--tf-text); }
.tf-variant-surfaces-number .tf-footer-tagline { margin-block-start: 0; }
.tf-variant-surfaces-number .tf-site-footer .tf-footer-phone { color: var(--tf-text); font-family: var(--tf-font-body); font-size: var(--tf-size-body); }
.tf-variant-surfaces-number .tf-site-footer .tf-footer-telegram + .wp-block-template-part .tf-footer-phone { font-size: var(--tf-size-small); font-weight: 400; }
.tf-variant-surfaces-number .tf-footer-contacts .tf-footer-hours { border: var(--tf-bw-control) solid var(--tf-text); border-radius: var(--tf-radius-l); background: var(--tf-canvas); }
.tf-variant-surfaces-number .tf-footer-contacts .tf-footer-hours p { color: var(--tf-text); }
.tf-variant-surfaces-number .tf-site-footer .tf-footer-socials.wp-block-social-links .wp-social-link { border-color: var(--tf-control-border); color: var(--tf-text); }
.tf-variant-surfaces-number .tf-site-footer .tf-footer-socials.wp-block-social-links .wp-social-link:hover { background: var(--tf-text); color: var(--tf-canvas); }
.tf-variant-surfaces-number .tf-footer-bottom { border-block-start-color: var(--tf-border); }
.tf-variant-surfaces-number .tf-site-footer .tf-footer-top { border-color: var(--tf-control-border); color: var(--tf-text); }
.tf-variant-surfaces-number .tf-site-footer .tf-footer-top:hover { background: var(--tf-surface-subtle); color: var(--tf-text); }
.tf-variant-surfaces-number .tf-site-footer :where(a, button):focus-visible { outline-color: var(--tf-focus); }
/* Компактний футер (власник 2026-10-03: «переверстав, щоб він був компактніший», гіди — окрема колонка): п'ять колонок
   в один ряд від 80rem (бренд 1.3 : групи 1 : гіди 1.1 : контакти 1.2), до 80rem бренд — смуга над групами (логотип і
   слоган ліворуч, опис праворуч), до 64rem контакти — рядок під меню, на телефоні гіди — список у дві колонки на всю
   ширину. Рядки меню й контактів — 2rem для миші, на дотикових екранах 42 px, як раніше (погоджений виняток із правила
   44 px, як підрубрики «Каталогу»; ≥ 24 px WCAG 2.5.8 AA). */
.tf-variant-surfaces-number .tf-footer-grid { flex-wrap: wrap; gap: var(--tf-space-6); padding-block-end: var(--tf-space-6); }
.tf-variant-surfaces-number .tf-footer-brand { flex-grow: 1.3; }
.tf-variant-surfaces-number .tf-footer-group.tf-footer-guides { flex-grow: 1.1; }
.tf-variant-surfaces-number .tf-footer-heading { margin-block-end: var(--tf-space-2); }
.tf-variant-surfaces-number .tf-footer-bottom .tf-footer-heading { margin-block-end: 0; }
.tf-variant-surfaces-number :where(.tf-footer-menu, .tf-footer-telegram, .tf-footer-phone, .tf-footer-email) a { min-block-size: 2rem; }
.tf-variant-surfaces-number .tf-footer-menu a { padding-block: var(--tf-space-1); }
@media (pointer: coarse) {
	.tf-variant-surfaces-number :where(.tf-footer-menu, .tf-footer-telegram, .tf-footer-phone, .tf-footer-email) a { min-block-size: var(--tf-control-compact); }
}
@media (min-width: 80rem) {
	.tf-variant-surfaces-number .tf-footer-grid { flex-wrap: nowrap; }
}
@media (min-width: 48rem) and (max-width: 79.99rem) {
	.tf-variant-surfaces-number .tf-footer-grid { display: flex; }
	.tf-variant-surfaces-number .tf-footer-brand { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2) var(--tf-space-5); }
	.tf-variant-surfaces-number .tf-footer-brand .tf-footer-slogan { margin: 0; }
	.tf-variant-surfaces-number .tf-footer-brand .tf-footer-tagline { flex: 1 1 16rem; max-inline-size: none; text-align: end; text-wrap: balance; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.tf-variant-surfaces-number .tf-footer-group.tf-footer-contacts { flex: 0 0 100%; }
	.tf-variant-surfaces-number .tf-footer-contacts > .wp-block-template-part { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-3) var(--tf-space-6); }
	.tf-variant-surfaces-number .tf-footer-contacts .tf-footer-hours,
	.tf-variant-surfaces-number .tf-site-footer .tf-footer-socials.wp-block-social-links { margin-block-start: 0; }
}
@media (max-width: 47.99rem) {
	.tf-variant-surfaces-number .tf-footer-grid { gap: var(--tf-space-5); padding-block-end: var(--tf-space-5); }
	.tf-variant-surfaces-number .tf-footer-guides { grid-column: 1 / -1; }
	.tf-variant-surfaces-number .tf-footer-guides .tf-footer-menu { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); column-gap: var(--tf-space-5); }
}

/* ---------- Responsive ---------- */
@media (min-width: 64rem) {
	.tf-variant-header-number .tf-rubrics {
		display: block;
		position: relative;
		z-index: calc(var(--tf-layer-header) - 1);
		background: var(--tf-canvas);
		border-block-end: var(--tf-bw-control) solid var(--tf-text);
	}
	.tf-rubrics__row { display: flex; align-items: center; gap: var(--tf-space-1); inline-size: min(var(--tf-wide-max), calc(100% - var(--tf-gutter) * 2)); margin-inline: auto; }
	.tf-rubrics__list,
	.tf-rubrics__aux { display: flex; gap: 2px; }
	.tf-rubrics__aux { margin-inline-start: auto; }
	.tf-rubrics__list > li > a,
	.tf-rubrics__aux a,
	.tf-rubrics__catalog,
	.tf-rubrics__toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: var(--tf-space-2);
		min-block-size: 3rem;
		padding-inline: var(--tf-space-4);
		color: var(--tf-text);
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
	}
	.tf-rubrics__catalog { padding-inline-start: 0; }
	.tf-catalog-panel > summary .tf-icon { inline-size: 1rem; block-size: 1rem; transition: transform var(--tf-motion-fast) var(--tf-easing); }
	.tf-catalog-panel[open] > summary .tf-icon { transform: rotate(180deg); }
	.tf-rubrics__list > li > a:hover,
	.tf-rubrics__aux a:hover,
	.tf-rubrics__catalog:hover,
	.tf-rubrics__toggle:hover { color: var(--tf-brand); }
	.tf-rubrics__aux a { font-weight: 400; color: var(--tf-text-muted); }
	.tf-rubrics__list > li > a[aria-current="page"]::after,
	.tf-rubrics__aux a[aria-current="page"]::after,
	.tf-rubrics__toggle.is-current::after { content: ""; position: absolute; inset-inline: var(--tf-space-4); inset-block-end: 0; block-size: 3px; background: var(--tf-accent); }
}
@media (min-width: 64rem) and (max-width: 73.74rem) {
	.tf-rubrics__guide {
		/* tf-native-exception: none — на 1024–1179 гіди вибору лишаються в панелі «Футбольне взуття» і шторці; «Блог» — у ряду. */
		display: none;
	}
	.tf-rubrics__aux a { padding-inline: 0.6875rem; }
	.tf-rubrics__list > li > a,
	.tf-rubrics__catalog,
	.tf-rubrics__toggle { padding-inline: 0.6875rem; }
	.tf-rubrics__catalog { padding-inline-start: 0; }
}
@media (max-width: 63.99rem) {
	.tf-bar { grid-template-columns: var(--tf-target) auto minmax(0, 1fr) auto; grid-template-areas: "menu logo search actions"; gap: var(--tf-space-4); }
	.tf-bar > .tf-nav-disclosure { display: block; }
	.tf-variant-header-number .tf-usp__contact {
		/* tf-native-exception: none — до 64rem Telegram (чи телефон) у шторці меню. */
		display: none;
	}
}
@media (max-width: 47.99rem) {
	html:has(> body.tf-variant-header-number) { scroll-padding-block-start: var(--tf-space-4); }
	.tf-variant-header-number .tf-usp { font-family: var(--tf-font-body); font-size: var(--tf-size-caption); letter-spacing: 0; text-transform: none; }
	.tf-variant-header-number .tf-usp__list li:not(:first-child) { display: flex; }
	.tf-variant-header-number .tf-usp__list { gap: 2px var(--tf-space-4); }
	.tf-variant-header-number .tf-usp.is-line .tf-usp__inner { flex-wrap: nowrap; gap: var(--tf-space-2); padding-block: 0; }
	.tf-variant-header-number .tf-usp.is-line .tf-usp__list { flex: 1 1 auto; flex-wrap: nowrap; gap: var(--tf-space-6); min-inline-size: 0; overflow: hidden; }
	.tf-variant-header-number .tf-usp.is-line .tf-usp__list li { flex: none; white-space: nowrap; }
	.tf-variant-header-number .tf-usp.is-running .tf-usp__list li { animation: tf-usp-run var(--tf-usp-duration, 20s) linear infinite; }
	.tf-variant-header-number .tf-usp.is-paused .tf-usp__list li { animation-play-state: paused; }
	/* Рядок нижчий (власник 2026-10-01): кнопка паузи — 2rem, ціль дотику лишається 44 px невидимим полем навколо. */
	.tf-variant-header-number .tf-usp.is-running .tf-usp__toggle { position: relative; z-index: calc(var(--tf-layer-header) + 1); display: inline-grid; place-items: center; flex: none; inline-size: var(--tf-target); block-size: 2rem; margin-inline-end: calc(var(--tf-space-3) * -1); padding: 0; border: 0; background: transparent; color: var(--tf-text-muted); cursor: pointer; } /* tf-native-exception: transparent — іконка без рамки, як у смузі. */
	.tf-variant-header-number .tf-usp.is-running .tf-usp__toggle::after { content: ""; position: absolute; inset-inline: 0; inset-block: calc((var(--tf-target) - 2rem) / -2); }
	.tf-usp__toggle .tf-icon { inline-size: 1rem; block-size: 1rem; }
	.tf-usp__toggle[aria-pressed="false"] .tf-icon--play,
	.tf-usp__toggle[aria-pressed="true"] .tf-icon--pause {
		/* tf-native-exception: none — видно лише дію, доступну зараз. */
		display: none;
	}
	/* Шапка не липка; relative — опора панелі пошуку на всю ширину під смугою. */
	.tf-variant-header-number .tf-site-header { position: relative; }
	.tf-variant-header-number .tf-site-header:has(.tf-search-disclosure[open]) { z-index: var(--tf-layer-drawer); }
	.tf-variant-header-number .tf-toast { inset-block-start: max(var(--tf-space-3), env(safe-area-inset-top)); }
	/* Пошук — іконка поруч із меню (власник 2026-10-01): смуга одним рядком, хіро піднімається на висоту поля. */
	.tf-bar { grid-template-columns: var(--tf-target) var(--tf-target) minmax(0, 1fr) auto; grid-template-areas: "menu find logo actions"; gap: var(--tf-space-1); min-block-size: 0; padding-block: var(--tf-space-2); }
	.tf-bar > .tf-wordmark { justify-self: center; min-inline-size: 0; }
	.tf-bar .tf-wordmark .tf-brand-logo { block-size: auto; max-block-size: 1.5rem; max-inline-size: 100%; }
	.tf-bar > .tf-search {
		/* tf-native-exception: none — до 48rem поле — у панелі під іконкою пошуку. */
		display: none;
	}
	.tf-bar > .tf-search-disclosure { display: block; position: static; }
	.tf-bar .tf-search-panel {
		inset-block-start: 100%;
		inset-inline: 0;
		inline-size: auto;
		padding: var(--tf-space-3) var(--tf-gutter) var(--tf-space-4);
		border: 0;
		border-block-end: var(--tf-bw-control) solid var(--tf-text);
		border-radius: 0;
		background: var(--tf-canvas);
	}
	.tf-variant-surfaces-number .tf-footer-slogan { margin-block-start: var(--tf-space-3); }
}
@media (max-width: 29.99rem) {
	.tf-bar .tf-saved-link--compare { display: none; } /* tf-native-exception: none — порівняння — у шторці й на сторінці товару. */
}
@media (max-width: 23.99rem) {
	.tf-bar .tf-saved-link { display: none; } /* tf-native-exception: none — на 320–383 px у смузі лише кабінет і кошик; обране — у шторці. */
}
@media (pointer: coarse) {
	.tf-mega__rubrics .tf-mega__list ul a { min-block-size: 2.25rem; }
}
@media (max-width: 47.99rem) and (hover: hover) {
	/* Під курсором миші рядок стоїть; на touch «наведення» залипає після дотику — там лише кнопка. */
	.tf-variant-header-number .tf-usp.is-running:hover .tf-usp__list li { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	.tf-variant-header-number .tf-usp.is-running .tf-usp__list li,
	.tf-variant-header-number .tf-toast { animation: none; }
	.tf-drawer__list summary .tf-icon,
	.tf-catalog-panel > summary .tf-icon { transition: none; }
}

/* =========================================================================
   Картка товару (вісь card = number): без рамки й тіні, сітка з лініями; бейджі — гротеск і моно; логотип бренду
   з «колекція · рівень» моно, коротка назва в h3, артикул; розміри — плитки 32 px (36 на touch), на телефоні до
   п'яти й «+N»; ціна 20 px, стан квадратом, «Детальніше» — рамка кольору тексту. Макет: concept-catalog-tf.html.
   ====================================================================== */
.tf-variant-card-number .tf-grid { gap: 0; border-block-start: var(--tf-bw-control) solid var(--tf-text); }
.tf-variant-card-number .tf-grid > li { border-block-end: var(--tf-bw-divider) solid var(--tf-border); border-inline-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-card-number .tf-grid > li:nth-child(4n) { border-inline-end: 0; }
.tf-variant-card-number .tf-card { gap: 0; padding: var(--tf-space-3) var(--tf-space-3) var(--tf-space-4); border: 0; border-radius: 0; background: transparent; overflow: visible; } /* tf-native-exception: transparent — лінії сітки дає li. */
.tf-variant-card-number .tf-card:hover { transform: none; box-shadow: none; }
.tf-variant-card-number .tf-card__media { padding: 0; border: 0; background: var(--tf-surface-subtle); isolation: isolate; }
.tf-variant-card-number .tf-card__badges { inset-block-start: var(--tf-space-2); inset-inline-start: var(--tf-space-2); max-inline-size: calc(100% - 4.5rem); }
.tf-variant-card-number .tf-card .tf-badge { border-radius: 0; }
.tf-variant-card-number .tf-card .tf-badge--sale,
.tf-variant-card-number .tf-card .tf-badge--new { padding: var(--tf-space-1) var(--tf-space-2) 0.1875rem; font-family: var(--tf-font-display); font-size: 1.1875rem; font-weight: var(--tf-weight-heading); letter-spacing: 0.03em; line-height: 1; }
.tf-variant-card-number .tf-card .tf-badge--new { background: var(--tf-text); }
.tf-variant-card-number .tf-card .tf-badge--surface { padding: 0.3125rem 0.4375rem; border: var(--tf-bw) solid var(--tf-text-muted); background: var(--tf-canvas); }
.tf-variant-card-number .tf-card__actions { inset-block-start: var(--tf-space-1); inset-inline-end: var(--tf-space-1); }
.tf-variant-card-number .tf-save-toggle--card { border-color: transparent; background: var(--tf-canvas); } /* tf-native-exception: transparent — біла ціль 44 px без рамки на фото. */
.tf-variant-card-number .tf-card__body { gap: var(--tf-space-2); padding: var(--tf-space-3) 0 0; }
.tf-card__meta { display: flex; align-items: center; gap: var(--tf-space-2); min-inline-size: 0; margin: 0; font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; line-height: var(--wp--custom--teamfootball--typography--label-line-height); letter-spacing: var(--tf-ls-mono); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-card__meta .tf-brand-mark { --tf-brand-mark-size: 0.875rem; }
.tf-card__meta > span { overflow-wrap: anywhere; }
.tf-card__title { margin: 0; font-family: var(--tf-font-body); font-size: 0.9375rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.tf-variant-card-number .tf-card__name { min-block-size: 2.7em; font-size: inherit; font-weight: inherit; line-height: inherit; }
.tf-card__sku { margin: calc(var(--tf-space-1) * -1) 0 0; font-family: var(--tf-font-mono); font-size: var(--tf-size-label); color: var(--tf-text-muted); overflow-wrap: anywhere; }
.tf-variant-card-number .tf-card__colors { gap: var(--tf-space-1); }
.tf-variant-card-number .tf-card__color { border-color: var(--tf-text-muted); border-radius: 0; background: var(--tf-surface-subtle); }
.tf-variant-card-number .tf-card__color.is-current { border: var(--tf-bw-control) solid var(--tf-text); }
.tf-variant-card-number .tf-card__sizes { gap: var(--tf-space-1); }
.tf-variant-card-number .tf-card__size { min-inline-size: 2.25rem; padding-inline: 0.4375rem; border-radius: var(--tf-radius-pill); font-size: var(--tf-size-caption); font-weight: 700; }
.tf-variant-card-number .tf-card__size:not(:has(input:checked)):hover { background: var(--tf-surface-subtle); } /* Обраний — чорний і під курсором (на iPhone hover лишається після дотику). */
.tf-card__size--more {
	/* tf-native-exception: none — «+N» лише на телефоні, де показано п'ять розмірів. */
	display: none;
	border-color: var(--tf-text-muted);
	background: var(--tf-surface-subtle);
	text-decoration: none;
}
.tf-variant-card-number .tf-card__add { box-shadow: var(--tf-shadow-overlay); }
.tf-variant-card-number .tf-card__status { border-radius: 0; box-shadow: var(--tf-shadow-overlay); }
.tf-variant-card-number .tf-card__foot { display: grid; grid-template-columns: minmax(0, 1fr) var(--tf-target); align-items: end; gap: var(--tf-space-3); padding-block-start: var(--tf-space-1); }
.tf-variant-card-number .tf-card__foot .tf-price { gap: 0 var(--tf-space-2); font-size: 1.25rem; line-height: 1.15; }
.tf-variant-card-number .tf-card__foot .tf-price ins { order: -1; } /* Ціна — першою, звичайна закреслена — після неї. */
.tf-variant-card-number .tf-card .tf-stock { font-weight: 700; }
.tf-variant-card-number .tf-card .tf-stock::before { inline-size: 0.5rem; block-size: 0.5rem; }
.tf-variant-card-number .tf-card__go { border: var(--tf-bw-control) solid var(--tf-text); background: transparent; color: var(--tf-text); } /* tf-native-exception: transparent — контурна ціль 44 px. */
.tf-variant-card-number .tf-card__go:hover { background: var(--tf-text); color: var(--tf-on-inverse); }
.tf-variant-card-number .tf-card--out-of-stock .tf-card__media img { opacity: 0.55; }
@media (pointer: coarse) {
	.tf-variant-card-number .tf-card__size { min-inline-size: 2.5rem; }
}
@media (max-width: 63.99rem) {
	.tf-variant-card-number .tf-grid > li:nth-child(4n) { border-inline-end: var(--tf-bw-divider) solid var(--tf-border); }
	.tf-variant-card-number .tf-grid > li:nth-child(2n) { border-inline-end: 0; }
}
@media (max-width: 47.99rem) {
	/* Картка на телефоні (власник 2026-10-01: кнопки «сильно перекривають фото»): «Порівняти» — на сторінці товару,
	   ♡ — 2rem у куті; ціль дотику лишається 44 px за рахунок невидимого поля навколо кнопки. */
	.tf-variant-card-number .tf-card .tf-save-toggle--compare {
		/* tf-native-exception: none — порівняння на телефоні — з PDP. */
		display: none;
	}
	.tf-variant-card-number .tf-card__actions { inset-block-start: 0.375rem; inset-inline-end: 0.375rem; }
	.tf-variant-card-number .tf-save-toggle--card { position: relative; inline-size: 2rem; block-size: 2rem; }
	.tf-variant-card-number .tf-save-toggle--card::after { content: ""; position: absolute; inset: -0.375rem; }
	.tf-variant-card-number .tf-save-toggle--card .tf-icon { inline-size: 1.125rem; block-size: 1.125rem; }
	.tf-variant-card-number .tf-card { padding: var(--tf-space-2) var(--tf-space-2) var(--tf-space-3); }
	.tf-card__title { font-size: var(--tf-size-small); }
	.tf-variant-card-number .tf-card__name { -webkit-line-clamp: 3; }
	.tf-variant-card-number .tf-card__sizes > label.tf-card__size:nth-of-type(n+6) {
		/* tf-native-exception: none — на телефоні п'ять розмірів і «+N» на сторінку товару (огляд F003). */
		display: none;
	}
	.tf-variant-card-number .tf-card__size--more { display: inline-grid; }
	.tf-variant-card-number .tf-card__foot .tf-price { font-size: 1.125rem; }
}
@media (max-width: 22.49rem) {
	.tf-variant-card-number .tf-grid > li { border-inline-end: 0; }
}

/* =========================================================================
   Примітиви (вісь surfaces = number): крихти моно великими, чипи 44 px з тонкою рамкою кольору тексту й лічильником
   моно, поля й select 48 px, пагінація 44 px. Макети: concept-*-tf.html (огляд F004, F031).
   ====================================================================== */
.tf-variant-surfaces-number .tf-breadcrumbs { gap: var(--tf-space-1); padding-block: var(--tf-space-3); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; }
.tf-variant-surfaces-number .tf-breadcrumbs a { padding-inline: var(--tf-space-1); }
.tf-variant-surfaces-number .tf-breadcrumbs a:hover { color: var(--tf-text); }
.tf-variant-surfaces-number .tf-chip { min-block-size: var(--tf-target); padding: 0 0.875rem; border-width: var(--tf-bw); font-weight: 700; white-space: nowrap; }
.tf-variant-surfaces-number .tf-chip small { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; }
.tf-variant-surfaces-number .tf-chip:hover { background: var(--tf-surface-subtle); border-color: var(--tf-control-border); }
.tf-variant-surfaces-number .tf-chip.is-active:hover { background: var(--tf-text); }
.tf-variant-surfaces-number .tf-chip.is-active small { color: var(--tf-on-inverse-muted); }
.tf-variant-surfaces-number :is(.tf-input, .tf-select, .tf-textarea) { min-block-size: 3rem; border-width: var(--tf-bw); border-radius: var(--tf-radius-pill); font-size: var(--tf-size-body); }
.tf-variant-surfaces-number .tf-select { font-weight: 700; cursor: pointer; }
.tf-variant-surfaces-number .tf-select:hover { background-color: var(--tf-surface-subtle); }
.tf-variant-surfaces-number :is(.tf-pagination__page, .tf-pagination__arrow) { min-inline-size: var(--tf-target); min-block-size: var(--tf-target); border-width: var(--tf-bw); border-color: var(--tf-text-muted); font-size: var(--tf-size-small); font-weight: 700; }

/* Розгортки (вісь surfaces = number): лінія кольору тексту зверху, заголовок — гротеск великими (сторінка товару,
   кабінет). Макет: .disc у concept-*-tf.html. */
.tf-variant-surfaces-number .tf-disclosure { border-block: var(--tf-bw-control) solid var(--tf-text) var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-surfaces-number .tf-disclosure > summary { min-block-size: 3.5rem; font-family: var(--tf-font-display); font-size: var(--tf-size-heading-small); font-weight: var(--tf-weight-heading); letter-spacing: 0.03em; line-height: 1; text-transform: uppercase; }