/* =========================================================================
   Teamfootball — кошик, оформлення, підтвердження: presentation навколо
   нативних блоків WooCommerce (і класичних шорткодів).
   Кошик 2.0 — концепт design/concept-cart.html (погоджено 2026-09-23).
   ====================================================================== */
.tf-commerce-main { padding-block: var(--tf-space-2) var(--tf-space-9); }
.tf-commerce-main .wp-block-post-content { max-inline-size: none; }

/* ---------- Заголовок: крихти, «Кошик» + кількість, кроки замовлення ---------- */
.tf-commerce-header { display: grid; gap: var(--tf-space-2); margin-block-end: var(--tf-space-6); padding-block-end: var(--tf-space-5); border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.tf-commerce-header__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tf-space-4) var(--tf-space-7); }
.tf-commerce-header__title { display: grid; gap: var(--tf-space-3); }
.tf-commerce-header__heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2) var(--tf-space-4); }
.tf-commerce-header h1 { font-size: var(--tf-size-heading); }
.tf-commerce-count { display: inline-flex; align-items: center; padding: var(--tf-space-2) var(--tf-space-4); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-pill); background: var(--tf-surface); font-size: var(--tf-size-small); font-weight: 700; line-height: 1.2; }

.tf-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2) var(--tf-space-3); margin: 0; padding: 0; list-style: none; }
.tf-steps__item { display: flex; align-items: center; gap: var(--tf-space-2); color: var(--tf-text-muted); font-size: var(--tf-size-small); font-weight: 600; white-space: nowrap; }
.tf-steps__item:not(:last-child)::after { content: ""; inline-size: var(--tf-space-7); block-size: var(--tf-bw-control); margin-inline-start: var(--tf-space-1); background: var(--tf-border); }
.tf-steps__num { display: grid; place-items: center; inline-size: 1.875rem; block-size: 1.875rem; border: var(--tf-bw-control) solid var(--tf-control-border); border-radius: var(--tf-radius-dot); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; }
.tf-steps__item.is-current,
.tf-steps__item.is-done { color: var(--tf-text); }
.tf-steps__item.is-current .tf-steps__num { border-color: var(--tf-text); background: var(--tf-text); color: var(--tf-on-inverse); }
.tf-steps__item.is-done .tf-steps__num { border-color: var(--tf-brand); background: var(--tf-brand); color: var(--tf-on-inverse); }
.tf-steps__item.is-done .tf-icon { inline-size: .875rem; block-size: .875rem; stroke-width: 2.6; }
.tf-steps__item.is-done a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); color: inherit; text-decoration: underline; text-underline-offset: .2em; }

.tf-commerce-context { display: grid; gap: var(--tf-space-3); justify-items: start; padding-block: var(--tf-space-4); margin-block-end: var(--tf-space-5); border-block: var(--tf-bw-divider) solid var(--tf-border); }
.tf-commerce-header + .tf-commerce-context { padding-block-start: 0; border-block-start: 0; } /* Межу під заголовком уже малює .tf-commerce-header. */
.tf-commerce-context__delivery { padding-inline-start: var(--tf-space-3); border-inline-start: var(--tf-bw-focus) solid var(--tf-warning); font-size: var(--tf-size-small); }
.tf-commerce-context .tf-text-link { display: inline-flex; align-items: center; min-block-size: var(--tf-target); }
.tf-checkout-error-summary { inline-size: 100%; }
.tf-checkout-recovery { inline-size: 100%; border: 0; }
.tf-checkout-recovery form,
.tf-cart-undo { display: grid; gap: var(--tf-space-3); justify-items: start; }
.tf-cart-undo { inline-size: 100%; margin-block-end: var(--tf-space-5); }

/* ---------- Порожній кошик (сервер і блок WooCommerce після видалення останнього товару) ---------- */
.tf-commerce-empty { display: grid; justify-items: center; gap: var(--tf-space-4); padding: var(--tf-space-8) var(--tf-space-6); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); text-align: center; }
.tf-commerce-empty__icon { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--tf-radius-dot); background: var(--tf-canvas); color: var(--tf-brand); }
.tf-commerce-empty__icon .tf-icon { inline-size: 1.875rem; block-size: 1.875rem; stroke-width: 1.6; }
.tf-commerce-empty h2 { font-size: var(--tf-size-heading-small); }
.tf-commerce-empty p { margin: 0; }
.tf-commerce-empty p:not(.tf-eyebrow):not(.tf-commerce-empty__label) { color: var(--tf-text-muted); max-inline-size: 44ch; }
.tf-commerce-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tf-space-3); }
.tf-commerce-empty__sections { display: grid; justify-items: center; gap: var(--tf-space-3); inline-size: 100%; max-inline-size: 40rem; margin-block-start: var(--tf-space-3); padding-block-start: var(--tf-space-5); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-commerce-empty__label { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-label); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-commerce-empty__sections ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tf-space-2); margin: 0; padding: 0; list-style: none; }
.wp-block-woocommerce-empty-cart-block { text-align: start; }

