/*
File: rafina/inc/frontend/categories-section/categories-section.css
پیاده‌سازی بر اساس ساختار نمونه‌ای که کاربر فرستاد: فضای رزروشده‌ی
ثابت بالا/پایین آیکون به‌جای absolute positioning.
*/

.rafina-cats-section {
	margin: 32px auto;
}

.rafina-cats-header {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 20px;
}
.rafina-cats-header-group {
	display: flex;
	align-items: center;
	gap: 14px;
}
.rafina-cats-header h3 {
	font-size: 19px;
	font-weight: 800;
	margin: 0;
	letter-spacing: -0.02em;
	color: var(--rafina-text);
}
.rafina-cats-grid-btn {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	border: 1px solid var(--rafina-border-2);
	background: var(--rafina-panel);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rafina-accent-2, #19672a);
	flex-shrink: 0;
}
.rafina-cats-grid-btn svg { width: 20px; height: 20px; }

.rafina-cats-box {
	border-radius: 24px;
	border: 1px solid var(--rafina-border);
	/* رنگ این کادر از «رنگ‌بندی سایت ← بخش‌های صفحه‌ی اصلی» می‌آید */
	background: var(--rafina-cat-box, var(--rafina-panel));
	padding: 18px 20px;
}

.rafina-cats-row {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 14px;
	overflow-x: auto;
	/*
	 * فضای بالا برای بلندشدن روی hover.
	 *
	 * overflow-x: auto باعث می‌شود overflow-y هم auto شود (قاعده‌ی خود CSS)،
	 * پس هر چیزی که از بالای ردیف بیرون بزند بریده می‌شود. آیکون روی hover دو
	 * پیکسل بالا می‌رفت و لبه‌اش صاف قیچی می‌شد — انگار می‌رود زیر چیزی.
	 */
	padding-top: 8px;
	padding-bottom: 8px;
	scrollbar-width: none;
}
.rafina-cats-row::-webkit-scrollbar { display: none; }

/*
 * ردیف با ماوس هم کشیده می‌شود، نه فقط با انگشت. نشانگر باید همین را بگوید،
 * وگرنه کاربر فرض می‌کند ردیف قفل است — دقیقاً همان چیزی که گزارش شد.
 */
.rafina-cats-row {
	cursor: grab;
	/*
	 * روی لمس، اسکرول دست خود مرورگر است.
	 *
	 * یک بار این‌جا pan-y نوشته شد؛ یعنی «حرکت افقی را خودت نده، من با
	 * جاوااسکریپت می‌دهم». نتیجه‌اش روی گوشی گیرکردن بود، چون هر حرکت باید
	 * منتظر رشته‌ی جاوااسکریپت می‌ماند و لغزش بومی هم از بین می‌رفت. حالا
	 * هر دو جهت دست مرورگر است و ردیف روی رشته‌ی رندر می‌لغزد.
	 */
	touch-action: pan-x pan-y;
	-webkit-overflow-scrolling: touch;
	/* کشیدن افقی نباید صفحه‌ی پشتش را هم ببرد */
	overscroll-behavior-x: contain;
}
.rafina-cats-row.is-grabbing { cursor: grabbing; user-select: none; }
.rafina-cats-row.is-grabbing img { pointer-events: none; }

/*
 * دو چیزی که حرکت را «تکان‌تکان» می‌کرد:
 *
 * ۱) scroll-behavior: smooth که ممکن است از استایل عمومی سایت به ارث برسد؛
 *    آن‌وقت هر نوشتن scrollLeft یک انیمیشن جدا می‌سازد و انیمیشن‌ها روی هم
 *    می‌افتند. کشیدن باید بی‌واسطه باشد.
 * ۲) گذار transform روی کارت‌ها که حین کشیدن هم اجرا می‌شد.
 */
.rafina-cats-row.is-grabbing { scroll-behavior: auto; scroll-snap-type: none; }
.rafina-cats-row.is-grabbing .rafina-cat-item,
.rafina-cats-row.is-grabbing .rafina-cat-icon,
.rafina-cats-row.is-grabbing .rafina-cat-icon img { transition: none; }
.rafina-cats-row.is-grabbing .rafina-cat-item:hover { transform: none; }
.rafina-cats-row.is-grabbing .rafina-cat-item:hover .rafina-cat-icon { transform: none; }

.rafina-cat-item {
	flex-shrink: 0;
	width: 86px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	padding: 0;
}

