/* Variations table in the product tab */

.vtab-wrap {
	--vtab-border: rgba( 0, 0, 0, 0.1 );
	--vtab-head-bg: #f7f8f9;
	--vtab-row-alt: #fbfbfc;
	--vtab-text: inherit;

	overflow-x: auto; /* wide tables scroll rather than break the layout */
	-webkit-overflow-scrolling: touch;
}

.vtab-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.92rem;
	color: var( --vtab-text );
}

.vtab-table th,
.vtab-table td {
	padding: 0.7rem 0.9rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var( --vtab-border );
}

.vtab-table thead th {
	background: var( --vtab-head-bg );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

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

.vtab-col-image {
	width: 64px;
}

.vtab-thumb {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px;
}

.vtab-col-sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85rem;
	white-space: nowrap;
}

.vtab-col-price {
	white-space: nowrap;
	font-weight: 600;
}

.vtab-col-price del {
	font-weight: 400;
	opacity: 0.6;
}

.vtab-stock {
	font-size: 0.85rem;
}

.vtab-stock.out-of-stock {
	color: #b42318;
}

.vtab-stock.available-on-backorder {
	color: #b54708;
}

/* Blocksy sometimes styles tab content tables; keep ours predictable */
.woocommerce-Tabs-panel .vtab-table {
	border: 1px solid var( --vtab-border );
}

/* Small screens: each row becomes a labelled card.
   The data-label attributes in the PHP supply the field names. */
@media ( max-width: 700px ) {
	.vtab-wrap {
		overflow-x: visible;
	}

	.vtab-table,
	.vtab-table tbody,
	.vtab-table tr,
	.vtab-table td {
		display: block;
		width: auto;
	}

	.vtab-table thead {
		display: none;
	}

	.vtab-table tbody tr {
		margin-bottom: 1rem;
		padding: 0.75rem;
		border: 1px solid var( --vtab-border );
		border-radius: 6px;
		background: none;
	}

	.vtab-table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.4rem 0;
		border: 0;
	}

	.vtab-table td[data-label]::before {
		content: attr( data-label );
		flex: 0 0 auto;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0.65;
	}

	.vtab-table td.vtab-col-image {
		justify-content: flex-start;
		padding-bottom: 0.6rem;
	}

	.vtab-thumb {
		width: 64px;
		height: 64px;
	}
}

/* Datasheet column */
.vtab-col-pdf {
	white-space: nowrap;
}

.vtab-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.7rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var( --vtab-border );
	border-radius: 4px;
}

.vtab-pdf-link:hover {
	border-color: currentColor;
}

.vtab-pdf-size {
	font-weight: 400;
	opacity: 0.6;
}

.vtab-empty {
	opacity: 0.4;
}

/* Quote column */
.vtab-col-quote {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

@media ( max-width: 700px ) {
	.vtab-table td.vtab-col-quote {
		justify-content: flex-start;
		padding-top: 0.7rem;
	}
}