/* =========================================================================
   Teamfootball — інформаційні сторінки, блог, 404.
   ====================================================================== */
.tf-content-page { display: grid; gap: var(--tf-space-5); max-inline-size: var(--tf-content-max); margin-inline: auto; } /* Колонка інфо-сторінки по центру. */
.tf-content-title { font-size: var(--tf-size-heading); }
.tf-post-hero { border-radius: var(--tf-radius-l); overflow: hidden; }
.tf-post-hero img { inline-size: 100%; aspect-ratio: var(--tf-media-editorial); object-fit: cover; }
.tf-content-page .wp-block-post-date { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text-muted); }
/* Патерни інформаційних сторінок (етап 5): лід, таблиця розмірів, посилання за покриттям і соцмережі на світлій поверхні. */
.tf-prose > .tf-lede { font-size: var(--tf-size-lede); color: var(--tf-text-muted); }
.tf-size-table { margin: 0 0 1em; overflow-x: auto; }
.tf-size-table table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: var(--tf-numeric); }
.tf-prose .tf-size-table thead { border: 0; } /* Замість рамок core-таблиці — лише роздільники рядків, як у прозі. */
.tf-prose .tf-size-table :is(th, td) { border: 0; border-block-end: var(--tf-bw-divider) solid var(--tf-border); padding: var(--tf-space-3); }
.tf-prose .tf-size-table thead th { border-block-end: var(--tf-bw-control) solid var(--tf-text); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-size-table figcaption { margin-block-start: var(--tf-space-2); font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-content-page .tf-surface-links { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin-block-end: 1em; }
.tf-content-page .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-control) solid var(--tf-control-border); border-radius: var(--tf-radius-pill); color: var(--tf-text); font-weight: 600; text-decoration: none; }
.tf-content-page .tf-surface-links a:hover { background: var(--tf-text); border-color: var(--tf-text); color: var(--tf-on-inverse); }
.tf-content-page .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; }
/* Гід покриттями (блок teamfootball/surface-guide, референс — Ground Type Guide ProDirect). Без JS — розділи один під
   одним (зображення + текст); з JS (.is-enhanced) — вкладки ліворуч, зображення праворуч, текст обраного покриття під ними. */