/* فضای رزروشده‌ی بالای آیکون — همیشه همین ارتفاع را دارد، فعال باشد یا نه */
.rafina-cat-label-slot {
	height: 20px;
	margin-bottom: 6px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
}
.rafina-cat-floating-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--rafina-accent-2, #19672a);
	white-space: nowrap;
	opacity: 0;
	transition: opacity .2s ease;
}
.rafina-cat-item.is-active .rafina-cat-floating-label { opacity: 1; }

.rafina-cat-icon {
	position: relative;
	width: 100%;
	height: 86px;
	border-radius: 18px;
	overflow: hidden;
	/* پس‌زمینه‌ی پشت لوگوی دسته — از «رنگ‌بندی سایت» می‌آید */
	background: linear-gradient(to bottom, var(--rafina-cat-tile-1, var(--rafina-ghost-bg, #f7f7f7)), var(--rafina-cat-tile-2, var(--rafina-bg-2, #eee)));
	border: 2px solid transparent;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.rafina-cat-item.is-active .rafina-cat-icon {
	border-color: var(--rafina-cat-active, var(--rafina-accent-2, #19672a));
	box-shadow: 0 4px 16px color-mix(in srgb, var(--rafina-cat-active, var(--rafina-accent-2, #19672a)) 18%, transparent);
}
.rafina-cat-item:hover .rafina-cat-icon { transform: translateY(-2px); }

.rafina-cat-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	box-sizing: border-box;
	mix-blend-mode: multiply;
	transition: transform .3s ease;
}
html[data-rafina-theme="dark"] .rafina-cat-icon img { mix-blend-mode: normal; }
.rafina-cat-item:hover .rafina-cat-icon img { transform: scale(1.05); }
.rafina-cat-icon-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size: 28px; }

/* فضای رزروشده‌ی پایین آیکون — همیشه یک ارتفاع ثابت (برای ۲ خط) دارد */
.rafina-cat-name-slot {
	height: 32px;
	margin-top: 6px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}
.rafina-cat-label {
	font-size: 12px;
	line-height: 1.3;
	color: var(--rafina-text-dim);
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s ease;
}
.rafina-cat-item:hover .rafina-cat-label,
.rafina-cat-item.is-active .rafina-cat-label { color: var(--rafina-text); }

/* پنل زیردسته‌ها */
.rafina-cats-panel {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
	margin-top: 0;
}
.rafina-cats-panel.is-open {
	/* زیردسته‌های زیاد (مدل‌های یک برند خودرو) از سقف می‌گذرند؛ بی اسکرول بریده می‌شدند */
	max-height: 260px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	opacity: 1;
	margin-top: 12px;
	padding-top: 16px;
	border-top: 1px dashed var(--rafina-border-2);
}
.rafina-cats-panel-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.rafina-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--rafina-ghost-bg, #f3f3f3);
	border: 1px solid var(--rafina-border-2);
	color: var(--rafina-text);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}
.rafina-cat-pill:hover { background: var(--rafina-ghost-bg-hover); border-color: var(--rafina-accent-2); }
.rafina-cat-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rafina-accent-2, #19672a); }

@media (max-width: 640px) {
	.rafina-cats-box { padding: 14px 12px; }
	.rafina-cat-item { width: 74px; }
	.rafina-cat-icon { height: 74px; border-radius: 14px; }
	.rafina-cats-row { gap: 10px; }
}

/* ---------------------------------------------------------
   ظاهر «کاشی»
   شبکه‌ی کارت‌های مربعی به‌جای ردیف افقی. تصویر دسته بزرگ‌تر دیده
   می‌شود، عنوان زیرش می‌نشیند و تعداد زیردسته‌ها هم کنارش می‌آید.
   با سه چهار دسته، برخلاف ردیف افقی، نیمی از عرض صفحه خالی نمی‌ماند.
--------------------------------------------------------- */
.rafina-cats--tiles .rafina-cats-box {
	background: none;
	border: 0;
	padding: 0;
}

.rafina-cats--tiles .rafina-cats-row {
	display: grid;
	/* کمینه‌ی عرض ستون از پنل می‌آید (پنج پله)؛ تعداد ستون‌ها را خود شبکه می‌چیند */
	grid-template-columns: repeat(auto-fill, minmax(var(--rafina-cat-tile-col, 150px), 1fr));
	gap: 14px;
	overflow: visible;
	padding: 0;
	align-items: stretch;
	cursor: default;
}

/* ---------------------------------------------------------
   کاشی کشویی
   ---------------------------------------------------------
   همان کارت‌های کاشی، ولی در یک ردیف افقی به‌جای شبکه‌ی چندردیفی.
   عرض هر کارت همان پله‌ی اندازه است تا دو تنظیم با هم بخوانند.
--------------------------------------------------------- */
.rafina-cats--tiles.is-tiles-slider .rafina-cats-row {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	/*
	 * بدون snap.
	 *
	 * با scroll-snap، ردیف حین کشیدن مدام به نزدیک‌ترین کارت برمی‌گشت و
	 * حرکت «گیر می‌کرد» — همان چیزی که گزارش شد. کارت‌ها هم‌عرض نیستند و
	 * چسبیدنشان هیچ سودی نداشت.
	 */
	scrollbar-width: none;
	/*
	 * کارت روی hover چهار پیکسل بالا می‌رود و سایه می‌گیرد؛ هر دو جا می‌خواهند.
	 * ده پیکسل پایین برای سایه‌ی ۲۴ پیکسلی کم بود و لبه‌اش صاف بریده می‌شد؛
	 * جای اضافه با حاشیه‌ی منفی پس گرفته می‌شود تا ارتفاع بخش همان بماند.
	 */
	padding-top: 10px;
	padding-bottom: 30px;
	margin-bottom: -20px;
	cursor: grab;
}
.rafina-cats--tiles.is-tiles-slider .rafina-cats-row::-webkit-scrollbar { display: none; }
.rafina-cats--tiles.is-tiles-slider .rafina-cats-row.is-grabbing { cursor: grabbing; }

.rafina-cats--tiles.is-tiles-slider .rafina-cat-item {
	flex: 0 0 var(--rafina-cat-tile-col, 150px);
}

.rafina-cats--tiles .rafina-cat-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: auto;
	min-width: 0;
	padding: 10px 10px 12px;
	border-radius: 20px;
	border: 1px solid var(--rafina-border);
	background: var(--rafina-panel);
	cursor: pointer;
	text-align: center;
	transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.rafina-cats--tiles .rafina-cat-item:hover {
	transform: translateY(-4px);
	border-color: var(--rafina-accent-2, #19672a);
	box-shadow: 0 12px 26px -14px rgba(20, 40, 25, .45);
}
.rafina-cats--tiles .rafina-cat-item.is-active {
	border-color: var(--rafina-accent-2, #19672a);
	box-shadow: 0 0 0 2px var(--rafina-accent-2, #19672a) inset;
}

/* برچسب شناور ظاهر کلاسیک این‌جا معنی ندارد */
.rafina-cats--tiles .rafina-cat-label-slot { display: none; }

.rafina-cats--tiles .rafina-cat-icon {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	background: var(--rafina-cat-tile-2, var(--rafina-bg-2));
	display: block;
	margin: 0;
	border: 0;
	box-shadow: none;
	transform: none;
}
.rafina-cats--tiles .rafina-cat-item:hover .rafina-cat-icon { transform: none; }
/*
 * ظاهر کلاسیک به تصویر padding و mix-blend-mode می‌دهد (چون آن‌جا آیکون
 * کوچک روی زمینه‌ی روشن است). در کاشی، خود تصویر روی کارت است و باید
 * کامل و بدون کم‌رنگ‌شدن دیده شود.
 */
.rafina-cats--tiles .rafina-cat-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
	mix-blend-mode: normal;
	transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.rafina-cats--tiles .rafina-cat-item:hover .rafina-cat-icon img { transform: scale(1.06); }
/* آیکون برداری عکس نیست: کامل داخل کاشی، با کمی حاشیه */
.rafina-cats--tiles .rafina-cat-icon img.is-vector { object-fit: contain; padding: 10%; box-sizing: border-box; }
.rafina-cats--tiles .rafina-cat-icon-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: 30px;
}

.rafina-cats--tiles .rafina-cat-name-slot {
	height: auto;
	margin-top: 10px;
	display: block;
}
.rafina-cats--tiles .rafina-cat-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--rafina-text);
	/* عنوان بلند نباید ارتفاع کارت‌ها را نامساوی کند */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rafina-cats--tiles .rafina-cat-sub {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	color: var(--rafina-text-dimmer);
}

.rafina-cats--tiles .rafina-cats-panel { padding-inline: 0; }

@media (max-width: 700px) {
	.rafina-cats--tiles .rafina-cats-row {
		grid-template-columns: repeat(auto-fill, minmax(var(--rafina-cat-tile-col-m, 104px), 1fr));
		gap: 10px;
	}
	.rafina-cats--tiles.is-tiles-slider .rafina-cat-item { flex-basis: var(--rafina-cat-tile-col-m, 104px); }
	.rafina-cats--tiles .rafina-cat-item { padding: 8px 8px 10px; border-radius: 16px; }
	.rafina-cats--tiles .rafina-cat-icon { border-radius: 12px; }
	.rafina-cats--tiles .rafina-cat-label { font-size: 12px; }
}

/* ---------------------------------------------------------
   ظاهر «دیجیتال»
   فقط خود خانه‌ها، بی کارت دورشان و بی سرتیتر — به خواست کاربر، مثل
   نمونه‌ای که فرستاد. خانه‌ها شبکه‌ی ثابت‌اند نه ردیف کشویی. ستون‌بندی به عرض خود ظرف
   بسته است نه پنجره: تا ۱۰۰۰ پیکسل شش ستون، کمتر سه ستون.
   عددها عینا از فایل طراحی آمده‌اند.
--------------------------------------------------------- */
/* سرتیتر در این طرح نیست؛ خانه‌ها خودشان گویا هستند */
.rafina-cats-section.is-digitali .rafina-cats-header { display: none; }
.rafina-cats-section.is-digitali .rafina-cats-header h3 {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: normal;
}
/* دکمه‌ی شبکه‌ای کنار عنوان در این طرح نیست */
.rafina-cats-section.is-digitali .rafina-cats-grid-btn { display: none; }

/* کارت دور خانه‌ها برداشته شد؛ هر خانه کادر خودش را دارد */
.rafina-cats-section.is-digitali .rafina-cats-box {
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0;
	box-shadow: none;
}

.rafina-cats-section.is-digitali .rafina-cats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(15%, (1000px - 100%) * 1000, 31%), 1fr));
	gap: clamp(8px, 1.3vw, 16px);
	overflow: visible;
	padding: 0;
	align-items: stretch;
	cursor: default;
}

.rafina-cats-section.is-digitali .rafina-cat-item {
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 110px;
	justify-content: center;
	gap: 12px;
	padding: 18px 8px;
	border: 1px solid var(--rafina-border);
	border-radius: 12px;
	background: var(--rafina-surface, var(--rafina-bg-2));
	transition: transform .2s, box-shadow .2s, border-color .2s, color .2s;
}
.rafina-cats-section.is-digitali .rafina-cat-item:hover,
.rafina-cats-section.is-digitali .rafina-cat-item.is-active {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
	border-color: color-mix(in srgb, var(--rafina-accent) 25%, var(--rafina-border));
}

/* برچسب شناور ظاهر کلاسیک این‌جا جا ندارد */
.rafina-cats-section.is-digitali .rafina-cat-label-slot { display: none; }

.rafina-cats-section.is-digitali .rafina-cat-icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	/* زمینه‌ی دایره از همان رنگ کاشی می‌آید؛ پیش‌تر هیچ زمینه‌ای نداشت و رنگ بلوک اثری نمی‌کرد */
	background: var(--rafina-cat-tile-2, var(--rafina-bg-2, #f4f6f8));
	box-shadow: none;
	transform: none;
	overflow: hidden;
}
.rafina-cats-section.is-digitali .rafina-cat-item:hover .rafina-cat-icon,
.rafina-cats-section.is-digitali .rafina-cat-item.is-active .rafina-cat-icon {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}
/* تصویر واقعی دسته دایره‌ی ۴۸ پیکسلی را پر می‌کند، بی حاشیه و بی آمیختن رنگ */
.rafina-cats-section.is-digitali .rafina-cat-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
	mix-blend-mode: normal;
}
.rafina-cats-section.is-digitali .rafina-cat-item:hover .rafina-cat-icon img { transform: none; }
/* آیکون برداری تمام‌قد داخل دایره؛ با cover گوشه‌هایش بریده می‌شد */
.rafina-cats-section.is-digitali .rafina-cat-icon img.is-vector { object-fit: contain; padding: 12%; box-sizing: border-box; }

/*
 * آیکون جانشین با رنگ جوهر می‌ماند، حتی وقتی نشانگر روی خانه است: در طرح
 * فقط کادر و نام رنگ برند می‌گیرند.
 */
.rafina-cats-section.is-digitali .rafina-cat-icon-fallback {
	display: block;
	width: 40px;
	height: 40px;
	font-size: 0;
}
.rafina-cats-section.is-digitali .rafina-cat-icon-fallback svg {
	width: 40px;
	height: 40px;
	color: var(--rafina-text);
	stroke-width: 1.6;
}

.rafina-cats-section.is-digitali .rafina-cat-name-slot {
	height: auto;
	margin-top: 0;
	display: block;
	max-width: 100%;
	padding-inline: 0;
}
.rafina-cats-section.is-digitali .rafina-cat-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--rafina-text);
}
.rafina-cats-section.is-digitali .rafina-cat-item:hover .rafina-cat-label,
.rafina-cats-section.is-digitali .rafina-cat-item.is-active .rafina-cat-label {
	color: var(--rafina-accent);
}

.rafina-cats-section.is-digitali .rafina-cats-panel { padding-inline: 0; }

@media (max-width: 640px) {
	.rafina-cats-section.is-digitali .rafina-cats-box { padding: 0; }
}

/* ---------------------------------------------------------
   ظاهر «دایره‌ای»
   ردیف هشت دایره زیر اسلایدر، بی کارت و بی سرتیتر. عددها عینا از
   فایل طراحی آمده‌اند: دایره‌ی ۱۰۰، فاصله‌ی ۲۴، نام ۱۴ با ۱۶ فاصله،
   و قد ۲۰۰ برای کل بخش. هشت ستون مال بوم ۱۴۴۰ است؛ روی صفحه‌ی
   باریک‌تر چهار ستون می‌شود و دایره با خانه‌اش کوچک می‌شود تا
   سرریز افقی نسازد.
--------------------------------------------------------- */
.rafina-cats--circle .rafina-cats-box {
	border: 0;
	border-radius: 0;
	background: var(--rafina-bg, #FAFAFA);
	/* طرح قد بخش را ثابت ۲۰۰ می‌گیرد و متن نام از کف آن بیرون می‌ماند */
	height: 200px;
	box-sizing: border-box;
	padding: 40px 0;
	overflow: visible;
}

.rafina-cats--circle .rafina-cats-row {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 24px;
	overflow: visible;
	padding: 0;
	align-items: start;
	cursor: default;
}

.rafina-cats--circle .rafina-cat-item {
	width: auto;
	min-width: 0;
	align-items: center;
}

/* برچسب شناور ظاهر کلاسیک این‌جا جا ندارد */
.rafina-cats--circle .rafina-cat-label-slot { display: none; }

.rafina-cats--circle .rafina-cat-icon {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 0;
	background: var(--rafina-cat-tile-2, var(--rafina-bg-2, #EDE9E3));
	box-shadow: none;
	transform: none;
	overflow: hidden;
	transition: box-shadow .2s ease;
}
/* هاور و انتخاب یک چیز است: حلقه‌ی دوپیکسلی به رنگ برند، بی بالا رفتن */
.rafina-cats--circle .rafina-cat-item:hover .rafina-cat-icon,
.rafina-cats--circle .rafina-cat-item.is-active .rafina-cat-icon {
	transform: none;
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--rafina-accent-2, #C8A15A);
}
/* تصویر دسته تمام دایره را پر می‌کند، بی حاشیه و بی آمیختن رنگ */
.rafina-cats--circle .rafina-cat-icon img {
	object-fit: cover;
	padding: 0;
	mix-blend-mode: normal;
}
.rafina-cats--circle .rafina-cat-item:hover .rafina-cat-icon img { transform: none; }
.rafina-cats--circle .rafina-cat-icon img.is-vector { object-fit: contain; padding: 14%; box-sizing: border-box; }
.rafina-cats--circle .rafina-cat-icon-fallback { color: var(--rafina-text-dimmer, #B5B0A8); }

.rafina-cats--circle .rafina-cat-name-slot {
	height: auto;
	margin-top: 16px;
	display: block;
	max-width: 100%;
}
.rafina-cats--circle .rafina-cat-label {
	display: block;
	font-family: var(--font-body, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--rafina-text, #1E1E1E);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rafina-cats--circle .rafina-cat-item:hover .rafina-cat-label,
.rafina-cats--circle .rafina-cat-item.is-active .rafina-cat-label { color: var(--rafina-accent-2, #C8A15A); }

.rafina-cats--circle .rafina-cats-panel { padding-inline: 0; }

@media (max-width: 1024px) {
	.rafina-cats--circle .rafina-cats-box { height: auto; padding: 32px 0; }
	.rafina-cats--circle .rafina-cats-row { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 752px) {
	.rafina-cats--circle .rafina-cats-box { padding: 24px 0; }
	.rafina-cats--circle .rafina-cats-row { gap: 16px; }
	/* دایره به پهنای خانه‌اش می‌رسد؛ ۱۰۰ ثابت روی گوشی از ستون بیرون می‌زد */
	.rafina-cats--circle .rafina-cat-icon { width: 100%; max-width: 100px; height: auto; aspect-ratio: 1 / 1; }
	.rafina-cats--circle .rafina-cat-name-slot { margin-top: 12px; }
	.rafina-cats--circle .rafina-cat-label { font-size: 13px; }
}

/* ---------------------------------------------------------
   کشویی و اندازه برای سه ظاهر دیگر
---------------------------------------------------------- */

/*
 * تا امروز «کشویی» و «اندازه» فقط به ظاهر «کاشی» می‌رسیدند.
 *
 * مدیر روی «دایره‌ای» و «کلاسیک» و «دیجیتال» همان دو گزینه را می‌دید، ذخیره
 * می‌کرد و هیچ اتفاقی نمی‌افتاد. قاعده‌های زیر عمدا از ظاهر «کاشی» جدا
 * نوشته شده‌اند تا آن یکی یک پیکسل هم تکان نخورد.
 */

/* ظاهر دایره‌ای: شبکه‌ی هشت‌ستونی به عرضی که مدیر انتخاب می‌کند گوش می‌دهد */
.rafina-cats--circle .rafina-cats-row {
	grid-template-columns: repeat(auto-fit, minmax(var(--rafina-cat-tile-col, 144px), 1fr));
}

/* و در حالت کشویی، ردیف از شبکه به یک خط اسکرول‌شونده می‌رود */
.rafina-cats--circle.is-tiles-slider .rafina-cats-row,
.rafina-cats-section.is-digitali.is-tiles-slider .rafina-cats-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	cursor: grab;
}

.rafina-cats--circle.is-tiles-slider .rafina-cats-row::-webkit-scrollbar,
.rafina-cats-section.is-digitali.is-tiles-slider .rafina-cats-row::-webkit-scrollbar { display: none; }

.rafina-cats--circle.is-tiles-slider .rafina-cats-row.is-grabbing,
.rafina-cats-section.is-digitali.is-tiles-slider .rafina-cats-row.is-grabbing { cursor: grabbing; }

/*
 * خانه در حالت کشویی نباید کوچک شود.
 *
 * `flex: 0 0` لازم است: بی آن، فلکس همه‌ی خانه‌ها را در عرض موجود جا می‌دهد
 * و ردیفی که قرار بود اسکرول شود، فشرده می‌ماند و اسکرولی نمی‌ماند.
 */
.rafina-cats--circle.is-tiles-slider .rafina-cat-item,
.rafina-cats-section.is-digitali.is-tiles-slider .rafina-cat-item {
	flex: 0 0 var(--rafina-cat-tile-col, 144px);
}

/* ظاهر کلاسیک از پیش یک خط افقی است؛ فقط عرض خانه‌اش به تنظیم گوش نمی‌داد */
.rafina-cats--classic .rafina-cat-item {
	flex: 0 0 var(--rafina-cat-tile-col, 104px);
}

/*
 * و بی کشویی، کلاسیک باید بشکند نه اینکه اسکرول شود.
 *
 * ردیف پایه `overflow-x: auto` دارد؛ خاموش‌بودن کشو یعنی مدیر همه‌ی دسته‌ها
 * را با هم می‌خواهد، پس چند خطی می‌شود.
 */
.rafina-cats--classic:not(.is-tiles-slider) .rafina-cats-row {
	flex-wrap: wrap;
	overflow-x: visible;
}

/* ظاهر دیجیتال بی کشویی همان شبکه‌ی خودش می‌ماند و عرض خانه از تنظیم می‌آید */
.rafina-cats-section.is-digitali:not(.is-tiles-slider) .rafina-cats-row {
	grid-template-columns: repeat(auto-fit, minmax(var(--rafina-cat-tile-col, 150px), 1fr));
}

@media (max-width: 752px) {

	.rafina-cats--circle .rafina-cats-row {
		grid-template-columns: repeat(auto-fit, minmax(var(--rafina-cat-tile-col-m, 104px), 1fr));
	}

	.rafina-cats--circle.is-tiles-slider .rafina-cat-item,
	.rafina-cats-section.is-digitali.is-tiles-slider .rafina-cat-item,
	.rafina-cats--classic .rafina-cat-item {
		flex-basis: var(--rafina-cat-tile-col-m, 104px);
	}
}