/* ============================================================================
   MECHANC — ELEMENTOR BRIDGE
   ----------------------------------------------------------------------------
   design-system.css styles the mockup's own markup (.stat-number, .btn-primary
   as an <a>, and so on). Elementor widgets emit their own markup instead, so a
   design class lands on the widget WRAPPER while the visible element sits
   inside it.

   This file maps Elementor's markup onto the design system. It is the only
   place that should know about .elementor-* class names, so a change in
   Elementor's output is a one-file fix.

   Loads after design-system.css — see mechanc_enqueue_styles() in functions.php.
   ============================================================================ */


/* --- Heading widget -------------------------------------------------------
   Design classes (.hero-title, .val, .stat-sub …) sit on the wrapper. Reset the
   inner title so the wrapper's typography inherits down instead of Elementor's
   defaults winning. Inline children like .hero-title .accent keep matching,
   because the wrapper is still an ancestor.

   Scoped to `.mc-typo` (added by mc_heading() whenever a design class is set).
   A blanket rule would also strip the Global Kit from plain headings the client
   adds later. Three classes are needed to outrank Elementor's page CSS, which
   emits `.elementor-widget-heading .elementor-heading-title` for the Primary
   global typography and loads after the child theme.                          */
.elementor-widget.mc-typo .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
	margin: 0;
}

/* The gradient word in the H1 must not inherit the reset above. */
.hero-title .accent,
.hero-title .acc {
	-webkit-text-fill-color: transparent;
}


/* --- Button widget --------------------------------------------------------
   .btn-primary / .btn-secondary land on the wrapper <div>; the real link is
   .elementor-button inside it. Keep the wrapper's background, border, radius
   and hover, but move padding onto the anchor so the whole painted area is
   clickable rather than just the text.                                       */
.elementor-widget.mc-btn {
	padding: 0;
}

/* Elementor styles its button via `.elementor-widget-button .elementor-button`,
   which ties this file on specificity and wins on load order — that is what
   painted the default accent colour over the design gradient. Adding the widget
   class here outranks it without resorting to !important. */
.elementor-widget.mc-btn > .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: inherit;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
}

.elementor-widget.btn-primary > .elementor-button {
	padding: 13px 26px;
}

.elementor-widget.btn-secondary > .elementor-button {
	padding: 12px 24px;
}


/* --- Layout: let the design system win over Elementor's container defaults ---
   Every `.e-con` carries `display:flex` from Elementor. Where the mockup uses a
   different layout the design rule ties on specificity, so restate it here with
   the .e-con class attached to outrank it.                                    */
.e-con.hero-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

