/* ============================================================
   MST Product Box — باکس محصول
   ============================================================ */

.mstib-card {
	--mstib-card-bg: #ffffff;
	--mstib-card-radius: 18px;
	--mstib-img-h: 300px;
	--mstib-img-radius: 12px;
	--mstib-img-fit: cover;
	--mstib-notch-r: 20px;
	--mstib-notch-pad: 8px;
	--mstib-overlay: rgba(15, 20, 28, 0.35);
	--mstib-lift: -5px;

	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mstib-card-bg);
	border-radius: var(--mstib-card-radius);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
	will-change: transform;
}

.mstib-card:hover {
	transform: translateY(var(--mstib-lift));
}

/* ---------- تصویر ---------- */
.mstib-card__media {
	position: relative;
	aspect-ratio: 1 / 1; /* پیش‌فرض: مربع در همه دستگاه‌ها */
	width: 100%;
	flex-shrink: 0;
	border-radius: var(--mstib-img-radius);
	overflow: hidden;
	isolation: isolate;
	background: #f2f3f5;
}

.mstib-card__img {
	display: block;
	width: 100%;
	height: 100%;
}

.mstib-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mstib-img-fit);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mstib-card__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, var(--mstib-overlay) 0%, transparent 42%);
	z-index: 1;
}

/* ---------- بریدگی گوشه + دکمه ---------- */
.mstib-card__notch {
	position: absolute;
	bottom: 0;
	z-index: 2;
	background: var(--mstib-card-bg);
}

/* سمت چپ (پیش‌فرض — مثل جای قلب در طرح قبلی) */
.mstib-side-left .mstib-card__notch {
	left: 0;
	border-top-right-radius: var(--mstib-notch-r);
	padding: var(--mstib-notch-pad) var(--mstib-notch-pad) 0 0;
}

.mstib-side-right .mstib-card__notch {
	right: 0;
	border-top-left-radius: var(--mstib-notch-r);
	padding: var(--mstib-notch-pad) 0 0 var(--mstib-notch-pad);
}

/* قطعات انحنای معکوس (کنج‌های نرم بریدگی) */
.mstib-card__notch-c {
	position: absolute;
	width: var(--mstib-notch-r);
	height: var(--mstib-notch-r);
	pointer-events: none;
}

.mstib-side-left .mstib-card__notch-c {
	background: radial-gradient(
		circle at 100% 0,
		transparent var(--mstib-notch-r),
		var(--mstib-card-bg) calc(var(--mstib-notch-r) + 0.5px)
	);
}

.mstib-side-right .mstib-card__notch-c {
	background: radial-gradient(
		circle at 0 0,
		transparent var(--mstib-notch-r),
		var(--mstib-card-bg) calc(var(--mstib-notch-r) + 0.5px)
	);
}

/* قطعه‌ی روی لبه‌ی عمودی (بالای بریدگی) */
.mstib-side-left .mstib-card__notch-c--v {
	bottom: 100%;
	left: 0;
}

.mstib-side-right .mstib-card__notch-c--v {
	bottom: 100%;
	right: 0;
}

/* قطعه‌ی روی لبه‌ی افقی (کنار بریدگی) */
.mstib-side-left .mstib-card__notch-c--h {
	bottom: 0;
	left: 100%;
}

.mstib-side-right .mstib-card__notch-c--h {
	bottom: 0;
	right: 100%;
}

