/*
 * استایل صفحه‌های سایت (فاز ۲): چیزهایی که در فاز ۱ فقط داخل صفحه‌های پیش‌نمایش (previews/phase1-v8) بودند، با همان مقدارها.
 * tokens.css، base.css و theme.css دست نمی‌خورند (پیش‌نمایش phase1-v8 هم از آن‌ها می‌خواند). طراحی کامل صفحه‌ها در فازهای ۳ تا ۵.
 */

/* لوگوی هدر: فایل ۱x (۷۳×۶۴) و ۲x (۱۴۷×۱۲۸) نسبت اندکی متفاوت دارند؛ وقتی مرورگر فایل ۲x را از کش برمی‌داشت (مثلاً بعد از لوگوی فوتر)،
   لوگو ۷۳٫۵ پیکسل می‌شد و کل هدر نیم پیکسل جابه‌جا. نسبت ثابت = همان ظاهر همیشگی پیش‌نمایش فاز ۱ (۷۳ پیکسل). */
.brand__logo { aspect-ratio: 73 / 64; }

/* بردکرامب (ظاهر از base.css): ناحیه‌ی لمس لینک‌ها ۴۴ پیکسل، بدون تغییر چیدمان (padding عمودی روی عنصر inline جای خط را عوض نمی‌کند) */
.breadcrumb a { padding-block: 11px; }
/* «ABS» کوتاه هم پهنای لمس ۴۴ پیکسل (فاز ۴، ۱۸ آبان ۱۴۰۵): inline-block با margin منفی هم‌اندازه‌ی padding، تا ارتفاع خط عوض نشود */
.breadcrumb a { display: inline-block; min-width: 44px; margin-block: -11px; text-align: center; }

/* بالای صفحه‌های بدون هیرو (همان .preview-intro صفحه‌ی اجزا) */
.page-head { padding-block: var(--sp-8) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); }
.page-head__date { color: var(--c-text-2); }

/* بخش اول بعد از page-head: فاصله‌ی بالا همان پایین page-head است */
.section--flush { padding-top: 0; }
.section-title { font-size: var(--fs-lg); font-weight: var(--fw-medium); margin-bottom: var(--sp-5); }
.section-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.section-head p { color: var(--c-text-2); max-width: var(--measure); }

/* کارت‌های قیمت (همان .cards-grid صفحه‌ی اجزا) */
.cards-grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
/* کارت پلیمر صفحه‌ی شهر از عرض ۷۰۰ دوستونه: در تک‌ستون تبلت کادر عکس ۵ تا ۶ برابر ارتفاعش پهن بود و عکس ۳ به ۱ زیاد بریده می‌شد */
@media (min-width: 700px) { .cards-grid--polymers { grid-template-columns: 1fr 1fr; } }

/* باکس قیمت صفحه‌ی گرید (همان .box-title و عرض نمونه‌ی صفحه‌ی اجزا) */
.price-box-wrap { max-width: 30rem; }
.box-title { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.box-title h2 { font-size: var(--fs-md); font-weight: var(--fw-medium); }

/* نوار کوتاه «درخواست مشاوره» پایان صفحه‌ها (کامیت c7f7921، بدون نقطه‌ی snap) */
.cta-strip { padding-block: var(--sp-7); border-top: 1px solid var(--c-line); }
.cta-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); }
.cta-strip p { font-size: var(--fs-lg); font-weight: var(--fw-light); color: var(--c-text); }
@media (max-width: 639px) { .cta-strip .btn { width: 100%; } }

/* فرم باز صفحه‌ی تماس (همان .form-wrap صفحه‌ی اجزا؛ زمینه و قاب از theme.css، .form-panel) */
.form-wrap { border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4); max-width: 46rem; }
@media (min-width: 720px) { .form-wrap { padding: var(--sp-6); } }

/* دفترها در صفحه‌ی تماس (همان ستون‌های فوتر) */
.offices-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 720px) { .offices-grid { grid-template-columns: 1fr 1fr; } }

/* توضیح منطقه کنار اسم دفتر (فوتر و تماس؛ جای style="font-weight: 400" پیش‌نمایش) */
.footer-title__note { font-weight: 400; }

/* صفحه‌های شهر: «ارتباط با ما» سه کاشی دارد؛ در پنل دوستونه‌ی هدر کاشی سوم تمام‌عرض (docs/pages.md) */
.connect--two .connect__tiles > li:nth-child(3):last-child { grid-column: 1 / -1; }


/* صفحه‌ی نتیجه‌ی ارسال فرم بدون جاوااسکریپت (۲-ج) */
.result-back { margin-top: var(--sp-4); }
.result-back a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ==========================================================================
 * فاز ۳: صفحه‌ی شهر و صفحه‌ی پلیمر (docs/pages.md). فقط توکن‌های tokens.css و theme.css؛ هدر و فوتر دست نخورده‌اند.
 * ========================================================================== */

/* ---------- نوار بالای صفحه‌ی شهر: کوتاه، تا در گوشی سر جدول قیمت در صفحه‌ی اول دیده شود ---------- */
/* z-index: 3 (اصلاح‌های بقیه‌ی فاز ۳، ۱۷ آبان ۱۴۰۵): isolation لایه‌ی جدا می‌سازد و z-index فهرست «تغییر شهر» فقط داخل همین لایه
   حساب می‌شود؛ خود لایه باید بالاتر از کارت‌های بعدی باشد (پایین‌تر از نوار تماس ۴۰، هدر ۵۰ و برگه‌ها). نماد شهر از نوار بیرون نمی‌زند،
   پس روی کارت‌ها نمی‌افتد. */
.city-hero { position: relative; isolation: isolate; z-index: 3; padding-block: var(--sp-2) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.city-hero h1 { font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.75rem); }
.city-hero__lead { font-size: var(--fs-base); line-height: 1.7; }
.city-hero__actions { margin-top: var(--sp-1); }
/* طرح خطی نماد شهر هیچ‌جا پشت متن نیست (قاعده‌ی صاحب پروژه، ۱۷ آبان ۱۴۰۵):
   گوشی: کوچک در سمت چپ، کنار H1 (حالت «ب»)؛ زیر ۳۷۵ نمی‌آید تا ردیف اول قیمت در ۳۶۰×۶۴۰ بریده نشود.
   ۷۰۰ تا ۱۱۹۹: دو ستون، متن راست و نماد چپ. ۱۲۰۰ به بالا: پایین سمت چپ نوار، کم‌رنگ (همان قبلی؛ به متن نمی‌رسد). */
