/* =========================================================================
   Teamfootball — головна: хіро «Колекції у фокусі», підбір, м'ячі, категорії,
   товари у фокусі, редакційний блок. Лише токени (--tf-*).
   ====================================================================== */
.tf-home-main { padding: 0; }

/* ---------- Хіро ---------- */
.tf-hero { position: relative; overflow: hidden; background: var(--tf-inverse); color: var(--tf-on-inverse); }
.tf-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, var(--tf-field-line) 0 1px, transparent 1px 120px); } /* tf-native-exception: transparent — декоративна розмітка поля. */
.tf-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tf-space-7); align-items: stretch; padding-block-start: var(--tf-space-7); }
.tf-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: var(--tf-space-5); padding-block-end: var(--tf-space-7); min-inline-size: 0; container-type: inline-size; }
.tf-hero__tabs { display: inline-flex; flex-wrap: wrap; gap: var(--tf-space-1); padding: var(--tf-space-1); inline-size: max-content; max-inline-size: 100%; background: var(--tf-inverse-raised); border: var(--tf-bw) solid var(--tf-inverse-line); border-radius: var(--tf-radius-pill); }
.tf-hero__tabs a { display: inline-flex; align-items: center; min-block-size: 2.25rem; padding: var(--tf-space-2) var(--tf-space-4); border-radius: var(--tf-radius-pill); color: var(--tf-on-inverse-muted); font-weight: 700; font-size: var(--tf-size-small); text-decoration: none; }
.tf-hero__tabs a:hover { color: var(--tf-on-inverse); }
.tf-hero__tabs a[aria-current="page"],
.tf-hero__tabs a[aria-selected="true"] { background: var(--tf-surface); color: var(--tf-text); }
.tf-hero__panel { display: grid; gap: var(--tf-space-5); }
.tf-hero__title { font-size: min(var(--tf-size-display), 12cqi); font-weight: 800; line-height: var(--tf-lh-display); text-transform: uppercase; overflow-wrap: normal; hyphens: manual; }
.tf-hero__lede { font-size: var(--tf-size-lede); color: var(--tf-on-inverse-muted); max-inline-size: 44ch; }
.tf-hero__cta { display: flex; flex-wrap: wrap; gap: var(--tf-space-3); }
.tf-hero__meta { display: flex; flex-wrap: wrap; gap: var(--tf-space-6); margin: 0; font-family: var(--tf-font-mono); font-size: var(--tf-size-caption); color: var(--tf-on-inverse-subtle); }
.tf-hero__meta div { display: flex; flex-direction: column-reverse; gap: var(--tf-space-1); }
.tf-hero__meta dd { font-family: var(--tf-font-display); font-size: var(--tf-size-lede); font-weight: 700; color: var(--tf-on-inverse); }
.tf-hero__visual { position: relative; min-block-size: 32rem; margin-block-end: var(--tf-space-7); border-radius: var(--tf-radius-l); overflow: hidden; background: var(--tf-inverse-deep); }
.tf-hero__media { position: absolute; inset: 0; }
.tf-hero__visual img,
.tf-hero__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 40%; }
.tf-hero__media--video img,
.tf-hero__video { object-position: center; }
.tf-hero__video,
.tf-balls__video { opacity: 0; transition: opacity var(--tf-motion-normal) var(--tf-easing); }
.is-live > .tf-hero__video,
.is-live > .tf-balls__video { opacity: 1; }
.tf-hero__visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--tf-inverse) 0%, var(--tf-pitch-fade) 35%), linear-gradient(0deg, var(--tf-pitch-veil) 0%, var(--tf-pitch-fade) 45%); }
/* Кнопка паузи декоративного відео (хіро, м'ячі) — 44 px, з'являється лише з JS. */
.tf-video-toggle { position: absolute; inset-inline-start: var(--tf-space-5); inset-block-end: var(--tf-space-5); z-index: 2; display: inline-grid; place-items: center; inline-size: var(--tf-icon-button); block-size: var(--tf-icon-button); padding: 0; border: var(--tf-bw-control) solid var(--tf-inverse-line-strong); border-radius: var(--tf-radius-round); background: var(--tf-inverse-raised); color: var(--tf-on-inverse); cursor: pointer; transition: border-color var(--tf-motion-fast) var(--tf-easing); }
.tf-video-toggle:hover { border-color: var(--tf-on-inverse); }
.tf-video-toggle[data-state="playing"] .tf-icon--play,
.tf-video-toggle[data-state="paused"] .tf-icon--pause { display: none; }
.tf-hero__strip { position: relative; z-index: 1; background: var(--tf-inverse-scrim); border-block-start: var(--tf-bw-divider) solid var(--tf-inverse-line); }
.tf-hero__strip-panel { display: grid; grid-template-columns: 13.75rem minmax(0, 1fr); gap: var(--tf-space-6); align-items: center; padding-block: var(--tf-space-5); }
.tf-hero__strip-title { font-size: var(--tf-size-caption); color: var(--tf-on-inverse-muted); }
.tf-hero__strip-title b { display: block; margin-block-end: var(--tf-space-1); font-family: var(--tf-font-display); font-size: var(--tf-size-body); color: var(--tf-on-inverse); }
.tf-hero__strip-title a { color: var(--tf-on-inverse-brand); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.tf-hero__strip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tf-space-3); list-style: none; margin: 0; padding: 0; }
.tf-hero__strip-grid > li { min-inline-size: 0; }

