/* ============================================================
   WooCommerce: оформление заказа (/checkout/), страница «Заказ получен»
   (/checkout/order-received/<id>/), заказ в кабинете
   (/my-account/view-order/<id>/) и корзина (/cart/).
   Токены, рецепты полей (§9.15), кнопок (§9.12) и сообщений (§9.17)
   живут в design-system.css — сюда добавлены только селекторы
   плагина в общих списках. Здесь — раскладка чекаута и корзины
   и сброс виджетов WooCommerce (сетка, таблицы, оплата, купон).
   Дизайн-язык — docs/DESIGN_SYSTEM.md §9.5, §9.6, §9.12, §9.15–§9.17, §9.22.
   ============================================================ */

/* Осознанное исключение из §9.21: на чекауте линия под шапкой страницы
   не нужна — её роль уже берёт верх раздела с полями (см. §15, исключение 5),
   а отступ под заголовком уменьшен (24px вместо 56px). У страницы «Заказ
   получен» тот же body-класс, но шапка там стандартная (§9.21, §9.24) —
   исключение ограничено именно /checkout/. */
body.woocommerce-checkout:not(.woocommerce-order-received) .entry-header {
	padding-bottom: var(--spacing-s);
	margin-bottom: var(--spacing-m);
	border-bottom: 0;
}

/* --- Сообщения WooCommerce: гасим иконку-глиф и float кнопки ---
   Рама, фон и шов приходят из .notice-card в design-system.css. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

/* Кнопка в сообщении — по правому краю строки (как у WooCommerce),
   но с кеглем и метриками уведомления, а не основной кнопки (§9.12). */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button {
	float: right;
	display: inline-flex;
	align-items: center;
	margin: 0 0 0 var(--spacing-m);
	min-height: 36px;
	padding: 8px var(--spacing-l);
	font-size: 18px;
	line-height: 1.2;
}

.woocommerce-message p,
.woocommerce-info p,
.woocommerce-error p {
	margin: 0;
}

/* --- Сетка чекаута: поля слева, заказ справа (§9.6) ---
   Левую и правую колонки разделяет вертикальный шов 1px (§6). */
body.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 0;
	margin-top: var(--spacing-xl);
}

body.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
	padding-right: var(--spacing-section-mobile);
	border-right: 1px solid var(--color-border);
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review {
	grid-column: 2;
	padding-left: var(--spacing-section-mobile);
}

body.woocommerce-checkout #order_review_heading {
	grid-row: 1;
}

body.woocommerce-checkout #order_review {
	grid-row: 2;
}

/* --- Заголовки секций чекаута: Yanone 28px + разделитель 80×2 (§9.4),
   под заголовком — отступ 32px до содержимого --- */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout #order_review_heading {
	margin: 0 0 var(--spacing-xl);
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--color-foreground);
}

body.woocommerce-checkout .woocommerce-billing-fields > h3::after,
body.woocommerce-checkout #order_review_heading::after {
	content: "";
	display: block;
	width: 80px;
	height: 2px;
	margin: var(--spacing-m) 0 0;
	background-color: var(--color-border);
}

/* Скрытая страна: нужна для данных заказа, но не показывается пользователю.
   Заметки и адрес удалены из формы в inc/woocommerce.php.

   `!important` здесь обязателен. `address-i18n.js` проходит по всем полям из
   `WC_Countries::get_country_locale_field_selectors()` (в списке есть
   `country`) и на событие `country_to_state_changing` вызывает `field.show()`.
   Событие прилетает, когда у селекта страны уже есть значение, — а оно есть
   у всех, кому страна известна (залогиненные покупатели: `billing_country`
   в user meta). jQuery `.show()` ставит инлайновый `display: block`, который
   перебивает обычное правило стилей: строка страны снова появляется в форме
   и подписывается из локали WooCommerce «Страна/регион *». С `!important`
   она остаётся скрытой, а значение селекта сохраняется — заказ получает
   страну как раньше. */
body.woocommerce-checkout .woocommerce form.checkout .form-row.satway-checkout-hidden,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-shipping-fields {
	display: none !important;
}

/* --- Поля: колонка label → контрол, гэп 8px, ряд из двух (§9.15) --- */
body.woocommerce-checkout .woocommerce form.checkout .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-l);
}

body.woocommerce-checkout #billing_email_field {
	grid-column: 1 / -1;
}

body.woocommerce-checkout .woocommerce-input-wrapper {
	display: block;
}

/* Звёздочка обязательного поля — графит, без красного из плагина */
body.woocommerce-checkout .woocommerce .required,
body.woocommerce-checkout .woocommerce abbr.required {
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 0;
}

/* Ошибка валидации: рамка темнеет, цвет остаётся монохромным (§9.15) */
body.woocommerce-checkout .woocommerce form.checkout .form-row.woocommerce-invalid .input-text {
	border-color: var(--color-primary);
}

