/* ============================================================================
   asadaru-mobile.css — تجربهٔ موبایلِ آسادارو، بازطراحی‌شده از صفر (نه فشرده‌سازیِ دسکتاپ)
   ----------------------------------------------------------------------------
   دامنه: صفحهٔ اصلی — front-page.php («طرحِ C») + کرومِ مشترکش inc/design-c.php
   پیشوندِ توکن: ‎--dccm-*‎ (کوتاه‌شدهٔ «dcc mobile»)، هم‌راستا با پیشوندِ dcc-* موجود
   مبنا: برندبوک — سرمه‌ای #1B2A4A غالب، قرمز #C8102E فقط CTA + یک لهجه،
         سبز #2E7D5B فقط نشانهٔ «گیاهی»؛ تایپوگرافی روی مقیاسِ Major Third (×۱٫۲۵)؛
         فاصله‌گذاری روی پایهٔ ۸px.

   ⚠️ چرا این‌همه !important:
   front-page.php و inc/design-c.php («طرحِ C») تقریباً هر مقدارِ بصری را با
   ‎style=""‎ درون‌خطی می‌نویسند، نه کلاس. ویرایشِ PHP برای این ایجنت ممنوع است
   (تیمِ دیگری روی همان فایل‌ها کار می‌کند). در CSS، مقدارِ style="" درون‌خطی
   همیشه بر رویِ هر قاعدهٔ عادیِ شیت — با هر درجه از specificity — برنده است؛
   تنها اهرمِ باقی‌مانده !important است. سیاست‌ِ این فایل:
     ۱) هرجا مقدار در style="" درون‌خطی تنظیم نشده (مثلِ padding روی دکمهٔ
        «صفحه اصلی»ِ موبایل)، از یک قاعدهٔ عادی/افزایشی استفاده می‌شود — بدونِ
        !important — چون افزودنِ خاصیتِ تازه با هیچ‌چیزی تصادم ندارد.
     ۲) هرجا مقدار در style="" درون‌خطی از پیش تنظیم شده (مثلِ اندازهٔ فونتِ h1
        که global-base.css با !important به ۲۸px قفل کرده، یا max-width:560px
        رویِ ستونِ متنِ هیرو)، !important با یک کامنتِ توجیهیِ مجاور استفاده
        می‌شود.
   هر خط !important این‌جا یکی از همین دو دلیل را دارد؛ در ادامه نشانه‌گذاری شده.

   وابستگی به ‎:has()‎ (رفع‌شده): سکشنِ «سه ارزش» و سکشنِ «تریویِ امضا» در PHP
   قبلاً نه id داشتند و نه کلاس؛ این فایل با ‎section:has(article):not(#products)‎
   و ‎section:has(.dcc-figc)‎ آن‌ها را شناسایی می‌کرد. حالا front-page.php این دو
   <section> را با class="dcc-values" و class="dcc-legend" علامت‌گذاری کرده،
   پس این فایل مستقیماً همان کلاس‌ها را هدف می‌گیرد — دیگر به ‎:has()‎ نیازی نیست.

   ثبت‌شده برایِ گزارش: نقطه‌هایی که حتی با کلاس‌های تازه هم قابلِ حل نبود
   (نیازمندِ ویرایشِ inline style در PHP، فرا‌تر از حوزهٔ این ایجنت) در پایینِ
   فایل زیرِ «TODO(markup)» فهرست شده‌اند.
   ============================================================================ */

:root{
  /* پالت — عیناً از برندبوک، بدونِ رنگِ تازه */
  --dccm-navy:  #1B2A4A;
  --dccm-red:   #C8102E;
  --dccm-green: #2E7D5B;
  --dccm-ink:   #141A26;
  --dccm-white: #FFFFFF;
  --dccm-slate: #5A6173;
  --dccm-cloud: #F4F5F7;
  --dccm-border:#E4E7ED;

  /* فاصله — پایهٔ ۸px */
  --dccm-sp-1:8px; --dccm-sp-2:16px; --dccm-sp-3:24px;
  --dccm-sp-4:32px; --dccm-sp-5:40px; --dccm-sp-6:48px;

  /* تایپوگرافی — Major Third (×۱٫۲۵)، پایه ۱۶px، گردشده به مقیاسِ ۸px */
  --dccm-fs-body:1rem;      /* 16px — کفِ بدنهٔ متن؛ هرگز کمتر */
  --dccm-fs-h3:1.25rem;     /* 20px  = 16 × 1.25¹ */
  --dccm-fs-h2:1.5625rem;   /* 25px  = 16 × 1.25² */
  --dccm-fs-h1:2rem;        /* 32px  ≈ 16 × 1.25³ (31.25، گردشده) */
  --dccm-lh-body:1.75;
  --dccm-min-tap:44px;      /* حداقلِ هدفِ لمسی — WCAG 2.5.5/AA */
}

/* ============================================================================
   ۱) هدر و کشوی موبایل — هدفِ لمسی (فعال از همان بریک‌پوینتی که برگر ظاهر می‌شود)
   ============================================================================ */