/* ---------- Підбір за покриттям ---------- */
.tf-guided__panel { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: var(--tf-space-5); align-items: start; }
.tf-guided__steps { container: tf-guided-steps / inline-size; padding: var(--tf-space-2); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); }
.tf-guided__step { position: relative; padding: var(--tf-space-5) var(--tf-space-5) var(--tf-space-6); border-block-end: var(--tf-bw) dashed var(--tf-border); min-inline-size: 0; }
.tf-guided__step legend { float: left; inline-size: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2) var(--tf-space-3); margin-block-end: var(--tf-space-4); font-family: var(--tf-font-display); font-size: var(--tf-size-body); font-weight: 700; }
.tf-guided__step > :not(legend) { clear: both; }
.tf-guided__step--optional .tf-step-num { background: var(--tf-surface-subtle); color: var(--tf-text-muted); }
.tf-guided__optional { font-family: var(--tf-font-body); font-size: var(--tf-size-caption); font-weight: 400; color: var(--tf-text-muted); }
.tf-guided__skip { display: inline-flex; align-items: center; margin-block-start: var(--tf-space-3); min-block-size: var(--tf-target); padding: 0; border: 0; background: transparent; color: var(--tf-text-muted); font-size: var(--tf-size-caption); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } /* tf-native-exception: transparent. */
.tf-surfaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tf-space-3); }
.tf-surf {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--tf-space-3);
	align-items: center;
	min-block-size: var(--tf-target);
	padding: var(--tf-space-3) var(--tf-space-4);
	border: var(--tf-bw-control) solid var(--tf-border);
	border-radius: var(--tf-radius-m);
	background: var(--tf-canvas);
	cursor: pointer;
	transition: border-color var(--tf-motion-fast) var(--tf-easing), background var(--tf-motion-fast) var(--tf-easing);
}
.tf-surf input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tf-surf__code { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-m); background: var(--tf-surface); font-family: var(--tf-font-mono); font-size: var(--tf-size-body); font-weight: 700; }
/* Фото покриття замість коду (inc/surface-media.php): лише коли зображення є в усіх плитках; код — у підписі поруч. */
.tf-surf__code--photo { inline-size: 4rem; block-size: 4rem; overflow: hidden; border: 0; background: var(--tf-surface-subtle); }
.tf-surf__code--photo :is(picture, img) { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tf-surf__text { display: grid; gap: 2px; min-inline-size: 0; }
.tf-surf__text b { font-size: var(--tf-size-small); }
.tf-surf__text small { font-size: var(--tf-size-label); color: var(--tf-text-muted); }
.tf-surf:hover { border-color: var(--tf-brand); }
.tf-surf:has(input:checked) { border-color: var(--tf-inverse); background: var(--tf-surface); box-shadow: inset 0 0 0 1px var(--tf-inverse); }
.tf-surf:has(input:checked) .tf-surf__code { background: var(--tf-inverse); color: var(--tf-on-inverse); border-color: var(--tf-inverse); }
.tf-surf:has(input:checked) .tf-surf__text b::after { content: " ✓"; }
.tf-surf:has(input:focus-visible) { outline: var(--tf-bw-focus) solid var(--tf-focus); outline-offset: var(--tf-space-1); }
/* Розміри ширші за бюджет; мінімум бюджету — щоб заголовок «Який бюджет?» не переносився. */
.tf-guided__two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(14.5rem, 1fr); }
.tf-guided__two .tf-guided__step { border-block-end: 0; }
.tf-guided__two .tf-guided__step:first-child { border-inline-end: var(--tf-bw) dashed var(--tf-border); }
/* У вужчій колонці бюджету підпис однаково переноситься — тримаємо його другим рядком в обох кроках, щоб варіанти починались на одній висоті. */
.tf-guided__two .tf-guided__optional { flex-basis: 100%; padding-inline-start: calc(1.75rem + var(--tf-space-3)); }
/* Розміри й бюджет — прямокутні плитки, як вибір розміру на сторінці товару (radius-m, жирний текст). */
.tf-guided__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); }
.tf-guided__budgets { display: grid; grid-template-columns: minmax(0, 1fr); }
.tf-guided__sizes .tf-chip,
.tf-guided__budgets .tf-chip { min-block-size: var(--tf-target); border-radius: var(--tf-radius-m); font-weight: 700; }
.tf-guided__sizes .tf-chip { justify-content: center; padding-inline: var(--tf-space-1); }
.tf-guided__sizes .tf-guided__junior { grid-column: span 2; }
/* Вузька панель кроків (мобільний або десктоп, де поруч підсумок): розмір і бюджет — одне під одним. */
@container tf-guided-steps (max-width: 39.99rem) {
	.tf-guided__two { grid-template-columns: minmax(0, 1fr); }
	.tf-guided__two .tf-guided__step:first-child { border-inline-end: 0; border-block-end: var(--tf-bw) dashed var(--tf-border); }
	.tf-guided__two .tf-guided__optional { flex-basis: auto; padding-inline-start: 0; }
	.tf-guided__budgets { max-inline-size: 20rem; }
}
.tf-guided__summary {
	position: sticky;
	inset-block-start: calc(var(--tf-header-h) + var(--tf-space-5));
	display: flex;
	flex-direction: column;
	gap: var(--tf-space-4);
	padding: var(--tf-space-5);
	background: var(--tf-inverse);
	border-radius: var(--tf-radius-l);
}
.tf-guided__summary dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tf-space-3) var(--tf-space-4); font-size: var(--tf-size-small); }
.tf-guided__summary dt { color: var(--tf-on-inverse-subtle); }
.tf-guided__summary dd { font-weight: 700; text-align: end; overflow-wrap: anywhere; }
.tf-guided__summary dd.is-empty { color: var(--tf-on-inverse-subtle); font-weight: 500; }
.tf-guided__est { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tf-space-3); padding-block-start: var(--tf-space-4); border-block-start: var(--tf-bw-divider) solid var(--tf-inverse-line); }
.tf-guided__est b { font-family: var(--tf-font-display); font-size: var(--tf-size-heading-small); font-weight: 700; }
.tf-guided__est span { font-size: var(--tf-size-caption); color: var(--tf-on-inverse-subtle); text-align: end; }
.tf-guided__summary .tf-button { inline-size: 100%; }
.tf-guided__hint { font-size: var(--tf-size-caption); color: var(--tf-on-inverse-subtle); }
.tf-guided__est { transition: opacity var(--tf-motion-fast) var(--tf-easing); }
.tf-guided__est.is-loading { opacity: 0.6; }
.tf-guided__est.is-zero b { color: var(--tf-accent-bright); }
.tf-guided__relax { font-size: var(--tf-size-caption); color: var(--tf-on-inverse-brand); }
.tf-guided__none { margin-block-start: var(--tf-space-3); font-size: var(--tf-size-caption); color: var(--tf-text-muted); }

