/**
 * Woodmart Liquid Glass Navigation — Stylesheet
 * ------------------------------------------------------------------
 * v2.0 — "Liquid Glass Engine"
 *
 *   Container : .wd-toolbar
 *   Item      : .wd-tools-element   (a plain <div>, not <li>)
 *   Icon      : .wd-tools-icon      (icon font via ::before, not SVG)
 *   Label     : .wd-toolbar-label
 *   Badge     : .wd-tools-count     (cart/wishlist counter)
 *   Active    : .wd-active on the .wd-tools-element
 *
 * We ALSO keep the older `.mobile-navigation` / `.mobile-nav-icon`
 * selectors alongside the new ones (comma-separated), so this file
 * keeps working whether your Woodmart version renders the legacy
 * markup or the current `.wd-toolbar` markup — no need to know which
 * one you're on.
 *
 * All tunable numbers below are CSS custom properties. Most of them
 * are re-declared on :root by a small <style> block the PHP side
 * prints from your saved settings (see print_dynamic_vars() in the
 * main plugin file) — so this file itself never has to be edited to
 * change blur/opacity/radius/etc. The values below are just the
 * fallback defaults used before settings are ever saved.
 *
 * Performance notes:
 *   - Only `transform`, `opacity`, and (for a few, deliberately
 *     infrequent, discrete state changes) `backdrop-filter` /
 *     `border-radius` are ever transitioned.
 *   - `border-radius` changes are visual-paint only, never layout —
 *     they cannot cause CLS.
 *   - `contain` + `isolation` scope paint/blur cost to just the bar.
 *   - Every premium effect (reflection, parallax, breathing, ripple,
 *     magnetic hover) degrades or disables itself under
 *     `[data-wd-lg-perf="low"]` and `prefers-reduced-motion`, applied
 *     by the JS Smart Performance Engine — see liquid-glass-nav.js.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--wdlg-glass-bg-light: rgb(255, 255, 255);
	--wdlg-glass-bg-dark: rgb(28, 28, 30);
	--wdlg-glass-border-light: rgba(255, 255, 255, 0.6);
	--wdlg-glass-border-dark: rgba(255, 255, 255, 0.16);

	/* Overridden at runtime by the Adaptive Glass engine (0 = fully
	   dark-page mix, 1 = fully light-page mix). Starts at 0.5 so the
	   very first paint (before JS has sampled anything) looks neutral. */
	--wdlg-adaptive-mix: 0.5;

	/* بعد */
	--wdlg-glass-bg-solid: color-mix(in srgb, var(--wdlg-glass-bg-light) calc(var(--wdlg-adaptive-mix) * 100%), var(--wdlg-glass-bg-dark));
	--wdlg-opacity-adaptive: min(1, calc(var(--wdlg-opacity) + (var(--wdlg-adaptive-mix) * 0.35)));
	--wdlg-glass-bg: color-mix(in srgb, var(--wdlg-glass-bg-solid) calc(var(--wdlg-opacity-adaptive) * 100%), transparent);
	/* BUGFIX: --wdlg-glass-border was referenced (below, and on the
	   desktop container) but never actually computed — only its
	   -light/-dark ingredients existed. An undefined custom property
	   makes `border: 1px solid var(--wdlg-glass-border)` fall back to
	   the browser default (currentColor), which is why a stray line
	   became visible along the bar as soon as the glass background got
	   more transparent (lower "میزان شفافیت"): the border was never
	   tied to the glass opacity, so as the background faded the
	   currentColor line kept its own full strength and stood out. This
	   line is intentionally built the same way as --wdlg-glass-bg-solid
	   (adaptive light/dark mix only) and is NOT multiplied by
	   --wdlg-opacity, so lowering the bar's opacity slider no longer
	   affects (and no longer exposes) this border at all — the fix is
	   scoped to just this border, the rest of the bar's transparency
	   behaviour is untouched. */
	--wdlg-glass-border: color-mix(in srgb, var(--wdlg-glass-border-light) calc(var(--wdlg-adaptive-mix) * 100%), var(--wdlg-glass-border-dark));

	/* Nav label/icon text color + font sizes — now real, editable
	   tunables (see Settings → ظاهر شیشه‌ای) instead of hardcoded
	   values baked into the rules below. Defaults match the previous
	   hardcoded behaviour exactly, so nothing changes visually until
	   these are explicitly set in Settings. */
	--wdlg-label-color: #fff;
	--wdlg-icon-font-size: 22px;
	--wdlg-label-font-size: 10.5px;
	/* These four are re-printed on :root from saved settings; the
	   values here are only the pre-settings fallback. */
	--wdlg-blur: 22px;
	--wdlg-blur-saturate: 180%;
	--wdlg-opacity: 1;
	--wdlg-radius: 26px;
	--wdlg-shadow-strength: 1;
	--wdlg-reflection-boost: 1;
	--wdlg-parallax-max: 6px;
	--wdlg-bottom-offset: 3px;

	--wdlg-radius-icon: 18px;

	--wdlg-shadow-rest: 0 calc(8px * var(--wdlg-shadow-strength)) calc(32px * var(--wdlg-shadow-strength)) rgba(0, 0, 0, calc(0.16 * var(--wdlg-shadow-strength))), 0 1px 1px rgba(255, 255, 255, 0.6) inset;
	--wdlg-shadow-float: 0 calc(14px * var(--wdlg-shadow-strength)) calc(40px * var(--wdlg-shadow-strength)) rgba(0, 0, 0, calc(0.22 * var(--wdlg-shadow-strength))), 0 1px 1px rgba(255, 255, 255, 0.65) inset;
	--wdlg-shadow-scroll: 0 calc(4px * var(--wdlg-shadow-strength)) calc(18px * var(--wdlg-shadow-strength)) rgba(0, 0, 0, calc(0.2 * var(--wdlg-shadow-strength))), 0 1px 1px rgba(255, 255, 255, 0.4) inset;

	--wdlg-accent: var(--wdlg-forced-tint, var(--woodmart-primary-color, #3574ff));
	--wdlg-accent-glow: color-mix(in srgb, var(--wdlg-accent) 55%, transparent);
	--wdlg-icon-color: color-mix(in srgb, #1c1c1e calc(var(--wdlg-adaptive-mix) * 100%), #ffffff);
	--wdlg-active-color: #ff3b30;
	--wdlg-active-glow: color-mix(in srgb, var(--wdlg-active-color) 60%, transparent);

	--wdlg-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--wdlg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--wdlg-duration-fast: 160ms;
	--wdlg-duration: 260ms;
	--wdlg-duration-scroll: 320ms;
	--wdlg-duration-open: 520ms;

	--wdlg-bar-height: 64px;
	--wdlg-safe-bottom: env(safe-area-inset-bottom, 0px);

	/* Runtime-only interaction variables. Defaults here mean "no
	   effect" so every feature is a no-op until JS actually moves
	   the mouse / scrolls / goes idle. */
	--wdlg-parallax-x: 0px;
	--wdlg-parallax-y: 0px;
	--wdlg-breathe-scale: 1;
	--wdlg-reflect-x: 50%;
	--wdlg-reflect-y: 0%;
	--wdlg-reflect-opacity: 0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--wdlg-adaptive-mix: 0;
	}
}
body.dark-skin,
body.d-dark {
	--wdlg-adaptive-mix: 0;
}

/* ==========================================================================
   2. Mobile bar — the floating glass container
   ========================================================================== */
.mobile-navigation,
.wd-toolbar {
	left: 50% !important;
	right: auto !important;
	/* BUGFIX: was a fixed 14px, floating the bar far from the edge.
	   Now driven by --wdlg-bottom-offset (default 3px, configurable
	   in Settings → Placement), plus the device safe-area inset so it
	   never sits under an iPhone home-indicator. */
	bottom: calc(var(--wdlg-bottom-offset) + var(--wdlg-safe-bottom)) !important;
	top: auto !important;
	transform: translate3d(calc(-50% + var(--wdlg-parallax-x)), var(--wdlg-parallax-y), 0) scale(var(--wdlg-breathe-scale)) !important;
	width: calc(100% - 28px) !important;
	max-width: 460px;
	margin: 0 !important;
	padding: 6px !important;

	background: var(--wdlg-glass-bg) !important;
	border: 1px solid var(--wdlg-glass-border);
	border-radius: var(--wdlg-radius) !important;
	box-shadow: var(--wdlg-shadow-float);
	-webkit-backdrop-filter: blur(var(--wdlg-blur)) saturate(var(--wdlg-blur-saturate));
	backdrop-filter: blur(var(--wdlg-blur)) saturate(var(--wdlg-blur-saturate));
	overflow: visible !important;   /* <-- این خط رو اضافه کنید */
	isolation: isolate;
	contain: layout style;

	display: flex !important;
	align-items: stretch;
	justify-content: space-between;
	gap: 2px;

	/* NOTE: border-radius/backdrop-filter are included here on purpose
	   for the (infrequent, discrete) Liquid Scroll state change only —
	   both are paint-only, never layout, so this cannot cause CLS. */
	transition: transform var(--wdlg-duration) var(--wdlg-ease),
		opacity var(--wdlg-duration) var(--wdlg-ease),
		border-radius var(--wdlg-duration-scroll) var(--wdlg-ease),
		box-shadow var(--wdlg-duration-scroll) var(--wdlg-ease),
		background-color var(--wdlg-duration) var(--wdlg-ease);
	will-change: transform;
}

.mobile-navigation.wd-scroll-hide,
.mobile-navigation.hidden-nav,
.wd-toolbar.wd-scroll-hide,
.wd-toolbar.hidden-nav {
	transform: translate3d(-50%, 130%, 0) !important;
	opacity: 0;
	pointer-events: none;
}

/* Liquid Animation — while the page is actively scrolling, the bar
   contracts slightly, and its corners/shadow soften; it restores the instant
   scrolling stops. Dynamic blur change is removed to prevent GPU pipeline thrashing. */
.wd-lg-liquid-scroll.mobile-navigation.wd-lg-scrolling,
.wd-lg-liquid-scroll.wd-toolbar.wd-lg-scrolling {
	transform: translate3d(calc(-50% + var(--wdlg-parallax-x)), var(--wdlg-parallax-y), 0) scale(0.96) !important;
	border-radius: calc(var(--wdlg-radius) + 6px) !important;
	box-shadow: var(--wdlg-shadow-scroll);
}

/* Opening animation — applied once on first paint, then the class is
   removed a frame later so the bar transitions from this "materializing"
   state to its resting state via the spring easing. */
.wd-lg-opening.mobile-navigation,
.wd-lg-opening.wd-toolbar {
	transform: translate3d(-50%, 55%, 0) scale(0.92) !important;
	opacity: 0 !important;
	-webkit-backdrop-filter: blur(0px) saturate(100%);
	backdrop-filter: blur(0px) saturate(100%);
	transition: transform var(--wdlg-duration-open) var(--wdlg-ease-spring),
		opacity var(--wdlg-duration-open) var(--wdlg-ease),
		backdrop-filter var(--wdlg-duration-open) var(--wdlg-ease);
}

.mobile-navigation ul.mobile-nav-icon-list,
.mobile-navigation > ul {
	display: flex !important;
	align-items: stretch;
	justify-content: space-between;
	gap: 2px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* Dynamic Reflection layer — a soft moving highlight that tracks the
   pointer, painted on a pseudo-element so it never affects layout or
   the real children's stacking. JS only ever writes the two position
   custom properties + toggles opacity to 0 on pointer-leave/idle/low
   perf tier — this rule itself never runs a JS-driven loop. */
.mobile-navigation::before,
.wd-toolbar::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		circle at var(--wdlg-reflect-x) var(--wdlg-reflect-y),
		rgba(255, 255, 255, calc(0.5 * var(--wdlg-reflection-boost))) 0%,
		rgba(255, 255, 255, 0) 55%
	);
	opacity: var(--wdlg-reflect-opacity);
	mix-blend-mode: overlay;
	pointer-events: none;
	transition: opacity var(--wdlg-duration) var(--wdlg-ease);
}

