/*
Theme Name: DM Gold Theme
Description: قالب سبک و اختصاصی فروشگاه طلا، کاملاً سازگار با ووکامرس و افزونه‌های DM. ساخته‌شده بر پایهٔ هوک‌ها برای اتصال تمیز به افزونه‌ها.
Author: DM House
Author URI: https://dmhouse.market
Version: 1.59.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dmhouse-theme
Tags: woocommerce, rtl-language-support, custom-menu, custom-logo, featured-images, translation-ready
*/

/* استایل‌های پایه در فاز ۶ (assets/css/*) منتقل می‌شوند. این فایل فقط حامل هدر قالب و چند ریست سراسری است. */

/*
 * ⚠ عرضِ ظرفِ سایت — یک منبعِ واحد.
 * مقدار ۱۵۰۰ است چون ظرفِ هدر (.dm-header-container) و صفحاتِ آرشیو از قبل روی
 * همین عدد بودند؛ توکن قبلاً ۱۴۰۰ بود و هیچ‌کس از آن تغذیه نمی‌کرد، پس هر بخش
 * عددِ خودش را داشت: هدر ۱۵۰۰، آرشیو ۱۵۰۰، تک‌محصول ۱۳۰۰، سبد/صفحهٔ اول ۱۴۰۰.
 * ⚠ سبد خرید، تسویه و صفحهٔ اول هنوز عددِ ۱۴۰۰ خودشان را دارند و عمداً در این
 * تغییر دست نخوردند (خارج از چیزی که خواسته شده بود) — اگر قرار است کلِ سایت
 * یک عرض داشته باشد، آن‌ها هم باید به همین توکن وصل شوند.
 */
:root {
    --dm-container: 1500px;
}

/*
 * ══════════════════════════════════════════════════════════════════════
 * نردبانِ لایه‌ها (z-index) — تنها منبعِ حقیقت
 * ══════════════════════════════════════════════════════════════════════
 *
 * ⚠ چرا لازم شد: پیش از این هر بخش عددِ خودش را داشت — از ۱ و ۲ تا ۲۲۰ و ۹۹۹۸ و
 * ۹۹۹۹۹. نتیجه‌اش یک باگِ واقعیِ اندازه‌گیری‌شده بود: فلش‌های کاروسلِ «شگفت‌انگیز»
 * (متعلق به افزونه، z-index ۹۹۹، در بافتِ ریشه) روی نوارِ ناوبریِ موبایل
 * (z-index ۹۰) می‌نشستند و دکمه‌های نوار زیرشان گم می‌شدند.
 *
 * ⚠⚠ مهم‌ترین محدودیت: اعدادِ افزونه‌ها دستِ ما نیست و نباید هم باشد. آنچه روی
 * سایت اندازه گرفته شد: فلش‌های کاروسل ۹۹۹ · مودال‌ها و جستجوی افزونه‌ها ۹۹۹۹ ·
 * کشوها و مودال‌های تمام‌صفحه ۹۹۹۹۹ تا ۱۰۰۰۰۰. پس نردبانِ ما باید در فاصلهٔ بینِ
 * این‌ها بنشیند: بالاتر از ۹۹۹ تا محتوای صفحه و کاروسل‌ها زیرِ کرومِ سایت بمانند،
 * و پایین‌تر از ۹۹۹۹ تا مودالِ هر افزونه‌ای همچنان روی همه‌چیز بیاید.
 *
 * قاعده برای هر کدِ تازه: هرگز عددِ خام ننویس؛ یکی از این توکن‌ها را بردار. اگر
 * هیچ‌کدام جا نبود یعنی یک بندِ تازه لازم است — این‌جا اضافه‌اش کن، نه در فایلِ خودت.
 */
:root {
    /* داخلِ یک کامپوننت: لایه‌های محلی. این‌ها بافتِ خودشان را دارند و با بقیه رقابت نمی‌کنند. */
    --dm-z-local-1: 1;
    --dm-z-local-2: 2;
    --dm-z-local-3: 3;

    /* کرومِ سایت — بالاتر از محتوای صفحه و بالاتر از فلش‌های کاروسلِ افزونه‌ها (۹۹۹) */
    --dm-z-anchor-nav: 1000;  /* ناوبریِ لنگرِ محصول و نوارِ چسبانِ دسته‌های صفحهٔ اصلی */
    --dm-z-mobile-nav: 1100;  /* نوارِ پایینِ موبایل */
    /*
     * نوارهای اکشنِ چسبانِ پایینِ صفحه (خریدِ محصول در موبایل، ادامه به پرداختِ سبد).
     * ⚠ عمداً یک پله بالاتر از نوارِ ناوبری: این‌ها اقدامِ اصلیِ همان صفحه‌اند و در
     * همان گوشه می‌نشینند، پس اگر پایین‌تر بمانند زیرِ نوار گم می‌شوند.
     */
    --dm-z-action-bar: 1150;
    --dm-z-header:     1200;  /* هدرِ اصلی (و هر چیزی که فرزندش است) */
    --dm-z-header-top: 1210;  /* نوارِ نرخ و هدرِ چسبان — یک پله بالای هدر */
    --dm-z-announce:   1220;  /* نوارِ اعلان */

    /*
     * پوشش‌ها و کشوها.
     * ⚠ کشوی موبایل فرزندِ .dm-main-header است، پس عددش فقط داخلِ بافتِ هدر معنا
     * دارد؛ چیزی که واقعاً آن را بالای صفحه می‌برد عددِ خودِ هدر است. برای همین
     * بالا بردنِ --dm-z-header هم باگِ فلش‌ها را حل می‌کند هم کشو را نجات می‌دهد.
     */
    --dm-z-backdrop: 1300;
    --dm-z-drawer:   1310;
    --dm-z-modal:    1400;

    /*
     * بندِ «بالای همه» — پوشش‌های تمام‌صفحهٔ خودمان (مینی‌کارت، پیامِ موفقیت،
     * کشوی موبایل). ⚠ عمداً بالاتر از بندِ مودالِ افزونه‌هاست و عمداً دست‌نخورده
     * باقی ماند: همین حالا درست کار می‌کند و پایین‌آوردنش یعنی مودالِ هر افزونه‌ای
     * روی سبدِ خریدِ ما بیاید. فقط نام گرفت تا عددِ خام جایی نماند.
     */
    --dm-z-overlay-top: 99990;
    --dm-z-panel-top:   99999;
}

