/**
 * Carsoft Product Lineup
 *
 * بازسازی بخش «Explore the lineup» صفحهٔ آیفون اپل.
 *
 * همهٔ مقادیر عددی از CSS خود اپل برداشته شده‌اند
 * (apple.com/v/iphone/home/cj/built/styles/overview.built.css) و در کامنت هر
 * بخش نام متغیر اصلی آمده تا بعداً قابل ردیابی باشد.
 *
 * حرکت کروسل کاملاً بر عهدهٔ scroll-snap بومی مرورگر است؛ JS فقط فلش‌ها را
 * مدیریت می‌کند. فاصله‌ها با logical properties نوشته شده‌اند تا در RTL خودکار
 * درست بچینند.
 *
 * فونت عمداً تعیین نشده: روی سایت فارسی باید فونت قالب به ارث برسد. فقط اندازه،
 * وزن، ارتفاع سطر و tracking از اپل گرفته شده — و tracking در RTL صفر می‌شود،
 * دقیقاً همان کاری که خود اپل برای زبان‌های عربی می‌کند.
 */

/* =========================================================================
 * توکن‌ها
 * ====================================================================== */

.cpl-lineup {
	/* چیدمان — از .scroll-gallery اپل */
	--cpl-max: 1260px;          /* --global-content-max-width */
	--cpl-content: 87.5%;       /* --responsive-content-width */
	--cpl-clamped: min(var(--cpl-max), var(--cpl-content));
	--cpl-gutter: calc(50% - var(--cpl-clamped) / 2);

	/*
	 * کارت — از .product-tile اپل
	 *
	 * سه عرض جدا نگه داشته می‌شود و --cpl-tile در هر نقطهٔ شکست از یکی از
	 * آن‌ها پر می‌شود. عمداً --cpl-tile هرگز inline ست نمی‌شود: استایل inline
	 * بر هر قاعده‌ای در فایل CSS غلبه می‌کند و آن‌وقت مدیاکوئری‌ها بی‌اثر
	 * می‌شدند و کارت روی موبایل هم ۳۷۲ پیکسل می‌ماند.
	 */
	--cpl-tile-lg: 372px;       /* --product-tile-width */
	--cpl-tile-md: 344px;
	--cpl-tile-sm: 260px;
	--cpl-tile: var(--cpl-tile-lg);

	/*
	 * اندازهٔ عنوان کارت. مقدار اپل ۲۸ / ۲۴ / ۲۱ است ولی برای متن لاتین تنظیم
	 * شده؛ نام محصول فارسی در همان اندازه چشمی درشت‌تر می‌نشیند و روی کارت
	 * ۳۷۲ پیکسلی دو سطر می‌شود. پیش‌فرض اینجا ۱۸ است و از بیلدر قابل تغییر.
	 *
	 * فقط --cpl-title-lg از بیرون ست می‌شود؛ دو اندازهٔ کوچک‌تر از رویش حساب
	 * می‌شوند تا با هر مقداری هماهنگ بمانند. نسبت‌ها (۰.۹۲ و ۰.۸۵) از اپل
	 * (۰.۸۶ و ۰.۷۵) صاف‌ترند: خط فارسی در اندازه‌های کوچک زودتر از لاتین
	 * ناخوانا می‌شود، پس نباید به همان شیب کوچک شود.
	 */
	--cpl-title-lg: 18px;
	--cpl-title: var(--cpl-title-lg);
	--cpl-pad: 28px;            /* --product-tile-padding */
	--cpl-gap: 20px;
	--cpl-radius: 28px;
	--cpl-ratio: 372 / 395;     /* نسبت ابعاد تصویرهای select خود اپل */

	/* ناوبری — از .scroll-gallery-paddlenav اپل */
	--cpl-nav-size: 36px;       /* --paddlenav-height */
	--cpl-nav-pad: 36px;        /* html .gallery .scroll-gallery-paddlenav */
	--cpl-nav-reserve: 48px;    /* --paddlenav-padding روی خود گالری */

	/* رنگ — تم روشن */
	--cpl-fg: rgb(29, 29, 31);          /* --sk-body-text-color */
	--cpl-link: #06c;
	--cpl-link-hover: #06c;
	--cpl-btn-bg: rgb(0, 113, 227);
	--cpl-btn-bg-hover: #0076df;
	--cpl-btn-bg-active: #006edb;
	--cpl-btn-fg: rgb(255, 255, 255);
	--cpl-badge-bg: rgba(245, 99, 0, 0.1);
	--cpl-badge-fg: rgb(182, 68, 0);
	--cpl-focus: #0071e3;

	/* سوآچ رنگ — از .colorindicator اپل */
	--cpl-sw-plate: rgb(245, 245, 247);
	--cpl-sw-ring: conic-gradient(
		from 270deg,
		rgba(0, 0, 0, 0.08) 0deg,
		rgba(0, 0, 0, 0.48) 64.8deg,
		rgba(0, 0, 0, 0.48) 115.2deg,
		rgba(0, 0, 0, 0.08) 180deg,
		rgba(0, 0, 0, 0) 208.8deg,
		rgba(0, 0, 0, 0) 331.2deg,
		rgba(0, 0, 0, 0.08) 360deg
	);

	/* فلش‌ها — از .paddlenav-alpha اپل */
	--cpl-nav-bg: rgba(210, 210, 215, 0.64);
	--cpl-nav-bg-hover: rgba(223, 223, 227, 0.6976);
	--cpl-nav-bg-active: rgba(193, 193, 198, 0.6544);
	--cpl-nav-fg: rgba(0, 0, 0, 0.56);
	--cpl-nav-fg-hover: rgba(0, 0, 0, 0.64);

	position: relative;
	color: var(--cpl-fg);
}

