/* تصميم صفحة الموبايل المفردة — منقول من inline لتحسين الأداء والـ caching */

/* ═══ تصميم العنوان والميتا والـ breadcrumb ═══ */
:root {
            --m-accent: #c62828;
            --m-ink: #1a1a1a;
            --m-ink-soft: #6b7280;
            --m-line: #ececec;
        }

        /* العنوان */
        h1.m-mobile-title {
            font-size: 26px;
            font-weight: 800;
            color: var(--m-ink);
            line-height: 1.35;
            margin: 18px 0 10px;
        }

        /* ─── شريط الميتا ───────────────────────────────────────────────────
           البنية الفعلية: .m-meta-bar > .single-post-meta.post-meta.clearfix
           وبداخلها: ::before(clearfix) + .date + .tie-alignright + ::after(clearfix)
           المشكلة: pseudo-elements الخاصة بـ .clearfix كانت تأخذ مساحة في
           الـ flex وتزيح المحتوى عن نقطة بداية العنوان. */

        .m-meta-bar {
            width: 100% !important;
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }

        /* الحاوية الرئيسية — نستهدف كل الأسماء المحتملة */
        .m-meta-bar .post-meta,
        .m-meta-bar .single-post-meta {
            display: flex !important;
            flex-wrap: wrap;
            align-items: center !important;
            justify-content: flex-start !important;
            direction: rtl;
            gap: 8px 16px;
            margin: 0 0 14px !important;
            padding: 0 !important;
            border: none !important;
            background: none !important;
            float: none !important;
            line-height: 1 !important;
            width: 100% !important;
            box-sizing: border-box !important;
            overflow: visible !important;
        }

        /* ★ الحل الجوهري: إلغاء pseudo-elements الخاصة بـ clearfix
           لأنها تنشئ عناصر فارغة داخل الـ flex فتزيح المحتوى */
        .m-meta-bar .post-meta::before,
        .m-meta-bar .post-meta::after,
        .m-meta-bar .single-post-meta::before,
        .m-meta-bar .single-post-meta::after,
        .m-meta-bar .clearfix::before,
        .m-meta-bar .clearfix::after {
            display: none !important;
            content: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        /* إخفاء author نهائياً */
        .m-meta-bar .meta-author,
        .m-meta-bar .meta-author-wrapper {
            display: none !important;
        }

        /* إلغاء float داخلي على كل الأبناء المباشرين */
        .m-meta-bar .post-meta > *,
        .m-meta-bar .single-post-meta > * {
            float: none !important;
            margin: 0 !important;
        }

        /* .tie-alignright: تفكيك الحاوية لتصبح أبناؤها جزءاً من صف flex الأب */
        .m-meta-bar .tie-alignright {
            display: contents !important;
            float: none !important;
        }

        /* كل meta-item: flex row بمحاذاة مركزية */
        .m-meta-bar .meta-item {
            display: inline-flex !important;
            align-items: center !important;
            gap: 5px;
            font-size: 13px;
            color: var(--m-ink-soft);
            white-space: nowrap;
            line-height: 1 !important;
            vertical-align: middle !important;
            float: none !important;
            margin: 0 !important;
        }

        /* reset رأسي شامل على محتوى كل meta-item */
        .m-meta-bar .meta-item * {
            display: inline-flex !important;
            align-items: center !important;
            line-height: 1 !important;
            vertical-align: middle !important;
        }
        .m-meta-bar .post-meta img,
        .m-meta-bar .single-post-meta img {
            display: block !important;
            vertical-align: middle !important;
            flex-shrink: 0 !important;
        }
        .m-meta-bar [class*="tie-icon"],
        .m-meta-bar i {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 1 !important;
            vertical-align: middle !important;
        }
        .m-meta-bar a,
        .m-meta-bar span {
            line-height: 1 !important;
            vertical-align: middle !important;
        }

        /* Breadcrumb بسيط وعصري: بيت + نص رمادي + فاصل خفيف */
        #breadcrumb {
            display: flex !important;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            margin: 6px 0 20px;
            padding: 0;
            background: none;
            border: none;
            font-size: 13px;
        }
        #breadcrumb a,
        #breadcrumb span:not(.delimiter) {
            display: inline-flex;
            align-items: center;
            background: #f4f4f5;
            color: var(--m-ink-soft);
            text-decoration: none;
            padding: 6px 14px;
            border-radius: 7px;
            transition: background .15s ease, color .15s ease;
        }
        #breadcrumb a:hover {
            background: #eceef0;
            color: var(--m-accent);
        }
        /* الفاصل بين الخطوات يُخفى بصرياً لأن كل خطوة أصبحت كبسولة مستقلة */
        #breadcrumb .delimiter {
            display: none;
        }
        #breadcrumb .tie-icon-home {
            display: inline-flex;
            font-size: 14px;
        }
        /* آخر عنصر (الصفحة الحالية) بخلفية أبرز قليلاً */
        #breadcrumb > span:last-child,
        #breadcrumb > a:last-child {
            background: #ececec;
            color: var(--m-ink);
            font-weight: 600;
        }

        @media (max-width: 600px) {
            h1.m-mobile-title { font-size: 21px; }
            .m-meta-bar .post-meta { justify-content: flex-start; gap: 8px 12px; }
            /* إخفاء الـ breadcrumb على الموبايل فقط بناءً على طلب العميل،
               يبقى ظاهرًا على التابلت/الديسكتوب/Smart TV (أكبر من 600px) */
            #breadcrumb { display: none !important; }
        }

/* ═══ Layout Fix (Priority Override) ═══ */
/* ضمان عدم التجاوز على الموبايل — تطبيق فوق أي CSS آخر */
    @media screen and (max-width: 992px) {
        .m-page {
            display: grid !important;
            grid-template-columns: 1fr !important;
            padding-left: 16px !important;
            padding-right: 16px !important;
            box-sizing: border-box !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        .m-hero {
            display: grid !important;
            grid-template-columns: 1fr !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        .m-main {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            min-width: 0 !important;
            overflow: hidden !important;
        }
        .m-phone-image,
        .m-specs,
        .m-spec-row,
        .m-compare-btn-wrap,
        .m-compare-match-btn {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
    }