/* ==========================================================================
   الجيل الأخضر فوق DavinciWoo 1.4.8 — طبقةُ الهويّة
   --------------------------------------------------------------------------
   ⚠️ هذه الورقةُ كُتبت أصلاً فوق **Aster Storefront**، ونُقلت إلى DavinciWoo
   في 2026-09-08. والفارقُ بين الأبوَين معماريٌّ لا تجميليّ:

   • Aster يعلن **35 متغيّرَ CSS** في `:root`، فكانت الهويّةُ تُركَّب بإعادة
     تعريفها. و**DavinciWoo يعلن صفراً** — لا متغيّرَ واحدٍ في 42,001 سطر.
     ⇒ فالقسمُ ❶ أدناه لم يعد «جسراً إلى الأب» بل **مفرداتٍ داخليّةً لهذه
       الورقةِ نفسِها**: أسماءٌ يستهلكها ما بعدها من أقسام، تُعرَّف هنا مرّةً
       وتشير إلى توكنات `tokens.css`. والأسماءُ أُبقيت على صيغتها القديمة
       عمداً — تغييرُها يمسّ 3,400 سطرٍ بلا مكسبٍ واحد.

   • ‏112 موضعاً في هذه الورقة تخاطب أصنافَ Aster البنيويّة (`.entry-*` 34 ·
     `.site-footer` 29 · `.site-header` 23 · `.widget-area` 16 · …)،
     و**DavinciWoo لا يستعمل منها واحداً** (‏grep على 373 ملفَ PHP ⇒ صفر،
     وقياسٌ حيٌّ على DOM ⇒ صفر). فتلك القواعدُ **ميتةٌ صامتة**: لا تكسر شيئاً
     ولا تفعل شيئاً. تُعاد ربطُها بأصناف DavinciWoo في المرحلة D، وتُترك
     الآن كما هي — حذفُها قبل نظيرِها يترك الترويسةَ والتذييلَ بلا نمطٍ أصلاً.

   • وبالمقابل: `.product-small` و`.box-image` **حاضرتان حيّاً** (24 لكلٍّ
     على `/shop/`) — وهما ما تخاطبه أوراقُ لافين، فتعمل فور نسخها.

   والترتيبُ مضمونٌ بالتبعيّة لا بالأولويّة: هذه الورقةُ تعتمد على
   `davinciwoo-css-main` صراحةً في `functions.php`، فيضمن ووردبريس طباعتَها
   بعدها. ولهذا لا `!important` هنا إلّا حيث يُذكر سببُها.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ❶ المفرداتُ الداخليّة — تُعرَّف هنا لأنّ الأبَ لا يعرّف شيئاً
   -------------------------------------------------------------------------- */

:root {
	/* الخطّ: تجوّل بدل Open Sans البعيد، ولا خطَّ Google في الصفحة. */
	--font-main:    'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-heading: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-code:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;
	--font-pre:     ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;

	/*
	 * ⚠️ كان يصل من `theme_mod` عبر `dynamic-css.php` عند Aster. ولا مقابلَ
	 * له في DavinciWoo — فهذا التعريفُ صار **المصدرَ الوحيد**، لا شبكةَ أمان.
	 */
	--primary-color: var(--teal-600, #0B8571);

	/*
	 * أسماءُ الأسطح — بقيّةٌ من مفردات Aster، تُبقى لأنّ ما بعدها يستهلكها.
	 * (وكان `--background-color-white` عند Aster مضبوطاً على `#1E1E1E` — اسمٌ
	 *  يقول «أبيض» ويحمل أسودَ تقريباً. زال السببُ بزوال الأب، وبقي الاسم.)
	 */
	--background-color-white:      var(--neutral-0);
	--background-color-grey:       var(--neutral-50);
	--background-color-light-grey: var(--neutral-100);
	--background-color-dark:       var(--neutral-400);

	--color-text-main:  var(--neutral-900);
	--color-text-white: var(--neutral-0);

	--input-border-color: var(--color-border);

	/* التذييل بتيلٍ داكن — نفسُ `theme-color` في ترويسة المستند. */
	--footer-top-background:    var(--teal-800);
	--footer-top-color:         var(--neutral-0);
	--footer-bottom-background: var(--teal-900);
	--footer-bottom-color:      var(--teal-100);

	/* الإشعاراتُ بألوان الهويّة الدلاليّة بدل ألوان Bootstrap. */
	--notice-success-bg-color:   var(--success-bg);
	--notice-success-text-color: var(--success);
	--notice-info-bg-color:      var(--info-bg);
	--notice-info-text-color:    var(--info);
	--notice-warning-bg-color:   var(--warning-bg);
	--notice-warning-text-color: var(--warning);
	--notice-danger-bg-color:    var(--error-bg);
	--notice-danger-text-color:  var(--error);

	/*
	 * ‏30px يجعل كلَّ زرٍّ قرصاً كاملاً مهما طال نصُّه. والهويّةُ تستعمل
	 * الحوافَّ الكاملة للشارات والأزرار الصغيرة، ونصفَ قطرٍ محسوباً لما
	 * سواها — فيُخفَّض إلى قيمةٍ تقرأ زرّاً لا حبّة دواء.
	 */
	/* القيمةُ في `tokens.css`؛ والاسمُ مفردةٌ داخليّةٌ يستهلكها ما بعده. */
	--border-round-button: var(--ggen-radius-button);

	/*
	 * ⚠️ أربعةُ أحجامٍ كان **Aster** يوفّرها، وتستهلكها هذه الورقةُ في ثمانية
	 * مواضع (‏214 · 324 · 495 · 500 · 637 · 646 · 829 · 1092). وDavinciWoo لا
	 * يوفّرها، فبدونها تسقط تلك الثمانيةُ إلى حجم المتصفّح الافتراضيّ **صامتةً**
	 * — لا خطأَ في الطرفيّة ولا في وحدة التحكّم، فقط نصٌّ بحجمٍ خاطئ.
	 *   تُربط بسلّم `tokens.css` نفسِه فلا يبقى سلّمان.
	 */
	--font-size-xs:   var(--fs-xs);    /* 12 */
	--font-size-sm:   var(--fs-sm);    /* 14 */
	--font-size-base: var(--fs-base);  /* 16 */
	--font-size-md:   var(--fs-base);  /* 16 — لا مقابلَ دقيقاً في سلّمنا */
}

/* --------------------------------------------------------------------------
   ❷ النصّ والاتجاه
   -------------------------------------------------------------------------- */

body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--font-main);
	color: var(--color-text-main);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--neutral-900);
}

/*
 * الأرقامُ لاتينيّةٌ في الواجهة العربيّة — وهو ما يفعله المتجرُ السعوديّ
 * فعلاً: السعرُ والكميّةُ ورقمُ الطلب تُقرأ لاتينيّةً حتى في نصٍّ عربيّ.
 * و`font-feature-settings` هنا يمنع الأشكالَ البديلة لا يبدّل المحارف.
 */
body {
	font-feature-settings: 'lnum' 1;
	background: var(--color-bg);
}

/* --------------------------------------------------------------------------
   ❸ الروابط والأزرار
   -------------------------------------------------------------------------- */

a {
	color: var(--color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

/*
 * حلقةُ البؤرة: لونان لا لونٌ واحد.
 *
 * حلقةٌ بلونٍ واحد تختفي على خلفيّةٍ من لونها — والأزرارُ هنا تيلٌ داكن.
 * فالحلقةُ الخارجيّةُ بيضاء والداخليّةُ تيل، فتظهر إحداهما على أيّ سطح.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--neutral-0);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--teal-600);
	border-radius: 4px;
}

.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--color-action);
	color: var(--neutral-0);
	border-radius: var(--border-round-button);
	font-family: var(--font-main);
	font-weight: 700;
	line-height: 1.6;
	transition: background 180ms ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--color-action-hover, var(--teal-700));
	color: var(--neutral-0);
}

/* زرُّ الشراء الرئيس — نفسُ اللون، وثِقلٌ بصريٌّ أعلى. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--color-action);
	color: var(--neutral-0);
	box-shadow: var(--shadow-brand, 0 6px 18px rgba(11, 133, 113, .24));
}

/* --------------------------------------------------------------------------
   ❹ الترويسة والشعار
   -------------------------------------------------------------------------- */

.ggen-logo .custom-logo {
	block-size: auto;
	inline-size: auto;
	max-inline-size: 100%;
	/* ⟵ `max-block-size` في القسم ❾ وحدَه: 52px هنا كان ميّتاً أمام 64px هناك. */
}

.site-header {
	background: var(--color-surface);
	border-block-end: 1px solid var(--color-border);
}

.main-navigation a {
	font-family: var(--font-main);
	font-weight: 500;
	color: var(--neutral-800);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--color-link);
}

/* --------------------------------------------------------------------------
   ❺ مكوّناتٌ ترسمها الإضافةُ الإلزاميّة
   --------------------------------------------------------------------------
   الترميزُ يأتي من `mu-plugins/ggen-store-layer/` — يعيش هناك لأنّه سلوكٌ
   لا عرض. وأنماطُه هنا لأنّ العرضَ يخصّ القالب: قالبٌ آخر يريد شكلاً آخر
   لنفس الشارة.
   -------------------------------------------------------------------------- */

/* شارةُ نفاد المخزون — الزاويةُ المقابلةُ لشارة التخفيض كي لا تتغطّيا. */
.ggen-badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	inset-inline-end: auto;
	z-index: 3;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--harvest);
	color: var(--neutral-0);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: 1.9;
}

.ggen-badge--oos {
	inset-inline-start: auto;
	inset-inline-end: 12px;
	background: var(--error);
}

/*
 * وحاويةُ الصورة يجب أن تكون مرجعَ التموضع، وإلّا نُسبت الشارةُ إلى أوّل
 * سلفٍ مُموضَعٍ أعلى — أي إلى الصفحة أحياناً.
 */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product {
	position: relative;
}

/* فاصلُ نطاق السعر — يمنع كسرَ السطر قبل الشَّرطة (انظر `ggen_price_range()`). */
.ggen-price-range__sep {
	white-space: nowrap;
}

/* المفضّلةُ الفارغة — مخرجٌ له وجهة. */
.ggen-wishlist-empty {
	display: grid;
	justify-items: center;
	gap: 1rem;
	text-align: center;
	/* ⟵ `margin-block` في آخر الملفّ بتوكنات المسافات: 2rem/3rem هنا كان ميّتاً. */
}

.ggen-wishlist-empty__lede {
	margin: 0;
	max-inline-size: 46ch;
	color: var(--color-text-muted);
}

.ggen-wishlist-empty__actions {
	margin: 0;
}

.ggen-wishlist-empty__button {
	display: inline-block;
	padding: 0.85rem 2rem;
	border-radius: var(--border-round-button);
	background: var(--color-action);
	color: var(--neutral-0);
	font-weight: 700;
	text-decoration: none;
}

.ggen-wishlist-empty__button:hover {
	background: var(--teal-700);
	color: var(--neutral-0);
}

/* --------------------------------------------------------------------------
   ❻ ووكومرس — الأسعارُ والمخزون
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--neutral-900);
	font-weight: 700;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--color-text-muted);
	font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
	color: var(--teal-700);
	text-decoration: none;
}

.woocommerce div.product .stock.in-stock {
	color: var(--success);
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--error);
}

/*
 * شارةُ التخفيض التي يرسمها `ggen_sale_percentage()` تحمل الصنفين معاً
 * (`onsale ggen-badge`)، فتُصفَّر قواعدُ ووكومرس المتضاربة على الموضع.
 */
.woocommerce span.onsale {
	background: var(--harvest);
	color: var(--neutral-0);
	min-block-size: 0;
	min-inline-size: 0;
	padding: 0.2rem 0.7rem;
	line-height: 1.9;
	font-weight: 700;
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   ❼ صفحةُ المنتج — ما أُعيد من كتلٍ إلى خطّافات
   -------------------------------------------------------------------------- */

.ggen-vat-note {
	margin-block: 0 1rem;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.ggen-enquiry {
	margin-block: 1rem 0;
}

.ggen-enquiry__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--teal-600);
	border-radius: var(--border-round-button);
	color: var(--teal-700);
	font-weight: 700;
	text-decoration: none;
	transition: background 180ms ease, color 180ms ease;
}

.ggen-enquiry__link:hover {
	background: var(--teal-600);
	color: var(--neutral-0);
}

/*
 * رابطُ التخطّي: خارجَ الشاشة حتى يُبأَّر، لا `display:none`.
 *
 * `display:none` و`visibility:hidden` يُخرجانه من ترتيب التبويب أصلاً —
 * أي أنّ الرابطَ يوجد في الترميز ولا يبلغه المفتاح أبداً. والإزاحةُ تُبقيه
 * في الترتيب وتُخفيه عن العين.
 */
.ggen-skip-link,
.skip-link.screen-reader-text {
	position: absolute;
	inset-inline-start: -9999px;
	inset-block-start: 0;
	z-index: 999;
	padding: 0.8rem 1.4rem;
	background: var(--teal-800);
	color: var(--neutral-0);
	font-weight: 700;
	text-decoration: none;
}

.ggen-skip-link:focus,
.skip-link.screen-reader-text:focus {
	inset-inline-start: 0;
	color: var(--neutral-0);
}

/* --------------------------------------------------------------------------
   ❽ أزرارُ المحرِّر — وهي ما تراه الرئيسيةُ كلُّها
   --------------------------------------------------------------------------
   محتوى الرئيسية والصفحات مبنيٌّ بكتل، فأزرارُها `.wp-block-button__link`
   لا `.button`. وقِيس أنّ لونها كان `rgb(50,55,60)` — رماديٌّ داكن من
   افتراضات المحرِّر، لا لونَ الهويّة. أي أنّ كلَّ دعوةٍ للفعل في الموقع
   كانت خارجَ العلامة.
   -------------------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button {
	background-color: var(--color-action);
	color: var(--neutral-0);
	border-radius: var(--border-round-button);
	font-family: var(--font-main);
	font-weight: 700;
	padding-block: 0.85rem;
	padding-inline: 1.8rem;
	transition: background-color 180ms ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--teal-700);
	color: var(--neutral-0);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--teal-600);
	color: var(--teal-700);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--teal-600);
	color: var(--neutral-0);
}

/* --------------------------------------------------------------------------
   ❾ الشعار — 155 بكسلاً لا تكفي علامةً في ترويسةٍ عرضُها 1440
   -------------------------------------------------------------------------- */

.ggen-logo .custom-logo {
	max-block-size: 64px;
}

@media (max-width: 782px) {
	.ggen-logo .custom-logo {
		max-block-size: 44px;
	}
}

/* --------------------------------------------------------------------------
   ❿ الودجاتُ الجانبيّة — سطحٌ فاتحٌ لا صندوقٌ أسود
   --------------------------------------------------------------------------
   الأبُ يرسم الودجات على خلفيّةٍ داكنة. وهي في `/shop/` أداةُ تسوّقٍ
   (شجرةُ الأقسام والتصفية)، فالسوادُ يجعلها تُقرأ لوحةَ تحكّمٍ لا قائمةَ
   أقسام — ويكسر الإيقاعَ مع بطاقات المنتج البيضاء إلى جوارها.
   -------------------------------------------------------------------------- */

.widget-area .widget,
#secondary .widget {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	color: var(--color-text);
}

.widget-area .widget-title,
#secondary .widget-title {
	color: var(--neutral-900);
	border-block-end: 1px solid var(--color-border);
}

.widget-area .widget a,
#secondary .widget a {
	color: var(--neutral-800);
}

.widget-area .widget a:hover,
#secondary .widget a:hover {
	color: var(--color-link);
}

/* --------------------------------------------------------------------------
   ⓫ إيقاعُ أقسام الرئيسية
   -------------------------------------------------------------------------- */

.ggen-home-hero,
.ggen-home-trust,
.ggen-home-cats,
.ggen-home-new,
.ggen-home-why,
.ggen-home-cta {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.ggen-home-hero {
	background: var(--ggen-gradient-soft);
	border-radius: 20px;
	padding-inline: clamp(1.5rem, 4vw, 3.5rem);
}

.ggen-home-hero h1 {
	max-inline-size: 20ch;
	line-height: 1.25;
}

.ggen-home-hero p {
	max-inline-size: 60ch;
	color: var(--color-text-muted);
}

.ggen-home-trust {
	border-block: 1px solid var(--color-border);
}

.ggen-home-trust h3 {
	margin-block-end: 0.35rem;
	font-size: var(--font-size-base);
}

.ggen-home-trust p {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.ggen-home-cats .wp-block-button__link {
	display: block;
	inline-size: 100%;
	text-align: center;
}

.ggen-home-why,
.ggen-home-cta {
	text-align: center;
}

.ggen-home-why p,
.ggen-home-cta p {
	max-inline-size: 62ch;
	margin-inline: auto;
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   ⓬ التذييل — وإصلاحُ تباينٍ صنعتُه أنا
   --------------------------------------------------------------------------
   عطلان قِيسا معاً:

   ❶ `.site-footer { background: #000 }` **مثبَّتٌ** في ورقة الأب، فيتجاهل
      `--footer-top-background` تماماً. أي أنّ إعادةَ تعريف المتغيّر لا
      تصله — وهو استثناءٌ في قالبٍ بُني على المتغيّرات.

   ❷ وعناوينُ ودجات التذييل كانت `rgb(45,45,45)` على أسود — تباينٌ نحو
      **1.1:1** حيث يطلب WCAG AA أربعةً ونصفاً. والمصدرُ **قاعدتي أنا**:
      `h1..h6 { color: var(--neutral-900) }` كُتبت للمحتوى وطالت التذييل.

   ⟵ والدرس: قاعدةٌ عامّةٌ على العناوين تصيب كلَّ عنوانٍ في المستند، ومنها
     ما يعيش على سطحٍ داكن. فالتلوينُ العامُّ يُقيَّد بسياق المحتوى.
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--teal-800);
	color: var(--teal-50);
}

.site-footer .site-footer-bottom {
	background: var(--teal-900);
	color: var(--teal-100);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
	color: var(--neutral-0);
	border-block-end-color: rgba(255, 255, 255, .18);
}

.site-footer p,
.site-footer li,
.site-footer .ggen-legal {
	color: var(--teal-50);
}

.site-footer a {
	color: var(--teal-100);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--neutral-0);
	text-decoration: underline;
}

/* والسطرُ النظاميّ يُقرأ سطراً واحداً متّصلاً. */
.site-info .ggen-copy {
	display: inline;
}

.site-info .ggen-legal {
	display: inline;
	opacity: .85;
}

/* --------------------------------------------------------------------------
   ⓭ بطاقةُ المنتج — سطحٌ لا فراغ
   --------------------------------------------------------------------------
   قِيس أنّ البطاقة `background: transparent` و`padding: 0` — أي أنّ الصورةَ
   والاسمَ والسعرَ والزرَّ تطفو بلا حدٍّ يجمعها. فتُقرأ الشبكةُ قائمةً لا
   شبكةَ بطاقات، ويصعب على العين فصلُ منتجٍ عن جاره.

   والقاعدةُ تشمل المسلكَين: كتلةُ `wc-block-grid` (الرئيسية) والحلقةُ
   الكلاسيكيّة `ul.products li.product` (‏`/shop/` والأقسام).
   -------------------------------------------------------------------------- */

.wc-block-grid__product,
.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.9rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.wc-block-grid__product:hover,
.woocommerce ul.products li.product:hover {
	border-color: var(--teal-300);
	box-shadow: 0 8px 24px rgba(7, 80, 67, .10);
}

/* الصورةُ مربّعٌ يحتوي لا يقصّ — الصورُ من المورّد بنسبٍ مختلفة. */
.wc-block-grid__product-image img,
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	inline-size: 100%;
	block-size: auto;
	background: var(--neutral-50);
	border-radius: 10px;
}

/* عنوانٌ بسطرين لا أكثر — وإلّا اختلفت ارتفاعاتُ البطاقات في الصفّ. */
.wc-block-grid__product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-block-size: 2.9em;
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: 500;
	line-height: 1.45;
	color: var(--neutral-900);
}

.wc-block-grid__product-price,
.woocommerce ul.products li.product .price {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--neutral-900);
}