.city-hero { --art-w: 8rem; }
.city-hero__art {
  position: absolute; z-index: -1; inset-inline-end: max(20px, env(safe-area-inset-left, 0px)); top: var(--sp-2);
  width: var(--art-w); height: auto; opacity: 0.5; pointer-events: none;
}
/* گوشی: شبکه‌ی کوچک؛ مسیر صفحه تمام‌عرض (مسیر بلند اصفهان سه خطی نشود)، H1 در ستون راست و نماد در ستون چپ هم‌ردیف H1 */
@media (min-width: 375px) and (max-width: 699px) {
  .city-hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--art-w); column-gap: var(--sp-3); row-gap: var(--sp-2); }
  .city-hero > * { grid-column: 1 / -1; }
  .city-hero > h1 { grid-column: 1; }
  .city-hero > .city-hero__art { position: static; grid-column: 2; grid-row: 2; align-self: center; }
}
@media (max-width: 374px) { .city-hero__art { display: none; } }
@media (min-width: 700px) and (max-width: 1199px) {
  .city-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-6); row-gap: var(--sp-2); align-content: start; }
  .city-hero > * { grid-column: 1; }
  .city-hero > .city-hero__art { position: static; grid-column: 2; grid-row: 1 / span 4; align-self: center; width: clamp(12rem, 4rem + 18vw, 17rem); }
}
@media (min-width: 900px) { .city-hero { padding-block: var(--sp-6); } }
@media (min-width: 1200px) { .city-hero__art { inset-inline-end: 0; top: auto; bottom: var(--sp-3); width: min(62vw, 30rem); opacity: 0.22; } }
.city-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.city-hero__actions .btn { min-height: var(--tap); }
@media (max-width: 639px) {
  .city-hero__actions > .btn, .city-hero__actions > .city-switch { flex: 1 1 0; min-width: 0; }
  .city-hero__actions .btn { width: 100%; padding-inline: var(--sp-3); }
}

/* «تغییر شهر»: details با سه لینک (بدون جاوااسکریپت) */
.city-switch { position: relative; } /* بستن با کلیک بیرون و Escape: site.js (data-dismiss) */
.city-switch > summary { list-style: none; cursor: pointer; }
.city-switch > summary::-webkit-details-marker { display: none; }
.city-switch > summary .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.city-switch[open] > summary .icon { transform: rotate(180deg); }
.city-switch__list {
  position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + var(--sp-2)); min-width: 16rem;
  list-style: none; padding: var(--sp-2); background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
@media (max-width: 639px) { .city-switch__list { inset-inline-start: auto; inset-inline-end: 0; } }
.city-switch__list a {
  display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; line-height: 1.5;
}
.city-switch__list a small { color: var(--c-text-3); font-size: var(--fs-sm); }
.city-switch__list a[aria-current="page"] { background: var(--c-surface-3); }
.city-switch__list a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .city-switch__list a:hover { background: var(--c-surface-3); color: var(--c-violet-text); } }

.nowrap { white-space: nowrap; }

/* نوار پرش به کارت پلیمرها و لینک دلیل اختلاف: در گوشی زیر هم، پهن‌تر کنار هم. چسبان نیست و اگر جا نشد افقی اسکرول می‌خورد */
.price-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-5); margin-bottom: var(--sp-3); }
.price-nav > nav { min-width: 0; max-width: 100%; }
.polymer-jump { list-style: none; display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; margin-inline-start: calc(-1 * var(--sp-3)); }
.polymer-jump::-webkit-scrollbar { display: none; }
.polymer-jump li { flex: none; display: flex; align-items: center; }
.polymer-jump li + li::before { content: "·"; color: var(--c-text-3); }
.polymer-jump a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding-inline: var(--sp-2);
  border-radius: var(--r-sm); color: var(--c-violet-text); font-weight: var(--fw-medium); text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.polymer-jump a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.polymer-jump a:active { background-color: var(--c-tile-press); }
@media (hover: hover) and (pointer: fine) { .polymer-jump a:hover { color: var(--c-text); } }
/* گوشی: ردیف اول قیمت در صفحه‌ی اول. کم‌ارتفاع (زیر ۷۰۰ پیکسل): بدون بردکرامب دیدنی (اسکیما می‌ماند) و تیتر یک‌خطی */
@media (max-width: 639px) {
  .city-hero { padding-bottom: var(--sp-2); }
  /* ۰ (نه ۴ پیکسل): جبران ۴ پیکسل فاصله‌ی بیشتر بالای زیرعنوان نوع کارت (۱۶ آبان ۱۴۰۵) تا ردیف اول در ۳۶۰×۷۴۰ هم در صفحه‌ی اول بماند؛ لینک‌های ۴۴ پیکسلی نوار پرش فاصله‌ی خودشان را دارند */
  .price-nav { margin-bottom: 0; }
}
@media (max-width: 639px) and (max-height: 699px) {
  .city-hero .breadcrumb { display: none; }
  .city-hero h1 { font-size: 1.25rem; }
}

.price-note { font-size: var(--fs-sm); color: var(--c-text-2); }
.price-note a, .prose a, .more-link a, .review-line a { color: var(--c-violet-text); text-underline-offset: 0.3em; }
.price-note a { display: inline-block; padding-block: 11px; margin-block: -11px; } /* هدف لمسی ۴۴ بدون جابه‌جایی سطر */

/* ---------- کارت پلیمر صفحه‌ی شهر: عکس کوتاه گرانول با اسم پلیمر (متن) روی آن ---------- */
/* ارتفاع عکس (تصمیم صاحب پروژه، ۱۱ آبان ۱۴۰۵): ۱۳۲ در گوشی و ۱۸۰ در کامپیوتر؛ در صفحه‌نمایش کم‌ارتفاع ۸۸ و ۱۲۰ تا ردیف اول قیمت بریده نشود */
.polymer-card { --photo-h: 132px; }
@media (min-width: 900px) { .polymer-card { --photo-h: 180px; } }
@media (max-height: 699px) { .polymer-card { --photo-h: 88px; } }
@media (max-height: 699px) and (min-width: 900px) { .polymer-card { --photo-h: 120px; } }
.polymer-card__photo {
  position: relative; isolation: isolate; height: var(--photo-h); overflow: hidden; background: var(--c-surface-2);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--sp-4) var(--sp-2);
}
.polymer-card__photo img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* لایه‌ی تیره فقط برای خوانایی عنوان، واحد و تاریخ (سرمه‌ای شفاف، نه گرادیان رنگی؛ کنتراست روی روشن‌ترین نقطه‌ی عکس‌ها حساب شده) */
.polymer-card__photo::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(to top, rgb(5 11 25 / 0.85), rgb(5 11 25 / 0.62) 65%, rgb(5 11 25 / 0.12));
}
.polymer-card__photo .price-card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.5; }
.polymer-card__photo .price-card__title a { min-height: 0; text-shadow: 0 1px 8px rgb(0 0 0 / 0.6); }
.polymer-card__photo .price-card__title a::before { content: ""; position: absolute; inset: 0; } /* کل عکس لینک صفحه‌ی پلیمر */
.polymer-card__photo .price-card__title .icon { color: var(--c-text-2); }
.polymer-card__code { font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.08em; color: var(--c-violet-text); }
.polymer-card__date { font-size: var(--fs-sm); color: var(--c-text); text-shadow: 0 1px 6px rgb(0 0 0 / 0.7); line-height: 1.6; }
.polymer-card .price-card__group { border-top: 1px solid var(--c-line); }
.polymer-card .polymer-card__photo + .price-card__group { border-top: 0; }
/* هدف لمسی ۴۴ بدون بلند شدن سطر: حاشیه‌ی منفی داخل padding همان سطر می‌افتد */
.polymer-card .price-card__group a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -6px; }
/* زیرعنوان نوع در کارت صفحه‌ی شهر (انتخاب صاحب پروژه، ۱۶ آبان ۱۴۰۵): ۱۶ پیکسل، ۶۰۰، رنگ لینک، ۴ پیکسل فاصله‌ی بیشتر بالا.
   فقط کارت شهر؛ H2 گروه‌ها در صفحه‌ی پلیمر دست نمی‌خورد. هاور مثل لینک‌های متنی: خط زیر و روشن‌تر. */
