/* داركوم — طبقة الواجهة · هوية v4.0 «الأخضر العميق» (03/11/2026)
   المصدر الوحيد للألوان والخط: design-system/tokens.json
   الخط مستضاف محلياً — ماشي Google Fonts عن بُعد (التحميل البعيد يكلّف أداءً مقيساً). */

/* arabic */
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/plex-arabic-arabic-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/plex-arabic-latin-400.woff2') format('woff2');
	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;
}

/* arabic */
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/plex-arabic-arabic-500.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/plex-arabic-latin-500.woff2') format('woff2');
	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;
}

/* arabic */
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/plex-arabic-arabic-600.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/plex-arabic-latin-600.woff2') format('woff2');
	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;
}

/* arabic */
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/plex-arabic-arabic-700.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/plex-arabic-latin-700.woff2') format('woff2');
	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;
}

:root {
	--dc-ink: #14432A;          /* أخضر عميق — الأساس، النصوص، الأزرار */
	--dc-surface: #F1EFE4;      /* عظمي */
	--dc-signature: #7FD44C;    /* ليموني — على الأخضر وحده، ≤ 15% */
	--dc-product: #FFFFFF;      /* خلف صورة المنتج فقط */
	--dc-muted: #67645A;        /* الميتا فوق الفاتح (5.13:1) */
	--dc-muted-dark: #B3BDAA;   /* الميتا فوق الأخضر (5.77:1) */
	--dc-on-ink: #F1EFE4;       /* النص على الأخضر (9.76:1) */
	--dc-line: rgba(20, 67, 42, .18);
}

/* الخط: عائلة وحدة للعربي واللاتيني والأرقام */
body,
button, input, select, textarea {
	font-family: 'IBM Plex Sans Arabic', Tahoma, system-ui, sans-serif;
}

/* الأرقام لاتينية دائماً + جدولية — تبقى متّزنة عمودياً فالأسعار */
.woocommerce-Price-amount,
.darcoom-totals__row b,
.darcoom-sticky__total {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* قواعد العربية: النص يبدا من 17px بـ1.75 — ماشي 16/1.5 */
body {
	font-size: 17px;
	line-height: 1.75;
	color: var(--dc-ink);
	background: var(--dc-surface);
}

h1, h2, h3, h4 { line-height: 1.3; }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; }
h2 { font-size: 24px; font-weight: 600; }
h3 { font-size: 20px; font-weight: 600; }

