/* ============================================================
   گنج دانش — استایل صفحه اصلی

   وابسته به دیزاین سیستم: ../Design_System/gd-tokens.css
   هیچ رنگ یا اندازه‌ی خامی اینجا نوشته نمی‌شود؛ همه از توکن.

   ⚠ فعلاً فقط لایه‌ی توکن لود می‌شود، نه gd-components.css —
     چون ۲۱ کلاس هم‌نام با معنی متفاوت دارند (مثلاً .gd-chip در
     سیستم تگ فیلتر است و اینجا کارت دسته‌بندی). مهاجرت کامپوننت
     یک قدم جداست که مارک‌آپ و JS را هم عوض می‌کند.

   فهرست:
     ۱  پایه و کمکی‌ها
     ۲  دکمه‌ها و نشان‌ها
     ۳  هدر، ناوبری، مگا منو
     ۴  نوار اعلان، اسلایدر بنر، بنرها
     ۵  بخش‌های عمومی
     ۶  چرا گنج دانش · حوزه‌های فعالیت
     ۷  اسلایدر محصول و کارت
     ۸  نظرات · برندها · وبلاگ · درباره · نقشه
     ۹  فوتر
     ۱۰ کشو، مودال، فرم، دکمه شناور
     ۱۱ ریسپانسیو
   ============================================================ */

/* ════════ ۰ — مقیاس نمایش ════════
   به Design_System/gd-tokens.css منتقل شد (بخش ۶.۱) تا همه‌ی صفحه‌ها
   یک مقیاس داشته باشند، نه فقط صفحه اصلی. سقف ۱۵۹۹ هم برداشته شد:
   نمایشگر بزرگ هم باید همان ۸۰٪ باشد، وگرنه ۱۶۰۰ به بعد ناگهان درشت می‌شد.
   ═══════════════════════════════ */

/* ════════ ۱ — پایه ════════ */
.gd-home {
    background: var(--gd-bg);
    color: var(--gd-ink);
    font-family: var(--gd-font);
    font-size: var(--gd-text-md);
    line-height: var(--gd-lh-normal);
}
.gd-home img { max-width: 100%; height: auto; display: block; }
.gd-home a { color: inherit; text-decoration: none; }

/* ⛔ آن ریستِ بالا (۰،۱،۱) از هر کامپوننتِ تک‌کلاسه (۰،۱،۰) قوی‌تر است، پس
   هر لینکی که خودش کامپوننت است رنگِ خودش را از دست می‌داد و متنِ بدنه را
   به ارث می‌برد. نتیجه‌اش روی صفحه‌ی زنده: متنِ تیره‌ی #0f172a روی آبیِ
   #2563eb — کنتراستِ ۳٫۴۵:۱، زیرِ کفِ ۴٫۵. نه نوارِ اعلان خوانده می‌شد و نه
   دکمه‌ی اصلی. `axe-core` در اولین اجرا پیدایش کرد؛ با چشم دیده نمی‌شد چون
   آبی و خاکستریِ تیره از دور «کنتراست دارند».
   ⚠ خودِ ریست درست است و می‌ماند؛ فقط لینکی که رویه‌ی رنگی دارد مستثنا
     می‌شود. */
.gd-home a.gd-promobar,
.gd-home a.gd-btn--primary { color: var(--gd-on-primary); }
.gd-home a.gd-btn--accent  { color: var(--gd-on-accent); }

.gd-container {
    width: 100%;
    max-width: var(--gd-container);
    margin-inline: auto;
    padding-inline: var(--gd-gutter);
}

/* ════════ ۲ — دکمه‌ها و نشان‌ها ════════ */
.gd-btn {
    display: inline-flex; align-items: center; gap: var(--gd-space-2);
    padding: var(--gd-space-3) var(--gd-space-5);
    border: 1px solid transparent; border-radius: var(--gd-radius);
    font: inherit; font-weight: var(--gd-fw-bold); line-height: 1;
    cursor: pointer;
    transition: background var(--gd-dur-base) var(--gd-ease),
                color var(--gd-dur-base) var(--gd-ease),
                border-color var(--gd-dur-base) var(--gd-ease);
}
.gd-btn--primary { background: var(--gd-primary); color: var(--gd-on-primary); }
.gd-btn--primary:hover { background: var(--gd-primary-hover); color: var(--gd-on-primary); }

.gd-btn--outline { background: transparent; border-color: var(--gd-line-strong); color: var(--gd-ink); }
.gd-btn--outline:hover { border-color: var(--gd-primary); color: var(--gd-primary); }

.gd-btn--ghost { background: transparent; color: var(--gd-ink); }
.gd-btn--ghost:hover { color: var(--gd-primary); }

/* زرد فقط سطح است با متن تیره — روی سفید کنتراست کافی ندارد */

.gd-btn--block { width: 100%; justify-content: center; }
.gd-btn--route { padding-inline: var(--gd-space-8); }

.gd-icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: transparent; border: 0; border-radius: var(--gd-radius-sm);
    color: var(--gd-ink); font-size: var(--gd-text-lg); cursor: pointer;
    transition: background var(--gd-dur-base) var(--gd-ease);
}
.gd-icon-btn:hover { background: var(--gd-surface-hover); color: var(--gd-primary); }

.gd-badge {
    position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
    min-width: 18px; height: 18px; padding-inline: var(--gd-space-1);
    background: var(--gd-accent); color: var(--gd-on-accent);
    border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-2xs); font-weight: var(--gd-fw-bold);
    line-height: 18px; text-align: center;
}

.gd-tag {
    display: inline-block;
    margin-inline-start: var(--gd-space-2);
    padding: 2px var(--gd-space-2);
    background: var(--gd-accent); color: var(--gd-on-accent);
    border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-2xs); font-style: normal; font-weight: var(--gd-fw-bold);
}

/* ════════ ۳ — هدر و ناوبری ════════
   اندازه‌ها عیناً از دیجی‌کالا:
     نوار اعلان ۶۰ · ردیف اول ۶۰ · ردیف ناوبری ۴۸  =  ۱۶۸px
     لوگو ۱۹۵×۳۰ · سرچ ۴۰px با radius کپسولی · آیکون ۲۴px
   ════════════════════════════════════ */

/* ---------- نوار اعلان بالای صفحه ---------- */
.gd-promobar {
    display: flex; align-items: center; justify-content: center;
    gap: var(--gd-space-4); height: 60px;
    padding-inline: var(--gd-space-6);
    background: var(--gd-primary); color: var(--gd-on-primary);
    font-size: var(--gd-text-sm); font-weight: var(--gd-fw-bold);
    text-align: center;
}
.gd-promobar__code {
    padding: var(--gd-space-1) var(--gd-space-3);
    background: var(--gd-surface); color: var(--gd-primary);
    border-radius: var(--gd-radius-sm);
    font-weight: var(--gd-fw-medium); white-space: nowrap;
}
.gd-promobar__code b { font-weight: var(--gd-fw-bold); letter-spacing: .5px; }
.gd-promobar__text { line-height: var(--gd-lh-snug); }
.gd-promobar__deco { font-size: var(--gd-text-xl); opacity: .35; }

/* هدر عمداً کانتینر پهن‌تری دارد تا از لبه‌ی راست شروع شود،
   نه از وسط. دیجی‌کالا هم همین کار را می‌کند.
   عدد از توکن می‌آید تا در باند زوم ۸۰٪ همراه بقیه بزرگ شود؛
   اگر ثابت ۱۵۶۰ می‌ماند، هدر از محتوای زیرش باریک‌تر می‌شد. */
.gd-header .gd-container { max-width: var(--gd-container-wide); }

/* ---------- ردیف اول ---------- */
.gd-header {
    position: sticky; inset-block-start: 0; z-index: var(--gd-z-sticky);
    background: var(--gd-surface);
    border-block-end: 1px solid var(--gd-line);
}
.gd-header__bar {
    display: flex; align-items: center; gap: var(--gd-space-5);
    height: 60px;
}

/* لوگوی دیجی‌کالا ۱۹۵×۳۰ افقی است. لوگوی گنج دانش دایره‌ای است،
   پس ارتفاع را ۴۰ می‌بندیم تا ردیف ۶۰px نشکند. */
.gd-logo     { flex: 0 0 auto; display: flex; align-items: center; }
.gd-logo img { height: 40px; width: auto; max-width: 195px; object-fit: contain; }

/* ---------- سرچ‌باکس کپسولی ---------- */
.gd-search {
    flex: 1; display: flex; align-items: center;
    max-width: 700px; height: 40px;
    padding-block: 2px; padding-inline: var(--gd-space-2);
    background: var(--gd-surface-soft);
    border: 1px solid transparent; border-radius: var(--gd-radius-full);
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                background var(--gd-dur-base) var(--gd-ease);
}
.gd-search:focus-within { background: var(--gd-surface); border-color: var(--gd-primary); }
/* هاله‌ی مستطیلی مرورگر و هر سایه‌ای از Style.css ای‌آر‌پی را حذف می‌کند.
   نشانه‌ی فوکوس فقط تغییر رنگ حاشیه‌ی خودِ کپسول است. */
.gd-search input:focus,
.gd-search input:focus-visible,
.gd-search__submit:focus,
.gd-search__submit:focus-visible,
.gd-search:focus-within { outline: none !important; box-shadow: none !important; }
.gd-search__submit {
    flex: 0 0 auto; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: var(--gd-radius-full);
    color: var(--gd-muted); font-size: var(--gd-text-md); cursor: pointer;
}
.gd-search__submit:hover { color: var(--gd-primary); }
.gd-search input {
    flex: 1; min-width: 0; padding-inline: var(--gd-space-2);
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: var(--gd-text-sm); font-weight: var(--gd-fw-medium);
    color: var(--gd-ink);
}
.gd-search input::placeholder { color: var(--gd-muted); font-weight: var(--gd-fw-regular); }
.gd-search__cat {
    flex: 0 0 auto; max-width: 150px;
    padding-inline: var(--gd-space-3);
    background: transparent; border: 0;
    border-inline-start: 1px solid var(--gd-line-strong);
    font: inherit; font-size: var(--gd-text-xs); font-weight: var(--gd-fw-medium);
    color: var(--gd-muted); cursor: pointer;
}

/* ---------- حساب کاربری و سبد ---------- */
.gd-header__actions { display: flex; align-items: center; gap: var(--gd-space-2); margin-inline-start: auto; }
.gd-header__sep { width: 1px; height: 24px; background: var(--gd-line-strong); }
.gd-icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; border: 0; border-radius: var(--gd-radius-sm);
    color: var(--gd-ink); font-size: 24px; cursor: pointer;
    transition: background var(--gd-dur-base) var(--gd-ease);
}
.gd-icon-btn:hover { background: var(--gd-surface-hover); color: var(--gd-primary); }
.gd-btn--user {
    gap: var(--gd-space-2); height: 40px;
    padding-inline: var(--gd-space-3);
    border: 1px solid var(--gd-line-strong); border-radius: var(--gd-radius-sm);
    font-size: var(--gd-text-sm); font-weight: var(--gd-fw-medium);
}
.gd-btn--user:hover { border-color: var(--gd-primary); color: var(--gd-primary); }

/* ---------- ردیف ناوبری ---------- */
/* ⛔ ۲۱ شهریور ۱۴۰۵ — جمع‌شدنِ هدر دیگر قدِ هدر را عوض نمی‌کند.
   تا امروز GSAP قدِ این ردیف را بین ۴۹ و صفر می‌برد و دو باگِ دیدنی
   از همین یک تصمیم درآمد، هر دو با کرومیومِ واقعی (Playwright) سنجیده شد:

   ۱) ردیف از وسطِ حروف بریده می‌ماند. هدر sticky است؛ کوچک شدنش کلِ
      صفحه را بالا می‌کشد، «scroll anchoring»ِ مرورگر برای جبران
      اسکرول را برمی‌گرداند، ScrollTrigger آن را اسکرولِ رو به بالا
      می‌خواند و توییِن را برعکس می‌کند — و این حلقه هیچ‌وقت آرام
      نمی‌گیرد. سنجش: compact مدام true/false، قدِ ردیف بین ۲۰ و ۲۷.
   ۲) «دسته‌بندی کالاها» باز نمی‌شد. باز می‌شد — پنل ۸۴۸×۶۶۹ و درست
      سرِ جایش — ولی `overflow: hidden` این ردیف، که فقط برای همان
      توییِنِ قد گذاشته شده بود، کلِ پنل را می‌بُرید و چیزی دیده نمی‌شد.

   حالا قدِ هدر در جریانِ صفحه ثابت است: ردیف با transform زیرِ نوارِ
   اول سُر می‌خورد، نوار با یک لایه‌ی سفیدِ تمام‌عرض (::before) رویش
   می‌ماند، و پس از پایانِ سُرخوردن clip-path نوارِ خالیِ پایین را از
   هدر می‌بُرد تا محتوای زیرش هم دیده و هم کلیک شود. قدی عوض نمی‌شود،
   پس نه anchoring هست نه حلقه؛ توییِنی هم نیست که یخ بزند. */
.gd-header { --gd-bar-h: 60px; }
.gd-header::before {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
    height: var(--gd-bar-h); background: var(--gd-surface);
    z-index: 1; pointer-events: none;
}
.gd-header__bar { position: relative; z-index: 2; }
.gd-nav {
    position: relative; z-index: 0;
    border-block-start: 1px solid var(--gd-line); background: var(--gd-surface);
    transition: transform var(--gd-dur-base) var(--gd-ease), visibility 0s linear 0s;
}
.gd-header--compact .gd-nav {
    transform: translateY(-100%); visibility: hidden;
    border-block-start-color: transparent;
    /* visibility آخرِ سُرخوردن پنهان می‌شود تا لینکِ نامرئی با Tab گرفته نشود */
    transition: transform var(--gd-dur-base) var(--gd-ease), visibility 0s linear var(--gd-dur-base);
}
/* ⚠ در حالتِ باز، clip-path عمداً از لبه‌ها بیرون می‌زند (منفی) تا پنلِ
   مگامنو و پیشنهادهای جستجو که زیرِ هدر می‌افتند بریده نشوند.
   هر دو مقدار inset() اند تا تأخیرِ transition اعمال شود. */
.gd-header {
    clip-path: inset(-20px -20px -3000px -20px);
    transition: clip-path 0s linear 0s;
}
.gd-header--compact {
    background-color: transparent; border-block-end-color: transparent;
    clip-path: inset(0 0 calc(100% - var(--gd-bar-h) - 12px) 0);
    transition: clip-path 0s linear var(--gd-dur-base);
}
/* سایه‌ی حالتِ جمع — box-shadow زیرِ clip-path بریده می‌شد، پس یک نوارِ
   گرادیانی درست زیرِ نوارِ اول. */
.gd-header::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: var(--gd-bar-h);
    height: 12px; z-index: 1; pointer-events: none;
    background: linear-gradient(rgb(15 23 42 / .10), rgb(15 23 42 / 0));
    opacity: 0; transition: opacity var(--gd-dur-base) var(--gd-ease);
}
.gd-header--compact::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .gd-nav, .gd-header--compact .gd-nav, .gd-header::after { transition: none; }
}
.gd-nav__inner { display: flex; align-items: center; gap: var(--gd-space-6); height: 48px; }
.gd-nav__links {
    display: flex; align-items: center; gap: var(--gd-space-5);
    margin: 0; padding: 0; list-style: none;
    font-size: var(--gd-text-sm);
}
.gd-nav__links a { display: inline-flex; align-items: center; gap: var(--gd-space-2); white-space: nowrap; }
.gd-nav__links i { font-size: var(--gd-text-md); color: var(--gd-muted); }
.gd-nav__links a:hover,
.gd-nav__links a:hover i { color: var(--gd-primary); }
.gd-nav__help {
    display: inline-flex; align-items: center; gap: var(--gd-space-2);
    margin-inline-start: auto; white-space: nowrap;
    font-size: var(--gd-text-sm); color: var(--gd-muted);
}
.gd-nav__help:hover { color: var(--gd-primary); }

