@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   چینی بهداشتی کسری — بخش‌های صفحهٔ اصلی، نسخهٔ دوم
   ───────────────────────────────────────────────────────────────────────
   بر پایهٔ REDESIGN-V2.md. الگو از یزد استیل گرفته شده و به حالت روشن
   ترجمه شده — تصمیم کارفرما: «همان طرح، فقط حالت روشن».

   این فایل **بعد از** style.css بار می‌شود، پس هرجا لازم شد بر آن
   می‌چربد. هر جای این فایل که عمداً چیزی را بازنویسی می‌کند، همان‌جا
   توضیح دارد.

   قاعده‌های خانه — همان‌های style.css:
     • هیچ مقدار خامِ رنگ یا فاصله؛ فقط توکن‌های style.css
     • هیچ left/right فیزیکی؛ فقط inset-inline-* و margin/padding-*
     • هر انیمیشن، گاردِ هم‌وزنِ prefers-reduced-motion
     • وزن قلم هرگز بیش از ۷۰۰
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   ۱) ریتم بخش‌ها
   ═══════════════════════════════════════════════════════════════════════
   مرجع: ‎.section-base { height: 100vh }‎ — هر بخش دقیقاً یک صفحهٔ کامل.

   ولی ‎height‎ ثابت نمی‌گیریم، ‎min-height‎ می‌گیریم. دلیلش در خودِ CSS
   مرجع است: چند بخش را ‎height: unset !important‎ کرده‌اند، یعنی خودشان
   هم به قاعده وفادار نمانده‌اند — چون محتوای بلند در قابِ ثابت بریده
   می‌شود. با ‎min-height‎ همان ریتمِ «یک صفحه، یک بخش» را می‌گیریم بی
   آنکه هیچ‌جا محتوا قیچی شود.

   ‎100svh‎ نه ‎100vh‎: در سافاری موبایل ‎vh‎ ارتفاعِ بی نوار آدرس است، پس
   بخش همیشه کمی بلندتر از پنجره می‌شد و پایینش زیر نوار می‌ماند. */
.v2-section {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--sp-9);
  background: var(--white);
  overflow: clip;
}
/* بخش‌هایی که ذاتاً بلندند نباید به زور یک صفحه شوند */
.v2-section--auto { min-height: 0; }
.v2-section--alt  { background: var(--porcelain); }

/* ظرف داخلی — همان عرضِ ‎.container‎ ولی مستقل، تا اگر روزی عرضِ سایت
   عوض شد این بخش‌ها با آن بروند. */
.v2-inner {
  width: 100%; max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-width: 0;
}

/* سربرگ مشترک بخش‌ها */
.v2-eyebrow {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan-text);
  margin-block-end: var(--sp-4);
}
.v2-eyebrow::before {
  content: ""; flex: none;
  width: var(--sp-6); height: 1px;
  background: currentColor;
}
/* ‎.v2-eyebrow‎ یک فلکس است (خط + متن)، پس ‎text-align: center‎ ظرفِ
   والد رویش اثری ندارد — آیتم‌های فلکس با ‎justify-content‎ چیده
   می‌شوند. در بخش‌های چپ‌چین همان ‎flex-start‎ درست است؛ هرجا محتوا
   وسط‌چین است باید صریح گفته شود، وگرنه خط و متن به لبه می‌چسبند و
   بالانویس تنها عنصرِ ناهم‌ترازِ بخش می‌شود. */
.v2-hero__box .v2-eyebrow,
.v2-marks .v2-eyebrow { justify-content: center; }
.v2-title {
  font-size: clamp(var(--fs-2xl), 3.6vw, var(--fs-4xl));
  line-height: 1.25; color: var(--ink);
  margin-block-end: var(--sp-5);
}
.v2-lede { color: var(--ink-2); max-width: 62ch; margin-block-end: var(--sp-6); }


/* ═══════════════════════════════════════════════════════════════════════
   ۲) هیرو
   ═══════════════════════════════════════════════════════════════════════
   مرجع: عکس تمام‌صفحه، و متن **پایینِ قاب** (‎bottom: 12vh‎) نه وسطش.
   پردهٔ عکس نامتقارن است: بالا کاملاً شفاف، پایین کاملاً رنگِ بخش — پس
   عکس از بالا واضح دیده می‌شود و پایین در بخشِ بعدی حل می‌شود.

   در حالت روشن، «رنگِ بخش» سفید است، پس پرده به سفید محو می‌شود. */
.v2-hero {
  justify-content: flex-end;   /* متن ته قاب می‌نشیند */
  padding-block: 0 12svh;
  background: var(--porcelain);
}
.v2-hero__media {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.v2-hero__media img,
.v2-hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* عکس هیرو حالا افقیِ واقعی است (۲۵۶۰×۱۴۴۰، سالن تولید) و دیگر
     جابه‌جاییِ کادر لازم ندارد. یک‌سومِ پایینِ عکس عمداً کف خالیِ کارگاه
     است تا متن رویش بنشیند. */
  object-position: center;
}
/* بسترِ هدر — لایهٔ جدا، با ارتفاعِ مطلق
   ────────────────────────────────────
   روی صفحهٔ اصلی هدر روی عکس شناور است و متنش سفید می‌شود
   (‎--on-dark-2‎). با عکسِ تیرهٔ قبلی کار می‌کرد؛ عکسِ امروز سالنِ روشنِ
   کارخانه است. پیکسل‌های واقعیِ زیرِ هدر اندازه‌گیری شد: کنتراستِ
   لینک‌های منو بین ۱٫۱۷ و ۱٫۴۰ بود — یعنی عملاً خوانده نمی‌شدند، در
   حالی که ۴٫۵ لازم است. سایهٔ ۰٫۳۲ در پردهٔ اصلی برای این کار خیلی کم
   بود.

   ارتفاع بر حسب پیکسل است نه درصد: بلندیِ هدر ثابت است ولی بلندیِ هیرو
   با هر پنجره فرق می‌کند؛ درصد در یک اندازه جواب می‌داد و در بقیه نه.

   عددها حساب‌شده‌اند، نه سلیقه‌ای: سرمه‌ای ‎rgb(7,31,61)‎ با پوشش ۰٫۶۶
   حتی روی سفیدِ مطلق زمینه‌ای با روشناییِ ۰٫۱۵ می‌سازد و متن سفید
   ۵٫۳:۱ می‌گیرد. پایین‌ترین متنِ هدر روی ۱۲۰ پیکسل است و آن‌جا هم پوشش
   ۰٫۶۲ و کنتراست ۴٫۸ می‌ماند. یعنی خوانایی دیگر به عکس یا ویدیویی که
   کارفرما می‌گذارد بند نیست.

   ‎z-index‎ لازم است: ‎::before‎ در درختِ جعبه **پیش از** فرزندان می‌آید،
   پس بی آن، پرده زیر عکس رسم می‌شد — همان تلهٔ پردهٔ کارت محصول. */
.v2-hero__media::before {
  content: "";
  position: absolute; inset-inline: 0; inset-block-start: 0;
  height: 200px; z-index: 1;
  background: linear-gradient(180deg,
    rgba(7,31,61,.74) 0%,
    rgba(7,31,61,.66) 58%,
    rgba(7,31,61,.28) 80%,
    rgba(7,31,61,0) 100%);
}

