/* ================================================================
   مهرسام | گالری محصول المنتور — نسخه ضدتداخل
   الگوی خنثی‌سازی: all: unset اول، بعد بازسازی کامل با !important
   ترتیب خطوط را به‌هم نزن (all: unset باید اول بیاید)
   ================================================================ */

/* --- 0) حذف شبه‌عنصرها و افکت‌های قالب از همه‌چیز --- */
.meg-wrap *::before,
.meg-wrap *::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

/* --- حذف حاله/مربع هنگام لمس در موبایل --- */
.meg-wrap,
.meg-wrap * {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	user-select: none !important;
	box-sizing: border-box !important;
	text-shadow: none !important;
}

/* --- 1) ظرف اصلی: ریست کامل --- */
.meg-wrap {
	all: unset;
	--meg-accent: #29317c;
	--meg-ink: #16181d;
	box-sizing: border-box !important;
	direction: rtl !important;
	display: block !important;
	width: 100% !important;
	max-width: var(--meg-maxw, 640px) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	font-family: inherit !important;
	position: relative !important;
	z-index: 1;
}

/* --- 2) صحنه تصویر اصلی --- */
.meg-wrap .meg-stage {
	all: unset;
	box-sizing: border-box !important;
	position: relative !important;
	display: block !important;
	width: 100% !important;
	aspect-ratio: var(--meg-ratio, 1 / 1) !important;
	max-height: var(--meg-maxh, 640px) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	isolation: isolate !important;
	touch-action: pan-y !important;
	z-index: 1;
}

/* --- 3) تصویر اصلی --- */
.meg-wrap .meg-main,
.meg-wrap img.meg-main {
	all: unset;
	box-sizing: border-box !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: var(--meg-fit, cover) !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	filter: none !important;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity .45s ease, transform .6s cubic-bezier(.22,.9,.3,1) !important;
	pointer-events: none !important;
	z-index: 1;
}

.meg-wrap .meg-main.is-active,
.meg-wrap img.meg-main.is-active {
	opacity: 1 !important;
	transform: scale(1);
	pointer-events: auto !important;
	z-index: 2;
}

/* --- 4) ذره‌بین دایره‌ای --- */
.meg-wrap .meg-lens {
	all: unset;
	box-sizing: border-box !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	width: 220px;
	height: 220px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background-repeat: no-repeat !important;
	background-color: #fff !important;
	border: 3px solid rgba(255,255,255,.95) !important;
	box-shadow:
		0 0 0 1px rgba(0,0,0,.08),
		0 18px 45px -12px rgba(0,0,0,.35),
		inset 0 0 30px rgba(0,0,0,.06) !important;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .22s ease, transform .28s cubic-bezier(.34,1.4,.5,1) !important;
	pointer-events: none !important;
	display: block !important;
	z-index: 6;
	will-change: transform, background-position;
}

.meg-wrap .meg-stage.is-zooming .meg-lens {
	opacity: 1 !important;
	transform: scale(1);
}

.meg-wrap .meg-stage.is-zooming .meg-main.is-active { cursor: none !important; }

/* --- 5) راهنمای هاور --- */
.meg-wrap .meg-hint {
	all: unset;
	box-sizing: border-box !important;
	position: absolute !important;
	bottom: 14px !important;
	right: 50% !important;
	left: auto !important;
	transform: translateX(50%);
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	background: rgba(22,24,29,.78) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	padding: 9px 14px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	z-index: 5;
	opacity: 1;
	transition: opacity .3s ease, transform .3s ease !important;
	white-space: nowrap !important;
}

.meg-wrap .meg-hint svg { display: block !important; flex: 0 0 auto !important; }
.meg-wrap .meg-hint span { all: unset; font: inherit !important; color: inherit !important; }

.meg-wrap .meg-stage.is-zooming .meg-hint,
.meg-wrap .meg-stage.hint-hidden .meg-hint {
	opacity: 0 !important;
	transform: translateX(50%) translateY(6px);
}

/* --- 6) شمارنده --- */
.meg-wrap .meg-counter {
	all: unset;
	box-sizing: border-box !important;
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	left: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 3px !important;
	background: rgba(255,255,255,.88) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--meg-ink) !important;
	font-family: inherit !important;
	font-size: 12px !important;
	line-height: 1 !important;
	padding: 6px 12px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	z-index: 5;
	box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
	letter-spacing: .5px !important;
}

.meg-wrap .meg-counter b {
	all: unset;
	color: var(--meg-accent) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
}

/* --- 7) دکمه‌های قبلی/بعدی: ریست کامل دکمه --- */
.meg-wrap .meg-nav,
.meg-wrap button.meg-nav {
	all: unset;
	box-sizing: border-box !important;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%);
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	max-width: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: rgba(255,255,255,.92) !important;
	background-image: none !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--meg-ink) !important;
	cursor: pointer !important;
	line-height: 0 !important;
	text-decoration: none !important;
	overflow: visible !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	z-index: 5;
	box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
	opacity: 0;
	transition: opacity .25s ease, background-color .2s ease, color .2s ease, transform .2s ease !important;
}

.meg-wrap .meg-nav svg { display: block !important; fill: none !important; }

.meg-wrap .meg-prev { right: 14px !important; left: auto !important; }
.meg-wrap .meg-next { left: 14px !important; right: auto !important; }

