/**
 * WC Product Table
 *
 * Три состояния:
 *   десктоп  (≥ 1025px) — обычная таблица
 *   планшет  (768–1024) — уплотнённая таблица, при нехватке места скроллится вбок
 *   мобильный (≤ 767px) — каждая строка превращается в карточку
 *
 * Все цвета и отступы — переменные на .wcpt-wrap, их можно переопределить
 * в стилях темы, не трогая этот файл.
 */

.wcpt-wrap {
	--wcpt-bg: #ffffff;
	--wcpt-bg-alt: #f9fafb;
	--wcpt-bg-hover: #f3f4f6;
	--wcpt-border: #e5e7eb;
	--wcpt-text: #374151;
	--wcpt-heading: #111827;
	--wcpt-muted: #9ca3af;
	--wcpt-label: #6b7280;
	--wcpt-brand: #2563eb;
	--wcpt-brand-hover: #1d4ed8;
	--wcpt-radius: 8px;
	--wcpt-pad-x: 20px;
	--wcpt-pad-y: 14px;
	--wcpt-font: 14px;

	position: relative;
	overflow-x: auto;
	background: var(--wcpt-bg);
	border: 1px solid var(--wcpt-border);
	border-radius: var(--wcpt-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	-webkit-overflow-scrolling: touch;
}

/* Не полагаемся на глобальный border-box темы: без него width:100%
   у кнопки и карточек складывался бы с их паддингами и вылезал за край. */
.wcpt-wrap,
.wcpt-wrap *,
.wcpt-wrap *::before,
.wcpt-wrap *::after {
	box-sizing: border-box;
}

.wcpt-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--wcpt-font);
	line-height: 1.45;
	color: var(--wcpt-text);
	text-align: left;
}

.wcpt-table th,
.wcpt-table td {
	padding: var(--wcpt-pad-y) var(--wcpt-pad-x);
	border: 0;
	vertical-align: middle;
	text-align: left;
}

.wcpt-table thead th {
	background: var(--wcpt-bg-alt);
	border-bottom: 1px solid var(--wcpt-border);
	font-weight: 500;
	color: #4b5563;
	white-space: nowrap;
}

.wcpt-table tbody tr {
	border-bottom: 1px solid var(--wcpt-border);
	transition: background .12s ease;
}

.wcpt-table tbody tr:last-child {
	border-bottom: 0;
}

.wcpt-table tbody tr:nth-child(even) {
	background: var(--wcpt-bg-alt);
}

.wcpt-table tbody tr:hover {
	background: var(--wcpt-bg-hover);
}

/* Название */
.wcpt-name {
	font-weight: 500;
	color: var(--wcpt-heading);
}

.wcpt-name a {
	color: inherit;
	text-decoration: none;
}

.wcpt-name a:hover,
.wcpt-name a:focus {
	text-decoration: underline;
}

/* Цены */
.wcpt-price,
.wcpt-sale {
	white-space: nowrap;
}

/* Зачёркиваем именно значение, а не всю ячейку: в мобильной раскладке
   у ячейки есть ещё и подпись ::before, которая унаследовала бы линию. */
.wcpt-price--struck {
	color: var(--wcpt-muted);
}

.wcpt-price--struck .wcpt-value {
	text-decoration: line-through;
}

.wcpt-sale {
	font-weight: 600;
	color: var(--wcpt-heading);
}

.wcpt-sale--empty {
	font-weight: 400;
	color: var(--wcpt-muted);
}

/* WooCommerce оборачивает цену в <span class="woocommerce-Price-amount"> */
.wcpt-table .woocommerce-Price-amount {
	color: inherit;
}

/* Остаток */
.wcpt-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.wcpt-badge--in {
	background: #dcfce7;
	color: #166534;
}

.wcpt-badge--low {
	background: #fef3c7;
	color: #92400e;
}

.wcpt-badge--out {
	background: #fee2e2;
	color: #991b1b;
}

/* Кнопка */
.wcpt-action {
	text-align: right;
	white-space: nowrap;
}

.wcpt-btn {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 6px;
	background: var(--wcpt-brand);
	color: #fff;
	font-size: var(--wcpt-font);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background .15s ease;
}

.wcpt-btn:hover,
.wcpt-btn:focus {
	background: var(--wcpt-brand-hover);
	color: #fff;
	text-decoration: none;
}

.wcpt-btn:focus-visible {
	outline: 2px solid var(--wcpt-brand);
	outline-offset: 2px;
}