/* ════════════════════════════════════════════════════════════════════
   بریک‌پوینت‌های قالب — این فهرست قرارداد است، از آن انحراف نده
   ════════════════════════════════════════════════════════════════════
   موبایل      : @media (max-width: 768px)
   تبلت/پایین‌تر: @media (max-width: 991.98px)
   دسکتاپ      : @media (min-width: 992px)

   ⚠ چرا 991.98 و نه 991 یا 992 — هر دو خطای واقعی بودند و اصلاح شدند:
   • جفتِ «max-width: 992px» با «min-width: 992px» یعنی در عرضِ دقیقاً ۹۹۲
     پیکسل هر دو بلوک هم‌زمان اعمال می‌شوند و روی هم می‌افتند.
   • جفتِ «max-width: 991px» با «min-width: 992px» یعنی عرضِ ۹۹۱.۵ پیکسل به
     هیچ‌کدام نمی‌خورد و آن المان بلاتکلیف می‌ماند. عرضِ کسری روی ویندوز با
     مقیاسِ نمایشِ ۱۲۵٪ و در حالتِ ریسپانسیوِ کروم کاملاً عادی است، پس این
     حفره در عمل مدام دیده می‌شد.
   ⚠ همچنین ۷۶۷ و ۷۶۸ را با هم قاطی نکن: بخشی از قوانین روی ۷۶۷ بود و بخشی
   روی ۷۶۸، پس در عرضِ دقیقاً ۷۶۸ نیمی از چیدمانِ موبایل اعمال می‌شد و نیمی نه.
   ════════════════════════════════════════════════════════════════════ */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/*
 * ⚠ اینجا عمداً clip است نه hidden — و تفاوتش ریشهٔ باگِ «صفحه چپ می‌خورد» بود.
 *
 * وقتی html روی visible باشد، مرورگر مقدارِ overflow بدنه را به خودِ ویوپورت
 * منتقل می‌کند و چون overflow-x:hidden با overflow-y:visible ناسازگار است، محورِ
 * عمودی به auto تبدیل می‌شود ⇒ ویوپورت یک «ظرفِ اسکرول» می‌شود. نتیجه‌اش این است
 * که نوارِ اسکرولِ افقی پنهان می‌ماند ولی خودِ اسکرول زنده است: فوکوس روی یک عنصرِ
 * بیرون‌زده، یک سوایپ، یا هر اسکریپتی که scrollLeft را ست کند، صفحه را واقعاً
 * می‌لغزاند — همان چیزی که کاربر می‌دید. ضمناً همان تبدیل، هر position:sticky ای
 * را در نوادگانِ بدنه می‌شکند.
 *
 * overflow:clip بدونِ ساختنِ ظرفِ اسکرول می‌بُرد: نه scrollLeft ممکن است، نه
 * sticky خراب می‌شود. خطِ hidden قبل از آن فقط fallbackِ مرورگرهای قدیمی است.
 *
 * ⚠ این یک شبکهٔ ایمنی است، نه راه‌حل. هر سرریزِ افقی باید در خودِ عنصرِ مقصر
 * درست شود؛ چون این خط همان سرریز را از چشمِ توسعه‌دهنده هم پنهان می‌کند.
 * برای پیدا کردنِ مقصرها، این قانون را موقتاً غیرفعال کن (رِیگ همین کار را می‌کند).
 */
body {
    margin: 0;
    padding: 0;
    direction: rtl;
    overflow-x: hidden;
    overflow-x: clip;
    font-family: "Yekan Bakh", "Dana", "IRANYekan", Tahoma, sans-serif;
    font-size: var(--dm-font-size-base, 14px);
    color: var(--dm-text, #222);
    background-color: var(--dm-bg-soft, #f9f9f9);
}

ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

.dm-container {
    max-width: var(--dm-container);
    margin: 0 auto;
    padding-inline: 16px;
}

/*
 * کلاسِ استانداردِ وردپرس برای متنِ فقط-صفحه‌خوان (h1های sr-only، لیبل‌های فرم).
 * قبلاً در دو جا (new-front-page.php) استفاده شده بود بدون اینکه جایی تعریف شود؛
 * یعنی آن لیبل‌ها به‌جای مخفی‌بودن، متنِ خام و بی‌ربط روی صفحه نمایش داده می‌شدند.
 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}