/* ألوان التصميم — المرحلة ٤ من ترتيب الكود. كل لونٍ كان مكتوباً بقيمته في ملفات التصميم صار متغيّراً هنا، بالقيمة نفسها حرفاً (أداة tools/migration/tokenize-colors.mjs، والإثبات verify-colors.mjs). الاسم: --p-<العائلة>[-a<الشفافية>] — مثل --p-brand-a34 = الزيتوني بشفافية ٠٫٣٤. البوتيك فاتح فقط (القرار ١٨): لا قيم داكنة بديلة ولا prefers-color-scheme. لونٌ جديد يُعرَّف هنا ويُقرأ بـ var(); npm test يرفض لوناً بقيمته في ملف آخر. */ :root{ --p-080906-a55: rgba(8,9,6,0.55); --p-080906-a82: rgba(8,9,6,0.82); --p-0a0b08: #0a0b08; --p-0c0e09-a58: rgba(12,14,9,0.58); --p-11130e: #11130e; --p-12140e-a38: rgba(18,20,14,0.38); --p-1b2015: #1B2015; --p-1c2018-a0: rgba(28,32,24,0); --p-1c2018-a62: rgba(28,32,24,.62); --p-262b21: #262b21; --p-262c21-a62: rgba(38,44,33,0.62); --p-2c3325: #2C3325; --p-2e3528-a55: rgba(46,53,40,0.55); --p-30392b-a18: rgba(48,57,43,0.18); --p-30392b-a24: rgba(48,57,43,0.24); --p-3a422f: #3A422F; --p-46503f-a78: rgba(70,80,63,0.78); --p-46503f-a94: rgba(70,80,63,0.94); --p-465040-a96: rgba(70,80,64,0.96); --p-8fa085: #8FA085; --p-black: #000; --p-black-a0: rgba(0,0,0,0); --p-black-a06: rgba(0,0,0,0.06); --p-black-a08: rgba(0,0,0,0.08); --p-black-a10: rgba(0,0,0,0.1); --p-black-a12: rgba(0,0,0,0.12); --p-black-a14: rgba(0,0,0,0.14); --p-black-a15: rgba(0,0,0,0.15); --p-black-a16: rgba(0,0,0,0.16); --p-black-a18: rgba(0,0,0,0.18); --p-black-a20: rgba(0,0,0,0.2); --p-black-a22: rgba(0,0,0,0.22); --p-black-a25: rgba(0,0,0,0.25); --p-black-a26: rgba(0,0,0,0.26); --p-black-a28: rgba(0,0,0,0.28); --p-black-a30: rgba(0,0,0,0.3); --p-black-a35: rgba(0,0,0,0.35); --p-black-a38: rgba(0,0,0,0.38); --p-black-a40: rgba(0,0,0,0.4); --p-black-a42: rgba(0,0,0,0.42); --p-black-a45: rgba(0,0,0,0.45); --p-black-a50: rgba(0,0,0,0.5); --p-black-a55: rgba(0,0,0,0.55); --p-black-a60: rgba(0,0,0,0.6); --p-black-a75: rgba(0,0,0,0.75); --p-brand: #535E4D; --p-brand-a035: rgba(83,94,77,0.035); --p-brand-a05: rgba(83,94,77,0.05); --p-brand-a06: rgba(83,94,77,0.06); --p-brand-a07: rgba(83,94,77,0.07); --p-brand-a08: rgba(83,94,77,0.08); --p-brand-a10: rgba(83,94,77,0.10); --p-brand-a12: rgba(83,94,77,0.12); --p-brand-a13: rgba(83,94,77,0.13); --p-brand-a14: rgba(83,94,77,0.14); --p-brand-a16: rgba(83,94,77,0.16); --p-brand-a18: rgba(83,94,77,0.18); --p-brand-a20: rgba(83,94,77,0.20); --p-brand-a22: rgba(83,94,77,0.22); --p-brand-a26: rgba(83,94,77,0.26); --p-brand-a28: rgba(83,94,77,0.28); --p-brand-a30: rgba(83,94,77,0.30); --p-brand-a32: rgba(83,94,77,0.32); --p-brand-a34: rgba(83,94,77,.34); --p-brand-a35: rgba(83,94,77,0.35); --p-brand-a36: rgba(83,94,77,0.36); --p-brand-a42: rgba(83,94,77,0.42); --p-brand-a45: rgba(83,94,77,0.45); --p-brand-a55: rgba(83,94,77,0.55); --p-brand-a62: rgba(83,94,77,0.62); --p-brand-a70: rgba(83,94,77,0.70); --p-brand-a82: rgba(83,94,77,0.82); --p-brand-a88: rgba(83,94,77,0.88); --p-brand-a90: rgba(83,94,77,0.9); --p-brand-a94: rgba(83,94,77,0.94); --p-brand-a97: rgba(83,94,77,0.97); --p-brand-deep: #3F4839; --p-charcoal-a12: rgba(18,18,16,.12); --p-charcoal-a20: rgba(18,18,16,.20); --p-charcoal-a52: rgba(18,18,16,.52); --p-charcoal-a90: rgba(18,18,16,.90); --p-d9b36c: #D9B36C; --p-e5a9a2: #E5A9A2; --p-e9e5da: #E9E5DA; --p-efece3: #EFECE3; --p-f4f1e8: #F4F1E8; --p-f4f2ec: #F4F2EC; --p-f7f1e6: #F7F1E6; --p-faf9f6-a94: rgba(250,249,246,0.94); --p-faf9f6-a985: rgba(250,249,246,0.985); --p-fffdf9: #FFFDF9; --p-ink: #1C1C1C; --p-ink-a06: rgba(28,28,28,0.06); --p-ink-a07: rgba(28,28,28,0.07); --p-ink-a08: rgba(28,28,28,0.08); --p-ink-a10: rgba(28,28,28,0.10); --p-ink-a14: rgba(28,28,28,0.14); --p-ink-a22: rgba(28,28,28,0.22); --p-ink-a25: rgba(28,28,28,0.25); --p-ink-a50: rgba(28,28,28,0.5); --p-ink-a55: rgba(28,28,28,0.55); --p-ink-a72: rgba(28,28,28,0.72); --p-ivory: #F2EEE4; --p-ivory-a0: rgba(242,238,228,0); --p-ivory-a04: rgba(242,238,228,0.04); --p-ivory-a07: rgba(242,238,228,0.07); --p-ivory-a08: rgba(242,238,228,0.08); --p-ivory-a10: rgba(242,238,228,0.10); --p-ivory-a12: rgba(242,238,228,0.12); --p-ivory-a14: rgba(242,238,228,0.14); --p-ivory-a16: rgba(242,238,228,0.16); --p-ivory-a18: rgba(242,238,228,0.18); --p-ivory-a22: rgba(242,238,228,0.22); --p-ivory-a26: rgba(242,238,228,0.26); --p-ivory-a28: rgba(242,238,228,0.28); --p-ivory-a30: rgba(242,238,228,0.30); --p-ivory-a32: rgba(242,238,228,0.32); --p-ivory-a35: rgba(242,238,228,0.35); --p-ivory-a40: rgba(242,238,228,0.4); --p-ivory-a42: rgba(242,238,228,0.42); --p-ivory-a45: rgba(242,238,228,0.45); --p-ivory-a50: rgba(242,238,228,0.5); --p-ivory-a55: rgba(242,238,228,0.55); --p-ivory-a62: rgba(242,238,228,0.62); --p-ivory-a70: rgba(242,238,228,0.7); --p-ivory-a72: rgba(242,238,228,0.72); --p-ivory-a80: rgba(242,238,228,.8); --p-ivory-a82: rgba(242,238,228,0.82); --p-ivory-a90: rgba(242,238,228,0.9); --p-ivory-a92: rgba(242,238,228,0.92); --p-ivory-a95: rgba(242,238,228,0.95); --p-ivory-a98: rgba(242,238,228,0.98); --p-ivory-soft: #F7F4EC; --p-ivory-soft-a12: rgba(247,244,236,.12); --p-ivory-soft-a22: rgba(247,244,236,.22); --p-ivory-soft-a45: rgba(247,244,236,.45); --p-ivory-soft-a72: rgba(247,244,236,.72); --p-ivory-soft-a90: rgba(247,244,236,.9); --p-olive-black-a42: rgba(10,11,7,0.42); --p-olive-black-a50: rgba(10,11,7,0.50); --p-olive-black-a52: rgba(10,11,7,0.52); --p-olive-black-a55: rgba(10,11,7,0.55); --p-olive-black-a86: rgba(10,11,7,0.86); --p-olive-dark-a10: rgba(28,35,22,0.10); --p-olive-dark-a14: rgba(28,35,22,0.14); --p-olive-dark-a20: rgba(28,35,22,0.20); --p-olive-deep-a16: rgba(20,23,15,0.16); --p-olive-deep-a22: rgba(20,23,15,.22); --p-olive-deep-a24: rgba(20,23,15,0.24); --p-olive-deep-a70: rgba(20,23,15,.70); --p-olive-deep-a74: rgba(20,23,15,.74); --p-olive-deep-a82: rgba(20,23,15,.82); --p-olive-deep-a95: rgba(20,23,15,0.95); --p-olive-ink-a55: rgba(15,17,11,0.55); --p-olive-ink-a56: rgba(15,17,11,0.56); --p-olive-ink-a72: rgba(15,17,11,0.72); --p-olive-night-a06: rgba(18,21,14,0.06); --p-olive-night-a30: rgba(18,21,14,0.30); --p-olive-night-a38: rgba(18,21,14,0.38); --p-olive-night-a62: rgba(18,21,14,0.62); --p-olive-night-a80: rgba(18,21,14,0.80); --p-olive-shade-a0: rgba(20,22,17,0); --p-olive-shade-a28: rgba(20,22,17,.28); --p-olive-shade-a40: rgba(20,22,17,0.40); --p-olive-shade-a42: rgba(20,22,17,0.42); --p-olive-shade-a62: rgba(20,22,17,.62); --p-olive-shade-a72: rgba(20,22,17,0.72); --p-olive-smoke-a10: rgba(24,26,20,.10); --p-olive-smoke-a28: rgba(24,26,20,.28); --p-olive-smoke-a32: rgba(24,26,20,.32); --p-rose: #E4C9C2; --p-rose-a12: rgba(228,201,194,0.12); --p-rose-a55: rgba(228,201,194,0.55); --p-white: #fff; --p-white-a03: rgba(255,255,255,0.03); --p-white-a04: rgba(255,255,255,0.04); --p-white-a05: rgba(255,255,255,0.05); --p-white-a06: rgba(255,255,255,0.06); --p-white-a08: rgba(255,255,255,0.08); --p-white-a10: rgba(255,255,255,0.10); --p-white-a14: rgba(255,255,255,0.14); --p-white-a16: rgba(255,255,255,0.16); --p-white-a18: rgba(255,255,255,0.18); --p-white-a20: rgba(255,255,255,0.2); --p-white-a22: rgba(255,255,255,0.22); --p-white-a25: rgba(255,255,255,0.25); --p-white-a30: rgba(255,255,255,0.30); --p-white-a32: rgba(255,255,255,0.32); --p-white-a35: rgba(255,255,255,0.35); --p-white-a45: rgba(255,255,255,0.45); --p-white-a50: rgba(255,255,255,0.5); --p-white-a55: rgba(255,255,255,0.55); --p-white-a62: rgba(255,255,255,0.62); --p-white-a65: rgba(255,255,255,0.65); --p-white-a72: rgba(255,255,255,0.72); --p-white-a90: rgba(255,255,255,0.9); } @font-face{ font-family:'Cairo'; src:url('/assets/cairo-light.woff2') format('woff2'); font-weight:1 450; font-style:normal; font-display:swap; } @font-face{ font-family:'Cairo'; src:url('/assets/cairo-semibold.woff2') format('woff2'); font-weight:451 699; font-style:normal; font-display:swap; } /* ══════════════════════════════════════════════════════════════════════════════ ⚠️ P105 · ٢٠٢٦-٠٨-١٥ — درجةُ تشديدٍ ثالثة حقيقية. ⚠️ قبلها: ملفّان ثابتان لا خطٌّ متغيّر، والثاني يغطّي ٤٥١–١٠٠٠ كلّه. فكلّ وزنٍ فوق الـ٤٥٠ صورةٌ واحدة على الشاشة — و١٠٠ عنصرٍ كانت تطلب ٧٠٠ و٦٠٠ و٥٠٠ وتنال الشيء نفسه. فالتراتب بالوزن لم يكن موجوداً أصلاً، وهو سببٌ مباشر لانبساط الصفحة الذي رصده المالك. ⚠️ ولذلك ضاق مدى شبه العريض إلى ٦٩٩، وصار ٧٠٠ ملفّاً مستقلاً — فالفرق بين --w-bold و--w-heavy فرقٌ يُرى لا رقمٌ يُكتب. ⚠️ وملفّان لا ملفّ: عربيّ ولاتينيّ بنطاقَي يونيكود منفصلين، فلا يُحمَّل اللاتينيّ في صفحةٍ عربيةٍ خالصة. المجموع ٢٩ كيلوبايت لا ٧٠. ══════════════════════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Cairo'; src:url('/assets/cairo-bold-ar.woff2') format('woff2'); font-weight:700 1000; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } @font-face{ font-family:'Cairo'; src:url('/assets/cairo-bold-latin.woff2') format('woff2'); font-weight:700 1000; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Ciguatera'; src:url('/assets/ciguatera.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } :root{ --bg-light:#FFFFFF; --bg-dark:#1C1C1C; --ink-light:#1C1C1C; --ink-dark:#F2EEE4; /* ⚠️ P193 · ٢٠٢٦-٠٩-٢٢ — لون قاع الفوتر، متغيّرٌ لا رقمٌ مكرّر. العلّة: آخر ٩٦ بكسل من الصفحة كانت بيضاء، فيبدو الفوتر مقصوصاً. السبب: `.bottom-nav-spacer` — حاجزٌ شفاف بارتفاع ٩٦px يلي الفوتر ليمنع شريط التنقّل الثابت من تغطية آخر سطر. شفافٌ فوق `body` أبيض = شريطٌ أبيض. والشريط الثابت ظاهرٌ على الحاسوب أيضاً (fixed، ٥٠px)، فالحاجز مطلوب في المقاسين ولا يُحذف. الحلّ: يأخذ الحاجزُ لونَ قاع الفوتر. وحتى لا يتفرّق اللونان يوماً، صار اللون متغيّراً واحداً يقرأ منه التدرّج والحاجز معاً — تغييره في مكانٍ واحد يحرّك الاثنين. رقمٌ مكرّر في موضعين ينحرف حتماً. */ --footer-end:#262C20; --brand:#535E4D; --brand-soft: rgba(83,94,77,0.14); --ivory: #F2EEE4; /* عاجي — يُستخدم فقط كخلفية شفافة خفيفة خلف كروت المنتجات */ --ivory-card-bg: rgba(242,238,228,0.55); --ivory-card-bg-dark: rgba(242,238,228,0.08); /* ⚠️ ٢٠٢٦-٠٧-٢٦ — رموز لونية موحّدة (مسح التوحيد). المسح كشف قيماً مكرّرة بنفس المعنى ومكتوبة يدوياً بأماكن متفرقة. تجميعها هون بيمنع الانحراف مستقبلاً: أي تعديل بيصير بمكان واحد. ⚠️ القيم نفسها ما تغيّرت — فصفر أثر بصري، والمكسب اتساق وصيانة. */ --danger: #B5443B; /* أفعال الحذف — اللون التحذيري الوحيد المسموح */ --surface-dark: #1C1C1C; /* السطح الداكن الأساسي */ --surface-dark-2: #161514; /* سطح داكن ثانوي */ --ink-on-brand: #12160D; /* نص فوق الزيتوني الفاتح بالوضع الليلي */ --font-ar: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", "Geeza Pro", Tahoma, sans-serif; /* ⚠️ SF Arabic ممنوع بقرار الخطوط — أُزيل من سلسلة الاحتياط */ /* ══════════════════════════════════════════════════════════════════════════════ ⚠️ ٢٠٢٦-٠٧-٢٦ (مراجعة عميقة) — ثلاثة أدوار للخط، مو خط واحد ولا خطّين عشوائيين. التحليل الفعلي لملفات الخطوط المضمّنة: · Cairo — ٦٩٩ محرف: ١٠٢ عربي + ٥٨ لاتيني + ١٠ أرقام. وزن متغيّر ١–١٠٠٠. · Ciguatera — ١٩٧ محرف: **صفر عربي** + ٥٧ لاتيني + ١٠ أرقام. لاتيني بحت. وفحص التغطية: صفر محرف عربي مستخدم بالموقع ناقص من Cairo — يعني ما في احتياط (fallback) لخط النظام. فمصدر "تعدّد الخطوط العربية" مو الخط، هو التباعد (تحت). الأدوار المعتمدة: --font-ar Cairo → كل العربي --font-en Ciguatera → الكلمات اللاتينية والعرض (اسم العلامة، العناوين الإنجليزية) --font-num Cairo → الأرقام الظاهرة داخل جمل عربية ⚠️ ليش الأرقام على Cairo مو Ciguatera: الرقم جوّا جملة عربية جزء من الجملة — "30–90 دقيقة" بخط مختلف عن كلمة "دقيقة" يقرأ كأنه لصق من مكان تاني. أما "+974 3397 7932" و"WSH SWEET" فسياقهم لاتيني بالكامل، فياخدوا Ciguatera. ══════════════════════════════════════════════════════════════════════════════ */ --font-en: 'Ciguatera', Georgia, "Times New Roman", serif; --font-num: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif; --glass-bg-on-dark: rgba(255,255,255,0.10); --glass-bg-on-light: rgba(28,28,28,0.06); --glass-border: rgba(255,255,255,0.28); --glass-border-on-light: rgba(28,28,28,0.10); --morph-progress: 0; } *{box-sizing:border-box; margin:0; padding:0;} /* ══════════════════════════════════════════════════════════════════════════════ ⚠️ P84 · ٢٠٢٦-٠٨-١٣ — رفع التباين للنصوص الثانوية (نقد مستخدمين). ⚠️ النقد حرفياً: «الخطوط صغيرة وغير واضحة كلون وحجم، ما في تباين بصري، وخصوصاً الأسعار والنصوص تحت العناوين التي لونها رمادي». ⚠️ والقياس يؤيّده: الحبر ‎#1C1C1C‎ على أرضية ‎#FBFAF7‎ يعطي تبايناً ≈١٦:١، لكن كل نصّ ثانوي عندنا كان يُخفَّف بـopacity بين ٠٫٥ و٠٫٦٥ — فينزل التباين الفعليّ إلى ≈٦:١ … ٨:١ عند مقاسات ٩٫٥–١٢px. والمعيار يطلب ٤٫٥:١ للنصّ الصغير، فنحن فوقه رقمياً وتحته إدراكياً: الشفافية تُضعف حدّة الحرف العربي أكثر مما تُضعف اللاتيني، لأن تفاصيله أدقّ ووزنه أخفّ. ⚠️ العلاج بالرفع لا بالإلغاء: أدنى شفافية صارت ٠٫٧٢ بدل ٠٫٥، وأكثر النصوص الثانوية عند ٠٫٧٨. يبقى التدرّج البصري بين الأساسي والثانوي — وهو مقصود ولا يُلغى — لكن الثانوي يصير مقروءاً لا باهتاً. ⚠️ ومقاسات ما دون ١١px رُفعت إلى ١١px: هذا أدنى مقاس يُقرأ بأمان على الجوّال، وما دونه يُقرأ زخرفةً لا معلومة. ⚠️ والأسعار خُصّت بمعالجة أقوى (أدناه) لأنها المعلومة التي يبحث عنها الزائر، وكانت بلون العلامة الزيتوني على أرضية عاجية — تباينه ≈٥٫٣:١ وهو أضعف من الحبر بثلاثة أضعاف. ══════════════════════════════════════════════════════════════════════════════ */ .pt-sub{ opacity:.78 !important; font-size:var(--t-xs) !important; } .feature-row-sub, .cart-inline-note, .gift-card-summary-meta, .more-row-label small, .cart-upsell-price, .browse-fallback-note, .discover-empty, .occ-card-note, .occ-card-kick, .cart-item-price{ opacity:.78 !important; } .composer-counter, .gift-card-preview-qr span, .cart-empty{ opacity:.72 !important; } .occ-card-note{ font-size:var(--t-xs) !important; } .occ-card-kick{ font-size:var(--t-micro) !important; } .cart-upsell-price{ font-size:var(--t-xs) !important; } .more-row-label small, .feature-row-sub{ font-size:var(--t-xs) !important; } /* ⚠️ الأسعار: الحبر الكامل بدل الزيتوني، ووزن أثقل ومقاس أكبر. اللون الزيتوني يخدم العناوين على الأرضية العاجية، ولا يخدم رقماً صغيراً يُقرأ لمحاً. */ .product-price, .browse-product-price, .gb-product-price, .pd-related-card-price, .recommended-card-price{ color:var(--ink-light) !important; font-weight:600 !important; } .product-price{ font-size:var(--t-sm) !important; } .browse-product-price, .gb-product-price, .pd-related-card-price{ font-size:var(--t-sm) !important; } /* ══════════════════════════════════════════════════════════════════════════════ ⚠️ ٢٠٢٦-٠٧-٢٦ (السبب الثاني لـ"أكثر من نوع خط عربي") — عناصر النماذج لا ترث الخط. قاعدة أساسية بالمتصفحات: button و input و select و textarea **ما بترث** font-family من الأب. المتصفح بيفرض عليها خط واجهة النظام. وعلى الآيفون خط الواجهة العربي هو SF Arabic — شكله مختلف تماماً عن Cairo. النتيجة: كل نص عربي جوّا زر كان يُعرض بخط النظام مو بخط الموقع. والموقع فيه **264 زر**، وكان في 7 قواعد متفرقة بس تصلّح المشكلة يدوياً — يعني الأغلبية الساحقة كانت بخط غلط: "تعرّف علينا أكثر" · بانر "لا تعرف ماذا تختار؟" · أزرار السلة والاستوديوهات وكل زر تاني. ⚠️ font-family فقط — بدون font-size ولا font-weight. تغييرهم كان بيقلب مقاسات أزرار كتير تعتمد على قيمها الصريحة، والمشكلة أصلاً بالخط مو بالمقاس. ⚠️ هاي القاعدة تُكتب مرة وحدة وتغطي أي زر جديد مستقبلاً — فما نرجع نصلّح يدوياً. ══════════════════════════════════════════════════════════════════════════════ */ button, input, select, textarea, optgroup{ font-family:inherit; } h1,h2,h3,h4{ font-weight:var(--w-bold); } /* ══════════════════════════════════════════════════════════════════════════════ ⚠️ P81 · ٢٠٢٦-٠٨-١٣ — قصّ الفيض الأفقي عند الجذر لا عند الجسم وحده. ⚠️ رصد المالك: الصفحة تظهر على أندرويد وهواوي بعمودٍ أبيض على اليسار والمحتوى مزاح إلى اليمين — بينما هي سليمة على الكمبيوتر و iPhone. ⚠️ السبب: كان overflow-x:hidden مكتوباً على body وحده دون html. وهذا في صفحة RTL يجعل **body** حاوية تمرير أفقي بدل أن يُقصّ الفيض عند الجذر. وفي RTL يبدأ أصل التمرير من اليمين، فأي عنصر يتجاوز العرض بجزء من البكسل يوسّع صندوق body، وتُحسب الأبعاد النسبية على عرض المستند لا على عرض الشاشة — فينزاح المحتوى ويظهر عمودٌ فارغ من الجهة المقابلة. و Chromium على أندرويد يحسم هذا التعارض بغير ما يحسمه WebKit، ولهذا بقيت الصفحة سليمة على iPhone ومكسورة على أندرويد. ⚠️ العلاج القياسي لصفحات RTL: القصّ على html و body معاً، مع تثبيت العرض عند ١٠٠٪ حتى لا يوسّعه ابنٌ فائض أصلاً. فالجذر يقصّ، ولا يصير أيٌّ منهما حاوية تمرير أفقي، ويبقى الحساب على عرض الشاشة في المتصفحات كلّها. ⚠️ ولا يمسّ التمرير العمودي: القصّ أفقيّ وحده، و overflow-y يبقى تلقائياً. ⚠️ وهذا تشخيصٌ له آليّة معلومة لا تخمين: الفارق بين المحرّكين في هذه الحالة بعينها موثّق، ويطابق وصف المالك «مستقرّة على الكمبيوتر والآيفون» حرفاً. ══════════════════════════════════════════════════════════════════════════════ */ html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; max-width:100%; } body{ font-family:var(--font-ar); background:var(--bg-light); color:var(--ink-light); overflow-x:hidden; width:100%; max-width:100%; transition:background .4s ease, color .4s ease; } body.lang-en{ font-family:var(--font-en); } body.lang-en .product-name, body.lang-en .occasion-label, body.lang-en h1, body.lang-en h2, body.lang-en h3, body.lang-en h4{ font-family:var(--font-en); } /* ⚠️ ٢٠٢٦-٠٧-٢٦: .num انفصلت عن .lat — الأرقام داخل الجمل العربية على Cairo، والنصوص اللاتينية على Ciguatera. الوظيفة المشتركة (عزل الاتجاه) محفوظة للاثنين. */ [lang="en"], .lat{ font-family:var(--font-en); direction:ltr; unicode-bidi:isolate; } .num{ font-family:var(--font-num); direction:ltr; unicode-bidi:isolate; } /* ============ الشعار العائم الصغير (ثابت دائماً) ============ */ .logo-crystal{ position:fixed; top:calc(20px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:80; backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); background:var(--glass-bg-on-dark); border:1px solid var(--glass-border); box-shadow:none; filter:drop-shadow(0 8px 16px var(--p-black-a18)); transition:opacity .15s linear; } .logo-crystal svg{ width:24px; height:auto; display:block; } /* خلفية داكنة ثابتة دائماً لضمان وضوح الشعار الكريمي، لأنه يظهر فقط فوق الـ Hero الداكن ويختفي بعده */ .logo-crystal{ background:var(--p-12140e-a38); border-color:var(--p-white-a25); } /* ============ ورقة "المزيد" (نفس نمط ورقة تفاصيل المنتج الزجاجية) ============ */ /* ⚠️ P94 — العنوان أثقل وأوضح: ١٧px بوزن ٦٠٠ وتباعد حرفيّ سالب خفيف، وهو نمط عناوين الأوراق في iOS. وحدٌّ سفليّ رفيع يفصل الترويسة عن محتواها — في المرجع فاصلٌ حقيقي لا مسافة بيضاء وحدها. */ /* ══════════════════════════════════════════════════════════════════════════════ ⚠️ P99 · ٢٠٢٦-٠٨-١٥ — قاعدةٌ واحدة لكل ترويسات الأوراق. مصدرٌ واحد لا أربعة. ⚠️ سبب تكرار الأخطاء الذي رصده المالك بحقّ: أربع بنى مختلفة لنفس الشيء — sheet-title-row (عشرون ورقة) · browse-head-row · cart-header · وثلاث أوراق بلا ترويسة أصلاً. فكل إصلاح كنت أطبّقه على بنيةٍ واحدة، ويبقى الباقي على حاله — ثم يعود المالك بالملاحظة نفسها. العلّة لم تكن في القيم بل في تعدّد المصادر. ⚠️ فالمتغيّرات أدناه هي المصدر الوحيد: أي تعديل على مقاس العنوان أو حشو الترويسة أو الفاصل يقع هنا مرّة، ويسري على الجميع. ⚠️ وموضع ✕: كان معلّقاً بين العنوان وما تحته فلا يُقرأ تابعاً لأيّهما (رصد المالك). صار في **صفّ العنوان نفسه** محاذياً له عمودياً — فيُقرأ جزءاً من الترويسة، ويأخذ حيّزه من الحشو الأبيض نفسه لا من مساحةٍ إضافية. ⚠️ والعنوان ينزل عن المقبض: حشوٌ علويّ ١٠px يفصله عن مقبض السحب فوقه، بدل ٢px التي كانت تُلصقه به. ══════════════════════════════════════════════════════════════════════════════ */ :root{ --sheet-title-size: 17px; --sheet-title-weight: 600; /* ⚠️ P115 — «المجال المعطى للعنوان يتقلّل ارتفاعه شوي». الترويسة كانت تستهلك ٣٦ نقطةً حشواً وفصلاً حول عنوانٍ ارتفاعه ٢٢. صارت ٢٠ — أي ستّ عشرة نقطةً تنتقل إلى مساحة العرض بلا مساسٍ بحجم العنوان ولا بزرّه. */ --sheet-head-pad-top: 6px; --sheet-head-pad-bottom: 6px; --sheet-head-gap: 8px; --sheet-head-border: 1px solid rgba(28,28,28,0.07); --sheet-side-col: 44px; /* ⚠️ P103 — يتبع --icon-44: العمود لا يكون أضيق من زرّه */ /* ══════════════════════════════════════════════════════════════════════════ ⚠️ P101 — ارتفاعات الأوراق: مصدرٌ واحد بدل أربعة مواضع. ⚠️ سبب الجمع: الارتفاع كان مكتوباً حرفياً في ثلاثة محدِّدات متفرّقة (.pd-sheet ٨٠ · ‎#pdSheet‎ ٩٢ · الأربعة ٩٢) بوحدتين مختلفتين، فأيّ تعديل يطال بعضها ويترك بعضها — وهو «كل قسم يفتح بنسبة» الذي رصده المالك. القيمتان تبقيان قيمتين لأنهما قرار تصميميّ معلَّل، لكن مصدرهما صار واحداً. ⚠️ ولماذا ‎@supports‎ لا سطران متتاليان: نمط الاحتياط ‎height:80vh; height:80dvh‎ يعمل لأن المتصفح يُسقط التصريح المجهول. وهذا النمط **ينكسر مع ‎var()‎** لأن المتغيّر يُستبدل وقت الحساب لا وقت التحليل، فالتصريح يصير غير صالح ويعود إلى ‎unset‎ بدل أن يُتجاهل. فالحارس هنا شرطُ صحّةٍ لا تحسين. ══════════════════════════════════════════════════════════════════════════ */ /* ⚠️ P107 — قرار المالك (١٥ أغسطس): ٩٣٪ لكل الأوراق **بلا استثناء**. ينسخ تقسيم P101 (٨٠ قاعدةً و٩٢ استثناءً). والاستثناء المعلَّل لورقة المنتج — أن معرضها يحسب ارتفاعه من نسبة الصورة — لم يعُد مبرِّراً: الزائر يقرأ التفاوت قبل أن يقرأ سببه، والاتّساق هنا مقدَّمٌ على التعليل. فرمزٌ واحد لا رمزان، ومن أراد تغيير النسبة غيّرها هنا وحدها. */ --sheet-h: 93vh; /* ⚠️ P185 — --discover-grid-h لم يعد يُقرأ (سقط الصندوق ذو الارتفاع الثابت)، ويبقى معرَّفاً لأن قاعدة dvh أدناه تكتبه ولا ضرر منه. */ --discover-grid-h: 46vh; /* غير مستعمَل منذ P185 */ } @supports (height: 1dvh){ :root{ --sheet-h: 93dvh; --discover-grid-h: 46dvh; } } /* ══════════════════════════════════════════════════════════════════════════════ ⚠️ P102 · ٢٠٢٦-٠٨-١٥ — سلالم القياس: مصدرٌ واحد بدل قيمٍ مكتوبة يدوياً. ⚠️ الحالة قبل: ٣٥ مقاس خطّ مختلفاً (منها أحد عشر بنصف بكسل) و١٦ استدارة و٦ أوزان — أي ٥٧ قيمة تصميمية لعناصر متشابهة. وأنصاف البكسل بصمةُ تقديرٍ بالعين لا قرارِ سلّم، فأيّ عنصرين متشابهين يفترقان بلا سبب. ⚠️ والوزن حالةٌ خاصّة تستحقّ التصريح: Cairo هنا ملفّان **ثابتان** لا خطّ متغيّر (لا محور fvar في أيٍّ منهما — light عند ٣٠٠ و semibold عند ٦٠٠). و@font-face يمنح الأول المدى ١–٤٥٠ والثاني ٤٥١–١٠٠٠. فكلّ وزنٍ فوق الـ٤٥٠ يُصيّر بنفس الملفّ حرفياً: ٧٠٠ و٦٠٠ و٥٠٠ صورةٌ واحدة على الشاشة. أي أن مئة عنصرٍ كانت تدّعي درجتَي تشديد وهي درجةٌ واحدة — وهذا سببٌ مباشر لانبساط التراتب. فالدمج هنا **صفر أثرٍ بصريّ** ويُظهر الحقيقة في الكود بدل أن يخفيها. ولو أُريدت درجةُ تشديدٍ ثالثة حقيقية فطريقها ملفّ Cairo Bold ثالث لا رقمٌ أكبر في CSS. ══════════════════════════════════════════════════════════════════════════════ */ :root{ /* الخطّ — ثمانِ درجات. ما فوق ٤٠px زخرفيٌّ (أرقام البلورة) ويبقى خارج السلّم */ --t-micro: 9px; /* لصاقات دقيقة وعدّادات — لاتينية أو رقمية فقط */ --t-xs: 11px; --t-sm: 13px; /* النصّ الأساسي */ --t-base: 15px; --t-md: 17px; /* عناوين الأوراق */ --t-lg: 19px; --t-xl: 23px; --t-2xl: 28px; /* الاستدارة — خمس درجات وكبسولة */ --r-xs: 4px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; /* رأس الورقة */ --r-full: 999px; /* الوزن — درجتان لأن الملفّين درجتان */ --w-normal: 400; --w-bold: 600; --w-heavy: 700; /* ⚠️ P105 — ملفٌّ مستقلّ لا رقمٌ أكبر: فرقُه يُرى */ /* ════════════════════════════════════════════════════════════════════════ ⚠️ P103 — الأزرار الدائرية: ثلاثَ عشرةَ مقاساً على مفهومٍ واحد. ⚠️ ٤٤ ليست ذوقاً: هي أدنى هدفِ لمسٍ يُعتمد على الجوّال، وهي مقاس زرّي الإغلاق والرجوع في المرجع الذي اختاره المالك. وزرّ الإغلاق كان ٣٢ بصرياً ورقعتُه ٤٦ عبر ‎::after‎ — أي أن الهدف كان صحيحاً والشكل يكذّبه، فيبدو الزرّ أصغر من أن يُضغط ويُضغط. فصار الشكل هو الهدف. ════════════════════════════════════════════════════════════════════════ */ --icon-24: 24px; /* أيقونة صامتة بلا حاوية */ --icon-32: 32px; /* تحكّمٌ داخل بطاقة أو صفّ */ --icon-44: 44px; /* كروم الأوراق وكل هدفِ لمسٍ أساسيّ */ --icon-56: 56px; /* وسائط — تشغيل وأيقونات الحالة */ /* ════════════════════════════════════════════════════════════════════════ ⚠️ P104 — المسافات: ثمانٍ وعشرون قيمة على ثلاث خصائص متقاربة المعنى (حشو وهامش وفجوة). والعين لا تقرأ الأرقام لكنها تقرأ غياب الخطّ المستقيم — وهو ما رصده المالك حين قال «ما في تفاصيل ثابتة». ⚠️ التعادل يرفع لا يخفض: الطابع المعتمد فاخرٌ هادئ، والفخامة تنفّسٌ لا ضغط. وحدّ الحركة ٣px فما تجاوزه تُرك حرفياً بدل أن يُقسر. والسالب متروكٌ كلّه: هو غالباً مرآةُ حشوٍ في حاوٍ، وكسرُه يكسر محاذاةً لا يوحّد مسافة. ════════════════════════════════════════════════════════════════════════ */ --s-1: 2px; --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px; /* الهامش الجانبي المعتمد */ --s-6: 20px; --s-7: 24px; --s-8: 32px; --s-9: 40px; --s-10: 48px; --s-11: 56px; --s-12: 72px; --s-13: 120px; /* ════════════════════════════════════════════════════════════════════════ ⚠️ P109 — البطاقة: مفهومٌ واحد كان له ستّ صور. ⚠️ الحالة قبل: أربع بطاقات منتجٍ تعرض الشيء نفسه (صورة · اسم · سعر) وكلٌّ لها سطحُها وعرضُها ومقاسُ نصّها: استدارة ٢٢ في واحدة و١٦ في ثلاث، وعرضٌ ١٠٤ و١٥٢ و١٧٤، واسمٌ بمقاسين وسعرٌ بلونين. فيقرأ الزائر أربعة منتجاتٍ بأربع لغاتٍ بصرية في جلسةٍ واحدة. ⚠️ والعرض رمزٌ يتدرّج لا رقمٌ ثابت: البطاقة في شريطٍ أفقي تحتاج عرضاً يناسب الشاشة، فالتدرّج يبقى والتفاوت بين البطاقات يزول. ════════════════════════════════════════════════════════════════════════ */ /* ⚠️ P111 — العرض حسابٌ لا ذوق. صفُّ الأزرار حين يظهر العدّاد يحمل: عدّاد + هدية ٣٢ + قلب ٢٤ + فجوتين ٨ = العدّاد + ٦٤. والعدّاد المضغوط ٧٨ تقريباً، فالمجموع ١٤٢. وحشو البطاقة ٢٤. فأدنى عرضٍ لا يُقصّ فيه شيء ١٦٦ — و١٥٢ التي وضعناها في P109 كانت دون ذلك بأربع عشرة، فكان آخر زرّ في اتجاه القراءة (القلب يساراً) يُقصّ عند الإضافة. */ --card-w: 174px; /* الجوّال */ --card-radius: var(--r-md); /* ══════════════════════════════════════════════════════════════════════ ⚠️ P113 — الصورة: نسبةٌ مقيسة، وسلوكان لا سلوكٌ واحد. ⚠️ النسبة قِيست من لقطةِ المالك نفسها لا خُمِّنت: الصورة معروضةً بـcontain داخل إطارٍ مربّع ظهرت ٨٨٧×١١٠٤ بكسل = ٠٫٨٠٣ — أي ٤:٥ حرفياً. فصورُ المنتجات طوليّة، وتحويلي الإطار إلى مربّع في P110 هو ما صغّرها وأحاطها بالفراغ. عادت النسبة إلى ما كانت عليه قبل تدخّلي. ⚠️ والسلوكان: البطاقة تملأ إطارها من حافةٍ إلى حافّة (cover) لأنها واجهةٌ مصغّرة يُقرأ منها المنتج لمحةً، والمعرضُ داخل الورقة يُظهر الصورة كاملةً (contain) لأنه موضع التفحّص. وتعميمي contain على الاثنين في P111 هو ما أحدث الحواف البيضاء على البطاقات. ══════════════════════════════════════════════════════════════════════ */ --card-img-ratio: 4/5; --card-img-fit: cover; /* البطاقات: ملءٌ كامل */ --gallery-img-fit: contain; /* المعرض: إظهارٌ كامل */ } @media (max-width: 380px){ :root{ --card-w: 166px; } } /* أدنى عرضٍ لا يُقصّ فيه الصفّ */ @media (min-width: 768px){ :root{ --card-w: 200px; } } @media (min-width: 1200px){ :root{ --card-w: 224px; } } .more-sheet-title{ font-size:var(--sheet-title-size); font-weight:var(--sheet-title-weight); letter-spacing:-0.01em; padding:var(--sheet-head-pad-top) 20px var(--sheet-head-pad-bottom); border-bottom:var(--sheet-head-border); margin-bottom:var(--sheet-head-gap); } .more-row{ display:flex; align-items:center; justify-content:space-between; padding:var(--s-5) var(--s-6); border-top:1px solid var(--p-black-a08); background:none; border-inline:none; border-bottom:none; width:100%; text-align:start; font-size:var(--t-sm); color:inherit; cursor:pointer; } .more-row-label{ display:flex; flex-direction:column; gap:var(--s-1); } .more-row-label small{ font-size:var(--t-xs); opacity:.6; font-weight:var(--w-normal); } .more-row-value{ font-size:var(--t-sm); opacity:.7; } .toggle-switch{ width:46px; height:28px; border-radius:var(--r-full); background:var(--p-black-a15); position:relative; flex:0 0 auto; transition:background .2s ease; } .toggle-switch::after{ content:""; position:absolute; top:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:50%; background:var(--p-white); box-shadow:0 1px 3px var(--p-black-a30); transition:transform .2s ease; } .toggle-switch.on{ background:var(--brand,var(--p-brand)); } .toggle-switch.on::after{ transform:translateX(18px); } html[dir="rtl"] .toggle-switch.on::after{ transform:translateX(-18px); } /* ============ السلة + تدفق الشراء ============ */ .cart-sheet .pd-scroll{ padding:0 20px 28px; } #giftCardSheet .pd-scroll, #suggestSheet .pd-scroll, #boxWritingSheet .pd-scroll, #moreSheet .pd-scroll, #distributionSheet .pd-scroll, #customDesignSheet .pd-scroll, #cakeBuilderSheet .pd-scroll, #occasionsSheet .pd-scroll, #giftHistorySheet .pd-scroll, #browseSheet .pd-scroll, #discoverSheet .pd-scroll, #giftBuilderSheet .pd-scroll{ padding:0 20px 28px; } /* ══════════════════════════════════════════════════════════════════════════ ⚠️ P85 · ٢٠٢٦-٠٨-١٣ — الشريط يختفي أثناء إتمام الطلب (قرار المالك). ⚠️ تاريخ هذا السطر تبدّل ثلاث مرات بطلب المالك: P70 رفعه فوق الأوراق، و P73 رجع عنه، و P74 أعاده بخلوص محسوب. واليوم يختفي في السلة وحدها. ⚠️ والقرار لا يناقض ما قبله: الشريط تنقّلٌ بين أقسام المتجر، وإتمام الطلب ليس قسماً بل مساراً له مخرج واحد. فحضوره في التصفّح مكسب، وحضوره في الدفع خمسة أبواب للخروج من مسارٍ نريد إتمامه. ⚠️ ومحصور في ورقة السلة (body.cart-open) — بقيّة الأوراق تبقى بشريطها. ⚠️ ويعود خلوصها السفلي إلى صفر، فلا تبقى فجوة بيضاء مكان شريطٍ غائب. ⚠️ P74 — خلوص الشريط السفلي، على الورقة لا على محتواها. ⚠️ القيمة = ارتفاع الشريط (٥٦) + إزاحته (٢) + هامش تنفّس (١٢) + منطقة الأمان. ⚠️ وعلى .pd-sheet لا .pd-scroll: الورقة صندوق عمودي، فالحشو عليها يرفع كل ما بداخلها معاً — منطقة التمرير وأزرارها وحافّة الورقة. وحشوٌ على الابن وحده كان يترك حافّة الأب مغطّاة، وهي علّة P70 التي رصدها المالك. ⚠️ وخلفية الورقة تمتدّ تحت الشريط بقصد: الشريط يطفو على حافّتها فيُقرأ عائماً فوقها لا قاطعاً لها. */ /* ══════════════════════════════════════════════════════════════════════════════ ⚠️ P116 — الفراغ بين صفّ الأزرار وشريط التنقّل (رصد المالك بدائرةٍ حمراء). ⚠️ الحساب لا التقدير: الشريط يشغل من أسفل الشاشة ٥٠ نقطة — إزاحته السفلية ٢ + حشوه ٤×٢ + ارتفاع عنصره ٤٠. وكان المحجوز ٧٠، فيبقى فوقه ٢٠ فراغاً ميتاً، يُضاف إليه الحشو السفليّ لصفّ الأزرار ١٢ = **٣٢ نقطة** هي ما رآه المالك. ⚠️ الآن المحجوز ٥٨: يبقى فوق الشريط ٨ نقاطٍ خلوصاً — موجبٌ فلا يختفي شيء خلفه — والحشو السفليّ ٤. فالفراغ **١٢ نقطة** بدل ٣٢، أي أقلّ من النصف كما طلب. والخلوص محسوبٌ في الفحص فيسقط إن صار سالباً يوماً. ══════════════════════════════════════════════════════════════════════════════ */ :root{ --bn-clear: calc(58px + env(safe-area-inset-bottom)); } .pd-sheet.pd-sheet{ padding-bottom:var(--bn-clear); } /* ⚠️ P87 · ٢٠٢٦-٠٨-١٣ — !important لازمة هنا، وليست كسلاً. ⚠️ العطل الذي رصده المالك: «الشريط ظاهر بس مو متفاعل». والسبب أن حلقة التحوّل مع التمرير تكتب bottomNav.style.opacity سطرياً في كل إطار، والسطري يغلب قاعدة الصنف مهما كانت أسبقيّتها. فطُبّق pointer-events وحده (لا يكتبه الجافاسكربت منذ P63) وسقطت العتامة والإزاحة — فبقي الشريط مرئياً وميّتاً معاً، وهو أسوأ من بقائه عاملاً. ⚠️ ولم نعالجها بمنع الجافاسكربت من الكتابة: الحلقة تعمل في كل إطار ولا تعرف بالأوراق، وإضافة شرطٍ لها يربط حلقة الأداء بحالة السلة. فالقاعدة هنا هي الموضع الصحيح للحسم. */ body.cart-open .bottom-nav{ opacity:0 !important; pointer-events:none !important; transform:translateX(-50%) translateY(130%) !important; transition:opacity .2s ease, transform .28s cubic-bezier(.32,.72,0,1); } /* ⚠️ P97 — عند الفوتر: يختفي بصرياً ويبقى **قابلاً للضغط** لو عاد. ولا pointer-events هنا بقصد — مشروح عند المراقب في الجافاسكربت. */ body.at-footer:not(.cart-open) .bottom-nav{ opacity:0 !important; transform:translateX(-50%) translateY(130%) !important; transition:opacity .25s ease, transform .3s cubic-bezier(.32,.72,0,1); } body.cart-open #cartSheet.pd-sheet.pd-sheet{ padding-bottom:0; } /* ⚠️ وتدفّق «شاهد» بملء الشاشة: الخلوص على شريط المحتوى السفلي وحده، لا على حاوية التمرير. الحاوية شرائح بارتفاع ١٠٠٪ مع scroll-snap إجباري، وحشوها يزيح نقاط الالتقاط فتقف الشريحة مائلة — علاجٌ يُنتج عطلاً أوضح من علّته. */ /* ⚠️ محدِّد أرفع (.reels-feed قبله) بقصد: القاعدة الأساس لهذا الصنف تأتي لاحقاً في الملف، ولو تساوى المحدِّدان لغلبها الترتيب — نفس علّة P59. */ .reels-feed .reels-feed-bottom{ padding-bottom:var(--bn-clear); } /* هاي الأوراق بتنفتح من جوا ورقة السلة نفسها — لازم تكون فوقها دايماً بشكل مضمون، بغض النظر عن ترتيبها بالـ DOM (بدل الاعتماد الضمني على تعادل z-index) */ #giftCardBackdrop, #suggestBackdrop, #boxWritingBackdrop{ z-index:160; } #giftCardSheet, #suggestSheet, #boxWritingSheet{ z-index:161; } /* تفاصيل المنتج (pdSheet) لازم تطلع دايماً فوق أي ورقة تانية بدون استثناء — بما فيها مناسباتي/حسابي/سجل الهدايا — بغض النظر من وين انفتحت (إصلاح باج: كانت بتعتمد ضمنياً على ترتيب DOM بدل z-index صريح، فكانت أحياناً تطلع تحت الورقة الأم) */ #pdBackdrop{ z-index:170; } #pdSheet{ z-index:171; } /* ⚠️ ٢٠٢٦-٠٧-٢٦ — خلل حقيقي: "ابني هديتك" و"صمم كيكتك" كانوا يفتحوا **خلف** ورقة المنتج، لأن ورقة المنتج عندها z-index:171 (مرفوعة بقصد فوق كل شي) والاستوديوهات على القيمة الافتراضية 151. والاثنان يُفتحوا **من جوّا** ورقة المنتج — يعني هما خطوة للأمام، فلازم يكونوا فوقها دايماً. */ #giftBuilderBackdrop, #cakeBuilderBackdrop{ z-index:180; } #giftBuilderSheet, #cakeBuilderSheet{ z-index:181; } /* ============ ورقة "حسابي" — عرض شبه كامل الشاشة، وكل الشاشات الفرعية (مناسباتي/سجل الهدايا) مكدسة جواها بنفس الترتيب، تتنقل بنفس التنقل التدريجي ============ */ /* ⚠️ P107 — حُذفت هنا قاعدةُ ارتفاعٍ خاصّة بهذه الأربع. صارت تكراراً حرفياً للقاعدة الأساسية بعد توحيد ٩٣٪، وبقاؤها يُبقي فخَّ الأولوية الذي أنتج التفاوت أصلاً: محدِّدٌ بمعرّف يغلب محدِّداً بصنف، فيظنّ من يعدّل القاعدة أنه عدّل الكلّ وقد ترك أربعاً. المصدر واحدٌ الآن: .pd-sheet وحدها. */ /* ⚠️ P99 — بنيتها من القاعدة الموحّدة؛ لا تحمل هنا إلا إلغاء الحشو الجانبي لأنها داخل .pd-scroll الذي يحمل حشوه الخاصّ. */ .acct-header{ padding-inline:0; } .acct-header > .acct-header-title{ grid-column:2; grid-row:1; text-align:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .acct-header > .sheet-close-btn{ grid-column:1; grid-row:1; justify-self:start; } .acct-header-title{ font-size:var(--t-base); font-weight:var(--w-bold); } /* ══════════════════════════════════════════════════════════════════════════════ ⚠️ P95 · ٢٠٢٦-٠٨-١٤ — العنوان وسطاً والمرحلة **تحته** (قرار المالك). ⚠️ كانت المرحلة بجانب العنوان على السطر نفسه، فتُقرأ امتداداً للاسم («السلة الخطوة ١ من ٣») وتزيح العنوان عن المنتصف. وهي معلومة تابعة لا نظيرة، فموضعها تحته لا بجانبه. ⚠️ عمود لا صفّ: العنوان أولاً ثم المرحلة سطراً ثانياً أصغر وأخفت — فيتوسّط العنوان توسّطاً حقيقياً مهما طال نصّ المرحلة أو قصر. ⚠️ وفاصلٌ سفليّ كما في بقيّة الأوراق (P94): كانت السلة الوحيدة بلا فاصل بعد التوحيد، لأنها لا تستعمل sheet-title-row بل ترويسةً خاصّة بها. ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ ⚠️ P99 — هذه الكتلة تقع **بعد** القاعدة الموحّدة في الملف، فتغلبها بالترتيب لو أعادت تعريف display. ولهذا لا تحمل إلا ما يخصّ السلة وحدها: الموضع النسبي لزرّ الرجوع المعلّق، والحشو والفاصل بالمتغيّرات المشتركة. ⚠️ وكتلة .cart-header مكرّرة في هذا الملف — وهي التي أوقعتني في P95 حين عدّلتُ النسخة غير المستعملة فمرّ التغيير صامتاً. فلا يُكتب هنا شيء تحمله القاعدة الموحّدة. ══════════════════════════════════════════════════════════════════════════ */ .cart-header{ position:relative; row-gap:var(--s-1); padding:var(--sheet-head-pad-top) 20px var(--sheet-head-pad-bottom); border-bottom:var(--sheet-head-border); margin-bottom:var(--sheet-head-gap); } .cart-header-spacer{ display:none; } /* ⚠️ P95 — يبقى معلّقاً بأعلى الترويسة لا متوسّطاً معها بعد أن صارت عموداً. */ .cart-back-btn{ /* ⚠️ P118 — دخل عقد الترويسة بدل الموضع المطلق: عمود الرجوع (يسارٌ في RTL) كما في ورقة المنتج، فصار الإغلاق يميناً والرجوع يساراً في كل الأوراق. */ width:var(--icon-44); height:var(--icon-44); display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--p-black-a06); color:inherit; cursor:pointer; } .cart-back-btn[hidden]{ display:none; } /* ⚠️ P114 — «زرّ الرجوع بالسلة بعده على حاله». كان خارج عقد الترويسة: أيقونته بلا مقاس فتُرسم بحجمها الطبيعي أكبر من كلّ أيقونات الترويسات، وموضعه عند top:0 بينما محتوى الترويسة يبدأ بعد حشوها. فصار بمقاس إخوته وموضعهم. */ .cart-back-btn svg{ width:15px; height:15px; display:block; } /* ⚠️ P95 — أُلغي: كان يوازن العنوان في صفٍّ أفقي، والترويسة صارت عموداً. */ .cart-items{ display:flex; flex-direction:column; gap:var(--s-4); margin-bottom:var(--s-4); } .cart-item{ /* ⚠️ P113 — «قلّل الهوامش والارتفاع حتى يقلّ التمرير». الحشو من ١٢ إلى ٨، والفجوة الداخلية من ١٦ إلى ١٢، والصورة من ٧٢ إلى ٦٤ — والكتلة تقصر بمقدار ستّة عشر بكسلاً تقريباً لكلّ صنف بلا مساسٍ بمقروئية شيء. */ display:flex; gap:var(--s-4); align-items:center; padding:var(--s-3); border-radius:var(--r-md); border:1px solid var(--p-black-a08); } .cart-item-img{ width:64px; height:64px; border-radius:var(--r-md); overflow:hidden; flex:0 0 auto; background:var(--ivory-card-bg); } .cart-item-img img{ width:100%; height:100%; object-fit:cover; display:block; } .cart-item-info{ flex:1; min-width:0; } .cart-item-name{ font-size:var(--t-sm); font-weight:var(--w-bold); margin-bottom:var(--s-1); } .cart-item-price{ font-size:var(--t-sm); opacity:.65; margin-bottom:var(--s-3); } /* ══════════════════════════════════════════════════════════════════════════ ⚠️ P91 · ٢٠٢٦-٠٨-١٤ — أزرار الكمية في السلة (رصد المالك). ⚠️ ثلاثة أعطال حقيقية لا تصميم ذوقي: · العدد بينهما بخط Ciguatera (زخرفي لاتيني للعناوين) بينما السعر تحت المنتج بخط Cairo (var(--font-num)) — خطّان مختلفان فعلاً لرقمين متجاورين في نفس البطاقة. · الرمزان +/− بوزن عادي لا بولد، فيبدوان خافتين داخل دائرة ٢٨px. · والدائرة صغيرة نسبياً لعنصر يُضغط بالإصبع على الجوّال. ⚠️ العلاج: خط الرقم صار var(--font-num) مطابقاً للسعر تماماً، والرمزان بولد (700)، والدائرة ٣٢px بدل ٢٨ — وحدٌ أدنى مريح للمس دون أن تكبر عن حجم بطاقة السلة. ══════════════════════════════════════════════════════════════════════════ */ .cart-item-qty-row{ /* ⚠️ P113 — «طابق الشكل». كان قرصين محدَّدين منفصلين بينما العدّاد في البطاقة والورقة كبسولةٌ واحدة — عنصرٌ واحد بشكلين. صار كبسولةً مثلهما: حدٌّ واحد يحيط الإشارتين والرقم، وارتفاعُ درجةِ السلّم نفسها. */ display:inline-flex; align-items:center; gap:var(--s-1); height:var(--icon-32); padding-inline:var(--s-2); border:1px solid var(--brand); border-radius:var(--r-full); color:var(--brand); box-sizing:border-box; align-self:flex-start; } .cart-item-qty-btn{ width:var(--icon-24); height:var(--icon-24); border-radius:50%; flex:0 0 auto; border:none; background:none; color:var(--brand); font-size:var(--t-base); font-weight:var(--w-bold); line-height:1; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; } .cart-item-qty-value{ direction:ltr; unicode-bidi:isolate; min-width:14px; text-align:center; font-size:var(--t-sm); font-weight:var(--w-bold); color:var(--brand);} .cart-item-remove{ width:var(--icon-24); height:var(--icon-24); border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:inherit; opacity:.5; cursor:pointer; } .cart-item-remove svg{ width:14px; height:14px; } .cart-empty{ text-align:center; padding:var(--s-8) 0; opacity:.6; font-size:var(--t-sm); } .cart-summary-row{ display:flex; justify-content:space-between; align-items:center; padding:var(--s-5) 0; border-top:1px solid var(--p-black-a08); font-size:var(--t-sm); font-weight:var(--w-bold); } .cart-upsell-section{ margin-top:var(--s-6); } .cart-upsell-section[hidden]{ display:none; } .cart-upsell-title{ font-size:var(--t-sm); font-weight:var(--w-bold); opacity:.7; margin-bottom:var(--s-4); } .cart-upsell-row{ display:flex; gap:var(--s-4); overflow-x:auto; scrollbar-width:none; padding-bottom:var(--s-1); } .cart-upsell-row::-webkit-scrollbar{ display:none; } .cart-upsell-card{ flex:0 0 auto; width:104px; display:flex; flex-direction:column; align-items:center; gap:var(--s-2); padding:var(--s-5) var(--s-4); border-radius:var(--r-md); border:1px dashed var(--p-black-a16); background:none; color:inherit; cursor:pointer; text-align:center; } .cart-upsell-card.added{ border-style:solid; border-color:var(--brand); background:var(--p-brand-a07); } /* ⚠️ ٢٠٢٦-٠٧-٢٦ — تفضيلات الإضافة: تظهر بس لما تنختار الإضافة */ .upsell-prefs{ margin-top:var(--s-4); display:flex; flex-direction:column; gap:var(--s-1); } .upsell-prefs[hidden]{ display:none !important; } .upsell-prefs-label{ font-size:var(--t-xs); font-weight:var(--w-bold); opacity:.72; } .upsell-prefs-hint{ font-size:var(--t-xs); opacity:.45; margin-top:var(--s-2); } /* ⚠️ P87 — رمز الإضافة صورةً حين ترفعها اللوحة. */ /* ⚠️ P92 — بطاقة المنتج ذي الصلة: صورة حقيقية بنسبة مربّعة، لا رمز تعبيري. */ .cart-related-img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-sm); display:block; margin-bottom:var(--s-3); } .cart-related-card{ text-align:center; } .cart-upsell-icon-img{ width:34px; height:34px; border-radius:var(--r-sm); object-fit:cover; display:block; margin-inline:auto; } .cart-upsell-icon{ font-size:var(--t-xl); } .cart-upsell-name{ font-size:var(--t-xs); font-weight:var(--w-bold); line-height:1.3; } .cart-upsell-price{ font-size:var(--t-xs); opacity:.6; } .cart-continue-btn{ width:100%; padding:var(--s-5); border-radius:var(--r-md); background:var(--brand); color:var(--p-ivory); font-size:var(--t-sm); font-weight:var(--w-bold); cursor:pointer; margin-top:var(--s-3); } /* ⚠️ P165 — زرّا الانتقال في الصفحة الواحدة: خفيفان بستروك. الفعل الوحيد المصمت في السلة يجب أن يكون «تأكيد الطلب» — وزرّان مصمتان فوقه يسحبان ثقله ويجعلان الزائر يظنّ أنه أنهى وهو لم يبدأ. */ .cart-jump-btn{ background:none; color:var(--brand); border:1px solid var(--p-brand-a34); font-weight:var(--w-bold); } .cart-jump-btn:hover{ background:var(--p-brand-a07); } /* ⚠️ P91 — دوّارة زرّ الإرسال. تُرافق النصّ ولا تحلّ محلّه: النصّ يقول ماذا يجري، والحركة تقول إنه ما زال يجري. */ .btn-spinner{ display:inline-block; width:13px; height:13px; margin-inline-end:var(--s-3); vertical-align:-2px; border:2px solid var(--p-ivory-a35); border-top-color:var(--p-ivory); border-radius:50%; animation:wshSpin .7s linear infinite; } @keyframes wshSpin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ /* ⚠️ من يطلب تقليل الحركة يبقى محتاجاً دليل التقدّم — فتُستبدل الدورة بنبضة عتامة لا تدور، لا أن يُحذف المؤشّر فيعود الزرّ ساكناً. */ .btn-spinner{ animation:wshPulse 1.1s ease-in-out infinite; } @keyframes wshPulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } } } .cart-continue-btn:disabled{ opacity:.4; cursor:default; } /* ══════════════════════════════════════════════════════════════════════════ ⚠️ P84 — «الحقول المهمة داخل السلة لا تظهر بأهميتها، وكأن الزائر يتخطاها بدون قصد» (نقد مستخدمين). ⚠️ التشخيص: عنوان الحقل كان ١٢px بشفافية ٠٫٧ — أخفت من نصّ الحقل نفسه (١٣px بحبر كامل). فالعين تقرأ المُدخَل ولا ترى ما يطلبه، والحقول الإلزامية (اسمك · رقم جوالك · العنوان) تبدو اختيارية. ⚠️ وليست مشكلة مقاس وحدها: كل الحقول كانت متساوية الوزن، فلا شيء يميّز الإلزامي عن الاختياري. أضفنا وسم «مطلوب» على الثلاثة الإلزامية — صغيراً بلون العلامة لا بالأحمر، لأن الأحمر إنذار خطأ لا دلالة إلزام. ⚠️ وحدّ الحقل الإلزامي أوضح (٠٫٢٢ بدل ٠٫١٢) فيُقرأ الصندوق حدّاً لا خطّاً. ══════════════════════════════════════════════════════════════════════════ */ .cart-field-label{ font-size:var(--t-sm); font-weight:var(--w-bold); opacity:.92; margin:var(--s-6) 0 var(--s-4); } /* ══════════════════════════════════════════════════════════════════════════ ⚠️ P95 · ٢٠٢٦-٠٨-١٤ — عنوان القسم متوسّط وأكبر، بلا وسم إلزام (قرار المالك). يقود مجموعةً من الحقول، فيجب أن يُقرأ مستوىً أعلى منها لا نظيراً لها. ══════════════════════════════════════════════════════════════════════════ */ .cart-section-label{ font-size:var(--t-base); font-weight:var(--w-bold); opacity:1; text-align:center; margin:var(--s-7) 0 var(--s-5); } /* ⚠️ P95 — زرّ «لأكثر من شخص؟» كان ملتصقاً بأزرار الاختيار فوقه، فيُقرأ خياراً ثالثاً لها لا سؤالاً مستقلاً. يفصله هامشٌ يوضّح أنه تفريع لا خيار. */ #cartMultiToggle{ margin-top:var(--s-5); } /* ⚠️ P95 — ملاحظة تحت حقل الهاتف كانت لاصقةً به بهامش سالب من ترميز قديم. */ .cart-inline-note{ margin-top:var(--s-3); } .cart-field-label:first-child{ margin-top:var(--s-2); } /* ══════════════════════════════════════════════════════════════════════════ ⚠️ P85 — عنوان فوق كل حقل بدل الاعتماد على placeholder وحده. ⚠️ العلّة: العنوان كان داخل الحقل، فيختفي لحظة يكتب الزائر. فيراجع استمارته فلا يعرف ماذا يمثّل كل صندوق — وهو ما وصفه المراجع حرفاً. والمثال يبقى داخل الحقل لأنه يوضّح **شكل** الإجابة لا **هويّة** الحقل، فاختفاؤه بعد الكتابة صحيح. ⚠️ و