@media (max-width: 900px) {
	.e-con.hero-content {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* Horizontal rows — Elementor containers default to column. */
.e-con.hero-ctas,
.e-con.hero-specs,
.e-con.spec-badge {
	flex-direction: row;
}

/* Elementor wraps icon + text; keep them on one line with the design's gap. */
.btn-primary .elementor-button-content-wrapper,
.btn-secondary .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* Size only — NOT fill. These arrows are `fill="none" stroke="currentColor"`
   in the exported set, so forcing a fill here filled them solid. The fill is
   decided further down by the attribute-matched rules, which read what each
   SVG actually declares. (This rule previously set `fill: currentColor` and
   only looked right because that later rule ties it on specificity and wins on
   source order — a trap for whoever reorders this file next.) */
.btn-primary .elementor-button-icon svg,
.btn-secondary .elementor-button-icon svg {
	width: 15px;
	height: 15px;
}


/* --- Counter widget -------------------------------------------------------
   Elementor renders the title BEFORE the number; the mockup shows the number
   first (.stat-number then .stat-label). Reorder rather than restructure, so
   the widget stays a normal editable Counter in the editor.

   Values mirror .stat-number / .stat-label in design-system.css.             */
.hero-stat-card .elementor-counter {
	display: flex;
	flex-direction: column;
}

.hero-stat-card .elementor-counter-number-wrapper {
	order: -1;
	/* The Counter widget centres its figure; the mockup left-aligns it. */
	justify-content: flex-start;
	text-align: left;
	font-family: var(--font-head);
	font-size: 36px;
	font-weight: 900;
	color: var(--text-primary);
	line-height: 1;
	margin-bottom: 4px;
}

.hero-stat-card .elementor-counter-title {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--text-secondary);
	letter-spacing: 0.02em;
	text-align: left;
}


/* --- Containers -----------------------------------------------------------
   Elementor gives every container `width:100%` via --width. The mockup's
   inline-level pieces must shrink-wrap instead.                              */
.hero-eyebrow,
.spec-badge,
.spec-divider {
	width: auto;
	--width: auto;
}

.hero-eyebrow > .elementor-widget,
.spec-badge > .elementor-widget {
	width: auto;
}

/* .spec-divider is a 1px hairline. Elementor gives every container 10px of
   default padding, which inflated it into a 20x20 grey square. Pin every axis. */
.e-con.spec-divider {
	flex: 0 0 1px;
	width: 1px;
	min-width: 1px;
	max-width: 1px;
	height: 20px;
	min-height: 20px;
	padding: 0;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

/* .hero-gradient is an empty decorative container. design-system.css already
   positions it (absolute, inset 0, z-index 1) and paints the gradient; it only
   needs Elementor's default padding removed so it cannot affect layout.
   The <canvas> is injected as the first child of .hero by mechanc.js, so the
   mockup's own #satellite-canvas rule positions it with no bridging needed. */
.e-con.hero-gradient {
	padding: 0;
	pointer-events: none;
}


/* --- Hero stat cards -------------------------------------------------------
   The mockup right-aligns the cards and lets them size to their `min-width:220px`
   so the satellite canvas stays visible between the columns. Elementor gives
   every container `width:100%`, which stretched them across the column and hid
   the Earth. Let them shrink-wrap instead.                                    */
.e-con.hero-right {
	align-items: flex-end;
}

.e-con.hero-stat-card {
	width: auto;
	--width: auto;
}


/* --- Grid layouts ----------------------------------------------------------
   design-system.css lays these out with CSS Grid, but Elementor forces
   `display:flex` on every .e-con and ties on specificity. Restate each grid
   with .e-con attached so the design wins.

   Values track mechanc-complete.html, which is where the homepage sections
   below the hero now come from. They previously tracked the redesign pass, and
   because `.e-con.pillars-grid` outranks `.pillars-grid`, the stale copy here
   silently held the pillars at the redesign's four columns and 1px gap after
   the section was rebuilt for the complete pass's three columns and 20px gap.
   Anything added here has to be revisited when a section changes source.     */
.e-con.prod-grid,
.e-con.mkt-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.e-con.prod-grid { gap: 2px; }                    /* complete.html line 110 */
.e-con.mkt-grid  { gap: 14px; }                   /* complete.html line 137 */

.e-con.pillars-grid {                             /* complete.html line 1035 */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.e-con.about-inner {                              /* complete.html line 1075 */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.e-con.factory-stats {                            /* complete.html line 1089 */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.e-con.contact-inner {                            /* complete.html line 1157 */
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 60px;
	align-items: start;
}

@media (max-width: 1200px) {
	.e-con.prod-grid,
	.e-con.mkt-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.e-con.pillars-grid { grid-template-columns: repeat(2, 1fr); }
	.e-con.about-inner  { grid-template-columns: 1fr; gap: 48px; }
	.e-con.contact-inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.e-con.prod-grid,
	.e-con.mkt-grid,
	.e-con.pillars-grid,
	.e-con.factory-stats {
		grid-template-columns: 1fr;
	}
}


/* --- Elementor editor -------------------------------------------------------
   `.reveal` starts at opacity:0 and is revealed by an IntersectionObserver in
   mechanc.js. Inside the editor that observer either never fires or fires
   against the preview iframe's viewport, so most of the page looks empty and
   widgets cannot be found in the canvas. Show everything while editing — the
   animation still runs on the live front end.                                */
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal.reveal-delay-1,
body.elementor-editor-active .reveal.reveal-delay-2,
body.elementor-editor-active .reveal.reveal-delay-3,
body.elementor-editor-active .reveal.reveal-delay-4 {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Empty decorative containers (.hero-gradient, .about-visual-bg) have no
   content and are absolutely positioned, so they are impossible to select in
   the canvas. Give them a visible footprint while editing only. */
body.elementor-editor-active .hero-gradient,
body.elementor-editor-active .about-visual-bg {
	min-height: 40px;
	outline: 1px dashed rgba(0, 207, 255, 0.35);
	outline-offset: -1px;
}

/* The satellite canvas is injected by JS and is not part of the document the
   editor manages; keep it out of the way of click targets in the canvas. */
body.elementor-editor-active #satellite-canvas {
	opacity: 0.35;
	pointer-events: none;
}

/* Contact section: .contact-inner is a 1fr/1.4fr grid and the CF7 form body
   uses .form-grid as a two-column grid. Both need restating over .e-con. */
.e-con.contact-inner {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 60px;
	align-items: start;
}

@media (max-width: 900px) {
	.e-con.contact-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}


/* --- Icon Box: contact details ---------------------------------------------
   Icon Box treats its title as the prominent line, but .contact-detail inverts
   that: the label is a small muted mono caption and the VALUE is the prominent
   line. Map title -> .contact-detail-label and description -> .contact-detail-val
   so the widget stays a normal editable Icon Box.                            */
.contact-detail .elementor-icon-box-title,
.contact-detail .elementor-icon-box-title a {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 3px;
	line-height: 1.4;
}

.contact-detail .elementor-icon-box-description {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	line-height: 1.5;
}

/* Keep the icon at the mockup's 36px tile rather than Elementor's default. */
.contact-detail .elementor-icon-box-icon {
	flex-shrink: 0;
	margin-bottom: 0;
}

.contact-detail .elementor-icon {
	font-size: 16px;
	color: var(--accent-cyan);
}

/* In the editor Elementor prints widget defaults as INLINE <style> in the
   preview iframe rather than the external per-page file. Those rules tie the
   bridge on specificity, so counter labels and outline buttons reverted to
   Elementor's defaults while editing. Re-assert them with the editor body
   class attached — front-end output is unaffected. */
body.elementor-editor-active .hero-stat-card .elementor-counter-title {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--text-secondary);
	letter-spacing: 0.02em;
}

body.elementor-editor-active .elementor-widget.mc-btn > .elementor-button {
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}


/* ============================================================================
   SITE CHROME — header, topbar, footer
   ----------------------------------------------------------------------------
   Built as Header Footer Elementor templates by tools/build-header-footer.php.
   Elementor Pro's Theme Builder is locked without an active licence, and HFE is
   what the live site already uses (the `ehf-*` body classes in its page source).
   ============================================================================ */


/* --- Escaping the parent theme's own header ------------------------------
   `.site-header` and `.site-footer` are the mockup's class names AND hello
   -elementor's. Its theme.css centres both and caps them at the page width
   (1140px at ≥1200px), so the sticky bar rendered as a floating island two
   thirds of the way across the viewport. Ours are full-bleed bars.

   `:not(.dynamic-header)` in the theme's selector makes it (0,2,0); attaching
   .e-con ties it, and this file loads later — see mechanc_enqueue_styles().  */
.e-con.site-header,
.e-con.site-footer {
	max-width: none;
	margin-inline: 0;
}

/* Same collision one level down: the theme caps `.site-footer .footer-inner`
   at the page width too, and the design wants 1400. */
.site-footer .e-con.footer-inner {
	max-width: 1400px;
}


/* --- Content-width containers ---------------------------------------------
   Elementor gives every container `width: var(--width)` with --width:100%.
   The mockup's inline chrome elements — the logo lockup, a nav item, the cert
   pill — are content-sized, and at 100% each one eats its whole row.        */
.e-con.topbar-contacts,
.e-con.topbar-right,
.e-con.topbar-cert,
.e-con.nav-logo,
.e-con.nav-item,
.e-con.nav-right,
.e-con.footer-certs,
.e-con.footer-bottom-links {
	width: auto;
	--width: auto;
}

/* .main-nav is the one that should take the leftover room (flex:1 in the
   design), which a fixed 100% width prevents. */
.e-con.main-nav {
	width: auto;
	--width: auto;
	flex: 1;
}


/* --- Grid layouts ---------------------------------------------------------
   Every `.e-con` carries display:flex from Elementor at equal specificity and
   later in the cascade, so each grid from the design is restated with .e-con
   attached. Same reason as the homepage grids above.                        */
.e-con.mega-grid {
	display: grid;
	gap: 8px;
}

.e-con.footer-grid {
	display: grid;
}

.e-con.footer-links {
	display: flex;
	flex-direction: column;
}


/* --- Links ----------------------------------------------------------------
   Each nav/footer link is a Button widget: the design class lands on the
   wrapper, the real <a> is inside. `mc-btn` zeroes the wrapper padding so the
   whole painted area is clickable, which means the design's own padding has to
   be reasserted on the anchor — the same trade already made for .btn-primary.
   These are the only values duplicated out of design-system.css.            */
.elementor-widget.nav-link > .elementor-button {
	padding: 8px 14px;
}

.elementor-widget.mega-item > .elementor-button {
	padding: 8px 10px;
}

/* .mega-item:hover nudges the text right. The rule is on the wrapper in the
   design; move it to the anchor to survive the padding reset above. */
.elementor-widget.mega-item:hover > .elementor-button {
	padding-inline-start: 14px;
}

.elementor-widget.btn-quote > .elementor-button {
	padding: 9px 20px;
}

.elementor-widget.footer-link > .elementor-button {
	padding: 3px 0;
}

.elementor-widget.mobile-nav-item > .elementor-button {
	padding: 10px 0;
}

.elementor-widget.mobile-cta > .elementor-button {
	padding: 14px;
	justify-content: center;
}

/* Links with no padding of their own still need the flex reset so icon and
   text sit on one line. */
.topbar-contacts .elementor-widget.mc-btn > .elementor-button,
.elementor-widget.footer-bottom-link > .elementor-button {
	padding: 0;
}

/* Buttons are inline-block and centred by default; links stacked in a column
   are full-width rows aligned to the start. The main nav is excluded — its
   links sit side by side and must stay content-sized. */
.footer-links .elementor-widget.mc-btn,
.mobile-nav-section .elementor-widget.mc-btn {
	width: 100%;
	text-align: start;
}

.footer-links .elementor-widget.mc-btn > .elementor-button,
.mobile-nav-section .elementor-widget.mc-btn > .elementor-button {
	justify-content: flex-start;
}


/* --- Inherited colour ------------------------------------------------------
   The Global Kit emits its heading colour as
   `.elementor-kit-N .elementor-widget-heading .elementor-heading-title`,
   which ties the `mc-typo` reset above on specificity and loads after it. On
   the page sections that is harmless — every designed heading sets its own
   colour. In the chrome, several inherit from an ancestor instead
   (.logo-text from .nav-logo, the cert pill's label from .topbar-cert), and
   those came out accent-cyan. One extra class settles it.                   */
.site-header .elementor-widget.mc-typo .elementor-heading-title,
.site-footer .elementor-widget.mc-typo .elementor-heading-title,
.topbar .elementor-widget.mc-typo .elementor-heading-title {
	color: inherit;
}

/* The logo lockup is an <a> — the container carries the home link — so the
   Global Kit's link colour (`.elementor-kit-N a`, one class + one element)
   outranked the design's `.nav-logo`, turning the whole wordmark cyan instead
   of just its middle letter. Restated with .e-con, as with the layouts. */
.e-con.nav-logo {
	color: var(--text-primary);
}


/* --- Icons ----------------------------------------------------------------
   The mockup sizes these with width/height attributes on the inline <svg>.
   Elementor re-emits its own attributes, so the sizes live here.            */
.topbar-cert .elementor-icon svg {
	width: 10px;
	height: 10px;
}

/* The Icon widget colours its glyph from the Global Kit. The design's search
   control is an outline square whose glyph takes the bar's own text colour, so
   the icon has to inherit — one extra ancestor class to outrank the kit. The
   magnifier fills the box, as it does in the mockup. */
.nav-right .elementor-widget.btn-search .elementor-icon-wrapper,
.nav-right .elementor-widget.btn-search .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

.nav-right .elementor-widget.btn-search .elementor-icon svg {
	width: 100%;
	height: 100%;
}

.btn-quote .elementor-button-icon svg {
	width: 14px;
	height: 14px;
}

.nav-link .elementor-button-icon svg {
	width: 12px;
	height: 12px;
	transition: transform var(--transition);
}

.nav-item:hover > .nav-link .elementor-button-icon svg {
	transform: rotate(180deg);
}


/* --- Hamburger ------------------------------------------------------------
   The design targets `.hamburger span`. Elementor has no bare-span widget, so
   the bars are empty containers carrying `.hamburger-bar`.

   Both the button and its bars need Elementor's default 10px container padding
   removed, or the 2px hairlines inflate into 20x20 squares — the same trap as
   .spec-divider above. */
.e-con.hamburger,
.e-con.hamburger-bar {
	padding: 0;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

.e-con.hamburger-bar {
	width: 20px;
	height: 2px;
	min-height: 2px;
	background: var(--text-secondary);
	transition: all var(--transition);
	transform-origin: center;
}

.hamburger.open .hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.hamburger.open .hamburger-bar:nth-child(2) {
	opacity: 0;
}

.hamburger.open .hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}


/* --- Editing the header ---------------------------------------------------
   A mega menu is opacity:0 until its .nav-item is hovered, and the mobile menu
   is translated off-screen — both invisible and unselectable in the editor.
   Unfold them while editing so the client can actually reach the links.     */
body.elementor-editor-active .mega-menu,
body.elementor-editor-preview .mega-menu {
	position: static;
	width: auto;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

body.elementor-editor-active .mobile-menu,
body.elementor-editor-preview .mobile-menu {
	position: static;
	inset: auto;
	transform: none;
}


/* --- Responsive chrome ----------------------------------------------------
   A media query adds no specificity, so every `display:none` the mockup sets
   at ≤900px ties Elementor's `.e-con { display: flex }` and loses on load
   order — the desktop nav stayed on screen at 420px, stacked on top of the
   page title. Restate the breakpoint with .e-con or .elementor-widget
   attached. The hamburger needs the same treatment in reverse: `.e-con` makes
   it flex at every width, so hide it explicitly above the breakpoint.       */
.e-con.hamburger,
.e-con.mobile-menu {
	display: none;
}

@media (max-width: 900px) {
	.e-con.main-nav,
	.e-con.mega-menu,
	.nav-right .elementor-widget.btn-quote,
	.elementor-widget.btn-search {
		display: none;
	}

	.e-con.hamburger,
	.e-con.mobile-menu {
		display: flex;
	}

	/* The bars stack; Elementor's own flex-direction ties the design's and
	   loads later, which laid them out side by side. */
	.e-con.hamburger {
		flex-direction: column;
	}
}

@media (max-width: 640px) {
	/* The design drops the label with `.topbar-contacts span`, keeping the
	   icon. Every part of a Button widget is a span — content wrapper, icon
	   and text alike — so that rule erased the whole link. Hide only the
	   label and put the other two back. */
	.topbar-contacts .elementor-button-content-wrapper,
	.topbar-contacts .elementor-button-icon {
		display: inline-flex;
	}

	.topbar-contacts .elementor-button-text {
		display: none;
	}
}


/* --- Header navigation (Max Mega Menu) ------------------------------------
   The nav is a WordPress menu so the client can maintain it in Appearance →
   Menus. inc/nav-classes.php rewrites Max Mega Menu's markup to carry the
   design system's class names (.nav-item, .nav-link, .mega-menu, .mega-grid,
   .mega-item), so almost all of the styling already applies. What is left here
   is structural: the wrappers Elementor and the plugin add between .main-nav
   and the <ul>, and the list resets the design never needed because the mockup
   used <div>s.                                                              */
.main-nav .elementor-widget-shortcode,
.main-nav .elementor-shortcode,
.main-nav .mega-menu-wrap {
	width: 100%;
}

.main-nav ul.max-mega-menu {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav ul.max-mega-menu li {
	list-style: none;
	margin: 0;
}

/* The panel and its grids are <ul>s here, not <div>s. */
.main-nav .mega-menu,
.main-nav .mega-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav .mega-menu {
	/* .mega-menu in the design sets its own padding; restore it after the
	   list reset above, which has to zero padding to kill the bullet indent. */
	padding: 24px;
}

/* The design opens a panel on `.nav-item:hover`. Max Mega Menu also toggles
   `mega-toggle-on` for keyboard and touch, which must open it the same way. */
.main-nav .nav-item.mega-toggle-on > .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Column headings sit above their grid, so the second-level item is a block. */
.main-nav .mega-menu > li {
	margin-bottom: 20px;
}

.main-nav .mega-menu > li:last-child {
	margin-bottom: 0;
}

/* Panel width comes from the design's .products-mega / .markets-mega, which
   are not on this markup. Size by how many columns the grid actually has. */
.main-nav .mega-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.main-nav > .elementor-widget-shortcode .mega-menu,
.main-nav .elementor-widget-shortcode .mega-menu {
	width: 860px;
	max-width: 92vw;
}

/* The mockup's `.mega-item { white-space: nowrap }` assumed short invented
   labels ("SMA Connectors"). The real catalogue has names like "Ultra-Low-Loss
   Precision Test Cables - CFS Series", which overflowed the panel. Let them
   wrap, and pin the grid tracks so a long label cannot blow the column out. */
.main-nav .mega-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.main-nav .mega-item {
	white-space: normal;
	align-items: flex-start;
	line-height: 1.4;
}

/* The leading dot is vertically centred on a single line; nudge it onto the
   first line now that an item can be two lines tall. */
.main-nav .mega-item::before {
	margin-block-start: 6px;
}

/* Max Mega Menu ships its own hamburger. The header template has the mockup's
   one, wired to the off-canvas panel by mechanc.js. */
.main-nav .mega-menu-toggle {
	display: none !important;
}

/* The caret. The design rotates `.nav-link svg`; the plugin uses an empty
   span it paints with a font icon, so point the same behaviour at that. */
.main-nav .nav-link .mega-indicator::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-inline-start: 4px;
	border-inline: 4px solid transparent;
	border-block-start: 5px solid currentColor;
	transition: transform var(--transition);
}

.main-nav .nav-item:hover > .nav-link .mega-indicator::after {
	transform: rotate(180deg);
}

/* Third level. The mockup's panel is two levels deep — a column heading and a
   grid of links — but the real menu nests one deeper (Coaxial Cables →
   Precision Test → CFT Series), and gridding that level into four columns
   inside an already-narrow column shredded the labels. Render it as an
   indented list under its parent instead. */
.main-nav .mega-grid .mega-grid {
	display: block;
	padding-inline-start: 12px;
	margin-block-start: 4px;
	border-inline-start: 1px solid var(--border);
}

.main-nav .mega-grid .mega-grid .mega-item {
	font-size: 11px;
	color: var(--text-muted);
	padding-block: 5px;
}

.main-nav .mega-grid .mega-grid .mega-item:hover {
	color: var(--text-secondary);
}

/* The real Products panel is far taller than the mockup's invented one — four
   groups, 125 categories. Keep it inside the viewport rather than letting it
   run off the bottom of the screen. */
.main-nav .mega-menu {
	max-height: calc(100vh - var(--nav-h) - var(--topbar-h) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* A panel whose items are all plain links, with no column headings — Markets
   in the live menu. The design renders that as `.markets-mega` + `.mega-grid-2`
   (two columns, 560px); here the panel itself has to be the grid. */
.main-nav .mega-menu:not(:has(.mega-group-title)) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	width: 560px;
}

.main-nav .mega-menu:not(:has(.mega-group-title)) > li {
	margin-bottom: 0;
}


/* --- Menus rendered by [mechanc_menu] -------------------------------------
   The footer columns, the footer bottom bar and the mobile panel are all
   WordPress menus now (inc/menus.php). The shortcode already puts the design's
   class names on the <ul> and each <a>, so the design system styles them; what
   it cannot do is stop them being lists. `.mc-menu` is the marker it adds to
   every menu it renders.                                                    */
.mc-menu,
.mc-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-menu li {
	list-style: none;
	margin: 0;
}

/* The shortcode widget is a block between the container and the <ul>; without
   this the column's flex layout has a wrapper in the way. */
.footer-links,
.mobile-nav {
	width: 100%;
}

.elementor-widget-shortcode:has(> .mc-menu),
.elementor-shortcode:has(> .mc-menu) {
	display: contents;
}

/* Second-level items in the mobile panel — the mockup's `.mobile-nav-sub`. */
.mobile-nav .sub-menu .mobile-nav-item {
	font-size: 13px;
	padding-block: 7px;
	padding-inline-start: 16px;
	color: var(--text-muted);
}

/* These links are real <a> elements now, not Button widgets, so Elementor's
   Global Kit link colour (`.elementor-kit-N a`, one class + one element)
   outranks the design's single-class rule and painted every footer and mobile
   link accent-cyan. Same collision as .nav-logo above; same fix — restate with
   one more class so the design wins. The values mirror design-system.css. */
.mc-menu .footer-link {
	color: var(--text-secondary);
}

.mc-menu .footer-link:hover {
	color: var(--text-primary);
}

.mc-menu .footer-bottom-link {
	color: var(--text-muted);
}

.mc-menu .footer-bottom-link:hover {
	color: var(--text-secondary);
}

.mc-menu .mobile-nav-item {
	color: var(--text-secondary);
}

.mc-menu .mobile-nav-item:hover {
	color: var(--text-primary);
}


/* --- Homepage section headers ---------------------------------------------
   complete.html styles three wrappers with INLINE styles rather than classes,
   so build_ds.py never sees them — it only reads the <style> block. The
   Elementor builders give those wrappers a class each and the values live
   here, which is the one case where the bridge legitimately owns design
   values: there is no rule in design-system.css to defer to.

   Sources: mechanc-complete.html lines 1836 (.section-head), 1885-1888
   (.pillars-head), 2045 (.about-ctas).                                      */
.e-con.section-head {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.e-con.section-head .section-desc {
	max-width: 540px;
}

/* The title block is a container, so Elementor gives it width:100% and the
   button — the row's second child — wrapped onto a line of its own. Let it
   take the space it needs and no more. */
.e-con.section-head > .e-con {
	width: auto;
	--width: auto;
	flex: 1 1 auto;
}

.e-con.pillars-head {
	text-align: center;
	margin-bottom: 64px;
	align-items: center;
}

.pillars-head .section-title {
	font-size: clamp(36px, 5vw, 64px);
}

.pillars-head .section-desc {
	max-width: 580px;
	margin-inline: auto;
}

.e-con.about-ctas {
	display: flex;
	flex-direction: row;
	gap: 12px;
	flex-wrap: wrap;
	width: auto;
	--width: auto;
}


/* --- About section: Counter and Icon Box ----------------------------------
   Same job as the .hero-stat-card and .contact-detail blocks above. Elementor's
   Counter and Icon Box bring their own type scale, which the Global Kit then
   colours, so without this the factory figures and the feature titles came out
   as huge accent-cyan headlines instead of the mockup's small labels.

   Values mirror .factory-stat-* and .about-feature-* in design-system.css
   (complete.html lines 1089-1110).                                          */
.factory-stat .elementor-counter {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.factory-stat .elementor-counter-number-wrapper {
	/* Elementor renders the title BEFORE the number; the mockup shows the
	   figure first, then its label. Same reorder as .hero-stat-card. */
	order: -1;
	font-family: var(--font-head);
	font-size: 40px;
	font-weight: 900;
	line-height: 1;
	/* The mockup's "+" sits outside the animated <span class="counter">, so the
	   figure is cyan and the suffix takes the wrapper's own colour. */
	color: var(--text-primary);
	justify-content: center;
}

.factory-stat .elementor-counter-number {
	color: var(--accent-cyan);
}

.factory-stat .elementor-counter-title {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--text-secondary);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	margin-top: 6px;
}

.about-feature .elementor-icon-box-title,
.about-feature .elementor-icon-box-title a {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	margin-bottom: 3px;
}

.about-feature .elementor-icon-box-description {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.5;
}

/* .about-feature-icon is a 32px tile; Elementor's icon box would let it grow. */
.about-feature .elementor-icon-box-icon {
	flex-shrink: 0;
	margin-bottom: 0;
}

.about-feature .elementor-icon {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: rgba(0, 207, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--accent-cyan);
}

.about-feature .elementor-icon svg {
	width: 16px;
	height: 16px;
}

/* The visual panel is a fixed-ratio card; its stats sit on top of the wash. */
.e-con.about-visual-bg {
	padding: 0;
	pointer-events: none;
}


/* ============================================================================
   INNER PAGES
   ----------------------------------------------------------------------------
   Built by tools/build-inner-pages.php from mechanc-complete.html.

   complete.html leans on INLINE styles for its section variants — the deep
   background, the top hairline, the centred header, the narrow measure. Those
   never reach design-system.css, which is generated from the <style> block
   only, so the builders give each one a class and the values live here. Same
   arrangement as .section-head / .pillars-head on the homepage.
   ============================================================================ */

/* Section variants. `.section` itself is in the design system; these are the
   per-instance inline styles from the mockup. */
.e-con.section-deep {
	background: var(--bg-deep);
	border-top: 1px solid var(--border);
}

.e-con.section-ruled {
	border-top: 1px solid var(--border);
}

.e-con.section-inner-narrow {
	max-width: 900px;
}

.e-con.section-head-centred {
	text-align: center;
	align-items: center;
	margin-bottom: 40px;
}

.section-head-centred .section-desc {
	margin-inline: auto;
}


/* --- Breadcrumb -----------------------------------------------------------
   .bc-link is a Button widget, so the anchor needs the padding reset that
   every other designed link gets. .bc-current is the unlinked last crumb,
   which the mockup styles with an inline colour. */
.elementor-widget.bc-link > .elementor-button {
	padding: 0;
}

.breadcrumb .bc-current {
	color: var(--text-secondary);
}

.e-con.breadcrumb-inner {
	width: auto;
	--width: auto;
}


/* --- About: hero ----------------------------------------------------------
   The heading is three stacked lines with the third gradient-filled; the
   design system already paints `.acc`, it just needs the size the mockup sets
   inline. */
body .elementor-widget.about-hero-title {
	font-size: clamp(36px, 5vw, 64px);
	margin-bottom: 16px;
}

.about-hero-title .acc {
	background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.e-con.about-hero-ctas {
	display: flex;
	flex-direction: row;
	gap: 12px;
	flex-wrap: wrap;
	width: auto;
	--width: auto;
}

.about-hero .section-desc {
	max-width: 520px;
	margin-bottom: 32px;
}

/* The hero's two columns: copy on the left, the stat grid on the right. */
.e-con.about-hero-inner > .e-con {
	width: auto;
	--width: auto;
}


/* --- About: stat cards ----------------------------------------------------
   Counter again, same treatment as .factory-stat on the homepage: figure
   above label, design's own type scale rather than Elementor's. */
.about-stat-card .elementor-counter {
	display: flex;
	flex-direction: column;
}

.about-stat-card .elementor-counter-number-wrapper {
	order: -1;
	font-family: var(--font-head);
	font-size: 44px;
	font-weight: 900;
	color: var(--text-primary);
	line-height: 1;
	justify-content: center;
}

.about-stat-card .elementor-counter-title {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--text-secondary);
	text-transform: none;
	letter-spacing: 0;
	margin-top: 6px;
}


/* --- About: values grid and timeline -------------------------------------- */
.e-con.about-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}

@media (max-width: 1100px) {
	.e-con.about-values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.e-con.about-values-grid { grid-template-columns: 1fr; }
	.e-con.about-stat-grid   { grid-template-columns: 1fr; }
}

/* .tl-dot is a decorative marker positioned on the rail; like .spec-divider it
   must not pick up Elementor's default container padding. */
.e-con.tl-dot {
	padding: 0;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

.e-con.timeline,
.e-con.tl-item {
	width: 100%;
}

/* .about-hero-inner and .about-stat-grid are grids in the design; Elementor's
   flex on .e-con ties them and loads later. */
.e-con.about-hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	max-width: 1200px;
	margin-inline: auto;
}

.e-con.about-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 900px) {
	.e-con.about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
}


/* --- Contact page ---------------------------------------------------------
   The section wrapper and the response-time note are inline-styled in the
   mockup (complete.html 3885 and 3904), so their values live here.          */
.e-con.contact-page-section {
	padding: 60px 24px 80px;
	background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-void) 100%);
}

.e-con.contact-page-layout {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 60px;
	align-items: start;
	max-width: 1200px;
	margin-inline: auto;
	padding: 60px 24px;
}

@media (max-width: 1100px) {
	.e-con.contact-page-layout { grid-template-columns: 1fr; gap: 40px; }
}

body .elementor-widget.contact-page-title {
	font-size: clamp(32px, 4.5vw, 56px);
	margin-bottom: 20px;
}

.contact-info-block .section-desc {
	margin-bottom: 36px;
}

.e-con.contact-note {
	margin-top: 28px;
	padding: 20px;
	background: rgba(0, 207, 255, 0.04);
	border: 1px solid var(--border-accent);
	border-radius: var(--radius-lg);
}

.contact-note-eyebrow {
	font-size: 9px;
	margin-bottom: 10px;
}

.contact-note-body {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.7;
}

.contact-note-body strong {
	color: var(--text-primary);
}

/* .contact-detail-row inverts Icon Box the same way .contact-detail does on
   the homepage: title -> .cd-label (small mono caption), description ->
   .cd-val (the prominent line). */
.contact-detail-row .elementor-icon-box-title,
.contact-detail-row .elementor-icon-box-title a {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 3px;
	line-height: 1.4;
}

.contact-detail-row .elementor-icon-box-description {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	line-height: 1.5;
}

.contact-detail-row .elementor-icon-box-icon {
	flex-shrink: 0;
	margin-bottom: 0;
}

.contact-detail-row .elementor-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius);
	background: rgba(0, 207, 255, 0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--accent-cyan);
}

.contact-detail-row .elementor-icon svg {
	width: 16px;
	height: 16px;
}

/* WIDGET-WRAPPER MARGINS — read this before adding a margin to a widget.
   -------------------------------------------------------------------------
   tools/build-global-kit.php sets the kit's `space_between_widgets` to 0 on
   purpose, so that the design system's own margins control spacing instead of
   Elementor adding 20px between every widget. Elementor implements that as

       .elementor-kit-N .elementor-widget:not(:last-child) { margin-block-end: 0 }

   which is (0,3,0) and is emitted in the kit's CSS file, loaded after this one.
   So a design class setting its own margin on a widget wrapper loses twice
   over: `.form-title` (0,1,0) and even `.elementor-widget.form-title` (0,3,0,
   tie, later rule wins) are both discarded. The `body` prefix takes these to
   (0,3,1) which clears it without !important.

   Symptom when this is wrong: headings sit directly on top of whatever
   follows — the CF7 form title on the first label, the Resources hero title on
   its description.

   THE FIX IS NOT MORE SPECIFICITY. Even `body .elementor-widget.X` is only
   (0,2,1) and still loses. Where the spacing is a simple gap between siblings,
   set it as the CONTAINER's flex_gap in the builder instead — structural, set
   in Elementor, editable by the client, and not in a cascade fight at all.
   That is what mc_stack()'s $extra argument is for, and it is how the form
   cards, the Resources hero and the resource cards space themselves.

   The few rules left below are genuine per-element margins with no sibling to
   gap against. */


/* --- Resources page -------------------------------------------------------
   The most inline-styled page in the mockup — .page-hero has no rule in
   design-system.css at all, and the cards are styled entirely by attribute.
   Values from complete.html lines 3752-3776.                                */
.e-con.page-hero {
	background: linear-gradient(135deg, var(--bg-void) 0%, rgba(0, 207, 255, 0.05) 100%);
	padding: 80px 24px;
	text-align: center;
	align-items: center;
}


.page-hero-desc {
	font-size: 16px;
	color: var(--text-secondary);
	max-width: 600px;
	margin-inline: auto;
}

.e-con.resources-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.e-con.resource-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 24px;
}