/* تم تیره — مقادیر .theme-dark خود اپل */
.cpl-lineup--dark {
	--cpl-fg: rgb(245, 245, 247);
	--cpl-link: #2997ff;
	--cpl-link-hover: #2997ff;
	--cpl-badge-bg: rgba(245, 99, 0, 0.2);
	--cpl-badge-fg: rgb(255, 121, 27);

	--cpl-sw-plate: rgb(29, 29, 31);
	--cpl-sw-ring: conic-gradient(
		from 90deg,
		rgba(255, 255, 255, 0.08) 0deg,
		rgba(255, 255, 255, 0.48) 64.8deg,
		rgba(255, 255, 255, 0.48) 115.2deg,
		rgba(255, 255, 255, 0.08) 180deg,
		rgba(255, 255, 255, 0) 208.8deg,
		rgba(255, 255, 255, 0) 331.2deg,
		rgba(255, 255, 255, 0.08) 360deg
	);

	--cpl-nav-bg: rgba(66, 66, 69, 0.72);
	--cpl-nav-bg-hover: rgba(73, 73, 76, 0.7256);
	--cpl-nav-bg-active: rgba(57, 57, 60, 0.7424);
	--cpl-nav-fg: rgba(255, 255, 255, 0.8);
	--cpl-nav-fg-hover: rgb(255, 255, 255);
}

/* =========================================================================
 * تمام‌عرض
 *
 * عرض نوار اسکرول را JS در --cpl-sbw می‌گذارد. بدون آن، 100vw روی ویندوز
 * به‌اندازهٔ پهنای اسکرول‌بار از صفحه بیرون می‌زند و کل صفحه افقی می‌لغزد.
 * ====================================================================== */

.cpl-lineup--stretch {
	width: calc(100vw - var(--cpl-sbw, 0px));
	max-width: none;
	margin-inline: calc(50% - (100vw - var(--cpl-sbw, 0px)) / 2);
}

/* =========================================================================
 * سربرگ بخش — از .section-header اپل
 * ====================================================================== */

.cpl-header {
	width: var(--cpl-clamped);
	margin-inline: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	column-gap: 120px;
	row-gap: 20px;
	padding-bottom: 80px;
}

.cpl-header__title {
	/* .typography-section-header-headline */
	margin: 0;
	flex-grow: 1;
	max-width: 75%;
	font-size: 56px;
	line-height: 1.0714285714;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--cpl-fg);
}

