/* ==========================================================================
   Niu Nav Menu - Mobile Accordion
   Primary nav items become a vertical accordion list on mobile.
   ========================================================================== */

@media (max-width: 960px) {

	/* ── Nav is collapsed by default; burger toggles it open.
	   Uses the #id so it overrides the inline #niu-nav-menu rule
	   printed by output_inline_toggle_css() when v2 is active. ── */
	#niu-nav-menu.niu-nav-menu {
		display: none !important;
		margin: 0;
		padding: 12px 16px;
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	/* Open state: burger tapped — reveal the accordion inline (pushes page down) */
	#niu-nav-menu.niu-nav-menu--open {
		display: block !important;
	}

	/* ── Burger toggle (sits in header after the cart icon) ── */
	.niu-nav-burger {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		margin: 0 10px 0 0;
		border: 0;
		background: none;
		cursor: pointer;
		vertical-align: middle;
		line-height: 0;
		-webkit-appearance: none;
		appearance: none;
	}

	.niu-nav-burger svg {
		display: block;
		width: 24px;
		height: 24px;
	}

	/* Icon swap: burger when closed, X (close) when open */
	.niu-nav-burger .niu-nav-burger__close {
		display: none;
	}

	.niu-nav-burger--open .niu-nav-burger__open {
		display: none;
	}

	.niu-nav-burger--open .niu-nav-burger__close {
		display: block;
	}

	/* ── No legacy hamburger — always visible ── */
	.niu-nav-mobile-toggle {
		display: none !important;
	}

	/* ── Container: shared card by default ── */
	.niu-nav-menu__container {
		flex-direction: column;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	/* When an item is open, container loses its card — groups take over */
	.niu-nav-menu__container.niu-nav--has-open {
		background: none;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}

	.niu-nav-menu__scroll-area {
		display: flex;
		flex-direction: column;
		overflow: visible;
		box-shadow: none;
		border-radius: 0;
		width: 100%;
	}

	/* ── Pipe title segments: inline with space on mobile ── */
	.niu-title-seg {
		display: inline !important;
	}

	.niu-title-seg + .niu-title-seg::before {
		content: ' ';
	}

	/* ── List becomes vertical with gaps ── */
	.niu-nav-menu__list {
		flex-direction: column;
		white-space: normal;
		width: 100%;
		gap: 0;
		background: none;
	}

	/* ── Top-level items: inside shared card by default ── */
	.niu-nav-top-item {
		flex-direction: column;
		align-items: stretch;
		height: auto;
		width: 100%;
	}

	.niu-nav-top-link {
		justify-content: space-between;
		padding: 16px 20px;
		margin: 0;
		width: 100%;
		border-right: none;
		border-bottom: none !important;
		border-color: transparent !important;
		font-size: 15px;
		box-sizing: border-box;
		position: relative;
	}

	/* Inset border via pseudo — matches text padding */
	.niu-nav-top-link::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 20px;
		right: 20px;
		height: 1px;
		background: #e8e8e8;
	}

	.niu-nav-top-item:last-child > .niu-nav-top-link::after {
		display: none;
	}

	/* No color change on hover */
	.niu-nav-top-link:hover::after {
		background: #e8e8e8 !important;
	}

	/* ── Group card styling (above card / below card) ── */

	/* All items in a group get white bg */
	.niu-nav--has-open .niu-nav-group-first,
	.niu-nav--has-open .niu-nav-group-mid,
	.niu-nav--has-open .niu-nav-group-last {
		background: #fff;
	}

	/* Border between items inside a group */
	.niu-nav--has-open .niu-nav-group-first > .niu-nav-top-link,
	.niu-nav--has-open .niu-nav-group-mid > .niu-nav-top-link {
		border-bottom: 1px solid #f0f0f0;
	}

	.niu-nav--has-open .niu-nav-group-last > .niu-nav-top-link {
		border-bottom: none;
	}

	/* First item of group: top corners rounded */
	.niu-nav--has-open .niu-nav-group-first {
		border-radius: 8px 8px 0 0;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
		margin-top: 8px;
	}

	/* Middle items: no radius */
	.niu-nav--has-open .niu-nav-group-mid {
		border-radius: 0;
	}

	/* Last item of group: no border, bottom corners rounded + shadow */
	.niu-nav--has-open .niu-nav-group-last > .niu-nav-top-link::after {
		display: none !important;
	}

	.niu-nav--has-open .niu-nav-group-last {
		border-radius: 0 0 8px 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
		margin-bottom: 8px;
	}

	/* Single item that is both first and last */
	.niu-nav--has-open .niu-nav-group-first.niu-nav-group-last {
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.niu-nav--has-open .niu-nav-group-first.niu-nav-group-last > .niu-nav-top-link::after {
		display: none !important;
	}

	/* First group: no top margin (flush with top) */
	.niu-nav--has-open .niu-nav-menu__list > .niu-nav-group-first:first-child {
		margin-top: 0;
	}

	/* Icon color: red on mobile */
	.niu-nav-top-link .niu-nav-mega-category__icon svg,
	.niu-nav-top-link svg {
		color: #e41b1c;
		stroke: #e41b1c;
	}

	.niu-nav-top-link .niu-nav-mega-category__icon--custom {
		filter: none;
	}

	/* Replace FA chevron with custom SVG on mobile */
	.niu-nav-top-arrow {
		transition: transform 0.3s ease;
		font-size: 0 !important;
		width: 12px;
		height: 7px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M0.599976 0.599976L5.59998 5.59998L10.6 0.599976' stroke='%231E1E1C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.niu-nav-top-arrow::before {
		display: none !important;
	}

	/* Disable hover rotation on mobile — only rotate on active/click */
	.niu-nav-top-item--has-children:not(.niu-nav-top-item--nested):not(.niu-nav-top-item--mobile-open):hover .niu-nav-top-arrow {
		transform: none !important;
	}

	.niu-nav-top-item--active:not(.niu-nav-top-item--nested):not(.niu-nav-top-item--mobile-open) .niu-nav-top-arrow {
		transform: none !important;
	}

	.niu-nav-top-item--mobile-open > .niu-nav-top-link .niu-nav-top-arrow {
		transform: rotate(180deg) !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M0.599976 0.599976L5.59998 5.59998L10.6 0.599976' stroke='%23e41b1c' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	/* Remove hover/active bg on links — card handles it */
	.niu-nav-top-link:hover,
	.niu-nav-top-link:focus,
	.niu-nav-top-link:active,
	.niu-nav-top-item--has-children:hover > .niu-nav-top-link,
	.niu-nav-top-item--has-children.niu-nav-top-item--active > .niu-nav-top-link {
		background: none !important;
		color: inherit !important;
	}

	/* Open item always shows its border */
	.niu-nav-top-item--mobile-open > .niu-nav-top-link::after {
		display: block !important;
	}

	/* ── Open item: its own gray card ── */
	.niu-nav-top-item--mobile-open {
		background: #f6f6f6;
		border-radius: 8px;
		box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
		margin: 8px 0;
		overflow: hidden;
		color: #e41b1c;
	}

	.niu-nav-top-item--mobile-open > .niu-nav-top-link {
		color: #e41b1c !important;
		font-weight: bold;
	}

	.niu-nav-top-item--mobile-open .niu-nav-mega-dropdown {
		background: #f6f6f6 !important;
	}

	.niu-nav-top-item--mobile-open .niu-nav-mega-dropdown__inner {
		background: #f6f6f6 !important;
	}

	/* ── All mega dropdowns hidden by default ── */
	.niu-nav-mega-dropdown {
		display: none !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
	}

	.niu-nav-top-item--mobile-open > .niu-nav-mega-dropdown,
	.niu-nav-top-item--mobile-open > .niu-nav-mega-dropdown--nested {
		display: block !important;
	}

	/* ── Dropdown inner: stack vertically ── */
	.niu-nav-mega-dropdown__inner {
		display: flex !important;
		flex-direction: column !important;
		padding: 0 !important;
		gap: 0 !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
	}

	.niu-nav-mega-columns {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.niu-nav-mega-categories {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* ── Categories: single column on mobile — override all col classes ── */
	.niu-nav-mega-columns {
		flex: none !important;
		width: 100% !important;
	}

	.niu-nav-mega-categories,
	.niu-cols-2 .niu-nav-mega-categories,
	.niu-cols-3 .niu-nav-mega-categories,
	.niu-cols-4 .niu-nav-mega-categories,
	.niu-nav-nested-panel.niu-cols-2 .niu-nav-mega-categories,
	.niu-nav-nested-panel.niu-cols-3 .niu-nav-mega-categories,
	.niu-nav-nested-panel.niu-cols-4 .niu-nav-mega-categories,
	.niu-nav-mega-dropdown--no-extras .niu-nav-mega-categories {
		columns: 1 !important;
		column-gap: 0 !important;
		column-rule: none !important;
		padding: 0 !important;
		display: block !important;
		grid-template-columns: none !important;
	}

	/* ── Category items: keep category + sub-links together ── */
	.niu-nav-mega-category {
		margin-bottom: 0 !important;
		break-inside: avoid !important;
		break-before: auto !important;
		break-after: auto !important;
		position: relative;
	}

	.niu-nav-mega-category.niu-col-break {
		break-before: auto !important;
	}

	.niu-nav-mega-category__link {
		padding: 14px 20px;
		border-bottom: none !important;
		border-color: transparent !important;
		font-size: 14px;
		position: relative;
		align-items: center;
	}

	/* Inset divider line under each row (sits on the <li>, not the link) */
	.niu-nav-mega-category::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 20px;
		right: 20px;
		height: 1px;
		background: #e8e8e8;
		pointer-events: none;
	}

	.niu-nav-mega-category:last-child::after {
		display: none;
	}

	/* If category has sub-links (and is not an accordion), move the border
	   to the last sub-link so it wraps the whole always-open group */
	.niu-nav-mega-category--has-children > .niu-nav-mega-category__link::after {
		display: none;
	}

	.niu-nav-mega-sublink {
		position: relative;
	}

	.niu-nav-mega-sublinks > .niu-nav-mega-sublink:last-child::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 20px;
		right: 20px;
		height: 1px;
		background: #e8e8e8;
		pointer-events: none;
	}

	.niu-nav-mega-category:last-child .niu-nav-mega-sublinks > .niu-nav-mega-sublink:last-child::after {
		display: none;
	}

	/* No hover color change on border or text */
	.niu-nav-mega-category__link:hover,
	.niu-nav-mega-category__link:focus {
		background: none !important;
		border-color: transparent !important;
		color: inherit;
		text-decoration: none;
	}

	/* ── Default sub-links: no borders, indented under the category ── */
	.niu-nav-mega-sublinks {
		padding: 0 !important;
	}

	.niu-nav-mega-sublink__link {
		padding: 6px 20px 6px 52px;
		border-bottom: none !important;
		border-color: transparent !important;
		font-size: 14px;
		color: #686868;
		font-weight: 400;
	}

	.niu-nav-mega-sublinks > .niu-nav-mega-sublink:last-child {
		padding-bottom: 14px;
	}

	.niu-nav-mega-sublink__link:hover,
	.niu-nav-mega-sublink__link:focus {
		border-color: transparent !important;
		text-decoration: none;
	}

	/* ==========================================================================
	   Accordion card — ONLY for categories whose sub-links have their own
	   children (child-of-child / deeper dropdown, e.g. sub-links with brands).
	   Plain categories (leaf sub-links only) keep the default always-open look
	   defined above. Gated via :has() on the child-of-child marker class.
	   ========================================================================== */
	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) {
		--niu-accordion: 1;
	}

	/* Category header: title left, chevron right (› collapsed, ⌄ open) */
	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-category__link .niu-nav-mega-category__title {
		flex: 1;
	}

	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-category__link::after {
		content: '\f054'; /* chevron-right */
		font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';
		font-weight: 900;
		font-size: 12px;
		color: #9a9a9a;
		flex-shrink: 0;
		margin-left: 12px;
		transition: transform 0.25s ease, color 0.25s ease;
		display: inline-block;
	}

	/* Collapse the sub-links by default */
	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-sublinks {
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.3s ease;
	}

	/* Open state — expand + card treatment */
	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children).niu-nav-mega-category--mobile-open > .niu-nav-mega-sublinks {
		max-height: 2000px;
	}

	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children).niu-nav-mega-category--mobile-open {
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		margin: 8px 16px !important;
		overflow: hidden;
	}

	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children).niu-nav-mega-category--mobile-open::after {
		display: none; /* card has its own edges, drop the row divider */
	}

	/* Inside an open card, let the white background show through */
	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children).niu-nav-mega-category--mobile-open > .niu-nav-mega-category__link,
	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children).niu-nav-mega-category--mobile-open .niu-nav-mega-sublink {
		background-color: transparent !important;
	}

	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children).niu-nav-mega-category--mobile-open > .niu-nav-mega-category__link .niu-nav-mega-category__title {
		color: #e41b1c;
		font-weight: 600;
	}

	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children).niu-nav-mega-category--mobile-open > .niu-nav-mega-category__link::after {
		content: '\f078'; /* chevron-down */
		color: #e41b1c;
	}

	/* Accordion sub-links: row layout with › chevron + dividers */
	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-sublinks .niu-nav-mega-sublink__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 14px 20px;
		font-size: 14px;
		color: #1e1e1c;
	}

	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-sublinks .niu-nav-mega-sublink__link::after {
		content: '\f054'; /* chevron-right */
		font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';
		font-weight: 900;
		font-size: 12px;
		color: #9a9a9a;
		flex-shrink: 0;
	}

	/* Divider between accordion sub-links (override the default last-child-only rule) */
	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-sublinks > .niu-nav-mega-sublink:not(:last-child)::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 20px;
		right: 20px;
		height: 1px;
		background: #e8e8e8;
		pointer-events: none;
	}

	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-sublinks > .niu-nav-mega-sublink:last-child::after {
		display: none;
	}

	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-sublinks > .niu-nav-mega-sublink:last-child {
		padding-bottom: 0;
	}

	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-sublinks .niu-nav-mega-sublink__link:hover,
	.niu-nav-mega-category--has-children:has(.niu-nav-mega-sublink--has-children) > .niu-nav-mega-sublinks .niu-nav-mega-sublink__link:hover::after {
		color: #e41b1c;
	}

	/* ── Slider: stacked layout on mobile (image top, text below) ── */
	.niu-nav-slider {
		width: 100% !important;
		align-self: stretch !important;
		border-radius: 12px !important;
		margin: 12px 0 0;
	}

	.niu-nav-slider__slide {
		padding: 10px 16px 24px !important;
	}

	.niu-nav-slider__badge {
		position: relative;
		z-index: 20;
		left: 8px;
		margin-bottom: -4px !important;
	}

	.niu-nav-slider__body {
		flex-direction: column !important;
		align-items: center !important;
		gap: 0 !important;
	}

	.niu-nav-slider__image {
		width: 100% !important;
		height: auto !important;
		display: flex;
		padding: 0 0 8px;
	}

	.niu-nav-slider__image img {
		max-width: 240px;
		width: 100%;
		height: auto;
	}

	.niu-nav-slider__content {
		width: 100%;
		text-align: left;
	}

	.niu-nav-slider__subtitle-highlight {
		font-size: 28px !important;
	}

	.niu-nav-slider__subtitle-text {
		font-size: 24px !important;
	}

	.niu-nav-slider__desc {
		font-size: 13px !important;
		margin-bottom: 8px !important;
	}

	.niu-nav-slider__pricing {
		flex-direction: row !important;
		align-items: center !important;
		gap: 10px !important;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		padding-top: 12px;
		margin-top: 4px;
	}

	.niu-nav-slider__sale-price {
		font-size: 20px !important;
		font-family: "Gotham" !important;
		font-weight: 500 !important;
	}

	.niu-nav-slider__original-price {
		font-family: "Gotham" !important;
		color: #BCBCBC;
		font-size: 12px;
		font-weight: 300 !important;
	}

	.niu-nav-slider .swiper-pagination {
		padding-top: 0 !important;
		padding-bottom: 16px !important;
		position: relative !important;
		bottom: auto !important;
		left: auto !important;
		transform: none !important;
		text-align: center;
	}

	.niu-nav-brands {
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
	}

	/* General Brands */
	.niu-nav-brands__inner {
		border-radius: 12px !important;
		padding: 16px !important;
	}

	/* main flyout: brands */
	.niu-nav-flyout__panel-brands .niu-nav-brands__inner{
		background: #fff;
		padding: 16px !important;
	}

	/* category: brands */
	.niu-nav-flyout__default-brands .niu-nav-brands__inner{
		padding: 16px 0 !important;
	}

	/* Subcategory links: brands */
	.niu-nav-flyout__sublink-brands .niu-nav-brands__inner{
		background: #fff;
	}

	.niu-nav-brands__list {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		overflow-x: visible !important;
		gap: 0 !important;
		margin-left: 0 !important;
		padding: 8px 0 0 !important;
	}

	.niu-nav-brands__item {
		width: auto !important;
		flex-shrink: unset !important;
		border-radius: 0 !important;
		margin-right: -1px;
		margin-bottom: -1px;
	}

	/* Corner rounding applied via JS data attributes */
	.niu-nav-brands__item[data-corner~="tl"] { border-top-left-radius: 8px !important; }
	.niu-nav-brands__item[data-corner~="tr"] { border-top-right-radius: 8px !important; }
	.niu-nav-brands__item[data-corner~="bl"] { border-bottom-left-radius: 8px !important; }
	.niu-nav-brands__item[data-corner~="br"] { border-bottom-right-radius: 8px !important; }

	/* No grayscale or hover shadow on mobile */
	.niu-nav-brands__logo {
		opacity: 1 !important;
		mix-blend-mode: normal !important;
	}

	.niu-nav-brands__item:hover,
	.niu-nav-brands__item:focus,
	.niu-nav-brands__item:active {
		box-shadow: none !important;
	}

	/* Extras row: flex row on tablet, column on phone */
	.niu-nav-mega-dropdown__inner {
		/* Already flex column — slider and brands stack naturally */
	}

	/* Override the desktop dropdown inner to allow extras row */
	.niu-nav-top-item--mobile-open .niu-nav-mega-dropdown__inner {
		padding: 0 12px 12px !important;
	}

	/* Wrapper for slider + brands side by side on wider screens */
	.niu-nav-slider + .niu-nav-brands,
	.niu-nav-brands:last-child {
		margin-top: 12px !important;
	}

	/* ── Mobile action buttons (Parts & Repairs, Support) ── */
	.niu-nav-menu__mobile-actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px;
		padding: 4px 16px 12px;
		width: 100%;
		box-sizing: border-box;
	}

	.niu-nav-mobile-action {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		flex: 1;
		height: 48px;
		min-height: 48px;
		padding: 0 16px;
		border-radius: 4px;
		font-family: 'Gotham', sans-serif;
		font-size: 14px;
		font-weight: 500;
		text-decoration: none;
		box-sizing: border-box;
	}

	.niu-nav-mobile-action svg {
		flex-shrink: 0;
	}

	/* Secondary style (same as CTA) */
	.niu-nav-mobile-action--secondary {
		background: rgba(30, 30, 28, 0.08);
		color: #1e1e1c;
	}

	.niu-nav-mobile-action--secondary:hover {
		background: rgba(30, 30, 28, 0.12);
		text-decoration: none;
	}

	/* Primary style (red bg, white text) */
	.niu-nav-mobile-action--primary {
		background: #D2352C;
		color: #fff;
	}

	.niu-nav-mobile-action--primary:hover,
	.niu-nav-mobile-action--primary:focus,
	.niu-nav-mobile-action--primary:active,
	.niu-nav-mobile-action--primary:visited {
		background: #D2352C !important;
		color: #fff !important;
		text-decoration: none !important;
	}

	.niu-nav-mobile-action--primary:hover span,
	.niu-nav-mobile-action--primary:focus span,
	.niu-nav-mobile-action--primary:active span {
		color: #fff !important;
	}

	.niu-nav-top-item--cta {
		width: 100% !important;
	}

	.niu-nav-top-item--cta .niu-nav-top-link {
		background: rgba(30, 30, 28, 0.08) !important;
		color: #1e1e1c !important;
		margin: 0;
		border-radius: 4px;
		max-width: 100%;
		width: 100%;
		height: 48px;
		min-height: 48px;
		padding: 16px;
		font-size: 14px;
		font-weight: 500;
		box-shadow: none;
		justify-content: flex-start;
		border-bottom: none;
	}

	.niu-nav-top-item--cta .niu-nav-top-link:hover {
		background: rgba(30, 30, 28, 0.12) !important;
	}

	/* CTA icon: red on mobile, override all desktop white/invert rules */
	.niu-nav-top-item--cta .niu-nav-top-link svg,
	.niu-nav-top-item--cta .niu-nav-top-link svg *,
	.niu-nav-top-item--cta .niu-nav-mega-category__icon,
	.niu-nav-top-item--cta .niu-nav-mega-category__icon svg,
	.niu-nav-top-item--cta .niu-nav-mega-category__icon svg * {
		color: #e41b1c !important;
		stroke: #e41b1c !important;
		fill: none !important;
		filter: none !important;
		-webkit-filter: none !important;
	}

	.niu-nav-top-item--cta .niu-nav-mega-category__icon--custom,
	.niu-nav-top-item--cta .niu-nav-mega-category__icon--custom img {
		filter: none !important;
		-webkit-filter: none !important;
	}

	.niu-nav-top-item--cta .niu-nav-top-link:hover {
		background: rgba(30, 30, 28, 0.12) !important;
		color: #e41b1c !important;
	}

	/* ── Nested nav: flatten into accordion ── */
	.niu-nav-mega-dropdown--nested {
		animation: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		max-width: 100% !important;
		z-index: auto !important;
		border-radius: 0 !important;
	}

	/* Show the bar container but restyle as vertical accordion */
	.niu-nav-nested-bar {
		display: block !important;
		padding: 0 !important;
		border: none !important;
		border-top: none !important;
		background: none !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	.niu-nav-nested-bar__list {
		display: flex !important;
		flex-direction: column !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		overflow-x: visible !important;
		white-space: normal !important;
		height: auto !important;
		align-items: stretch !important;
	}

	/* Hide back button and label on mobile */
	.niu-nav-nested-bar__item--back,
	.niu-nav-nested-bar__item--label {
		display: none !important;
	}

	/* Tab items become accordion rows */
	.niu-nav-nested-bar__item {
		display: block !important;
		position: relative !important;
		white-space: normal !important;
		flex-shrink: 1 !important;
		height: auto !important;
	}

	.niu-nav-nested-bar__link {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 14px 20px !important;
		height: auto !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: #1e1e1c !important;
		text-decoration: none !important;
		position: relative !important;
		border-bottom: none !important;
		white-space: normal !important;
	}

	/* Inset border between nested tabs */
	.niu-nav-nested-bar__link::after {
		content: '' !important;
		position: absolute !important;
		bottom: 0 !important;
		left: 20px !important;
		right: 20px !important;
		height: 1px !important;
		background: #e8e8e8 !important;
		border: none !important;
	}

	.niu-nav-nested-bar__item:last-child > .niu-nav-nested-bar__link::after {
		display: none !important;
	}

	/* Replace FA chevron with custom SVG on nested tabs */
	.niu-nav-nested-chevron {
		transition: transform 0.3s ease;
		font-size: 0 !important;
		width: 12px;
		height: 7px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M0.599976 0.599976L5.59998 5.59998L10.6 0.599976' stroke='%231E1E1C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.niu-nav-nested-chevron::before {
		display: none !important;
	}

	/* Active nested tab: red text + rotated chevron */
	.niu-nav-nested-bar__item--mobile-open > .niu-nav-nested-bar__link {
		color: #e41b1c !important;
	}

	.niu-nav-nested-bar__item--mobile-open > .niu-nav-nested-bar__link .niu-nav-nested-chevron {
		transform: rotate(180deg) !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M0.599976 0.599976L5.59998 5.59998L10.6 0.599976' stroke='%23e41b1c' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	/* Hide border between active tab header and its content */
	.niu-nav-nested-bar__item--mobile-open > .niu-nav-nested-bar__link::after {
		display: none !important;
	}

	/* No hover effects on mobile */
	.niu-nav-nested-bar__link:hover,
	.niu-nav-nested-bar__link:focus {
		background: none !important;
		color: #1e1e1c !important;
		border-bottom-color: transparent !important;
	}

	.niu-nav-nested-bar__item--has-panel:hover > .niu-nav-nested-bar__link,
	.niu-nav-nested-bar__item--has-panel > .niu-nav-nested-bar__link:focus {
		border-bottom-color: transparent !important;
	}

	/* Panels hidden by default, shown on active */
	.niu-nav-nested-panel {
		display: none !important;
		position: static !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
	}

	.niu-nav-nested-bar__item--mobile-open > .niu-nav-nested-panel {
		display: block !important;
	}

	.niu-nav-nested-panel__row {
		flex-direction: column !important;
	}

	/* ── Flyout: flatten into accordion ── */
	.niu-nav-mega-dropdown--flyout .niu-nav-mega-dropdown__inner {
		display: block !important;
	}

	.niu-nav-flyout {
		flex-direction: column !important;
		min-height: auto !important;
	}

	.niu-nav-flyout__sidebar {
		width: 100% !important;
		border-right: none !important;
		padding: 0 !important;
	}

	.niu-nav-flyout__heading {
		display: none !important;
	}

	/* Show parent-level slider + brands stacked */
	.niu-nav-flyout__default {
		display: flex !important;
		flex-direction: column !important;
		padding: 12px 0 0 !important;
		gap: 0 !important;
	}

	.niu-nav-flyout__default-brands,
	.niu-nav-flyout__default-slider {
		width: 100% !important;
		padding: 0 !important;
	}

	/* Hide default when a category is open (CSS :has) */
	.niu-nav-flyout:has(.niu-nav-flyout__cat--active) > .niu-nav-flyout__default {
		display: none !important;
	}

	/* ── Flyout categories: accordion ── */
	.niu-nav-flyout__cat {
		border-bottom: 1px solid #f0f0f0;
	}

	.niu-nav-flyout__cat--active {
		background: #fff;
		border-radius: 6px;
		border-bottom: none;
		overflow: hidden;
	}

	.niu-nav-flyout__cat--active > .niu-nav-flyout__cat-link {
		background: #fff;
	}

	.niu-nav-flyout__cat--active > .niu-nav-flyout__panel {
		background: #fff !important;
	}

	.niu-nav-flyout__cat-link {
		padding: 12px 8px;
		margin: 0;
	}

	.niu-nav-flyout__cat-link:hover,
	.niu-nav-flyout__cat-link:focus {
		background: none !important;
	}

	/* Category chevron rotates down when active */
	.niu-nav-flyout__cat--active > .niu-nav-flyout__cat-link .niu-nav-flyout__cat-chevron {
		transform: rotate(90deg);
	}

	/* Sub-link chevron rotates down when brands open */
	.niu-nav-flyout__sublink--brands-open .niu-nav-flyout__sublink-chevron {
		transform: rotate(90deg);
	}

	/* Remove red/active bg from sub-link when brands open */
	.niu-nav-flyout__sublink--brands-open .niu-nav-flyout__sublink-link {
		background: none !important;
	}

	.niu-nav-flyout__panel {
		position: static !important;
		display: none !important;
		background: none !important;
		padding: 0 !important;
		flex-direction: column !important;
	}

	.niu-nav-flyout__cat--active > .niu-nav-flyout__panel {
		display: block !important;
	}

	.niu-nav-flyout__panel-main {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		border-right: none !important;
	}

	.niu-nav-flyout__panel-title {
		display: none !important;
	}

	/* Category brands: show below sub-links inside the panel */
	.niu-nav-flyout__panel-brands {
		display: block !important;
		width: 100% !important;
		padding: 8px 0 !important;
	}

	.niu-nav-flyout__sublinks {
		margin: 0 !important;
		padding: 0 !important;
	}

	.niu-nav-flyout__sublink {
		border-bottom: none !important;
		position: relative;
	}

	.niu-nav-flyout__sublink::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 20px;
		right: 20px;
		height: 1px;
		background: #e8e8e8;
	}

	.niu-nav-flyout__sublink:last-child::after {
		display: none;
	}

	.niu-nav-flyout__sublink-link {
		padding: 16px 36px 16px 36px;
	}

	/* Hide chevron on sub-links without brands */
	.niu-nav-flyout__sublink:not(.niu-nav-flyout__sublink--has-brands) .niu-nav-flyout__sublink-chevron {
		display: none !important;
	}

	.niu-nav-flyout__sublink:not(.niu-nav-flyout__sublink--has-brands) .niu-nav-flyout__sublink-link:hover,
	.niu-nav-flyout__sublink:not(.niu-nav-flyout__sublink--has-brands) .niu-nav-flyout__sublink-link:focus {
		background: none !important;
		color: inherit !important;
	}

	/* Chevron: bigger tap target on mobile */
	.niu-nav-flyout__sublink--has-brands .niu-nav-flyout__sublink-chevron {
		padding: 10px 4px 10px 16px !important;
		margin: -10px -4px -10px 0;
		cursor: pointer;
	}

	/* ── Sub-link brands: hidden by default, accordion on tap ── */
	.niu-nav-flyout__sublink-brands {
		display: none;
		background: #fff;
		border-radius: 8px;
		padding: 4px 20px 8px 20px;
	}

	.niu-nav-flyout__sublink-brands .niu-nav-brands__title{
		color: #1E1E1C;
		font-family: "Gotham Book";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		text-transform: capitalize;
	}

	.niu-nav-flyout__sublink--brands-open > .niu-nav-flyout__sublink-brands {
		display: block !important;
	}


}

/* ── Phone only: sub-link brands 2x2 grid ── */
@media (max-width: 768px) {
	.niu-nav-flyout__sublink-brands .niu-nav-brands__list {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ── Tablet: 2 columns for categories + slider/brands side by side ── */
@media (min-width: 769px) and (max-width: 960px) {
	.niu-nav-mega-categories,
	.niu-cols-2 .niu-nav-mega-categories,
	.niu-cols-3 .niu-nav-mega-categories,
	.niu-cols-4 .niu-nav-mega-categories,
	.niu-nav-nested-panel.niu-cols-2 .niu-nav-mega-categories,
	.niu-nav-nested-panel.niu-cols-3 .niu-nav-mega-categories,
	.niu-nav-nested-panel.niu-cols-4 .niu-nav-mega-categories,
	.niu-nav-mega-dropdown--no-extras .niu-nav-mega-categories {
		columns: 2 !important;
		display: block !important;
		grid-template-columns: none !important;
	}

	/* Slider + brands stacked on all mobile/tablet sizes */
}

/* ── Phone only: square brand items ── */
@media (max-width: 768px) {
	.niu-nav-brands__item {
		height: auto !important;
		aspect-ratio: 1 / 1;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 12px !important;
		box-sizing: border-box !important;
	}
}





/* Hide back button and label on secondary naigation on mobile */
@media (max-width: 960px){
	.niu-nav-nested-bar__item--back,
	.niu-nav-nested-bar__item.niu-nav-nested-bar__item--label {
		display:none !important;
	}

	.niu-nav-nested-panel__row .niu-nav-mega-columns .niu-nav-mega-categories .niu-nav-mega-category__link ,
	.niu-nav-nested-panel__row .niu-nav-mega-columns .niu-nav-mega-sublink,
	.niu-nav-nested-panel {
		background-color: rgb(246, 246, 246) !important;
	}


	.niu-nav-nested-panel__row .niu-nav-mega-columns .niu-nav-mega-sublink{
		margin-bottom:0;
	}

	.niu-nav-top-item.niu-nav-top-item--cta {
		margin: 24px 16px 4px 16px !important;
		width: auto !important;
	}

}

/* Hidden on desktop */
@media (min-width: 961px) {
	.niu-nav-menu__mobile-actions {
		display: none !important;
	}

	.niu-nav-burger {
		display: none !important;
	}
}