/* ---------- М'ячі: відео зліва (розмір і стиль медіа хіро), м'ячі з фільтром за брендом справа ---------- */
.tf-balls { position: relative; overflow: hidden; margin-block-start: var(--tf-section-gap); background: var(--tf-inverse); }
.tf-balls::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, var(--tf-field-line) 0 1px, transparent 1px 120px); } /* tf-native-exception: transparent — декоративна розмітка поля, як у хіро. */
.tf-balls__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "visual body"; gap: var(--tf-space-6) var(--tf-space-7); padding-block: var(--tf-space-7); }
.tf-balls--no-media .tf-balls__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; }
.tf-balls__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tf-space-5) var(--tf-space-7); }
.tf-balls__head > div { display: grid; gap: var(--tf-space-3); }
.tf-balls__title { font-size: var(--tf-size-heading); font-weight: 800; line-height: 1; text-transform: uppercase; }
.tf-balls__title em { font-style: normal; color: var(--tf-accent-bright); }
.tf-balls__lede { color: var(--tf-on-inverse-muted); max-inline-size: 52ch; }
.tf-balls__visual { grid-area: visual; position: relative; min-block-size: 32rem; margin: 0; border-radius: var(--tf-radius-l); overflow: hidden; background: var(--tf-inverse-deep); }
/* Перехід як у хіро, дзеркально: медіа розчиняється у фон з боку м'ячів (праворуч) + вуаль знизу. */
.tf-balls__visual::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(270deg, var(--tf-inverse) 0%, var(--tf-pitch-fade) 35%), linear-gradient(0deg, var(--tf-pitch-veil) 0%, var(--tf-pitch-fade) 45%); }
.tf-balls__media { position: absolute; inset: 0; }
.tf-balls__media img,
.tf-balls__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.tf-balls__body { grid-area: body; container: tf-balls-body / inline-size; display: flex; flex-direction: column; gap: var(--tf-space-4); min-inline-size: 0; }
.tf-balls__brands a[aria-current="true"] { background: var(--tf-surface); color: var(--tf-text); }
.tf-balls__count { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 500; opacity: 0.7; margin-inline-start: var(--tf-space-1); }
.tf-balls__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tf-space-3); list-style: none; margin: 0; padding: 0; }
.tf-balls__grid > li { min-inline-size: 0; }
.tf-balls__grid .tf-mini { block-size: 100%; }
.tf-balls__actions { display: flex; flex-wrap: wrap; gap: var(--tf-space-3); margin-block-start: auto; padding-block-start: var(--tf-space-2); }
@container tf-balls-body (max-width: 29.99rem) {
	.tf-balls__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Категорії ---------- */
/* Один ряд на будь-яку кількість плиток (4 рубрики + «М'ячі»): перша — ширша, решта — рівні неявні колонки. */
.tf-cat-grid { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1.4fr); grid-auto-columns: minmax(0, 1fr); grid-template-rows: 17.5rem; gap: var(--tf-space-3); list-style: none; margin: 0; padding: 0; }
.tf-cat { position: relative; min-inline-size: 0; border-radius: var(--tf-radius-l); overflow: hidden; background: var(--tf-inverse); color: var(--tf-on-inverse); isolation: isolate; container-type: inline-size; }
.tf-cat > a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--tf-space-1); block-size: 100%; padding: var(--tf-space-5); color: inherit; text-decoration: none; }
/* Плитка обрізає вміст (overflow: hidden), тому кільце фокуса малюється всередині неї: світле на темних плитках і фото, звичайне — на світлих. */
.tf-cat > a:focus-visible { outline-color: var(--tf-focus-on-inverse); outline-offset: calc((var(--tf-bw-focus) + var(--tf-space-1)) * -1); border-radius: inherit; }
:is(.tf-cat--tone-3, .tf-cat--product) > a:focus-visible { outline-color: var(--tf-focus); }
@container (max-width: 13rem) {
	.tf-cat > a { padding: var(--tf-space-4); }
}
.tf-cat img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 60%; z-index: -1; }
.tf-cat--photo > a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--tf-pitch-veil-strong) 0%, var(--tf-pitch-veil-soft) 60%); }
.tf-cat--tone-2 { background: var(--tf-inverse-accent); }
.tf-cat--tone-3 { background: var(--tf-surface-subtle); color: var(--tf-text); }
.tf-cat--tone-4 { background: var(--tf-inverse-deep); }
/* Фото реального товару рубрики: світла плитка, фото вписане у вільну висоту. Тло знімка зливається з плиткою:
   brightness/contrast вибілює світло-сіре студійне тло (знімки брендів — близько 93–96 % білого), multiply прибирає біле.
   Змішування замкнене в самій зоні фото (власне тло кольору плитки + isolation), і на hover у ній нічого не анімується:
   Safari губить mix-blend-mode, щойно змішуваний елемент або його нащадок стає окремим композитним шаром
   (transform/transition), — тоді проступає біле тло знімка. */
