/* ==========================================================================
   TopShop — Кошик і оформлення (ТЗ §30, §31)
   ========================================================================== */

/* --- Сторінка -------------------------------------------------------------- */

.ts-page__title {
	margin-bottom: var(--ts-space-6);
}

/* --- Розкладка кошика ------------------------------------------------------ */

.ts-cart {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ts-space-6);
	align-items: start;
	margin-bottom: var(--ts-space-12);
}

@media (min-width: 1024px) {
	.ts-cart {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: var(--ts-space-8);
	}

	/* Форма і підсумки — сусідні колонки */
	.ts-cart__form {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.ts-cart__totals {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: calc(var(--ts-header-height) + var(--ts-space-4));
	}
}

/* --- Позиція кошика -------------------------------------------------------- */

.ts-cart__items {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-5);
}

/*
 * На телефоні колонка кількості — auto, щоб лічильник (122px) помістився
 * повністю: у minmax(0, 1fr) він виходив за межі своєї комірки.
 */
.ts-cartitem {
	display: grid;
	grid-template-columns: 88px auto minmax(0, 1fr) 44px;
	grid-template-areas:
		"media body  body  remove"
		"media qty   price price";
	gap: var(--ts-space-3);
	align-items: start;
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

@media (min-width: 768px) {
	/*
	 * Колонка кількості — auto, а не фіксовані 140px: лічильник займає
	 * рівно 121px, і зайві пікселі перетворювались на порожнечу
	 * праворуч від "+".
	 */
	.ts-cartitem {
		grid-template-columns: 96px minmax(0, 1fr) auto 160px 44px;
		grid-template-areas: "media body qty price remove";
		align-items: center;
		gap: var(--ts-space-4);
	}
}

/* Недоступна позиція має впадати в око, а не ховатись */
.ts-cartitem.is-unavailable {
	border-color: var(--ts-color-danger);
	background: var(--ts-color-danger-soft);
}

.ts-cartitem__media {
	grid-area: media;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--ts-radius-md);
}

.ts-cartitem__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ts-cartitem__body {
	grid-area: body;
	min-width: 0;
}

.ts-cartitem__title {
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-medium);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text-strong);
	margin-bottom: var(--ts-space-1);
}

.ts-cartitem__title a {
	color: inherit;
}

.ts-cartitem__title a:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-cartitem__codes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-2);
	font-size: var(--ts-text-2xs);
	color: var(--ts-color-faint);
}

.ts-cartitem__stock {
	font-size: var(--ts-text-xs);
}

.ts-cartitem__qty {
	grid-area: qty;
}

/*
 * Лічильник у кошику компактніший за той, що на сторінці товару:
 * там він стоїть поруч із великою кнопкою, тут — у рядку таблиці.
 */
.ts-cartitem__qty .ts-qty__btn {
	width: 36px;
	height: 44px;
	font-size: var(--ts-text-base);
}

.ts-cartitem__qty .ts-qty__input {
	width: 48px;
	height: 44px;
	font-size: var(--ts-text-sm);
}

/* Поки оновлюємо кількість — приглушуємо рядок і блокуємо повторні кліки */
.ts-cartitem.is-busy {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity var(--ts-duration-fast) var(--ts-ease);
}

.ts-cartitem__price {
	grid-area: price;
	text-align: right;
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-bold);
	color: var(--ts-color-text-strong);
	white-space: nowrap;
}

.ts-cartitem__unit {
	font-size: var(--ts-text-2xs);
	font-weight: var(--ts-weight-regular);
	color: var(--ts-color-faint);
}

.ts-cartitem__remove {
	grid-area: remove;
	justify-self: end;
}

.ts-cartitem__remove-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ts-radius-md);
	color: var(--ts-color-faint);
}

.ts-cartitem__remove-btn:hover {
	background: var(--ts-color-danger-soft);
	color: var(--ts-color-danger);
	text-decoration: none;
}

/* --- Дії кошика ------------------------------------------------------------ */

.ts-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-3);
}

.ts-coupon {
	display: flex;
	gap: var(--ts-space-2);
	flex: 1 1 280px;
}

.ts-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
}

.ts-cart__update {
	margin-left: auto;
}

/* --- Підсумки -------------------------------------------------------------- */

