/**
 * نمای محصول ناموجود در کارت‌ها (کلاس mah24-is-out).
 *
 * این فایل روی کارت‌های همه‌ی بخش‌ها می‌نشیند: کارت ماه۲۴، کارت آرشیو فروشگاه،
 * کارت علاقه‌مندی‌ها، ردیف پرفروش‌ترین‌ها و کارت خرید. چون ترتیب بارگذاری با
 * استایل هر بخش تضمین‌شده نیست، هر گزینشگر دست‌کم یک کلاس بیشتر از قاعده‌ی
 * پایه دارد تا مستقل از ترتیب، همین‌جا حرف آخر را بزند.
 *
 * دکمه‌ی علاقه‌مندی عمداً خاکستری نمی‌شود؛ محصول ناموجود هم باید بتواند در
 * فهرست علاقه‌مندی‌ها ذخیره شود و رنگش نشانه‌ی همان دکمه‌ی فعال است.
 */

.mah24-is-out {
	--mah24-out-ink: #9a9aa2;
	--mah24-out-chip: #6f6f78;
	--mah24-out-chip-bg: rgba(255, 255, 255, 0.92);
}

/* ------------------------------------------------------------ تصویر */

.mah24-is-out .mah24-card__frame img,
.mah24-is-out .mah24-shop__media img,
.mah24-is-out .mah24-favcard__thumb img,
.mah24-is-out .mah24-best__thumb img,
.mah24-is-out img {
	filter: grayscale(100%) !important;
	opacity: 0.55 !important;
}

/*
 * لوگوی برند در کارت خرید، تصویرِ محصول نیست؛ ناموجود بودنِ یک عطر نباید
 * نشانِ برند را بی‌رنگ کند.
 */
.mah24-is-out.mah24-pbox .mah24-pbox__logo-img {
	filter: none !important;
	opacity: 1 !important;
}

/* سایه‌ی زیر شیشه‌ی عطر هم باید بی‌رنگ شود، وگرنه خاکستری‌بودن نصفه می‌ماند. */
.mah24-is-out .mah24-card__frame img {
	filter: grayscale(100%) drop-shadow(0 16px 20px rgba(20, 20, 24, 0.18)) !important;
}

/* روی کارت ناموجود، بزرگ‌نمایی تصویر هنگام هاور بی‌معنی است. */
.mah24-is-out:hover .mah24-card__frame img {
	transform: none !important;
}

/* ------------------------------------------------------------- متن‌ها */

.mah24-is-out .mah24-card__title,
.mah24-is-out .mah24-card__subtitle,
.mah24-is-out .mah24-shop__name a,
.mah24-is-out .mah24-favcard__name,
.mah24-is-out .mah24-best__name,
.mah24-is-out .mah24-pbox__title {
	color: var(--mah24-out-ink) !important;
}

/* هاور هم نباید رنگِ «قابل خرید» بدهد. */
.mah24-is-out .mah24-card__title:hover,
.mah24-is-out .mah24-shop__name a:hover,
.mah24-is-out .mah24-favcard__name:hover,
.mah24-is-out .mah24-best__link:hover .mah24-best__name {
	color: var(--mah24-out-ink) !important;
}

/* ------------------------------------------------------------- قیمت */

.mah24-is-out .mah24-card__prices,
.mah24-is-out .mah24-shop__price,
.mah24-is-out .mah24-favcard__price,
.mah24-is-out .mah24-best__price,
.mah24-is-out .mah24-pbox__price-value {
	color: var(--mah24-out-ink) !important;
	opacity: 0.75 !important;
	text-decoration-color: currentColor !important;
}

.mah24-is-out .mah24-card__now,
.mah24-is-out .mah24-card__old,
.mah24-is-out .mah24-best__price ins,
.mah24-is-out .mah24-pbox__price-now,
.mah24-is-out .mah24-pbox__price-min,
.mah24-is-out .mah24-pbox__price-max {
	color: var(--mah24-out-ink) !important;
}

/* نشان درصد تخفیف روی محصولی که خریدنی نیست، گمراه‌کننده است. */
.mah24-is-out .mah24-card__badges,
.mah24-is-out .onsale {
	display: none !important;
}

/* ------------------------------------------------- نشان «ناموجود» */

.mah24-out-badge {
	position: absolute !important;
	inset-inline-start: 12px !important;
	bottom: 12px !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center !important;
	max-width: calc(100% - 24px) !important;
	padding: 3px 10px !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-radius: 999px !important;
	background: var(--mah24-out-chip-bg, rgba(255, 255, 255, 0.92)) !important;
	box-shadow: 0 4px 12px -8px rgba(20, 12, 16, 0.5) !important;
	color: var(--mah24-out-chip, #6f6f78) !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	line-height: 1.9 !important;
	white-space: nowrap !important;
	pointer-events: none !important;
}

/* جایی که تصویر کوچک است (مثل ردیف پرفروش‌ترین‌ها)، نشان در جریان متن می‌آید. */
.mah24-out-badge--inline {
	position: static !important;
	bottom: auto !important;
	max-width: none !important;
	padding: 1px 8px !important;
	border: 0 !important;
	background: #f1f1f3 !important;
	box-shadow: none !important;
	font-size: 11px !important;
}

/* ظرف تصویر باید مرجع جای‌گیریِ نشان باشد. */
.mah24-is-out .mah24-card__media,
.mah24-is-out .mah24-shop__media,
.mah24-is-out .mah24-favcard__media,
.mah24-is-out .mah24-best__thumb {
	position: relative !important;
}

/* --------------------------------------------- دکمه‌ی خرید و کارت خرید */

.mah24-is-out .mah24-card__buy,
.mah24-is-out .mah24-favcard__cart {
	filter: grayscale(100%) !important;
	opacity: 0.7 !important;
}

.mah24-is-out .mah24-favcard__cart {
	pointer-events: none !important;
}

/* کارت خرید، نشان خودش را در نوار وضعیت دارد؛ فقط قیمت و تصویر کم‌رنگ می‌شوند. */
.mah24-is-out.mah24-pbox {
	--mah24-out-chip-bg: #f4f4f6;
}

/* ------------------------------------------------------------ موبایل */

@media screen and (max-width: 767px) {
	.mah24-out-badge {
		inset-inline-start: 8px !important;
		bottom: 8px !important;
		padding: 2px 8px !important;
		max-width: calc(100% - 16px) !important;
		font-size: 10.5px !important;
	}
}