/**
 * Mechanc — single product page corrections.
 *
 * design-system.css is generated by build_ds.py and must not be hand-edited, so
 * the fixes below live here instead. Everything is written against design tokens
 * with no `body.light` duplicate — the same pattern product-table.css uses — so
 * one set of rules themes in both directions.
 *
 * ──────── 1. The spec table lost its design ────────
 * build_ds.py merged the two mockup passes, and they disagree about
 * `.specs-table`. Four rules end up competing at equal specificity, so the last
 * one in the file wins rather than the intended one:
 *
 *   .specs-table th   { font-size:11px; color:var(--cyan); width:40% … }  ← intended
 *   .specs-table td,
 *   .specs-table th   { padding:8px 4px; font-size:13px }                 ← overrides size
 *   .specs-table th   { color:var(--t2); font-weight:400; width:50% }     ← wins
 *
 * The visible result is a plain grey 13px header instead of the design's cyan
 * mono 11px, and `.specs-table` itself is re-declared later with
 * `border-collapse:collapse` and no border, which discards the outer border and
 * the rounded corners.
 *
 * The selectors below add one element to the design's own — `table.specs-table`
 * is (0,1,2) against the plain rules' (0,1,1) — which is the smallest increase
 * that wins. It deliberately stays *below* `body.light .specs-table th` (0,2,2)
 * so the light palette continues to override it, exactly as designed.
 */

table.specs-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

table.specs-table th {
	padding: 10px 14px;
	text-align: left;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent-cyan);
	background: rgba(0, 207, 255, 0.04);
	border-bottom: 1px solid var(--border-accent);
	white-space: nowrap;
	width: 40%;
}

table.specs-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--border);
	color: var(--text-secondary);
	vertical-align: top;
}

/* The value cell's mono treatment. `.specs-table td.val` is defined in
   design-system.css but the shortcode never emitted the class, so no value ever
   received it; product-specs.php now does. */
table.specs-table td.val {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-primary);
}

table.specs-table tr:last-child td {
	border-bottom: none;
}

/* ──────── 2. Quick-spec pills ────────
   `mechanc_product_pills_shortcode()` has always emitted `.pd-pill-row` and
   `.spec-pill`, but neither was ever defined anywhere — the pills rendered as
   bare text. Styled to match the "Browse Related Categories" chips in the
   reference, which is the same component at a different size. */
.pd-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 24px;
}

.spec-pill {
	padding: 4px 11px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-secondary);
	transition: border-color var(--transition), color var(--transition);
}

.spec-pill:hover {
	border-color: var(--accent-cyan);
	color: var(--accent-cyan);
}

/* ──────── 3. Tab panels ────────
   The panel show/hide is behaviour, not decoration, so it is stated here rather
   than left to the design system — a missing panel rule means every tab renders
   stacked at once, which is a much worse failure than a styling slip. */
.pd-tab-panel {
	display: none;
}

.pd-tab-panel.is-active {
	display: block;
}

.pd-tab {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-secondary);
	padding: 11px 16px;
	transition: color var(--transition), border-color var(--transition);
}

.pd-tab:hover {
	color: var(--text-primary);
}

.pd-tab.is-active {
	color: var(--accent-cyan);
	border-bottom-color: var(--accent-cyan);
}

/* ──────── 4. Documents and applications lists ────────
   Card rows inside the Documents and Applications tabs. The reference builds
   these with inline styles; named classes are used instead so the client can
   restyle them and so the light theme follows the tokens. */
.pd-doc-row,
.pd-app-row {
	background: var(--bg-deep);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 11px 14px;
}

.pd-doc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.pd-doc-title {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-primary);
}

.pd-doc-meta,
.pd-app-label {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--text-muted);
	margin-top: 2px;
}

.pd-app-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent-cyan);
	margin: 0 0 4px;
}

.pd-app-desc {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.6;
}