/* الزرُّ آخرَ البطاقة دائماً، مهما طال العنوان. */
.wc-block-grid__product-add-to-cart,
.woocommerce ul.products li.product .button {
	margin-block-start: auto;
	inline-size: 100%;
	text-align: center;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link {
	inline-size: 100%;
}

/* --------------------------------------------------------------------------
   ⓮ الترويسة — 194 بكسلاً لشعارٍ وحقلِ بحث
   -------------------------------------------------------------------------- */

.site-header .top-header,
.site-header > .header-top {
	padding-block: 0.6rem;
}

@media (min-width: 783px) {
	.site-header {
		padding-block: 0.4rem;
	}
}

/* --------------------------------------------------------------------------
   ⓯ أهدافُ اللمس في التذييل — 15 بكسلاً حيث يطلب المعيار 24
   --------------------------------------------------------------------------
   قِيس على 390px: واحدٌ وعشرون رابطاً ارتفاعُ منطقةِ لمسه **15 بكسلاً**،
   كلُّها روابطُ قوائم التذييل («المتجر» · «التقنية والطاقة» · …).
   و WCAG 2.5.8 (مستوى AA في 2.2) يطلب 24×24 على الأقلّ.

   وأثرُه ليس نظريّاً: التذييلُ هو موضعُ السياسات وتتبّعِ الطلب — أي ما
   يُطلب عند القلق لا عند التصفّح، وغالباً بإبهامٍ واحدٍ في يدٍ مشغولة.

   ⟵ والحشوُ رأسيٌّ لا `min-height`: الأخيرةُ تكبّر الصندوقَ ولا تكبّر
     **منطقةَ الرابط** إن كان `inline`. والحشوُ على `display:block` يكبّر
     الاثنين معاً.
   -------------------------------------------------------------------------- */

.site-footer .menu li a,
.site-footer .widget ul li a,
.site-footer nav a {
	display: block;
	padding-block: 0.45rem;
	line-height: 1.5;
}

.site-footer .widget ul li {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   ⓰ الترويسة على الجوّال — 263 بكسلاً قبل أوّل كلمة
   --------------------------------------------------------------------------
   قِيس التركيب على 390px:

       .top-header-part               20
       .bottom-header-part           185   ← الشعارُ والبحثُ مكدَّسان
       .navigation-menus              57
       ────────────────────────────────
                                     263   = 31٪ من شاشةِ 844

   والزائرُ يصل من إعلانٍ أو بحثٍ يريد منتجاً، فيدفع ثلثَ الشاشة ثمنَ
   ترويسةٍ قبل أن يرى شيئاً.

   ⟵ والعلاجُ صفٌّ واحد: الشعارُ والبحثُ متجاوران بدل أن يتكدّسا. والبحثُ
     يأخذ ما بقي، فلا يُقصّ ولا يُزاح.
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	/*
	 * ⚠️ الصفُّ يقع على `.asterthemes-wrapper` لا على `.bottom-header-part`.
	 *
	 * كُتبت القاعدةُ أوّلاً على الأب، وقِيس أنّها طُبِّقت فعلاً
	 * (`display: flex`) ولم يتغيّر الارتفاع — لأنّ للأب ابناً واحداً
	 * (`.asterthemes-wrapper`) ارتفاعُه 164 من 185. فالتكديسُ داخله، وصفُّ
	 * الأب يصفّ عنصراً واحداً.
	 *
	 * ⟵ والدرس: `display:flex` طُبّق ونجح، والنتيجةُ لم تتغيّر. فتطبيقُ
	 *   القاعدة ليس دليلاً على أنّها في الموضع الصحيح.
	 */
	/*
	 * ── ترويسةُ الجوّال: ما جُرّب وما نجح ──────────────────────────────
	 *
	 * المحاولةُ الأولى: صفٌّ على `.bottom-header-part` — طُبِّق ولم يغيّر
	 * شيئاً (ابنٌ واحد). والثانية على `.asterthemes-wrapper` — كذلك.
	 * والثالثة على `.bottom-header-part-wrapper` بـ`order` — **زادت**
	 * الارتفاعَ إلى 270، لأنّ الأصنافَ التي رتّبتُها (`.header-icons` وما
	 * معها) لا وجود لها في ترميز الأب أصلاً، فبقي التكديسُ وأُضيف التفافٌ.
	 *
	 * ⟵ فأُسقطت إعادةُ التدفّق كلُّها. والمكسبُ المضمون هو الفراغ: ثلاثةُ
	 *   صفوفٍ ارتفاعُها الفعليّ 138 بكسلاً داخل حاويةٍ 180 — أي 42 بكسلاً
	 *   فراغاً، ومعها 20 لشريطٍ علويّ خالٍ و48 لصفّ القائمة.
	 *
	 * ⚠️ ولا يُخفى البحث: خمسةُ آلافِ منتجٍ تجعل الحقلَ أهمَّ من ارتفاعٍ
	 *   يُوفَّر. فيُشذَّب حولَه لا يُحذف.
	 */
	.bottom-header-part-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.35rem;
		inline-size: 100%;
	}

	.bottom-header-part-wrapper > * {
		margin-block: 0 !important;
	}

	.bottom-header-part {
		padding-block: 0.35rem;
	}

	/* ⟵ كان هنا حارسٌ للشريط العلويّ الخالي، **ميّتٌ من ثلاثة وجوه**:
	 *   ❶ بُني على `:empty` وهي لا تطابق حاويةً فيها مسافات — والمسافةُ
	 *     محتوى عند المواصفة. قِيس: `matches(':empty')` = false.
	 *   ❷ وحُبس في `@media (max-width: 782px)` فلم يبلغ سطحَ المكتب.
	 *   ❸ ورفيقُه `padding-block` بأسبقيّة (0,1,0) كان يخسر أمام (0,3,1)
	 *     من الأب، فبقي الشريطُ 20px بدل 8.
	 * نُقل الإصلاحُ إلى القسم ㉘ بأسبقيّةٍ مقيسةٍ وخارجَ أيّ استعلام. */

	.navigation-menus {
		padding-block: 0.35rem;
	}
}

/* --------------------------------------------------------------------------
   ⓱ حجمُ العنوان على الجوّال
   --------------------------------------------------------------------------
   `--font-size-xl` عند الأب `clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem)`،
   فيعطي 42 بكسلاً على 390 — عنوانٌ يأخذ ثلاثةَ أسطرٍ من الشاشة. والحدُّ
   الأدنى في `clamp` لا يهبط مع العرض لأنّه ثابت.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	/*
	 * ⚠️ `!important` هنا ضرورةٌ لا كسل.
	 *
	 * العنوانُ يحمل `has-x-large-font-size`، وووردبريس يُصدر لأصناف أحجام
	 * الخطّ الجاهزة قاعدةً بـ`!important` في `global-styles-inline-css`.
	 * فلا تغلبها قاعدةٌ بلا `!important` مهما بلغ تخصّصُها — وهذا سلوكُ
	 * النواة لا خيارُنا.
	 *
	 * وقِيس قبل الإضافة: 42 بكسلاً على شاشةِ 390، أي عنوانٌ يأخذ ثلاثةَ
	 * أسطر قبل أن يُقرأ سطرٌ من الوصف.
	 */
	.ggen-home-hero h1 {
		font-size: clamp(1.6rem, 6vw, 2.1rem) !important;
		line-height: 1.3;
	}

	.ggen-home-hero {
		border-radius: 14px;
		padding-inline: 1.1rem;
	}
}

/* --------------------------------------------------------------------------
   ⓲ هرميّةُ الأزرار في البطاقة — دعوتان متساويتان لا دعوةَ فيهما
   --------------------------------------------------------------------------
   قِيس على `/shop/`: كلُّ بطاقةٍ تحمل زرَّين بعرضٍ واحدٍ ولونٍ واحد —
   «اختر الخيارات» (الفعلُ المقصود) و«معاينة سريعة» (‏`.yith-wcqv-button`،
   أربعةٌ وعشرون في الصفحة). وحين يتساوى ثِقلُ زرَّين تسقط الهرميّة: العينُ
   لا تعرف أيَّهما الفعلُ الأساسيّ، فتتردّد أو تختار الأقربَ لا الأصحّ.

   ⟵ والمعاينةُ تبقى — هي مفيدةٌ في كتالوجٍ من خمسة آلاف منتج — لكن بوزنٍ
     ثانويّ: نصٌّ بحدٍّ خفيف لا سطحٌ ملوّن. والفعلُ الأساسيّ وحده يحمل اللون.
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .button.yith-wcqv-button,
.yith-wcqv-button {
	background: transparent;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	font-weight: 500;
	font-size: var(--font-size-sm);
	padding-block: 0.5rem;
	box-shadow: none;
}

.woocommerce ul.products li.product .button.yith-wcqv-button:hover,
.yith-wcqv-button:hover,
.yith-wcqv-button:focus-visible {
	background: var(--neutral-50);
	border-color: var(--teal-300);
	color: var(--teal-700);
}

/* والفعلُ الأساسيّ يبقى الأبرز، وفوقه دائماً. */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_simple {
	order: 8;
}

.woocommerce ul.products li.product .yith-wcqv-button {
	order: 9;
}

/* --------------------------------------------------------------------------
   ⓳ ما بقي من أهداف اللمس
   --------------------------------------------------------------------------
   بعد إصلاح قوائم التذييل بقيت ثلاثةٌ حقيقيّة، قِيست على 390:

       أيقونةُ الحساب في الترويسة   18×20
       رابطُ البريد في التذييل      109×18
       رابطُ الواتساب في التذييل    167×18

   والباقي ليس هدفاً: رابطُ التخطّي 1×1 يكبر عند التبئير، وزرُّ إغلاق نافذة
   المعاينة داخل عنصرٍ مخفيّ، وأيقوناتُ التواصل 24×26 تمرّ أصلاً.

   ⟵ ورابطا التذييل نصّان في فقرة لا بندان في قائمة، فلا يصلحان
     `display:block` — تكسير الفقرة أسوأ من هدفٍ صغير. و`inline-block`
     بحشوٍ رأسيّ يكبّر منطقةَ اللمس ويُبقي النصَّ في سياقه.
   -------------------------------------------------------------------------- */

/*
 * وودجاتُ العمود الجانبيّ مثلُها: قِيس على `/shop/` **خمسةٌ وأربعون** هدفاً
 * دون 24 — أكثرُها روابطُ الأقسام التسعةُ والثلاثون. وهي أداةُ التنقّل
 * الأولى في المتجر على الجوّال، فصغرُها يصيب أكثرَ ما يُنقر.
 */
.widget-area .widget li a,
#secondary .widget li a,
.widget-area .widget-title + ul a,
#secondary .product-categories a {
	display: block;
	padding-block: 0.4rem;
	line-height: 1.55;
}

.site-footer .widget p a,
.site-footer .textwidget a,
.site-footer a[href^="mailto:"],
.site-footer a[href*="wa.me"] {
	display: inline-block;
	padding-block: 0.3rem;
	line-height: 1.6;
}

/* أيقوناتُ الترويسة — مساحةُ لمسٍ لا حجمَ رسم. */
.user-account > a,
.header-cart > a,
.site-header .cart-contents,
.site-header .user-account a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
}

/* --------------------------------------------------------------------------
   ⓴ السلّة والدفع — تنسيقٌ لكتلٍ لا يمكن معاينتُها في المرآة
   --------------------------------------------------------------------------
   ⚠️ كتلتا السلّة والدفع تُرطَّبان في المتصفّح عبر Store API. والمرآةُ
   المحليّة بلا شبكة، فترسمهما **هياكلَ انتظارٍ رمادية** — أي أنّ الفحصَ
   البصريّ لا يبلغهما من هنا.

   فالقواعدُ التالية مكتوبةٌ على أصنافِ ووكومرس المعياريّة وحدها (وهي ثابتةٌ
   عبر الإصدارات)، ومحصورةٌ في اللون والحدّ ونصفِ القطر — لا في التخطيط.
   وتخطيطٌ يُكتب بلا معاينةٍ يُصلح ما لا يُرى ويكسر ما يُرى.
   -------------------------------------------------------------------------- */

.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--color-action);
	color: var(--neutral-0);
	border-radius: var(--border-round-button);
	font-family: var(--font-main);
	font-weight: 700;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--teal-700);
	color: var(--neutral-0);
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--neutral-900);
	font-weight: 700;
}

.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block {
	border-color: var(--color-border);
}

.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-address-form input {
	border-radius: 10px;
	border-color: var(--color-border);
	font-family: var(--font-main);
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
	border-color: var(--teal-600);
	outline: 2px solid var(--neutral-0);
	box-shadow: 0 0 0 3px var(--teal-300);
}

/* --------------------------------------------------------------------------
   ㉑ الطباعة في صفحات المحتوى — سطرٌ من 183 محرفاً
   --------------------------------------------------------------------------
   قِيس على `/terms/`: عرضُ الفقرة 1280 بكسلاً، أي **مئةٌ وثلاثةٌ وثمانون
   محرفاً في السطر**. والمدى المريح للقراءة 45–75. وعند هذا الطول تفقد
   العينُ سطرَها عند الرجوع — فتُعيد قراءةَ سطرٍ أو تقفز فوق آخر.

   وهذه صفحاتُ الشروط والخصوصية والاسترجاع: نصٌّ يُقرأ عند القلق أو قبل
   الشراء، لا يُتصفَّح. فطولُ السطر فيها كلفةٌ لا ذوق.

   ── وثلاثةُ أشياءَ تُضبط معاً ──────────────────────────────────────────

   ❶ **المدى** إلى 72 محرفاً.
   ❷ **ارتفاعُ السطر** من 1.5 إلى 1.8: العربيّةُ ذاتُ صواعدَ وهوابطَ أطول
      (ا ل ك ط · ج ح خ ع غ)، فتتلامس أسطرُها عند الارتفاع الذي يكفي
      اللاتينيّة.
   ❸ **إيقاعُ العناوين**: `margin-top` كان **صفراً**، فتلتصق الأقسامُ
      ببعضها ويصير المستندُ كتلةً واحدة.

   ⟵ والاستثناءُ `:not(.home)`: الرئيسيةُ صفحةٌ كذلك، وأقسامُها مصمَّمةٌ
     بعرضٍ كامل. وحصرُها في 72 محرفاً يكسر شبكتَها.
   -------------------------------------------------------------------------- */

body.page:not(.home) .entry-content > p,
body.page:not(.home) .entry-content > ul,
body.page:not(.home) .entry-content > ol,
body.page:not(.home) .entry-content > h2,
body.page:not(.home) .entry-content > h3,
body.page:not(.home) .entry-content > h4,
/*
 * ⚠️ وصنفُ الكتلة يُذكر صراحةً للعناوين.
 *
 * قِيس أنّ `…> h2` **يطابق** العنوانَ (`matches()` تُرجع true) ولا تسري
 * قيمتُه: `max-inline-size` المحسوبة 1256.62 لا 496. فقاعدةٌ أخرى تغلبه —
 * والعناوينُ وحدها، لأنّها تحمل `wp-block-heading` وتصيبها قواعدُ الأنماط
 * العامّة للنواة، بينما الفقراتُ سرت عليها القاعدةُ نفسُها.
 *
 * ⟵ والعلاجُ تخصّصٌ لا `!important`: إضافةُ الصنف ترفع الوزنَ درجةً
 *   وتكفي. و`!important` يُغلق بابَ أيّ تعديلٍ لاحقٍ ولا يُلجأ إليه إلّا
 *   حين تستعمله النواةُ نفسُها (كما في أحجام الخطّ الجاهزة أعلاه).
 */
body.page:not(.home) .entry-content > h2.wp-block-heading,
body.page:not(.home) .entry-content > h3.wp-block-heading,
body.page:not(.home) .entry-content > h4.wp-block-heading,
body.page:not(.home) .entry-content > blockquote,
.woocommerce-Tabs-panel > p,
.woocommerce-Tabs-panel > ul,
.woocommerce-Tabs-panel > ol {
	/*
	 * ⚠️ طولٌ ثابتٌ لا `ch` — وهذا تصحيحُ خطأٍ لي.
	 *
	 * كُتبت القاعدةُ أوّلاً `max-inline-size: 62ch`، فقِيس أنّ الفقرةَ صارت
	 * 496 بكسلاً والعنوانَ **1257** — بنفس القاعدة. والسببُ أنّ `ch` تُحسب
	 * بعرض المحرف «0» في خطّ **العنصر نفسه**: الفقرةُ 16 بكسلاً والعنوانُ
	 * 36، فيعطي الرقمُ الواحدُ عرضين مختلفين.
	 *
	 * ⟵ **وحدةٌ تقيس النصَّ بنفسه لا تصلح لمحاذاة عمود.** والعمودُ يُقاس
	 *   بطولٍ ثابتٍ يشترك فيه الجميع.
	 *
	 * و31rem ≈ 496 بكسلاً ≈ 71 محرفاً عربيّاً على خطّ المتن — قِيست بعد
	 * المعايرة لا حُسبت.
	 */
	max-inline-size: 31rem;
	margin-inline: auto;
}

body.page:not(.home) .entry-content p,
body.page:not(.home) .entry-content li,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li {
	line-height: 1.85;
}

body.page:not(.home) .entry-content h2,
.woocommerce-Tabs-panel h2 {
	margin-block: 2.6rem 0.8rem;
}

body.page:not(.home) .entry-content h3,
.woocommerce-Tabs-panel h3 {
	margin-block: 2rem 0.6rem;
}

body.page:not(.home) .entry-content li {
	margin-block-end: 0.45rem;
}

/*
 * وفواصلُ الأقسام: خطٌّ خفيفٌ فوق العنوان الرئيس يفصل بصريّاً بلا ضجيج.
 * ⟵ ولا يُوضع على أوّل عنوانٍ في الصفحة: خطٌّ تحت رأس الصفحة مباشرةً
 *   يقرأ حدّاً مكرَّراً.
 */
body.page:not(.home) .entry-content h2 + p {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   ㉒ حلقةُ التبئير — تصريحٌ لا يُقاس برمجيّاً
   --------------------------------------------------------------------------
   ⚠️ `element.focus()` من سكربتٍ **لا يُطلق `:focus-visible`** في كروم:
   المحدِّدُ مشروطٌ بالتفاعل (لوحةُ مفاتيح لا نقر ولا استدعاء برمجيّ). فأيُّ
   قياسٍ يستدعي `focus()` ثم يقرأ `outline` يصف قاعدةً أخرى — وهي مصيدةٌ
   مسجَّلةٌ في هذا المشروع.

   فالقاعدةُ تُكتب بعنايةٍ ولا يُدّعى قياسُها: حلقتان — بيضاءُ ملاصقة
   وتيلٌ حولها — كي تظهر إحداهما على أيّ سطح، فاتحاً كان أو داكناً.
   -------------------------------------------------------------------------- */

.site-footer :where(a, button):focus-visible {
	outline: 2px solid var(--teal-900);
	box-shadow: 0 0 0 4px var(--neutral-0);
}

/* --------------------------------------------------------------------------
   ㉓ حالةُ «لا نتائج»
   -------------------------------------------------------------------------- */

.ggen-empty {
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	max-inline-size: 34rem;
	margin: 3rem auto 4rem;
	padding: 2.2rem 1.6rem;
	background: var(--ggen-gradient-soft);
	border-radius: var(--radius-card);
	text-align: center;
}

.ggen-empty__title {
	margin: 0;
	font-size: var(--font-size-md);
	color: var(--neutral-900);
}

.ggen-empty__lede {
	margin: 0;
	color: var(--color-text-muted);
	line-height: 1.8;
}

.ggen-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem 1.2rem;
	margin: 0.4rem 0 0;
}

.ggen-empty__button {
	display: inline-block;
	padding: 0.8rem 1.8rem;
	border-radius: var(--border-round-button);
	background: var(--color-action);
	color: var(--neutral-0);
	font-weight: 700;
	text-decoration: none;
}

.ggen-empty__button:hover {
	background: var(--teal-700);
	color: var(--neutral-0);
}

.ggen-empty__link {
	display: inline-block;
	padding-block: 0.5rem;
	color: var(--color-link);
	font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────
   ㉔ صفُّ الأقسام الفرعيّة — طريقٌ داخل تسعمئةِ منتج

   قِيس على قسم «أنظمة الري»: **910 نتيجة**، و**صفرُ** رابطٍ إلى أبنائه
   الأربعة في متن الصفحة. والسبيلُ الوحيد إليها ودجةٌ جانبيّة فيها 41
   عنصراً بارتفاع 2028 بكسل.

   والقرصُ يُرسم **نصّاً وعدداً بلا صورة**: صورةُ قسمٍ تعني طلباً خارجيّاً
   إلى `alicdn` لكلّ قسمٍ فوق كلّ صفحة — وهو ثمنٌ لا يشتري تمييزاً، لأنّ
   صورَ الأقسام في هذا المتجر صورُ منتجاتٍ مقتطعة تتشابه.

   `flex-wrap` لا شبكةٌ ذاتُ أعمدة: عددُ الأبناء يتراوح بين اثنين وعشرة،
   والشبكةُ الثابتة تترك فجوةً عند الاثنين وتضغط عند العشرة.
   ───────────────────────────────────────────────────────────────────── */

.ggen-subcats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.9rem;
	margin-block: 0.4rem 1.6rem;
}

.ggen-subcats__label {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--neutral-600, #6A6D6B);
}

.ggen-subcats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* `!important` على المحاذاة: إضافةُ RTL تفرض `text-align:right` على كلّ
   `ul li` في الموقع بلا استثناء — قِيست، وهي السبب الوحيد. */
.ggen-subcats__list li {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center !important;
}

.ggen-subcats__list li::before,
.ggen-subcats__list li::marker {
	content: none;
}

/* الحدُّ الأدنى 2.25rem ارتفاعاً: معيارُ 2.5.8 يطلب 24×24 بكسل هدفاً،
   وقرصٌ نصّيٌّ بلا حشوٍ رأسيّ يقف عند 19. */