.wcpt-empty {
	padding: 20px;
	color: var(--wcpt-label);
}

.wcpt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Подписи колонок нужны только в мобильной раскладке */
.wcpt-table td::before {
	display: none;
}

/* ------------------------------------------------------------------
   Планшет: 768–1024px
   Таблица остаётся таблицей, но уплотняется. Если ширины всё равно
   не хватает — родитель скроллится по горизонтали.
   ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1024px) {

	.wcpt-wrap {
		--wcpt-pad-x: 14px;
		--wcpt-pad-y: 12px;
		--wcpt-font: 13px;
	}

	.wcpt-table {
		min-width: 620px;
	}

	.wcpt-name {
		min-width: 180px;
	}

	.wcpt-btn {
		padding: 7px 14px;
	}
}

/* ------------------------------------------------------------------
   Мобильный: ≤ 767px
   Каждая строка — отдельная карточка. Заголовок таблицы скрыт,
   подписи берутся из data-label.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

	.wcpt-wrap {
		--wcpt-radius: 10px;

		overflow: visible;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.wcpt-table,
	.wcpt-table tbody,
	.wcpt-table tr,
	.wcpt-table th,
	.wcpt-table td {
		display: block;
		width: 100%;
	}

	.wcpt-table {
		min-width: 0;
		font-size: 15px;
	}

	/* Заголовок таблицы прячем, но оставляем доступным скринридерам */
	.wcpt-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.wcpt-table tbody tr,
	.wcpt-table tbody tr:nth-child(even) {
		margin: 0 0 12px;
		padding: 14px 16px;
		background: var(--wcpt-bg);
		border: 1px solid var(--wcpt-border);
		border-radius: var(--wcpt-radius);
		box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	}

	.wcpt-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.wcpt-table tbody tr:hover {
		background: var(--wcpt-bg);
	}

	/* Название — заголовок карточки.
	   Селектор с .wcpt-table обязателен: иначе общее правило
	   «.wcpt-table th, .wcpt-table td» перебьёт обнуление отступов
	   и заголовок уедет вправо относительно подписей. */
	.wcpt-table th.wcpt-name {
		padding: 0 0 10px;
		margin: 0 0 8px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
		border-bottom: 1px solid var(--wcpt-border);
		white-space: normal;
	}

	/* Остальные ячейки — строка «подпись — значение» */
	.wcpt-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 5px 0;
		white-space: normal;
	}

	.wcpt-table td::before {
		display: block;
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 13px;
		font-weight: 500;
		color: var(--wcpt-label);
		/* Подпись не должна наследовать зачёркивание от .wcpt-price--struck */
		text-decoration: none;
	}

	.wcpt-price,
	.wcpt-sale {
		text-align: right;
		white-space: nowrap;
	}

	/* Если скидки нет — не занимаем место пустой строкой.
	   Селектор с .wcpt-table нужен, чтобы перебить display:flex выше. */
	.wcpt-table td.wcpt-sale--empty {
		display: none;
	}

	/* Когда скидки нет, обычная цена — главное число в карточке */
	.wcpt-price:not(.wcpt-price--struck) {
		font-weight: 600;
		color: var(--wcpt-heading);
	}

	/* Кнопка на всю ширину */
	.wcpt-table td.wcpt-action {
		display: block;
		padding: 12px 0 0;
		text-align: left;
	}

	.wcpt-action::before {
		display: none;
	}

	.wcpt-btn {
		display: block;
		width: 100%;
		padding: 11px 18px;
		font-size: 15px;
		text-align: center;
	}
}

/* Совсем узкие экраны */
@media (max-width: 360px) {

	.wcpt-table tbody tr {
		padding: 12px 13px;
	}

	.wcpt-table {
		font-size: 14px;
	}
}

/* Тёмная тема — включается, если добавить классу обёртки wcpt-dark */
@media (prefers-color-scheme: dark) {

	.wcpt-wrap.wcpt-dark {
		--wcpt-bg: #111827;
		--wcpt-bg-alt: #1f2937;
		--wcpt-bg-hover: #374151;
		--wcpt-border: #374151;
		--wcpt-text: #d1d5db;
		--wcpt-heading: #f9fafb;
		--wcpt-muted: #6b7280;
		--wcpt-label: #9ca3af;
	}
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {

	.wcpt-table tbody tr,
	.wcpt-btn {
		transition: none;
	}
}