/*
 * Cardinal mobile menu and search overlay component contract.
 *
 * The off-canvas menu is ElementsKit markup styled by three uncoordinated
 * sources (the plugin stylesheet, Microthemer, and the child theme). This file
 * is the single owner of the mobile drawer's presentation: one close control,
 * one item type, one panel motion, one scrim.
 *
 * Everything is scoped to the mobile breakpoint and to the enhanced state
 * (html.cardinal-menu-enhanced) so the desktop mega-menu and the no-JS
 * progressive-enhancement fallback in custom_new.css are both untouched.
 *
 * Microthemer's generated rules all carry !important and load after this file,
 * so the overrides below need both the extra specificity and !important. Where
 * a transition has to be declared important to reach the element at all, the
 * shared reduced-motion policy in custom_new.css still wins: its selector
 * carries three ID components and its transition-duration is important too.
 * That collapse is verified in the browser, not assumed.
 */

@media (max-width: 1024px) {
	/* --------------------------------------------------------------
	 * Panel motion — transform only, one duration, one exponential
	 * ease-out for both the menu drawer and the search sheet.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced nav.ekit-wid-con
	> .elementskit-menu-container.elementskit-menu-offcanvas-elements {
		background-color: #fff;
		/*
		 * The drawer is the fixed layer and the list inside it is the only
		 * scroller, so the drawer has to end where the screen ends. The plugin
		 * sizes it with `height: 100% !important` on a fixed box — the large
		 * viewport, which on a phone includes the space behind the browser
		 * toolbar — and raises it to `120vh !important` whenever the header
		 * carries `.ekit-sticky` below 768px. Either value can exceed the
		 * visible height, and when it does the list is measured against a box
		 * taller than the screen: scrollHeight equals clientHeight, no scroll
		 * range is offered at all, and the last rows sit off the bottom with
		 * no way to reach them. Bind the height to the dynamic viewport and
		 * the tail is reachable whatever the toolbar and the sticky class are
		 * doing. Overflow is hidden here so the list stays the one scroller.
		 */
		bottom: auto;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		height: 100vh !important;
		height: 100dvh !important;
		justify-content: flex-start;
		left: 0;
		max-height: 100vh;
		max-height: 100dvh;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: hidden;
		/* The 32px below the last row is the list's own padding; the plugin's
		 * 10px here only shortened the scroller. */
		padding-bottom: 0;
		top: 0;
		transform: translateX(-100%);
		transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
		/* The header search column carries z-index 10000; the drawer and its
		 * scrim have to sit above it or the magnifier prints through. */
		z-index: 10002;
	}

	html.cardinal-menu-enhanced nav.ekit-wid-con
	> .elementskit-menu-container.elementskit-menu-offcanvas-elements.active {
		transform: translateX(0);
	}

	/*
	 * The Elementor widget that holds the drawer carries z-index 12 and so
	 * caps everything inside it, while the header search column next to it
	 * carries 10000 — which is why the magnifier printed through the open
	 * panel. Lift the whole widget only while the drawer is open, so the
	 * search sheet still layers above the closed drawer.
	 */
	html.cardinal-menu-enhanced .elementor-element:has(
		> .elementor-widget-container
		> nav.ekit-wid-con
		> .elementskit-menu-container.active
	) {
		z-index: 10001 !important;
	}

	/*
	 * Microthemer animates this sheet with `transition: 0.5s !important` from
	 * a selector that outranks cardinal-search.css, so the shared motion has
	 * to be declared important here too. It is still collapsed by the shared
	 * reduced-motion policy, whose selector carries three ID components.
	 */
	html body .nav_search_box
	.nav_search_box_inner.elementor-inner-section {
		transform: translateX(-100%) !important;
		transition:
			transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
			opacity 0ms linear 240ms !important;
		z-index: 2;
	}

	html body .nav_search_box.slide-left
	.nav_search_box_inner.elementor-inner-section {
		transform: translateX(0) !important;
		transition:
			transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
			opacity 0ms !important;
	}

	/* --------------------------------------------------------------
	 * Scrim — deep mullion at 50%, on both modals, fading over the
	 * same 240ms. The search sheet previously had none and read as a
	 * page replacement rather than a layer.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced nav.ekit-wid-con > .elementskit-menu-overlay {
		background-color: rgba(18, 16, 16, 0.5);
		left: 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
		z-index: 10001;
	}

	html.cardinal-menu-enhanced nav.ekit-wid-con
	> .elementskit-menu-overlay.active {
		opacity: 1;
		pointer-events: auto;
	}

	html body .nav_search_box::before {
		background-color: rgba(18, 16, 16, 0.5);
		content: "";
		display: block;
		inset: 0;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
		z-index: 1;
	}

	html body .nav_search_box.slide-left::before {
		opacity: 1;
	}

	/* --------------------------------------------------------------
	 * Panel header — the brand stays with the user inside the drawer,
	 * and the close control sits top-right where the search sheet
	 * already puts it.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced .elementskit-menu-container
	> .elementskit-nav-identity-panel {
		align-items: center;
		background-color: #fff;
		border-bottom: 1px solid #d8d8d5;
		box-sizing: border-box;
		display: flex;
		flex: 0 0 auto;
		height: 60px;
		justify-content: space-between;
		margin: 0;
		padding: 0 8px 0 20px !important;
		position: sticky;
		top: 0;
		width: 100%;
		z-index: 3;
	}

	html.cardinal-menu-enhanced .elementskit-nav-identity-panel
	> .cardinal-menu-brand {
		align-items: center;
		display: flex;
		flex: 0 0 auto;
		height: 44px;
		text-decoration: none;
	}

	html.cardinal-menu-enhanced .elementskit-nav-identity-panel
	> .cardinal-menu-brand img {
		display: block;
		height: auto;
		max-height: 40px;
		min-width: 0;
		object-fit: contain;
		width: 140px;
	}

	/* --------------------------------------------------------------
	 * One close control, used identically in both modals.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced .elementskit-menu-container
	> .elementskit-nav-identity-panel > button.elementskit-menu-close,
	html body .lucky-words > button.close-search-popup {
		align-items: center;
		appearance: none;
		background-color: transparent !important;
		background-image: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: #121010 !important;
		cursor: pointer;
		display: flex !important;
		flex: 0 0 auto;
		float: none !important;
		font-size: 0 !important;
		height: 44px !important;
		justify-content: center;
		line-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 44px !important;
	}

	html.cardinal-menu-enhanced .elementskit-menu-container
	> .elementskit-nav-identity-panel > button.elementskit-menu-close
	> .cardinal-close-icon,
	html body .lucky-words > button.close-search-popup
	> .cardinal-close-icon {
		display: block;
		height: 24px;
		pointer-events: none;
		width: 24px;
	}

	/* --------------------------------------------------------------
	 * One item type at every level: the committed navigation role,
	 * scaled up for a touch drawer but still DIN uppercase signage.
	 * -------------------------------------------------------------- */
	/*
	 * The list opened flush against the header's own 1px rule, so the
	 * first row read as more chrome. 8px is the base step on the
	 * DESIGN.md scale and is enough to separate the two without
	 * loosening the row rhythm. 32px below the last row at every level.
	 */
	/*
	 * The list is the drawer's scroller at every level. It takes exactly the
	 * height left under the sticky 60px panel header — `min-height: 0` is what
	 * lets a flex child shrink below its content and scroll instead of pushing
	 * the drawer taller — and it keeps its overscroll to itself so a swipe at
	 * either end never reaches the page behind.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile {
		box-sizing: border-box;
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px 0 32px !important;
		width: 100%;
	}

	html.cardinal-menu-enhanced #menu-header-mobile.padding-adjust {
		padding: 8px 0 32px !important;
	}

	html.cardinal-menu-enhanced #menu-header-mobile > li > .ekit-menu-nav-link,
	html.cardinal-menu-enhanced #menu-header-mobile
	.ekit-vertical-navbar-nav > li > .ekit-menu-nav-link {
		align-items: center;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		box-sizing: border-box;
		color: #3d3d3d !important;
		display: flex !important;
		font-family:
			"din-2014",
			"Cardinal DIN Narrow Fallback",
			"Cardinal DIN Arial Fallback",
			sans-serif !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		letter-spacing: 0.08em !important;
		line-height: 1.5 !important;
		margin: 0;
		min-height: 56px;
		opacity: 1 !important;
		padding: 0 20px !important;
		text-align: left;
		text-transform: uppercase !important;
		width: 100% !important;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.elementor-image-box-title,
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementor-image-box-title > a {
		color: #3d3d3d !important;
		font-family:
			"din-2014",
			"Cardinal DIN Narrow Fallback",
			"Cardinal DIN Arial Fallback",
			sans-serif !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		letter-spacing: 0.08em !important;
		text-transform: uppercase !important;
	}

	/* One divider system. Level 1 rules only separate the top-level
	 * rows; the drilled-in views are separated by their section title. */
	html.cardinal-menu-enhanced #menu-header-mobile:not(.padding-adjust)
	> li + li {
		border-top: 1px solid #d8d8d5;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.ekit-vertical-navbar-nav {
		box-sizing: border-box;
		max-width: 100%;
	}

	/*
	 * Elementor's column gutter insets the drilled-in list by 10px, which
	 * would put the level 2 rules and labels on a different vertical line
	 * from level 1. One grid, one gutter, owned by the row padding above.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel > .elementor > .elementor-section
	> .elementor-container > .elementor-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/*
	 * One column at every width the drawer covers.
	 *
	 * The Technology and Company levels are authored as mega-menu
	 * columns -- `elementor-col-20` boxes laid side by side in a flex
	 * row. Elementor stacks those itself, but only under its own 767px
	 * breakpoint, so between 768 and 1024 they stayed in a row inside
	 * the 400px drawer: four 80px columns in Technology, two 120px
	 * columns in Company, and "ANNUAL REPORT 2023: CANADA FIGHTING
	 * AGAINST FORCED AND CHILD LABOUR ACT" wrapping to eleven lines in
	 * a 120px measure. The drawer is a single column of 56px rows at
	 * every width, so the stack has to hold across the whole range,
	 * and the group kickers become full-width labels above their lists
	 * rather than column headers.
	 *
	 * Only the panels built from ElementsKit page lists are named:
	 * that widget appears in the Technology and Company levels and
	 * nowhere else. The product levels lay out through the vertical
	 * navbar and the image-box grid, which are already full width, and
	 * the desktop mega-menu is outside this media query entirely.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel:has(.elementor-widget-elementskit-page-list)
	.elementor-column {
		max-width: 100% !important;
		width: 100% !important;
	}

	/*
	 * Elementor's own "hidden on mobile" resolves at its 767px
	 * breakpoint, so the empty fourth column in the Company panel --
	 * no text, no links, hidden at 390 -- reappeared at 768. Stacked,
	 * it stopped being an invisible strip beside the lists and became
	 * 21px of dead height between the last row and the list's own 32px
	 * tail. The drawer is the mobile presentation at every width it
	 * covers, so a column Elementor hides on mobile stays hidden
	 * across the whole range. It is the one element in the drawer that
	 * carries elementor-hidden-mobile without elementor-hidden-tablet;
	 * everything else already resolves the same at 390 and at 768.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel:has(.elementor-widget-elementskit-page-list)
	.elementor-column.elementor-hidden-mobile {
		display: none !important;
	}

	/* Microthemer zeroes every border on these rows with !important. */
	html.cardinal-menu-enhanced #menu-header-mobile
	.ekit-vertical-navbar-nav > li + li {
		border-top: 1px solid #d8d8d5 !important;
	}

	/*
	 * cardinalResetProductList() sets .active on index 0 so the desktop
	 * mega-menu has a title to show. On mobile that reads as a selection
	 * the user never made, so the emphasis is removed here rather than in
	 * the shared controller.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.ekit-vertical-navbar-nav > li.active:not(.show-arrow-inner)
	> .ekit-menu-nav-link {
		color: #3d3d3d !important;
		font-weight: 400 !important;
	}

	/* Bold at level 2 means current page and nothing else. */
	html.cardinal-menu-enhanced #menu-header-mobile
	.ekit-vertical-navbar-nav > li.current-menu-item > .ekit-menu-nav-link,
	html.cardinal-menu-enhanced #menu-header-mobile
	> li.current-menu-item > .ekit-menu-nav-link {
		color: #121010 !important;
		font-weight: 700 !important;
	}

	/*
	 * The Technology and Company drill levels are built from
	 * ElementsKit page-list widgets rather than menu items, so step 1's
	 * item contract never reached them: 28 rows across the two panels
	 * rendered as Mulish 12px sentence case in the UA's own link blue
	 * (rgb(0, 0, 255)), inline, 36px tall and flush to the panel edge.
	 * Same rank as every other row in the drawer, so the same contract
	 * -- and the row, not the word, is what the thumb hits.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementor-widget-elementskit-page-list .elementor-icon-list-item {
		margin: 0 !important;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.elementor-widget-elementskit-page-list
	.elementor-icon-list-item + .elementor-icon-list-item {
		border-top: 1px solid #d8d8d5;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.elementor-widget-elementskit-page-list .elementor-icon-list-item > a {
		align-items: center;
		box-sizing: border-box;
		color: #3d3d3d !important;
		display: flex !important;
		font-family:
			"din-2014",
			"Cardinal DIN Narrow Fallback",
			"Cardinal DIN Arial Fallback",
			sans-serif !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		letter-spacing: 0.08em !important;
		line-height: 1.5 !important;
		min-height: 56px;
		padding: 0 20px !important;
		text-decoration: none !important;
		text-transform: uppercase !important;
		width: 100%;
	}

	/* --------------------------------------------------------------
	 * Section title — the Label role, so the drilled-in header reads
	 * as where you are rather than as another choice.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced #menu-header-mobile
	> li.menu-item.show-arrow.elementskit-dropdown-has
	> .ekit-menu-nav-link,
	html.cardinal-menu-enhanced #menu-header-mobile
	.ekit-vertical-navbar-nav
	li.menu-item.show-arrow-inner.elementskit-dropdown-has
	> .ekit-menu-nav-link {
		align-items: center;
		border-bottom: 1px solid #d8d8d5;
		box-sizing: border-box;
		color: #5f6161 !important;
		display: flex !important;
		font-family:
			"din-2014",
			"Cardinal DIN Narrow Fallback",
			"Cardinal DIN Arial Fallback",
			sans-serif !important;
		font-size: 0.78rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.07em !important;
		line-height: 1.5 !important;
		min-height: 56px;
		opacity: 1 !important;
		padding: 0 20px 0 48px !important;
		text-transform: uppercase !important;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	> li.menu-item.show-arrow.elementskit-dropdown-has
	> .ekit-menu-nav-link::after,
	html.cardinal-menu-enhanced #menu-header-mobile
	.ekit-vertical-navbar-nav
	li.menu-item.show-arrow-inner.elementskit-dropdown-has
	> .ekit-menu-nav-link::after {
		left: 20px !important;
	}

	/* --------------------------------------------------------------
	 * See-all row.
	 *
	 * One component at every drill level that declares a landing page,
	 * built by cardinalBuildMobileSeeAllRows(). It carries the item
	 * contract exactly -- same DIN 15px/400/uppercase/.08em, same
	 * #3d3d3d, same 20px gutter, same row height -- so a section's
	 * overview reads as a peer of the section's contents rather than
	 * as a stray text link. The chevron points out of the menu; the
	 * back arrow on the title row points back into it.
	 *
	 * This replaces the level 3 "About Insulating Glass" link, which
	 * was the last control in the drawer off the unified scale
	 * (Mulish 16px sentence case, 390x24, UA blue on the chevron).
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced #menu-header-mobile .cardinal-menu-see-all {
		align-items: center;
		background-color: transparent;
		border-bottom: 1px solid #d8d8d5;
		box-sizing: border-box;
		color: #3d3d3d !important;
		display: flex !important;
		font-family:
			"din-2014",
			"Cardinal DIN Narrow Fallback",
			"Cardinal DIN Arial Fallback",
			sans-serif !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		gap: 12px;
		justify-content: space-between;
		letter-spacing: 0.08em !important;
		line-height: 1.5 !important;
		min-height: 56px;
		padding: 0 20px !important;
		text-align: left;
		text-decoration: none !important;
		text-transform: uppercase !important;
		width: 100%;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.cardinal-menu-see-all > .cardinal-see-all-chevron {
		flex: 0 0 auto;
		height: 16px;
		pointer-events: none;
		width: 16px;
	}

	/* The row sits directly under its level's title, so the panel's
	 * own leading padding would open a gap between the two. */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel[data-cardinal-see-all="true"] {
		padding-top: 0 !important;
	}

	/*
	 * Drilling one level deeper hides the level above, including its
	 * see-all row -- the same way the controller hides that level's
	 * title. Otherwise level 3 opens under a level 2 destination.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	> li.cardinal-main-menu-mobile:has(
		.ekit-vertical-navbar-nav > li.show-arrow-inner
	) > .elementskit-megamenu-panel > .cardinal-menu-see-all {
		display: none !important;
	}

	/*
	 * The section's authored overview link has become the row above;
	 * leaving the original Elementor icon-list widget on screen would
	 * show the same destination twice, in two different treatments.
	 * Desktop still renders its own copy.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel .elementor-widget-icon-list {
		display: none !important;
	}

	/* --------------------------------------------------------------
	 * Removals: the placeholder "." row, and the second search
	 * affordance inside the drawer. The header overlay is the single
	 * search.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced #menu-header-mobile > .hide-text-menu,
	html.cardinal-menu-enhanced .elementskit-menu-container
	.mobile-ajes-search {
		display: none !important;
	}

	/* --------------------------------------------------------------
	 * Touch targets.
	 *
	 * Every interactive element in the drawer and in the search sheet
	 * reaches 44x44. The hit area grows through padding and box size
	 * only; the item type step 1 set (din-2014 15px/400/uppercase,
	 * .08em) is untouched.
	 * -------------------------------------------------------------- */

	/*
	 * The hamburger is the first control on the page and shipped at
	 * 45x31. The bars are laid out by the plugin as stacked blocks, so
	 * the box grows through vertical padding only and the icon itself
	 * does not move relative to its own centre.
	 */
	html.cardinal-menu-enhanced nav.ekit-wid-con
	> .elementskit-menu-hamburger {
		box-sizing: border-box !important;
		min-height: 44px !important;
		min-width: 44px !important;
		padding: 11px 8px !important;
	}

	/*
	 * The header magnifier is the single search affordance on mobile
	 * after step 1 removed the in-drawer one, and it shipped as a
	 * 20x24 button carrying a stray magenta fill. It is the control a
	 * one-handed user reaches for most, so it gets a real 44x44 box on
	 * the same optical line as the hamburger.
	 */
	html body .mobile-search-icon,
	html body .mobile-search-icon > .elementor-widget-container {
		background-color: transparent !important;
		display: flex !important;
		justify-content: flex-end !important;
		width: 44px !important;
	}

	html body button.cardinal-mobile-search-button {
		align-items: center;
		background-color: transparent !important;
		background-image: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-sizing: border-box;
		display: flex !important;
		flex: 0 0 auto;
		height: 44px !important;
		justify-content: center;
		margin: 0 !important;
		padding: 0 !important;
		width: 44px !important;
	}

	/*
	 * The clear glyph inside the search field: Microthemer pins it to
	 * 14px, which rendered a 26x26 tap target over a 56px field.
	 */
	html body .nav_search_box .e-search-input-wrapper > svg {
		box-sizing: border-box !important;
		height: 44px !important;
		padding: 12px !important;
		right: 4px !important;
		width: 44px !important;
	}

	/*
	 * Quick links and the AJAX suggestion rows were 348x30 and stacked
	 * 10px apart. Same 16px Mulish, same measure; the row is now a
	 * 44px band and the gap between rows becomes part of the target
	 * instead of dead space between two small ones.
	 */
	html body .nav_search_box .lucky-words-list li {
		margin: 0 !important;
	}

	/*
	 * The row is pulled 10px wider than the reading column and given
	 * the same 10px back as padding, so the label still starts on the
	 * search field's left edge while the focus ring has somewhere to
	 * land that is not the first glyph.
	 */
	html body .nav_search_box .lucky-words-list {
		margin-left: -10px !important;
		margin-right: -10px !important;
	}

	html body .nav_search_box .lucky-words-list a {
		align-items: center;
		box-sizing: border-box;
		display: flex !important;
		min-height: 44px;
		padding: 8px 10px !important;
		width: 100%;
	}

	/*
	 * Level 3 is an Elementor image box: a logo in a <figure> and the
	 * product name in an <h4>, each wrapping its own anchor to the
	 * same URL. That is two small stacked targets, the label of which
	 * measured 58x21 down to 31x21. The label takes a 44px band and
	 * stretches over the whole cell, so the tile is one target and the
	 * grid composition does not change.
	 */
	/*
	 * Step 2 held the cell 10px in from the panel edge so the focus
	 * ring had somewhere to land that was not the label's first glyph.
	 * That inset put the grid on its own vertical line, off the 20px
	 * gutter every other row in the drawer uses. The gutter now belongs
	 * to the grid container below, the cell runs edge to edge inside
	 * it, and the ring clears the type because the label is centred
	 * under its centred logo rather than starting at the cell edge.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel .elementor-image-box-wrapper {
		box-sizing: border-box;
		padding: 0 !important;
		position: relative;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel .elementor-image-box-content {
		min-width: 0;
	}

	/* 8px ties the caption to its media frame; Elementor's own 10px is
	 * not a step on the DESIGN.md scale. */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel .elementor-image-box-title {
		margin: 8px 0 0 !important;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel .elementor-image-box-title > a {
		align-items: center;
		display: flex !important;
		justify-content: center;
		line-height: 1.5 !important;
		min-height: 44px;
		text-align: center;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel .elementor-image-box-title > a::after {
		content: "";
		inset: 0;
		position: absolute;
	}

	/*
	 * Because the label owns the whole cell, the cell is what shows
	 * focus. Ringing the 44px label alone would also run the band
	 * straight through the first glyph, since the labels sit flush to
	 * the panel edge.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel .elementor-image-box-title
	> a:focus-visible {
		box-shadow: none !important;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel .elementor-image-box-title
	> a:focus-visible::after {
		box-shadow:
			inset 0 0 0 3px #b91218,
			inset 0 0 0 6px #fff;
	}

	/* --------------------------------------------------------------
	 * Focus.
	 *
	 * DESIGN.md commits to `0 0 0 3px #fff, 0 0 0 6px #b91218` as the
	 * accessible focus treatment, and style.css already uses exactly
	 * those two bands on the Locations surfaces. This is that ring, not
	 * a second definition of one.
	 *
	 * It is drawn inward. Both the drawer and the search sheet are
	 * scroll containers, and a scroll container clips at its padding
	 * box on both axes, so an outward ring on a full-bleed 390px row
	 * loses its left and right edges and stops reading as a ring. The
	 * inset form keeps the same two 3px bands in the same order out of
	 * the content -- red against the row edge, the white halo inside
	 * it -- and no ancestor can cut it, including the first and last
	 * rows of a scrolled drawer.
	 *
	 * The search field itself is deliberately absent: mobile text
	 * inputs already carry the project focus treatment in
	 * custom_new.css, whose selector outranks this one.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced nav.ekit-wid-con .elementskit-menu-container
	:is(a, button, [tabindex], [role="button"]):focus-visible,
	html body .nav_search_box
	:is(a, button, [tabindex], [role="button"]):focus-visible,
	html body button.cardinal-mobile-search-button:focus-visible {
		box-shadow:
			inset 0 0 0 3px #b91218,
			inset 0 0 0 6px #fff !important;
		outline: 0 !important;
	}

	/*
	 * Microthemer puts `transition: all 0.4s` on the two controls a
	 * keyboard user reaches first, so the focus ring faded up over
	 * 400ms and read as a lag rather than as focus. Keep the colour
	 * transition that rule was written for; take the ring's own
	 * properties out of it so focus indication is immediate. The
	 * shared reduced-motion policy still wins: it sets
	 * transition-duration, which this does not touch.
	 */
	html body nav.ekit-wid-con > .elementskit-menu-hamburger,
	html body nav.ekit-wid-con .elementskit-menu-close {
		transition-property: color, background-color, border-color !important;
	}

	/*
	 * The search field inherited custom_new.css's project-wide mobile
	 * input focus treatment -- a 5px #121212 halo under a 3px white
	 * outline -- which reads as a different system from the inset ring
	 * every other control in this sheet uses. Scoped to the search
	 * overlay only; inputs elsewhere on the site keep the project
	 * rule. The specificity guard matches that rule's own :not(#id)
	 * technique because it is declared important.
	 */
	html:not(#cardinal-viewport-zoom-disabled) body .nav_search_box
	input[type="search"].e-search-input:focus-visible {
		box-shadow:
			inset 0 0 0 3px #b91218,
			inset 0 0 0 6px #fff !important;
		outline: 0 !important;
		outline-offset: 0 !important;
	}

	/* --------------------------------------------------------------
	 * Type mechanics.
	 *
	 * The level 3 product labels ran at 18px/15px (1.2) and the search
	 * form's visually hidden label at 16px/16px (1.0), both under the
	 * 1.3 floor. Leading only -- no size, weight, case or tracking in
	 * this scope moves.
	 * -------------------------------------------------------------- */
	html body .nav_search_box .e-search-label .elementor-screen-only {
		line-height: 1.5;
	}

	/* --------------------------------------------------------------
	 * Dead motion on the search side.
	 *
	 * Microthemer still slides this sheet with layout properties:
	 * `right` over 600ms after a 200ms delay on the inner container,
	 * which really did animate -390px -> 0 on every open long after
	 * step 1's 240ms transform had landed, and `width` over 500ms on
	 * the column and its wrap, whose width never changes. The offset
	 * is pinned flush in both states so the sheet has exactly one
	 * transition: the transform above.
	 *
	 * `transition: none` here still collapses correctly under
	 * prefers-reduced-motion -- the shared policy in custom_new.css
	 * carries three ID components and sets transition-duration
	 * important, so it continues to win.
	 * -------------------------------------------------------------- */
	html body .nav_search_box,
	html body .nav_search_box
	> .elementor-widget-wrap.elementor-element-populated {
		transition: none !important;
	}

	html body .nav_search_box .nav_search_box_inner
	> .elementor-container.elementor-column-gap-default,
	html body .nav_search_box.slide-left .nav_search_box_inner
	> .elementor-container.elementor-column-gap-default {
		right: 0 !important;
		transition: none !important;
	}

	/* --------------------------------------------------------------
	 * Level 3 — the product grid.
	 *
	 * Each cell shipped as a low-resolution logo centred on a rounded
	 * gray tile: #f9f9f9 fill, 5px radius, 1px #e5e5e5 four-sided
	 * border. None of those three values is a Cardinal token, and the
	 * collection is the "soft card cloud" DESIGN.md names as an
	 * anti-reference.
	 *
	 * What replaces it is the one tonal surface DESIGN.md does
	 * sanction: Surface Deep #eeeeec "reserved for media framing".
	 * Square, flat, borderless — a media field the logo sits in, not a
	 * container the product lives in. All four marks carry real alpha
	 * (verified: every corner pixel a=0), so the tone reads behind them
	 * rather than around a white bounding box. The label sits outside
	 * the frame on Clear White, so nothing here is a card.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel .elementor-image-box-img {
		background-color: #eeeeec !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
		height: 96px !important;
		margin: 0 !important;
		padding: 12px !important;
		width: 100% !important;
	}

	/*
	 * One gutter. The cells used to sit on a 10px inset of their own
	 * (step 2) inside a container Elementor laid out with percentage
	 * margins, which put the grid on neither the 20px row gutter nor a
	 * step of the spacing scale: 15.6px between columns, 30px between
	 * rows. An explicit grid on the drawer's own gutter fixes both --
	 * 16px and 24px, and the trailing row margin disappears with it.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel
	.elementor-widget-wrap:has(> .elementor-widget-image-box) {
		box-sizing: border-box;
		display: grid !important;
		gap: 24px 16px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 0 20px !important;
	}

	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel
	.elementor-widget-wrap:has(> .elementor-widget-image-box)
	> .elementor-widget-image-box {
		margin: 0 !important;
		width: auto !important;
	}

	/* --------------------------------------------------------------
	 * Section kickers — the Label role, on the 20px gutter.
	 *
	 * REFERENCE, APPLICATIONS, INTELLIGENT QUALITY, SUSTAINABILITY,
	 * COMPANY, LEGAL and CARDINAL IG COMPANY group 28 links across the
	 * Technology, Company and product panels, so they stay as group
	 * labels. They rendered as Mulish 12px/200 in black at line-height
	 * 1.0 and flush to the panel edge -- a fourth type system in a
	 * drawer that now has one. DESIGN.md's Label role is what a section
	 * kicker is: DIN, .78rem, 700, .07em, uppercase, Slate Gray.
	 *
	 * The two panels build them from different widgets (a heading in
	 * Technology and Company, a text block in the product panels), so
	 * both are named.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel
	:is(.elementor-widget-heading .elementor-heading-title,
		.company-title-mobile .elementor-widget-container > p) {
		/* The Label role's line box measures 18.72px, which the flex
		 * line rounds up and pushed the gap below the kicker to 13px.
		 * A 20px box lands the rhythm on the scale exactly without
		 * touching the 1.5 leading. */
		align-items: center;
		box-sizing: border-box;
		color: #5f6161 !important;
		display: flex;
		font-family:
			"din-2014",
			"Cardinal DIN Narrow Fallback",
			"Cardinal DIN Arial Fallback",
			sans-serif !important;
		font-size: 0.78rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.07em !important;
		line-height: 1.5 !important;
		margin: 0 !important;
		min-height: 20px;
		padding: 0 20px !important;
		text-transform: uppercase !important;
	}

	/*
	 * DESIGN.md: more space above a heading than below it. 32px opens
	 * the group, 12px ties the kicker to the list it labels, and the
	 * 32px above the next kicker is the separation between groups.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel
	:is(.elementor-widget-heading, .company-title-mobile) {
		margin: 32px 0 12px !important;
	}

	/*
	 * Elementor pads every inner section 16px top and bottom, which
	 * landed the kicker 16px under the see-all row and 33px above its
	 * own list -- more space below the heading than above it, and
	 * neither value on the scale. The drawer owns this rhythm now.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel section.elementor-inner-section {
		padding-bottom: 0 !important;
		padding-top: 0 !important;
	}

	/*
	 * Each kicker section in the Technology and Company panels also
	 * carried a 1px #707070 rule under the label -- a fourth divider
	 * weight and a colour that is not in the Cardinal palette, and one
	 * the product panels' kickers never had. The drawer has one divider
	 * system (1px Etched Line, between rows); a group is opened by the
	 * 32px above its kicker, not by a second rule.
	 */
	html.cardinal-menu-enhanced #menu-header-mobile
	.elementskit-megamenu-panel
	section.elementor-inner-section:has(.elementor-widget-heading) {
		border-bottom: 0 !important;
	}

	/* --------------------------------------------------------------
	 * Final motion sweep.
	 *
	 * Steps 1-3 removed the `left`, `width` and `right` transitions and
	 * narrowed the hamburger and close controls. What remained inside
	 * the two modals was a long tail of Elementor and ElementsKit
	 * defaults: `all 0.2s`, `all 0.3s`, `all 0.4s`, `all 0.5s` and a
	 * `transform 0.4s` on every widget container -- four durations and
	 * two easings on elements whose animated properties never change.
	 *
	 * Two of them were live, not dead: `all 0.5s ease` on the level 3
	 * media frame would have animated the Surface Deep fill above, and
	 * `all 0.3s`/`all 0.4s` on the rows, the search input and the
	 * search close button faded the focus ring up over 300-400ms, the
	 * same lag step 3 took off the hamburger.
	 *
	 * Structural and media elements lose the transition entirely;
	 * interactive elements keep the colour change these rules were
	 * written for. Neither touches transition-duration, so the shared
	 * reduced-motion policy in custom_new.css still wins.
	 * -------------------------------------------------------------- */
	html.cardinal-menu-enhanced nav.ekit-wid-con .elementskit-menu-container
	:is(.elementor-section,
		.elementor-column,
		.elementor-widget-wrap,
		.elementor-widget-container,
		.ekit-vertical-menu-container,
		.elementskit-navbar-nav,
		.elementor-image-box-img,
		.elementor-image-box-wrapper,
		img,
		svg) {
		transition-property: none !important;
	}

	/*
	 * The list itself carries `all 0.2s` from a rule that names it by
	 * ID and declares it important, so the class-level sweep above
	 * cannot reach it. Same removal, matched on the ID.
	 */
	html.cardinal-menu-enhanced nav.ekit-wid-con .elementskit-menu-container
	ul#menu-header-mobile {
		transition-property: none !important;
	}

	html.cardinal-menu-enhanced nav.ekit-wid-con .elementskit-menu-container
	:is(a, button, .elementor-icon-list-text) {
		transition-property: color, background-color, border-color !important;
	}

	/*
	 * The search sheet's one authored moment is the 240ms transform on
	 * .nav_search_box_inner, so the inner section is deliberately not
	 * in this list.
	 */
	html body .nav_search_box
	:is(.elementor-widget-container,
		.e-search-input-wrapper,
		.elementor-screen-only,
		img,
		svg) {
		transition-property: none !important;
	}

	html body .nav_search_box :is(a, button, input) {
		transition-property: color, background-color, border-color !important;
	}
}


/*
 * Cap the drawer above the phone range.
 *
 * At 768x1024 the panel was a full-bleed 768x1024 sheet carrying
 * 748px-wide rows of 15px type, and the scrim behind it was never
 * visible -- the drawer read as a page replacement rather than as a
 * layer over the page. 400px is a drawer: wide enough for the longest
 * row ("CARDINAL IG COMPANY" and the level 3 grid) and narrow enough
 * that the scrim does real work.
 *
 * 600px is the floor because below it a capped panel would leave a
 * strip of page too narrow to tap, and phones in portrait belong
 * full-bleed. 390 and 320 are unaffected.
 */
@media (min-width: 600px) and (max-width: 1024px) {
	html.cardinal-menu-enhanced nav.ekit-wid-con
	> .elementskit-menu-container.elementskit-menu-offcanvas-elements {
		max-width: 400px !important;
		width: 400px !important;
	}
}