/*
 * vgs-design — core module (ADR-047, stage 1): Persian digits, focus, buttons, form fields,
 * WooCommerce notices and money, on the real Flatsome / WooCommerce / GF markup.
 *
 * Scope and weight:
 * - Everything sits under body.vgs-design, so switching the module off takes all of it back.
 * - Buttons and fields are limited to #main (page content). The header, off-canvas menu, header search
 *   and the app bars keep their own look; they belong to the chrome stage.
 * - Our own plugins (.vgs-*, .vgsa-*) and vgpf (.vgpf*) keep their CSS for now — their stages move
 *   them onto the tokens. Quantity steppers, icon/circle buttons and carousel arrows are left alone.
 * - The #main id out-ranks the class-based selectors of Flatsome, the child theme and GF. !important
 *   appears only where the source itself used it (the child theme's GF textarea frame and field
 *   box-shadow, Flatsome's notice centring) — each noted in place.
 * - Every variant repeats the full base selector (with its :not() chain) and adds its own class or
 *   state, so it always out-ranks the base — a shorter variant selector would silently lose.
 * - Selectors avoid :is()/:where() and :not() lists, so an old Android WebView drops nothing.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */

/* Latin digits printed by WooCommerce / PHP render as Persian with the font's own set; the characters
 * stay Latin, so copy, search and JS parsing are unchanged. */
body.vgs-design {
	font-feature-settings: "ss01";
	-webkit-tap-highlight-color: transparent;
}

/* Codes, e-mail, card and phone numbers stay Latin. The listing description too: it is built from the
 * seller's form and mixes game UIDs, account names and player tags with the numbers — a buyer compares a
 * UID with the Latin one inside the game (review 1405/07/05). Wrapping only the ID-like values in
 * <bdi dir="ltr"> would let the counts turn Persian; that is a later, PHP-side refinement. */
body.vgs-design input,
body.vgs-design textarea,
body.vgs-design code,
body.vgs-design kbd,
body.vgs-design bdi[dir="ltr"],
body.vgs-design [dir="ltr"],
body.vgs-design a[href^="tel:"],
body.vgs-design a[href^="mailto:"],
body.vgs-design .product-short-description,
body.vgs-design #tab-description {
	font-feature-settings: normal;
}

body.vgs-design :focus-visible {
	outline: 2px solid var(--vgs-primary-ink);
	outline-offset: 2px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
/* Base = Flatsome .button (every colour/style modifier) inside the content, the add-to-cart button and
 * the mini-cart buttons. Primary look: one blue fill. */

body.vgs-design #main .button:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link),
body.vgs-design #main button.single_add_to_cart_button,
body.vgs-design #main .comment-form input[type="submit"],
body.vgs-design .widget_shopping_cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vgs-s2);
	min-height: var(--vgs-btn-md);
	min-width: var(--vgs-tap);
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--vgs-r-md);
	background: var(--vgs-primary);
	background-image: none;
	box-shadow: none;
	color: var(--vgs-on-primary);
	font-family: inherit;
	font-size: var(--vgs-fs-16);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-label);
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	white-space: normal;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color var(--vgs-dur-fast) var(--vgs-ease), border-color var(--vgs-dur-fast) var(--vgs-ease), transform var(--vgs-dur-fast) var(--vgs-ease);
}

body.vgs-design #main .button:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link):hover,
body.vgs-design #main button.single_add_to_cart_button:hover,
body.vgs-design #main .comment-form input[type="submit"]:hover,
body.vgs-design .widget_shopping_cart .button:hover {
	background-color: var(--vgs-primary-hover);
	color: var(--vgs-on-primary);
}

body.vgs-design #main .button:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link):active,
body.vgs-design #main button.single_add_to_cart_button:active,
body.vgs-design #main .comment-form input[type="submit"]:active {
	background-color: var(--vgs-primary-press);
	transform: scale(0.98);
}

/* Secondary: Flatsome «secondary» and every outline button — ink on white with a strong line, so each
 * group keeps a single blue fill. The mini-cart's «مشاهده سبد خرید» too («تسویه حساب» stays primary). */
