:root {
	--cea-primary: #2fb6a8;
	--cea-accent: #f2994a;
	--cea-border: #ececee;
	--cea-text: #2b2f33;
	--cea-muted: #8a939b;
	--cea-toolbar-bg: #f5f6f7;
}

.cea-sidebar-wrap,
.cea-sort-wrap,
.cea-loop-wrap {
	--cea-primary: #2fb6a8;
	--cea-accent: #f2994a;
	--cea-border: #ececee;
	--cea-text: #2b2f33;
	--cea-muted: #8a939b;
	--cea-toolbar-bg: #f5f6f7;
	font-family: inherit;
	color: var(--cea-text);
}

/* هر عنصر داخل هر سه شورت‌کد باید از باکس‌مدل قابل پیش‌بینی استفاده کند
   تا هیچ متنی به‌خاطر پدینگ/بوردر اضافی از کادر خودش بیرون نزند */
.cea-sidebar-wrap, .cea-sidebar-wrap *,
.cea-sort-wrap, .cea-sort-wrap *,
.cea-loop-wrap, .cea-loop-wrap * { box-sizing: border-box; }

/* -------------------------------------------------- */
/* شورت‌کد [cea_sort_bar]: فقط تب‌های مرتب‌سازی، بدون برچسب متنی و بدون دکمهٔ فیلترها */
/* -------------------------------------------------- */
.cea-sort-wrap .cea-sort-tabs {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 18px;
	min-width: 0;
	padding: 14px 20px;
	background: var(--cea-toolbar-bg);
	border: 1px solid var(--cea-border);
	border-radius: 10px;
	/* اسکرول افقی وقتی تب‌ها در عرض جا نمی‌شوند، بدون نمایش نوار اسکرول -
	   کاربر با کشیدن (تاچ در موبایل، یا درگ با ماوس در دسکتاپ - نگاه کنید
	   به initSortDragScroll در cea-script.js) خودش اسکرول می‌کند. */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none;   /* فایرفاکس */
	-ms-overflow-style: none; /* اج قدیمی */
	cursor: grab;
}
.cea-sort-wrap .cea-sort-tabs.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.cea-sort-wrap .cea-sort-tabs::-webkit-scrollbar { display: none; } /* کروم/سافاری/edge جدید */
.cea-sort-tab {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--cea-muted);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
.cea-sort-tab:hover { color: var(--cea-text); }
.cea-sort-tab.is-active { color: var(--cea-text); font-weight: 600; border-bottom-color: var(--cea-primary); }

/* -------------------------------------------------- */
/* شورت‌کد [cea_filters_sidebar] */
/* -------------------------------------------------- */
.cea-filters-sidebar {
	width: 100%;
	background: #fff;
	border: 1px solid var(--cea-border);
	border-radius: 12px;
	padding: 4px 18px;
}

.cea-filter-section { border-bottom: 1px solid var(--cea-border); padding: 14px 0; }
.cea-filter-section:last-of-type { border-bottom: none; }
.cea-filter-section-plain { padding-top: 6px; }

.cea-filter-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	gap: 8px;
}
.cea-filter-section-header h4 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
}
.cea-filter-chevron {
	flex: 0 0 auto;
	color: var(--cea-muted);
	display: inline-flex;
	transition: transform .2s ease;
}
.cea-filter-section.is-collapsed .cea-filter-chevron { transform: rotate(-90deg); }
.cea-filter-section.is-collapsed .cea-filter-section-body { display: none; }
.cea-filter-section-body { margin-top: 12px; }

.cea-filter-options {
	max-height: 220px;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* رفع باگ بریده‌شدن متن: در فلکس‌باکس، آیتم‌ها به‌طور پیش‌فرض min-width:auto دارند
   که باعث می‌شود عرض واقعی محتوا از عرض ستون بیشتر شود و متن بریده/همپوشان دیده شود.
   با min-width:0 روی خود لیبل و اسپن داخلی آن، امکان شکستن خط طبیعی فراهم می‌شود. */
.cea-filter-options label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
	min-width: 0;
}
.cea-filter-options label input { flex: 0 0 auto; margin-top: 2px; }
.cea-filter-options label span {
	min-width: 0;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
	line-height: 1.6;
}

.cea-price-inputs { display: flex; gap: 10px; margin-top: 16px; }
.cea-price-inputs label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--cea-muted); flex: 1; min-width: 0; }
.cea-price-inputs input {
	border: 1px solid var(--cea-border);
	border-radius: 10px;
	padding: 11px 12px;
	width: 100%;
	min-width: 0;
	font-size: 14px;
	text-align: center;
	color: var(--cea-text);
	background: #fff;
	transition: border-color .15s ease;
}
.cea-price-inputs input:focus { outline: none; border-color: var(--cea-primary); }
/* حذف فلش‌های بالا/پایین اینپوت عددی برای ظاهری تمیزتر، دقیقاً مثل طرح */
.cea-price-inputs input[type="number"]::-webkit-outer-spin-button,
.cea-price-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cea-price-inputs input[type="number"] { -moz-appearance: textfield; }

