/**
 * Single product Description tables — modern + responsive (0.19.433).
 *
 * Purpose: every table inside the Description tab renders modern and stays
 * fully readable on all devices. The heading treatment uses the brand
 * (recommended) color: a true header row (thead th) gets a solid brand
 * background with white text, and the first (label) column of body rows —
 * the row-heading column of a spec table — gets a warm brand tint with
 * semibold labels. Borders, radius-free flat look and global colors follow
 * the site's existing table system; no shadow or blur anywhere.
 *
 * Responsive contract (both columns visible on every device): the table
 * keeps its columns on all widths — nothing stacks, nothing scrolls away.
 * Cells wrap anywhere (long spec values never push a column off-screen),
 * the label column keeps a readable share of the width, and padding/font
 * step down on small screens. Note: the small-screen cell padding below
 * intentionally overrides the description-table padding setting on phones
 * only, so the table fits; desktop/tablet padding still follows the setting.
 *
 * Related: modules/storefront/features/woocommerce/single-product.php
 * (enqueue), modules/storefront/assets/css/single-product/single-product.min.css
 * (base description-table rules this file extends), modules/storefront/assets/css/single-product-other-names.css
 * (warm brand tint pattern: 8% primary mixed into the surface).
 */

body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table {
	overflow-wrap: anywhere;
}

/* True header row: solid brand (recommended) color, white text. */
body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table thead th {
	background: var(--stm-commerce-primary);
	color: #fff;
	font-weight: 700;
}

/* Row-heading (label) column: warm brand tint + semibold labels. */
body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table tbody tr td:first-child,
body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table tbody tr th:first-child {
	width: 32%;
	background: color-mix(in srgb, var(--stm-commerce-primary) 8%, var(--stm-commerce-surface));
	color: var(--stm-commerce-heading);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Value column always wraps, so long values never squeeze a column away. */
body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table tbody tr td:last-child,
body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table tbody tr th:last-child {
	overflow-wrap: anywhere;
}

/* Small screens: tighter cells, both columns stay fully visible. */
@media (max-width: 640px) {
	body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table th,
	body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table td {
		padding: 10px 12px;
		font-size: 14px;
	}

	body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table tbody tr td:first-child,
	body.single-product.stm-engine-storefront .stm-single-tabs #tab-description table tbody tr th:first-child {
		width: 38%;
	}
}