.elementor-widget.resource-link {
	width: auto;
}

.elementor-widget.resource-link > .elementor-button {
	padding: 0;
	color: var(--accent-cyan);
	font-weight: 600;
	text-decoration: none;
}


/* --- Request a Quote page -------------------------------------------------
   The section padding is inline in the mockup (line 3956); everything else is
   already in design-system.css and only needs the grid restating over
   Elementor's flex.                                                          */
.e-con.quote-page-section {
	padding: 40px 24px 80px;
}

.e-con.quote-page-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	align-items: start;
	max-width: 1100px;
	margin-inline: auto;
	padding: 60px 24px;
}

@media (max-width: 1100px) {
	.e-con.quote-page-inner { grid-template-columns: 1fr; }
	.e-con.quote-form-card  { position: static; }
}

body .elementor-widget.quote-page-title {
	font-size: clamp(24px, 3.5vw, 40px);
	margin-bottom: 24px;
}

/* .quote-list-card uses overflow:hidden to clip the header rule to its radius,
   so its children must not carry Elementor's default container padding. */
.e-con.quote-list-card {
	padding: 0;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

.e-con.qlc-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
}

.e-con.ql-empty {
	padding: 40px 20px;
	text-align: center;
	align-items: center;
	color: var(--text-muted);
	font-size: 13px;
}