/* پردهٔ نامتقارن — همان الگوی مرجع، وارونه برای زمینهٔ روشن */
.v2-hero__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  /* پردهٔ نامتقارن: بالا شفاف تا عکس دیده شود، پایین سفید تا متن بخوانَد.

     نسخهٔ پیشین یک «پنجرهٔ شفاف» بین ۲۲٪ و ۳۰٪ داشت و بالانویس دقیقاً
     همان‌جا می‌نشست. با عکس تیرهٔ قبلی تصادفاً کار می‌کرد؛ با هر عکس
     دیگری نه. اندازه‌گیری شد: کنتراست بالانویس ۳٫۱ بود، در حالی که متنِ
     ۱۲٫۵ پیکسلی به ۴٫۵ نیاز دارد.

     حالا پرده **پیش از شروع جعبهٔ متن** به سفیدیِ کامل می‌رسد. یعنی
     خوانایی دیگر به روشن یا تیره بودنِ عکس بند نیست — کارفرما می‌تواند
     هر عکسی (یا ویدیویی) بگذارد و متن همیشه خوانا بماند. */
  background: linear-gradient(
    180deg,
    /* بسترِ هدر دیگر اینجا نیست — لایهٔ ‎::before‎ بالاتر آن را با ارتفاع
       مطلق می‌سازد. اینجا فقط یک نشستِ خیلی ملایم می‌ماند تا مرزِ دو
       لایه دیده نشود. */
    rgba(7,31,61,.10) 0%,
    rgba(7,31,61,.05) 9%,
    /* پنجرهٔ عکس — نیمهٔ بالا دست‌نخورده، مثل مرجع.
       محوشدن پیش از شروع جعبهٔ متن کامل می‌شود تا خوانایی به روشن یا
       تیره بودنِ رسانه بند نباشد؛ کارفرما می‌تواند هر عکس یا ویدیویی
       بگذارد. */
    /* نقطهٔ ۳۹٪ اتفاقی نیست: جعبهٔ متن از همان‌جا شروع می‌شود و بالانویسِ
       فیروزه‌ای روشن‌ترین متنِ صفحه است. برای نسبت ۴٫۵ روی رنگ ‎#006F9E‎
       زمینه باید دست‌کم ‎rgb(231)‎ باشد، یعنی پرده ‎.89‎ — همین عدد. */
    rgba(255,255,255,0) 22%,
    rgba(255,255,255,.55) 33%,
    rgba(255,255,255,.90) 39%,
    var(--white) 48%,
    var(--white) 100%
  );
}
.v2-hero__box {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 750px;               /* عددِ خودِ مرجع */
  margin-inline: auto;
}
/* مدالِ روی خط */
.v2-hero__medallion {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  margin-block-end: var(--sp-4);
}
.v2-hero__medallion::before,
.v2-hero__medallion::after {
  content: ""; flex: 1 1 auto; height: 1px; min-width: 0;
}
.v2-hero__medallion::before { background: linear-gradient(to right, transparent, var(--line)); }
.v2-hero__medallion::after  { background: linear-gradient(to left,  transparent, var(--line)); }
.v2-hero__medallion img {
  flex: none;
  width: clamp(48px, 4.6vw, 60px); height: auto;
  padding: var(--sp-2);
  margin-inline: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-2);
}
/* جعبهٔ متن پیش‌تر ۷۷٪ قاب را می‌گرفت و از عکس چیزی نمی‌ماند. مرجع
   جعبه‌اش حدود ۴۰٪ است و عکس نیمهٔ بالا را دارد. اندازه‌ها اینجا جمع
   شده‌اند تا همان نسبت درآید — بی آنکه عنوان از درشت‌ترین بودن بیفتد. */
.v2-hero__box h1 {
  font-size: clamp(var(--fs-2xl), 4.2vw, 46px);
  line-height: 1.2; color: var(--ink);
  margin-block-end: var(--sp-3);
}
/* مرجع: ‎font-size: 24px; line-height: 54px‎ — درشت و بسیار بازفاصله.
   عیناً همان نسبت (۲٫۲۵) نگه داشته شده. */
.v2-hero__box .v2-lede {
  font-size: clamp(var(--fs-base), 1.5vw, 20px);
  line-height: 1.9;
  color: var(--ink-2);
  max-width: 56ch; margin-inline: auto;
  margin-block-end: var(--sp-5);
}
.v2-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }


/* ═══════════════════════════════════════════════════════════════════════
   ۳) دسته‌بندی — کروسل افقی
   ═══════════════════════════════════════════════════════════════════════
   مرجع سه پانلِ لبه‌به‌لبه و تمام‌قد دارد. ما پنج گروه داریم و کارفرما
   کروسل افقی خواست، پس پانل‌ها در یک ریلِ اسکرول‌شونده می‌نشینند.

   ریل با ‎scroll-snap‎ کار می‌کند و بی جاوااسکریپت هم قابل استفاده است:
   ‎home.js‎ فقط دکمه‌های قبل/بعد را زنده می‌کند. اگر اسکریپت نیامد،
   کاربر باز هم می‌تواند بکشد. */
.v2-cats { padding-block: 0; background: var(--ink); }
.v2-cats__rail {
  display: grid;
  grid-auto-flow: column;
  /* سه پانل در قاب، پنجمی از لبه پیداست — همان اشارهٔ «بازهم هست» */
  /* عرضِ ثابت، نه ‎minmax(0, …)‎.
     با ‎minmax(0, 33.33%)‎ کمینهٔ ستون صفر بود، پس مرورگر هر پنج پانل را
     در همان یک قاب جا می‌داد (۱۴۴۰÷۵ = ۲۸۸ پیکسل) و ریل اصلاً چیزی برای
     اسکرول نداشت — کروسل عملاً وجود نداشت. اندازه‌گیری شد. */
  grid-auto-columns: calc(100% / 3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  min-height: 100svh;
}
.v2-cats__rail::-webkit-scrollbar { display: none; }
/* ‎.reveal‎ کاشی را ۲۲ پیکسل پایین می‌بَرد و همان ۲۲ پیکسل ته ریل سرریز
   می‌شود (اندازه‌گیری: ‎scrollHeight − clientHeight = ۲۲‎). ‎overflow-y‎
   بسته است پس نوار اسکرول نمی‌آید، ولی کاشیِ در حال ورود از پایین بریده
   می‌شد. داخل ریل فقط محو می‌کنیم، جابه‌جا نه — همان کاری که برای ریل
   «مزیت‌های تولید» شد. */
.v2-cats__rail > .cat-tile.reveal { transform: none; }

/* پانل‌ها را markup دستی نمی‌سازد — ‎renderCatTiles()‎ در main.js آن‌ها را
   از آرایهٔ ‎CATEGORIES‎ می‌سازد، یعنی از پنل مدیریت. پس به‌جای نوشتن
   ساختار تازه، همان خروجی استایل می‌شود:

       <a class="cat-tile"> <img> <strong> <span.cat-tag> <span.cat-tile-count>

   این تصمیم عمدی است: اگر پانل‌ها را دستی می‌نوشتم، کارفرما دیگر
   نمی‌توانست گروه محصول را از پنل عوض کند یا گروه تازه اضافه کند — و
   خواستهٔ صریحش همین بود که همه‌چیز ویرایش‌پذیر باشد. */
.v2-cats__rail > .cat-tile {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  scroll-snap-align: start;
  min-width: 0;
  padding: var(--sp-8) var(--sp-6) var(--sp-9);
  text-align: center;
  /* خط جداکنندهٔ مویی بین پانل‌ها — مرجع فاصله ندارد، مرز دارد */
  border-inline-end: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
/* پردهٔ روی عکس، تا نوشته‌ها روی هر عکسی خوانده شوند */
/* پرده — سبک بالا، سنگین فقط جایی که متن هست
   ─────────────────────────────────────────────
   نسخهٔ اول یک شیبِ یکنواخت از ۴۵٪ تا ۸۸٪ بود و کلِ پانل را سرمه‌ای
   می‌کرد؛ با اندازه‌گیری معلوم شد **خودِ محصول تقریباً دیده نمی‌شود** و
   کروسل به یک لکهٔ سرمه‌ای تبدیل شده. حالا تا ۳۰٪ تقریباً شفاف است تا
   محصول دیده شود، و از ۶۶٪ به پایین — جایی که آیکن و نام و توضیح
   می‌نشینند — به ۸۶٪ می‌رسد تا متن سفید در بدترین حالت (عکسِ روشن) هم
   کنتراست کافی داشته باشد. */
.v2-cats__rail > .cat-tile::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(7,31,61,.14) 0%,
    rgba(7,31,61,.20) 30%,
    rgba(7,31,61,.52) 48%,
    rgba(7,31,61,.86) 66%,
    rgba(7,31,61,.94) 100%);
  transition: background var(--dur-mid);
}
/* نخستین ‎img‎ داخل کاشی، عکسِ گروه است و پس‌زمینهٔ پانل می‌شود.

   ‎z-index‎ مثبت است و این مهم است: نسخهٔ اول ‎-1‎ داشت تا «زیر پرده»
   برود، ولی ‎-1‎ یعنی پشتِ خودِ عنصر — و چون بخش دسته‌بندی زمینهٔ سرمه‌ای
   دارد، عکس پشتِ آن زمینه می‌رفت و پانل‌ها یکدست سرمه‌ای می‌شدند. حالا
   ترتیب لایه‌ها با اعداد مثبت است: عکس ۰، پرده ۱، نوشته ۲. */
