/* ============================================================
   AMIR SUITE — Desktop Nav Bar v3
   Gradient border: wrapper technique (only edge shows)
   ============================================================ */

@property --nd-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes nd-spin { to { --nd-angle: 360deg; } }

/* ══════════════════════════════════════════
   HORIZONTAL CENTERING — robust against margin conflicts
   Two separate style controls both touch horizontal spacing on
   .as-nd-gb-wrap: "حداکثر عرض منو" (sets max-width + margin-inline:auto)
   and "فاصله از لبه‌ها" (sets a literal margin: T R B L shorthand).
   Because both target the same selector, whichever rule Elementor
   prints later in the stylesheet wins for margin-left/right — so the
   "auto" centering could get silently cancelled even when "فاصله از
   لبه‌ها" is set to 0, leaving the bar hugging one side with all the
   leftover space dumped on the other (the "left gap bigger" bug).
   Centering the bar via flex on Elementor's own widget container
   fixes this at the layout level — the bar is always centered
   regardless of what either margin control ends up computing to. */
.elementor-widget-amir-suite-nav-desktop > .elementor-widget-container {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* ══════════════════════════════════════════
   GRADIENT BORDER WRAPPER
   padding = border width, background = gradient
   .as-nd-bar fills the inside → only edge visible
══════════════════════════════════════════ */
.as-nd-gb-wrap {
	--nd-c1: #4ee08a;
	--nd-c2: #60a5fa;
	--nd-c3: #f472b6;
	--nd-c4: #fb923c;
	--nd-c5: #a78bfa;
	--nd-c6: var(--nd-c1); /* always mirrors c1 — closes the loop with zero seam, whatever c1 is set to */
	--nd-speed: 5s;

	display: block;
	width: 100%;
	padding: 2px;           /* ← this IS the border thickness */
	border-radius: 18px;    /* bar inside = 16px; wrap = 16+2 */
	position: relative;
	z-index: 999600; /* stays above .as-nd-page-overlay (999500) even without sticky mode on */
	animation: nd-spin var(--nd-speed) linear infinite;
}

/* Gradient RING — painted on its own content-free layer (::after), never
   on .as-nd-gb-wrap itself. Applying `mask` directly to the wrapper hides
   its entire rendered content (including the real nav bar and everything
   inside it), not just its background — that was the "menu turned white"
   regression. This pseudo-element has no children, so masking it only
   ever affects this decorative ring, nothing else. */
.as-nd-gb-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	z-index: 0;
	background: conic-gradient(
		from var(--nd-angle),
		var(--nd-c1), var(--nd-c2), var(--nd-c3),
		var(--nd-c4), var(--nd-c5), var(--nd-c6)
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: inherit;
}

/* Glow — same idea as the ring above, but masked to leave out exactly the
   area where .as-nd-bar sits (6px in: the glow's own -4px outward extension
   + the wrap's 2px border ring). That means the glow only ever paints in
   the halo it blooms OUTSIDE the bar's footprint — so it now also works
   correctly with Glass mode turned on: there's nothing colorful left
   directly behind the translucent bar for backdrop-filter to reveal,
   only the soft ambient bloom around the outside edge. */
.as-nd-gb-wrap::before {
	content: '';
	position: absolute;
	inset: -4px;
	padding: 6px;
	border-radius: inherit;
	background: conic-gradient(
		from var(--nd-angle),
		var(--nd-c1), var(--nd-c2), var(--nd-c3),
		var(--nd-c4), var(--nd-c5), var(--nd-c6)
	);
	filter: blur(12px);
	opacity: 0.45;
	z-index: -1;
	animation: inherit;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
}

/* Glass mode no longer needs to disable the glow: it's masked (above)
   to only paint outside the bar's footprint, so it can stay on. */

/* THE KEY FIX: bar must cover the gradient with an opaque background */
.as-nd-gb-wrap > .as-nd-bar {
	position: relative;
	z-index: 1;
	/* Ensure bar has solid bg — fallback if Elementor selector hasn't fired yet */
	background-color: var(--nd-bar-bg, #0d1117);
}

/* ══════════════════════════════════════════
   BAR — fills the wrapper, hides gradient
══════════════════════════════════════════ */
.as-nd-bar {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 16px;
	background-color: #0d1117;
	--nd-bar-bg: #0d1117;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}

/* Glass variant — tint uses the admin's chosen background color (--nd-bar-bg)
   instead of a hardcoded dark value, so glass stays consistent with the
   "رنگ پس‌زمینه کلی" setting. Falls back to a solid rgba for older
   browsers without color-mix() support. */
.as-nd-bar.bg-glass {
	background-color: rgba(13,17,23,0.82);
	background-color: color-mix(in srgb, var(--nd-bar-bg, #0d1117) 82%, transparent);
	backdrop-filter: blur(18px) saturate(1.6);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
}

/* Sticky */
.as-nd-bar.is-sticky,
.as-nd-gb-wrap.has-sticky { position: sticky; top: 0; z-index: 999999; }

.as-nd-bar.is-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.as-nd-bar.is-scrolled { box-shadow: 0 6px 32px rgba(0,0,0,.4); }

/* ══════════════════════════════════════════
   ROW 1 — Top info bar
══════════════════════════════════════════ */
.as-nd-row1 {
	width: 100%;
	min-height: 52px;
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid rgba(255,255,255,.07);
}

.as-nd-row1-inner {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0 20px;
	gap: 16px;
	min-height: inherit;
}

/* Direction: flex-direction stays 'row' and relies on the browser's native
   bidi mirroring for the .as-nd-bar[dir] attribute — this makes LTR sites
   render left-to-right and RTL sites render right-to-left automatically.
   (Previously this rule force-reversed LTR, which is why an English site
   still rendered right-aligned like RTL — see also .as-nd-row2-inner.) */

/* Ticker */
.as-nd-ticker-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.as-nd-ticker-label-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	background: #4ee08a;
	color: #0d1117;
	font-weight: 700;
	font-size: 13px;
	padding: 4px 12px;
	border-radius: 6px;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(78,224,138,.35);
}

.as-nd-ticker-label-icon { display: inline-flex; align-items: center; }

.as-nd-ticker-label-static { white-space: nowrap; }

/* Label viewport: mirrors .as-nd-ticker-viewport/.as-nd-ticker-item so
   the label can cycle in sync with (and using the same transition
   classes as) the currently-visible news item. */
.as-nd-ticker-label-viewport {
	position: relative;
	display: inline-block;
	height: 16px;
	min-width: 90px;
	max-width: 100%;
	overflow: hidden;
	vertical-align: middle;
	transition: width .2s ease;
}

.as-nd-ticker-label-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.as-nd-ticker-label-item.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.as-nd-ticker-wrap[data-label-effect="fade"] .as-nd-ticker-label-item {
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.as-nd-ticker-wrap[data-label-effect="fade"] .as-nd-ticker-label-item.is-active {
	transition: opacity .3s ease;
}

.as-nd-ticker-viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 22px;
	overflow: hidden;
}

.as-nd-ticker-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
}

.as-nd-ticker-item.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.as-nd-ticker-wrap[data-effect="fade"] .as-nd-ticker-item {
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.as-nd-ticker-wrap[data-effect="fade"] .as-nd-ticker-item.is-active {
	transition: opacity .3s ease;
}

.as-nd-ticker-text {
	color: #f0f6fc;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .2s;
}

.as-nd-ticker-text:hover { color: #4ee08a; }

/* Typewriter cursor */
.as-nd-ticker[data-effect="typewriter"] .as-nd-ticker-text {
	border-inline-end: 2px solid #4ee08a;
}

/* ══ Marquee (continuous scroll) mode ══
   Items are rendered twice back-to-back (see PHP) and the pair of
   tracks scrolls together; translating exactly -50% loops seamlessly
   since that's the width of one full (non-duplicated) set. */
.as-nd-ticker-wrap[data-effect="marquee"] .as-nd-ticker-viewport {
	display: flex;
	align-items: center;
}

.as-nd-ticker-track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 48px;
	padding-inline-end: 48px;
	white-space: nowrap;
	will-change: transform;
	-webkit-animation: nd-ticker-marquee var(--nd-marquee-speed, 25s) linear infinite;
	animation: nd-ticker-marquee var(--nd-marquee-speed, 25s) linear infinite;
}

.as-nd-ticker-wrap[data-effect="marquee"] .as-nd-ticker-item {
	position: static;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	flex-shrink: 0;
}

@-webkit-keyframes nd-ticker-marquee { to { transform: translateX(-50%); } }
@keyframes nd-ticker-marquee { to { transform: translateX(-50%); } }

/* RTL: track needs to travel the other direction */
[dir="rtl"] .as-nd-ticker-wrap[data-effect="marquee"] .as-nd-ticker-track,
.as-nd-ticker-wrap[data-effect="marquee"][dir="rtl"] .as-nd-ticker-track {
	-webkit-animation-name: nd-ticker-marquee-rtl;
	animation-name: nd-ticker-marquee-rtl;
}
@-webkit-keyframes nd-ticker-marquee-rtl { to { transform: translateX(50%); } }
@keyframes nd-ticker-marquee-rtl { to { transform: translateX(50%); } }

.as-nd-ticker-wrap[data-effect="marquee"]:hover .as-nd-ticker-track {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

/* ══ Flip mode ══ — a 3D card-flip transition between items, driven
   by JS toggling .nd-flip-out / .nd-flip-in (see nav-desktop.js). */
.as-nd-ticker-wrap[data-effect="flip"] .as-nd-ticker-viewport { perspective: 400px; }
.as-nd-ticker-wrap[data-label-effect="flip"] .as-nd-ticker-label-viewport { perspective: 400px; }

.as-nd-ticker-wrap[data-effect="flip"] .as-nd-ticker-item,
.as-nd-ticker-wrap[data-label-effect="flip"] .as-nd-ticker-label-item {
	transform-style: preserve-3d;
	transform-origin: 50% 0%;
	backface-visibility: hidden;
}

.as-nd-ticker-wrap[data-effect="flip"] .as-nd-ticker-item.nd-flip-out,
.as-nd-ticker-wrap[data-label-effect="flip"] .as-nd-ticker-label-item.nd-flip-out {
	-webkit-animation: nd-ticker-flip-out .35s ease forwards;
	animation: nd-ticker-flip-out .35s ease forwards;
}

.as-nd-ticker-wrap[data-effect="flip"] .as-nd-ticker-item.nd-flip-in,
.as-nd-ticker-wrap[data-label-effect="flip"] .as-nd-ticker-label-item.nd-flip-in {
	-webkit-animation: nd-ticker-flip-in .35s ease forwards;
	animation: nd-ticker-flip-in .35s ease forwards;
}

@-webkit-keyframes nd-ticker-flip-out {
	from { transform: rotateX(0deg);  opacity: 1; }
	to   { transform: rotateX(90deg); opacity: 0; }
}
@keyframes nd-ticker-flip-out {
	from { transform: rotateX(0deg);  opacity: 1; }
	to   { transform: rotateX(90deg); opacity: 0; }
}
@-webkit-keyframes nd-ticker-flip-in {
	from { transform: rotateX(-90deg); opacity: 0; }
	to   { transform: rotateX(0deg);   opacity: 1; }
}
@keyframes nd-ticker-flip-in {
	from { transform: rotateX(-90deg); opacity: 0; }
	to   { transform: rotateX(0deg);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.as-nd-ticker-track { animation: none; }
}

/* Social icons */
.as-nd-social-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.as-nd-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--nd-soc-base, rgba(240,246,252,.65)) !important;
	font-size: 15px;
	text-decoration: none;
	border-radius: 50%;
	transition: color .2s ease, transform .2s ease, background-color .2s ease;
}

.as-nd-social-icon:hover {
	color: var(--nd-soc-hover, #4ee08a) !important;
	background-color: rgba(255,255,255,.06);
	transform: scale(1.15);
}

/* Some (mostly Persian/RTL) themes add a blanket rule like
   `*, *::before, *::after { font-family: "SomePersianFont" !important; }`
   to force a custom body font everywhere. That also clobbers icon-font
   glyphs (Font Awesome / eicons) wherever they appear — which is why
   icons can render as a generic black square or vanish entirely.
   These rules re-assert the correct icon font + currentColor fill so
   our icons keep working regardless of what the active theme does
   globally. */
.as-nd-social-icon i,
.as-nd-ticker-label-icon i,
.as-nd-nav-icon i {
	font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
	             "Font Awesome 5 Free", "Font Awesome 5 Brands",
	             "eicons", sans-serif !important;
	font-style: normal !important;
	color: inherit !important;
}

.as-nd-social-icon svg,
.as-nd-ticker-label-icon svg,
.as-nd-nav-icon svg {
	fill: currentColor !important;
	width: 1em;
	height: 1em;
}

/* Countdown */
.as-nd-cd-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.as-nd-cd-title {
	font-size: 12px;
	font-weight: 700;
	color: #4ee08a;
	letter-spacing: .5px;
	white-space: nowrap;
}

.as-nd-cd-units {
	display: flex;
	align-items: center;
	gap: 6px;
}

.as-nd-cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 32px;
}

.as-nd-cd-num {
	font-size: 18px;
	font-weight: 700;
	color: #f0f6fc;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.as-nd-cd-lbl {
	font-size: 9px;
	color: rgba(240,246,252,.55);
	letter-spacing: .3px;
	text-transform: uppercase;
	margin-top: 1px;
}

/* Compact layout (item request): label sits beside the number instead
   of below it, so the whole countdown block takes less vertical space. */
.as-nd-cd-units.is-compact { gap: 10px; }

.as-nd-cd-units.is-compact .as-nd-cd-unit {
	flex-direction: row;
	align-items: baseline;
	gap: 3px;
	min-width: 0;
}

.as-nd-cd-units.is-compact .as-nd-cd-lbl { margin-top: 0; }

/* ══════════════════════════════════════════
   ROW 2 — Main nav
══════════════════════════════════════════ */
.as-nd-row2 {
	width: 100%;
	min-height: 72px;
	display: flex;
	align-items: stretch;
}

.as-nd-row2-inner {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0 20px;
	gap: 24px;
	min-height: inherit;
}

/* See note above .as-nd-row1-inner — no manual reversal needed here either;
   native bidi handling of flex-direction:row does the right thing per
   .as-nd-bar[dir]. */

/* Logo */
.as-nd-logo {
	display: inline-flex;
	align-items: center;
	font-size: 24px;
	font-weight: 800;
	color: #f0f6fc;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: opacity .2s;
}
.as-nd-logo:hover { opacity: .8; }
.as-nd-logo img {
	display: block;
	height: 40px;
	width: auto;
	max-width: none;
}

/* ══════════════════════════════════════════
   SHIMMER — "light sweep" effect: a bright diagonal streak that glides
   across the logo / menu bar on a loop.

   NOTE: an earlier version of this used a `mask-image` to locally dip the
   element's own opacity as the "shine" passed through. That approach is
   wrong for anything with a background (the whole menu bar, most logos):
   dipping opacity there doesn't reveal a highlight, it reveals whatever
   is BEHIND the bar (usually the page background), which reads as the
   logo/menu being erased and redrawn rather than shining. This version
   instead paints an extra bright layer ON TOP via a pseudo-element and
   blends it with `screen`, so it only ever ADDS light — nothing is ever
   hidden, dimmed, or punched through.
   Shared here since both Desktop Nav and Mobile Header Nav use the same
   .as-nd-logo / .as-nd-bar classes.
══════════════════════════════════════════ */
.as-nd-logo.has-shimmer,
.as-nd-bar.has-menu-shimmer {
	position: relative;
	overflow: hidden;
	--nd-shimmer-speed: 3s;
	--nd-menu-shimmer-speed: 3s;
}

.as-nd-logo.has-shimmer::after,
.as-nd-bar.has-menu-shimmer::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	/* Plain alpha transparency, NOT mix-blend-mode. Combining
	   mix-blend-mode with border-radius + overflow:hidden (which
	   .as-nd-bar has) is a known cross-browser compositing trap: instead
	   of just brightening, the browser can render the whole blended
	   layer — and everything behind it — as solid black/invisible. A
	   plain rgba() gradient gives the same sliding-highlight look using
	   ordinary alpha compositing, so it can't trigger that glitch. */
	background-image: linear-gradient(
		145deg,
		transparent 34%,
		rgba(255,255,255,.35) 48%,
		rgba(255,255,255,.35) 52%,
		transparent 66%
	);
	background-size: 300% 100%;
	background-repeat: no-repeat;
	-webkit-animation: as-nd-shimmer var(--nd-shimmer-speed) ease-in-out infinite;
	animation: as-nd-shimmer var(--nd-shimmer-speed) ease-in-out infinite;
}

.as-nd-bar.has-menu-shimmer::after {
	-webkit-animation-duration: var(--nd-menu-shimmer-speed);
	animation-duration: var(--nd-menu-shimmer-speed);
}

/* Sweeps background-position across a wide enough range that the
   element starts and ends each cycle with the highlight fully off to
   one side, only passing through the middle around 50% of the cycle. */
@-webkit-keyframes as-nd-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -100% 0; }
}
@keyframes as-nd-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.as-nd-logo.has-shimmer::after,
	.as-nd-bar.has-menu-shimmer::after { animation: none; opacity: 0; }
}