.ql-empty .elementor-icon {
	color: var(--text-muted);
	font-size: 32px;
}

.ql-empty .elementor-icon svg {
	width: 32px;
	height: 32px;
}

body .elementor-widget.ql-empty-hint {
	font-size: 11px;
	margin-top: 4px;
}

body .elementor-widget.ql-empty-cta {
	margin-top: 16px;
	width: auto;
}

.elementor-widget.ql-empty-cta > .elementor-button {
	font-size: 11px;
	padding: 8px 20px;
}


/* Typography for the Resources page and the two form titles. These were
   briefly merged with the margin rules above and went out together when the
   margins moved to container gaps — hence the separate block: type here,
   spacing in the builder. */
.page-hero-title {
	font-size: 48px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.15;
}

.resource-icon {
	font-size: 24px;
	line-height: 1;
}

.resource-title {
	color: var(--text-primary);
	font-size: 18px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.resource-desc {
	color: var(--text-secondary);
	font-size: 14px;
}


/* --- Market pages ---------------------------------------------------------
   Built by tools/pages/market.php. The KPI row and a couple of measures are
   inline in the mockup (complete.html 2660); the rest is restating grids over
   Elementor's flex.                                                          */
.e-con.mkt-hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.e-con.mkt-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	max-width: 1400px;
	margin-inline: auto;
}