.pd-doc-list,
.pd-app-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ──────── 5. Product description column ────────
   The reference sets these inline on the right-hand column of the lower band. */
.pd-desc-label {
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--accent-cyan);
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border-accent);
}

.pd-full-desc {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.85;
}

.pd-cat-box {
	padding: 14px 16px;
	background: rgba(0, 207, 255, 0.04);
	border: 1px solid var(--border-accent);
	border-radius: var(--radius-lg);
	margin-top: 14px;
}

.pd-cat-label {
	font-family: var(--font-mono);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--accent-cyan);
	margin-bottom: 10px;
}

.pd-cat-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pd-cat-links a {
	padding: 4px 11px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 11px;
	color: var(--text-secondary);
	transition: border-color var(--transition), color var(--transition);
}

.pd-cat-links a:hover {
	border-color: var(--accent-cyan);
	color: var(--accent-cyan);
}

/* ──────── 6. Product card gaps ────────
   design-system.css defines the whole `.pcard` component except the category
   line, and it assumes the image is a background rather than an <img>. */
.pcard-cat {
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	margin-bottom: 4px;
}

.pcard-img img,
.pcard-photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
}

.pcard-svg {
	width: 88px;
	height: 60px;
	color: var(--accent-cyan);
	opacity: 0.55;
}

/* `.pcard-name` is an anchor here so the whole card title is clickable; the
   design's rule assumes a div, so the link colour has to be restated. */
a.pcard-name {
	display: block;
	color: var(--text-secondary);
}

a.pcard-name:hover {
	color: var(--accent-cyan);
}

/* ──────── 7. YITH Request a Quote buttons ────────
   The quote button is rendered by the plugin so its nonce and AJAX stay intact,
   which means it arrives with YITH's classes and none of the design's. Rather
   than reproduce the button — and inherit the job of keeping it working across
   plugin updates — its own markup is mapped onto the two designed button styles
   depending on where it appears.

   `.button` is included in the selectors because YITH adds WooCommerce's button
   class, which the theme styles; without it the theme's rule wins on order. */
.pd-quote-wrap .yith-ywraq-add-to-quote {
	flex: 1;
	min-width: 200px;
}

.pd-quote-wrap .add-request-quote-button,
.pd-quote-wrap a.add-request-quote-button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--radius);
	background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
	color: #000;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	box-shadow: 0 4px 20px rgba(0, 207, 255, 0.2);
	transition: transform var(--transition), box-shadow var(--transition);
}

.pd-quote-wrap .add-request-quote-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 28px rgba(0, 207, 255, 0.32);
}

.pcard-actions .yith-ywraq-add-to-quote {
	flex: 1;
}

.pcard-actions .add-request-quote-button,
.pcard-actions a.add-request-quote-button.button {
	display: block;
	width: 100%;
	padding: 7px;
	text-align: center;
	background: rgba(0, 98, 230, 0.12);
	border: 1px solid rgba(0, 98, 230, 0.25);
	border-radius: var(--radius);
	font-size: 12px;
	font-weight: 600;
	color: var(--accent-cyan);
	transition: background var(--transition), border-color var(--transition);
}

.pcard-actions .add-request-quote-button:hover {
	background: rgba(0, 98, 230, 0.2);
	border-color: var(--accent-cyan);
}

/* YITH's confirmation and "browse list" messages sit directly under the button
   in both contexts; keep them from inheriting the button's centred bulk. */
.yith_ywraq_add_item_response_message,
.yith_ywraq_add_item_browse_message,
.yith_ywraq_add_item_product_message {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-secondary);
	margin-top: 6px;
}

.yith_ywraq_add_item_browse_message a {
	color: var(--accent-cyan);
	text-decoration: underline;
}

/* ──────── 8. Breadcrumb current item ────────
   The templates use `.bc-current`, which design-system.css never defined. */
.bc-current {
	color: var(--text-secondary);
}