/* ---------- مگا منو ---------- */
.gd-mega { position: relative; }
.gd-mega__trigger {
    display: inline-flex; align-items: center; gap: var(--gd-space-2);
    height: 48px; padding-inline: 0;
    background: transparent; border: 0; color: var(--gd-ink);
    font: inherit; font-size: var(--gd-text-sm); font-weight: var(--gd-fw-bold);
    cursor: pointer; white-space: nowrap;
}
.gd-mega__trigger i { font-size: var(--gd-text-lg); }
.gd-mega:hover .gd-mega__trigger,
.gd-mega.is-open .gd-mega__trigger { color: var(--gd-primary); }

.gd-mega__panel {
    position: absolute; inset-block-start: 100%; inset-inline-start: 0;
    z-index: var(--gd-z-dropdown);
    display: flex; width: min(1060px, 92vw); min-height: 380px;
    background: var(--gd-surface); border: 1px solid var(--gd-line);
    border-radius: 0 0 var(--gd-radius) var(--gd-radius);
    box-shadow: var(--gd-shadow-3); overflow: hidden;
}
.gd-mega__panel[hidden] { display: none; }

.gd-mega__groups {
    flex: 0 0 250px; margin: 0; padding: var(--gd-space-2) 0; list-style: none;
    background: var(--gd-surface-soft); border-inline-end: 1px solid var(--gd-line);
    overflow-y: auto;
}
.gd-mega__group {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--gd-space-3) var(--gd-space-5);
    font-size: var(--gd-text-sm); cursor: pointer;
}
.gd-mega__group i { font-size: var(--gd-text-2xs); color: var(--gd-muted); }
.gd-mega__group:hover,
.gd-mega__group.is-active {
    background: var(--gd-surface); color: var(--gd-primary); font-weight: var(--gd-fw-bold);
}

.gd-mega__content { flex: 1; padding: var(--gd-space-5) var(--gd-space-6); overflow-y: auto; }
.gd-mega__cols { display: none; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gd-space-6); }
.gd-mega__cols.is-active { display: grid; }
.gd-mega__col h4,
.gd-mega__col-title { margin: 0 0 var(--gd-space-3); font-size: var(--gd-text-sm); font-weight: var(--gd-fw-bold); color: var(--gd-primary); }
.gd-mega__col ul { margin: 0; padding: 0; list-style: none; }
.gd-mega__col li { margin-block-end: var(--gd-space-2); }
.gd-mega__col a { font-size: var(--gd-text-xs); color: var(--gd-muted); }
.gd-mega__col a:hover { color: var(--gd-ink); }

/* ════════ ۴ — نوار اعلان، اسلایدر بنر، بنرها ════════ */
/* بنر اصلی مثل دیجی‌کالا تمام‌عرض است: بدون کانتینر، بدون گوشه‌ی گرد */
.gd-hero { padding: 0; }
.gd-hero__slider { position: relative; overflow: hidden; }
/* حرکت کشویی مثل دیجی‌کالا، نه محو شدن.
   ریل عمداً ltr است تا translateX در RTL برعکس نشود. */
.gd-hero__track {
    display: flex; direction: ltr;
    transition: transform .45s var(--gd-ease);
    will-change: transform;
}
.gd-hero__slide { flex: 0 0 100%; }
/* ابعاد استاندارد بنر: ۲۸۸۰×۶۰۰ — همان نسبت دیجی‌کالا */
.gd-hero__slide img { width: 100%; aspect-ratio: 2880 / 600; object-fit: cover; }
/* بنرهای ساختاری اندازه‌شان را از بخش ۱۴ می‌گیرند، نه از عکس */

/* فلش‌ها فقط هنگام hover — رفتار دیجی‌کالا */
.gd-hero__slider .gd-hero__nav { opacity: 0; transition: opacity var(--gd-dur-base) var(--gd-ease); }
.gd-hero__slider:hover .gd-hero__nav,
.gd-hero__slider:focus-within .gd-hero__nav { opacity: 1; }

.gd-hero__nav {
    position: absolute; inset-block-start: 50%; transform: translateY(-50%);
    z-index: var(--gd-z-base);
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: rgba(255, 255, 255, .88); border: 0; border-radius: var(--gd-radius-full);
    color: var(--gd-ink-strong); font-size: var(--gd-text-sm); cursor: pointer;
    transition: background var(--gd-dur-base) var(--gd-ease);
}
.gd-hero__nav:hover { background: var(--gd-surface); }
/* در RTL: inset-inline-start یعنی سمت راست.
   «قبلی» با آیکون ‹› باید سمت راست باشد، «بعدی» سمت چپ. */
.gd-hero__nav--prev { inset-inline-start: var(--gd-space-4); }
.gd-hero__nav--next { inset-inline-end: var(--gd-space-4); }

.gd-hero__dots {
    position: absolute; inset-block-end: var(--gd-space-4); inset-inline: 0;
    z-index: var(--gd-z-base);
    display: flex; justify-content: center; gap: var(--gd-space-2);
}
.gd-hero__dot {
    width: 9px; height: 9px; padding: 0;
    background: rgba(255, 255, 255, .55); border: 0; border-radius: var(--gd-radius-full);
    cursor: pointer; transition: width var(--gd-dur-base) var(--gd-ease), background var(--gd-dur-base) var(--gd-ease);
}
.gd-hero__dot.is-active { width: 26px; background: var(--gd-gray-0); }

.gd-wide-banner { display: block; border-radius: var(--gd-radius-lg); overflow: hidden; box-shadow: var(--gd-shadow-2); }
.gd-wide-banner img { width: 100%; }

/* ════════ ۵ — بخش‌های عمومی ════════ */
.gd-section { padding-block: var(--gd-section-y); }
.gd-section--tight { padding-block: var(--gd-space-5); }

.gd-section__head { margin-block-end: var(--gd-space-8); text-align: center; }
.gd-section__head h2 { margin: 0 0 var(--gd-space-3); font-size: var(--gd-text-2xl); line-height: var(--gd-lh-tight); }
.gd-section__head p  { margin: 0; color: var(--gd-muted); font-size: var(--gd-text-md); }
.gd-section__head--row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--gd-space-5); text-align: start;
}
.gd-section__cta { margin-block-start: var(--gd-space-8); text-align: center; }
.gd-section__cta .gd-btn { display: inline-flex; }

.gd-eyebrow {
    display: block; margin-block-end: var(--gd-space-2);
    color: var(--gd-primary); font-size: var(--gd-text-xs); font-weight: var(--gd-fw-bold);
}
.gd-lead { max-width: 78ch; margin-inline: auto; line-height: var(--gd-lh-relaxed); }
.gd-stat { color: var(--gd-primary); font-size: 1.25em; font-weight: var(--gd-fw-bold); }

/* ════════ ۶ — چرا گنج دانش · حوزه‌های فعالیت ════════ */
.gd-why { background: var(--gd-surface-soft); }
/* grid-auto-rows: 1fr همه‌ی سطرها را هم‌ارتفاع می‌کند؛ بدون آن
   سطر دوم روی موبایل کوتاه‌تر از سطر اول می‌افتاد و بهم‌ریخته بود. */
.gd-why__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr; gap: var(--gd-space-5);
}
.gd-why__item {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    padding: var(--gd-space-6) var(--gd-space-5);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-lg);
    text-align: center;
    transition: transform var(--gd-dur-base) var(--gd-ease),
                border-color var(--gd-dur-base) var(--gd-ease),
                box-shadow var(--gd-dur-base) var(--gd-ease),
                opacity var(--gd-dur-slow) var(--gd-ease);
}
/* پرده‌ی رنگی که از پایین بالا می‌آید */
.gd-why__item::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(160deg, var(--gd-primary-soft), transparent 65%);
    opacity: 0; transition: opacity var(--gd-dur-base) var(--gd-ease);
}
.gd-why__item > * { position: relative; z-index: 1; }
.gd-why__item:hover {
    transform: translateY(-6px);
    border-color: var(--gd-primary);
    box-shadow: var(--gd-shadow-3);
}
.gd-why__item:hover::before { opacity: 1; }
.gd-why__item:hover .gd-why__icon {
    transform: scale(1.12) rotate(-8deg);
    background: var(--gd-primary); color: var(--gd-on-primary);
}

/* ورود پلکانی هنگام دیده‌شدن. کلاس gd-motion را JS می‌گذارد، پس اگر
   JS نبود کارت‌ها از اول دیده می‌شوند و چیزی گم نمی‌شود. */
.gd-motion .gd-why__item:not(.is-in) { opacity: 0; transform: translateY(18px); }
.gd-why__item:nth-child(2) { transition-delay: .08s; }
.gd-why__item:nth-child(3) { transition-delay: .16s; }
.gd-why__item:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .gd-motion .gd-why__item:not(.is-in) { opacity: 1; transform: none; }
    .gd-why__item, .gd-why__icon { transition: none; }
}
.gd-why__icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-block-end: var(--gd-space-4);
    background: var(--gd-primary-soft); border-radius: var(--gd-radius-full);
    color: var(--gd-primary); font-size: var(--gd-text-xl);
    transition: transform var(--gd-dur-base) var(--gd-ease),
                background var(--gd-dur-base) var(--gd-ease),
                color var(--gd-dur-base) var(--gd-ease);
}
.gd-why__item h3 { margin: 0 0 var(--gd-space-2); font-size: var(--gd-text-md); }
.gd-why__item p  {
    margin: 0; color: var(--gd-muted); font-size: var(--gd-text-xs);
    line-height: var(--gd-lh-relaxed);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* کارت دسته‌بندی — عمداً gd-fieldcard نه gd-chip، چون .gd-chip در
   دیزاین سیستم تگ فیلتر کوچک است و معنی‌اش فرق دارد */
/* گرید، نه فلکس. قبلاً فلکس بود با flex-basis یک‌هفتم؛ با ۱۵ دسته
   سطر آخر یک کارتِ تنها می‌شد و وسط می‌افتاد. auto-fit خودش
   تعداد ستون را از عرض درمی‌آورد و همه‌ی کارت‌ها هم‌عرض‌اند. */
/* ⚠ فلکس، نه گرید — و این بار با دلیلِ نوشته‌شده.
   کدِ اولیه فلکس بود و کامنتش می‌گفت «گرید سطر آخرِ ناقص را
   وسط‌چین نمی‌کند». من عوضش کردم به گرید و دقیقاً همان اتفاق
   افتاد: ۱۹ دسته در ۸ ستون یعنی ۸+۸+۳، و آن سه‌تا به یک لبه
   می‌چسبیدند. برگشت به فلکس با justify-content: center. */
.gd-fields__grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--gd-space-3);
    margin: 0; padding: 0; list-style: none;
}
/* خودِ li خانه‌ی چیدمان است تا انیمیشن روی آن بنشیند و لینک تمامِ
   خانه را پر کند — هدفِ لمسی کوچک‌تر از کارت نباشد. */
.gd-fields__grid > li {
    display: grid; margin: 0;
    flex: 0 0 calc((100% - 7 * var(--gd-space-3)) / 8);
}
.gd-fieldcard {
    height: 100%;
    display: flex; flex-direction: column; align-items: center; gap: var(--gd-space-3);
    padding: var(--gd-space-5) var(--gd-space-3);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-lg);
    text-align: center;
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                transform var(--gd-dur-base) var(--gd-ease),
                box-shadow var(--gd-dur-base) var(--gd-ease);
}
.gd-fieldcard:hover {
    border-color: var(--gd-primary);
    transform: translateY(-3px);
    box-shadow: var(--gd-shadow-2);
}
.gd-fieldcard i  { font-size: var(--gd-text-xl); color: var(--gd-primary); }
.gd-fieldcard h3 { margin: 0; font-size: var(--gd-text-xs); font-weight: var(--gd-fw-medium); line-height: var(--gd-lh-snug); }

/* ════════ ۷ — اسلایدر محصول و کارت ════════ */
.gd-slider { position: relative; }
.gd-slider__track {
    display: flex; gap: var(--gd-space-4);
    overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
    padding-block-end: var(--gd-space-2);
    scrollbar-width: none;
}
.gd-slider__track::-webkit-scrollbar { display: none; }

.gd-slider__nav {
    position: absolute; inset-block-start: 42%; z-index: var(--gd-z-base);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--gd-surface); border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-full);
    box-shadow: var(--gd-shadow-2); cursor: pointer;
    transition: background var(--gd-dur-base) var(--gd-ease);
}
.gd-slider__nav:hover { background: var(--gd-primary); border-color: var(--gd-primary); color: var(--gd-on-primary); }
.gd-slider__nav--prev { inset-inline-start: calc(-1 * var(--gd-space-4)); }
.gd-slider__nav--next { inset-inline-end: calc(-1 * var(--gd-space-4)); }
.gd-slider__nav[disabled] { opacity: .35; cursor: default; }

/* کارت محصول — gd-pcard تا با .gd-card عمومی سیستم تداخل نکند */
/* عرض کارت با پهنای صفحه بالا و پایین می‌رود: با زوم اوت تعداد بیشتری
   جا می‌شود بدون اینکه کارت زشت کشیده شود. */
.gd-pcard {
    position: relative;
    flex: 0 0 clamp(168px, 17vw, 250px);
    scroll-snap-align: start;
    display: flex; flex-direction: column; gap: var(--gd-space-3);
    padding: var(--gd-space-4);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-lg);
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                box-shadow var(--gd-dur-base) var(--gd-ease);
}
.gd-pcard:hover { border-color: var(--gd-primary-border); box-shadow: var(--gd-shadow-2); }
.gd-pcard__flag {
    position: absolute; inset-block-start: var(--gd-space-3); inset-inline-start: var(--gd-space-3);
    z-index: var(--gd-z-base);
    padding: 3px var(--gd-space-2);
    background: var(--gd-accent); color: var(--gd-on-accent);
    border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-2xs); font-weight: var(--gd-fw-bold);
}
/* عکس محصول: فایل ۸۰۰×۸۰۰، نمایش ۱۶۴×۱۶۴ — مثل دیجی‌کالا */
.gd-pcard__media {
    display: block; aspect-ratio: 1;
    background: var(--gd-surface-soft); border-radius: var(--gd-radius-sm); overflow: hidden;
}
.gd-pcard__media img { width: 100%; height: 100%; object-fit: contain; }
/* عنوان تا سه خط. flex:1 باعث می‌شود فضای خالیِ کارت‌های کوتاه‌تر
   زیر عنوان بیفتد، پس پاورقی همه‌ی کارت‌ها روی یک خط ته کارت می‌ماند. */
/* ارتفاع دقیقاً سه خط، چه عنوان کوتاه باشد چه بلند. چون عرض کارت هم
   ثابت است، ارتفاع کل همه‌ی کارت‌ها — در همه‌ی بخش‌ها — یکی می‌شود. */
.gd-pcard__title {
    margin: 0; flex: 0 0 auto;
    height: 5.1em;                     /* ۳ خط × line-height ۱٫۷ */
    font-size: var(--gd-text-xs); font-weight: var(--gd-fw-medium); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gd-pcard .gd-btn { justify-content: center; font-size: var(--gd-text-xs); padding-block: var(--gd-space-2); }

/* نام کامل محصول هنگام hover — عنوان کارت دو خط بیشتر جا ندارد،
   پس متن کامل در یک لایه‌ی روی کارت باز می‌شود. */
.gd-pcard__full {
    position: absolute; inset-inline: 0; inset-block-end: 0;
    z-index: 3; padding: var(--gd-space-3);
    background: var(--gd-surface);
    border-block-start: 1px solid var(--gd-line);
    border-end-start-radius: var(--gd-radius-lg);
    border-end-end-radius: var(--gd-radius-lg);
    box-shadow: var(--gd-shadow-3);
    font-size: var(--gd-text-xs); line-height: var(--gd-lh-snug);
    color: var(--gd-ink);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--gd-dur-base) var(--gd-ease),
                transform var(--gd-dur-base) var(--gd-ease),
                visibility var(--gd-dur-base);
}
@media (hover: hover) {
    .gd-pcard:hover .gd-pcard__full { opacity: 1; visibility: visible; transform: translateY(0); }
}

.gd-products--art { background: var(--gd-surface-soft); }

/* ---------- قیمت ---------- */
/* در RTL، flex-end یعنی سمت چپ. margin-block-start:auto پاورقی را
   ته کارت می‌چسباند تا قیمت‌های یک ردیف دقیقاً هم‌تراز شوند. */