.ggen-subcats__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.25rem;
	padding: 0.35rem 0.95rem;
	border: 1px solid var(--color-border, #DCDFDD);
	border-radius: 999px;
	background: var(--neutral-0);
	color: var(--color-text-main);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ggen-subcats__pill:hover,
.ggen-subcats__pill:focus-visible {
	border-color: var(--teal-600, #0B8571);
	background: var(--teal-50, #E8F7F4);
	color: var(--teal-800, #075043);
}

/* العددُ يُميَّز بالوزن والحجم لا باللون وحده: لونٌ أفتح على أبيضَ يهبط
   دون 4.5:1، والمعيارُ لا يستثني النصَّ الثانويّ. */
.ggen-subcats__count {
	padding-inline-start: 0.15rem;
	color: var(--neutral-600, #6A6D6B);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.ggen-subcats__pill:hover .ggen-subcats__count,
.ggen-subcats__pill:focus-visible .ggen-subcats__count {
	color: var(--teal-700, #096A5A);
}

/* ── الأقراص على الجوّال ────────────────────────────────────────────────
 *
 * قِيس على 390: الحاويةُ 350 والقرصُ 184–198 — أي قرصٌ واحدٌ في السطر
 * ونصفُ العرض فراغ، وأربعةُ أقسامٍ تكلّف **203 بكسلاً** من التمرير قبل
 * أوّل منتج.
 *
 * وقُدِّر عمودان بتصغير الخطّ، فيلزم ≤170 لكلّ قرص — وأطولُ اسمٍ يبلغه
 * ملتفّاً على سطرين. فالتفافُ الأسماء ثمنٌ أعلى ممّا يشتريه.
 *
 * ⟵ فالقرصُ يمتدّ عرضَ الحاوية والعددُ يُدفع إلى نهاية السطر: الفراغُ
 *   يُستعمَل، والصفُّ يُقرأ قائمةً — وهو ما هو عليه فعلاً في هذا العرض —
 *   والهدفُ يصير 350×44 بدل 190×36.
 */
@media (max-width: 560px) {
	.ggen-subcats {
		gap: 0.5rem;
	}

	.ggen-subcats__list {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0.4rem;
	}

	/* ⚠️ `align-items: stretch` تمطّ **أبناءَ** الحاوية المرنة — أي
	   عناصرَ `li` — لا أحفادَها. والقرصُ هو الرابطُ داخلَ `li`، فبقي
	   190 من 350 وقياسُ الارتفاع وحده بدا نجاحاً. فالعرضُ يُصرَّح عند
	   المستوى الذي يرسم. */
	.ggen-subcats__list li {
		width: 100%;
	}

	.ggen-subcats__pill {
		display: flex;
		width: 100%;
		justify-content: space-between;
		min-height: 2.75rem;
		padding-inline: 1rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   ㉕ ودجةُ الأقسام الجانبيّة — 41 عنصراً بلا «أين أنا»

   قِيس: `#secondary` بارتفاع 4327 بكسل في صفحةٍ ارتفاعُها 5314، وودجةُ
   الأقسام وحدها 2028. أي أنّ العمودَ الجانبيّ ينافس المحتوى لا يخدمه.

   والأسوأُ أنّ القسمَ الحاليّ لا يُميَّز: ووكومرس يضع `current-cat` في
   الترميز — قِيس، فهو موجود — ولا قاعدةَ تقرؤه. فالزائرُ داخلَ «أنظمة
   الري» يرى جدارَ روابطَ لا يقول أيُّها موضعُه.

   والعلاجُ **بصريٌّ لا هيكليّ**: لا يُقصّ العنصرُ ولا يُطوى — قصُّه يخفي
   طرقاً، وطيُّه يحتاج سكربتاً. بل يُضغط الإيقاعُ ويُصبغ الفرعُ الحاليّ.
   ───────────────────────────────────────────────────────────────────── */

/* ⚠️ الأسبقيّة هنا مقيسةٌ لا مُقدَّرة — وخصمانِ اثنان لا واحد:
 *
 * ❶ قاعدةُ الأب `.widget ul:not(.aster-storefront-tabs) li a` تزن
 *   **(0,2,3)**: `:not()` تمنح أسبقيّةَ وسيطها، فالصنفُ داخلها يُحسب.
 *
 * ❷ وقاعدتي أنا من جولةٍ سابقة: `.widget-area .widget a, #secondary
 *   .widget a`. وهي **قائمةُ محدِّدات**، والمتصفّح يزنها بأسبقيّة الفرع
 *   الذي طابق — أي **(1,1,2)** بمعرِّفِ `#secondary`، لا (0,2,2) بالفرع
 *   الأوّل. فأيُّ قاعدةٍ بلا معرِّفٍ تخسر أمامها مهما كثرت أصنافُها.
 *
 * ولهذا يُذكر `#secondary` صراحةً في كلّ قاعدةٍ هنا. والعطلُ كان نصفَه
 * ظاهراً: الحشوُ والوزنُ والحدُّ طُبِّقت، واللونُ وحده بقي رماديّاً. */

#secondary .widget_product_categories ul,
.widget-area .widget_product_categories ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#secondary .widget_product_categories li,
.widget-area .widget_product_categories li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#secondary .widget_product_categories ul li a,
.widget-area .widget_product_categories ul li a {
	display: block;
	padding-block: 0.32rem;
	color: var(--color-text-main);
	font-size: 0.93rem;
	line-height: 1.5;
	text-decoration: none;
}

#secondary .widget_product_categories ul li a:hover,
#secondary .widget_product_categories ul li a:focus-visible,
.widget-area .widget_product_categories ul li a:hover,
.widget-area .widget_product_categories ul li a:focus-visible {
	color: var(--teal-700, #096A5A);
}

/* الأبناءُ يُزاحون من البداية المنطقيّة لا من اليسار: `padding-left`
   يزيح إلى الداخل في الإنجليزيّة وإلى الخارج في العربيّة. */
#secondary .widget_product_categories li ul.children,
.widget-area .widget_product_categories li ul.children {
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--neutral-100, #EDEFEE);
}

/* الفرعُ الذي يحوي الزائرَ: خطٌّ على الحافّة المنطقيّة وسطحٌ خفيف. */
#secondary .widget_product_categories li.current-cat > a,
.widget-area .widget_product_categories li.current-cat > a {
	margin-inline-start: -0.75rem;
	padding-inline-start: 0.55rem;
	border-inline-start: 3px solid var(--teal-600, #0B8571);
	background: var(--teal-50, #E8F7F4);
	color: var(--teal-800, #075043);
	font-weight: 700;
	/* الزوايا منطقيّةٌ لا اتّجاهيّة: `border-radius: 0 6px 6px 0` تُقوِّس
	   الحافّةَ الخطأ في العربيّة — الشريطُ على اليمين والتقويسُ عليه
	   كذلك. والخاصيّةُ المنطقيّة تصف «بدايةَ الكتلة» فتنعكس وحدها. */
	border-radius: 6px;
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

#secondary .widget_product_categories li.current-cat-parent > a,
#secondary .widget_product_categories li.current-cat-ancestor > a,
.widget-area .widget_product_categories li.current-cat-parent > a,
.widget-area .widget_product_categories li.current-cat-ancestor > a {
	font-weight: 700;
	color: var(--teal-800, #075043);
}

/* ─────────────────────────────────────────────────────────────────────────
   ㉖ صفحةُ المنتج — السعرُ بحجم نصِّ الوصف، والدعوةُ أقصرُ من حقلِ الكميّة

   قِيس على صفحة منتج، وعلى العرضين 1280 و390 بلا فرق:

     • العنوان **32** بكسلاً · السعر **14** — أي حجمُ المتن. وقاعدتُنا
       السابقة أعطته لوناً ووزناً ولم تعطه **حجماً**، فورث حجمَ الجسم.
       والسعرُ أهمُّ رقمٍ في الصفحة وأكثرُ ما يُبحث عنه بالعين.
     • زرُّ «أضف إلى السلة» **131×39**، وحقلُ الكميّة بجواره **58×44**.
       فالدعوةُ الأولى في الصفحة أقصرُ من الحقل الذي يسبقها — والصفُّ
       يُقرأ غيرَ مستوٍ قبل أن يُقرأ محتواه.

   والتحجيمُ يُقصَر على `.summary`: المنتجاتُ المشابهة تعيش داخل نفس
   `div.product`، فقاعدةٌ بلا هذا القيد تُكبّر أسعارَها كذلك وتنافس
   المنتجَ المعروض بنفسه.
   ───────────────────────────────────────────────────────────────────────── */

.woocommerce div.product .summary > .price,
.woocommerce div.product .entry-summary > .price {
	display: block;
	margin-block: 0.35rem 0.9rem;
	color: var(--teal-700, #096A5A);
	/* الحدُّ الأدنى 1.35rem لا 1.5: على 390 كان السعرُ 24 والعنوانُ
	   21.6 — أي أنّ الرقمَ يسبق اسمَ ما يُشترى. السعرُ يلي العنوانَ
	   لا يتقدّمه. */
	font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
	font-weight: 800;
	line-height: 1.25;
}

/* السعرُ القديم نسبةً من الجديد لا مقاساً ثابتاً: `em` تتبعه إن تغيّر
   `clamp` مع العرض، فتبقى النسبةُ بينهما واحدة على كلّ شاشة. */
.woocommerce div.product .summary > .price del,
.woocommerce div.product .entry-summary > .price del {
	margin-inline-end: 0.5rem;
	color: var(--color-text-muted);
	font-size: 0.6em;
	font-weight: 400;
}

.woocommerce div.product .summary > .price ins,
.woocommerce div.product .entry-summary > .price ins {
	color: inherit;
	text-decoration: none;
}

/* لاحقةُ «شامل الضريبة» تبقى نصَّ متنٍ: هي شرطٌ نظاميّ لا سعرٌ ثانٍ. */
.woocommerce div.product .summary > .price .woocommerce-price-suffix {
	color: var(--color-text-muted);
	font-size: 0.5em;
	font-weight: 400;
}

/* صفُّ الشراء: الزرُّ والحقلُ بارتفاعٍ واحد.
   و`min-width` لا `width`: النصُّ العربيّ والإنجليزيّ يختلفان طولاً،
   والعرضُ الثابت يقصّ أحدَهما. */
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: 3rem;
	box-sizing: border-box;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	min-width: 12rem;
	padding-inline: 1.75rem;
	font-size: 1rem;
}

@media (max-width: 480px) {
	/* الدعوةُ تأخذ ما بقي من السطر بعد حقل الكميّة — على 350 بكسلاً
	   يترك `min-width: 12rem` الزرَّ ثابتاً والفراغَ إلى جواره. */
	.woocommerce div.product form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* العنوانُ 32 بكسلاً على 350 يأخذ ثلاثةَ أسطر قبل أن يُرى السعر. */
	.woocommerce div.product .product_title {
		font-size: clamp(1.5rem, 5.5vw, 1.7rem);
		line-height: 1.35;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   ㉗ معرضُ المنتج على الجوّال — 686 بكسلاً قبل اسم المنتج

   قِيس على 390 (بالسكربتات، وFlexSlider مُهيّأ فعلاً):

     صورةٌ رئيسيّة 350 + شريطُ مصغّرات **336** = معرضٌ بارتفاع **686**.
     فالعنوان يبدأ عند **1050**، والسعرُ عند 1131، وزرُّ الشراء عند 1353.
     أي أنّ المشتري يمرّر ثلاثَ شاشاتٍ قبل أن يقرأ **اسم** ما ينظر إليه.

   والسببُ أنّ المصغّرات تُرصَف شبكةً تتبع نسبةَ الصورة الأصليّة: ستُّ
   صورٍ في صفّين، كلُّ مصغّرةٍ 168 بكسلاً — أي بحجم نصفِ الصورة الرئيسيّة.

   ⟵ فالمصغّراتُ تصير شريطاً أفقيّاً بمقاسٍ ثابت. وهذا هو النمطُ المألوف
     على الجوّال، والصورةُ الرئيسيّة **مِزلاجٌ** أصلاً — فالمصغّرةُ وسيلةُ
     تنقّلٍ ثانية لا عرضٌ ثانٍ للبضاعة.

   ⚠️ ولا تُمسّ نسختا سطح المكتب: هناك المعرضُ في عمودٍ بجوار الملخّص،
     فلا يزيح شيئاً عن الشاشة.

   ⚠️ ويبقى قصورٌ **سابقٌ** لووكومرس لا نصنعه ولا نُصلحه هنا: المصغّرةُ
     صورةٌ داخل `li` بلا `tabindex` ولا دور، فلا تُبلَغ بلوحة المفاتيح.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
	.woocommerce div.product .flex-control-thumbs {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.5rem;
		overflow-x: auto;
		margin: 0.6rem 0 0;
		padding: 0 0 0.3rem;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	/* `flex: 0 0` لا `width`: القاعدةُ الأصليّة تعطي `float` وعرضاً
	   بالنسبة المئوية، والانكماشُ المرن يُعيدها إلى صفٍّ متفاوت. */
	.woocommerce div.product .flex-control-thumbs li {
		flex: 0 0 4.5rem;
		float: none;
		width: auto;
		margin: 0;
		scroll-snap-align: start;
	}

	.woocommerce div.product .flex-control-thumbs li img {
		width: 100%;
		height: 4.5rem;
		border-radius: 8px;
		object-fit: cover;
		opacity: 0.6;
		transition: opacity 0.15s ease, box-shadow 0.15s ease;
	}

	.woocommerce div.product .flex-control-thumbs li img.flex-active {
		opacity: 1;
		box-shadow: 0 0 0 2px var(--teal-600, #0B8571);
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   ㉘ حصادُ تدقيقٍ متوازٍ لثمانية أسطح (2026-08-26)

   ستّةٌ وسبعون وكيلاً قاسوا ثمانيَ واجهاتٍ من المرآة، ثمّ فُنِّدت كلُّ
   نتيجةٍ خصميّاً: 45 نجت، 22 سقطت. وما يلي إصلاحُ ما نجا ممّا يُصلَح
   بالأنماط. وكلُّ بندٍ يحمل رقمَه المقيس — لا بندَ بلا رقم.
   ═════════════════════════════════════════════════════════════════════════ */

/* ❶ عنوانُ الصفحة وفتاتُ الخبز مُحاذَيان **يساراً** في صفحةٍ RTL.
 *
 * المقيس: بدايةُ النصّ تبعد عن حافّة البدء 1102px (المتجر) · 1088 (حسابي)
 * · 1087 (السلّة) · 1074 (من نحن) · 1047 (المفضّلة) · 979 (تواصل).
 * والفاعلُ `text-align: left` **فيزيائيّة** من كتلة `<style>` مضمَّنةٍ
 * يكتبها مخصِّصُ الأب بأسبقيّة (0,2,0).
 *
 * و`start` لا `right`: قاعدةٌ واحدةٌ تخدم العربيّةَ والإنجليزيّةَ معاً. */
.page-header .asterthemes-wrapper.page-header-inner {
	text-align: start;
}

/* ❷ شريطٌ أسودُ صرفٌ (#000) بعرض الصفحة وارتفاع 20px يعلو الشعار.
 *
 * المقيس بالبكسل: الصفوف 6→25 سوداءُ عبر العرض كلّه عند 1280، و0→19
 * عند 390 — أي أوّلُ عشرين بكسلاً من شاشة الجوّال. وحاويتُه فارغةٌ
 * تماماً: نصُّها صفرٌ بعد التشذيب، وابنُها بارتفاع 0.
 *
 * والأسودُ الصرفُ **ليس في اللوحة أصلاً** — أقتمُ محايدٍ فيها
 * `--neutral-950` (#1A1C1B).
 *
 * ⚠️ وكان لي هنا حارسٌ ميّتٌ **من وجهين**: بُني على `:empty` وهي لا
 *   تطابق حاويةً فيها سبعةٌ وثلاثون محرفَ مسافة (المسافةُ محتوى)، ثمّ
 *   حُبس في `@media (max-width: 782px)` فلا يبلغ سطحَ المكتب إطلاقاً.
 *   ⟵ حارسٌ لا يُقاس بعد كتابته ليس حارساً.
 *
 * فتُصفَّر الحشوةُ بأسبقيّة (0,3,1) — مساويةٍ لقاعدة الأب وbrand.css
 * لاحقٌ فيغلب — ويُلغى الشريطُ نفسُه. وإن عاد للحاوية محتوىً يوماً
 * فستنمو به طبيعيّاً، ولن تحمل سواداً. */
header.site-header .header-main-wrapper .top-header-part {
	min-height: 0;
	padding-block: 0;
}

header.site-header .header-main-wrapper .top-header-part::before {
	content: none;
}

/* ❸ شبكةُ المنتجات: بطاقاتٌ متلاصقةٌ بفجوةِ **صفر**، وتخرج **8px** عن
 *    عمود المحتوى على الجهتين.
 *
 * المقيس: كلُّ أقسام الصفحة على 20→1260، والشبكةُ على 12→1268
 * (`margin-inline: -8px`)، وحدودُ البطاقات متطابقةٌ عند 326/640/954 —
 * أي بلا فاصلٍ بينها. والبطاقةُ ذاتُ إطارٍ مرئيّ، فالانحرافُ يُرى.
 *
 * والسببُ أنّ إطارَ البطاقة الذي أضفتُه في القسم ⓭ صفّر مزرابَ ووكومرس
 * الشفّاف، وبقي الهامشُ السالبُ بلا مقابل. */
.wc-block-grid__products {
	margin-inline: 0;
	gap: var(--sp-5);
}

.wc-block-grid.has-4-columns .wc-block-grid__product {
	flex-basis: calc(25% - var(--sp-5) * 3 / 4);
	max-width: none;
}

.wc-block-grid.has-3-columns .wc-block-grid__product {
	flex-basis: calc(33.333% - var(--sp-5) * 2 / 3);
	max-width: none;
}

.wc-block-grid.has-4-columns .wc-block-grid__product,
.wc-block-grid.has-3-columns .wc-block-grid__product,
.wc-block-grid.has-2-columns .wc-block-grid__product {
	padding: var(--sp-3);
}

/* ❹ طباعةُ البطاقة مقلوبة: زرُّها **12px** — أصغرُ نصٍّ في الصفحة —
 *    والسعرُ فوقه 18.9px، وكلُّ أزرارِ الصفحة الأخرى 16px.
 *
 * والعنوانُ `rgb(0,0,0)` بدل لونِ اللوحة، و`-webkit-line-clamp: 2`
 * معطَّلٌ لأنّ `display: -webkit-box` خاسرٌ في التتالي (المحسوب
 * `flow-root`) — فيصير العنوانُ ثلاثةَ أسطرٍ ويُسقط زرَّه تحت صفّه. */
.wc-block-grid.has-4-columns:not(.alignwide):not(.alignfull) .wc-block-grid__product,
.wc-block-grid.has-3-columns:not(.alignwide):not(.alignfull) .wc-block-grid__product {
	font-size: var(--fs-base);
}

.wc-block-grid__product .wc-block-grid__product-title {
	display: -webkit-box !important;
	color: var(--color-text);
	font-size: var(--fs-sm) !important;
	padding-block: 0 !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ❺ سبعةٌ من أحدَ عشرَ زرّاً تحمل **خطَّ تسطيرِ الروابط**.
 *
 * `.entry-content a` من الأب بأسبقيّة (0,1,1) تغلب قاعدةَ ووردبريس
 * `:root :where(.wp-element-button, …)` — لأنّ `:where()` تُصفّر وزنَ
 * ما بداخلها فتهبط إلى (0,1,0). والأربعةُ الناجيةُ نجت بالمصادفة عبر
 * قاعدةِ ووكومرس (0,2,1).
 *
 * وتُصلَح بـ(0,2,1) — ويبقى `.entry-content a` مسطَّراً لروابط المتن،
 * وهو الصواب: الرابطُ في فقرةٍ يُميَّز بالتسطير، والزرُّ بشكله. */
.entry-content a.wp-block-button__link,
.entry-content a.wp-element-button,
.entry-content a.wp-block-button__link:hover,
.entry-content a.wp-element-button:hover,
.ggen-wishlist-empty a.ggen-wishlist-empty__button {
	text-decoration: none;
}

/* ❻ زرّا البطل جنباً إلى جنبٍ **بارتفاعين**: 51.19px و47.34px.
 *
 * فرقُ 3.85px على صفٍّ مركزيٍّ واحد يظهر انزياحاً على الحافّتين معاً.
 * والسببُ أنّ المفرَّغ يخسر أمام قاعدة `:where()` فيأخذ حشواً أقلّ،
 * ثمّ يضيف إطارَ 1px بدل 2px الأساسيّ فيُتلف بقيّةَ التعويض.
 *
 * والعلاجُ أن يحمل الممتلئُ إطاراً **شفّافاً** بنفس السماكة: فيتساوى
 * `border-box` حتماً مهما تغيّر الحشو. */
.entry-content .wp-block-button__link {
	border: 1px solid transparent;
	padding-block: 0.85rem;
}

.entry-content .is-style-outline > .wp-block-button__link {
	border-color: var(--color-action);
	padding-block: 0.85rem;
}

/* ❼ محورُ التذييل مكسورٌ بثلاث محاذيات في عمودٍ واحد.
 *
 * المقيس عند 1280: بدايةُ نصّ الرابط تبعد 62→127px عن بداية عنوانه،
 * والحافّةُ مسنّنةٌ (108/104 · 467/446 · 717/716). وعند 390 في RTL:
 * عنوانٌ عند x=25 ورابطُه عند x=365 — **274px تباعداً على شاشة 390**.
 *
 * وعناوينُ الودجات يفوز بها `footer#colophon .widget-title` بأسبقيّة
 * **(1,1,1)** — بمعرِّف — فقاعدةُ (0,2,0) في هذا الملفّ لا تبلغه أبداً.
 * ⟵ ومرّةً أخرى: قائمةُ محدِّداتٍ فيها `#id` تغلب كلَّ ما لا معرِّفَ فيه. */
/* ⚠️ والوزنُ هنا (1,1,2) لا (1,1,1) — والفرقُ ليس تجميلاً:
 *
 * الخصمُ قاعدةٌ في كتلة `<style>` **مضمَّنةٍ** يكتبها مخصِّصُ الأب، وفرعُها
 * المطابق `footer#colophon .widget-title` يزن (1,1,1) — أي **مثلَ** أوّلِ
 * صياغةٍ كتبتُها بالضبط. والتعادلُ يحسمه ترتيبُ المصدر، والمضمَّنةُ تلي
 * الرابطَ في المستند فتفوز.
 *
 * ⟵ فلا يكفي أن أُساويَ الخصم؛ يجب أن أتجاوزه. و`footer` نوعٌ إضافيّ
 *   يرفع العدّ الثالث فيحسم بلا `!important`.
 *
 * (وطريفٌ أنّ ورقةَ الأب نفسَها تقول `start` لنفس العنصر — فالمخصِّصُ
 *  يناقض قالبَه، والمضمَّنُ يغلب.) */
footer#colophon h4.widget-title,
footer#colophon .widget-title {
	text-align: start;
}

.site-footer .widget_nav_menu .menu,
.site-footer .widget ul li {
	text-align: start;
}

/* ❽ عناوينُ ودجات التذييل (H4) بحجم عناوين الأقسام (H2) ووزنِها:
 *    24px/700 للاثنين — بل أكبرُ من H3 في المتن (20px) بمستويين. */
.site-footer .widget-title,
.site-footer .widgettitle {
	font-size: var(--fs-lg);
}

/* ❾ قائمةُ الترتيب ترتدي لونَ **دعوةِ الفعل الأساسيّة** بنصف ارتفاعها.
 *
 * المقيس: خلفيّتُها `rgb(11,133,113)` — مطابقةٌ حرفاً بحرف لأربعةٍ
 * وعشرين زرَّ شراءٍ تحتها مباشرة — وارتفاعُها 24px مقابل 48px للزرّ.
 * أي أنّ ضابطَ فرزٍ يلبس ثوبَ الفعل الرئيسيّ ثمّ يعجز عن حمله. */
.woocommerce .woocommerce-ordering select.orderby {
	min-block-size: 44px;
	padding-inline: var(--sp-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font-weight: var(--fw-medium);
}

/* ❿ عمودا الدخول والتسجيل لا ينكسران عند الجوّال.
 *
 * المقيس عند 390: `flex-wrap: nowrap` يُبقيهما صفّاً واحداً بـ175px
 * لكلٍّ — الحقولُ 127×37، وفقرةُ الخصوصيّة **12 محرفاً في السطر** عبر
 * عشرة أسطر. وعند 1280 الفجوةُ بينهما **صفرٌ** بالضبط مع 49.6px فراغٍ
 * ميّتٍ في الطرف المقابل. */
.woocommerce-page #customer_login.u-columns.col2-set {
	gap: var(--sp-5);
}

.woocommerce-page #customer_login.u-columns.col2-set > .col-1,
.woocommerce-page #customer_login.u-columns.col2-set > .col-2 {
	flex: 1 1 0;
	width: auto;
	max-width: none;
}

/* ⓫ أسطرٌ فوق عتبة القراءة في صفحات المحتوى: أسوأُها **130 محرفاً**
 *    في 1130px («من نحن»)، و125 محرفاً في 819px («تواصل»).
 *
 * والمدى بـ`ch` هنا آمنٌ لأنّه على فقراتٍ متجانسةِ الحجم — بخلاف ما
 * وقع في القسم ㉑ حين طُبِّق على فقرةٍ وعنوانٍ معاً فأعطى عرضين. */
.ggen-contact-page p,
.ggen-form__hint,
.ggen-form__note,
.ggen-section p,
.ggen-why__lede {
	max-inline-size: 62ch;
}

/* ⓬ أنماطُ كتلٍ موسومةٌ في قاعدة البيانات وCSS الخاصُّ بها في قالبٍ
 *    **غيرِ نشط** (`ggen-storefront`) — صفرُ قواعدَ مطابقةٍ من 5,422.
 *
 * فـ«البطاقاتُ» عاريةٌ (خلفيّةٌ شفّافة، `0px none`، تقويسٌ 0، حشوٌ 0)،
 * و«اللوحةُ» تحتفظ بتقويسِ 20px وحشوِ 36px حول لا شيء، وقائمةُ التحقّق
 * نقاطٌ `disc` بدل علامةِ التحقّق، و«الزرّان الثانويّان» يُرسمان بلون
 * الزرّ الأساسيّ عينِه.
 *
 * ⟵ والدرسُ أنّ نمطَ الكتلة مسجَّلٌ في المنشور وأنماطُه في القالب:
 *   فتبديلُ القالب يترك الوسمَ حيّاً والشكلَ ميّتاً، بلا خطأٍ ولا أثر. */
.is-style-ggen-card {
	padding: var(--sp-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.is-style-ggen-panel {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-subtle);
}

.is-style-ggen-checklist {
	padding-inline-start: 0;
	list-style: none;
}

.is-style-ggen-checklist li {
	position: relative;
	padding-inline-start: var(--sp-6);
}

.is-style-ggen-checklist li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--teal-600);
	font-weight: var(--fw-bold);
}

.wp-block-button.is-style-ggen-secondary > .wp-block-button__link {
	border: 2px solid var(--color-action);
	background-color: transparent;
	color: var(--teal-700);
}

.wp-block-button.is-style-ggen-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-ggen-secondary > .wp-block-button__link:focus-visible {
	background-color: var(--teal-50);
	color: var(--teal-800);
}

/* ⓭ أحجامُ محرّر الكتل التي كانت تسقط لغياب متغيّراتها — والمتغيّراتُ
 *    عُرِّفت الآن في `tokens.css`، وهذه القواعدُ تستهلكها. */
.entry-content h1.has-display-font-size {
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--lh-heading);
}

.entry-content p.has-lg-font-size,
p.has-lg-font-size {
	font-size: var(--wp--preset--font-size--lg);
	line-height: var(--lh-body);
}

.has-brand-soft-gradient-background {
	background-image: var(--ggen-gradient-soft);
}

.has-brand-mist-background-color {
	background-color: var(--teal-50);
}

/* ⓮ ضابطا الترويسة الرئيسيّان دون 44×44.
 *
 * المقيس: زرُّ البحث 42.7×39.8 عند 1280 و38.5×35.9 عند 390، ومزلاجُ
 * القائمة 35×35 (يفوز به `#site-navigation button.menu-toggle` بأسبقيّة
 * (1,1,1) بلا منافس). وهذان ضابطا الترويسة كلِّها على الجوّال.
 *
 * (وأسماؤهما المقروءةُ تُصلَح في PHP لا هنا — راجع `inc/product.php`.) */
.woo-pro-search .search-button,
header .woocommerce-product-search button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
}

#site-navigation button.menu-toggle {
	inline-size: 44px;
	block-size: 44px;
}

/* ⓯ النصُّ الإرشاديُّ لحقل البحث مقصوصٌ في منتصف الكلمة ويجري تحت
 *    أيقونة العدسة: يحتاج 305px ويجد 244 عند 1280 (29 محرفاً من 36)
 *    و153 عند 390 (18 من 36) — فآخرُ المثال لا يُرسم أبداً. */
header .woocommerce-product-search .search-field {
	inline-size: 100%;
	min-inline-size: 16rem;
	padding-inline-end: 3rem;
}

@media (max-width: 600px) {
	header .woocommerce-product-search .search-field {
		min-inline-size: 0;
	}

	/* ⓰ ترويسةُ الجوّال 265px — 29٪ من الشاشة — وكلُّ عناصرها في عمودٍ
	 *    واحدٍ عرضُه 153 من 330، أي **177px (54٪) فراغٌ مهدور**.
	 *
	 * والمقيس يفسّر لماذا فشلت أربعُ محاولاتٍ سابقة: الحاويةُ
	 * `display: grid !important` بأسبقيّة (0,5,1) — فقاعدةُ
	 * `flex-direction: column` التي جرّبتُها لم تكن تُطبَّق أصلاً.
	 * ⟵ جرّبتُ أربعَ مرّاتٍ ولم أقس **مَن يملك التخطيط**. */
	header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part .bottom-header-part-wrapper {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"brand  icons"
			"search search";
		align-items: center;
		justify-content: stretch;
		gap: var(--sp-2) var(--sp-3);
	}

	/* ⚠️ ومناطقُ مسمّاةٌ لا `auto 1fr auto`:
	 *
	 * جرّبتُ الثلاثيّةَ أوّلاً فهبطت الترويسةُ من 265 إلى 134 — ثمّ
	 * **اختفى الشعار**. والقياسُ يقول لماذا: العمودان الطرفيّان `auto`
	 * أخذا 185.6 و120.4 من 330، فلم يبقَ للأوسط — وهو الشعار — إلّا
	 * `1fr` من فراغٍ معدوم. عرضُه المقيس **0px**.
	 *
	 * ⟵ والدرسُ أنّ `1fr` تعني «ما تبقّى» لا «حصّةً عادلة». فما يجب أن
	 *   يُرى لا يوضع في عمودٍ مرن بين عمودين جشعين.
	 *
	 * فالبحثُ ينزل سطراً كاملاً — وهو أنفعُ له على أيّ حال، إذ قِيس أنّه
	 * كان 153 بكسلاً يقصّ نصَّه الإرشاديّ — والصفُّ الأوّل للشعار
	 * والأيقونات وحدهما. */
	header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part .bottom-header-part-wrapper > .bottom-header-middle-part {
		grid-area: brand;
		width: auto;
		justify-self: start;
	}

	header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part .bottom-header-part-wrapper > .bottom-header-right-part {
		grid-area: icons;
		width: auto;
		justify-self: end;
	}

	header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part .bottom-header-part-wrapper > .bottom-header-left-part {
		grid-area: search;
		width: auto;
	}
}

@media (max-width: 480px) {
	/* ⓱ عند 390 يعلو H1 عناوينَ الأقسام بـ**1.6px** فقط: 25.6 مقابل 24،
	 *    وH4 في التذييل 24 كذلك — ثلاثةُ مستوياتٍ تتساوى بوزنٍ ولون. */
	.entry-content h2.wp-block-heading {
		font-size: var(--fs-lg);
	}

	.ggen-home-hero h1 {
		max-inline-size: none;
	}

	/* ⓲ حشوُ بطاقة المنتج **صفرٌ** عند 390 فيلتصق الزرُّ بالإطار بفجوةِ
	 *    بكسلٍ واحد. والشبكةُ عمودٌ واحدٌ فلا حاجة لأساسٍ مرن. */
	.wc-block-grid__products {
		display: grid;
		grid-template-columns: 1fr;
	}

	.wc-block-grid__product {
		padding: var(--sp-4) !important;
	}
}

@media (max-width: 768px) {
	.woocommerce-page #customer_login.u-columns.col2-set {
		flex-wrap: wrap;
		row-gap: var(--sp-6);
	}

	.woocommerce-page #customer_login.u-columns.col2-set > .col-1,
	.woocommerce-page #customer_login.u-columns.col2-set > .col-2 {
		flex-basis: 100%;
	}
}

/* ⓴ المفضّلةُ الفارغة تعرض **رأسَ جدولٍ بثلاثة أعمدةٍ لن تُملأ**.
 *
 * قِيس: `table.wishlist_table` بستّ خلايا `th` — «اسم المنتج» و«سعر
 * الوحدة» و«حالة المخزون» وثلاثٌ فارغة — فوق `tbody` بصفٍّ واحدٍ
 * `colspan=6` لا بضاعةَ فيه. أي وعدُ جدولٍ ثمّ لا شيء.
 *
 * ورسالتُنا البديلة (`ggen_wishlist_empty_exit`) مطبوعةٌ فعلاً تحته —
 * فالزائرُ يقرأ رأسَ جدولٍ فارغٍ ثمّ يُدعى إلى المتجر.
 *
 * و`:has(td.wishlist-empty)` تُخفي الجدولَ **حين يُثبت فراغَه بنفسه**:
 * الخليّةُ التي يطبعها YITH عند الصفر. فإن امتلأت المفضّلةُ يوماً عاد
 * الجدولُ وحده بلا شرطٍ منّا — بخلاف `display: none` مطلقةٍ تُخفيه دوماً. */
.wishlist_table:has(td.wishlist-empty) {
	display: none;
}

.ggen-wishlist-empty {
	margin-block: var(--sp-7) var(--sp-8);
}

/* ㉕ صفحةُ 404 — زرُّ نجاةٍ يفقد لونَه عند اللمس

   قِيس في `style.css` عند الأب:

       .paganot-found-button a        { background: var(--primary-color);
                                        border-radius: 11px; }
       .paganot-found-button a:hover  { background: #404040; }

   فالحالةُ الساكنةُ تصل من `--primary-color`، وقد ضبطناه على `--teal-600`
   فهي على العلامة. أمّا التحويمُ فرماديٌّ صرفٌ **مثبَّتٌ في الشيفرة** —
   `#404040` لا يقع في أيّ سلّمٍ من سلالمنا الثلاثة.

   وهذا هو الزرُّ الوحيدُ في الصفحة، على الصفحة التي يبلغها زائرٌ ضلّ
   طريقَه. فأن يتحوّل من أخضرَ إلى رماديٍّ عند اللمس يقرأ **تعطيلاً**
   لا استجابة.

   ونصفُ القطر 11px بينما نظامُنا يقول 10px (`--ggen-radius-button`).
   وبكسلٌ واحدٌ لا يُرى وحده — لكنّه يُرى بجوار أزرارِ الكتل في الصفحة
   نفسِها، فيقرأ حافّتين مختلفتين لزرّين متجاورين.

   ⟵ ولا `!important` هنا: قواعدُ الأب بوزن (0,2,0)، وهذه (0,2,1) —
     وترتيبُها مضمونٌ بالتبعيّة على ورقة الأب لا برجاءِ أولويّة. */

.paganot-found-button a.dt-btn {
	border-radius: var(--ggen-radius-button);
}

.paganot-found-button a.dt-btn:hover,
.paganot-found-button a.dt-btn:focus-visible {
	background: var(--teal-700);
}

/* ㉖ حقلُ البحث في صفحة 404 — الضابطُ الذي ينزل بلا صنف

   `get_product_search_form()` تطبع زرَّها هكذا حرفيّاً:

       <button type="submit" value="بحث" class="">بحث</button>

   **صنفٌ فارغ.** فلا قاعدةَ عند الأب تصيبه ولا عندنا — وهو أحدُ ضابطَي
   النجاة في الصفحة. وقاعدةُ الترويسة عندنا محصورةٌ في
   `header .woocommerce-product-search`، فلا تبلغ هذا.

   ── والمقاسُ 44 بكسلاً لا أقلّ ────────────────────────────────────────

   حدُّ WCAG 2.5.8 (المستوى AA) لهدف اللمس 24×24، و2.5.5 (AAA) 44×44.
   والقسمان ⓯ و⓳ في هذا الملفّ رفعا ضابطَي الترويسة والتذييل إلى 44،
   فيُتبع المعيارُ نفسُه هنا ولا تُترك الصفحةُ أدنى من جيرانها.

   ── والعرضُ محصورٌ عمداً ──────────────────────────────────────────────

   الحاويةُ `.not-found` بعرض القسم كلِّه بعد حذف الشريط الجانبيّ. وحقلُ
   بحثٍ بعرض 1200 بكسل يقرأ حقلَ عنوانٍ لا حقلَ بحث، ولا يوجّه العينَ إلى
   موضع الكتابة. فـ34rem تكفي عبارةَ بحثٍ عن منتجٍ وتبقى مركزاً بصريّاً. */

.ggen-404-search {
	max-inline-size: 34rem;
	margin-inline: auto;
	margin-block: var(--sp-5) var(--sp-4);
}

.ggen-404-search .woocommerce-product-search {
	display: flex;
	gap: var(--sp-2);
	align-items: stretch;
}

.ggen-404-search .search-field {
	flex: 1 1 auto;
	min-block-size: 44px;
	padding-inline: var(--sp-4);
	font-family: var(--font-main);
	font-size: var(--fs-base);
	color: var(--color-text);
	background: var(--neutral-0);
	/*
	 * ⚠️ `--neutral-500` لا `--color-border` — والفرقُ سقوطُ 1.4.11.
	 *
	 * خلفيّةُ الحقل بيضاءُ وخلفيّةُ الصفحة بيضاء، فالحدُّ هو كلُّ ما
	 * يفصل الضابطَ عن الورق. و`--color-border` (#DCDFDD) يقيس 1.34:1 —
	 * والحدُّ المطلوبُ لحدود الضوابط 3:1. و`--neutral-500` (#8A8D8B)
	 * يقيس 3.35:1 — أدنى درجةٍ في السلّم تمرّ. ويُترك `--color-border`
	 * على حاله: يخدم ثلاثةَ عشرَ موضعاً آخرَ كلُّها فواصلُ زخرفيّةٌ لا
	 * حدودُ ضوابط.
	 */
	border: 1px solid var(--neutral-500);
	border-radius: var(--ggen-radius-button);
}

.ggen-404-search .search-field::placeholder {
	color: var(--color-text-muted);
	/* ⟵ `opacity: 1` لأنّ فَيَرفُكس يخفّف النائبَ افتراضاً إلى 0.54،
	 *   فينزل التباينُ تحت 4.5:1 حتى مع لونٍ يمرّ. */
	opacity: 1;
}

.ggen-404-search button[type="submit"] {
	min-block-size: 44px;
	min-inline-size: 44px;
	padding-inline: var(--sp-5);
	font-family: var(--font-main);

	/*
	 * وبلا هذين يرث الزرُّ `clamp` من الأب فيهبط نصُّه إلى 12.8px عند
	 * 375 — أصغرَ نصٍّ في الصفحة، على أحد مخرجَيها، بجوار حقلٍ ثابتٍ
	 * عند 16px في الصفّ نفسِه.
	 */
	font-size: var(--fs-base);
	line-height: 1.2;
	font-weight: 700;
	color: var(--neutral-0);
	background: var(--color-action);
	border: 0;
	border-radius: var(--ggen-radius-button);
	cursor: pointer;
	transition: background-color var(--dur-base) var(--ease);
}

.ggen-404-search button[type="submit"]:hover,
.ggen-404-search button[type="submit"]:focus-visible {
	background: var(--teal-700);
}

/*
 * ⚠️ الحقلُ وحدَه هنا — والزرُّ خارجَها عمداً، وهذا تصحيحُ تدقيق.
 *
 * الحلقةُ العامّةُ في أوّل الملفّ ذاتُ لونين (أبيضُ داخليٌّ + ظلٌّ تيل)
 * كي تظهر على أيّ سطح. وكانت هذه القاعدةُ تشمل الزرَّ فتغلب نصفَها
 * الأبيض بـoutline تيل — والزرُّ تيلٌ أصلاً: قِيس أنّ الحلقةَ سقطت دون
 * 3:1 **من جهتَيها**. فحُذف الزرُّ منها والعامّةُ تخدمه كما صُمّمت.
 * والحقلُ يبقى: خلفيّتُه بيضاءُ فالتيلُ عليها ظاهر، والظلُّ الخارجيُّ
 * من العامّة يبقى فوقه.
 */
.ggen-404-search .search-field:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* والزرُّ يهبط تحت الحقل عند الضيق: 44px + حقلٌ صالحٌ للقراءة لا يجتمعان
   في 330 بكسلاً ناقصاً حوافَّ القسم. */
@media (max-width: 480px) {
	.ggen-404-search .woocommerce-product-search {
		flex-wrap: wrap;
	}

	.ggen-404-search .search-field,
	.ggen-404-search button[type="submit"] {
		flex-basis: 100%;
	}
}

/* ㉗ أيقوناتُ الأقسام — نظامٌ مستوردٌ من لوح التصميم

   أربعَ عشرةَ أيقونةً في `assets/img/categories/`، مبنيّةً على لوحتنا نفسِها:
   خلفيةٌ بتدرّجٍ من سلالم التيل والورقي، وأيقونةٌ خطّيّةٌ بيضاء، و`rx="20"`
   يطابق `--radius-lg`. ومعها طرازٌ ناعمٌ في `assets/img/tiles/` بتدرّج
   `--teal-50 ⟵ --leaf-50` وحدٍّ بـ`--teal-600`، للأسطح الهادئة.

   ── ولماذا تُعلَّق هنا ─────────────────────────────────────────────────

   أسماءُ ملفّات الأيقونات **مُعرِّفاتُ الأقسام الحقيقيّة** — قِيس: الأربعةَ
   عشرَ كلُّها موجودةٌ في `product_cat`. وووكومرس يطبع `body.term-{slug}`
   على أرشيف كلّ قسم. فالربطُ محدِّدٌ لا شيفرة: لا خطّافَ PHP ولا تعديلَ
   ترميز.

   ⚠️ و`content` يُعطى للأربعةَ عشرَ **وحدَها** لا لكلّ قسم. فالمتجرُ فيه
     أربعون قسماً، والباقي بلا أيقونة — ولو وُضع الصندوقُ في قاعدةٍ عامّة
     لظهر مربّعٌ فارغٌ بعرض 88 بكسلاً في ستٍّ وعشرين صفحة.

   ⟵ والشبكةُ كذلك مقصورةٌ عليها: عمودان حيث توجد أيقونة، وتدفّقٌ عاديٌّ
     حيث لا توجد.

   ⚠️ ولا نصَّ بديلاً: الأيقونةُ زخرفيّةٌ بحتة (اسمُ القسم مكتوبٌ في `h1`
     بجوارها)، وملفُّ SVG نفسُه يحمل `aria-hidden="true"`. وصورةٌ زخرفيّةٌ
     في `::before` هي التعبيرُ الصحيح عن ذلك — لا `<img alt="">` يحتاج
     ترميزاً. */

body:is(
	.term-irrigation,
	.term-smart-farming,
	.term-agri-equipment,
	.term-seeds,
	.term-fertilizers,
	.term-greenhouses,
	.term-solar,
	.term-pest-control,
	.term-livestock-poultry,
	.term-bird-supplies,
	.term-pet-supplies,
	.term-home-garden,
	.term-outdoor-camping,
	.term-ggen-brand
) .page-header .page-header-inner {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon title"
		"icon crumbs";
	align-items: center;
	column-gap: var(--sp-5);
	row-gap: var(--sp-1);
}

body:is(
	.term-irrigation,
	.term-smart-farming,
	.term-agri-equipment,
	.term-seeds,
	.term-fertilizers,
	.term-greenhouses,
	.term-solar,
	.term-pest-control,
	.term-livestock-poultry,
	.term-bird-supplies,
	.term-pet-supplies,
	.term-home-garden,
	.term-outdoor-camping,
	.term-ggen-brand
) .page-header .page-header-inner::before {
	content: "";
	grid-area: icon;
	inline-size: 88px;
	block-size: 88px;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 22px;

	/*
	 * ظلٌّ أثقل ممّا في `--shadow-lg` عمداً: البلاطةُ مشبعةُ اللون على
	 * سطحٍ فاتح، والظلُّ الخفيفُ يختفي تحتها. والقيمةُ من لوح التصميم.
	 */
	box-shadow: 0 12px 30px rgba(45, 45, 45, .24);
}

body:is(
	.term-irrigation,
	.term-smart-farming,
	.term-agri-equipment,
	.term-seeds,
	.term-fertilizers,
	.term-greenhouses,
	.term-solar,
	.term-pest-control,
	.term-livestock-poultry,
	.term-bird-supplies,
	.term-pet-supplies,
	.term-home-garden,
	.term-outdoor-camping,
	.term-ggen-brand
) .page-header .page-header-title {
	grid-area: title;
}

body:is(
	.term-irrigation,
	.term-smart-farming,
	.term-agri-equipment,
	.term-seeds,
	.term-fertilizers,
	.term-greenhouses,
	.term-solar,
	.term-pest-control,
	.term-livestock-poultry,
	.term-bird-supplies,
	.term-pet-supplies,
	.term-home-garden,
	.term-outdoor-camping,
	.term-ggen-brand
) .page-header .breadcrumb-trail {
	grid-area: crumbs;
}

body.term-irrigation .page-header .page-header-inner::before {
	background-image: url("../img/categories/irrigation.svg");
}

body.term-smart-farming .page-header .page-header-inner::before {
	background-image: url("../img/categories/smart-farming.svg");
}

body.term-agri-equipment .page-header .page-header-inner::before {
	background-image: url("../img/categories/agri-equipment.svg");
}

body.term-seeds .page-header .page-header-inner::before {
	background-image: url("../img/categories/seeds.svg");
}

body.term-fertilizers .page-header .page-header-inner::before {
	background-image: url("../img/categories/fertilizers.svg");
}

body.term-greenhouses .page-header .page-header-inner::before {
	background-image: url("../img/categories/greenhouses.svg");
}

body.term-solar .page-header .page-header-inner::before {
	background-image: url("../img/categories/solar.svg");
}

body.term-pest-control .page-header .page-header-inner::before {
	background-image: url("../img/categories/pest-control.svg");
}

body.term-livestock-poultry .page-header .page-header-inner::before {
	background-image: url("../img/categories/livestock-poultry.svg");
}

body.term-bird-supplies .page-header .page-header-inner::before {
	background-image: url("../img/categories/bird-supplies.svg");
}

body.term-pet-supplies .page-header .page-header-inner::before {
	background-image: url("../img/categories/pet-supplies.svg");
}

body.term-home-garden .page-header .page-header-inner::before {
	background-image: url("../img/categories/home-garden.svg");
}

body.term-outdoor-camping .page-header .page-header-inner::before {
	background-image: url("../img/categories/outdoor-camping.svg");
}

body.term-ggen-brand .page-header .page-header-inner::before {
	background-image: url("../img/categories/ggen-brand.svg");
}

/* والبلاطةُ تصغُر على الجوّال: 88 بكسلاً من 390 هي 23٪ من العرض،
   وعنوانُ القسم يحتاجها. */
@media (max-width: 600px) {
	body:is(
	.term-irrigation,
	.term-smart-farming,
	.term-agri-equipment,
	.term-seeds,
	.term-fertilizers,
	.term-greenhouses,
	.term-solar,
	.term-pest-control,
	.term-livestock-poultry,
	.term-bird-supplies,
	.term-pet-supplies,
	.term-home-garden,
	.term-outdoor-camping,
	.term-ggen-brand
	) .page-header .page-header-inner {
		column-gap: var(--sp-3);
	}

	body:is(
	.term-irrigation,
	.term-smart-farming,
	.term-agri-equipment,
	.term-seeds,
	.term-fertilizers,
	.term-greenhouses,
	.term-solar,
	.term-pest-control,
	.term-livestock-poultry,
	.term-bird-supplies,
	.term-pet-supplies,
	.term-home-garden,
	.term-outdoor-camping,
	.term-ggen-brand
	) .page-header .page-header-inner::before {
		inline-size: 56px;
		block-size: 56px;
		border-radius: 14px;
	}
}

/* ㉘ الطرازُ الناعم في أقراص الأقسام الفرعيّة

   الأقراصُ في القسم ㉔ نصٌّ وعددٌ بلا صورة — وذلك قرارٌ مكتوبٌ هناك
   وسببُه أنّ صورةَ قسمٍ تعني طلباً خارجيّاً إلى `alicdn` فوق كلّ صفحة.

   والأيقوناتُ المستوردةُ **لا تنقض ذلك**: ملفٌّ محليٌّ بألف بايت، من
   قالبنا لا من مورّد، ويُخبَّأ مرّةً لكلّ الأقسام. فالثمنُ الذي رُفض هناك
   ليس الثمنَ المدفوعَ هنا.

   ⟵ والطرازُ الناعم (`tiles/`) لا المشبع: القرصُ أبيضُ صغيرٌ في صفٍّ
     أفقيّ، وبلاطةٌ مشبعةٌ بحجم 21 بكسلاً داخله تقرأ نقطةَ لونٍ لا أيقونة.
     المشبعُ موضعُه رأسُ الصفحة عند 88 بكسلاً (القسم ㉗).

   ── والربطُ بالرابط لا بصنف ────────────────────────────────────────────

   القرصُ لا يحمل مُعرِّفَ القسم في أيّ صنف — لكنّه يحمله في `href`.
   و`[href$="/{slug}/"]` يطابقه بلا تعديلِ ترميز.

   ⚠️ ولا يلتبس بالأبناء: `…/irrigation/drip-irrigation/` ينتهي بـ
     `-irrigation/` لا `/irrigation/`، فلا يطابق. قِيس على الأربعة عشر.

   ⚠️ ولا `border-radius`: ملفُّ SVG يقصّ زواياه بنفسه (`rx="20"` من 120)،
     فالحوافُّ شفّافةٌ أصلاً وأيُّ قطرٍ هنا زائد. */

.ggen-subcats__pill:is(
	[href$="/irrigation/"],
	[href$="/smart-farming/"],
	[href$="/agri-equipment/"],
	[href$="/seeds/"],
	[href$="/fertilizers/"],
	[href$="/greenhouses/"],
	[href$="/solar/"],
	[href$="/pest-control/"],
	[href$="/livestock-poultry/"],
	[href$="/bird-supplies/"],
	[href$="/pet-supplies/"],
	[href$="/home-garden/"],
	[href$="/outdoor-camping/"],
	[href$="/ggen-brand/"]
)::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.35rem;
	block-size: 1.35rem;
	background-size: cover;
	background-repeat: no-repeat;
}

.ggen-subcats__pill[href$="/irrigation/"]::before {
	background-image: url("../img/tiles/irrigation.svg");
}

.ggen-subcats__pill[href$="/smart-farming/"]::before {
	background-image: url("../img/tiles/smart-farming.svg");
}

.ggen-subcats__pill[href$="/agri-equipment/"]::before {
	background-image: url("../img/tiles/agri-equipment.svg");
}

.ggen-subcats__pill[href$="/seeds/"]::before {
	background-image: url("../img/tiles/seeds.svg");
}

.ggen-subcats__pill[href$="/fertilizers/"]::before {
	background-image: url("../img/tiles/fertilizers.svg");
}

.ggen-subcats__pill[href$="/greenhouses/"]::before {
	background-image: url("../img/tiles/greenhouses.svg");
}

.ggen-subcats__pill[href$="/solar/"]::before {
	background-image: url("../img/tiles/solar.svg");
}

.ggen-subcats__pill[href$="/pest-control/"]::before {
	background-image: url("../img/tiles/pest-control.svg");
}

.ggen-subcats__pill[href$="/livestock-poultry/"]::before {
	background-image: url("../img/tiles/livestock-poultry.svg");
}

.ggen-subcats__pill[href$="/bird-supplies/"]::before {
	background-image: url("../img/tiles/bird-supplies.svg");
}

.ggen-subcats__pill[href$="/pet-supplies/"]::before {
	background-image: url("../img/tiles/pet-supplies.svg");
}

.ggen-subcats__pill[href$="/home-garden/"]::before {
	background-image: url("../img/tiles/home-garden.svg");
}

.ggen-subcats__pill[href$="/outdoor-camping/"]::before {
	background-image: url("../img/tiles/outdoor-camping.svg");
}

.ggen-subcats__pill[href$="/ggen-brand/"]::before {
	background-image: url("../img/tiles/ggen-brand.svg");
}

/* ㉙ شريطُ الأقسام يبقى — والترويسةُ تنزلق تحته

   في متجرٍ من خمسة آلاف منتج، ثمنُ العودة إلى أعلى الصفحة لتغيير القسم
   يُدفع في كلّ تصفّح. والتصميمُ يثبّت الترويسة؛ وهذه ترجمتُها إلى ما
   يحتمله هذا القالب.

   ── لماذا لا تُفعَّل ميزةُ الأب ───────────────────────────────────────

   الأبُ فيه `aster_storefront_enable_sticky_header` يضع `.sticky-header`
   على `.navigation-part`. وتفعيلُه لا يفعل شيئاً — قِيس سببان:

   ❶ آخرُ قاعدةٍ في سلسلته تقول
     `.sticky-header,.sticky-header.is-sticky{position:unset !important}`،
     فتهزم `position:fixed !important` المكتوبةَ قبلها بسطور (نفسُ الوزن،
     وترتيبٌ لاحق).
   ❷ ولا سكربتَ في القالب يضيف `.is-sticky` أصلاً — صفرُ مطابقةٍ لـ
     `sticky` في `resource/` و`assets/`.

   ⟵ فميزةٌ ميّتةٌ من طرفَيها. وتركُ صنفها بلا استعمالٍ أنظفُ من تفعيلها:
     لا نلمس `.sticky-header` إطلاقاً، فقاعدةُ `unset !important` لا تصيب
     شيئاً ممّا نكتب، ولا نحتاج `!important` واحدةً هنا.

   ── ولماذا الإزاحةُ سالبةٌ لا صفر ─────────────────────────────────────

   الطريقُ البديهيّ تثبيتُ `.navigation-menus` وحدَها (59px). ولا يعمل:
   قِيس أنّها **آخرُ أبناء** `.header-main-wrapper` وارتفاعُه 173px — والعنصرُ
   اللاصقُ لا يتجاوز حدودَ حاويته، فيثبت 114 بكسلاً ثمّ يمضي. تثبيتٌ يبدو
   عاملاً في أوّل تمريرةٍ ويختفي في الثانية.

   فالتثبيتُ على الترويسة كلِّها (‏186px مقيسة) بإزاحةٍ تسحبها لأعلى بمقدار
   ما نريد إخفاءَه: ‏186 − 59 = **127**. فينزلق صفُّ الشعار والبحث خارج
   الشاشة ويبقى شريطُ الأقسام معلّقاً.

   ⚠️ والرقمان مقيسان لا محسوبان، فإن نما الشعارُ يوماً بقي جزءٌ من صفّه
     ظاهراً — تدهورٌ لا كسر. ولذلك يُكتبان توكنَين مسمّيَين لا رقمين
     مدسوسَين.

   ── ومحصورٌ في المكتب عمداً ───────────────────────────────────────────

   ترويسةُ الجوّال قِيست في القسم ⓰ عند 265 بكسلاً — 29٪ من الشاشة — ثمّ
   أُنزلت. وتثبيتُ أيّ جزءٍ منها يعيد أكلَ ما استُرجع. فدون 992 لا تثبيت. */

@media (min-width: 992px) {
	:root {
		/*
		 * بُعدُ شريط الأقسام عن أعلى الترويسة — **رقمٌ واحدٌ مقيسٌ لا رقمان
		 * محسوبان**.
		 *
		 * كُتبت أوّلاً `186px − 59px` (ارتفاعُ الترويسة ناقصَ ارتفاعِ الشريط)
		 * فقِيس `navbar_top = -7`: الشريطُ مقصوصٌ سبعةَ بكسلاتٍ من أعلاه.
		 * والسببُ أنّ الترويسةَ تحمل حشواً سفليّاً خارجَ غلافها الداخليّ
		 * (‏186 مقابل 173 للغلاف)، فالطرحُ يتجاهله.
		 *
		 * ⟵ فالمقيسُ هو ما يُكتب: موضعُ الشريط داخل الترويسة =
		 *   `navbar_top − header_top` = ‎-7 − (-127) = **120**.
		 */
		--ggen-navbar-offset: 120px;
	}

	header.site-header {
		position: sticky;
		top: calc(-1 * var(--ggen-navbar-offset));
		z-index: var(--z-header);
	}

	/*
	 * وشريطُ الأقسام يحتاج سطحاً: قِيس أنّ خلفيّته `rgba(0,0,0,0)` —
	 * شفّافةٌ تماماً. فبلا هذا يمرّ المحتوى تحته مقروءاً خلف الروابط.
	 */
	header.site-header .navigation-menus {
		background: var(--color-surface);
		border-block-end: 1px solid var(--color-border);
	}

	/* وشريطُ أدوات ووردبريس يعلو كلَّ شيءٍ عند المسجَّلين. */
	body.admin-bar header.site-header {
		top: calc(32px - var(--ggen-navbar-offset));
	}
}

/* ㉚ حقلُ بحث الترويسة — خطٌّ أسودُ صرفٌ تحت أكثر ضابطٍ استعمالاً

   قِيس عند الأب:

       form.woo-pro-search input#woocommerce-product-search-field {
           border: none;
           border-bottom: 1px solid #ccc;
           box-shadow: 0 1px 0 0 #000;      ⟵ أسودُ صرف
       }
       form.woo-pro-search button.search-button { color: #000 }

   فالحقلُ سطرٌ مسطَّرٌ بخطٍّ أسودَ وعدسةٌ سوداء، في متجرٍ لوحتُه خضراء.
   والأسودُ الصرفُ **ليس في اللوحة إطلاقاً** — أقتمُ محايدٍ فيها
   `--neutral-950` (#1A1C1B). وهي العلّةُ نفسُها التي عولجت في القسم ❷
   لشريط الترويسة.

   ── والوزنُ (1,1,1) ───────────────────────────────────────────────────

   محدِّدُ الأب معرّفٌ + صنفٌ + عنصر. فتُطابَق البنيةُ نفسُها لا `!important`:
   ورقتُنا تعتمد على `aster-storefront-style` صراحةً، فتُطبع بعدها،
   والتساوي في الوزن يكفي.

   ── والعدسةُ تبقى حيث هي ─────────────────────────────────────────────

   الأبُ يسحبها فوق الحقل بـ`margin-right:-38px` في ورقة RTL (‏`margin-left`
   في LTR). وهي حيلةٌ عاملة، فلا تُستبدل — لكنّ 38 لا تطابق عرضَ الزرّ بعد
   أن رُفع إلى 44 في القسم ⓮، فيبرز ستّةُ بكسلاتٍ خارج الحقل. تُصحَّح
   بخاصّيّةٍ منطقيّةٍ تخدم الاتجاهين: `-2.75rem` = 44px بالضبط.

   ⚠️ ولا `outline: none` مهما بدا أنظف: الحقلُ ضابطُ إدخالٍ، وإخفاءُ
     حلقةِ التركيز يقطع التنقّلَ بلوحة المفاتيح — إخفاقُ 2.4.7. */

/*
 * ⚠️ صفٌّ لا يلتفّ — وهذا تصحيحُ خطأٍ لي.
 *
 * كُتب أوّلاً `max-inline-size: 600px` وحدَه، فقِيس أنّ العدسةَ هبطت
 * **خارجَ الحقل**: الحقلُ `width: 100%` من ستّمئة، فلم يبقَ للزرّ عرضٌ
 * فالتفّ سطراً. وحيلةُ الأب (سحبُ الزرّ بهامشٍ سالب) تفترض أنّهما في
 * سطرٍ واحد.
 *
 * ⟵ فالحدُّ يبقى، ويُمنع الالتفافُ صراحةً. والتسميةُ خارجُ التدفّق
 *   (`.screen-reader-text` مطلقةُ الموضع) فلا تصير عنصرَ صفّ.
 */
form.woo-pro-search {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	max-inline-size: 600px;
}

form.woo-pro-search input#woocommerce-product-search-field {
	flex: 1 1 auto;

	/*
	 * ⚠️ وإبطالُ `min-inline-size: 16rem` من القسم ⓯ — وهو قيدٌ لي.
	 *
	 * وُضع حين كان النائبُ ستّةً وثلاثين محرفاً يُقصّ في منتصف كلمة. وقد
	 * صار النائبُ «ابحث في المتجر» — خمسةَ عشرَ محرفاً — بعد توحيد صياغة
	 * البحث. فالقيدُ يحمي من عطلٍ زال، ويصنع عطلاً جديداً: قِيس أنّ الحقل
	 * 256px داخل غلافٍ 241px، أي **فائضٌ خمسةَ عشرَ بكسلاً**، فتفقد العدسةُ
	 * المسحوبةُ بهامشٍ سالبٍ مرجعَها وتقف خارج الحقل.
	 *
	 * ⟵ و`flex: 1 1 auto` يعطي ما يعطيه القيدُ وأكثر: الحقلُ يملأ ما وُجد
	 *   بلا فيض.
	 */
	min-inline-size: 0;
}

form.woo-pro-search input#woocommerce-product-search-field {
	box-shadow: none;
	/* `--neutral-500` للسبب المشروح في القسم ㉖: حدُّ ضابطٍ يحتاج 3:1. */
	border: 1.5px solid var(--neutral-500);
	border-radius: var(--radius-md);
	background: var(--color-bg-subtle);
	color: var(--color-text);
	font-family: var(--font-main);
	font-size: var(--fs-sm);
	padding-block: 0.8rem;
	padding-inline-start: var(--sp-4);
	transition: border-color var(--dur-base) var(--ease);
}

form.woo-pro-search input#woocommerce-product-search-field:hover {
	border-color: var(--teal-300);
}

form.woo-pro-search input#woocommerce-product-search-field:focus-visible {
	border-color: var(--color-action);
	outline: 2px solid var(--color-focus);
	outline-offset: 1px;
}

/*
 * ⚠️ موضعٌ صريحٌ لا هامشٌ سالب — وهذا ثالثُ تصحيحٍ في هذا القسم.
 *
 * الأبُ يجعل الزرَّ `position: absolute` ويسحبه بـ`margin-right: -38px`.
 * والهامشُ السالبُ على عنصرٍ مطلقٍ يُحرّك **موضعَه الساكن** — وهو موضعٌ
 * يتقلّب بتقلّب تخطيط الصفّ: قِيس أنّه وقف خارج الحقل من جهته اليمنى
 * (‏`btn_gap_from_end = 241` أي عند حافّة الحقل البعيدة) بعد تحويل الغلاف
 * إلى flex.
 *
 * ⟵ فيُنسَّب الغلافُ (`position: relative` أعلاه) ويُعطى الزرُّ إحداثيّاتٍ
 *   صريحة: طرفُ السطر الداخليّ، منتصفَ الارتفاع. والحقلُ يحجز له
 *   `padding-inline-end: 3rem` منذ القسم ⓯، فلا يجلس فوق النصّ.
 */
form.woo-pro-search button.search-button {
	color: var(--color-action);
	position: absolute;
	inset-inline-end: 4px;
	inset-block-start: 50%;
	translate: 0 -50%;
	margin: 0;
}

form.woo-pro-search button.search-button:hover,
form.woo-pro-search button.search-button:focus-visible {
	color: var(--teal-700);
}

form.woo-pro-search button.search-button:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 1px;
	border-radius: var(--radius-sm);
}

/* ㉛ سلّمُ العناوين — شظيّةُ لوحةِ تحكّمٍ قتلت مقاساتِ الأب نفسِه

   قِيس في `style-rtl.css` عند الأب: السطرُ 480 يعطي `h2` قيمةَ 3.4rem،
   ثمّ السطرُ 524 — **في الورقة نفسِها** — يقول:

       h2, h3 { font-size: 1.3em; margin: 1em 0 }

   ويليه `.update-core-php h2` مباشرةً: شيفرةُ شاشةِ تحديث ووردبريس
   تسرّبت إلى ورقة الواجهة. والوزنان متساويان (0,0,1) والمتأخّرُ يغلب —
   فقاعدةُ الأب الأصليّةُ **ميّتةٌ بورقته هو**، وكلُّ `h2` بلا صنفِ مقاسٍ
   يُرسم عند 1.3em ≈ 20.8px: عنوانُ قسمٍ بحجم المتن تقريباً.

   فهذا **إصلاحُ خللٍ قائمٍ** لا تفضيلٌ جماليّ. والوزنُ (0,0,1) يكفي:
   ورقتُنا تُطبع بعد الأب بتبعيّةٍ صريحة، والتساوي مع تأخّر الطباعة غلبة.
   وكلُّ ما هو أوزنُ — عناوينُ الكتل المصنّفة، `h1.page-header-title`،
   قواعدُ الودجات — يبقى غالباً كما كان.

   ── والمقاسُ من التصميم لا من سلّم التوكنات ───────────────────────────

   لوحُ التصميم يرسم عنوانَ القسم `clamp(1.7rem, 2.4vw, 2.2rem)` — وهو
   عند عرض الحاصر (1320) يعطي 31.7px، أي `--fs-2xl` (31.25) تقريباً.
   بينما تعليقُ التوكنات يسمّي `--fs-3xl` (39) لـH2 — والفارقُ أنّ سلّمَ
   التوكنات كُتب لصفحات محتوًى، والتصميمُ يوزن عناوينَ **أقسامِ متجر**.
   فالحسمُ للتصميم المرسوم، والهبوطُ المتدرّجُ بـclamp لا بنقاط كسر. */

h2 {
	font-size: clamp(1.7rem, 2.4vw, 2.2rem);
}

h3 {
	font-size: clamp(1.35rem, 1.9vw, var(--fs-xl));
}

h4 {
	font-size: var(--fs-lg);
}

/*
 * ⚠️ وعناوينُ الكتل تحتاج وزناً أعلى — قِيس بمسح أوراق الصفحة كلِّها:
 * `h2.wp-block-heading { font-size: 24px }` يأتي **مرّتين** — في ورقة
 * الأب وفي كتلةِ `<style>` مضمّنةٍ تُطبع بعد كلّ الأوراق المربوطة. فقاعدةُ
 * العنصر أعلاه تخسر أمام الثانية بالترتيب مهما تأخّرت ورقتُنا. و(0,2,1)
 * يقهرهما معاً أينما طُبعا.
 */
.entry-content h2.wp-block-heading {
	font-size: clamp(1.7rem, 2.4vw, 2.2rem);
}

.entry-content h3.wp-block-heading {
	font-size: clamp(1.35rem, 1.9vw, var(--fs-xl));
}

/*
 * ⚠️ وإعادةُ تأكيد قاعدةِ الجوّال من القسم ⓱ — لأنّ هذا القسمَ لاحقٌ لها
 * في الملفّ وبوزنها نفسِه، فبدون هذا كانت `clamp` (وأدناها 27.2px) ستدهس
 * قرارَ الجوّال المقيس هناك: عنوانُ قسمٍ يعلو H1 الصفحةَ نفسَها.
 */
@media (max-width: 480px) {
	.entry-content h2.wp-block-heading {
		font-size: var(--fs-lg);
	}
}

/* ㉜ شبكةُ أقسام الرئيسية — أعمدةُ الكتل تنهار من أربعةٍ إلى واحد

   قِيس من الترميز المُصدَر: الأقسامُ `wp-block-columns` بأربعة أعمدة حتى
   782px ثم **عمودٌ واحد** — القاعدةُ المُولَّدة
   `flex-basis:100%!important` تحت 781 بلا درجةٍ وسطى. فجوّالٌ عريضٌ
   وتابلت يقرآن الأقسامَ طابوراً.

   والحلُّ شبكةٌ ذاتيّةُ التعبئة كما في اللوح: `minmax(252px,1fr)`.

   ⟵ ولماذا لا يُخشى `flex-basis:100%!important` المُولَّد: إعلاناتُ
     flex لا تسري على أبناء الشبكة — متى صار الأبُ grid صارت لاغيةً
     كلُّها، بلا معركةِ أسبقيّة. (دقّقه التدقيقُ الخصميّ نصّاً.)

   ⚠️ والوزنُ (0,2,0) **شرطٌ مقيس** لا احتياط: ورقةُ
     `core-block-supports` تُطبع بعد brand.css (البايت 36510 مقابل
     28951)، فتجاوزٌ بوزنٍ مساوٍ (0,1,0) يخسر بالترتيب، و(0,2,0) ينجو. */

.ggen-home-cats .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
	gap: var(--sp-4);
}

/* ㉝ شبكةُ نتائج المتجر — عوّامات 2011 تصير شبكةً ذاتيّةَ التعبئة

   التخطيطُ الحاليّ من `woocommerce-layout-rtl.css`: `li.product` عائمٌ
   بعرض 30.75% وهامشِ عمودٍ 3.8% — أعمدةٌ ثابتةٌ مهما ضاق المقاس، وكسورٌ
   تُدوَّر فتترك زوائدَ في أطراف الصفوف.

   واللوحُ يرسمها `repeat(auto-fill, minmax(216px,1fr))`. والفجوةُ
   `--sp-5` لا 18px المرسومة: 18 خارجُ شبكة الثمانية، و24 هي المشحونةُ
   فعلاً لشبكة الكتل في الرئيسية (`.wc-block-grid__products`) — فالاتّساقُ
   بين الشبكتين مقدَّمٌ على حرفيّة اللوح.

   ── محصورةٌ فوق 768 عمداً ────────────────────────────────────────────

   تحت 768 يعمل `woocommerce-smallscreen-rtl.css` بتخطيطِ عمودين يتسلّح
   بـ`!important` (‏`float:right!important` و`margin:0 0 2.24em!important`).
   وتحت الشبكة يفقد العوّامُ أثرَه لكنّ `width:48%` و`margin` يبقيان
   ساريين على أبناء الشبكة — فمقاومتُها تعني `!important` مضادّاً في ثلاثة
   إعلانات. والمكسبُ صفر: عمودان على الجوّال هو ما يرسمه اللوحُ أصلاً.
   فتُترك طبقةُ الجوّال المختبرةُ كما هي، والشبكةُ لما فوقها.

   ── و`text-align` تصحيحُ خللٍ لا خيار ────────────────────────────────

   قِيس عند الأب (`style-rtl.css:7038`): `.woocommerce ul.products li`
   يفرض `text-align:center` — بلا `!important` — ولا أحدَ يصفّره، فنصُّ
   البطاقة الحيّة موسَّطٌ بينما اللوحُ يبدؤه من الحافّة. و(0,2,2) تغلب
   (0,2,1) بلا عناء. */

@media (min-width: 769px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
		gap: var(--sp-5);
	}

	/*
	 * ⚠️ `[class*="columns-"]` في المحدِّد **شرطُ وزنٍ مقيس**: قاعدةُ عرض
	 * الأعمدة عند الأب تحمل الصنفَ (`ul.products.columns-3 li.product`
	 * بوزن 0,3,2)، فتصفيرٌ بـ(0,2,2) يخسر أمامها — قِيس: بطاقاتٌ بعرض
	 * **80px** لأنّ 30.75% صارت تُحسب من خليّة الشبكة لا من الصفّ.
	 */
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product,
	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product {
		float: none;
		inline-size: auto;
		margin: 0;
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	text-align: start;
}

/* ㉞ جدولُ آخر الطلبات — صفوفٌ بطاقيّةٌ وشاراتُ حالةٍ من اللوحة

   المحدِّداتُ من مصدر `myaccount/orders.php` على الخادم لا من تخمين —
   وثلاثُ مصائدَ فيه صحّحها التدقيق:

   ❶ مُعدِّلُ الحالة `--status-completed` **بلا** بادئة `wc-`: القالبُ
     يطبع `$order->get_status()` وهي غيرُ مسبوقة. محدِّدٌ بالبادئة يطابق
     صفرَ صفوف.
   ❷ خليّةُ رقم الطلب `<th scope="row">` لا `<td>` — فقاعدةُ الخلايا
     تشمل الوسمين.
   ❸ رابطُ الإجراء يحمل `.woocommerce-button` و`.button` واسمَ الإجراء
     (`view`) معاً.

   ── محصورٌ فوق 768 عمداً ─────────────────────────────────────────────

   تحته يعمل `woocommerce-smallscreen-rtl.css`: يخفي `thead` ويجعل الصفوف
   كتليّةً ويطبع التسميةَ بـ`td::before{content:attr(data-title)}` مع
   محاذاةٍ بـ`!important` — تحويلٌ بطاقيٌّ قائمٌ ومختبَر. البناءُ فوقه
   يعني حربَ `!important`، والمكسبُ شكليّ. فيُترك، وتُضاف عليه الشاراتُ
   وحدَها (لا تصطدم بشيء).

   ── وألوانُ الحالات من السلّم الدلاليّ ───────────────────────────────

   مكتمل=نجاح · قيد التنفيذ/معلّق=تنبيه · مُسترجَع/ملغى/فشل=خطأ ·
   مدفوعٌ بانتظار الشحن (on-hold)=معلومة. وكلُّ زوجٍ (خلفيّة/نصّ) من
   اللوحة نفسِها التي تلوّن إشعاراتِ ووكومرس في القسم ❶. */

@media (min-width: 769px) {
	table.woocommerce-orders-table {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		border-collapse: separate;
		border-spacing: 0;
		overflow: hidden;
	}

	table.woocommerce-orders-table thead th {
		background: var(--color-bg-subtle);
		color: var(--color-text-muted);
		font-size: var(--fs-sm);
		font-weight: 700;
		padding: var(--sp-3) var(--sp-4);
		border-block-end: 1px solid var(--color-border);
	}

	table.woocommerce-orders-table tbody th,
	table.woocommerce-orders-table tbody td {
		padding: var(--sp-4);
		border-block-end: 1px solid var(--color-border);
		vertical-align: middle;
	}

	table.woocommerce-orders-table tbody tr:last-child th,
	table.woocommerce-orders-table tbody tr:last-child td {
		border-block-end: 0;
	}

	table.woocommerce-orders-table tbody tr:hover th,
	table.woocommerce-orders-table tbody tr:hover td {
		background: var(--teal-50);
	}

	/* رقمُ الطلب هو المدخل — وزنُ رابطه يقول ذلك. */
	.woocommerce-orders-table__cell-order-number a {
		font-weight: 700;
		color: var(--color-link);
	}

	/* والمجموعُ مالٌ: أرقامٌ جدوليّةٌ فلا يرقص العمود. */
	.woocommerce-orders-table__cell-order-total {
		font-variant-numeric: tabular-nums;
		color: var(--teal-800);
		font-weight: 700;
	}

	/* زرُّ «عرض» شبحيٌّ — الصفُّ كلُّه معلومة، والزرُّ مخرجُها الوحيد. */
	.woocommerce-orders-table__cell-order-actions a.woocommerce-button {
		background: transparent;
		border: 1.5px solid var(--color-border);
		border-radius: var(--ggen-radius-button);
		color: var(--teal-700);
		font-size: var(--fs-sm);
		font-weight: 700;
		padding: 0.5rem 1rem;
	}

	.woocommerce-orders-table__cell-order-actions a.woocommerce-button:hover,
	.woocommerce-orders-table__cell-order-actions a.woocommerce-button:focus-visible {
		background: var(--teal-600);
		border-color: var(--teal-600);
		color: var(--neutral-0);
	}
}

/* الشاراتُ خارج استعلام الوسائط: تعمل فوق التحويل البطاقيّ للجوّال كذلك. */
.woocommerce-orders-table__row .woocommerce-orders-table__cell-order-status {
	font-weight: 700;
	font-size: var(--fs-sm);
}

.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
	color: var(--success);
}

.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status {
	color: var(--warning);
}

.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
	color: var(--info);
}

.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status {
	color: var(--error);
}

/* ㉟ الشريطُ العلويّ — من صندوقٍ أسودَ فارغٍ إلى سطرِ وعدٍ

   القسمُ ❷ أعلاه قتل هذا الشريطَ حين كان فارغاً: صفَّر ارتفاعَه وأبطل
   `::before` الأسود. والآن يملؤه `inc/header.php` نصّاً عبر مُرشِّح
   theme_mod، فتُعاد له حياتُه — **بألوان اللوح لا بأسود الأب**.

   ⟵ الترتيبُ في الملفّ هو الآليّة: هذه القواعدُ بنفس أوزان القسم ❷
     (0,3,1) وتتأخّر عنه، فتغلب حيث تتقاطع. و`content:none` للشريط
     الأسود **لا يُنقَض** — الخلفيّةُ هنا على الحاوية نفسِها.

   والنصُّ يُوسَّط: القناةُ نصٌّ خالصٌ بلا عناقيدَ وروابطَ (قيدُ esc_html
   عند الأب — موثَّقٌ في inc/header.php)، وسطرٌ واحدٌ يتوسّط أجملُ من
   سطرٍ يلتصق بطرفٍ ويترك الآخرَ خاوياً. */

header.site-header .header-main-wrapper .top-header-part {
	background: var(--teal-900);
}

header.site-header .top-header-part .header-contact-inner p {
	margin: 0;
	padding-block: 0.55rem;
	color: var(--teal-100);
	font-size: var(--fs-sm);
	text-align: center;
	line-height: 1.5;
}

/* ㊱ زرُّ السلّة — بلاطةٌ وشارةٌ بدل قوسين

   المقيس قبلها: `a.cart-customlocation` بلا أرضيّةِ لمسٍ إطلاقاً — حارسُ
   الـ44×44 في هذا الملفّ يستهدف `.header-cart > a` وأخواتِها، والسلّةُ
   في هذا القالب لا يطابقها أيٌّ منها. والعددُ `( 0 )` بقوسين حرفيَّين.

   فالبلاطةُ من اللوح: 44×44 بـ--color-action ونصفِ قطر --radius-md
   و--shadow-brand. والشارةُ قرصُ --harvest في الركن.

   ⚠️ ونصُّ الشارة `--neutral-900` لا أبيض — قياسُ تباين: الأبيضُ على
     --harvest (#D98A0B) يعطي **2.8:1** فيسقط، والحبرُ يعطي 4.8:1.
     وتعليقُ التوكن نفسُه يقول «offers, badges» فالدورُ مقصودٌ — لكنّ
     النصَّ فوقه داكنٌ لا فاتح.

   ⚠️ والقوسان يبقيان في أوّل تحميلٍ خام: الأبُ يطبعهما حرفيّاً،
     وشظيّةُ ووكومرس تستبدلهما من أوّل جلب. وسطرُ التنظيف في سكربت
     ggen-a11y يغطّي الفجوةَ الأولى. */

a.cart-customlocation {
	position: relative;
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	background: var(--color-action);
	color: var(--neutral-0);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-brand);
	transition: background-color var(--dur-base) var(--ease);
}

a.cart-customlocation:hover,
a.cart-customlocation:focus-visible {
	background: var(--teal-700);
	color: var(--neutral-0);
}

a.cart-customlocation .fa-shopping-basket {
	margin: 0;
	font-size: 18px;
}

a.cart-customlocation .cart-item-box {
	position: absolute;
	inset-block-start: -5px;
	inset-inline-start: -5px;
	min-inline-size: 20px;
	block-size: 20px;
	display: grid;
	place-items: center;
	padding-inline: 4px;
	border-radius: var(--radius-full);
	background: var(--harvest);
	border: 2px solid var(--color-surface);
	color: var(--neutral-900);
	font-size: var(--fs-xs);
	font-weight: var(--fw-black);
	line-height: 1;
}

/* ㊲ ترتيبُ الترويسة — الشعارُ يبدأ لا يتوسّط

   المقيس في الدوم: البحثُ يُطبع أوّلاً (`left-part`) فالشعارُ
   (`middle-part`) فالأيقوناتُ (`right-part`) — فيقف البحثُ عند حافّة
   البدء والشعارُ في المنتصف تماماً. واللوحُ يرتّبها: **شعارٌ ← بحثٌ
   عريضٌ ← أيقونات** — النمطُ الذي تعوّدته عينُ متسوّقِ المتاجر.

   والحاويةُ `flex` عند الأب (‏`justify-content:space-between` بوزن
   0,5,1)، فالنقلُ بـ`order` على الأبناء الثلاثة — لا لمسَ للترميز.
   والبحثُ يتمدّد بينهما (`flex:1`) ويقف عند حدّه (600px من القسم ㉚). */

header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part .bottom-header-middle-part {
	order: 1;

	/*
	 * ⚠️ وبلا هذا يتمدّد عمودُ الشعار إلى 723px (قِيس) فيتوسّط الشعارُ
	 * الصفحةَ لا يبدؤها: `style-rtl.css:7728` يفرض على `.site-branding`
	 * وأخواتها `width:100%;margin:0 auto` — **خارج أيّ استعلام وسائط** —
	 * فالجزءُ يكبر بمساحة flex الفائضة ويُوسِّط ابنَه.
	 *
	 * و`inline-size:auto` معها: `flex-basis:auto` تحتكم إلى خاصيّة
	 * العرض، والأبُ يعطي الجزءَ عرضاً نسبيّاً (قِيس 723 من 1205) فبقي
	 * عريضاً رغم `flex:0 0 auto` حتى صُفِّر العرضُ نفسُه.
	 */
	flex: 0 0 auto;
	inline-size: auto;
}

header.site-header .bottom-header-middle-part .site-branding,
header.site-header .bottom-header-middle-part .site-logo {
	inline-size: auto;
	margin: 0;
}

/*
	 * ⚠️ السلسلةُ الكاملة (0,5,1) **شرطُ وزنٍ مقيس** لا إسهاب: قواعدُ
	 * الأجزاء عند الأب بها، وقاعدةٌ أخفُّ نفَذ منها `order` (بلا منافس)
	 * وخسر `flex` صامتاً — قِيس: عمودُ البحث بقي 241px.
	 */
header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part .bottom-header-left-part {
	order: 2;
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

/* والنموذجُ داخله يملأ ما وُجد حتى حدِّه (600 من القسم ㉚) — بدونها
   ينكمش على محتواه: قِيس 189px وسطَ فراغٍ عريض. */
header.site-header .bottom-header-left-part form.woo-pro-search {
	inline-size: 100%;
}

header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part .bottom-header-right-part {
	order: 3;
	flex: 0 0 auto;
}

/* ㊳ قرصُ العلامة في شريط الأقسام

   اللوحُ يميّز رابطَ «منتجات الجيل الأخضر» عن بقيّة الأقسام: هو خطُّ
   العلامة الخاصُّ لا تصنيفاً كسائرها. والربطُ بذيل الرابط كما في القسم
   ㉘ — لا صنفَ قائمةٍ يُحفظ رقمُه.

   ⚠️ `:is()` حول `a` وحدَها: عنصرُ القائمة يطبع الرابطَ داخل `li`، وقرصٌ
     على `li` يحبس مؤشّرَ القائمة المنسدلة إن أُضيفت يوماً. */

#site-navigation .main-navigation-links a[href$="/ggen-brand/"] {
	background: var(--ggen-gradient);
	color: var(--neutral-0);
	border-radius: var(--radius-full);
	padding-inline: 1.1rem;
	padding-block: 0.45rem;
}

#site-navigation .main-navigation-links a[href$="/ggen-brand/"]:hover,
#site-navigation .main-navigation-links a[href$="/ggen-brand/"]:focus-visible {
	background: var(--teal-700);
	color: var(--neutral-0);
}

/* --------------------------------------------------------------------------
   ㊴ عرضُ التجميعات — شبكةُ البطاقات
   --------------------------------------------------------------------------
   الماركب من `ggen-bundles.php` (§٤ب)، والشكل منقولٌ عن بطاقة «تجميعات
   لافين» بألوان الجيل الأخضر: صورُ القطع جنباً إلى جنب (٣ حدّاً + «+N»)،
   شريطٌ علويٌّ متدرّج، جسمٌ فيه العنوان وسطرُ القطع والإجمالي وزرّ.

   الترويسةُ صفٌّ أفقيّ (عينٌ + عنوان + خطٌّ يمتدّ + «كل التجميعات») —
   بخلاف عناوين الرئيسية الموسّطة عمداً: القسمُ نمطٌ مستورَدٌ له هويّته،
   وترويستُه جزءٌ من شكله.
   -------------------------------------------------------------------------- */

.ggen-bundles-showcase {
	margin-block: clamp(2.5rem, 5vw, 4.5rem);
}

.ggen-bundles-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.ggen-bundles-eyebrow {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--leaf-700);
}

/* التباعدُ للّاتيني وحدَه: العربيةُ متّصلةُ الحروف، والتباعدُ داخلها يفتق الوصل. */
.ggen-bundles-eyebrow:lang(en) {
	letter-spacing: 0.04em;
}

.ggen-bundles-title {
	margin: 0;
}

/* الخيطُ الممتدّ — يملأ ما بين العنوان والرابط فيشدّ الصفَّ طرفَيه. */
.ggen-bundles-divider {
	flex: 1 1 2rem;
	block-size: 1px;
	background: var(--color-border);
}

.ggen-bundles-all {
	flex: 0 0 auto;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-link);
	text-decoration: none;
	white-space: nowrap;
}