.cpl-header__cta {
	/* .section-header-cta-list-wrapper */
	padding-bottom: 4px;
	flex-shrink: 0;
}

/* =========================================================================
 * گالری و ریل اسکرول — از .scroll-gallery اپل
 * ====================================================================== */

.cpl-gallery {
	position: relative;
	/* جای فلش‌ها زیر کارت‌ها رزرو می‌شود، حتی وقتی پنهان‌اند. */
	padding-bottom: calc(var(--cpl-nav-reserve) + var(--cpl-nav-size));
}

.cpl-gallery--no-nav,
.cpl-gallery--fits {
	padding-bottom: 0;
}

.cpl-scroller {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--cpl-gutter);
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/*
	 * پدینگ و مارجین قرینه: فضای بالا و پایین برای حلقهٔ فوکوس و بزرگ‌شدن
	 * تصویر در هاور باز می‌شود، بی آنکه ارتفاع ظاهری تغییر کند. عیناً از اپل.
	 */
	padding: 10px 0 30px;
	margin: -10px 0 -30px;

	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cpl-scroller::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.cpl-scroller:focus-visible {
	outline: 2px solid var(--cpl-focus);
	outline-offset: -2px;
}

/*
 * پدینگ افقی این لایه همان «حاشیهٔ کناری» است: کارت اول از لبه فاصله می‌گیرد و
 * کارت آخر هم می‌تواند تا جای خودش برسد. min-width: fit-content اجازه می‌دهد
 * مجموع کارت‌ها از عرض صفحه بیشتر شود.
 */
.cpl-viewport {
	width: var(--cpl-clamped);
	min-width: -moz-fit-content;
	min-width: fit-content;
	padding: 0 var(--cpl-gutter);
	box-sizing: content-box;
}

/* =========================================================================
 * ردیف کارت‌ها
 *
 * گرید با سطرهای نام‌دار و subgrid روی هر کارت: عنوان‌ها، توضیح‌ها و دکمه‌های
 * همهٔ کارت‌ها روی یک خط می‌نشینند، حتی اگر طول متن‌ها یکی نباشد. مرورگر قدیمی
 * که subgrid ندارد فقط این هم‌ترازی را از دست می‌دهد؛ چیدمان سالم می‌ماند.
 * ====================================================================== */

.cpl-set {
	display: grid;
	grid-auto-flow: column;
	column-gap: var(--cpl-gap);
	justify-content: start;
	grid-template-rows:
		[image] auto
		[swatches] auto
		[badge] auto
		[headline] auto
		[tagline] auto
		[price] auto
		[ctas] auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* وقتی همهٔ کارت‌ها در عرض صفحه جا می‌شوند، وسط‌چین بهتر است. */
.cpl-gallery--fits .cpl-set {
	justify-content: center;
}

.cpl-tile {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / -1;
	width: var(--cpl-tile);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	scroll-snap-align: start;
}

/* آخرین کارت به لبهٔ انتها می‌چسبد تا حاشیهٔ انتهایی هم دیده شود. */
.cpl-tile:last-child {
	scroll-snap-align: start end;
}

.cpl-tile__title,
.cpl-tile__tagline,
.cpl-tile__price,
.cpl-tile__ctas {
	padding-inline: var(--cpl-pad);
}

/* ---------- تصویر ---------- */

.cpl-tile__media {
	grid-row: image;
	display: block;
	width: 100%;
	margin: 0 0 24px;
	color: inherit;
	text-decoration: none;
}

.cpl-tile__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--cpl-ratio);
	object-fit: cover;
	border-radius: var(--cpl-radius);
	transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1);
}

a.cpl-tile__media:hover .cpl-tile__image,
a.cpl-tile__media:focus-visible .cpl-tile__image {
	transform: scale(1.0161);
}

a.cpl-tile__media:focus-visible {
	outline: 2px solid var(--cpl-focus);
	outline-offset: 3px;
	border-radius: var(--cpl-radius);
}

/* ---------- سوآچ رنگ — از .colorindicator اپل ---------- */