@media (max-width:919px){

  /* برگر: ۴۳×۳۹px اندازه‌گیری‌شده (کمتر از ۴۴). min-height/min-width تازه‌اند
     (روی style="" درون‌خطی فقط padding هست، نه width/height) → بدونِ !important */
  .dcc-menu-btn{
    min-width:var(--dccm-min-tap);
    min-height:var(--dccm-min-tap);
  }

  /* «صفحه اصلی» / «ورود» در نوارِ فشردهٔ موبایل: ۳۶×۲۸ و ۲۵×۱۴ اندازه‌گیری‌شده —
     style="" درون‌خطی فقط font/color/text-decoration دارد، نه padding/display
     → افزودنِ این‌ها تصادمی ندارد، بدونِ !important.
     min-width تازه: «ورود» ۴۰٫۹px اندازه‌گیری‌شده بود — زیرِ آستانهٔ
     لمسیِ ۴۴px؛ «صفحه اصلی» از قبل ۵۲٫۳px است پس این خط رویش بی‌اثر است */
  .dcc-mob-home,
  .dcc-mob-login{
    display:inline-flex;
    align-items:center;
    min-height:var(--dccm-min-tap);
    min-width:var(--dccm-min-tap);
    padding-inline:var(--dccm-sp-1);
  }

  /* آیتم‌های کشو: خطِ اول و پیوندِ تماس از پیش ~۴۵px‌اند (کافی)؛ min-height فقط
     کف را تضمین می‌کند — خاصیتِ تازه، بدونِ !important */
  #dcc-mobile-nav > a{ min-height:var(--dccm-min-tap); display:flex; align-items:center; }
  .dcc-macc > summary{ min-height:var(--dccm-min-tap); }

  /* زیرآیتم‌های آکاردئون (دربارهٔ ما/کیفیت/…): ۳۱۹×۳۷ اندازه‌گیری‌شده — کمتر از
     ۴۴. min-height به‌تنهایی کافی است (padding را دست‌نخورده می‌گذارد، فقط قدِ
     جعبه را بالا می‌برد و با flex وسط‌چین می‌کند) → بدونِ !important */
  .dcc-macc__b a{
    min-height:var(--dccm-min-tap);
    display:flex;
    align-items:center;
  }

  /* دکمهٔ قرمزِ ته‌کشو: ۳۴۳×۴۱ اندازه‌گیری‌شده — کمی کمتر از ۴۴ */
  #dcc-mobile-nav .dcc-red{ min-height:var(--dccm-min-tap); }

  /* تراشه‌های فیلترِ محصولات: ۵۹×۳۵ اندازه‌گیری‌شده. اندازهٔ پایه از قاعدهٔ کلاسِ
     dcc-chip در استایلِ داخلِ design-c.php می‌آید (نه style="" درون‌خطی)، پس
     min-height تازه هم این‌جا کافی‌ست */
  #dcc-chips .dcc-chip{ min-height:var(--dccm-min-tap); }
}

/* ============================================================================
   ۱ب) نوارِ فشردهٔ موبایل زیرِ ۳۶۰px — رفعِ نیمهٔ راستِ سفید (سرریزِ افقیِ هدر)
   ----------------------------------------------------------------------------
   ریشهٔ قطعی (diag_320_root_cause.py @320×700, device_scale_factor=2, UAِ اندروید):
   .dcc-hd-row گریدِ سه‌ستونه‌ست (auto 1fr auto). ستونِ ۱ (لوگو، دست‌نخورده)
   طبیعتاً ۱۶۴٫۷px عرض می‌خواهد، ستونِ ۳ (.dcc-mob-quick) طبیعتاً ۱۶۵٫۲px —
   جمعاً ۳۲۹٫۹px + ۳۲px پدینگِ افقیِ ردیف (clamp(16px,4vw,32px) در ۳۲۰px کفِ
   ۱۶px می‌دهد) = ۳۶۱٫۹px، بیشتر از عرضِ ویوپورتِ ۳۲۰px. چون هر دو ستونِ auto
   زیرِ محتوایِ طبیعیِ خود جمع نمی‌شوند (۱fr وسط به صفر می‌رود ولی کافی نیست)،
   کلِ ردیفِ گرید پهن‌تر می‌شود و لِی‌اوت‌ویوپورتِ موبایل با آن رشد می‌کند
   (innerWidth از ۳۲۰ به ۳۴۷ می‌رود؛ اندازه‌گیری‌شده) — دقیقاً
   همان نیمهٔ راستِ سفید.
   ترکیبِ ستونِ ۳: «صفحه اصلی»(۵۲٫۳) + گپ(۱۴) + «ورود»(۴۰٫۹) + گپ(۱۴) +
   برگر(۴۴) = ۱۶۵٫۲. مقصرِ گزارش‌شده (.dcc-mob-quick و .dcc-menu-btn به‌عنوانِ
   عناصرِ سرریزکننده) درست بود، اما دلیلِ ریشه‌ای گپ+متنِ «صفحه اصلی» است، نه
   min-width:44px برگر — آن دست‌نخورده می‌ماند (طبقِ قید، پایین را ببین).
   راه‌حل: گپ را تنگ‌تر می‌کنیم و متنِ «صفحه اصلی» را به یک آیکنِ خانه تبدیل
   می‌کنیم (svg.dcc-mob-home-ic در design-c.php از پیش موجود است، فقط
   نمایش/عدمِ‌نمایشش این‌جا سوییچ می‌شود)؛ .dcc-menu-btn و min-width:44px آن
   کاملاً دست‌نخورده می‌مانند. توجه: سوییچِ آیکن/متن از نسخهٔ اولیهٔ این کامنت
   (که فقط زیرِ ۳۶۰px بود) به کلِ بازهٔ موبایل (≤۷۶۷px) تعمیم یافت — تسکِ #42
   بندِ ۱؛ قاعدهٔ فعلی در بلوکِ @media(max-width:767px) زیر است، نه این‌جا. */
  .dcc-mob-home-ic{ display:none; } /* پیش‌فرض دسکتاپ/فالبک — رویِ ۷۶۸px+ کلِ dcc-mob-quick از قبل display:none است (design-c.php)، پس بی‌اثر */