body.vgs-design #main .button.secondary:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link),
body.vgs-design #main .button.is-outline:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link),
body.vgs-design .widget_shopping_cart .button.wc-forward:not(.checkout) {
	background: var(--vgs-surface);
	border-color: var(--vgs-line-strong);
	color: var(--vgs-ink);
}

body.vgs-design #main .button.secondary:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link):hover,
body.vgs-design #main .button.is-outline:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link):hover,
body.vgs-design .widget_shopping_cart .button.wc-forward:not(.checkout):hover {
	background: var(--vgs-field);
	border-color: var(--vgs-ink-2);
	color: var(--vgs-ink);
}

/* Light: a white button on a coloured block (Flatsome .white, e.g. the home hero). */
body.vgs-design #main .button.white:not(.is-outline):not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link) {
	background: var(--vgs-surface);
	border-color: transparent;
	color: var(--vgs-primary-ink);
}

body.vgs-design #main .button.white:not(.is-outline):not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link):hover {
	background: var(--vgs-primary-soft);
	color: var(--vgs-primary-ink);
}

/* The child theme centres some buttons with `.vg-btn-center{display:table; margin:0 auto}`; the base rule's
 * inline-flex undid that. Same centring, flex kept for the icon. */
body.vgs-design #main .button.vg-btn-center:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link) {
	display: flex;
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}

/* «مشاهده همه ›» next to the blog title is a text link in a 150px column: no side padding, one line. */
body.vgs-design #main .vg-sec-blog .button.vg-btn-3:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link) {
	padding-left: 0;
	padding-right: 0;
	white-space: nowrap;
}

/* Small buttons are allowed only on desktop; on touch screens every button keeps the 44px hit area. */
@media (min-width: 850px) {
	body.vgs-design #main .button.is-small:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link),
	body.vgs-design #main .button.is-smaller:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link),
	body.vgs-design #main .button.is-xsmall:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link) {
		min-height: var(--vgs-btn-sm);
		padding: 0 14px;
		font-size: var(--vgs-fs-14);
	}
}

/* The main purchase call gets the large size (it is a .button too, so it needs the full chain). */
body.vgs-design #main button.single_add_to_cart_button.button:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link) {
	min-height: var(--vgs-btn-lg);
}

/* Disabled: neutral fill, never a faded blue. */
body.vgs-design #main .button.disabled:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link),
body.vgs-design #main .button:disabled:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link) {
	background: var(--vgs-plain-soft);
	border-color: transparent;
	color: var(--vgs-ink-2);
	cursor: not-allowed;
	opacity: 1;
	transform: none;
}

/* ── Form fields ──────────────────────────────────────────────────────── */
/* WooCommerce, GF, the comment form and plain content forms. Our plugins' fields (.vgs-*), vgpf's filter
 * controls and the quantity box keep their own look until their stages. Every rule below repeats the
 * type attribute and the :not() chain of its base. */

body.vgs-design #main input[type="text"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="email"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="tel"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="number"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="password"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="url"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="date"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main select[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main textarea[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	/* No margin here: Flatsome's `margin-bottom:1em` and its per-context resets (cart coupon, ordering
	 * select, table cells) keep the spacing between fields and before the submit row. */
	width: 100%;
	max-width: 100%;
	min-height: var(--vgs-control-h);
	padding: 10px 14px;
	border: 1px solid var(--vgs-line-strong);
	border-radius: var(--vgs-r-md);
	background-color: var(--vgs-surface);
	box-shadow: none;
	color: var(--vgs-ink);
	font-family: inherit;
	font-size: var(--vgs-fs-16); /* 16px: iOS does not zoom */
	line-height: var(--vgs-lh-label);
	transition: border-color var(--vgs-dur-fast) var(--vgs-ease), box-shadow var(--vgs-dur-fast) var(--vgs-ease);
}