.polymer-card .price-card__group { font-size: var(--fs-base); font-weight: var(--fw-semibold); padding-top: var(--sp-4); }
.polymer-card .price-card__group a { color: var(--c-violet-text); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
@media (hover: hover) and (pointer: fine) { .polymer-card .price-card__group a:hover { color: var(--c-text); text-decoration-line: underline; } }
.polymer-card .price-card__group a:active { color: var(--c-text); }

/* ---------- متن، شرایط، دفتر ---------- */
.prose { max-width: 42rem; }
.prose > p, .type-summary dd { max-width: var(--measure); }
.prose p + p, .prose p + dl, .prose dl + p { margin-top: var(--sp-4); }
.note { font-size: var(--fs-sm); color: var(--c-text-3); margin-top: var(--sp-3); }
.terms-list { display: grid; margin: 0; max-width: 46rem; }
.terms-list > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.terms-list dt { color: var(--c-text-3); }
.terms-list dd { margin: 0; color: var(--c-text); }
@media (max-width: 479px) { .terms-list > div { grid-template-columns: 1fr; gap: var(--sp-1); } }
.more-link { margin-top: var(--sp-4); }
.more-link a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.more-link .icon, .city-links .icon { width: 16px; height: 16px; }
.office-block { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 46rem; }
.office-block__address { color: var(--c-text); }
.office-block__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin: 0; }
.office-block__meta > div { display: flex; gap: var(--sp-2); align-items: center; }
.office-block__meta dt { color: var(--c-text-3); }
.office-block__meta dd { margin: 0; }
.office-block__meta a { color: var(--c-text); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.map-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.map-links a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--sp-4);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); color: var(--c-text); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .map-links a:hover { border-color: var(--c-text); } }

