/* ==========================================================================
   تنسيقات النسخة العربيّة فقط  —  من اليمين إلى اليسار
   --------------------------------------------------------------------------
   لا يُحمَّل هذا الملفّ إلّا حين تكون لغة الصفحة عربيّة (‏is_rtl).
   Blocksy يتكفّل بقلب الاتجاه أصلاً (main-rtl.min.css)، وهذا الملفّ
   مخصّص لما يحتاج ضبطاً إضافيّاً: الخطّ العربيّ، والمسافات، والأرقام.
   ========================================================================== */

/* ==========================================================================
   1. الخطّ العربيّ
   --------------------------------------------------------------------------
   Amiri للعناوين مقابل Fraunces، و IBM Plex Sans Arabic للنصوص مقابل Manrope.
   الخطّان اللاتينيّان يبقيان أوّلَ المكدّس، فتُرسَم «Velora» و «XS» و «EGP»
   بخطّ البراند حتّى داخل جملة عربيّة — والحروف العربيّة تسقط تلقائيّاً
   إلى الخطّ العربيّ التالي لأنّ Instrument Sans و Fraunces لا يحملانها.
   ========================================================================== */

:root {
	--velora-serif: "Fraunces", "Amiri", "Noto Naskh Arabic", Georgia, serif;
	--velora-sans: "Instrument Sans", "IBM Plex Sans Arabic", system-ui, -apple-system,
		"Segoe UI", Tahoma, sans-serif;
}