/* Nav */
.as-nd-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 1;
	min-width: 0;
	overflow-x: auto;
	overflow-y: visible;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

/* Submenus use position:fixed (see .as-nd-submenu) specifically so they
   are NOT affected by this scroll container's clipping. */
.as-nd-nav::-webkit-scrollbar { height: 4px; }
.as-nd-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.as-nd-nav-item {
	position: relative;
	display: flex;
}

.as-nd-nav-caret {
	transition: transform .2s ease;
	flex-shrink: 0;
}

.as-nd-nav-item.has-children:hover .as-nd-nav-caret,
.as-nd-nav-item.has-children:focus-within .as-nd-nav-caret {
	transform: rotate(180deg);
}

/* Dropdown submenu (one level — WP-menu source only)
   The rotating gradient ring + glow below reuse the exact technique from
   .as-nd-gb-wrap (see top of file): a masked ::after ring + blurred ::before
   glow, both driven by the shared --nd-angle animation. Colors read the
   same --nd-c1..c6/--nd-speed custom properties as the bar — copied onto
   this element as inline styles by JS (initSubmenus in nav-desktop.js)
   since the submenu is reparented to <body> and would otherwise lose the
   inherited values from .as-nd-gb-wrap. Fallback defaults below keep it
   looking right even if that copy step is ever skipped. */

