/*
 * صفحه اصلی (فاز ۵): هیروی زنجیر پلیمری، عین CSS داخل previews/phase1-v8/index.html (تأییدشده‌ی فاز ۱؛ docs/design.md
 * «زنجیر پلیمری»)، با این فرق‌ها: تعداد فصل از --n؛ فصل‌ها و نوار PE تا PC فقط از چشم پنهان (opacity)، نه از صفحه‌کلید و
 * صفحه‌خوان؛ و بعد از آن: «قیمت امروز {شهر}» و «شهر دیگر»، خط زیر دکمه‌ها، و بخش‌های زیر هیرو.
 * فقط در صفحه اصلی بار می‌شود (app/partials/head.php).
 */

/* ---------- هیرو (از phase1-v8) ---------- */
@property --intro-mask { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* هیروی صفحه اصلی: زنجیر مارپیچ + متن‌هایی که با اسکرول عوض می‌شوند (الگوی «داستان با اسکرول») */
.hero { position: relative; }
.hero__stage { position: relative; }
.hero__visual { position: relative; height: 62svh; min-height: 380px; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; pointer-events: none; }
.chain-canvas, .chain-static { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chain-static svg { width: 100%; height: 100%; }
/* سایه‌ی شعاعی نرم پشت زنجیر تا از صفحه‌های نورانی زمینه جدا شود؛ مرکزش همان جای زنجیر در layoutFor */
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 48% 58% at var(--chain-x, 31%) 46%, rgb(5 11 25 / 0.6), rgb(5 11 25 / 0.3) 55%, transparent 80%);
}
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--c-bg) 0, rgb(5 11 25 / 0) 18%),
    linear-gradient(to top, var(--c-bg) 0, rgb(5 11 25 / 0.9) 34%, rgb(5 11 25 / 0) 62%);
}
@media (max-aspect-ratio: 21/20) {
  .hero__shade { background: radial-gradient(ellipse 72% 36% at 52% 40%, rgb(5 11 25 / 0.6), rgb(5 11 25 / 0.3) 55%, transparent 80%); }
  /* عمودی: متن بخش بیشتری از ارتفاع را می‌گیرد؛ سایه‌ی پایین بلندتر تا پاراگراف روی زنجیر خوانا بماند */
  .hero__scrim {
    background:
      linear-gradient(to bottom, var(--c-bg) 0, rgb(5 11 25 / 0) 18%),
      linear-gradient(to top, var(--c-bg) 0, rgb(5 11 25 / 0.9) 40%, rgb(5 11 25 / 0) 70%);
  }
}

