> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS المخصص

> أضف CSS مخصصًا لضبط سلة Aftersell Cart بدقة تتجاوز إعدادات التصميم المدمجة.

عندما لا تكفي [إعدادات التصميم](/ar/aftersell/cart/design-settings) المدمجة، أضف **CSS مخصصًا** خاصًا بك لتنسيق السلة.

<div id="where-to-add-it">
  ## أين تضيفه
</div>

في محرر السلة، افتح **Cart settings → Custom CSS**. **يُطبَّق** CSS الخاص بك **على السلة بأكملها** ويُحمَّل **بعد** أنماط السلة الأساسية، لذا تكون لقواعدك الأولوية.

<div id="target-public-classes-only">
  ## استهدف الأصناف العامة فقط
</div>

نسّق السلة باستخدام **أصنافها العامة `cart-external-*`**. يكمل المحرر هذه الأصناف تلقائيًا ويحذرك من البقية:

* **`cart-external-*`**: الهدف العام المدعوم. استخدم هذه. لا تحمل أي تنسيق خاص بها، فهي موجودة فقط ليتعلق بها CSS الخاص بك.
* **`cart-internal-*`**: البنية الداخلية للسلة، حيث يوجد كل تنسيقها المدمج. يضع المحرر علامة خطأ على المحددات الموجهة إليها. لا تُغيَّر باستهتار، لأن كل سلة موجودة تعتمد عليها، لكنها ملك للسلة لتغييرها وليست عقدًا معك. أعد التنسيق عبر التوأم `cart-external-*` بدلًا منها.
* أصناف `cart-*` الأخرى التي لا يتعرف عليها المحرر تُوسم كتحذيرات.

<Note>
  سترى أصناف `cart-internal-*` في الترميز، بما في ذلك في [القالب المخصص](/ar/aftersell/cart/custom-templates) الافتراضي لكل بلوك. هذا متوقع: فهي ما يمنح البلوك مظهره المدمج. القاعدة هنا تخص **المحددات التي تكتبها** في هذه اللوحة، وليس أسماء الأصناف التي تعرضها السلة.

  إذا كنت تكتب قالبًا مخصصًا يغيّر بنية DOM لبلوك ما، فراجع [تنسيق قالب مخصص](/ar/aftersell/cart/custom-templates#styling-a-custom-template) لمعرفة أسماء الأصناف التي تُبقيها وتلك التي تحذفها.
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM: السلة قائمة بذاتها
</div>

على واجهة المتجر، تُعرض السلة بأكملها داخل **shadow DOM** خاص بها. هذا يعني:

* لا يمكن لـ CSS قالبك التسرب إلى السلة، ولا يمكن لـ CSS السلة التسرب خارجها، لذا فإن CSS المخصص الخاص بك محصور تلقائيًا في السلة ولن يتعارض مع بقية موقعك.
* ينبغي أن تشير محدداتك إلى عناصر وأصناف **داخل السلة**. المحددات الموجهة إلى عناصر الصفحة خارج السلة لن تصل إلى داخلها.

ينطبق الحد نفسه على JavaScript: لا يمكن لـ `document.querySelector` رؤية ما بداخل الدرج أيضًا. أي سكربت يريد الوصول إلى عنصر في السلة يجب أن يمر عبر [`shadowRoot`](/ar/aftersell/cart/sdk-overview#shadowroot)، ويستهدف أصناف `cart-external-*` نفسها.

<div id="when-to-use-design-settings-instead">
  ## متى تستخدم إعدادات التصميم بدلًا منه
</div>

للألوان وأنصاف الأقطار والتباعد والعرض، [إعدادات التصميم](/ar/aftersell/cart/design-settings) المدمجة أبسط وأكثر أمانًا، لذا الجأ إلى CSS المخصص فقط لما لا تغطيه.

<div id="where-to-go-next">
  ## إلى أين تتجه بعد ذلك
</div>

* **[إعدادات التصميم](/ar/aftersell/cart/design-settings)**: أدوات التنسيق المدمجة، وأول ما ينبغي تجربته.
* **[القوالب المخصصة](/ar/aftersell/cart/custom-templates)**: استبدل ترميز بلوك بالكامل عندما لا يكفي CSS وحده.
* **[Cart SDK](/ar/aftersell/cart/sdk-overview)**: للسلوك بدلًا من المظهر.