/* Подытог при одной позиции дублирует «Итого» — строка скрыта. */
body.woocommerce-checkout .shop_table tfoot tr.cart-subtotal {
	display: none;
}

/* --- Таблица заказа (§9.5) --- */
/* Таблица без внешних рамок: только тонкая линия между товаром и итогами. */
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: none;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
}

body.woocommerce-checkout .shop_table th,
body.woocommerce-checkout .shop_table td {
	padding: var(--spacing-m) 0;
	background: none;
	border: 0;
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}

/* Подписи таблицы — один кегль на все: Yanone 18px/400 (§9.4, §9.15).
   Заголовки и Подытог — muted, Итого — графит. */
body.woocommerce-checkout .shop_table thead th,
body.woocommerce-checkout .shop_table tfoot th {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-foreground-muted);
}

body.woocommerce-checkout .shop_table tbody td {
	border-bottom: 1px solid var(--color-border-light);
}

/* WooCommerce рисует border-top у строк tfoot (1px rgba(0,0,0,.1)) — снимаем. */
body.woocommerce-checkout .shop_table tfoot th,
body.woocommerce-checkout .shop_table tfoot td {
	border-top: 0;
}

body.woocommerce-checkout .shop_table th:last-child,
body.woocommerce-checkout .shop_table td:last-child {
	text-align: right;
	white-space: nowrap;
}

body.woocommerce-checkout .shop_table .product-quantity {
	color: var(--color-foreground-muted);
	font-weight: 300;
}

/* Цена — один кегль на всю таблицу (Amatic SC, §9.8). */
body.woocommerce-checkout .shop_table .amount {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-primary);
}

body.woocommerce-checkout .shop_table tfoot tr.order-total th {
	color: var(--color-foreground);
}

/* --- Оплата --- */
body.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
	padding: 0;
	margin-top: var(--spacing-l);
}

body.woocommerce-checkout .wc_payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* WooCommerce добавляет списку методов padding 1em и линию снизу —
   без описания шлюза список пуст, а линия висела над кнопкой. */
body.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border: 0;
}

body.woocommerce-checkout .wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-s) var(--spacing-s);
}

/* Радио-контрол по рецепту чекбокса (§9.16): рамка accent, заливка primary */
body.woocommerce-checkout .wc_payment_method input.input-radio {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	background-color: var(--color-background);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-none);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.woocommerce-checkout .wc_payment_method input.input-radio:hover {
	border-color: var(--color-primary);
}

body.woocommerce-checkout .wc_payment_method input.input-radio:focus {
	box-shadow: none;
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

body.woocommerce-checkout .wc_payment_method input.input-radio:checked {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

body.woocommerce-checkout .wc_payment_method label {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 300;
	color: var(--color-foreground);
	cursor: pointer;
}

/* --- Кнопка оформления и ряд --- */
body.woocommerce-checkout #payment .place-order {
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--spacing-m);
}

body.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-muted);
}

/* --- Плашка об автопродлении курса-потока (inc/woocommerce.php) ---
   Карточка info (§9.17) над кнопкой оформления — на чекауте и в корзине.
   До кнопки везде 24px: на чекауте плашка стоит в `.form-row.place-order` и
   получает `gap: 8px` от общего правила полей (16px добираем отступом),
   в корзине — в `.wc-proceed-to-checkout`, где гэпа нет (§9.17). */
body.woocommerce-checkout #payment .place-order .satway-autopay-note {
	margin: 0 0 var(--spacing-m); /* + gap 8px полей = 24px до кнопки */
}

body.woocommerce-cart .wc-proceed-to-checkout .satway-autopay-note {
	margin: 0 0 var(--spacing-l); /* гэпа нет — 24px задаём сами */
}

/* Сумма следующего списания — `strong` по рецепту текста урока (§9.26):
   Roboto 500 графитом, а не браузерные 700 в цвете абзаца. */
body.woocommerce-checkout .satway-autopay-note strong,
body.woocommerce-cart .satway-autopay-note strong {
	font-weight: 500;
	color: var(--color-foreground);
}

body.woocommerce-checkout #place_order {
	width: 100%;
	min-height: var(--form-action-height);
}

/* --- Купон: toggle-сообщение и форма ввода --- */
body.woocommerce-checkout form.checkout_coupon {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--spacing-m);
	margin: 0 0 var(--spacing-xl);
	padding: var(--spacing-l);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-none);
}

body.woocommerce-checkout form.checkout_coupon .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.woocommerce-checkout form.checkout_coupon .form-row .input-text {
	width: 100%;
}

body.woocommerce-checkout form.checkout_coupon .clear {
	display: none;
}

