/* =========================================================================
   Teamfootball — база. Значення беруться лише з theme.json (семантичні токени).
   Короткі аліаси --tf-* нижче посилаються на згенеровані WordPress змінні.
   Дозволені raw-значення: лише browser-native винятки (transparent, currentColor,
   inherit, none) з коментарем tf-native-exception.
   ====================================================================== */
:root {
	/* Кольори */
	--tf-canvas: var(--wp--preset--color--canvas);
	--tf-surface: var(--wp--preset--color--surface);
	--tf-surface-subtle: var(--wp--preset--color--surface-subtle);
	--tf-text: var(--wp--preset--color--text);
	--tf-text-muted: var(--wp--preset--color--text-muted);
	--tf-border: var(--wp--preset--color--border);
	--tf-control-border: var(--wp--preset--color--control-border);
	--tf-brand: var(--wp--preset--color--brand);
	--tf-inverse: var(--wp--preset--color--surface-inverse);
	--tf-inverse-accent: var(--wp--preset--color--surface-inverse-accent);
	--tf-inverse-strong: var(--wp--preset--color--surface-inverse-strong);
	--tf-inverse-deep: var(--wp--preset--color--surface-inverse-deep);
	--tf-on-inverse: var(--wp--preset--color--text-on-inverse);
	--tf-on-inverse-muted: var(--wp--preset--color--text-on-inverse-muted);
	--tf-on-inverse-subtle: var(--wp--preset--color--text-on-inverse-subtle);
	--tf-on-inverse-brand: var(--wp--preset--color--text-on-inverse-brand);
	--tf-accent: var(--wp--preset--color--accent);
	--tf-accent-hover: var(--wp--preset--color--accent-hover);
	--tf-accent-bright: var(--wp--preset--color--accent-bright);
	--tf-on-accent: var(--wp--preset--color--on-accent);
	--tf-success: var(--wp--preset--color--success);
	--tf-warning: var(--wp--preset--color--warning);
	--tf-danger: var(--wp--preset--color--danger);
	--tf-focus: var(--wp--preset--color--focus);
	--tf-focus-on-inverse: var(--wp--preset--color--focus-on-inverse);
	--tf-disabled: var(--wp--preset--color--disabled);
	/* Overlay/scrim токени */
	--tf-inverse-line: var(--wp--custom--teamfootball--overlay--inverse-line);
	--tf-inverse-line-strong: var(--wp--custom--teamfootball--overlay--inverse-line-strong);
	--tf-inverse-raised: var(--wp--custom--teamfootball--overlay--inverse-raised);
	--tf-inverse-scrim: var(--wp--custom--teamfootball--overlay--inverse-scrim);
	--tf-ink-scrim: var(--wp--custom--teamfootball--overlay--ink-scrim);
	--tf-header-glass: var(--wp--custom--teamfootball--overlay--header-glass);
	--tf-pitch-fade: var(--wp--custom--teamfootball--overlay--pitch-fade);
	--tf-pitch-veil: var(--wp--custom--teamfootball--overlay--pitch-veil);
	--tf-pitch-veil-strong: var(--wp--custom--teamfootball--overlay--pitch-veil-strong);
	--tf-pitch-veil-soft: var(--wp--custom--teamfootball--overlay--pitch-veil-soft);
	--tf-field-line: var(--wp--custom--teamfootball--overlay--field-line);
	--tf-subtle-dark: var(--wp--custom--teamfootball--overlay--subtle-dark);
	/* Типографіка */
	--tf-font-display: var(--wp--preset--font-family--display);
	--tf-font-body: var(--wp--preset--font-family--body);
	--tf-font-mono: var(--wp--preset--font-family--mono);
	--tf-font-money: var(--wp--custom--teamfootball--typography--money-family); /* суми з ₴ у підсумках: кошик, замовлення */
	--tf-size-display: var(--wp--preset--font-size--display);
	--tf-size-heading: var(--wp--preset--font-size--heading);
	--tf-size-heading-medium: var(--wp--preset--font-size--heading-medium); /* h2 розділів сторінки */
	--tf-size-heading-small: var(--wp--preset--font-size--heading-small);
	--tf-size-body: var(--wp--preset--font-size--body);
	--tf-size-lede: var(--wp--preset--font-size--lede);
	--tf-size-label: var(--wp--preset--font-size--label);
	--tf-size-caption: var(--wp--preset--font-size--caption);
	--tf-size-small: var(--wp--preset--font-size--small);
	--tf-size-price: var(--wp--preset--font-size--price);
	--tf-lh-body: var(--wp--custom--teamfootball--typography--body-line-height);
	--tf-lh-heading: var(--wp--custom--teamfootball--typography--heading-line-height);
	--tf-lh-display: var(--wp--custom--teamfootball--typography--display-line-height);
	--tf-ls-heading: var(--wp--custom--teamfootball--typography--heading-letter-spacing);
	--tf-weight-heading: var(--wp--custom--teamfootball--typography--heading-weight);
	--tf-ls-label: var(--wp--custom--teamfootball--typography--label-letter-spacing);
	--tf-ls-mono: var(--wp--custom--teamfootball--typography--mono-letter-spacing);
	--tf-numeric: var(--wp--custom--teamfootball--typography--numeric); /* цифри текстовим шрифтом: суми, лічильники */
	/* Простір */
	--tf-space-1: var(--wp--preset--spacing--space-1);
	--tf-space-2: var(--wp--preset--spacing--space-2);
	--tf-space-3: var(--wp--preset--spacing--space-3);
	--tf-space-4: var(--wp--preset--spacing--space-4);
	--tf-space-5: var(--wp--preset--spacing--space-5);
	--tf-space-6: var(--wp--preset--spacing--space-6);
	--tf-space-7: var(--wp--preset--spacing--space-7);
	--tf-space-8: var(--wp--preset--spacing--space-8);
	--tf-space-9: var(--wp--preset--spacing--space-9);
	--tf-space-10: var(--wp--preset--spacing--space-10);
	--tf-gap: var(--wp--custom--teamfootball--spacing--component-gap);
	--tf-gutter: var(--wp--custom--teamfootball--spacing--layout-gutter);
	--tf-section-gap: var(--wp--custom--teamfootball--spacing--section-gap);
	/* Розміри */
	--tf-content-max: var(--wp--custom--teamfootball--sizing--content-max);
	--tf-wide-max: var(--wp--custom--teamfootball--sizing--wide-max);
	--tf-control: var(--wp--custom--teamfootball--sizing--control-height);
	--tf-control-compact: var(--wp--custom--teamfootball--sizing--control-height-compact);
	--tf-icon: var(--wp--custom--teamfootball--sizing--icon-size);
	--tf-icon-button: var(--wp--custom--teamfootball--sizing--icon-button-size);
	--tf-target: var(--wp--custom--teamfootball--sizing--target-min);
	--tf-header-h: var(--wp--custom--teamfootball--sizing--header-height);
	--tf-header-h-compact: var(--wp--custom--teamfootball--sizing--header-height-compact);
	/* Межі, радіуси, тіні, рух, шари, медіа */
	--tf-bw: var(--wp--custom--teamfootball--border--standard-width);
	--tf-bw-control: var(--wp--custom--teamfootball--border--control-width);
	--tf-bw-divider: var(--wp--custom--teamfootball--border--divider-width);
	--tf-bw-focus: var(--wp--custom--teamfootball--border--focus-width);
	--tf-radius-s: var(--wp--custom--teamfootball--radius--small);
	--tf-radius-m: var(--wp--custom--teamfootball--radius--medium);
	--tf-radius-l: var(--wp--custom--teamfootball--radius--large);
	--tf-radius-pill: var(--wp--custom--teamfootball--radius--pill); /* кнопки, чипи, поля пошуку, пагінація, перемикачі */
	--tf-radius-dot: var(--wp--custom--teamfootball--radius--dot); /* точки стану, номери кроків, аватар */
	--tf-radius-round: var(--wp--custom--teamfootball--radius--round); /* лише справжні кола: пауза відео, спінер */
	--tf-shadow-raised: var(--wp--custom--teamfootball--elevation--raised);
	--tf-shadow-card: var(--wp--custom--teamfootball--elevation--card-hover);
	--tf-shadow-overlay: var(--wp--custom--teamfootball--elevation--overlay);
	--tf-motion-fast: var(--wp--custom--teamfootball--motion--fast);
	--tf-motion-normal: var(--wp--custom--teamfootball--motion--normal);
	--tf-motion-slow: var(--wp--custom--teamfootball--motion--slow);
	--tf-easing: var(--wp--custom--teamfootball--motion--easing-standard);
	--tf-motion-reduced: var(--wp--custom--teamfootball--motion--reduced);
	--tf-layer-header: var(--wp--custom--teamfootball--layer--header);
	--tf-layer-sticky: var(--wp--custom--teamfootball--layer--sticky-commerce);
	--tf-layer-drawer: var(--wp--custom--teamfootball--layer--drawer);
	--tf-layer-modal: var(--wp--custom--teamfootball--layer--modal);
	--tf-layer-toast: var(--wp--custom--teamfootball--layer--toast-status);
	--tf-media-product: var(--wp--custom--teamfootball--media--product);
	--tf-media-portrait: var(--wp--custom--teamfootball--media--product-portrait);
	--tf-media-hero: var(--wp--custom--teamfootball--media--editorial-hero-wide);
	--tf-media-editorial: var(--wp--custom--teamfootball--media--editorial);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--tf-canvas);
	color: var(--tf-text);
	font-family: var(--tf-font-body);
	font-size: var(--tf-size-body);
	line-height: var(--tf-lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}