@media (max-width:767px){
  .dcc-mob-quick{ gap:10px !important; } /* درون‌خطی: gap:14px — با min-width:44 روی «ورود» بالا، ۳۶۰px+ هنوز سالم می‌ماند (اثبات: جدولِ پیش/پس) */

  /* تسکِ #42 بندِ ۱: لینکِ «صفحه اصلی» در کلِ بازهٔ موبایل (≤۷۶۷px) فقط آیکن باشد،
     نه فقط زیرِ ۳۶۰px. min-height/min-width:44px رویِ .dcc-mob-home (خطِ ۷۷-۸۴ همین
     فایل) از عرضِ محتوا مستقل است، پس حذفِ متن هدفِ لمسی را کوچک نمی‌کند. */
  .dcc-mob-home-ic{ display:inline-flex; }
  .dcc-mob-home-txt{ display:none; }
}
@media (max-width:359px){
  /* عرضِ حداقلیِ ردیفِ هدر: کاهشِ اضافیِ پدینگ + گپ برایِ عبور از ۳۲۰px با حاشیهٔ اطمینان.
     padding-inline خاصیتِ منطقی‌ست (نه left/right) — سایت پنج‌زبانه است */
  .dcc-hd-row{ padding-inline:12px !important; } /* درون‌خطی: padding shorthand با clamp(16px,4vw,32px) */
  .dcc-mob-quick{ gap:4px !important; }
  .dcc-mob-home{ padding-inline:4px !important; } /* درون‌خطی: padding-inline:8px */
  /* زیرنویسِ لاتینِ لوگو («ASA DARU · PHYTOGENICS»): با letter-spacing:2.2px عریض‌ترین
     عضوِ ستونِ ۱ است. en/ar/ru متنِ «صفحه اصلی»/«ورود» بلندتر از fa دارند (اندازه‌گیری‌شده:
     en «Login» ۵۰٫۶px در برابرِ fa «ورود» ۴۴px)؛ بدونِ این خط، ستونِ ۱ (لوگو) ثابت
     ۱۶۴٫۷px نگه‌داشتنِ حاشیهٔ اطمینان برایِ en/ar/ru را ممکن نمی‌کند. حذفش هیچ‌اطلاعاتی
     را از بین نمی‌برد چون نامِ برند در ردیفِ بالاش هست */
  .dcc-hd-logo-sub{ display:none; }
  .dcc-hd-row > a{ gap:8px !important; } /* درون‌خطی: gap:12px */
}

/* ============================================================================
   ۲) تایپوگرافی — نردبانِ Major Third برایِ موبایل
   ----------------------------------------------------------------------------
   global-base.css با «h1{font-size:28px!important} h2{...22px!important}
   h3{...18px!important}» همهٔ h1/h2/h3 سایت را — هیرو، کارتِ ارزش، عنوانِ
   سکشن — به یک اندازه صاف می‌کند؛ همان «فشرده‌سازیِ دسکتاپ» که برایِ موبایل رد شد.
   این بخش با selectorِ مشخص‌تر (نه !important بیشتر به‌تنهایی، بلکه specificity
   بالاتر + !important چون طرفِ مقابل هم !important است) نردبان را برمی‌گرداند.
   ============================================================================ */
@media (max-width:767px){

  /* H1 هیرو: در ۲۸px قفل‌شده بود (اندازه‌گیری‌شده)؛ می‌شود ۳۲px — نه ۵۲px دسکتاپ */
  section.dcc-hero h1{
    font-size:var(--dccm-fs-h1) !important; /* غالب بر h1{28px!important} */
    line-height:1.25;
  }

  /* عنوانِ واقعیِ سکشن‌ها (نه تیترِ کارت) — سبدِ محصولات/گونه‌ها/اثبات‌محوری/CTA/
     امضایِ گیاهی — هرکدام id یا کلاسِ پایدار دارند یا با :has(.dcc-figc) قابلِ
     شناسایی‌اند */
  #products h2,
  #species h2,
  #proof h2,
  #contact h2,
  .dcc-legend h2{
    font-size:var(--dccm-fs-h2) !important; /* غالب بر h2{22px!important} */
    line-height:1.3;
  }

  /* تیترِ کارت‌های «سه ارزش» — این‌ها معنایی h3 هستند نه h2 (خطایِ نشانه‌گذاریِ
     منبع)؛ article>h2 در کلِ صفحه فقط همین سه کارت را می‌گیرد چون کارتِ
     محصول از h3 استفاده می‌کند */
  article > h2{
    font-size:var(--dccm-fs-h3) !important; /* غالب بر h2{22px!important} */
    line-height:1.35;
  }

  /* بدنهٔ متن ≥16px با line-height سخاوتمند — فقط پاراگراف‌هایِ روایی، نه
     برچسب/تگ/فوت‌نوت/چشمِ لاتینِ eyebrow (که با [dir="ltr"] مشخص‌اند) */
  article > p:not([dir="ltr"]),                /* بدنهٔ کارتِ ارزش (۳ مورد) — عمداً بدونِ eyebrowِ
                                                   dir=ltr «۰۱ — REDUCE»؛ نبودِ این استثنا باعث می‌شد
                                                   برچسبِ ۱۱px با letter-spacing به ۱۶px/۱٫۷۵ بادکنکی شود
                                                   (اندازه‌گیری‌شده: پیش از این اصلاح ۳۲۸×۲۸px رندر می‌شد) */
  #proof p:not([dir="ltr"]),                   /* مقدمه + ۴ موردِ اثبات‌محوری */
  #contact p:first-of-type,                    /* پاراگرافِ اصلیِ CTA (نه فوت‌نوت) */
  .dcc-legend p:not([dir="ltr"])               /* مقدمهٔ تریویِ امضا */
  {
    font-size:var(--dccm-fs-body) !important; /* درون‌خطی shorthand «font» دارد */
    line-height:var(--dccm-lh-body) !important;
  }
}