.v2-cats__rail > .cat-tile > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* خاکستری ملایم، نه ۵۵٪: عکس محصول واقعی است و بی‌رنگ کردنش ارزشش را
     از بین می‌برد. اندازهٔ کافی هست که پانل‌ها یکدست دیده شوند. */
  filter: grayscale(.20) brightness(.92);
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-mid);
  /* نقطهٔ کانونیِ برش — «محصول باید وسط قاب باشد»
     ─────────────────────────────────────────────
     عکس‌ها ۱۲۰۰×۲۰۰۰ هستند (نسبت ۰٫۶) ولی قابِ کاشی در هر بریک‌پوینت
     نسبت دیگری دارد، پس ‎cover‎ ناچار می‌بُرد. با ‎۵۰٪ ۵۰٪‎ وسطِ عکس
     می‌ماند و در چند گروه خودِ محصول بیرونِ قاب می‌افتاد: در «دکور»
     کاسه کامل حذف شده بود و فقط بدنهٔ کابینت و بازتابِ کف می‌ماند
     (اندازه‌گیری در ۶۸۰ پیکسل: از ۲۷٫۵٪ تا ۷۲٫۵٪ ارتفاع عکس دیده می‌شد،
     و کاسه در ۳٪ تا ۲۰٪ است).

     محصول در هر عکس ارتفاع دیگری ایستاده، پس یک عدد برای همه جواب
     نمی‌دهد. مقدارها از روی جای واقعی محصول در هر فایل حساب شده‌اند تا
     محصول کامل داخل قاب و بالای پردهٔ متن بیفتد.

     نام ‎--tile-focus‎ است نه ‎--focus‎: ‎--focus‎ توکنِ رنگِ حلقهٔ فوکوس
     است (style.css سطر ۷۲) و اگر اینجا درصد بگیرد، ‎outline: 2px solid
     var(--focus)‎ روی همین کاشی‌ها بی‌اعتبار می‌شود و کاربر صفحه‌کلید
     دیگر نمی‌بیند کجاست. */
  object-position: 50% var(--tile-focus, 35%);
}
/* ‎data-cat‎ را ‎renderCatTiles()‎ می‌گذارد. گروهی که کارفرما تازه از پنل
   بسازد اینجا سطری ندارد و پیش‌فرضِ ۳۵٪ را می‌گیرد — بالانویسِ ملایمی که
   برای عکس‌های محصول‌محور امن است. */
.v2-cats__rail > .cat-tile[data-cat="cabinet"]  { --tile-focus: 100%; } /* کاسه در ۳۴٪..۷۹٪ */
.v2-cats__rail > .cat-tile[data-cat="pedestal"] { --tile-focus: 5%; }   /* روشویی در ۸٪..۵۲٪ */
.v2-cats__rail > .cat-tile[data-cat="toilet"]   { --tile-focus: 40%; }  /* فرنگی در ۸٪..۸۷٪ — بلندترین */
.v2-cats__rail > .cat-tile[data-cat="squat"]    { --tile-focus: 8%; }   /* ایرانی در ۱۵٪..۵۱٪ */
.v2-cats__rail > .cat-tile[data-cat="decor"]    { --tile-focus: 0%; }   /* دکور در ۳٪..۵۵٪ */
.v2-cats__rail > .cat-tile:hover > img,
.v2-cats__rail > .cat-tile:focus-visible > img {
  transform: scale(1.08);
  filter: grayscale(0) brightness(1);
}
.v2-cats__rail > .cat-tile:hover::before,
.v2-cats__rail > .cat-tile:focus-visible::before {
  background: linear-gradient(180deg,
    rgba(7,31,61,.06) 0%,
    rgba(7,31,61,.12) 30%,
    rgba(7,31,61,.46) 48%,
    rgba(7,31,61,.84) 66%,
    rgba(7,31,61,.94) 100%);
}

/* آیکن گروه — دو لایه، مثل مرجع
   ──────────────────────────────
   مرجع برای هر گروه دو گلیف دارد که در ۱٫۲ ثانیه در هم محو می‌شوند.
   اینجا دو لایه در یک SVG است: ‎.ic-a‎ خطی و همیشه دیده می‌شود، ‎.ic-b‎
   تو‌پُر و روی هاور پیدا می‌شود. عمداً «الف» محو نمی‌شود: روی عکسِ تیره،
   آیکنی که فقط سایهٔ تو‌پر است خوانده نمی‌شود و شکلش گم می‌شود. */
.cat-tile__icon { display: block; line-height: 0; }
.cat-tile__icon svg { display: block; margin-inline: auto; width: 48px; height: 48px; }
.cat-tile__icon .ic-a {
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cat-tile__icon .ic-b {
  fill: currentColor; stroke: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.v2-cats__rail > .cat-tile > .cat-tile__icon {
  position: relative; z-index: 2;
  margin-block-end: var(--sp-5);
  color: var(--on-dark);
  opacity: .88;
  transition: opacity var(--dur-mid), transform var(--dur-slow) var(--ease-out);
}
.v2-cats__rail > .cat-tile > .cat-tile__icon svg { width: 88px; height: 88px; }
.v2-cats__rail > .cat-tile > .cat-tile__icon .ic-b { color: var(--cyan); }

.v2-cats__rail > .cat-tile:hover > .cat-tile__icon,
.v2-cats__rail > .cat-tile:focus-visible > .cat-tile__icon {
  opacity: 1; transform: translateY(-4px);
}
.v2-cats__rail > .cat-tile:hover > .cat-tile__icon .ic-b,
.v2-cats__rail > .cat-tile:focus-visible > .cat-tile__icon .ic-b { opacity: .85; }

/* نامِ گروه
   ‎margin-block-start: auto‎ برداشته شد: خودِ کاشی ‎justify-content:
   flex-end‎ دارد، پس همه‌چیز از قبل کفِ پانل می‌نشیند. با ماندنش، فضای
   خالی بین آیکن و نام تقسیم می‌شد و آیکن از گروه جدا می‌افتاد. */
.v2-cats__rail > .cat-tile > strong {
  position: relative; z-index: 2;
  font-size: var(--fs-xl); font-weight: 700; color: var(--on-dark);
  transition: color var(--dur-fast);
}
.v2-cats__rail > .cat-tile:hover > strong { color: var(--cyan); }

/* یک خط توضیح */
.v2-cats__rail > .cat-tile > .cat-tag {
  position: relative; z-index: 2;
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm); color: var(--on-dark-2);
  min-height: 2lh;
}

/* «مشاهده گروه» — در مرجع یک دکمهٔ گردِ پیکان است. اینجا متن هست (و
   باید بماند، چون از پنل می‌آید)، پس متن و پیکان کنار هم می‌نشینند. */
.v2-cats__rail > .cat-tile > .cat-tile-count {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap);
  margin-block-start: var(--sp-5);
  padding-inline: var(--sp-5);
  border: 1px solid rgba(255,255,255,.36);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark);
  background: transparent;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.v2-cats__rail > .cat-tile > .cat-tile-count::after {
  content: ""; flex: none;
  width: 7px; height: 7px;
  border: 0 solid currentColor;
  border-inline-start-width: 1.6px; border-block-end-width: 1.6px;
  transform: rotate(45deg);
}
[dir="ltr"] .v2-cats__rail > .cat-tile > .cat-tile-count::after {
  border-inline-start-width: 0; border-inline-end-width: 1.6px;
  transform: rotate(-45deg);
}
.v2-cats__rail > .cat-tile:hover > .cat-tile-count {
  background: var(--cyan-text); border-color: var(--cyan-text);
  transform: translateY(-2px);
}