/* --- Переход к одной колонке (§10): шов становится горизонтальным --- */
@media (max-width: 959px) {
	body.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-checkout #customer_details {
		grid-column: 1;
		grid-row: auto;
		padding-right: 0;
		padding-bottom: var(--spacing-xxl);
		border-right: 0;
		border-bottom: 1px solid var(--color-border);
		margin-bottom: var(--spacing-xxl);
	}

	body.woocommerce-checkout #order_review_heading,
	body.woocommerce-checkout #order_review {
		grid-column: 1;
		padding-left: 0;
	}

	body.woocommerce-checkout #order_review_heading {
		grid-row: auto;
	}

	body.woocommerce-checkout #order_review {
		grid-row: auto;
	}

	body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-checkout form.checkout_coupon {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
   Страница «Заказ получен» (/checkout/order-received/<id>/).
   Собирается из тех же рецептов, что чекаут (§9.22) и корзина (§9.23):
   шапка §9.21, сообщение §9.17, таблица заказа §9.22, карточка §9.5,
   цены — Amatic SC 28px (§9.8). Часть правил чекаута уже действует:
   у страницы тот же body-класс `woocommerce-checkout`, поэтому рамки и
   паддинги ячеек `.shop_table` и суммы `.amount` приходят оттуда.
   Здесь — то, чего чекаут не покрывает: сводка заказа, заголовки
   секций, памятка к покупке, адрес, форма входа, ряд действий.
   ============================================================ */

/* --- Сводка заказа: номер / дата / email / итог — пары «подпись 15px muted /
   значение Yanone 20px/400», как у .payment-status в кабинете (§9.19).
   Колонки разделяет вертикальный шов 1px, по краям — рамка карточки (§6). --- */
body.woocommerce-order-received ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 0 var(--spacing-xxl);
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-none);
	list-style: none;
}

body.woocommerce-order-received ul.woocommerce-order-overview > li {
	float: none;
	margin: 0;
	padding: var(--spacing-m) var(--spacing-l);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-foreground-muted);
	text-transform: none;
	border-right: 1px solid var(--color-border);
	list-style: none;
}

body.woocommerce-order-received ul.woocommerce-order-overview > li:last-child {
	border-right: 0;
}

body.woocommerce-order-received ul.woocommerce-order-overview > li strong {
	display: block;
	margin-top: var(--spacing-xs);
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-foreground);
	text-transform: none;
	overflow-wrap: anywhere;
}

/* Итог в сводке — цена (§9.8, §9.22). Правило глобально для страницы:
   оно же даёт нужный кегль суммам в таблице состава заказа. */
body.woocommerce-order-received .amount {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-primary);
}

/* --- Сообщение «Спасибо! Заказ принят.» — карточка успеха (§9.17) --- */
body.woocommerce-order-received p.woocommerce-thankyou-order-received {
	padding: var(--spacing-m);
	margin: 0 0 var(--spacing-xl);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
	background-color: var(--color-background-muted);
	border: 1px solid var(--color-border);
	border-left: 2px solid var(--color-secondary);
	border-radius: var(--radius-none);
}

/* --- Отклонённый платёж: тот же рецепт, вес графита в шве = error (§9.17) --- */
body.woocommerce-order-received p.woocommerce-thankyou-order-failed {
	padding: var(--spacing-m);
	margin: 0 0 var(--spacing-l);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
	background-color: var(--color-background-muted);
	border: 1px solid var(--color-border);
	border-left: 2px solid var(--color-primary);
	border-radius: var(--radius-none);
}

body.woocommerce-order-received p.woocommerce-thankyou-order-failed-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-m);
	margin: 0 0 var(--spacing-l);
}

/* --- Секции и их заголовки: Yanone 28px/300 + разделитель 80×2px (§9.4) --- */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details {
	margin: 0 0 var(--spacing-xxl);
}

body.woocommerce-order-received .woocommerce-order-details > h2,
body.woocommerce-order-received .woocommerce-customer-details > h2 {
	margin: 0 0 var(--spacing-xl);
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--color-foreground);
}

body.woocommerce-order-received .woocommerce-order-details > h2::after,
body.woocommerce-order-received .woocommerce-customer-details > h2::after {
	content: "";
	display: block;
	width: 80px;
	height: 2px;
	margin: var(--spacing-m) 0 0;
	background-color: var(--color-border);
}

/* --- Таблица состава заказа: рецепт таблицы чекаута (§9.22) ---
   Рамки и паддинги ячеек снимает общий блок `body.woocommerce-checkout
   .shop_table`; здесь — плоскость таблицы и её отличия от чекаута. --- */
body.woocommerce-order-received .woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: var(--radius-none);
	background: none;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
}

/* Название курса — заголовок карточки (Yanone 20px/400), ссылка по §9.13 */
body.woocommerce-order-received .woocommerce-table--order-details .product-name a {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-foreground);
	text-decoration: none;
	transition: color 0.2s ease;
}

body.woocommerce-order-received .woocommerce-table--order-details .product-name a:hover,
body.woocommerce-order-received .woocommerce-table--order-details .product-name a:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
	text-underline-offset: 3px;
}

body.woocommerce-order-received .woocommerce-table--order-details .product-quantity {
	color: var(--color-foreground-muted);
	font-weight: 300;
}

