/* =========================================================================
   Teamfootball — сторінка товару. Усі значення товару — власність WooCommerce/Core.
   ====================================================================== */
.tf-pdp-main { padding-block: var(--tf-space-4) var(--tf-space-9); }
.tf-pdp__return { margin-block-end: var(--tf-space-4); }
.tf-pdp__notices { margin-block-end: var(--tf-space-5); display: grid; gap: var(--tf-space-3); }
.tf-pdp__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--tf-space-8); align-items: start; }
.tf-pdp__summary { position: sticky; inset-block-start: calc(var(--tf-header-h) + var(--tf-space-4)); display: grid; gap: var(--tf-space-5); min-inline-size: 0; }
.tf-pdp__meta-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2); }
.tf-pdp__brand { --tf-brand-mark-size: 1.5rem; 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); text-decoration: none; display: inline-flex; align-items: center; min-block-size: var(--tf-control-compact); }
a.tf-pdp__brand:hover { color: var(--tf-brand); text-decoration: underline; text-underline-offset: 0.2em; }
a.tf-pdp__brand:hover .tf-brand-mark { color: var(--tf-brand); }
/* Назва товару — heading-small: довгі назви з артикулом стають у 2–3 рядки, і кнопка покупки лишається на першому екрані. */
.tf-pdp__title { font-size: var(--tf-size-heading-small); }
.tf-variant-fonts-number .tf-pdp__title { font-family: var(--tf-font-body); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.tf-pdp__price { font-size: var(--tf-size-price); }
.tf-pdp__meta-top + .tf-pdp__title,
.tf-pdp__title + .tf-pdp__price,
.tf-pdp__price + .tf-pdp__availability { margin-block-start: calc(var(--tf-space-3) * -1); }
/* Клієнт «Дроп» або «Опт»: рівень ціни й роздрібна ціна — між ціною та наявністю. */
.tf-pdp__b2b { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tf-space-1) var(--tf-space-3); margin: 0; font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-pdp__b2b-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-pdp__b2b-retail { font-variant-numeric: var(--tf-numeric); white-space: nowrap; }
.tf-pdp__price + .tf-pdp__b2b,
.tf-pdp__b2b + .tf-pdp__availability { margin-block-start: calc(var(--tf-space-3) * -1); }

/* Галерея */
.tf-gallery { display: grid; gap: var(--tf-space-3); min-inline-size: 0; position: relative; }
.tf-gallery__primary { padding: var(--tf-space-5); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); overflow: hidden; }
.tf-gallery__primary a { position: relative; display: block; }
.tf-gallery__primary img { inline-size: 100%; block-size: auto; aspect-ratio: var(--tf-media-product); object-fit: contain; mix-blend-mode: multiply; }
.tf-gallery__zoom-icon { position: absolute; inset-block-end: var(--tf-space-3); inset-inline-end: var(--tf-space-3); display: grid; place-items: center; inline-size: var(--tf-icon-button); block-size: var(--tf-icon-button); border-radius: var(--tf-radius-pill); background: var(--tf-surface-subtle); }
.tf-gallery__nav { display: flex; align-items: center; justify-content: center; gap: var(--tf-space-3); font-family: var(--tf-font-mono); font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-gallery__thumbnails { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); }
.tf-gallery__thumbnail { display: grid; place-items: center; inline-size: 3.75rem; block-size: 3.75rem; padding: var(--tf-space-1); border: var(--tf-bw-control) solid var(--tf-border); border-radius: var(--tf-radius-m); background: var(--tf-surface); cursor: pointer; }
.tf-gallery__thumbnail img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.tf-gallery__thumbnail[aria-pressed="true"] { border-color: var(--tf-text); box-shadow: inset 0 0 0 1px var(--tf-text); }
/* З JS мініатюри — кнопки, посилання no-JS приховані ще до виконання скрипта (клас tf-js з <head>), без зсуву. */
.tf-js .tf-gallery__thumbnail[data-tf-gallery-link] { display: none; } /* tf-native-exception: none. */
.tf-js .tf-gallery__thumbnail[data-tf-gallery-thumbnail][hidden] { display: grid !important; }
/* Відео товару: без JS — окремий кадр під фото; з JS — пункт галереї на місці фото (data-active). */
.tf-gallery__video { display: grid; gap: var(--tf-space-2); margin: 0; }
.tf-gallery__video video { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--tf-media-product); object-fit: contain; background: var(--tf-surface-subtle); border-radius: var(--tf-radius-l); }
.tf-gallery__video figcaption { font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-js .tf-gallery__video:not([data-active]) { display: none; } /* tf-native-exception: none. */
.tf-gallery__thumbnail--video { position: relative; }
.tf-gallery__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tf-canvas); pointer-events: none; }
.tf-gallery__play svg { inline-size: 1.75rem; block-size: 1.75rem; padding: var(--tf-space-1); border-radius: var(--tf-radius-pill); background: var(--tf-ink-scrim); }
.tf-gallery__dialog { inline-size: min(calc(100% - var(--tf-space-6)), 56rem); 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-gallery__dialog::backdrop { background: var(--tf-ink-scrim); }
.tf-gallery__dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-3); margin-block-end: var(--tf-space-3); }
.tf-gallery__dialog h2 { font-size: var(--tf-size-lede); }
.tf-gallery__dialog img { inline-size: 100%; block-size: auto; max-block-size: 70dvh; object-fit: contain; }