/* ==========================================================================
   3. Nav items (works for both <li class="mobile-nav-icon"> and
      <div class="wd-tools-element">)
   ========================================================================== */
.mobile-navigation .mobile-nav-icon,
.wd-toolbar .wd-tools-element {
	position: relative;
	flex: 1 1 0;
	display: flex;
	list-style: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
	min-width: 44px;
	padding: 8px 4px;
	border-radius: var(--wdlg-radius-icon);
	cursor: pointer;
	overflow: visible !important;   /* <-- این خط رو اضافه کنید */
	/*overflow: hidden;*/
	-webkit-tap-highlight-color: transparent;
	/* Magnetic Hover (desktop, pointer:fine only) + press feedback,
	   composed together via CSS vars so JS never fights this rule —
	   it only ever updates --wdlg-magnet-x/y/scale. */
	transform: translate3d(var(--wdlg-magnet-x, 0px), var(--wdlg-magnet-y, 0px), 0) scale(var(--wdlg-magnet-scale, 1));
	transition: transform var(--wdlg-duration-fast) var(--wdlg-ease),
		background-color var(--wdlg-duration-fast) var(--wdlg-ease);
}

.mobile-navigation .mobile-nav-icon > a,
.wd-toolbar .wd-tools-element > a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mobile-navigation .mobile-nav-icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	transition: transform var(--wdlg-duration-fast) var(--wdlg-ease);
}
.mobile-navigation .mobile-nav-icon-wrap svg {
	width: 100%;
	height: 100%;
	color: #fff;
	fill: currentColor;
	transition: transform var(--wdlg-duration-fast) var(--wdlg-ease),
		color var(--wdlg-duration-fast) var(--wdlg-ease);
}