/* Строка «Подытог» повторяет «Итого» (у клуба одна позиция) — как и на чекауте,
   скрыта. Берём последний tfoot: у заказа с действиями (pay/cancel) выше
   стоит ещё один tfoot со своими кнопками. */
body.woocommerce-order-received .woocommerce-table--order-details tfoot:last-of-type tr:first-child {
	display: none;
}

body.woocommerce-order-received .woocommerce-table--order-details tfoot:last-of-type tr:nth-child(2) th {
	color: var(--color-foreground);
}

/* Кнопки действий заказа в таблице — мельче основного действия: метрики
   ряда действий корзины (§9.23), а не 25px (§9.12). */
body.woocommerce-order-received .woocommerce-table--order-details .order-actions-button {
	min-height: 48px;
	padding: 8px var(--spacing-l);
	margin: 0 var(--spacing-s) var(--spacing-s) 0;
	font-size: 20px;
	line-height: 1.2;
}

/* --- Памятка к покупке (purchase note) — карточка info (§9.17):
   это доступ к курсу, поэтому не мелким серым, а сообщением. --- */
body.woocommerce-order-received .woocommerce-table--order-details .product-purchase-note td {
	padding: var(--spacing-m);
	text-align: left;
	white-space: normal;
	background-color: var(--color-background-muted);
	border: 1px solid var(--color-border);
	border-left: 2px solid var(--color-accent);
}

body.woocommerce-order-received .woocommerce-table--order-details .product-purchase-note td p {
	margin: 0;
}

body.woocommerce-order-received .woocommerce-table--order-details .product-purchase-note td p + p {
	margin-top: var(--spacing-s);
}

/* --- Данные покупателя: белая карточка с рамкой 1px (§9.5) --- */
body.woocommerce-order-received .woocommerce-customer-details address {
	padding: var(--spacing-l);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	font-style: normal;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-none);
}

body.woocommerce-order-received .woocommerce-customer-details address p {
	margin: var(--spacing-s) 0 0;
}

/* Иконки-глифы WooCommerce (телефон/почта) из шрифта плагина гасим: в языке
   иконки — только контурные (§9.14). */
body.woocommerce-order-received .woocommerce-customer-details address p::before {
	content: none;
}

/* --- «Заказать снова» — secondary (§9.12), высота как у кнопок форм (§9.20) --- */
body.woocommerce-order-received .order-again {
	margin: var(--spacing-xl) 0 0;
}

body.woocommerce-order-received .order-again .button {
	min-height: var(--form-action-height);
}

/* --- Заказ оформлен на другой аккаунт / сессия потеряна: форма входа.
   Поля берут рецепт §9.15 (селекторы добавлены в design-system.css),
   здесь — одна вертикаль полей (§9.20) и метрики кнопки. --- */
body.woocommerce-order-received form.woocommerce-form-login {
	/* ширина колонки формы, как в кабинете (§9.20) */
	max-width: 520px;
}

body.woocommerce-order-received form.woocommerce-form-login .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
	float: none;
	width: 100%;
	margin: 0 0 var(--spacing-l);
	padding: 0;
}

body.woocommerce-order-received form.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-s);
}

body.woocommerce-order-received form.woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
	margin: 0;
}

body.woocommerce-order-received form.woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	margin: 0;
	min-height: var(--form-action-height);
}

body.woocommerce-order-received form.woocommerce-form-login .lost_password {
	margin: var(--spacing-m) 0 0;
}

/* --- Адаптив (§10): сводка в одну колонку, вертикальный шов → горизонтальный --- */
@media (max-width: 959px) {
	body.woocommerce-order-received ul.woocommerce-order-overview {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-order-received ul.woocommerce-order-overview > li {
		border-right: 0;
		border-bottom: 1px solid var(--color-border);
	}

	body.woocommerce-order-received ul.woocommerce-order-overview > li:last-child {
		border-bottom: 0;
	}
}

/* ============================================================
   Заказ в кабинете (/my-account/view-order/<id>/).
   Тот же состав, что у «Заказ получен» (§9.24): состав заказа и данные
   покупателя. Но body-класс другой (`woocommerce-view-order`, без
   `woocommerce-checkout`), поэтому сбросы таблиц чекаута здесь не
   действуют и рецепты таблицы (§9.22) повторены. Раскладка — как в
   кабинете /profile/ (§9.19): слева навигация кабинета, справа панель
   заказа; ≤959px — в одну колонку.
   ============================================================ */

/* --- Раскладка «сайдбар + панель». Только для вошедшего: гостю на этой
   странице показывается форма входа, и она занимает всю ширину. --- */
body.woocommerce-view-order.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--spacing-xxl);
	align-items: start;
}

/* WooCommerce вешает на .woocommerce clearfix-псевдоэлементы (`display: table`).
   В гриде они становятся его участниками и разъезжаются по сетке — гасим. */
