/* ===================================================
   MSW Shop Widget - استایل اختصاصی
=================================================== */

.msw-widget-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	direction: rtl;
	box-sizing: border-box;
}
.msw-widget-wrapper * {
	box-sizing: border-box;
}

/* ===== سایدبار دسکتاپ ===== */
.msw-sidebar {
	flex: 0 0 240px;
	max-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	/* استک‌کانتکست مستقل: در چیدمان دسکتاپ برخی قالب‌ها/ویجت‌های
	   المنتور (Shape Divider، عناصر Sticky، بنر و ...) به‌صورت absolute
	   روی محتوا می‌نشینند و بدون این‌که چیزی از نظر بصری خراب باشد،
	   کلیک را قورت می‌دهند. با z-index مثبت + استک‌کانتکست خودمان
	   مطمئن می‌شویم فیلتر همیشه بالاترین لایه قابل‌کلیک است. */
	position: relative;
	z-index: 10;
}

.msw-products-section {
	flex: 1 1 0%;
	min-width: 0;
}

.msw-section-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 10px;
}

/* ===== دسته‌بندی دسکتاپ ===== */
.msw-category-filter {
	padding-bottom: 8px;
	border-bottom: 1px solid #eee;
}
.msw-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.msw-cat-list--child {
	padding-inline-start: 14px;
	margin-top: 4px;
}
.msw-cat-item {
	margin-bottom: 4px;
}
.msw-cat-link {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	text-decoration: none;
	color: inherit;
	padding: 4px 0;
	font-size: 14px;
	transition: color 0.15s ease;
	cursor: pointer;
}
.msw-cat-item.is-active > .msw-cat-link {
	font-weight: 700;
	color: #5a3e85;
}

/* ===== فیلتر قیمت دسکتاپ ===== */
.msw-price-filter { padding-top: 4px; }
.msw-price-filter-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	z-index: 11;
	pointer-events: auto;
}
.msw-price-values {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
}
.msw-price-slider {
	position: relative;
	height: 28px;
}
.msw-price-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	background: #e0e0e0;
	border-radius: 4px;
	transform: translateY(-50%);
}
.msw-price-track-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: #7f54b3;
	border-radius: 4px;
}
.msw-price-range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 28px;
	margin: 0;
	background: transparent;
	pointer-events: none;
	z-index: 12;
	-webkit-appearance: none;
	appearance: none;
}
.msw-price-range::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #7f54b3;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.msw-price-range::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #7f54b3;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.msw-price-range::-webkit-slider-runnable-track,
.msw-price-range::-moz-range-track { background: transparent; }
.msw-price-apply {
	align-self: flex-start;
	background: #7f54b3;
	color: #fff;
	border: none;
	padding: 7px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
	position: relative;
	z-index: 12;
	pointer-events: auto;
}
.msw-price-apply:hover { opacity: 0.88; }