.gd-pcard__foot {
    margin-block-start: auto;
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: flex-end;
    gap: 2px; height: 42px;
}
.gd-pcard__foot--ask { align-items: stretch; }
.gd-pcard__foot--ask .gd-btn { width: 100%; }
.gd-price__old  { color: var(--gd-muted); font-size: var(--gd-text-2xs); text-decoration: line-through; }
.gd-price__now  { color: var(--gd-ink-strong); font-size: var(--gd-text-md); font-weight: var(--gd-fw-bold); }
.gd-price__unit { color: var(--gd-muted); font-size: var(--gd-text-2xs); font-weight: var(--gd-fw-regular); }

/* ---------- مسیر راهنما (breadcrumb) ---------- */
.gd-crumb { display: flex; align-items: center; gap: var(--gd-space-2); margin-block-end: var(--gd-space-2); font-size: var(--gd-text-xs); color: var(--gd-muted); }
.gd-crumb a { color: var(--gd-primary); font-weight: var(--gd-fw-bold); }
.gd-crumb i { font-size: var(--gd-text-2xs); }
.gd-crumb span { color: var(--gd-ink); font-weight: var(--gd-fw-medium); }
.gd-products--books { background: var(--gd-surface-soft); }

/* کتاب‌ها عمداً استثنا ندارند: کاربر خواست همه‌ی کارت‌های محصول
   در کل صفحه دقیقاً یک اندازه باشند، پس قاب ۱:۱ و عرض یکسان. */
.gd-section__sub { margin: var(--gd-space-2) 0 0; color: var(--gd-muted); font-size: var(--gd-text-sm); }

/* ════════ ۸ — نظرات · برندها · وبلاگ · درباره · نقشه ════════ */
.gd-reviews { background: var(--gd-surface-soft); }
.gd-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gd-space-5); }
.gd-review {
    padding: var(--gd-space-6);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-lg);
}
.gd-review__head { display: flex; align-items: center; gap: var(--gd-space-3); margin-block-end: var(--gd-space-3); }
.gd-review__avatar {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 42px;
    background: var(--gd-primary); color: var(--gd-on-primary);
    border-radius: var(--gd-radius-full); font-weight: var(--gd-fw-bold); font-size: var(--gd-text-lg);
}
.gd-review__head strong { display: block; font-size: var(--gd-text-sm); }
.gd-review__head time   { font-size: var(--gd-text-2xs); color: var(--gd-muted); }
.gd-review__src { margin-inline-start: auto; color: var(--gd-muted); font-size: var(--gd-text-md); }
.gd-review__stars { margin-block-end: var(--gd-space-3); color: var(--gd-accent-text); font-size: var(--gd-text-xs); letter-spacing: 2px; }
.gd-review p { margin: 0; font-size: var(--gd-text-xs); line-height: var(--gd-lh-relaxed); color: var(--gd-muted); }

/* ⭐ ۱۹ شهریور ۱۴۰۵ — گرید، نه فلکس.
   تا دیروز کاشی به اندازه‌ی وردمارکِ خودش بود («دیوارِ لوگو»). روی کاغذ
   درست بود ولی روی صفحه ۲۴ کاشی به ردیف‌های ۱۰ و ۸ و ۵ می‌شکست: هر
   ردیف عرضِ متفاوت، ردیفِ آخر معلق وسط، و چون هر کاشی به اندازه‌ی
   نامش بود هیچ ستونی زیرِ ستونِ بالایی نمی‌نشست. صاحبِ کار همین را
   دید و گفت درست شود.
   ۲۴ بر ۶ و ۴ و ۳ بخش‌پذیر است، پس در هر بریک‌پوینت ردیف‌ها کامل‌اند
   و هیچ‌وقت ردیفِ آخرِ ناقص نداریم. ⚠ اگر روزی limit عوض شد، عددی
   انتخاب شود که بر هر سه بخش‌پذیر باشد — وگرنه همان ردیفِ معلق برمی‌گردد. */
.gd-brands__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* هر ردیف هم‌قدِ بلندترین ردیف. بدونِ این، ردیفی که یک وردمارکِ
       دو خطی دارد ۹۰ پیکسل می‌شود و بقیه ۷۶ — یک پله‌ی نامرتب وسطِ
       دیوارِ لوگو. سنجیده شد روی ۹۰۰ پیکسل. */
    grid-auto-rows: 1fr;
    gap: var(--gd-space-3);
}
/* خانه‌ی گرید عرض را می‌دهد؛ کاشی فقط اجازه می‌خواهد کوچک‌تر از
   محتوایش بشود، وگرنه نامِ بلند ستون را پهن می‌کند. */
.gd-brand { min-width: 0; }
/* تبلت: ۶ ستون کاشی را باریک می‌کند. ۴ ستون ⇒ ۶ ردیفِ کامل. */
@media (max-width: 1023px) {
    .gd-brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ⭐ تا امروز کاشیِ برند فقط یک عکس بود؛ وقتی عکس‌ها ۴۰۴ شدند،
   کاشی چیزی برای نشان دادن نداشت. حالا نام همیشه هست و عکس
   اضافه‌ی روی آن — پس بخش هیچ‌وقت خالی نمی‌شود. */
.gd-brand {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: var(--gd-space-2);
    min-height: 76px;
    padding: var(--gd-space-4) var(--gd-space-3);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
    background: var(--gd-surface);
    text-align: center;
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                transform var(--gd-dur-base) var(--gd-ease),
                box-shadow var(--gd-dur-base) var(--gd-ease);
}
.gd-brand:hover {
    border-color: var(--gd-primary);
    transform: translateY(-3px);
    box-shadow: var(--gd-shadow-2);
}
/* ⭐ ۱۹ شهریور ۱۴۰۵ — لوگو با **مساحت** هم‌اندازه می‌شود، نه با ارتفاع.
   تا امروز فقط `max-height` بود. نتیجه این شد که هر ۲۱ لوگو در ارتفاعِ
   ۳۸ قفل می‌شدند و تنها متغیر عرض بود — یعنی نشانِ مربع یک نقطه‌ی ریز
   می‌شد و وردمارکِ پهن کارت را پر می‌کرد. سنجشِ زنده: نسبتِ ابعاد از
   ۰.۷۱ (چهارپایه) تا ۸.۳۳ کشیده است و مساحتِ رندرشده **۷.۲۴ برابر**
   فرق می‌کرد — ۶۵۵ پیکسل‌مربع برای چهارپایه در برابر ۴۶۳۴ برای پیکاسو.

   با سقفِ عرض *و* ارتفاع، لوگوی پهن زودتر به دیوارِ عرض می‌خورد و
   لوگوی مربع تا ته ارتفاع بالا می‌آید. روی همین ۲۱ لوگو حساب شد:
   کمترین پراکندگی روی نسبتِ W/H = ۲.۵ می‌افتد و ۷.۲۴ را به **۳.۳۳**
   می‌رساند. کوچک‌ترین لوگو ۲.۲ برابر بزرگ‌تر می‌شود و بزرگ‌ترین دست‌نخورده.

   ⚠ `height` ثابت است نه `max-height`: جعبه همیشه ۵۶ است و لوگو داخلش
     با `contain` می‌نشیند، پس همه‌ی کارت‌ها یک قد دارند فارغ از اینکه
     چه شکلی از لوگو گرفته‌اند. با `max-height` قدِ کارت به شکلِ
     لوگویش بند می‌شد. */
.gd-brand img {
    height: 56px; width: auto; max-width: 140px;
    /* scale-down نه contain: جعبه همان ۵۶ می‌ماند، ولی عکسِ کوچک‌تر از
       جعبه بزرگ نمی‌شود. با contain «گاج» (فقط ۱۰۶×۳۶ موجود است) تا
       ۱۴۰×۴۸ کش می‌آمد — ۱.۳۲ برابر، و روی کارت تار دیده می‌شد. بقیه‌ی
       لوگوها همه بزرگ‌تر از جعبه‌اند و فرقی برایشان نمی‌کند. */
    object-fit: scale-down;
}
/* ⭐ جای لوگو. هر دو ستونِ تصویر روی دیتابیسِ زنده خالی‌اند
   (Image_Path ۰/۳۱۲ و Logo_URL ۰/۳۱۲)، پس تا روزِ بارگذاری نامِ
   لاتینِ برند نقشِ وردمارک را بازی می‌کند. حرفِ تنهای فارسی
   شبیهِ لوگو نبود؛ STAEDTLER هست. */
.gd-brand__word {
    font-family: var(--gd-font-latin, 'Segoe UI', system-ui, sans-serif);
    font-size: var(--gd-text-md);
    font-weight: var(--gd-fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gd-ink-strong);
    /* ۱.۲ جعبه‌ی خط را دقیقاً هم‌قدِ حروف می‌کرد و گردکردنِ زیرپیکسلی
       یک پیکسل از پایین می‌بُرد (۱۸ در برابر ۱۹ روی هر ۱۶ کاشیِ لاتین). */
    line-height: 1.35;
    direction: ltr;
    /* ⚠ تا دیروز nowrap + ellipsis بود. با ستونِ ثابت این یعنی
       «BEAUTIFUL MIND L…» — نامِ برندِ بریده بدتر از نامِ دو خطی است.
       پس می‌پیچد، حداکثر دو خط، و اندازه با عرضِ ستون کوچک می‌شود. */
    max-width: 100%;
    font-size: clamp(var(--gd-text-2xs), 1.05vw, var(--gd-text-md));
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
/* برندی که نامِ لاتین ندارد — فارسی، بدونِ uppercase که بی‌معنی است */
.gd-brand__word--fa {
    font-family: inherit; text-transform: none; letter-spacing: 0;
    direction: rtl; font-size: var(--gd-text-sm);
    /* ⚠ line-height ۱.۲ برای لاتین بس است ولی دنباله‌ی «ک» و «و» و «ی»
       از جعبه‌ی خط بیرون می‌زند و overflow:hidden سرشان را می‌بُرد —
       سنجیده شد: clientHeight ۱۶ در برابر scrollHeight ۱۸. */
    line-height: 1.55;
}
.gd-brand:hover .gd-brand__word { color: var(--gd-primary); }
/* وقتی وردمارک خودش نام است، خطِ دوم تکرار می‌شود — ولی فارسیِ
   کنارِ لاتین مفید است: کاربر «Staedtler» را می‌بیند و «استدلر» را
   می‌خواند. فقط وقتی وردمارک خودش فارسی است حذف می‌شود. */
.gd-brand:has(.gd-brand__word--fa) .gd-brand__name { display: none; }
.gd-brand__name {
    font-size: var(--gd-text-xs);
    font-weight: var(--gd-fw-medium);
    line-height: var(--gd-lh-snug);
    color: var(--gd-ink);
}
.gd-brand:hover .gd-brand__name { color: var(--gd-primary); }

.gd-blog { background: var(--gd-surface-soft); }
.gd-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gd-space-5); }
.gd-post {
    display: block; overflow: hidden;
    background: var(--gd-surface); border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
    transition: border-color var(--gd-dur-base) var(--gd-ease), box-shadow var(--gd-dur-base) var(--gd-ease);
}
.gd-post:hover { border-color: var(--gd-primary-border); box-shadow: var(--gd-shadow-2); }
.gd-post__media { display: block; aspect-ratio: 16 / 9; background: var(--gd-surface-sunken); }
.gd-post__media img { width: 100%; height: 100%; object-fit: cover; }
.gd-post__ph {
    display: flex; align-items: center; justify-content: center; height: 100%;
    color: var(--gd-line-strong); font-size: var(--gd-text-3xl);
}
.gd-post__cat {
    display: inline-block; margin: var(--gd-space-4) var(--gd-space-4) 0;
    padding: 3px var(--gd-space-3);
    background: var(--gd-primary-soft); color: var(--gd-primary);
    border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-2xs); font-weight: var(--gd-fw-bold);
}
.gd-post h3   { margin: var(--gd-space-3) var(--gd-space-4) var(--gd-space-2); font-size: var(--gd-text-md); line-height: var(--gd-lh-snug); }
.gd-post time { display: block; margin: 0 var(--gd-space-4) var(--gd-space-4); font-size: var(--gd-text-2xs); color: var(--gd-muted); }

.gd-map { background: var(--gd-surface-soft); }
.gd-map__frame {
    border-radius: var(--gd-radius-lg); overflow: hidden;
    border: 1px solid var(--gd-line); box-shadow: var(--gd-shadow-2);
}

/* نقشه دیگر iframe نیست؛ یک عکس ثابت از سرور خودمان است که کلیکش
   مسیریابی را باز می‌کند. سنجاق و نوشته‌ی حق‌نشر روی همان عکس‌اند.
   مکان‌ها با left/top فیزیکی گذاشته شده‌اند نه inline: عکس آینه
   نمی‌شود و در صفحه‌ی راست‌چین هم مرکزِ عکس همان مرکز است. */
.gd-map__link { display: block; position: relative; }
.gd-map__link img {
    display: block; width: 100%; height: 380px;
    object-fit: cover; object-position: center;
    background: var(--gd-gray-100);
}
.gd-map__pin {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -100%);
    font-size: 2rem; line-height: 1; color: var(--gd-danger, #dc2626);
    text-shadow: 0 2px 6px rgba(15, 23, 42, .45);
    pointer-events: none;
}
.gd-map__osm {
    position: absolute; left: 8px; bottom: 8px;
    padding: 2px 8px; border-radius: var(--gd-radius-sm);
    background: rgba(255, 255, 255, .82); color: var(--gd-gray-700);
    /* کف خوانایی ۱۲px — توکن 2xs روی صفحه‌هایی که لایه‌ی موبایل را
       لود نکرده‌اند ۱۱px می‌ماند و ممیزی درست گیرش می‌دهد. */
    font-size: max(12px, var(--gd-text-2xs)); direction: ltr;
}
.gd-map__link:hover img { filter: saturate(1.06) contrast(1.02); }

/* ════════ ۹ — فوتر ════════ */
.gd-footer {
    margin-block-start: var(--gd-space-10);
    background: var(--gd-gray-900); color: var(--gd-gray-300);
}

.gd-footer__grid {
    display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr;
    gap: var(--gd-space-8); padding-block: var(--gd-space-12);
}
/* height:auto — ۲۲ شهریور ۱۴۰۵ width/height روی تگ نشست (img_dimensions)؛ این نگه می‌دارد
   که لوگوی غیرمربعِ مستأجرِ دیگر کشیده نشود. قاعده‌ی موبایل (30px) خاص‌تر است و می‌بَرد. */
.gd-footer__logo { height: auto; margin-block-end: var(--gd-space-4); background: var(--gd-gray-0); padding: var(--gd-space-2) var(--gd-space-3); border-radius: var(--gd-radius-sm); }
.gd-footer h4  { margin: 0 0 var(--gd-space-4); color: var(--gd-gray-0); font-size: var(--gd-text-md); }
.gd-footer ul  { margin: 0; padding: 0; list-style: none; }
.gd-footer li  { margin-block-end: var(--gd-space-2); font-size: var(--gd-text-sm); }
.gd-footer p   { color: var(--gd-gray-400); font-size: var(--gd-text-sm); line-height: var(--gd-lh-relaxed); }
.gd-footer a:hover { color: var(--gd-gray-0); }
.gd-footer__addr { line-height: var(--gd-lh-relaxed); color: var(--gd-gray-400); }
.gd-footer__col--seal img { height: auto; max-width: 130px; background: var(--gd-gray-0); padding: var(--gd-space-2); border-radius: var(--gd-radius-sm); }
.gd-footer__about {
    padding-block: var(--gd-space-8);
    border-block-start: 1px solid var(--gd-gray-800);
}
.gd-footer__about h4 { margin: 0 0 var(--gd-space-4); font-size: var(--gd-text-md); }
.gd-footer__about-body {
    position: relative; overflow: hidden;
    max-height: 96px;
    transition: max-height var(--gd-dur-slow) var(--gd-ease);
}
/* ⛔ سقف ۲۰۰۰ بود و محتوا **۴۱۹۳** پیکسل است (روی صفحه‌ی
   زنده اندازه گرفته شد). یعنی «ادامهٔ مطلب» باز می‌شد و باز هم
   **بیش از نیمی از متن دیده نمی‌شد** — بدون اسکرول، بدون نشانه‌ی
   بریدگی. عددِ جادویی همیشه روزی کوتاه می‌آید.
   ⚠ قلابِ impeccable این را به‌عنوان «انیمیشنِ خصیصهٔ چیدمانی» گرفت؛
     مسئلهٔ واقعی سرعت نبود، متنِ گم‌شده بود. */
