/**
 * 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: 8px 4px;
	text-align: left;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--t2);
	background: transparent;
	border: 1px solid rgba(255,255,255,.06);
	white-space: nowrap;
	width: 50%;
}

table.specs-table td {
	padding: 8px 4px;
	font-size: 12px;
	border: 1px solid rgba(255,255,255,.06);
	color: var(--t2);
	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;
	font-weight: 500;
	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: 0;
}

.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);
}

/* The reference builds the tab strip out of `<div>`s, so it never shows a focus
   ring. Ours are real `<button>`s — correct for a control that JS operates —
   which means clicking one leaves the UA's focus outline drawn around the word.
   `design-system.css` resets `button:focus` colours but never touches `outline`,
   so nothing was suppressing it.

   `:focus-visible` is the fix rather than a blanket `outline:none`: the pointer
   never sees a ring, and keyboard users keep one. */
.pd-tab:focus {
	outline: none;
	box-shadow: none;
}

.pd-tab:focus-visible {
	outline: 2px solid var(--accent-cyan);
	outline-offset: 2px;
}

.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;
}

/* `.btn-ds` is shared with the product card, where it carries `flex: 1` so two
   buttons split the row evenly. In a document row it sits beside a text block
   and must size to its own content instead, or it swallows the row. */
.pd-doc-row .btn-ds {
	flex: 0 0 auto;
	padding: 6px 16px;
	white-space: nowrap;
}

.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-app-desc p {
	margin: 0 0 6px;
}

.pd-app-desc p:last-child {
	margin-bottom: 0;
}

/* Optional per-application file or external link. Terms without either simply
   render as heading + paragraph. */
.pd-app-link {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--accent-cyan);
	border-bottom: 1px solid var(--border-accent);
	padding-bottom: 1px;
	transition: color var(--transition), border-color var(--transition);
}

.pd-app-link:hover {
	color: var(--text-primary);
	border-bottom-color: var(--accent-cyan);
}

.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;
}

.woocommerce div.product div.images {
	margin-bottom: 0 !important;
}

.pcard-img img, .pcard-photo {
	width: auto;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	display: inline-block;
	border-radius: 20px !important;
	max-width: 100%;
}

.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: #fff !important;
	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);
	margin-top: 0;
}

.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);
	margin-top: 0;
}

.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);
}

/* ──────── 9. Gallery image corners ────────
   `.pd-main-img` already carries `border-radius: var(--rl)` and `overflow:
   hidden`, so the *container* was never the problem. It is `aspect-ratio: 4/3`
   and the catalogue photograph does not fill it, so the container clipped the
   top two corners while the bottom two stayed square — the image's own corners,
   sitting inside the box with the dark panel showing beneath them. That is the
   asymmetry the 14.08 feedback marked.

   The radius therefore belongs on the image, not on another wrapper. Woo nests
   the photo two levels down and the zoom link in between would otherwise paint
   square corners over a rounded child, so both get it. */
