/* =========================================================================
   Головна «Номер на спині» (осі surfaces, home, discovery = number; підключається з головною лише для сайту з віссю
   number). Світле хіро: заголовок колекції великим гротеском, вкладки текстом, табло з лінією кольору тексту, фото до
   правого краю екрана; смуга «У цій колекції» з лініями; рубрики рядками; світла секція м'ячів; рядок брендів з
   лініями. Макет: design/concept-home-tf.html.
   ====================================================================== */

/* ---------- Хіро ---------- */
.tf-variant-surfaces-number .tf-hero { background: var(--tf-canvas); color: var(--tf-text); border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-surfaces-number .tf-hero::after { content: none; }
.tf-variant-surfaces-number .tf-hero__inner {
	grid-template-columns: [full-start] minmax(var(--tf-gutter), 1fr) [content-start] minmax(0, calc(var(--tf-wide-max) / 2)) [mid] minmax(0, calc(var(--tf-wide-max) / 2)) [content-end] minmax(var(--tf-gutter), 1fr) [full-end];
	gap: 0;
	inline-size: 100%;
	padding-block-start: 0;
}
.tf-variant-surfaces-number .tf-hero__copy { grid-column: content-start / mid; gap: var(--tf-space-4); padding-block: var(--tf-space-7); padding-inline-end: var(--tf-space-7); }
.tf-variant-surfaces-number .tf-hero__visual { grid-column: mid / full-end; min-block-size: 34rem; margin: 0; border-radius: 0; background: var(--tf-surface-subtle); }
.tf-variant-surfaces-number .tf-hero__visual::before { content: none; }
.tf-variant-surfaces-number .tf-hero .tf-eyebrow { color: var(--tf-brand); }
.tf-variant-surfaces-number .tf-hero .tf-hero__tabs { gap: var(--tf-space-5); padding: 0; background: none; border: 0; border-radius: 0; }
.tf-variant-surfaces-number .tf-hero .tf-hero__tabs a { min-block-size: var(--tf-target); padding: 0; border-block-end: 3px solid transparent; border-radius: 0; color: var(--tf-text-muted); font-family: var(--tf-font-display); font-size: var(--tf-size-heading-small); font-weight: var(--tf-weight-heading); letter-spacing: 0.02em; text-transform: uppercase; } /* tf-native-exception: transparent — підкреслення лише в поточної вкладки. */
.tf-variant-surfaces-number .tf-hero .tf-hero__tabs a:hover { color: var(--tf-text); }
.tf-variant-surfaces-number .tf-hero .tf-hero__tabs :is(a[aria-current="page"], a[aria-selected="true"]) { background: none; color: var(--tf-text); border-color: var(--tf-accent); }
.tf-variant-surfaces-number .tf-hero__title { font-size: min(var(--tf-size-display), 21cqi); font-weight: var(--tf-weight-heading); }
.tf-variant-surfaces-number .tf-hero__lede { color: var(--tf-text-muted); }
.tf-variant-surfaces-number .tf-hero__cta .tf-button { min-block-size: 3rem; font-family: var(--tf-font-display); font-size: 1.3125rem; font-weight: var(--tf-weight-heading); letter-spacing: 0.03em; line-height: 1.05; text-transform: uppercase; }
.tf-variant-home-number .tf-hero__cta-short { display: none; } /* короткий підпис кнопки — лише на телефоні (нижче) */
.tf-variant-surfaces-number .tf-hero__cta .tf-button--ghost { border-color: var(--tf-control-border); background: var(--tf-canvas); color: var(--tf-text); }
.tf-variant-surfaces-number .tf-hero__cta .tf-button--ghost:hover { background: var(--tf-text); color: var(--tf-on-inverse); }
.tf-variant-surfaces-number .tf-hero__meta { gap: var(--tf-space-6); padding-block-start: var(--tf-space-3); border-block-start: var(--tf-bw-control) solid var(--tf-text); color: var(--tf-text-muted); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; }
.tf-variant-surfaces-number .tf-hero__meta dd { color: var(--tf-text); font-size: 2.125rem; font-weight: var(--tf-weight-heading); line-height: 0.95; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.tf-variant-surfaces-number :is(.tf-hero, .tf-balls) .tf-video-toggle { border-color: transparent; background: var(--tf-canvas); color: var(--tf-text); } /* tf-native-exception: transparent — біла ціль 44 px на фото. */
.tf-variant-surfaces-number :is(.tf-hero, .tf-balls) :where(a, button, summary):focus-visible { outline-color: var(--tf-focus); }

/* Смуга «У цій колекції»: заголовок гротеском, міні-картки з лініями. */
.tf-variant-surfaces-number .tf-hero__strip { background: var(--tf-canvas); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-surfaces-number .tf-hero__strip-panel { gap: 0; padding-block: 0; }
.tf-variant-surfaces-number .tf-hero__strip-title { padding-block: var(--tf-space-4); color: var(--tf-text-muted); }
.tf-variant-surfaces-number .tf-hero__strip-title b { color: var(--tf-text); font-size: var(--tf-size-heading-small); font-weight: var(--tf-weight-heading); line-height: 1; text-transform: uppercase; }
.tf-variant-surfaces-number .tf-hero__strip-title a { color: var(--tf-brand); }
.tf-variant-surfaces-number .tf-hero__strip-grid { gap: 0; }
.tf-variant-surfaces-number .tf-hero__strip-grid > li { border-inline-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-card-number .tf-mini { padding: var(--tf-space-4) var(--tf-space-5); border-radius: 0; background: var(--tf-canvas); grid-template-columns: 4.75rem minmax(0, 1fr); }
.tf-variant-card-number .tf-mini:hover { transform: none; }
.tf-variant-card-number .tf-mini:hover .tf-mini__nm { text-decoration: underline; text-underline-offset: 0.2em; }
.tf-variant-card-number .tf-mini__ph { border-radius: 0; background: var(--tf-surface-subtle); }
.tf-variant-card-number .tf-mini__ph img { mix-blend-mode: multiply; }
.tf-variant-card-number .tf-mini__nm { font-weight: 700; }
.tf-variant-card-number .tf-mini .tf-price { font-size: var(--tf-size-body); }
.tf-variant-card-number .tf-mini .tf-badge { border-radius: 0; border: var(--tf-bw) solid var(--tf-text-muted); background: var(--tf-canvas); }

/* ---------- Рубрики рядками ---------- */
.tf-rows__list { list-style: none; margin: 0; padding: 0; border-block-start: var(--tf-bw-control) solid var(--tf-text); }
.tf-row {
	position: relative;
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr) auto var(--tf-target);
	grid-template-areas: "thumb name count arrow" "thumb chips count arrow";
	gap: var(--tf-space-2) var(--tf-space-6);
	align-items: center;
	padding-block: var(--tf-space-4);
	border-block-end: var(--tf-bw-divider) solid var(--tf-border);
}
.tf-row__thumb { grid-area: thumb; display: block; inline-size: 6rem; block-size: 6rem; overflow: hidden; background: var(--tf-surface-subtle); isolation: isolate; }
.tf-row__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tf-row__name { grid-area: name; align-self: end; font-size: var(--tf-size-heading-medium); }
.tf-row__name a { color: inherit; text-decoration: none; }
.tf-row__name a::after { content: ""; position: absolute; inset: 0; }
.tf-row__name a:focus-visible { outline: none; } /* tf-native-exception: none — фокус показує весь рядок. */
.tf-row:has(.tf-row__name a:focus-visible) { outline: var(--tf-bw-focus) solid var(--tf-focus); outline-offset: 2px; }
.tf-row:hover .tf-row__name { color: var(--tf-brand); }
.tf-row__count { grid-area: count; font-family: var(--tf-font-mono); font-size: var(--tf-size-small); font-weight: 700; white-space: nowrap; text-align: end; }
.tf-row__arrow { grid-area: arrow; display: grid; place-items: center; inline-size: var(--tf-target); block-size: var(--tf-target); border: var(--tf-bw-control) solid var(--tf-text); border-radius: var(--tf-radius-pill); }
.tf-row:hover .tf-row__arrow { background: var(--tf-text); color: var(--tf-on-inverse); }
.tf-row__chips { grid-area: chips; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--tf-space-2); list-style: none; margin: 0; padding: 0; }
.tf-row__chips a { display: inline-flex; align-items: center; gap: var(--tf-space-2); min-block-size: var(--tf-target); padding-inline: var(--tf-space-3); border: var(--tf-bw) solid var(--tf-text-muted); border-radius: var(--tf-radius-pill); background: var(--tf-canvas); color: var(--tf-text); font-size: var(--tf-size-small); font-weight: 700; text-decoration: none; white-space: nowrap; }
.tf-row__chips a:has(.tf-row__code) { padding-inline-start: 0.375rem; }
.tf-row__chips a:hover { border-color: var(--tf-text); background: var(--tf-surface-subtle); }
.tf-row__code { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; background: var(--tf-surface-subtle); font-family: var(--tf-font-display); font-size: 1.1875rem; font-weight: var(--tf-weight-heading); line-height: 1; }
.tf-row__cnt { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); color: var(--tf-text-muted); }
.tf-row__chips .tf-row__help { border-style: dashed; color: var(--tf-brand); }

/* ---------- Підбір: світла смуга з рамкою кольору тексту; підсумок світлий; покриття — код гротеском ---------- */
.tf-variant-surfaces-number .tf-guided__panel { gap: 0; border: var(--tf-bw-control) solid var(--tf-text); }
.tf-variant-surfaces-number .tf-guided__steps { align-self: stretch; padding: 0; border: 0; border-inline-end: var(--tf-bw-control) solid var(--tf-text); border-radius: 0; }
.tf-variant-surfaces-number .tf-guided__optional { letter-spacing: 0; text-transform: none; }
.tf-variant-surfaces-number .tf-guided__step { border-block-end-style: solid; }
.tf-variant-surfaces-number .tf-guided__two .tf-guided__step:first-child { border-inline-end-style: solid; }
.tf-variant-surfaces-number .tf-guided__step legend { 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-step-num { border-radius: var(--tf-radius-dot); font-family: var(--tf-font-display); }
.tf-variant-surfaces-number .tf-surf { border-width: var(--tf-bw); border-color: var(--tf-text-muted); border-radius: var(--tf-radius-pill); }
.tf-variant-surfaces-number .tf-surf:hover { border-color: var(--tf-text); background: var(--tf-surface-subtle); }
.tf-variant-surfaces-number .tf-surf__code { border: 0; border-radius: 0; background: var(--tf-surface-subtle); font-family: var(--tf-font-display); font-size: 1.375rem; font-weight: var(--tf-weight-heading); }
.tf-variant-surfaces-number .tf-surf:has(input:checked) { border-color: var(--tf-text); background: var(--tf-canvas); box-shadow: inset 0 0 0 1px var(--tf-text); }
.tf-variant-surfaces-number .tf-surf:has(input:checked) .tf-surf__code { background: var(--tf-text); color: var(--tf-on-inverse); }
.tf-variant-surfaces-number :is(.tf-guided__sizes, .tf-guided__budgets) .tf-chip { border-radius: var(--tf-radius-pill); }
/* «Який розмір?» — «Дорослі / Дитячі» (власник 2026-10-01): з JS розміри групи відкриваються після натискання;
   без JS обидві групи підряд із підписами. */
.tf-guided__size-tabs { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin-block-end: var(--tf-space-3); }
.tf-guided__size-tab { cursor: pointer; }
.tf-variant-surfaces-number .tf-guided__size-tab[aria-pressed="true"],
.tf-variant-surfaces-number .tf-guided__size-tab[aria-pressed="true"]:hover { background: var(--tf-text); color: var(--tf-on-inverse); border-color: var(--tf-text); }
.tf-guided__size-group { display: grid; gap: var(--tf-space-2); }
/* «Який бюджет?» повзунком (власник 2026-10-01): від найдешевшого до найдорожчого товару; суми — текстовим шрифтом
   (у Sofia Sans немає ₴). Ціль дотику — уся висота поля (44 px), доріжка заповнюється до положення (--tf-range-fill з JS). */
.tf-guided__range { display: grid; gap: var(--tf-space-1); }
.tf-guided__range-value { margin: 0; font-family: var(--tf-font-body); font-size: var(--tf-size-heading-small); font-weight: 700; line-height: 1.2; }
.tf-guided__range-ends { display: flex; justify-content: space-between; gap: var(--tf-space-3); margin: 0; color: var(--tf-text-muted); font-size: var(--tf-size-caption); }
.tf-guided__range-input { inline-size: 100%; block-size: var(--tf-target); margin: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; } /* tf-native-exception: transparent — тло дає доріжка. */
.tf-guided__range-input::-webkit-slider-runnable-track { block-size: 0.25rem; border-radius: var(--tf-radius-pill); background: linear-gradient(to right, var(--tf-accent) var(--tf-range-fill, 100%), var(--tf-border) var(--tf-range-fill, 100%)); }
.tf-guided__range-input::-moz-range-track { block-size: 0.25rem; border-radius: var(--tf-radius-pill); background: var(--tf-border); }
.tf-guided__range-input::-moz-range-progress { block-size: 0.25rem; border-radius: var(--tf-radius-pill); background: var(--tf-accent); }
.tf-guided__range-input::-webkit-slider-thumb { inline-size: 1.75rem; block-size: 1.75rem; margin-block-start: -0.75rem; border: var(--tf-bw-control) solid var(--tf-text); border-radius: 50%; background: var(--tf-canvas); appearance: none; -webkit-appearance: none; }
.tf-guided__range-input::-moz-range-thumb { inline-size: 1.75rem; block-size: 1.75rem; box-sizing: border-box; border: var(--tf-bw-control) solid var(--tf-text); border-radius: 50%; background: var(--tf-canvas); }
.tf-guided__range-input:focus-visible { outline: var(--tf-bw-focus) solid var(--tf-focus); outline-offset: var(--tf-space-1); }
.tf-guided__size-group .tf-guided__junior { grid-column: 1 / -1; } /* «Лише дитячі моделі» — довгий підпис, окремим рядком */
.tf-guided__size-title { margin: 0; color: var(--tf-text-muted); 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-guided__size-tabs[hidden],
.tf-guided__size-group[hidden],
.has-size-tabs .tf-guided__size-title {
	/* tf-native-exception: none — без JS вкладок немає; з JS група прихована до вибору, підпис групи — на кнопці. */
	display: none;
}
.tf-variant-surfaces-number .tf-guided__summary { border-radius: 0; background: var(--tf-canvas); color: var(--tf-text); }
.tf-variant-surfaces-number .tf-guided__summary .tf-eyebrow { color: var(--tf-brand); }
.tf-variant-surfaces-number .tf-guided__summary :is(dt, dd.is-empty, .tf-guided__est span, .tf-guided__hint) { color: var(--tf-text-muted); }
.tf-variant-surfaces-number .tf-guided__est { border-block-start-color: var(--tf-border); }
.tf-variant-surfaces-number .tf-guided__est b { font-size: 2.125rem; font-weight: var(--tf-weight-heading); line-height: 0.95; }
.tf-variant-surfaces-number .tf-guided__est.is-zero b { color: var(--tf-accent); }
.tf-variant-surfaces-number .tf-guided__relax { color: var(--tf-brand); }
.tf-variant-surfaces-number .tf-guided__summary :where(a, button):focus-visible { outline-color: var(--tf-focus); }

/* ---------- М'ячі: світла секція ---------- */
.tf-variant-surfaces-number .tf-balls { background: var(--tf-canvas); color: var(--tf-text); }
.tf-variant-surfaces-number .tf-balls::after { content: none; }
.tf-variant-surfaces-number .tf-balls__inner { padding-block: 0; }
.tf-variant-surfaces-number .tf-balls__title { font-weight: var(--tf-weight-heading); line-height: var(--tf-lh-heading); }
.tf-variant-surfaces-number .tf-balls__title em { color: inherit; }
.tf-variant-surfaces-number .tf-balls__lede { color: var(--tf-text-muted); }
.tf-variant-surfaces-number .tf-balls .tf-eyebrow { color: var(--tf-brand); }
.tf-variant-surfaces-number .tf-balls__visual { min-block-size: 22rem; border-radius: 0; background: var(--tf-surface-subtle); }
.tf-variant-surfaces-number .tf-balls__visual::before { content: none; }
.tf-variant-surfaces-number .tf-balls__brands { gap: var(--tf-space-2); padding: 0; background: none; border: 0; border-radius: 0; }
.tf-variant-surfaces-number .tf-balls__brands a { min-block-size: var(--tf-target); padding-inline: 0.875rem; border: var(--tf-bw) solid var(--tf-control-border); border-radius: var(--tf-radius-pill); background: var(--tf-canvas); color: var(--tf-text); }
.tf-variant-surfaces-number .tf-balls__brands a:hover { background: var(--tf-surface-subtle); }
.tf-variant-surfaces-number .tf-balls__brands a[aria-current="true"] { background: var(--tf-text); color: var(--tf-on-inverse); }
.tf-variant-surfaces-number .tf-balls__grid { gap: 0; border-block-start: var(--tf-bw-control) solid var(--tf-text); }
.tf-variant-surfaces-number .tf-balls__grid > li { border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-surfaces-number .tf-balls__grid > li:nth-child(odd) { border-inline-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-surfaces-number .tf-balls__actions .tf-button--ghost { border-color: var(--tf-text); background: var(--tf-text); color: var(--tf-on-inverse); }

/* ---------- Бренди: плитки з лініями ---------- */
.tf-variant-surfaces-number .tf-brand-row { gap: 0; border-block: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-surfaces-number .tf-brand-row > li + li { border-inline-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-variant-surfaces-number .tf-brand-row__link { border: 0; border-radius: 0; color: var(--tf-text); }
.tf-variant-surfaces-number .tf-brand-row__link:hover { background: var(--tf-surface-subtle); }

/* ---------- Responsive ---------- */
@media (max-width: 63.99rem) {
	.tf-variant-surfaces-number .tf-guided__steps { border-inline-end: 0; border-block-end: var(--tf-bw-control) solid var(--tf-text); }
	.tf-variant-surfaces-number .tf-hero__visual { aspect-ratio: 16 / 10; max-block-size: none; }
	.tf-variant-surfaces-number .tf-hero__inner { grid-template-columns: [full-start] var(--tf-gutter) [content-start mid] minmax(0, 1fr) [content-end] var(--tf-gutter) [full-end]; }
	.tf-variant-surfaces-number .tf-hero__copy { grid-column: content-start / content-end; padding-inline-end: 0; padding-block-end: var(--tf-space-5); }
	.tf-variant-surfaces-number .tf-hero__visual { grid-column: full-start / full-end; min-block-size: 0; }
	.tf-variant-surfaces-number .tf-hero__strip-grid > li { border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
	/* Одна колонка: висоту відео м'ячів дає пропорція (front-page.css) — 22rem при 3:2 розтягували блок ширше екрана. */
	.tf-variant-surfaces-number .tf-balls__visual { min-block-size: 0; }
}
@media (max-width: 47.99rem) {
	.tf-row { grid-template-columns: 4rem minmax(0, 1fr) var(--tf-target); grid-template-areas: "thumb name arrow" "thumb count arrow" "chips chips chips"; gap: var(--tf-space-1) var(--tf-space-3); }
	.tf-row__thumb { inline-size: 4rem; block-size: 4rem; }
	.tf-row__name { align-self: center; font-size: 1.875rem; }
	.tf-row__count { text-align: start; font-size: var(--tf-size-caption); }
	.tf-row__chips { flex-wrap: nowrap; overflow-x: auto; margin: calc(var(--tf-space-1) * -1); padding: var(--tf-space-1); }
	.tf-variant-surfaces-number .tf-balls__grid > li { border-inline-end: 0; }
	/* Хіро на телефоні (власник 2026-10-01): кнопки трохи менші (44 px — ціль дотику), «товари · покриття · від» —
	   завжди одним рядком: кегль чисел від ширини екрана (на 320 px найдовше «3 468,00 ₴» і «FG · AG · MG» вміщуються). */
	.tf-variant-surfaces-number .tf-hero__cta .tf-button { min-block-size: 2.75rem; padding-inline: var(--tf-space-4); font-size: 1.125rem; }
	/* Кнопки хіро в один ряд (власник 2026-10-04: «щоб по висоті відео краще влазило») — на 390 px фото/відео на 58 px
	   вище: «До колекції →» замість «До товарів колекції», від «Підібрати за покриттям» видно «Підібрати», решта — для
	   читачів екрана (Homepage::hero_cta_label). Ряд ділиться порівну; кнопки не переносять слова, тож коли не
	   вміщуються (200% zoom), кожна стає на свій рядок. */
	.tf-variant-home-number .tf-hero__cta .tf-button { flex: 1 1 0; white-space: nowrap; }
	.tf-variant-home-number .tf-hero__cta-more { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.tf-variant-home-number .tf-hero__cta-long { display: none; }
	.tf-variant-home-number .tf-hero__cta-short { display: inline; }
	/* Опис колекції на телефоні не показується (власник 2026-10-04: «на маленьких розширеннях можемо приховувати текст …
	   так для всіх колекцій») — фото/відео піднімається на перший екран; з 48rem опис на місці. */
	.tf-variant-home-number .tf-hero__lede { display: none; }
	.tf-variant-surfaces-number .tf-hero__meta { flex-wrap: nowrap; justify-content: space-between; gap: var(--tf-space-3); }
	.tf-variant-surfaces-number .tf-hero__meta div { min-inline-size: 0; }
	.tf-variant-surfaces-number .tf-hero__meta dd { font-size: clamp(1.125rem, 6.5vw, 1.5rem); }
	.tf-variant-surfaces-number .tf-hero__visual { aspect-ratio: 4 / 3; }
	/* «Колекції у фокусі» ближче до шапки (власник 2026-10-01) — фото й відео колекції вище на першому екрані. */
	.tf-variant-surfaces-number .tf-hero__inner { padding-block-start: 0; }
	.tf-variant-surfaces-number .tf-hero__copy { padding-block: var(--tf-space-4) var(--tf-space-3); } /* фото/відео ближче до чисел (власник 2026-10-01) */
	.tf-variant-surfaces-number .tf-brand-row > li:nth-child(3n + 1) { border-inline-start: 0; }
}