/* =========================================================================
   Teamfootball — примітиви: кнопки, поля, чіпи, бейджі, ціна, наявність,
   повідомлення, disclosure, картка товару, сітка, хлібні крихти, пагінація.
   Лише токени (--tf-*) + документовані browser-native винятки.
   ====================================================================== */

/* ---------- Кнопки ---------- */
.tf-button,
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tf-space-3);
	min-block-size: var(--tf-control);
	padding: var(--tf-space-3) var(--tf-space-5);
	border: var(--tf-bw-control) solid transparent; /* tf-native-exception: transparent — рамку показують лише outline/ghost. */
	border-radius: var(--tf-radius-pill);
	background: var(--tf-text);
	color: var(--tf-on-inverse);
	font-weight: 700;
	font-size: var(--tf-size-body);
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background var(--tf-motion-fast) var(--tf-easing), border-color var(--tf-motion-fast) var(--tf-easing), color var(--tf-motion-fast) var(--tf-easing);
}
.tf-button:hover,
.wp-block-button__link:hover { background: var(--tf-inverse); color: var(--tf-on-inverse); }
.tf-button--signal,
.wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--tf-accent); color: var(--tf-on-accent); }
.tf-button--signal:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--tf-accent-hover); color: var(--tf-on-accent); }
.tf-button--outline,
.wp-block-button.is-style-outline .wp-block-button__link { background: var(--tf-surface); color: var(--tf-text); border-color: var(--tf-control-border); }
.tf-button--outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--tf-surface-subtle); color: var(--tf-text); border-color: var(--tf-text); }
.tf-button--ghost { background: transparent; color: var(--tf-on-inverse); border-color: var(--tf-inverse-line-strong); } /* tf-native-exception: transparent — ghost-кнопка на темній поверхні. */
.tf-button--ghost:hover { background: transparent; border-color: var(--tf-on-inverse); } /* tf-native-exception: transparent. */
.tf-button--small { min-block-size: var(--tf-control-compact); padding-inline: var(--tf-space-4); font-size: var(--tf-size-small); }
.tf-button:disabled,
.tf-button[aria-disabled="true"] { background: var(--tf-disabled); color: var(--tf-text); border-color: var(--tf-disabled); cursor: not-allowed; }
.tf-button[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.tf-button:focus-visible,
.tf-button--signal:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 2px var(--tf-surface); }
.tf-inverse .tf-button:focus-visible { box-shadow: 0 0 0 2px var(--tf-inverse); }
/* Telegram-підтримка (SupportChat): іконка поруч із підписом; кегль і колір — від місця. */
.tf-telegram-link { display: inline-flex; align-items: center; gap: var(--tf-space-2); }
.tf-telegram-link .tf-icon { inline-size: 1.125rem; block-size: 1.125rem; }
.tf-icon-button {
	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-border);
	border-radius: var(--tf-radius-pill);
	background: var(--tf-surface);
	color: var(--tf-text);
	position: relative;
	text-decoration: none;
	cursor: pointer;
	flex: none;
	transition: border-color var(--tf-motion-fast) var(--tf-easing), background var(--tf-motion-fast) var(--tf-easing);
}
.tf-icon-button:hover { border-color: var(--tf-text); }