.wd-toolbar .wd-tools-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wdlg-icon-font-size);
	line-height: 1;
	color: var(--wdlg-label-color);
	transition: transform var(--wdlg-duration-fast) var(--wdlg-ease),
		color var(--wdlg-duration-fast) var(--wdlg-ease);
}

.mobile-navigation .mobile-nav-icon-label,
.wd-toolbar .wd-toolbar-label {
	font-size: var(--wdlg-label-font-size);
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--wdlg-label-color);
	opacity: 0.75;
	white-space: nowrap;
	transition: opacity var(--wdlg-duration-fast) var(--wdlg-ease),
		color var(--wdlg-duration-fast) var(--wdlg-ease);
}

/* ==========================================================================
   3b. Counter badges — BUGFIX for the "two white dots"
   ------------------------------------------------------------------
   Root cause: Woodmart still renders the wishlist/cart counter <span>
   even when its count is zero (it relies on ITS OWN stylesheet to
   hide a zero badge, via a class it toggles with JS after AJAX
   updates). Our absolute-positioned badge + its ring box-shadow was
   being drawn regardless of that state, and — because the badge's
   background comes from the --wdlg-accent chain, which can fail to
   resolve to a solid color inside a backdrop-filter/contain:paint
   isolation context in some engines — the fill rendered transparent
   while the light ring (0 0 0 2px var(--wdlg-glass-bg)) around it
   still painted. Two counters (wishlist + cart) sitting either side
   of center, each reduced to just their ring, is exactly "two small
   white dots in the center".
   Real fix (not a hide-hack): stop the badge from ever painting when
   there is nothing to show. `:empty` covers Woodmart markup that
   omits the text node entirely; the `[data-wd-lg-empty]` attribute
   covers the "0" case, which liquid-glass-nav.js's existing
   MutationObserver-driven sync sets/clears every time it mirrors the
   counter's text — no extra observer needed, no polling added.
   ========================================================================== */
