/*
 * SportHub — корзина (классический шаблон cart/cart.php).
 *
 * Таблицу заменяем карточками на всех ширинах. На мобильных её и так
 * разворачивал woocommerce-smallscreen.css — в столбик подписей
 * «Товар: …», «Цена: …», без картинки товара. На десктопе таблица
 * работала, но пустовала: пять колонок на одну-две позиции, а снимок
 * товара размером с ноготь.
 *
 * Раскладка одна и та же, меняется только расстановка ячеек:
 *
 *   до 767px                        от 768px
 *   ┌─────────────────────┐        ┌────────────────────────────────────┐
 *   │ [сн]  Название    × │        │ [снимок]  Название   [−2+]  650 ₽ ×│
 *   │ имок  за штуку 650 ₽│        │           за штуку 650 ₽           │
 *   │ [−] 2 [+]    1300 ₽ │        └────────────────────────────────────┘
 *   └─────────────────────┘
 *
 * Файл подключается только на странице корзины и после main.css.
 */

/* ============================================================
   ОБЩЕЕ ДЛЯ ВСЕХ ШИРИН
   ============================================================ */

.woocommerce-cart-form,
.cart-collaterals {
	--sh-cart-line: #e4e7e3;
	--sh-cart-muted: #6b7280;
	--sh-cart-card: #fff;
	--sh-cart-radius: 14px;
}

.woocommerce table.shop_table.cart,
.woocommerce table.shop_table.cart tbody {
	display: block;
	border: 0;
	background: none;
}

/* Шапка таблицы карточкам не нужна: в каждой строке и так подписано,
   где цена, а где сумма. */
.woocommerce table.shop_table.cart thead {
	display: none;
}

.woocommerce table.shop_table.cart tr.cart_item {
	display: grid;
	align-items: start;
	margin: 0 0 10px;
	border: 1px solid var(--sh-cart-line);
	border-radius: var(--sh-cart-radius);
	background: var(--sh-cart-card);
}

.woocommerce table.shop_table.cart tr.cart_item td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

/* Подписи из data-title, которые дорисовывает smallscreen. Положение
   ячейки в карточке говорит то же самое; исключение — цена за штуку. */
.woocommerce table.shop_table.cart tr.cart_item td::before {
	content: none !important;
}

/* ---------- миниатюра ---------- */

.woocommerce table.shop_table.cart tr.cart_item td.product-thumbnail {
	display: block !important; /* smallscreen прячет её жёстко */
	grid-area: thumb;
}

.woocommerce table.shop_table.cart td.product-thumbnail img {
	border-radius: 10px;
	object-fit: contain;
	background: #f5f6f4;
}

/* ---------- название и характеристики ---------- */

.woocommerce table.shop_table.cart td.product-name {
	grid-area: name;
	line-height: 1.35;
	text-align: left !important;
}

.woocommerce table.shop_table.cart td.product-name > a {
	font-weight: 600;
	text-decoration: none;
}

.woocommerce table.shop_table.cart td.product-name .variation {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--sh-cart-muted);
}

.woocommerce table.shop_table.cart td.product-name .variation dt,
.woocommerce table.shop_table.cart td.product-name .variation dd,
.woocommerce table.shop_table.cart td.product-name .variation p {
	display: inline;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

.woocommerce table.shop_table.cart td.product-name .variation dd::after {
	content: " ";
}

/* ---------- цена за штуку ---------- */

.woocommerce table.shop_table.cart td.product-price {
	grid-area: meta;
	font-size: 13px;
	font-weight: 400;
	color: var(--sh-cart-muted);
	text-align: left !important; /* в main.css цена прижата вправо */
}

/* Без подписи две суммы в карточке не различить: цена за штуку
   и цена за строку стоят рядом. */
.woocommerce table.shop_table.cart td.product-price::before {
	content: "за штуку " !important;
	float: none;
	font-weight: 400;
}

/* ---------- количество ---------- */

.woocommerce table.shop_table.cart td.product-quantity {
	grid-area: qty;
	align-self: center;
}

.woocommerce table.shop_table.cart td.product-quantity .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--sh-cart-line);
	border-radius: 12px;
	overflow: hidden;
}