/* حالت پشت‌سرهم (بدون جاوااسکریپت یا صفحه‌ی خیلی کوتاه): فصل‌ها پشت سر هم و همه خوانا */
.hero__chapters { display: grid; gap: var(--sp-8); padding-block: var(--sp-6) var(--sp-8); }
.chapter { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 34rem; }
.hero-rail { display: none; }
.snap-points { display: none; }
/* هر حرکت اسکرول دقیقاً یک فصل جلو یا عقب می‌رود؛ فاصله‌ی نقطه‌ها همان ۷۸svh ارتفاع هر فصل است */
html.js-story { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
.js-story .snap-points { display: block; position: absolute; inset: 0; pointer-events: none; }
.js-story .snap-point { position: absolute; inset-inline: 0; top: calc(var(--i) * 78svh); height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }
/* snap فقط بین فصل‌های هیرو (دور هشتم اصلاحات): آخرین نقطه تا ته صفحه کشیده می‌شود (--snap-tail از جاوااسکریپت)
   تا بعد از آخرین فصل اسکرول آزاد باشد؛ بعد از رد شدن از آن snap کاملاً خاموش است (html.snap-free) و با برگشتن به هیرو دوباره روشن می‌شود. */
.js-story .snap-point:last-child { height: calc(100svh + var(--snap-tail, 0px)); }
html.js-story.snap-free { scroll-snap-type: none; }

/* حالت داستان: صحنه ثابت می‌ماند و فقط متن فصل فعال دیده می‌شود */
.js-story .hero { height: calc(var(--n, 7) * 78svh + 22svh); } /* --n: تعداد فصل‌ها (home-hero.php) */
.js-story .hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.js-story .hero__visual { position: absolute; inset: 0; height: auto; min-height: 0; }
/* فقط خود زنجیر کم‌رنگ می‌شود؛ سایه‌ی شعاعی و گرادیان پایین همیشه کامل می‌مانند تا زمینه‌ی این فصل‌ها روشن‌تر نشود */
.js-story .hero__canvas { transition: opacity 900ms var(--ease-out-expo); }
.js-story .hero[data-dim] .hero__canvas { opacity: 0.4; }
.js-story .hero[data-intro] .hero__canvas { opacity: 0.2; }
/* گوشی و تبلت عمودی، فصل اول: زنجیر بالای تیتر پررنگ‌تر (۰٫۵۵) و پیش از رسیدن به تیتر محو می‌شود (۶۰ پیکسل بالای لبه‌ی H1 تا ۴۴ پیکسل پایین آن).
   --h1-top جای واقعی H1 است (جاوااسکریپت، بعد از لود فونت و با هر تغییر اندازه). در فصل‌های دیگر همین mask به پایین صفحه رانده می‌شود
   (--intro-mask با @property نرم عوض می‌شود)، پس رفتن به فصل دوم و برگشت پرش ندارد. کامپیوتر همان ۰٫۲ می‌ماند. */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .js-story .hero__canvas {
    --intro-mask: 120svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--h1-top, 60svh) - 60px + var(--intro-mask)), rgb(0 0 0 / 0.3) calc(var(--h1-top, 60svh) + 4px + var(--intro-mask)), transparent calc(var(--h1-top, 60svh) + 44px + var(--intro-mask)));
    mask-image: linear-gradient(to bottom, #000 calc(var(--h1-top, 60svh) - 60px + var(--intro-mask)), rgb(0 0 0 / 0.3) calc(var(--h1-top, 60svh) + 4px + var(--intro-mask)), transparent calc(var(--h1-top, 60svh) + 44px + var(--intro-mask)));
    transition: opacity 900ms var(--ease-out-expo), --intro-mask 900ms var(--ease-out-expo);
  }
  .js-story .hero[data-intro] .hero__canvas { opacity: 0.55; --intro-mask: 0px; }
}
/* فاز ۵: نوار فقط از چشم پنهان است، تا با Tab به آن رسید؛ با فوکوس روی یکی از دکمه‌ها ظاهر می‌شود */
.js-story .hero[data-rail-off] .hero-rail:not(:focus-within) { opacity: 0; pointer-events: none; }
.js-story .hero:not([data-rail-off]) .hero-rail { transition-delay: 0s; }
.js-story .hero__chapters {
  position: absolute; inset: auto 0 0 0; display: grid; gap: 0;
  padding-block: 0 calc(var(--mobile-bar-h) + var(--sp-6) + env(safe-area-inset-bottom, 0px));
}
.js-story .chapter {
  grid-area: 1 / 1; align-self: end;
  /* فاز ۵: فصل غیرفعال فقط از چشم پنهان است (opacity)، نه از صفحه‌خوان و صفحه‌کلید؛ صفحه‌خوان همه‌ی فصل‌ها را
     به ترتیب می‌خواند و با Tab روی لینک هر فصل، home.js صفحه را به همان فصل می‌برد */
  opacity: 0; pointer-events: none; transform: translateY(24px); filter: blur(4px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform 900ms var(--ease-out-expo), filter var(--dur-slow) var(--ease-out-expo);
}
.js-story .chapter.is-active {
  opacity: 1; pointer-events: auto; transform: none; filter: none;
  transition-delay: 120ms, 120ms, 120ms;
}
@media (min-width: 1024px) {
  .js-story .hero__chapters { padding-bottom: 11svh; }
  /* فاز ۵: خط هیرو (۲۲ + فاصله‌ی ۱۶ − ۴ = ۳۴ پیکسل) H1 را بالا نمی‌برد؛ فصل اول همان‌قدر پایین‌تر می‌نشیند و H1 همان جای phase1-v8 است
     (فقط راهنمای اسکرول به لبه‌ی پایین نزدیک‌تر می‌شود؛ ۵۴ پیکسل در ۱۲۸۰×۸۰۰) */
  .js-story .chapter[data-chapter="0"]:has(.hero-line) { margin-bottom: calc(-1 * (var(--fs-sm) * 1.6 + var(--sp-4) - var(--sp-1))); }
}

/* تیترها مثل تصویر نمونه: بزرگ، سبک و فشرده */
.chapter__title { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem); font-weight: var(--fw-light); line-height: 1.18; letter-spacing: -0.01em; }
.chapter__name { font-size: var(--fs-display); font-weight: var(--fw-light); line-height: 1.1; letter-spacing: -0.01em; }
.chapter__title .strong { display: block; }
.chapter[data-chapter="0"] { max-width: 46rem; }
.chapter__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); color: var(--c-text-2); }
.chapter__meta .ltr { color: var(--c-violet-text); letter-spacing: 0.14em; font-weight: var(--fw-medium); }
.chapter__meta span + span { padding-inline-start: var(--sp-4); border-inline-start: 1px solid var(--c-line-strong); }
.chapter__text { color: var(--c-text-2); max-width: 30rem; }
.chapter__link {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); align-self: flex-start;
  color: var(--c-text); text-decoration: none; border-bottom: 1px solid var(--c-line-strong);
}
.chapter__link:hover { color: var(--c-text); }
/* hover (فقط نشانگر دقیق): خط زیر لینک با گرادیان لوگو از راست کشیده می‌شود (۳۰۰ms) و فلش ۴ پیکسل جلو می‌رود */
.chapter__link::after {
  content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--grad-brand-line);
  transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease);
}
.chapter__link .icon { width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease); }
/* همه‌ی دستگاه‌ها: وقتی فصل یک پلیمر فعال می‌شود، بعد از ظاهر شدن متنش خط یک بار کشیده می‌شود (is-drawn از اسکریپت پایین) */
.chapter__link.is-drawn::after { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .chapter__link:hover::after, .chapter__link:focus-visible::after { transform: none; }
  .chapter__link:hover .icon, .chapter__link:focus-visible .icon { transform: translateX(-4px); }
}
.chapter .btn-row { max-width: 26rem; }
@media (min-width: 1024px) {
  .chapter .btn-row { max-width: none; }
  .chapter .btn-row > .btn { flex: 0 0 auto; }
}
/* کامپیوتر: دنباله‌ی زنجیر نزدیک لبه‌ی چپ نرم محو می‌شود تا در هیچ چرخشی از زیر نوار PE تا PC رد نشود */
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 500px) {
  .js-story .hero__canvas {
    -webkit-mask-image: linear-gradient(to right, transparent 90px, #000 230px);
    mask-image: linear-gradient(to right, transparent 90px, #000 230px);
  }
}
/* پوشش ارسال: سه ردیف فشرده (منطقه، شرایط، لینک قیمت) */
.coverage { list-style: none; display: grid; max-width: 30rem; }
.coverage__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--sp-4);
  padding-block: var(--sp-3); border-top: 1px solid var(--c-line);
}
.coverage__row:last-child { border-bottom: 1px solid var(--c-line); }
.coverage__name { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.coverage__meta { font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text-3); }
.coverage__facts { line-height: 1.6; color: var(--c-text-2); }
.coverage__facts span { white-space: nowrap; }
/* صفحه‌ی کوتاه: توضیح انبار حذف و تیتر کوچک‌تر، تا فصل زیر هدر نرود */
@media (max-height: 700px) {
  .coverage__meta { display: none; }
  #coverage .chapter__title { font-size: var(--fs-xl); }
  .js-story .scroll-hint { display: none; }
}
/* فاز ۵: «، » میان زمان تحویل و حداقل سفارش متن واقعی HTML است (برای گوگل و صفحه‌خوان)، نه content در CSS */
.coverage__meta, .coverage__facts { grid-column: 1 / -1; }
.coverage .chapter__link { grid-column: 2; grid-row: 1; font-size: var(--fs-sm); }
@media (min-width: 1024px) { #coverage { max-width: none; } #coverage .chapter__title { white-space: nowrap; } }
.scroll-hint { display: none; align-items: center; gap: var(--sp-3); color: var(--c-text-3); font-size: var(--fs-sm); }
.js-story .scroll-hint { display: inline-flex; }
/* سه فلش رو به پایین که پشت سر هم روشن می‌شوند (چرخه‌ی ۱٫۵ ثانیه، تأخیر ۰، ۰٫۲ و ۰٫۴)؛ از ظاهر شدن متن فصل اول
   تا وقتی فصل اول فعال است بی‌وقفه پخش می‌شود؛ با رفتن به فصل دیگر یا بیرون رفتن هیرو از دید (hero[data-hint-off]) می‌ایستد
   و با برگشتن به فصل اول دوباره از سر پخش می‌شود (دور دهم) */
.scroll-hint__arrows { display: inline-grid; justify-items: center; line-height: 0; color: var(--c-cyan-hover); }
.scroll-hint__arrows .icon { width: 18px; height: 18px; stroke-width: 2; opacity: 0.35; animation: hint-cascade 1.5s linear infinite; }
.hero[data-hint-off] .scroll-hint__arrows .icon { animation: none; }
.scroll-hint__arrows .icon + .icon { margin-top: -9px; }
.scroll-hint__arrows .icon:nth-child(2) { animation-delay: 0.2s; }
.scroll-hint__arrows .icon:nth-child(3) { animation-delay: 0.4s; }
@keyframes hint-cascade { 0%, 100% { opacity: 0.35; } 30% { opacity: 1; } 60% { opacity: 0.35; } }

/* نوار پیشرفت پلیمرها (میان‌بر هم هست) */
.js-story .hero-rail {
  display: flex; flex-direction: column; position: absolute; z-index: 2;
  transition: opacity var(--dur-slow) var(--ease);
  inset-inline-end: max(12px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%);
  list-style: none;
}
.hero-rail button {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); min-width: var(--tap); min-height: var(--tap);
  background: none; border: 0; padding: 0; color: var(--c-text-2); font-size: var(--fs-sm); letter-spacing: 0.12em;
  text-shadow: 0 0 6px var(--c-bg), 0 0 12px var(--c-bg);
  transition: color var(--dur) var(--ease);
}
.hero-rail button::after { content: ""; width: 10px; height: 1px; background: currentColor; transition: width var(--dur-slow) var(--ease-out-expo), background-color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .hero-rail button:hover { color: var(--c-text); } }
.hero-rail button[aria-current="step"] { color: var(--c-text); }
.hero-rail button[aria-current="step"]::after { width: 28px; background: var(--c-cyan); }
/* گوشی و تبلت عمودی: نوار افقی درست زیر هدر؛ زنجیر از زیر آن شروع می‌شود (CLEAR در polymer-chain.js) و با متن هم همپوشانی ندارد */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .js-story .hero-rail {
    flex-direction: row; gap: var(--sp-1); top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); transform: none;
    inset-inline: max(20px, env(safe-area-inset-right, 0px)) auto;
  }
  .hero-rail button { flex-direction: column; justify-content: center; gap: 2px; }
  .hero-rail button[aria-current="step"]::after { width: 22px; }
}