.meg-wrap .meg-stage:hover .meg-nav { opacity: 1 !important; }

.meg-wrap .meg-nav:hover,
.meg-wrap button.meg-nav:hover {
	background-color: var(--meg-accent) !important;
	background-image: none !important;
	color: #fff !important;
	transform: translateY(-50%) scale(1.07);
}

.meg-wrap .meg-nav:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}

.meg-wrap .meg-nav:focus-visible {
	outline: 3px solid var(--meg-accent) !important;
	outline-offset: 3px !important;
}

.meg-wrap .meg-stage.is-zooming .meg-nav {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* --- 8) نوار بندانگشتی افقی --- */
.meg-wrap .meg-thumbs-outer {
	all: unset;
	box-sizing: border-box !important;
	display: block !important;
	position: relative !important;
	width: 100% !important;
	margin: 16px 0 0 0 !important;
	padding: 0 !important;
}

.meg-wrap .meg-thumbs {
	all: unset;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 12px;
	width: 100% !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	margin: 0 !important;
	padding: 6px 4px 10px 4px !important;
	list-style: none !important;
	scroll-behavior: smooth !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,.18) transparent;
	-webkit-overflow-scrolling: touch;
}

.meg-wrap .meg-thumbs::-webkit-scrollbar { height: 5px; display: block !important; }
.meg-wrap .meg-thumbs::-webkit-scrollbar-track { background: transparent !important; }
.meg-wrap .meg-thumbs::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,.16) !important;
	border-radius: 99px !important;
}

.meg-wrap .meg-thumbs.is-overflow { justify-content: flex-start !important; }

/* --- 9) بندانگشتی: ریست کامل دکمه --- */
.meg-wrap .meg-thumb,
.meg-wrap button.meg-thumb {
	all: unset;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	width: 92px;
	height: 92px;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	display: block !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid transparent !important;
	border-radius: 14px !important;
	background-color: transparent !important;
	background-image: none !important;
	overflow: hidden !important;
	cursor: pointer !important;
	line-height: 0 !important;
	text-decoration: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease, opacity .22s ease !important;
	opacity: .72;
}

.meg-wrap .meg-thumb img {
	all: unset;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none !important;
	filter: none !important;
	opacity: 1 !important;
	transition: transform .35s ease !important;
	pointer-events: none !important;
}

.meg-wrap .meg-thumb:hover,
.meg-wrap button.meg-thumb:hover {
	opacity: 1;
	transform: translateY(-3px);
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: 0 8px 20px -8px rgba(0,0,0,.22) !important;
}

.meg-wrap .meg-thumb:hover img { transform: scale(1.06); }

.meg-wrap .meg-thumb.is-active,
.meg-wrap button.meg-thumb.is-active {
	opacity: 1;
	border-color: var(--meg-accent) !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--meg-accent) 16%, transparent) !important;
}

.meg-wrap .meg-thumb:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

.meg-wrap .meg-thumb:focus-visible {
	outline: 3px solid var(--meg-accent) !important;
	outline-offset: 3px !important;
}

/* --- 10) ریسپانسیو --- */
@media (max-width: 1024px) {
	.meg-wrap .meg-nav,
	.meg-wrap button.meg-nav {
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		min-height: 38px !important;
	}
}

@media (max-width: 767px) {
	.meg-wrap { max-width: 100% !important; }
	.meg-wrap .meg-stage { border-radius: 16px !important; max-height: 92vw !important; }
	.meg-wrap .meg-hint { display: none !important; }
	.meg-wrap .meg-nav,
	.meg-wrap button.meg-nav {
		opacity: 1 !important;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
	}
	.meg-wrap .meg-prev { right: 10px !important; }
	.meg-wrap .meg-next { left: 10px !important; }
	.meg-wrap .meg-thumbs { justify-content: flex-start !important; gap: 10px; }
	.meg-wrap .meg-counter { top: 10px !important; right: 10px !important; font-size: 11px !important; }
}

/* --- 11) کاهش حرکت --- */
@media (prefers-reduced-motion: reduce) {
	.meg-wrap .meg-main,
	.meg-wrap .meg-lens,
	.meg-wrap .meg-thumb,
	.meg-wrap .meg-thumb img,
	.meg-wrap .meg-nav { transition: none !important; }
}

/* ================================================================
   اصلاحات نهایی — بعد از all: unset باید بیاید تا خنثی نشود
   ================================================================ */

/* --- الف) نوار بندانگشتی: وسط‌چینِ اسکرول‌پذیر (ترفند مارجین) --- */
.meg-wrap .meg-thumbs {
	justify-content: flex-start !important;
	direction: rtl !important;
	scroll-padding-inline: 8px;
}

.meg-wrap .meg-thumb:first-child { margin-inline-start: auto !important; }
.meg-wrap .meg-thumb:last-child  { margin-inline-end: auto !important; }

/* --- ب) جلوگیری از منوی دانلود/ذخیره تصویر هنگام نگه‌داشتن --- */
.meg-wrap img,
.meg-wrap .meg-main,
.meg-wrap img.meg-main,
.meg-wrap .meg-thumb img,
.meg-wrap .meg-stage,
.meg-wrap .meg-lens {
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	user-select: none !important;
	-webkit-user-drag: none !important;
	user-drag: none !important;
}