/* دکمه‌های ناوبری کروسل */
.v2-cats__nav {
  position: absolute; z-index: 2;
  inset-block-end: var(--sp-6); inset-inline-end: var(--gutter);
  display: flex; gap: var(--sp-2);
}
.v2-cats__prev, .v2-cats__next {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid rgba(255,255,255,.36);
  border-radius: var(--r-full);
  background: rgba(7,31,61,.55);
  color: var(--on-dark);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--dur-fast), opacity var(--dur-fast);
}
.v2-cats__prev:hover:not(:disabled), .v2-cats__next:hover:not(:disabled) {
  background: var(--cyan-text); border-color: var(--cyan-text);
}
.v2-cats__prev:disabled, .v2-cats__next:disabled { opacity: .32; cursor: default; }
.v2-cats__next svg { transform: scaleX(-1); }
[dir="ltr"] .v2-cats__prev svg { transform: scaleX(-1); }
[dir="ltr"] .v2-cats__next svg { transform: none; }
/* وقتی همه‌چیز جا شده، دکمه‌ای که کاری نمی‌کند بدتر از نبودنش است.
   ‎home.js‎ این کلاس را می‌زند — همان قرارداد ‎is-static‎ که ui.js دارد. */
.v2-cats.is-static .v2-cats__nav { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   ۴) دربارهٔ کسری
   ═══════════════════════════════════════════════════════════════════════
   مرجع: عکس از لبهٔ قاب می‌زند بیرون و حدود ۴۵٪ عرض را می‌گیرد؛ متن در
   سمت دیگر. */
.v2-about { background: var(--white); }
.v2-about .v2-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-8) var(--sp-9);
  align-items: center;
}
.v2-about__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.v2-about__media img { width: 100%; height: auto; display: block; }
/* توضیح عکس — پیش‌تر ‎sr-only‎ بود و متنش هم از قابِ قبلی مانده بود
   («روشویی کابینتی الوند · کد ۱۰۰۸») در حالی که عکس، خطِ تولید است.
   حالا هم درست است و هم دیده می‌شود: یک نوارِ باریک زیر عکس، با همان
   لحنِ توضیحِ نقشه در بخش مزیت‌ها تا صفحه یک زبان داشته باشد. */
.v2-about__media figcaption {
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid var(--line);
  background: var(--white);
  font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2);
}
.v2-about__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* سه عدد کلیدی، زیر متن */
.v2-about__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-6);
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line);
}


/* ═══════════════════════════════════════════════════════════════════════
   ۵) چرا کسری
   ═══════════════════════════════════════════════════════════════════════
   مرجع: ستون چپ عنوان + سه آیتم که هرکدام **فقط آیکن و عنوان** دارند
   (نه متنِ بدنه)؛ ستون راست یک تصویر بزرگ. */
.v2-feature { background: var(--porcelain); }
.v2-feature .v2-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--sp-8) var(--sp-9);
  align-items: center;
}
.v2-feature__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.v2-feature__item {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.v2-feature__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.v2-feature__icon {
  flex: none;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--cyan-wash);
  color: var(--cyan-text);
}
.v2-feature__icon svg { width: 26px; height: 26px; }
.v2-feature__item h3 { font-size: var(--fs-base); color: var(--ink); margin: 0; }
/* نقطه‌های صفحه‌بندیِ ریلِ مزیت‌ها را ‎home.js‎ فقط وقتی می‌سازد که ریل
   واقعاً کشیدنی باشد. اینجا پیش‌فرض پنهان است و فقط در نقطهٔ شکست موبایل
   (پایین همین فایل) دیده می‌شود — وگرنه با بزرگ‌شدن پنجره، نقطه‌هایی که
   دیگر به هیچ ریلی وصل نیستند زیر شبکهٔ چهارستونه می‌ماندند. */
.v2-feature .why-dots { display: none; }

.v2-feature__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-3); }
.v2-feature__media img { width: 100%; height: auto; display: block; }

/* حالتِ نقشه — قاب و سایه برداشته می‌شود.
   نقشه عکس نیست؛ اگر داخل کارتِ سایه‌دار بنشیند مثل تصویری می‌شود که
   کسی قاب گرفته. مرجع هم نقشه‌اش را روی زمینه رها کرده است. سایهٔ خودِ
   نقشه داخل SVG است (‎feDropShadow‎) و به شکل خشکی می‌چسبد نه به مستطیل. */
.v2-feature__media--map {
  border-radius: 0; box-shadow: none; overflow: visible;
  background: transparent;
}
.v2-feature__media--map img {
  max-width: 560px; margin-inline: auto;
  /* SVG بی‌متن است و رنگش ثابت؛ کمی روشن‌تر از زمینهٔ چینی می‌ماند */
  filter: saturate(.96);
}
/* قابِ نقشه — فقط بستری برای برچسبِ مرکز.
   برچسب داخل SVG نمی‌رود: آن‌وقت نه دوزبانه می‌شد نه از پنل ویرایش‌پذیر.
   درصدها از ‎CoverageMap::hubPercent()‎ می‌آیند و تا وقتی تصویرِ نقشه
   عوض نشود ثابت‌اند. */
.v2-feature__media--map .v2-map {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
}
.v2-feature__media--map .v2-map img { max-width: 100%; }

/* اینجا تنها جای فایل است که ‎left‎ فیزیکی درست است، نه ‎inset-inline‎.
   ۵۳٫۳٪ یک نقطه روی *عکس* است — عکسِ نقشه در حالت راست‌به‌چپ آینه
   نمی‌شود، پس مبدأ منطقی، برچسب را ۱۱۳ پیکسل آن‌طرفِ نشانِ یزد می‌برد.
   اندازه‌گیری شد. */
.v2-map__hub {
  position: absolute;
  /* خروجی ‎CoverageMap::hubPercent()‎ با مختصات دقیق کارخانه
     (لینک گوگل‌مپ خود کارفرما: ‎32.0123756 , 54.2344464‎) */
  top: 52.5%;
  left: 52.7%;
  transform: translate(0.9rem, -50%);
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 520px) {
  .v2-map__hub { font-size: 10px; padding: 0.1rem 0.45rem; transform: translate(0.5rem, -50%); }
}