.ts-totals {
	padding: var(--ts-space-5);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow-sm);
}

.ts-totals__title {
	margin-bottom: var(--ts-space-4);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ts-space-3);
	padding-block: var(--ts-space-2);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-totals__row--muted {
	color: var(--ts-color-faint);
	font-size: var(--ts-text-xs);
}

.ts-totals__row--discount {
	color: var(--ts-color-success);
}

.ts-totals__row--total {
	margin-top: var(--ts-space-3);
	padding-top: var(--ts-space-4);
	border-top: 1px solid var(--ts-color-border);
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-totals__row--total .woocommerce-Price-amount {
	font-size: var(--ts-text-2xl);
	font-weight: var(--ts-weight-bold);
}

.ts-totals__actions {
	margin-top: var(--ts-space-5);
}

.ts-totals__hint {
	margin-top: var(--ts-space-2);
	font-size: var(--ts-text-xs);
	color: var(--ts-color-danger);
	text-align: center;
}

.ts-totals__continue {
	display: block;
	margin-top: var(--ts-space-3);
	font-size: var(--ts-text-sm);
	text-align: center;
	color: var(--ts-color-muted);
}

.ts-totals__continue:hover {
	color: var(--ts-color-primary);
}

/* --- Повідомлення ---------------------------------------------------------- */

.ts-notice {
	margin-bottom: var(--ts-space-5);
	padding: var(--ts-space-4);
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-relaxed);
}

.ts-notice--danger {
	background: var(--ts-color-danger-soft);
	color: var(--ts-color-text);
	border: 1px solid var(--ts-color-danger);
}

.ts-notice__title {
	margin-bottom: var(--ts-space-1);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-danger);
}

/* --- Checkout --------------------------------------------------------------
   Розмітку тут задає шаблон WooCommerce (form.checkout > .col2-set +
   #order_review), тому чіпляємось до його класів, а не до власних.
   ------------------------------------------------------------------------ */

.woocommerce-checkout .woocommerce {
	margin-bottom: var(--ts-space-12);
}

form.checkout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ts-space-6);
	align-items: start;
}

@media (min-width: 1024px) {
	form.checkout {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--ts-space-8);
	}

	.ts-checkout__aside {
		position: sticky;
		top: calc(var(--ts-header-height) + var(--ts-space-4));
	}
}

/* --- Ліва колонка: картки -------------------------------------------------- */

.ts-checkout__main {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-6);
	min-width: 0;
}