/* ---------- Поля ---------- */
.tf-input,
.tf-select,
.tf-textarea {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--tf-control);
	padding: var(--tf-space-2) var(--tf-space-4);
	border: var(--tf-bw-control) solid var(--tf-control-border);
	border-radius: var(--tf-radius-m);
	background: var(--tf-surface);
	color: var(--tf-text);
}
.tf-input::placeholder { color: var(--tf-text-muted); }
.tf-select {
	appearance: none;
	padding-inline-end: var(--tf-space-7);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); /* tf-native-exception: transparent, currentColor — стрілка select без зовнішнього файлу. */
	background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.95rem) 50%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
}
.tf-field { display: grid; gap: var(--tf-space-2); }
.tf-field > span { font-size: var(--tf-size-small); font-weight: 600; }
.tf-choice {
	display: flex;
	align-items: center;
	gap: var(--tf-space-3);
	min-block-size: var(--tf-target);
	cursor: pointer;
	font-size: var(--tf-size-small);
}
.tf-choice input[type="checkbox"],
.tf-choice input[type="radio"] {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0;
	flex: none;
	accent-color: var(--tf-text);
}
.tf-choice small { margin-inline-start: auto; color: var(--tf-text-muted); font-variant-numeric: var(--tf-numeric); }
.tf-choice:hover span { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Чіпи ---------- */
.tf-chips { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); }
.tf-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--tf-space-2);
	min-block-size: var(--tf-control-compact);
	padding: var(--tf-space-2) var(--tf-space-4);
	border: var(--tf-bw-control) solid var(--tf-control-border);
	border-radius: var(--tf-radius-pill);
	background: var(--tf-surface);
	color: var(--tf-text);
	font-weight: 600;
	font-size: var(--tf-size-small);
	font-variant-numeric: var(--tf-numeric);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--tf-motion-fast) var(--tf-easing), background var(--tf-motion-fast) var(--tf-easing);
}
.tf-chip small { color: var(--tf-text-muted); font-weight: 500; }
.tf-chip:hover { border-color: var(--tf-text); }
.tf-chip.is-active,
.tf-chip:has(input:checked) { background: var(--tf-text); color: var(--tf-on-inverse); border-color: var(--tf-text); }
.tf-chip.is-active small { color: var(--tf-on-inverse-brand); }
.tf-chip--input input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tf-chip--input:has(input:focus-visible) { outline: var(--tf-bw-focus) solid var(--tf-focus); outline-offset: var(--tf-space-1); }
.tf-chip--remove b { font-weight: 400; opacity: 0.7; }
.tf-chip--remove:hover { background: var(--tf-inverse); border-color: var(--tf-inverse); }

/* ---------- Бейджі, ціна, наявність ---------- */
.tf-badge {
	display: inline-block;
	padding: var(--tf-space-1) var(--tf-space-2);
	border-radius: var(--tf-radius-s);
	font-family: var(--tf-font-mono);
	font-size: var(--tf-size-label);
	font-weight: 700;
	letter-spacing: var(--tf-ls-mono);
	line-height: 1.2;
	background: var(--tf-surface-subtle);
	color: var(--tf-text);
	white-space: nowrap;
}
.tf-badge--sale { background: var(--tf-accent); color: var(--tf-on-accent); }
.tf-badge--new { background: var(--tf-inverse); color: var(--tf-on-inverse); }
.tf-badge--surface { background: var(--tf-surface-subtle); color: var(--tf-text); }
/* Логотип бренду (inline SVG із assets/images/brands, fill: currentColor). Висоту задає --tf-brand-mark-size;
   модифікатори вирівнюють оптичну вагу різних за пропорцією знаків. */
.tf-brand-mark { display: inline-block; flex-shrink: 0; block-size: var(--tf-brand-mark-size, 1.125rem); inline-size: auto; max-inline-size: 100%; color: var(--tf-text); vertical-align: middle; }
.tf-brand-mark--nike { block-size: calc(var(--tf-brand-mark-size, 1.125rem) * 0.75); }
.tf-brand-mark--adidas { block-size: calc(var(--tf-brand-mark-size, 1.125rem) * 0.9); }
.tf-brand-mark--jordan { block-size: calc(var(--tf-brand-mark-size, 1.125rem) * 1.15); }
.tf-brand-mark--jako { block-size: calc(var(--tf-brand-mark-size, 1.125rem) * 0.8); }
.tf-brand-mark--mizuno { block-size: calc(var(--tf-brand-mark-size, 1.125rem) * 1.3); } /* Птах над написом: без запасу напис був би дрібнішим за інші марки. */
.tf-price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--tf-space-2);
	font-variant-numeric: var(--tf-numeric);
	font-weight: 700;
}
.tf-price del,
.tf-price .was { color: var(--tf-text-muted); font-weight: 400; font-size: var(--tf-size-caption); }
.tf-price ins { text-decoration: none; }
.tf-price .screen-reader-text { position: absolute; }
/* Клієнт «Дроп» або «Опт» (плагін teamfootball-b2b): під ціною — чия це ціна й роздрібна поруч. */
.tf-b2b-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--tf-space-2); font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-b2b-note__tier { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-mono); text-transform: uppercase; color: var(--tf-text); }
.tf-b2b-note__retail { font-variant-numeric: var(--tf-numeric); white-space: nowrap; }
.tf-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--tf-space-2);
	font-size: var(--tf-size-caption);
	font-weight: 600;
	color: var(--tf-success);
}
.tf-stock::before { content: ""; inline-size: 0.45rem; block-size: 0.45rem; border-radius: var(--tf-radius-dot); background: currentColor; flex: none; } /* tf-native-exception: currentColor. */
.tf-stock--out { color: var(--tf-text-muted); }
.tf-stock--expected { color: var(--tf-warning); } /* «Очікуємо поставку»: товар ще їде на склад (підпис несе стан, колір — лише підсилення). */