/* ---------- سؤالات متداول ---------- */
.faq { max-width: 46rem; border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding-block: var(--sp-3); font-weight: var(--fw-medium); color: var(--c-text);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary .icon { flex: none; width: 18px; height: 18px; color: var(--c-text-3); transition: transform var(--dur) var(--ease); }
.faq__item[open] > summary .icon { transform: rotate(180deg); }
.faq__item > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.faq__item > p { padding-bottom: var(--sp-4); color: var(--c-text-2); }
@media (hover: hover) and (pointer: fine) { .faq__item > summary:hover { color: var(--c-violet-text); } }

/* ---------- صفحه‌ی پلیمر ---------- */
/* بالای صفحه (حالت b، انتخاب صاحب پروژه ۱۵ آبان ۱۴۰۵): از ۷۰۰ به بالا عکس گرانول بی‌قاب و جزء زمینه‌ی نوار، در نیمه‌ی چپ، لبه‌ها نرم
 * در سرمه‌ای محو (مثل طرح آرامگاه فردوسی صفحه‌ی مشهد)؛ متن سمت راست. گوشی (اصلاح‌های بقیه‌ی فاز ۳، ۱۷ آبان ۱۴۰۵): عکس هیچ‌جا
 * پشت متن نیست؛ عکس کوچک ۱۲۰×۹۰ (نسخه‌ی thumb با <picture>) در گوشه‌ی بالا چپ، کنار مسیر صفحه و H1، با لبه‌ی محو گرد. */
.polymer-hero { position: relative; isolation: isolate; overflow: hidden; --thumb-w: 120px; }
.polymer-hero__pic { display: contents; }
.polymer-hero__inner { padding-block: var(--sp-3) var(--sp-5); }
.polymer-hero__text { display: flex; flex-direction: column; gap: var(--sp-3); text-shadow: 0 1px 14px rgba(5, 11, 25, 0.9), 0 0 2px rgba(5, 11, 25, 0.6); }
.polymer-hero h1 { font-size: clamp(1.625rem, 1.1rem + 2.4vw, 3rem); }
.polymer-hero__img {
  position: absolute; z-index: -1; pointer-events: none;
  filter: contrast(1.3) brightness(0.9); /* زمینه‌ی خاکستری عکس‌هایی مثل ABS به سرمه‌ای نزدیک‌تر شود؛ گرانول سفید می‌ماند */
}
@media (max-width: 699px) {
  .polymer-hero__inner { padding-block: var(--sp-2) var(--sp-4); }
  .polymer-hero__img {
    top: var(--sp-2); inset-inline-end: max(20px, env(safe-area-inset-left, 0px)); width: var(--thumb-w); height: calc(var(--thumb-w) * 0.75); object-fit: cover;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  }
  .polymer-hero .breadcrumb, .polymer-hero h1 { max-width: calc(100% - var(--thumb-w) - var(--sp-3)); }
}
@media (min-width: 700px) {
  .polymer-hero__inner { padding-block: var(--sp-5) var(--sp-6); min-height: clamp(15rem, 6rem + 18vw, 21rem); display: flex; align-items: center; }
  .polymer-hero__img {
    inset-block: 0; inset-inline-end: 0; width: 58%; height: 100%; object-fit: cover; object-position: 50% 70%;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
  }
  .polymer-hero__text { width: 46%; }
}
/* تپه‌ی ABS پهن و تا لبه‌ی عکس است؛ در ۷۰۰ تا ۱۱۹۹ لبه‌ی سمت متن زودتر محو می‌شود تا به خط‌های جمله‌ی بالا نخورد */
@media (min-width: 700px) and (max-width: 1199px) {
  .polymer-hero--abs .polymer-hero__img {
    -webkit-mask-image: radial-gradient(ellipse 40% 50% at 44% 55%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 40% 50% at 44% 55%, #000 35%, transparent 100%);
  }
}
.price-line { font-size: var(--fs-sm); color: var(--c-text-2); margin-bottom: var(--sp-4); }

.type-summary { margin: 0; display: grid; gap: var(--sp-3); }
.type-summary > div { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-1); }
.type-summary dt a { color: var(--c-text); font-weight: var(--fw-semibold); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.type-summary dd { margin: var(--sp-1) 0 0; color: var(--c-text-2); }
@media (hover: hover) and (pointer: fine) { .type-summary dt a:hover { color: var(--c-violet-text); } }

/* فیلتر کاربرد: بدون جاوااسکریپت پنهان (hidden) و همه‌ی گریدها دیده می‌شوند */
.app-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-5); }
.app-filter__label { color: var(--c-text-3); font-size: var(--fs-sm); }
.app-filter__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  min-height: var(--tap); padding-inline: var(--sp-4); border-radius: var(--r-pill); cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--c-text-2); background: none; border: 1px solid var(--c-line-strong);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip[aria-pressed="true"] {
  color: var(--c-text); border-color: transparent;
  background: linear-gradient(var(--c-surface-3), var(--c-surface-3)) padding-box, var(--grad-brand-line) border-box;
}
.chip:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chip:hover { color: var(--c-text); border-color: var(--c-text-2); } .chip[aria-pressed="true"]:hover { border-color: transparent; } }
/* گوشی: دکمه‌ها یک ردیف با اسکرول افقی، تا کارت‌ها بالاتر بیایند */
@media (max-width: 639px) {
  .app-filter { margin-bottom: var(--sp-3); }
  .app-filter__chips { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .app-filter__chips::-webkit-scrollbar { display: none; }
  /* لبه‌ای که تراشه‌ی پنهان دارد نرم محو می‌شود (grade-filter.js کلاس‌ها را می‌گذارد؛ to left: اول گرادیان لبه‌ی راست، یعنی ابتدای ردیف) */
  .app-filter__chips { --fade-s: 0px; --fade-e: 0px; padding-inline: 2px; }
  .app-filter__chips.is-start-hidden { --fade-s: 2.5rem; }
  .app-filter__chips.is-end-hidden { --fade-e: 2.5rem; }
  .app-filter__chips.is-start-hidden, .app-filter__chips.is-end-hidden {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
    mask-image: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
  }
  .chip { flex: none; }
}
.app-filter__status { width: 100%; font-size: var(--fs-sm); color: var(--c-text-3); }
.app-filter__status:empty { display: none; }

.grade-group + .grade-group { margin-top: var(--sp-7); }
.grade-group__title { font-size: var(--fs-lg); font-weight: var(--fw-medium); margin-bottom: var(--sp-4); }
.grade-grid { list-style: none; display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* کارت کوچک گرید: کد گرید درشت‌ترین چیز؛ لینک روی کد و نام، کل کارت با ::after کلیک‌پذیر؛ «تماس بگیرید» بالای آن لایه */
.grade-card {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); align-items: start;
  padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-1);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
@media (min-width: 640px) { .grade-card { grid-template-columns: 120px minmax(0, 1fr); } }
.grade-card__bag { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--c-surface-2); }
/* گرید بدون عکس کیسه: مخفف نوع روی همان زمینه، تا معلوم باشد عمدی است (متن HTML، برای صفحه‌خوان پنهان) */
.grade-card__bag--abbr { display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: 0.06em; color: var(--c-text-3); }
.grade-card__head { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.grade-card__title { display: flex; flex-direction: column; font-size: inherit; font-weight: inherit; line-height: 1.3; }
.grade-card__link { display: flex; flex-direction: column; gap: 2px; color: var(--c-text); text-decoration: none; }
.grade-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.grade-card__code { display: block; font-size: 1.625rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: var(--c-text); text-align: end; } /* ltr: پایان سطر یعنی راست، هم‌تراز متن فارسی */
.grade-card__producer { display: block; font-size: var(--fs-sm); color: var(--c-text-2); font-weight: var(--fw-regular); }
.grade-card:has(.grade-card__link:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.grade-card__link:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .grade-card:has(.grade-card__link):hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
  .grade-card:hover .grade-card__code { color: var(--c-violet-text); }
}
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tag-list li { font-size: var(--fs-sm); line-height: 1.6; padding: 1px var(--sp-2); border-radius: var(--r-pill); background: var(--c-surface-3); color: var(--c-text-2); }
/* قیمت‌ها تمام‌عرض زیر عکس و نام، تا قیمت به اندازه‌ی کارت‌های صفحه‌ی شهر درشت بماند و ردیف‌ها نشکنند */
.grade-card__prices { grid-column: 1 / -1; margin: 0; display: flex; flex-direction: column; }
.grade-card__prices > div { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); min-height: 44px; }
.grade-card__prices > div + div { border-top: 1px solid var(--c-line); }
.grade-card__prices dt { font-size: var(--fs-sm); color: var(--c-text-2); }
.grade-card__prices dd { margin: 0; }

/* جدول مقایسه: در گوشی داخل details بسته (assets/js/grade-filter.js)، در کامپیوتر همیشه باز؛ در گوشی هر ردیف یک بلوک برچسب‌دار (بدون اسکرول افقی صفحه) */
.compare-details > summary { list-style: none; cursor: pointer; width: 100%; }
.compare-details > summary::-webkit-details-marker { display: none; }
.compare-details > summary .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.compare-details[open] > summary .icon { transform: rotate(180deg); }
.compare-details[open] > summary { margin-bottom: var(--sp-3); }
@media (min-width: 720px) { .compare-details > summary { display: none; } }
.compare-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-4); font-size: var(--fs-sm); }
.compare-table th, .compare-table td { text-align: start; vertical-align: top; padding: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.compare-table thead th { color: var(--c-text-3); font-weight: var(--fw-medium); border-bottom-color: var(--c-line-strong); }
.compare-table tbody th { font-weight: var(--fw-semibold); font-size: var(--fs-base); white-space: nowrap; }
.compare-table tbody th a { color: var(--c-text); text-decoration: none; display: inline-block; padding-block: 8px; min-width: var(--tap); }
.compare-table small { display: block; color: var(--c-text-3); font-size: var(--fs-sm); font-weight: var(--fw-regular); white-space: normal; }
.compare-table td { color: var(--c-text-2); }
.compare-table .mark { color: var(--c-text-3); }
@media (hover: hover) and (pointer: fine) { .compare-table tbody th a:hover { color: var(--c-violet-text); } }
@media (max-width: 719px) {
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table tr { padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line); }
  .compare-table th, .compare-table td { border: 0; padding: var(--sp-1) 0; }
  .compare-table tbody th { white-space: normal; }
  .compare-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 var(--sp-2); }
  .compare-table td::before { content: attr(data-label); color: var(--c-text-3); grid-row: 1 / span 2; }
  .compare-table td small { grid-column: 2; }
  .compare-table td > .ltr { justify-self: start; } /* مقدار لاتین هم‌تراز راست، مثل متن فارسی */
}