/* Покриття, кольори */
.tf-pdp__surface { display: grid; gap: var(--tf-space-3); padding-block: var(--tf-space-4); border-block: var(--tf-bw-divider) solid var(--tf-border); }
.tf-pdp__surface h2 { 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-pdp__surface ul { display: grid; gap: var(--tf-space-2); list-style: none; margin: 0; padding: 0; }
.tf-pdp__surface li { display: flex; align-items: baseline; gap: var(--tf-space-3); font-size: var(--tf-size-small); }
.tf-pdp__surface li:has(.tf-surface-photo) { align-items: center; }
.tf-surface-photo { flex: none; inline-size: 3rem; block-size: 3rem; overflow: hidden; border-radius: var(--tf-radius-s); background: var(--tf-surface-subtle); } /* Зображення покриття (inc/surface-media.php), декоративне. */
.tf-surface-photo :is(picture, img) { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tf-colorways h2 { font-size: var(--tf-size-body); }
.tf-colorways ul { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); list-style: none; margin: var(--tf-space-2) 0 0; padding: 0; }
.tf-colorway { display: inline-flex; align-items: center; min-block-size: var(--tf-control); padding: var(--tf-space-2) var(--tf-space-3); border: var(--tf-bw-control) solid var(--tf-control-border); border-radius: var(--tf-radius-m); font-size: var(--tf-size-small); text-decoration: none; }
.tf-colorway.is-current { border-color: var(--tf-text); font-weight: 700; }
.tf-colorway--thumb { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; min-block-size: 0; padding: var(--tf-space-1); overflow: hidden; background: var(--tf-surface); }
.tf-colorway--thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
a.tf-colorway--thumb:hover { border-color: var(--tf-text); }

/* Форма покупки */
.tf-buying-form { display: grid; gap: var(--tf-space-4); min-inline-size: 0; container-type: inline-size; }
.tf-size-selector__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: var(--tf-space-2); }
.tf-size-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-block-size: 3.75rem; padding: var(--tf-space-2); border: var(--tf-bw-control) solid var(--tf-control-border); border-radius: var(--tf-radius-m); background: var(--tf-surface); text-align: center; font-weight: 700; cursor: pointer; }
.tf-size-option--wide { grid-column: 1 / -1; }
.tf-size-option--wide .tf-size-option__value { white-space: normal; overflow-wrap: anywhere; }
.tf-size-option input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
.tf-size-option small { font-size: var(--tf-size-label); font-weight: 400; color: var(--tf-text-muted); }
.tf-size-option:has(input:checked) { background: var(--tf-text); border-color: var(--tf-text); color: var(--tf-on-inverse); }
.tf-size-option:has(input:checked) small { color: inherit; } /* tf-native-exception: inherit. */
.tf-size-option:has(input:checked) .tf-size-option__value::after { content: " ✓"; }
.tf-size-option:has(input:focus-visible) { outline: var(--tf-bw-focus) solid var(--tf-focus); outline-offset: var(--tf-space-1); }
.tf-size-option--transit { border-style: dashed; } /* Розмір у дорозі: можна замовити, відправимо пізніше (1С-адаптер). */
.tf-size-option--transit small { color: var(--tf-warning); }
.tf-size-option--transit:has(input:checked) { border-style: solid; }
.tf-size-option--unavailable { background: var(--tf-surface-subtle); border-style: dashed; color: var(--tf-text-muted); cursor: not-allowed; }
.tf-size-option--unavailable .tf-size-option__value { text-decoration: line-through; }
.tf-size-selector__error { margin-block-start: var(--tf-space-3); }
/* Панель обраного розміру й «Очистити вибір» стоять під кнопкою покупки: вибір розміру не зсуває кнопку. */
.tf-buying-form__reset { justify-self: start; margin-block-start: calc(var(--tf-space-3) * -1); border: 0; background: transparent; padding: 0; min-block-size: var(--tf-target); cursor: pointer; font-size: var(--tf-size-small); } /* tf-native-exception: transparent. */
.tf-size-help { font-size: var(--tf-size-small); }
.tf-variation-state { padding: var(--tf-space-3) var(--tf-space-4); background: var(--tf-surface-subtle); border-radius: var(--tf-radius-m); font-size: var(--tf-size-small); }
/* До вибору розміру панель порожня: місця не займає, але лишається в дереві доступності — інакше aria-live
   не оголосить розмір, ціну й наявність після вибору. */