.ts-checkout__card {
	padding: var(--ts-space-6);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-checkout__card-title {
	margin: 0 0 var(--ts-space-4);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-checkout__empty {
	margin: 0;
	color: var(--ts-color-muted);
}

.ts-checkout__aside {
	min-width: 0;
}

.ts-checkout__aside-title {
	margin: 0 0 var(--ts-space-4);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

/* --- Радіо-картки способів доставки й оплати ------------------------------- */

.ts-methods {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-methods__item {
	margin: 0;
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
	transition: border-color var(--ts-transition-fast);
}

.ts-methods__item:hover {
	border-color: var(--ts-color-primary);
}

/*
 * Підсвічуємо через :has(), а не клас із сервера: клас не встигає за
 * кліком, бо розмітка перемальовується лише після AJAX.
 */
.ts-methods__item:has(input:checked) {
	border-color: var(--ts-color-primary);
	box-shadow: inset 0 0 0 1px var(--ts-color-primary);
}

.ts-methods__label {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	/* 44px — мінімальна зручна ціль для пальця. */
	min-height: 56px;
	padding: var(--ts-space-3) var(--ts-space-4);
	cursor: pointer;
}

/* Логотип перевізника: видно, чия це доставка, ще до читання назви. */
.ts-methods__logo {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* Логотип перевізника: видно, чия це доставка, ще до читання назви. */
.ts-methods__logo {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* Логотип NBplaza горизонтальний — у квадраті 28px він нечитабельний. */
.ts-methods__logo--wide {
	width: 64px;
}

/*
 * accent-color фарбує кружечок у колір теми, а заразом прибирає
 * квадратне обведення, яке браузер малює навколо нативного radio при
 * кліку. Рядок і так підсвічується рамкою картки.
 */
.ts-methods__label input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--ts-color-primary);
}

.ts-methods__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ts-methods__name {
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text-strong);
}

.ts-methods__note {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-methods__price {
	flex: 0 0 auto;
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
	white-space: nowrap;
}

/* Заголовки секцій */
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	margin-bottom: var(--ts-space-4);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

/* --- Поля форми ------------------------------------------------------------ */

/*
 * Ті самі правила діють у кабінеті: «Дані для замовлень» показує поля
 * checkout, тож вони мають виглядати однаково в обох місцях.
 */
form.checkout .form-row,
.ts-account-form .form-row,
form.edit-account .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
	margin: 0 0 var(--ts-space-4);
	padding: 0;
}

form.checkout label,
.ts-account-form label,
form.edit-account label {
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text);
}

form.checkout .required,
.ts-account-form .required {
	color: var(--ts-color-danger);
	text-decoration: none;
	border: 0;
}

form.checkout .optional,
.ts-account-form .optional {
	color: var(--ts-color-faint);
	font-weight: var(--ts-weight-regular);
}

form.checkout input[type="text"],
form.checkout input[type="tel"],
form.checkout input[type="email"],
form.checkout textarea,
form.checkout select,
.ts-account-form input[type="text"],
.ts-account-form input[type="tel"],
.ts-account-form input[type="email"],
.ts-account-form input[type="password"],
.ts-account-form textarea,
.ts-account-form select {
	width: 100%;
	min-height: 48px;
	padding: var(--ts-space-3);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
	font-family: var(--ts-font-sans);
	font-size: var(--ts-text-base);
	color: var(--ts-color-text);
}

form.checkout textarea {
	min-height: 96px;
	resize: vertical;
}

/*
 * 16px на мобільному: інакше iOS зумить сторінку при фокусі.
 * Правило з _base.css сюди не доходить — селектор form.checkout
 * специфічніший, тому дублюємо його тут.
 */
@media (max-width: 767px) {
	form.checkout input[type="text"],
	form.checkout input[type="tel"],
	form.checkout input[type="email"],
	form.checkout textarea,
	form.checkout select {
		font-size: 16px;
	}
}

/*
 * Синє кільце — для текстових полів. Radio і checkbox виключені: у них
 * воно лягало квадратом навколо круглого перемикача.
 */
form.checkout input:not([type="radio"]):not([type="checkbox"]):focus,
form.checkout textarea:focus,
form.checkout select:focus {
	outline: none;
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-focus);
}

form.checkout .woocommerce-input-wrapper {
	width: 100%;
}

/* Поле з помилкою має бути помітним */
form.checkout .woocommerce-invalid input {
	border-color: var(--ts-color-danger);
}

/* Два поля в рядок там, де вистачає місця */
@media (min-width: 640px) {
	form.checkout .form-row-first,
	form.checkout .form-row-last {
		width: calc(50% - var(--ts-space-2));
		display: inline-flex;
		vertical-align: top;
	}

	form.checkout .form-row-first {
		margin-right: var(--ts-space-3);
	}
}

/* Доставка на іншу адресу в MVP не потрібна */
.woocommerce-shipping-fields {
	display: none;
}

/* --- Підсумок замовлення --------------------------------------------------- */

/*
 * Рамку й фон малює .ts-review всередині — тут лише обгортка, інакше
 * виходив подвійний бордер.
 */
#order_review {
	min-width: 0;
}

.woocommerce-checkout-review-order-table {
	width: 100%;
	margin-bottom: var(--ts-space-4);
	font-size: var(--ts-text-sm);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding-block: var(--ts-space-2);
	text-align: left;
	font-weight: var(--ts-weight-regular);
	color: var(--ts-color-muted);
	vertical-align: top;
}

.woocommerce-checkout-review-order-table td {
	text-align: right;
	color: var(--ts-color-text);
}

.woocommerce-checkout-review-order-table thead th {
	padding-bottom: var(--ts-space-3);
	border-bottom: 1px solid var(--ts-color-border);
	font-size: var(--ts-text-2xs);
	letter-spacing: var(--ts-tracking-wide);
	text-transform: uppercase;
}