.mobile-navigation .mobile-nav-counter,
.wd-toolbar .wd-tools-count {
	position: absolute;
	top: -2px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wdlg-accent);
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--wdlg-glass-bg);
	transition: transform var(--wdlg-duration-fast) var(--wdlg-ease);
}

.mobile-navigation .mobile-nav-counter:empty,
.wd-toolbar .wd-tools-count:empty,
.mobile-navigation .mobile-nav-counter[data-wd-lg-empty="1"],
.wd-toolbar .wd-tools-count[data-wd-lg-empty="1"] {
	display: none;
}

.wd-lg-desktop-nav .mobile-nav-counter:empty,
.wd-lg-desktop-nav .wd-tools-count:empty,
.wd-lg-desktop-nav .mobile-nav-counter[data-wd-lg-empty="1"],
.wd-lg-desktop-nav .wd-tools-count[data-wd-lg-empty="1"] {
	display: none;
}

/* بعد */
.mobile-navigation .mobile-nav-icon.active > a,
.mobile-navigation .mobile-nav-icon.wd-active > a,
.wd-toolbar .wd-tools-element.wd-active,
.wd-toolbar .wd-tools-element.active {
	background: none;
	border: none;
	box-shadow: none;
}

.mobile-navigation .mobile-nav-icon.active .mobile-nav-icon-wrap,
.mobile-navigation .mobile-nav-icon.wd-active .mobile-nav-icon-wrap,
.wd-toolbar .wd-tools-element.wd-active .wd-tools-icon,
.wd-toolbar .wd-tools-element.active .wd-tools-icon {
	transform: translate3d(0, -2px, 0) scale(1.08);
}

.mobile-navigation .mobile-nav-icon.active .mobile-nav-icon-wrap svg,
.mobile-navigation .mobile-nav-icon.wd-active .mobile-nav-icon-wrap svg {
	filter: drop-shadow(0 0 6px var(--wdlg-active-glow));
	color: #fff;
}
.wd-toolbar .wd-tools-element.wd-active .wd-tools-icon,
.wd-toolbar .wd-tools-element.active .wd-tools-icon {
	filter: drop-shadow(0 0 6px var(--wdlg-active-glow));
	color: #fff;
}

.mobile-navigation .mobile-nav-icon.active .mobile-nav-icon-label,
.mobile-navigation .mobile-nav-icon.wd-active .mobile-nav-icon-label,
.wd-toolbar .wd-tools-element.wd-active .wd-toolbar-label,
.wd-toolbar .wd-tools-element.active .wd-toolbar-label {
	opacity: 1;
	font-weight: 700;
	color: #fff;
}

.mobile-navigation .mobile-nav-icon > a:active .mobile-nav-icon-wrap {
	transform: translate3d(0, 0, 0) scale(0.9);
}
.wd-toolbar .wd-tools-element:active .wd-tools-icon {
	transform: translate3d(0, 0, 0) scale(0.9);
}