.tf-cat--product { --tf-cat-surface: var(--tf-surface-subtle); background: var(--tf-cat-surface); color: var(--tf-text); }
.tf-cat__media { position: relative; flex: 1 1 0; min-block-size: 0; margin-block-end: var(--tf-space-2); background: var(--tf-cat-surface); isolation: isolate; }
.tf-cat__media img { object-fit: contain; object-position: center; filter: brightness(1.08) contrast(1.08); mix-blend-mode: multiply; }
/* Кегль заголовка обмежено шириною плитки (cqi): довге слово на кшталт «Екіпірування» вміщується і не рветься посеред складу. */
.tf-cat__title { font-family: var(--tf-font-display); font-size: min(var(--tf-size-heading-small), 8.5cqi); font-weight: 700; line-height: var(--tf-lh-heading); }
.tf-cat__count { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-mono); color: var(--tf-on-inverse-brand); }
.tf-cat__text { font-size: var(--tf-size-caption); color: var(--tf-on-inverse-brand); }
:is(.tf-cat--tone-3, .tf-cat--product) .tf-cat__count { color: var(--tf-brand); }
:is(.tf-cat--tone-3, .tf-cat--product) .tf-cat__text { color: var(--tf-text-muted); }
.tf-cat__arrow { position: absolute; inset-block-start: var(--tf-space-4); inset-inline-end: var(--tf-space-4); display: grid; place-items: center; inline-size: 2.375rem; block-size: 2.375rem; border-radius: var(--tf-radius-pill); background: var(--tf-inverse-line); transition: background var(--tf-motion-fast) var(--tf-easing), transform var(--tf-motion-fast) var(--tf-easing); }
:is(.tf-cat--tone-3, .tf-cat--product) .tf-cat__arrow { background: var(--tf-subtle-dark); }
.tf-cat > a:hover .tf-cat__arrow { background: var(--tf-accent); color: var(--tf-on-accent); transform: translate(2px, -2px); }
.tf-cat__glyph { position: absolute; inset-inline-end: -0.375rem; inset-block-end: -0.625rem; inline-size: 9.375rem; block-size: 9.375rem; opacity: 0.16; z-index: -1; }
.tf-cat__glyph svg { inline-size: 100%; block-size: 100%; }