.tf-surface-guide { display: grid; gap: var(--tf-space-6); margin-block: var(--tf-space-5) var(--tf-space-6); }
.tf-surface-guide__panel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--tf-space-5); align-items: end; }
.tf-surface-guide__media { grid-column: 2; grid-row: 1; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--tf-radius-l); background: var(--tf-surface-subtle); }
.tf-surface-guide__media :is(picture, img) { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tf-surface-guide__code { display: grid; place-items: center; block-size: 100%; font-family: var(--tf-font-mono); font-size: var(--tf-size-display); font-weight: 700; color: var(--tf-text-muted); }
.tf-surface-guide__copy { grid-column: 1; grid-row: 1; display: grid; gap: var(--tf-space-3); align-content: end; }
.tf-prose .tf-surface-guide__copy h2 { margin: 0; font-size: var(--tf-size-heading-small); }
.tf-prose .tf-surface-guide__copy p { margin: 0; }
.tf-surface-guide code { padding: var(--tf-space-1) var(--tf-space-2); border-radius: var(--tf-radius-dot); background: var(--tf-surface-subtle); color: var(--tf-text); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; white-space: nowrap; vertical-align: middle; }
.tf-surface-guide__tab code { flex: none; }
.tf-surface-guide__copy h2 code { background: var(--tf-accent); color: var(--tf-on-accent); }
.tf-surface-guide__hint { font-weight: 600; }
.tf-surface-guide__link { justify-self: start; display: inline-flex; align-items: center; gap: var(--tf-space-1); min-block-size: var(--tf-target); font-weight: 600; }
.tf-surface-guide__tabs { display: grid; align-content: start; justify-items: start; gap: var(--tf-space-1); }
.tf-surface-guide__tab { display: inline-flex; align-items: center; gap: var(--tf-space-3); min-block-size: var(--tf-target); padding: 0; border: 0; background: none; color: var(--tf-text-muted); font-family: var(--tf-font-display); font-size: var(--tf-size-lede); font-weight: 700; line-height: 1.2; text-align: start; cursor: pointer; transition: color var(--tf-motion-fast) var(--tf-easing); }
.tf-surface-guide__tab:hover,
.tf-surface-guide__tab[aria-selected="true"] { color: var(--tf-text); }
.tf-surface-guide__tab[aria-selected="true"] code { background: var(--tf-accent); color: var(--tf-on-accent); }
.tf-surface-guide.is-enhanced .tf-surface-guide__panel[hidden] { display: none; }
.tf-surface-guide.is-enhanced .tf-surface-guide__panel .tf-surface-guide__copy h2 { font-size: var(--tf-size-lede); }
@supports (grid-template-rows: subgrid) {
	/* Вкладки й зображення — один ряд, текст обраного покриття — під ними на всю ширину. */
	.tf-surface-guide.is-enhanced { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto; gap: var(--tf-space-5); }
	.tf-surface-guide.is-enhanced .tf-surface-guide__tabs { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
	.tf-surface-guide.is-enhanced .tf-surface-guide__panel { grid-column: 1 / -1; grid-row: 1 / 3; grid-template-columns: subgrid; grid-template-rows: subgrid; align-items: stretch; }
	.tf-surface-guide.is-enhanced .tf-surface-guide__copy { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 47.99rem) {
	.tf-surface-guide__panel,
	.tf-surface-guide.is-enhanced .tf-surface-guide__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.tf-surface-guide__media,
	.tf-surface-guide__copy,
	.tf-surface-guide.is-enhanced .tf-surface-guide__copy { grid-column: 1; grid-row: auto; }
	.tf-surface-guide.is-enhanced { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.tf-surface-guide.is-enhanced .tf-surface-guide__tabs { grid-row: auto; display: flex; flex-wrap: wrap; gap: var(--tf-space-2); }
	.tf-surface-guide.is-enhanced .tf-surface-guide__panel { grid-row: auto; }
	.tf-surface-guide__tab { padding-inline: var(--tf-space-3); border: var(--tf-bw-control) solid var(--tf-border); border-radius: var(--tf-radius-pill); font-family: var(--tf-font-body); font-size: var(--tf-size-small); }
	.tf-surface-guide__tab[aria-selected="true"] { border-color: var(--tf-text); box-shadow: inset 0 0 0 1px var(--tf-text); }
}
@media (prefers-reduced-motion: reduce) {
	.tf-surface-guide__tab { transition: none; }
}
.tf-content-socials { margin-block-start: var(--tf-space-4); }
.tf-post-list { display: grid; gap: var(--tf-space-4); margin-block-start: var(--tf-space-5); }
.tf-post-card { display: grid; gap: var(--tf-space-2); padding: var(--tf-space-5); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); }
.tf-post-card h2 { font-size: var(--tf-size-heading-small); }
.tf-post-card a { text-decoration: none; }
.tf-post-card a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.tf-query-pagination { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin-block-start: var(--tf-space-6); }
.tf-query-pagination a,
.tf-query-pagination .page-numbers { display: inline-grid; place-items: center; min-inline-size: var(--tf-control); min-block-size: var(--tf-control); padding-inline: var(--tf-space-3); border: var(--tf-bw-control) solid var(--tf-border); border-radius: var(--tf-radius-pill); background: var(--tf-surface); text-decoration: none; font-weight: 600; }
.tf-query-pagination .page-numbers.current { background: var(--tf-text); color: var(--tf-on-inverse); border-color: var(--tf-text); }

/* 404 */
.tf-not-found { padding-block: var(--tf-space-8) var(--tf-space-9); }
.tf-not-found__layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--tf-space-8); align-items: center; }
.tf-not-found__copy { display: grid; gap: var(--tf-space-4); }
.tf-not-found__copy h1 { font-size: var(--tf-size-display); }
.tf-not-found__copy > p:not(.tf-eyebrow) { color: var(--tf-text-muted); max-inline-size: 48ch; }
.tf-not-found__actions { display: flex; flex-wrap: wrap; gap: var(--tf-space-3); margin-block-start: var(--tf-space-2); }
.tf-not-found__search { padding: var(--tf-space-6); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); }
.tf-not-found__search .wp-block-search__label { display: block; margin-block-end: var(--tf-space-2); font-weight: 700; }
.tf-not-found__search .wp-block-search__inside-wrapper { display: flex; gap: var(--tf-space-2); }
.tf-not-found__search .wp-block-search__input { flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--tf-control); padding-inline: var(--tf-space-4); border: var(--tf-bw-control) solid var(--tf-control-border); border-radius: var(--tf-radius-pill); background: var(--tf-surface); }
.tf-not-found__search .wp-block-search__button { min-block-size: var(--tf-control); padding-inline: var(--tf-space-5); border: 0; border-radius: var(--tf-radius-pill); background: var(--tf-text); color: var(--tf-on-inverse); font-weight: 700; }
.tf-not-found__search .wp-block-search__button:hover { background: var(--tf-accent); color: var(--tf-on-accent); }