/* ============================================================================
   ۳) هیرو — از «تصویرِ پس‌زمینه + رویهٔ مطلق» به چیدمانِ عمودیِ عادی
   ----------------------------------------------------------------------------
   ترتیبِ خواسته‌شده: چشم‌انداز (overline) ← تیترِ اصلی ← لید ← دو CTA ← آمار.
   خبرِ خوب: DOM از قبل دقیقاً همین ترتیب است (eyebrow، h1، p، دکمه‌ها، نوارِ
   آمار در آخر) — مشکل این‌ست که همه با position:absolute رویِ هم سوارِ عکس‌اند.
   این بخش فقط از absolute به static برمی‌گرداند تا ترتیبِ DOM به‌صورتِ طبیعی
   دیده شود؛ به تغییرِ ترتیب (order) نیازی نبود.

   بریک‌پوینت ۸۲۰px (نه ۷۶۷): design-c.php همان‌جا عکس را absolute+cover روی
   پس‌زمینهٔ #0A1220 می‌کند. اگر این بلوک فقط تا ۷۶۷ برود، در ۷۶۸–۸۲۰ نوارِ
   سیاه کنار/زیر عکس می‌ماند و آمار هم ۱×۴ می‌شود. !important لازم است چون
   قاعدهٔ ۸۲۰ در <style> تم بعد از این شیت هم می‌تواند بیاید.
   ============================================================================ */
@media (max-width:820px){

  /* هدر: در طرحِ دسکتاپ، «.dcc-hd--home» عمداً شفاف است چون هیرو زیرِ آن
     (margin-top:-72px) می‌لغزد و هدر رویِ خودِ عکس می‌نشیند. همین‌که هیرو را
     به جریانِ عادی برمی‌گردانیم (margin-top:0، چند خط پایین‌تر)، دیگر چیزی
     پشتِ هدر نیست جز سفیدیِ صفحه — پس هدر با متنِ سفیدش نامرئی می‌شود. این‌جا
     همان پسِ‌زمینهٔ solid را که خودِ هدر بعد از اسکرول می‌گیرد (رجوع به
     .dcc-hd در <style>) از همان ابتدا اجباری می‌کنیم. background در قاعدهٔ
     کلاسِ .dcc-hd--home:not(.dcc-solid) است (نه inline)، اما چون آن قاعده با
     :not() نوشته شده safest راه !important + انتخابگرِ معادل است */
  header.dcc-hd.dcc-hd--home{
    background:rgba(20,26,38,.92) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    backdrop-filter:blur(10px) !important;
    border-bottom-color:rgba(255,255,255,.10) !important;
  }

  /* کانتینر: سرمه‌ای پرکننده اگر contain کناره‌ای خالی گذاشت؛ overflow:hidden
     برای جلوگیری از سرریز افقی، نه برای کراپِ حیوانات */
  html, body.dcc{ overflow-x:hidden; }
  section.dcc-hero{
    max-height:none !important;
    min-height:0 !important; /* غالب بر min-height:500px قاعدهٔ ۸۲۰ تم */
    overflow:hidden !important;
    clip-path:inset(0) !important;
    /* transparent نشان‌دهندهٔ سفیدِ body بود هر جا margin بین overlay و آمار
       جمع می‌شد (اندازه‌گیری ۳۹۰×۸۴۴: gapOverFacts=40px، inner mb=40px).
       سرمه‌ای = هر پیکسلِ باقی‌مانده هم سفید نیست. specificity بالاتر از
       .dcc-hero{background:transparent!important} داخلِ design-c.php */
    background:var(--dccm-navy) !important;
    width:100% !important;
    max-width:100% !important;
    margin-inline:0 !important;
  }
  /* کشیدگیِ منفیِ زیرِ هدرِ شفاف دیگر لازم نیست چون هیرو از پشتِ هدر بیرون می‌آید */
  body.dcc-home section.dcc-hero{ margin-top:0 !important; }

  /* عکسِ خانه (نه /team/): v4 حدود ۳۵٪ راست void سیاه دارد (lum≈۲، rgb≈1,2,10).
     ۴/۳+cover فقط ~۱۲٪ از هر سمت می‌برد → با object-position تنها void نمی‌رود.
     width:124% + overflow هیرو، بدونِ برگشت به scale(1.372) و ۱/۱.
     فقط body.dcc-home تا هیروِ صفحهٔ تیم دست نخورد. */
  body.dcc-home section.dcc-hero > img{
    position:relative !important;
    inset:auto !important;
    left:0 !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:124% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4/3 !important;
    object-fit:cover !important;
    object-position:0% 45% !important;
    background:var(--dccm-navy) !important;
    transform:none !important;
    display:block !important;
    margin:0 !important;
    margin-inline:0 !important;
  }
  /* RTL بلوکِ پهن را به لبهٔ راست می‌چسباند؛ left:24% لبهٔ فیزیکیِ چپ را صفر می‌کند
     تا void از راست بیرون بزند و clip شود. LTR همان left:0 می‌ماند. */
  html[dir="rtl"] body.dcc-home section.dcc-hero > img{
    left:24% !important;
  }

  /* رویهٔ گرادیانِ تیره‌کننده: div اول، فقط برایِ خوانا کردنِ متنِ رویِ عکس بود؛
     چون متن دیگر رویِ عکس نمی‌نشیند، لازم نیست. display روی این عنصر در
     style="" درون‌خطی تنظیم نشده (فقط position/inset/background) → بدونِ
     !important */
  section.dcc-hero > div:first-of-type{ display:none; }

  /* ستونِ متن: از overlay مطلق به بلوکِ عادیِ زیرِ عکس (قاعدهٔ .dcc-hero__over
     در <style> است، نه inline) */
  section.dcc-hero .dcc-hero__over{
    position:static !important;
    inset:auto !important;
    display:block !important;
    background:var(--dccm-navy);
    margin-block-end:0 !important; /* درون‌خطی margin:0 auto — قفل تا جمع‌شدنِ فرزند نوار نسازد */
  }
  /* عرضِ ستونِ متن ۵۶۰px درون‌خطی است — رویِ موبایل باید تمامِ عرض را بگیرد.
     margin-block پایین قبلاً var(--dccm-sp-5)=40px بود و چون overlay
     padding-block:0 (درون‌خطی padding:0 clamp) و border ندارد، آن ۴۰px از
     جعبهٔ سرمه‌ای بیرون می‌زد → نوار سفید تمام‌عرض بین دکمه‌ها و آمار. */
  section.dcc-hero .dcc-hero__over > div{
    max-width:none !important; /* درون‌خطی: style="max-width:560px" */
    margin-block:var(--dccm-sp-6) 0; /* بالا ۴۸px؛ پایین ۰ تا overlay به آمار بچسبد */
  }

  /* ردیفِ دو دکمه: ستونی و تمام‌عرض. display/wrap/gap درون‌خطی‌اند اما
     flex-direction/align-items تنظیم نشده بودند → افزایشی، بدونِ !important */
  section.dcc-hero .dcc-hero__over > div > div:last-child{
    flex-direction:column;
    align-items:stretch;
  }
  section.dcc-hero .dcc-hero__over .dcc-red,
  section.dcc-hero .dcc-hero__over .dcc-ghost{
    width:100%;
    justify-content:center;
  }

  /* نوارِ آمار: از absolute؛bottom:0 به ردیفِ عادیِ زیرِ محتوا (طبقِ ترتیبِ DOM) */
  section.dcc-hero > div:last-of-type{
    position:static !important; /* درون‌خطی: style="position:absolute;bottom:0;..." */
    margin-block-start:0 !important; /* درون‌خطی margin روی فرزند .dcc-hero-facts است؛ والد را هم صفر نگه می‌داریم */
  }
  /* آمار ۲×۲ تا همان ۸۲۰px که هیرو موبایل است — نه فقط ۷۶۷؛ و نه تک‌ستونهٔ ۴۰۰px زنده */
  section.dcc-hero > div:last-of-type > div,
  section.dcc-hero .dcc-hero-facts{
    grid-template-columns:1fr 1fr !important;
    justify-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  section.dcc-hero > div:last-of-type > div > div,
  section.dcc-hero .dcc-hero-facts > div{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  /* محصولات یک‌ستونه و وسطِ صفحه در همان بازهٔ موبایل/تبلتِ هیرو */
  #dcc-grid{
    grid-template-columns:1fr !important;
    justify-items:center !important;
    justify-content:center !important;
    width:100% !important;
  }
  #dcc-grid .dcc-prod{
    width:100% !important;
    max-width:100% !important;
    margin-inline:auto !important;
  }
  #products > div{
    margin-inline:auto !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .dcc-legend > div > div:last-child{
    grid-template-columns:1fr !important;
    justify-items:center !important;
  }
}