.woocommerce-checkout-review-order-table .cart_item td,
.woocommerce-checkout-review-order-table .cart_item th {
	padding-block: var(--ts-space-3);
	border-bottom: 1px solid var(--ts-color-border);
	color: var(--ts-color-text);
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	padding-top: var(--ts-space-4);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-bold);
}

/* --- Способи оплати -------------------------------------------------------- */

.wc_payment_methods {
	list-style: none;
	margin: 0 0 var(--ts-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
}

/* Ті самі пропорції, що в списку способів доставки. */
.wc_payment_method {
	padding: 0 var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.wc_payment_method:has(input:checked) {
	border-color: var(--ts-color-primary);
	background: var(--ts-color-primary-soft);
}

.wc_payment_method label {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	/* 56px — та сама висота, що в рядку способу доставки. */
	min-height: 56px;
	margin: 0;
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text-strong);
	cursor: pointer;
}

.wc_payment_method input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--ts-color-primary);
}

/*
 * Пояснення під назвою, а не окремий блок із рамкою: воно коротке й
 * читається як підпис, так само як примітка способу доставки.
 */
.payment_box {
	margin: calc(var(--ts-space-2) * -1) 0 var(--ts-space-3);
	padding: 0 0 0 calc(18px + var(--ts-space-3));
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	background: none;
}

.payment_box p {
	margin: 0;
}

.woocommerce-privacy-policy-text {
	margin-bottom: var(--ts-space-4);
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
	line-height: var(--ts-leading-relaxed);
}

#place_order {
	width: 100%;
	min-height: 52px;
	background: var(--ts-color-primary);
	border: 0;
	border-radius: var(--ts-radius-md);
	color: #fff;
	font-family: var(--ts-font-sans);
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	cursor: pointer;
	transition: background-color var(--ts-duration-fast) var(--ts-ease);
}

#place_order:hover {
	background: var(--ts-color-primary-hover);
}

/* --- Промокод на checkout -------------------------------------------------- */

.woocommerce-form-coupon-toggle {
	margin-bottom: var(--ts-space-5);
}

.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-5);
	padding: var(--ts-space-4);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-md);
}

.checkout_coupon .form-row {
	flex: 1 1 200px;
	margin-bottom: 0 !important;
}

/* Поле промокоду приходить від WooCommerce без наших класів. */
.checkout_coupon input[type="text"] {
	width: 100%;
	min-height: 48px;
	padding: var(--ts-space-3);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
	font-family: var(--ts-font-sans);
	font-size: var(--ts-text-base);
	color: var(--ts-color-text);
}

.checkout_coupon input[type="text"]:focus {
	outline: none;
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-focus);
}

.checkout_coupon button {
	min-height: 48px;
	padding-inline: var(--ts-space-5);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text);
	cursor: pointer;
}

/* Коментар під підсумком у правій колонці. */
.ts-checkout__notes {
	margin-top: var(--ts-space-5);
	padding: var(--ts-space-5);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-checkout__notes .ts-checkout__aside-title {
	margin-bottom: var(--ts-space-3);
}

.ts-checkout__notes .form-row {
	margin-bottom: 0;
}

/* Підпис поля дублює заголовок блоку. */
.ts-checkout__notes label {
	display: none;
}

/* --- Дякуємо за замовлення ------------------------------------------------- */

.ts-thankyou {
	max-width: 720px;
	margin-bottom: var(--ts-space-12);
}

/*
 * Іконка поруч із текстом, а не над ним: так «прийнято» читається
 * одним рухом, і сторінка не починається з порожнього стовпчика.
 */
.ts-thankyou__head {
	display: flex;
	align-items: flex-start;
	gap: var(--ts-space-4);
	margin-bottom: var(--ts-space-6);
}

.ts-thankyou__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--ts-color-success-soft);
	border-radius: var(--ts-radius-full);
	color: var(--ts-color-success);
}