/* Inputs and selects size by their content (Flatsome and the child theme fix them at 2.5–2.9em). A textarea
 * keeps the height its form gave it — GF sets one per size; with height:auto its rows=10 would stretch it. */
body.vgs-design #main input[type="text"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="email"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="tel"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="number"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="password"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="url"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main input[type="date"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main select[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	height: auto;
}

/* The child theme forces `border: solid 1px #eee !important; padding: 7px 10px !important` on GF textareas —
 * a near-invisible frame (1.1:1). Only !important can answer !important. */
body.vgs-design #main .gform_wrapper textarea[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	border: 1px solid var(--vgs-line-strong) !important;
	padding: 10px 14px !important;
}

body.vgs-design #main .gform_wrapper textarea[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus {
	border-color: var(--vgs-primary-ink) !important;
}

body.vgs-design #main .gform_wrapper .gfield_error textarea[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	border-color: var(--vgs-danger) !important;
}

/* GF gives each textarea size a minimum height; the 112px floor below would flatten them. */
body.vgs-design #main .gform_wrapper textarea.small[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	min-height: 6rem;
}

body.vgs-design #main .gform_wrapper textarea.medium[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	min-height: 12rem;
}

body.vgs-design #main .gform_wrapper textarea.large[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	min-height: 18rem;
}

/* The child theme locks some GF fields with a parent class (pointer-events:none + grey fill), not with
 * [readonly]; show the lock by shape as well. */
body.vgs-design #main .gf_readonly_field input[type="text"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .gf_readonly_field input[type="tel"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	border-style: dashed;
	color: var(--vgs-ink-2);
}

/* File inputs (GF uploads): same frame as the other fields; the native button becomes a quiet chip.
 * The pseudo-elements get rules of their own — an engine that does not know one drops the whole rule. */
body.vgs-design #main input[type="file"]:not([class*="vgs-"]):not([class*="vgpf"]) {
	max-width: 100%;
	height: auto;
	min-height: var(--vgs-control-h);
	padding: 5px;
	border: 1px solid var(--vgs-line-strong);
	border-radius: var(--vgs-r-md);
	background-color: var(--vgs-surface);
	box-shadow: none;
	color: var(--vgs-ink);
	font-family: inherit;
	font-size: var(--vgs-fs-16);
	line-height: var(--vgs-lh-label);
}

body.vgs-design #main input[type="file"]:not([class*="vgs-"]):not([class*="vgpf"])::file-selector-button {
	min-height: 36px;
	margin: 0;
	margin-inline-end: 8px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--vgs-r-sm);
	background: var(--vgs-field);
	color: var(--vgs-ink);
	font: inherit;
	font-weight: var(--vgs-fw-strong);
	cursor: pointer;
}

body.vgs-design #main input[type="file"]:not([class*="vgs-"]):not([class*="vgpf"])::-webkit-file-upload-button {
	min-height: 36px;
	margin: 0;
	margin-inline-end: 8px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--vgs-r-sm);
	background: var(--vgs-field);
	color: var(--vgs-ink);
	font: inherit;
	font-weight: var(--vgs-fw-strong);
	cursor: pointer;
}

/* Flatsome draws the select arrow as a background image on the inline-end side; leave it room. */
body.vgs-design #main select[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	padding-inline-end: 40px;
	cursor: pointer;
}

body.vgs-design #main textarea[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	min-height: 112px;
	line-height: var(--vgs-lh-body);
	resize: vertical;
}

body.vgs-design #main input:not([class*="vgs-"]):not([class*="vgpf"])::placeholder,
body.vgs-design #main textarea:not([class*="vgs-"]):not([class*="vgpf"])::placeholder {
	color: var(--vgs-muted);
	opacity: 1;
}

body.vgs-design #main input[type="text"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus,
body.vgs-design #main input[type="email"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus,
body.vgs-design #main input[type="tel"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus,
body.vgs-design #main input[type="number"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus,
body.vgs-design #main input[type="password"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus,
body.vgs-design #main input[type="url"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus,
body.vgs-design #main input[type="date"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus,
body.vgs-design #main select[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus,
body.vgs-design #main textarea[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):focus {
	outline: none;
	border-color: var(--vgs-primary-ink);
	/* The child theme sets `box-shadow: unset !important` on every field, which would hide the ring. */
	box-shadow: var(--vgs-focus) !important;
}

