/**
 * مشخصات محصول + قیمت هر گرم ([mah24_product_specs]).
 *
 * مبنای واکنش‌گرایی، عرض خودِ جعبه است نه عرض صفحه (container query)؛ چون این
 * شورت‌کد هم زیر گالری محصول تمام‌عرض می‌نشیند و هم در ستون باریک کناری. اگر
 * مرورگری container query نداشت، همان چیدمان auto-fit قبلی سر جایش می‌ماند.
 */

.mah24-specs {
	--mah24-specs-wine: #35091c;
	--mah24-specs-accent: #c20a51;
	--mah24-specs-ink: #1c1c1c;
	--mah24-specs-soft: #8a8489;
	--mah24-specs-line: #f0edee;
	--mah24-specs-soft-bg: #faf7f8;
	--mah24-specs-radius: 18px;
	--mah24-specs-cols: 2;
	--mah24-specs-min: 260px;

	display: block !important;
	width: 100% !important;
	padding: 18px 20px 20px !important;
	border: 1px solid var(--mah24-specs-line) !important;
	border-radius: var(--mah24-specs-radius) !important;
	background: #fff !important;
	color: var(--mah24-specs-ink) !important;
	font-size: 14px !important;
	line-height: 1.9 !important;
	text-align: start !important;
}

.mah24-specs *,
.mah24-specs *::before,
.mah24-specs *::after {
	box-sizing: border-box !important;
}

.mah24-specs__title {
	margin: 0 0 14px !important;
	padding: 0 !important;
	color: var(--mah24-specs-ink) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.8 !important;
}

