/**
 * کارت خرید محصول ([mah24_product_box]).
 *
 * مبنای واکنش‌گرایی، عرض خودِ کارت است نه عرض صفحه (container query)؛ چون این
 * شورت‌کد هم در ستون باریک کنار گالری می‌نشیند و هم تمام‌عرض در موبایل.
 */

.mah24-pbox {
	--mah24-pbox-wine: #4a0d22;
	--mah24-pbox-wine-2: #7d1233;
	--mah24-pbox-accent: #8e0b33;
	--mah24-pbox-ink: #241a1e;
	--mah24-pbox-soft: #8b8085;
	--mah24-pbox-line: #efe7e9;
	--mah24-pbox-tint: #f8f1f2;
	--mah24-pbox-bg: #fdfaf9;
	--mah24-pbox-ok: #2f9e5f;
	--mah24-pbox-off: #b6adaa;
	--mah24-pbox-logo: 108px;
	--mah24-pbox-radius: 24px;

	/*
	 * مبنای واکنش‌گراییِ این کارت، عرض خودش است. بدون این خط، هیچ‌کدام از
	 * بلوک‌های ‎@container پایین فایل اجرا نمی‌شدند؛ عرض کارت از والد می‌آید
	 * (width:100%) نه از محتوا، پس مهارِ inline-size چیزی را جابه‌جا نمی‌کند.
	 */
	container-type: inline-size !important;

	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	width: 100% !important;
	margin: 0 0 20px !important;
	padding: 26px 22px 22px !important;
	border: 1px solid var(--mah24-pbox-line) !important;
	border-radius: var(--mah24-pbox-radius) !important;
	background: var(--mah24-pbox-bg) !important;
	box-shadow: 0 10px 30px rgba(74, 13, 34, 0.06) !important;
	color: var(--mah24-pbox-ink) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.9 !important;
	text-align: start !important;
}

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

/* ------------------------------------------------ سربرگ: لوگو و نام برند */

.mah24-pbox__head {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 12px !important;
	text-align: center !important;
}

.mah24-pbox__logo {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: calc(var(--mah24-pbox-logo) + 44px) !important;
	height: calc(var(--mah24-pbox-logo) + 44px) !important;
	border-radius: 50% !important;
	background: radial-gradient(circle at 50% 45%, #ffffff 32%, var(--mah24-pbox-tint) 100%) !important;
	text-decoration: none !important;
}

.mah24-pbox__logo-img {
	display: block !important;
	width: var(--mah24-pbox-logo) !important;
	height: var(--mah24-pbox-logo) !important;
	border-radius: 0 !important;
	object-fit: contain !important;
	mix-blend-mode: multiply !important;
}

.mah24-pbox__logo-letter {
	color: var(--mah24-pbox-wine) !important;
	font-size: calc(var(--mah24-pbox-logo) * 0.42) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

.mah24-pbox__title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--mah24-pbox-ink) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	line-height: 1.6 !important;
	letter-spacing: -0.01em !important;
}

.mah24-pbox__title a {
	color: inherit !important;
	text-decoration: none !important;
}

/* خط تزئینی با لوزی وسط. */
.mah24-pbox__divider {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: min(240px, 70%) !important;
	height: 10px !important;
}

.mah24-pbox__divider::before,
.mah24-pbox__divider::after {
	content: "" !important;
	flex: 1 1 auto !important;
	height: 1px !important;
	background: linear-gradient(90deg, rgba(142, 11, 51, 0), rgba(142, 11, 51, 0.28)) !important;
}

.mah24-pbox__divider::after {
	background: linear-gradient(90deg, rgba(142, 11, 51, 0.28), rgba(142, 11, 51, 0)) !important;
}

.mah24-pbox__divider i {
	flex: 0 0 auto !important;
	width: 7px !important;
	height: 7px !important;
	background: var(--mah24-pbox-accent) !important;
	opacity: 0.55 !important;
	transform: rotate(45deg) !important;
}

/* ------------------------------------------------ نوار موجودی / فروش / کشور */

.mah24-pbox__facts {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 0 !important;
	padding: 14px 6px !important;
	border: 1px solid var(--mah24-pbox-line) !important;
	border-radius: 16px !important;
	background: #fffdfd !important;
}

