@charset "utf-8";
/* =====================================================================
   DLE Market  —  اصلاحات راست‌به‌چپ و یکدستی
   ---------------------------------------------------------------------
   این فایل پس از styles.css و parts.css بارگذاری می‌شود و سه دسته
   مشکل را برطرف می‌کند:

   ۱. کشو سبد خرید در چیدمان راست‌به‌چپ باید به سمت راست پنهان شود،
      نه چپ. (translateX جهت‌آگاه نیست.)

   ۲. هر عنصری که متن فارسی دارد باید direction: rtl باشد. فقط
      قطعه‌های صرفاً لاتین (نسخه، ایمیل، کد، مسیر) داخل .ltr می‌روند.

   ۳. آکولادِ امضای طراحی { } با الگوریتم دوجهته آینه می‌شود. پس از
      قالب برداشته شد و با شبه‌عنصرِ ایزوله در CSS کشیده می‌شود تا
      شکلش پیش‌بینی‌پذیر بماند.
   ===================================================================== */

/* ------------------------------------------ ۱. کشو سبد خرید */

.cart-dw {
	inset-inline-start: auto;
	right: 0;
	left: auto;
	transform: translateX(100%);
	box-shadow: -8px 0 40px -12px rgba(0, 0, 0, .35);
}
.cart-dw.open { transform: translateX(0); }

/* ---------------------------------- ۲. قطعه‌های لاتین ایزوله */

.ltr,
[dir="ltr"],
.mono,
.pc-type i,
.pd-buy__type i,
.cat-card u,
.win__bar em,
.win-tile em,
.hchip u,
.cp-applied b,
.mo-num b,
.ord-head h1 span,
.dl-file .df-name b,
.st-item b,
.side-price input,
.cp-input input {
	direction: ltr;
	unicode-bidi: isolate;
}

/* عناصری که متن فارسی دارند: همیشه راست‌به‌چپ */

.eyebrow,
.pc-type,
.bp__cat,
.pd-buy__type,
.cr-type,
.ft__bar,
.dc-meta,
.fl-meta,
.oi-access,
.cr-meta,
.pc-meta {
	direction: rtl;
	unicode-bidi: normal;
}

/* --------------------------------- ۳. آکولاد امضای طراحی */

/* نشانه بخش‌ها: متن در قالب، آکولاد از CSS */
.eyebrow {
	gap: 6px;
	letter-spacing: 0;
	font-family: 'Vazirmatn', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
}
.eyebrow > b {
	font-family: 'Vazirmatn', sans-serif;
	font-weight: 600;
	color: var(--saffron-d);
	letter-spacing: 0;
}
.band--ink .eyebrow > b { color: var(--saffron); }

.eyebrow::before,
.eyebrow::after {
	font-family: var(--mono);
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	direction: ltr;
	unicode-bidi: isolate;
	opacity: .75;
}
.eyebrow::before { content: '}'; }
.eyebrow::after  { content: '{'; }

/* لوگو */
.logo { gap: 3px; }
.logo::before,
.logo::after {
	font-family: var(--mono);
	font-weight: 400;
	font-size: 21px;
	line-height: 1;
	color: var(--saffron);
	direction: ltr;
	unicode-bidi: isolate;
}
.logo::before { content: '}'; }
.logo::after  { content: '{'; }
.logo i { display: none; }   /* آکولادهای درون‌قالبی حذف می‌شوند */

/* تیتر نوار کنار */
.side-block h4::before {
	content: '}';
	font: 400 15px/1 var(--mono);
	color: var(--saffron);
	direction: ltr;
	unicode-bidi: isolate;
}

/* واترمارک کارت دسته */
.cat-card::after { content: '{'; direction: ltr; unicode-bidi: isolate; }

/* فوتر */
.ft__bar .mono::before { content: '{ '; }
.ft__bar .mono::after  { content: ' }'; }

/* ------------------------------- ۴. یکدستی فاصله بخش‌ها */

.band            { padding: 68px 0; }
.band + .band    { padding-top: 0; }
.band--ink       { padding: 68px 0 !important; }
.band--ink + .band { padding-top: 68px; }
.band--tight     { padding: 68px 0; }
.band--tight + .band--tight { padding-top: 0; }

.sec-head { margin-bottom: 30px; }

/* ----------------------------- ۵. نوع محصول در کارت‌ها */

.pc-type,
.pd-buy__type,
.cr-type {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.pc-type i,
.pd-buy__type i {
	font-style: normal;
	font-family: var(--mono);
	font-size: .92em;
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--line-2);
	color: var(--tx-2);
}
.band--ink .pc-type i { background: rgba(255,255,255,.08); color: var(--tx-d2); }

/* ------------------------------------ ۶. اصلاحات جزئی */

/* قیمت: عدد لاتین با واحد فارسی، بدون شکستن ترتیب */
.pc-price b, .pc-price > span,
.pd-price__now, .cr-price, .oi-price,
.sm-row b, .co-item__p, .mo-total, .as-item b {
	unicode-bidi: isolate;
}

/* شمارش معکوس: خودش LTR است ولی برچسب‌ها فارسی */
.sale-timer { direction: ltr; }
.st-item i { direction: rtl; unicode-bidi: isolate; }

/* فهرست فایل‌ها: متادیتای مخلوط */
.fl-meta, .dc-meta { display: block; }

