/* =========================================================
   سَدى — تلبيس مكوّنات SureCart هوية سَدى
   (المتجر / صفحة المنتج / السلة / الدفع)
   نستخدم متغيّرات SureCart الرسمية لأنها تخترق الـ Shadow DOM،
   فتبقى المكوّنات شغّالة ١٠٠٪ وتأخذ الهوية.
   ========================================================= */

:root {
	/* ---- اللون الأساسي (خمري) — أساس HSL + درجات صريحة للضمان ---- */
	--sc-color-primary: 346;
	--sc-color-primary-saturation: 56%;
	--sc-color-primary-luminance: 26%;
	--sc-color-primary-400: #6E1E2C;
	--sc-color-primary-500: #561826;
	--sc-color-primary-600: #491620;
	--sc-color-primary-700: #3A1016;
	--sc-color-primary-text: #F6EFE4;

	/* ---- ألوان الهوية العامة لـ SureCart ---- */
	--sc-color-brand-primary: #561826;
	--sc-color-brand-secondary: #9C6B4F;
	--sc-color-brand-heading: #561826;
	--sc-color-brand-body: #5A4A42;
	--sc-color-brand-subheading: #9C6B4F;
	--sc-color-brand-main-background: #F4ECDD;
	--sc-color-brand-content-background: #FBF6EC;
	--sc-color-brand-stroke: #E4D4BC;

	/* ---- الحقول (Inputs) ---- */
	--sc-input-background-color: #FBF6EC;
	--sc-input-border-color: #D8C4A8;
	--sc-input-color: #2A1D1A;
	--sc-input-label-color: #561826;
	--sc-input-placeholder-color: #9C6B4F;
	--sc-input-label-font-weight: 500;
	--sc-input-height-medium: 3.1em;

	/* ---- لوحات وخيارات الدفع: كريمية بدل الأبيض (أقرب للتصميم) ---- */
	--sc-panel-background-color: #FBF6EC;
	--sc-choice-background-color: #EFE2CF;

	/* ---- الحواف (أنعم قليلًا لتناسب الهوية) ---- */
	--sc-border-radius-small: 8px;
	--sc-border-radius-medium: 12px;
	--sc-border-radius-large: 16px;
	--sc-border-radius-x-large: 22px;

	/* ---- الخط ---- */
	--sc-font-sans: 'IBM Plex Sans Arabic', sans-serif;
}

/* أزرار SureCart على شكل «حبّة» لتطابق التصميم (محاولة عبر part) */
sc-button::part(base),
sc-button::part(label) {
	font-family: 'IBM Plex Sans Arabic', sans-serif;
}
sc-button::part(base) {
	border-radius: 9999px;
}

/* توحيد عناوين صفحات المتجر/المنتج (العناصر الظاهرة في light DOM) مع الهوية */
.sada-content .sc-title,
.sada-content sc-product-item-title,
.sada-content .sc-product__title {
	font-family: 'Aref Ruqaa', serif;
	color: var(--sada-wine);
}