/*
 * TuneRS Header Mobile Menu
 * Header and trigger styling also applies before JavaScript enhancement.
 * The desktop header/navigation is preserved from 767px upward. Only phones
 * below 767px use the compact commerce row and custom mobile drawer. The
 * fractional ceiling prevents browser zoom/subpixel rounding from creating a
 * one-pixel unstyled gap at the displayed 766px width.
 */

/* Divi normally switches to its tablet header at 980px. Rebuild only the
 * desktop pieces Divi disables in that range, without changing the header at
 * 981px and above or the custom mobile layout below 767px.
 */
@media only screen and (min-width: 767px) and (max-width: 980px) {
	.trs-utility-bar .et_pb_row,
	.trs-commerce-row .et_pb_row {
		display: flex !important;
		height: auto !important;
		min-height: 0 !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
	}

	/* Tablet utility bar: retain only the centered brand statement. The phone,
	 * Contact Us, and Track Order menu remains available in the unchanged
	 * desktop header at 981px and above.
	 */
	.trs-utility-bar .et_pb_row {
		justify-content: center !important;
		padding-top: 7px !important;
		padding-bottom: 7px !important;
	}

	.trs-utility-bar .et_pb_row > .et_pb_column:first-child {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 0 !important;
		text-align: center !important;
	}

	.trs-utility-bar .et_pb_row > .et_pb_column:nth-child(n + 2),
	.trs-utility-bar .et_pb_menu {
		display: none !important;
	}

	.trs-utility-bar .et_pb_text,
	.trs-utility-bar .et_pb_text_inner,
	.trs-utility-bar p {
		margin: 0 !important;
		padding: 0 !important;
		color: #ffffff !important;
		text-align: center !important;
	}

	/* Divi's tablet menu colors can override the utility module on WooCommerce
	 * archives. Preserve the white desktop links against the navy bar.
	 */
	.trs-utility-bar .et_pb_menu__menu > nav > ul > li > a,
	.trs-utility-bar .et-menu > li > a {
		color: #ffffff !important;
		opacity: 1 !important;
	}

	.trs-commerce-row .et_pb_row > .et_pb_column {
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.trs-commerce-row .et_pb_row {
		column-gap: clamp(8px, 1.2vw, 12px) !important;
	}

	.trs-commerce-row .et_pb_row > .et_pb_column:nth-child(1),
	.trs-commerce-row .et_pb_row > .et_pb_column:nth-child(3) {
		flex: 1 1 25% !important;
		width: 25% !important;
		max-width: 25% !important;
	}

	.trs-commerce-row .et_pb_row > .et_pb_column:nth-child(2) {
		flex: 2 1 50% !important;
		width: 50% !important;
		max-width: 50% !important;
	}

	/* Divi's desktop action links each carry a 108px minimum width. At the
	 * tablet bridge that minimum can exceed their 25% column and push Cart
	 * beyond the viewport. Let both links divide the existing column instead.
	 */
	.trs-commerce-row .trs-commerce-actions {
		width: 100% !important;
		min-width: 0 !important;
	}

	.trs-commerce-row .trs-commerce-action,
	.trs-commerce-row .trs-commerce-action:visited {
		flex: 1 1 50% !important;
		min-width: 0 !important;
		padding-right: 6px !important;
		padding-left: 6px !important;
	}

	.trs-commerce-row .trs-commerce-label {
		font-size: clamp(11px, 1.4vw, 14px) !important;
	}

	.trs-main-navigation,
	.trs-main-navigation .et_pb_menu_inner_container,
	.trs-main-navigation .et_pb_menu__wrap,
	.trs-main-navigation .et_pb_menu__menu,
	.trs-main-navigation .et-menu-nav,
	.trs-main-navigation .et-menu {
		height: auto !important;
		min-height: 0 !important;
		max-width: none !important;
	}

	.trs-main-navigation .et_pb_menu__menu {
		display: flex !important;
		width: 100% !important;
	}

	.trs-main-navigation .et_mobile_nav_menu {
		display: none !important;
	}

	.trs-main-navigation .et_pb_menu__wrap {
		width: 100% !important;
		align-items: center !important;
		justify-content: stretch !important;
	}

	.trs-main-navigation .et-menu-nav,
	.trs-main-navigation .et-menu {
		width: 100% !important;
	}

	.trs-main-navigation .et-menu {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.trs-main-navigation .et-menu > li {
		margin: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.trs-main-navigation .et-menu > li > a {
		padding-top: 13px !important;
		padding-bottom: 13px !important;
		font-size: clamp(13px, 1.65vw, 16px) !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
	}

	.trs-main-navigation .et-menu > li.menu-item-has-children > a {
		padding-right: 16px !important;
	}

	/* Keep every top-level dropdown closed until hover or keyboard focus—even
	 * when /shop marks Shop and all its ancestors as current menu items.
	 */
	.trs-main-navigation .et-menu > li > ul.sub-menu {
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	.trs-main-navigation .et-menu > li:hover > ul.sub-menu,
	.trs-main-navigation .et-menu > li:focus-within > ul.sub-menu {
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	/* Reproduce the existing desktop Shop mega-menu between 767px and 980px.
	 * The original Divi module limits these rules to 981px and wider.
	 */
	.trs-main-navigation .et-menu > li.mega-menu {
		position: static !important;
	}

	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-auto-flow: row !important;
		align-items: start !important;
		column-gap: 0 !important;
		row-gap: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		min-width: 100% !important;
		max-width: none !important;
		padding: 14px 12px 16px !important;
		box-sizing: border-box !important;
		border: 0 !important;
		border-top: 3px solid #d1232a !important;
		border-radius: 0 0 8px 8px !important;
		background-color: #ffffff !important;
		background-image:
			linear-gradient(to bottom, #d8dee8, #d8dee8),
			linear-gradient(to bottom, #d8dee8, #d8dee8) !important;
		background-size:
			1px calc(100% - 28px),
			1px calc(100% - 28px) !important;
		background-position:
			33.333333% 14px,
			66.666667% 14px !important;
		background-repeat: no-repeat !important;
		box-shadow:
			0 18px 45px rgba(24, 37, 57, 0.16),
			0 3px 8px rgba(24, 37, 57, 0.08) !important;
		overflow: visible !important;
		z-index: 1000002 !important;
	}

	/* JavaScript groups the seven Shop sections into three presentation-only
	 * columns. Each column now flows independently, so a tall Maintenance or
	 * Interior section cannot force blank space below a shorter neighbour.
	 */
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column {
		float: none !important;
		clear: none !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		border: 0 !important;
	}

	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column > ul.trs-tablet-mega-column-list {
		position: static !important;
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		pointer-events: auto !important;
	}

	/* Keep the original direct-child selector as a no-flash fallback while
	 * Divi and this add-on finish initializing the tablet header. */
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li:not(.trs-tablet-mega-column),
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column > ul.trs-tablet-mega-column-list > li {
		float: none !important;
		clear: none !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 14px 10px !important;
		box-sizing: border-box !important;
		border: 0 !important;
	}

	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li:not(.trs-tablet-mega-column) > a,
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column > ul.trs-tablet-mega-column-list > li > a {
		display: flex !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 34px !important;
		align-items: center !important;
		margin: 0 0 5px !important;
		padding: 6px 10px !important;
		box-sizing: border-box !important;
		border: 0 !important;
		border-left: 4px solid #445e86 !important;
		border-radius: 5px !important;
		background: linear-gradient(90deg, #edf2f7 0%, #f6f8fb 100%) !important;
		color: #2a3547 !important;
		font-family: "Bayon", Arial, sans-serif !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		line-height: 1.15 !important;
		opacity: 1 !important;
		box-shadow:
			inset 0 0 0 1px rgba(68, 94, 134, 0.05),
			0 1px 2px rgba(42, 53, 71, 0.04) !important;
		pointer-events: none !important;
		cursor: default !important;
	}

	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li:not(.trs-tablet-mega-column) > a::after,
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column > ul.trs-tablet-mega-column-list > li > a::after {
		display: none !important;
	}

	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li:not(.trs-tablet-mega-column) > ul.sub-menu,
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column > ul.trs-tablet-mega-column-list > li > ul.sub-menu {
		position: static !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		pointer-events: auto !important;
	}

	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li:not(.trs-tablet-mega-column) > ul.sub-menu > li,
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column > ul.trs-tablet-mega-column-list > li > ul.sub-menu > li {
		float: none !important;
		clear: both !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li:not(.trs-tablet-mega-column) > ul.sub-menu > li > a,
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column > ul.trs-tablet-mega-column-list > li > ul.sub-menu > li > a {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 4px 8px !important;
		box-sizing: border-box !important;
		border: 0 !important;
		border-radius: 4px !important;
		background: transparent !important;
		box-shadow: inset 3px 0 0 transparent !important;
		color: #2a3547 !important;
		font-family: "Bayon", Arial, sans-serif !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 1.15em !important;
		white-space: normal !important;
		opacity: 1 !important;
	}

	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li:not(.trs-tablet-mega-column) > ul.sub-menu > li > a:hover,
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li:not(.trs-tablet-mega-column) > ul.sub-menu > li > a:focus-visible,
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column > ul.trs-tablet-mega-column-list > li > ul.sub-menu > li > a:hover,
	.trs-main-navigation .et-menu > li.mega-menu > ul.sub-menu > li.trs-tablet-mega-column > ul.trs-tablet-mega-column-list > li > ul.sub-menu > li > a:focus-visible {
		padding-left: 14px !important;
		background: #f3f6f9 !important;
		color: #d1232a !important;
		box-shadow: inset 3px 0 0 #d1232a !important;
		outline: 0 !important;
	}
}

/* New controls stay hidden outside the existing phone breakpoint. */
.trs-mobile-menu-dialog,
.trs-mobile-sticky-menu {
	display: none !important;
}

@media only screen and (max-width: 766.99px) {
	html.trs-mobile-menu-open,
	body.trs-mobile-menu-open {
		overflow: hidden !important;
	}

	/* The utility menu becomes a large, empty-looking navy block on phones
	 * because Divi replaces its links with another hamburger. Phones do not
	 * need that bar, so remove it as a complete section.
	 */
	.trs-utility-bar {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	/* Keep the vehicle disclosure's existing spacing and content width. */
	#page-container .et-l--header .trs-header-desktop.trs-vehicle-row {
		margin: 0 !important;
		padding: 10px 0 4px !important;
		border-bottom: 0 !important;
	}

	#page-container .et-l--header .trs-header-desktop.trs-vehicle-row > .et_pb_row,
	#page-container .et-l--header .trs-header-vehicle-finder {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	#page-container .et-l--header .trs-header-desktop.trs-vehicle-row > .et_pb_row {
		border-bottom: 0 !important;
	}

	#page-container .et-l--header .trs-header-desktop.trs-vehicle-row > .et_pb_row {
		width: calc(100% - 32px) !important;
		max-width: none !important;
		margin-right: auto !important;
		margin-left: auto !important;
		box-sizing: border-box !important;
	}

	/* Let only the header's navigation section span both page edges. Match the
	 * actual navigation ancestors so this also works on pages without a header
	 * vehicle selector. Auto heights keep the entire strip inside the header;
	 * no viewport-width breakout or negative positioning is needed.
	 */
	#page-container .et-l--header .et_pb_section:has(.trs-main-navigation),
	#page-container .et-l--header .et_pb_row:has(.trs-main-navigation),
	#page-container .et-l--header .et_pb_column:has(.trs-main-navigation),
	#page-container .et-l--header .trs-main-navigation,
	#page-container .et-l--header .trs-main-navigation .et_pb_menu_inner_container,
	#page-container .et-l--header .trs-main-navigation .et_pb_menu__wrap,
	#page-container .et-l--header .trs-main-navigation .et_mobile_nav_menu,
	#page-container .et-l--header .trs-main-navigation .mobile_nav {
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	#page-container .et-l--header .et_pb_section:has(.trs-main-navigation) {
		border-right: 0 !important;
		border-left: 0 !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		box-shadow: none !important;
	}

	#page-container .et-l--header .et_pb_row:has(.trs-main-navigation),
	#page-container .et-l--header .et_pb_column:has(.trs-main-navigation),
	#page-container .et-l--header .trs-main-navigation {
		border: 0 !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		box-shadow: none !important;
	}

	/* Phone commerce header: logo on its own first row; the product search and
	 * account/cart actions share the second row. The rules are intentionally
	 * scoped to this existing Divi row and cannot affect /shop/ content.
	 */
	.trs-commerce-row,
	.trs-commerce-row .et_pb_row {
		height: auto !important;
		min-height: 0 !important;
	}

	.trs-commerce-row .et_pb_row {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-areas:
			"logo logo"
			"search actions" !important;
		column-gap: 10px !important;
		row-gap: 10px !important;
		width: calc(100% - 32px) !important;
		max-width: none !important;
		align-items: center !important;
		margin: 0 auto !important;
		padding: 10px 0 12px !important;
		box-sizing: border-box !important;
	}

	.trs-commerce-row .et_pb_row > .et_pb_column {
		float: none !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.trs-commerce-row .et_pb_row > .et_pb_column:nth-child(1) {
		grid-area: logo !important;
	}

	.trs-commerce-row .et_pb_row > .et_pb_column:nth-child(2) {
		grid-area: search !important;
	}

	.trs-commerce-row .et_pb_row > .et_pb_column:nth-child(3) {
		grid-area: actions !important;
		justify-self: end !important;
	}

	.trs-commerce-row .et_pb_row > .et_pb_column:nth-child(1) .et_pb_image {
		width: 86% !important;
		max-width: 378px !important;
		margin: 0 auto !important;
		text-align: center !important;
	}

	.trs-commerce-row .et_pb_row > .et_pb_column:nth-child(1) img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
	}

	.trs-commerce-row .trs-header-search,
	.trs-commerce-row .trs-header-search .et_pb_text_inner,
	.trs-commerce-row .trs-header-search p,
	.trs-commerce-row .trs-header-search .dgwt-wcas-search-wrapp,
	.trs-commerce-row .trs-header-search .dgwt-wcas-search-form {
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.trs-commerce-row .trs-header-search input[type="search"] {
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	.trs-commerce-row .trs-commerce-actions {
		width: auto !important;
		min-width: 0 !important;
		min-height: 54px !important;
		justify-content: flex-end !important;
	}

	.trs-commerce-row .trs-commerce-action,
	.trs-commerce-row .trs-commerce-action:visited {
		gap: 3px !important;
		min-width: 70px !important;
		min-height: 54px !important;
		padding: 4px 6px !important;
	}

	.trs-commerce-row .trs-commerce-action svg,
	.trs-commerce-row .trs-cart-icon-wrap {
		width: 23px !important;
		height: 23px !important;
	}

	.trs-commerce-row .trs-cart-icon-wrap {
		flex-basis: 23px !important;
	}

	.trs-commerce-row .trs-commerce-label {
		font-size: 12px !important;
		letter-spacing: 0 !important;
	}

	.trs-commerce-row .trs-commerce-action + .trs-commerce-action::before {
		top: 7px !important;
		bottom: 7px !important;
	}


	/*
	 * Paint the final Menu control before JavaScript enhancement runs. Divi
	 * renders a hamburger by default, which otherwise flashes for a moment on
	 * uncached page loads. These rules stop applying as soon as the script adds
	 * .trs-mobile-menu-enhanced, so the real accessible label and chevron take
	 * over without creating duplicate text.
	 */
	.trs-main-navigation:not(.trs-mobile-menu-enhanced) .et_pb_menu__menu {
		display: none !important;
	}

	.trs-main-navigation:not(.trs-mobile-menu-enhanced) .et_mobile_nav_menu,
	.trs-main-navigation:not(.trs-mobile-menu-enhanced) .mobile_nav {
		display: flex !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		align-items: center !important;
		justify-content: stretch !important;
		margin: 0 !important;
		text-align: center !important;
	}

	/* One flat trigger style for both the first paint and enhanced menu. */
	.trs-main-navigation:not(.trs-mobile-menu-enhanced) .mobile_menu_bar,
	.trs-main-navigation.trs-mobile-menu-enhanced .mobile_menu_bar,
	.trs-mobile-sticky-menu .trs-mobile-sticky-trigger {
		position: relative !important;
		top: 0 !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		transform: none !important;
		display: flex !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 52px !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 52px !important;
		box-sizing: border-box !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		box-shadow: none !important;
		color: #2a3547 !important;
		cursor: pointer !important;
		transition: background-color 160ms ease !important;
	}

	.trs-main-navigation:not(.trs-mobile-menu-enhanced) .mobile_menu_bar::before {
		content: "MENU" !important;
		position: static !important;
		display: block !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		color: #2a3547 !important;
		font-family: "Bayon", Arial, sans-serif !important;
		font-size: 19px !important;
		font-weight: 400 !important;
		font-style: normal !important;
		line-height: 1 !important;
		letter-spacing: 1.2px !important;
		text-align: center !important;
		text-transform: uppercase !important;
		transform: none !important;
	}

	.trs-main-navigation:not(.trs-mobile-menu-enhanced) .mobile_menu_bar::after {
		content: "" !important;
		position: absolute !important;
		top: 50% !important;
		right: 20px !important;
		display: block !important;
		width: 9px !important;
		height: 9px !important;
		margin: -7px 0 0 !important;
		border: 0 !important;
		border-right: 2px solid #617087 !important;
		border-bottom: 2px solid #617087 !important;
		transform: rotate(45deg) !important;
		pointer-events: none !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .et_pb_menu__menu {
		display: none !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_nav_menu {
		display: flex !important;
		width: 100% !important;
		align-items: center !important;
		justify-content: stretch !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .mobile_nav {
		display: flex !important;
		width: 100% !important;
		align-items: center !important;
		justify-content: stretch !important;
		text-align: center !important;
	}

	/* Suppress Divi's icon-font hamburger on every tablet/phone width. */
	.trs-main-navigation.trs-mobile-menu-enhanced .mobile_menu_bar::before,
	.trs-main-navigation.trs-mobile-menu-enhanced .mobile_menu_bar::after {
		content: none !important;
		display: none !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .trs-mobile-menu-button-label,
	.trs-mobile-sticky-menu .trs-mobile-menu-button-label {
		display: block !important;
		margin: 0 !important;
		color: currentColor !important;
		font-family: "Bayon", Arial, sans-serif !important;
		font-size: 19px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		letter-spacing: 1.2px !important;
		text-transform: uppercase !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .trs-mobile-menu-button-chevron,
	.trs-mobile-sticky-menu .trs-mobile-menu-button-chevron {
		position: absolute !important;
		top: 50% !important;
		right: 20px !important;
		display: block !important;
		width: 9px !important;
		height: 9px !important;
		margin: -7px 0 0 !important;
		border: 0 !important;
		border-right: 2px solid #617087 !important;
		border-bottom: 2px solid #617087 !important;
		transform: rotate(45deg) !important;
		transition: margin 160ms ease, transform 160ms ease !important;
		pointer-events: none !important;
	}

	.trs-main-navigation .mobile_menu_bar:hover,
	.trs-mobile-sticky-menu .trs-mobile-sticky-trigger:hover {
		background: #f7f9fc !important;
	}

	/* Keyboard focus stays visible inside the strip without adding an outside
	 * shadow or a permanent underline that can spill onto the page below.
	 */
	.trs-main-navigation .mobile_menu_bar:focus-visible,
	.trs-mobile-sticky-menu .trs-mobile-sticky-trigger:focus-visible {
		outline: 2px solid #445e86 !important;
		outline-offset: -4px !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.mobile_menu_bar[aria-expanded="true"] .trs-mobile-menu-button-chevron,
	.trs-mobile-sticky-trigger[aria-expanded="true"] .trs-mobile-menu-button-chevron {
		margin-top: -2px !important;
		transform: rotate(225deg) !important;
	}

	/* The original Menu strip remains in flow; this second trigger has no
	 * layout effect and is revealed only after the original passes the top.
	 */
	html.trs-mobile-sticky-active {
		scroll-padding-top: var(--trs-mobile-menu-offset, 60px);
	}

	.trs-mobile-sticky-menu:not([hidden]) {
		position: fixed !important;
		top: var(--trs-menu-sticky-top, 0px) !important;
		right: 0 !important;
		left: 0 !important;
		z-index: 1000001 !important;
		display: block !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
		box-shadow: none !important;
	}

	.trs-mobile-sticky-menu .trs-mobile-sticky-trigger {
		border-bottom: 1px solid #d7dee8 !important;
		appearance: none !important;
	}

	.trs-mobile-sticky-trigger::before,
	.trs-mobile-sticky-trigger::after {
		content: none !important;
		display: none !important;
	}

	.trs-main-navigation .mobile_menu_bar.trs-mobile-trigger-shadowed {
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/* The real list is moved into a native modal only while open. Its original
	 * location is restored on close so Divi keeps ownership of the header.
	 * A top-layer dialog cannot be clipped by a transformed header ancestor.
	 */
	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu {
		display: none !important;
	}

	.trs-mobile-menu-dialog[open] {
		position: fixed !important;
		top: var(--trs-menu-dialog-top, 0px) !important;
		right: 0 !important;
		bottom: auto !important;
		left: 0 !important;
		z-index: 2147483000 !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 100vh !important;
		height: var(--trs-menu-dialog-height, 100dvh) !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		box-shadow: none !important;
		transform: none !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.trs-mobile-menu-dialog,
	.trs-mobile-menu-dialog * {
		box-sizing: border-box !important;
	}

	.trs-mobile-menu-dialog::backdrop {
		background: transparent !important;
	}

	.trs-mobile-menu-dialog > .trs-main-navigation {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.trs-mobile-menu-dialog .trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu {
		position: static !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 0 max(20px, env(safe-area-inset-bottom)) !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		clip-path: none !important;
		overflow: visible !important;
	}

	/* Sticky drawer heading and close control. */
	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu > li.trs-mobile-menu-header {
		position: sticky !important;
		top: 0 !important;
		z-index: 4 !important;
		display: flex !important;
		min-height: 66px !important;
		flex: 0 0 auto !important;
		align-items: center !important;
		justify-content: space-between !important;
		margin: 0 0 8px !important;
		padding: max(12px, env(safe-area-inset-top)) 18px 12px !important;
		border-bottom: 1px solid #d7dee8 !important;
		background: rgba(255, 255, 255, 0.97) !important;
		box-shadow: 0 4px 12px rgba(42, 53, 71, 0.06) !important;
		backdrop-filter: blur(10px) !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .trs-mobile-menu-title {
		margin: 0 !important;
		padding: 0 !important;
		color: #2a3547 !important;
		font-family: "Bayon", Arial, sans-serif !important;
		font-size: 25px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		letter-spacing: 0.4px !important;
		text-transform: uppercase !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .trs-mobile-menu-close {
		display: inline-flex !important;
		width: 44px !important;
		height: 44px !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid #d7dee8 !important;
		border-radius: 50% !important;
		background: #f7f9fc !important;
		color: #2a3547 !important;
		cursor: pointer !important;
		font: inherit !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .trs-mobile-menu-close span {
		display: block !important;
		margin-top: -2px !important;
		font-family: Arial, sans-serif !important;
		font-size: 31px !important;
		font-weight: 300 !important;
		line-height: 1 !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .trs-mobile-menu-close:hover,
	.trs-main-navigation.trs-mobile-menu-enhanced .trs-mobile-menu-close:focus-visible {
		border-color: #d1232a !important;
		background: #fff0f1 !important;
		color: #d1232a !important;
		outline: 0 !important;
	}

	/* Top-level navigation: clean, large touch targets. */
	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu li {
		position: relative !important;
		width: auto !important;
		margin: 0 16px !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu li > a {
		display: flex !important;
		width: 100% !important;
		min-height: 50px !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 10px 52px 10px 14px !important;
		border: 0 !important;
		border-bottom: 1px solid #edf0f4 !important;
		background: transparent !important;
		color: #2a3547 !important;
		font-family: "Bayon", Arial, sans-serif !important;
		font-size: 18px !important;
		font-weight: 400 !important;
		line-height: 1.2 !important;
		letter-spacing: 0.2px !important;
		text-transform: uppercase !important;
		opacity: 1 !important;
		transition: color 160ms ease, background-color 160ms ease !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu > li.current-menu-item > a,
	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu > li.current-menu-parent > a,
	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu > li.current-menu-ancestor > a,
	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu li > a:hover,
	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu li > a:focus-visible {
		background: #fff5f5 !important;
		color: #d1232a !important;
		outline: 0 !important;
	}

	/* Independent chevron buttons preserve the parent link destinations. */
	.trs-main-navigation.trs-mobile-menu-enhanced .trs-submenu-toggle {
		position: absolute !important;
		top: 3px !important;
		right: 3px !important;
		z-index: 2 !important;
		display: inline-flex !important;
		width: 44px !important;
		height: 44px !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 5px !important;
		background: transparent !important;
		color: #445e86 !important;
		cursor: pointer !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .trs-submenu-toggle span {
		display: block !important;
		width: 9px !important;
		height: 9px !important;
		margin-top: -5px !important;
		border-right: 2px solid currentColor !important;
		border-bottom: 2px solid currentColor !important;
		transform: rotate(45deg) !important;
		transition: margin 160ms ease, transform 160ms ease !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.trs-submenu-toggle[aria-expanded="true"] {
		background: #edf2f7 !important;
		color: #d1232a !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.trs-submenu-toggle[aria-expanded="true"] span {
		margin-top: 5px !important;
		transform: rotate(225deg) !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .trs-submenu-toggle:hover,
	.trs-main-navigation.trs-mobile-menu-enhanced .trs-submenu-toggle:focus-visible {
		background: #edf2f7 !important;
		outline: 0 !important;
	}

	/* Nested accordions replace Divi's permanently expanded mobile tree. */
	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu ul.sub-menu {
		position: static !important;
		display: block !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 3px 0 10px !important;
		padding: 6px 0 !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		border: 1px solid #e0e6ee !important;
		border-radius: 7px !important;
		background: #f8fafc !important;
		box-shadow: none !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu ul.sub-menu[hidden] {
		display: none !important;
	}

	/* Divi marks Shop and its ancestors as current and may re-open their lists.
	 * The add-on's own state must remain authoritative on every page.
	 */
	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu li.menu-item-has-children.trs-submenu-closed > ul.sub-menu {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu li.menu-item-has-children.trs-submenu-open > ul.sub-menu {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu ul.sub-menu li {
		margin: 0 8px !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu ul.sub-menu li > a {
		min-height: 44px !important;
		padding: 9px 48px 9px 13px !important;
		font-family: "Bayon", Arial, sans-serif !important;
		font-size: 17px !important;
		font-weight: 400 !important;
		line-height: 1.25 !important;
		letter-spacing: 0.2px !important;
		text-transform: uppercase !important;
	}

	/* Shop mega-menu section headings become second-level accordion cards. */
	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu > li.mega-menu > ul.sub-menu > li > a,
	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu li.menu-heading > a {
		min-height: 46px !important;
		margin: 3px 0 !important;
		padding: 9px 48px 9px 13px !important;
		border: 0 !important;
		border-left: 3px solid #445e86 !important;
		border-radius: 5px !important;
		background: #edf2f7 !important;
		color: #2a3547 !important;
		font-family: "Bayon", Arial, sans-serif !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 1.2 !important;
		text-transform: uppercase !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu ul.sub-menu ul.sub-menu {
		margin: 2px 4px 9px 10px !important;
		border-color: #e5eaf0 !important;
		background: #ffffff !important;
	}

	/* Existing TuneRS and CryoDetail menu accents. */
	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu li.menu-cryodetail > a {
		color: #488fcc !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu li.menu-cryodetail > a:hover,
	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu li.menu-cryodetail > a:focus-visible {
		color: #99ca3c !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced
	.et_mobile_menu li.menu-tuners-products > a .tuners-rs {
		color: #d1232a !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu > li.trs-mobile-menu-search {
		margin: 0 16px 14px !important;
		padding: 8px 0 14px !important;
		border-bottom: 1px solid #e0e6ee !important;
	}

	.trs-mobile-product-search {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		gap: 8px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	.trs-mobile-product-search label {
		grid-column: 1 / -1 !important;
		margin: 0 !important;
		color: #2a3547 !important;
		font-family: "Open Sans", Arial, sans-serif !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1.4 !important;
	}

	.trs-mobile-product-search input[type="search"] {
		width: 100% !important;
		min-width: 0 !important;
		min-height: 48px !important;
		margin: 0 !important;
		padding: 10px 12px !important;
		border: 1px solid #a5b1c3 !important;
		border-radius: 4px !important;
		background: #ffffff !important;
		color: #2a3547 !important;
		font-family: "Open Sans", Arial, sans-serif !important;
		font-size: 16px !important;
		line-height: 1.4 !important;
	}

	.trs-mobile-product-search button {
		min-width: 80px !important;
		min-height: 48px !important;
		margin: 0 !important;
		padding: 8px 14px !important;
		border: 1px solid #d1232a !important;
		border-radius: 4px !important;
		background: #d1232a !important;
		color: #ffffff !important;
		font-family: "Bayon", Arial, sans-serif !important;
		font-size: 18px !important;
		font-weight: 400 !important;
		line-height: 1.2 !important;
		cursor: pointer !important;
	}

	.trs-mobile-product-search button::before,
	.trs-mobile-product-search button::after {
		content: none !important;
		display: none !important;
	}

	.trs-mobile-product-search input:focus-visible,
	.trs-mobile-product-search button:focus-visible {
		outline: 2px solid #445e86 !important;
		outline-offset: 2px !important;
	}

	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu ul.sub-menu .trs-submenu-toggle {
		top: 0 !important;
	}

}

@media (prefers-reduced-motion: reduce) {
	.trs-main-navigation.trs-mobile-menu-enhanced .et_mobile_menu,
	.trs-main-navigation.trs-mobile-menu-enhanced .trs-submenu-toggle span {
		transition: none !important;
	}
}