.e-con.mkt-hero-ctas {
	display: flex;
	flex-direction: row;
	gap: 10px;
	flex-wrap: wrap;
	width: auto;
	--width: auto;
}

.mkt-rf-desc {
	max-width: 600px;
}

.e-con.tech-specs-grid,
.e-con.use-cases,
.e-con.rec-grid {
	display: grid;
}

.e-con.tech-specs-grid { grid-template-columns: repeat(3, 1fr); }
.e-con.use-cases       { grid-template-columns: repeat(3, 1fr); }
.e-con.rec-grid        { grid-template-columns: repeat(3, 1fr); }

.rec-section-title {
	font-size: clamp(22px, 2.5vw, 34px);
}

/* The use-case illustration sits in a fixed-ratio panel with its label pinned
   to a corner; the SVG fills the panel. */
.e-con.uc-img {
	position: relative;
	align-items: center;
	justify-content: center;
}

.uc-img .elementor-icon {
	color: var(--accent-cyan);
}

.uc-img .elementor-icon svg {
	width: 200px;
	height: 140px;
	max-width: 100%;
}

@media (max-width: 1200px) {
	.e-con.tech-specs-grid,
	.e-con.use-cases,
	.e-con.rec-grid   { grid-template-columns: repeat(2, 1fr); }
	.e-con.mkt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.e-con.mkt-hero-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
	.e-con.tech-specs-grid,
	.e-con.use-cases,
	.e-con.rec-grid,
	.e-con.mkt-kpi-grid { grid-template-columns: 1fr; }
}