/* Нативні контроли блоків: висота цілі, типографіка, кольори */
.wp-block-woocommerce-cart :is(button, input:not([type="checkbox"]):not([type="radio"]), select, a.wc-block-components-button),
.wp-block-woocommerce-checkout :is(button, input:not([type="checkbox"]):not([type="radio"]), select, a.wc-block-components-button) {
	/* tf-native-exception: inherit — контроли Woo успадковують токенізовану типографіку. */
	font: inherit;
	min-block-size: var(--tf-target);
}
.wp-block-woocommerce-cart :is(input, select),
.wp-block-woocommerce-checkout :is(input, select) { background: var(--tf-surface); color: var(--tf-text); }
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order {
	background: var(--tf-accent);
	color: var(--tf-on-accent);
	border-radius: var(--tf-radius-pill);
	font-weight: 700;
	min-block-size: 3rem;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout #place_order:hover { background: var(--tf-accent-hover); color: var(--tf-on-accent); }
.wp-block-woocommerce-cart :is(button, input, select, a):focus-visible,
.wp-block-woocommerce-checkout :is(button, input, select, a):focus-visible { outline: var(--tf-bw-focus) solid var(--tf-focus); outline-offset: var(--tf-space-1); }
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar { padding: var(--tf-space-6); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); align-self: start; }

/* =========================================================================
   Кошик: колонка товарів (картка) і колонка підсумку (картка з сегментів +
   картка допомоги). Числа, стани й кнопки — нативні, тема лише розкладає.
   ====================================================================== */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout { margin: 0; }
.wp-block-woocommerce-cart .wc-block-cart__main .tf-bonus-panel { max-inline-size: none; }

/* Шапка картки товарів + нативна таблиця як тіло картки */
.tf-cart-items-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tf-space-1) var(--tf-space-4); min-block-size: var(--tf-space-8); padding: var(--tf-space-2) var(--tf-space-6); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-block-end: 0; border-start-start-radius: var(--tf-radius-l); border-start-end-radius: var(--tf-radius-l); }
.tf-cart-items-head__title { font-size: calc(var(--tf-size-body) * 1.25); }
.tf-cart-items-head__back { display: inline-flex; align-items: center; gap: var(--tf-space-2); min-block-size: var(--tf-target); }
.tf-cart-items-head__back .tf-icon { inline-size: 1rem; block-size: 1rem; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items { inline-size: 100%; border: var(--tf-bw) solid var(--tf-border); border-collapse: separate; border-spacing: 0; border-end-start-radius: var(--tf-radius-l); border-end-end-radius: var(--tf-radius-l); }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header { display: none; } /* tf-native-exception: none — заголовок таблиці дублює підписи рядків (підпис таблиці лишається для читачів екрана). */

/* Рядок: фото 128 px | назва, ціна за одиницю, чіпи розміру й покриття, кількість | сума рядка й економія */
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; column-gap: var(--tf-space-6); row-gap: var(--tf-space-3); padding: var(--tf-space-6); background: var(--tf-surface); border: 0; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row + .wc-block-cart-items__row { border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row:last-child { border-end-start-radius: calc(var(--tf-radius-l) - var(--tf-bw)); border-end-end-radius: calc(var(--tf-radius-l) - var(--tf-bw)); }
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > div:not([class]):empty { display: none; } /* tf-native-exception: none — службовий порожній div WooCommerce не займає місце в сітці й відступ у колонці. */
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row > td { align-self: start; margin: 0; padding: 0; border: 0; vertical-align: top; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { grid-column: 1; grid-row: 1; inline-size: 8rem; padding: 0; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-column: 2; grid-row: 1; min-inline-size: 0; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { grid-column: 3; grid-row: 1; min-inline-size: 7rem; text-align: end; }
.wp-block-woocommerce-cart .wc-block-cart-item__image a { display: block; padding: var(--tf-space-2); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-m); background: var(--tf-surface); }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img { display: block; inline-size: 100%; aspect-ratio: var(--tf-media-product); object-fit: contain; }
/* Колонка, не сітка: WooCommerce у вузькому блоці ставить кількості grid-row: 2, і в сітці вона підскакувала під назву. */
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tf-space-2); }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name { max-inline-size: none; color: var(--tf-text); font-size: var(--tf-size-body); font-weight: 700; line-height: var(--tf-lh-body); text-decoration: none; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover { color: var(--tf-brand); text-decoration: underline; text-underline-offset: .2em; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices { color: var(--tf-text-muted); font-size: var(--tf-size-small); }
.wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value { color: var(--tf-text); font-weight: 600; text-decoration: none; }
.wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__regular { color: var(--tf-text-muted); }
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-metadata { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--tf-space-2); margin: 0; }
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-metadata__description { flex-basis: 100%; color: var(--tf-text-muted); font-size: var(--tf-size-small); }
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-details { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin: 0; padding: 0; list-style: none; }
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-details > :is(li, span) { display: inline-flex; align-items: baseline; gap: var(--tf-space-1); margin: 0; padding: var(--tf-space-1) var(--tf-space-2); border-radius: var(--tf-radius-s); background: var(--tf-surface-subtle); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); letter-spacing: var(--tf-ls-mono); line-height: 1.4; }
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-details__name { color: var(--tf-text-muted); font-weight: 500; text-transform: uppercase; }
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-details__value { color: var(--tf-text); font-weight: 700; }
/* Нативні бейджі залишку («Лишилось N») і передзамовлення — стан завжди текстом, з крапкою попередження */
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-badge { display: inline-flex; align-items: center; gap: var(--tf-space-2); padding: 0; border: 0; background: none; color: var(--tf-warning); font-size: var(--tf-size-small); font-weight: 700; text-transform: none; white-space: normal; }
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-badge::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: var(--tf-radius-dot); background: currentColor; }