.mobile-navigation .mobile-nav-icon > a:focus-visible,
.wd-toolbar .wd-tools-element:focus-visible,
.wd-toolbar .wd-tools-element > a:focus-visible {
	outline: 2px solid var(--wdlg-accent);
	outline-offset: 2px;
}

/* Ripple Glass — a short-lived element injected by JS on
   pointerdown, positioned with two inline custom properties
   (--x/--y, the only per-click "inline style" in the whole plugin,
   unavoidable since the tap position is only known at click time).
   It is a radial "glass wave", not a Material ripple: it expands,
   brightens, and fades — no flat color disc. */
.wd-lg-ripple {
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
	transform: scale(0);
	opacity: 1;
	animation: wd-lg-ripple-expand 520ms var(--wdlg-ease) forwards;
	will-change: transform, opacity;
}
@keyframes wd-lg-ripple-expand {
	to {
		transform: scale(9);
		opacity: 0;
	}
}

/* ==========================================================================
   4. Desktop nav skin (cloned container, injected by liquid-glass-nav.js)
      Only ever present in the DOM when "Enable on Desktop" is on —
      the PHP side simply doesn't print #wd-lg-desktop-nav otherwise.
   ========================================================================== */
.wd-lg-desktop-nav {
	display: none;
	position: fixed;
	left: 50%;
	bottom: calc(var(--wdlg-bottom-offset) + 12px);
	z-index: 999;
	transform: translate3d(calc(-50% + var(--wdlg-parallax-x)), var(--wdlg-parallax-y), 0) scale(var(--wdlg-breathe-scale));

	background: var(--wdlg-glass-bg);
	border: 1px solid var(--wdlg-glass-border);
	border-radius: var(--wdlg-radius);
	box-shadow: var(--wdlg-shadow-float);
	-webkit-backdrop-filter: blur(var(--wdlg-blur)) saturate(var(--wdlg-blur-saturate));
	backdrop-filter: blur(var(--wdlg-blur)) saturate(var(--wdlg-blur-saturate));
	overflow: visible !important;   /* <-- این خط رو اضافه کنید */
	isolation: isolate;
	contain: layout style;

	padding: 6px 10px;
	transition: transform var(--wdlg-duration) var(--wdlg-ease),
		opacity var(--wdlg-duration) var(--wdlg-ease),
		border-radius var(--wdlg-duration-scroll) var(--wdlg-ease),
		backdrop-filter var(--wdlg-duration-scroll) var(--wdlg-ease);
}

.wd-lg-desktop-nav::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		circle at var(--wdlg-reflect-x) var(--wdlg-reflect-y),
		rgba(255, 255, 255, calc(0.5 * var(--wdlg-reflection-boost))) 0%,
		rgba(255, 255, 255, 0) 55%
	);
	opacity: var(--wdlg-reflect-opacity);
	mix-blend-mode: overlay;
	pointer-events: none;
	transition: opacity var(--wdlg-duration) var(--wdlg-ease);
}

/* html[data-wd-lg-desktop-enabled] is set by the JS engine the moment
   it confirms the setting is on AND the clone has been built — this
   is what actually shows the bar; the width media query below is
   what additionally hides the *mobile* bar so the two never overlap. */
html[data-wd-lg-desktop-enabled="1"] .wd-lg-desktop-nav {
	display: block;
}

@media (min-width: 1025px) {
	html[data-wd-lg-desktop-enabled="1"] .mobile-navigation,
	html[data-wd-lg-desktop-enabled="1"] .wd-toolbar {
		display: none !important;
	}
}

.wd-lg-desktop-nav.wd-lg-hide {
	transform: translate3d(-50%, 130%, 0);
	opacity: 0;
	pointer-events: none;
}

.wd-lg-desktop-nav.wd-lg-opening {
	transform: translate3d(-50%, 55%, 0) scale(0.92);
	opacity: 0;
	-webkit-backdrop-filter: blur(0px) saturate(100%);
	backdrop-filter: blur(0px) saturate(100%);
	transition: transform var(--wdlg-duration-open) var(--wdlg-ease-spring),
		opacity var(--wdlg-duration-open) var(--wdlg-ease),
		backdrop-filter var(--wdlg-duration-open) var(--wdlg-ease);
}

.wd-lg-desktop-nav,
.wd-lg-desktop-nav .wd-toolbar,
.wd-lg-desktop-nav .mobile-navigation {
	display: flex;
	align-items: stretch;
	gap: 4px;
}
.wd-lg-desktop-nav > .wd-toolbar,
.wd-lg-desktop-nav > .mobile-navigation {
	position: static !important;
	width: auto !important;
	max-width: none !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transform: none !important;
	padding: 0 !important;
}