.ts-thankyou__lead {
	margin-bottom: var(--ts-space-1);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-thankyou__title {
	margin-bottom: var(--ts-space-3);
	font-size: var(--ts-text-2xl);
}

.ts-thankyou__text {
	margin: 0;
	font-size: var(--ts-text-md);
	line-height: var(--ts-leading-relaxed);
	color: var(--ts-color-muted);
}

/* Перевізник із логотипом — так само, як на кроці вибору доставки. */
.ts-thankyou__carrier {
	display: flex;
	/* Довга назва перевізника переноситься — логотип має лишитись
	   на першому рядку, а не «пірнати» під текст. */
	align-items: flex-start;
	gap: var(--ts-space-2);
}

.ts-thankyou__carrier .ts-thankyou__logo {
	margin-top: 2px;
}

.ts-thankyou__logo {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

/* Логотип NBplaza горизонтальний — у квадраті був би нечитабельним. */
.ts-thankyou__logo--wide {
	width: 56px;
}

/* Інструкції шлюзу (реквізити тощо) — окремою рамкою, щоб не губилися. */
.ts-thankyou__note {
	margin-bottom: var(--ts-space-6);
	padding: var(--ts-space-4);
	background: var(--ts-color-info-soft, var(--ts-color-surface-sunken));
	border-left: 3px solid var(--ts-color-primary);
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-relaxed);
}

.ts-thankyou__note p:last-child {
	margin-bottom: 0;
}

.ts-thankyou__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--ts-space-4);
	padding: var(--ts-space-5);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-lg);
	margin-bottom: var(--ts-space-6);
}

.ts-thankyou__label {
	display: block;
	font-size: var(--ts-text-2xs);
	letter-spacing: var(--ts-tracking-wide);
	text-transform: uppercase;
	color: var(--ts-color-muted);
	margin-bottom: var(--ts-space-1);
}

.ts-thankyou__value {
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-8);
}

/*
 * Склад замовлення й адресу WooCommerce малює власною розміткою. Ми її
 * не переписуємо шаблонами, а лише вбираємо в наші токени: без цього
 * сторінка після оформлення виглядала як необроблений HTML.
 */
.woocommerce-order-details,
.woocommerce-customer-details {
	max-width: 720px;
	margin-bottom: var(--ts-space-8);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	margin-bottom: var(--ts-space-4);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ts-text-sm);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: var(--ts-space-3) 0;
	text-align: left;
	border-bottom: 1px solid var(--ts-color-border);
}

.woocommerce-table--order-details thead th {
	font-size: var(--ts-text-2xs);
	letter-spacing: var(--ts-tracking-wide);
	text-transform: uppercase;
	color: var(--ts-color-muted);
	font-weight: var(--ts-weight-medium);
}

/* Ціна праворуч — око шукає суму саме там. */
.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child {
	text-align: right;
	white-space: nowrap;
}

/*
 * Перевізник у підсумку: WooCommerce друкує його дрібним <small>
 * поруч із сумою, і без вирівнювання це виглядало як хвіст.
 */
.woocommerce-table--order-details .shipped_via {
	display: block;
	margin-top: 2px;
	font-size: var(--ts-text-2xs);
	color: var(--ts-color-muted);
}

.woocommerce-table--order-details .product-quantity {
	color: var(--ts-color-muted);
	font-weight: var(--ts-weight-normal);
}

.woocommerce-table--order-details tfoot th {
	font-weight: var(--ts-weight-normal);
	color: var(--ts-color-muted);
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--ts-text-sm);
}

/*
 * Підсумок виділяємо по класу, а не по :last-child: останнім рядком
 * у WooCommerce стоїть спосіб оплати, і він набирав вигляд суми.
 */
.woocommerce-table--order-details tfoot .order-row--order-total th,
.woocommerce-table--order-details tfoot .order-row--order-total td {
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
}

.woocommerce-customer-details address {
	padding: var(--ts-space-4);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-md);
	font-style: normal;
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-relaxed);
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
	margin: var(--ts-space-2) 0 0;
	color: var(--ts-color-muted);
}

/* --- Повідомлення WooCommerce ---------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin-bottom: var(--ts-space-5);
	padding: var(--ts-space-4);
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-sm);
	list-style: none;
}

.woocommerce-message {
	background: var(--ts-color-success-soft);
	border: 1px solid var(--ts-color-success);
}

.woocommerce-info {
	background: var(--ts-color-primary-soft);
	border: 1px solid var(--ts-color-primary);
}

.woocommerce-error {
	background: var(--ts-color-danger-soft);
	border: 1px solid var(--ts-color-danger);
}

.woocommerce-error li + li {
	margin-top: var(--ts-space-2);
}

/*
 * WooCommerce ставить повідомленню tabindex="-1" і переводить на нього
 * фокус, щоб його прочитав скрінрідер. Браузер малює при цьому синє
 * обведення поверх кольорової рамки — воно тут зайве: повідомлення й
 * так помітне, а в таб-порядок не входить.
 */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible {
	outline: none;
}