.woocommerce table.shop_table.cart td.product-quantity input.qty {
	width: 52px;
	height: 44px; /* палец, а не курсор */
	padding: 0;
	border: 0;
	border-left: 1px solid var(--sh-cart-line);
	border-right: 1px solid var(--sh-cart-line);
	border-radius: 0;
	background: none;
	font-size: 16px; /* меньше 16px — и Safari зумит страницу при фокусе */
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Стрелки браузера рядом со своими кнопками не нужны. */
.woocommerce table.shop_table.cart td.product-quantity input.qty::-webkit-outer-spin-button,
.woocommerce table.shop_table.cart td.product-quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce table.shop_table.cart .sh-qty__btn {
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: 20px;
	line-height: 1;
}

.woocommerce table.shop_table.cart .sh-qty__btn:hover,
.woocommerce table.shop_table.cart .sh-qty__btn:active {
	background: #f3f4f2;
}

/* ---------- сумма строки ---------- */

.woocommerce table.shop_table.cart td.product-subtotal {
	grid-area: subtotal;
	align-self: center;
	text-align: right !important;
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- удаление ---------- */

.woocommerce table.shop_table.cart td.product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: none;
	color: var(--sh-cart-muted);
	font-size: 22px;
	line-height: 1;
}

.woocommerce table.shop_table.cart td.product-remove a.remove:hover,
.woocommerce table.shop_table.cart td.product-remove a.remove:focus {
	background: #f3f4f2;
	color: #b3261e;
}

/* ---------- строка действий ---------- */

.woocommerce table.shop_table.cart td.actions {
	display: block;
	padding: 0;
	border: 0;
}

/* Скрипт применяет количество сам, перезагрузки нет — кнопка остаётся
   только для тех, у кого JS не отработал. Класс вешает сам скрипт. */
.woocommerce-cart-form.sh-cart-js td.actions .button[name="update_cart"] {
	display: none;
}

.woocommerce table.shop_table.cart td.actions .button {
	min-height: 46px;
}

/* ---------- итоги ---------- */

/* Рамки таблицы итогов. WooCommerce обводит и саму таблицу, и каждую
   ячейку, а после display:flex на строке это превращается в коробочку
   вокруг «Суммы» и «Итого». Карточка у блока итогов уже своя. */
.cart-collaterals .cart_totals table.shop_table,
.cart-collaterals .cart_totals table.shop_table tbody,
.cart-collaterals .cart_totals table.shop_table tr,
.cart-collaterals .cart_totals table.shop_table th,
.cart-collaterals .cart_totals table.shop_table td {
	border: 0 !important;
	border-radius: 0;
	background: none;
}

.cart-collaterals .cart_totals table.shop_table {
	border-collapse: collapse;
}

.cart-collaterals .cart_totals table.shop_table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
}

.cart-collaterals .cart_totals table.shop_table tbody th {
	display: block !important; /* smallscreen прячет заголовок строки */
	padding: 0;
	border: 0;
	font-weight: 400;
	text-align: left;
}

.cart-collaterals .cart_totals table.shop_table tbody td {
	padding: 0;
	border: 0;
	text-align: right;
}

.cart-collaterals .cart_totals table.shop_table tbody td::before {
	content: none !important;
}

/* Единственная линия, которая остаётся: отделяет итог от строк выше.
   Без неё две суммы одного размера висят рядом без иерархии. */
.cart-collaterals .cart_totals .order-total {
	border-top: 1px solid var(--sh-cart-line) !important;
	font-size: 19px;
	font-weight: 600;
}

