/**
 * کتابخانه‌ی اینترلن — استایل صفحه‌های آرشیو، دسته و کتاب تکی.
 *
 * ⚠️ همه‌ی قاعده‌ها زیر `.il-lib` هستند.
 *
 * قالب اینترلن بوت‌استرپ RTL لود می‌کند و کلاس‌های عمومی با آن تصادم می‌کنند.
 * محدود کردن به یک ریشه، هم این را حل می‌کند هم اجازه می‌دهد بدون هیچ
 * فریم‌ورکی کار کنیم — که سبک‌ترین حالت ممکن است.
 *
 * ⚠️ رنگ‌ها از متغیرهای هسته‌ی اینترلن می‌آیند (`--lf-primary` و…) که از کیت
 * سراسری المنتور خوانده می‌شوند. اگر آن متغیرها نبودند، مقدار پشتیبان کنارشان
 * هست تا صفحه بی‌رنگ نشود.
 */

/**
 * ⚠️ رنگ تأکید سبز برند است، نه سرمه‌ای.
 *
 * `--lf-primary` از کیت المنتور می‌آید و سرمه‌ای است؛ آن رنگِ فروشگاه است.
 * کتابخانه با سبز اینترلن کار می‌کند، پس متغیر خودش را دارد تا اگر روزی پالت
 * فروشگاه عوض شد، کتابخانه دنبالش کشیده نشود.
 */
.il-lib {
	--il-lib-accent: #00843D;
	--il-lib-accent-dark: #006B31;
	--il-lib-accent-soft: #E8F5EE;

	/**
	 * ⚠️ پلی به استایل مشترک فرم دیدگاه.
	 *
	 * فیلدهای مهمان (`il-cfields`) را هسته‌ی اینترلن می‌سازد و استایلشان هم
	 * آن‌جاست، چون روی همه‌ی نوع‌ها می‌آیند. رنگ حلقه‌ی فوکوسشان را از
	 * `--lf-accent` می‌خوانند تا هر صفحه بتواند رنگ خودش را بدهد؛ اینجا یعنی
	 * سبز کتابخانه، نه سرمه‌ای فروشگاه.
	 */
	--lf-accent: #00843D;

	/**
	 * ⚠️ عرض جمع‌تر از فروشگاه.
	 *
	 * با ۱۲۰۰ پیکسل، ردیف قفسه روی دسکتاپ کشیده و خالی به نظر می‌رسید. قفسه‌ی
	 * واقعی عرض محدود دارد و همان حس را می‌سازد.
	 */
	max-width: 960px;
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
	color: #1f2937;
}

.il-lib *,
.il-lib *::before,
.il-lib *::after { box-sizing: border-box; }

/* ==========================================
   مسیر راهنما
========================================== */