/* --- Дрібні посилання WooCommerce --------------------------------------- */

/*
 * "Перейти в кошик" у повідомленні та "Розрахувати доставку" —
 * посилання від WooCommerce, які приходять без наших класів.
 * Доводимо до 44px, щоб у них можна було влучити пальцем.
 */
.woocommerce-message .button,
.shipping-calculator-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--ts-space-3);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-primary);
}

.woocommerce-message .button:hover,
.shipping-calculator-button:hover {
	text-decoration: underline;
}

/* --- Підсумок замовлення в правій колонці ---------------------------------- */

.ts-review {
	padding: var(--ts-space-5);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-review__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-review__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ts-space-3);
	padding: var(--ts-space-3) 0;
}

.ts-review__item + .ts-review__item {
	border-top: 1px solid var(--ts-color-border);
}

.ts-review__thumb {
	flex: 0 0 auto;
	width: 48px;
}

.ts-review__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ts-radius-sm);
}

.ts-review__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ts-review__name {
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text-strong);
}

.ts-review__qty {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-review__price {
	flex: 0 0 auto;
	font-size: var(--ts-text-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ts-color-text-strong);
}

.ts-review__totals {
	margin-top: var(--ts-space-4);
	padding-top: var(--ts-space-4);
	border-top: 1px solid var(--ts-color-border);
}

.ts-review__row {
	display: flex;
	justify-content: space-between;
	gap: var(--ts-space-4);
	padding: var(--ts-space-2) 0;
	font-size: var(--ts-text-base);
	color: var(--ts-color-text);
}

.ts-review__row--discount {
	color: var(--ts-color-success);
}

.ts-review__row--total {
	margin-top: var(--ts-space-2);
	padding-top: var(--ts-space-3);
	border-top: 1px solid var(--ts-color-border);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

/*
 * Заголовок картки вже каже «Коментар до замовлення» — дублювати його
 * ще й лейблом поля немає сенсу.
 */
#ts-order-notes .form-row > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#ts-order-notes .form-row {
	margin-bottom: 0;
}

/* --- Способи оплати: та сама картка, що й у доставці ----------------------- */

#ts-payment-methods .wc_payment_methods {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Woo кладе <input> і <label> сусідами, тому вирівнюємо їх сіткою:
 * радіо в першу колонку, назва в другу, опис — під назвою.
 */
#ts-payment-methods .wc_payment_method {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	margin: 0;
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
	transition: border-color var(--ts-transition-fast);
}

#ts-payment-methods .payment_box {
	grid-column: 2;
}

#ts-payment-methods .wc_payment_method:hover {
	border-color: var(--ts-color-primary);
}

#ts-payment-methods .wc_payment_method:has(input:checked) {
	border-color: var(--ts-color-primary);
	box-shadow: inset 0 0 0 1px var(--ts-color-primary);
}

#ts-payment-methods .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	/* 44px — мінімальна зручна ціль для пальця. */
	min-height: 56px;
	padding: var(--ts-space-3) var(--ts-space-4);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text-strong);
	cursor: pointer;
}

#ts-payment-methods .wc_payment_method > input {
	margin: 0 0 0 var(--ts-space-4);
}

#ts-payment-methods .wc_payment_method > label {
	padding-left: var(--ts-space-3);
}

/* Опис способу оплати розкривається під ним. */
#ts-payment-methods .payment_box {
	margin: 0;
	padding: 0 var(--ts-space-4) var(--ts-space-4) var(--ts-space-3);
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-relaxed);
	color: var(--ts-color-muted);
	background: none;
}

#ts-payment-methods .payment_box p:last-child {
	margin-bottom: 0;
}

#ts-payment-methods .woocommerce-privacy-policy-text {
	margin: var(--ts-space-4) 0 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

#ts-payment-methods .form-row.place-order {
	margin: var(--ts-space-5) 0 0;
	padding: 0;
}