.wp-site-blocks { min-width: 0; }
.wp-site-blocks > * { margin-block: 0; }
img { max-width: 100%; height: auto; display: block; }
button,
input,
select,
textarea {
	/* tf-native-exception: inherit — контроли успадковують токенізовану типографіку. */
	font: inherit;
	color: inherit;
}
button { cursor: pointer; }
a { color: inherit; }
[hidden] {
	/* tf-native-exception: none — нативний стан hidden має пріоритет над утилітами. */
	display: none !important;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--tf-font-display);
	font-weight: var(--tf-weight-heading);
	line-height: var(--tf-lh-heading);
	letter-spacing: var(--tf-ls-heading);
	margin: 0;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
h1 { font-size: var(--tf-size-heading); }
h2 { font-size: var(--tf-size-heading-medium); }
h3 { font-size: var(--tf-size-heading-small); }
/* Набір шрифтів «number» (вісь fonts, Teamfootball): заголовки — стиснений гротеск великими літерами. Sofia Sans
   Extra Condensed малює рядкову кирилицю болгарськими формами (т як m, л як ʌ, в з петлею), українських форм у шрифті
   немає, тож ним — лише великі літери, і так само підписи, набрані ним поза заголовками. Без капсу — лише текстовим
   шрифтом: назва товару, заголовки повідомлень і картки допомоги. Рядкову кирилицю в цьому шрифті ловлять smoke
   stage3, info-pages, stage5 і loyalty. */
