/**
 * Mechanc — responsive corrections.
 *
 * The mockups already ship most of the small-screen work: design-system.css
 * carries the breakpoints from mechanc-complete.html, and elementor-bridge.css
 * restates each of them with `.e-con` attached, because a media query adds no
 * specificity and Elementor's `.e-con { display: flex }` would otherwise tie
 * and win on load order. Verified across the homepage, the archives and the
 * single-product template: every designed grid already collapses to one column
 * by 390px, and no page scrolls horizontally.
 *
 * What was left is in here — the places where real content (long breadcrumb
 * trails, long category names, real part numbers) behaves differently from the
 * mockup's sample text.
 *
 * Hand-written, like light-theme.css. Loaded after every other component sheet
 * and before light-theme.css, so it can correct any of them and still be
 * corrected by the light palette.
 */

/* ──────── 1. Breadcrumbs ────────
   `.breadcrumb-inner` is a wrapping flex row, which is right, but nothing
   stopped a single crumb from wrapping inside itself. "RF Connectors" broke
   after "RF", and with four crumbs the trail read as four ragged columns
   rather than one line of text. Wrapping belongs between crumbs, never inside
   a label — the separator glyph has to stay with the crumb before it too. */
@media (max-width: 767px) {
	/* The class is on two nested elements — the Elementor container and the
	   <nav> the shortcode prints inside it — and only the outer one was a
	   wrapping flex. The inner row is where the crumbs actually live, so
	   without this the trail overflowed the container instead of wrapping. */
	.breadcrumb-inner {
		flex-wrap: wrap;
		row-gap: 2px;
		font-size: 11px;
	}

	.breadcrumb-inner .bc-link,
	.breadcrumb-inner .bc-current,
	.breadcrumb-inner .bc-sep {
		white-space: nowrap;
	}
}


/* ──────── 2. Availability row on a phone ────────
   product-single.css §11a gives `.pd-meta-row` a 16px gap and hangs a dim `|`
   off `.pd-lead::before`, which reads correctly while "In Stock" and the lead
   time share a line. At 390px they never do — the lead time is a full sentence
   — so the separator ended up alone at the start of the second line, pointing
   at nothing. Drop it once the row has stacked and tighten the gap. */
@media (max-width: 767px) {
	.pd-meta-row {
		gap: 6px 12px;
	}

	.pd-meta-row .pd-lead::before {
		display: none;
	}
}


/* ──────── 3. Category pills in the archive hero ────────
   Real series names ("2.92mm Adapters", "NMD Adapters") are long enough that
   at the design's pill size only one fits per line below ~480px, so eight of
   them became eight rows of mostly empty space. A smaller pill fits two per
   line at 390px and the row reads as a row again. Type stays monospace and
   uppercase; only the scale changes. */
@media (max-width: 480px) {
	.cat-hero-tags .cat-hero-tag .elementor-button,
	.cat-hero-tags.mc-btns a {
		font-size: 10px;
		padding: 7px 10px;
	}
}


/* ──────── 4. Hero stat cards ────────
   design-system.css drops `min-width` on `.hero-stat-card` at 900px so the
   three cards can stack. They do, but each one then shrinks to its own content
   — 188px, 175px, 181px — and the column looked accidental rather than
   stacked. One width for all three once they are on their own lines. */
@media (max-width: 640px) {
	.e-con.hero-stat-card {
		width: 100%;
	}
}