/* «کاهش حرکت» (دور نهم): متن فصل‌ها بدون جابه‌جایی و تاری فقط محو و ظاهر می‌شود؛ حرکت‌های ریز همه مثل حالت عادی */
@media (prefers-reduced-motion: reduce) {
  .js-story .chapter, .js-story .chapter.is-active { transform: none; filter: none; transition: opacity 150ms linear; }
  .js-story .chapter.is-active { transition-delay: 0s; }
}

/* ---------- فاز ۵: دکمه‌های فصل اول ---------- */
/* «قیمت امروز {شهر}» فقط برای بازدیدکننده‌ای که قبلاً صفحه‌ی شهری را دیده (data-last-city روی <html> از اسکریپت head، پیش از
   اولین نمایش؛ پس جابه‌جایی دیده نمی‌شود). نام هر سه شهر در HTML هست و فقط یکی با CSS نشان داده می‌شود؛ display:none از صفحه‌خوان هم پنهان است. */
.hero-cta__city, .hero-other { display: none; }
html[data-last-city="mashhad"] .hero-cta__city[data-city="mashhad"],
html[data-last-city="tehran"] .hero-cta__city[data-city="tehran"],
html[data-last-city="isfahan"] .hero-cta__city[data-city="isfahan"] { display: inline; }
/* «شهر دیگر»: همان برگه‌ی «قیمت امروز کدام شهر؟»، در همان ردیف دکمه‌ی اصلی (گوشی هم)، تا صفحه‌ی اول بلندتر نشود */
html[data-last-city] .hero-other { display: inline-flex; flex: 0 0 auto; padding-inline: var(--sp-4); }
.hero-cta-row > .hero-cta { min-width: 0; }
/* خط زیر دکمه‌ها (حالت «ج»، ۲۰ آبان ۱۴۰۵): متن ساده، رقم فارسی، فقط فصل اول */
.hero-line { font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text-3); margin-top: calc(-1 * var(--sp-1)); }
/* گوشی کوتاه (ارتفاع تا ۷۰۰، مثل ۳۶۰×۶۴۰): خط هیرو حدود ۳۵ پیکسل جا می‌گیرد و H1 را بالا می‌برد؛ همان‌قدر از فاصله‌ی زیر فصل‌ها
   و میان اجزای فصل اول کم می‌شود تا نوار باریک زنجیر بالای تیتر مثل phase1-v8 بماند (اندازه‌گیری: tools/shots/phase5.py first) */