/* داخل کارت دیگری (مثل خصوصیات عطر): قاب و پس‌زمینه لازم نیست. */
.mah24-specs.mah24-specs--bare {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

/* ---------------------------------------- قیمت هر گرم */

.mah24-specs__price {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 8px 14px !important;
	margin-bottom: 14px !important;
	padding: 12px 16px !important;
	border: 1px solid #f3e3ea !important;
	border-radius: 14px !important;
	background: linear-gradient(120deg, #fdf6f9, #fbf3f6) !important;
}

.mah24-specs__price-label {
	color: var(--mah24-specs-wine) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
}

.mah24-specs__price-value {
	display: inline-flex !important;
	align-items: baseline !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	min-width: 0 !important;
}

.mah24-specs__from {
	color: var(--mah24-specs-soft) !important;
	font-size: 12px !important;
}

.mah24-specs__now,
.mah24-specs__now .amount,
.mah24-specs__now bdi {
	color: var(--mah24-specs-wine) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	line-height: 1.7 !important;
	white-space: nowrap !important;
}

.mah24-specs__now .woocommerce-Price-currencySymbol {
	color: var(--mah24-specs-soft) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

.mah24-specs__old,
.mah24-specs__old .amount,
.mah24-specs__old bdi {
	color: #bdb7b9 !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	text-decoration: line-through !important;
	white-space: nowrap !important;
}

.mah24-specs__off {
	display: inline-flex !important;
	align-items: center !important;
	padding: 2px 9px !important;
	border-radius: 10px !important;
	background: var(--mah24-specs-accent) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1.8 !important;
}

/* ---------------------------------------- قیمت هر واریشن */

.mah24-specs ul.mah24-specs__vars {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
	gap: 8px !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	list-style: none !important;
}

.mah24-specs ul.mah24-specs__vars > li {
	margin: 0 !important;
	list-style: none !important;
}

.mah24-specs__var {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	padding: 8px 12px !important;
	border: 1px solid var(--mah24-specs-line) !important;
	border-radius: 12px !important;
	background: var(--mah24-specs-soft-bg) !important;
}

.mah24-specs__var-name {
	color: var(--mah24-specs-ink) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	overflow-wrap: anywhere !important;
}

.mah24-specs__var-price,
.mah24-specs__var-price .amount,
.mah24-specs__var-price bdi {
	color: var(--mah24-specs-wine) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	white-space: nowrap !important;
}

.mah24-specs__var-price .woocommerce-Price-currencySymbol {
	color: var(--mah24-specs-soft) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
}

/* ---------------------------------------- ردیف‌های ویژگی */

.mah24-specs dl.mah24-specs__list {
	display: grid !important;
	/* راه دوم (برای مرورگر بدون container query): چیدمان بر پایه‌ی کمینه‌عرض. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mah24-specs-min, 260px)), 1fr)) !important;
	gap: 2px 20px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* راه اول: شمار ستون دقیقاً همان چیزی است که شورت‌کد گفته، تا وقتی جا باشد. */
@container (max-width: 519px) {
	.mah24-specs dl.mah24-specs__list {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@container (min-width: 520px) {
	.mah24-specs dl.mah24-specs__list {
		grid-template-columns: repeat(var(--mah24-specs-cols, 2), minmax(0, 1fr)) !important;
	}
}

.mah24-specs__row {
	display: flex !important;
	align-items: baseline !important;
	gap: 10px !important;
	min-width: 0 !important;
	padding: 9px 2px !important;
	border-bottom: 1px dashed var(--mah24-specs-line) !important;
}

.mah24-specs dt.mah24-specs__key {
	flex: 0 0 auto !important;
	max-width: 45% !important;
	margin: 0 !important;
	color: var(--mah24-specs-soft) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	overflow-wrap: anywhere !important;
}

.mah24-specs dd.mah24-specs__val {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	justify-content: flex-end !important;
	gap: 6px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	margin-inline-start: auto !important;
	text-align: end !important;
}

.mah24-specs__chip {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 10px !important;
	border: 1px solid var(--mah24-specs-line) !important;
	border-radius: 9px !important;
	background: var(--mah24-specs-soft-bg) !important;
	color: var(--mah24-specs-ink) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.9 !important;
	overflow-wrap: anywhere !important;
}

.mah24-specs__empty {
	margin: 0 !important;
	padding: 18px !important;
	border: 1px dashed var(--mah24-specs-line) !important;
	border-radius: 14px !important;
	color: var(--mah24-specs-soft) !important;
	font-size: 13px !important;
	text-align: center !important;
}

/* ---------------------------------------- ریزنمایش */

/* جعبه‌ی باریک: برچسب و مقدار زیر هم می‌نشینند. */
@container (max-width: 420px) {
	.mah24-specs__row {
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 4px !important;
		padding: 10px 2px !important;
	}

	.mah24-specs dt.mah24-specs__key {
		max-width: none !important;
	}

	.mah24-specs dd.mah24-specs__val {
		justify-content: flex-start !important;
		margin-inline-start: 0 !important;
		text-align: start !important;
	}

	.mah24-specs__price {
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 4px !important;
		padding: 12px 14px !important;
	}
}

@media screen and (max-width: 560px) {
	.mah24-specs {
		padding: 14px 14px 16px !important;
	}

	.mah24-specs__price {
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 4px !important;
		padding: 12px 14px !important;
	}

	.mah24-specs__row {
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 4px !important;
		padding: 10px 2px !important;
	}

	.mah24-specs dt.mah24-specs__key {
		max-width: none !important;
	}

	.mah24-specs dd.mah24-specs__val {
		justify-content: flex-start !important;
		margin-inline-start: 0 !important;
		text-align: start !important;
	}
}

/* ---------------------------------------- نمای ساده (فهرست نقطه‌ای) */

/*
 * نمای ساده‌ی طرح: یک عنوان و چند سطر «برچسب : مقدار» با نقطه‌ی کوچک ابتدای
 * خط. عمداً هیچ قاب، پس‌زمینه یا چیپی ندارد تا هرجای صفحه بنشیند.
 */
.mah24-slist {
	--mah24-slist-ink: #1c1c1c;
	--mah24-slist-soft: #5b5b5b;
	--mah24-slist-dot: #9a9a9a;

	display: block !important;
	width: 100% !important;
	color: var(--mah24-slist-ink) !important;
	font-size: 14px !important;
	line-height: 2 !important;
	text-align: start !important;
}

.mah24-slist * {
	box-sizing: border-box !important;
}

.mah24-slist__title {
	margin: 0 0 14px !important;
	color: var(--mah24-slist-ink) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.9 !important;
}

.mah24-slist ul.mah24-slist__items {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mah24-slist li.mah24-slist__item {
	position: relative !important;
	margin: 0 !important;
	padding-inline-start: 18px !important;
	color: var(--mah24-slist-soft) !important;
	font-size: 13.5px !important;
	line-height: 1.9 !important;
	list-style: none !important;
	overflow-wrap: anywhere !important;
}

/* نقطه‌ی کوچک ابتدای هر سطر (به‌جای list-style تا جایش دقیق باشد). */
.mah24-slist:not(.mah24-slist--plain) li.mah24-slist__item::before {
	content: "" !important;
	position: absolute !important;
	inset-inline-start: 4px !important;
	top: 0.85em !important;
	width: 4px !important;
	height: 4px !important;
	border-radius: 50% !important;
	background: var(--mah24-slist-dot) !important;
}

.mah24-slist--plain li.mah24-slist__item {
	padding-inline-start: 0 !important;
}

.mah24-slist__key {
	color: var(--mah24-slist-soft) !important;
}

.mah24-slist__sep {
	color: var(--mah24-slist-dot) !important;
}

.mah24-slist__val {
	color: var(--mah24-slist-ink) !important;
	font-weight: 500 !important;
}

.mah24-slist__val .amount,
.mah24-slist__val bdi {
	color: inherit !important;
	font-weight: 700 !important;
}

.mah24-slist__empty {
	margin: 0 !important;
	color: var(--mah24-slist-soft) !important;
	font-size: 13px !important;
}

/* ---------------------------------------- جدول واریشن‌ها */

/*
 * دسکتاپ: جدول واقعی (سرستون + ردیف). موبایل: همان جدول به کارت تبدیل می‌شود
 * و هر خانه برچسب ستونش را از data-label می‌گیرد؛ چون مبنای واکنش‌گرایی عرضِ
 * خودِ جعبه است (container query)، در ستون باریک کنار محصول هم درست جمع می‌شود.
 */
.mah24-vtable {
	--mah24-vt-wine: #35091c;
	--mah24-vt-ink: #1c1c1c;
	--mah24-vt-soft: #7c7c84;
	--mah24-vt-line: #eceaea;
	--mah24-vt-head: #faf6f8;
	--mah24-vt-zebra: #fbfafa;
	--mah24-vt-radius: 16px;

	display: block !important;
	width: 100% !important;
	color: var(--mah24-vt-ink) !important;
	font-size: 14px !important;
	line-height: 1.9 !important;
	text-align: start !important;
}

.mah24-vtable * {
	box-sizing: border-box !important;
}

.mah24-vtable__title {
	margin: 0 0 12px !important;
	color: var(--mah24-vt-ink) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}

.mah24-vtable table.mah24-vtable__table {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border: 1px solid var(--mah24-vt-line) !important;
	border-radius: var(--mah24-vt-radius) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden !important;
	background: #fff !important;
	box-shadow: 0 6px 20px rgba(28, 12, 20, 0.05) !important;
	table-layout: auto !important;
}

.mah24-vtable th,
.mah24-vtable td {
	padding: 12px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mah24-vt-line) !important;
	text-align: start !important;
	vertical-align: middle !important;
}

.mah24-vtable thead th {
	background: var(--mah24-vt-head) !important;
	border-bottom: 1px solid #e6dfe3 !important;
	color: var(--mah24-vt-wine) !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	white-space: nowrap !important;
}

.mah24-vtable tbody tr:nth-child(even) td {
	background: var(--mah24-vt-zebra) !important;
}


.mah24-vtable tbody tr:hover td {
	background: #f7f2f4 !important;
}

.mah24-vtable td {
	color: var(--mah24-vt-ink) !important;
	font-size: 13.5px !important;
	overflow-wrap: anywhere !important;
}

.mah24-vtable th.mah24-vtable__price-col,
.mah24-vtable td.mah24-vtable__price {
	text-align: end !important;
	white-space: nowrap !important;
}

.mah24-vtable .mah24-vtable__now,
.mah24-vtable .mah24-vtable__now .amount,
.mah24-vtable .mah24-vtable__now bdi {
	color: var(--mah24-vt-wine) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
}

.mah24-vtable .mah24-vtable__now .woocommerce-Price-currencySymbol {
	color: var(--mah24-vt-soft) !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
}

.mah24-vtable .mah24-vtable__old,
.mah24-vtable .mah24-vtable__old .amount,
.mah24-vtable .mah24-vtable__old bdi {
	display: inline-block !important;
	margin-inline-end: 8px !important;
	color: #bdb7b9 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-decoration: line-through !important;
}

/*
 * حالت تمام‌عرض: جدول از قاب ستونِ صفحه‌ساز بیرون می‌زند و کل پهنای صفحه را
 * می‌گیرد، تا پس‌زمینه‌اش نصفه‌ونیمه دیده نشود.
 */
.mah24-vtable--full {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
	padding-inline: clamp(12px, 4vw, 48px) !important;
	box-sizing: border-box !important;
}

/* ---------------------- برچسب موجودی ---------------------- */

/*
 * وضعیت هر شرکت/گرید مستقیم از موجودی ووکامرس می‌آید؛ برچسب بیضی‌شکل با
 * پس‌زمینه‌ی سبز یا قرمز، تا مشتری یک‌نگاهی بفهمد.
 */
.mah24-vtable th.mah24-vtable__stock-col,
.mah24-vtable td.mah24-vtable__stock {
	text-align: center !important;
	white-space: nowrap !important;
}

.mah24-vtable .mah24-vtag {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	min-width: 76px !important;
	padding: 5px 14px !important;
	border: 1px solid transparent !important;
	border-radius: 18px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.8 !important;
	justify-content: center !important;
}

.mah24-vtable .mah24-vtag::before {
	content: '' !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: currentColor !important;
}

.mah24-vtable .mah24-vtag.is-in {
	border-color: #b7e4c1 !important;
	background: #e8f7ec !important;
	color: #1c7a3c !important;
}

.mah24-vtable .mah24-vtag.is-out {
	border-color: #f2c2c2 !important;
	background: #fdecec !important;
	color: #b3261e !important;
}

/* ردیف ناموجود کم‌رنگ‌تر است، ولی خوانا می‌ماند. */
.mah24-vtable tbody tr.is-out td {
	color: #8a8a90 !important;
}

.mah24-vtable tbody tr.is-out .mah24-vtable__now,
.mah24-vtable tbody tr.is-out .mah24-vtable__now .amount,
.mah24-vtable tbody tr.is-out .mah24-vtable__now bdi {
	color: #8a8a90 !important;
}

.mah24-vtable__empty {
	margin: 0 !important;
	padding: 18px !important;
	border: 1px dashed var(--mah24-vt-line) !important;
	border-radius: var(--mah24-vt-radius) !important;
	color: var(--mah24-vt-soft) !important;
	font-size: 13px !important;
	text-align: center !important;
}

/* ---------------- جعبه‌ی باریک/موبایل: هر ردیف یک کارت ---------------- */

@container (max-width: 520px) {
	.mah24-vtable table.mah24-vtable__table,
	.mah24-vtable tbody,
	.mah24-vtable tr,
	.mah24-vtable td {
		display: block !important;
		width: 100% !important;
	}

	.mah24-vtable table.mah24-vtable__table {
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		overflow: visible !important;
	}

	.mah24-vtable thead {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		white-space: nowrap !important;
	}

	.mah24-vtable tbody tr {
		margin-bottom: 12px !important;
		padding: 6px 14px !important;
		border: 1px solid var(--mah24-vt-line) !important;
		border-radius: 14px !important;
		background: #fff !important;
		box-shadow: 0 6px 16px -14px rgba(53, 9, 28, 0.4) !important;
	}

	.mah24-vtable tbody tr:last-child {
		margin-bottom: 0 !important;
	}

	.mah24-vtable tbody tr:nth-child(even) td,
	.mah24-vtable tbody tr:hover td {
		background: none !important;
	}

	.mah24-vtable tbody td {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		padding: 9px 0 !important;
		border-bottom: 1px dashed var(--mah24-vt-line) !important;
	}

	.mah24-vtable tbody td:last-child {
		border-bottom: 0 !important;
	}

	/* برچسب ستون، کنار مقدارِ همان خانه. */
	.mah24-vtable tbody td::before {
		content: attr(data-label) !important;
		flex: 0 1 auto !important;
		min-width: 0 !important;
		color: var(--mah24-vt-soft) !important;
		overflow-wrap: anywhere !important;
		font-size: 12.5px !important;
		font-weight: 600 !important;
	}

	.mah24-vtable tbody td.mah24-vtable__price {
		flex-wrap: wrap !important;
		padding-top: 10px !important;
		text-align: end !important;
		/* در کارت، قیمت باید بتواند به خط بعد برود وگرنه کارت سرریز می‌کند. */
		white-space: normal !important;
	}

	.mah24-vtable tbody td.mah24-vtable__price::before {
		color: var(--mah24-vt-wine) !important;
		font-weight: 700 !important;
	}
}

/* راه دوم برای مرورگر بدون container query: همان شکست بر پایه‌ی عرض صفحه. */
@media screen and (max-width: 560px) {
	.mah24-vtable table.mah24-vtable__table,
	.mah24-vtable tbody,
	.mah24-vtable tr,
	.mah24-vtable td {
		display: block !important;
		width: 100% !important;
	}

	.mah24-vtable table.mah24-vtable__table {
		border: 0 !important;
		background: none !important;
	}

	.mah24-vtable thead {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
	}

	.mah24-vtable tbody tr {
		margin-bottom: 12px !important;
		padding: 6px 14px !important;
		border: 1px solid var(--mah24-vt-line) !important;
		border-radius: 14px !important;
		background: #fff !important;
	}

	.mah24-vtable tbody td {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		padding: 9px 0 !important;
		border-bottom: 1px dashed var(--mah24-vt-line) !important;
	}

	.mah24-vtable tbody td:last-child {
		border-bottom: 0 !important;
	}

	.mah24-vtable tbody td::before {
		content: attr(data-label) !important;
		min-width: 0 !important;
		color: var(--mah24-vt-soft) !important;
		font-size: 12.5px !important;
		font-weight: 600 !important;
		overflow-wrap: anywhere !important;
	}

	.mah24-vtable tbody td.mah24-vtable__price {
		flex-wrap: wrap !important;
		white-space: normal !important;
	}
}

/* ======================= ماتریس موجودی شرکت و گریدها ======================= */

/*
 * دسکتاپ: جدولی که هر ستونش یک گرید است؛ سرستون نام کوتاه (TOP) را درشت و
 * نام کامل («کیفیت top») را زیرش می‌آورد و نقشِ کم‌رنگ همان نام پشتش می‌نشیند.
 * موبایل: هر شرکت یک کارت می‌شود و گریدها داخلش کاشی‌های دوستونی.
 */
.mah24-mtx {
	--mah24-mtx-ink: #1d1d20;
	--mah24-mtx-soft: #8b8b93;
	--mah24-mtx-line: #ececef;
	--mah24-mtx-wine: #35091c;
	--mah24-mtx-in: #1e8e4a;
	--mah24-mtx-out: #d8342b;
	--mah24-mtx-none: #a9a9b2;
	--mah24-mtx-tile: #f7f7f9;
	--mah24-mtx-mark: rgba(29, 29, 32, 0.05);

	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 18px !important;
	border: 1px solid var(--mah24-mtx-line) !important;
	border-radius: 22px !important;
	background: #fff !important;
	box-shadow: 0 10px 30px -22px rgba(28, 12, 20, 0.45) !important;
	color: var(--mah24-mtx-ink) !important;
	font-size: 14px !important;
	line-height: 1.9 !important;
	text-align: start !important;
}

.mah24-mtx * {
	box-sizing: border-box !important;
}

/* ---------------------------------------- سر کارت */

.mah24-mtx__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-direction: row-reverse !important;
	gap: 12px !important;
	margin: 0 0 14px !important;
}

.mah24-mtx__badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 12px !important;
	background: #f4f4f6 !important;
	color: var(--mah24-mtx-ink) !important;
}

.mah24-mtx h3.mah24-mtx__title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--mah24-mtx-ink) !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.8 !important;
}

/* ---------------------------------------- راهنما و فیلترها */

.mah24-mtx__bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 0 14px !important;
}

.mah24-mtx__legend {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

/* خط جداکننده‌ی نازک میان آیتم‌های راهنما، مثل طرح. */
.mah24-mtx__legend-item + .mah24-mtx__legend-item {
	padding-inline-end: 12px !important;
	border-inline-end: 1px solid var(--mah24-mtx-line) !important;
}

.mah24-mtx__legend-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: var(--mah24-mtx-soft) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
}

.mah24-mtx__legend-item.is-in {
	color: var(--mah24-mtx-in) !important;
}

.mah24-mtx__legend-item.is-out {
	color: var(--mah24-mtx-out) !important;
}

.mah24-mtx__legend-item.is-none {
	color: var(--mah24-mtx-none) !important;
}

.mah24-mtx__filters {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.mah24-mtx button.mah24-mtx__filter {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 8px 20px !important;
	border: 1px solid var(--mah24-mtx-line) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--mah24-mtx-ink) !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
	transition: background .18s, color .18s, border-color .18s !important;
}

.mah24-mtx button.mah24-mtx__filter:hover {
	border-color: var(--mah24-mtx-wine) !important;
	color: var(--mah24-mtx-wine) !important;
}

.mah24-mtx button.mah24-mtx__filter.is-active {
	border-color: var(--mah24-mtx-wine) !important;
	background: var(--mah24-mtx-wine) !important;
	color: #fff !important;
}

/* ---------------------------------------- جدول */

.mah24-mtx__scroll {
	position: relative !important;
	width: 100% !important;
	margin: 0 !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

.mah24-mtx table.mah24-mtx__table {
	width: 100% !important;
	min-width: 520px !important;
	margin: 0 !important;
	border: 1px solid var(--mah24-mtx-line) !important;
	border-radius: 16px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden !important;
	background: #fff !important;
	table-layout: fixed !important;
}

.mah24-mtx th,
.mah24-mtx td {
	padding: 12px 10px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mah24-mtx-line) !important;
	text-align: center !important;
	vertical-align: middle !important;
}

.mah24-mtx tbody tr:last-child th,
.mah24-mtx tbody tr:last-child td {
	border-bottom: 0 !important;
}

/* سرستون گرید: نام کوتاه درشت، نام کامل زیرش و نقشِ کم‌رنگ پشتش. */
.mah24-mtx thead th {
	position: relative !important;
	background: #fafafb !important;
	color: var(--mah24-mtx-ink) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

.mah24-mtx__col-name {
	position: relative !important;
	z-index: 1 !important;
	display: block !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.5 !important;
}

.mah24-mtx__col-sub {
	position: relative !important;
	z-index: 1 !important;
	display: block !important;
	color: var(--mah24-mtx-soft) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
}

/* نقشِ پس‌زمینه: نام گرید، درشت و خیلی کم‌رنگ. */
.mah24-mtx__mark {
	position: absolute !important;
	inset-inline-start: 8px !important;
	top: 50% !important;
	z-index: 0 !important;
	transform: translateY(-50%) !important;
	color: var(--mah24-mtx-mark) !important;
	font-size: 34px !important;
	font-weight: 900 !important;
	letter-spacing: -0.02em !important;
	line-height: 1 !important;
	pointer-events: none !important;
	user-select: none !important;
}

/* ستون اول (شرکت): مثل ستون گریدها وسط‌چین، بدون فاصله‌ی اضافی از راست. */
.mah24-mtx th.mah24-mtx__row-head,
.mah24-mtx th.mah24-mtx__name {
	width: 22% !important;
	padding-inline-start: 0 !important;
	text-align: center !important;
}

.mah24-mtx th.mah24-mtx__name {
	background: #fff !important;
	font-weight: 700 !important;
}

.mah24-mtx__name-text {
	display: inline-block !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	vertical-align: middle !important;
}

/* ---------------------------------------- خانه‌ها */

.mah24-mtx__box {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 62px !important;
	padding: 8px 6px !important;
	border-radius: 12px !important;
	transition: opacity .18s !important;
}

.mah24-mtx__text {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	min-width: 0 !important;
	line-height: 1.7 !important;
}

/* نام گرید داخل خانه فقط در موبایل لازم است؛ در جدول، سرستون همان را دارد. */
.mah24-mtx__grade {
	display: none !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
}

.mah24-mtx__state {
	font-size: 13px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
}

.mah24-mtx__cell.is-in .mah24-mtx__state,
.mah24-mtx__cell.is-in .mah24-mtx__icon {
	color: var(--mah24-mtx-in) !important;
}

.mah24-mtx__cell.is-out .mah24-mtx__state,
.mah24-mtx__cell.is-out .mah24-mtx__icon {
	color: var(--mah24-mtx-out) !important;
}

.mah24-mtx__cell.is-none .mah24-mtx__state,
.mah24-mtx__cell.is-none .mah24-mtx__icon {
	color: var(--mah24-mtx-none) !important;
}

.mah24-mtx__cell.is-dim .mah24-mtx__box {
	opacity: .35 !important;
}

.mah24-mtx__icon {
	display: block !important;
	flex: 0 0 auto !important;
}

.mah24-mtx__price {
	display: flex !important;
	align-items: baseline !important;
	gap: 4px !important;
	color: var(--mah24-mtx-in) !important;
	white-space: nowrap !important;
}

.mah24-mtx__num {
	font-size: 13.5px !important;
	font-weight: 800 !important;
}

.mah24-mtx__unit {
	font-size: 11px !important;
	font-weight: 600 !important;
	opacity: .85 !important;
}

/* در جدول، نقشِ پس‌زمینه فقط در سرستون است. */
.mah24-mtx__cell .mah24-mtx__mark {
	display: none !important;
}

.mah24-mtx__none {
	margin: 12px 0 0 !important;
	color: var(--mah24-mtx-soft) !important;
	font-size: 13px !important;
	text-align: center !important;
}

/* ---------------------------------------- زیرنویس */

.mah24-mtx__note {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 7px !important;
	margin: 12px 2px 0 !important;
	color: var(--mah24-mtx-soft) !important;
	font-size: 12.5px !important;
}

.mah24-mtx__note-icon {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	color: var(--mah24-mtx-none) !important;
}

.mah24-mtx__empty {
	margin: 0 !important;
	padding: 18px !important;
	border: 1px dashed var(--mah24-mtx-line) !important;
	border-radius: 16px !important;
	color: var(--mah24-mtx-soft) !important;
	font-size: 13px !important;
	text-align: center !important;
}

/* ---------------------------------------- موبایل: کارتِ هر شرکت */

@media screen and (max-width: 720px) {
	.mah24-mtx {
		padding: 14px !important;
		border-radius: 18px !important;
	}

	.mah24-mtx__bar {
		align-items: stretch !important;
		flex-direction: column !important;
	}

	.mah24-mtx__legend {
		justify-content: flex-end !important;
	}

	.mah24-mtx__filters {
		width: 100% !important;
	}

	.mah24-mtx button.mah24-mtx__filter {
		flex: 1 1 auto !important;
		padding: 9px 10px !important;
	}

	/* جدول به فهرستی از کارت‌ها تبدیل می‌شود. */
	.mah24-mtx__scroll {
		overflow: visible !important;
	}

	.mah24-mtx table.mah24-mtx__table,
	.mah24-mtx tbody,
	.mah24-mtx tr,
	.mah24-mtx th,
	.mah24-mtx td {
		display: block !important;
		width: auto !important;
	}

	.mah24-mtx table.mah24-mtx__table {
		min-width: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		overflow: visible !important;
	}

	.mah24-mtx thead {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		white-space: nowrap !important;
	}

	.mah24-mtx tbody tr.mah24-mtx__row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
		margin-bottom: 12px !important;
		padding: 14px !important;
		border: 1px solid var(--mah24-mtx-line) !important;
		border-radius: 16px !important;
		background: #fff !important;
		box-shadow: 0 8px 22px -20px rgba(28, 12, 20, 0.5) !important;
	}

	.mah24-mtx tbody tr.mah24-mtx__row:last-child {
		margin-bottom: 0 !important;
	}

	/* نام شرکت، تیتر کارت (عرضِ درصدیِ ستون در کارت معنا ندارد). */
	.mah24-mtx th.mah24-mtx__name {
		grid-column: 1 / -1 !important;
		width: auto !important;
		padding: 0 0 10px !important;
		border-bottom: 0 !important;
		text-align: start !important;
	}

	.mah24-mtx th.mah24-mtx__name::before {
		content: attr(data-label) " " !important;
		color: var(--mah24-mtx-soft) !important;
		font-size: 11.5px !important;
		font-weight: 600 !important;
	}

	.mah24-mtx__name-text {
		font-size: 15px !important;
		font-weight: 800 !important;
	}

	/* هر گرید یک کاشی. */
	.mah24-mtx td.mah24-mtx__cell {
		padding: 0 !important;
		border-bottom: 0 !important;
	}

	.mah24-mtx__box {
		align-items: center !important;
		justify-content: flex-start !important;
		flex-direction: row-reverse !important;
		gap: 8px !important;
		min-height: 64px !important;
		padding: 10px 12px !important;
		border-radius: 12px !important;
		background: var(--mah24-mtx-tile) !important;
		overflow: hidden !important;
	}

	.mah24-mtx__text {
		align-items: flex-end !important;
		flex: 1 1 auto !important;
		text-align: end !important;
	}

	.mah24-mtx__grade {
		display: block !important;
	}

	.mah24-mtx__state {
		font-size: 12px !important;
	}

	/* داخل کاشی، خودِ قیمت یعنی «موجود»؛ کلمه‌اش تکراری است. */
	.mah24-mtx__cell.is-in .mah24-mtx__state {
		display: none !important;
	}

	.mah24-mtx__num {
		font-size: 12.5px !important;
	}

	/* نقشِ پس‌زمینه‌ی گرید، داخل کاشی. */
	.mah24-mtx__cell .mah24-mtx__mark {
		display: block !important;
		inset-inline-start: 6px !important;
		font-size: 30px !important;
	}

	/* موجود: قیمت زیر وضعیت می‌ماند، نه کنارش. */
	.mah24-mtx__price {
		justify-content: flex-end !important;
	}
}

@media screen and (max-width: 380px) {
	.mah24-mtx tbody tr.mah24-mtx__row {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mah24-mtx__box,
	.mah24-mtx button.mah24-mtx__filter {
		transition: none !important;
	}
}