.ggen-bundles-all:hover,
.ggen-bundles-all:focus-visible {
	color: var(--color-link-hover);
	text-decoration: underline;
}

.ggen-bundles-sub {
	margin: 0.5rem 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	max-inline-size: 68ch;
}

.ggen-bundles-grid {
	display: grid;
	gap: var(--sp-4);
	margin-block-start: var(--sp-5);
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.ggen-bundle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur-base) var(--ease),
		box-shadow var(--dur-base) var(--ease),
		border-color var(--dur-base) var(--ease);
}

.ggen-bundle-card:hover {
	transform: translateY(-4px);
	border-color: var(--teal-300);
	box-shadow: var(--shadow-lg);
}

/* الشريطُ العلويّ — توقيعُ البطاقة. تزيينيٌّ فيحمل التدرّجَ الفاتح. */
.ggen-bundle-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	z-index: 2;
	background: var(--ggen-gradient);
}

/* صورُ القطع جنباً إلى جنب — البطاقةُ تُقرأ «تجميعة» من النظرة الأولى. */
.ggen-bundle-card-media {
	display: flex;
	gap: 2px;
	background: var(--teal-50);
	position: relative;
	text-decoration: none;
}

.ggen-bundle-card-shot {
	flex: 1 1 0;
	min-inline-size: 0;
	display: block;
	overflow: hidden;
}