body.woocommerce-view-order.logged-in .woocommerce::before,
body.woocommerce-view-order.logged-in .woocommerce::after {
	content: none;
}

/* --- Навигация кабинета: табы личного кабинета (§9.19). ≤959px —
   строкой над панелью, активный пункт с чертой 2px снизу; ≥960px —
   колонкой по `border-left`, активный — с чертой 2px слева. --- */
body.woocommerce-view-order .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
}

body.woocommerce-view-order .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-s) var(--spacing-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-view-order .woocommerce-MyAccount-navigation li {
	margin: 0;
}

body.woocommerce-view-order .woocommerce-MyAccount-navigation a {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--color-foreground);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

body.woocommerce-view-order .woocommerce-MyAccount-navigation a:hover,
body.woocommerce-view-order .woocommerce-MyAccount-navigation a:focus {
	color: var(--color-foreground);
	opacity: 0.7;
}

body.woocommerce-view-order .woocommerce-MyAccount-navigation-link.is-active > a {
	color: var(--color-primary);
}

body.woocommerce-view-order .woocommerce-MyAccount-navigation-link.is-active > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background-color: var(--color-primary);
}

@media (min-width: 960px) {
	body.woocommerce-view-order .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		gap: 0;
		border-left: 1px solid var(--color-border);
	}

	body.woocommerce-view-order .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 1;
	}

	body.woocommerce-view-order .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 1;
	}

	body.woocommerce-view-order .woocommerce-MyAccount-navigation a {
		display: flex;
		width: 100%;
		padding: 10px var(--spacing-m);
	}

	body.woocommerce-view-order .woocommerce-MyAccount-navigation-link.is-active > a::after {
		display: none;
	}

	body.woocommerce-view-order .woocommerce-MyAccount-navigation-link.is-active > a::before {
		content: "";
		position: absolute;
		left: -1px;
		top: 0;
		bottom: 0;
		width: 2px;
		background-color: var(--color-primary);
	}
}

/* --- Панель заказа: белая карточка с рамкой 1px (§9.5, §9.19) --- */
body.woocommerce-view-order .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	padding: var(--spacing-l);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
}

@media (min-width: 960px) {
	body.woocommerce-view-order .woocommerce-MyAccount-content {
		padding: var(--spacing-xl);
	}
}

/* --- Резюме заказа: строка-мета — Roboto 15px muted; значения (номер,
   дата, статус) — Yanone 20px/400 в цвете текста (§9.19). --- */
body.woocommerce-view-order .woocommerce-MyAccount-content > p {
	margin: 0 0 var(--spacing-xxl);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-muted);
}

body.woocommerce-view-order .woocommerce-MyAccount-content mark {
	background: none;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-foreground);
}

/* --- Секции и их заголовки: Yanone 28px/300 + разделитель 80×2px (§9.4) --- */
body.woocommerce-view-order .woocommerce-order-details,
body.woocommerce-view-order .woocommerce-customer-details {
	margin: 0;
}

body.woocommerce-view-order .woocommerce-customer-details {
	margin-top: var(--spacing-xxl);
}

body.woocommerce-view-order .woocommerce-order-details > h2,
body.woocommerce-view-order .woocommerce-customer-details > h2 {
	margin: 0 0 var(--spacing-xl);
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--color-foreground);
}

body.woocommerce-view-order .woocommerce-order-details > h2::after,
body.woocommerce-view-order .woocommerce-customer-details > h2::after {
	content: "";
	display: block;
	width: 80px;
	height: 2px;
	margin: var(--spacing-m) 0 0;
	background-color: var(--color-border);
}

/* --- Таблица состава заказа: сброс вида плагина (рамка, радиус, фон,
   паддинги ячеек) + рецепт таблицы чекаута (§9.22). --- */
body.woocommerce-view-order .woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: var(--radius-none);
	background: none;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
}

body.woocommerce-view-order .woocommerce-table--order-details th,
body.woocommerce-view-order .woocommerce-table--order-details td {
	padding: var(--spacing-m) 0;
	background: none;
	border: 0;
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}

body.woocommerce-view-order .woocommerce-table--order-details thead th,
body.woocommerce-view-order .woocommerce-table--order-details tfoot th {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-foreground-muted);
}

body.woocommerce-view-order .woocommerce-table--order-details tbody td {
	border-bottom: 1px solid var(--color-border-light);
}

body.woocommerce-view-order .woocommerce-table--order-details tfoot th,
body.woocommerce-view-order .woocommerce-table--order-details tfoot td {
	border-top: 0;
}

body.woocommerce-view-order .woocommerce-table--order-details th:last-child,
body.woocommerce-view-order .woocommerce-table--order-details td:last-child {
	text-align: right;
	white-space: nowrap;
}

/* Название курса — заголовок карточки (Yanone 20px/400), ссылка по §9.13 */
body.woocommerce-view-order .woocommerce-table--order-details .product-name a {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-foreground);
	text-decoration: none;
	transition: color 0.2s ease;
}