#ts-payment-methods #place_order {
	width: 100%;
}

/* --- Смужка кроків --------------------------------------------------------- */

.ts-steps {
	margin-bottom: var(--ts-space-8);
}

.ts-steps__list {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-steps__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

/*
 * Лінія між кроками — псевдоелемент, а не окремий вузол: так вона
 * завжди точно між центрами кружків.
 */
.ts-steps__item + .ts-steps__item::before {
	content: "";
	position: absolute;
	top: 16px;
	right: 50%;
	left: -50%;
	height: 1px;
	background: var(--ts-color-border-strong);
}

.ts-steps__item.is-done + .ts-steps__item::before,
.ts-steps__item.is-current::before {
	background: var(--ts-color-primary);
}

.ts-steps__link {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ts-space-2);
	color: var(--ts-color-faint);
}

a.ts-steps__link:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-steps__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-faint);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-full);
}

.ts-steps__item.is-done .ts-steps__badge {
	color: var(--ts-color-surface);
	background: var(--ts-color-primary);
	border-color: var(--ts-color-primary);
}

.ts-steps__item.is-current .ts-steps__badge {
	color: var(--ts-color-primary);
	border-color: var(--ts-color-primary);
	box-shadow: 0 0 0 3px var(--ts-color-primary-soft);
}

.ts-steps__item.is-done .ts-steps__link,
.ts-steps__item.is-current .ts-steps__link {
	color: var(--ts-color-text-strong);
}

.ts-steps__label {
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-snug);
}

@media (max-width: 559px) {
	/*
	 * На телефоні 64px з'їдають надто багато: назва «Кур'єр NBplaza —
	 * Правий берег» ламалася на чотири рядки.
	 */
	.ts-methods__logo--wide {
		width: 44px;
	}

	.ts-steps__label {
		font-size: var(--ts-text-xs);
	}
}

/* --- Крок 3: підсумок ------------------------------------------------------ */

.ts-summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ts-space-6);
	align-items: start;
	margin-bottom: var(--ts-space-12);
}

@media (min-width: 1024px) {
	.ts-summary {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--ts-space-8);
	}

	.ts-summary__aside {
		position: sticky;
		top: calc(var(--ts-header-height) + var(--ts-space-4));
	}
}

.ts-summary__main {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-4);
	min-width: 0;
}

.ts-summary__card {
	padding: var(--ts-space-5);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-summary__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ts-space-4);
	margin-bottom: var(--ts-space-3);
}

.ts-summary__title {
	margin: 0;
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-summary__card > .ts-summary__title {
	margin-bottom: var(--ts-space-3);
}

.ts-summary__edit {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-1);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-primary);
	white-space: nowrap;
}

.ts-summary__line {
	margin: 0 0 var(--ts-space-1);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text);
}

.ts-summary__line:last-child {
	margin-bottom: 0;
}

.ts-summary__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-summary__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ts-space-3);
	padding: var(--ts-space-3) 0;
}

.ts-summary__item + .ts-summary__item {
	border-top: 1px solid var(--ts-color-border);
}

.ts-summary__thumb {
	flex: 0 0 auto;
	width: 56px;
}

.ts-summary__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ts-radius-sm);
}

.ts-summary__item-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ts-summary__item-name {
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text-strong);
}

.ts-summary__item-qty {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-summary__item-price {
	flex: 0 0 auto;
	font-size: var(--ts-text-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ts-color-text-strong);
}

.ts-summary__totals {
	padding: var(--ts-space-5);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--ts-space-4);
	padding: var(--ts-space-2) 0;
	color: var(--ts-color-text);
}

.ts-summary__row--discount {
	color: var(--ts-color-success);
}

.ts-summary__row--total {
	margin-top: var(--ts-space-2);
	padding-top: var(--ts-space-3);
	border-top: 1px solid var(--ts-color-border);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-summary__confirm {
	margin-top: var(--ts-space-5);
}

.ts-summary__back {
	display: block;
	margin-top: var(--ts-space-3);
	font-size: var(--ts-text-sm);
	text-align: center;
	color: var(--ts-color-muted);
}

.ts-summary__back:hover {
	color: var(--ts-color-primary);
}