.ggen-bundle-card-media .ggen-bundle-card-shot img {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: 0;
	background: var(--neutral-50);
	transition: transform var(--dur-base) var(--ease);
}

.ggen-bundle-card:hover .ggen-bundle-card-shot img {
	transform: scale(1.04);
}

.ggen-bundle-card-more {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-start: 8px;
	z-index: 2;
	background: rgba(26, 28, 27, 0.78);
	color: var(--neutral-0);
	font-size: var(--fs-xs);
	font-weight: 700;
	border-radius: var(--radius-full);
	padding: 2px 9px;
}

.ggen-bundle-card-body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 14px 15px 16px;
	flex: 1 1 auto;
}

.ggen-bundle-card-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.55;
}

.ggen-bundle-card-title a {
	color: var(--color-text);
	text-decoration: none;
}

.ggen-bundle-card-title a:hover,
.ggen-bundle-card-title a:focus-visible {
	color: var(--teal-700);
}

.ggen-bundle-card-pieces {
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--color-text-muted);
}

.ggen-bundle-card-price {
	margin: 2px 0 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--teal-700);
}

.ggen-bundle-card-price .woocommerce-Price-amount {
	color: var(--teal-700);
	font-weight: 800;
}

.ggen-bundle-card-from {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--color-text-muted);
}