/* Locked fields say so by shape, not only by colour. */
body.vgs-design #main input[type="text"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty)[readonly],
body.vgs-design #main input[type="text"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):disabled,
body.vgs-design #main input[type="email"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty)[readonly],
body.vgs-design #main input[type="email"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):disabled,
body.vgs-design #main input[type="tel"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty)[readonly],
body.vgs-design #main input[type="tel"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):disabled,
body.vgs-design #main select[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty):disabled,
body.vgs-design #main textarea[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty)[readonly] {
	background-color: var(--vgs-field);
	border-style: dashed;
	color: var(--vgs-ink-2);
	cursor: not-allowed;
}

/* WooCommerce marks an invalid row, GF an invalid field: red line (the message stays next to it). */
body.vgs-design #main .woocommerce-invalid input[type="text"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .woocommerce-invalid input[type="email"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .woocommerce-invalid input[type="tel"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .woocommerce-invalid input[type="password"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .gfield_error input[type="text"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .gfield_error input[type="email"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .gfield_error input[type="tel"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .gfield_error input[type="number"]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .gfield_error select[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty),
body.vgs-design #main .gfield_error textarea[name]:not([class*="vgs-"]):not([class*="vgpf"]):not(.qty) {
	border-color: var(--vgs-danger);
}

/* Labels above the field, readable. */
body.vgs-design #main .form-row label,
body.vgs-design #main .woocommerce-form-row label {
	font-size: var(--vgs-fs-14);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-label);
	color: var(--vgs-ink);
}

/* Check boxes and radios: the brand colour; the size stays native (vgpf's lists are dense). */
body.vgs-design #main input[type="checkbox"],
body.vgs-design #main input[type="radio"] {
	accent-color: var(--vgs-primary);
}

/* ── WooCommerce notices ──────────────────────────────────────────────── */
/* Flatsome wraps them: .message-wrapper > .message-container (success / alert colour + icon). Plain
 * WooCommerce markup (.woocommerce-info without the wrapper) gets the same card. One card: soft tone,
 * 3px bar on the inline-start side, text at the start — never centred, never a black frame. */

body.vgs-design .woocommerce-message,
body.vgs-design .woocommerce-info,
body.vgs-design .woocommerce-error {
	--vgsd-tone: var(--vgs-info-ink);
	--vgsd-tone-soft: var(--vgs-info-soft);
}

body.vgs-design .woocommerce-message.woocommerce-message {
	--vgsd-tone: var(--vgs-ok-ink);
	--vgsd-tone-soft: var(--vgs-ok-soft);
}

body.vgs-design .woocommerce-error.woocommerce-error {
	--vgsd-tone: var(--vgs-danger-ink);
	--vgsd-tone-soft: var(--vgs-danger-soft);
}

body.vgs-design .message-wrapper {
	margin: 0 0 var(--vgs-s4);
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	list-style: none;
}

body.vgs-design .message-wrapper .message-container,
body.vgs-design .woocommerce-message:not(.message-wrapper),
body.vgs-design .woocommerce-info:not(.message-wrapper),
body.vgs-design .woocommerce-error:not(.message-wrapper) > li {
	display: block;
	max-width: none;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-inline-start: 3px solid var(--vgsd-tone);
	border-radius: var(--vgs-r-md);
	background: var(--vgsd-tone-soft);
	box-shadow: none;
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-14);
	line-height: 1.7;
	text-align: start;
}