/* Кількість (кнопки 44 px + поле) і видалення (44 px) */
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2); margin-block-start: var(--tf-space-1); }
.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector { display: inline-flex; align-items: center; inline-size: auto; margin: 0; border: var(--tf-bw-control) solid var(--tf-control-border); border-radius: var(--tf-radius-pill); background: var(--tf-surface); }
.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { display: grid; place-items: center; min-inline-size: var(--tf-target); min-block-size: var(--tf-target); border-radius: var(--tf-radius-pill); color: var(--tf-text); font-size: var(--tf-size-lede); opacity: 1; }
.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover { background: var(--tf-surface-subtle); }
.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { color: var(--tf-disabled); background: none; cursor: not-allowed; }
.wp-block-woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { inline-size: 2.5rem; min-inline-size: 2.5rem; min-block-size: var(--tf-target); padding: 0; color: var(--tf-text); font-size: var(--tf-size-body); font-weight: 700; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link { display: inline-grid; place-items: center; inline-size: var(--tf-target); block-size: var(--tf-target); border-radius: var(--tf-radius-pill); color: var(--tf-text-muted); text-decoration: none; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover { background: var(--tf-surface-subtle); color: var(--tf-danger); }
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link svg { inline-size: 1.25rem; block-size: 1.25rem; }

/* Сума рядка — display-кеглем; економія (сума WooCommerce) — бейджем акценту */
.wp-block-woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: grid; justify-items: end; align-content: start; gap: var(--tf-space-2); block-size: auto; }
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value { color: var(--tf-text); font-family: var(--tf-font-money); font-size: calc(var(--tf-size-body) * 1.25); font-weight: 700; letter-spacing: var(--tf-ls-heading); text-decoration: none; white-space: nowrap; }
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-sale-badge { display: inline-flex; margin: 0; padding: var(--tf-space-1) var(--tf-space-2); border: 0; border-radius: var(--tf-radius-s); background: var(--tf-accent); color: var(--tf-on-accent); font-size: var(--tf-size-caption); font-weight: 800; letter-spacing: 0; text-transform: none; }
.wp-block-woocommerce-cart .wc-block-cart-items__row.is-disabled { opacity: .55; }

/* «Доповни комплект»: міні-картки теми */
.tf-cart-cross { display: grid; gap: var(--tf-space-4); margin-block-start: var(--tf-space-7); }
.tf-cart-cross__title { font-size: var(--tf-size-heading-small); }
.tf-cart-cross__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--tf-space-3); margin: 0; padding: 0; list-style: none; }