/* الزرُّ آخرَ البطاقة دائماً — والتدرّجُ الغامقُ وحدَه يحمل نصّاً أبيض. */
.ggen-bundle-card-cta {
	margin-block-start: auto;
	display: block;
	text-align: center;
	text-decoration: none;
	background: var(--ggen-gradient-deep);
	color: var(--neutral-0);
	font-weight: 700;
	font-size: var(--fs-sm);
	border-radius: var(--ggen-radius-button);
	padding: 10px 14px;
	transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.ggen-bundle-card-cta:hover,
.ggen-bundle-card-cta:focus-visible {
	filter: brightness(1.08);
	color: var(--neutral-0);
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   ㊵ صفحةُ التجميعة — ما كان يُطبع بلا نمطٍ واحد
   --------------------------------------------------------------------------
   `ggen-bundles.php` يطبع أربعة أصناف (`.ggen-bundle-total` والعدّ والدور
   والروابط العكسيّة) ولم يكن لأيٍّ منها سطرُ CSS في أيّ قالب — قِيس
   بـ`grep -rn "ggen-bundle" store/themes` = صفر قبل هذا القسم.
   -------------------------------------------------------------------------- */

.ggen-bundle-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	background: var(--ggen-gradient-soft);
	border: 1px solid var(--teal-100);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	margin-block: 0 1rem;
	font-size: 1.0625rem;
}

.ggen-bundle-total .woocommerce-Price-amount {
	color: var(--teal-700);
	font-weight: 800;
}

.ggen-bundle-count {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.ggen-bundle-role {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	vertical-align: middle;
}

.ggen-bundle-backlinks {
	margin-block-start: var(--sp-6);
}

.ggen-bundle-backlinks h2 {
	font-size: var(--fs-xl);
	margin-block-end: var(--sp-3);
}

.ggen-bundle-backlinks ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ggen-bundle-backlinks li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	transition: border-color var(--dur-fast) var(--ease);
}

.ggen-bundle-backlinks li:hover {
	border-color: var(--teal-300);
}

.ggen-bundle-backlinks li a {
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.ggen-bundle-backlinks li a:hover,
.ggen-bundle-backlinks li a:focus-visible {
	color: var(--teal-700);
}

.ggen-bundle-total-inline {
	white-space: nowrap;
}

.ggen-bundle-total-inline .woocommerce-Price-amount {
	color: var(--teal-700);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   ㊶ بطاقةُ الحلقة — سلوكُ لافين فوق سطح ⓭
   --------------------------------------------------------------------------
   ⓭ أعطى البطاقةَ سطحاً (حدّ + قطر + ظلّ hover). هنا حركتُها: رفعٌ عند
   التحويم، وتكبيرٌ طفيفٌ للصورة، والفعلُ الأساسيّ بالتدرّج الغامق.

   ⚠️ `transition` تُعاد كتابتُها كاملةً — الخاصيّةُ تُستبدل ولا تُجمع،
     فسطرٌ يضيف `transform` وحدَه يُسقط انتقالَي ⓭ (الحدّ والظلّ).

   والتكبير 1.03 لا 1.07: الصورةُ `object-fit: contain` بلا غلافٍ قاصّ
   (قِيس ماركب `/shop/` — `img` ابنُ الرابط مباشرةً)، فالمبالغةُ تُخرجها
   عن مربّعها المُدوَّر.
   -------------------------------------------------------------------------- */

.wc-block-grid__product,
.woocommerce ul.products li.product {
	transition: border-color 180ms ease,
		box-shadow 180ms ease,
		transform var(--dur-base) var(--ease);
}

.wc-block-grid__product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
}

.wc-block-grid__product-image img,
.woocommerce ul.products li.product img {
	transition: transform var(--dur-base) var(--ease);
}

.wc-block-grid__product:hover .wc-block-grid__product-image img,
.woocommerce ul.products li.product:hover > .woocommerce-LoopProduct-link > img {
	transform: scale(1.03);
}

/* الفعلُ الأساسيّ في البطاقة بالتدرّج الغامق — توقيعُ لافين، وتباينُه
   يعبر AA على طرفَيه (انظر تعليق `--ggen-gradient-deep` في tokens.css).
   والمعاينةُ السريعة على حالها من ⓲ — الهرميّةُ لا تُمَسّ. */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable {
	background: var(--ggen-gradient-deep);
	transition: filter var(--dur-fast) var(--ease);
}

/* سطوعٌ لا استبدال: تدرّجٌ ← لونٌ صلب لا يُستكمل حركياً فيقفز؛
   `filter` يُستكمل — النمطُ نفسُه في `.ggen-bundle-card-cta`. */
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .product_type_simple:hover,
.woocommerce ul.products li.product .product_type_variable:hover {
	filter: brightness(1.08);
}

/* --------------------------------------------------------------------------
   ㊷ عناوينُ أقسام الرئيسية — شَرطةُ تشديدٍ متدرّجة
   --------------------------------------------------------------------------
   العناوينُ موسّطةٌ بقرار اللوح فلا يُفرض عليها صفُّ لافين الأفقيّ؛
   تُستعار روحُه: خطٌّ قصيرٌ متدرّجٌ تحت العنوان يربط الأقسامَ بصريّاً
   بشريط البطاقات العلويّ (㊴).
   -------------------------------------------------------------------------- */

:is(.ggen-home-cats, .ggen-home-new, .ggen-home-why, .ggen-home-cta) h2.wp-block-heading::after {
	content: "";
	display: block;
	inline-size: 44px;
	block-size: 3px;
	margin: 12px auto 0;
	background: var(--ggen-gradient);
	border-radius: 2px;
}

/* الحركةُ تخدم التوجيه لا الزينة — وتسقط كلُّها عند طلب المستخدمة. */
@media (prefers-reduced-motion: reduce) {
	/* المُبطِلُ يحمل محدِّدَ الأساس نفسَه حرفاً — أخفُّ منه يخسر التخصيصَ فيموت. */
	.ggen-bundle-card,
	.ggen-bundle-card-media .ggen-bundle-card-shot img,
	.ggen-bundle-card-cta,
	.wc-block-grid__product,
	.wc-block-grid__product-image img,
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product img,
	.woocommerce ul.products li.product .add_to_cart_button,
	.woocommerce ul.products li.product .product_type_simple,
	.woocommerce ul.products li.product .product_type_variable {
		transition: none;
	}

	.ggen-bundle-card:hover,
	.ggen-bundle-card-cta:hover,
	.ggen-bundle-card-cta:focus-visible,
	.wc-block-grid__product:hover,
	.woocommerce ul.products li.product:hover {
		transform: none;
	}

	.ggen-bundle-card:hover .ggen-bundle-card-shot img,
	.wc-block-grid__product:hover .wc-block-grid__product-image img,
	.woocommerce ul.products li.product:hover > .woocommerce-LoopProduct-link > img {
		transform: none;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   ㊸ إعادةُ الربط إلى ترميز DavinciWoo — ما كان يخاطب Aster
   ─────────────────────────────────────────────────────────────────────────
   ⚠️ **العطلُ الذي يعالجه هذا القسم صامتٌ تماماً:** ‏112 موضعاً فيما سبق من
   هذه الورقة تخاطب أصنافَ Aster البنيويّة — `.entry-*` (‏34) · `.site-footer`
   (‏29) · `.site-header` (‏23) · `.widget-area` (‏16) · `.main-navigation` (‏6)
   · `.menu-toggle` (‏2) · `.site-branding` (‏2). وDavinciWoo **لا يستعمل منها
   واحداً**: ‏grep على 373 ملفَ PHP في الأب يعطي صفراً للتسعة، وقياسٌ حيٌّ على
   DOM يعطي صفراً كذلك.

   فتلك القواعدُ لا تكسر شيئاً ولا تفعل شيئاً — والنتيجةُ أنّ الترويسةَ
   والتذييلَ والودجاتِ تُقدَّم **بألوان الأب التجريبيّة**: تذييلٌ رماديٌّ
   `#444` تحت هويّةٍ تيلٍ خضراء (قِيس 2026-09-08).

   ⟵ ولا تُحذف تلك المئةُ واثنتا عشرة: حذفُها قبل نظيرِها يترك الأسطحَ بلا
     نمطٍ أصلاً، وهي مرجعُ ما يجب أن يبدو عليه كلُّ سطحٍ حين يُعاد ربطُه.

   ═══ وترميزُ الأب مقيسٌ لا مفترَض ═══

     الترويسة  `header.header > .header-wrapper`
     التذييل   `footer.footer-wrapper > .footer-widgets-area + .footer-absolute`
     الودجات   `.widget.widget_nav_menu` وأخواتُها

   ═════════════════════════════════════════════════════════════════════════ */

/* ── التذييل — سطحٌ تيلٌ داكنٌ بدل رماديِّ الأب ────────────────────────────
   والمتغيّراتُ `--footer-*` معرَّفةٌ في القسم ❶ منذ عهد Aster، لكنّ DavinciWoo
   لا يقرأ متغيّراً واحداً — فتُستهلك هنا صراحةً بدل أن تنتظر أباً يقرؤها. */
.footer-wrapper {
	background: var(--footer-top-background) !important;
	color: var(--footer-top-color);
}

.footer-wrapper .footer-widgets-area {
	background: transparent;
}

/* الطبقةُ السفلى (الحقوقُ والبياناتُ النظاميّة) أغمقُ درجةً — تفصلها عن
   الودجات بلا خطٍّ فاصل. */
.footer-wrapper .footer-absolute {
	background: var(--footer-bottom-background);
	color: var(--footer-bottom-color);
}

/* ── روابطُ التذييل — والوزنُ هنا مقصودٌ لا احتياطيّ ─────────────────────
   ⚠️ **العطلُ المقيس:** الأبُ يحقن CSS **سطريّاً في `<head>`** من خيارات
   القالب، وفيه `.footer-widgets .widget a { color:#999 }` بوزن (0,2,1).
   وقاعدتُنا `.footer-wrapper .widget a` بالوزن نفسِه (0,2,1) — وعند التساوي
   يفوز **الأخيرُ في المستند**، وهو المحقونُ سطريّاً دائماً لأنّه يُطبع بعد
   الأوراق. فقِيس اللونُ الفعليُّ `#999` على `--teal-800` = **3.29:1**، وهو
   إخفاقُ 1.4.3 من المستوى AA (‏الحدّ 4.5).

   ⟵ والعلاجُ محدِّدٌ أعمقُ لا `!important`: إضافةُ `.footer-widgets` تجعله
     (0,3,1) فيغلب بالوزن. و`!important` كان سيغلب كذلك، لكنّه يُغلق البابَ
     أمام أيّ تخصيصٍ لاحقٍ في حالةٍ لا تحتاجه.

   والتباينُ بعد الإصلاح: `--teal-100` (‏#C6EDE5) على `--teal-800` (‏#075043)
   = 9.8:1 — يمرّ AAA. */
.footer-wrapper a,
.footer-wrapper .footer-widgets .widget a,
.footer-wrapper .footer-absolute a {
	color: var(--teal-100);
	text-decoration: none;
	transition: color var(--dur-base, .2s) var(--ease, ease);
}

.footer-wrapper a:hover,
.footer-wrapper a:focus-visible,
.footer-wrapper .footer-widgets .widget a:hover,
.footer-wrapper .footer-widgets .widget a:focus-visible {
	color: var(--neutral-0);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* عناوينُ ودجات التذييل — أبيضُ خالصٌ على الداكن، ووزنٌ يفصلها عن البنود. */
.footer-wrapper .footer-widgets .widget-title,
.footer-wrapper .footer-widgets .widget h3,
.footer-wrapper .footer-widgets .widget h4,
.footer-wrapper .widget-title {
	color: var(--neutral-0);
	font-weight: 700;
	font-size: var(--fs-lg);
	margin-bottom: var(--sp-3, .75rem);
}

/* ── الترويسة — سطحٌ أبيضُ بحدٍّ سفليٍّ رفيع ───────────────────────────── */
.header,
.header .header-wrapper {
	background: var(--color-surface);
}

.header .header-wrapper {
	border-bottom: 1px solid var(--color-border);
}

/* ── الودجاتُ الجانبيّة — سطحٌ فاتحٌ لا صندوقٌ بلا هويّة ─────────────────── */
.widget {
	color: var(--color-text);
}

.widget-title {
	color: var(--color-text);
	font-weight: 700;
}

/* ── أهدافُ اللمس في التذييل ───────────────────────────────────────────────
   ⚠️ والحشوُ رأسيٌّ لا `min-height`: الأخيرةُ تكبّر الصندوقَ ولا تكبّر المنطقةَ
     القابلةَ للنقر داخل الرابط النصّيّ. المعيارُ 24×24 (‏2.5.8 AA). */
.footer-wrapper .footer-widgets .widget_nav_menu li a {
	display: inline-block;
	padding-block: 6px;
}

/* ═════════════════════════════════════════════════════════════════════════
   ㊹ شبكةُ المتجر على الجوّال — عمودان لا عمودٌ واحد
   ─────────────────────────────────────────────────────────────────────────
   ⚠️ **الأبُ ينزع `woocommerce-smallscreen.css`** (قِيس حيّاً على `/shop/`:
   الأوراقُ المحمَّلة `woocommerce-layout` و`woocommerce` وحدَهما). وشبكتُه
   بديلاً تعلن `xl-columns-3 lg-columns-3 md-columns-3` — و**لا `sm` ولا `xs`**.
   فالبطاقةُ تحت 768px تأخذ `col-12` أي `flex: 0 0 100%` — عمودٌ واحدٌ بعرض
   355px على شاشةِ 375 (مقيس).

   ═══ ولماذا يهمّ ═══

   عمودٌ واحدٌ يضاعف طولَ الصفحة، فيبعد أوّلَ منتجٍ قابلٍ للضغط. وهي العلّةُ
   عينُها التي شُخِّصت في متجرٍ شقيقٍ على القالب نفسِه: أوّلُ منتجٍ عند
   **6,468px** (ثماني شاشاتِ جوّال)، والقمعُ ينهار قبل صفحة المنتج.

   وعمودان هو المعيارُ في تجارة الجوّال، وهو ما يعرضه ذلك المتجرُ اليوم.

   ⟵ والحدُّ 767px لا 768: نقطةُ Bootstrap 4 عند الأب `md` تبدأ من 768،
     فالقاعدةُ تقف **دونها** ولا تنازعها.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.products .col.product-cat-wrap {
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* والفجوةُ تضيق قليلاً: بطاقتان في 375px تحتاجان كلَّ بكسل. */
	.products.row-gutters-7_5 {
		--ggen-grid-gutter: 5px;
	}

	/* عنوانُ البطاقة يصغر درجةً فلا ينكسر إلى ثلاثة أسطرٍ في نصف العرض. */
	.products .col.product-cat-wrap .product-small .box-text .name a {
		font-size: var(--fs-sm);
		line-height: 1.5;
	}
}

/* ودون 360px يعود العمودُ الواحد: بطاقةٌ بعرض 165px تُخفي صورةَ المنتج قبل
   أن توفّر شيئاً. */
@media (max-width: 359px) {
	.products .col.product-cat-wrap {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   ㊺ قراران بالترك — يُوثَّقان لأنّ غيابَهما يُقرأ نسياناً
   ─────────────────────────────────────────────────────────────────────────

   ❶ **لا زرَّ «أضف إلى السلّة» في بطاقة الحلقة.**

   الأبُ لا يطبعه إطلاقاً (مقيس: `.product-small .add_to_cart_button` ⇒ **صفر**
   على الرئيسية و`/shop/`). وبطاقتُه تعتمد بديلاً زرَّ «عرض المنتج» الذي يظهر
   بالتحويم — وقد نُقل من لافين في `product-cards.css` (‏`::after` على
   `.box-image`).

   ⟵ فإعادةُ زرِّ السلّة بخطّافٍ تصنع **دعوتين متنافستين** في بطاقةٍ واحدة،
     وهو العطلُ عينُه الذي عالجه القسمُ ⓲ أعلاه («دعوتان متساويتان لا دعوةَ
     فيهما»). والقرار: تبقى دعوةٌ واحدةٌ واضحة.

   ⚠️ ونتيجتُه أنّ قواعدَ القسم ⓲ الخاصّةَ بزرِّ السلّة **خاملةٌ** تحت هذا الأب
     — لا تضرّ، ولا تُحذف: هي مرجعُ الهرميّة إن أُعيد الزرُّ يوماً.

   ❷ **لا أنماطَ لمفردات `ggen-merchandising`.**

   المحرّكُ (‏984 سطراً) يُصدر `.ggen-product-card` و`.ggen-products__grid` و
   `.ggen-section__head` و`.ggen-section__more`. وقِيس على الرئيسيّة الحيّة:
   **صفرُ عنصرٍ لكلٍّ منها** — الكتلةُ غيرُ مستعملةٍ في محتوى الصفحة اليوم،
   والرئيسيّةُ تُبنى من كتل ووردبريس و`ggen-bundles-*` و`ggen-home-*` وكلُّها
   منسَّقةٌ فيما سبق.

   ⟵ فكتابةُ أنماطٍ لها الآن قواعدُ لسطحٍ لا يراه أحد. وحين تُدرَج الكتلةُ في
     صفحةٍ يُعاد القياسُ وتُكتب حينَها.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════
   ㊻ قائمةُ الأقسام — منسدلةٌ بنمط لافين على walker الأب
   ─────────────────────────────────────────────────────────────────────────
   الشجرةُ تُحقَن في `inc/mega-menu.php`، والترميزُ من walker الأب
   (`ul.nav-dropdown` للمستوى الأوّل، `ul.nav-column` لما تحته). فهذا القسمُ
   تنسيقٌ خالصٌ لا بناء.

   🔴 **والعطلُ الأوّلُ صنعتُه أنا:** ضبطتُ `header_top_text_color` على الأبيضِ
   في الخريطة (القسم ⑦ من `functions.php`) — وهو صحيحٌ للشريط العلويِّ الداكن.
   لكنّ المنسدلةَ تنسدل **من** ذلك الشريط وترث لونَه، وخلفيّتُها بيضاء.
   فقِيس: `color: rgb(255,255,255)` على `background: rgb(255,255,255)` —
   نصٌّ **غيرُ مرئيٍّ إطلاقاً**، تباينُ 1:1.
   ⟵ فيُعاد تعيينُ اللون داخل المنسدلة صراحةً، ولا يُترك للوراثة.

   ═══ ونمطُ لافين: زاويةٌ وظلٌّ ناعمٌ بدل الحدّ الخشن ═══

   ظلُّ الأب `0 0 4px rgba(0,0,0,.25)` هالةٌ رماديّةٌ متساويةُ الاتّجاه تقرأ
   حدّاً لا ارتفاعاً. ونمطُ لافين ظلٌّ **موجَّهٌ لأسفل** بانتشارٍ أوسعَ وعتامةٍ
   أقلّ — يقرأ لوحاً يعلو الصفحةَ لا صندوقاً مرسوماً عليها.
   ═════════════════════════════════════════════════════════════════════════ */

.topmenu .nav-dropdown,
.topmenu .nav-column {
	background: var(--color-surface);
	border-radius: var(--ggen-radius-button, 10px);
	border: 1px solid var(--color-border);
	box-shadow: 0 14px 32px rgba(45, 45, 45, .14);
	padding: var(--sp-2, .5rem) 0;
	min-width: 240px;
}

/* ⟵ ولا يُورَث لونُ الشريط العلويّ: المنسدلةُ سطحٌ فاتحٌ مستقلّ. */
.topmenu .nav-dropdown a,
.topmenu .nav-column a,
.topmenu .nav-dropdown li > a,
.topmenu .nav-column li > a {
	color: var(--color-text);
	display: block;
	padding: 9px var(--sp-4, 1rem);
	font-size: var(--fs-sm);
	line-height: 1.6;
	white-space: nowrap;
	transition: background-color var(--dur-base, .2s) var(--ease, ease),
	            color var(--dur-base, .2s) var(--ease, ease);
}

.topmenu .nav-dropdown a:hover,
.topmenu .nav-dropdown a:focus-visible,
.topmenu .nav-column a:hover,
.topmenu .nav-column a:focus-visible {
	background: var(--teal-50);
	color: var(--teal-700);
}

/* ── عدّادُ المنتجات ───────────────────────────────────────────────────────
   رقمٌ باهتٌ يفصله عن الاسم بمسافةٍ لا بفاصل. و`aria-hidden` عليه في الترميز:
   «مستلزمات الحيوانات الأليفة ٩٣٧» تُقرأ على قارئ الشاشة «تسعمئة وسبعة
   وثلاثون» بلا سياق — والرقمُ زخرفةٌ للعين لا معلومةٌ للسمع. */
.topmenu .ggen-mega-count {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: 400;
	margin-inline-start: var(--sp-2, .5rem);
	font-variant-numeric: tabular-nums;
}

.topmenu .nav-dropdown a:hover .ggen-mega-count,
.topmenu .nav-column a:hover .ggen-mega-count {
	color: var(--teal-600);
}

/* ── وسهمٌ يُعلن أنّ للعنصر أبناءً ────────────────────────────────────────
   ⚠️ والهروبُ السداسيّ لا المحرفُ الخام: مصغّرُ CSS قصّ محرفاً متعدّدَ البايت
     من `content:` في هذا المشروع سلفاً فقتل تفسيرَ الورقة المدموجة كلَّها بعد
     تلك النقطة. النمطُ نفسُه المعتمد في `product-cards.css`. */
.topmenu > li:has(> ul) > a::after {
	content: "\2039";
	display: inline-block;
	margin-inline-start: 6px;
	transform: rotate(-90deg);
	font-size: 1.1em;
	line-height: 1;
	opacity: .7;
}

html[dir="ltr"] .topmenu > li:has(> ul) > a::after {
	content: "\203A";
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.topmenu .nav-dropdown a,
	.topmenu .nav-column a {
		transition: none;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   ㊼ أقسامُ الرئيسية — تقسيمُ لافين بتوكنات الجيل الأخضر
   ─────────────────────────────────────────────────────────────────────────
   الترميزُ من `inc/home-sections.php`، والتشريحُ **مقيسٌ عن `lavin.fashion`
   حيّاً** لا مستنتَجاً:

     الرأس    flex · محاذاةٌ وسطى · العنوان 20px/700 · شَرطةٌ تمتدّ 1px ·
              رابطُ «الكلّ» 13.5px/700 بلا التفاف
     الشارة   12px/700 · تباعدُ أحرفٍ 0.48px
     الوصف    13.5px · ارتفاعُ سطرٍ 1.75 · مدىً أقصى ~507px · فوقه 8px
     القسم    فوقه 32px

   ⚠️ **وتصحيحٌ لازمٌ في التحويل:** شارةُ لافين ذهبيّةٌ داكنة (`#8a6c32`) تمرّ
     AA على أبيض. ونظيرُها الدلاليُّ عندنا `--harvest` (‏#D98A0B) **لا يمرّ**:
     2.85:1 على أبيض — ونصُّ الشارة 12px، أي أصغرُ ما يحتاج 4.5. فاستُعمل
     `--leaf-700` (‏#467345 ≈ 6.4:1): لونٌ ثانٍ من العائلة يميّز الشارةَ عن
     العنوان بلا كسرِ التباين.
     ⟵ **والدرس: النقلُ بالدور يفشل حين يختلف مدى السطوع بين اللوحتين.**
       لافين دافئةٌ متوسطةُ السطوع، والجيلُ الأخضر لكنتُه فاتحة. فالدورُ يُنقل
       والقيمةُ تُقاس.
   ═════════════════════════════════════════════════════════════════════════ */

.ggen-home-rails > * + * {
	margin-top: 32px;
}

.ggen-rail,
.ggen-gateway {
	margin-top: 32px;
}

/* ── رأسُ القسم — واحدٌ للأنماط الثلاثة ────────────────────────────────── */
.ggen-rail .block-title-wrap,
.ggen-gateway .block-title-wrap,
.ggen-bundles-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
}

.ggen-rail-eyebrow {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--leaf-700);
	white-space: nowrap;
}

/* الشارةُ تُفصل عن العنوان بنقطةٍ لا بمسافةٍ وحدَها — فتُقرأ وحدةً مستقلّةً
   حتّى حين يلتفّ السطرُ على شاشةٍ ضيّقة. */
.ggen-rail-eyebrow::after {
	content: "\2022";
	margin-inline-start: 10px;
	opacity: .45;
	font-weight: 400;
}

.ggen-rail .block-title,
.ggen-gateway .block-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
	white-space: nowrap;
}

/* الشَّرطةُ تمتدّ لتملأ ما بين العنوان والرابط — وهي ما يجعل الأقسامَ تُقرأ
   إيقاعاً واحداً مهما اختلف طولُ عناوينها. */
.ggen-rail .block-title-divider,
.ggen-gateway .block-title-divider,
.ggen-bundles-divider {
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-border);
	min-width: 12px;
}

.ggen-rail-all,
.ggen-bundles-all {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--teal-700);
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--dur-base, .2s) var(--ease, ease);
}

.ggen-rail-all:hover,
.ggen-rail-all:focus-visible,
.ggen-bundles-all:hover {
	color: var(--teal-800);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ggen-rail-sub {
	font-size: var(--fs-sm);
	line-height: 1.75;
	color: var(--color-text-muted);
	margin: 8px 0 0;
	max-width: 62ch;
}

/* ── شبكةُ الرفّ ───────────────────────────────────────────────────────────
   ⚠️ **ولا كاروسيل.** لافين تستعمل Flickity، وهو يخفي ما بعد البطاقة الرابعة
     خلف سحبٍ أفقيٍّ لا يُعلن عن نفسه — وقد كلّف ذلك قمعَها ما كلّف. والشبكةُ
     تعرض الثمانيةَ دفعةً وتلتفّ على الجوّال، فلا شيءَ مخفيّ. */
.ggen-rail-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 18px;
}

.ggen-rail-grid > .product-small,
.ggen-rail-grid > .product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* ── بوّابةُ الأقسام ─────────────────────────────────────────────────────── */
.ggen-gateway-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 18px;
}

.ggen-tile {
	position: relative;
	display: block;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	text-decoration: none;
	transition: box-shadow var(--dur-base, .3s) var(--ease, ease),
	            transform var(--dur-base, .3s) var(--ease, ease),
	            border-color var(--dur-base, .3s) var(--ease, ease);
}

.ggen-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(14, 164, 137, .16);
	border-color: var(--teal-200);
}

.ggen-tile:focus-visible {
	outline: 2px solid var(--teal-600);
	outline-offset: 2px;
}

.ggen-tile-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ggen-gradient-soft, linear-gradient(225deg, #E8F7F4, #F0F6EF));
	background-size: 62% auto;
	background-position: center 42%;
	background-repeat: no-repeat;
}

/* نصُّ البلاطة فوق تدرّجٍ مرسومٍ لا فوق شريطٍ مصمت — نمطُ لافين. */
.ggen-tile-body {
	display: block;
	padding: 12px 14px 14px;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
}

.ggen-tile-name {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.5;
}

.ggen-tile-count {
	display: block;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-top: 3px;
}

/* ── الجوّال ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
	.ggen-rail-grid,
	.ggen-gateway-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.ggen-rail-grid,
	.ggen-gateway-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	/* العنوانُ يفقد `nowrap` على الضيّق: قطعُ عنوانٍ أسوأُ من التفافه. */
	.ggen-rail .block-title,
	.ggen-gateway .block-title {
		white-space: normal;
	}

	.ggen-rail .block-title-wrap,
	.ggen-gateway .block-title-wrap {
		flex-wrap: wrap;
		gap: 6px 10px;
	}

	/* والشَّرطةُ تُخفى: سطرٌ ملتفٌّ لا يحتاج مالئاً بل يحتاج مساحة. */
	.ggen-rail .block-title-divider,
	.ggen-gateway .block-title-divider {
		display: none;
	}

	.ggen-rail,
	.ggen-gateway,
	.ggen-home-rails > * + * {
		margin-top: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ggen-tile,
	.ggen-rail-all {
		transition: none;
	}
	.ggen-tile:hover {
		transform: none;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   ㊽ التذييل — منطقةٌ ثانيةٌ كما في لافين
   ─────────────────────────────────────────────────────────────────────────
   تذييلُ لافين **منطقتا ودجاتٍ** يفصل بينهما خطّ: الأولى روابطُ وتواصل،
   والثانيةُ وسائلُ الدفع وشاراتُ الثقة. وتذييلُ الجيل الأخضر كان منطقةً
   واحدةً بودجتَي قائمة.

   والترميزُ من `inc/footer.php` على خطّاف `adswth_after_footer`، بأصناف الأب
   نفسِها (`footer-widgets sidebar-footer-2`) ليرثَ تنسيقَه.
   ═════════════════════════════════════════════════════════════════════════ */

.ggen-footer-trust {
	border-top: 1px solid var(--teal-700);
	margin-top: var(--sp-2, .5rem);
}

.ggen-footer-trust .row {
	align-items: center;
	gap: var(--sp-4, 1rem) var(--sp-6, 1.5rem);
}

.ggen-foot-label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--teal-100);
	margin-bottom: 8px;
	letter-spacing: .03em;
}

/* ── وسائلُ الدفع ─────────────────────────────────────────────────────────
   ⚠️ والأيقوناتُ على **بطاقةٍ بيضاء** لا على التذييل الداكن مباشرةً: شعاراتُ
     المزوّدين مصمَّمةٌ لخلفيّةٍ فاتحة، ووضعُها على تيلٍ داكنٍ يطمس تفاصيلها
     ويخالف إرشاداتِ استعمالها. */
.ggen-pay-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ggen-pay-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	height: 34px;
	padding: 0 8px;
	background: var(--neutral-0);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.ggen-pay-item img {
	display: block;
	max-height: 22px;
	width: auto;
}

.ggen-pay-text {
	font-size: 11px;
	font-weight: 700;
	color: var(--neutral-900);
	white-space: nowrap;
	letter-spacing: .01em;
}

/* ── شاراتُ الثقة ───────────────────────────────────────────────────────── */
.ggen-trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ggen-trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 180px;
}

.ggen-trust-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--teal-700);
	position: relative;
}