/* ============================================================================
   ۴) گریدِ محصولات — یک‌ستونه، عمداً
   ----------------------------------------------------------------------------
   تصمیم: یک ستون، نه دو. توجیه: repeat(auto-fill,minmax(272px,1fr)) درون‌خطی
   از قبل رویِ عرضِ محتواییِ ۳۴۳px (اندازه‌گیری‌شده در ۳۷۵px ویوپورت) طبیعتاً به
   یک ستون سقوط می‌کند — پس این‌جا فقط تضمینِ صریح است، نه تغییرِ رفتار. اگر
   دوستونه اجبار می‌شد، هر کارت ~۱۶۵px عرض می‌گرفت؛ رندرهایِ پدسالِ محصولات
   (podium-*.webp) عمودی‌شکل‌اند، پس در آن عرض بطری‌ها ریز و متنِ ماده/دوز به
   بریدنِ کلمه‌به‌کلمه می‌افتد. یک‌ستونه، عرضِ کاملِ ۳۴۳px را به عکس و متن می‌دهد.
   ============================================================================ */
@media (max-width:767px){
  #dcc-grid{ grid-template-columns:1fr !important; } /* درون‌خطی: تضمینِ صریح */

  /* با عرضِ کامل، جعبهٔ عکس را کمی بلندتر می‌کنیم تا رندرِ عمودی جا باز کند.
     height/max-height هردو درون‌خطی‌اند (بدونِ کلاس روی این divها) →
     .dcc-prod > div:nth-of-type(2) = دومین div از سه فرزندِ article
     (نوارِ رنگ ← جعبهٔ عکس ← بدنه) */
  .dcc-prod > div:nth-of-type(2){ height:280px !important; }
  .dcc-prod > div:nth-of-type(2) img{ max-height:250px !important; }
}

/* ============================================================================
   ۴ب) کپِ سبدِ خانه — فقط زیرِ فیلترِ «همه» (کلاسِ dcc-capped)
   ----------------------------------------------------------------------------
   موبایل ≤۸۲۰px: فقط کارتِ پاراسیل. دسکتاپ >۸۲۰px: چهارتایِ اولِ DOM
   (پاراسیل، تیموسیل، منتوسیل، اکاسیل — ترتیب در front-page.php $cprods).
   دکمهٔ «مشاهدهٔ همه» در هر دو بازه نشان داده می‌شود تا ۶تایِ باقی از
   /products/ در دسترس باشند. بدونِ dcc-capped این قواعد کورند (مالک:
   dccFilter) تا فیلترِ چیپ با !important پوشانده نشود. /products/ کلاسِ
   dcc-capped ندارد. ver: ۱۴۰۵-۰۵-۲۷-gridcap
   ============================================================================ */