/* ===== شبکه محصولات ===== */
.msw-products-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
}
.msw-cols-2 { grid-template-columns: repeat(2, 1fr); }
.msw-cols-3 { grid-template-columns: repeat(3, 1fr); }
.msw-cols-4 { grid-template-columns: repeat(4, 1fr); }
.msw-cols-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1024px) {
	.msw-products-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ===== دکمه‌های accordion — پیش‌فرض مخفی (دسکتاپ) ===== */
.msw-filter-toggle { display: none; }
.msw-filter-body   { display: block; }

/* ===== لیبل دسته فعال بالای محصولات — پیش‌فرض مخفی ===== */
.msw-active-cat-label {
	font-size: 15px;
	font-weight: 700;
	color: #3d2366;
	padding: 0 0 10px;
	border-bottom: 2px solid #e8e0f3;
	margin-bottom: 14px;
}

/* =====================================================
   موبایل  ≤ 767px
===================================================== */
@media (max-width: 767px) {

	.msw-widget-wrapper { flex-direction: column; gap: 12px; }

	.msw-sidebar {
		flex: 1 1 100%;
		max-width: 100%;
		flex-direction: row;   /* دو دکمه کنار هم */
		gap: 8px;
	}

	/* هر section فیلتر نصف عرض sidebar */
	.msw-section.msw-category-filter,
	.msw-section.msw-price-filter {
		flex: 1 1 0%;
		min-width: 0;
		border: none;
		padding: 0;
	}

	/* پشتوانه‌ی فاصله: در برخی مرورگرهای موبایل قدیمی‌تر (Safari زیر 14.1،
	   برخی WebView داخل‌اپلیکیشنی) پشتیبانی از gap روی flexbox ناقص است
	   و فاصله عملاً صفر می‌شود؛ margin مستقل تضمین می‌کند دو باکس همیشه
	   از هم فاصله داشته باشند، صرف‌نظر از پشتیبانی gap. */
	.msw-sidebar > .msw-section:not(:last-child) {
		margin-inline-end: 8px;
	}

	/* تیتر h3 دسکتاپ در موبایل مخفی */
	.msw-section-title { display: none; }

	/* ===== دکمه‌های accordion ===== */
	.msw-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 8px 12px;
		background: #f0ebf8;
		border: 1.5px solid #c4aee8;
		border-radius: 6px;
		cursor: pointer;
		font-size: 13px;
		font-weight: 600;
		color: #3d2366;
		direction: rtl;
		font-family: inherit;
		line-height: 1.4;
		transition: background 0.15s ease, border-color 0.15s ease;
	}
	.msw-filter-toggle:hover {
		background: #e4d9f5;
		border-color: #a98bd4;
	}
	.msw-filter-toggle.is-open {
		background: #7f54b3;
		border-color: #7f54b3;
		color: #fff;
	}
	.msw-filter-toggle-icon {
		font-size: 9px;
		line-height: 1;
		margin-inline-start: 6px;
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}
	.msw-filter-toggle.is-open .msw-filter-toggle-icon {
		transform: rotate(180deg);
	}

	/* ===== محتوای accordion ===== */
	.msw-filter-body {
		display: none;
		position: absolute;       /* float روی محصولات */
		top: calc(100% + 4px);
		right: 0;
		left: 0;
		z-index: 99;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 14px;
		box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	}
	.msw-filter-body.is-open { display: block; }

	/* wrapper نسبی برای position dropdown */
	.msw-section.msw-category-filter,
	.msw-section.msw-price-filter {
		position: relative;
	}

	.msw-products-grid { grid-template-columns: repeat(2, 1fr) !important; }

	/* ===== لیبل دسته فعال ===== */
	.msw-active-cat-label {
		display: block; /* JS مدیریت show/hide میکنه */
	}
}

@media (max-width: 480px) {
	.msw-products-grid { grid-template-columns: 1fr !important; }
}

/* ===== کارت محصول ===== */
.msw-product-card {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 12px;
	position: relative;
	background: #fff;
	transition: box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}
.msw-product-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }

.msw-product-link {
	text-decoration: none;
	color: inherit;
	flex: 1;
	display: block;
}
.msw-product-thumb { position: relative; margin-bottom: 10px; }
.msw-product-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}
.msw-stock-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 20px;
	color: #fff;
	line-height: 1.6;
}
.msw-stock-badge--instock { background: #1e8e3e; }
.msw-stock-badge--oos     { background: #d93025; }

.msw-product-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 6px;
	line-height: 1.4;
}
.msw-product-price {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 4px;
}
.msw-no-price { font-size: 13px; opacity: 0.7; font-weight: 400; }

.msw-delivery-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: #555;
	margin: 4px 0;
}
.msw-delivery-time__icon { font-size: 12px; }

.msw-add-to-cart {
	display: block;
	text-align: center;
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 4px;
	background: #7f54b3;
	color: #fff !important;
	text-decoration: none;
	font-size: 13px;
	cursor: pointer;
	border: none;
	font-family: inherit;
}
.msw-add-to-cart--disabled {
	background: #ccc;
	color: #666 !important;
	cursor: not-allowed;
}
.msw-product-card .added_to_cart { display: none !important; }

.msw-no-products,
.msw-empty-note { padding: 20px; text-align: center; opacity: 0.7; }