body.woocommerce-view-order .woocommerce-table--order-details .product-name a:hover,
body.woocommerce-view-order .woocommerce-table--order-details .product-name a:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
	text-underline-offset: 3px;
}

body.woocommerce-view-order .woocommerce-table--order-details .product-quantity {
	color: var(--color-foreground-muted);
	font-weight: 300;
}

/* Все суммы — Amatic SC 28px, один кегль с чекаутом (§9.8, §9.22) */
body.woocommerce-view-order .amount {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-primary);
}

/* Строка «Подытог» дублирует «Итого» — скрыта (как на чекауте и в §9.24).
   Берём последний tfoot: выше стоит tfoot с действиями заказа. */
body.woocommerce-view-order .woocommerce-table--order-details tfoot:last-of-type tr:first-child {
	display: none;
}

body.woocommerce-view-order .woocommerce-table--order-details tfoot:last-of-type tr:nth-child(2) th {
	color: var(--color-foreground);
}

/* --- Кнопки действий заказа («Оплатить» / «Отменить»): метрики ряда
   корзины (§9.23) — Yanone 20px, высота 48px, а не 25px §9.12 --- */
body.woocommerce-view-order .woocommerce-table--order-details .order-actions-button {
	min-height: 48px;
	padding: 8px var(--spacing-l);
	margin: 0 var(--spacing-s) var(--spacing-s) 0;
	font-size: 20px;
	line-height: 1.2;
}

/* --- Памятка к покупке (purchase note) — карточка info (§9.17) --- */
body.woocommerce-view-order .woocommerce-table--order-details .product-purchase-note td {
	padding: var(--spacing-m);
	text-align: left;
	white-space: normal;
	background-color: var(--color-background-muted);
	border: 1px solid var(--color-border);
	border-left: 2px solid var(--color-accent);
}

body.woocommerce-view-order .woocommerce-table--order-details .product-purchase-note td p {
	margin: 0;
}

body.woocommerce-view-order .woocommerce-table--order-details .product-purchase-note td p + p {
	margin-top: var(--spacing-s);
}

/* --- Данные покупателя: белая карточка с рамкой 1px (§9.5);
   глифы-иконки плагина (телефон/почта) погашены (§9.14) --- */
body.woocommerce-view-order .woocommerce-customer-details address {
	padding: var(--spacing-l);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	font-style: normal;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-none);
}

body.woocommerce-view-order .woocommerce-customer-details address p {
	margin: var(--spacing-s) 0 0;
}

body.woocommerce-view-order .woocommerce-customer-details address p::before {
	content: none;
}

/* --- Обновления заказа (комментарии для покупателя): заголовок как у секций,
   записи — разделитель списка на тонкой линии (§6), мета muted 15px. --- */
body.woocommerce-view-order .woocommerce-MyAccount-content > h2 {
	margin: 0 0 var(--spacing-xl);
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--color-foreground);
}

body.woocommerce-view-order .woocommerce-MyAccount-content > h2::after {
	content: "";
	display: block;
	width: 80px;
	height: 2px;
	margin: var(--spacing-m) 0 0;
	background-color: var(--color-border);
}

body.woocommerce-view-order .woocommerce-OrderUpdates {
	margin: 0 0 var(--spacing-xxl);
	padding: 0;
	list-style: none;
}

body.woocommerce-view-order .woocommerce-OrderUpdate {
	padding: var(--spacing-m) 0;
	border-bottom: 1px solid var(--color-border-light);
}

body.woocommerce-view-order .woocommerce-OrderUpdate:first-child {
	padding-top: 0;
}

body.woocommerce-view-order .woocommerce-OrderUpdate-meta {
	margin: 0 0 var(--spacing-s);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	color: var(--color-foreground-muted);
}

body.woocommerce-view-order .woocommerce-OrderUpdate-description {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
}

body.woocommerce-view-order .woocommerce-OrderUpdate .clear {
	display: none;
}

/* --- Форма входа (гость или заказ оформлен на другой аккаунт): поля
   берут рецепт §9.15 из design-system.css, здесь — одна колонка полей
   (§9.20) и метрики кнопки, как на «Заказ получен» (§9.24). --- */
body.woocommerce-view-order form.woocommerce-form-login {
	max-width: 520px;
}

body.woocommerce-view-order form.woocommerce-form-login .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
	float: none;
	width: 100%;
	margin: 0 0 var(--spacing-l);
	padding: 0;
}

body.woocommerce-view-order form.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-s);
}

body.woocommerce-view-order form.woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
	margin: 0;
}

body.woocommerce-view-order form.woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	margin: 0;
	min-height: var(--form-action-height);
}

body.woocommerce-view-order form.woocommerce-form-login .lost_password {
	margin: var(--spacing-m) 0 0;
}

/* --- Адаптив (§10): сайдбар уходит над панелью --- */
@media (max-width: 959px) {
	body.woocommerce-view-order.logged-in .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--spacing-l);
	}
}