@media (max-width:820px){
  #dcc-grid.dcc-capped .dcc-prod:not([data-slug="parasil"]):not(:has(a.dcc-detail[href*="/products/parasil/"])){
    display:none !important; /* درون‌خطی: display:flex */
  }
  #dcc-grid.dcc-capped ~ .dcc-mob-viewall,
  .dcc-mob-viewall{ display:flex !important; } /* درون‌خطی: display:none */
}
@media (min-width:821px){
  #dcc-grid.dcc-capped .dcc-prod:nth-child(n+5){
    display:none !important; /* درون‌خطی: display:flex — چهارتایِ اول می‌مانند */
  }
  #dcc-grid.dcc-capped ~ .dcc-mob-viewall{
    display:flex !important; /* کپِ چهارتایی بقیه را از /products/ می‌خواهد */
  }
}

/* ============================================================================
   ۵) تریویِ امضا (منتوسیل/پاراسیل/لیوسیل) — یک‌ستونه با ترتیبِ معنادار
   ----------------------------------------------------------------------------
   ترتیبِ منبع در front-page.php: منتوسیل، پاراسیل، لیوسیل. رویِ دسکتاپِ RTL این
   یعنی راست=منتوسیل، وسط=پاراسیل، چپ=لیوسیل — دقیقاً ترتیبِ خواسته‌شده (کامنتِ
   خودِ PHP هم همین را می‌گوید). چون فارسی راست‌به‌چپ خوانده می‌شود، «راست‌ترین»
   یعنی «اولین‌خوانده‌شده»؛ پس وقتی به یک ستون تبدیل می‌شود، بالا←پایین با همان
   اولویتِ خوانشِ دسکتاپ می‌آید (منتوسیل بالا، لیوسیل پایین) — بدونِ نیاز به
   order یا تغییرِ DOM. این‌جا فقط ستون‌شدن را تضمین می‌کنیم.
   ============================================================================ */
@media (max-width:767px){
  /* دومین div از دو فرزندِ کانتینرِ سکشن (اولی مقدمه/تیتر، دومی گریدِ کارت‌ها) */
  .dcc-legend > div > div:last-child{
    grid-template-columns:1fr !important; /* درون‌خطی: auto-fit,minmax(260px,1fr) */
  }
}

/* ============================================================================
   ۶) انضباطِ فاصله‌گذاری — مقیاسِ ۸px رویِ موبایل
   ----------------------------------------------------------------------------
   padding عمودیِ سکشن‌ها امروز با clamp() بینِ ~44 تا ~92px است (درون‌خطی).
   این‌جا رویِ موبایل به یک عددِ ثابت و روی‌مقیاس (۴۸px = ۶×۸) یکدست می‌شود؛
   padding افقی دست‌نخورده می‌ماند (از قبل clamp به کفِ ۱۶px می‌رسد، خودش ۸px×۲
   است، نیازی به تغییر ندارد).
   ============================================================================ */
@media (max-width:767px){
  #products > div,
  #species > div,
  #proof > div,
  #contact > div,
  .dcc-values > div,                            /* سکشنِ سه‌ارزش */
  .dcc-legend > div                             /* سکشنِ تریویِ امضا */
  {
    padding-block:var(--dccm-sp-6) !important; /* درون‌خطی: padding shorthand */
  }
}

/* ============================================================================
   ۷) فوتر — هدفِ لمسی برایِ پیوندهایِ متنیِ بدونِ padding
   ----------------------------------------------------------------------------
   .dcc-flink فقط رنگ/فونت/hover دارد؛ ارتفاعِ واقعی=۱۴px (اندازه‌گیری‌شده، برابرِ
   خطِ متن، چون <a> پیش‌فرض inline است). display+min-height این‌جا تازه‌اند
   (چیزی برایِ تصادم نیست) → بدونِ !important.
   ============================================================================ */
@media (max-width:767px){
  .dcc-flink,
  footer a[href^="tel:"],
  footer a[href^="mailto:"],
  footer a[href^="https://wa.me"]{
    display:flex;
    align-items:center;
    min-height:var(--dccm-min-tap);
  }
}

/* ============================================================================
   ۸) کاهشِ حرکت — تقویت‌کنندهٔ دفاعی
   ----------------------------------------------------------------------------
   inc/design-c.php از قبل یک قاعدهٔ سراسری دارد: «*{transition:none!important;
   animation:none!important}» زیرِ prefers-reduced-motion:reduce که هرچیزِ
   اضافه‌شده در همین فایل را هم می‌پوشاند. این بلوک صرفاً برایِ خودکفاییِ همین
   فایل تکرار شده، نه چون رفتارِ تازه‌ای اضافه می‌کند.
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  section.dcc-hero,
  section.dcc-hero *{
    transition:none !important;
    animation:none !important;
  }
}

/* ============================================================================
   ۹) نوارِ «دسته‌های تخصصیِ محصولات» — حذفِ کامل در موبایل، دستِ‌نخورده در دسکتاپ
   ----------------------------------------------------------------------------
   تسکِ #42 بندِ ۴. سکشنِ لجندِ دسته‌ها (بالایِ بخشِ «۰۱ — کاهش») در front-page.php
   خودش نه id داشت نه کلاس؛ برایِ هدف‌گیریِ CSSِ‌محض (بدونِ ویرایشِ inline style)
   کلاسِ class="dcc-catlegend" به همان <section> افزوده شد (خطِ ~۲۴۸). این قاعده
   فقط زیرِ ۷۶۸px عمل می‌کند؛ در ۷۶۸px+ (کنترلِ منفی) هیچ قاعده‌ای برایِ این کلاس
   نیست، پس دسکتاپ دقیقاً همانی می‌ماند که بود.
   ============================================================================ */
