/**
 * «محصولات مرتبط» و «بازدیدهای اخیر» — فقط عنوان و ظرف؛ کارت و ریل همان
 * slider.css است.
 */

.nb-rp__head {
	display: flex;
	align-items: center;
	margin: 0 0 16px;
}

.nb-rp__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	color: var( --nb-text, #ededed );
}

/* نشانِ گرادیانیِ کنارِ عنوان — همان که عنوان‌های حساب کاربری دارند. */
.nb-rp-dot-yes .nb-rp__title::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: linear-gradient( 135deg, var( --nb-accent, #720eec ) 0%, #5b5bf6 55%, #3b82f6 100% );
	box-shadow: 0 0 12px color-mix( in srgb, var( --nb-accent, #720eec ) 70%, transparent );
}

/*
 * لیست (۰.۷۴.۴): همان کارت‌ها زیرِ هم. ریلِ slider.css یک شبکه‌ی ستونیِ
 * پیمایشی است؛ این‌جا به ردیف برمی‌گردد و پیمایش و «دستِ کشیدن» می‌رود.
 */
.nb-ps[data-layout="list"] .nb-ps__track {
	grid-auto-flow: row;
	grid-auto-columns: auto;
	grid-template-columns: repeat( var( --nb-rp-list-cols, 1 ), minmax( 0, 1fr ) );
	overflow: visible;
	scroll-snap-type: none;
	padding-bottom: 0;
	cursor: auto;
}

/*
 * ظرفِ «بازدیدهای اخیر» تا کارت نگرفته جایی نمی‌گیرد (داخلش فقط <template>
 * است). is-instant: از حافظه‌ی مرورگر، پیش از اولین رنگ‌آمیزی — بی‌انیمیشن.
 * is-ready: از سرور رسیده — آرام ظاهر می‌شود.
 */
.nb-rv:not( .is-ready ):not( .is-instant ) {
	display: none;
}

.nb-rv.is-ready {
	animation: nb-rv-in .45s ease both;
}

@keyframes nb-rv-in {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.nb-rv.is-ready {
		animation: none;
	}
}