/* ============================================================
   Корзина (/cart/).
   Раскладка таблицы товаров и блока итогов; рецепты полей (§9.15),
   кнопок (§9.12) и сообщений (§9.17) приходят из design-system.css.
   ============================================================ */

/* --- Таблица товаров: без внешних рамок; строку товара от ряда действий
   отделяет тонкий шов (§6, §9.5) --- */
body.woocommerce-cart .woocommerce-cart-form .shop_table.cart {
	width: 100%;
	margin: 0 0 var(--spacing-l);
	border: 0;
	border-collapse: collapse;
	border-radius: var(--radius-none);
	background: none;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
}

body.woocommerce-cart .woocommerce-cart-form .shop_table th,
body.woocommerce-cart .woocommerce-cart-form .shop_table td {
	padding: var(--spacing-m);
	background: none;
	border: 0;
	text-align: left;
	vertical-align: middle;
	line-height: 1.6;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table thead th {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-foreground-muted);
}

body.woocommerce-cart .woocommerce-cart-form .shop_table tbody .cart_item td {
	border-bottom: 1px solid var(--color-border-light);
}

/* WooCommerce smallscreen красит чётные строки в серый (`rgba(0,0,0,.025)`)
   и тем нарушает палитру из трёх фонов (§3, §11); гасим. */
body.woocommerce-cart .woocommerce-cart-form .shop_table tbody tr td,
body.woocommerce-cart .cart_totals .shop_table tbody tr td {
	background-color: transparent;
}

/* Миниатюр нет: клуб продаёт курсы, а не физический товар —
   колонка изображения скрыта целиком (и в шапке, и в строке). */
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-thumbnail {
	display: none;
}

/* Название — заголовок карточки (Yanone 20px/400), акцент на hover (§9.13) */
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-name a {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-foreground);
	text-decoration: none;
	transition: color 0.2s ease;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table .product-name a:hover,
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-name a:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
	text-underline-offset: 3px;
}

/* Числовые колонки — по правому краю, как в таблице чекаута (§9.22) */
body.woocommerce-cart .woocommerce-cart-form .shop_table thead th.product-price,
body.woocommerce-cart .woocommerce-cart-form .shop_table thead th.product-quantity,
body.woocommerce-cart .woocommerce-cart-form .shop_table thead th.product-subtotal,
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-price,
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-quantity,
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-subtotal {
	text-align: right;
	white-space: nowrap;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table .product-remove {
	width: 48px;
	padding-right: 0;
}

/* Удаление: монохромный «×» вместо красного круга плагина (§3, §12) */
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-family: var(--font-body);
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	color: var(--color-foreground-muted);
	background: none;
	border: 0;
	border-radius: var(--radius-none);
	text-decoration: none;
	transition: color 0.2s ease;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table .product-remove a.remove:hover,
body.woocommerce-cart .woocommerce-cart-form .shop_table .product-remove a.remove:focus {
	color: var(--color-primary);
	background: none;
}

/* Количество: поле по §9.15, ширина своя — это контрол, а не колонка формы */
body.woocommerce-cart .woocommerce-cart-form .shop_table .quantity {
	display: inline-flex;
	margin: 0;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table .quantity .qty {
	width: 88px;
	text-align: center;
}

/* Цена и подытог — Amatic SC 28px, один кегль на всю страницу (§9.22) */
body.woocommerce-cart .woocommerce-cart-form .shop_table .amount,
body.woocommerce-cart .cart_totals .amount {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-primary);
}

/* --- Ряд действий: купон, «Применить» и «Обновить корзину» в одну строку (§9.20) ---
   td.actions остаётся table-cell: `display: flex` на ячейке ломает colspan,
   и ряд схлопывался в узкую колонку. Строку собирают inline-flex контролы. */
body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions {
	/* верхний отступ 40px — заказ задан явно в пикселях */
	padding: 40px 0 var(--spacing-m);
	text-align: left;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .coupon {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-s) var(--spacing-m);
	float: none;
	margin: 0 var(--spacing-m) var(--spacing-s) 0;
	vertical-align: middle;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .coupon .input-text {
	width: 240px;
}

/* Внутри строки купона нижний отступ не нужен — гэп считает flex,
   иначе «Применить» поднимается на 4px относительно поля и «Обновить корзину». */
body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .coupon .button {
	margin: 0;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .button {
	min-height: 48px;
	padding: 8px 24px;
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 var(--spacing-s) 0;
	vertical-align: middle;
}

/* --- Итоги заказа: колонка справа, заголовок как у секций чекаута (§9.4) --- */
body.woocommerce-cart .cart-collaterals {
	display: flex;
	justify-content: flex-end;
}

body.woocommerce-cart .cart_totals {
	width: min(100%, 640px);
}

body.woocommerce-cart .cart_totals > h2 {
	margin: 0 0 var(--spacing-m);
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--color-foreground);
}

body.woocommerce-cart .cart_totals > h2::after {
	content: "";
	display: block;
	width: 80px;
	height: 2px;
	margin: var(--spacing-s) 0 0;
	background-color: var(--color-border);
}

body.woocommerce-cart .cart_totals .shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: var(--radius-none);
	background: none;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-foreground-alpha);
}