/* Full-page dim+blur backdrop shown behind an open submenu/lang menu, so
   the dropdown itself reads as the clear focal point. One shared element,
   created once and reused by every dropdown on the page (see
   getPageOverlay() in nav-desktop.js). Sits above normal page content but
   below the bar and the dropdown itself (both z-index: 999999), so the
   nav bar/trigger stays sharp while everything else softens. */
.as-nd-page-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5,8,12,.55);
	backdrop-filter: blur(6px) saturate(1.1);
	-webkit-backdrop-filter: blur(6px) saturate(1.1);
	z-index: 999500;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility 0s linear .25s;
}

.as-nd-page-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease;
}

.as-nd-submenu {
	--nd-c1: #4ee08a;
	--nd-c2: #60a5fa;
	--nd-c3: #f472b6;
	--nd-c4: #fb923c;
	--nd-c5: #a78bfa;
	--nd-c6: var(--nd-c1);
	--nd-speed: 5s;

	position: fixed;
	min-width: 190px;
	background-color: rgba(13,17,23,.82);
	background-color: color-mix(in srgb, #0d1117 82%, transparent);
	backdrop-filter: blur(18px) saturate(1.6);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	border: none;
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(0,0,0,.45);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	z-index: 999999;
	animation: nd-spin var(--nd-speed) linear infinite;
	animation-play-state: paused;
}

.as-nd-submenu::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	z-index: 0;
	pointer-events: none;
	background: conic-gradient(
		from var(--nd-angle),
		var(--nd-c1), var(--nd-c2), var(--nd-c3),
		var(--nd-c4), var(--nd-c5), var(--nd-c6)
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: inherit;
}

.as-nd-submenu::before {
	content: '';
	position: absolute;
	inset: -4px;
	padding: 6px;
	border-radius: inherit;
	z-index: -1;
	pointer-events: none;
	background: conic-gradient(
		from var(--nd-angle),
		var(--nd-c1), var(--nd-c2), var(--nd-c3),
		var(--nd-c4), var(--nd-c5), var(--nd-c6)
	);
	filter: blur(12px);
	opacity: 0.45;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: inherit;
}

.as-nd-submenu-link { position: relative; z-index: 1; }

/* Opened/closed via JS (.is-open) instead of :hover/:focus-within, because
   the submenu is moved to <body> at runtime — see initSubmenus() in
   nav-desktop.js for why (overflow:hidden + backdrop-filter on .as-nd-bar
   was clipping/mispositioning the old position:fixed dropdown). The ring
   animation is kept paused while closed (animation-play-state) purely to
   save CPU on off-screen dropdowns. */
.as-nd-submenu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .2s ease, transform .2s ease;
	animation-play-state: running;
}