.gd-footer__about[data-state="expanded"] .gd-footer__about-body { max-height: 500vh; }
.gd-footer__about[data-state="collapsed"] .gd-footer__about-body::after {
    content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 48px;
    background: linear-gradient(transparent, var(--gd-gray-900));
}
.gd-footer__about-body h5 { margin: var(--gd-space-4) 0 var(--gd-space-2); color: var(--gd-gray-0); font-size: var(--gd-text-sm); }
.gd-footer__about-body p  { margin: 0 0 var(--gd-space-2); font-size: var(--gd-text-xs); line-height: var(--gd-lh-relaxed); }
.gd-footer__about-body ul { margin: 0 0 var(--gd-space-2); padding-inline-start: var(--gd-space-4); }
.gd-footer__about-body li { margin-block-end: var(--gd-space-1); font-size: var(--gd-text-xs); color: var(--gd-gray-400); }
.gd-footer__about-body strong { color: var(--gd-gray-300); }
.gd-footer__more {
    display: inline-flex; align-items: center; gap: var(--gd-space-2);
    margin-block-start: var(--gd-space-3); padding: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--gd-accent); font: inherit; font-size: var(--gd-text-xs); font-weight: var(--gd-fw-bold);
}
.gd-footer__more i { transition: transform var(--gd-dur-base) var(--gd-ease); }
.gd-footer__about[data-state="expanded"] .gd-footer__more i { transform: rotate(180deg); }

.gd-footer__bottom {
    padding-block: var(--gd-space-4);
    border-block-start: 1px solid var(--gd-gray-800);
    font-size: var(--gd-text-xs); text-align: center;
}

.gd-social {
    display: inline-flex; align-items: center; gap: var(--gd-space-2);
    margin-block-start: var(--gd-space-4); padding: var(--gd-space-2) var(--gd-space-4);
    border: 1px solid var(--gd-gray-700); border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-xs); direction: ltr;
}
.gd-social:hover { border-color: var(--gd-accent); color: var(--gd-gray-0); }
.gd-social i { font-size: var(--gd-text-md); color: var(--gd-accent); }

/* ════════ ۱۰ — کشو، مودال، فرم، دکمه شناور ════════ */
.gd-overlay { position: fixed; inset: 0; z-index: var(--gd-z-overlay); background: rgba(15, 23, 42, .5); }
.gd-overlay[hidden] { display: none; }

.gd-drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--gd-z-drawer);
    display: flex; flex-direction: column;
    width: min(340px, 88vw);
    background: var(--gd-surface); box-shadow: var(--gd-shadow-4);
}
.gd-drawer[hidden] { display: none; }
.gd-drawer--left { inset-inline: auto 0; inset-inline-start: auto; }
/* ════════ منوی دسته‌بندیِ دوستونی ════════
   ریلِ سطح یک سمت راست (شروعِ خط در فارسی)، محتوای دسته سمت چپ.
   هر دو ستون جداگانه اسکرول می‌شوند — ریل همیشه سرِ جایش می‌ماند. */
.gd-catnav {
    display: grid;
    grid-template-columns: 104px 1fr;
    flex: 1 1 auto; min-height: 0;
}
.gd-catnav__rail {
    margin: 0; padding: 0; list-style: none;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--gd-surface-soft);
    border-inline-end: 1px solid var(--gd-line);
}
.gd-catnav__rail li { margin: 0; }
.gd-catnav__tab {
    display: flex; flex-direction: column; align-items: center; gap: var(--gd-space-2);
    min-height: 78px; padding: var(--gd-space-3) 6px;
    text-align: center; line-height: var(--gd-lh-snug);
    font-size: var(--gd-text-2xs); font-weight: var(--gd-fw-medium);
    color: var(--gd-muted);
    border-block-end: 1px solid var(--gd-line);
    transition: background var(--gd-dur-base) var(--gd-ease),
                color var(--gd-dur-base) var(--gd-ease);
}
.gd-catnav__tab i { font-size: var(--gd-text-lg); color: var(--gd-muted); }
/* نوارِ فعال سمت راستِ ریل می‌نشیند — inset منطقی تا در RTL درست باشد */
.gd-catnav__tab.is-active {
    background: var(--gd-surface); color: var(--gd-primary);
    box-shadow: inset -3px 0 0 var(--gd-primary);
}
.gd-catnav__tab.is-active i { color: var(--gd-primary); }

.gd-catnav__panes { overflow-y: auto; overscroll-behavior: contain; }
.gd-catnav__pane { display: none; padding: var(--gd-space-3) 0 var(--gd-space-6); }
.gd-catnav__pane.is-active { display: block; }
/* بدون JS همه‌ی پنل‌ها دیده می‌شوند و لنگرِ #id کار می‌کند —
   همان قاعده‌ی همیشگی: پیش‌فرض کامل است، JS فقط جمعش می‌کند. */
.gd-catnav--live .gd-catnav__pane { display: none; }
.gd-catnav--live .gd-catnav__pane.is-active { display: block; }

.gd-catnav__all {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; margin-block-end: var(--gd-space-2);
    padding: var(--gd-space-2) var(--gd-space-4);
    background: var(--gd-primary-soft); color: var(--gd-primary);
    font-size: var(--gd-text-sm); font-weight: var(--gd-fw-bold);
}
.gd-catnav__all i { font-size: var(--gd-text-xs); }
.gd-catnav__sub {
    display: block; padding: var(--gd-space-3) var(--gd-space-4) var(--gd-space-1);
    font-size: var(--gd-text-xs); font-weight: var(--gd-fw-bold);
    color: var(--gd-muted);
}
.gd-catnav__panes ul { margin: 0; padding: 0; list-style: none; }
.gd-catnav__panes li { margin: 0; }
.gd-catnav__panes li a {
    display: flex; align-items: center; min-height: 44px;
    padding: var(--gd-space-2) var(--gd-space-4);
    border-block-end: 1px solid var(--gd-line);
    font-size: var(--gd-text-sm); color: var(--gd-ink);
}
.gd-catnav__panes li a:active { background: var(--gd-surface-hover); }

/* در این حالت کشو باید تمام‌قد باشد و خودش اسکرول نکند —
   دو ستونِ داخلی اسکرول می‌کنند. */
#gdDrawer .gd-drawer__body {
    display: flex; flex-direction: column;
    padding: 0; overflow: hidden;
}
#gdDrawer .gd-drawer__body > a {
    flex: 0 0 auto;
}
@media (max-width: 767px) {
    #gdDrawer { width: min(460px, 100vw); }
}

.gd-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--gd-space-4); border-block-end: 1px solid var(--gd-line);
}
.gd-drawer__body { flex: 1; padding: var(--gd-space-4); overflow-y: auto; }
.gd-drawer__body details  { border-block-end: 1px solid var(--gd-line); }
.gd-drawer__body summary  { padding: var(--gd-space-3) 0; font-weight: var(--gd-fw-bold); cursor: pointer; }
.gd-drawer__body strong   { display: block; margin-block: var(--gd-space-3) var(--gd-space-1); font-size: var(--gd-text-xs); color: var(--gd-primary); }
.gd-drawer__body ul       { margin: 0 0 var(--gd-space-3); padding-inline-start: var(--gd-space-4); list-style: none; }
.gd-drawer__body li       { margin-block-end: var(--gd-space-1); font-size: var(--gd-text-xs); color: var(--gd-muted); }
.gd-drawer__body > a      { display: block; padding: var(--gd-space-3) 0; border-block-end: 1px solid var(--gd-line); font-weight: var(--gd-fw-bold); }
.gd-empty { margin-block-end: var(--gd-space-4); color: var(--gd-muted); text-align: center; }

.gd-modal {
    position: fixed; inset: 0; z-index: var(--gd-z-modal);
    display: flex; align-items: center; justify-content: center; padding: var(--gd-space-5);
}
.gd-modal[hidden] { display: none; }
.gd-modal__box {
    position: relative; width: min(400px, 100%); padding: var(--gd-space-8);
    background: var(--gd-surface); border-radius: var(--gd-radius-lg); box-shadow: var(--gd-shadow-4);
}
/* ضربدر سمتِ پایانِ خط (در راست‌چین: چپ). روی inset-inline-start درست
   روی اولِ عنوان می‌نشست و «ورود» را می‌پوشاند؛ padding عنوان نگهبانِ
   عنوانِ بلند است. */
.gd-modal__close { position: absolute; inset-block-start: var(--gd-space-3); inset-inline-end: var(--gd-space-3); }
.gd-modal__box h3 { margin: 0 0 var(--gd-space-5); padding-inline-end: var(--gd-space-8); font-size: var(--gd-text-lg); }
.gd-modal__foot { margin-block-start: var(--gd-space-4); font-size: var(--gd-text-xs); text-align: center; color: var(--gd-muted); }
.gd-modal__foot a { color: var(--gd-primary); font-weight: var(--gd-fw-bold); }

.gd-form label { display: block; margin-block-end: var(--gd-space-4); font-size: var(--gd-text-xs); color: var(--gd-muted); }
.gd-form input[type="tel"],
.gd-form input[type="text"],
.gd-form input[type="password"] {
    width: 100%; margin-block-start: var(--gd-space-2);
    padding: var(--gd-space-3);
    border: 1px solid var(--gd-line-strong); border-radius: var(--gd-radius-sm);
    font: inherit; font-size: 16px; outline: 0;   /* ۱۶px تا موبایل زوم نکند */
    background: var(--gd-surface); color: var(--gd-ink);
}
.gd-form input[type="email"],
.gd-form select {
    width: 100%; margin-block-start: var(--gd-space-2);
    padding: var(--gd-space-3);
    border: 1px solid var(--gd-line-strong); border-radius: var(--gd-radius-sm);
    font: inherit; font-size: 16px; outline: 0;
    background: var(--gd-surface); color: var(--gd-ink);
}
.gd-form input:focus, .gd-form select:focus { border-color: var(--gd-primary); }
.gd-check { display: flex; align-items: center; gap: var(--gd-space-2); }

/* ════════ ورود و ثبت‌نام ════════
   مودال چهار مرحله دارد و همه‌شان در DOM هستند؛ فقط یکی hidden نیست.
   جعبه ارتفاع ثابت ندارد چون مرحله‌ی ثبت‌نام بلندتر از بقیه است — پرشِ
   ارتفاع بهتر از اسکرول‌بارِ داخلی روی موبایل است.
   ════════ */
.gd-auth { width: min(430px, 100%); }
.gd-auth .gd-form { margin: 0; }