/* أيقوناتٌ بـ`::after` لا بملفّات: ثلاثةُ رموزٍ لا تستحقّ ثلاثةَ طلباتِ شبكة.
   ⚠️ والهروبُ السداسيّ لا المحرفُ الخام — مصغّرُ CSS قصّ محرفاً متعدّدَ
     البايت في هذا المشروع سلفاً فقتل ورقةً مدموجةً كاملة. */
.ggen-trust-icon::after {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 13px;
	color: var(--teal-50);
	line-height: 1;
}

.ggen-trust-icon--shield::after { content: "\1F512"; }  /* قفل */
.ggen-trust-icon--truck::after  { content: "\1F69A"; }  /* شاحنة */
.ggen-trust-icon--badge::after  { content: "\2713";  }  /* صحّ */

.ggen-trust-title {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--neutral-0);
	line-height: 1.4;
}

.ggen-trust-sub {
	display: block;
	font-size: var(--fs-xs);
	color: var(--teal-100);
	line-height: 1.5;
}

/* ── سطرُ الحقوق ─────────────────────────────────────────────────────────── */
.footer-absolute .footer-absolute-secondary {
	font-size: var(--fs-xs);
	opacity: .85;
	margin-top: 4px;
}

@media (max-width: 767px) {
	.ggen-trust-list {
		gap: var(--sp-3, .75rem);
	}
	.ggen-trust-item {
		min-width: 100%;
	}
	.ggen-footer-trust .row {
		gap: var(--sp-4, 1rem);
	}
}