.tf-variation-state:has(> dl[hidden]) { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.tf-variation-state dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tf-space-3); }
.tf-variation-state dl div { display: grid; gap: 2px; }
.tf-variation-state dt { font-size: var(--tf-size-label); color: var(--tf-text-muted); }
.tf-variation-state dd { font-weight: 700; }
.tf-buying-form__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tf-space-3); }
.tf-quantity label { display: block; margin-block-end: var(--tf-space-1); font-size: var(--tf-size-caption); }
.tf-quantity__control { display: flex; align-items: center; inline-size: 8.75rem; max-inline-size: 100%; border: var(--tf-bw-control) solid var(--tf-control-border); border-radius: var(--tf-radius-pill); background: var(--tf-surface); overflow: hidden; }
.tf-quantity__control button { flex: none; inline-size: var(--tf-target); block-size: calc(var(--tf-control) + 2px); border: 0; background: transparent; font-size: var(--tf-size-lede); } /* tf-native-exception: transparent. */
.tf-quantity__control input { flex: 1; min-inline-size: 0; block-size: calc(var(--tf-control) + 2px); border: 0; background: transparent; text-align: center; font-weight: 700; } /* tf-native-exception: transparent. */
.tf-quantity__control:has(button:not([hidden])) input { appearance: textfield; -moz-appearance: textfield; }
.tf-quantity__control input::-webkit-inner-spin-button,
.tf-quantity__control input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.tf-buying-form__submit { flex: 1 1 12rem; min-block-size: 3rem; }
/* Підтвердження «Додано в кошик»: та сама м'яка плашка, що й стан варіації, позначка — колір кнопки покупки.
   Фокус сюди ставить скрипт (не клавіатура), тож рамки фокуса немає: елемент не інтерактивний. */
.tf-add-success { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--tf-space-3) var(--tf-space-4); padding: var(--tf-space-4); border-radius: var(--tf-radius-m); background: var(--tf-surface-subtle); animation: tf-add-success-in var(--tf-motion-normal) var(--tf-easing); }
.tf-add-success[hidden] { display: none; }
.tf-add-success:focus { outline: none; }
.tf-add-success__mark { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--tf-radius-dot); background: var(--tf-accent); color: var(--tf-on-accent); }
.tf-add-success__mark .tf-icon { stroke-width: 2.4; }
.tf-add-success__text { display: grid; gap: 2px; margin: 0; }
.tf-add-success__title { font-weight: 700; }
.tf-add-success__name,
.tf-add-success__meta { font-size: var(--tf-size-small); overflow-wrap: anywhere; }
.tf-add-success__meta { color: var(--tf-text-muted); }
.tf-add-success__cart { grid-column: 1 / -1; min-block-size: var(--tf-target); }
@container (min-width: 30rem) {
	.tf-add-success { grid-template-columns: auto minmax(0, 1fr) auto; }
	.tf-add-success__cart { grid-column: auto; }
}
@keyframes tf-add-success-in { from { opacity: 0; transform: translateY(var(--tf-space-2)); } }

/* Обране й порівняння + інформація: окремий елемент сітки .tf-pdp__layout після панелі покупки
   (на wide — під галереєю, див. Responsive) */