/* Колонка підсумку: сегменти однієї картки (заголовок і рядки WooCommerce → примітка й дата → кнопка →
   гостьове оформлення, переваги, оплата) і окрема картка допомоги */
.wp-block-woocommerce-cart .wc-block-cart__sidebar { display: flex; flex-direction: column; padding: 0; background: none; border: 0; border-radius: 0; }
.wp-block-woocommerce-cart .wc-block-cart__sidebar > :is(.wp-block-woocommerce-cart-order-summary-block, .wc-block-cart__payment-options, .tf-cart-summary-meta, .wc-block-cart__submit, .tf-cart-summary-end) { margin: 0; padding-inline: var(--tf-space-6); background: var(--tf-surface); border-inline: var(--tf-bw) solid var(--tf-border); }
.wp-block-woocommerce-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block { padding-block-start: var(--tf-space-6); border-block-start: var(--tf-bw) solid var(--tf-border); border-block-end: 0; border-start-start-radius: var(--tf-radius-l); border-start-end-radius: var(--tf-radius-l); }
/* WooCommerce ховає заголовок у вузькому блоці (@container ≤ 699px); у концепті «Підсумок» є на всіх ширинах */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title { display: block; margin: 0; padding: 0 0 var(--tf-space-4); color: var(--tf-text); font-family: var(--tf-font-display); font-size: calc(var(--tf-size-body) * 1.375); font-weight: 700; line-height: var(--tf-lh-heading); text-align: start; text-transform: none; }
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper { padding-block: var(--tf-space-3); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:empty { display: none; } /* tf-native-exception: none — порожня обгортка без рядків не малює зайвий роздільник. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block { padding-block: 0; border-block-start: var(--tf-bw-divider) dashed var(--tf-border); border-block-end: 0; }
.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button { display: flex; align-items: center; min-block-size: 3rem; margin: 0; padding-block: var(--tf-space-2); color: var(--tf-text); font-weight: 600; }
.wp-block-woocommerce-cart .wc-block-components-totals-item { gap: var(--tf-space-2) var(--tf-space-4); color: var(--tf-text); font-size: var(--tf-size-body); }
.wp-block-woocommerce-cart .wc-block-components-totals-item__label { color: var(--tf-text-muted); }
.wp-block-woocommerce-cart .wc-block-components-totals-item__value { font-weight: 600; }
.wp-block-woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--tf-success); }
.wp-block-woocommerce-cart .wc-block-components-totals-discount__coupon-list { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin: 0; padding: 0; list-style: none; }
/* Купон у рядку знижки — пілюля з кнопкою «прибрати» 44 px (правило контролів теми) */
.wp-block-woocommerce-cart .wc-block-components-totals-discount__coupon-list-item.wc-block-components-chip { display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0 0 0 var(--tf-space-3); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-pill); background: var(--tf-surface-subtle); color: var(--tf-text); font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; }
.wp-block-woocommerce-cart .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove { display: inline-grid; place-items: center; inline-size: var(--tf-target); block-size: var(--tf-target); margin: 0; padding: 0; border: 0; border-radius: var(--tf-radius-pill); background: none; color: var(--tf-text-muted); }
.wp-block-woocommerce-cart .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove:hover { color: var(--tf-danger); }
.wp-block-woocommerce-cart .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove svg { inline-size: 1rem; block-size: 1rem; fill: currentColor; }
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item { align-items: baseline; padding-block-start: var(--tf-space-1); }
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--tf-text); font-size: var(--tf-size-body); font-weight: 700; }
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--tf-text); font-family: var(--tf-font-money); font-size: calc(var(--tf-size-price) * 1.3); font-weight: 700; letter-spacing: var(--tf-ls-heading); }
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__description { color: var(--tf-text-muted); font-size: var(--tf-size-caption); }

.tf-cart-summary-meta { display: grid; gap: var(--tf-space-3); padding-block-end: var(--tf-space-4); }
.tf-cart-total-note { margin: 0; color: var(--tf-text-muted); font-size: var(--tf-size-caption); }
.wc-block-cart__sidebar:has(.wc-block-components-totals-shipping) .tf-cart-total-note { display: none; } /* tf-native-exception: none — WooCommerce сам показує рядок доставки. */
.tf-cart-summary-meta .tf-signal { margin: 0; padding: var(--tf-space-3) var(--tf-space-4); border-radius: var(--tf-radius-m); background: var(--tf-canvas); color: var(--tf-text-muted); }
.tf-cart-summary-meta .tf-signal .tf-icon { color: var(--tf-brand); }