.review-line { font-size: var(--fs-sm); color: var(--c-text-3); margin-top: var(--sp-3); }
.review-line a { display: inline-flex; align-items: center; min-height: var(--tap); }
.city-links { list-style: none; display: grid; gap: var(--sp-2); }
@media (min-width: 720px) { .city-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.city-links a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-height: var(--tap);
  border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-text); text-decoration: none; background: var(--c-surface-1);
}
.city-links a small { grid-row: 2; color: var(--c-text-3); font-size: var(--fs-sm); }
.city-links a .icon { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--c-violet-text); }
@media (hover: hover) and (pointer: fine) { .city-links a:hover { border-color: var(--c-line-strong); color: var(--c-violet-text); } }

/* ---------- لمس، حرکت و کاهش حرکت ---------- */
.map-links a, .city-links a, .type-summary dt a, .faq__item > summary, .city-switch__list a {
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chip:active, .map-links a:active, .city-links a:active, .faq__item > summary:active, .city-switch__list a:active { background-color: var(--c-tile-press); }
.grade-card:has(.grade-card__link:active) { background: var(--c-surface-2); }
.polymer-card__photo:has(a:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.polymer-card__photo a:focus-visible { outline: none; }
.map-links a:focus-visible, .city-links a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .polymer-card__photo:has(a:hover)::after { opacity: 0.86; } }
.polymer-card__photo::after { transition: opacity var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .city-switch > summary .icon, .faq__item > summary .icon, .chip, .grade-card, .polymer-card__photo::after,
  .map-links a, .city-links a, .type-summary dt a, .faq__item > summary, .city-switch__list a { transition: none; }
}

/* جمله‌ی کوتاه بالای بخش دفتر (تهران) و یادداشت واحد زیر شرایط فروش وقتی بخش «چرا…» نیست (۱۶ آبان ۱۴۰۵) */
.office-intro { max-width: var(--measure); margin-bottom: var(--sp-4); color: var(--c-text-2); }
.terms-note { max-width: 46rem; }

/* ---------- خرید و ارسال (/shipping/؛ ۱۶ آبان ۱۴۰۵) ---------- */
.cover-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .cover-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cover-item { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-1); }
.cover-item__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.cover-item p { color: var(--c-text-2); }
.cover-item .more-link { margin-top: auto; }
/* شرایط سه منطقه: گوشی هر منطقه یک کارت؛ از ۹۰۰ سه ستون کنار هم با ردیف‌های هم‌تراز (subgrid؛ بدون پشتیبانی فقط هم‌تراز نیستند) */
.region-compare { display: grid; gap: var(--sp-4); }
.region-col { display: flex; flex-direction: column; padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-1); min-width: 0; }
.region-col__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); padding-bottom: var(--sp-2); }
.region-col__title small { display: block; font-size: var(--fs-sm); font-weight: var(--fw-regular, 400); color: var(--c-text-3); }
.region-col__terms { margin: 0; }
.region-col__terms > div { display: flex; flex-direction: column; gap: var(--sp-1); padding-block: var(--sp-3); border-top: 1px solid var(--c-line); }
.region-col__terms dt { color: var(--c-text-3); font-size: var(--fs-sm); }
.region-col__terms dd { margin: 0; color: var(--c-text); }
.region-col__link { margin-top: auto; padding-top: var(--sp-2); }
/* ردیف‌های subgrid: عنوان + شرط‌ها (--terms، از قالب؛ شرط‌های یکسان سه منطقه از ستون‌ها رفته‌اند) + لینک */
@media (min-width: 900px) {
  .region-compare { --rows: calc(var(--terms, 6) + 2); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); column-gap: var(--sp-4); row-gap: 0; }
  .region-col { display: grid; grid-row: span var(--rows); grid-template-rows: subgrid; row-gap: 0; }
  .region-col__terms { display: contents; }
}
/* «در هر سه منطقه: …» یک بار زیر ستون‌ها و جدول */
.region-shared { margin-top: var(--sp-5); }
.region-shared__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-text-2); }
/* گوشی (اصلاح‌های بقیه‌ی فاز ۳، ۱۷ آبان ۱۴۰۵): جدول فشرده‌ی سه‌ستونی به‌جای سه کارت پشت هم؛ ستون‌ها هم‌عرض، متن می‌پیچد، بدون اسکرول افقی */
.region-table-wrap { display: none; }
@media (max-width: 699px) {
  .region-compare { display: none; }
  .region-table-wrap { display: block; }
  .region-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.6; }
  .region-table thead td { width: 5.25rem; }
  .region-table th, .region-table td { padding: var(--sp-3) var(--sp-1); text-align: start; vertical-align: top; overflow-wrap: anywhere; border-bottom: 1px solid var(--c-line); }
  .region-table thead th { vertical-align: bottom; color: var(--c-text); font-weight: var(--fw-semibold); border-bottom-color: var(--c-line-strong); }
  .region-table tbody th { color: var(--c-text-3); font-weight: var(--fw-regular, 400); padding-inline-start: 0; }
  .region-table td { color: var(--c-text); }
  .region-table__notes { margin-top: var(--sp-4); }
}
.offices-grid .office-block__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-violet-text); }

/* ---------- صفحه‌ی گرید (فاز ۴) ---------- */
/* بالای صفحه (حالت «ب»، تأییدشده ۱۹ آبان ۱۴۰۵). ترتیب DOM: بردکرامب، سر (H1 و جمله)، عکس با برچسب کد، باکس قیمت، مشخصات کلیدی.
   گوشی (زیر ۷۰۰): سر و عکس ۹۶ کنار هم، باکس، مشخصات کلیدی دوستونه‌ی کوچک (ردیف اول قیمت در صفحه‌ی اول ۳۶۰×۶۴۰).
   ۷۰۰ تا ۹۹۹ (تبلت ایستاده): سر تمام‌عرض، باکس با عکس ۱۶۰ کنارش، و زیرش کد درشت و مشخصات کلیدی چهارستونه.
   ۱۰۰۰ به بالا: دو ستون؛ راست سر و زیرش کد و مشخصات کلیدی کنار عکس، چپ باکس ۴۴۸ پیکسلی که بالایش هم‌تراز H1 است.
   ۱۱۰۰ به بالا عکس ۲۰۰ (کاشی بی‌عکس ۱۳۲) و H1 تا ۱۲۸۰ و ۱۴۴۰ برای هر ۳۳ گرید یک خط (ستون ۶۹۶ پیکسل؛ بلندترین حدود ۶۶۸). */