.cpl-swatches {
	grid-row: swatches;
	height: 14px;
	margin: 0 0 27px;
}

.cpl-swatches__items {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: -7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpl-swatch {
	--cpl-sw-size: 12px;
	--cpl-sw-border: 1px;
	--cpl-sw-stop: calc(var(--cpl-sw-size) / 2 - 0.5px);

	display: block;
	position: relative;
	width: var(--cpl-sw-size);
	height: var(--cpl-sw-size);
	margin: calc(var(--cpl-sw-border) * -1) 3px;
	border-radius: 50%;
	background: var(--cpl-finish, var(--cpl-sw-plate));
}

/*
 * حلقهٔ دور سوآچ: یک conic-gradient که با ماسک شعاعی فقط لبه‌اش دیده می‌شود.
 * همین باعث می‌شود سوآچ سفید روی زمینهٔ سفید هم گم نشود.
 */
.cpl-swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	border-radius: inherit;
	background-image: var(--cpl-sw-ring);
	-webkit-mask-image: radial-gradient(
		circle at 50% 50%,
		transparent calc(var(--cpl-sw-stop) - var(--cpl-sw-border)),
		#000 var(--cpl-sw-stop)
	);
	mask-image: radial-gradient(
		circle at 50% 50%,
		transparent calc(var(--cpl-sw-stop) - var(--cpl-sw-border)),
		#000 var(--cpl-sw-stop)
	);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* ---------- برچسب ---------- */

.cpl-tile__badge {
	grid-row: badge;
	margin: 0 0 9px;
	white-space: normal;
}

.cpl-badge {
	display: inline-block;
	box-sizing: border-box;
	padding: 6px 9px;
	border-radius: 6px;
	background: var(--cpl-badge-bg);
	color: var(--cpl-badge-fg);
	font-size: 12px;
	line-height: 1.3333733333;
	font-weight: 400;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* ---------- متن‌ها ---------- */

.cpl-tile__title {
	/* .typography-product-tile-headline، با اندازهٔ قابل‌تنظیم */
	grid-row: headline;
	margin: 0;
	font-size: var(--cpl-title);
	/* نام محصول فارسی معمولاً دو سطر می‌شود؛ کمی فاصلهٔ سطر بیشتر لازم دارد. */
	line-height: 1.28;
	font-weight: 600;
	letter-spacing: 0.007em;
	color: var(--cpl-fg);
}

.cpl-tile__tagline {
	/* .typography-product-tile-positioning */
	grid-row: tagline;
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.4705882353;
	font-weight: 400;
	letter-spacing: -0.022em;
	color: var(--cpl-fg);
}

.cpl-tile__price {
	/* .typography-product-tile-subheading */
	grid-row: price;
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.4705882353;
	font-weight: 600;
	letter-spacing: -0.022em;
	color: var(--cpl-fg);
}

/* ---------- دکمه‌ها ---------- */

.cpl-tile__ctas {
	grid-row: ctas;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 34px;
	margin-top: 40px;
}

.cpl-btn {
	/* .button اپل با اندازهٔ ≥735px */
	display: inline-block;
	box-sizing: border-box;
	flex-shrink: 0;
	padding-block: 11px;  /* 12px منهای ضخامت حاشیه */
	padding-inline: 21px; /* 22px منهای ضخامت حاشیه */
	min-width: 26px;      /* 70px منهای دو برابر پدینگ */
	border: 1px solid transparent;
	border-radius: 980px;
	background: var(--cpl-btn-bg);
	color: var(--cpl-btn-fg);
	font-size: 17px;
	line-height: 1.1764805882;
	font-weight: 400;
	letter-spacing: -0.022em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.1s linear;
}

.cpl-btn:hover {
	background: var(--cpl-btn-bg-hover);
	color: var(--cpl-btn-fg);
	text-decoration: none;
}

.cpl-btn:active {
	background: var(--cpl-btn-bg-active);
	color: var(--cpl-btn-fg);
}

.cpl-btn:focus-visible {
	outline: 2px solid var(--cpl-focus);
	outline-offset: 3px;
}

/* لینک متنی با شِوران — همان «Buy ›» اپل */
.cpl-more {
	display: inline-flex;
	align-items: center;
	gap: 0.24em;
	flex-shrink: 0;
	color: var(--cpl-link);
	font-size: 17px;
	line-height: 1.1764805882;
	font-weight: 400;
	letter-spacing: -0.022em;
	text-decoration: none;
}

.cpl-more:hover {
	color: var(--cpl-link-hover);
}

.cpl-more:hover .cpl-more__text {
	text-decoration: underline;
}

.cpl-more:focus-visible {
	outline: 2px solid var(--cpl-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.cpl-header__cta .cpl-more {
	/* .typography-section-header-link */
	line-height: 1.4705882353;
}

/*
 * شِوران لینک — برخلاف مثلث پخش، این یکی *باید* در RTL آینه شود، چون جهت
 * «ادامه» را نشان می‌دهد نه یک شکل ثابت.
 */
.cpl-chev {
	width: 0.42em;
	height: 0.72em;
	flex-shrink: 0;
	overflow: visible;
}

[dir="rtl"] .cpl-chev {
	transform: scaleX(-1);
}

/* =========================================================================
 * فلش‌های ناوبری — از .scroll-gallery-paddlenav و .paddlenav-alpha اپل
 *
 * موقعیت عمودی از جای طبیعی خودش می‌آید (بدون top/bottom)، یعنی درست زیر ریل
 * می‌نشیند و با تغییر ارتفاع کارت‌ها همراه می‌شود.
 * ====================================================================== */

.cpl-paddlenav {
	position: absolute;
	inset-inline-start: var(--cpl-gutter);
	width: var(--cpl-clamped);
	height: var(--cpl-nav-size);
	padding-top: var(--cpl-nav-pad);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	transition: opacity 0.2s ease-out;
	box-sizing: content-box;
}

.cpl-gallery--nav-center .cpl-paddlenav {
	justify-content: center;
}

.cpl-gallery--nav-start .cpl-paddlenav {
	justify-content: flex-start;
}

/* display:flex بر خاصیت hidden غلبه می‌کند، پس صریح خاموشش می‌کنیم. */
.cpl-paddlenav[hidden] {
	display: none;
}

.cpl-arrow {
	width: var(--cpl-nav-size);
	height: var(--cpl-nav-size);
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: var(--cpl-nav-size);
	background: var(--cpl-nav-bg);
	overflow: hidden;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.1s linear, opacity 0.1s linear;
}

.cpl-arrow svg {
	display: block;
	width: var(--cpl-nav-size);
	height: var(--cpl-nav-size);
}

.cpl-arrow svg path {
	fill: var(--cpl-nav-fg);
	transition: fill 0.1s linear;
}

/* در RTL «قبلی» به سمت راست است. */
[dir="rtl"] .cpl-arrow svg {
	transform: scaleX(-1);
}

.cpl-arrow:hover {
	background: var(--cpl-nav-bg-hover);
}

.cpl-arrow:hover svg path {
	fill: var(--cpl-nav-fg-hover);
}

.cpl-arrow:active {
	background: var(--cpl-nav-bg-active);
}

.cpl-arrow[disabled] {
	pointer-events: none;
	opacity: 0.42;
}

.cpl-arrow:focus-visible {
	outline: 2px solid var(--cpl-focus);
	outline-offset: 3px;
}

/* =========================================================================
 * چینش «ابتدای سطر» در دسکتاپ
 * ====================================================================== */

.cpl-lineup--align-start .cpl-tile {
	text-align: start;
}

.cpl-lineup--align-start .cpl-tile__ctas {
	justify-content: flex-start;
}

.cpl-lineup--align-start .cpl-swatches__items {
	justify-content: flex-start;
}

.cpl-lineup--align-start .cpl-tile__title,
.cpl-lineup--align-start .cpl-tile__tagline,
.cpl-lineup--align-start .cpl-tile__price,
.cpl-lineup--align-start .cpl-tile__ctas {
	padding-inline-start: 0;
}

/* =========================================================================
 * ابزار
 * ====================================================================== */

.cpl-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * ریسپانسیو — نقاط شکست خود اپل: ۱۰۶۸ و ۷۳۴ پیکسل
 * ====================================================================== */

@media (max-width: 1068px) {

	.cpl-lineup {
		--cpl-tile: var(--cpl-tile-md);
		--cpl-title: calc(var(--cpl-title-lg) * 0.92);
		--cpl-pad: 24px;
		--cpl-nav-reserve: 44px;
	}

	.cpl-header {
		column-gap: 80px;
		padding-bottom: 64px;
	}

	.cpl-header__title {
		font-size: 48px;
		line-height: 1.0834933333;
		letter-spacing: -0.003em;
	}

	.cpl-tile__title {
		letter-spacing: 0.009em;
	}

	.cpl-tile__media {
		margin-bottom: 20px;
	}
}

@media (max-width: 734px) {

	.cpl-lineup {
		--cpl-tile: var(--cpl-tile-sm);
		--cpl-title: calc(var(--cpl-title-lg) * 0.85);
		--cpl-pad: 28px;
		--cpl-nav-pad: 24px;
		--cpl-nav-reserve: 40px;
	}

	/* سربرگ زیر هم می‌رود */
	.cpl-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding-bottom: 48px;
	}

	.cpl-header__title {
		max-width: none;
		width: 100%;
		font-size: 28px;
		line-height: 1.1428571429;
		letter-spacing: 0.007em;
	}

	.cpl-header__cta {
		padding-bottom: 2px;
	}

	.cpl-header__cta .cpl-more {
		font-size: 14px;
		line-height: 1.4285914286;
		letter-spacing: -0.016em;
	}

	/*
	 * در موبایل متن کارت راست‌چین (ابتدای سطر) می‌شود و پدینگ ابتدایی برداشته
	 * می‌شود تا متن با لبهٔ تصویر یکی شود — دقیقاً رفتار خود اپل.
	 */
	.cpl-tile {
		text-align: start;
	}

	.cpl-tile__title,
	.cpl-tile__tagline,
	.cpl-tile__price,
	.cpl-tile__ctas {
		padding-inline-start: 0;
		min-width: 0;
	}

	.cpl-tile__ctas {
		justify-content: flex-start;
		column-gap: 27px;
		margin-top: 39px;
	}

	.cpl-swatches {
		padding-inline-end: var(--cpl-pad);
	}

	.cpl-swatches__items {
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap: 4px;
		margin-inline: -3px;
	}

	.cpl-tile__media {
		margin-bottom: 35px;
	}

	.cpl-tile__title {
		line-height: 1.3;
		letter-spacing: 0.011em;
	}

	.cpl-tile__tagline,
	.cpl-tile__price {
		margin-top: 12px;
		font-size: 14px;
		line-height: 1.4285914286;
		letter-spacing: -0.016em;
	}

	.cpl-tile__badge {
		margin-bottom: 8px;
	}

	.cpl-btn,
	.cpl-tile__ctas .cpl-more {
		font-size: 14px;
		line-height: 1.2857742857;
		letter-spacing: -0.016em;
	}

	.cpl-btn {
		padding-block: 8px;   /* 9px منهای حاشیه */
		padding-inline: 15px; /* 16px منهای حاشیه */
		min-width: 28px;
	}
}

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

[dir="rtl"] .cpl-header__title,
[dir="rtl"] .cpl-tile__title,
[dir="rtl"] .cpl-tile__tagline,
[dir="rtl"] .cpl-tile__price,
[dir="rtl"] .cpl-badge,
[dir="rtl"] .cpl-btn,
[dir="rtl"] .cpl-more {
	letter-spacing: 0;
}

/* =========================================================================
 * کاهش انیمیشن
 * ====================================================================== */

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

	.cpl-scroller {
		scroll-behavior: auto;
	}

	.cpl-tile__image,
	.cpl-arrow,
	.cpl-arrow svg path,
	.cpl-btn {
		transition: none;
	}

	a.cpl-tile__media:hover .cpl-tile__image,
	a.cpl-tile__media:focus-visible .cpl-tile__image {
		transform: none;
	}
}