/* وقتی یکی از ستون‌ها خاموش است، بقیه خودشان جا را پر می‌کنند. */
.mah24-pbox__facts:has(.mah24-pbox__fact:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.mah24-pbox__facts:has(.mah24-pbox__fact:first-child:last-child) {
	grid-template-columns: minmax(0, 1fr) !important;
}

.mah24-pbox__fact {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 2px 10px !important;
	border-inline-start: 1px solid var(--mah24-pbox-line) !important;
	text-align: center !important;
}

.mah24-pbox__fact:first-child {
	border-inline-start: 0 !important;
}

.mah24-pbox__fact-label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: var(--mah24-pbox-soft) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.7 !important;
	white-space: nowrap !important;
}

.mah24-pbox__fact-label .mah24-pbox__svg {
	flex: 0 0 auto !important;
	color: var(--mah24-pbox-accent) !important;
	opacity: 0.75 !important;
}

.mah24-pbox__fact-value {
	color: var(--mah24-pbox-ink) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
}

.mah24-pbox__fact-value a {
	color: inherit !important;
	text-decoration: none !important;
}

.mah24-pbox__fact-value a:hover {
	color: var(--mah24-pbox-accent) !important;
}

.mah24-pbox__dot {
	flex: 0 0 auto !important;
	width: 9px !important;
	height: 9px !important;
	border-radius: 50% !important;
	background: var(--mah24-pbox-ok) !important;
	box-shadow: 0 0 0 3px rgba(47, 158, 95, 0.16) !important;
}

.mah24-pbox__dot--out {
	background: var(--mah24-pbox-off) !important;
	box-shadow: 0 0 0 3px rgba(182, 173, 170, 0.2) !important;
}

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

.mah24-pbox__price {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 2px !important;
	text-align: center !important;
}