.gd-auth__msg {
    margin: 0 0 var(--gd-space-4); padding: var(--gd-space-3);
    border-radius: var(--gd-radius-sm);
    font-size: var(--gd-text-xs); line-height: var(--gd-lh-normal);
}
.gd-auth__msg.is-error { background: #fdecec; color: #a3261f; }
.gd-auth__msg.is-ok    { background: #e9f7ef; color: #1a7040; }

.gd-auth__hint {
    margin: 0 0 var(--gd-space-4);
    font-size: var(--gd-text-xs); color: var(--gd-muted);
    line-height: var(--gd-lh-loose, 1.9);
}
.gd-auth__phone { font-weight: var(--gd-fw-bold); color: var(--gd-ink); }

.gd-linkbtn {
    padding: 0; border: 0; background: none;
    color: var(--gd-primary); font: inherit; font-size: var(--gd-text-xs);
    font-weight: var(--gd-fw-bold); cursor: pointer; text-decoration: underline;
}
.gd-linkbtn:hover { color: var(--gd-primary-hover); }

.gd-req { color: #c0392b; }
.gd-opt { color: var(--gd-muted); font-weight: normal; }

/* سه انتخابگر تاریخ در یک ردیف — روی موبایل هم جا می‌شوند چون
   عرضشان کسری است نه ثابت */
.gd-auth__birth { display: flex; gap: var(--gd-space-2); margin-block-start: var(--gd-space-2); }
.gd-auth__birth select { flex: 1 1 0; min-width: 0; margin-block-start: 0; }
.gd-auth__birthlabel { margin-block-end: var(--gd-space-5); }

.gd-auth__done { text-align: center; }
.gd-auth__done .gd-btn { margin-block-start: var(--gd-space-3); }
.gd-auth__tick { display: block; margin-block-end: var(--gd-space-4); font-size: 3rem; color: #1a7040; }

/* دکمه‌ی در حال کار: کلیک دوم نباید کد دوم بفرستد */
.gd-auth.is-busy .js-auth-submit { opacity: .6; cursor: progress; }
.js-auth-submit:disabled { opacity: .6; cursor: not-allowed; }

/* کد تأیید همیشه چپ‌چین و با فاصله — خواندن پنج رقمِ چسبیده سخت است */
#gdAuthCode {
    direction: ltr; text-align: center;
    letter-spacing: .5em; text-indent: .5em;
    font-size: 20px; font-weight: var(--gd-fw-bold);
}
#gdAuthPhone { direction: ltr; text-align: right; }

/* ════════ ۱۱ — ریسپانسیو ════════
   Mobile-first نیست چون این صفحه از قبل دسکتاپ-اول نوشته شده بود؛
   بریک‌پوینت‌ها ولی همان چهار دسته‌ی دیزاین سیستم‌اند.
   ════════ */
.gd-only-mobile { display: none; }

/* ۱۰۲۳ واقعی ≡ ۱۲۷۹ مجازی — پله ۰٫۸ شد چون zoom روی مدیا‌کوئری اثر ندارد */
@media (max-width: 1023px) {
    .gd-fields__grid > li { flex-basis: calc((100% - 3 * var(--gd-space-3)) / 4); }
    .gd-why__grid     { grid-template-columns: repeat(2, 1fr); }
    .gd-reviews__grid { grid-template-columns: repeat(2, 1fr); }
    .gd-blog__grid    { grid-template-columns: repeat(2, 1fr); }
    .gd-footer__grid  { grid-template-columns: 1.6fr 1fr 1.2fr; }
    .gd-footer__col--seal { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .gd-only-mobile  { display: inline-flex; }
    .gd-hide-mobile  { display: none; }
    .gd-header__bar  { flex-wrap: wrap; height: auto; padding-block: var(--gd-space-3); gap: var(--gd-space-3); }
    .gd-search       { order: 3; flex-basis: 100%; max-width: none; }
    .gd-logo img     { height: 34px; }
    .gd-promobar     { height: auto; padding-block: var(--gd-space-3); font-size: var(--gd-text-xs); flex-wrap: wrap; gap: var(--gd-space-2); }
    .gd-promobar__deco { display: none; }
    .gd-btn--user    { border: 0; padding-inline: 0; }
    .gd-section__head--row { flex-direction: column; align-items: flex-start; }
    
.gd-footer__grid { grid-template-columns: 1fr; }
    .gd-slider__nav  { display: none; }
    .gd-pcard        { flex-basis: 150px; }

    .gd-reviews__grid { grid-template-columns: 1fr; }
    .gd-blog__grid    { grid-template-columns: 1fr; }
    .gd-hero__nav     { display: none; }
    .gd-map__link img { height: 260px; }
}

/* ════════ ۱۲ — چیدمان موبایل ════════
   همه‌ی اعداد بعد از اندازه‌گیری واقعی روی ۳۷۵px تنظیم شده‌اند.
   هدف: هر بخش با یک نگاه در یک صفحه دیده شود.
   ═══════════════════════════════════ */

/* ---------- نوار ناوبری پایین ---------- */
.gd-tabbar {
    position: fixed; inset-inline: 0; inset-block-end: 0;
    z-index: var(--gd-z-sticky);
    display: none;
    background: var(--gd-surface);
    border-block-start: 1px solid var(--gd-line);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .08);
    padding-block-end: env(safe-area-inset-bottom, 0);
}
.gd-tabbar__item {
    position: relative;
    flex: 1 1 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; padding: 6px 0;
    background: none; border: 0;
    color: var(--gd-muted); font: inherit; font-size: 10px;
    cursor: pointer;
}
.gd-tabbar__item i { font-size: 18px; }
.gd-tabbar__item.is-active { color: var(--gd-primary); }
.gd-tabbar__badge {
    position: absolute; inset-block-start: 2px; inset-inline-start: 50%;
    transform: translateX(12px);
    min-width: 15px; height: 15px; padding-inline: 3px;
    background: var(--gd-accent); color: var(--gd-on-accent);
    border-radius: var(--gd-radius-full);
    font-size: 9px; font-weight: var(--gd-fw-bold); line-height: 15px; text-align: center;
}

/* ---------- کارت محصول: اندازه‌ی استاندارد ---------- */
.gd-products--soft { background: var(--gd-surface-soft); }

@media (max-width: 767px) {
    .gd-tabbar { display: flex; }
    .gd-home   { padding-block-end: 60px; }

    /* ---------- نوار اعلان: نازک و تک‌خطی ---------- */
    .gd-promobar {
        height: 34px; gap: var(--gd-space-2);
        padding-inline: var(--gd-space-3);
        font-size: var(--gd-text-xs); font-weight: var(--gd-fw-medium);
        flex-wrap: nowrap; overflow: hidden; white-space: nowrap;
    }
    .gd-promobar__deco { display: none; }
    .gd-promobar__text { overflow: hidden; text-overflow: ellipsis; }
    .gd-promobar__code { padding: 1px 6px; font-size: 10px; }

    /* ---------- هدر ---------- */
    /* سطر اول: منو · لوگو · سبد و حساب — سطر دوم: جستجوی تمام‌عرض.
       با grid جای هر عنصر تعیین می‌شود؛ با flex-wrap اتفاقی می‌افتاد. */
    /* سطر اول: همبرگر و لوگو چسبیده به راست، سبد و حساب چسبیده به چپ.
       وسط‌چین کردن لوگو کج به نظر می‌رسید، چون دو طرفش هم‌عرض نیستند. */
    .gd-header__bar {
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-template-areas: "menu logo actions" "search search search";
        align-items: center;
        gap: var(--gd-space-2);
        padding-block: var(--gd-space-2);
    }
    .js-drawer-open       { grid-area: menu; }
    .gd-logo              { grid-area: logo; justify-self: start; }
    .gd-header__actions   { grid-area: actions; justify-self: end; gap: var(--gd-space-1); }
    .gd-search            { grid-area: search; height: 40px; max-width: none; }
    .gd-logo img          { height: 40px; }
    .gd-icon-btn          { width: 38px; height: 38px; font-size: 19px; }
    .gd-header__sep       { display: none; }
    .gd-btn--user   { width: 38px; height: 38px; padding: 0; justify-content: center; border: 0; }

    /* ---------- بنر ---------- */
    .gd-hero__slide img {
        aspect-ratio: 16 / 9;
        object-fit: cover; object-position: right center;
    }
    .gd-hero__dots { inset-block-end: 6px; }
    .gd-hero__dot  { width: 6px; height: 6px; }
    .gd-hero__dot.is-active { width: 18px; }

    /* ---------- فاصله‌ی بخش‌ها ---------- */
    .gd-section        { padding-block: var(--gd-space-6); }
    .gd-section--tight { padding-block: var(--gd-space-3); }
    .gd-section__head  { margin-block-end: var(--gd-space-4); }
    .gd-section__head h2 { font-size: var(--gd-text-lg); }
    .gd-section__head p  { font-size: var(--gd-text-xs); }
    .gd-section__head--row { flex-direction: row; align-items: center; gap: var(--gd-space-3); }
    .gd-section__head--row .gd-btn { flex: 0 0 auto; padding: 6px var(--gd-space-3); font-size: var(--gd-text-2xs); }
    .gd-section__cta   { margin-block-start: var(--gd-space-4); }
    .gd-crumb          { font-size: var(--gd-text-xs); margin-block-end: 2px; }
    .gd-section__sub   { font-size: var(--gd-text-xs); margin-block-start: 2px; }

    /* ---------- چرا گنج دانش: چهار کارت کوتاه ---------- */
    .gd-why__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gd-space-2); }
    .gd-why__item {
        padding: var(--gd-space-3) var(--gd-space-2);
        border-radius: var(--gd-radius);
    }
    .gd-why__icon {
        width: 34px; height: 34px; margin-block-end: var(--gd-space-2);
        font-size: var(--gd-text-md);
    }
    .gd-why__item h3 { font-size: var(--gd-text-xs); margin-block-end: 4px; }
    /* ⭐ صاحبِ کار: روی گوشی «اصالت فیزیکی کالا» کافی است، توضیحِ
       زیرش لازم نیست. چهار کارت در یک نگاه خوانده می‌شوند،
       نه چهار پاراگراف. بخش از ۴۳۹px به حدود نیم می‌رسد. */
    .gd-why__item p  { display: none; }
    .gd-why__item--unused p { font-size: var(--gd-text-xs); line-height: 1.7;
                       display: -webkit-box; -webkit-line-clamp: 3;
                       -webkit-box-orient: vertical; overflow: hidden; }
    .gd-tag { font-size: 9px; padding: 1px 6px; }

    /* ---------- حوزه‌های فعالیت: سه ستون، یک نگاه ---------- */
    /* ⭐ چهار تایی، نه سه‌تایی. صاحبِ کار خواست بخش در یک صفحه جا شود؛
       ۱۹ دسته در سه ستون یعنی ۷ سطر و ۸۳۳px (۱٫۰۳ صفحه)؛ در چهار
       ستون ۵ سطر می‌شود. */
    .gd-fields__grid { gap: 6px; }
    .gd-fields__grid > li { flex-basis: calc((100% - 3 * 6px) / 4); }
    .gd-fieldcard {
        padding: var(--gd-space-2) 3px; gap: 4px;
        border-radius: var(--gd-radius);
    }
    /* متنِ کوتاه‌تر در ستونِ باریک‌تر — دو سطر بس است */
    .gd-cats__lead { margin-block-end: 0; }
    .gd-cats .gd-fields__grid { margin-block-start: var(--gd-space-4); }
    .gd-cats .gd-section__cta { margin-block-start: var(--gd-space-4); }
    .gd-fieldcard i  { font-size: var(--gd-text-md); }
    /* ⭐ در چهار ستون، دو سطر کم است: «تجهیزات معماری،…» و «بوردگیم،
       اوریگامی و باز…» بریده می‌شدند و معنی را از دست می‌دادند.
       سه سطر هم نام را کامل می‌کند هم بخش در یک صفحه می‌ماند. */
    .gd-fieldcard h3 { font-size: var(--gd-text-xs); line-height: 1.45;
                       display: -webkit-box; -webkit-line-clamp: 3;
                       -webkit-box-orient: vertical; overflow: hidden; }
    .gd-stat { font-size: 1.1em; }

    /* ---------- کارت محصول ---------- */
    .gd-pcard {
        flex-basis: 148px; padding: var(--gd-space-2); gap: var(--gd-space-2);
        border-radius: var(--gd-radius);
    }
    .gd-pcard__title { font-size: var(--gd-text-xs); line-height: 1.7; -webkit-line-clamp: 3; }
    .gd-pcard__flag  { font-size: 9px; padding: 2px 6px; }
    .gd-price__now   { font-size: var(--gd-text-sm); }
    .gd-pcard__foot  { min-height: 36px; }
    .gd-pcard .gd-btn { font-size: 10px; padding-block: 6px; }
    .gd-slider__track { gap: var(--gd-space-2); }

    /* ---------- نظرات: افقی به‌جای ستونی ---------- */
    .gd-reviews__grid {
        grid-template-columns: none;
        display: flex; gap: var(--gd-space-3);
        overflow-x: auto; scroll-snap-type: x mandatory;
        scrollbar-width: none; padding-block-end: var(--gd-space-2);
    }
    .gd-reviews__grid::-webkit-scrollbar { display: none; }
    .gd-review {
        flex: 0 0 260px; scroll-snap-align: start;
        padding: var(--gd-space-4); border-radius: var(--gd-radius);
    }
    .gd-review__avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: var(--gd-text-sm); }
    .gd-review__head strong { font-size: var(--gd-text-xs); }
    .gd-review p {
        font-size: var(--gd-text-xs); line-height: 1.9;
        display: -webkit-box; -webkit-line-clamp: 4;
        -webkit-box-orient: vertical; overflow: hidden;
    }

    /* ---------- برندها ---------- */
    /* ۳ ستون روی موبایل، نه ۴: با ۴ ستون عرضِ هر کاشی زیرِ ۸۰ پیکسل
       می‌رفت و وردمارک به سه خط می‌شکست. ۲۴ بر ۳ هم بخش‌پذیر است. */
    .gd-brands__grid { gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gd-brand { min-height: 62px; padding: var(--gd-space-2); border-radius: var(--gd-radius); }
    /* همان نسبتِ ۲.۵، کوچک‌شده برای کارتِ ۱۱۰ پیکسلیِ موبایل */
    .gd-brand img { height: 38px; max-width: 95px; }

    /* ---------- وبلاگ ---------- */
    /* سه پست زیر هم صفحه را دراز می‌کرد؛ افقی می‌شود مثل ردیف محصولات */
    .gd-blog__grid {
        display: flex; grid-template-columns: none;
        gap: var(--gd-space-3);
        overflow-x: auto; scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--gd-space-4) * -1);
        padding-inline: var(--gd-space-4); padding-block-end: var(--gd-space-2);
    }
    .gd-blog__grid::-webkit-scrollbar { display: none; }
    .gd-post       { flex: 0 0 232px; scroll-snap-align: start; }
    .gd-post h3    { font-size: var(--gd-text-sm); }

    /* ---------- درباره ---------- */
    /* ---------- نقشه ---------- */
    .gd-map__link img { height: 200px; }
    .gd-map__pin      { font-size: 1.5rem; }
                
    /* ---------- فوتر ---------- */
    .gd-footer       { margin-block-start: var(--gd-space-6); }
    .gd-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--gd-space-5) var(--gd-space-4);
        padding-block: var(--gd-space-6);
    }
    /* ستون معرفی و نماد اعتماد تمام‌عرض؛ دو ستون لینک کنار هم */
    .gd-footer__col:first-child,
    .gd-footer__col--seal { grid-column: 1 / -1; }
    .gd-footer__col--seal { text-align: center; }
    /* تصویر نماد display:block است، پس text-align وسطش نمی‌کند */
    .gd-footer__col--seal img { max-width: 92px; margin-inline: auto; }

    /* لوگوی فوتر روی موبایل بزرگ افتاده بود.
       سلکتور عمداً دوکلاسه است: .gd-home img در بخش ۱ ارتفاع را auto
       می‌کند و با یک کلاس تنها وزنش بیشتر می‌شد. */
    .gd-footer img.gd-footer__logo {
        height: 30px; width: auto;
        margin-block-end: var(--gd-space-3);
        padding: 4px var(--gd-space-2);
    }
    .gd-footer p  { font-size: var(--gd-text-xs); line-height: var(--gd-lh-relaxed); }
    .gd-footer h4 { margin-block-end: var(--gd-space-2); font-size: var(--gd-text-sm); }
    .gd-footer li { margin-block-end: 6px; font-size: var(--gd-text-xs); }
    .gd-footer__addr { font-size: var(--gd-text-xs); }
    .gd-social { margin-block-start: var(--gd-space-3); padding: 6px var(--gd-space-3); font-size: var(--gd-text-xs); }

    .gd-footer__about { padding-block: var(--gd-space-5); }
    .gd-footer__about h4 { margin-block-end: var(--gd-space-3); }
    .gd-footer__about-body { max-height: 72px; }
    .gd-footer__about-body p,
    .gd-footer__about-body li { font-size: var(--gd-text-xs); line-height: var(--gd-lh-relaxed); }

    .gd-footer__bottom { padding-block: var(--gd-space-3); font-size: 10px; line-height: var(--gd-lh-relaxed); }
}

/* ════════ ۱۳ — صفحه‌ی دسته‌بندی ════════
   کارت محصول و هدر و فوتر همان‌های صفحه اصلی‌اند؛ فقط چیدمان فرق دارد:
   اینجا شبکه است نه اسلایدر، چون صفحه‌ی دسته برای مرور کردن است.
   ═══════════════════════════════════════ */
.gd-catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: var(--gd-space-4);
}
/* کارت در شبکه عرضش را از خودِ شبکه می‌گیرد، نه از flex-basis اسلایدر */
.gd-catgrid .gd-pcard { flex: 1 1 auto; }

.gd-catkids {
    display: flex; flex-wrap: wrap; gap: var(--gd-space-2);
    margin-block-end: var(--gd-space-6);
}
.gd-catkid {
    padding: var(--gd-space-2) var(--gd-space-4);
    background: var(--gd-surface);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-sm); font-weight: var(--gd-fw-medium);
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                color var(--gd-dur-base) var(--gd-ease);
}
.gd-catkid:hover { border-color: var(--gd-primary); color: var(--gd-primary); }

.gd-empty {
    padding: var(--gd-space-10) var(--gd-space-4);
    color: var(--gd-muted); font-size: var(--gd-text-md); text-align: center;
}
.gd-empty a { color: var(--gd-primary); font-weight: var(--gd-fw-bold); }

@media (max-width: 767px) {
    .gd-catgrid { grid-template-columns: repeat(2, 1fr); gap: var(--gd-space-2); }
    .gd-catkid  { padding: 6px var(--gd-space-3); font-size: var(--gd-text-xs); }
    .gd-catkids { margin-block-end: var(--gd-space-4); }
}

/* ════════ ۱۳.۱ — نوار مرتب‌سازی، صفحه‌بندی و پرسش‌ها ════════ */

/* h1 دسته: از نظر اندازه همان h2 بخش‌هاست، فقط تگش درست است */
.gd-section__h1 {
    margin: 0 0 var(--gd-space-1);
    font-size: var(--gd-text-xl); font-weight: var(--gd-fw-bold);
    line-height: var(--gd-lh-tight);
}

.gd-cattools {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--gd-space-2);
    margin-block-end: var(--gd-space-5);
    padding-block-end: var(--gd-space-3);
    border-block-end: 1px solid var(--gd-line);
}
.gd-cattools__label {
    font-size: var(--gd-text-sm); font-weight: var(--gd-fw-bold);
    color: var(--gd-muted); margin-inline-end: var(--gd-space-2);
}
.gd-cattools__opt {
    padding: 6px var(--gd-space-3); border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-sm); color: var(--gd-muted);
    transition: background var(--gd-dur-base) var(--gd-ease),
                color var(--gd-dur-base) var(--gd-ease);
}
.gd-cattools__opt:hover      { background: var(--gd-surface); color: var(--gd-ink); }
.gd-cattools__opt.is-active  { background: var(--gd-primary-soft); color: var(--gd-primary);
                               font-weight: var(--gd-fw-bold); }

.gd-catpager {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: var(--gd-space-2); margin-block-start: var(--gd-space-8);
}
.gd-catpager a {
    min-width: 40px; height: 40px; padding-inline: var(--gd-space-3);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-md);
    font-size: var(--gd-text-sm); color: var(--gd-ink); background: #fff;
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                color var(--gd-dur-base) var(--gd-ease);
}
.gd-catpager a:hover      { border-color: var(--gd-primary); color: var(--gd-primary); }
.gd-catpager a.is-active  { background: var(--gd-primary); border-color: var(--gd-primary);
                            color: #fff; font-weight: var(--gd-fw-bold); }

/* ════════ ۱۳.۱.۱ — اسکرول بی‌نهایت ════════
   صفحه‌بندی عددی سرور حذف نمی‌شود؛ فقط وقتی جاوااسکریپت کار را دست
   گرفت پنهان می‌شود. لینک‌هایش در DOM می‌مانند تا مسیر خزیدن نبُرد. */
.gd-catpager.is-inf-off { display: none; }

.gd-inf {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--gd-space-3); margin-block-start: var(--gd-space-6);
}
.gd-inf__status {
    margin: 0; min-height: 22px;
    font-size: var(--gd-text-sm); color: var(--gd-muted); text-align: center;
}
.gd-inf__more { min-width: 220px; }

@media (max-width: 767px) {
    .gd-inf__more { min-width: 100%; }
}