/* ---------- Повідомлення ---------- */
/* Блок woocommerce/store-notices на каталозі й PDP стоїть прямо в main без .tf-wrap — вирівнюємо по сітці сторінки;
   відступ зверху лише коли є повідомлення (порожній блок не зсуває сторінку). */
:is(.tf-catalog-main, .tf-pdp-main) > .wc-block-store-notices { inline-size: min(var(--tf-wide-max), calc(100% - var(--tf-gutter) * 2)); margin-inline: auto; }
:is(.tf-catalog-main, .tf-pdp-main) > .wc-block-store-notices:has(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-error, .woocommerce-info) { margin-block-start: var(--tf-space-4); }
.tf-notice,
.tf-status-message,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	display: block;
	margin: 0;
	padding: var(--tf-space-3) var(--tf-space-4);
	border: var(--tf-bw) solid var(--tf-border);
	border-inline-start: var(--tf-bw-focus) solid var(--tf-brand);
	border-radius: var(--tf-radius-m);
	background: var(--tf-surface);
	color: var(--tf-text);
	list-style: none;
	overflow-wrap: anywhere;
}
.tf-notice--success,
.woocommerce-message { border-inline-start-color: var(--tf-success); }
.tf-notice--warning { border-inline-start-color: var(--tf-warning); }
.tf-notice--error,
.woocommerce-error,
.wc-block-components-notice-banner.is-error { border-inline-start-color: var(--tf-danger); }
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li { list-style: none; }
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button { float: none; margin-inline-start: var(--tf-space-3); }
.tf-notice h2 { font-family: var(--tf-font-body); font-size: var(--tf-size-body); }
.tf-notice ul { margin-block-start: var(--tf-space-2); }
.tf-notice + .tf-notice { margin-block-start: var(--tf-space-3); }
.tf-status-message { display: flex; align-items: center; gap: var(--tf-space-2); }

/* ---------- Disclosure ---------- */
.tf-disclosure { border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-disclosure > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tf-space-3);
	min-block-size: var(--tf-control);
	padding-block: var(--tf-space-3);
	font-weight: 700;
	list-style: none;
}
.tf-disclosure > summary::-webkit-details-marker {
	/* tf-native-exception: none — індикатор розкриття малює іконка. */
	display: none;
}
.tf-disclosure > summary .tf-icon { transition: transform var(--tf-motion-fast) var(--tf-easing); }
.tf-disclosure[open] > summary .tf-icon { transform: rotate(180deg); }
.tf-disclosure__body { display: grid; gap: var(--tf-space-3); padding-block: 0 var(--tf-space-4); }

/* ---------- Сітка та картка ---------- */
.tf-grid { display: grid; gap: var(--tf-space-4); list-style: none; margin: 0; padding: 0; }
.tf-grid > li { min-inline-size: 0; }
.tf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf-grid--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf-card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: var(--tf-surface);
	border: var(--tf-bw) solid var(--tf-border);
	border-radius: var(--tf-radius-l);
	overflow: hidden;
	transition: transform var(--tf-motion-fast) var(--tf-easing), box-shadow var(--tf-motion-fast) var(--tf-easing);
}
.tf-card:hover { transform: translateY(-3px); box-shadow: var(--tf-shadow-card); }
.tf-card__media {
	position: relative;
	padding: var(--tf-space-4);
	background: var(--tf-surface);
	border-block-end: var(--tf-bw-divider) solid var(--tf-border);
}
/* Пропорцію задає саме зображення, а не контейнер із padding: WebKit (Safari) додає
   padding до aspect-ratio ще раз, і вкладені a/img зі 100% висотою зміщуються та обрізаються. */