.grade-top { padding-block: var(--sp-3) var(--sp-5); }
.grade-top__grid { display: grid; column-gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) 96px; align-items: start;
  grid-template-areas: "crumb crumb" "head media" "buy buy" "facts facts"; }
.grade-top__crumb { grid-area: crumb; margin-bottom: var(--sp-3); } /* ۱۲ پیکسل تا H1 در گوشی */
.grade-top__head { grid-area: head; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.grade-media { grid-area: media; display: flex; flex-direction: column; gap: var(--sp-2); align-items: stretch; }
.grade-buy { grid-area: buy; min-width: 0; margin-top: var(--sp-4); }
.grade-buy .price-box { max-width: 30rem; }
.grade-facts { grid-area: facts; min-width: 0; margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.grade-facts__code { display: none; }
@media (min-width: 700px) {
  .grade-top__grid { column-gap: var(--sp-5); grid-template-columns: minmax(0, 1fr) 160px; grid-template-areas: "crumb crumb" "head head" "buy media" "facts facts"; }
  .grade-top__crumb { margin-bottom: var(--sp-4); }
  .grade-media { margin-top: var(--sp-4); }
  .grade-buy .price-box { max-width: none; }
  .grade-facts { margin-top: var(--sp-6); }
  .grade-codechip { display: none; }
  .grade-facts__code { display: block; font-size: 3.5rem; font-weight: var(--fw-light); line-height: 1; letter-spacing: 0.01em; color: var(--c-text);
    text-align: end; white-space: nowrap; margin-bottom: var(--sp-3); } /* ltr: پایان سطر یعنی راست، زیر H1 */
}
@media (min-width: 1000px) {
  .grade-top { padding-bottom: 0; } /* فاصله تا «مشخصات فنی» فقط از .section--spec (۵۶ پیکسل زیر بلندترین ستون) */
  .grade-top__grid { column-gap: var(--sp-5); grid-template-columns: minmax(0, 1fr) 160px calc(28rem + var(--sp-3)); grid-template-rows: auto auto 1fr;
    grid-template-areas: "crumb crumb ." "head head buy" "facts media buy"; }
  .grade-buy { margin-top: 0; padding-inline-start: var(--sp-3); } /* فاصله‌ی ستون باکس ۳۲، بین کد و عکس ۲۴ */
  .grade-buy .price-box { max-width: none; }
  .grade-media, .grade-facts { margin-top: var(--sp-5); }
}
@media (min-width: 1100px) {
  .grade-top__crumb { margin-bottom: 20px; }
  .grade-top__grid { grid-template-columns: minmax(0, 1fr) 200px calc(28rem + var(--sp-3)); }
  .grade-facts__code { font-size: 4rem; } /* ۶۴ پیکسل */
  .grade-media--tile { justify-self: end; width: 132px; } /* گرید بی‌عکس: کاشی کوچک‌تر، کنار باکس قیمت */
}

.grade-h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); font-weight: var(--fw-light); line-height: 1.35; color: var(--c-text); } /* ۳۴ پیکسل از حدود ۱۰۵۰ */
/* برچسب کد زیر عکس، فقط گوشی: 2420E02 و 1012UR در ستون ۹۶ پیکسلی یک خط */
.grade-codechip { font-size: 1.25rem; font-weight: var(--fw-light); line-height: 1.1; color: var(--c-text); text-align: center; white-space: nowrap; }
.grade-lead { font-size: var(--fs-base); }
@media (min-width: 700px) { .grade-lead { font-size: var(--fs-md); } }

/* مشخصات کلیدی: شبکه‌ی دوستونه (نوع، MFI، دانسیته، کاربرد)، خط نازک بالای هر خانه؛ آخرش میان‌بر «مشخصات فنی کامل ↓» به #spec */
.keyspec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.keyspec > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
.keyspec dt { color: var(--c-text-3); }
.keyspec dd { margin: 0; color: var(--c-text); }
.keyspec small { display: block; color: var(--c-text-3); font-size: var(--fs-xs); text-align: end; } /* ltr: هم‌تراز راست، زیر مقدار */
@media (min-width: 700px) { .keyspec dd { font-size: var(--fs-base); } }
@media (min-width: 700px) and (max-width: 999.98px) { .keyspec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grade-facts__more { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); font-size: var(--fs-sm);
  color: var(--c-violet-text); text-underline-offset: 0.3em; }

/* فاصله‌ی «مشخصات فنی» از بالای صفحه: گوشی ۲۴ + ۳۲، کامپیوتر ۵۶ زیر بلندترین ستون */
.section--spec { padding-top: var(--sp-6); }
@media (min-width: 1000px) { .section--spec { padding-top: calc(var(--sp-7) + var(--sp-2)); } }

/* عکس کیسه (کوچک، کنار باکس قیمت) و کاشی مخفف */
.grade-media__zoom { position: relative; display: block; border-radius: var(--r-sm); overflow: hidden; }
.grade-media__img { display: block; width: 100%; height: auto; aspect-ratio: 1; background: var(--c-surface-2); }
.grade-media__icon { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: rgb(5 11 25 / 0.72); color: var(--c-text); }
.grade-media__zoom:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .grade-media__zoom:hover .grade-media__img { filter: brightness(1.08); } }
.grade-media__tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px solid var(--c-line);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: 0.06em; color: var(--c-text-3); }
@media (min-width: 700px) { .grade-media__tile { font-size: var(--fs-lg); } }
@media (min-width: 1100px) { .grade-media__tile { font-size: var(--fs-xl); } }

