/* ============================================================
   GD_Mobile.css — لایه‌ی مشترک موبایلِ فروشگاه

   ⚠ این فایل باید **آخرین** استایل هر صفحه باشد.
     ترتیب: Style.css → gd-tokens.css → CSS صفحه → این فایل.
     اگر وسط بیاید، از CSS صفحه ضعیف‌تر است و هیچ کفی اعمال نمی‌شود.

   ── چرا وجود دارد ───────────────────────────────────────────
   DESIGN.md این لایه را به‌عنوان نگهبانِ کف‌های موبایل معرفی کرده بود،
   ولی فایلش هیچ‌وقت ساخته نشده بود — نه محلی، نه روی سرور (۴۰۴).
   یعنی کف‌ها فقط روی کاغذ بودند. ممیزی ۲۶ مرداد این را نشان داد:
   ورودی جست‌وجو ۱۳px و ده مورد متن زیر ۱۲px.

   همان درسِ ثبت‌شده در DESIGN.md: «یک دیزاین‌سیستمِ اعلام‌شده تا وقتی
   اندازه‌گیری نشده، فرضیه است نه واقعیت.»

   ── کف‌ها (از DESIGN.md، اندازه‌گیری‌شده نه سلیقه) ───────────
     هدف لمسی            ۴۴×۴۴     WCAG 2.5.5
     فونت ورودی موبایل   ۱۶px      زیر آن iOS زوم می‌کند و برنمی‌گردد
     متن فارسی موبایل    ۱۲px      زیر آن نقطه‌های «ی» و «ب» به هم می‌چسبند

   نگهبانش: node tools/site_mobile_audit.js
   ============================================================ */

/* ---------- ورودی روی هر دستگاه لمسی، نه فقط گوشی ----------
   زوم‌کردن iOS به عرض ۷۶۷ محدود نیست؛ تبلت هم همان رفتار را دارد.
   ممیزی روی ۷۶۸ یک ورودی ۱۳px نشان داد که در باند موبایل دیده نمی‌شد. */
@media (max-width: 1023px) {
    .gd-search input,
    .gd-auth input,
    .gd-auth select,
    input[type="search"],
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
    }
}