body,
button,
input,
select,
textarea,
.ct-header-text,
.woocommerce-ordering select {
	font-family: var(--velora-sans);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.velora-mantra,
.velora-manifesto-q,
.velora-value-t,
.velora-foot-logo,
.woocommerce-loop-product__title,
.wp-block-heading {
	font-family: var(--velora-serif);
}

/* ==========================================================================
   2. الإيقاع الرأسيّ والتباعد
   --------------------------------------------------------------------------
   العربيّة تحتاج ارتفاع سطر أكبر لأنّ حروفها ذات نتوءات علويّة وسفليّة،
   ولا تقبل تباعد الحروف إطلاقاً — يقطع اتّصال الكلمة.
   ========================================================================== */

body {
	line-height: 1.85;

	/* «anum» ميزة OpenType تبدّل 0-9 بـ ٠-٩ تحت lang="ar". بعض الخطوط تفعّلها
	   وحدها — نغلقها صراحةً فتبقى الأرقام غربيّة في الأسعار والمقاسات والشارات. */
	font-variant-numeric: lining-nums;
	font-feature-settings: "anum" 0;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	line-height: 1.45;
}

/* إلغاء تباعد الحروف في كلّ النصّ العربيّ — والسالب منه أضرّ، لأنّه يسحق
   وصلات الحروف. العنوان الرئيسيّ يستعمل ‎-0.01em‎ في التصميم اللاتينيّ. */
.velora-mantra,
.velora-hero-sub,
.velora-hero-cap,
.velora-section-head h2,
.velora-manifesto-q,
.velora-manifesto-cite,
.velora-principles,
.velora-cols h3,
.velora-value-t,
.velora-offer h2,
.velora-contact h2,
.velora-eyebrow,
.velora-term-title,
.velora-foot-logo,
.velora-foot-col h4,
.velora-foot-bottom,
.velora-news-consent,
.velora-minicart-title,
.velora-minicart-count,
.velora-minicart-note,
.wp-block-button__link,
.wp-element-button,
.ct-menu-link,
.woocommerce-loop-product__title,
.velora-empty,
.widget-title,
button,
.button {
	letter-spacing: 0 !important;
}

/* اسم البراند في الهيدر يبقى لاتينيّاً بتباعده الأصليّ — هو جزء من اللوجو. */
.site-title,
.site-title a {
	letter-spacing: 0.04em !important;
	font-family: "Fraunces", Georgia, serif;
}

/* ==========================================================================
   3. إصلاحات الاتجاه
   ========================================================================== */

/* لا مائل في الخطّ العربيّ — الكلمة المميّزة في العنوان تبقى بلونها بلا ميل. */
.velora-mantra em,
.velora-manifesto-q,
.velora-manifesto-q em {
	font-style: normal;
	font-family: var(--velora-serif);
}

/* علامة الاقتباس الزخرفيّة: تُرجَم الحرف نفسه إلى ” في القاموس (يفتح من اليمين)،
   فلا نقلبه بـ transform — الحرف الحقيقيّ أنظف من صورة معكوسة. */

/* الأرقام غربيّة (0-9) في الأسعار والشارات — المعيار في مصر والخليج،
   ويوافق مقاسات XS–XL وشارة الخصم. */
.woocommerce-Price-amount,
.price,
.onsale,
.wc-block-components-formatted-money-amount,
.price_slider_amount .price_label,
.velora-lang-i {
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1;
}

/* الشكل المطلوب في العربيّة: «1,450.00 ج.م» بترتيب القراءة العربيّة —
   الرقم أوّلاً على اليمين، ثمّ «ج.م» بعده على يساره. وهو عُرف كتابة الأسعار
   في مصر والخليج.

   ⚠️ ولا تخلط بين «الأوّل» و«الأيسر»: في صفحة RTL أوّلُ ما يُقرأ هو الأيمن.
   قياس البكسل من اليسار يوهم بالعكس تماماً — وهو ما أضاع وقتاً طويلاً هنا.

   ولسعرٍ واحد ثلاثة ترميزات في هذا الموقع، لكلٍّ علاجه:
   - .wc-block-components-formatted-money-amount : سلّة الكتل والدفع — عقدة
     نصّيّة واحدة ترسمها جافاسكربت، وتنسيقها في ووكومرس white-space و display فقط.
   - .price_slider_amount .price_label .from/.to : شريط سعر الفلاتر — سبانات عارية.
   هذان يكفيهما `direction: ltr` لأنّهما بلا سمة `dir`، فتُطبَّق الخاصّيّة بلا
   منازع وتتّفق المتصفّحات. وبدونها يرثان RTL فيقفز الرمز إلى يسار الرقم،
   فتختلف سلّة الكتل عن بطاقات المتجر في الصفحة نفسها.
   - bdi (ما يطبعه wc_price)‏ : حالة خاصّة — انظر القاعدة التالية.

   والعزل لا يقلب ترتيب الأشقّاء، فطرفا نطاق السعر وزوج del/ins يبقيان كما هما. */
.wc-block-components-formatted-money-amount {
	direction: rtl;
	unicode-bidi: isolate;
}

/* تسميتا شريط الفلاتر: نفس معاملة bdi تماماً — حاوية flex وترتيبٌ صريح.
   (‏inc/currency.php يجعل الرمز عنصراً داخلهما بدل نصٍّ عارٍ.)‏ */
.price_slider_amount .price_label .from,
.price_slider_amount .price_label .to {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	direction: rtl;
}

/* ⚠️ وسم <bdi> حالةٌ خاصّة لا يكفيها ما سبق.
   ووكومرس يلفّ السعر بـ <bdi>، وهذا الوسم يحمل ضمناً `dir="auto"` أي «خمّن
   الاتّجاه من أوّل حرفٍ قويّ في المحتوى». وأوّل حرفٍ قويّ عندنا هو «ج» العربيّة،
   فيخمّن المتصفّح RTL ويقفز الرمز إلى يسار الرقم.

   و`direction: ltr` لا تكفي لردّه: المتصفّحات تختلف في أيّهما يغلب — سمة
   `dir="auto"` أم خاصّيّة CSS. فيخرج السعر صحيحاً في متصفّح ومقلوباً في آخر،
   وهو ما حدث فعلاً هنا (‏صحيح في كروم، مقلوب عند المالك).

   الحلّ: `inline-flex`. فيصير الرقم عنصراً والرمز عنصراً، ويرتّبهما التخطيط
   بترتيب الكود لا بخوارزميّة الاتّجاه — نتيجة واحدة في كلّ المتصفّحات.
   و`baseline` تُبقيهما على سطرٍ واحد كما لو كانا نصّاً عاديّاً. */
.woocommerce-Price-amount bdi {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	direction: rtl;
}


/* والرمز نفسه جزيرةٌ ثانية داخل الأولى.
   بلا هذا يبقى الترتيب رهنَ خوارزميّة يونيكود: حروف «ج.م» قويّة الاتّجاه،
   فتتفاعل مع الأرقام المجاورة وتتغيّر النتيجة بتغيّر ما قبلها. وبعزله يصير
   الرمز عند الخوارزميّة **كائناً محايداً** لا حروفاً، فيقف حيث وضعه ووكومرس
   في الكود — بعد الرقم — ولا يقفز. أي أنّ ترتيب الكود صار هو الترتيب البصريّ.
   (‏وداخل الجزيرة تُرسم «ج.م» عربيّةً سليمة من اليمين إلى اليسار.)‏ */
.woocommerce-Price-currencySymbol {
	order: 2;
	unicode-bidi: isolate;
}

/* شارة الخصم «-20%»: علامة السالب والنسبة محايدتان اتّجاهيّاً، فينقلبان في RTL
   ويظهران «20%-». نثبّت داخل الشارة اتّجاهاً لاتينيّاً معزولاً — والشارة نفسها
   تبقى في زاويتها المعكوسة الصحيحة. */
.onsale,
span.onsale {
	direction: ltr;
	unicode-bidi: isolate;
}

/* المقاسات لاتينيّة — نمنع أيّ قلب داخل أزرار المقاس. */
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item,
.velora-attr-size {
	direction: ltr;
}

/* ==========================================================================
   4. أقسام الرئيسيّة الجديدة والفوتر — الإيقاع الرأسيّ
   --------------------------------------------------------------------------
   أغلب التخطيط يتقلب وحده: الشبكات والفلكس تتبع اتّجاه الصفحة، والحدود
   والمسافات مكتوبة منطقيّة (inline-start / block-end) في `style.css`.
   الباقي هنا هو **ارتفاع السطر وحده**: قواعد القسم 2 تستهدف `body` و
   `h1…h6` بدقّة (0,0,1)، وقواعد الأقسام تستهدف أصنافاً بدقّة (0,1,0)
   فتغلبها — والعربيّة بارتفاع 1.04 تُقصّ نتوءاتها. فنعيدها بنفس دقّتها.
   ========================================================================== */

.velora-mantra { line-height: 1.34; }

.velora-manifesto-q { line-height: 1.55; }

.velora-hero-sub,
.velora-hero-cap,
.velora-section-head p,
.velora-value-d,
.velora-cols p,
.velora-principles,
.velora-foot-brand p,
.velora-offer p {
	line-height: 1.85;
}

.velora-manifesto-body > p { line-height: 1.9; }

/* الإيميل والرابط لاتينيّان دائماً — نمنع انقلابهما داخل الجملة العربيّة. */
.velora-news-row input[type="email"],
.velora-foot-social {
	direction: ltr;
	unicode-bidi: isolate;
}

/* اسم الحساب على انستجرام يُكتب لاتينيّاً، وسطر الحقوق يبدأ بالرمز © وهو
   محايد اتّجاهيّاً — نعزله حتّى لا يقفز الرمز إلى آخر السطر. */
.velora-foot-bottom > span:first-child {
	unicode-bidi: isolate;
}

/* ==========================================================================
   5. قائمة Store والإضافة للسلّة من البطاقة (القسمان 25 و 26 في style.css)
   --------------------------------------------------------------------------
   التخطيط كلّه مكتوب بالخصائص المنطقيّة فينقلب وحده. الباقي هنا: الأسهم،
   واتّجاه الخطّ الزاحف، والحروف الكبيرة وتباعدها (‏لا وجود لهما في العربيّة)،
   وارتفاع سطر العناوين العربيّة.
   ========================================================================== */

/* السهم يشير إلى الأمام — والأمام في العربيّة يسار */
.velora-store-arrow {
	scale: -1 1;
}

.velora-mega__heading .velora-store-arrow {
	translate: 4px 0;
}

.velora-mega__heading:hover .velora-store-arrow,
.velora-mega__heading:focus-visible .velora-store-arrow {
	translate: 0 0;
}

.velora-mega__all:hover .velora-store-arrow,
.velora-mega__all:focus-visible .velora-store-arrow {
	translate: -4px 0;
}

/* الخطّ الزاحف يبدأ من اليمين */
.velora-mega__heading > span::after,
.velora-mega__link::after {
	transform-origin: right;
}

/* لا حروف كبيرة ولا تباعد في العربيّة — التباعد يقطع اتّصال الحروف */
.velora-mega__all,
#offcanvas .velora-mstore .velora-mstore__all,
.velora-qa__legend,
.velora-qa__soldout,
.velora-toast .velora-toast__eyebrow {
	letter-spacing: 0;
	text-transform: none;
}

.velora-mega__all,
#offcanvas .velora-mstore .velora-mstore__all {
	font-size: 0.86rem;
}