@media (max-height: 700px) and (max-width: 1023px) and (orientation: portrait) {
  .js-story .hero__chapters { padding-bottom: calc(var(--mobile-bar-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
  .js-story .chapter[data-chapter="0"] { gap: var(--sp-3); }
}

/* ---------- بخش‌های زیر هیرو (هیچ‌کدام snap ندارند) ---------- */
/* هیرو scroll-padding صفحه را صفر می‌کند (نقطه‌های snap از بالای صفحه)؛ پرش به #products، #prices و #why زیر هدر نرود */
.js-story #main > section:not(.hero) { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.home-intro .lead { max-width: var(--measure); }

/* پنج کارت پلیمر: گوشی ردیف فشرده با عکس ۱۲۰×۹۰ کنار متن؛ از ۶۴۰ دو ستون؛ کامپیوتر پنج ستون با عکس بالا. کل کارت یک لینک است. */
.polymer-tiles { list-style: none; display: grid; gap: var(--sp-3); }
.polymer-tile {
  position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-4); align-items: center;
  padding: var(--sp-3); 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);
}
.polymer-tile__img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--r-sm); background: var(--c-surface-2); }
.polymer-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.polymer-tile__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.polymer-tile__link { color: var(--c-text); text-decoration: none; }
.polymer-tile__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.polymer-tile__link:focus-visible { outline: none; }
.polymer-tile:has(.polymer-tile__link:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.polymer-tile__code { color: var(--c-violet-text); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.12em; margin-inline-start: var(--sp-1); }
.polymer-tile__types, .polymer-tile__count { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.6; }
.polymer-tile__count { color: var(--c-text-3); }
.polymer-tile__more { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-violet-text); }
.polymer-tile__more .icon { width: 14px; height: 14px; transition: transform 200ms var(--ease); }
.polymer-tile:has(.polymer-tile__link:active) { background: var(--c-surface-2); }
@media (hover: hover) and (pointer: fine) {
  .polymer-tile:hover { border-color: var(--c-line-strong); }
  .polymer-tile:hover .polymer-tile__more .icon { transform: translateX(-4px); }
}
@media (min-width: 640px) { .polymer-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .polymer-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .polymer-tile { grid-template-columns: 1fr; align-items: start; align-content: start; padding: 0 0 var(--sp-4); overflow: hidden; }
  .polymer-tile__img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-md) var(--r-md) 0 0; }
  .polymer-tile__body { padding-inline: var(--sp-4); }
}