.tf-card__media > a { display: block; inline-size: 100%; }
.tf-card__media img { inline-size: 100%; block-size: auto; aspect-ratio: var(--tf-media-product); object-fit: contain; mix-blend-mode: multiply; }
.tf-card__badges { position: absolute; inset-block-start: var(--tf-space-3); inset-inline-start: var(--tf-space-3); display: flex; flex-wrap: wrap; gap: var(--tf-space-1); z-index: 1; max-inline-size: calc(100% - var(--tf-space-6)); }
.tf-card__body { display: flex; flex-direction: column; gap: var(--tf-space-2); flex: 1; padding: var(--tf-space-4); }
.tf-card__brand { display: flex; align-items: center; gap: var(--tf-space-2); min-block-size: 1.375rem; 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-card__brand > * + .tf-card__brand-note::before { content: "· "; }
.tf-card__name { font-weight: 600; font-size: var(--tf-size-small); line-height: 1.35; color: var(--tf-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tf-card__name:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.tf-card__sizes { display: flex; flex-wrap: wrap; gap: var(--tf-space-1); min-inline-size: 0; margin: 0; padding: 0; border: 0; font-family: var(--tf-font-mono); font-size: var(--tf-size-label); color: var(--tf-text-muted); }
.tf-card__sizes > span { padding: 2px 6px; border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-s); }
/* Кольори моделі (групи кольорів Product Intelligence): мініатюри-посилання 44 px, поточний — рамка, «+N» веде на PDP.
   Три позиції з проміжком 2 px вміщуються у вузьку картку (2 колонки) від 375 px; вужче — переносяться. */
.tf-card__colors { display: flex; flex-wrap: wrap; gap: 0.125rem; list-style: none; margin: 0; padding: 0; }
.tf-card__color {
	display: grid;
	place-items: center;
	inline-size: var(--tf-target);
	block-size: var(--tf-target);
	overflow: hidden;
	border: var(--tf-bw) solid var(--tf-border);
	border-radius: var(--tf-radius-s);
	background: var(--tf-surface);
	color: var(--tf-text);
	font-family: var(--tf-font-mono);
	font-size: var(--tf-size-label);
	font-weight: 700;
	text-decoration: none;
}
.tf-card__color img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
a.tf-card__color:hover { border-color: var(--tf-text); }
.tf-card__color.is-current { border: var(--tf-bw-control) solid var(--tf-text); }
/* Quick-add на картці: доступні розміри (radio-чипи) → «Додати в кошик». Без JS слот у потоці під розмірами;
   з JS слот лежить над медіа (absolute від .tf-card__body), тож висота картки й сусідів не змінюється.
   Чипи компактні за рішенням власника (2026-09-10): 2rem, на touch-пристроях 2.25rem — ≥24 px за WCAG 2.5.8 AA;
   первинний контрол «Додати в кошик» лишається 44 px. */
.tf-card__body { position: relative; }
.tf-card__buy { display: flex; flex-direction: column; gap: var(--tf-space-2); }
.tf-card__size {
	position: relative;
	display: inline-grid;
	place-items: center;
	min-inline-size: 2rem;
	min-block-size: 2rem;
	padding-inline: var(--tf-space-1);
	border: var(--tf-bw) solid var(--tf-control-border);
	border-radius: var(--tf-radius-s);
	background: var(--tf-surface);
	color: var(--tf-text);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background var(--tf-motion-fast) var(--tf-easing), border-color var(--tf-motion-fast) var(--tf-easing), color var(--tf-motion-fast) var(--tf-easing);
}
@media (pointer: coarse) {
	.tf-card__size { min-inline-size: 2.25rem; min-block-size: 2.25rem; }
}
.tf-card__size input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
.tf-card__size:hover { border-color: var(--tf-text); }
.tf-card__size--transit { border-style: dashed; } /* Розмір у дорозі: продається, але відправимо пізніше (1С-адаптер). */
.tf-card__size--transit:has(input:checked) { border-style: solid; }
.tf-card__size:has(input:checked) { background: var(--tf-text); border-color: var(--tf-text); color: var(--tf-on-inverse); }
.tf-card__size:has(input:focus-visible) { outline: var(--tf-bw-focus) solid var(--tf-focus); outline-offset: 2px; }
.tf-card__buy-slot { display: grid; gap: var(--tf-space-2); }
.tf-js .tf-card__buy-slot { position: absolute; inset-inline: 0; inset-block-end: 100%; z-index: 1; padding: var(--tf-space-2) var(--tf-space-3); }
.tf-card__add { inline-size: 100%; min-block-size: var(--tf-target); padding-inline: var(--tf-space-3); font-size: var(--tf-size-small); box-shadow: var(--tf-shadow-raised); }
.tf-js .tf-card__buy:not(.is-selected) .tf-card__add { display: none; } /* tf-native-exception: none — з JS кнопка з'являється після вибору розміру; без JS видима завжди. */
.tf-card__status { padding: var(--tf-space-2) var(--tf-space-3); border: var(--tf-bw) solid var(--tf-success); border-radius: var(--tf-radius-s); background: var(--tf-surface); color: var(--tf-text); font-size: var(--tf-size-caption); line-height: 1.35; box-shadow: var(--tf-shadow-raised); }
.tf-card__status a { color: inherit; font-weight: 700; }
.tf-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--tf-space-3); margin-block-start: auto; padding-block-start: var(--tf-space-2); }
.tf-card__foot > div { display: grid; gap: var(--tf-space-1); min-inline-size: 0; }
.tf-card__go {
	display: inline-grid;
	place-items: center;
	inline-size: var(--tf-icon-button);
	block-size: var(--tf-icon-button);
	flex: none;
	border-radius: var(--tf-radius-pill);
	background: var(--tf-text);
	color: var(--tf-on-inverse);
	transition: background var(--tf-motion-fast) var(--tf-easing);
}
.tf-card__go:hover { background: var(--tf-accent); color: var(--tf-on-accent); }
.tf-card--out-of-stock .tf-card__media img { opacity: 0.7; }
.tf-mini {
	display: grid;
	grid-template-columns: 5.25rem minmax(0, 1fr);
	gap: var(--tf-space-3);
	align-items: center;
	padding: var(--tf-space-2) var(--tf-space-4) var(--tf-space-2) var(--tf-space-2);
	background: var(--tf-surface);
	color: var(--tf-text);
	border-radius: var(--tf-radius-m);
	text-decoration: none;
	transition: transform var(--tf-motion-fast) var(--tf-easing);
}
.tf-mini:hover { transform: translateY(-2px); }
.tf-mini__ph { inline-size: 5.25rem; aspect-ratio: var(--tf-media-product); border-radius: var(--tf-radius-s); overflow: hidden; background: var(--tf-surface); }
.tf-mini__ph img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.tf-mini__body { display: grid; gap: var(--tf-space-1); min-inline-size: 0; }
.tf-mini__nm { font-weight: 600; font-size: var(--tf-size-small); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tf-mini__row { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-2); flex-wrap: wrap; }
.tf-mini .tf-price { font-size: var(--tf-size-small); }