/* پنجره‌ی عکس بزرگ */
.bag-dialog { width: min(92vw, 44rem); max-height: 92vh; padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: #0B172C; color: var(--c-text); }
.bag-dialog::backdrop { background: rgb(5 11 25 / 0.82); }
.bag-dialog__img { display: block; width: 100%; height: auto; max-height: calc(92vh - 7rem); object-fit: contain; }
.bag-dialog form { display: flex; justify-content: center; margin-top: var(--sp-3); }

/* باکس قیمت: حالت «تماس بگیرید» برای همه‌ی منطقه‌ها و خط بیرون از ساعت کاری */
.price-box__call-note { color: var(--c-text-2); font-size: var(--fs-sm); margin: calc(-1 * var(--sp-2)) 0 0; }
.price-box__hours { font-size: var(--fs-sm); color: var(--c-text-2); margin: 0; }

/* جدول مشخصات فنی: جدول واقعی؛ زیر ۷۲۰ هر ردیف یک بلوک (بدون اسکرول افقی صفحه) */
.spec-typical { display: inline-block; font-size: var(--fs-sm); color: var(--c-text-2); padding: 1px var(--sp-2); border-radius: var(--r-pill); background: var(--c-surface-3); margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td { text-align: start; vertical-align: top; padding: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.spec-table thead th { color: var(--c-text-3); font-weight: var(--fw-medium); border-bottom-color: var(--c-line-strong); white-space: nowrap; }
.spec-table tbody th { font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--c-text); }
.spec-table__en { display: block; font-size: var(--fs-xs); color: var(--c-text-3); font-weight: var(--fw-regular); text-align: right; } /* نام انگلیسی (بخش ltr) زیر نام فارسی و هم‌لبه با آن، نه در لبه‌ی مقابل (نقد فاز ۴، ۱۸ آبان ۱۴۰۵) */
.spec-table__note { display: block; font-size: var(--fs-xs); color: var(--c-text-3); font-weight: var(--fw-regular); }
.spec-table__value { font-size: var(--fs-base); color: var(--c-text); white-space: nowrap; }
.spec-table td { color: var(--c-text-2); }
/* عنوان گروه هم‌رنگ متن، نه هم‌رنگ لینک (نقد فاز ۴، ۱۸ آبان ۱۴۰۵) */
.spec-table__group th { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-text); padding-top: var(--sp-5); border-bottom-color: var(--c-line-strong); }
.spec-table__group small { display: block; font-size: var(--fs-sm); color: var(--c-text-2); font-weight: var(--fw-regular); }
/* نشانه‌ی کنار مقدار (تضمین تولیدکننده، مقدار هدف، میانگین)؛ پاورقی همان نشانه با aria-describedby */
.spec-badge { display: inline-block; margin-inline-start: var(--sp-2); padding: 0 var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: 1.6;
  color: var(--c-text-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); white-space: nowrap; vertical-align: 1px; }
.spec-back { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.spec-back a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; }
.spec-name { margin-top: var(--sp-4); color: var(--c-text-2); }
/* کامپیوتر: خط‌خط کم‌رنگ و hover ردیف، تا چشم در جدول ۶۴rem ردیف را گم نکند */
@media (min-width: 720px) {
  .spec-table tbody tr:not(.spec-table__group):nth-child(even) { background: rgb(255 255 255 / .035); }
  .spec-table tbody tr:not(.spec-table__group) { transition: background-color .15s ease; }
  .spec-table tbody tr:not(.spec-table__group):hover { background: rgb(255 255 255 / .07); }
}
/* گوشی (۱۸ آبان ۱۴۰۵؛ فشرده، بدون جمع شدن): هر ردیف سه خط؛ ۱) نام فارسی راست و «مقدار واحد» چپ، ۲) نام انگلیسی، ۳) «روش · شرط».
   نام انگلیسی، روش و شرط ۱۳ پیکسل با --c-text-3 (۶٫۷:۱). معنای جدول با role صریح در HTML می‌ماند. */
@media (max-width: 719.98px) {
  .spec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .spec-table, .spec-table tbody, .spec-table th, .spec-table td { display: block; }
  .spec-table tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); padding-block: var(--sp-2); border-bottom: 1px solid var(--c-line); }
  .spec-table tr::before { content: ""; flex-basis: 100%; height: 0; order: 4; } /* شکستن خط پیش از «روش · شرط» */
  .spec-table th, .spec-table td { border: 0; padding: 0; }
  .spec-table tbody th { flex: 1 1 9rem; order: 1; min-width: 0; line-height: 1.5; }
  .spec-table__en { margin-top: 1px; }
  .spec-table__unit { order: 2; color: var(--c-text-2); }
  .spec-table__value { order: 3; font-size: var(--fs-base); white-space: normal; max-width: 60%; }
  .spec-table__unit.is-empty { display: none; }
  /* مقدار فارسی («بیشتر از 1000»، «بین 130 و 140»): اول مقدار، بعد واحد (در جهت راست‌به‌چپ) */
  .spec-table__row--fa .spec-table__value { order: 2; }
  .spec-table__row--fa .spec-table__unit { order: 3; }
  .spec-table__method, .spec-table__cond { order: 5; font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px; }
  .spec-table__cond:not(.is-empty)::before { content: "· "; }
  .spec-table__method.is-empty + .spec-table__cond::before { content: none; }
  .spec-table td.is-empty { display: none; } /* روش یا شرط خالی در گوشی خط «—» نمی‌گیرد */
  .spec-table tr.spec-table__group { display: block; padding-top: var(--sp-4); }
  .spec-table tr.spec-table__group::before { content: none; }
}

/* کاربرد و روش فرآیند */
.grade-uses h3 { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-text-2); margin-bottom: var(--sp-2); }
.grade-uses__list { padding-inline-start: 1.25rem; display: grid; gap: var(--sp-1); color: var(--c-text); }
.grade-uses__meta { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; }
.grade-uses__meta > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--sp-3); }
.grade-uses__meta dt { color: var(--c-text-2); font-weight: var(--fw-medium); }
.grade-uses__src { display: block; font-size: var(--fs-xs); color: var(--c-text-3); font-weight: var(--fw-regular); } /* منبع هر ردیف (۱۸ آبان ۱۴۰۵) */
.grade-uses__meta dd { margin: 0; }
.grade-uses__meta dd ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: var(--sp-1); }
@media (max-width: 479.98px) { .grade-uses__meta > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); } }

/* همین گرید از پتروشیمی دیگر */
.twin { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .twin { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: start; } }
.twin__card.grade-grid { grid-template-columns: minmax(0, 1fr); }
.twin__same { font-size: var(--fs-sm); color: var(--c-text-2); }
.twin__same dl { display: grid; gap: var(--sp-3); margin: var(--sp-2) 0 0; }
.twin__same dt { color: var(--c-text); font-weight: var(--fw-medium); }
.twin__same dt small, .twin__same dd small { color: var(--c-text-3); font-size: var(--fs-xs); }
.twin__same dd { margin: 0; }
.related-note { margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); }
/* گریدهای هم‌کاربرد در گوشی (۱۹ آبان ۱۴۰۵): هر گرید یک ردیف فشرده؛ راست کد و پتروشیمی، چپ قیمت منطقه‌ها؛ بدون عکس و برچسب.
   کل ردیف لینک است (همان ::after کارت)؛ «تماس بگیرید» بالای آن لایه. کامپیوتر و تبلت همان کارت‌ها. */
@media (max-width: 699.98px) {
  .grade-grid--compact { gap: 0; border-top: 1px solid var(--c-line); }
  .grade-grid--compact .grade-card { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
    padding: var(--sp-2) 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: none; }
  .grade-grid--compact .grade-card__bag, .grade-grid--compact .tag-list { display: none; }
  .grade-grid--compact .grade-card__code { font-size: var(--fs-lg); }
  .grade-grid--compact .grade-card__prices { grid-column: auto; }
  .grade-grid--compact .grade-card__prices > div { justify-content: flex-end; gap: var(--sp-3); }
  .grade-grid--compact .grade-card__prices dt { color: var(--c-text-3); }
  .grade-grid--compact .grade-card__prices .price { font-size: var(--fs-base); }
  .grade-grid--compact .grade-card__prices > div + div { border-top: 0; }
}
.spec-table { max-width: 64rem; }