.il-lib__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	font-size: .8125rem;
	color: #6b7280;
	margin-bottom: 1.25rem;
}
.il-lib__crumbs a { color: inherit; text-decoration: none; }
.il-lib__crumbs a:hover { color: var(--il-lib-accent); }
.il-lib__crumbs span { color: #d1d5db; }
.il-lib__crumbs strong { color: #374151; font-weight: 700; }

/* ==========================================
   سربرگ
========================================== */

.il-lib__head { text-align: center; margin-bottom: 2rem; }

.il-lib__head h1 {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 800;
	margin: 0 0 .5rem;
	color: #111827;
}

.il-lib__head p {
	margin: 0;
	color: #6b7280;
	font-size: .95rem;
	line-height: 2;
}

/* ==========================================
   نوار دسته‌ها
========================================== */

.il-lib__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-bottom: 1.25rem;
}

.il-lib__tab {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .5rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #fff;
	color: #4b5563;
	font-size: .8125rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .2s, color .2s, background-color .2s;
}
.il-lib__tab:hover { border-color: var(--il-lib-accent); color: var(--il-lib-accent); }
.il-lib__tab.is-active {
	background: var(--il-lib-accent);
	border-color: var(--il-lib-accent);
	color: #fff;
}
.il-lib__tab small { opacity: .7; font-weight: 400; }

/* ==========================================
   فیلترها
========================================== */

.il-lib__filters {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	background: #fff;
	border: 1px solid #f3f4f6;
	border-radius: 1rem;
	box-shadow: 0 1px 2px rgb(0 0 0 / .04);
	padding: .75rem;
	margin-bottom: 2rem;
}

.il-lib__filters input[type="search"],
.il-lib__filters input[type="text"],
.il-lib__filters select {
	font: inherit;
	font-size: .8125rem;
	padding: .55rem .8rem;
	border: 1px solid #e5e7eb;
	border-radius: .7rem;
	background: #f9fafb;
	color: #374151;
	min-width: 0;
}

.il-lib__filters input[type="search"] { flex: 1 1 12rem; }
.il-lib__filters select { flex: 0 1 12rem; }

.il-lib__filters input:focus,
.il-lib__filters select:focus {
	outline: 2px solid var(--il-lib-accent);
	outline-offset: 1px;
	border-color: transparent;
	background: #fff;
}

.il-lib__filters button {
	font: inherit;
	font-size: .8125rem;
	font-weight: 700;
	padding: .55rem 1.4rem;
	border: none;
	border-radius: .7rem;
	background: var(--il-lib-accent);
	color: #fff;
	cursor: pointer;
	transition: opacity .2s;
}
.il-lib__filters button:hover { opacity: .9; }

/**
 * چیدمان موبایل: سه ردیف به‌جای هرچه `flex-wrap` تصادفاً ساخت.
 *
 * ⚠️ پیش از این هیچ قاعده‌ی موبایلی نبود و ترتیب سطرها به عرض صفحه بستگی
 * داشت: گاهی سطح و «تعداد در صفحه» کنار هم می‌افتادند و گاهی دکمه‌ی جستجو
 * می‌چسبید به یکی از آن‌ها و باریک می‌ماند.
 *
 *     جستجو            ← تمام عرض
 *     سطح | تعداد      ← دو ستون مساوی
 *     دکمه‌ی جستجو     ← تمام عرض
 *
 * ⚠️ `calc(50% - .3rem)` نه `50%` — نصف `gap` از سهم هر ستون کم می‌شود، وگرنه
 * دو ستون ۵۰٪ به‌علاوه‌ی فاصله از عرض ردیف بیشتر می‌شوند و دومی می‌افتد پایین.
 *
 * ⚠️ `flex-basis` کافی نیست و `min-width: 0` هم لازم است، وگرنه `<select>` از
 * عرض بلندترین گزینه‌اش کوچک‌تر نمی‌شود. گزینه‌های سطح بلندند و همین دوباره
 * ردیف را می‌شکست. (قاعده‌ی `min-width: 0` بالاتر برای همه‌ی ورودی‌ها هست.)
 */
@media (max-width: 600px) {
	.il-lib__filters input[type="search"] { flex: 1 1 100%; }
	.il-lib__filters select { flex: 1 1 calc(50% - .3rem); }
	.il-lib__filters button { flex: 1 1 100%; }
	.il-lib__reset { flex: 1 1 100%; text-align: center; }
}

.il-lib__reset {
	font-size: .8125rem;
	color: #6b7280;
	text-decoration: underline;
	align-self: center;
}

/* ==========================================
   قفسه
   ⚠️ چوب با گرادیان ساخته می‌شود نه تصویر: یک درخواست کمتر، و در هر عرضی
   بدون کشیدگی تکرار می‌شود.
========================================== */

.il-lib__shelf { margin-bottom: 2.5rem; }

/**
 * ⚠️ فاصله‌ی ستونی صفر است، و این عمدی است.
 *
 * قفسه باید زیر **هر ردیف** کشیده شود، نه یکی در انتهای گرید. ولی گرید
 * `auto-fill` تعداد ستون را به عرض صفحه می‌سپارد، پس از قبل معلوم نیست هر
 * ردیف چند کتاب دارد و نمی‌شود بعد از هر n کتاب یک تخته چاپ کرد.
 *
 * راه‌حل: تخته جزئی از **خود کارت** است و تمام عرض آن را می‌گیرد. با فاصله‌ی
 * ستونی صفر، تخته‌های کارت‌های کنار هم به هم می‌چسبند و یک خط پیوسته می‌سازند
 * — در هر عرضی، بدون جاوااسکریپت و بدون تعداد ستون ثابت.
 *
 * فاصله‌ی بین جلدها با `padding` داخل کارت ساخته می‌شود، نه با `gap`.
 */
/**
 * ⚠️ تعداد ستون ثابت است، نه `auto-fill`.
 *
 * شش کتاب در هر ردیف روی دسکتاپ — چون قفسه با تعداد مشخص، ریتم منظم‌تری دارد
 * تا وقتی که مرورگر خودش تصمیم بگیرد. روی صفحه‌های کوچک‌تر پله‌پله کم می‌شود
 * تا جلدها له نشوند.
 */
/**
 * ⚠️ `minmax(0, 1fr)` نه `1fr` — همان تله‌ی بند ۵٫۵ سند تحویل.
 *
 * `1fr` معادل `minmax(auto, 1fr)` است و ستون از **عرض کمینه‌ی محتوایش**
 * کوچک‌تر نمی‌شود. اگر روزی کارتی محتوایی با کمینه‌ی بزرگ داشته باشد (عنوان
 * بلند بدون فاصله در `il-lib__noimg`، یا تصویری بدون `max-width`)، ستون از
 * ظرف بیرون می‌زند و کل صفحه به پهلو می‌لغزد.
 *
 * یک بار همین‌جا اتفاق افتاده بود: ظرف ۳۴۳ ولی ستون ۸۴۳. آن‌موقع
 * `overflow-x: clip` پنهانش کرده بود؛ روی آرشیو چنین محافظی نیست، پس اینجا
 * مستقیم به اسکرول افقی تبدیل می‌شود.
 */
.il-lib__grid {
	display: grid;

	/* موبایل: سه کتاب در هر ردیف */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 0;
	align-items: end;
}

@media (min-width: 700px) { .il-lib__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .il-lib__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* روی موبایل فاصله‌ی کناری کارت کمتر می‌شود تا سه جلد جا شوند */
@media (max-width: 480px) {
	.il-lib__card { padding: 0 .3rem 2.2rem; }
	.il-lib__card::after { bottom: .9rem; height: .55rem; }
}

/* ==========================================
   کارت کتاب
========================================== */

.il-lib__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;

	/* فاصله‌ی بین جلدها؛ جای `gap` گرید را می‌گیرد تا تخته‌ها به هم بچسبند */
	padding: 0 .55rem 2.6rem;
}

/**
 * تخته‌ی چوبی زیر هر کارت.
 *
 * ⚠️ `inset-inline: -1px` عمدی است.
 *
 * با صفر، بین تخته‌های دو کارت مجاور یک خط موی‌باریک می‌افتاد که در بعضی
 * بزرگ‌نمایی‌های مرورگر دیده می‌شد و قفسه را بریده‌بریده نشان می‌داد. یک پیکسل
 * همپوشانی آن را می‌بندد.
 */
.il-lib__card::after {
	content: "";
	position: absolute;
	inset-inline: -1px;
	bottom: 1.1rem;
	height: .7rem;
	background: linear-gradient(180deg, #c8905a 0%, #a9713f 55%, #8a5a30 100%);
	box-shadow: 0 4px 7px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .28);
}

/**
 * ⚠️ جلد روی تخته می‌نشیند، نه شناور بالای آن.
 *
 * کارت‌ها با `align-items: end` ته‌چین شده‌اند تا کتاب‌های با ارتفاع متفاوت
 * همه روی یک خط بنشینند — همان چیزی که قفسه‌ی واقعی می‌کند.
 */
.il-lib__card > .il-lib__cover { align-self: end; }

.il-lib__cover {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: .5rem;
	overflow: hidden;
	background: #f3f4f6;
	box-shadow: 0 4px 10px rgb(0 0 0 / .12);
	transition: transform .25s ease, box-shadow .25s ease;
}

.il-lib__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.il-lib__card:hover .il-lib__cover {
	transform: translateY(-4px);
	box-shadow: 0 10px 18px rgb(0 0 0 / .18);
}

/* ==========================================
   دکمه‌ی نگاه سریع
========================================== */

/**
 * ⚠️ `inset-inline-end` نه `left`.
 *
 * خواسته «پایین چپ» بود و صفحه راست‌چین است، یعنی چپ همان **انتهای** جریان
 * است. با `left` ثابت، اگر روزی صفحه‌ای LTR شد دکمه می‌افتاد روی عطف کتاب.
 *
 * ⚠️ همیشه دیده می‌شود — روی هر دستگاهی.
 *
 * نسخه‌ی اول روی دسکتاپ پنهانش می‌کرد و فقط با هاور نشان می‌داد. مشکلش این
 * است که قابلیتِ نادیده، قابلیتِ نداشته است: کاربر باید **بداند** چیزی آنجا
 * هست تا ماوس ببرد. هاور فقط تأکید می‌کند، معرفی نمی‌کند.
 *
 * پس حالت پایه شیشه‌ای و کم‌رنگ است و با هاور روشن‌تر می‌شود.
 *
 * ⚠️ کوچک است و باید کوچک بماند.
 *
 * نسخه‌ی اول ۲۸ پیکسل بود و روی جلدِ ۱۵۴ پیکسلیِ آرشیو، یعنی نزدیک یک‌پنجم
 * عرض جلد — به‌جای نشانه، رقیبِ جلد می‌شد. قهرمانِ این صفحه جلد کتاب است و این
 * دکمه فقط باید در دسترس باشد، نه دیده شود.
 */
.il-lib__peek {
	position: absolute;
	inset-block-end: .3rem;
	inset-inline-end: .3rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 1.35rem;
	height: 1.35rem;

	border: 1px solid rgb(255 255 255 / .25);
	border-radius: 999px;
	background: rgb(107 114 128 / .25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgb(255 255 255 / .85);
	cursor: pointer;

	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.il-lib__peek svg { width: .8rem; height: .8rem; }

/**
 * سه پله، نه دو تا:
 *
 *     عادی            شیشه‌ای و کم‌رنگ — هست ولی مزاحم جلد نیست
 *     هاور روی کارت   کمی نمایان‌تر — «اینجا کاری می‌شود کرد»
 *     هاور روی دکمه   پررنگ و کدر — «همین را بزن»
 *
 * ⚠️ ترتیب این دو قاعده مهم است. هر دو یک ویژگی را می‌نویسند و هم‌وزن نیستند
 * ولی نزدیک‌اند؛ هاورِ خودِ دکمه باید **بعد** بیاید تا وقتی کاربر هم روی کارت
 * است هم روی دکمه (که همیشه همین‌طور است) پله‌ی سوم برنده شود.
 */
.il-lib__card:hover .il-lib__peek {
	background: rgb(75 85 99 / .5);
	border-color: rgb(255 255 255 / .45);
	color: #fff;
}

.il-lib__peek:hover {
	background: rgb(17 24 39 / .8);
	border-color: rgb(255 255 255 / .7);
	color: #fff;
	transform: scale(1.1);
}

.il-lib__peek:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

/* در حال آوردن کتاب */
.il-lib__peek.is-loading { opacity: .6; cursor: progress; }
.il-lib__peek.is-loading svg { animation: il-peek-pulse 1s ease-in-out infinite; }

@keyframes il-peek-pulse {
	50% { opacity: .35; transform: scale(.9); }
}

/**
 * ⚠️ روی موبایل کوچک‌تر، چون جلد هم کوچک‌تر است.
 *
 * نسبت مهم است نه اندازه‌ی مطلق: همان دکمه‌ی ۲۲ پیکسلی روی جلد ۱۳۷ پیکسلیِ
 * دسکتاپ ۱۶٪ عرض است ولی روی جلد ۹۷ پیکسلیِ موبایل ۲۲٪ — یعنی محسوس‌تر،
 * درست برخلاف چیزی که می‌خواهیم.
 *
 * ⚠️ از ۱۸ پیکسل کمتر نشود؛ هدفِ لمس زیر آن سخت می‌شود.
 */
@media (max-width: 480px) {
	.il-lib__peek { width: 1.15rem; height: 1.15rem; inset-block-end: .25rem; inset-inline-end: .25rem; }
	.il-lib__peek svg { width: .7rem; height: .7rem; }
}

/**
 * ⚠️ ظرف لایت‌باکس خودش چیزی نمی‌کشد.
 *
 * افزونه پوشش تمام‌صفحه‌ی خودش را می‌سازد؛ این فقط جایی است که مارک‌آپ تزریق
 * می‌شود. بدون `position` و اندازه‌ی صفر، همان `<div>` خالی یک فاصله‌ی نامرئی
 * ته صفحه می‌ساخت.
 */
.il-peek-host { position: absolute; width: 0; height: 0; overflow: hidden; }

.il-peek-error {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline: 1rem;
	z-index: 2147483647;
	max-width: 24rem;
	margin-inline: auto;
	padding: .75rem 1rem;
	border-radius: .75rem;
	background: #7f1d1d;
	color: #fff;
	font-size: .875rem;
	text-align: center;
	box-shadow: 0 8px 24px rgb(0 0 0 / .3);
}

.il-lib__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: .75rem;
	color: #9ca3af;
}

/**
 * برچسب سطح و عنوانِ زیر جلد حذف شدند — عنوان حالا در `title` کارت است و
 * مرورگر خودش تولتیپ نشان می‌دهد.
 */

.il-lib__noimg {
	padding: .5rem;
	text-align: center;
	line-height: 1.6;
}

/* ==========================================
   حالت خالی و صفحه‌بندی
========================================== */

.il-lib__empty {
	text-align: center;
	padding: 3rem 1rem;
	background: #fff;
	border: 1px solid #f3f4f6;
	border-radius: 1rem;
	color: #6b7280;
}

.il-lib__pagination { margin-top: 2.5rem; display: flex; justify-content: center; }
.il-lib__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .6rem;
	margin: 0 .18rem;
	border: 1px solid #e5e7eb;
	border-radius: .7rem;
	background: #fff;
	color: #6b7280;
	font-size: .8125rem;
	font-weight: 700;
	text-decoration: none;
}
.il-lib__pagination .page-numbers:hover { border-color: var(--il-lib-accent); color: var(--il-lib-accent); }
.il-lib__pagination .page-numbers.current {
	background: var(--il-lib-accent);
	border-color: var(--il-lib-accent);
	color: #fff;
}

/* ==========================================
   صفحه‌ی کتاب
========================================== */

/**
 * ⚠️ پس‌زمینه روی `body` می‌نشیند، نه روی ظرف.
 *
 * اگر فقط `.il-lib` خاکستری می‌شد، نوار سفیدِ قالب دو طرفش می‌ماند و صفحه
 * وصله‌دار دیده می‌شد. کلاس بدنه‌ی وردپرس (`single-r3d`) تضمین می‌کند فقط
 * صفحه‌ی کتاب اثر بگیرد و آرشیو سفید بماند.
 */
/**
 * ⚠️ `!important` اینجا ناگزیر است، نه سهل‌انگاری.
 *
 * قالب مگالرن در `megalearn.css` این را دارد:
 *
 *     body { background-color: #fff !important; }
 *
 * در برابر `!important`، بالا بردن ویژگی انتخابگر بی‌فایده است — هیچ قاعده‌ی
 * معمولی از آن نمی‌بَرَد. یک `!important` دیگر تنها راه است، و چون فایل ما بعد
 * از قالب لود می‌شود، برنده می‌شویم.
 *
 * ⚠️ `#main-wrap` هم لازم است: قالب یک قاعده‌ی درون‌خطی دارد که آن را هم سفید
 * می‌کند، و بدون این، یک مستطیل سفید وسط صفحه‌ی خاکستری می‌ماند.
 */
body.single-r3d,
body.single-r3d #main-wrap { background-color: #F2F2F2 !important; }

/**
 * پنل‌ها روی زمینه‌ی خاکستری باید سفید بمانند تا از هم جدا دیده شوند —
 * وگرنه همه‌چیز یک تخته‌ی یکدست می‌شود.
 */
body.single-r3d .il-lib__panel { background: #fff; }

/**
 * ⚠️ `minmax(0, 1fr)` است نه `1fr` — و این تفاوت یک باگ واقعی را حل می‌کند.
 *
 * `1fr` در گرید معادل `minmax(auto, 1fr)` است، یعنی ستون حق ندارد از **عرض
 * کمینه‌ی محتوایش** کوچک‌تر شود. کافی بود یک عنصر تودرتو عرض کمینه‌ی بزرگی
 * داشته باشد تا کل ستون باد کند.
 *
 * اندازه‌گیری روی موبایل ۳۷۵ پیکسلی: ظرف ۳۴۳ پیکسل بود ولی ستون گرید ۸۴۳ —
 * و جلد کتاب با `left: -126` بیرون از صفحه می‌افتاد. چون `overflow-x: clip`
 * روی بدنه بود، اسکرول افقی دیده نمی‌شد و خرابی **پنهان** می‌ماند؛ فقط بخشی
 * از صفحه بریده شده بود.
 *
 * `minmax(0, …)` به ستون اجازه می‌دهد کوچک شود و محتوا خودش را جمع کند.
 */
/**
 * چیدمان موبایل:
 *
 *     ┌─────────────────────────┐
 *     │      عنوان (وسط‌چین)     │
 *     ├──────────┬──────────────┤
 *     │  مشخصات  │              │
 *     ├──────────┤      جلد     │   ← جلد سمت راست (شروعِ RTL)
 *     │  چکیده   │              │
 *     └──────────┴──────────────┘
 *
 * ⚠️ ستون اول در RTL سمت **راست** است، پس `"cover meta"` یعنی جلد راست و
 * مشخصات چپ. اگر روزی صفحه LTR شد، جای این دو خودبه‌خود عوض می‌شود — که
 * درست است، چون خواسته «سمت جلد» بود نه «سمت راستِ فیزیکی».
 *
 * ⚠️ چکیده هم کنار جلد است، نه زیر کارت.
 *
 * نسخه‌ی قبلی چکیده را تمام‌عرض زیر جلد می‌گذاشت و کنار جلد فقط یک ردیف
 * مشخصات می‌ماند — یعنی حدود صد پیکسل فضای خالی سمت چپ جلد. حالا جلد دو ردیف
 * را می‌گیرد و ستون کناری‌اش پر می‌شود.
 *
 * ⚠️ `align-items: start` است نه `center`.
 *
 * با `center` مشخصات نسبت به جلدِ بلند وسط می‌ایستاد؛ حالا که چکیده هم
 * زیرش آمده، هر دو باید از **بالای** جلد شروع شوند وگرنه ستون کناری در
 * وسط شناور می‌ماند.
 */
.il-lib__book {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"title title"
		"cover meta"
		"cover excerpt";
	gap: .6rem 1.25rem;
	margin-bottom: 2rem;
	align-items: start;
}

.il-lib__book h1          { grid-area: title; }
.il-lib__book-cover       { grid-area: cover; }
.il-lib__book .il-lib__meta    { grid-area: meta; }
.il-lib__book .il-lib__excerpt { grid-area: excerpt; }

/* هر دو ستون هم باید اجازه‌ی جمع شدن داشته باشند */
.il-lib__book > * { min-width: 0; }

/**
 * دسکتاپ: جلد یک ستون کامل سمت راست، بقیه در ستون کناری روی هم.
 *
 * تنها تفاوتش با موبایل جای عنوان است: آن‌جا بالای کارت و تمام‌عرض، اینجا در
 * ستون کناریِ جلد. ستون‌ها هم کمی بازتر می‌شوند.
 */
@media (min-width: 900px) {
	.il-lib__book {
		grid-template-columns: 8rem minmax(0, 1fr);
		grid-template-areas:
			"cover title"
			"cover meta"
			"cover excerpt";
		gap: .75rem 1.5rem;
	}
}

/**
 * ⚠️ نشانگر بازدید از `interlan_views_html()` می‌آید که کلاس‌های تیلویند دارد
 * (`w-4 h-4`، `text-xs`) — و تیلویند در صفحه‌های کتابخانه لود نمی‌شود.
 *
 * پیامدش این بود که SVG هیچ محدودیت اندازه‌ای نداشت و در ابعاد طبیعی خودش
 * رندر می‌شد: یک آیکن غول‌پیکر کنار یک چیپ کوچک. اینجا اندازه‌اش را خودمان
 * می‌دهیم تا مستقل از تیلویند درست بماند.
 */
.il-lib .il-views {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .75rem;
	color: #9ca3af;
	white-space: nowrap;
}

.il-lib .il-views svg {
	width: .9rem;
	height: .9rem;
	flex: 0 0 auto;
}

.il-lib__book-cover {
	border-radius: .75rem;
	overflow: hidden;
	background: #f3f4f6;
	box-shadow: 0 6px 16px rgb(0 0 0 / .14);
	aspect-ratio: 3 / 4;

	/**
	 * ⚠️ حدود نصف اندازه‌ی قبلی — جلد اینجا نقش شناسه دارد نه نمایش.
	 *
	 * ⚠️ روی موبایل ۷ رم است نه ۸: دسته و شمار بازدید باید کنار هم در **یک**
	 * ردیف جا شوند و با جلد ۸ رمی، ستون مشخصات ۱۹۱ پیکسل می‌شد و به دو خط
	 * می‌شکست. یک رم کم‌کردن از جلد، ۱۶ پیکسل به آن ستون می‌دهد.
	 */
	width: 7rem;
}

@media (min-width: 900px) { .il-lib__book-cover { width: 8rem; } }

.il-lib__book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.il-lib__book h1 {
	margin: 0;
	font-size: clamp(1.35rem, 3.5vw, 1.9rem);
	font-weight: 800;
	line-height: 1.6;
	color: #111827;
	text-align: center;
}

/**
 * ⚠️ این قاعده باید **بعد از** قاعده‌ی بالا بیاید، نه داخل بلوک گرید دسکتاپ.
 *
 * هر دو `(0,1,1)` هستند و در ویژگی برابرند، پس فقط ترتیب فایل تصمیم می‌گیرد.
 * نسخه‌ی اول این خط را کنار `grid-template-areas` گذاشت — یعنی بالاتر از
 * `text-align: center` — و روی دسکتاپ عنوان همچنان وسط‌چین می‌ماند بی‌آنکه
 * چیزی خطا بدهد.
 */
@media (min-width: 900px) {
	.il-lib__book h1 { text-align: start; }
}

/**
 * ⚠️ `nowrap` نیست، ولی باید در یک ردیف بماند.
 *
 * شکستن به خط دوم بهتر از سرریز است — اگر روزی نام دسته بلند شد، `nowrap`
 * ستون را از کارت بیرون می‌زد. عرض ستون طوری تنظیم شده که در حالت عادی
 * نشکند؛ این فقط دریچه‌ی اطمینان است.
 */
.il-lib__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
}

/* ⚠️ کوچک و کم‌صدا — چیپ نقش برچسب دارد نه دکمه */
.il-lib__chip {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	background: var(--il-lib-accent-soft);
	color: var(--il-lib-accent);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: .18rem .55rem;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.8;
	text-decoration: none;
}
.il-lib__chip:hover { background: var(--il-lib-accent); color: #fff; }

.il-lib__excerpt { color: #4b5563; line-height: 2.1; font-size: .95rem; }

/**
 * ⚠️ چکیده‌ی داخل کارت کوچک‌تر از متن «درباره این کتاب» است.
 *
 * حالا در ستونی حدود ۲۱۰ پیکسلی کنار جلد می‌نشیند، نه تمام‌عرض. با ۰٫۹۵rem و
 * `line-height: 2.1` هر خط دو سه کلمه می‌شد و ستون بی‌دلیل بلند می‌رفت — همان
 * چیزی که جلد را کوتاه و بی‌قواره نشان می‌داد.
 *
 * ⚠️ انتخابگر با `.il-lib__book` محدود شده تا متن کامل کتاب (که همین کلاس را
 * دارد ولی داخل `il-lib__panel` است) ریز نشود.
 */
.il-lib__book .il-lib__excerpt {
	font-size: .8125rem;
	line-height: 1.9;
}

.il-lib__book .il-lib__excerpt p { margin: 0 0 .5rem; }
.il-lib__book .il-lib__excerpt p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.il-lib__book .il-lib__excerpt { font-size: .95rem; line-height: 2.1; }
}

/* بلوک‌های محتوا */
.il-lib__panel {
	background: #fff;
	border: 1px solid #f3f4f6;
	border-radius: 1rem;
	box-shadow: 0 1px 2px rgb(0 0 0 / .04);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 700px) { .il-lib__panel { padding: 1.75rem; } }

/**
 * بخش کتاب از عرض ظرف بیرون می‌زند و تمام صفحه را می‌گیرد.
 *
 * ⚠️ از `margin` منفی استفاده می‌شود نه `width: 100vw`.
 *
 * `100vw` عرض نوار پیمایش را هم حساب می‌کند، پس روی دسکتاپی که اسکرول‌بار
 * دارد چند پیکسل سرریز افقی می‌سازد — همان چیزی که کل صفحه را به پهلو
 * می‌لغزاند. `calc(50% - 50vw)` روی هر دو طرف، همین کار را بدون آن عارضه
 * انجام می‌دهد.
 *
 * ⚠️ فقط از ۹۰۰ پیکسل به بالا. روی موبایل ظرف از قبل تمام‌عرض است و این
 * قاعده فقط حاشیه‌های منفی بی‌فایده می‌ساخت.
 */
@media (min-width: 900px) {
	.il-lib__panel--wide {
		margin-inline: calc(50% - 50vw);
		padding-inline: 0;
		border-radius: 0;
		border-inline: none;
	}
}

/**
 * ⚠️ بدون این، همان تمام‌عرض شدن چند پیکسل سرریز افقی می‌سازد.
 *
 * `50vw` عرض **نوار پیمایش** را هم می‌شمارد ولی `50%` نمی‌شمارد، پس اختلافشان
 * به اندازه‌ی پهنای اسکرول‌بار سرریز می‌شود. اندازه‌گیری‌شده: صفحه ۱۲۷۳ پیکسل
 * پهنا داشت در حالی که فضای دید ۱۲۶۵ بود — یعنی ۸ پیکسل لغزش افقی.
 *
 * ⚠️ `clip` استفاده می‌شود نه `hidden`.
 *
 * `overflow-x: hidden` روی بدنه یک ظرف پیمایش می‌سازد و `position: sticky` را
 * در کل صفحه از کار می‌اندازد — از جمله هدر چسبان قالب. `clip` فقط می‌بُرد و
 * چنین عارضه‌ای ندارد.
 *
 * محدود به صفحه‌ی کتاب است تا بقیه‌ی سایت اثر نگیرد.
 */
body.single-r3d { overflow-x: clip; }

.il-lib__panel > h2 {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: #111827;
}

/**
 * ⚠️ ارتفاع کتاب از **عرضش** می‌آید، نه از ارتفاع ظرف.
 *
 * افزونه با `responsiveHeight: true` و `aspectRatio: 2` کار می‌کند و هنگام
 * لود، `height` را روی ظرف داخلی‌اش می‌نویسد: `عرض ÷ نسبت`. پس `max-height`
 * روی ظرف بیرونی فقط کتاب را می‌بُرد و `min-height` هم فقط فضای خالی اضافه
 * می‌کند. تنها اهرمِ واقعی، **عرض** است.
 *
 * ⚠️ زیر ۷۶۸ پیکسل افزونه به حالت تک‌صفحه‌ای می‌رود
 * (`responsiveView` + `responsiveViewTreshold: 768`) و نسبتش ۱ می‌شود، نه ۲.
 * یعنی روی موبایل ارتفاع با عرض **برابر** است.
 *
 *     دسکتاپ:  ارتفاع = عرض ÷ ۲   →  عرض ۸۴۰ یعنی ارتفاع ۴۲۰
 *     موبایل:  ارتفاع = عرض       →  عرض تمام است، پس ارتفاع هم همان
 *
 * ⚠️ سقف با پیکسل نوشته شده نه `vh` — و این یک بار اصلاح شد.
 *
 * نسخه‌ی اول `max-width: 70vh` بود تا ارتفاع همیشه ۳۵٪ صفحه بماند. ولی خواسته
 * «۳۰ درصد **کمتر** از حالت اول» بود، نه «۳۵ درصدِ صفحه» — و ۳۵vh در عمل کتاب
 * را از ۶۴۰ به ۳۱۵ پیکسل رساند، یعنی نصف. عدد قطعی حالا ۴۲۰ پیکسل است.
 *
 * چون هدف یک ارتفاع مشخص است نه کسری از صفحه، واحد هم باید ثابت باشد؛ با `vh`
 * همان کتاب روی لپ‌تاپ کوتاه و مانیتور بلند دو اندازه‌ی متفاوت می‌گرفت.
 */
.il-lib__flipbook {
	max-width: 840px;
	margin-inline: auto;

	/**
	 * ⚠️ صفر نه، ولی کم.
	 *
	 * بدون هیچ ارتفاعی، ظرف پیش از آماده شدن افزونه صفر می‌شود و کتاب اصلاً
	 * دیده نمی‌شود — بدون هیچ خطایی. ولی مقدار قبلی (۶۰vh دسکتاپ / ۵۵vh
	 * موبایل) از ارتفاع واقعی کتاب بیشتر بود و ته جعبه‌ی سفید فضای مرده
	 * می‌ساخت: روی موبایل ۳۷۵ پیکسلی، کتاب ۳۰۱ پیکسل بود و ظرف ۴۴۷ — یعنی
	 * ۱۴۶ پیکسل خالی، و کتاب چسبیده به بالا.
	 */
	min-height: 12rem;

	/* اگر باز هم جایی فضای اضافه ماند، بالا و پایین پخش شود نه همه‌اش زیر کتاب */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/**
 * ⚠️ روی موبایل سقف عرض برداشته می‌شود.
 *
 * زیر ۷۶۸ پیکسل نسبت ۱ است، پس هر محدودیتی روی عرض مستقیماً کتاب را کوچک
 * می‌کند. خواسته این بود که عرض کامل بماند.
 */
@media (max-width: 767px) {
	.il-lib__flipbook { max-width: none; }
}

.il-lib__locked {
	text-align: center;
	padding: 2.5rem 1rem;
	color: #6b7280;
}
.il-lib__locked strong { display: block; color: #111827; font-size: 1rem; margin-bottom: .4rem; }

.il-lib__audio { width: 100%; }

/* ==========================================
   دیدگاه‌ها
========================================== */

/**
 * ⚠️ اینجا فقط «قاب» فرم است، نه خود دیدگاه‌ها.
 *
 * ظاهر تک‌تک دیدگاه‌ها (`.lf-comment`، آواتار، لایک، پاسخ) را هسته‌ی اینترلن در
 * `interlan_comment_styles()` چاپ می‌کند و آن استایل روی **هر** صفحه‌ی دارای
 * بخش دیدگاه می‌آید — از جمله همین‌جا. تکرارش اینجا یعنی دو نسخه که با هم از
 * هم دور می‌شوند.
 *
 * ⚠️ اعداد از `hexo-interlan-core/shop/src/input.css` (بند «بخش نظرات ووکامرس»)
 * برداشته شده‌اند تا فرم کتاب عیناً همان فرم نظر محصول باشد. اگر آن‌جا عوض شد،
 * اینجا هم باید عوض شود — این تنها جفتِ دستیِ باقی‌مانده است، چون `shop.css`
 * روی صفحه‌های کتابخانه لود نمی‌شود.
 */

.il-lib__reviews h2 {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: #111827;
}

.il-lib__reviews-count {
	font-size: .75rem;
	font-weight: 700;
	color: var(--il-lib-accent);
	background: var(--il-lib-accent-soft);
	border-radius: 999px;
	padding: .1rem .55rem;
}

.il-lib__reviews-empty {
	color: #6b7280;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: .75rem;
	padding: 1rem;
	text-align: center;
	font-size: .875rem;
	margin: 0 0 1.5rem;
}

.il-lib__reviews .lf-comment-list { margin: 0 0 2rem; }

.il-lib__reviews-nav ul { display: flex; justify-content: center; gap: .4rem; list-style: none; padding: 0; }

/* قاب خاکستری فرم — همان `.lf-review-form` صفحه‌ی محصول */
.il-lib__review-form {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: .75rem;
	padding: 1.25rem;
}

@media (min-width: 700px) { .il-lib__review-form { padding: 1.5rem; } }

.il-lib__review-form .comment-reply-title {
	display: block;
	font-size: 1.125rem;
	font-weight: 800;
	color: #111827;
	margin-bottom: 1rem;
}

.il-lib__review-form .comment-form label {
	display: block;
	font-size: .8125rem;
	font-weight: 700;
	color: #374151;
	margin-bottom: .35rem;
}

.il-lib__review-form .comment-form textarea,
.il-lib__review-form .comment-form input[type="text"],
.il-lib__review-form .comment-form input[type="tel"] {
	width: 100%;
	font-family: inherit;
	font-size: .875rem;
	line-height: 1.4286; /* ۲۰ پیکسل روی متن ۱۴ پیکسلی — همان عددِ صفحه‌ی محصول */
	border: 1px solid #d1d5db;
	border-radius: .75rem;
	padding: .75rem 1rem;
	background: #fff;
	color: #374151;
	transition: border-color .2s, box-shadow .2s;
}

.il-lib__review-form .comment-form textarea:focus,
.il-lib__review-form .comment-form input:focus {
	outline: none;
	border-color: var(--il-lib-accent);
	box-shadow: 0 0 0 1px var(--il-lib-accent);
}

.il-lib__review-form .comment-form p { margin-bottom: 1rem; }
.il-lib__review-form .comment-form-comment { margin-bottom: 1rem; }

/**
 * ⚠️ خنثی کردن قاعده‌ی بالا داخل گرید نام و شماره.
 *
 * `\.comment-form p` هر `<p>` نوه را هم می‌گیرد و دو خانه‌ی `il-cfields` هم
 * `<p>` هستند. با `margin-bottom` روی آن‌ها، فاصله‌ی گرید و حاشیه با هم جمع
 * می‌شدند و ردیف نامتقارن می‌شد.
 */
.il-lib__review-form .il-cfields__field { margin-bottom: 0; }
.il-lib__review-form .comment-form .required { color: #dc2626; }

/**
 * ⚠️ انتخابگر به شناسه و کلاسِ خود دکمه بسته است، نه به `.submit`.
 *
 * `class_submit` کلاس پیش‌فرض `submit` را **جایگزین** می‌کند، نه اینکه کنارش
 * بگذارد؛ پس دکمه فقط `lf-submit-review` دارد و هر قاعده‌ای که `.submit`
 * بنویسد هیچ‌وقت اجرا نمی‌شود. تمپلیت محصول هم دقیقاً به همین شکل نوشته شده.
 *
 * ⚠️ به `.il-lib__review-form` بسته نشده چون هنگام «پاسخ»، بلوک `#respond` از
 * دل فرم بیرون کشیده و زیر دیدگاه منتقل می‌شود. ریشه‌ی `.il-lib` ولی همچنان
 * بالای سرش هست — و لازم است، وگرنه این قاعده روی صفحه‌ی محصول هم می‌نشیند و
 * چون انتخابگرش با قاعده‌ی آن‌جا مو نمی‌زند، برنده را ترتیب بارگذاری تعیین
 * می‌کرد.
 */
.il-lib #respond .form-submit input#submit.lf-submit-review {
	font-family: inherit;
	font-size: .875rem;
	background-color: var(--il-lib-accent);
	color: #fff;
	font-weight: 700;
	border: none;
	border-radius: .5rem;
	padding: .625rem 1.5rem;
	width: auto;
	cursor: pointer;
	transition: background-color .2s;
}
.il-lib #respond .form-submit input#submit.lf-submit-review:hover { background-color: var(--il-lib-accent-dark); }

.il-lib__review-form .form-submit { margin: 1rem 0 0; text-align: left; }

/* نوار «وارد شده‌اید» — معادل همان بلوک در تمپلیت محصول */
.il-lib__logged-in {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-right: 4px solid var(--il-lib-accent);
	border-radius: .5rem;
	padding: .75rem 1rem;
	color: #374151;
	font-size: .875rem;
}
.il-lib__logged-in svg { width: 1.25rem; height: 1.25rem; color: var(--il-lib-accent); flex-shrink: 0; }
.il-lib__logged-in a { margin-inline-start: auto; color: #ef4444; font-weight: 700; font-size: .75rem; text-decoration: none; }
.il-lib__logged-in a:hover { color: #b91c1c; }

/* کتاب‌های مرتبط */
.il-lib__related h2 { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 800; color: #111827; }

/**
 * ⚠️ کمتر از شش کتاب باید وسط‌چین باشد، نه چسبیده به راست.
 *
 * ⚠️ چرا گرید اینجا `flex` می‌شود.
 *
 * `.il-lib__grid` روی دسکتاپ `repeat(6, 1fr)` است و شش ستون **همیشه** ساخته
 * می‌شوند، حتی وقتی سه کتاب بیشتر نیست. سه ستون خالی جای خودشان را می‌گیرند و
 * کتاب‌ها به ابتدای ردیف (در RTL: راست) می‌چسبند. `justify-content` هم چاره
 * نیست، چون ستون‌ها روی هم کل عرض را پر کرده‌اند و چیزی برای توزیع نمانده.
 *
 * با `flex`، فقط به تعداد کتاب‌ها آیتم هست و `justify-content: center` واقعاً
 * کار می‌کند. `flex-basis: 100%/6` همان عرض ستون گرید را می‌دهد، پس با شش
 * کتاب هیچ چیزی عوض نمی‌شود.
 *
 * ⚠️ فاصله همچنان صفر می‌ماند تا تخته‌های قفسه به هم بچسبند و خط پیوسته
 * بسازند — همان قاعده‌ی بند «قفسه».
 *
 * فقط دسکتاپ: روی موبایل ردیف‌ها پرند و ترتیب فعلی درست است.
 */
@media (min-width: 900px) {
	.il-lib__related .il-lib__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: end;
	}

	.il-lib__related .il-lib__card { flex: 0 0 calc(100% / 6); }
}