/* Страница корзины (checkout/cart_list.twig) — стоковая бутстраповская
   таблица с частичной покраской темы поверх (жалоба пользователя, 20.08.2026:
   «не нравятся эти опекартовские таблицы»). Разметку (сам `<table>`) не
   трогаем: на неё завязаны три события ядра проекта, каждое ищет свой якорь
   строкой в готовом HTML — `extension/soviet/catalog/controller/event/
   checkout.php::emptyCart()` (`<h1>`…`</p>`), `free_shipping.php::cart()`
   (`<div id="output-cart"`). Переставь их на div/grid — все три молча
   перестанут находить, куда вставлять (см. `strpos() === false` — return),
   и полоска бесплатной доставки с плашкой пустой корзины пропадут без
   единой ошибки. Тот же приём, что уже держит мини-корзину в шапке
   (`#cart .dropdown-menu table` в theme.css) — только на весь экран
   и с куда более крупным фото (миграция 42: 47×47 → 100×100).

   Только route=checkout/cart — extension/soviet/catalog/controller/common/
   menu.php::assets(). */

#output-cart {
	margin-bottom: 24px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
}

#output-cart table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

/* Бутстрап красит КАЖДУЮ ячейку своим бордером (.table-bordered — левый/
   правый на td, верхний/нижний на tr) — на десктопе, где строка ещё
   визуально строка, это почти не заметно, а на телефоне, где <tr> становится
   CSS-грид-карточкой (ниже), эти обрезки бордеров у каждой ячейки уже не
   выстраиваются в общую линию — расползаются полосками где попало. Гасим
   разом, свои границы (между строками, у шапки/итогов) расставлены ниже
   отдельно. */
#output-cart table th,
#output-cart table td {
	border: 0;
}

/* Шапка — тот же чёрный «инвентарный» кикер, что у карточки товара
   («INVENTORY CARD»), просто растянут на всю ширину таблицы. */
#output-cart thead th {
	padding: 12px 14px;
	border: 0;
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-family: var(--sb-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-align: left;
	text-transform: uppercase;
}

#output-cart thead th:nth-child(1) {
	width: 130px;
}

#output-cart thead th:nth-child(3) {
	width: 190px;
}

#output-cart thead th:nth-child(4),
#output-cart thead th:nth-child(5) {
	width: 110px;
	text-align: right;
}

#output-cart tbody tr {
	border-bottom: var(--sb-rule) solid var(--sb-line);
}

#output-cart tbody tr:last-child {
	border-bottom: 0;
}

#output-cart tbody td {
	padding: 16px 14px;
	vertical-align: middle;
}

#output-cart tbody td:nth-child(1) {
	text-align: center;
}

#output-cart tbody td img {
	border: var(--sb-rule) solid var(--sb-ink);
}

/* Название и опции — своя типографика вместо голого <a>: товар крупнее,
   опции (у «Radio» это конкретный выбранный выпуск) мельче и приглушённее,
   чтобы не спорили с названием за внимание. */
#output-cart tbody td:nth-child(2) a {
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
}

#output-cart tbody td:nth-child(2) a:hover {
	color: var(--sb-red);
}

#output-cart tbody td:nth-child(2) ul {
	margin-top: 4px;
}

#output-cart tbody td:nth-child(2) small {
	color: var(--sb-muted);
	font-size: 12.5px;
}

#output-cart tbody td:nth-child(4),
#output-cart tbody td:nth-child(5) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

#output-cart tbody td:nth-child(5) {
	color: var(--sb-red);
	font-family: var(--sb-display);
	font-size: 15px;
}

/* Количество: родной input-group ядра остаётся (валидация/AJAX не трогаем),
   красим под свою тему — прямые углы, кумачовые кнопки без бутстраповских
   скруглений. */
#output-cart .input-group {
	max-width: 168px;
}

#output-cart .input-group .form-control {
	border-color: var(--sb-line);
	border-radius: 0;
	text-align: center;
}