/* دکمه‌های کارت محصول: متن دکمه در دسکتاپ هم دیده شود */
@media (min-width: 480px) {
	.pc-foot .btn span { display: inline; }
	.pc-foot .btn { padding: 9px 13px; font-size: 12px; }
}

/* تصویر شاخص SVG بدون ابعاد ذاتی */
.pc-thumb img, .bp__th img, .pd-gal img, .dc-thumb img, .cr-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pd-gal img { height: auto; }

/* گالری محصول: نسبت ثابت تا جعبه خالی نماند */
.pd-gal {
	aspect-ratio: 16/10;
	background: var(--ink-2);
}
.pd-gal img { height: 100%; object-fit: cover; }

/* کارت بلاگ در فهرست: تصویر همیشه نسبت ثابت */
.bp__th { aspect-ratio: 16/9; }
.bp--wide .bp__th { aspect-ratio: 4/3; }

/* شبکه بلاگ صفحه اصلی */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }

/* پیوند اجتماعی خالی نمایش داده نشود */
.ft-soc a[href=""], .ft-soc a:not([href]), .cf-socials a[href=""] { display: none; }

/* ------------------------- ۷. هدر روی نمایشگرهای باریک */

.hd__in { gap: 10px; min-width: 0; }
.hd__acts { min-width: 0; flex: 0 0 auto; }
.logo { min-width: 0; white-space: nowrap; }

@media (max-width: 520px) {
	.hd__in { height: 60px; gap: 6px; }
	.logo { font-size: 16px; }
	.logo::before, .logo::after { font-size: 18px; }
	.hd-ico { width: 34px; height: 34px; font-size: 15px; }
	/* دکمه ورود: فقط آیکن */
	.js-login-open { padding: 0; width: 34px; height: 34px; justify-content: center; }
	.js-login-open .lbl { display: none; }
	.hd-user__ava { width: 28px; height: 28px; }
	.auth-pop, .user-pop { width: min(280px, calc(100vw - 24px)); }
}

@media (max-width: 400px) {
	.logo em { display: none; }         /* «مارکت» حذف، «دیتالایف» می‌ماند */
	.hd-search input { font-size: 14px; }
	.hero h1 { font-size: 25px; }
	.hero__stats { gap: 20px; }
	.shop-steps li { flex: 1 1 100%; }
	.shop-steps li a, .shop-steps li span { border-inline-start: 0; border-top: 1px solid var(--line-2); }
	.shop-steps li:first-child a, .shop-steps li:first-child span { border-top: 0; }
}

/* نوار مراحل خرید: در موبایل عمودی نشکند */
@media (max-width: 620px) {
	.shop-steps li a, .shop-steps li span { padding: 13px 8px; font-size: 12.5px; }
	.shop-steps em { font-size: 12px; }
}

/* ---------------- ۸. توکن آکولاد در تیتر قهرمان صفحه */

.hero h1 .tok {
	direction: rtl;
	unicode-bidi: normal;
	font-family: 'Vazirmatn', sans-serif;
	font-weight: 900;
	font-size: 1em;
	color: #fff;
	position: relative;
}
.hero h1 .tok::before,
.hero h1 .tok::after {
	font-family: var(--mono);
	font-weight: 400;
	font-size: .84em;
	color: var(--saffron);
	direction: ltr;
	unicode-bidi: isolate;
}
.hero h1 .tok::before { content: '}'; margin-inline-end: .06em; }
.hero h1 .tok::after  { content: '{'; margin-inline-start: .06em; }
.hero h1 .tok u { text-decoration: none; }

/* =====================================================================
   ۹. جلوگیری از باز شدن ستون‌های گرید به اندازه محتوا
   ---------------------------------------------------------------------
   ستون گرید به‌طور پیش‌فرض auto است و با محتوای پهن (عنوان بلند،
   دکمه بدون شکست خط) از عرض ظرف بیرون می‌زند. با minmax(0,1fr)
   ستون به عرض ظرف مقید و محتوا مجبور به شکستن می‌شود.
   ===================================================================== */

.side,
.shop-side,
.cf-side {
	grid-template-columns: minmax(0, 1fr);
}

.side > *,
.shop-side > *,
.cf-side > *,
.layout > *,
.shop-layout > *,
.cart-grid > *,
.co-grid > *,
.ord-grid > *,
.cf-grid > *,
.prod-grid > *,
.post-grid > *,
.blog-grid > *,
.cat-rail > * {
	min-width: 0;
}

/* محتوای درون نوار کنار باید بشکند، نه سرریز کند */
.side-block, .side-box { overflow-wrap: break-word; }

.mini-prod { min-width: 0; }
.mini-prod > span { min-width: 0; flex: 1; }
.mini-prod b { overflow-wrap: anywhere; }

.side-block .btn,
.side-help .btn,
.pd-buy .btn,
.cart-summary .btn,
.co-side .btn,
.ord-side .btn {
	white-space: normal;
	text-align: center;
}

/* بلوک خرید سریع: قیمت و دکمه در عرض کم هم جا شوند */
.side-block .pd-price { flex-wrap: wrap; gap: 8px; }

/* جدول مشخصات و فایل‌ها در عرض کم */
.specs { overflow-x: auto; }
.files-list li { flex-wrap: wrap; }
.fl-body { min-width: 140px; }

/* ---------------- ۱۰. شمارش معکوس به ترتیب فارسی */

/* روز نخست و در سمت راست قرار بگیرد */
.sale-timer { direction: rtl; }
.st-item b { direction: ltr; unicode-bidi: isolate; }