.gd-catfaq { margin-block: var(--gd-space-10) var(--gd-space-8); }
.gd-catfaq h2 {
    margin: 0 0 var(--gd-space-4);
    font-size: var(--gd-text-lg); font-weight: var(--gd-fw-bold);
}
.gd-catfaq__item {
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-md);
    margin-block-end: var(--gd-space-2); background: #fff;
}
.gd-catfaq__item summary {
    padding: var(--gd-space-3) var(--gd-space-4);
    font-size: var(--gd-text-sm); font-weight: var(--gd-fw-bold);
    cursor: pointer; list-style: none;
}
/* پیکان پیش‌فرض مرورگر در RTL سمت اشتباه می‌افتد؛ خودمان می‌گذاریمش */
.gd-catfaq__item summary::-webkit-details-marker { display: none; }
.gd-catfaq__item summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    float: inline-end; font-size: 11px; color: var(--gd-muted);
    transition: transform var(--gd-dur-base) var(--gd-ease);
}
.gd-catfaq__item[open] summary::after { transform: rotate(180deg); }
.gd-catfaq__item > div {
    padding: 0 var(--gd-space-4) var(--gd-space-4);
    font-size: var(--gd-text-sm); line-height: var(--gd-lh-relaxed);
    color: var(--gd-muted);
}

/* ── معرفیِ دسته — داخلِ main، زیرِ H1 و بالای کالاها ({{CAT_INTRO}}) ──
   کوتاه‌شدن فقط با CSS و فقط وقتی Home_Page.js کلاسِ is-clamped را گذاشته؛ متن همیشه
   کامل در صفحه است. سقف: ۳ خط روی گوشی، ۵ خط روی دسکتاپ. */
.gd-catintro { margin-block: var(--gd-space-3) var(--gd-space-6); }
.gd-catintro__title {
    margin: 0 0 var(--gd-space-2);
    font-size: var(--gd-text-lg); font-weight: var(--gd-fw-bold); color: var(--gd-ink);
}
.gd-catintro__body {
    font-size: var(--gd-text-sm); line-height: var(--gd-lh-relaxed); color: var(--gd-muted);
}
.gd-catintro__body h3,
.gd-catintro__body h4 {
    margin: var(--gd-space-4) 0 var(--gd-space-2);
    font-size: var(--gd-text-md); font-weight: var(--gd-fw-bold); color: var(--gd-ink);
}
.gd-catintro__body p  { margin: 0 0 var(--gd-space-3); }
.gd-catintro__body ul,
.gd-catintro__body ol { margin: 0 0 var(--gd-space-3); padding-inline-start: var(--gd-space-5); }
.gd-catintro__body a  { color: var(--gd-primary); }
.gd-catintro.is-clamped .gd-catintro__body {
    max-block-size: calc(1em * var(--gd-lh-relaxed) * 5);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
            mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
@media (max-width: 767.98px) {
    .gd-catintro.is-clamped .gd-catintro__body { max-block-size: calc(1em * var(--gd-lh-relaxed) * 3); }
}
.gd-catintro__more {
    display: inline-flex; align-items: center; gap: var(--gd-space-2);
    min-block-size: 44px; margin-block-start: var(--gd-space-2);
    padding-inline: var(--gd-space-4);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-md);
    background: #fff; color: var(--gd-ink);
    font: inherit; font-size: var(--gd-text-sm); font-weight: var(--gd-fw-bold);
    cursor: pointer;
}
/* display:inline-flex بالا hidden را می‌پوشاند؛ سایت قاعده‌ی سراسریِ [hidden] ندارد */
.gd-catintro__more[hidden] { display: none; }
.gd-catintro__more:focus-visible { outline: 2px solid var(--gd-primary); outline-offset: 2px; }

@media (max-width: 767px) {
    .gd-cattools     { gap: 6px; }
    .gd-cattools__opt{ font-size: var(--gd-text-xs); padding: 5px var(--gd-space-2); }
    .gd-catpager a   { min-width: 36px; height: 36px; font-size: var(--gd-text-xs); }
}

/* ════════ ۱۴ — سمت نوار اسکرول ════════
   مرورگر در سند dir="rtl" نوار اسکرول را سمت چپ می‌گذارد. قاعده‌ی سایت این
   است که در صفحه‌ی فارسی سمت راست باشد، پس ریشه به LTR می‌چرخد و body
   بلافاصله به RTL برمی‌گردد. دقیقاً یک سطح، تا هیچ نواده‌ای جهت اشتباه
   را ارث نبرد.
   ═══════════════════════════════════════ */
html { direction: ltr; }
body { direction: rtl; }

/* ۱۳.۵ — ردیف ناوبری در تبلت
   بین ۷۶۸ تا ۱۰۲۳ نه همبرگر هست نه نوار پایین، ولی لینک‌ها هم جا
   نمی‌شدند و صفحه ۲۹۳px افقی سرریز می‌کرد. به‌جای پنهان‌کردن (که
   کاربر تبلت را بی‌منو می‌گذاشت) ردیف اسکرول افقی می‌شود. */
@media (max-width: 1023px) {
    .gd-nav__inner {
        overflow-x: auto; scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .gd-nav__inner::-webkit-scrollbar { display: none; }
    .gd-nav__links { flex-wrap: nowrap; }
    .gd-nav__links li,
    .gd-nav__help,
    .gd-mega { flex: 0 0 auto; white-space: nowrap; }

    /* ⛔ ۲۱ شهریور ۱۴۰۵ — روی تبلت «دسته‌بندی کالاها» باز می‌شد و دیده
       نمی‌شد. این ردیف این‌جا اسکرول‌کننده‌ی افقی است (overflow-x: auto) و
       هر فرزندِ absolute را می‌بُرد. سنجش با کرومیومِ واقعی روی ۸۲۰px:
       پنل ۷۵۴×۸۱۳ باز بود ولی elementFromPoint در وسطش به بنر و کارتِ
       محصول می‌خورد. fixed از قابِ اسکرول بیرون می‌زند؛ بالایش را JS از
       لبه‌ی پایینِ دکمه می‌گذارد. */
    .gd-mega__panel {
        position: fixed;
        inset-block-start: var(--gd-mega-top, 120px);
        inset-inline: 3vw; width: auto;
        max-height: calc(100vh - var(--gd-mega-top, 120px) - 16px);
        max-height: calc(100dvh - var(--gd-mega-top, 120px) - 16px);
        min-height: 0;
        white-space: normal;   /* .gd-mega بالاتر nowrap است و به پنل ارث می‌رسید */
    }
    .gd-mega__groups,
    .gd-mega__content { overflow-y: auto; }
}

/* ════════ ۱۴ — بنرهای ساختاری ════════
   جای عکس‌های رستری wp-content را گرفتند. چهار باند اندازه دارند تا در
   موبایل، تبلت، لپ‌تاپ و نمایشگر بزرگ هم متن خوانا بماند هم بنر کوتاه.
   رنگ‌ها همه از توکن‌اند؛ هیچ هگز خامی اینجا نیست.
   ═════════════════════════════════════ */
.gd-hb {
    position: relative; overflow: hidden;
    /* اسلایدر برای ریاضیِ transform روی track جهت را ltr می‌کند و آن
       جهت به داخل بنر ارث می‌رسد؛ بدون این خط، متن فارسی و ستون‌ها
       آینه می‌شدند (متن چپ، عکس راست). */
    direction: rtl;
    /* ⭐ space-between بود و روی ۱۷۸۱px عرض، ۷۱۲px — ۴۳٪ بنر — حفره‌ی
       خالی وسط می‌ماند و متن و عکس به دو لبه می‌چسبیدند.
       حالا دو ستون یک خوشه‌ی وسط‌چین‌اند و فضای خالی می‌رود
       کناره‌ها — همان چیزی که صاحبِ کار خواست. */
    /* ⭐ ۱۵ شهریور ۱۴۰۵ — صاحبِ کار: «شروعِ نوشته‌ی سمت راستِ بنر
       همراستا باشد با شروعِ منوی هدر».

       هدر در یک قابِ --gd-container-wide (۱۵۶۰px) وسط‌چین می‌نشیند؛
       بنر تمام‌عرض است و حاشیه‌ی ثابتِ ۶۴px داشت. روی ۱۷۸۱px یعنی
       متن از x=۱۷۱۷ شروع می‌شد ولی قابِ هدر از x=۱۶۷۱ — ۴۶px ناهمراستا.
       حالا همان قاب را می‌گیرد، پس همراستایی از روی هندسه درمی‌آید
       نه از عددی که کسی تایپ کرده — هر عرضی، هر زومی.

       ⚠ وسط‌چین نیست: متن باید دقیقاً روی خطِ شروعِ قاب بنشیند،
         پس flex-start. فضای خالی هم می‌رود کناره‌ی دور، نه وسطِ بنر. */
    /* ⚠ تلاشِ اول padding-inline: calc((100% - 1560px)/2) بود و غلط بود.
       100% این‌جا یعنی خودِ اسلاید، نه کادرِ دید. روی نصبِ زنده
       اسلاید ۱۹۷۱px درآمد و کادر ۱۷۸۱px؛ پس حاشیه زیادی شد و متن
       از x=۱۸۷۶ شروع می‌شد، در حالی که هدر از x=۱۶۹۵.
       حالا محاسبه‌ای در کار نیست: .gd-hb__inner همان قابی است که
       هدر دارد، پس دو خط حتماً روی هم می‌افتند. */
    display: flex; align-items: center;
    min-height: 300px;
    padding-block: var(--gd-space-10);
    padding-inline: 0;
    color: var(--gd-on-primary);
    isolation: isolate;
}
/* تصویرِ زمینه‌ی انتزاعی: یک آیکون بزرگ کم‌رنگ، سمت چپ */
/* ناحیه‌ی تصویری بنر — سه عکس واقعیِ کالا از همان دسته، کج و روی هم.
   عکس‌ها از کاتالوگ می‌آیند؛ اگر دسته‌ای عکس نداشت، gd_hero_art آیکون
   می‌فرستد و کلاس --icon همان حالت قدیمی را نگه می‌دارد. */
/* ستون تصویر، نه لایه‌ی شناور. قبلاً absolute بود و ترنسفورم‌ها از لبه‌ی
   بنر می‌زدند بیرون (overflow:hidden می‌بریدشان) و روی متن هم می‌افتادند.
   حالا کنار متن می‌نشیند و جای خودش را دارد. */
.gd-hb__art {
    position: relative; flex: 0 0 auto;
    width: 320px; height: 210px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 0;
}
.gd-hb__art--icon { font-size: 210px; line-height: 1; opacity: .16; }

/* آیکون کم‌رنگ پشت عکس‌ها */
.gd-hb__ghost {
    position: absolute; font-size: 160px; line-height: 1;
    opacity: .12; z-index: 0;
}

/* ⚠ کارتِ سفیدِ پشتِ عکس عمداً برداشته شد.
   عکس‌های بنر از ۱۴ شهریور ۱۴۰۵ پس‌زمینه ندارند؛ نگه داشتنِ کارت یعنی
   کاربر همان سفیدی را می‌بیند و فکر می‌کند حذف پس‌زمینه کار نکرده.
   box-shadow جعبه را سایه می‌اندازد نه سوژه را، پس جایش drop-shadow
   آمده که آلفا را می‌بیند و سایه را دور خودِ محصول می‌سازد. */
.gd-hb__shot {
    position: absolute; z-index: 1;
    width: 132px; height: 132px;
    transition: transform var(--gd-dur-slow) var(--gd-ease);
}
.gd-hb__shot img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .34));
}

/* چیدمان بادبزنی — سه عکس با زاویه‌های مختلف روی هم */
.gd-hb__shot--1 { transform: translate(-46px, -30px) rotate(-9deg); }
.gd-hb__shot--2 { transform: translate(0, 10px) rotate(3deg); z-index: 2; }
.gd-hb__shot--3 { transform: translate(46px, -18px) rotate(11deg); }

/* روی hover کمی از هم باز می‌شوند */
.gd-hb:hover .gd-hb__shot--1 { transform: translate(-62px, -38px) rotate(-13deg); }
.gd-hb:hover .gd-hb__shot--2 { transform: translate(0, 16px) rotate(2deg) scale(1.04); }
.gd-hb:hover .gd-hb__shot--3 { transform: translate(62px, -24px) rotate(15deg); }
.gd-hb::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: radial-gradient(120% 140% at 88% 50%, rgba(255,255,255,.22), transparent 60%);
}
/* flex:1 1 auto بود؛ متن تا سقفِ خودش کش می‌آمد و بقیه را هل می‌داد
   به لبه. حالا به اندازه‌ی محتوایش است تا خوشه واقعاً وسط بنشیند. */
/* همان قابِ هدر: همان max-width، همان حاشیه‌ی داخلی، وسط‌چین.
   تنها راهِ مطمئنِ همراستایی — عددی تایپ نمی‌شود. */
/* ⭐ justify-content تا امروز flex-start بود: متن سرِ خط می‌نشست ولی عکس
   وسطِ بنر شناور می‌ماند — لبه‌ی چپِ عکس x=۷۲۲ بود. صاحبِ کار:
   «عکس‌ها را با ورود align کن». دکمه‌ی ورود / ثبت نام از x=۱۳۵ شروع
   می‌شود، که همان لبه‌ی دیگرِ همین قاب است. پس space-between
   دقیقاً همان‌جا می‌نشاندش — دوباره بدون عدد. */
.gd-hb__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(var(--gd-space-6), 4vw, var(--gd-space-16));
    width: 100%; max-width: var(--gd-container-wide);
    margin-inline: auto;
    padding-inline: var(--gd-space-6);
}
.gd-hb__body { position: relative; z-index: 1; flex: 0 1 auto;
               display: flex; flex-direction: column; align-items: flex-start;
               gap: var(--gd-space-2); max-width: 54ch; }
.gd-hb__badge {
    align-self: flex-start;
    padding: 4px var(--gd-space-3);
    background: var(--gd-accent); color: var(--gd-on-accent);
    border-radius: var(--gd-radius-full);
    font-size: var(--gd-text-2xs); font-weight: var(--gd-fw-bold);
}
.gd-hb__eyebrow { font-size: var(--gd-text-sm); font-weight: var(--gd-fw-medium); opacity: .88; }
/* سلکتور دوکلاسه عمدی است: تک‌کلاسه در عمل بازنده می‌شد و عنوان
   روی ۱۶px می‌ماند. display:block هم لازم است چون span است. */
.gd-hb .gd-hb__title { display: block; font-size: var(--gd-text-3xl); font-weight: var(--gd-fw-bold); line-height: var(--gd-lh-snug); }
.gd-hb__sub     { font-size: var(--gd-text-md); line-height: var(--gd-lh-relaxed); opacity: .92; }
.gd-hb__note    { display: inline-flex; align-items: center; gap: var(--gd-space-2); font-size: var(--gd-text-xs); opacity: .85; }
.gd-hb__cta {
    display: inline-flex; align-items: center; gap: var(--gd-space-2);
    margin-block-start: var(--gd-space-3);
    padding: var(--gd-space-3) var(--gd-space-6);
    background: var(--gd-accent); color: var(--gd-on-accent);
    border-radius: var(--gd-radius);
    font-weight: var(--gd-fw-bold);
    transition: transform var(--gd-dur-base) var(--gd-ease);
}
.gd-hb:hover .gd-hb__cta { transform: translateX(-4px); }
.gd-hb:hover .gd-hb__art { transform: scale(1.06) rotate(-4deg); }
.gd-hb__art { transition: transform var(--gd-dur-slow) var(--gd-ease); }

/* ---------- پنج زمینه ---------- */
.gd-hb--brand { background: linear-gradient(135deg, var(--gd-primary-hover), var(--gd-primary)); }
.gd-hb--art   { background: linear-gradient(135deg, var(--gd-primary), var(--gd-primary-hover)); }
.gd-hb--eng   { background: linear-gradient(135deg, var(--gd-gray-800), var(--gd-gray-900)); }
.gd-hb--book  { background: linear-gradient(135deg, var(--gd-primary-hover), var(--gd-gray-800)); }
/* زرد روشن است: متن و دکمه باید تیره شوند وگرنه کنتراست نمی‌دهد */
.gd-hb--accent { background: linear-gradient(135deg, var(--gd-accent), var(--gd-accent-hover)); color: var(--gd-on-accent); }
.gd-hb--accent .gd-hb__badge,
.gd-hb--accent .gd-hb__cta { background: var(--gd-primary); color: var(--gd-on-primary); }

/* ---------- باندهای اندازه ---------- */
/* نمایشگر بزرگ — ۱۲۸۰ واقعی ≡ ۱۶۰۰ مجازی.
   ۱۴۴۰ بود که یعنی ۱۸۰۰ مجازی — پله‌ای که طراحی نشده بود. */