/* ---------- فاز ۵، قدم دوم: درباره ما و ۴۰۴ (۲۱ آبان ۱۴۰۵؛ صفحه‌ی تماس ۲۲ آبان ۱۴۰۵ حذف شد) ---------- */
/* کپسول‌های کانال بله و تلگرام (از home.css آمد؛ خلاصه‌ی قیمت صفحه اصلی و جزء «ارتباط با ما») */
.channels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-6); max-width: 46rem; color: var(--c-text-2); }
.channels p { flex: 1 1 18rem; }
.channels__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.channel-pill img { width: 22px; height: 22px; }
/* در «ارتباط با ما» (پنل هدر، برگه‌ی «پیام»، فوتر؛ ۲۲ آبان ۱۴۰۵): آخر جزء با خط جدا، کپسول‌ها کوچک‌تر از کاشی‌های گفت‌وگو */
.channels--connect { margin-top: 0; max-width: none; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); gap: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.channels--connect p { flex: 1 1 14rem; }
.channels--connect .channels__list { gap: var(--sp-2); }
.channels--connect .channel-pill { min-height: var(--tap); padding-inline: var(--sp-4); font-size: var(--fs-sm); }
.channels--connect .channel-pill img { width: 18px; height: 18px; }
.connect--sheet .channels--connect p { flex-basis: 100%; }

/* درباره ما: معرفی، دفترها، تیم فنی */
.about-intro .prose > p { color: var(--c-text-2); }
.about-intro .prose > p + p { margin-top: var(--sp-4); }
.about-intro .prose > p:first-child { font-size: var(--fs-md); color: var(--c-text); }
.about-intro .prose > .about-former { font-size: var(--fs-sm); color: var(--c-text-3); }
.office-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface-1); min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.office-card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-text); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.office-card__area { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--c-violet-text); }
.office-card__address { color: var(--c-text-2); }
.office-card .more-link { margin-top: auto; }
.office-card--brief .office-block__meta { flex-direction: column; gap: 0; }
.terms-line { margin-top: var(--sp-2); color: var(--c-text-2); }
.terms-line a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); color: var(--c-violet-text); text-underline-offset: 0.3em; }
.terms-line .icon { width: 16px; height: 16px; }

.team-layout { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .team-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-8); align-items: start; } }
.team-intro { max-width: var(--measure); font-size: var(--fs-md); color: var(--c-text); }
.team-intro strong { font-weight: var(--fw-semibold); color: var(--c-violet-text); }
.role-list { list-style: none; display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 720px) { .role-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.role-list__item { padding-top: var(--sp-4); border-top: 1px solid var(--c-line-strong); color: var(--c-text-2); }
.role-list__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-text); margin-bottom: var(--sp-2); }
.team-note { margin-top: var(--sp-6); max-width: var(--measure); color: var(--c-text-2); }
.team-note__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-text); margin-bottom: var(--sp-2); }
.team-advice { max-width: 46rem; }
.team-advice__actions { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
@media (min-width: 640px) { .team-advice__actions .btn { align-self: flex-start; } }
@media (max-width: 639px) { .team-advice__actions .btn { width: 100%; } }
.team-side { padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-1); color: var(--c-text-2); }
.team-side__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-text); margin-bottom: var(--sp-2); }

/* مسیریابی کارت دفترهای درباره ما (#offices؛ فقط وقتی maps پر است) */
.office-card__maps { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.office-card__maps-title { font-size: var(--fs-sm); color: var(--c-text-3); }

/* ۴۰۴ */
.nf-grades { margin-top: var(--sp-4); }
.nf-groups { display: grid; gap: var(--sp-6); }
.nf-group__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-text-2); margin-bottom: var(--sp-3); }

/* ---------- زمینه‌ی تقریباً مات فقط زیر قیمت‌ها (تصمیم صاحب پروژه، ۲۲ آبان ۱۴۰۵) ----------
   خطوط نورانی زمینه (facets.svg، لایه‌ی ثابت) نباید از روی عدد قیمت رد شوند. کارت قیمت، باکس قیمت و کارت گرید کامپیوتر
   همین حالا زمینه‌ی پر --c-surface-1 دارند؛ این‌جا فقط جاهایی که قیمت مستقیم روی زمینه‌ی صفحه بود: جدول خلاصه‌ی صفحه اصلی،
   ردیف‌های فشرده‌ی گرید در گوشی (هم‌کاربردهای صفحه‌ی گرید و پیشنهادهای ۴۰۴) و جدول گوشی /shipping/. رنگ همان --c-bg
   (۹۴٪؛ بدون رنگ تازه)؛ متن‌های بلند دست نمی‌خورند. */
.price-matte, .grade-grid--compact, .region-table-wrap { --matte: rgb(5 11 25 / 0.94); --matte: color-mix(in srgb, var(--c-bg) 94%, transparent); }
.price-matte { max-width: 46rem; padding: var(--sp-1) var(--sp-2) var(--sp-2); border-radius: var(--r-md); background: var(--matte); }
@media (max-width: 639px) { .price-matte { padding: var(--sp-1) var(--sp-3) var(--sp-3); } }
@media (max-width: 699.98px) {
  .grade-grid--compact { padding-inline: var(--sp-3); border-top: 0; border-radius: var(--r-md); background: var(--matte); }
  .grade-grid--compact .grade-card:last-child { border-bottom: 0; }
  .region-table-wrap { padding: var(--sp-1) var(--sp-3) var(--sp-3); border-radius: var(--r-md); background: var(--matte); }
  .region-table tbody tr:last-child > * { border-bottom: 0; }
}

/* قیمت کهنه (۳ روز کاری کامل بدون به‌روزرسانی؛ pb_price_stale، ۲۲ آبان ۱۴۰۵): تاریخ پررنگ و «برای قیمت امروز تماس بگیرید» */
.date-stale { font-weight: var(--fw-bold, 700); color: var(--c-text); }
.stale-call { display: inline-flex; align-items: center; gap: 0.35em; min-height: var(--tap); vertical-align: middle; color: var(--c-violet-text); font-weight: var(--fw-semibold); text-underline-offset: 0.3em; white-space: nowrap; }
.stale-call .icon { width: 18px; height: 18px; flex: none; }
.stale-call:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .stale-call:hover { color: var(--c-text); } }

/* یک خط منبع زیر تیتر سؤال‌های متداول صفحه‌های پلیمر و گرید (به‌جای «طبق دیتاشیت» سر هر جواب؛ ۲۲ آبان ۱۴۰۵) */
.faq-note { margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); max-width: var(--measure); font-size: var(--fs-sm); color: var(--c-text-3); }