@media (max-width: 767px) {

    /* ---------- کوچک‌ترین پله‌ی متن روی گوشی ۱۲px می‌شود ----------
       توکن را همین‌جا بالا می‌بریم تا هر جایی که --gd-text-2xs را
       استفاده کرده، بدون دست‌خوردن اصلاح شود. */
    :root {
        --gd-text-2xs: 0.75rem;   /* ۱۱px → ۱۲px */
    }

    /* ---------- ورودی‌ها: ۱۶px، وگرنه iOS زوم می‌کند ----------
       سلکتورها عمداً هم‌وزنِ همتای خودشان در CSS صفحه نوشته شده‌اند؛
       چون این فایل آخر لود می‌شود، با ترتیب برنده می‌شوند.
       ⚠ ریست کلی مثل `.gd-body :is(input,…)` عمداً ننوشتم — وزن (۰،۱،۱)
       دارد و از کامپوننت‌های تک‌کلاسه قوی‌تر می‌شود (تله‌ی ثبت‌شده). */
    .gd-search input,
    .gd-auth input,
    .gd-auth select,
    input[type="search"],
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
    }

    /* ---------- هدف لمسی روی دکمه‌های آیکونی ----------
       ⚠ فقط آیکونی. روی دکمه‌ی متنی، min-width نوار ابزار را می‌شکند
       (یک بار ردیف صندوق فروش را ۹۶px عریض‌تر کرد). */
    .gd-icon-btn,
    .gd-logo,
    .gd-btn--user,
    .gd-search__submit,
    .js-drawer-open,
    .js-drawer-close,
    .js-cart-open,
    .js-cart-close {
        min-width: 44px;
        min-height: 44px;
    }

    /* ---------- هدف لمسی روی دکمه و چیپِ متنی ----------
       ⚠ فقط `min-height`. عرضِ دکمه‌ی متنی را محتوایش تعیین می‌کند و کفِ
         عرض روی آن نوار ابزار را می‌شکند — همان اشتباهی که یک بار ردیف
         صندوق فروش را ۹۶ پیکسل عریض‌تر کرد.
       ⚠ گونه‌ی `--sm` هم مستثنا نیست: «کوچک» یعنی کم‌وزن‌تر دیده شود، نه
         اینکه با انگشت زده نشود. ۵ شهریور ۱۴۰۵ اندازه‌گیریِ صفحه‌ی
         دیزاین‌سیستم ۱۸ هدفِ لمسیِ زیرِ کف داد و همه‌شان `gd-btn--sm` و
         `gd-chip` بودند. */
    .gd-btn,
    .gd-chip,
    .gd-pager a,
    .gd-pager button {
        min-height: 44px;
    }

    /* ---------- کارتِ محصول: کلِ کارت هدفِ لمس است، نه فقط عنوان ----------
       اندازه‌گیریِ ۱۴ شهریور ۱۴۰۵ روی صفحه‌ی خانه‌ی فروشگاه: ۲۱۶ هدفِ لمسیِ
       زیرِ کف، و پس از گروه‌بندی معلوم شد تقریباً همه‌شان **یک** کامپوننت‌اند —
       `h3.gd-pcard__title` با ۱۲۶×۳۸.

       بزرگ‌کردنِ خودِ عنوان جوابِ درست نیست (کارت را بلند و بدقواره می‌کند).
       الگوی درست «لینکِ کشیده» است: یک روکشِ نامرئی روی کلِ کارت، همان‌جا که
       چشمِ کاربر هم فکر می‌کند کلِ کارت قابلِ لمس است.

       ⚠⚠ و دلیلِ اینکه این کار را کورکورانه نکردم: پاورقیِ کارت می‌تواند
         دکمه‌ی «استعلام قیمت» داشته باشد (`.js-inquiry`). روکشِ کشیده بدونِ
         خطِ دوم آن دکمه را می‌بلعد و کاربر دیگر نمی‌تواند استعلام بزند.
         مارک‌آپ خوانده شد، بعد نوشته شد.
       ⚠ لینکِ تصویر و لینکِ عنوان هر دو به **همان** آدرس می‌روند، پس پوشاندنِ
         لینکِ تصویر رفتاری را عوض نمی‌کند. */
    .gd-pcard { position: relative; }
    .gd-pcard__title a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    /* هرچه خودش کنش دارد، بالای روکش می‌ماند. */
    .gd-pcard__foot,
    .gd-pcard__foot button,
    .gd-pcard__foot a {
        position: relative;
        z-index: 2;
    }

    /* ---------- کف خوانایی متن فارسی ----------
       این‌ها با اندازه‌ی خام زیر ۱۲px نوشته شده بودند و ممیزی گرفتشان. */
    .gd-promobar__code,
    .gd-promobar__code b,
    .gd-hb__badge,
    .gd-tag,
    .gd-pcard__flag,
    .gd-btn--outline,
    .gd-tabbar__item,
    .gd-footer__bottom {
        font-size: var(--gd-text-xs);   /* ۱۲px */
    }

    /* نشانِ عددیِ سبد استثناست: دایره‌ی ۱۸px است و عدد باید داخلش جا شود.
       متنِ خواندنی نیست، یک شمارنده است. */
    .gd-badge,
    .gd-tabbar__badge {
        font-size: 10px;
    }

    /* ---------- نقطه‌های اسلایدر ----------
       ⚠ خودِ نقطه بزرگ نمی‌شود (باید ریز دیده شود)؛ فقط ناحیه‌ی لمسش
       با ::after بزرگ می‌شود. الگوی ثبت‌شده در DESIGN.md. */
    .gd-hero__dot { position: relative; }
    .gd-hero__dot::after {
        content: '';
        position: absolute;
        inset: -19px;
    }
}

/* فقط برای صفحه‌خوان — از چشم پنهان، برای گوگل و screen reader موجود.
   clip-path به‌جای display:none چون display:none را صفحه‌خوان هم نمی‌خواند. */
.gd-sronly {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}