.as-nd-submenu-link {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	color: rgba(240,246,252,.85);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.as-nd-submenu-link:hover { background-color: rgba(255,255,255,.07); color: #f0f6fc; }

.as-nd-submenu-link.is-active { color: var(--nd-nav-active, #4ee08a); }

.as-nd-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	color: rgba(240,246,252,.85);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	transition: color .2s ease, background-color .2s ease;
	white-space: nowrap;
}

.as-nd-nav-link:hover {
	color: #f0f6fc;
	background-color: rgba(255,255,255,.07);
}

.as-nd-nav-link.is-active {
	color: var(--nd-nav-active, #4ee08a);
}

/* Active-item dot indicator removed per request */

.as-nd-nav-icon {
	display: inline-flex;
	font-size: 14px;
}

/* Spacer */
.as-nd-spacer { flex: 1 1 auto; }

/* Actions */
.as-nd-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.as-nd-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: rgba(240,246,252,.75);
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	text-decoration: none;
	transition: color .2s, background-color .2s;
	padding: 0;
}

.as-nd-action-btn:hover {
	color: #f0f6fc;
	background-color: rgba(255,255,255,.08);
}

.as-nd-action-btn svg { width: 20px; height: 20px; }

/* Language switcher */
.as-nd-lang-switcher { position: relative; }

.as-nd-lang-btn {
	width: auto;
	min-width: 38px;
	padding: 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .3px;
}

/* position:fixed (not absolute) + moved to <body> by JS (see
   initLangSwitcher() in nav-desktop.js) so it isn't clipped by
   .as-nd-bar's overflow:hidden the way the old absolute-positioned
   version was. Coordinates are computed in JS right before opening. */
.as-nd-lang-menu {
	--nd-c1: #4ee08a;
	--nd-c2: #60a5fa;
	--nd-c3: #f472b6;
	--nd-c4: #fb923c;
	--nd-c5: #a78bfa;
	--nd-c6: var(--nd-c1);
	--nd-speed: 5s;

	position: fixed;
	min-width: 140px;
	background-color: rgba(13,17,23,.82);
	background-color: color-mix(in srgb, #0d1117 82%, transparent);
	backdrop-filter: blur(18px) saturate(1.6);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	border: none;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0,0,0,.45);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	z-index: 999999;
	animation: nd-spin var(--nd-speed) linear infinite;
	animation-play-state: paused;
}

.as-nd-lang-menu::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	z-index: 0;
	pointer-events: none;
	background: conic-gradient(
		from var(--nd-angle),
		var(--nd-c1), var(--nd-c2), var(--nd-c3),
		var(--nd-c4), var(--nd-c5), var(--nd-c6)
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: inherit;
}

.as-nd-lang-menu::before {
	content: '';
	position: absolute;
	inset: -4px;
	padding: 6px;
	border-radius: inherit;
	z-index: -1;
	pointer-events: none;
	background: conic-gradient(
		from var(--nd-angle),
		var(--nd-c1), var(--nd-c2), var(--nd-c3),
		var(--nd-c4), var(--nd-c5), var(--nd-c6)
	);
	filter: blur(12px);
	opacity: 0.45;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: inherit;
}

.as-nd-lang-option { position: relative; z-index: 1; }

.as-nd-lang-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .2s ease, transform .2s ease;
	animation-play-state: running;
}

.as-nd-lang-btn svg {
	width: 15px;
	height: 15px;
	margin-inline-end: 5px;
	flex-shrink: 0;
}

.as-nd-lang-flag {
	width: 16px;
	height: 12px;
	object-fit: cover;
	border-radius: 2px;
	flex-shrink: 0;
}

.as-nd-lang-btn .as-nd-lang-flag { margin-inline-end: 5px; }

.as-nd-lang-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	color: rgba(240,246,252,.85);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
}

.as-nd-lang-option:hover { background-color: rgba(255,255,255,.07); color: #f0f6fc; }

.as-nd-lang-option.is-current { color: #4ee08a; font-weight: 700; }

.as-nd-lang-option .as-nd-lang-code {
	font-weight: 700;
	font-size: 11px;
	color: rgba(240,246,252,.5);
	min-width: 22px;
}

.as-nd-lang-option.is-current .as-nd-lang-code { color: #4ee08a; }

/* Cart icon badge */
.as-nd-cart-btn { position: relative; }

.as-nd-cart-badge {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background-color: #4ee08a;
	color: #0d1117;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	pointer-events: none;
}

/* Search overlay (toggled by JS) — animated open/close */
.as-nd-search-overlay {
	display: flex;
	position: absolute;
	inset: 0;
	background: rgba(13,17,23,.97);
	align-items: center;
	padding: 0 24px;
	gap: 12px;
	z-index: 100;
	backdrop-filter: blur(10px);
	clip-path: circle(4% at calc(100% - 56px) 50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		clip-path .48s cubic-bezier(.65,0,.35,1),
		opacity .25s ease,
		visibility 0s linear .48s;
}
.as-nd-bar[dir="rtl"] .as-nd-search-overlay { clip-path: circle(4% at 56px 50%); }

.as-nd-search-overlay.is-open {
	clip-path: circle(150% at calc(100% - 56px) 50%);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		clip-path .48s cubic-bezier(.65,0,.35,1),
		opacity .2s ease,
		visibility 0s;
}
.as-nd-bar[dir="rtl"] .as-nd-search-overlay.is-open { clip-path: circle(150% at 56px 50%); }

.as-nd-search-input-wrap {
	position: relative;
	flex: 1;
	display: flex;
}

.as-nd-search-input {
	flex: 1;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 8px;
	padding: 10px 16px;
	color: #f0f6fc;
	font-size: 16px;
	outline: none;
	transform: translateY(6px);
	opacity: 0;
	transition: border-color .2s, transform .35s ease .12s, opacity .35s ease .12s;
}

.as-nd-search-overlay.is-open .as-nd-search-input {
	transform: translateY(0);
	opacity: 1;
}

.as-nd-search-input:focus {
	border-color: rgba(78,224,138,.6);
	box-shadow: 0 0 0 3px rgba(78,224,138,.15);
}

/* Dynamic/rotating fake placeholder — sits visually where the native
   placeholder would, but can be cross-faded between several phrases
   (native placeholder text can't be animated). JS hides it as soon as
   the input gains a value or focus, restoring native placeholder
   behavior/accessibility for typing. */
.as-nd-search-fake-ph {
	position: absolute;
	inset-inline-start: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(240,246,252,.45);
	font-size: 16px;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 32px);
	opacity: 1;
	transition: opacity .25s ease;
}

.as-nd-search-fake-ph.is-swapping { opacity: 0; }
.as-nd-search-fake-ph.is-hidden   { opacity: 0; visibility: hidden; }

.as-nd-search-close {
	background: none;
	border: none;
	color: rgba(240,246,252,.6);
	font-size: 20px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	transform: scale(.8) rotate(-90deg);
	opacity: 0;
	transition: transform .3s ease .16s, opacity .3s ease .16s, color .2s;
}

.as-nd-search-overlay.is-open .as-nd-search-close {
	transform: scale(1) rotate(0deg);
	opacity: 1;
}

.as-nd-search-close:hover { color: #f0f6fc; }

.as-nd-search-btn svg { transition: transform .25s ease; }
.as-nd-search-btn:hover svg { transform: scale(1.12) rotate(-8deg); }

@media (prefers-reduced-motion: reduce) {
	.as-nd-search-overlay,
	.as-nd-search-overlay.is-open,
	.as-nd-search-input,
	.as-nd-search-close { transition: none !important; }
}

/* ══════════════════════════════════════════
   Reduced motion
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.as-nd-bar, .as-nd-nav-link, .as-nd-action-btn { transition: none; }
}

/* Disabled while the Mobile Header hamburger drawer is open (see
   nav-mobile-header.js), so the blurred backdrop reads more clearly. */
.as-nd-gb-wrap.is-gb-paused::after,
.as-nd-gb-wrap.is-gb-paused::before {
	animation-play-state: paused;
	opacity: 0;
	transition: opacity .2s ease;
}

/* Responsive: hide on mobile.
   Hiding just .as-nd-gb-wrap (the visible bar) isn't enough on its
   own: Elementor still wraps every widget in its own
   .elementor-widget-container div, and that wrapper keeps its normal
   layout box (plus whatever padding/margin the section or column has)
   even once the bar inside it is display:none. If this widget shares
   a column/section with the Mobile Header widget, that leftover empty
   wrapper is exactly what shows up as "extra space above the mobile
   header". Hiding the whole Elementor widget class removes the box
   entirely instead of just its visible content. */
@media (max-width: 1024px) {
	.as-nd-gb-wrap { display: none; }
	.elementor-widget-amir-suite-nav-desktop { display: none !important; }
}