/* ---------- محتوا ---------- */
.mstib-card__content {
	padding: 0 4px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.mstib-card__title {
	margin: 12px 0 0;
	line-height: 1.8;
	white-space: pre-line;
}

.mstib-card__title a {
	text-decoration: none;
	transition: color 0.25s ease;
}

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


/* ---------- کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
	.mstib-card,
	.mstib-card__img img,
	.mstib-card__chip {
		transition: none !important;
	}

	.mstib-card:hover {
		transform: none;
	}

	.mstib-card:hover .mstib-card__img img {
		transform: none !important;
	}
}

/* ============================================================
   اختصاصی باکس تصویر — نشان گوشه، خط رنگی، زیرخط، گرید، لایت‌باکس
   ============================================================ */

/* گرید */
.mstib {
	--mstib-maxw-base: 340px;
	--mstib-maxw: min(100%, var(--mstib-maxw-base));
	display: grid;
	grid-template-columns: repeat(4, minmax(0, var(--mstib-maxw)));
	justify-content: center;
	column-gap: 22px;
	row-gap: 26px;
}

/* وقتی فقط ۱ یا ۲ باکس هست: کمی بزرگ‌تر، همچنان وسط‌چین و بدون کش آمدن */
.mstib--few {
	--mstib-maxw: min(100%, calc(var(--mstib-maxw-base) * 1.15));
}

.mstib__item {
	min-width: 0;
	display: flex;
}

.mstib .mstib-card {
	width: 100%;
	height: 100%;
}

.mstib-card.is-clickable {
	cursor: zoom-in;
}

.mstib-card.is-clickable:focus-visible {
	outline: 2px solid #ebc942;
	outline-offset: 3px;
}

/* خط رنگی بالای کارت (تغییر کوچک طراحی) */
.mstib-card {
	--mstib-accent: #ebc942;
	--mstib-underline: #ebc942;
}

[class*="mstib-accent-on"] .mstib-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 18%;
	right: 18%;
	height: 3px;
	border-radius: 0 0 6px 6px;
	background: var(--mstib-accent);
	z-index: 2;
	transition: left 0.35s ease, right 0.35s ease;
}

[class*="mstib-accent-on"] .mstib-card:hover::before {
	left: 8%;
	right: 8%;
}

/* نشان ذره‌بین داخل بریدگی */
.mstib-card__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.mstib-card:hover .mstib-card__chip {
	transform: rotate(8deg) scale(1.05);
}

.mstib-card__chip i,
.mstib-card__chip svg {
	fill: currentColor;
}

/* عنوان و زیرخط */
.mstib-card__title {
	margin: 12px 0 0;
	line-height: 1.8;
	white-space: pre-line;
	position: relative;
	width: fit-content;
	max-width: 100%;
}

[class*="mstib-underline-on"] .mstib-card__title::after {
	content: "";
	display: block;
	height: 3px;
	width: 0;
	margin-top: 4px;
	border-radius: 3px;
	background: var(--mstib-underline);
	transition: width 0.35s ease;
}

[class*="mstib-underline-on"] .mstib-card:hover .mstib-card__title::after {
	width: 44px;
}

.mstib-card__caption {
	margin-top: 4px;
	line-height: 1.7;
}

/* قیمت زیر عنوان */
.mstib-card {
	--mstib-price-bg: #ebc942;
}

.mstib-card__price {
	display: inline-block;
	margin-top: 8px;
	line-height: 1.6;
	max-width: 100%;
}

/* حالت برچسب زرد */
[class*="mstib-pricechip-on"] .mstib-card__price {
	background: var(--mstib-price-bg);
	padding: 4px 12px;
	border-radius: 999px;
}

/* ============================================================
   لایت‌باکس
   ============================================================ */
.mstib-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--mstib-lb-bg, rgba(20, 24, 55, 0.30));
	-webkit-backdrop-filter: blur(var(--mstib-lb-blur-v, 14px)) saturate(1.15);
	backdrop-filter: blur(var(--mstib-lb-blur-v, 14px)) saturate(1.15);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

/* مرورگرهای بدون پشتیبانی بلور: پس‌زمینه کمی تیره‌تر تا تصویر خوانا بماند */
@supports not (backdrop-filter: blur(1px)) {
	.mstib-lb {
		background: rgba(20, 24, 55, 0.78);
	}
}

.mstib-lb.is-open {
	opacity: 1;
	pointer-events: auto;
}

.mstib-lb__img {
	max-width: min(92vw, 1100px);
	max-height: 78vh;
	border-radius: var(--mstib-lb-r, 14px);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
	background: #ffffff;
	transform: scale(0.96);
	transition: transform 0.25s ease;
}

.mstib-lb.is-open .mstib-lb__img {
	transform: scale(1);
}

.mstib-lb__title {
	margin-top: 16px;
	white-space: pre-line;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

.mstib-lb__price {
	margin-top: 8px;
	padding: 4px 14px;
	border-radius: 999px;
	background: #ebc942;
	color: #29317c;
	font-size: 14px;
	font-weight: 800;
	text-align: center;
}

.mstib-lb__caption {
	margin-top: 4px;
	color: #ebc942;
	font-size: 13px;
	text-align: center;
}


@media (prefers-reduced-motion: reduce) {
	.mstib-lb,
	.mstib-lb__img,
	.mstib-card__chip,
	[class*="mstib-underline-on"] .mstib-card__title::after {
		transition: none !important;
	}
}