.tf-pdp__details { display: grid; gap: var(--tf-space-5); min-inline-size: 0; }
.tf-pdp__information { display: grid; }
.tf-facts { display: grid; gap: var(--tf-space-2); font-size: var(--tf-size-small); }
.tf-facts > div { display: flex; justify-content: space-between; gap: var(--tf-space-4); padding-block: var(--tf-space-1); border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-facts dt { color: var(--tf-text-muted); }
.tf-facts dd { text-align: end; }
.tf-pdp__information .tf-text-link { display: inline-flex; align-items: center; min-block-size: var(--tf-target); inline-size: fit-content; }
.tf-pdp__information .tf-tier-guide-pdp { margin-block-start: var(--tf-space-2); } /* «Рівні бутс {бренд}: за що доплачуєш» — inc/tier-guide.php. */
/* Опис — на всю ширину під галереєю та панеллю покупки; на wide відрізки між заголовками (.tf-pdp__description-cols,
   розмічає ProductDetailPage::description_sections) — у дві колонки, заголовки — на всю ширину між ними.
   Не column-span: all — у Safari спанер обрізано дублює рядок наступного відрізка. */
.tf-pdp__description { display: grid; gap: var(--tf-space-4); margin-block-start: var(--tf-space-8); padding-block-start: var(--tf-space-6); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-pdp__description .tf-prose { max-inline-size: none; font-size: var(--tf-size-lede); }
.tf-pdp__description .tf-prose > :first-child { margin-block-start: 0; }
.tf-pdp__collections { display: grid; gap: var(--tf-space-2); }
.tf-pdp__collections h2 { 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-pdp__collections a { display: inline-flex; align-items: center; gap: var(--tf-space-2); min-block-size: var(--tf-target); inline-size: fit-content; }
.tf-pdp__related,
.tf-pdp__relations { margin-block-start: var(--tf-space-9); }
.tf-pdp__relations + .tf-pdp__relations,
.tf-pdp__relations + .tf-pdp__related { margin-block-start: var(--tf-space-8); }
:is(.tf-pdp__related, .tf-pdp__relations) .tf-section-head h2 { font-size: var(--tf-size-heading-medium); }

/* Sticky «Додати в кошик» (compact, S4-08, D-04 A): один регіон, показує розмір і ціну, не перекриває фокус */
.tf-sticky-buy {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--tf-layer-sticky);
	display: flex;
	align-items: center;
	gap: var(--tf-space-3);
	padding: var(--tf-space-3) var(--tf-gutter) calc(var(--tf-space-3) + env(safe-area-inset-bottom));
	background: var(--tf-surface);
	border-block-start: var(--tf-bw) solid var(--tf-border);
	box-shadow: var(--tf-shadow-overlay);
}
.tf-sticky-buy[hidden] { display: none; } /* tf-native-exception: none — панель існує лише після прокрутки форми. */
.tf-sticky-buy__summary { display: grid; gap: 2px; flex: 1 1 auto; min-inline-size: 0; }
.tf-sticky-buy__name { font-size: var(--tf-size-small); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-sticky-buy__state { font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-sticky-buy__action { flex: none; }
main:has(.tf-sticky-buy:not([hidden])) { padding-block-end: var(--tf-sticky-buy-h, 5.5rem); }
html:has(.tf-sticky-buy:not([hidden])) { scroll-padding-block-end: var(--tf-sticky-buy-h, 5.5rem); }
@media (prefers-reduced-motion: no-preference) {
	.tf-sticky-buy { animation: tf-sticky-buy-in var(--tf-motion-normal) var(--tf-easing); }
	@keyframes tf-sticky-buy-in { from { transform: translateY(100%); } to { transform: none; } }
}

/* ---------- Responsive ---------- */
@media (min-width: 64rem) {
	.tf-sticky-buy { display: none; } /* tf-native-exception: none — на wide блок покупки sticky у колонці, панель не потрібна. */
	/* Панель покупки вища за фото — обране й порівняння, факти, сервісні посилання й колекції стають під галерею,
	   а панель тягнеться на обидва ряди. Другий ряд — 1fr: різницю висот забирає він, тож між галереєю і блоком
	   лише row-gap (власний верхній відступ кнопок тут зайвий). */
	.tf-pdp__layout:has(> .tf-pdp__details) { grid-template-rows: auto 1fr; row-gap: var(--tf-space-6); }
	.tf-pdp__layout:has(> .tf-pdp__details) > .tf-pdp__summary { grid-column: 2; grid-row: 1 / span 2; }
	.tf-pdp__details { grid-column: 1; grid-row: 2; }
	.tf-pdp__details > .tf-pdp__saved { margin-block-start: 0; }
}
@media (min-width: 64rem) {
	.tf-pdp__description-cols { column-count: 2; column-gap: var(--tf-space-8); orphans: 3; widows: 3; }
	.tf-pdp__description-cols :is(li, img, figure, table, blockquote) { break-inside: avoid; }
	/* Відступ між пунктами з <p> усередині — padding самого пункту, а не margin: Safari переносить margin
	   на початок наступної колонки, і вона стартує нижче за сусідню. */
	.tf-pdp__description-cols li > p:last-child { margin-block-end: 0; }
	.tf-pdp__description-cols li:has(> p:last-child):not(:last-child) { padding-block-end: 1em; }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
	.tf-pdp__layout { gap: var(--tf-space-6); }
}
@media (max-width: 63.99rem) {
	.tf-pdp__layout { grid-template-columns: minmax(0, 1fr); gap: var(--tf-space-5); }
	.tf-pdp__summary { position: static; }
	.tf-pdp__related { margin-block-start: var(--tf-space-8); }
}
@media (max-width: 47.99rem) {
	.tf-pdp-main { padding-block-end: var(--tf-space-7); }
	.tf-gallery__primary { padding: var(--tf-space-3); }
	.tf-gallery__dialog { padding: var(--tf-space-3); }
	.tf-buying-form__submit { flex-basis: 100%; }
	.tf-variation-state dl { grid-template-columns: minmax(0, 1fr); }
}