/* ---------- Хлібні крихти, пагінація, кроки ---------- */
.tf-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2); font-size: var(--tf-size-caption); color: var(--tf-text-muted); padding-block: var(--tf-space-4); }
.tf-breadcrumbs a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); text-decoration: none; }
.tf-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.tf-breadcrumbs [aria-current="page"] { color: var(--tf-text); }
.tf-breadcrumbs__sep { opacity: 0.6; }
.tf-pagination { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); align-items: center; }
.tf-pagination__page,
.tf-pagination__arrow {
	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);
	font-weight: 600;
	font-variant-numeric: var(--tf-numeric);
	text-decoration: none;
}
.tf-pagination__page:hover,
.tf-pagination__arrow:hover { border-color: var(--tf-text); }
.tf-pagination__page.is-current { background: var(--tf-text); color: var(--tf-on-inverse); border-color: var(--tf-text); text-decoration: underline; text-underline-offset: 0.25em; }
.tf-pagination__arrow.is-disabled { color: var(--tf-text-muted); background: var(--tf-surface-subtle); }
.tf-pagination__gap { padding-inline: var(--tf-space-1); }
.tf-step-num {
	display: inline-grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: var(--tf-radius-s);
	background: var(--tf-text);
	color: var(--tf-on-inverse);
	font-family: var(--tf-font-mono);
	font-size: var(--tf-size-label);
	font-weight: 700;
}