.wp-block-woocommerce-cart .wc-block-cart__sidebar > .wc-block-cart__submit { padding-block-end: var(--tf-space-3); }
/* Специфічніше за загальне правило контролів вище (:is(… input:not(…):not(…) …) важить 0,3,1) */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__submit-container a.wc-block-cart__submit-button { min-block-size: 3.5rem; border: 0; font-size: var(--tf-size-body); text-align: center; }
.wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text { font-weight: 700; }
.tf-cart-summary-end { overflow: hidden; min-block-size: var(--tf-radius-l); padding-inline: 0; border-block-end: var(--tf-bw) solid var(--tf-border); border-end-start-radius: var(--tf-radius-l); border-end-end-radius: var(--tf-radius-l); }
.wp-block-woocommerce-cart .wc-block-cart__sidebar > .tf-cart-summary-end { padding-inline: 0; }
.tf-cart-guest { display: flex; align-items: center; justify-content: center; gap: var(--tf-space-2); margin: 0; padding: 0 var(--tf-space-6) var(--tf-space-5); color: var(--tf-text-muted); font-size: var(--tf-size-small); }
.tf-cart-guest .tf-icon { inline-size: 1rem; block-size: 1rem; }
.tf-cart-assure { display: grid; gap: var(--tf-space-4); padding: var(--tf-space-5) var(--tf-space-6); background: var(--tf-canvas); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
.tf-cart-facts { display: grid; gap: var(--tf-space-2); margin: 0; padding: 0; list-style: none; }
.tf-cart-facts li { display: flex; align-items: center; gap: var(--tf-space-3); font-size: var(--tf-size-small); font-weight: 600; }
.tf-cart-facts .tf-icon { flex: none; inline-size: 1.125rem; block-size: 1.125rem; color: var(--tf-brand); stroke-width: 2.2; }
.tf-cart-pay { display: grid; gap: var(--tf-space-2); }
.tf-cart-pay__label { margin: 0; color: var(--tf-text-muted); 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-cart-pay__list { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin: 0; padding: 0; list-style: none; }
.tf-cart-pay__mark { display: block; inline-size: 3rem; block-size: 2rem; }

/* Марки способу оплати на оформленні й сторінці оплати замовлення — замість переліку назв у описі */
.tf-pay-marks { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); margin: 0; padding: 0; list-style: none; }
.tf-pay-marks + p { margin-block-start: var(--tf-space-2); }
#payment div.payment_box .tf-pay-marks__mark { display: block; float: none; inline-size: 3rem; block-size: 2rem; max-block-size: none; margin: 0; }

.tf-cart-help { display: grid; gap: var(--tf-space-1); margin-block-start: var(--tf-space-4); padding: var(--tf-space-5) var(--tf-space-6); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); }
.tf-cart-help__title { font-family: var(--tf-font-body); font-size: var(--tf-size-body); font-weight: 700; letter-spacing: 0; }
.tf-cart-help p { margin: 0; }
.tf-cart-help__phone a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); color: var(--tf-text); font-family: var(--tf-font-display); font-size: calc(var(--tf-size-body) * 1.25); font-weight: 700; font-variant-numeric: var(--tf-numeric); text-decoration: none; }
.tf-cart-help__phone a:hover { color: var(--tf-brand); }
.tf-cart-help__telegram a { min-block-size: var(--tf-target); color: var(--tf-text); font-size: calc(var(--tf-size-body) * 1.125); font-weight: 700; }
.tf-cart-help__telegram a:hover { color: var(--tf-brand); }
.tf-cart-help__hours { color: var(--tf-text-muted); font-size: var(--tf-size-small); }
.tf-cart-help__links { display: flex; flex-wrap: wrap; gap: 0 var(--tf-space-5); margin: var(--tf-space-1) 0 0; padding: 0; list-style: none; }
.tf-cart-help__links .tf-text-link { display: inline-flex; align-items: center; min-block-size: var(--tf-target); }

