/**
 * چیدمان آرشیو فروشگاه.
 *
 * ساختار از ماهدیس‌وب: محتوا و یک سایدبارِ فیلتر کنارش. آن‌ها گرید
 * بوت‌استرپ دارند و اینجا CSS Grid است — همان نتیجه بدون افزودنِ
 * بوت‌استرپ به قالب.
 */

.nb-shop__row {
	display: grid;
	gap: var( --nb-gutter, 20px );
	grid-template-columns: 1fr;
}

/*
 * این کلاس یعنی ستون واقعاً محتوا دارد — یا پنلِ فیلتر یا ویجت.
 *
 * جای ستون‌ها صریح داده می‌شود چون ترتیبِ DOM «محتوا، بعد کناری» است
 * ولی در فروشگاه‌های فارسی فیلتر سمتِ راست می‌نشیند. در گریدِ
 * راست‌چین، ستونِ ۱ همان راست است.
 */
@media ( min-width: 992px ) {

	.nb-shop__row--sidebar {
		grid-template-columns: 280px minmax( 0, 1fr );
		align-items: start;
	}

	/*
	 * سطر هم صریح داده می‌شود، نه فقط ستون.
	 *
	 * ترتیبِ DOM «محتوا، بعد کناری» است. وقتی محتوا صراحتاً ستونِ ۲ را
	 * می‌گیرد، مکان‌نمای گرید از ستونِ ۱ رد شده و آیتمِ بعدی که ستونِ ۱
	 * می‌خواهد به سطرِ *دوم* می‌افتد — یعنی سایدبار زیرِ محصولات، در
	 * y=۱۷۶۵ (اندازه‌گیری‌شده). با تعیینِ صریحِ سطر، هر دو در سطرِ یک
	 * می‌نشینند.
	 */
	.nb-shop__row--sidebar .nb-shop__side {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 20px;
	}

	.nb-shop__row--sidebar .nb-shop__content {
		grid-column: 2;
		grid-row: 1;
	}
}

.nb-shop__content {
	min-width: 0; /* وگرنه شبکه‌ی محصولات ستون را پهن می‌کند */
}

.nb-shop__head {
	margin-bottom: 14px;
}

.woocommerce-products-header__title {
	font-size: var( --nb-h2, 28px );
	margin: 0;
	color: var( --nb-text );
}

/* ---------------------------------------------------------- سایدبار */

.nb-shop__side {
	min-width: 0;
}

.nb-shop__side .nb-widget {
	background: var( --nb-surface );
	border: 1px solid var( --nb-border );
	border-radius: var( --nb-radius, 10px );
	padding: 16px;
	margin-bottom: var( --nb-gutter, 20px );
	color: var( --nb-text );
}

.nb-shop__side .nb-widget:last-child {
	margin-bottom: 0;
}

.nb-shop__side .nb-widget__title,
.nb-shop__side .widget-title,
.nb-shop__side .widgettitle {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var( --nb-text );
}

.nb-shop__side .nb-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nb-shop__side .nb-widget li {
	padding: 5px 0;
}

/*
 * رنگ لینک‌ها صریح.
 *
 * ویجت‌های ووکامرس رنگِ خودشان را نمی‌گذارند و روی زمینه‌ی تیره‌ی این
 * قالب، رنگِ ارثیِ مرورگر خوانا نیست.
 */
.nb-shop__side .nb-widget a {
	color: var( --nb-text );
	text-decoration: none;
}

.nb-shop__side .nb-widget a:hover {
	color: var( --nb-accent );
}

.nb-shop__side .nb-widget .count {
	color: var( --nb-text-muted );
	font-size: 12px;
}

/* جست‌وجوی محصول */

.nb-shop__side .woocommerce-product-search {
	display: flex;
	gap: 8px;
}

.nb-shop__side .woocommerce-product-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	background: var( --nb-bg );
	border: 1px solid var( --nb-border );
	border-radius: var( --nb-radius-sm, 8px );
	color: var( --nb-text );
	padding: 8px 10px;
	font: inherit;
	/* روی موبایل زیر ۱۶ پیکسل باعث زوم خودکار می‌شود */
	font-size: 16px;
}