/* ---------- Skeleton / spinner ---------- */
.tf-skeleton { background: var(--tf-surface-subtle); border-radius: var(--tf-radius-m); block-size: var(--tf-space-8); animation: tf-skeleton-pulse var(--tf-motion-slow) var(--tf-easing) infinite alternate; }
.tf-spinner { inline-size: var(--tf-icon); block-size: var(--tf-icon); border: var(--tf-bw-control) solid var(--tf-border); border-block-start-color: var(--tf-accent); border-radius: var(--tf-radius-round); animation: tf-spin var(--tf-motion-slow) linear infinite; flex: none; }
@keyframes tf-skeleton-pulse { to { opacity: 0.6; } }
@keyframes tf-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
	.tf-skeleton,
	.tf-spinner {
		/* tf-native-exception: none — вимикає декоративний рух skeleton/spinner. */
		animation: none;
	}
	.tf-card:hover,
	.tf-mini:hover { transform: none; }
	.tf-card__size { transition: none; } /* tf-native-exception: none — без анімації стану чипа. */
}

/* ---------- Responsive ---------- */
@media (max-width: 63.99rem) {
	.tf-grid--4,
	.tf-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
	.tf-grid { gap: var(--tf-space-3); }
	.tf-card__body { padding: var(--tf-space-3); }
	.tf-card__media { padding: var(--tf-space-3); }
	/* Вузька картка (2 колонки): «Додати в кошик · 42» в один рядок. */
	.tf-js .tf-card__buy-slot { padding-inline: var(--tf-space-2); }
	.tf-card__add { padding-inline: var(--tf-space-2); font-size: var(--tf-size-caption); }
	.tf-section-head { margin-block-end: var(--tf-space-5); }
}
@media (max-width: 22.49rem) {
	.tf-grid--4,
	.tf-grid--catalog { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Обране й порівняння (Phase 1.5): перемикачі на картці й PDP ----------
   Кнопки працюють лише з JS (гостьовий список — у браузері), тому без класу tf-js їх немає; на картці вони
   лежать поверх фото (absolute), тож поява після JS не зсуває макет. */
html:not(.tf-js) :is(.tf-card__actions, .tf-pdp__saved) { display: none; } /* tf-native-exception: none — без JS гостю нікуди зберегти список. */
.tf-card__actions { position: absolute; inset-block-start: var(--tf-space-2); inset-inline-end: var(--tf-space-2); z-index: 2; display: flex; flex-direction: column; gap: var(--tf-space-1); }
.tf-save-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--tf-space-2); margin: 0; border: var(--tf-bw-control) solid var(--tf-border); background: var(--tf-surface); color: var(--tf-text); font: inherit; font-weight: 600; cursor: pointer; transition: border-color var(--tf-motion-fast) var(--tf-easing), background var(--tf-motion-fast) var(--tf-easing), color var(--tf-motion-fast) var(--tf-easing); }
.tf-save-toggle:hover { border-color: var(--tf-text); }
.tf-save-toggle--card { inline-size: var(--tf-target); block-size: var(--tf-target); padding: 0; border-radius: var(--tf-radius-pill); }
.tf-save-toggle--detail { min-block-size: var(--tf-target); padding: var(--tf-space-2) var(--tf-space-4); border-color: var(--tf-control-border); border-radius: var(--tf-radius-pill); font-size: var(--tf-size-small); }
.tf-save-toggle--wishlist[aria-pressed="true"] { color: var(--tf-accent); border-color: currentColor; }
.tf-save-toggle--wishlist[aria-pressed="true"] .tf-icon { fill: currentColor; } /* tf-native-exception: currentColor — заповнене серце кольору стану. */
.tf-save-toggle--compare[aria-pressed="true"] { background: var(--tf-text); border-color: var(--tf-text); color: var(--tf-on-inverse); }
.tf-pdp__saved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2) var(--tf-space-3); margin-block-start: var(--tf-space-4); }
.tf-pdp__compare-link { display: inline-flex; align-items: center; gap: var(--tf-space-1); min-block-size: var(--tf-target); font-weight: 700; }