.wd-lg-desktop-nav .mobile-nav-icon,
.wd-lg-desktop-nav .wd-tools-element {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	min-width: 44px;
	padding: 8px 16px;
	border-radius: var(--wdlg-radius-icon);
	cursor: pointer;
	overflow: hidden;
	transform: translate3d(var(--wdlg-magnet-x, 0px), var(--wdlg-magnet-y, 0px), 0) scale(var(--wdlg-magnet-scale, 1));
	transition: transform var(--wdlg-duration-fast) var(--wdlg-ease),
		background-color var(--wdlg-duration-fast) var(--wdlg-ease);
}

.wd-lg-desktop-nav .mobile-nav-icon > a,
.wd-lg-desktop-nav .wd-tools-element > a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.wd-lg-desktop-nav .mobile-nav-icon:hover,
.wd-lg-desktop-nav .wd-tools-element:hover {
	background: color-mix(in srgb, var(--wdlg-accent) 10%, transparent);
	transform: translate3d(0, -2px, 0);
}

.wd-lg-desktop-nav .mobile-nav-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	transition: transform var(--wdlg-duration-fast) var(--wdlg-ease);
}
.wd-lg-desktop-nav .mobile-nav-icon-wrap svg {
	width: 100%;
	height: 100%;
}
.wd-lg-desktop-nav .wd-tools-icon {
	font-size: 20px;
	line-height: 1;
}

.wd-lg-desktop-nav .mobile-nav-icon-label,
.wd-lg-desktop-nav .wd-toolbar-label {
	font-size: 12.5px;
	font-weight: 500;
	opacity: 0.8;
	white-space: nowrap;
}

.wd-lg-desktop-nav .mobile-nav-icon.active > a,
.wd-lg-desktop-nav .mobile-nav-icon.wd-active > a,
.wd-lg-desktop-nav .wd-tools-element.wd-active,
.wd-lg-desktop-nav .wd-tools-element.active {
	background: color-mix(in srgb, var(--wdlg-accent) 16%, transparent);
}
.wd-lg-desktop-nav .mobile-nav-icon.active .mobile-nav-icon-wrap svg,
.wd-lg-desktop-nav .mobile-nav-icon.wd-active .mobile-nav-icon-wrap svg,
.wd-lg-desktop-nav .wd-tools-element.wd-active .wd-tools-icon,
.wd-lg-desktop-nav .wd-tools-element.active .wd-tools-icon {
	filter: drop-shadow(0 0 6px var(--wdlg-accent-glow));
	color: var(--wdlg-accent);
}
.wd-lg-desktop-nav .mobile-nav-icon.active .mobile-nav-icon-label,
.wd-lg-desktop-nav .mobile-nav-icon.wd-active .mobile-nav-icon-label,
.wd-lg-desktop-nav .wd-tools-element.wd-active .wd-toolbar-label,
.wd-lg-desktop-nav .wd-tools-element.active .wd-toolbar-label {
	opacity: 1;
	color: var(--wdlg-accent);
}

.wd-lg-desktop-nav .mobile-nav-counter,
.wd-lg-desktop-nav .wd-tools-count {
	position: absolute;
	top: 2px;
	right: 6px;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wdlg-accent);
	color: #fff;
	font-size: 9.5px;
	line-height: 15px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--wdlg-glass-bg);
}