/* -------------------------------------------------- */
/* اسلایدر محدودهٔ قیمت: باریکهٔ کپسول‌شکل تیل‌رنگ با دستهٔ‌های سفید و گرد در
   دو سر - دقیقاً مطابق طرح گرافیکی مورد نظر */
/* -------------------------------------------------- */
#cea-price-slider { height: 6px; margin: 22px 6px 26px; }
#cea-price-slider.noUi-target {
	background: #eef1f2;
	border: none;
	border-radius: 999px;
	box-shadow: none;
}
#cea-price-slider .noUi-connects { border-radius: 999px; }
#cea-price-slider .noUi-connect { background: var(--cea-primary); }
#cea-price-slider .noUi-handle {
	width: 22px;
	height: 22px;
	top: -8px;
	right: -11px;
	border-radius: 50%;
	background: #fff;
	border: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .04);
	cursor: grab;
}
#cea-price-slider.noUi-txt-dir-rtl .noUi-handle { left: -11px; right: auto; }
#cea-price-slider .noUi-handle:active { cursor: grabbing; }
#cea-price-slider .noUi-handle::before,
#cea-price-slider .noUi-handle::after { content: none; display: none; }
#cea-price-slider .noUi-touch-area { border-radius: 50%; }

.cea-switch-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.cea-switch-label > span:first-child { min-width: 0; white-space: normal; word-break: break-word; }
.cea-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.cea-switch input { opacity: 0; width: 0; height: 0; }
.cea-switch-slider { position: absolute; inset: 0; background: #ccc; border-radius: 999px; transition: .2s; }
.cea-switch-slider:before { content: ""; position: absolute; height: 16px; width: 16px; right: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.cea-switch input:checked + .cea-switch-slider { background: var(--cea-primary); }
.cea-switch input:checked + .cea-switch-slider:before { transform: translateX(-18px); }

.cea-filter-actions {
	display: flex;
	justify-content: flex-end;
	max-height: 0;
	opacity: 0;
	transform: translateY(-4px);
	overflow: hidden;
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0 solid var(--cea-border);
	transition: max-height .38s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, transform .3s ease, margin-bottom .38s ease, padding-bottom .38s ease, border-bottom-width .38s ease;
}
.cea-filter-actions.is-visible {
	max-height: 60px;
	opacity: 1;
	transform: translateY(0);
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom-width: 1px;
}
/* نکتهٔ فنی مهم: بعضی قالب‌ها/ووکامرس روی همهٔ <button> ها استایل عمومی
   (بوردر رنگی، پدینگ زیاد، رنگ برند قالب) اعمال می‌کنند که با بارگذاری بعد
   از فایل ما، حتی روی مقادیرِ ریست‌شده‌مان هم غالب می‌شود؛ با all: unset یک
   ریست کامل و مقاوم انجام می‌دهیم و بعد فقط همان استایل‌های موردنظر خودمان
   را روی آن می‌گذاریم.
   ظاهر: یک «چیپ» ملایم صورتی/قرمزکم‌رنگ (رنگ متداول برای اقدام «حذف/ریست»
   در رابط‌های کاربری، جدا از رنگ اصلی برند تیل افزونه) تا هم واضح باشد که
   یک اقدام مخرب/بازنشانی است، هم زننده و بزرگ به نظر نرسد. */
.cea-sidebar-wrap .cea-reset-filters {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: #d94f63;
	background: rgba(217, 79, 99, .08);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	padding: 7px 14px;
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}
.cea-sidebar-wrap .cea-reset-filters:hover { background: rgba(217, 79, 99, .16); color: #c5354b; }
.cea-sidebar-wrap .cea-reset-filters svg { flex: 0 0 auto; }

/* -------------------------------------------------- */
/* شورت‌کد [cea_products_loop]: گرید محصولات (لوپ آیتم المنتور) + صفحه‌بندی */
/* -------------------------------------------------- */
.cea-products-area { min-width: 0; }
.cea-products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	position: relative;
	min-height: 120px;
}
.cea-products-grid.is-loading { opacity: .5; pointer-events: none; }

/* رفع باگ بریده‌شدن/همپوشانی متن عنوان و قیمت داخل هر کارت محصول:
   .cea-product-item یک فلکس‌کانتینر داخل یک ستون گرید است؛ بدون min-width:0
   محتوای داخلش (که از قالب Loop Item المنتور می‌آید) می‌تواند از عرض ستون
   خودش عریض‌تر شود و همین باعث بریده‌دیده‌شدن متن‌های فارسی می‌شود. */
.cea-product-item {
	display: flex;
	width: 100%;
	min-width: 0;
}
.cea-product-item > * {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}
.cea-product-item h1,
.cea-product-item h2,
.cea-product-item h3,
.cea-product-item h4,
.cea-product-item h5,
.cea-product-item h6,
.cea-product-item p,
.cea-product-item span,
.cea-product-item a {
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
}

.cea-no-products { grid-column: 1 / -1; text-align: center; color: var(--cea-muted); padding: 40px 0; }

.cea-fallback-card { border: 1px solid var(--cea-border); border-radius: 10px; padding: 12px; text-align: center; width: 100%; min-width: 0; }
.cea-fallback-card img { max-width: 100%; height: auto; }
.cea-fallback-card h3 { font-size: 14px; white-space: normal; word-break: break-word; }
.cea-fallback-price { display: block; margin-top: 8px; color: var(--cea-accent); font-weight: 600; }

.cea-pagination { margin-top: 26px; display: flex; justify-content: center; }
.cea-pager { display: flex; list-style: none; gap: 6px; margin: 0; padding: 0; }
.cea-pager li a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 34px; border-radius: 8px;
	border: 1px solid var(--cea-border); text-decoration: none; color: var(--cea-text); font-size: 13px;
}
.cea-pager li a.is-active { background: var(--cea-primary); border-color: var(--cea-primary); color: #fff; }
.cea-pager-dots { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; color: var(--cea-muted); }

@media (max-width: 1200px) {
	.cea-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.cea-products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
	.cea-products-grid { grid-template-columns: 1fr; gap: 12px; }
	.cea-sort-wrap .cea-sort-tabs { padding: 12px 14px; gap: 14px; }
}

/* -------------------------------------------------- */
/* حالت موبایل سایدبار فیلترها: به‌جای نمایش معمولی داخل صفحه، یک دکمهٔ شیک
   نمایش داده می‌شود که با کلیک، پنل فیلترها را به‌صورت کشویی (drawer) از
   کنار صفحه باز می‌کند - همراه با پس‌زمینهٔ نیمه‌شفاف پشت آن. جهت باز شدن
   (از راست یا چپ) خودکار بر اساس RTL/LTR بودن زبان جاری تعیین می‌شود.
   -------------------------------------------------- */

.cea-mobile-filter-trigger {
	display: none !important;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 12px 18px;
	background: linear-gradient(135deg, var(--cea-primary), #24a196);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(47, 182, 168, .28);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cea-mobile-filter-trigger:hover { box-shadow: 0 8px 20px rgba(47, 182, 168, .35); }
.cea-mobile-filter-trigger:active { transform: scale(.98); }
.cea-mobile-filter-trigger svg { flex: 0 0 auto; }

.cea-sidebar-mobile-header,
.cea-sidebar-overlay { display: none; }

/**
 * نکته: عمداً از max-width: 767px (نه 991px) استفاده شده. تبلت (768px به
 * بالا) باید دقیقاً همان سایدبار معمولی دسکتاپ را ببیند - نه دکمه/پنل کشویی؛
 * فقط موبایل واقعی (زیر ۷۶۸px) این حالت کشویی را می‌گیرد.
 */
@media (max-width: 767px) {
	.cea-mobile-filter-trigger { display: inline-flex !important; }

	.cea-sidebar-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, .55);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s ease;
		z-index: 100000;
	}
	.cea-sidebar-wrap.is-drawer-open .cea-sidebar-overlay { opacity: 1; visibility: visible; }

	.cea-filters-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		width: min(86vw, 380px);
		max-width: 100vw;
		height: 100dvh;
		background: #fff;
		z-index: 100001;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 18px calc(120px + env(safe-area-inset-bottom));
		padding-top: env(safe-area-inset-top);
		border-radius: 0;
		border: none;
		box-shadow: 0 0 40px rgba(0, 0, 0, .25);
		transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	}
	.cea-rtl .cea-filters-sidebar { right: 0; transform: translateX(100%); }
	.cea-ltr .cea-filters-sidebar { left: 0; transform: translateX(-100%); }
	.cea-sidebar-wrap.is-drawer-open .cea-filters-sidebar { transform: translateX(0); }

	.cea-sidebar-mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		background: #fff;
		padding: 16px 0;
		margin-bottom: 6px;
		border-bottom: 1px solid var(--cea-border);
		z-index: 1;
	}
	.cea-sidebar-mobile-title { font-size: 16px; font-weight: 700; }
	.cea-sidebar-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		border: 1px solid var(--cea-border);
		background: #fff;
		color: var(--cea-text);
		cursor: pointer;
		transition: background .15s ease;
	}
	.cea-sidebar-close:hover { background: var(--cea-toolbar-bg); }

	/* وقتی پنل موبایل باز است، اسکرول پشت صفحه قفل می‌شود (روی body با
	   کلاس cea-no-scroll در جاوااسکریپت اضافه/حذف می‌شود) */
	body.cea-no-scroll { overflow: hidden; }

	/* داخل پنل کشویی موبایل، فیلدهای انتخاب گزینه‌ها کمی فضادارتر و راحت‌تر
	   برای لمس باشند (حداقل هدف لمسی استاندارد ~44px) */
	.cea-filters-sidebar .cea-filter-options label { padding: 4px 0; }
	.cea-filters-sidebar .cea-switch-label { padding: 6px 0; }
}