/* ── أعمدةُ التذييل المكمَّلة (㊽ب) ───────────────────────────────────────── */
.ggen-foot-fill .row {
	gap: var(--sp-5, 1.25rem) 0;
}

.ggen-foot-col .widget-title {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--neutral-0);
	margin: 0 0 10px;
}

.ggen-foot-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ggen-foot-links li + li {
	margin-top: 2px;
}

/* الحشوُ رأسيٌّ لا `min-height`: هدفُ اللمس يكبر مع الرابط لا مع الصندوق. */
.ggen-foot-links a {
	display: inline-block;
	padding-block: 5px;
	font-size: var(--fs-sm);
	color: var(--teal-100);
	text-decoration: none;
	line-height: 1.5;
}

.ggen-foot-links a:hover,
.ggen-foot-links a:focus-visible {
	color: var(--neutral-0);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ggen-foot-links a span[dir="ltr"] {
	display: inline-block;
	margin-inline-start: 6px;
	opacity: .85;
	font-size: var(--fs-xs);
}

/* ── البطاقةُ الترويجيّةُ في المنسدلة (㊻ب) ───────────────────────────────────
   منسدلةُ لافين ليست روابطَ فحسب: في طرفها بطاقةٌ بصورةٍ وشارةٍ وعنوانٍ ودعوة.
   وهي ما يحوّل القائمةَ من فهرسٍ إلى واجهةِ عرض.

   والترميزُ يُحقن **عنصرَ قائمةٍ** لا ترميزاً خارجها (الـwalker يبني الـ`<ul>`
   من العناصر وحدَها) — فتُنزع عنه هيئةُ البند: لا حشوَ رابطٍ ولا سطرَ نصّ. */
.topmenu .nav-dropdown > li.ggen-mega-promo,
.topmenu .nav-column > li.ggen-mega-promo {
	margin-top: var(--sp-2, .5rem);
	padding: var(--sp-2, .5rem) var(--sp-3, .75rem) var(--sp-3, .75rem);
	border-top: 1px solid var(--color-border);
}

/* ⚠️ والمحدِّدُ يصعد إلى `> a` مباشرةً: قواعدُ الروابط في ㊻ تعطي كلَّ رابطٍ
   في المنسدلة حشواً وسطراً — وهي هنا خطأ، فالبطاقةُ صندوقٌ لا بند. */
.topmenu .ggen-mega-promo > a,
.topmenu .ggen-mega-promo > .ggen-mega-card {
	display: block;
	padding: 0;
	white-space: normal;
}

.ggen-mega-card {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	text-decoration: none;
	transition: box-shadow var(--dur-base, .25s) var(--ease, ease),
	            transform var(--dur-base, .25s) var(--ease, ease),
	            border-color var(--dur-base, .25s) var(--ease, ease);
}

.ggen-mega-card:hover,
.ggen-mega-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(14, 164, 137, .16);
	border-color: var(--teal-200);
	background: var(--color-surface);
}

.ggen-mega-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--teal-50);
}

.ggen-mega-card__body {
	display: block;
	padding: 10px 12px 12px;
}

.ggen-mega-card__eyebrow {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--leaf-700);
	letter-spacing: .03em;
	margin-bottom: 3px;
}

.ggen-mega-card__title {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.5;
}

.ggen-mega-card__cta {
	display: inline-block;
	margin-top: 7px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--teal-700);
}

.ggen-mega-card:hover .ggen-mega-card__cta {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ggen-mega-card { transition: none; }
	.ggen-mega-card:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   ㊾ الطيّةُ الأولى — سلايدرٌ وعمودُ فئاتٍ وشريطُ مزايا
   ─────────────────────────────────────────────────────────────────────────
   الأقسامُ الثلاثةُ من قوالب الأب، مُفعَّلةٌ بمُرشِّحاتٍ في `inc/front-page.php`.
   وهذا القسمُ يعطيها لغةَ العلامة — الأبُ يرسمها بألوانه ونسبه هو.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── الترويسة: ارتفاعٌ مضغوطٌ يليق بالطيّة الأولى ──────────────────────────
   ⚠️ كانت 219 بكسلاً حيث الترويسةُ المرجعيّةُ نحوُ 126 — والفارقُ كلُّه شعارٌ
     نسبتُه عموديّة. بُدِّل الملفُّ إلى الأفقيّ، ويُحدّ الارتفاعُ هنا احتياطاً
     لئلّا يعود التضخّمُ بتبديلِ ملفٍّ لاحقاً. */
.header .site-logo,
.header .site-logo-wrap img {
	max-height: 62px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ── عمودُ الفئات الجانبيّ ─────────────────────────────────────────────────
   صندوقٌ أبيضُ بحدٍّ وزاويةٍ يوازي السلايدرَ ارتفاعاً — لا قائمةً عائمةً على
   بياض الصفحة. */
.slider-menu-wrap {
	flex: 0 0 268px;
	max-width: 268px;
	padding-inline-end: 14px;
}

.slider-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	height: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	overflow: hidden;
}

.ggen-slider-menu-title {
	display: block;
	padding: 10px 16px 12px;
	margin-bottom: 4px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
}

.slider-menu > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 16px;
	font-size: var(--fs-sm);
	color: var(--color-text);
	text-decoration: none;
	line-height: 1.5;
	transition: background-color var(--dur-base, .2s) var(--ease, ease),
	            color var(--dur-base, .2s) var(--ease, ease);
}

.slider-menu > li > a:hover,
.slider-menu > li > a:focus-visible {
	background: var(--teal-50);
	color: var(--teal-700);
}

/* سهمٌ لمن له أبناء — يُعلن أنّ خلفَه قائمة.
   ⚠️ والهروبُ السداسيّ لا المحرفُ الخام (مصيدةُ مصغّر CSS الموثّقة). */
.slider-menu > li:has(> ul) > a::after {
	content: "\2039";
	font-size: 1.15em;
	line-height: 1;
	opacity: .55;
}

html[dir="ltr"] .slider-menu > li:has(> ul) > a::after {
	content: "\203A";
}

/* ── السلايدر ─────────────────────────────────────────────────────────────
   والنصُّ يُحاذى بدايةَ السطر لا وسطَه: عنوانٌ متوسّطٌ فوق صورةٍ عريضةٍ يقرأ
   لافتةً، وبدايةُ السطر تقرأ رسالة. */
.main-slider,
.main-slider-wrap {
	border-radius: 10px;
	overflow: hidden;
}

.main-slider .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.main-slider .caption-wrap,
.main-slider .main-banner-text {
	text-align: start;
}

.main-slider .flickity-page-dots .dot {
	background: var(--neutral-0);
	opacity: .45;
}

.main-slider .flickity-page-dots .dot.is-selected {
	opacity: 1;
}

/* ── شريطُ المزايا ─────────────────────────────────────────────────────────
   أيقونةٌ في قرصٍ فاتحٍ ثمّ نصّان — النسبةُ نفسُها في المتجر المرجعيّ. */
.features-wrap {
	background: var(--color-bg-subtle);
	border-radius: 10px;
	padding: var(--sp-4, 1rem) var(--sp-2, .5rem);
}

.features-wrap .feature {
	gap: 12px;
	justify-content: flex-start;
	text-align: start;
}

.features-wrap .feature-image {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	background: var(--teal-50);
	border-radius: 50%;
}

.features-wrap .feature-image img {
	width: 24px;
	height: 24px;
}

.features-wrap .feature-text .title {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 2px !important;
	line-height: 1.4;
}

.features-wrap .feature-text .text {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* ── عنوانُ الصفحة على الرئيسية: يُخفى بصريّاً ولا يُحذف ──────────────────
   ⚠️ **وليس مسارَ تنقّلٍ كما بدا:** قِيس أنّه `<h1 class="page-title">` نصُّه
     «الرئيسية». وحذفُه بـ`display:none` يترك المستندَ **بلا عنوانٍ رئيسٍ
     إطلاقاً** — إخفاقُ 1.3.1 و2.4.6، ويكسر تسلسلَ العناوين لقارئ الشاشة.
   ⟵ فيُخفى بصريّاً بنمطِ `screen-reader-text` ويبقى في شجرة الوصوليّة.
     وهو سطرٌ لا يخبر الزائرَ بشيءٍ على الرئيسيّة، ويزيح الطيّةَ بارتفاعه. */
.home .page-title,
.home .breadcrumb,
.home .breadcrumbs,
.home .woocommerce-breadcrumb {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── العمودُ يوازي السلايدرَ ارتفاعاً ──────────────────────────────────────
   قِيس: العمودُ 585 بكسلاً والسلايدرُ 440 — فيتدلّى تحته ويكسر الصفَّ.
   والعلاجُ حدٌّ أقصى بارتفاع السلايدر ومسارُ تمريرٍ عند الفيض، لا حذفُ بنود:
   القائمةُ تُبنى من شجرةٍ حيّةٍ وقد تطول أو تقصر. */
.ggen-fold .row {
	align-items: stretch;
}

.slider-menu {
	max-height: 440px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.slider-menu::-webkit-scrollbar {
	width: 6px;
}

.slider-menu::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 3px;
}

@media (max-width: 1199px) {
	/* الأبُ يخفي العمودَ دون xl أصلاً (`d-none d-xl-block`) — والسلايدرُ
	   يأخذ العرضَ كلَّه، فلا قاعدةَ لازمة سوى ضبطِ الحشو. */
	.ggen-fold .main-slider-wrap {
		margin-inline: 0;
	}
}

@media (max-width: 767px) {
	.features-wrap {
		padding: var(--sp-3, .75rem);
	}
	.main-slider,
	.main-slider-wrap {
		border-radius: 8px;
	}
}