.tf-variant-fonts-number :is(h1, h2, h3) { text-transform: uppercase; }
.tf-variant-fonts-number :is(.tf-saved__empty-title, .tf-account-tile__title, .tf-bonus-ledger caption, .tf-bonus-rules dt) { text-transform: uppercase; }
@media (min-width: 48rem) { .tf-variant-fonts-number .tf-surface-guide__tab { text-transform: uppercase; } } /* Вужче — чипи текстовим шрифтом. */
.tf-variant-fonts-number :is(.tf-notice h2, .tf-pdp__title, .tf-card__title, .tf-cart-help__title) { text-transform: none; }
p { margin: 0; }
p + p { margin-block-start: var(--tf-space-4); }
ul, ol { margin: 0; padding-inline-start: 1.25em; }
figure { margin: 0; }
dl, dd { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }
summary { cursor: pointer; }
table { border-collapse: collapse; inline-size: 100%; }
code { font-family: var(--tf-font-mono); }

/* ---------- Layout ---------- */
.tf-wrap {
	inline-size: min(var(--tf-wide-max), calc(100% - var(--tf-gutter) * 2));
	margin-inline: auto;
	min-inline-size: 0;
}
.tf-main { min-block-size: 40vh; }
.tf-content-main { padding-block: var(--tf-space-6) var(--tf-space-9); }
.tf-home-section { padding-block: var(--tf-section-gap) 0; }
.tf-home-section:last-child { padding-block-end: var(--tf-section-gap); }