/* Липка кнопка WooCommerce на compact (поки вбудована кнопка поза екраном): панель теми з сумою на кнопці */
@media (max-width: 48.875rem) {
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__submit-container--sticky { z-index: var(--tf-layer-sticky); padding: var(--tf-space-3) var(--tf-space-4) calc(var(--tf-space-3) + env(safe-area-inset-bottom)); background: var(--tf-canvas); border-block-start: var(--tf-bw-divider) solid var(--tf-border); }
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__submit-container--sticky::before { content: none; }
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step { padding-block-end: var(--tf-space-6); margin-block-end: var(--tf-space-6); border-block-end: var(--tf-bw-divider) solid var(--tf-border); }
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title { font-family: var(--tf-font-display); font-size: var(--tf-size-heading-small); }
.wp-block-woocommerce-checkout .wc-block-components-text-input input { min-block-size: 3.25rem; }
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img { object-fit: contain; }

/* Класичні шорткоди (якщо сторінки використовують [woocommerce_cart]/[woocommerce_checkout]) */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table { background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); overflow: hidden; }
.woocommerce table.shop_table :is(th, td) { padding: var(--tf-space-3) var(--tf-space-4); border-block-end: var(--tf-bw-divider) solid var(--tf-border); text-align: start; }
.woocommerce form .form-row :is(input.input-text, textarea, select) { inline-size: 100%; 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); }
.woocommerce form .form-row textarea { min-block-size: 6rem; }
.woocommerce form .form-row label { font-size: var(--tf-size-small); font-weight: 600; }
.woocommerce-cart .cart-collaterals .cart_totals { padding: var(--tf-space-5); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); }
.woocommerce .quantity .qty { min-block-size: var(--tf-control); inline-size: 4.5rem; border: var(--tf-bw-control) solid var(--tf-control-border); border-radius: var(--tf-radius-pill); text-align: center; }
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button { min-block-size: var(--tf-control); padding: var(--tf-space-3) var(--tf-space-5); border: 0; border-radius: var(--tf-radius-pill); background: var(--tf-text); color: var(--tf-on-inverse); font-weight: 700; }
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover { background: var(--tf-inverse); color: var(--tf-on-inverse); }
.woocommerce button.button.alt,
.woocommerce a.button.alt { background: var(--tf-accent); color: var(--tf-on-accent); }
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover { background: var(--tf-accent-hover); }
.woocommerce button.button:disabled { background: var(--tf-disabled); color: var(--tf-text); }

/* Підтвердження */
.tf-order-result { padding-block: var(--tf-space-6); max-inline-size: 50rem; }
.tf-order-result h1 { font-size: var(--tf-size-heading); margin-block-end: var(--tf-space-4); }
.tf-order-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-4) var(--tf-space-6); margin-block-start: var(--tf-space-6); }
.tf-order-status { display: block; margin-block-start: var(--tf-space-3); }
.woocommerce-order-received .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: var(--tf-space-5); margin: 0 0 var(--tf-space-6); padding: var(--tf-space-5); list-style: none; background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); }
.woocommerce-order-received .woocommerce-order-overview li { margin: 0; padding: 0; border: 0; font-size: var(--tf-size-small); }
.woocommerce-order-received .woocommerce-order-overview strong { display: block; font-size: var(--tf-size-body); }
.woocommerce-order-received .shop_table,
.woocommerce-order-received .wc-block-order-confirmation-totals__table { inline-size: 100%; table-layout: fixed; overflow-wrap: anywhere; }
.woocommerce-order-received .wc-block-order-confirmation-totals__table :is(td, th),
.woocommerce-order-received .shop_table :is(td, th) { padding: var(--tf-space-3); }