.pd-main-img .woocommerce-product-gallery__image,
.pd-main-img .woocommerce-product-gallery__image > a {
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.pd-main-img .woocommerce-product-gallery__image img,
.pd-main-img .woocommerce-product-gallery__wrapper img {
	border-radius: var(--radius-lg);
}

/* ──────── 10. Related products: footers on one line ────────
   The reference's cards align only because its mock product names are all about
   the same length. Real titles run from 40 to 120 characters, so the button row
   landed at a different height on every card.

   The feedback asked for a blank line under the short ones; stretching the card
   and pinning the footer does the same thing for any length, and does not
   depend on guessing how many lines are missing. */
.pd-related-grid .pcard {
	display: flex;
	flex-direction: column;
}

.pd-related-grid .pcard-body {
	flex: 1;
}

.pd-related-grid .pcard-actions {
	margin-top: auto;
}

/* `.pcard` clips with `overflow: hidden`, but the image well is a flex child
   with its own background, and Safari paints that outside the parent's radius.
   Inheriting the radius makes the corner round in every engine. */
.pd-related-grid .pcard-img {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

/* ──────── 11. Info panel ─ the reference's right-hand column ────────
   Four places where the built panel had drifted from `mechanc-complete.html`.
   Each one is here rather than in the design system because the drift comes
   from markup the design system never sees: an Elementor container, a plugin
   button, or a WooCommerce form control. */

/* 11a. Availability row.
   The reference separates "In Stock" from the lead time with `gap: 16px` and a
   dim `|`. `.pd-meta-row` is an Elementor container, which supplies no gap of
   its own, so the two headings rendered as one run-on string. */
.pd-meta-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Both children are Elementor heading widgets, i.e. block-level wrappers. A
   `::before` on one of them would be a block box on its own line, so the widget
   has to become a flex line of its own before the separator can sit beside the
   text. */
.pd-meta-row .pd-lead {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pd-meta-row .pd-lead::before {
	content: '|';
	color: var(--text-muted);
}

/* 11b. Quick-spec chips.
   The reference's chip is `.pc-tag`: a cyan-tinted pill, not the outlined grey
   box this had become. Same padding and type, different surface.

   Scoped to `.pd-pill-row` to match `elementor-bridge.css`, which styles these
   at (0,2,0) — a bare `.spec-pill` here would be outranked whatever the load
   order, and silently do nothing. */
.pd-pill-row .spec-pill {
	padding: 3px 9px;
	border-radius: 12px;
	background: rgba(0, 207, 255, 0.07);
	border: 1px solid rgba(0, 207, 255, 0.15);
	color: var(--accent-cyan);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pd-pill-row .spec-pill:hover {
	background: rgba(0, 207, 255, 0.12);
	border-color: var(--border-accent);
	color: var(--accent-cyan);
}

/* 11c. Quantity stepper.
   `.qty-input` is declared transparent in the design system, but it is also an
   `input[type=number]` inside a WooCommerce product form, and both Woo and the
   Elementor kit paint form fields white at a specificity a bare class cannot
   reach. Naming the element and the container wins without `!important`. */
.pd-quote-wrap input.qty-input,
.pd-quote-wrap .qty-selector input.qty-input {
	background: transparent;
	box-shadow: none;
	border: none;
	border-left: 1px solid var(--border);
	border-right: 1px solid var(--border);
	border-radius: 0;
	color: var(--text-primary);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	width: 52px;
	height: 36px;
	padding: 0;
	text-align: center;
}

.pd-quote-wrap input.qty-input:focus {
	outline: none;
	background: transparent;
	border-color: var(--border-accent);
}

.pd-quote-wrap .qty-selector button.qty-btn {
	background: var(--bg-deep);
	color: var(--text-secondary);
}

.pd-quote-wrap .qty-selector button.qty-btn:hover {
	background: var(--border-accent);
	color: var(--text-primary);
}

/* 11d. Add to Quote label colour.
   The reference puts black text on the cyan→blue gradient — white loses
   contrast against the cyan end of it. `color: #000` is already declared in §7
   above, but YITH forces its own colour with `!important`, so that declaration
   never applied. The override is not here: it is the
   `--ywraq_layout_button_*` block in product-archive.css, which hands this
   container the palette the plugin then reads. Keeping the two in one place
   matters more than keeping them near what they style — they only make sense
   read together. */
.pd-quote-wrap .add-request-quote-button:hover {
	box-shadow: 0 8px 28px rgba(0, 207, 255, 0.3);
}


/* ──────── 12. Dimensioned drawing ────────
   The well the reference puts under the Dimensions table. Rendered only when
   the product carries a `technical_drawing`, so a product without one looks
   exactly as it did before rather than showing an empty frame.

   The panel is a token surface rather than white: the reference's drawing is a
   line schematic that reads on the dark ground. A drawing supplied as
   black-on-white will need its own plate — see the note to the client. */
.pd-drawing {
	margin: 16px 0 0;
	padding: 16px;
	background: var(--bg-deep);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-align: center;
}

.pd-drawing img {
	display: block;
	max-width: 100%;
	/* SVGs usually store no intrinsic size, so a width has to come from here
	   or the image collapses. `height: auto` keeps a raster drawing's ratio. */
	width: auto;
	height: auto;
	margin: 0 auto;
}

.pd-drawing figcaption {
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

/* ──────── 13. Product-page consistency across the templates (18.08 round) ────────
   The six `product` Theme Builder templates (2123–2128) are structurally
   identical — same containers, same classes, same order, verified against
   `_elementor_data`. They differ only in which widgets carry per-widget
   settings, and only 2123 (RF Connectors) was ever styled that way. On the
   other five the same widgets fell through to Elementor's global widget
   defaults, which is the 18.08 feedback's "design difference between the
   connector product pages and all the other product pages".

   Corrected in CSS rather than by copying settings onto five more templates:
   that leaves the client's own Elementor work untouched, and makes a seventh
   template correct the day it is created. Every value below is 2123's, read
   from uploads/elementor/css/post-2123.css. */

/* 13a. The small upper title.
   Elementor prints `.elementor-widget-text-editor { font: 15px Barlow … }` in a
   <style> block that lands after every theme stylesheet, so the design system's
   bare `.pd-brand` (0,1,0) never won — the line rendered at body size in the
   body face, which is the "too big, and the font is different" in the feedback.
   `.mc-typo` is already on the widget, so pairing the two reaches (0,2,0)
   without inventing markup. 2123 keeps its own (0,3,0) rules; same values. */
.pd-brand.mc-typo {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.8em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-cyan);
}

/* No hover effect on the category link. The underline is part of the design —
   design-system.css sets it and the reference shows it — so only the colour
   swap had to go, and that came from `.elementor-kit-8 a:hover` at (0,2,1).
   Three classes clears it without !important. */
.pd-brand.mc-typo a,
.pd-brand.mc-typo a:hover,
.pd-brand.mc-typo a:focus {
	color: var(--accent-cyan);
	text-decoration: underline;
}

/* 13b. Space between the product title and the part number.
   2123 gave its title widget a 10px bottom margin; the other templates gave
   theirs nothing, and Elementor zeroes widget margins inside a container
   (`.e-con .elementor-widget.elementor-widget { margin-block-end: 0 }`), so the
   part-number box sat flush against the last line of the title.

   The gap is put on the part-number container instead of on the title, so it is
   one number for every template. The title's own margin is zeroed at (0,3,0),
   which ties 2123's per-widget rule and wins on load order — product-single.css
   is enqueued after the template's generated CSS. */
.elementor .pd-title.mc-typo {
	margin-block-end: 0;
}

.e-con.pd-pn {
	margin-block-start: 22px;
}

/* 13c. Lead time and the specifications heading.
   Both widgets on 2123 carry a tablet and a mobile font size (32px and 28px)
   that nothing in the design asks for — an accidental responsive override in
   the editor. "LEAD TIME: 3–5 DAYS (STANDARD)" rendered larger than the product
   title itself on a phone.

   Restating the intended size outside a media query fixes both breakpoints at
   once: media queries add no specificity, so an unconditional rule that ties on
   specificity and sits later in the cascade wins at every width. Elementor's
   generated selector is `.elementor-2123 .elementor-element.elementor-element-
   2c1641b .elementor-heading-title` — four classes, not three, because two of
   them are on the same element — so the leading `.elementor` here is what makes
   the count match. The values are 2123's own desktop settings, so desktop is
   unchanged. */
.elementor .pd-lead.mc-typo .elementor-heading-title {
	color: var(--text-secondary);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	line-height: 1.8em;
}

.elementor .pd-specs-title.mc-typo .elementor-heading-title {
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1em;
}