/* نام مقصدها روی نقشهٔ پوشش.
   ‎Publisher::injectCoverageLabels‎ می‌سازدشان؛ درصدها از همان تصویرسازیِ
   نقطه‌ها می‌آیند، پس نام همیشه به نقطهٔ خودش چسبیده است. ‎left‎ فیزیکی
   است — همان استثنای ‎.v2-map__hub‎: عکسِ نقشه در راست‌به‌چپ آینه
   نمی‌شود. از برچسب مرکز ساده‌ترند (بی‌قاب، ریزتر) تا «یزد — کارخانه»
   همچنان بلندترین صدای نقشه بماند. */
.v2-map__dest {
  position: absolute;
  left: var(--x); top: var(--y);
  /* زیر نقطه؛ ۱۰px پایین‌تر از مرکزش تا با حلقهٔ رسیدنِ نور تنه نزند */
  transform: translate(-50%, 10px);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
  /* هالهٔ روشن دور حروف، تا روی خطِ مرز استان و سیمِ نوری هم خوانا بماند */
  text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 1px 3px #fff;
}
/* گلستان بالای نقطه‌اش می‌نشیند — پایین‌نشسته با «مازندران» تنه می‌زد */
.v2-map__dest--above { transform: translate(-50%, calc(-100% - 10px)); }
.v2-map__dest i { font-style: normal; }
@media (max-width: 520px) {
  .v2-map__dest { font-size: 8px; transform: translate(-50%, 6px); }
  .v2-map__dest--above { transform: translate(-50%, calc(-100% - 6px)); }
}

.v2-feature__media--map figcaption {
  margin-block-start: var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm); color: var(--ink-2);
}


/* ═══════════════════════════════════════════════════════════════════════
   نقشهٔ موقعیت — صفحهٔ «تماس»
   ═══════════════════════════════════════════════════════════════════════
   تصویر را ‎App\Services\LocationMap‎ می‌سازد و بی‌متن است؛ دو نشان و
   دو کارت اینجا رویش می‌نشینند.

   کارت‌ها روی هم چیده می‌شوند نه پشت سر هم: هر دو در یک خانهٔ گرید
   می‌نشینند، پس ارتفاعِ ظرف برابر بلندترینشان می‌ماند و عوض‌کردنِ نشان،
   بقیهٔ صفحه را بالا-پایین نمی‌پراند. */
.locmap {
  display: grid;
  gap: var(--sp-7);
  margin-block-start: var(--sp-7);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}
.locmap__frame { margin: 0; }
/* مبدأ نشان‌ها این ظرف است نه ‎<figure>‎: زیرنویس بیرونش می‌ماند، وگرنه
   درصدِ عمودی روی قابی بلندتر از خودِ تصویر حساب می‌شد و هر دو نشان
   حدود ۳۰ پیکسل پایین‌تر از نقطهٔ واقعیشان می‌نشستند. */
.locmap__canvas { position: relative; }
.locmap__canvas > img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.locmap__frame figcaption {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-2);
  line-height: 1.9;
}

/* ‎left‎ فیزیکی است و باید بماند — همان استثنای ‎.v2-map__hub‎: تصویر
   نقشه در حالت راست‌به‌چپ آینه نمی‌شود، پس مبدأ منطقی نشان را به نقطهٔ
   قرینه می‌برد. درصدها از ‎LocationMap::pins()‎ در markup تزریق می‌شوند. */
.locmap__pin {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  color: inherit;
}
/* سطحِ لمسی تا ۴۶ پیکسل باز می‌شود بی آنکه نشان بزرگ‌تر دیده شود —
   خودِ نقطه باید ریز بماند وگرنه ادعای دقتی می‌کند که ندارد. */
.locmap__pin::before {
  content: ""; position: absolute; inset: -8px; border-radius: var(--r-full);
}
.locmap__dot {
  display: block; width: 100%; height: 100%;
  border-radius: var(--r-full);
  background: var(--white);
  border: 3px solid var(--cyan-text);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast), border-color var(--dur-fast);
}
.locmap__pin.is-on .locmap__dot {
  background: var(--cyan-text);
  border-color: var(--white);
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(0, 173, 239, .28), var(--shadow-2);
}
.locmap__pin:hover .locmap__dot,
.locmap__pin:focus-visible .locmap__dot { transform: scale(1.18); }
.locmap__pin:focus-visible { outline: none; }
.locmap__pin:focus-visible .locmap__dot { box-shadow: var(--focus-ring), var(--shadow-2); }

/* برچسب زیر نقطه می‌نشیند نه کنارش: کنارِ نشانِ سمت راست، از قابِ تصویر
   بیرون می‌زد و کنارِ نشانِ سمت چپ، جهتش با زبان عوض می‌شد. */
.locmap__tag {
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.locmap__pin.is-on .locmap__tag {
  background: var(--cyan-text); border-color: var(--cyan-text); color: var(--white);
}

.locmap__cards { display: grid; }
.locmap__card {
  grid-area: 1 / 1;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-1);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease);
}
.locmap__card.is-on { opacity: 1; visibility: visible; }
.locmap__card > strong {
  display: block;
  font-size: var(--fs-lg); color: var(--ink);
}
.locmap__card > p {
  margin-block-start: var(--sp-3);
  color: var(--ink-2); line-height: 2;
}
.locmap__phone a { color: var(--ink); font-weight: 700; }
.locmap__links {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-block-start: var(--sp-5);
}

@media (max-width: 900px) {
  .locmap { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 520px) {
  .locmap__tag { font-size: 10px; padding: 0.1rem 0.45rem; }
  .locmap__pin { width: 24px; height: 24px; }
  .locmap__dot { border-width: 2.5px; }
  .locmap__links .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .locmap__dot, .locmap__card { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ۶) محصولات و ۷) گواهی‌ها
   ═══════════════════════════════════════════════════════════════════════ */
.v2-products { background: var(--white); }
.v2-products__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--sp-5);
  margin-block-end: var(--sp-7);
}
/* نوار دعوت، با عکس پشتش
   ────────────────────────
   ‎section-navy‎ زمینهٔ سرمه‌ای می‌دهد؛ عکس زیر همان زمینه می‌نشیند و یک
   پردهٔ سرمه‌ای رویش می‌آید تا نسبت کنتراست متن دست‌نخورده بماند. عکس
   حذف‌شدنی است: اگر بارگیری نشد، بخش دقیقاً همان چیزی می‌شود که قبلاً بود. */
.v2-cta { position: relative; overflow: clip; }
.v2-cta__media { position: absolute; inset: 0; z-index: 0; }
.v2-cta__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block;
}
.v2-cta__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,46,92,.90) 0%, rgba(10,46,92,.82) 100%);
}
.v2-cta > .v2-inner { position: relative; z-index: 1; }

/* نوار گواهی‌ها یکسره وسط‌چین است: ردیف نشان‌ها از قبل ‎margin-inline:
   auto‎ داشت، ولی عنوان و دکمه کنار می‌ماندند و بخش دو محورِ چیدمان
   پیدا می‌کرد. */
.v2-marks { background: var(--porcelain); }
.v2-marks .v2-inner { text-align: center; }
.v2-marks .v2-inner > .btn,
.v2-marks .v2-up > .btn { margin-inline: auto; }
.v2-marks__row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3) var(--sp-4);
  margin-block-end: var(--sp-7);
}
.v2-marks__item {
  padding: var(--sp-3) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}