@media (max-width:767px){
  .dcc-catlegend{ display:none !important; } /* درون‌خطی نیست (فقط background/border-bottom)؛ !important فقط برایِ اطمینانِ آینده اگر قاعدهٔ دیگری specificity بالاتر گرفت */
}

/* ============================================================================
   ۱۰) فوترِ موبایل — تسکِ #43 (خواستهٔ مالک از اسکرین‌شاتِ گوشی، ۱۴۰۵/۰۵/۲۶)
   ----------------------------------------------------------------------------
   منبعِ مارک‌آپ: inc/design-c.php → asa_c_page_close(). فوتر بدونِ کلاس روی
   خودِ ستون‌ها/ردیف‌هاست، پس گزینشِ ساختاری (positional) طبقِ همان الگویِ
   .dcc-legend > div > div:last-child بالاتر در همین فایل.

   ۱۰.الف) ستونِ «دسترسیِ سریع» (footer.quick) — بندِ ۱: وسط‌چین + فاصلهٔ سطرِ
   فشرده‌تر. ردیفِ بالایِ فوتر سه‌ستونه است (برند / دسترسیِ سریع / تماس)؛
   nth-child(2) از سه فرزندِ همان ردیف = همین ستون. دلیلِ «باز بودنِ» فعلی:
   بخشِ ۷ همین فایل به هر .dcc-flink در موبایل min-height:44px (هدفِ لمسی)
   می‌دهد و چون align-items رویِ ستونِ لینک‌ها تنظیم نشده (پیش‌فرض stretch)،
   هر لینک تمامِ عرضِ ستون را می‌گیرد و متنش به لبهٔ شروع (راست، RTL) می‌چسبد؛
   gap:11px هم رویِ همان جعبه‌هایِ ۴۴px اضافه می‌شود. راه‌حل: align-items:center
   می‌شکندِ stretch را — هر لینک به‌اندازهٔ محتوایش می‌شود و در ستون وسط‌چین
   می‌ایستد (min-height:44px از بخشِ ۷ دست‌نخورده می‌ماند، فقط دیگر عرضِ کامل
   نمی‌گیرد)؛ gap از ۱۱px به ۴px می‌آید تا فاصلهٔ کلیِ سطر به سطر فشرده‌تر شود.
   اثباتِ هندسی: geo-ft43-ft49-before.json → footer.fa-390x844.quickCol.links[0].rect.w=358
   (تمامِ عرضِ ستون)، بعد از این قاعده باید برابرِ عرضِ محتوایِ متن شود و x-میانه
   با x-میانهٔ ستون برابر بیاید (اثباتِ after در گزارشِ پایانی).

   ۱۰.ب) پیوندهایِ «حریمِ خصوصی»/«شرایطِ استفاده» — بندِ ۲: تله‌ی شناخته‌شدهٔ
   همین فوتر. ردیفِ پایینِ فوتر justify-content:space-between دارد با دو فرزند:
   دیوِ این دو لینک، و p خطِ کپی‌رایت (که از قبل flex:1 0 100%;text-align:center
   دارد — دقیقاً همان ترفندی که این‌جا هم به‌کار می‌رود). دیوِ لینک‌ها flex/
   justify-content ندارد، پس با فقط یک آیتم در سطر، space-between آن را به
   flex-start (لبهٔ شروع) می‌چسباند — اثباتِ before: leftGap=178.2px،
   rightGap=0px (نامتقارن، دقیقاً تلهٔ توصیف‌شده). flex:1 0 100% عنصر را
   تمام‌عرضِ خودِ سطر می‌کند؛ چون خودش display:flex است (درون‌خطی)، برایِ
   وسط‌چینِ دو لینک/نقطهٔ داخلش justify-content:center هم لازم است (text-align
   رویِ فرزندِ Flex بی‌اثر است). هیچ‌کدام از این دو خاصیت در style="" درون‌خطیِ
   همین دیو تنظیم نشده‌اند → بدونِ !important.
   کنترلِ منفی: هر دو قاعده زیرِ @media(max-width:767px) هستند؛ ۷۶۸px+ دست‌نخورده.
   ============================================================================ */
@media (max-width:820px){
  footer > div > div:first-child > div:nth-child(2),
  footer > div > div:first-child > div:nth-child(3),
  footer .dcc-ft-quick,
  footer .dcc-ft-contact{
    text-align:center !important; /* h3 «دسترسیِ سریع» و «تماس» را وسط‌چین می‌کند */
    align-items:center !important;
  }
  footer > div > div:first-child > div:nth-child(2) > div,
  footer > div > div:first-child > div:nth-child(3) > div,
  footer .dcc-ft-quick > div,
  footer .dcc-ft-contact > div{
    align-items:center !important; /* درون‌خطی: flex-direction:column — پیش‌فرض stretch به لبه می‌چسباند */
    justify-content:center !important;
    text-align:center !important;
    width:100% !important;
    gap:4px !important; /* درون‌خطی: gap:11px — فشرده‌تر طبقِ خواستهٔ مالک */
  }
  footer .dcc-flink,
  footer a[href^="tel:"],
  footer a[href^="mailto:"],
  footer a[href^="https://wa.me"]{
    justify-content:center !important;
  }
  footer > div > div:last-child > div:first-child{
    flex:1 0 100%; /* تازه — دیوِ حریمِ‌خصوصی/شرایطِ‌استفاده هیچ‌خاصیتِ flex درون‌خطی ندارد */
    justify-content:center; /* تازه — خودش display:flex درون‌خطی است، justify-content نداشت */
  }
  /* تسکِ #60 (۱۴۰۵/۰۵/۱۷) — این دو خاصیت از style="" درون‌خطیِ <p> کپی‌رایت در
     design-c.php حذف شد تا دسکتاپ تک‌سطری شود (۷۶۸px+: p به آیتمِ auto تبدیل
     می‌شود و با justify-content:space-between والد در همان سطرِ لینک‌ها می‌نشیند).
     موبایل همان رفتارِ قبلی (تمام‌عرض + وسط‌چین، هم‌الگو با قاعدهٔ خواهرِ بالا) را
     این‌جا پس می‌گیرد — چون طولِ رشتهٔ کپی‌رایت + لینک‌ها در ویوپورتِ ۳۷۵-۴۱۴px
     در یک سطر جا نمی‌شود. */
  footer > div > div:last-child > p{
    flex:1 0 100%;
    text-align:center;
  }
}