/* ارسال: یک خط با لینک /shipping/ (۲۲ آبان ۱۴۰۵؛ پوشش کامل در فصل آخر هیرو و سؤال ۴) */
.home-ship-line { padding-block: var(--sp-6); }
.ship-line { max-width: 46rem; font-size: var(--fs-md); color: var(--c-text); }
.ship-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; }
.ship-line .icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .ship-line a:hover { color: var(--c-text); } }

/* خلاصه‌ی قیمت گریدهای پرفروش: جدول واقعی (role صریح در HTML)؛ کامپیوتر جدول با zebra و hover، گوشی ردیف فشرده */
.summary-meta { color: var(--c-text-3); font-size: var(--fs-sm); margin-top: calc(-1 * var(--sp-3)); margin-bottom: var(--sp-4); }
.summary-table { width: 100%; max-width: 46rem; border-collapse: collapse; }
.summary-table th, .summary-table td { padding: var(--sp-2) var(--sp-4); text-align: start; vertical-align: middle; }
.summary-table thead th { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-3); border-bottom: 1px solid var(--c-line-strong); padding-block: var(--sp-3); }
.summary-table td { white-space: nowrap; }
.summary-table tbody tr:not(.summary-table__group) { border-bottom: 1px solid var(--c-line); }
.summary-table__group th { padding-top: var(--sp-5); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.summary-table__group a { color: var(--c-violet-text); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3em; min-height: var(--tap); }
.summary-table__grade { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); color: var(--c-text); text-decoration: none; }
.summary-table__grade .ltr { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.summary-table__producer { color: var(--c-text-2); font-size: var(--fs-sm); }
.summary-table tbody th[scope="row"] { font-weight: var(--fw-regular); }
.summary-table a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
.summary-table tbody tr:has(.summary-table__grade:active) { background: var(--c-tile-press); } /* لمس: حالت فشردن مثل بقیه‌ی ردیف‌ها */
.summary-table__grade, .summary-table__group a { transition: color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .summary-table__grade:hover, .summary-table__group a:hover { color: var(--c-violet-text); }
  .summary-table tbody tr:not(.summary-table__group):hover { background: var(--c-tile-press); }
}
@media (min-width: 640px) {
  .summary-table tbody tr:not(.summary-table__group):nth-child(even) { background: rgb(242 247 255 / 0.025); }
}
/* گوشی (زیر ۶۴۰): هر گرید یک ردیف فشرده (کد و پتروشیمی، زیرش قیمت منطقه‌ها)؛ برچسب منطقه (data-label) فقط بالای قیمت‌های
   اولین گرید هر گروه، تا ردیف‌ها دوخطی بمانند */
@media (max-width: 639px) {
  .summary-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .summary-table, .summary-table tbody, .summary-table tr { display: block; }
  .summary-table__group th { display: block; padding: var(--sp-5) 0 0; }
  .summary-table tbody tr:not(.summary-table__group) {
    display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 0 var(--sp-3); padding-block: 0 var(--sp-3);
  }
  .summary-table tbody th[scope="row"] { grid-column: 1 / -1; display: block; padding: 0; }
  .summary-table td { display: flex; flex-direction: column; gap: 2px; padding: 0; white-space: normal; }
  .summary-table td::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--c-text-3); }
  .summary-table tbody tr:not(:nth-child(2)) td::before { display: none; }
}
.summary-cities { margin-top: var(--sp-5); max-width: 46rem; }

/* کانال‌های بله و تلگرام: کپسول دکمه‌ی دوم با آیکن رنگی رسمی (تنها استثنای پالت این‌جا؛ docs/design.md) */

/* چرا ما */
.why-list { list-style: none; display: grid; gap: var(--sp-4) var(--sp-6); }
@media (min-width: 720px) { .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .why-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why-list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* چهار مورد: یک ردیف، نه ۳+۱ */
}
.why-item { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--c-line-strong); }
.why-item__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.why-item p { color: var(--c-text-2); }
.why-item .more-link { margin-top: auto; }