:root {
			/*
			 * فاصله مگامنو از پایین همان لینک منویی که هاور می‌شود.
			 * مقدار مثبت = پایین‌تر، مقدار منفی = بالاتر.
			 */
			--grmm-margin-top: 10px;

			/* موقعیت اولیه؛ هنگام هاور از پایین لینک منو محاسبه می‌شود */
			--grmm-top: 80px;

			/* رنگ‌های اصلی مگامنو */
			--grmm-blue: #00aeef;
			--grmm-orange: #ff9d00;
			--grmm-red: #ff3d57;
		}

		.gr-mega-menu {
			position: static !important;
		}

		.grmm-wrap {
			position: fixed;
			z-index: 999999;
			top: var(--grmm-top);
			right: 0;
			left: 0;
			width: 100vw;
			height: 520px;
			max-height:
				calc(
					100vh -
					var(--grmm-top) -
					23px
				);
			margin-top: var(--grmm-margin-top);
			margin-bottom: 24px;
			padding:
				27px
				clamp(
					32px,
					5.1vw,
					98px
				)
				30px;
			overflow: visible;
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
			color: #fff;
			background:
				rgba(2, 0, 31, .88);
			backdrop-filter:
				blur(18px)
				saturate(108%);
			-webkit-backdrop-filter:
				blur(18px)
				saturate(108%);
			transform: translateZ(0);
			-webkit-transform: translateZ(0);
			will-change:
				opacity,
				backdrop-filter;
			transition: none !important;
		}

		.grmm-wrap::before {
			position: absolute;
			z-index: 2;
			right: 0;
			bottom: 100%;
			left: 0;
			display: block;
			width: 100%;
			height: 30px;
			content: "";
			background: transparent;
			pointer-events: auto;
		}

		.gr-mega-menu.grmm-open
		> .grmm-wrap {
			visibility: visible;
			opacity: 1;
			pointer-events: auto;
		}

		.grmm-wrap,
		.grmm-wrap button,
		.grmm-wrap a,
		.grmm-wrap span {
			font-family:
				"Vazirmatn",
				"IRANSansX",
				"IRANS",
				"Yekan Bakh",
				Tahoma,
				sans-serif !important;
		}

		.grmm-mobile-heading,
		.grmm-mobile-subtitle,
		.grmm-cat-image,
		.grmm-cat-arrow {
			display: none;
		}

		.grmm-mega {
			display: flex;
			direction: rtl;
			width: 100%;
			max-width: 1720px;
			height: 100%;
			margin: 0 auto;
			overflow: hidden;
		}

		.grmm-cats {
			display: flex;
			width: 330px;
			flex: none;
			flex-direction: column;
			padding: 0 0 0 48px;
			overflow: hidden;
			border: 0 !important;
		}

		.grmm-cat-list {
			flex: 1;
			padding: 1px 0;
			overflow-x: hidden;
			overflow-y: auto;
			scrollbar-width: thin;
			scrollbar-color:
				rgba(255, 255, 255, .16)
				transparent;
		}

		.grmm-cat-list::-webkit-scrollbar {
			width: 4px;
		}

		.grmm-cat-list::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background:
				rgba(255, 255, 255, .16);
		}

		.grmm-cat {
			appearance: none;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 9px;
			width: calc(100% - 18px);
			min-height: 38px;
			margin: 0 4px 10px 14px;
			padding: 5px 10px;
			border: 0 !important;
			border-radius: 5px;
			outline: 0;
			color: #f2f2f2;
			background: transparent;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.45;
			text-align: right;
			cursor: pointer;
			box-shadow: none !important;
			transition:
				color .15s ease,
				background .15s ease;
		}

		.grmm-cat:hover,
		.grmm-cat.is-active {
			color: #fff;
			background:
				rgba(43, 43, 45, .92);
		}

		.grmm-cat-label {
			min-width: 0;
			overflow: hidden;
			font-size: inherit;
			font-weight: 400;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.grmm-badge {
			flex: none;
			padding: 2px 7px 1px;
			border:
				1px solid
				currentColor !important;
			border-radius: 3px;
			background:
				transparent !important;
			font-size: 10px;
			font-weight: 500;
			line-height: 1.5;
		}

		.grmm-badge-hot {
			color: #ff3d57 !important;
			border-color:
				#ff3d57 !important;
			-webkit-text-fill-color:
				#ff3d57 !important;
		}

		.grmm-badge-new {
			color: #00aeef !important;
			border-color:
				#00aeef !important;
			-webkit-text-fill-color:
				#00aeef !important;
		}

		.grmm-badge-sale {
			color: var(--grmm-orange);
		}

		.grmm-shop-button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 230px;
			min-height: 48px;
			margin: 22px 13px 0;
			padding: 8px 16px;
			border:
				1px solid
				var(--grmm-blue) !important;
			border-radius: 8px;
			color:
				var(--grmm-blue) !important;
			background: transparent;
			font-size: 15px;
			font-weight: 500;
			text-decoration: none !important;
			box-shadow: none !important;
		}

		.grmm-products {
			min-width: 0;
			flex: 1;
			padding: 0;
			overflow-x: hidden;
			overflow-y: auto;
		}

		.grmm-panel {
			display: none;
			width: 100%;
		}

		.grmm-panel.is-active {
			display: block;
			animation:
				grmmPanelIn .18s ease;
		}

		@keyframes grmmPanelIn {
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		.grmm-grid {
			display: grid;
			grid-template-columns:
				repeat(
					3,
					minmax(0, 1fr)
				);
			gap: 14px 16px;
		}

		.grmm-card,
		.grmm-card:hover {
			display: flex;
			direction: rtl;
			align-items: center;
			min-width: 0;
			height: 112px;
			padding: 9px 12px;
			overflow: hidden;
			border: 0 !important;
			border-radius: 5px;
			color: #fff !important;
			background:
				rgba(29, 29, 31, .94);
			box-shadow: none !important;
			text-decoration: none !important;
			transform: none !important;
		}

		.grmm-thumb {
			display: grid;
			width: 78px;
			height: 78px;
			flex: none;
			place-items: center;
			overflow: hidden;
			background: transparent;
		}

		.grmm-thumb img {
			display: block;
			width: 100%;
			height: 100%;
			margin: 0;
			object-fit: contain;
			transform: scale(1);
			transform-origin: center;
			transition:
				transform .24s ease;
		}

		.grmm-card:hover
		.grmm-thumb img {
			transform: scale(1.09);
		}

		.grmm-card-content {
			display: flex;
			min-width: 0;
			flex: 1;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding-right: 11px;
			text-align: right;
		}

		.grmm-card-status {
			margin: 0 0 4px;
			font-size: 10px;
			font-weight: 500;
			line-height: 1.5;
		}

		.grmm-card-status.is-hot {
			color: #ff3d57 !important;
			-webkit-text-fill-color:
				#ff3d57 !important;
		}

		.grmm-card-status.is-new {
			color: #00aeef !important;
			-webkit-text-fill-color:
				#00aeef !important;
		}

		.grmm-card-status.is-sale {
			color: var(--grmm-orange);
		}

		.grmm-name {
			display: -webkit-box;
			overflow: hidden;
			color: #f6f6f6;
			font-size: 13px;
			font-weight: 500;
			line-height: 1.5;
			text-align: right;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.grmm-footer {
			margin-top: 17px;
			text-align: right;
		}

		.grmm-footer a {
			display: inline-block;
			color:
				var(--grmm-blue) !important;
			font-size: 13px;
			font-weight: 500;
			text-decoration: none !important;
		}

		@media (max-width: 1380px) {
			.grmm-wrap {
				padding-right: 42px;
				padding-left: 42px;
			}

			.grmm-cats {
				width: 285px;
				padding-left: 34px;
			}

			.grmm-card,
			.grmm-card:hover {
				height: 106px;
				padding: 8px 10px;
			}

			.grmm-thumb {
				width: 70px;
				height: 72px;
			}
		}

		@media (max-width: 1120px) {
			.grmm-grid {
				grid-template-columns:
					repeat(
						2,
						minmax(0, 1fr)
					);
			}

			.grmm-card:nth-child(n+5) {
				display: none;
			}
		}

		/*--------------------------------------------------
		# حالت موبایل
		--------------------------------------------------*/

		/* مرز حالت موبایل؛ اگر این عدد را تغییر دادید، عدد مشابه در تابع isMobileMenu را هم تغییر دهید */
		@media (max-width: 1024px) {
			.gr-mega-menu {
				position: relative !important;
			}

			.gr-mega-menu
			> .grmm-wrap {
				position: static !important;
				z-index: auto !important;
				top: auto !important;
				right: auto !important;
				left: auto !important;
				display: none !important;
				width: 100% !important;
				max-width: 100% !important;
				height: auto !important;
				max-height: none !important;
				margin: 0 !important;
				padding: 0 !important;
				overflow: hidden !important;
				visibility: hidden !important;
				opacity: 0 !important;
				pointer-events: none !important;
				color: #fff;
				background:
					rgba(2, 0, 31, .98);
				backdrop-filter: none;
				-webkit-backdrop-filter: none;
				transform: none !important;
				-webkit-transform: none !important;
				will-change: auto;
			}

			.gr-mega-menu.grmm-open
				> .grmm-wrap {
				display: block !important;
				visibility: visible !important;
				opacity: 1 !important;
				pointer-events: auto !important;
			}

			.grmm-wrap::before {
				display: none !important;
				content: none !important;
			}

			.grmm-mobile-heading {
				direction: rtl;
				display: grid;
				grid-template-columns:
					36px 1fr 36px;
				align-items: center;
				min-height: 48px;
				padding: 5px 10px;
				border-bottom:
					1px solid
					rgba(255, 255, 255, .1);
				background: #050505;
			}

			.grmm-mobile-back,
			.grmm-mobile-close {
				appearance: none;
				display: grid;
				width: 34px;
				height: 34px;
				margin: 0;
				padding: 0;
				place-items: center;
				border: 0 !important;
				border-radius: 0;
				color: #fff !important;
				background:
					transparent !important;
				font-size: 25px;
				line-height: 1;
				box-shadow: none !important;
				cursor: pointer;
			}

			.grmm-mobile-back {
				visibility: hidden;
				opacity: 0;
			}

			.grmm-wrap.grmm-mobile-panel-open
				.grmm-mobile-back {
				visibility: visible;
				opacity: 1;
			}

			.grmm-mobile-title {
				overflow: hidden;
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				text-align: center;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.grmm-mega {
				display: block !important;
				width: 100% !important;
				max-width: 100% !important;
				height: auto !important;
				margin: 0 !important;
				padding: 0 !important;
				overflow: visible !important;
			}

			.grmm-cats {
				display: flex !important;
				width: 100% !important;
				height: auto !important;
				flex-direction: column;
				margin: 0 !important;
				padding: 0 !important;
				overflow: visible !important;
			}

			.grmm-mobile-subtitle {
				display: block;
				padding: 15px 14px 8px;
				color:
					rgba(255, 255, 255, .62);
				font-size: 12px;
				font-weight: 400;
			}

			.grmm-cat-list {
				display: flex;
				width: 100%;
				max-height: 430px;
				flex-direction: column;
				padding: 0 10px 8px;
				overflow-x: hidden;
				overflow-y: auto;
			}

			.grmm-cat {
				display: flex !important;
				align-items: center !important;
				justify-content:
					flex-start !important;
				gap: 10px;
				width: 100% !important;
				min-height: 52px !important;
				margin: 0 !important;
				padding: 7px 5px !important;
				border: 0 !important;
				border-bottom:
					1px solid
					rgba(255, 255, 255, .045)
					!important;
				border-radius: 0 !important;
				color: #f3f3f3 !important;
				background:
					transparent !important;
				font-size: 13px !important;
				text-align: right;
				box-shadow: none !important;
			}

			.grmm-cat:hover,
			.grmm-cat:focus,
			.grmm-cat.is-active {
				color: #fff !important;
				background:
					rgba(255, 255, 255, .045)
					!important;
			}

			.grmm-cat-image {
				display: grid;
				width: 38px;
				height: 38px;
				flex: none;
				place-items: center;
				overflow: hidden;
				border-radius: 4px;
				background:
					rgba(255, 255, 255, .06);
			}

			.grmm-cat-image img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
			}

			.grmm-cat-label {
				min-width: 0;
				flex: 1;
				color: inherit !important;
				text-align: right;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.grmm-cat-arrow {
				display: block;
				width: 20px;
				flex: none;
				color:
					rgba(255, 255, 255, .7);
				font-size: 22px;
				line-height: 1;
				text-align: center;
			}

			.grmm-badge {
				margin-right: auto;
			}

			.grmm-shop-button {
				display: flex;
				width: calc(100% - 20px);
				min-height: 44px;
				margin: 8px 10px 14px;
				padding: 8px 14px;
				font-size: 13px;
			}

			.grmm-products {
				display: none !important;
				width: 100% !important;
				max-height: 480px;
				margin: 0;
				padding: 12px 10px 18px;
				overflow-x: hidden;
				overflow-y: auto;
			}

			.grmm-wrap.grmm-mobile-panel-open
				.grmm-cats {
				display: none !important;
			}

			.grmm-wrap.grmm-mobile-panel-open
				.grmm-products {
				display: block !important;
			}

			.grmm-panel {
				display: none !important;
				width: 100%;
			}

			.grmm-panel.is-active {
				display: block !important;
			}

			.grmm-grid {
				display: grid !important;
				grid-template-columns:
					1fr !important;
				gap: 9px !important;
				width: 100%;
			}

			.grmm-card,
			.grmm-card:hover,
			.grmm-card:nth-child(n+5) {
				display: flex !important;
				width: 100%;
				height: 84px !important;
				min-height: 84px;
				margin: 0;
				padding: 8px 10px !important;
				border-radius: 4px;
				background:
					rgba(29, 29, 31, .96);
			}

			.grmm-thumb {
				width: 64px !important;
				height: 64px !important;
			}

			.grmm-card-content {
				padding-right: 10px !important;
			}

			.grmm-name {
				font-size: 12px !important;
			}

			.grmm-footer {
				margin-top: 13px;
			}

			.grmm-footer a {
				font-size: 12px;
			}
		}