/* لا مائل فالعربية — للتوكيد: الوزن ولا اللون */
:lang(ar) i, :lang(ar) em { font-style: normal; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   شريط الإعلان — سطح أخضر، فالتوقيع ليموني مسموح
   ═══════════════════════════════════════════════════════════════════ */
.dc-bar {
	background: var(--dc-ink);
	color: var(--dc-on-ink);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	padding: 9px 16px;
}
.dc-bar b { color: var(--dc-signature); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   الحدّ الثابت حول صورة المنتج — في كل المجالات بلا استثناء
   سطح أبيض + خطّ ليموني على الحافة + الحلقتان في زاوية ثابتة
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img {
	background: var(--dc-product);
}
.woocommerce ul.products li.product {
	position: relative;
	background: var(--dc-product);
	border: 1px solid var(--dc-line);
	border-radius: 12px;
	overflow: hidden;
}
.woocommerce ul.products li.product a img {
	border-bottom: 2px solid var(--dc-signature);
	margin-bottom: 0;
}
.woocommerce ul.products li.product::before {
	content: "";
	position: absolute;
	inset-inline-start: 8px;
	inset-block-start: 8px;
	width: 26px;
	height: 23px;
	background: url('mark.svg') center / contain no-repeat;
	z-index: 2;
	pointer-events: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	padding-inline: 12px;
}
.woocommerce ul.products li.product .price {
	color: var(--dc-ink);
	font-weight: 700;
	padding-inline: 12px;
	padding-bottom: 12px;
}

/* صفحة المنتج: الصورة على أبيض بنفس الحدّ */
.woocommerce div.product div.images {
	background: var(--dc-product);
	border-bottom: 3px solid var(--dc-signature);
}

/* ═══════════════════════════════════════════════════════════════════
   شرائح الفئات [darcoom_categories]
   محور أ (للدار) سطحه عظمي · محور ب (للخدمة) سطحه أخضر — نسبتان
   ═══════════════════════════════════════════════════════════════════ */
.dc-cats { display: grid; gap: 12px; margin: 24px 0; }
.dc-cats__a { display: block; text-decoration: none; border-radius: 14px; padding: 18px; }
.dc-cats__a--light { background: var(--dc-product); border: 1px solid var(--dc-line); }
.dc-cats__a--dark { background: var(--dc-ink); border-block-start: 3px solid var(--dc-signature); }
.dc-cats__t { display: block; font-size: 21px; font-weight: 700; margin-bottom: 5px; }
.dc-cats__a--light .dc-cats__t { color: var(--dc-ink); }
.dc-cats__a--dark .dc-cats__t { color: var(--dc-on-ink); }
.dc-cats__s { display: block; font-size: 15px; line-height: 1.6; }
.dc-cats__a--light .dc-cats__s { color: var(--dc-muted); }
.dc-cats__a--dark .dc-cats__s { color: var(--dc-muted-dark); }

/* ═══════════════════════════════════════════════════════════════════
   شريط التنقّل السفلي — الجوال فقط
   ═══════════════════════════════════════════════════════════════════ */
.dc-nav { display: none; }
@media (max-width: 767px) {
	.dc-nav {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 90;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		background: var(--dc-surface);
		border-block-start: 1px solid var(--dc-line);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
	.dc-nav__i {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 56px;
		font-size: 11px;
		font-weight: 600;
		color: var(--dc-ink);
		text-decoration: none;
	}
	.dc-nav__i svg { width: 21px; height: 21px; }
	.dc-nav__i:focus-visible { outline: 2px solid var(--dc-ink); outline-offset: -2px; }
	/* باش الشريط ما يغطّيش آخر المحتوى ولا شريط COD اللاصق */
	body { padding-bottom: 56px; }
	.darcoom-sticky { bottom: 56px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   الرئيسية — الهيرو وشريط الثقة (أسطح خضراء: هنا يعيش الليموني)
   ═══════════════════════════════════════════════════════════════════ */
.dc-hero {
	background: var(--dc-ink);
	border-radius: 16px;
	padding: 34px 24px 30px;
	margin: 20px 0 24px;
}
.dc-hero__k { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--dc-muted-dark); }
.dc-hero__h { margin: 0 0 14px; font-size: 32px; font-weight: 700; line-height: 1.25; letter-spacing: -.3px; color: var(--dc-on-ink); }
.dc-hero__p { margin: 0 0 20px; font-size: 17px; line-height: 1.75; color: var(--dc-muted-dark); }
.dc-hero__c {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 26px;
	background: var(--dc-signature);
	color: var(--dc-ink);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 10px;
}
.dc-hero__c:hover { background: #6BC23C; color: var(--dc-ink); }

.dc-vows {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 26px;
	padding: 18px 0;
	border-block: 1px solid var(--dc-line);
}
.dc-vows__i { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.dc-vows__i svg { width: 24px; height: 24px; }
.dc-vows__i span { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--dc-ink); }

.dc-trust {
	background: var(--dc-ink);
	border-radius: 16px;
	padding: 26px 24px;
	margin: 26px 0;
}
.dc-trust h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; color: var(--dc-on-ink); }
.dc-trust p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--dc-muted-dark); }

.dc-h2 { margin: 26px 0 12px; font-size: 24px; font-weight: 600; color: var(--dc-ink); }

/* عنوان «الرئيسية» زايد فوق الهيرو — الهيرو هو العنوان */
.home .page-title,
.home .entry-header,
.home .ct-container > h1.page-title { display: none; }

/* شبكة منتجات فارغة (كل المنتجات مسودة) — ما تخلّيش فراغ ميّت */
.woocommerce .woocommerce-info:empty,
.woocommerce ul.products:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   ربط متغيرات Blocksy بباليت داركوم
   الثيم يعرّف 83 متغيراً ويبني عليهم كل شي — فبدل ما نتصارعو معاه
   بـ!important، نعيد تعريفهم مرة وحدة وهو يتبع.
   `html:root` ماشي `:root` باش نغلبو حتى لو CSS تاعو جا بعدنا.
   ═══════════════════════════════════════════════════════════════════ */
html:root {
	/* الباليت */
	--theme-palette-color-1: #14432A;              /* اللون الفاعل: أزرار وروابط */
	--theme-palette-color-2: #0D2C1B;              /* حالة hover */
	--theme-palette-color-3: #14432A;              /* النص */
	--theme-palette-color-4: #14432A;              /* العناوين */
	--theme-palette-color-5: rgba(20, 67, 42, .18);/* الحدود */
	--theme-palette-color-6: #F1EFE4;              /* سطح فاتح */
	--theme-palette-color-7: #F1EFE4;              /* خلفية الصفحة */
	--theme-palette-color-8: #FFFFFF;              /* أبيض — خلف المنتج */

	/* النصوص والروابط */
	--theme-text-color: #14432A;
	--theme-headings-color: #14432A;
	--theme-link-initial-color: #14432A;
	--theme-link-hover-color: #0D2C1B;

	/* الأزرار — على سطح فاتح: أخضر بحرف عظمي (9.76:1) */
	--theme-button-background-initial-color: #14432A;
	--theme-button-background-hover-color: #0D2C1B;
	--theme-button-text-initial-color: #F1EFE4;
	--theme-button-text-hover-color: #F1EFE4;
	--theme-button-font-weight: 700;
	--theme-button-min-height: 44px;               /* هدف لمس */

	/* الحقول */
	--theme-border-color: rgba(20, 67, 42, .18);
	--theme-form-field-border-initial-color: rgba(20, 67, 42, .28);
	--theme-form-field-border-focus-color: #14432A;
	--theme-form-selection-field-initial-color: rgba(20, 67, 42, .28);
	--theme-form-selection-field-active-color: #14432A;
	--theme-selection-background-color: #14432A;
	--theme-selection-text-color: #F1EFE4;

	/* الخط وقواعد العربية */
	--theme-font-family: "IBM Plex Sans Arabic", Tahoma, system-ui, sans-serif;
	--theme-font-stack-default: "IBM Plex Sans Arabic", Tahoma, system-ui, sans-serif;
	--theme-font-size: 17px;
	--theme-line-height: 1.75;
}

/* عمودان على الجوال — الكارت الواحد يضيّع نصف الشاشة */
@media (max-width: 767px) {
	.woocommerce ul.products,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.woocommerce ul.products li.product { width: auto; margin: 0; float: none; }
}