/* ---------- Таблиці розмірів брендів (PDP і сторінка «Як обрати розмір»; дані — Product Intelligence) ---------- */
.tf-size-chart,
.tf-tier-guide { border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-m); background: var(--tf-surface); }
.tf-size-chart > summary,
.tf-tier-guide > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-3); min-block-size: var(--tf-target); padding: var(--tf-space-2) var(--tf-space-4); font-weight: 700; cursor: pointer; list-style: none; }
.tf-size-chart > summary::-webkit-details-marker,
.tf-tier-guide > summary::-webkit-details-marker { display: none; } /* tf-native-exception: none — власний шеврон замість маркера WebKit. */
.tf-size-chart > summary .tf-icon,
.tf-tier-guide > summary .tf-icon { transition: transform var(--tf-motion-fast) var(--tf-easing); }
.tf-size-chart[open] > summary .tf-icon,
.tf-tier-guide[open] > summary .tf-icon { transform: rotate(180deg); }
.tf-size-chart__body,
.tf-tier-guide__body { display: grid; gap: var(--tf-space-5); padding: 0 var(--tf-space-4) var(--tf-space-4); }
.tf-size-chart__figure { margin: 0; display: grid; gap: var(--tf-space-2); }
.tf-size-chart__label { margin: 0; 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-chart__scroll { max-block-size: 22rem; overflow: auto; border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-s); }
.tf-size-chart__table { inline-size: 100%; border-collapse: collapse; font-size: var(--tf-size-small); font-variant-numeric: var(--tf-numeric); }
.tf-size-chart__table :is(th, td) { padding: var(--tf-space-2) var(--tf-space-3); border: 0; border-block-end: var(--tf-bw-divider) solid var(--tf-border); text-align: start; white-space: nowrap; }
.tf-size-chart__table thead th { position: sticky; inset-block-start: 0; white-space: normal; vertical-align: bottom; 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-size-chart__table tbody td:first-child { font-weight: 700; }
.tf-size-chart__source,
.tf-size-chart__note { margin: 0; font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-size-chart__source a { color: var(--tf-brand); font-weight: 700; }
.tf-pdp__summary .tf-size-chart { margin-block: var(--tf-space-3) 0; }
.tf-size-charts { display: grid; gap: var(--tf-space-6); }
.tf-size-charts__brand { display: grid; gap: var(--tf-space-3); }
.tf-size-charts__brand h3 { margin: 0; }
.tf-size-chart > summary > span,
.tf-tier-guide > summary > span { flex: 1; }
.tf-size-chart__legend { display: flex; align-items: center; gap: var(--tf-space-2); margin: 0; font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-size-chart__dot { display: inline-block; flex: none; inline-size: 0.5rem; block-size: 0.5rem; margin-inline-end: var(--tf-space-2); border-radius: var(--tf-radius-dot); background: var(--tf-success); vertical-align: middle; }
.tf-size-chart__legend .tf-size-chart__dot { margin-inline-end: 0; }
.tf-size-chart__guide { margin: 0; padding-block-start: var(--tf-space-3); border-block-start: var(--tf-bw-divider) solid var(--tf-border); font-weight: 700; }
.tf-size-chart__guide a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); }
.tf-size-chart__table tr.is-selected td { background: var(--tf-surface-subtle); font-weight: 700; }
.tf-size-chart__table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--tf-accent); }