.wd-lg-desktop-nav .mobile-nav-icon > a:focus-visible,
.wd-lg-desktop-nav .wd-tools-element:focus-visible,
.wd-lg-desktop-nav .wd-tools-element > a:focus-visible {
	outline: 2px solid var(--wdlg-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   5. Graceful degradation — no backdrop-filter support
   ========================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mobile-navigation,
	.wd-toolbar,
	.wd-lg-desktop-nav {
		background: rgba(255, 255, 255, 0.92);
	}
	@media (prefers-color-scheme: dark) {
		.mobile-navigation,
		.wd-toolbar,
		.wd-lg-desktop-nav {
			background: rgba(30, 30, 32, 0.92);
		}
	}
	body.dark-skin .mobile-navigation,
	body.dark-skin .wd-toolbar,
	body.dark-skin .wd-lg-desktop-nav,
	body.d-dark .mobile-navigation,
	body.d-dark .wd-toolbar,
	body.d-dark .wd-lg-desktop-nav {
		background: rgba(30, 30, 32, 0.92);
	}
}

/* ==========================================================================
   6. Reduced motion / accessibility overrides
   ------------------------------------------------------------------
   This is the accessibility floor: every premium effect (breathing,
   reflection, ripple, parallax, magnetic hover, liquid scroll,
   opening animation) is switched off completely here, in addition to
   the JS Smart Performance Engine also disabling itself for the same
   media query — belt and suspenders, so nothing depends on JS having
   run yet.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.mobile-navigation,
	.wd-toolbar,
	.wd-lg-desktop-nav,
	.mobile-navigation .mobile-nav-icon > a,
	.mobile-navigation .mobile-nav-icon-wrap,
	.mobile-navigation .mobile-nav-icon-wrap svg,
	.mobile-navigation .mobile-nav-icon-label,
	.wd-toolbar .wd-tools-element,
	.wd-toolbar .wd-tools-icon,
	.wd-toolbar .wd-toolbar-label,
	.wd-lg-desktop-nav .mobile-nav-icon > a,
	.wd-lg-desktop-nav .mobile-nav-icon-wrap,
	.wd-lg-desktop-nav .wd-tools-element,
	.wd-lg-desktop-nav .wd-tools-icon {
		transition: none !important;
		animation: none !important;
	}
	.mobile-navigation .mobile-nav-icon.active .mobile-nav-icon-wrap,
	.mobile-navigation .mobile-nav-icon.wd-active .mobile-nav-icon-wrap,
	.wd-toolbar .wd-tools-element.wd-active .wd-tools-icon,
	.wd-toolbar .wd-tools-element.active .wd-tools-icon {
		transform: none;
	}
	.mobile-navigation,
	.wd-toolbar,
	.wd-lg-desktop-nav {
		--wdlg-breathe-scale: 1 !important;
		--wdlg-parallax-x: 0px !important;
		--wdlg-parallax-y: 0px !important;
		--wdlg-reflect-opacity: 0 !important;
	}
	.mobile-navigation .mobile-nav-icon,
	.wd-toolbar .wd-tools-element,
	.wd-lg-desktop-nav .mobile-nav-icon,
	.wd-lg-desktop-nav .wd-tools-element {
		--wdlg-magnet-x: 0px !important;
		--wdlg-magnet-y: 0px !important;
		--wdlg-magnet-scale: 1 !important;
	}
	.wd-lg-ripple {
		display: none !important;
	}
}

@media (forced-colors: active) {
	.mobile-navigation,
	.wd-toolbar,
	.wd-lg-desktop-nav {
		background: Canvas;
		border: 1px solid CanvasText;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}
	.mobile-navigation .mobile-nav-icon.active > a,
	.wd-toolbar .wd-tools-element.wd-active,
	.wd-lg-desktop-nav .mobile-nav-icon.active > a,
	.wd-lg-desktop-nav .wd-tools-element.wd-active {
		outline: 2px solid Highlight;
	}
	.mobile-navigation::before,
	.wd-toolbar::before,
	.wd-lg-desktop-nav::before {
		display: none;
	}
}

/* Responsive fine-tuning for narrower mobile screens */
@media (max-width: 420px) {
	.mobile-navigation,
	.wd-toolbar {
		width: calc(100% - 16px) !important;
		padding: 4px 2px !important;
		gap: 0 !important;
	}
	.mobile-navigation .mobile-nav-icon,
	.wd-toolbar .wd-tools-element {
		min-width: 0 !important;
		padding: 4px 1px !important;
		gap: 1px !important;
	}
	.wd-toolbar .wd-tools-icon {
		width: 26px !important;
		height: 26px !important;
		font-size: calc(var(--wdlg-icon-font-size) - 3px) !important;
	}
	.mobile-navigation .mobile-nav-icon-wrap {
		width: 22px !important;
		height: 22px !important;
	}
	.mobile-navigation .mobile-nav-icon-label,
	.wd-toolbar .wd-toolbar-label {
		font-size: clamp(8px, 2.5vw, calc(var(--wdlg-label-font-size) - 1.5px)) !important;
		letter-spacing: -0.02em !important;
		max-width: 100% !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
}

@media (max-width: 350px) {
	.mobile-navigation,
	.wd-toolbar {
		width: calc(100% - 8px) !important;
		padding: 3px 1px !important;
	}
	.wd-toolbar .wd-tools-icon {
		width: 22px !important;
		height: 22px !important;
		font-size: 16px !important;
	}
	.mobile-navigation .mobile-nav-icon-label,
	.wd-toolbar .wd-toolbar-label {
		font-size: 8.5px !important;
		transform: scale(0.95);
	}
}

/* ==========================================================================
   7. Smart Performance Engine — degrade tiers
   ------------------------------------------------------------------
   Set on <html data-wd-lg-perf="high|balanced|low"> by
   liquid-glass-nav.js after reading device signals (or forced by the
   "Performance mode" setting). Effects are removed cheapest-first:
   reflection/parallax/breathing first (pure decoration), then blur
   quality, never touching layout or core interactivity.
   ========================================================================== */
html[data-wd-lg-perf="balanced"] .mobile-navigation::before,
html[data-wd-lg-perf="balanced"] .wd-toolbar::before,
html[data-wd-lg-perf="balanced"] .wd-lg-desktop-nav::before {
	display: none;
}

html[data-wd-lg-perf="low"] {
	--wdlg-blur: 8px !important;
}
html[data-wd-lg-perf="low"] .mobile-navigation::before,
html[data-wd-lg-perf="low"] .wd-toolbar::before,
html[data-wd-lg-perf="low"] .wd-lg-desktop-nav::before,
html[data-wd-lg-perf="low"] .wd-lg-ripple {
	display: none !important;
}
html[data-wd-lg-perf="low"] .mobile-navigation,
html[data-wd-lg-perf="low"] .wd-toolbar,
html[data-wd-lg-perf="low"] .wd-lg-desktop-nav {
	--wdlg-breathe-scale: 1 !important;
	--wdlg-parallax-x: 0px !important;
	--wdlg-parallax-y: 0px !important;
}
html[data-wd-lg-perf="low"] .mobile-navigation.wd-lg-scrolling,
html[data-wd-lg-perf="low"] .wd-toolbar.wd-lg-scrolling {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}






/* ==========================================================================
   Per-link icon identity — solid colored circle + always-white icon,
   driven by [data-wd-lg-role].
   ========================================================================== */

/* متن و آیکن همیشه سفید و ثابت — دیگه adaptive نیست، تا با پس‌زمینه‌ی
   روشن قاطی نشه */
.wd-toolbar .wd-toolbar-label,
.mobile-navigation .mobile-nav-icon-label {
	color: var(--wdlg-label-color);
}
.mobile-navigation .mobile-nav-icon-wrap svg,
.mobile-navigation .mobile-nav-icon-wrap svg *,
.wd-toolbar .wd-tools-icon svg,
.wd-toolbar .wd-tools-icon svg * {
	fill: var(--wdlg-label-color);
	stroke: var(--wdlg-label-color);
	color: var(--wdlg-label-color);
}
.mobile-navigation .mobile-nav-icon-wrap img,
.wd-toolbar .wd-tools-icon img {
	filter: brightness(0) invert(1);
}

/* اندازه‌ی ثابت برای جعبه‌ی آیکون فونتی — این خط دقیقاً چیزیه که کم
   بود و باعث نقطه‌های کج‌ومعوج و افتادن روی متن می‌شد */
.wd-toolbar .wd-tools-icon {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mobile-navigation .mobile-nav-icon-wrap {
	position: relative;
	z-index: 1;
}



.wd-toolbar .wd-tools-element[data-wd-lg-role="account"] .wd-tools-icon,
.mobile-navigation .mobile-nav-icon[data-wd-lg-role="account"] .mobile-nav-icon-wrap {
	--wdlg-item-color: #af52de;
}
.wd-toolbar .wd-tools-element[data-wd-lg-role="wishlist"] .wd-tools-icon,
.mobile-navigation .mobile-nav-icon[data-wd-lg-role="wishlist"] .mobile-nav-icon-wrap {
	--wdlg-item-color: #ff3b30;
}
.wd-toolbar .wd-tools-element[data-wd-lg-role="cart"] .wd-tools-icon,
.mobile-navigation .mobile-nav-icon[data-wd-lg-role="cart"] .mobile-nav-icon-wrap {
	--wdlg-item-color: #34c759;
}
.wd-toolbar .wd-tools-element[data-wd-lg-role="shop"] .wd-tools-icon,
.mobile-navigation .mobile-nav-icon[data-wd-lg-role="shop"] .mobile-nav-icon-wrap {
	--wdlg-item-color: #ff9500;
}





/* بعد */
.wd-toolbar .wd-tools-element:has(a[href*="my-account"]) .wd-tools-icon,
.wd-toolbar .wd-tools-element:has(a[href*="login"]) .wd-tools-icon,
.wd-toolbar .wd-tools-element:has(a[href*="#"][class*="login"]) .wd-tools-icon,
.wd-toolbar .wd-tools-element:has(a.wd-open-login) .wd-tools-icon,
.wd-toolbar .wd-tools-element.wd-tools-account .wd-tools-icon,
.wd-toolbar .wd-tools-element[class*="account"] .wd-tools-icon,
.mobile-navigation .mobile-nav-icon:has(a[href*="my-account"]) .mobile-nav-icon-wrap svg,
.mobile-navigation .mobile-nav-icon:has(a[href*="login"]) .mobile-nav-icon-wrap svg,
.mobile-navigation .mobile-nav-icon[class*="account"] .mobile-nav-icon-wrap svg {
	--wdlg-item-color: #af52de;
}