body.woocommerce-cart .cart_totals .shop_table th,
body.woocommerce-cart .cart_totals .shop_table td {
	padding: var(--spacing-s) 0;
	background: none;
	border: 0;
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}

body.woocommerce-cart .cart_totals .shop_table th {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-foreground-muted);
}

body.woocommerce-cart .cart_totals .shop_table td {
	text-align: right;
	white-space: nowrap;
}

/* У таблицы итогов одна видимая строка («Подытог» скрыт) — ни внешних рамок,
   ни шва между строками: «Итого» стоит без черты сверху и снизу. */
body.woocommerce-cart .cart_totals .shop_table tr.order-total th {
	color: var(--color-foreground);
}

/* Строка «Подытог» не нужна: у курса одна позиция, и Подытог всегда равен
   Итого. В таблице товаров колонка «Подытог» при этом остаётся. */
body.woocommerce-cart .cart_totals .shop_table tr.cart-subtotal {
	display: none;
}

/* Кнопка оформления — primary на всю ширину колонки (§9.12, §9.20) */
body.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: var(--spacing-l);
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	min-height: var(--form-action-height);
	line-height: 1.2;
	margin-bottom: 0;
}

/* --- Пустая корзина: сообщение (§9.17) и переход в каталог --- */
body.woocommerce-cart p.return-to-shop {
	margin: 0;
}

/* --- Компактнее по вертикали: страница короткая, воздух шапки и контейнера
   уменьшен только на корзине (§9.21 остаётся стандартом для остальных страниц) --- */
body.woocommerce-cart .entry-header {
	padding: var(--spacing-l) 0 var(--spacing-m);
	margin-bottom: var(--spacing-l);
}

body.woocommerce-cart .site-content > .container {
	padding-bottom: var(--spacing-xxl);
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message {
	margin-bottom: var(--spacing-m);
}

/* --- «Ваш заказ» поднят на 60px в пустую правую часть ряда действий ---
   Только на широком экране (§10, брейкпоинт 1300px): ниже колонка итогов
   сдвигается влево и наехала бы на кнопки купона и обновления. */
@media (min-width: 1300px) {
	body.woocommerce-cart .cart-collaterals {
		margin-top: -100px;
	}
}

/* --- Адаптив (§10): таблица товаров складывается в стопку по data-title --- */
@media (max-width: 959px) {
	/* Выводим таблицу из табличного контекста: `tr{display:block}` внутри
	   `table{display:table}` даёт анонимные табличные обёртки, и в Safari/WebKit
	   структура строки разваливается. */
	body.woocommerce-cart .woocommerce-cart-form .shop_table.cart,
	body.woocommerce-cart .woocommerce-cart-form .shop_table.cart tbody {
		display: block;
		width: 100%;
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table thead {
		display: none;
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table tbody tr {
		display: block;
		padding: var(--spacing-m) 0;
		border-bottom: 1px solid var(--color-border-light);
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table tbody tr:last-child {
		border-bottom: 0;
	}

	/* Каждая ячейка — строка «подпись слева, значение справа». `text-align: left
	   !important` перебивает правое выравнивание из woocommerce-smallscreen.css. */
	body.woocommerce-cart .woocommerce-cart-form .shop_table tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-m);
		width: auto;
		padding: 0;
		text-align: left !important;
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table tbody td + td {
		margin-top: var(--spacing-s);
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table tbody td[data-title]::before {
		content: attr(data-title) ": ";
		float: none;
		flex-shrink: 0;
		font-family: var(--font-heading);
		font-size: 18px;
		font-weight: 400;
		line-height: 1.25;
		color: var(--color-foreground-muted);
	}

	/* Название курса длинное: подпись своей строкой, текст — на всю ширину */
	body.woocommerce-cart .woocommerce-cart-form .shop_table .product-name {
		display: block;
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table .product-name::before {
		display: block;
		margin-bottom: var(--spacing-xs);
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table tbody .cart_item td {
		border-bottom: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table .product-remove {
		justify-content: flex-end;
		width: auto;
		padding: 0;
	}

	/* Подписи у ячеек без data-title (удаление, действия) не выводим */
	body.woocommerce-cart .woocommerce-cart-form .shop_table td.product-remove::before,
	body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions::before {
		content: none;
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions {
		display: block;
		padding: var(--spacing-l) 0 0;
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .coupon {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin: 0 0 var(--spacing-m);
	}

	body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .coupon .input-text,
	body.woocommerce-cart .woocommerce-cart-form .shop_table td.actions .button {
		width: 100%;
		margin-right: 0;
	}
}