/* Grid cells stretch, so cards in a row share the tallest height. Spread the
   children so every "View Products" link sits on the same baseline instead of
   floating directly under a short description. */
.e-con.rec-card {
	justify-content: space-between;
}


/* --- SVG icons: outline vs filled -----------------------------------------
   Elementor's Icon and Icon Box widgets emit, in the per-page CSS:

       .elementor-widget-icon.elementor-view-default .elementor-icon svg
           { fill: var(--e-global-color-primary) }

   A CSS declaration always beats an SVG presentation attribute, so that rule
   overrode `fill="none"` on every outline icon in the exported set and filled
   them solid — the star, shield, globe and monitor on About, the market and
   pillar glyphs, the contact icons. In the mockup they are all strokes.

   The exported icons are a mix: most are `fill="none" stroke="currentColor"`,
   but a few are genuinely solid (topbar-cert, the caret, the envelope). A
   blanket `fill: none` would break those, so each case is matched on the
   attribute the file itself declares — the SVG stays the source of truth.

   Specificity: Elementor's selector is (0,3,1) and its per-page CSS loads
   after this file, so these carry the view class as well to reach (0,4,1). */
.elementor-widget-icon.elementor-view-default .elementor-icon svg[fill="none"],
.elementor-widget-icon.elementor-view-framed .elementor-icon svg[fill="none"],
.elementor-widget-icon.elementor-view-stacked .elementor-icon svg[fill="none"],
.elementor-widget-icon-box.elementor-view-default .elementor-icon svg[fill="none"],
.elementor-widget-icon-box.elementor-view-framed .elementor-icon svg[fill="none"],
.elementor-widget-icon-box.elementor-view-stacked .elementor-icon svg[fill="none"] {
	fill: none;
	stroke: currentColor;
}

/* Icons that ARE solid in the source follow the design's colour rather than
   the Global Kit's primary. */
.elementor-widget-icon.elementor-view-default .elementor-icon svg[fill="currentColor"],
.elementor-widget-icon.elementor-view-framed .elementor-icon svg[fill="currentColor"],
.elementor-widget-icon.elementor-view-stacked .elementor-icon svg[fill="currentColor"],
.elementor-widget-icon-box.elementor-view-default .elementor-icon svg[fill="currentColor"],
.elementor-widget-icon-box.elementor-view-framed .elementor-icon svg[fill="currentColor"],
.elementor-widget-icon-box.elementor-view-stacked .elementor-icon svg[fill="currentColor"] {
	fill: currentColor;
}

/* Same collision inside Button widgets, where the icon rides in
   .elementor-button-icon rather than .elementor-icon. */
.elementor-button-icon svg[fill="none"] {
	fill: none;
	stroke: currentColor;
}