/* PDP з JS: «Таблиця розмірів {бренд}» — посилання з лінійкою, таблиці — у модальному вікні (assets/js/size-chart.js). */
.tf-size-chart-pdp.is-enhanced .tf-size-chart,
.tf-tier-guide-pdp.is-enhanced .tf-tier-guide { border: 0; background: none; }
.tf-size-chart-pdp.is-enhanced .tf-size-chart > summary,
.tf-tier-guide-pdp.is-enhanced .tf-tier-guide > summary { justify-content: flex-start; gap: var(--tf-space-2); padding: 0; color: var(--tf-brand); text-decoration: underline; text-underline-offset: 0.2em; }
.tf-size-chart-pdp.is-enhanced .tf-size-chart > summary > span,
.tf-tier-guide-pdp.is-enhanced .tf-tier-guide > summary > span { flex: none; }
.tf-size-chart-pdp.is-enhanced .tf-size-chart > summary .tf-icon--chevron,
.tf-tier-guide-pdp.is-enhanced .tf-tier-guide > summary .tf-icon--chevron { display: none; } /* tf-native-exception: none — у режимі вікна шеврон розгортки не потрібен. */
.tf-size-dialog,
.tf-tier-dialog { inline-size: min(calc(100% - var(--tf-space-6)), 40rem); max-inline-size: none; max-block-size: calc(100dvh - var(--tf-space-6)); padding: var(--tf-space-5); border: var(--tf-bw) solid var(--tf-control-border); border-radius: var(--tf-radius-l); background: var(--tf-surface); color: var(--tf-text); overscroll-behavior: contain; }
.tf-size-dialog::backdrop,
.tf-tier-dialog::backdrop { background: var(--tf-ink-scrim); }
.tf-size-dialog__head,
.tf-tier-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-3); margin-block-end: var(--tf-space-3); }
.tf-size-dialog h2,
.tf-tier-dialog h2 { margin: 0; font-size: var(--tf-size-lede); }
.tf-size-dialog__body,
.tf-tier-dialog__body { display: grid; gap: var(--tf-space-4); }
.tf-size-dialog .tf-size-chart__scroll { max-block-size: min(60dvh, 30rem); }
@media (max-width: 47.99rem) {
	.tf-size-dialog,
	.tf-tier-dialog { inline-size: 100%; max-block-size: 88dvh; margin: auto 0 0; padding: var(--tf-space-4); border-end-start-radius: 0; border-end-end-radius: 0; }
	.tf-size-dialog .tf-size-chart__scroll { max-block-size: 55dvh; }
}

/* Сигнали вітрини: дата отримання і «скільки зараз переглядають» (inc/product-signals.php). */
.tf-signal {
	display: flex;
	align-items: center;
	gap: var(--tf-space-2);
	margin: var(--tf-space-3) 0 0;
	color: var(--tf-text-muted);
	font-size: var(--tf-size-small);
	line-height: var(--tf-lh-body);
}

.tf-signal .tf-icon {
	flex: 0 0 auto;
	inline-size: 1.125rem;
	block-size: 1.125rem;
}

.tf-signal__label {
	color: var(--tf-text);
	font-weight: 600;
}

.tf-signal__note {
	display: block;
	font-size: var(--tf-size-caption);
}


/* Рівні бутс бренду (inc/tier-guide.php): драбина у вікні PDP і в блоці сторінки «Як обрати рівень». */
.tf-tier-guide__intro,
.tf-tier-guide__note { margin: 0; font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-tier-list { display: grid; gap: var(--tf-space-3); margin: 0; padding: 0; list-style: none; }
.tf-tier { display: grid; gap: var(--tf-space-2); padding: var(--tf-space-4); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-m); background: var(--tf-surface); }
.tf-tier.is-current { border-color: var(--tf-text); box-shadow: inset 3px 0 0 var(--tf-accent); }
.tf-tier__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2); margin: 0; font-size: var(--tf-size-lede); }
.tf-tier__current { padding: 0 var(--tf-space-2); border-radius: var(--tf-radius-pill); background: var(--tf-accent); color: var(--tf-on-accent); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-label); text-transform: uppercase; }
.tf-tier__summary,
.tf-tier__for { margin: 0; font-size: var(--tf-size-small); }
.tf-tier__for { color: var(--tf-text-muted); }
.tf-tier__meta { margin: 0; font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-tier__meta a,
.tf-tier-guide__source a { color: var(--tf-brand); font-weight: 700; }
.tf-tier__link { display: inline-flex; align-items: center; min-block-size: var(--tf-target); inline-size: fit-content; font-weight: 700; }
.tf-tier-guide__source { margin: 0; font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-tier-guide__page { margin: 0; padding-block-start: var(--tf-space-3); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-tier-guide__page a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); }
.tf-tier-guides { display: grid; gap: var(--tf-space-6); }
.tf-tier-guides__brand { display: grid; gap: var(--tf-space-3); }
.tf-tier-guides__brand h3 { margin: 0; }