@media (min-width: 1280px) {
    .gd-hb { min-height: 340px; }
    .gd-hb__art--icon { font-size: 250px; }
    .gd-hb__ghost { font-size: 220px; }
    /* ستونِ تصویر بزرگ‌تر شد: خوشه‌ی وسط‌چین وقتی قانع‌کننده است
       که هر دو طرفش وزن داشته باشند، نه یک ستونِ پر و یک ستونِ لاغر. */
    /* عکس که به لبه رفت، باید وزن هم داشته باشد؛ وگرنه دو ستونِ
       لاغر در دو طرفِ یک دشتِ خالی می‌شوند. */
    .gd-hb__shot { width: 196px; height: 196px; }
    .gd-hb__art  { width: 520px; height: 300px; }
    .gd-hb__shot--1 { transform: translate(-86px, -38px) rotate(-9deg); }
    .gd-hb__shot--3 { transform: translate(86px, -22px) rotate(11deg); }
}
/* تبلت افقی و لپ‌تاپ کوچک */
@media (max-width: 1023px) {
    .gd-hb { min-height: 240px; padding: var(--gd-space-8) var(--gd-space-8); }
    .gd-hb .gd-hb__title { font-size: var(--gd-text-2xl); }
    .gd-hb__sub   { font-size: var(--gd-text-sm); }
    .gd-hb__art   { width: 220px; height: 160px; }
    .gd-hb__art--icon { font-size: 150px; }
    .gd-hb__ghost { font-size: 130px; }
    .gd-hb__shot { width: 104px; height: 104px; }
    .gd-hb__shot--1 { transform: translate(-34px, -24px) rotate(-9deg); }
    .gd-hb__shot--3 { transform: translate(34px, -14px) rotate(11deg); }
}
/* موبایل */
@media (max-width: 767px) {
    /* نسبت ثابت ۱۶:۱۰ متن را در یک جعبه‌ی کوتاه می‌چپاند: عنوان و
       زیرعنوان و دکمه روی هم فشرده می‌شدند. حالا ارتفاع را خودِ محتوا
       تعیین می‌کند با یک کف، پس فاصله‌ها نفس می‌کشند. */
    /* ۱۶:۹ دقیق. چیدمان عمودیِ قبلی در این ارتفاع جا نمی‌شد (۳۹۰px عرض
       یعنی فقط ۲۱۹px ارتفاع)، پس همان دوستونیِ دسکتاپ را کوچک می‌کنیم:
       متن راست، عکس چپ. زیرعنوان می‌رود چون در ۲۱۹px جای چهار سطر نیست. */
    /* ⭐ ۱۶:۹ به‌تنهایی روی ۳۷۵px یعنی ۲۱۱px ارتفاع — جای زیرعنوان
       نماند و بنر فقط عنوان و دکمه شد. کفِ ۲۴۸px اضافه شد:
       همه‌ی اسلایدها هم‌عرض‌اند پس هم‌ارتفاع هم می‌مانند و اسلایدر
       بین دو اسلاید بالا و پایین نمی‌پرد. */
    .gd-hb {
        aspect-ratio: 16 / 9;
        min-height: 248px;
        padding: 0;
        align-items: center;
        justify-content: space-between;
        gap: var(--gd-space-3);
    }
    /* روی گوشی قابِ هدر هم لبه‌تالبه است؛ همان ۱۶px کافی است. */
    .gd-hb__inner { padding-inline: var(--gd-space-4); padding-block: var(--gd-space-4);
                    gap: var(--gd-space-3); justify-content: space-between; height: 100%; }
    .gd-hb__body  { gap: var(--gd-space-2); max-width: none; width: 100%; }
    /* eyebrow روی موبایل حذف می‌شود: badge + عنوان + دکمه کافی است و
       چهار سطرِ متن در این عرض فقط شلوغی است. */
    .gd-hb__eyebrow { display: none; }
    /* پرده لازم نیست: متن و عکس دو ستون جدا هستند و روی هم نمی‌افتند */
    /* عنوان دو سطر بیشتر نشود؛ وگرنه عنوانِ بلند دکمه را از
       کفِ ارتفاع می‌زند بیرون. */
    .gd-hb .gd-hb__title { font-size: var(--gd-text-lg);
                    display: -webkit-box; -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical; overflow: hidden; }
    /* ⭐ زیرعنوان برگشت. بنری که فقط عنوان و دکمه دارد نه چیزی
       به کاربر می‌گوید نه کلمه‌ی کلیدی‌ای به گوگل. دو سطر، بریده. */
    .gd-hb__sub   { display: -webkit-box; -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical; overflow: hidden;
                    font-size: var(--gd-text-xs); line-height: var(--gd-lh-relaxed);
                    opacity: .9; }
    .gd-hb__eyebrow { font-size: var(--gd-text-xs); }
    .gd-hb__badge { font-size: var(--gd-text-2xs); padding: 3px var(--gd-space-3); }
    /* روی موبایل جا برای هر دو نیست؛ یادداشت می‌رود، دکمه می‌ماند */
    .gd-hb__note  { display: none; }
    /* دکمه ارتفاع لمسیِ درست بگیرد، نه ۶px بالا و پایین */
    .gd-hb__cta   { margin-block-start: var(--gd-space-3);
                    padding: var(--gd-space-3) var(--gd-space-5);
                    font-size: var(--gd-text-sm); }
    /* موبایل: عکس‌ها لایه‌ی پس‌زمینه می‌شوند (جا برای دو ستون نیست)،
       ولی متن روی آن‌ها خوانا بماند — برای همین پرده‌ی تیره اضافه شد. */
    /* ستون تصویر، نه لایه‌ی پس‌زمینه — در ۱۶:۹ جای هر دو هست */
    /* ⭐ ستونِ تصویر ۳۳٪ بود با عکس‌های ۵۸px و آیکونِ ۱۰٪ — روی
       گوشی عملاً یک مستطیلِ خالی دیده می‌شد. حالا وزن دارد. */
    .gd-hb__art   { position: relative; flex: 0 0 auto;
                    width: 38%; height: 80%; z-index: 0; }
    .gd-hb__art--icon { font-size: 104px; opacity: .16; }
    .gd-hb__ghost { font-size: 96px; opacity: .14; }
    .gd-hb__shot  { width: 74px; height: 74px; padding: 3px; border-radius: var(--gd-radius); }
    .gd-hb__shot--1 { transform: translate(-21px, -13px) rotate(-9deg); }
    .gd-hb__shot--2 { transform: translate(0, 9px) rotate(3deg); }
    /* سومی روی موبایل جا نمی‌شود */
    .gd-hb__shot--3 { display: none; }
}
/* موبایل باریک */
@media (max-width: 360px) {
    .gd-hb__sub { display: none; }
    .gd-hb__art--icon { font-size: 74px; }
    .gd-hb__shot--2 { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   صفحه‌ی حساب کاربری

   RTL: هر جا جهت مطرح است از خاصیت منطقی استفاده شده
   (inline-start/end)، نه left/right. در این صفحه inline-start یعنی
   سمت راست — سایدبار آن‌جاست.
   ══════════════════════════════════════════════════════════════════ */

.gd-acc {
    display: grid; grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--gd-space-6); align-items: start;
}

/* ---------- سایدبار ---------- */
.gd-acc__side { position: sticky; top: var(--gd-space-5); }

.gd-acc__idcard {
    padding: var(--gd-space-6) var(--gd-space-5);
    background: var(--gd-surface); border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg); text-align: center;
}

.gd-acc__avatar {
    width: 68px; height: 68px; margin: 0 auto var(--gd-space-4);
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--gd-primary-soft, #eef0ff); color: var(--gd-primary);
    font-size: var(--gd-text-lg); font-weight: var(--gd-fw-bold);
    letter-spacing: 2px;
}

.gd-acc__name  { margin: 0; font-weight: var(--gd-fw-bold); font-size: var(--gd-text-sm); }
.gd-acc__phone { margin: var(--gd-space-2) 0 0; font-size: var(--gd-text-xs); color: var(--gd-muted); }
.gd-acc__since { margin: var(--gd-space-1) 0 0; font-size: var(--gd-text-2xs); color: var(--gd-muted); }

.gd-acc__nav {
    margin-block-start: var(--gd-space-4);
    background: var(--gd-surface); border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg); overflow: hidden;
}