/* ===== دکمه لایک محصول ===== */
/* به‌صورت overlay مطلق روی گوشه بالا-چپ کارت رندر می‌شود، خارج از تگ لینک،
   تا نه چیدمان کارت‌ها به‌هم بریزد و نه کلیک روی آن باعث باز شدن صفحه محصول شود.
   بکگراند به‌جای رنگ تخت سفید، یک گرادیانت شعاعی نیمه‌شفاف + بلور شیشه‌ای دارد
   تا هم روی عکس‌های تیره/روشن مختلف خوش‌خوان بماند و هم عکس زیرش خراب نشود.
   نکته موقعیت: چون این دکمه در سطح کارت (نه داخل thumb) رندر می‌شود، و کارت
   خودش padding: 12px دارد، آفست باید 12px (پدینگ کارت) + 8px (فاصله دلخواه از
   لبه عکس، هم‌راستا با msw-stock-badge) = 20px باشد تا کاملا روی عکس بنشیند
   و مثل قبل کمی از آن روی حاشیه سفید کارت نیفتد. */
.msw-like-btn {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 5;
	width: 34px;
	height: 34px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 55%, rgba(255,255,255,0.38) 100%);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #8a8a8a;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0,0,0,0.10);
	transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
	.msw-like-btn:hover {
		transform: scale(1.08);
		color: #e0245e;
		border-color: #e0245e;
		background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0.45) 100%);
	}
}
.msw-like-btn.is-liked {
	color: #e0245e;
	border-color: #e0245e;
	background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0.45) 100%);
}
.msw-like-btn.msw-like-btn--loading {
	opacity: 0.6;
	pointer-events: none;
}
.msw-like-icon {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12));
	transition: fill 0.15s ease, stroke 0.15s ease;
}
.msw-like-btn.is-liked .msw-like-icon {
	fill: currentColor;
	stroke: currentColor;
}

/* ===== صفحه‌بندی ===== */
.msw-pagination {
	display: flex;
	gap: 6px;
	margin-top: 20px;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-bottom: 4px;
}
.msw-page-btn {
	flex: 0 0 auto;
	border: 1px solid #ddd;
	background: #fff;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap;
	font-family: inherit;
}
.msw-page-btn.is-active {
	background: #7f54b3;
	color: #fff;
	border-color: #7f54b3;
}
.msw-page-btn--nav { font-weight: 600; }
.msw-page-dots { padding: 0 4px; opacity: 0.6; font-size: 13px; flex: 0 0 auto; }

.msw-products-loading {
	text-align: center;
	padding: 10px;
	font-size: 13px;
	opacity: 0.7;
}
.msw-delivery-time--single { margin: 10px 0; font-size: 14px; }

/* =====================================================
   MSW Guardian Patch — نسخه 1.1.6
   -----------------------------------------------------
   رفع دو باگ گزارش‌شده در نمایش موبایل صفحه فروشگاه:
   ۱) بزرگ‌تر شدن عکس/کارت محصول (مخصوصاً از صفحه‌بندی دوم به بعد)
   ۲) احتمال هم‌پوشانی محتوای بعد از ویجت (مثل فوتر) با محصولات

   علت ریشه‌ای: آیتم‌های CSS Grid به‌صورت پیش‌فرض min-width و
   min-height را برابر «auto» در نظر می‌گیرند، نه صفر؛ یعنی مرورگر
   اجازه نمی‌دهد آیتم گرید (کارت محصول) از اندازه ذاتی (intrinsic
   size) محتوای داخلش — در اینجا تصویر محصول — کوچک‌تر شود. اگر
   تصویر یک محصول (مثلاً محصولات قدیمی‌تر کاتالوگ که بعد از تغییر
   قالب/اندازه تامبنیل هرگز Regenerate نشده‌اند و معمولاً به‌خاطر
   مرتب‌سازی پیش‌فرض «جدیدترین»، دقیقاً از صفحه ۲ به بعد نمایش داده
   می‌شوند) از عرض واقعی ستون در حالت ۲ ستونه موبایل بزرگ‌تر باشد،
   همان ستون و به‌تبع آن کل ردیف/گرید عریض‌تر از حد انتظار «سرریز»
   می‌کند؛ همین سرریز هم اندازه کارت را بهم می‌زند و هم می‌تواند مرز
   واقعی ویجت را با آنچه صفحه برای المان‌های بعدی محاسبه می‌کند
   ناهماهنگ کند.

   این پچ کاملاً افزایشی (additive) است: هیچ selector یا مقدار قبلی
   در این فایل حذف، بازنویسی یا override نشده؛ فقط چند محدودیت امن
   (safety net) در پایین‌ترین سطح (خود کارت/عکس) اضافه شده تا این
   کلاس از باگ، صرف‌نظر از این‌که کدام محصول/صفحه باعثش شود، دیگر
   امکان‌پذیر نباشد. عملکرد بصری کارت‌ها برای حالت سالم دقیقاً مثل
   قبل باقی می‌ماند.
===================================================== */