/* ---------- Бренди (D-03): рядок логотипів ---------- */
.tf-brand-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--tf-space-3); margin: 0; padding: 0; list-style: none; }
.tf-brand-row__link { --tf-brand-mark-size: 2rem; display: flex; align-items: center; justify-content: center; min-block-size: 6rem; padding: var(--tf-space-4); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); color: var(--tf-text); transition: border-color var(--tf-motion-fast) var(--tf-easing); }
.tf-brand-row__link .tf-brand-mark { color: inherit; transition: color var(--tf-motion-fast) var(--tf-easing); }
.tf-brand-row__link:hover { border-color: var(--tf-text); }
.tf-brand-row__link:hover .tf-brand-mark { color: var(--tf-brand); }

/* ---------- Редакційний блок ---------- */
.tf-editorial__box { display: grid; grid-template-columns: 1.1fr 1fr; min-block-size: 27.5rem; background: var(--tf-inverse-strong); border-radius: var(--tf-radius-l); overflow: hidden; }
.tf-editorial__media { position: relative; min-block-size: 16rem; }
.tf-editorial__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tf-editorial__media figcaption { position: absolute; inset-inline-start: var(--tf-space-5); inset-block-start: var(--tf-space-5); padding: var(--tf-space-2) var(--tf-space-3); background: var(--tf-ink-scrim); border-radius: var(--tf-radius-s); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-mono); text-transform: uppercase; }
.tf-editorial__copy { display: flex; flex-direction: column; justify-content: center; gap: var(--tf-space-5); padding: var(--tf-space-7); }
.tf-editorial__copy h2 { font-size: var(--tf-size-heading); font-weight: 800; line-height: 1; text-transform: uppercase; }
.tf-editorial__copy h2 em { font-style: normal; color: var(--tf-accent-bright); }
.tf-editorial__copy > p:not(.tf-eyebrow) { color: var(--tf-on-inverse-muted); max-inline-size: 46ch; }
.tf-surface-links { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); }
.tf-surface-links a { display: inline-flex; align-items: center; gap: var(--tf-space-3); min-block-size: var(--tf-control-compact); padding: var(--tf-space-2) var(--tf-space-4) var(--tf-space-2) var(--tf-space-2); border: var(--tf-bw) solid var(--tf-inverse-line-strong); border-radius: var(--tf-radius-pill); color: var(--tf-on-inverse); font-size: var(--tf-size-small); font-weight: 600; text-decoration: none; transition: background var(--tf-motion-fast) var(--tf-easing), color var(--tf-motion-fast) var(--tf-easing); }
.tf-surface-links a:hover { background: var(--tf-surface); color: var(--tf-text); }
.tf-surface-links code { padding: var(--tf-space-1) var(--tf-space-2); border-radius: var(--tf-radius-dot); background: var(--tf-accent); color: var(--tf-on-accent); font-size: var(--tf-size-label); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 79.99rem) {
	.tf-hero__strip-panel { grid-template-columns: minmax(0, 1fr); gap: var(--tf-space-3); }
}
@media (max-width: 63.99rem) {
	.tf-brand-row { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); } /* Шість брендів — один ряд і на 768. */
	.tf-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--tf-space-5); padding-block-start: var(--tf-space-6); }
	.tf-hero__copy { padding-block-end: 0; }
	/* align-self: start — висоту дає пропорція: сітка хіро розтягує елементи (align-items: stretch), і Safari тягнув
	   медіа до висоти ряду без пропорції — 0, тож на iPhone хіро лишалося без зображення й відео. Chrome — без змін. */
	.tf-hero__visual { align-self: start; min-block-size: 0; aspect-ratio: var(--tf-media-editorial); border-radius: var(--tf-radius-l); margin-block-end: var(--tf-space-6); }
	.tf-hero__strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf-guided__panel { grid-template-columns: minmax(0, 1fr); }
	.tf-guided__summary { position: static; }
	.tf-balls__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "visual" "body"; gap: var(--tf-space-5); padding-block: var(--tf-space-6); }
	/* align-self: start — висоту дає пропорція (як у хіро, 3.1.11): Safari тягнув медіа до висоти ряду сітки, ряд виходив
	   нижчим за відео, і фільтр брендів заходив під відео (знімок власника 2026-10-01). Chrome — без змін. */
	.tf-balls__visual { align-self: start; min-block-size: 0; aspect-ratio: var(--tf-media-editorial); }
	.tf-cat-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 13.75rem; }
	.tf-cat:first-child:nth-last-child(odd) { grid-column: 1 / -1; } /* Непарна кількість плиток: перша — на всю ширину, решта — парами. */
	.tf-editorial__box { grid-template-columns: minmax(0, 1fr); }
	.tf-editorial__copy { padding: var(--tf-space-6); }
}
@media (max-width: 47.99rem) {
	.tf-hero__strip-grid { grid-template-columns: minmax(0, 1fr); }
	.tf-hero__visual { aspect-ratio: var(--tf-media-portrait); max-block-size: 24rem; }
	.tf-hero__meta { gap: var(--tf-space-4); }
	.tf-balls__actions .tf-button { inline-size: 100%; }
	.tf-surfaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tf-guided__step { padding: var(--tf-space-4) var(--tf-space-3) var(--tf-space-5); }
	.tf-surfaces { grid-template-columns: minmax(0, 1fr); }
	.tf-cat-grid { grid-auto-rows: 10.625rem; }
	.tf-cat-grid:has(.tf-cat--product) { grid-auto-rows: 12.5rem; } /* Фото товару потребує висоти; ліворуч — щоб стрілка не лягала на знімок. */
	.tf-cat__media img { object-position: left center; }
	.tf-cat > a { padding: var(--tf-space-4); }
	.tf-cat__title { font-size: min(var(--tf-size-lede), 8.5cqi); }
	.tf-editorial__copy { padding: var(--tf-space-5) var(--tf-space-4); }
	.tf-brand-row { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--tf-space-2); }
	.tf-brand-row__link { --tf-brand-mark-size: 1.625rem; min-block-size: 4.5rem; }
}
@media (max-width: 22.49rem) {
	.tf-cat-grid { grid-template-columns: minmax(0, 1fr); }
	.tf-cat:first-child:nth-last-child(odd) { grid-column: auto; }
}