/* ---------- Бонуси (плагін teamfootball-loyalty): панель у кошику й на checkout, пропозиція гостю після замовлення ---------- */
.tf-bonus-panel { display: grid; gap: var(--tf-space-3); max-inline-size: 44rem; margin-block-end: var(--tf-space-5); padding: var(--tf-space-5); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-border); border-radius: var(--tf-radius-l); }
.tf-bonus-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--tf-space-2) var(--tf-space-4); }
.tf-bonus-panel :is(h2, p) { margin: 0; }
.tf-bonus-panel .tf-account-tile__label { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-bonus-panel__balance { font-size: var(--tf-size-small); }
.tf-bonus-panel__text { font-size: var(--tf-size-small); }
.tf-bonus-panel__text--muted { color: var(--tf-text-muted); }
.tf-bonus-panel__text .tf-text-link { display: inline-flex; align-items: center; min-block-size: var(--tf-target); }
.tf-bonus-redeem { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--tf-space-3); }
.tf-bonus-redeem[hidden],
.tf-bonus-applied[hidden] { display: none; } /* tf-native-exception: none — атрибут hidden сильніший за display форми. */
.tf-bonus-redeem__field { display: grid; gap: var(--tf-space-2); min-inline-size: 0; }
.tf-bonus-redeem__field label { font-size: var(--tf-size-small); font-weight: 600; }
.tf-bonus-redeem__hint { font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-bonus-redeem > .tf-button { margin-block-start: calc(var(--tf-size-small) * 1.5 + var(--tf-space-2)); }
.tf-bonus-applied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--tf-space-2) var(--tf-space-4); 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); }
.tf-bonus-applied .tf-button { background: var(--tf-surface); }
.tf-bonus-earn { display: flex; align-items: flex-start; gap: var(--tf-space-3); padding-block-start: var(--tf-space-3); border-block-start: var(--tf-bw-divider) solid var(--tf-border); font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-bonus-earn[hidden] { display: none; } /* tf-native-exception: none — атрибут hidden сильніший за display рядка. */
.tf-bonus-panel__head + .tf-bonus-earn { padding-block-start: 0; border-block-start: 0; }
.tf-bonus-earn .tf-icon { flex: none; margin-block-start: 2px; color: var(--tf-brand); }
.tf-bonus-earn b { color: var(--tf-text); font-weight: 700; }
.tf-bonus-offer { display: grid; gap: var(--tf-space-3); justify-items: start; margin-block: var(--tf-space-5); padding: var(--tf-space-5) var(--tf-space-6); background: var(--tf-surface); border: var(--tf-bw) solid var(--tf-control-border); border-radius: var(--tf-radius-l); }
.tf-bonus-offer :is(h2, p) { margin: 0; }
.tf-bonus-offer .tf-account-tile__label { font-family: var(--tf-font-mono); font-size: var(--tf-size-label); font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-bonus-offer h2 { font-size: var(--tf-size-heading-small); }
.tf-bonus-offer h2 em { font-style: normal; color: var(--tf-brand); }
.tf-bonus-offer p:not(.tf-account-tile__label) { max-inline-size: 56ch; color: var(--tf-text-muted); }

/* ---------- Responsive ---------- */
/* Кошик wide: колонка товарів + колонка підсумку фіксованого діапазону; WooCommerce ставить у сітку ще й порожній
   службовий div, тож колонки задано явно. Підсумок липкий, лише коли вся колонка вміщується у вікно під шапкою. */
@media (min-width: 64rem) {
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem); column-gap: var(--tf-space-7); align-items: start; }
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-components-main { grid-column: 1; grid-row: 1; }
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-cart__sidebar { grid-column: 2; grid-row: 1; }
	.wp-block-woocommerce-cart .wc-block-components-main,
	.wp-block-woocommerce-cart .wc-block-cart__sidebar { inline-size: auto; margin: 0; padding-inline-end: 0; }
	/* Нативні колонки checkout — flex 65% + 35%: з column-gap підсумок падав під форму, а в 35% назва товару
	   стискалася до ~50px на 1024. Тому сітка з колонкою підсумку фіксованого діапазону. */
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); column-gap: var(--tf-space-8); align-items: start; }
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar { inline-size: auto; margin: 0; }
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main { padding-inline-end: 0; }
}
@media (min-width: 64rem) and (min-height: 56rem) {
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-cart__sidebar { position: sticky; inset-block-start: calc(var(--tf-header-h) + var(--tf-space-5)); }
}
/* Підсумок checkout — одна рамка: картка теми. Нативний блок підсумку має власну рамку, а його рядки — відступи
   16px і роздільники на всю ширину, тож картка без горизонтального padding; інакше дві рамки й подвійні
   відступи стискали назву товару. На compact — нативний згорнутий підсумок, картка з padding (нижче). */
@media (min-width: 48rem) {
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar { padding: var(--tf-space-2) 0; }
	.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block { border: 0; border-radius: 0; }
}
/* 768–1023: WooCommerce ще тримає дві колонки, і в 35% (~250px) назва товару ламалась по літерах. Підсумок —
   на всю ширину над формою; не sticky, бо в одній колонці наїжджав би на форму. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout { display: flex; flex-direction: column; gap: var(--tf-space-6); }
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar { inline-size: 100%; margin: 0; padding-inline-end: 0; }
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar { order: -1; position: static; }
}
@media (max-width: 63.99rem) {
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout { display: flex; flex-direction: column; gap: var(--tf-space-6); }
	.wp-block-woocommerce-cart .wc-block-components-main,
	.wp-block-woocommerce-cart .wc-block-cart__sidebar { inline-size: 100%; margin: 0; padding: 0; }
}
/* Рядок товару у вузькому блоці (поріг WooCommerce — ширина блоку 700 px): фото 88 px, сума рядка й економія —
   окремим рядком під кількістю, на всю ширину */