.nb-shop__side .woocommerce-product-search button {
	background: var( --nb-accent );
	color: var( --nb-acc-fg, #fff );
	border: 0;
	border-radius: var( --nb-radius-sm, 8px );
	padding: 8px 14px;
	cursor: pointer;
	font: inherit;
}

/* فیلتر قیمت */

.nb-shop__side .price_slider_wrapper .ui-slider {
	background: var( --nb-border );
	border-radius: 999px;
	height: 4px;
	position: relative;
	margin: 14px 0;
}

.nb-shop__side .price_slider_wrapper .ui-slider-range {
	background: var( --nb-accent );
	border-radius: 999px;
	height: 100%;
	position: absolute;
}

.nb-shop__side .price_slider_wrapper .ui-slider-handle {
	background: var( --nb-accent );
	border: 2px solid var( --nb-surface );
	border-radius: 50%;
	width: 16px;
	height: 16px;
	position: absolute;
	top: -6px;
	cursor: pointer;
}

.nb-shop__side .price_slider_amount .button {
	background: var( --nb-accent );
	color: var( --nb-acc-fg, #fff );
	border: 0;
	border-radius: var( --nb-radius-sm, 8px );
	padding: 6px 14px;
	cursor: pointer;
	font: inherit;
}

.nb-shop__side .price_slider_amount .price_label {
	color: var( --nb-text-muted );
	font-size: 13px;
}

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

.nb-shop__side .woocommerce-widget-layered-nav-list__item.chosen a,
.nb-shop__side .wc-layered-nav-term.chosen a {
	color: var( --nb-accent );
	font-weight: 700;
}

/* شمارش نتایج و مرتب‌سازی */

.woocommerce-result-count {
	color: var( --nb-text-muted );
}

.woocommerce-ordering select {
	background: var( --nb-surface );
	border: 1px solid var( --nb-border );
	border-radius: var( --nb-radius-sm, 8px );
	color: var( --nb-text );
	padding: 7px 10px;
	font: inherit;
}


/* ==========================================================================
   صفحه‌بندی
   ==========================================================================
   استایلِ خامِ ووکامرس بود: چند مستطیلِ چسبیده با حاشیه‌ی خاکستری و
   صفحه‌ی فعلی سفیدِ توپُر. روی صفحه‌ی تیره هم ناخوانا بود هم بیگانه.
   ========================================================================== */

.woocommerce-pagination {
	margin: 28px 0 8px;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;

	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 38px;
	height: 38px;
	padding: 0 10px;

	/*
	 * قرص، نه مربع.
	 *
	 * نسخه‌ی اول مربع‌های حاشیه‌دار بود و مالک گفت جالب نشد — کنارِ
	 * چیپ‌ها و دکمه‌های گردِ بقیه‌ی سایت، یک جزیره‌ی زاویه‌دار بود.
	 * حاشیه هم برداشته شد؛ زمینه‌ی روشن‌تر خودش مرز را نشان می‌دهد.
	 */
	border: 0;
	border-radius: 999px;
	background: var( --nb-surface-alt, #1a2033 );
	color: var( --nb-text-muted, #98a2b3 );

	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;

	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
	background: var( --nb-surface, #131829 );
	color: var( --nb-text, #ededed );
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers.current {
	background: var( --nb-accent, #720eec );
	color: var( --nb-acc-fg, #fff );
	box-shadow: 0 4px 14px -4px var( --nb-accent, #720eec );
}

/* سه‌نقطه‌ی میانی دکمه نیست، پس قاب هم نمی‌خواهد. */
.woocommerce nav.woocommerce-pagination ul li .page-numbers.dots {
	min-width: auto;
	padding: 0 4px;
	background: none;
}

/*
 * فلش‌های قبلی/بعدی روی صفحه‌ی راست‌چین باید برعکس شوند.
 *
 * ووکامرس کاراکترِ ← و → را خودش چاپ می‌کند و در RTL جهتشان درست است،
 * ولی عرضشان با شماره‌ها یکی نیست و ردیف را ناهموار می‌کند.
 */
.woocommerce nav.woocommerce-pagination ul li .page-numbers.next,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.prev {
	min-width: 38px;
	padding: 0;
	font-size: 15px;
}

@media ( max-width: 480px ) {

	/*
	 * روی گوشی شماره‌ها کوچک‌تر می‌شوند تا هفت صفحه در یک ردیف جا شود
	 * و به خطِ دوم نیفتد.
	 */
	.woocommerce nav.woocommerce-pagination ul li .page-numbers {
		min-width: 34px;
		height: 34px;
		padding: 0 7px;
		font-size: 12.5px;
	}

	.woocommerce nav.woocommerce-pagination ul.page-numbers {
		gap: 5px;
	}
}


/* ==========================================================================
   توضیحاتِ دسته‌بندی
   ==========================================================================
   هیچ استایلی نداشت، برای همین یک دیوارِ متنِ تمام‌عرض بود که روی گوشی
   چند صفحه پیش از اولین محصول اسکرول می‌خواست.

   ساختارِ واقعی را NB_T_Term_Intro هنگامِ نمایش می‌سازد (پرسش‌ها <h3>
   می‌شوند و ردیف‌های «برچسب: مقدار» یک <ul>)، چون در محتوای ذخیره‌شده
   همه‌چیز با <br> از هم جدا شده و پرسش‌ها اصلاً تگ ندارند.
   ========================================================================== */

/*
 * بدون max-width.
 *
 * اول ۷۴ کاراکتر گذاشته بودم که برای خوانایی خوب است، ولی ستونِ محتوای
 * فروشگاه از آن پهن‌تر است و نتیجه یک نوارِ باریکِ متن با نیمِ صفحه‌ی
 * خالی کنارش شد. ستون خودش به‌اندازه‌ی کافی باریک است.
 */
.term-description {
	margin: 0 0 26px;
	color: var( --nb-text-muted, #98a2b3 );
	font-size: 14px;
	line-height: 2.05;
}

.term-description p {
	margin: 0 0 14px;
}

.term-description p:last-child {
	margin-bottom: 0;
}

/* ---- پرسش‌ها ---- */

/*
 * همان نشانِ توضیحاتِ محصول — خطِ سرخِ کناری — ولی یک درجه کوچک‌تر،
 * چون اینجا بالای شبکه‌ی محصول است و نباید با عنوانِ خودِ دسته رقابت کند.
 */
.nb-ti__q {
	margin: 24px 0 10px;
	padding-inline-start: 11px;
	border-inline-start: 3px solid #ee273a;

	color: var( --nb-text, #ededed );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
}

.nb-ti__q:first-child {
	margin-top: 0;
}

/* ---- ردیف‌های «برچسب: مقدار» ---- */

.nb-ti__list {
	margin: 0 0 14px;
	padding: 12px 14px;
	list-style: none;

	border: 1px solid var( --nb-border, #242c42 );
	border-radius: var( --nb-radius-sm, 10px );
	background: var( --nb-surface, #131829 );
}

/*
 * فلکس و نه گرید با ستونِ ۱fr.
 *
 * با گرید، مقدار یک ستونِ تمام‌عرض می‌گرفت و متنش در RTL به لبه‌ی دور
 * می‌چسبید — یعنی وسطِ هر ردیف یک فاصله‌ی خالیِ بزرگ می‌افتاد. با فلکس
 * مقدار دقیقاً کنارِ برچسب شروع می‌شود.
 */
.nb-ti__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 9px;

	padding: 7px 0;
	border-bottom: 1px solid var( --nb-border, #242c42 );
}

.nb-ti__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.nb-ti__row:first-child {
	padding-top: 0;
}

.nb-ti__k {
	flex: 0 0 auto;
	color: var( --nb-text, #ededed );
	font-weight: 700;
}

.nb-ti__k::after {
	content: ":";
	margin-inline-start: 1px;
	opacity: 0.45;
}

.nb-ti__v {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.9;
}

/*
 * روی گوشی دو ستون جا نمی‌شود — برچسب‌ها بلندند و مقدارها بلندتر، و
 * ستونِ ثابت هر دو را می‌شکست. اینجا برچسب بالای مقدار می‌نشیند.
 */
@media ( max-width: 575px ) {

	.term-description {
		font-size: 13.5px;
		line-height: 1.95;
	}

	.nb-ti__row {
		gap: 2px 7px;
	}

	.nb-ti__k {
		font-size: 13px;
	}
}