.gd-acc__navitem {
    display: flex; align-items: center; gap: var(--gd-space-3);
    width: 100%; padding: var(--gd-space-4) var(--gd-space-5);
    background: none; border: 0; border-block-end: 1px solid var(--gd-line);
    font: inherit; font-size: var(--gd-text-xs); color: var(--gd-ink);
    cursor: pointer; text-align: start;
    transition: background .15s, color .15s;
}
.gd-acc__navitem:last-child { border-block-end: 0; }
.gd-acc__navitem > i:first-child { width: 18px; color: var(--gd-muted); }
.gd-acc__navitem span { flex: 1; }
.gd-acc__navitem:hover { background: var(--gd-surface-2, #f7f8fa); }

.gd-acc__navitem.is-active {
    background: var(--gd-primary-soft, #eef0ff); color: var(--gd-primary);
    font-weight: var(--gd-fw-bold);
}
.gd-acc__navitem.is-active > i:first-child { color: var(--gd-primary); }

/* شِوران به سمتِ جریانِ متن اشاره می‌کند؛ در RTL یعنی چپ */
.gd-acc__navchev { font-size: .7em; color: var(--gd-muted); opacity: .6; }

.gd-acc__navitem--exit {
    margin-block-start: var(--gd-space-4);
    background: var(--gd-surface); border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg); color: var(--gd-danger, #c0392b);
}
.gd-acc__navitem--exit > i:first-child { color: inherit; }
.gd-acc__navitem--exit:hover { background: #fdecec; }

/* ---------- پنل‌ها ---------- */
.gd-acc__panel {
    padding: var(--gd-space-6);
    background: var(--gd-surface); border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
}
.gd-acc__panel[hidden] { display: none; }

.gd-acc__phead { margin-block-end: var(--gd-space-6); }
.gd-acc__phead h2 { margin: 0; font-size: var(--gd-text-md); font-weight: var(--gd-fw-bold); }
.gd-acc__phead p  { margin: var(--gd-space-2) 0 0; font-size: var(--gd-text-2xs); color: var(--gd-muted); }

/* ---------- نوار تکمیل ---------- */
.gd-acc__meter {
    margin-block-end: var(--gd-space-6); padding: var(--gd-space-4);
    background: var(--gd-warn-soft, #fff8e6); border: 1px solid var(--gd-warn-line, #f0dfae);
    border-radius: var(--gd-radius-md);
}
.gd-acc__meterhead {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: var(--gd-text-2xs); margin-block-end: var(--gd-space-2);
}
.gd-acc__bar { height: 6px; background: #ffffff; border-radius: 99px; overflow: hidden; }
.gd-acc__bar > span { display: block; height: 100%; background: var(--gd-accent, #e0a800); border-radius: 99px; }
.gd-acc__meterhint { margin: var(--gd-space-2) 0 0; font-size: var(--gd-text-2xs); color: var(--gd-muted); }

/* ---------- فرم ---------- */
.gd-acc__fieldset { margin-block-end: var(--gd-space-6); }
.gd-acc__legend {
    margin: 0 0 var(--gd-space-4); padding-block-end: var(--gd-space-3);
    border-block-end: 1px solid var(--gd-line);
    font-size: var(--gd-text-xs); font-weight: var(--gd-fw-bold); color: var(--gd-muted);
}
.gd-acc__grid2 {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--gd-space-4);
}

.gd-acc__field { display: block; margin-block-end: var(--gd-space-4); }
.gd-acc__grid2 .gd-acc__field { margin-block-end: 0; }

.gd-acc__label {
    display: block; margin-block-end: var(--gd-space-2);
    font-size: var(--gd-text-2xs); font-weight: var(--gd-fw-bold);
}
.gd-acc__req { color: var(--gd-danger, #c0392b); }
.gd-acc__opt { font-weight: 400; color: var(--gd-muted); }

.gd-acc__field input,
.gd-acc__field textarea,
.gd-acc__birth select {
    width: 100%; padding: var(--gd-space-3) var(--gd-space-4);
    border: 1px solid var(--gd-line-strong); border-radius: var(--gd-radius-md);
    background: var(--gd-surface); color: var(--gd-ink);
    /* 16px کمتر نشود: سافاری موبایل روی فیلدِ کوچک‌تر صفحه را زوم می‌کند */
    font: inherit; font-size: 16px; outline: 0;
    transition: border-color .15s, box-shadow .15s;
}
.gd-acc__field textarea { resize: vertical; line-height: var(--gd-lh-loose, 1.9); }

.gd-acc__field input:focus,
.gd-acc__field textarea:focus,
.gd-acc__birth select:focus {
    border-color: var(--gd-primary);
    box-shadow: 0 0 0 3px var(--gd-primary-soft, #eef0ff);
}
.gd-acc__field input::placeholder,
.gd-acc__field textarea::placeholder { color: var(--gd-muted); opacity: .7; }

.gd-acc__birth { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: var(--gd-space-3); }

.gd-acc__actions {
    display: flex; align-items: center; gap: var(--gd-space-4); flex-wrap: wrap;
    padding-block-start: var(--gd-space-5); border-block-start: 1px solid var(--gd-line);
}
.gd-acc__lock { margin: 0; font-size: var(--gd-text-2xs); color: var(--gd-muted); }

.gd-acc__msg {
    margin: 0 0 var(--gd-space-5); padding: var(--gd-space-3) var(--gd-space-4);
    border-radius: var(--gd-radius-md); font-size: var(--gd-text-xs);
}
.gd-acc__msg.is-error { background: #fdecec; color: #a3261f; }
.gd-acc__msg.is-ok    { background: #e9f7ef; color: #1a7040; }

/* ---------- سفارش‌ها ---------- */
.gd-acc__order {
    display: grid; grid-template-columns: 1fr auto; gap: var(--gd-space-3);
    padding: var(--gd-space-4); margin-block-end: var(--gd-space-3);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-md);
}
.gd-acc__ordid   { font-weight: var(--gd-fw-bold); font-size: var(--gd-text-xs); }
.gd-acc__ordmeta { margin: var(--gd-space-2) 0 0; font-size: var(--gd-text-2xs); color: var(--gd-muted); }
.gd-acc__ordsum  { text-align: end; }
.gd-acc__ordamt  { font-weight: var(--gd-fw-bold); font-size: var(--gd-text-xs); white-space: nowrap; }

.gd-acc__chip {
    display: inline-block; margin-block-start: var(--gd-space-2);
    padding: 2px 10px; border-radius: 99px;
    font-size: var(--gd-text-2xs); font-weight: var(--gd-fw-bold);
}
.gd-acc__chip--wait { background: #fff4e0; color: #9a6200; }
.gd-acc__chip--ok   { background: #e9f7ef; color: #1a7040; }
.gd-acc__chip--gray { background: #eef0f3; color: #55606e; }

/* ---------- دستگاه‌ها ---------- */
.gd-acc__dev {
    display: flex; align-items: center; gap: var(--gd-space-4);
    padding: var(--gd-space-4); margin-block-end: var(--gd-space-3);
    border: 1px solid var(--gd-line); border-radius: var(--gd-radius-md);
}
.gd-acc__dev.is-current { border-color: var(--gd-primary); background: var(--gd-primary-soft, #eef0ff); }
.gd-acc__devicon { font-size: 1.4rem; color: var(--gd-muted); }
.gd-acc__dev.is-current .gd-acc__devicon { color: var(--gd-primary); }
.gd-acc__devname { font-weight: var(--gd-fw-bold); font-size: var(--gd-text-xs); }
.gd-acc__devmeta { margin: var(--gd-space-1) 0 0; font-size: var(--gd-text-2xs); color: var(--gd-muted); }

/* ---------- حالت خالی و بارگذاری ---------- */
.gd-acc__empty, .gd-acc__loading {
    padding: var(--gd-space-7) var(--gd-space-4);
    text-align: center; color: var(--gd-muted); font-size: var(--gd-text-xs);
}
.gd-acc__empty i { display: block; font-size: 2.4rem; margin-block-end: var(--gd-space-3); opacity: .35; }

/* نام کاربر در دکمه‌ی هدر — کامل، ولی با سقفِ عرض */
.gd-btn__uname {
    display: inline-block; max-width: 12ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: middle;
}

/* ---------- موبایل ---------- */
@media (max-width: 900px) {
    .gd-acc { grid-template-columns: 1fr; }
    .gd-acc__side { position: static; }

    /* ناوبری روی موبایل نوارِ افقیِ اسکرول‌شونده می‌شود، نه ستونِ بلند
       که کاربر باید تا تهش برود تا به محتوا برسد. */
    .gd-acc__nav { display: flex; overflow-x: auto; scrollbar-width: none; }
    .gd-acc__nav::-webkit-scrollbar { display: none; }
    .gd-acc__navitem {
        flex: 0 0 auto; border-block-end: 0;
        border-inline-end: 1px solid var(--gd-line);
    }
    .gd-acc__navchev { display: none; }
    .gd-acc__panel { padding: var(--gd-space-5) var(--gd-space-4); }
    .gd-acc__order { grid-template-columns: 1fr; }
    .gd-acc__ordsum { text-align: start; }
}

/* ════════ ۱۵ — دسته‌بندی‌ها «حوزه‌های فعالیت» ════════
   ⭐ این‌جا تا ۱۵ شهریور ۱۴۰۵ یک «روایت اسکرول» بود: قلمویی روی
   یک مسیرِ SVG، پنج ضربِ متنی که عوض می‌شدند، و ۲۶۰vh قدِ اضافه
   برای ساختنِ مسافتِ اسکرول. دو چیز را اندازه گرفتیم و هر دو بد
   بودند: روی ۱۴۴۰×۹۰۰ بخش ۱۸۷۲px قد داشت ولی از نیمه به بعد
   صفر عنصر در کادر دیده می‌شد — یعنی یک صفحه‌ی کاملِ سفید؛ و
   ‏--p روی ۰٫۵۵۸۸ گیر کرده بود و با اسکرول تکان نمی‌خورد.

   جایش الگویی آمد که فروشگاه‌های جدی می‌زنند — قالبِ مرجعِ
   شاپیفای (Shopify/dawn، assets/base.css): کارت‌ها از پایین با یک
   translateY کوتاه و opacity بالا می‌آیند، با تأخیرِ پلکانی — و همان
   موتوری که خودِ داون دارد: یک کلاس که IntersectionObserver می‌زند.
   (دو بار با CSS خالص امتحان شد و نشد — دلیلش پایین‌تر.)

   دو چیز از این تصمیم درمی‌آید:
     ۱) صفر مسافتِ اضافه. بخش همان‌قدر است که محتوا می‌خواهد؛
        ۹۰ خطِ story() و ۲۶۰vh قدِ مصنوعی حذف شد.
     ۲) حالتِ پیش‌فرض «دیده‌شده» است. پنهان‌کردن کارِ جاوااسکریپت
        است نه استایل‌شیت، پس بدونِ جاوااسکریپت کارت‌ها عادی دیده
        می‌شوند — همان درسِ باگی که یک بار کارت‌های
        «چرا گنج دانش» را نامرئی کرد.
   ════════════════════════════════════════════════════════ */
.gd-cats { background: var(--gd-surface-soft); }
.gd-cats__lead {
    max-width: 70ch; margin: var(--gd-space-3) auto 0;
    color: var(--gd-muted); font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed); text-align: center;
}
.gd-cats .gd-fields__grid { margin-block-start: var(--gd-space-8); }

/* ⭐ ظاهر شدنِ کارت‌ها — سومین تلاش، و دلیلِ دو تای قبل.

   دو بار با animation-timeline: view() نوشته شد. مرورگر پشتیبانی
   می‌کرد، قاعده اعمال می‌شد (ViewTimeline، duration auto، بازه‌ی درست)،
   و با این حال هر ۱۴ کارت در همه‌ی نقطه‌های اسکرول opacity ۱.۰۰
   می‌دادند — یعنی انیمیشن همیشه در حالتِ پایان بود.

   علت در خودِ ریشه است: gd_ui روی <html> مقدارِ zoom: .8 می‌گذارد، و
   خطِ زمانیِ اسکرول بازه‌هایش را روی همان قابی حساب می‌کند که زوم
   هندسه‌اش را عوض کرده — همان تله‌ی [[ganjdanesh-zoom-vh-trap]].

   پس همان الگوی Shopify/dawn، این بار همان‌طور که خودشان پیاده
   کرده‌اند: یک کلاس که IntersectionObserver می‌زند.

   ⚠ و چون همین مخزن یک بار از IntersectionObserver ضربه خورده (بخشی را
   نامرئی گذاشت)، حالتِ شکست طراحی‌شده است نه امیدوارانه:
   حالتِ پنهان را **جاوااسکریپت** می‌گذارد نه استایل‌شیت؛ بی‌جاوااسکریپت،
   هیچ کارتی پنهان نمی‌شود. */
/* حالتِ پنهان و حرکت هر دو در Home_Page.js اند؛ این‌جا عمداً هیچ
   قاعده‌ای نیست. سه بار با CSS نوشته شد و هر بار آبشارِ این صفحه
   برد؛ چهارمین بار از مسیری می‌رود که اصلاً آبشار ندارد. */
.gd-drawer__body { padding: 0; }

/* گروه اصلی — ردیف بازشونده */
.gd-drawer__body details { border-block-end: 1px solid var(--gd-line); }
.gd-drawer__body summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px;
    padding: var(--gd-space-3) var(--gd-space-4);
    font-size: var(--gd-text-md); font-weight: var(--gd-fw-bold);
    list-style: none; cursor: pointer;
}
.gd-drawer__body summary::-webkit-details-marker { display: none; }
/* پیکان به‌جای مثلث پیش‌فرض مرورگر، تا جهت باز/بسته معلوم باشد */
.gd-drawer__body summary::after {
    /* ⚠ دو بار با فونت‌آوسام شکست: اول '\f107' یک form-feed خام بود،
       بعد هم که درست شد گلیف خالی (tofu) رندر می‌شد. یک پیکانِ
       دوخطی هیچ فونتی لازم ندارد و همیشه دیده می‌شود. */
    content: '';
    width: 8px; height: 8px;
    border-inline-end: 2px solid var(--gd-muted);
    border-block-end:  2px solid var(--gd-muted);
    transform: rotate(45deg);
    margin-block-end: 4px;
    transition: transform var(--gd-dur-base) var(--gd-ease);
}
.gd-drawer__body details[open] summary::after { transform: rotate(225deg); margin-block-end: 0; }
.gd-drawer__body details[open] summary { color: var(--gd-primary); }

/* ⭐ ۱۵ شهریور ۱۴۰۵ — منوی دسته‌بندی برای گوشی طراحی شد.

   سه چیز روی نصبِ زنده اندازه گرفته شد و هر سه کم بود:
     ۱) نشانه‌ی بازشونده اصلاً رندر نمی‌شد (::after computed = none).
     ۲) ۱۳ ردیفِ بالا هیچ آیکونی نداشتند — دیواری از متن.
     ۳) خودِ دسته‌ی سطح یک لینک نبود: از گوشی هیچ راهی به
        /category/books نبود، فقط به فرزندانش. */
.gd-drawer__gname {
    display: inline-flex; align-items: center; gap: var(--gd-space-3);
    min-width: 0;
}
.gd-drawer__gname > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* آیکون پهنای ثابت دارد تا نام‌ها روی یک خطِ عمودی شروع شوند؛
   بدون آن، هر ردیف به اندازه‌ی آیکونِ خودش جابه‌جا می‌شود. */
.gd-drawer__gname i {
    flex: 0 0 auto; width: 20px; text-align: center;
    color: var(--gd-primary); font-size: var(--gd-text-md);
}

/* ردیفِ «همه‌ی X» — تنها راهِ رسیدن به صفحه‌ی خودِ دسته از روی گوشی */
.gd-drawer__body .gd-drawer__all {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px;
    padding: var(--gd-space-2) var(--gd-space-4);
    border-block-end: 1px solid var(--gd-line);
    background: var(--gd-primary-soft);
    font-size: var(--gd-text-sm); font-weight: var(--gd-fw-bold);
    color: var(--gd-primary);
}
/* قاعده‌ی عمومیِ لینک‌های کشو یک نقطه‌ی کوچک قبل از متن می‌گذارد؛
   این ردیف برگ نیست، پس نقطه نمی‌خواهد. */
.gd-drawer__body .gd-drawer__all::before { content: none; }
.gd-drawer__body .gd-drawer__all i { font-size: var(--gd-text-xs); }

/* روی گوشیِ باریک کشو عملاً تمام‌صفحه شود. ۳۴۰px روی ۳۷۵ یعنی
   یک نوارِ ۳۵px که نه چیزی نشان می‌دهد نه هدفِ لمسیِ بستن است. */
@media (max-width: 420px) {
    .gd-drawer { width: min(400px, 94vw); }
}

/* زیرگروه */
.gd-drawer__body strong {
    display: block; margin: 0;
    padding: var(--gd-space-3) var(--gd-space-4) var(--gd-space-1);
    background: var(--gd-surface-soft);
    font-size: var(--gd-text-xs); font-weight: var(--gd-fw-bold);
    color: var(--gd-muted);
}
.gd-drawer__body ul { margin: 0; padding: 0; list-style: none; }
.gd-drawer__body li { margin: 0; font-size: inherit; color: inherit; }

/* برگ — ردیف لمسیِ کامل، نه یک لینک ریز */
.gd-drawer__body li a {
    display: flex; align-items: center;
    min-height: 44px;
    padding: var(--gd-space-2) var(--gd-space-5);
    border-block-end: 1px solid var(--gd-line);
    font-size: var(--gd-text-sm); color: var(--gd-ink);
}
.gd-drawer__body li a:active { background: var(--gd-surface-hover); }
.gd-drawer__body li a::before {
    content: ''; flex: 0 0 auto;
    width: 4px; height: 4px; margin-inline-end: var(--gd-space-3);
    background: var(--gd-line-strong); border-radius: 50%;
}

/* لینک‌های تکیِ ته منو */
.gd-drawer__body > a {
    display: flex; align-items: center;
    min-height: 52px;
    padding: var(--gd-space-3) var(--gd-space-4);
    border-block-end: 1px solid var(--gd-line);
    font-size: var(--gd-text-md); font-weight: var(--gd-fw-bold);
}

/* ════════ کفِ هدفِ لمسی — آنچه واقعاً کوچک مانده بود ════════
   اندازه‌گیری ۱۶ شهریور ۱۴۰۵ روی ۳۷۵px: ۲۲۷ هدف زیرِ ۴۴.

   ⚠ ولی ۱۹۴ تایِ آن **خطای اندازه‌گیری است، نه نقص**: لینکِ عنوانِ
   کارتِ محصول از قبل روکشِ کشیده دارد (`::after` با inset:0) و کلِ کارت
   قابلِ لمس است — سنجیده شد با elementFromPoint روی سه گوشه‌ی کارتِ
   ۱۴۸×۲۶۷ که هر سه به همان محصول رسیدند. getBoundingClientRect روی خودِ
   لنگر، روکشِ شبحوارش را نمی‌بیند. هر ممیزی‌ای که rect را بشمارد،
   تا ابد همین ۱۹۴ را گزارش می‌کند.

   آنچه واقعاً کوچک بود و این‌جا درست شد (~۳۳ تا):
     خرده‌نان ۴۸×۲۱ (۱۶) · لینکِ پاورقی ۴۰×۱۸ (۸) · نقطه‌ی بنر (۵)
     · شبکه‌ی اجتماعی ۱۲۴×۳۵ (۲) · نوارِ بالا ۳۴ · دکمه‌ی «بیشتر» ۸۱×۲۱
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .gd-crumb a,
    .gd-footer__col ul li a,
    .gd-footer__more,
    .gd-social {
        display: inline-flex; align-items: center;
        min-height: 44px;
        /* قد که درست شد، عرضِ واژه‌های کوتاه («فروشگاه»، «گنج دانش»)
           روی ۴۰ تا ۴۲ ماند — کمی کمتر از کف. حاشیه‌ی افقی به‌جای
           عرضِ ثابت، تا چیدمان به هم نریزد. */
        min-width: 44px;
        justify-content: center;
    }
    /* نوارِ اعلان خودش یک لینکِ تمام‌عرض است؛ فقط قدش کم بود. */
    .gd-promobar { min-height: 44px; }

    /* ⚠ نقطه‌های بنر را بزرگ نمی‌کنیم — نقطه‌ی ۴۴px زشت است و طراحی
       را خراب می‌کند. همان الگوی روکش: دیده کوچک می‌ماند، ناحیه‌ی
       لمس ۴۴×۴۴ می‌شود. همین کاری است که کارتِ محصول می‌کند. */
    /* ⚠ اول روکش را از هر چهار طرف ۱۹px باز کردم و نتیجه بدتر شد:
       فاصله‌ی نقطه‌ها ۸px بود و روکش‌های ۵۶px روی هم می‌افتادند —
       یعنی لمس روی یک نقطه می‌توانست نقطه‌ی کناری را بزند. هدفِ بزرگِ
       هم‌پوشان از هدفِ کوچک بدتر است. حالا گامِ نقطه‌ها ۴۴ است و هر
       روکش دقیقاً ۴۴×۴۴ و بدونِ هم‌پوشانی. پنج نقطه ۲۲۰px می‌شود،
       جا می‌شود. دیده‌ی نقطه همان کوچک می‌ماند. */
    /* نقطه‌ی غیرفعال ۶px است، پس برای رسیدن به ۴۴ باید از هر طرف ۱۹
       باز شود؛ و برای اینکه روی هم نیفتند، گام باید دست‌کم ۴۴ باشد:
       ۶ + ۳۸ = ۴۴. پنج نقطه ۲۰۲px می‌شود که در ۳۷۵ جا می‌شود. */
    .gd-hero__dots { gap: 38px; }
    .gd-hero__dot { position: relative; }
    .gd-hero__dot::after {
        content: ""; position: absolute;
        inset-block: -19px; inset-inline: -19px;
    }
    /* لینکِ تنهای پاورقی که در ul نیست (۳۴۳×۱۶) */
    .gd-footer__col > a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ردیفِ پیام‌رسان‌های فوتر — از ۲۱ شهریور ۱۴۰۵ فوترِ مشترک همه‌ی آن‌ها را
   از جدولِ پیوندهای اجتماعی نشان می‌دهد، نه فقط اینستاگرام. */
.gd-footer .gd-socials { display: flex; flex-wrap: wrap; gap: var(--gd-space-2); margin-block-start: var(--gd-space-3); }
.gd-footer .gd-socials .gd-social { min-height: 44px; display: inline-flex; align-items: center; gap: var(--gd-space-2); }

/* ۲۳ شهریور ۱۴۰۵ — کارتِ «دارای فروشگاه حضوری» و بخشِ نقشه‌ی صفحه‌ی اصلی به
   /store/ لینک می‌دهند: یک فروشگاه، چهار بخش. */
.gd-why__item h3 a { color: inherit; }
.gd-why__item h3 a:hover { color: var(--gd-primary); }
.gd-map__sections { margin-block-start: var(--gd-space-2); color: var(--gd-muted); }
.gd-map__sections a { color: var(--gd-primary); font-weight: var(--gd-fw-bold); }

/* عنوانِ کارتِ «دارای فروشگاه حضوری» خودش پیوند است — روی موبایل کارت فقط
   عنوان دارد — پس هدفِ لمسی می‌خواهد. سنجش: ۱۸ پیکسل روی ۳۹۰px.
   ⚠ روی دسکتاپ ریشه‌ی صفحه zoom: 0.8 دارد (باند زوم در gd-tokens)، پس اندازه‌ی
   CSS با اندازه‌ی دیده‌شده یکی نیست: ۲۴ پیکسل CSS فقط ۱۹ پیکسل دیده می‌شد و خودِ
   پیوند ۲۸ پیکسل CSS = ۲۲.۴ دیده‌شده بود. ۳۰ × ۰.۸ = ۲۴ — کفِ WCAG 2.2. */
.gd-why__item h3 a { display: inline-flex; align-items: center; min-height: 30px; }
@media (max-width: 767px) { .gd-why__item h3 a { min-height: 44px; } }