/* ============================================================================
   ۱۰.ج) فوتر دسکتاپ — یک ردیف: کپی‌رایت + حریمِ خصوصی / شرایطِ استفاده (≥821px)
   ----------------------------------------------------------------------------
   استاتیکِ کهنه هنوز flex:1 0 100% را درون‌خطی روی <p> کپی‌رایت دارد؛ آن مقدار
   در همهٔ عرض‌ها سطر را می‌شکند (اسکرینِ کارفرما). !important لازم است چون
   style="" درون‌خطی بدونِ آن برنده است. موبایل ≤820 از بند ۱۰.ب ستونی می‌ماند.
   ============================================================================ */
@media (min-width:821px){
  footer > div > div:last-child{
    flex-wrap:nowrap !important; /* درون‌خطی: flex-wrap:wrap */
    align-items:center !important;
  }
  footer > div > div:last-child > div:first-child,
  footer > div > div:last-child > p{
    flex:0 1 auto !important; /* درون‌خطیِ کهنه: flex:1 0 100% */
  }
}

/* ============================================================================
   ۱۱) دکمهٔ «ارسالِ درخواست» در صفحهٔ تماس — تسکِ #49 (همان خواستهٔ مالک، ۱۴۰۵/۰۵/۲۶)
   ----------------------------------------------------------------------------
   منبعِ مارک‌آپ: tpl-contact.php، #asa-c-submit (id یکتا، بدونِ برخوردِ ساختاری).
   فرمِ اطراف (#asa-c-form) display:flex;flex-direction:column است و align-items
   ندارد (پیش‌فرض stretch) — همهٔ فیلدها تمامِ عرضِ فرم را می‌گیرند، اما خودِ
   دکمه با align-self:flex-start درون‌خطی از این قاعده مستثنا شده و به‌اندازهٔ
   محتوایش می‌ماند؛ در RTL یعنی می‌چسبد به لبهٔ راست. اثباتِ before (geo probe):
   در هر چهار اندازه (۳۲۰/۳۹۰/۷۶۸/۱۴۴۰) rightGap=0 و leftGap بزرگ (۵۹ تا ۴۵۲px)
   — همان‌طور که در توصیفِ تسک آمده. راه‌حل: زیرِ ۷۶۸px align-self را stretch
   می‌کنیم (دکمه تمامِ عرضِ فرم را می‌گیرد، مثلِ بقیهٔ فیلدها) و چون خودِ دکمه
   display:inline-flex درون‌خطی است، justify-content:center محتوایِ داخلی
   (متن+آیکن) را وسط‌چین می‌کند. align-self درون‌خطی تنظیم شده → !important؛
   justify-content تنظیم نشده → بدونِ !important.
   کنترلِ منفی: قاعده زیرِ @media(max-width:767px) است؛ دسکتاپِ ۷۶۸/۱۴۴۰px
   دقیقاً همان align-self:flex-start و همان leftGap/rightGapِ نامتقارنِ before
   را حفظ می‌کند (طبقِ طراحیِ عمدیِ فرم در دسکتاپ).
   ============================================================================ */
@media (max-width:767px){
  #asa-c-submit{
    align-self:stretch !important; /* درون‌خطی: align-self:flex-start */
    justify-content:center; /* تازه — درون‌خطیِ دکمه justify-content ندارد */
  }
}

/* ============================================================================
   TODO(markup) — چیزهایی که با CSS محض قابلِ حل نبود؛ نیازمندِ ویرایشِ PHP:

   2) پیوندهایِ «صفحه اصلی»/«ورود» در نوارِ فشردهٔ موبایل (dcc-mob-quick) و
      دکمهٔ برگر، فاصلهٔ padding را از این فایل می‌گیرند نه از خودشان؛ اگر روزی
      متنِ آن‌ها طولانی‌تر شود (مثلاً زبانِ دیگر)، بهتر است padding مستقیماً در
      inc/design-c.php تعریف شود تا این فایل رهاگر (dependent) نماند.

   3) خاصیت‌هایِ فیزیکیِ left/right/border-right/padding-right در سراسرِ
      front-page.php و design-c.php به‌کار رفته‌اند (نه inset-inline/border-
      inline-start). رویِ زبانِ fa (RTL) بی‌اثر است، اما رویِ نسخه‌هایِ en/ar/ru/tr
      (که بعضاً LTR رندر می‌شوند) می‌تواند لهجهٔ رنگی/حاشیه را در سمتِ اشتباه
      بگذارد. این یک مسئلهٔ i18n سراسری است، نه مختصِ موبایل؛ این فایل عمداً
      واردِ آن نشد چون اصلاحش نیازمندِ تغییرِ inline style در PHP است.
   ============================================================================ */