.velora-qa__legend {
	font-size: 0.78rem;
}

.velora-qa__soldout,
.velora-toast .velora-toast__eyebrow {
	font-size: 0.8rem;
}

/* لا مائل في الخطّ العربيّ */
.velora-mega__caption {
	font-style: normal;
}

/* العناوين العربيّة تحتاج سطراً أعلى — Amiri نتوءاته طويلة */
.velora-mega__heading,
#offcanvas .velora-mstore .velora-mstore__heading,
.velora-mega__caption,
.velora-toast .velora-toast__title {
	line-height: 1.6;
}

/* المقاسات لاتينيّة (‏XS · M · XL) — لا قلب داخل الزرّ */
.velora-qa__chip-text {
	direction: ltr;
}

/* سهم قائمة الاختيار ينتقل إلى اليسار مع الحشو المنطقيّ */
.velora-qa__select {
	background-position: left 10px center;
}

/* ==========================================================================
   6. الطقم الكامل — البانر ولوحة الاختيار (القسم 28 في style.css)
   --------------------------------------------------------------------------
   التخطيط منطقيّ فينقلب وحده (‏الصورة يسار النصّ في العربيّة). الباقي هنا: لا
   حروف كبيرة ولا تباعد، وسطرٌ أعلى لعناوين Amiri، والمقاسات اللاتينيّة كما هي.
   ========================================================================== */

.velora-bundle__eyebrow,
.velora-bundle .velora-bundle__cta,
.velora-bundle-sheet__same-label,
.velora-bundle-sheet .velora-bundle-sheet__size,
.velora-bundle-sheet .velora-bundle-sheet__submit,
.velora-bundle-preview__label {
	letter-spacing: 0;
	text-transform: none;
}

.velora-bundle-sheet__same-label,
.velora-bundle-preview__label {
	font-size: 0.8rem;
}

/* عناوين Amiri نتوءاتها طويلة — 1.12 التصميم يقصّها */
.velora-bundle .velora-bundle__title,
.velora-bundle-sheet .velora-bundle-sheet__title,
.velora-bundle-piece .velora-bundle-piece__name {
	line-height: 1.5;
}

.velora-bundle .velora-bundle__desc,
.velora-bundle .velora-bundle__perks,
.velora-bundle-sheet__sub,
.velora-bundle-sheet__same-note,
.velora-bundle-sheet__msg {
	line-height: 1.8;
}

/* المقاسات لاتينيّة (‏S · M · XL) — لا قلب داخل الزرّ، كأزرار البطاقة */
.velora-bundle-sheet .velora-bundle-sheet__size {
	direction: ltr;
}