.cart-collaterals .wc-proceed-to-checkout a.checkout-button {
	display: block;
	min-height: 52px;
	padding: 0 16px;
	line-height: 52px;
	font-size: 16px;
	text-align: center;
}

/* ---------- состояние обновления ---------- */

/* Пока идёт фоновый запрос, список гасим и блокируем: иначе успеешь
   нажать «+» ещё раз, а ответ уже в пути — и он вернёт старое число.
   Задержка перед появлением нужна, чтобы быстрый ответ не давал
   заметного глазу мигания. */
.woocommerce-cart-form.sh-cart-busy {
	pointer-events: none;
	opacity: 0.55;
	transition: opacity 0.15s ease 0.25s;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-cart-form.sh-cart-busy {
		transition: none;
	}
}

/* ---------- фокус с клавиатуры ---------- */

.woocommerce-cart-form a:focus-visible,
.woocommerce-cart-form input:focus-visible,
.woocommerce-cart-form button:focus-visible,
.cart-collaterals a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ============================================================
   ДО 767px — карточка в три ряда
   ============================================================ */

@media (max-width: 767px) {

	.woocommerce table.shop_table.cart tr.cart_item {
		position: relative; /* якорь для крестика */
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name name"
			"thumb meta meta"
			"qty   qty  subtotal";
		column-gap: 12px;
		row-gap: 8px;
		padding: 12px;
	}

	.woocommerce table.shop_table.cart td.product-thumbnail img {
		width: 72px;
		height: 72px;
	}

	.woocommerce table.shop_table.cart td.product-name {
		/* Отступ под крестик. Дублируется на ссылке: в main.css есть
		   более весомое правило на padding этой ячейки. */
		padding-right: 38px !important;
		font-size: 15px;
	}

	.woocommerce table.shop_table.cart td.product-name > a {
		/* Названия вроде «Babolat Pure Aero 98 Gen9 305g» занимают
		   три строки и отжимают всё остальное вниз. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		padding-right: 38px !important;
	}

	/* Крестик выводим из сетки: иначе он занимает третью колонку,
	   и та сужается до его 32px вместе с суммой под ним. */
	.woocommerce table.shop_table.cart tr.cart_item td.product-remove {
		position: absolute;
		top: 6px;
		right: 6px;
		z-index: 2;
		width: auto;
	}

	.woocommerce table.shop_table.cart td.actions .button {
		width: 100%;
	}

	/* Купоны, если их включат: на 320px поле и кнопка в одну строку
	   делят её пополам, и введённый код не виден целиком. */
	.woocommerce table.shop_table.cart td.actions .coupon {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0 0 10px;
		float: none;
	}

	.woocommerce table.shop_table.cart td.actions .coupon input.input-text {
		width: 100%;
		min-height: 46px;
	}

	.cart-collaterals,
	.cart-collaterals .cart_totals {
		width: 100%;
		float: none;
	}
}

/* ============================================================
   ОТ 768px — та же карточка в одну строку
   ============================================================ */

@media (min-width: 768px) {

	.woocommerce table.shop_table.cart tr.cart_item {
		grid-template-columns: 96px minmax(0, 1fr) auto auto 40px;
		grid-template-areas:
			"thumb name qty subtotal remove"
			"thumb meta qty subtotal remove";
		align-items: center;
		column-gap: 20px;
		row-gap: 4px;
		padding: 16px;
	}

	.woocommerce table.shop_table.cart td.product-thumbnail img {
		width: 96px;
		height: 96px;
	}

	.woocommerce table.shop_table.cart td.product-name {
		align-self: end;
		font-size: 16px;
	}

	.woocommerce table.shop_table.cart td.product-price {
		align-self: start;
	}

	.woocommerce table.shop_table.cart td.product-subtotal {
		min-width: 110px;
		font-size: 18px;
	}

	.woocommerce table.shop_table.cart td.product-remove {
		grid-area: remove;
		align-self: center;
	}

	.woocommerce table.shop_table.cart td.actions {
		text-align: right;
	}
}