body.vgs-design .woocommerce-error:not(.message-wrapper) {
	margin: 0 0 var(--vgs-s4);
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

body.vgs-design .message-wrapper .message-container > i,
body.vgs-design .message-wrapper .message-container > [class^="icon-"] {
	margin-inline-end: 6px;
	color: var(--vgsd-tone);
}

body.vgs-design .message-wrapper .message-container a:not(.button),
body.vgs-design .woocommerce-message:not(.message-wrapper) a:not(.button),
body.vgs-design .woocommerce-info:not(.message-wrapper) a:not(.button) {
	color: var(--vgsd-tone);
	font-weight: var(--vgs-fw-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Flatsome centres notices below 850px with `.medium-text-center{text-align:center!important}`; a notice
 * reads from the start of the line, so the same weight is needed. */
body.vgs-design .message-wrapper .message-container.medium-text-center {
	text-align: start !important;
}

/* Flatsome hides the notice's «مشاهده سبد خرید» (its cart popup opens instead); keep that — the base button
 * rule above would otherwise bring it back. */
body.vgs-design #main .message-container .button.wc-forward:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link) {
	display: none;
}

/* The notice's own button («بازگشت به فروشگاه»…) is secondary. */
body.vgs-design #main .message-container .button:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link),
body.vgs-design #main .woocommerce-message:not(.message-wrapper) .button:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link),
body.vgs-design #main .woocommerce-info:not(.message-wrapper) .button:not(.icon):not(.circle):not(.is-form):not(.flickity-button):not(.submit-button):not(.is-link) {
	float: none;
	margin: var(--vgs-s2) 0 0;
	margin-inline-start: var(--vgs-s3);
	background: var(--vgs-surface);
	border-color: var(--vgs-line-strong);
	color: var(--vgs-ink);
}

/* ── Money ────────────────────────────────────────────────────────────── */
/* The child theme makes the amount a reversed flex row (span.woocommerce-Price-amount.amount
 * {display:flex; flex-flow:row-reverse}); without <bdi> that prints «تومان۳۵۰,۰۰۰». Back to inline text in
 * reading order; the unit follows the number with a real gap (the font's NBSP is 0.81px wide), smaller
 * and muted; the amount takes the colour of where it sits (white on a coloured card, not #111). */

body.vgs-design span.woocommerce-Price-amount.amount {
	display: inline;
	flex-flow: row;
	color: inherit;
	font-weight: var(--vgs-fw-strong);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.vgs-design span.woocommerce-Price-amount.amount > bdi {
	white-space: nowrap;
}

body.vgs-design span.woocommerce-Price-currencySymbol {
	margin: 0;
	margin-inline-start: 0.25em;
	font-size: max(12px, 0.8em);
	font-weight: var(--vgs-fw-body);
	color: var(--vgs-muted);
}

/* On a coloured surface the unit follows the text colour, never grey-on-colour. */
body.vgs-design .woo-wallet-price span.woocommerce-Price-currencySymbol,
body.vgs-design .button span.woocommerce-Price-currencySymbol {
	color: inherit;
}

/* The wallet balance card is purple; woo-wallet makes its <p> white, but the child theme's
 * `.woocommerce-MyAccount-content p{color:#393939!important}` wins there, so «inherit» would print grey on
 * purple (1.66:1). The colour goes on the amount itself (no !important needed on the span). */
body.vgs-design .woo-wallet-price span.woocommerce-Price-amount.amount {
	color: var(--vgs-on-primary);
}

/* woo-wallet's credit green (#1f9d57) is 3.49:1 on white; the cell takes the readable ok ink and the amount
 * and its «+» inherit it together. */
body.vgs-design .woo-wallet-my-wallet-container .ww-txn-table .ww-txn-cell--amount.credit {
	color: var(--vgs-ok-ink);
}

/* ── Leaks through newly defined tokens ───────────────────────────────── */
/* vgs-settlement's panel.css styles `.vgs-note` without a .vgs-panel prefix, with `var(--vgs-canvas)` that
 * used to be undefined outside the panel. With these tokens on :root the theme footer's own `.vgs-note`
 * lines got a box. Until panel.css scopes its generic classes (account stage), keep the footer's clear. */
body.vgs-design .vgs-footer .vgs-note {
	background: none;
}