@media (max-width: 63.99rem) {
	.tf-not-found__layout { grid-template-columns: minmax(0, 1fr); gap: var(--tf-space-6); }
}
@media (max-width: 47.99rem) {
	.tf-not-found { padding-block: var(--tf-space-6) var(--tf-space-7); }
	.tf-not-found__copy h1 { font-size: var(--tf-size-heading); }
	.tf-not-found__search { padding: var(--tf-space-4); }
	.tf-not-found__search .wp-block-search__inside-wrapper { flex-direction: column; }
	.tf-not-found__actions .tf-button { inline-size: 100%; }
}

/* ---------- Сторінки «Обране» й «Порівняння» ---------- */
.tf-saved { display: grid; gap: var(--tf-space-5); }
.tf-saved[aria-busy="true"] .tf-saved__content { opacity: 0.5; }
.tf-saved__grid { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.tf-saved__empty { display: grid; justify-items: start; gap: var(--tf-space-3); padding: var(--tf-space-6); background: var(--tf-surface); border: var(--tf-bw) dashed var(--tf-control-border); border-radius: var(--tf-radius-l); }
.tf-saved__empty p { margin: 0; color: var(--tf-text-muted); }
.tf-saved__empty .tf-saved__empty-title { font-family: var(--tf-font-display); font-size: var(--tf-size-heading-small); font-weight: 700; color: var(--tf-text); }
.tf-saved__empty[hidden] { display: none; }
.tf-content-page:has(.tf-saved) { max-inline-size: none; } /* Картки й таблиця — на всю ширину сторінки, не 72ch прози. */
.tf-content-page:has(.tf-saved) .tf-prose { max-inline-size: none; }
.tf-compare__scroll { overflow-x: auto; border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); background: var(--tf-surface); }
.tf-compare__scroll:focus-visible { outline-offset: 2px; }
.tf-prose .tf-compare__table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--tf-size-small); }
.tf-prose .tf-compare__table :is(th, td) { padding: var(--tf-space-3); border: 0; border-block-end: var(--tf-bw-divider) solid var(--tf-border); vertical-align: top; text-align: start; }
.tf-prose .tf-compare__table tbody tr:last-child :is(th, td) { border-block-end: 0; }
.tf-compare__table tbody th,
.tf-compare__corner { position: sticky; inset-inline-start: 0; z-index: 1; min-inline-size: 7rem; background: var(--tf-surface-subtle); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-compare__product { min-inline-size: 11rem; }
.tf-compare__product > * { display: block; }
.tf-compare__media img { inline-size: 100%; max-inline-size: 9rem; block-size: auto; aspect-ratio: var(--tf-media-product); object-fit: contain; mix-blend-mode: multiply; }
.tf-prose .tf-compare__name { margin-block: var(--tf-space-2) var(--tf-space-1); color: var(--tf-text); font-weight: 700; text-decoration: none; }
.tf-prose .tf-compare__name:hover { text-decoration: underline; }
.tf-compare__remove { margin-block-start: var(--tf-space-2); min-block-size: var(--tf-target); padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--tf-brand); cursor: pointer; }

/* ---------- Інформаційні сторінки футера: допомога, доставка, повернення, правові документи ---------- */
/* «Автор і редакція» (блок teamfootball/page-credits): той самий тихий рядок, що «Редакція від …». */
/* Ілюстрація гіда (блок teamfootball/guide-media): схема або фото на всю ширину тексту, підпис під нею. */
.tf-prose > .tf-guide-media { margin: var(--tf-space-4) 0; }
.tf-guide-media img { display: block; width: 100%; height: auto; border: 1px solid var(--tf-border); background: var(--tf-surface); }
.tf-guide-media figcaption { margin-top: var(--tf-space-2); font-size: var(--tf-size-small); color: var(--tf-text-muted); }