#output-cart .input-group .btn {
	border-radius: 0;
}

#output-cart .input-group .btn-primary {
	--bs-btn-bg: var(--sb-ink);
	--bs-btn-border-color: var(--sb-ink);
	--bs-btn-hover-bg: var(--sb-red);
	--bs-btn-hover-border-color: var(--sb-red);
}

#output-cart .input-group .btn-danger {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--sb-line);
	--bs-btn-color: var(--sb-ink);
	--bs-btn-hover-bg: var(--sb-red);
	--bs-btn-hover-border-color: var(--sb-red);
}

/* Итоги — тот же приём, что и в мини-корзине шапки: обычные строки тихие,
   последняя («Total») крупнее и кумачом. */
#checkout-total td {
	padding: 10px 14px;
	border: 0;
	border-top: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-paper-2);
	font-family: var(--sb-display);
	font-size: 13px;
	letter-spacing: .02em;
}

#checkout-total tr:last-child td {
	border-top: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-size: 17px;
}

#checkout-total tr:last-child td:last-child {
	color: #fff;
}

/* «Estimate Shipping & Taxes» / «Use Coupon Code» — родной bootstrap-
   аккордеон, только в прямых углах и в тон карточки, а не голубым бутстрапом. */
#accordion .accordion-item {
	border: var(--sb-rule) solid var(--sb-line);
	border-radius: 0;
}

#accordion .accordion-item + .accordion-item {
	margin-top: -1px;
}

#accordion .accordion-button {
	border-radius: 0 !important;
	background: var(--sb-card);
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

#accordion .accordion-button:not(.collapsed) {
	background: var(--sb-ink);
	color: var(--sb-paper);
	box-shadow: none;
}

#accordion .accordion-button:focus {
	box-shadow: none;
}

/* «Continue Shopping» / «Checkout» внизу — контурная и залитая, тот же язык,
   что и везде в теме (--sb-shift). */
.container #content > .row > .col a.btn {
	padding: 12px 24px;
	border-radius: 0;
	font-family: var(--sb-display);
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.container #content > .row > .col a.btn-light {
	border: var(--sb-rule) solid var(--sb-ink);
	background: transparent;
	color: var(--sb-ink);
}

.container #content > .row > .col a.btn-light:hover {
	background: var(--sb-ink);
	color: var(--sb-paper);
}

.container #content > .row > .col a.btn-primary {
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-ink);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
}

.container #content > .row > .col a.btn-primary:hover {
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
	box-shadow: calc(var(--sb-shift) * 2) calc(var(--sb-shift) * 2) 0 var(--sb-red);
}

/* Телефон: настоящая таблица становится карточками — каждая <tr> своя
   плашка, картинка слева во всю высоту, остальное — столбиком справа.
   Разметка та же самая (display меняет только отрисовку), поэтому все три
   события из шапки файла по-прежнему находят свои строковые якоря. */
@media (max-width: 767px) {
	#output-cart thead {
		display: none;
	}

	#output-cart tbody tr {
		display: grid;
		grid-template-columns: 84px 1fr;
		grid-template-areas:
			"thumb name"
			"thumb qty"
			". price";
		gap: 6px 12px;
		padding: 14px;
	}

	#output-cart tbody td {
		padding: 0;
	}

	#output-cart tbody td:nth-child(1) {
		grid-area: thumb;
	}

	#output-cart tbody td:nth-child(2) {
		grid-area: name;
	}

	#output-cart tbody td:nth-child(3) {
		grid-area: qty;
	}

	#output-cart tbody td:nth-child(4) {
		display: none;
	}

	#output-cart tbody td:nth-child(5) {
		grid-area: price;
		text-align: left;
	}

	#checkout-total,
	#checkout-total tr,
	#checkout-total td {
		display: block;
	}

	#checkout-total tr {
		display: flex;
		justify-content: space-between;
	}
}