.mah24-pbox__price-label {
	color: var(--mah24-pbox-soft) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.mah24-pbox__price-value {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	color: var(--mah24-pbox-accent) !important;
	font-size: 21px !important;
	font-weight: 800 !important;
	line-height: 1.8 !important;
	direction: rtl !important;
}

.mah24-pbox__price-value .woocommerce-Price-amount,
.mah24-pbox__price-value bdi {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

.mah24-pbox__price-value .woocommerce-Price-currencySymbol {
	font-size: 0.82em !important;
	font-weight: 700 !important;
}

.mah24-pbox__price-sep {
	color: var(--mah24-pbox-accent) !important;
	font-weight: 700 !important;
	opacity: 0.7 !important;
}

.mah24-pbox__price-old {
	color: var(--mah24-pbox-soft) !important;
	font-size: 0.7em !important;
	font-weight: 600 !important;
	text-decoration: line-through !important;
}

.mah24-pbox__price-note {
	color: var(--mah24-pbox-soft) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
}

/* ------------------------------------------------ دکمه‌ی ثبت سفارش */

.mah24-pbox__cta {
	margin: 2px 0 0 !important;
}

.mah24-pbox__cta .mah24-order-btn-wrap {
	margin: 0 !important;
}

.mah24-pbox .mah24-order-btn {
	position: relative !important;
	min-height: 62px !important;
	padding: 16px 60px !important;
	border-radius: 16px !important;
	background: linear-gradient(200deg, var(--mah24-pbox-wine-2), var(--mah24-pbox-wine)) !important;
	box-shadow: 0 12px 26px rgba(74, 13, 34, 0.28) !important;
	font-size: 17px !important;
	font-weight: 800 !important;
}

.mah24-pbox .mah24-order-btn:hover,
.mah24-pbox .mah24-order-btn:focus-visible {
	background: linear-gradient(200deg, #8e1739, #5a1029) !important;
	box-shadow: 0 14px 30px rgba(74, 13, 34, 0.34) !important;
}

.mah24-pbox .mah24-order-btn--out,
.mah24-pbox .mah24-order-btn[disabled] {
	background: var(--mah24-pbox-off) !important;
	box-shadow: none !important;
}

/* قاب آیکن، چسبیده به لبه‌ی آغازین دکمه (راست در فارسی). */
.mah24-pbox .mah24-order-btn__icon {
	position: absolute !important;
	inset-inline-start: 10px !important;
	top: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.14) !important;
	transform: translateY(-50%) !important;
}

.mah24-pbox .mah24-order-btn__icon .mah24-pbox__svg {
	stroke-width: 1.5 !important;
}

.mah24-pbox .mah24-order-btn--out .mah24-order-btn__icon {
	display: none !important;
}

/* ------------------------------------------------ نوار تضمین‌ها */

.mah24-pbox__badges {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 0 !important;
	padding: 16px 4px 12px !important;
	border: 1px solid var(--mah24-pbox-line) !important;
	border-radius: 16px !important;
	background: #fffdfd !important;
}

.mah24-pbox__badge {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 0 8px !important;
	border-inline-start: 1px solid var(--mah24-pbox-line) !important;
	text-align: center !important;
}

.mah24-pbox__badge:first-child {
	border-inline-start: 0 !important;
}

.mah24-pbox__badge-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: var(--mah24-pbox-tint) !important;
	color: var(--mah24-pbox-accent) !important;
}

.mah24-pbox__badge-text {
	color: var(--mah24-pbox-ink) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.75 !important;
}

/* ------------------------------------------------ نوار وضعیت در عرض کم */

/*
 * سه ستونِ کنار هم زیر ~۴۰۰ پیکسل جا نمی‌شوند: برچسب‌ها nowrap‌اند و به هم
 * می‌چسبند. آنجا هر مورد یک سطر کامل می‌شود و کاملاً وسط سطر خودش می‌نشیند؛
 * خط جداکننده هم از کنار به بالا منتقل می‌شود.
 */
@container (max-width: 400px) {
	.mah24-pbox__facts,
	.mah24-pbox__facts:has(.mah24-pbox__fact:nth-child(2):last-child) {
		grid-template-columns: minmax(0, 1fr) !important;
		padding: 4px 10px !important;
	}

	.mah24-pbox__fact {
		justify-content: center !important;
		padding: 10px 4px !important;
		border-inline-start: 0 !important;
		border-block-start: 1px solid var(--mah24-pbox-line) !important;
	}

	.mah24-pbox__fact:first-child {
		border-block-start: 0 !important;
	}
}

/*
 * تکیه‌گاه، برای مرورگری که container query ندارد: روی گوشی کارت همیشه باریک
 * است، پس همان چیدمان با عرض صفحه هم بی‌خطر است.
 */
@media screen and (max-width: 480px) {
	/*
	 * فاصله‌ی داخلیِ خودِ کارت هم اینجاست، نه در بلوک ‎@container: پرسش کانتینر
	 * همیشه به نزدیک‌ترین «نیا» جواب می‌دهد و عنصر نمی‌تواند کانتینر خودش را
	 * بپرسد، پس آن قانون هیچ‌وقت اجرا نمی‌شد.
	 */
	.mah24-pbox {
		padding: 20px 14px 16px !important;
	}

	.mah24-pbox__facts,
	.mah24-pbox__facts:has(.mah24-pbox__fact:nth-child(2):last-child) {
		grid-template-columns: minmax(0, 1fr) !important;
		padding: 4px 10px !important;
	}

	.mah24-pbox__fact {
		justify-content: center !important;
		padding: 10px 4px !important;
		border-inline-start: 0 !important;
		border-block-start: 1px solid var(--mah24-pbox-line) !important;
	}

	.mah24-pbox__fact:first-child {
		border-block-start: 0 !important;
	}
}

/* ------------------------------------------------ کارت باریک */

@container (max-width: 360px) {
	.mah24-pbox__title {
		font-size: 22px !important;
	}

	.mah24-pbox__fact-label {
		font-size: 11.5px !important;
	}

	.mah24-pbox__fact-value {
		font-size: 13px !important;
	}

	.mah24-pbox__price-value {
		font-size: 18px !important;
	}

	.mah24-pbox .mah24-order-btn {
		padding: 14px 54px !important;
		font-size: 15.5px !important;
	}

	.mah24-pbox__badge-text {
		font-size: 11.5px !important;
	}
}