.msw-products-grid > .msw-product-card {
	min-width: 0;
	min-height: 0;
}

.msw-product-thumb {
	overflow: hidden; /* هرگز عکس از کادر خودش بیرون نزند */
}

.msw-product-thumb img {
	max-width: 100%; /* پشتوانه‌ی مستقل، علاوه‌بر width:100% موجود */
}

.msw-products-grid-wrap {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.msw-products-grid {
	min-width: 0;
}

/* =====================================================
   MSW Guardian Patch v2 — نسخه 1.1.7
   -----------------------------------------------------
   محدودیت بالا (v1.1.6) فقط دور «گرید محصولات» بسته شده بود. طبق
   گزارش شما، سرریز افقی همچنان کل صفحه را تحت تاثیر قرار می‌دهد
   (باید صفحه را چپ‌راست بکشید) — یعنی مرز واقعی مشکل هرجایی که
   باشد، دستکم از مرز خودِ «ویجت» (msw-widget-wrapper) عبور می‌کند،
   نه فقط از مرز بخش گرید. راه‌حل قطعی و بدون وابسته‌بودن به این‌که
   دقیقاً کدام المان داخل ویجت باعثش می‌شود: یک محدوده افقی غیرقابل
   دورزدن دقیقاً روی خودِ wrapper بیرونی، با !important تا هیچ قانون
   دیگری (حتی اگر بعداً به این فایل اضافه شود) نتواند آن را دور بزند.

   این محدودیت فقط روی محور افقی (overflow-x) است، نه عمودی؛ به همین
   دلیل دراپ‌داون فیلتر موبایل (msw-filter-body) که عمداً به‌صورت
   عمودی روی محصولات شناور می‌شود همچنان بدون هیچ تغییری کار می‌کند
   — فقط دیگر هیچ‌چیز نمی‌تواند صفحه را افقی عریض‌تر از ویوپورت کند.

   نکته درباره باگ فوتر: وقتی صفحه یک سرریز افقی غیرمنتظره دارد،
   بعضی مرورگرهای موبایل برای این‌که همه‌چیز را جا بدهند صفحه را کمی
   zoom-out می‌کنند؛ همین zoom باعث می‌شود فاصله عمودی واقعی بین
   پایان محصولات و فوتر با آنچه چشم می‌بیند فرق کند و فوتر روی
   محصولات بیفتد. با بستن قطعی سرریز افقی در همین پچ، این اثر جانبی
   هم باید از بین برود؛ اگر همچنان هم‌پوشانی دیدید (بخش «مرحله بعد»
   در پیام را ببینید)، ریشه‌اش جای دیگری‌ست و باید با HTML واقعی
   صفحه بررسی شود، نه با حدس بیشتر.
===================================================== */

.msw-widget-wrapper {
	max-width: 100% !important;
	overflow-x: hidden !important;
}

@media (max-width: 767px) {
	.msw-widget-wrapper,
	.msw-products-section,
	.msw-products-grid-wrap,
	.msw-products-grid,
	.msw-product-card {
		max-width: 100% !important;
	}
}