/* Пари фото між розділами гідів; підписи й порядок читання лишаються нативними. */
.tf-prose > .tf-guide-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tf-space-4); margin-block: var(--tf-space-6); }
.tf-guide-media-grid > .tf-guide-media { min-inline-size: 0; margin: 0; }
.tf-guide-media-grid picture { display: block; }
.tf-guide-media-grid img { aspect-ratio: 4 / 5; object-fit: cover; }
.tf-guide-media-grid--landscape img { aspect-ratio: 3 / 2; }
@media (max-width: 479px) {
	.tf-prose > .tf-guide-media-grid { gap: var(--tf-space-3); margin-block: var(--tf-space-5); }
}

.tf-prose > .tf-page-credits { margin: var(--tf-space-2) 0; font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-prose > .tf-doc-date { margin: 0 0 var(--tf-space-2); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-prose code { padding: 0.1em 0.35em; border-radius: var(--tf-radius-s); background: var(--tf-surface-subtle); font-family: var(--tf-font-mono); font-size: 0.875em; overflow-wrap: anywhere; }
/* Часті питання: core/details як disclosure — рядок 44 px, шеврон замість нативного маркера, без JS. */
.tf-prose .wp-block-details { border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-prose :is(h2, h3, p) + .wp-block-details { border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-prose .wp-block-details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-4); min-block-size: var(--tf-control); padding-block: var(--tf-space-3); font-weight: 700; cursor: pointer; list-style: none; }
.tf-prose .wp-block-details > summary::-webkit-details-marker {
	/* tf-native-exception: none — індикатор розкриття малює ::after. */
	display: none;
}
.tf-prose .wp-block-details > summary::after { content: ""; flex: none; inline-size: 0.55em; block-size: 0.55em; margin-inline-end: var(--tf-space-1); border-inline-end: var(--tf-bw-control) solid currentColor; border-block-end: var(--tf-bw-control) solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform var(--tf-motion-fast) var(--tf-easing); }
.tf-prose .wp-block-details[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
.tf-prose .wp-block-details > summary:hover { color: var(--tf-brand); }
.tf-prose .wp-block-details > :last-child { margin-block-end: var(--tf-space-4); }
.tf-prose .wp-block-details .wp-block-list { padding-inline-start: 1.25em; }
/* Контакти для допомоги: телефон, email, графік — плитками з підписами. */
/* Три плитки в ряд на ширині прози, на телефоні — стовпчиком; email не рветься посеред слова, поки вміщується в рядок. */
.tf-help-contacts { display: flex; flex-wrap: wrap; gap: var(--tf-space-3); margin: 0 0 1em; }
.tf-help-contacts__item { flex: 1 1 12rem; display: grid; align-content: start; gap: var(--tf-space-1); padding: var(--tf-space-4) var(--tf-space-5); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); }
.tf-help-contacts dt { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-help-contacts dd { margin: 0; font-weight: 600; overflow-wrap: break-word; }
.tf-prose .tf-help-contacts a { display: inline-flex; align-items: center; min-block-size: var(--tf-control); color: var(--tf-text); font-weight: 700; font-variant-numeric: var(--tf-numeric); text-decoration: none; }
.tf-prose .tf-help-contacts a:hover { color: var(--tf-brand); text-decoration: underline; }
/* З Telegram-підтримкою телефон — дрібним рядком під плитками, лише на допомозі, контактах і правових сторінках. */
.tf-prose .tf-help-contacts__phone { margin-block-start: calc(-1 * var(--tf-space-2)); font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-prose .tf-help-contacts__phone a { display: inline-flex; align-items: center; min-block-size: var(--tf-control-compact); color: inherit; }
/* Гіди бутс і м’ячів: під плитками — «Або спитай помічника в чаті»; без JS чату немає, тож і рядка. */
.tf-prose .tf-help-contacts__assistant { margin-block-start: calc(-1 * var(--tf-space-2)); }
html:not(.tf-js) .tf-help-contacts__assistant { display: none; } /* tf-native-exception: none — без JS чату немає */
/* Способи оплати: погоджені марки з назвами. */
.tf-payment-methods { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin: 0 0 1em; padding: 0; list-style: none; }
.tf-payment-methods__item { display: inline-flex; align-items: center; gap: var(--tf-space-3); min-block-size: var(--tf-control); padding: var(--tf-space-1) var(--tf-space-4) var(--tf-space-1) var(--tf-space-1); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-m); font-size: var(--tf-size-small); font-weight: 600; }
.tf-prose .tf-payment-methods__mark { display: block; flex: none; inline-size: 3rem; block-size: 2rem; border-radius: var(--tf-radius-s); }