/* ---------- Доступність ---------- */
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}
.tf-skip-link:focus,
.tf-skip-link:focus-visible {
	position: fixed;
	inset-block-start: var(--tf-space-2);
	inset-inline-start: var(--tf-space-2);
	z-index: var(--tf-layer-toast);
	inline-size: auto;
	block-size: auto;
	clip: auto;
	clip-path: none;
	margin: 0;
	padding: var(--tf-space-3) var(--tf-space-4);
	background: var(--tf-text);
	color: var(--tf-on-inverse);
	border-radius: var(--tf-radius-m);
	font-weight: 700;
	text-decoration: none;
	white-space: normal;
}
.tf-inverse :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--tf-focus-on-inverse); }
.tf-inverse { color: var(--tf-on-inverse); }

/* ---------- Типографічні компоненти ---------- */
.tf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--tf-space-3);
	margin: 0;
	font-family: var(--tf-font-mono);
	font-size: var(--tf-size-label);
	font-weight: 700;
	letter-spacing: var(--tf-ls-label);
	line-height: var(--wp--custom--teamfootball--typography--label-line-height);
	text-transform: uppercase;
	color: var(--tf-brand);
}
.tf-eyebrow::before {
	content: "";
	inline-size: var(--tf-space-5);
	block-size: 2px;
	/* tf-native-exception: currentColor — декоративна риска успадковує колір eyebrow. */
	background: currentColor;
	flex: none;
}
.tf-eyebrow--on-dark,
.tf-inverse .tf-eyebrow { color: var(--tf-on-inverse-brand); }
.tf-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tf-space-5);
	flex-wrap: wrap;
	margin-block-end: var(--tf-space-6);
}
.tf-section-head h2 { margin-block-start: var(--tf-space-3); font-size: var(--tf-size-heading); }
.tf-section-head p:not(.tf-eyebrow) { margin-block-start: var(--tf-space-2); color: var(--tf-text-muted); max-inline-size: 56ch; }
.tf-link-more {
	display: inline-flex;
	align-items: center;
	gap: var(--tf-space-2);
	min-block-size: var(--tf-target);
	font-weight: 700;
	font-size: var(--tf-size-small);
	color: var(--tf-brand);
	text-decoration: none;
	border-block-end: 2px solid transparent; /* tf-native-exception: transparent — підкреслення з'являється на hover. */
	white-space: nowrap;
}
.tf-link-more:hover,
.tf-link-more:focus-visible { border-color: var(--tf-brand); }
.tf-text-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: var(--tf-bw);
	font-weight: 600;
}
.tf-text-link:hover { color: var(--tf-brand); }
.tf-inverse .tf-text-link:hover { color: var(--tf-on-inverse-brand); }
.tf-prose { max-inline-size: 72ch; }
.tf-prose h2 { font-size: var(--tf-size-heading-small); margin: 1.4em 0 0.5em; }
.tf-prose h3 { font-size: var(--tf-size-lede); margin: 1.2em 0 0.4em; }
.tf-prose p, .tf-prose ul, .tf-prose ol { margin: 0 0 1em; }
.tf-prose a { color: var(--tf-brand); text-decoration: underline; text-underline-offset: 0.2em; }
.tf-prose img { border-radius: var(--tf-radius-l); }
.tf-prose table { font-size: var(--tf-size-small); }
.tf-prose th, .tf-prose td { border-block-end: var(--tf-bw-divider) solid var(--tf-border); padding: var(--tf-space-2) var(--tf-space-3); text-align: start; }

/* ---------- Іконки ---------- */
.tf-icon {
	inline-size: var(--tf-icon);
	block-size: var(--tf-icon);
	flex: none;
	/* tf-native-exception: currentColor — обведення іконки успадковує доступний колір тексту. */
	stroke: currentColor;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: var(--tf-motion-reduced) !important;
		animation-iteration-count: 1 !important;
		transition-duration: var(--tf-motion-reduced) !important;
		scroll-behavior: auto !important;
	}
}