@container (max-width: 699px) {
	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--tf-space-4); padding: var(--tf-space-4); }
	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { inline-size: 5.5rem; }
	.wp-block-woocommerce-cart .wc-block-cart-item__image a { padding: var(--tf-space-1); }
	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { grid-column: 1 / -1; grid-row: 2; min-inline-size: 0; padding-block-start: var(--tf-space-3); border-block-start: var(--tf-bw-divider) dashed var(--tf-border); }
	.wp-block-woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: var(--tf-space-3); }
	.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price__value { font-size: var(--tf-size-lede); }
	.tf-cart-items-head { padding-inline: var(--tf-space-4); }
}
/* До 384 px три підписи кроків не вміщуються в рядок: непоточні — лише для читачів екрана, номери лишаються */
@media (max-width: 23.99rem) {
	.tf-steps__item:not(.is-current):not(.is-done) > span:not(.tf-steps__num) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 47.99rem) {
	.tf-bonus-panel { padding: var(--tf-space-4); }
	.tf-bonus-redeem { grid-template-columns: minmax(0, 1fr); }
	.tf-bonus-redeem > .tf-button { inline-size: 100%; margin-block-start: 0; }
	.tf-bonus-offer { padding: var(--tf-space-4); }
	.tf-bonus-offer .tf-button { inline-size: 100%; }
	.tf-commerce-main { padding-block-end: var(--tf-space-7); }
	.tf-commerce-header { margin-block-end: var(--tf-space-5); padding-block-end: var(--tf-space-4); }
	/* Кроки в один рядок на всю ширину: лінії-з'єднувачі гнучкі, кружки менші */
	.tf-commerce-header__row { flex-direction: column; align-items: stretch; }
	.tf-steps { flex-wrap: nowrap; gap: var(--tf-space-2); inline-size: 100%; }
	.tf-steps__item { gap: var(--tf-space-1); font-size: var(--tf-size-caption); }
	.tf-steps__item:not(:last-child) { flex: 1 1 auto; }
	.tf-steps__item:not(:last-child)::after { flex: 1 1 auto; inline-size: auto; min-inline-size: var(--tf-space-2); margin-inline-start: var(--tf-space-1); }
	.tf-steps__num { inline-size: 1.375rem; block-size: 1.375rem; }
	.tf-commerce-empty { padding: var(--tf-space-6) var(--tf-space-4); }
	.tf-commerce-empty__actions { flex-direction: column; align-self: stretch; }
	.tf-commerce-empty .tf-button,
	.wp-block-woocommerce-cart .wc-block-cart__submit-button,
	.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
	.tf-checkout-recovery .tf-button { inline-size: 100%; }
	.wp-block-woocommerce-cart .wc-block-cart__sidebar > :is(.wp-block-woocommerce-cart-order-summary-block, .wc-block-cart__payment-options, .tf-cart-summary-meta, .wc-block-cart__submit) { padding-inline: var(--tf-space-4); }
	.wp-block-woocommerce-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block { padding-block-start: var(--tf-space-5); }
	.tf-cart-guest { padding-inline: var(--tf-space-4); }
	.tf-cart-assure,
	.tf-cart-help { padding: var(--tf-space-4); }
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar { padding: var(--tf-space-4); }
	.woocommerce table.shop_table_responsive tr td { text-align: start; }
}

/* =========================================================================
   SmartyParcel на класичному оформленні (обидва сайти, не вигляд): видимий підпис рядка списку плагіна
   (data-tf-label — assets/js/checkout-delivery.js), фокус поля списку й підсвічена клавіатурою опція.
   ====================================================================== */
.wcus-checkout-fields .form-row[data-tf-label]::before { content: attr(data-tf-label); display: block; margin-block-end: var(--tf-space-1); font-size: var(--tf-size-small); font-weight: 600; color: var(--tf-text); }
.zen-ui-select__value:focus-visible,
.zen-ui-select__search-input:focus-visible { outline: var(--tf-bw-focus) solid var(--tf-focus); outline-offset: var(--tf-space-1); }
.zen-ui-select__option.tf-is-active { background: var(--tf-surface-subtle); box-shadow: inset var(--tf-bw-control) 0 0 var(--tf-text); }
/* Вартість доставки в підсумку блоку: «за тарифами перевізника» замість «Безкоштовно» (commerce.js) — без капсу WooCommerce. */
.wc-block-components-totals-shipping .wc-block-components-totals-item__value strong { text-transform: none; }