/* ═══════════════════════════════════════════════════════════════════════
   ۸) ورودِ پلکانی
   ═══════════════════════════════════════════════════════════════════════
   مرجع از AOS با تأخیرهای ۱۲۰۰ تا ۲۴۰۰ میلی‌ثانیه استفاده می‌کند —
   آهسته و سینمایی. ما همان حس را با CSS می‌سازیم؛ ‎home.js‎ کلاس
   ‎is-in‎ را وقتی بخش دیده شد می‌زند. */
.v2-up { opacity: 0; transform: translateY(26px); }
.v2-up.is-in {
  opacity: 1; transform: none;
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay: calc(var(--seq, 0) * 130ms);
}
/* گاردِ هم‌وزن: با کاهش حرکت، محتوا از همان اول دیده می‌شود — نه اینکه
   پنهان بماند و منتظر اسکریپتی باشد که قرار نیست کاری کند. */
@media (prefers-reduced-motion: reduce) {
  .v2-up, .v2-up.is-in { opacity: 1; transform: none; transition: none; }
  .v2-cats__panel img.v2-cats__bg,
  .v2-cats__panel:hover img.v2-cats__bg,
  .v2-cats__cut, .v2-cats__panel:hover .v2-cats__cut,
  .v2-feature__item, .v2-feature__item:hover { transition: none; transform: none; }
  .v2-cats__rail { scroll-behavior: auto; }
  /* تغییرِ رنگ می‌ماند (حرکت نیست)، ولی جابه‌جایی و زمان‌بندی نه */
  .cat-tile__icon .ic-b,
  .v2-cats__rail > .cat-tile > .cat-tile__icon { transition: none; }
  /* این دو باید هم‌وزنِ اعلانِ اصلی باشند وگرنه بازنده‌اند: گاردِ عمومیِ
     style.css وزن ‎0,1,1‎ دارد و اعلان‌های همین فایل ‎0,2,1‎ و ‎0,3,0‎.
     یعنی با «کاهش حرکت» روشن، بزرگ‌شدن عکس کاشی و بالاپریدن دکمهٔ
     «مشاهده گروه» همچنان انیمیت می‌شدند. */
  .v2-cats__rail > .cat-tile > img,
  .v2-cats__rail > .cat-tile > .cat-tile-count { transition: none; }
  .v2-cats__rail > .cat-tile:hover > img,
  .v2-cats__rail > .cat-tile:focus-visible > img { transform: scale(1.02); }
  .v2-cats__rail > .cat-tile:hover > .cat-tile-count { transform: none; }
  .v2-cats__rail > .cat-tile:hover > .cat-tile__icon,
  .v2-cats__rail > .cat-tile:focus-visible > .cat-tile__icon { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ۹) واکنش‌گرایی
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── ≤ ۱۰۲۴: دو ستون به یک ستون ─── */
@media (max-width: 1024px) {
  .v2-about .v2-inner, .v2-feature .v2-inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  /* عکس بعد از متن می‌آید تا عنوان اول دیده شود */
  .v2-about__media, .v2-feature__media { order: 2; max-width: 620px; margin-inline: auto; }
  .v2-cats__rail { grid-auto-columns: 50%; }
  .v2-cats__rail > .cat-tile > .cat-tile__icon svg { width: 68px; height: 68px; }
}

/* ─── ≤ ۷۶۰: تک‌ستونه و پانل‌های عریض‌تر ─── */
@media (max-width: 760px) {
  .v2-section { padding-block: var(--sp-8); min-height: 0; }
  .v2-hero { min-height: 100svh; padding-block: 0 var(--sp-8); }
  /* هدر روی گوشی ۹۶ پیکسل است نه ۱۱۶، و قابِ هیرو هم کوتاه‌تر؛ با همان
     ۲۰۰ پیکسل، یک‌چهارمِ عکس تیره می‌شد. ۱۵۰ همان کنتراست را می‌دهد
     (پایین‌ترین متنِ هدر روی ۷۰ پیکسل است، یعنی پوشش ۰٫۶۸). */
  .v2-hero__media::before { height: 150px; }
  .v2-cats { padding-block: 0; }
  /* ۷۸٪ نه ۸۲٪: لبهٔ کاشیِ بعدی باید *به‌اندازهٔ کافی* پیدا باشد که
     کاربر بفهمد ادامه دارد. با ۸۲٪ فقط یک نوار باریک می‌ماند و مثل
     حاشیهٔ تیرهٔ تصویر دیده می‌شد، نه مثل کارتِ بعدی. */
  .v2-cats__rail { grid-auto-columns: 78%; min-height: 0; scroll-padding-inline-start: var(--gutter); }
  /* قابِ پرتره روی گوشی — یک تعریف، نه دو تا.
     با ارتفاعِ محتوامحور، کاشی افقی می‌شد (اندازه‌گیری: ۵۵۷×۴۱۹) و
     ‎cover‎ فقط ۴۵٪ ارتفاع عکسِ ۳:۵ را نشان می‌داد؛ یعنی بیشترِ محصول
     بریده می‌شد. با ۳:۴، ۸۰٪ ارتفاع عکس در قاب می‌ماند و ‎--tile-focus‎
     می‌تواند کارش را بکند.

     پیش‌تر همین قاعده دو بار در همین بلاک نوشته شده بود و ‎padding-block‎
     دومی، ‎padding‎ اولی را می‌بلعید — همان تلهٔ «تکرارِ هم‌وزن» که یک بار
     ریل مزیت‌ها را هم گرفت. یک تعریف، یک برنده. */
  .v2-cats__rail > .cat-tile {
    aspect-ratio: 3 / 4;
    padding: var(--sp-7) var(--sp-5) var(--sp-8);
    border-radius: var(--r-md);
    border-inline-end: 0;
  }
  /* روی گوشی، پرده باید سبک‌تر باشد: قاب کوچک است و محصول جای کمتری
     دارد؛ همان پردهٔ دسکتاپ اینجا کاشی را یکدست سرمه‌ای می‌کرد. */
  .v2-cats__rail > .cat-tile::before {
    background: linear-gradient(180deg,
      rgba(7,31,61,.10) 0%,
      rgba(7,31,61,.14) 34%,
      rgba(7,31,61,.46) 56%,
      rgba(7,31,61,.84) 74%,
      rgba(7,31,61,.92) 100%);
  }
  .v2-cats__rail > .cat-tile > .cat-tile__icon svg { width: 56px; height: 56px; }
  .v2-cats__rail > .cat-tile > .cat-tile__icon { margin-block-end: var(--sp-4); }
  /* ریلِ افقیِ «چرا کسری» پایین‌تر، کنار قاعدهٔ دسکتاپش نوشته شده — تا
     دو نسخهٔ هم‌وزن در دو جای فایل سر برنده‌شدن با هم نجنگند. */
  .v2-cats__panel { min-height: 76svh; padding: var(--sp-7) var(--sp-5) var(--sp-8); }
  .v2-hero__box .v2-lede { line-height: 2; }
  .v2-products__head { flex-direction: column; align-items: stretch; }
  /* ناوبری کروسل روی موبایل کنار می‌رود: انگشت خودش می‌کشد و دو دکمهٔ
     شناور جای محتوا را می‌گیرند. */
  .v2-cats__nav { display: none; }
}


/* نقطه‌های کروسل گروه‌ها — فقط موبایل.
   ‎home.js‎ (‎buildCatDots‎) می‌سازدشان. روی دسکتاپ دکمه‌های قبل/بعد
   هستند و این ردیف لازم نیست. */
.v2-cats__dots { display: none; }

@media (max-width: 760px) {
  .v2-cats__dots {
    /* ‎--sp-5‎ نه ‎--sp-3‎: ناحیهٔ لمسِ هر نقطه از دو طرف ۱۲ پیکسل بیرون
       می‌زند، پس فاصله باید دست‌کم ۲۴ باشد وگرنه ناحیه‌ها روی هم می‌افتند
       و ضربهٔ کاربر به نقطهٔ اشتباه می‌رسد (اندازه‌گیری: ۴ پیکسل
       هم‌پوشانی در هر چهار جفت). */
    display: flex; justify-content: center; gap: var(--sp-5);
    padding-block: var(--sp-4) var(--sp-5);
    background: var(--ink);
  }
  .v2-cats__dot {
    position: relative;
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: var(--r-full);
    background: rgba(255,255,255,.28);
    transition: background var(--dur-fast), width var(--dur-fast);
  }
  /* ناحیهٔ لمس ۳۲×۴۴، بی آنکه نقطه بزرگ دیده شود. عرضِ ۸ پیکسلیِ قبلی
     ناحیه‌ای ۲۴ پیکسلی می‌ساخت — زیر ۴۴ و بسیار زیر ‎--tap‎. */
  .v2-cats__dot::after { content: ""; position: absolute; inset: -18px -12px; }
  .v2-cats__dot.is-active { width: 22px; background: var(--cyan); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-cats__dot { transition: none; }
}

/* ─── ≤ ۴۰۰: تنگ‌ترین گوشی‌ها ─── */
@media (max-width: 400px) {
  .v2-cats__rail { grid-auto-columns: 90%; }
  .v2-cats__cut { width: min(80%, 200px); }
}

/* ─── چاپ ─── */
@media print {
  .v2-section { min-height: 0; padding-block: var(--sp-5); background: #fff; }
  .v2-hero__media, .v2-cats__nav { display: none !important; }
  .v2-up { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ۱۰) تنفسِ هدر
   ═══════════════════════════════════════════════════════════════════════
   اندازه‌گیری در ۱۴۴۰: نشان ۲۷۰ + منو ۵۷۴ + کنترل‌ها ۳۸۱ = ۱۲۲۵ از ۱۲۴۰،
   یعنی **۱۴ پیکسل** فضای آزاد در کل نوار. قرصِ شناور وقتی محتوایش تا لبه
   پر باشد دیگر شبیه یک شیء شناور نیست، شبیه نوارِ فشرده است.

   سه کار: نامِ لاتین از قرص می‌رود (خودِ لوگو داردش)، دکمهٔ تکراری تا
   ۱۶۰۰ پنهان می‌ماند، و فاصلهٔ گروه‌ها واقعی می‌شود. */
/* این دو فقط از ۱۲۰۰ به بالا. بی این قید، وزنشان (‎0,2,0‎) از قاعدهٔ
   فشرده‌سازیِ باندِ میانی در style.css (‎.main-nav { gap: 0 }‎، وزن
   ‎0,1,0‎) بیشتر بود و چون sections.css بعدتر بار می‌شود، آن قاعده هرگز
   اجرا نمی‌شد. اندازه‌گیری در ۱۰۲۴: ردیف هدر ۱۱۳۹ پیکسل می‌خواست و
   ۱۰۲۴ داشت؛ در نسخهٔ انگلیسی ۱۲۳۷ — یعنی کلید زبان ۱۸۲ پیکسل بیرونِ
   قاب می‌افتاد. و چون هدر ‎position: fixed‎ است، اسکرول‌باری هم نمی‌آمد
   که نشان دهد چیزی بیرون مانده: محتوا فقط دست‌نیافتنی می‌شد. */
@media (min-width: 1366px) {
  .site-header .header-row { gap: var(--sp-7); }
  .site-header .main-nav { gap: var(--sp-2); }
}

/* دکمهٔ «اخذ نمایندگی» تا ۱۶۰۰ نمی‌آید. پیش از این آستانه ۱۴۴۰ بود و
   دقیقاً در ۱۴۴۰ برمی‌گشت و همان ۱۴ پیکسل را می‌خورد. همین پیوند هم در
   منو هست و هم در پابرگ. */
@media (max-width: 1599px) {
  .header-cta { display: none; }
}

/* داخل قرصِ شناورِ صفحهٔ اصلی، نامِ لاتینِ زیر برند برداشته می‌شود:
   لوگو خودش همان را دارد و در نوارِ فشرده فقط ارتفاع می‌گیرد. */
body[data-page="home"] .site-header:not(.is-scrolled) .brand-text small { display: none; }
body[data-page="home"] .site-header:not(.is-scrolled) > .container {
  padding-inline: var(--sp-6);
}

/* ─── «چرا کسری»: فقط عنوان، بی متنِ بدنه ───
   در مرجع هر مزیت فقط یک آیکن و یک عنوان دارد. کارفرما هم صریح خواست
   متن کمتر و تصویر بیشتر. متنِ بدنه حذف نشده — از پنل می‌آید و در
   صفحهٔ ‎/about‎ کامل دیده می‌شود؛ فقط از صفحهٔ اصلی برداشته شده. */
.v2-feature .why-card p { display: none; }
/* رنگِ پیش‌فرضِ ‎.why-card‎ چینی است، چون در صفحه‌های داخلی روی زمینهٔ
   سفید می‌نشیند. اینجا زمینهٔ بخش هم چینی است و اندازه‌گیری نشان داد هر
   دو دقیقاً ‎rgb(245,247,250)‎ هستند — یعنی کارت اصلاً کارت دیده
   نمی‌شد و چهار مزیت مثل متنِ رها روی زمینه می‌ماندند. سفید + خطِ مویی،
   همان کاری که مرجع می‌کند. */
.v2-feature .why-card {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
}
/* روی هاور خودِ سایه مرز را می‌سازد؛ خط اضافه است. */
.v2-feature .why-card:hover { border-color: transparent; }

/* چیدمانِ ‎.why-grid‎ عمداً **فقط اینجا** نوشته می‌شود.
   پیش‌تر یک نسخه بالاتر در فصل واکنش‌گرایی بود و یک نسخه اینجا؛ هم‌وزن
   بودند و آنکه پایین‌تر بود برنده می‌شد، پس ریلِ موبایل هرگز اجرا نشد و
   دو ستونِ صفرپیکسلی کنار کارت‌ها می‌ماند — همان باگی که یک بار در
   ‎.product-grid‎ کارت‌ها را روی هم انداخت. یک نقطهٔ تغییر، یک برنده. */
@media (min-width: 761px) {
  .v2-feature .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}

/* ─── ≤ ۷۶۰: ریل افقی با نقطهٔ صفحه‌بندی ───
   مرجع هم زیر ۹۹۲ پیکسل همین را می‌کند. چهار کارتِ روی‌هم یک صفحهٔ کامل
   گوشی را می‌خورد و کاربر بخش را رد می‌کند.

   ‎grid-template-columns: none‎ حیاتی است: بی آن، ستون‌های صریحِ بالا
   می‌مانند، به صفر جمع می‌شوند و کارت‌ها داخلشان می‌افتند. */
@media (max-width: 760px) {
  .v2-feature .why-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: var(--sp-4);
    overflow-x: auto;
    /* ‎overflow-x: auto‎ محورِ عمودی را هم از ‎visible‎ به ‎auto‎ می‌بَرد.
       این ریل فقط باید افقی حرکت کند. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* لبه‌به‌لبه: کارت‌ها از کنارهٔ صفحه رد می‌شوند تا معلوم باشد ادامه دارد */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .v2-feature .why-grid::-webkit-scrollbar { display: none; }
  .v2-feature .why-card { scroll-snap-align: start; min-width: 0; }
  /* ورودِ کارت‌ها داخل ریل برداشته می‌شود.
     ‎.reveal‎ و انیمیشنِ ‎reveal-in‎ کارت را ۲۲ پیکسل پایین می‌بَرند و
     همان ۲۲ پیکسل داخل ریل یک اسکرولِ عمودیِ سرگردان می‌ساخت
     (اندازه‌گیری: ‎scrollHeight‎ ۱۴۷ در برابر ‎clientHeight‎ ۱۲۵).

     ‎overflow-y: hidden‎ بالا نوار را می‌بندد، ولی ریشه اینجاست: انیمیشن
     در آبشار بالاتر از اعلانِ ‎transform‎ می‌نشیند، پس تنها نوشتنِ
     ‎transform: none‎ کافی نبود و باید خودِ انیمیشن هم بسته شود. در ریلِ
     افقی هر بار یک کارت در دید است و این ورودِ عمودی چیزی به آن اضافه
     نمی‌کرد. */
  .v2-feature .why-card.reveal,
  .v2-feature .why-card.reveal.is-in { opacity: 1; transform: none; animation: none; }
  .v2-feature .why-dots { display: flex; margin-block-start: var(--sp-4); }
}


/* ═══════════════════════════════════════════════════════════════════════
   ۱۱) صفحه‌های داخلی — همان زبانِ بصریِ صفحهٔ اصلی
   ═══════════════════════════════════════════════════════════════════════
   خواستهٔ کارفرما: «همون طرح رو فقط حالت روشن پیاده‌سازی کن برای تمامی
   صفحات.»

   این فصل markup هیچ صفحه‌ای را عوض نمی‌کند. ۱۱۳ صفحهٔ دیگر — که نیمی
   دستی و نیمی ساختهٔ انتشارگرند — کلاس‌های قدیمی‌شان را نگه می‌دارند و
   اینجا همان کلاس‌ها به زبانِ نسخهٔ دوم ترجمه می‌شوند. دلیلش ساده است:
   بازنویسیِ markup در ۱۱۳ فایل، ۱۱۳ فرصت برای شکستن است؛ یک فصل CSS
   یک نقطهٔ تغییر دارد و با یک بازرسی سنجیده می‌شود.

   نکته: صفحه‌های داخلی عکس سربرگ ندارند و ما هم عکسی برایشان نداریم.
   پس سربرگشان روشن می‌ماند و فقط تایپوگرافی و تنفسش با هیرو یکی می‌شود
   — نه اینکه عکسی بی‌ربط زیرش گذاشته شود. */

/* ─── ۱۱٫۱ سربرگ صفحه ─── */
.page-hero {
  padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-8);
  background:
    radial-gradient(680px 320px at 50% -10%, var(--cyan-wash) 0%, transparent 62%),
    var(--porcelain);
  border-block-end: 1px solid var(--line);
}
.page-hero h1 {
  font-size: clamp(var(--fs-2xl), 4.2vw, var(--fs-4xl));
  line-height: 1.24;
}
.page-hero .lede {
  font-size: clamp(var(--fs-base), 1.3vw, 19px);
  line-height: 2.1;
  color: var(--ink-2);
}

/* ─── ۱۱٫۲ بالانویسِ یکسان ───
   صفحهٔ اصلی ‎.v2-eyebrow‎ دارد (خط کوتاه + حروف فیروزه‌ای)؛ صفحه‌های
   داخلی ‎.eyebrow‎ با یک نقطه. همان شکل به دومی هم داده می‌شود تا در کل
   سایت یک امضا دیده شود. نقطه پنهان می‌شود چون خط جایش را گرفته. */
/* همهٔ بالانویس‌های سایت، نه فقط آن‌هایی که در سربرگ صفحه یا سربرگ
   بخش‌اند: صفحه‌های محصول ساختار خودشان را دارند (‎.pp-*‎) و با قاعدهٔ
   محدود، بالانویسشان خاکستری می‌ماند و وسط سایت دو امضای متفاوت دیده
   می‌شد. ‎.v2-eyebrow‎ جدا تعریف شده و دست‌نخورده می‌ماند. */
.eyebrow {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan-text);
}
.page-hero .eyebrow { justify-content: center; }
.eyebrow .dot { display: none; }
.eyebrow::before {
  content: ""; flex: none;
  width: var(--sp-6); height: 1px;
  background: currentColor;
}

/* ─── ۱۱٫۳ سربرگ بخش‌ها ─── */
.section-head h2 {
  font-size: clamp(var(--fs-xl), 3.2vw, var(--fs-3xl));
  line-height: 1.28;
}
.section-head .section-sub {
  font-size: var(--fs-base); line-height: 2;
  color: var(--ink-2);
}

/* ─── ۱۱٫۴ تنفسِ بخش‌ها ───
   ریتمِ نسخهٔ دوم بازتر است. صفحه‌های داخلی محتوای کاری دارند (جدول،
   فرم، فهرست) پس ‎100svh‎ نمی‌گیرند — فقط فاصله‌شان با هیرو هم‌خانواده
   می‌شود. */
.section, .section-alt { padding-block: var(--sp-9); }
@media (max-width: 760px) {
  .section, .section-alt { padding-block: var(--sp-7); }
  .page-hero { padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-6); }
}


/* ═══════════════════════════════════════════════════════════════════════
   ۱۲) اصلاح‌های موبایلِ هیرو
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* مدالِ نشان روی موبایل برداشته می‌شود.
     در دسکتاپ فاصلهٔ زیادی با هدر دارد و امضای بصری است؛ در گوشی درست
     زیر لوگوی هدر می‌افتد و همان نشان دو بار پشت سر هم دیده می‌شود —
     که به‌جای تأکید، شلوغی است. */
  .v2-hero__medallion { display: none; }

  /* نام برند در عرض‌های تنگ دو خطی می‌شد و هدر را بلند و درهم می‌کرد.
     یک خط می‌ماند و اگر جا نشد، خودِ لوگو گویاست. */
  .brand-text strong { white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ۱۳) دو اصلاحِ چیدمان
   ═══════════════════════════════════════════════════════════════════════ */

/* ۱۳٫۱ — کارت‌های محصول روی هم می‌افتادند.
   ‎.product-grid‎ در style.css ستون‌های صریح دارد
   (‎repeat(auto-fit, minmax(210px, 1fr))‎). وقتی ‎features.js‎ همان عنصر را
   به ‎.slider-track‎ تبدیل می‌کند، ‎grid-auto-flow: column‎ اضافه می‌شود
   ولی ستون‌های صریح سرِ جایشان می‌مانند. ‎auto-fit‎ ستون‌های بی‌آیتم را به
   صفر جمع می‌کند، و دو کارت اول داخل همان ستون‌های صفرپیکسلی می‌افتند —
   عرض ۰، روی هم. اندازه‌گیری شد: ‎grid-template-columns: 0px 0px 218px…‎

   با ‎none‎ ستون صریحی نمی‌ماند و همه‌چیز از ‎grid-auto-columns‎ می‌آید. */
.product-grid.slider-track,
.cat-tiles.slider-track,
.cat-grid.slider-track { grid-template-columns: none; }

/* ۱۳٫۲ — نوار نشان‌ها مرتب شود.
   ردیف انعطافی با شش تراشهٔ نابرابر، ۲ و ۲ و ۱ و ۱ می‌شکست و ناهموار
   دیده می‌شد. شبکه، ردیف‌ها را هم‌ارتفاع و هم‌عرض می‌کند. */
.v2-marks__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  max-width: 900px;
  margin-inline: auto;
}
.v2-marks__item {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 520px) {
  .v2-marks__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}