.npc-sidebar-menu-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;

	/* hide scrollbar */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.npc-sidebar-menu-wrap::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* Desktop: fixed max height, no internal scrolling, bottom gets clipped */
@media (min-width: 1025px) {
	.npc-sidebar-menu-wrap {
		max-height: 440px !important;
		height: auto !important;
		overflow-y: hidden !important;
	}
}

/* Tablet + mobile: keep internal scrolling */
@media (max-width: 1024px) {
	.npc-sidebar-menu-wrap {
		max-height: 480px;
		overflow-y: auto;
	}
}

.npc-sidebar-menu {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.npc-sidebar-menu .npc-menu,
.npc-sidebar-menu .npc-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.npc-sidebar-menu .npc-menu > li,
.npc-sidebar-menu .npc-menu li {
	width: 100%;
	position: relative;
}

.npc-sidebar-menu .npc-menu-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.npc-sidebar-menu .npc-menu-toggle,
.npc-sidebar-menu .npc-menu-toggle-spacer {
	width: 22px;
	min-width: 22px;
	height: 22px;
	flex: 0 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.npc-sidebar-menu .npc-menu-toggle {
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.npc-sidebar-menu .npc-menu-toggle:focus {
	outline: none;
	box-shadow: none;
}

.npc-sidebar-menu .npc-menu-toggle-spacer {
	visibility: hidden;
}

.npc-sidebar-menu .npc-menu-chevron {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 3px solid #E30613;
	border-bottom: 3px solid #E30613;
	transform: rotate(-45deg);
	margin-top: -1px;
}

.npc-sidebar-menu li.is-open > .npc-menu-row .npc-menu-chevron {
	transform: rotate(-45deg);
}

.npc-sidebar-menu .npc-menu-link {
	display: block;
	width: 100%;
	padding: 7px 0;
	text-decoration: none;
	color: #000;
	line-height: 1;
	font-family: Georgia, "Times New Roman", serif;
}

.npc-sidebar-menu .menu-item-has-children > .npc-menu-row > .npc-menu-link {
	font-weight: 700;
	color: #000;
}

.npc-sidebar-menu .menu-item-has-children.is-open > .npc-menu-row > .npc-menu-link,
.npc-sidebar-menu .menu-item-has-children.current-menu-parent > .npc-menu-row > .npc-menu-link,
.npc-sidebar-menu .menu-item-has-children.current-menu-ancestor > .npc-menu-row > .npc-menu-link,
.npc-sidebar-menu .menu-item-has-children.current-menu-item > .npc-menu-row > .npc-menu-link {
	color: #E30613;
}

.npc-sidebar-menu .npc-menu-link:hover,
.npc-sidebar-menu .current-menu-item > .npc-menu-row > .npc-menu-link,
.npc-sidebar-menu .current-menu-parent > .npc-menu-row > .npc-menu-link,
.npc-sidebar-menu .current-menu-ancestor > .npc-menu-row > .npc-menu-link {
	color: #E30613;
}

.npc-sidebar-menu .sub-menu {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(-4px);
	transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
	padding-left: 30px;
}

.npc-sidebar-menu li.is-open > .sub-menu {
	max-height: 1600px; /* CSS fallback before JS measures the exact open height. */
	opacity: 1;
	transform: translateY(0);
}

.npc-sidebar-menu .sub-menu .npc-menu-link {
	padding: 5px 0;
	line-height: 1;
	font-weight: 400;
}

.npc-sidebar-menu .sub-menu .sub-menu {
	padding-left: 22px;
}

.npc-menu-shell {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	flex: 0 0 100% !important;
	align-self: flex-start !important;
	overflow: hidden !important;
}

.npc-menu-shell > .e-con-inner,
.npc-menu-shell .elementor-widget,
.npc-menu-shell .elementor-widget-wrap,
.npc-menu-shell .elementor-widget-container,
.npc-menu-shell .elementor-shortcode {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.npc-menu-shell .npc-sidebar-menu-wrap,
.npc-menu-shell .npc-sidebar-menu {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* =========================================
   MOBILE / TABLET HAMBURGER TOGGLE
   ========================================= */

.npc-mobile-menu-box {
	width: 100%;
	max-width: 100%;
}

.npc-mobile-menu-toggle {
	display: none;
	position: relative;
	width: 100%;
	min-height: 35px;
	padding: 0;
	border: 1px solid #d5d8dc;
	background: #f7f7f7;
	color: #495157;
	cursor: pointer;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}

.npc-mobile-menu-toggle:hover,
.npc-mobile-menu-toggle:focus {
	background: #f7f7f7;
	border-color: #d5d8dc;
	color: #495157;
	outline: none;
	box-shadow: none;
}

.npc-mobile-menu-toggle-icon,
.npc-mobile-menu-toggle-icon::before,
.npc-mobile-menu-toggle-icon::after {
	position: absolute;
	display: block;
	width: 22px;
	height: 3px;
	background: #495157;
	transition: transform 0.25s ease, top 0.25s ease, background 0.2s ease;
	content: "";
}

.npc-mobile-menu-toggle-icon {
	position: relative;
	background: #495157;
}

.npc-mobile-menu-toggle-icon::before {
	top: -8px;
	left: 0;
}

.npc-mobile-menu-toggle-icon::after {
	top: 8px;
	left: 0;
}

/* Desktop */
@media (min-width: 1025px) {
	.npc-mobile-menu-toggle {
		display: none !important;
	}

	.npc-mobile-menu-box > .npc-sidebar-menu-wrap {
		display: block !important;
	}
}

/* Tablet + Mobile */
@media (max-width: 1024px) {
	.npc-mobile-menu-toggle {
		display: inline-flex !important;
	}

	/*
	 * Smooth mobile/tablet open-close.
	 * Do not use display:none here, because display cannot animate.
	 */
	.npc-mobile-menu-box > .npc-sidebar-menu-wrap {
		display: block;
		margin-top: 0;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		overflow-y: auto;
		transform: translateY(-6px);
		transition:
			max-height 0.42s ease,
			opacity 0.22s ease,
			transform 0.22s ease,
			margin-top 0.22s ease,
			visibility 0s linear 0.42s;
	}

	.npc-mobile-menu-box.is-open > .npc-sidebar-menu-wrap {
		margin-top: 10px;
		max-height: 480px;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition:
			max-height 0.42s ease,
			opacity 0.22s ease,
			transform 0.22s ease,
			margin-top 0.22s ease,
			visibility 0s linear 0s;
	}

	.npc-mobile-menu-box.is-open .npc-mobile-menu-toggle-icon {
		background: transparent;
	}

	.npc-mobile-menu-box.is-open .npc-mobile-menu-toggle-icon::before {
		top: 0;
		transform: rotate(45deg);
	}

	.npc-mobile-menu-box.is-open .npc-mobile-menu-toggle-icon::after {
		top: 0;
		transform: rotate(-45deg);
	}
}

/* Tablet only fix for full-width hamburger layout */
@media (min-width: 768px) and (max-width: 1024px) {
	.npc-mobile-menu-box {
		width: auto;
		max-width: none;
	}

	.npc-mobile-menu-toggle {
		display: flex !important;
		width: 100%;
		min-height: 40px;
		height: 40px;
		margin: 0;
	}

	.npc-mobile-menu-box > .npc-sidebar-menu-wrap {
		margin-top: 0;
	}
}

/* =========================================
   CHILD ITEM DASH + FONT SIZE TWEAK
   ========================================= */

/* Slightly larger top-level menu items */
.npc-sidebar-menu > .npc-menu > li > .npc-menu-row > .npc-menu-link {
	font-size: 16px;
}

/* Slightly smaller child items */
.npc-sidebar-menu .sub-menu .npc-menu-link {
	font-size: 15px;
	padding: 5px 0 5px 14px;
	position: relative;
}

/* Add - sign to the left of each child item */
.npc-sidebar-menu .sub-menu .npc-menu-link::before {
	content: "\2022";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: currentColor;
	font-weight: 400;
	line-height: 1;
}

/* =========================================
   PRODUCTS BRAND / CATEGORY VIEW SWITCHER
   Moved from inline PHP into this CSS file for cleaner plugin maintenance.
   ========================================= */

.npc-products-view-switcher {
	width: 100%;
	max-width: 100%;
}

.npc-products-view-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.npc-products-view-tabs {
	display: flex;
	gap: 6px;
	width: 100%;
	margin: 0 0 12px 0;
}

.npc-products-view-tab {
	flex: 1 1 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 7px 8px;
	border: 1px solid #d5d8dc;
	background: #f7f7f7;
	color: #000;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	border-radius: 8px;
	box-sizing: border-box;
	user-select: none;
}

/* Tablet only: Brand + Category together use maximum half width and stay left aligned */
@media (min-width: 768px) and (max-width: 1024px) {
	.npc-products-view-tabs {
		width: 50%;
		max-width: 50%;
		justify-content: flex-start;
		gap: 25px;
		margin: 3px 0 3px 0;
	}

	.npc-products-view-tab {
		flex: 1 1 0;
		min-width: 0;
		padding: 10px 0;
	}
}

.npc-products-view-tab:hover {
	color: #E30613;
}

.npc-products-view-radio-brand:checked ~ .npc-products-view-tabs .npc-products-view-tab-brand,
.npc-products-view-radio-type:checked ~ .npc-products-view-tabs .npc-products-view-tab-type {
	background: #E30613;
	border-color: #E30613;
	color: #fff;
}

/* Keep selected tab red even after sticky/sidebar scroll movement */
.npc-products-view-switcher.is-view-brand .npc-products-view-tab-brand,
.npc-products-view-switcher.is-view-type .npc-products-view-tab-type {
	background: #E30613 !important;
	border-color: #E30613 !important;
	color: #fff !important;
}

.npc-products-view-panels {
	overflow: hidden;
	transition: height 0.35s ease;
}

/*
 * Product tab switching fix:
 * when changing Brand/Category tabs, restore the selected open branch instantly.
 * This prevents the menu from visibly snapping/drop-opening downward.
 */
.npc-products-view-switcher.npc-products-view-is-switching .npc-products-view-panels,
.npc-products-view-switcher.npc-products-view-is-switching .sub-menu {
	transition: none !important;
}

.npc-products-view-panel {
	display: none;
}

/* Default fallback: keep Brand visible so sticky movement never leaves only the two tabs showing. */
.npc-products-view-panel-brand {
	display: block;
}

.npc-products-view-radio-brand:checked ~ .npc-products-view-panels .npc-products-view-panel-brand,
.npc-products-view-switcher.is-view-brand .npc-products-view-panel-brand {
	display: block !important;
}

.npc-products-view-radio-brand:checked ~ .npc-products-view-panels .npc-products-view-panel-type,
.npc-products-view-switcher.is-view-brand .npc-products-view-panel-type {
	display: none !important;
}

.npc-products-view-radio-type:checked ~ .npc-products-view-panels .npc-products-view-panel-brand,
.npc-products-view-switcher.is-view-type .npc-products-view-panel-brand {
	display: none !important;
}

.npc-products-view-radio-type:checked ~ .npc-products-view-panels .npc-products-view-panel-type,
.npc-products-view-switcher.is-view-type .npc-products-view-panel-type {
	display: block !important;
}

.npc-products-menu-by-type .npc-products-flat-type-item > .npc-menu-row > .npc-menu-link .npc-menu-text {
	font-weight: 700;
	color: #000;
}

.npc-products-menu-by-type .npc-products-flat-type-item.current-menu-item > .npc-menu-row > .npc-menu-link .npc-menu-text,
.npc-products-menu-by-type .npc-products-flat-type-item.current_page_item > .npc-menu-row > .npc-menu-link .npc-menu-text {
	font-weight: 700;
	color: #E30613;
}

.npc-products-menu-by-type .npc-products-flat-type-item > .npc-menu-row > .npc-products-type-static-toggle {
	pointer-events: none;
	cursor: default;
}

.npc-products-menu-by-type .npc-products-flat-type-item > .npc-menu-row > .npc-products-type-static-toggle .npc-menu-chevron {
	color: #E30613;
	border-color: #E30613;
}


/* =========================================
   ACTIVE STATE HARDENING
   ========================================= */

/* Keep active flat Blog Article items red even when the blog menu is rendered outside Products pages. */
.npc-sidebar-menu .npc-blog-articles-menu .npc-blog-article-menu-item.current-menu-item > .npc-menu-row > .npc-menu-link .npc-menu-text,
.npc-sidebar-menu .npc-blog-articles-menu .npc-blog-article-menu-item.current_page_item > .npc-menu-row > .npc-menu-link .npc-menu-text {
	font-weight: 700;
	color: #E30613;
}

/* Accessibility/current-page fallback. Does not change the visual design; it reinforces the same red active state. */
.npc-sidebar-menu .npc-menu-link[aria-current="page"],
.npc-sidebar-menu .npc-menu-link[aria-current="page"] .npc-menu-text {
	color: #E30613;
}