/*
Theme Name: Velora
Theme URI: https://velora-eg.net
Description: ثيم متجر Velora — ثيم ابن مبنيّ على Blocksy. كل تعديلات المتجر الخاصّة تُكتب هنا، فلا تضيع عند تحديث Blocksy.
Author: Velora
Author URI: https://velora-eg.net
Template: blocksy
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: velora-child
Domain Path: /languages
*/

/* ==========================================================================
   1. متغيّرات البراند
   --------------------------------------------------------------------------
   الأسماء مأخوذة من ملفّ التصميم velora-homepage.html، ومربوطة بلوحة ألوان
   Blocksy عشان يبقى فيه مصدر واحد للحقيقة: تغيّر اللون من المخصّص، يتغيّر هنا.

   الأسماء القديمة (cream / paper / burnt-d / caramel-d) باقية كمرادفات
   للأسماء الجديدة، عشان الكود الموجود في باقي الملفّ يشتغل بلا تعديل.
   ========================================================================== */
:root {
	/* --- لوحة التصميم الجديد --- */
	--velora-stone:      var(--theme-palette-color-7, #EFE7D8);
	--velora-stone-deep: var(--theme-palette-color-6, #E4D9C4);
	--velora-ink:        var(--theme-palette-color-3, #2A2119);
	--velora-bronze:     var(--theme-palette-color-2, #7C4A28);
	--velora-caramel:    #B9793E;
	--velora-taupe:      #CBBBA0;
	--velora-metal:      #9C7B4F;
	--velora-line:       rgba(42, 33, 25, 0.14);

	/* --- مرادفات الأسماء القديمة --- */
	--velora-cream:     var(--velora-stone);
	--velora-paper:     var(--velora-stone-deep);
	--velora-burnt-d:   var(--velora-ink);
	--velora-burnt:     var(--velora-bronze);
	--velora-caramel-d: var(--velora-bronze);
	--velora-ink-soft:  #696056;

	/* --- الخطوط --- */
	--velora-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--velora-sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* اللوجو الرسميّ — WebP أوّلاً ثمّ PNG، وثلاث كثافات للجوّال والتابلت.
	   المقاسات مولّدة من assets/brand/logo-master.png */
	--velora-logo: image-set(
		url("assets/brand/mark.webp")    type("image/webp") 1x,
		url("assets/brand/mark@2x.webp") type("image/webp") 2x,
		url("assets/brand/mark@3x.webp") type("image/webp") 3x,
		url("assets/brand/mark.png")     type("image/png")  1x,
		url("assets/brand/mark@2x.png")  type("image/png")  2x,
		url("assets/brand/mark@3x.png")  type("image/png")  3x);

	--velora-section-pad: clamp(72px, 9vw, 120px);
	--velora-max: 1280px;
}

/* ==========================================================================
   2. إصلاحات أساسيّة
   ========================================================================== */

/* --- قفزة الرابط بعلامة # عند فتح الصفحة ---
   Blocksy يكتب `html { scroll-behavior: smooth }`. والانتقال الناعم أثناء
   تحميل الصفحة يُلغى في كروم عند أوّل إزاحة تخطيط، فتبقى الصفحة في أعلاها:
   الضغط على «About Us» من صفحة المتجر كان يفتح الرئيسيّة من أوّلها لا عند
   القسم. (مشكلة قديمة سبقت التصميم الجديد، وظهرت أكثر بعد ما صارت أربعة
   بنود في القائمة مراسيَ داخل الرئيسيّة.)

   الحلّ بلا جافاسكربت: الافتراضيّ `auto` فتقع القفزة فوراً وقت التحميل،
   و`smooth` تعود بمجرّد وجود عنصرٍ مركَّزٍ داخل الصفحة — أي بعد أوّل ضغطة
   على رابط داخليّ. فيبقى الانتقال الناعم داخل الصفحة كما في التصميم. */
html { scroll-behavior: auto; }
html:focus-within { scroll-behavior: smooth; }

/* المراسي لا تختفي تحت الهيدر اللاصق (72px + هامش تنفّس). */
:target { scroll-margin-block-start: 96px; }

/* Blocksy يكتب احتياطيّاً «Sans-Serif» لخطّ سيريف. لو تعذّر تحميل Fraunces
   كان النصّ هيقع على خطّ سانس والفرق فاضح — فنصحّح السلسلة لسيريف حقيقيّ. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--velora-serif);
}

/* المائل في التصميم مقصود ومميّز («Be You.» في البطل، واقتباس البيان) */
.velora-mantra em,
.velora-manifesto-q {
	font-family: var(--velora-serif);
	font-style: italic;
}

.velora-mantra em { color: var(--velora-caramel); }

/* ==========================================================================
   3. علامة اللوجو في الهيدر
   --------------------------------------------------------------------------
   اللوجو الرسميّ كصورة (كان قبلها قناع CSS برسمة مؤقّتة).
   نبقيه على ::before لا كـ <img> لأنّ كلمة VELORA بجواره نصّ حقيقيّ،
   فالصورة زخرفيّة — ولأنّ الصندوق ثابت مسبقاً فلا انزياح تخطيط (CLS).
   image-set تختار WebP والكثافة المناسبة، فالجوّال ينزّل أصغر ملفّ.
   ========================================================================== */
.site-title-container {
	display: flex;
	align-items: center;
	gap: 0.42em;
}

.site-title-container::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.498em;
	block-size: 1.32em;

	/* احتياطيّ لأيّ متصفّح لا يعرف image-set */
	background-image: url("assets/brand/mark@2x.png");
	background-image: var(--velora-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.site-title {
	font-family: var(--velora-serif);
	letter-spacing: 0.14em;
	font-weight: 400;
}

/* ==========================================================================
   4. أقسام الصفحة الرئيسيّة — تسعة أقسام، منقولة من velora-homepage.html
   --------------------------------------------------------------------------
   القيم الصريحة في ملفّ التصميم اتحوّلت لمتغيّرات --velora-*، والخصائص
   الاتّجاهيّة اتكتبت منطقيّة (inline-start / block-end) عشان النسخة العربيّة
   تتقلب لوحدها بلا قواعد مكرّرة.
   ========================================================================== */

/* ---------- 4.0 الحاوية والمسافات ---------- */

/* تخطيط «flow» في كتل المحرّر يضيف margin-block-start: 24px لكلّ ابنٍ غير الأوّل.
   ده منطقيّ جوّه عمود نصّ، لكنّه يفسد أيّ شبكة أو صفٍّ أفقيّ نبنيه إحنا —
   يظهر كفجوة في الشبكة أو كإزاحة في الصفّ. فنصفّره في الحاويات دي وحدها. */
.velora-hero > *,
.velora-hero .velora-hero-copy > *,
.velora-section-head > *,
.velora-social-head > *,
.velora-values .wp-block-columns > *,
.velora-cols .wp-block-columns > *,
.velora-offer .wp-block-columns > *,
.velora-social-grid > * {
	margin-block: 0;
}

.velora-wrap {
	max-inline-size: var(--velora-max);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 64px);
	inline-size: 100%;
}

.velora-section { padding-block: var(--velora-section-pad); }

.velora-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-block-end: 52px;
}

.velora-section-head h2 {
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	color: var(--velora-ink);
	margin: 0;
}

.velora-section-head p {
	max-inline-size: 34ch;
	font-size: 0.906rem;
	line-height: 1.65;
	color: var(--velora-ink-soft);
	margin: 0;
}

/* ---------- 4.1 البطل ---------- */
.velora-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	min-block-size: 88vh;
}

.velora-hero-photo {
	position: relative;
	overflow: hidden;
	/* احتياطيّ لو الصورة لسه ما اتحطّتش أو فشل تحميلها */
	background:
		radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.10), transparent 55%),
		linear-gradient(150deg, var(--velora-taupe) 0%, var(--velora-caramel) 48%, var(--velora-bronze) 100%);
}

/* الصورة تملأ العمود كلّه.
   ⚠️ `block-size: 100%` وحده لا يكفي: العمود عنصر شبكة ارتفاعه «ممتدّ» لا
   «محدَّد»، والنسبة المئويّة تسقط إلى auto فيصير ارتفاع الصورة صفراً ويظهر
   التدرّج الاحتياطيّ وحده. `position:absolute; inset:0` يعطي صندوقاً محدَّداً. */
.velora-hero-photo .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.velora-hero-photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 38%;
}

.velora-hero-cap {
	position: absolute;
	z-index: 2;
	inset-inline-start: 28px;
	inset-block-end: 26px;
	max-inline-size: 260px;
	margin: 0;
	font-size: 0.781rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 10px rgba(42, 33, 25, 0.5);
}

.velora-hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--velora-ink);
	color: var(--velora-stone);
	padding: clamp(36px, 5vw, 72px);
}

.velora-hero-copy > * { margin-block: 0; }

.velora-eyebrow {
	font-size: 0.844rem;
	color: var(--velora-taupe);
	margin-block-end: 22px;
}

.velora-mantra {
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--velora-stone);
}

.velora-mantra em {
	font-family: var(--velora-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--velora-caramel);
}

.velora-hero-sub {
	margin-block-start: 26px;
	max-inline-size: 38ch;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(239, 231, 216, 0.82);
}

.velora-hero-copy .wp-block-buttons { margin-block-start: 38px; }

/* ---------- 4.2 شريط القيم ---------- */
.velora-values { border-block-end: 1px solid var(--velora-line); }

.velora-values .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	padding-block: 44px;
	margin-block: 0;
}

.velora-values .wp-block-column {
	padding-inline: 24px;
	border-inline-start: 1px solid var(--velora-line);
	flex-basis: auto;
}

.velora-values .wp-block-column:first-child {
	border-inline-start: none;
	padding-inline-start: 0;
}

.velora-value-t {
	font-size: 1.063rem;
	font-family: var(--velora-serif);
	font-weight: 400;
	color: var(--velora-ink);
	margin-block: 0 8px;
}

.velora-value-d {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--velora-ink-soft);
	margin-block: 0;
}

/* ---------- 4.3 المجموعة ---------- */
.velora-collection .velora-section-head { margin-block-end: 52px; }

/* شبكة المنتجات: خطوط شعريّة بين البطاقات زيّ التصميم (فجوة 1px بخلفيّة السطر) */
.velora-collection ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	background: var(--velora-line);
	border-block: 1px solid var(--velora-line);
}

.velora-collection ul.products li.product {
	background: var(--velora-stone);
	margin: 0 !important;
	inline-size: auto !important;
	padding-block-end: 24px;
	display: flex;
	flex-direction: column;
}

.velora-collection ul.products li.product img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.velora-collection ul.products li.product:hover img { transform: scale(1.045); }

.velora-collection ul.products li.product .woocommerce-loop-product__title,
.velora-collection ul.products li.product .price,
.velora-collection ul.products li.product .button,
.velora-collection ul.products li.product .added_to_cart {
	margin-inline: 20px;
}

.velora-collection ul.products li.product .woocommerce-loop-product__title {
	margin-block-start: 18px;
}

/* ---------- 4.4 البيان ---------- */
.velora-manifesto {
	background: var(--velora-stone-deep);
	text-align: center;
	padding-block: clamp(80px, 10vw, 110px);
}

.velora-manifesto-q {
	font-family: var(--velora-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.25;
	max-inline-size: 18ch;
	margin-inline: auto;
	margin-block: 0;
	color: var(--velora-ink);
}

.velora-manifesto-cite {
	display: block;
	margin-block: 28px 0;
	font-size: 0.844rem;
	color: var(--velora-ink-soft);
}

.velora-manifesto-body {
	max-inline-size: 640px;
	margin-inline: auto;
	margin-block-start: 56px;
}

.velora-manifesto-body > p {
	font-size: 0.969rem;
	line-height: 1.75;
	color: var(--velora-ink-soft);
	margin-block: 0 36px;
}

.velora-principles {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: start;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 40px;
	font-size: 0.906rem;
	color: var(--velora-ink);
}

.velora-principles li {
	padding-block-end: 14px;
	border-block-end: 1px solid var(--velora-line);
}

/* ---------- 4.5 من نحن  و  4.6 الدعم ---------- */
.velora-support { background: var(--velora-stone-deep); }

.velora-cols .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-block: 0;
}

.velora-cols .wp-block-column { flex-basis: auto; }

.velora-cols h3 {
	font-family: var(--velora-serif);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--velora-ink);
	margin-block: 0 12px;
}

.velora-cols p {
	font-size: 0.906rem;
	line-height: 1.7;
	color: var(--velora-ink-soft);
	margin-block: 0;
}

/* ---------- 4.7 انستجرام ---------- */
.velora-social .velora-social-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
	margin-block-end: 32px;
}

.velora-social-head h2 {
	font-size: 1.625rem;
	margin: 0;
	color: var(--velora-ink);
}

.velora-social-head p { margin: 0; font-size: 0.906rem; }

.velora-social-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--velora-line);
	margin-block: 0;
}

.velora-social-grid > .wp-block-column {
	aspect-ratio: 1 / 1;
	flex-basis: auto;
	background: linear-gradient(135deg, var(--velora-taupe), var(--velora-caramel));
}

.velora-social-grid > .wp-block-column:nth-child(2) { background: linear-gradient(135deg, var(--velora-bronze), var(--velora-metal)); }
.velora-social-grid > .wp-block-column:nth-child(3) { background: linear-gradient(135deg, #E7DAC2, var(--velora-taupe)); }
.velora-social-grid > .wp-block-column:nth-child(4) { background: linear-gradient(135deg, var(--velora-caramel), var(--velora-bronze)); }

/* ---------- 4.8 الاشتراك ---------- */
.velora-offer {
	background: var(--velora-ink);
	color: var(--velora-stone);
	padding-block: 80px;
}

.velora-offer .wp-block-columns {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
	margin-block: 0;
}

.velora-offer h2 {
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	max-inline-size: 16ch;
	color: var(--velora-stone);
	margin: 0;
}

.velora-offer p {
	color: rgba(239, 231, 216, 0.75);
	font-size: 0.906rem;
	max-inline-size: 40ch;
	margin-block: 10px 0;
}

/* ---------- 4.9 تواصلي ---------- */
.velora-contact { text-align: center; }

.velora-contact h2 {
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	margin-block: 0 16px;
	color: var(--velora-ink);
}

.velora-contact p {
	font-size: 0.906rem;
	color: var(--velora-ink-soft);
	margin-block: 0 28px;
}

/* ---------- 4.10 الأزرار ---------- */
.velora-hero .wp-block-button__link,
.velora-offer .wp-block-button__link,
.velora-contact .wp-block-button__link {
	border-radius: 0;
	padding: 14px 28px;
	font-size: 0.906rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	border: 1px solid currentColor;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* الزرّ الممتلئ فوق خلفيّة غامقة */
.velora-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.velora-offer .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--velora-stone);
	color: var(--velora-ink);
	border-color: var(--velora-stone);
}

.velora-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.velora-offer .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--velora-caramel);
	border-color: var(--velora-caramel);
	color: var(--velora-ink);
}

/* الزرّ المفرَّغ فوق خلفيّة غامقة */
.velora-hero .wp-block-button.is-style-outline .wp-block-button__link,
.velora-offer .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--velora-stone);
	border-color: var(--velora-stone);
}

.velora-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.velora-offer .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(239, 231, 216, 0.1);
	color: var(--velora-stone);
}

/* زرّ قسم التواصل — غامق فوق خلفيّة فاتحة */
.velora-contact .wp-block-button__link {
	background: var(--velora-ink);
	color: var(--velora-stone);
	border-color: var(--velora-ink);
}

.velora-contact .wp-block-button__link:hover {
	background: var(--velora-bronze);
	border-color: var(--velora-bronze);
}

/* ==========================================================================
   5. استجابة الشاشات — نفس نقاط التوقّف الموجودة في ملفّ التصميم
   ========================================================================== */
@media (max-width: 900px) {
	.velora-hero {
		grid-template-columns: 1fr;
		min-block-size: auto;
	}

	.velora-hero-photo { min-block-size: 280px; }

	.velora-values .wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}

	.velora-values .wp-block-column {
		border-inline-start: none;
		padding-inline: 0;
	}

	.velora-collection ul.products { grid-template-columns: repeat(2, 1fr); }

	.velora-principles { grid-template-columns: 1fr; }

	.velora-cols .wp-block-columns { grid-template-columns: 1fr; }

	.velora-social-grid { grid-template-columns: repeat(2, 1fr); }

	.velora-offer .wp-block-columns {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 600px) {
	.velora-section-head { margin-block-end: 36px; }
	.velora-manifesto-body { margin-block-start: 40px; }
}

/* ==========================================================================
   6. احترام تفضيل تقليل الحركة (كان موجوداً في ملفّ التصميم)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.velora-collection ul.products li.product img { transition: none; }
	.velora-collection ul.products li.product:hover img { transform: none; }
}

/* ==========================================================================
   7. الهيدر — مطابقة شكل التصميم
   ========================================================================== */

/* اسم البراند: حروف كبيرة متباعدة، زيّ اللوجو */
.site-title,
.site-title a {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 400;
	color: var(--velora-burnt-d);
}

.site-title { font-size: 1.375rem; }

/* علامة الغصن: الحرف نفسه يشغل نحو نصف عرض العلامة (الباقي غصن)،
   فنكبّرها حتّى يتساوى بصريّاً مع حجم الكلمة.
   الارتفاع 1.8em = 28.8px هو نفس ارتفاع العلامة القديمة بالضبط،
   والعرض 2.043em = 32.7px تبعاً لنسبة اللوجو الرسميّ (892:786). */
.site-title-container::before {
	inline-size: 2.043em;
	block-size: 1.8em;
}

/* روابط القائمة.
   بدل محاربة Blocksy في أولويّة التنسيقات، نغيّر متغيّراته نفسها داخل القائمة —
   فتستعملها قواعده هو، ويشمل ذلك حالة العنصر الحاليّ تلقائيّاً. */
.ct-header .header-menu-1 {
	--theme-link-initial-color: var(--velora-ink-soft);
	--theme-link-hover-color: var(--velora-burnt-d);
	--theme-link-active-color: var(--velora-burnt-d);
}

.ct-header .ct-menu-link { position: relative; }

/* Blocksy يضبط خطّ القائمة عبر متغيّراته في قاعدة بدقّة (0,4,3):
   [data-header] .ct-header [data-id="menu"] > ul > li > a
   فنطابق نفس الدقّة ونغيّر المتغيّرات — لا الخصائص — حتّى يبقى نظام الثيم سليماً.

   قيم التصميم الأصليّ (.navlinks):
     font-size: 0.906rem (14.5px) · font-weight: 400 · color: var(--ink-soft)
     بلا text-transform وبلا letter-spacing، وعند المرور: var(--burnt-d) */
[data-header] .ct-header [data-id="menu"] > ul > li > a {
	--theme-font-size: 0.906rem;
	--theme-font-weight: 400;
	--theme-line-height: 1.5;
	--theme-text-transform: none;
	--theme-letter-spacing: normal;
	--theme-link-initial-color: var(--velora-ink-soft);
	--theme-link-hover-color: var(--velora-burnt-d);
	--theme-link-active-color: var(--velora-burnt-d);
}

/* الخطّ الزاحف تحت الرابط (موجود في التصميم) */
.ct-header .menu > li > .ct-menu-link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 2px;
	block-size: 1px;
	background: var(--velora-caramel-d);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.ct-header .menu > li > .ct-menu-link:hover::after { transform: scaleX(1); }

[dir="rtl"] .ct-header .menu > li > .ct-menu-link::after { transform-origin: right; }

@media (prefers-reduced-motion: reduce) {
	.ct-header .menu > li > .ct-menu-link::after { transition: none; }
}

/* ==========================================================================
   8. حالة «لسه مفيش منتجات» في قسم المجموعة
   --------------------------------------------------------------------------
   تختفي وحدها أوّل ما يتضاف أوّل منتج.
   ========================================================================== */
.velora-collection .woocommerce-info,
.velora-collection .woocommerce-no-products-found {
	background: transparent;
	border: 1px dashed var(--velora-line);
	color: var(--velora-ink-soft);
	text-align: center;
	padding: 46px 24px;
	font-size: 0.95rem;
}

.velora-collection .woocommerce-info::before { display: none; }

/* لو مفيش منتجات بعد، الرسالة بتتطبع من functions.php في HTML — مش من هنا في
   خاصّيّة content — عشان إضافة الترجمة ومحرّكات البحث يشوفوها. */
.velora-empty {
	display: block;
	margin: 0;
	border: 1px dashed var(--velora-line);
	color: var(--velora-ink-soft);
	text-align: center;
	padding: 54px 24px;
	font-size: 0.95rem;
}

/* ==========================================================================
   9. الفوتر — أربعة أعمدة زيّ التصميم الجديد
   --------------------------------------------------------------------------
   ⚠️ الفوتر لم يعد فوتر بنّاء Blocksy: `inc/footer.php` يطبعه عبر المختنق
   `blocksy:builder:footer:custom-output`، و Blocksy يلفّه في
   `<footer id="footer">` **بلا أيّ صنف `ct-*`** — فالمحدّدات هنا على `#footer`
   لا على `.ct-footer`. (كان قبله شريطاً غامقاً بسطر نصّ واحد.)
   ========================================================================== */
#footer {
	background: var(--velora-stone);
	color: var(--velora-ink-soft);
	border-block-start: 1px solid var(--velora-line);
	padding-block: 64px 40px;
	font-size: 0.906rem;
}

#footer a { color: var(--velora-ink); transition: color 0.2s ease; }
#footer a:hover { color: var(--velora-bronze); }

.velora-foot-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 32px;
	padding-block-end: 48px;
}

/* --- عمود العلامة --- */
.velora-foot-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--velora-serif);
	font-size: 1.375rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--velora-ink);
	margin-block-end: 14px;
}

/* نفس علامة الهيدر: صورة خلفيّة على ::before، فكلمة VELORA تبقى نصّاً حقيقيّاً
   ولا ينطقها قارئ الشاشة مرّتين. (انظر القسم 3.) */
.velora-foot-logo::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.498em;
	block-size: 1.32em;
	background-image: url("assets/brand/mark@2x.png");
	background-image: var(--velora-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.velora-foot-brand p {
	max-inline-size: 32ch;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--velora-ink-soft);
	margin: 0;
}

/* --- أعمدة الروابط --- */
.velora-foot-col h4 {
	font-family: var(--velora-sans);
	font-size: 0.844rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--velora-ink-soft);
	margin-block: 0 16px;
}

.velora-foot-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* --- الشريط السفليّ --- */
.velora-foot-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-block-start: 28px;
	border-block-start: 1px solid var(--velora-line);
	font-size: 0.781rem;
	color: var(--velora-ink-soft);
}

@media (max-width: 900px) {
	.velora-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 480px) {
	#footer { padding-block: 48px 32px; }
	.velora-foot-grid { grid-template-columns: 1fr; }
	.velora-foot-bottom { justify-content: flex-start; }
}

/* ==========================================================================
   9.1 فورم الاشتراك — «Join the List» (من inc/newsletter.php)
   ========================================================================== */
.velora-news { margin: 0; }

.velora-news-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.velora-news-row input[type="email"] {
	background: transparent;
	border: 1px solid rgba(239, 231, 216, 0.4);
	border-radius: 0;
	padding: 14px 16px;
	color: var(--velora-stone);
	font-family: inherit;
	font-size: 0.906rem;
	min-inline-size: 240px;
	flex: 1 1 240px;
}

.velora-news-row input[type="email"]::placeholder { color: rgba(239, 231, 216, 0.5); }

.velora-news-row input[type="email"]:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

.velora-news-row button {
	padding: 14px 28px;
	border: 1px solid var(--velora-stone);
	border-radius: 0;
	background: var(--velora-stone);
	color: var(--velora-ink);
	font-family: inherit;
	font-size: 0.906rem;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.velora-news-row button:hover {
	background: var(--velora-caramel);
	border-color: var(--velora-caramel);
}

.velora-news-consent {
	margin-block: 12px 0;
	font-size: 0.75rem;
	color: rgba(239, 231, 216, 0.55);
}

.velora-news-msg {
	margin-block: 12px 0;
	font-size: 0.813rem;
}

.velora-news-msg.is-ok  { color: var(--velora-caramel); }
.velora-news-msg.is-bad { color: #E4A0A0; }

/* خانة العسل: بعيدة عن العين وعن قارئ الشاشة، وموجودة في الـ DOM للروبوت. */
.velora-news-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	#footer a,
	.velora-news-row button { transition: none; }
}

/* ==========================================================================
   10. الهيدر — مطابقة التصميم الأصليّ بالتفصيل
   --------------------------------------------------------------------------
   ملفّ الثيم الابن يُحمَّل بعد تنسيقات Blocksy المولَّدة، فتكفي مطابقة الدقّة
   ليغلب ترتيبُنا — بلا !important.
   ========================================================================== */

/* --- الحالة اللاصقة: كريميّ شبه شفّاف بضبابيّة، بدل الأبيض ---
   قاعدة Blocksy دقّتها أربعة محدّدات
   ([data-header] .ct-header [data-sticky] [data-row])، فنطابقها لنغلب بالترتيب. */
[data-header] .ct-header [data-sticky*="yes"] [data-row*="middle"] {
	background-color: rgba(239, 231, 216, 0.92);

	/* Blocksy يكتب الضبابيّة والظلّ عبر متغيّرين في قاعدة بمعرّف (#header)،
	   وهي أقوى من أيّ محدّد عندنا — فنغيّر المتغيّرين نفسهما بدل الخاصّيتين. */
	--theme-backdrop-blur: 6px;
	--theme-box-shadow: 0 1px 0 var(--velora-line);
}

/* --- الانتقال الناعم بين الحالتين (موجود في التصميم) --- */
#header [data-row="middle"] {
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

#header [data-row="middle"] > div {
	transition: min-height 0.4s ease;
}

/* --- اللوجو: مسافة 10px بين العلامة والكلمة، وحجم 22px زيّ التصميم --- */
.site-title { font-size: 1.375rem; }
.site-title-container { gap: 10px; }

/* --- روابط القائمة ---
   التصميم يحدّد 36px بين البنود، وكان ذلك مريحاً وقت ما كانت القائمة ثلاثة
   بنود. صارت خمسة، وحاوية Blocksy شبكة أثلاث متساوية — فـ 36px تجعل
   «Contact» يلامس قرص اللغة على 1280px. نجعل المسافة مرنة: 36px على الشاشات
   العريضة كما في التصميم، وتضيق تدريجيّاً كلّما ضاقت الشاشة. */
#header [data-id="menu"] .menu > li { margin-inline: clamp(8px, 0.85vw, 18px); }

/* --- أعمدة صفّ الهيدر: بالمقاس الحقيقيّ لا أثلاثاً متساوية ---
   Blocksy يكتب `1fr auto 1fr`، أي عمودان جانبيّان متساويان. واللوجو عرضه
   140px بينما اليمين (قرص اللغة + قرص الدولة + البحث + السلّة) يحتاج 271px —
   فعلى 1024px يفيض اليمين 82px ويزحف على «Contact».

   `auto` للعمودين الجانبيّين يعطي كلّاً منهما مقاسه، والقائمة تأخذ الباقي —
   وهو بالضبط ما يفعله ملفّ التصميم (`.nav { display:flex; justify-content:
   space-between }`). نطابق دقّة قاعدة Blocksy ونزيد عليها، وترتيب التحميل
   يجعلنا نغلب — بلا !important. */
#header [data-device="desktop"] [data-row="middle"][data-column-set="3"] > div {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

/* --- سطح المكتب الضيّق (1000–1280px) ---
   بين هذين العرضين لا يتّسع الصفّ للوجو + خمسة بنود + قرصَين + أيقونتين
   بمقاسات التصميم الكاملة: القائمة تحتاج 503px والمتاح 471px، فتزحف
   «Contact» تحت قرص اللغة. (تحت 1000px يختفي هذا الشريط أصلاً ويحلّ محلّه
   الهمبرجر، فالمشكلة محصورة في هذا النطاق وحده.)

   نضيّق الخطّ والمسافات قليلاً هنا فقط — فوق 1280px تعود قيم التصميم كاملة. */
@media (min-width: 1000px) and (max-width: 1279.98px) {
	[data-header] .ct-header [data-id="menu"] > ul > li > a {
		--theme-font-size: 0.81rem;
	}

	#header [data-id="menu"] .menu > li { margin-inline: 7px; }

	#header [data-id="search"],
	#header [data-id="cart"] { margin-inline-start: 14px; }

	#header [data-items] > .ct-header-text { margin-inline-end: 12px; }
}
#header [data-id="menu"] .menu > li:first-child { margin-inline-start: 0; }
#header [data-id="menu"] .menu > li:last-child { margin-inline-end: 0; }

/* --- الأيقونات: 20px بشفافيّة 75%، ومسافة 26px بينها --- */
#header [data-id="search"] .ct-icon,
#header [data-id="cart"] .ct-icon,
#header [data-id="search"] svg,
#header [data-id="cart"] svg {
	inline-size: 20px;
	block-size: 20px;
}

#header [data-id="search"],
#header [data-id="cart"] {
	opacity: 0.75;
	transition: opacity 0.25s ease;

	/* التصميم يحدّد 26px. العمود الأيمن في شبكة Blocksy ثلثٌ ثابت، وفيه الآن
	   قرص اللغة وقرص الدولة والبحث والسلّة معاً — فـ 26px تفيض عنه وتزحف على
	   القائمة. 20px تكفي بصريّاً وتُبقي الكلّ داخل عموده. */
	margin-inline-start: 20px;
}

/*
 * الشفافيّة على الحاوية كلّها، واللوحة المنسدلة للسلّة بنت هذه الحاوية —
 * فلو بقيت 0.75 وقت ظهورها ظهرت الصفحة من خلفها. الفتح بالماوس يمرّ على
 * :hover فيرفعها، لكن الفتح بلوحة المفاتيح لا يمرّ به: نضيف :focus-within.
 */
#header [data-id="search"]:hover,
#header [data-id="cart"]:hover,
#header [data-id="search"]:focus-within,
#header [data-id="cart"]:focus-within { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	#header [data-row="middle"],
	#header [data-row="middle"] > div,
	#header [data-id="search"],
	#header [data-id="cart"] { transition: none; }
}

/* --- الحالة العاديّة ---
   التصميم الجديد هيدره معتم دائماً (مش شفّافاً زيّ القديم): نفس الخلفيّة شبه
   الشفّافة ونفس الضبابيّة ونفس الخطّ السفليّ في الحالتين، فلا يتغيّر شكله عند
   التمرير إطلاقاً. */
[data-header] .ct-header [data-row*="middle"] {
	background-color: rgba(239, 231, 216, 0.92);
	--theme-backdrop-blur: 6px;
	--theme-box-shadow: 0 1px 0 var(--velora-line);
}

/* --- السلّة: أيقونة وحدها بلا سعر، زيّ التصميم --- */
#header [data-id="cart"] .ct-label { display: none; }

/* ==========================================================================
   11. المتجر — بنفس نسق بطاقة `.card` في تصميم الرئيسيّة
   ========================================================================== */

/* --- الشبكة --- */
.woocommerce ul.products { gap: 34px; }

/* --- بطاقة المنتج: بلا إطارات ولا ظلال، زيّ التصميم --- */
.woocommerce ul.products li.product {
	border: 0;
	box-shadow: none;
	background: transparent;
	text-align: start;
}

/* الصورة: 3:4 مع تكبير ناعم عند المرور (نفس قيمة التصميم) */
.woocommerce ul.products li.product .ct-media-container {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-block-end: 0;
	border-radius: 2px;
}

/* المسافة بين الصورة والاسم: كانت مسافتين متراكمتين — 20px داخل <figure>
   و 25px من متغيّر Blocksy‏ (--product-element-spacing) تحتها. ألغينا الداخليّة
   وخفّضنا الخارجيّة إلى 6px، فصارت مسافة واحدة صغيرة فقط. */
.woocommerce ul.products li.product > figure {
	--product-element-spacing: 6px;
}

.woocommerce ul.products li.product .ct-media-container img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.woocommerce ul.products li.product:hover .ct-media-container img { transform: scale(1.045); }

/* العنوان: Fraunces رفيع بلون الحبر */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-title {
	font-family: var(--velora-serif);
	font-size: 1.12rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--velora-ink);
	margin-block-end: 6px;
}

/* السعر: Manrope صغير بلون النصّ الثانويّ */
.woocommerce ul.products li.product .price {
	font-family: var(--velora-sans);
	font-size: 0.92rem;
	color: var(--velora-ink-soft);
	font-weight: 400;
}

/* السعر قبل الخصم — مشطوب وباهت، والجديد أوضح */
.woocommerce ul.products li.product .price del {
	opacity: 0.55;
	font-size: 0.86em;
	margin-inline-start: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--velora-burnt-d);
	font-weight: 500;
}

/* --- شارة نسبة الخصم --- */
.woocommerce span.onsale,
.ct-woo-card-badge {
	background: var(--velora-burnt-d);
	color: var(--velora-cream);
	font-family: var(--velora-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: 2px;
}

/* --- زرّ الإضافة/الخيارات --- */
.woocommerce ul.products li.product .button {
	border-radius: 2px;
	font-size: 0.86rem;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   12. فلاتر المتجر الجانبيّة
   ========================================================================== */

.widget-area .widget,
#secondary .widget { margin-block-end: 42px; }

/* عناوين الفلاتر بخطّ البراند */
.widget-area .widget-title,
#secondary .widget-title,
.widget-area .widgettitle {
	font-family: var(--velora-serif);
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--velora-burnt-d);
	margin-block-end: 16px;
	padding-block-end: 12px;
	border-block-end: 1px solid var(--velora-line);
}

/* قوائم الفلاتر */
.widget_layered_nav ul,
.widget_product_categories ul,
.widget_rating_filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget_layered_nav li,
.widget_product_categories li,
.widget_rating_filter li { margin-block-end: 9px; }

.widget_layered_nav a,
.widget_product_categories a,
.widget_rating_filter a {
	color: var(--velora-ink-soft);
	font-size: 0.92rem;
	text-decoration: none;
	transition: color 0.25s ease;
}

.widget_layered_nav a:hover,
.widget_product_categories a:hover,
.widget_rating_filter a:hover { color: var(--velora-burnt-d); }

.widget_layered_nav li.chosen > a { color: var(--velora-burnt-d); font-weight: 500; }

/* عدّاد المنتجات جنب كلّ خيار */
.widget_layered_nav .count,
.widget_product_categories .count {
	color: var(--velora-ink-soft);
	opacity: 0.55;
	font-size: 0.82rem;
}

/* الفلاتر النشطة — شرائح قابلة للإزالة */
.widget_layered_nav_filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.widget_layered_nav_filters li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--velora-paper);
	border: 1px solid var(--velora-line);
	border-radius: 2px;
	padding: 5px 10px;
	font-size: 0.84rem;
	color: var(--velora-burnt-d);
}

.widget_layered_nav_filters li a:hover { background: var(--velora-burnt-d); color: var(--velora-cream); }

/* شريط تمرير السعر.
   ووكومرس يعتمد على تنسيقات jQuery UI وهي غير محمّلة هنا، فمقابض السحب
   كانت <span> بلا position ولا أبعاد — أي غير مرئيّة. نكتبها كاملة. */
.price_slider_wrapper .ui-slider {
	position: relative;
	block-size: 3px;
	background: var(--velora-line);
	border-radius: 2px;
	margin-block: 22px 26px;
	margin-inline-end: 9px;   /* مساحة للمقبض الأخير */
}

.price_slider_wrapper .ui-slider .ui-slider-range {
	position: absolute;
	inset-block: 0;
	background: var(--velora-caramel-d);
	border-radius: 2px;
}

.price_slider_wrapper .ui-slider .ui-slider-handle {
	position: absolute;
	display: block;
	inline-size: 17px;
	block-size: 17px;
	inset-block-start: -7px;
	margin-inline-start: -8px;
	background: var(--velora-burnt-d);
	border: 2px solid var(--velora-cream);
	border-radius: 50%;
	box-shadow: 0 1px 5px rgba(43, 29, 20, 0.32);
	cursor: grab;
	touch-action: none;
	z-index: 2;
}

.price_slider_wrapper .ui-slider .ui-slider-handle:active { cursor: grabbing; }

.price_slider_wrapper .ui-slider .ui-slider-handle:focus-visible {
	outline: 2px solid var(--velora-caramel-d);
	outline-offset: 2px;
}

.price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.price_slider_amount .price_label {
	font-size: 0.88rem;
	color: var(--velora-ink-soft);
	order: 1;
}

.price_slider_amount .button {
	border-radius: 2px;
	font-size: 0.84rem;
	order: 2;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product .ct-media-container img { transition: none; }
}

/* ==========================================================================
   13. المتجر على الموبايل — عمودان بدل عمود
   ========================================================================== */
@media (max-width: 690px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 14px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.98rem; }
	.woocommerce ul.products li.product .price { font-size: 0.86rem; }
	.woocommerce ul.products li.product .button { font-size: 0.78rem; padding: 9px 12px; }
	.woocommerce span.onsale { font-size: 0.66rem; }
}

/* ==========================================================================
   14. دوائر الألوان وأزرار المقاسات — بألوان البراند
   ========================================================================== */

/*
 * الألوان والمقاسات تُضبط بمتغيّرات الإضافة نفسها لا بخصائص مباشرة.
 *
 * السبب: قواعد الإضافة في frontend.min.css دقّتها تصل إلى (0,7,0) — مثل
 * `.variable-item:not(.radio-variable-item).button-variable-item.selected:not(.no-stock)` —
 * فأيّ قاعدة نكتبها بمحدّد أصناف عاديّ تخسر أمامها. وكانت النتيجة أنّ الزرّ
 * المحدَّد يُرسَم أبيض (‏قيمة الإضافة الافتراضيّة) وحرفه كريميّ = حرف غير مرئيّ،
 * وحوله حلقة سوداء. وحتّى الحالة العاديّة كانت تُرسَم 30×30 بيضاء بحلقة رماديّة.
 *
 * وقواعد الإضافة تقرأ var(--wvs-…) وتترك القيمة الصلبة احتياطيّاً فقط، فحين
 * نعرّف المتغيّر تستعمله قواعدها هي — بلا مطاردة دقّة وبلا important.
 * (‏نفس مبدأ بند 2 في tech-notes.md مع Blocksy.)
 * النسخة المجّانيّة لا تعرّف أيّاً من هذه المتغيّرات، فتعريفنا هو الوحيد.
 */
body.woo-variation-swatches {
	--wvs-item-background-color:          transparent;
	--wvs-item-text-color:                var(--velora-ink-soft);
	--wvs-item-box-shadow:                none;

	--wvs-hover-item-background-color:    transparent;
	--wvs-hover-item-text-color:          var(--velora-burnt-d);
	--wvs-hover-item-box-shadow:          none;

	--wvs-selected-item-background-color: var(--velora-burnt-d);
	--wvs-selected-item-text-color:       var(--velora-cream);
	--wvs-selected-item-box-shadow:       none;
}

.woo-variation-swatches .variable-items-wrapper { gap: 8px; }

/* أزرار المقاسات */

/*
 * المقاس على حاوية الأزرار وحدها لا على body: متغيّرا العرض والارتفاع يسريان
 * على كلّ أنواع السواتش، فلو وُضعا في الأعلى لصارت دوائر الألوان بيضاوية
 * 44×38 بدل 30×30. والخصائص المخصّصة تُورَّث، فوضعها هنا يحصرها بالأزرار.
 */
.woo-variation-swatches .button-variable-items-wrapper {
	--wvs-single-product-item-width:     44px;
	--wvs-single-product-item-height:    38px;
	--wvs-single-product-item-font-size: 0.86rem;
}

/* الإطار وحده: الإضافة لا تكتب border إطلاقاً، فقاعدتنا تفوز بلا منازع. */
.woo-variation-swatches .variable-items-wrapper .button-variable-item {
	border: 1px solid var(--velora-line);
	border-radius: 2px;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.woo-variation-swatches .variable-items-wrapper .button-variable-item .variable-item-span {
	font-family: var(--velora-sans);
	line-height: 1;
}

.woo-variation-swatches .variable-items-wrapper .button-variable-item:hover {
	border-color: var(--velora-caramel-d);
}

.woo-variation-swatches .variable-items-wrapper .button-variable-item.selected {
	border-color: var(--velora-burnt-d);
}

/*
 * حلقة التركيز: الأزرار role="radio" و tabindex="0"، والإضافة تستعمل نفس
 * المتغيّر لحالتَي hover و focus — وقد أطفأناه أعلاه. فبلا هذه القاعدة يفقد
 * مستخدم لوحة المفاتيح أيّ مؤشّر لموضعه.
 */
.woo-variation-swatches .variable-items-wrapper .variable-item:focus-visible {
	outline: 2px solid var(--velora-caramel-d);
	outline-offset: 2px;
}

/* دوائر الألوان */
.woo-variation-swatches .variable-items-wrapper .color-variable-item {
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	border: 1px solid var(--velora-line);
	box-shadow: none;
	padding: 2px;
}

.woo-variation-swatches .variable-items-wrapper .color-variable-item > div { border-radius: 50%; }

.woo-variation-swatches .variable-items-wrapper .color-variable-item.selected {
	border-color: var(--velora-burnt-d);
	box-shadow: none;
}

/* العنصر غير المتاح */
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled { opacity: 0.35; }

/* عنوان الخاصّيّة (Size / Color) */
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations label {
	font-family: var(--velora-sans);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--velora-burnt-d);
	letter-spacing: 0.02em;
}

/* ==========================================================================
   15. لوحة الفلاتر على الموبايل والتابلت (تحت 1000px)
   ========================================================================== */

#velora-filters-ui { display: none; }

.velora-filters-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: var(--velora-burnt-d);
	border: 1px solid var(--velora-line);
	border-radius: 2px;
	padding: 9px 16px;
	font-family: var(--velora-sans);
	font-size: 0.88rem;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.velora-filters-toggle:hover { border-color: var(--velora-caramel-d); }
.velora-filters-toggle[aria-expanded="true"] { background: var(--velora-burnt-d); color: var(--velora-cream); border-color: var(--velora-burnt-d); }

.velora-filters-close {
	display: none;
	position: absolute;
	inset-block-start: 18px;
	inset-inline-end: 18px;
	background: transparent;
	border: 0;
	color: var(--velora-burnt-d);
	padding: 6px;
	cursor: pointer;
	line-height: 0;
}

.velora-filters-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(43, 29, 20, 0.45);
	z-index: 998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

@media (max-width: 999.98px) {
	.velora-filters-toggle { display: inline-flex; }
	.velora-filters-close  { display: block; }
	.velora-filters-backdrop { display: block; }
	.velora-filters-backdrop.is-open { opacity: 1; pointer-events: auto; }

	/* شريط الأدوات: زرّ الفلاتر يسار والترتيب يمين */
	.woo-listing-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
	}

	/* اللوحة نفسها — تنزلق من الجانب */
	#sidebar.velora-filters-panel {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: min(86vw, 340px);
		max-inline-size: none;
		background: var(--velora-cream);
		z-index: 999;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 64px 24px 40px;
		margin: 0;
		box-shadow: 0 0 44px rgba(43, 29, 20, 0.2);
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	[dir="rtl"] #sidebar.velora-filters-panel { transform: translateX(100%); }

	#sidebar.velora-filters-panel.is-open,
	[dir="rtl"] #sidebar.velora-filters-panel.is-open { transform: translateX(0); }

	#sidebar.velora-filters-panel .ct-sidebar { position: static; }

	body.velora-filters-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	#sidebar.velora-filters-panel,
	.velora-filters-backdrop { transition: none; }
}

/* ==========================================================================
   16. المسافة العلويّة في صفحات المتجر
   --------------------------------------------------------------------------
   ⚠️ كان هذا القسم يضيف ارتفاع الهيدر كلّه (`var(--header-height)`) لأنّ الهيدر
   كان **شفّافاً** والمحتوى يبدأ تحته فيغطّيه. التصميم الجديد هيدره **معتم**،
   فووردبريس يدفع المحتوى تحته وحده — والإضافة صارت تعني فجوة مضاعفة.
   فلم يبقَ هنا إلّا مسافة التصميم نفسها.

   صفحة المنتج المفرد لها نفس المشكلة، لكن حاويتها `.ct-container-full`،
   وأوّل ما فيها هو فتات الخبز داخل `.hero-section` — و Blocksy يعوّض الهيدر
   الشفّاف في `[data-type="type-2"]` فقط، لا في `type-1` الذي نستعمله.

   والسلّة والدفع تحتفظان بشريط العنوان (‏فلتر blocksy:hero:custom-source أعلاه
   يُطفئه على المتجر وحده)‏، لكنّ الهيرو عندهما `type-1` أيضاً — فكان العنوان
   يقع على 60px الافتراضيّة من Blocksy بينما ارتفاع الهيدر 82px، أي ملتصقاً
   بالهيدر بل داخله. الصنفان `woocommerce-cart` و `woocommerce-checkout` يكتبهما
   `wc_body_class()`، و `is_checkout()` يشمل صفحتَي الدفع والاستلام كذلك.

   ⚠️ وحاويتهما `.ct-container-full` لا `.ct-container` — مُتحقَّق منه في المتصفّح
   لا استنتاجاً: محتواهما كتلة `alignwide` فيوسّع Blocksy الحاوية. نكتب الصنفين
   معاً كما في صفحة المنتج، فلا يكسرها تغيير عرض الصفحة من إعدادات Blocksy.
   ========================================================================== */
body.woocommerce-shop main#main > .ct-container,
body.tax-product_cat main#main > .ct-container,
body.tax-product_tag main#main > .ct-container,
body.woocommerce-cart main#main > .ct-container,
body.woocommerce-cart main#main > .ct-container-full,
body.woocommerce-checkout main#main > .ct-container,
body.woocommerce-checkout main#main > .ct-container-full,
body.single-product main#main > .ct-container-full,
body.single-product main#main > .ct-container {
	padding-block-start: 44px;
}

@media (max-width: 999.98px) {
	body.woocommerce-shop main#main > .ct-container,
	body.tax-product_cat main#main > .ct-container,
	body.tax-product_tag main#main > .ct-container,
	body.woocommerce-cart main#main > .ct-container,
	body.woocommerce-cart main#main > .ct-container-full,
	body.woocommerce-checkout main#main > .ct-container,
	body.woocommerce-checkout main#main > .ct-container-full,
	body.single-product main#main > .ct-container-full,
	body.single-product main#main > .ct-container {
		padding-block-start: 32px;
	}
}

/* فتات الخبز تلتصق بمحتوى المنتج تحتها بدل 40px الافتراضيّة من Blocksy
   (‏`.hero-section[data-type=type-1] { margin-bottom: var(--margin-bottom, 40px) }`)‏،
   فتبقى المسافة الكبيرة بينها وبين الهيدر فقط. */
body.single-product .hero-section[data-type="type-1"] {
	--margin-bottom: 14px;
}

@media (max-width: 999.98px) {
	body.single-product .hero-section[data-type="type-1"] {
		--margin-bottom: 10px;
	}
}

/* ==========================================================================
   17. قرص تبديل اللغة
   --------------------------------------------------------------------------
   كبسولة بخانتين: اللغة الحاليّة مملوءة، والأخرى رابط حقيقيّ.
   اتّجاه القرص ثابت ltr في اللغتين، فلا يقفز مكان الخانتين عند التبديل.
   ========================================================================== */

.velora-lang {
	display: inline-flex;
	align-items: center;
	direction: ltr;
	border: 1px solid var(--velora-line);
	border-radius: 999px;
	padding: 2px;
	line-height: 1;
	vertical-align: middle;
	background: transparent;
	white-space: nowrap;
}

.velora-lang-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 30px;
	height: 26px;
	padding: 0 9px;
	border-radius: 999px;
	font-family: var(--velora-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: var(--velora-ink-soft);
	transition: color 0.22s ease, background-color 0.22s ease;
}

/* الحرف العربيّ يحتاج خطّاً عربيّاً حتّى في الصفحة الإنجليزيّة، فنعطيه مكدّساً
   يبدأ بخطّنا (المحمَّل في /ar/ فقط) ثمّ خطوط النظام — بلا أيّ طلب إضافيّ. */
.velora-lang-i[lang="ar"] {
	font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Geeza Pro",
		"Segoe UI", Tahoma, var(--velora-sans);
	font-size: 0.86rem;
	letter-spacing: 0;
}

.velora-lang-i.is-active {
	background: var(--velora-burnt-d);
	color: var(--velora-cream);
}

a.velora-lang-i:hover,
a.velora-lang-i:focus-visible {
	color: var(--velora-burnt-d);
	background: var(--velora-paper);
}

a.velora-lang-i:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

/* داخل الهيدر: نحاذيه مع أيقونتي البحث والسلّة. */
.ct-header-text .velora-lang {
	margin: 0;
}

/* النسخة الكاملة — داخل اللوحة المنزلقة على الموبايل. */
.velora-lang--full .velora-lang-i {
	min-width: 0;
	height: 40px;
	padding: 0 20px;
	font-size: 0.86rem;
}

.velora-lang--full .velora-lang-i[lang="ar"] {
	font-size: 0.95rem;
}

.velora-lang-offcanvas {
	display: flex;
	justify-content: center;
	padding: 4px 0 22px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--velora-line);
}

/* الموبايل: القرص مضغوط — الهيدر عند 375px لا يترك إلّا ~56px. */
@media (max-width: 689.98px) {
	.ct-header-text .velora-lang-i {
		min-width: 22px;
		height: 24px;
		padding: 0 6px;
		font-size: 0.66rem;
	}

	.ct-header-text .velora-lang-i[lang="ar"] {
		font-size: 0.8rem;
	}

	/* هدف اللمس يبقى ≥ 44px بمنطقة غير مرئيّة حول القرص. */
	.ct-header-text .velora-lang-i::after {
		content: "";
		position: absolute;
		inset-block: -10px;
		inset-inline: -2px;
	}

	.ct-header-text .velora-lang-i {
		position: relative;
	}
}

@media (prefers-reduced-motion: reduce) {
	.velora-lang-i {
		transition: none;
	}
}

/* ==========================================================================
   18. اللوحة الجانبيّة على الموبايل — تُلبَس بألوان البراند
   --------------------------------------------------------------------------
   Blocksy يعطيها خلفيّة شبه سوداء rgba(18,21,25,.98) وروابط بيضاء 20px/700 —
   لا علاقة لها بالتصميم. نعيدها إلى لوحة Velora، ونطابق دقّة قواعده
   ([data-header] #offcanvas .ct-panel-inner = 1,2,0) فنغلب بترتيب التحميل.
   ========================================================================== */

[data-header] #offcanvas .ct-panel-inner {
	background-color: var(--velora-cream);
}

[data-header] #offcanvas {
	--theme-box-shadow: 0 0 60px rgba(43, 29, 20, 0.18);
}

#offcanvas [data-id="mobile-menu"] {
	--theme-font-size: 1.05rem;
	--theme-font-weight: 400;
	--theme-link-initial-color: var(--velora-burnt-d);
	--theme-link-hover-color: var(--velora-caramel-d);
	--mobile-menu-divider: none;
}

#offcanvas .mobile-menu .ct-menu-link {
	font-family: var(--velora-sans);
	letter-spacing: 0;
}

#offcanvas .ct-toggle-close {
	color: var(--velora-ink-soft);
}

/* ==========================================================================
   19. مكان قرص اللغة داخل صفّ الهيدر
   --------------------------------------------------------------------------
   Blocksy يتحكّم بالمسافات بقاعدة #header [data-items] > * دقّتها (1,1,0)،
   فنطعمه متغيّره نفسه (‏--margin) بدل مصارعته، ونستعمل خاصّيّة منطقيّة
   فتنقلب وحدها في العربيّة.
   ========================================================================== */

#header [data-items] > .ct-header-text {
	--margin: 0;
	margin-inline-end: 16px;
	display: flex;
	align-items: center;

	/* القائمة صارت خمسة بنود بدل ثلاثة، فضاق العمود الأيمن وانكسر القرصان
	   سطرين. نمنع انكماش الحاوية — القائمة في العمود الأوسط هي التي تنكمش. */
	flex: 0 0 auto;
}

/* Blocksy يلفّ محتوى عنصر النصّ في `.entry-content` وهي حاوية عاديّة (block)،
   فالقرصان يقعان فيها كعنصرين مضمّنين ويلتفّان عند ضيق المكان. نجعلها صفّاً
   لا يلتفّ، فيبقى الاثنان جنب بعض دائماً. */
#header .ct-header-text > .entry-content {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
}

@media (max-width: 689.98px) {
	#header [data-items] > .ct-header-text {
		margin-inline-end: 14px;
	}
}

/* ==========================================================================
   20. ترويسة صفحة التصنيف — العنوان والوصف
   --------------------------------------------------------------------------
   شريط عنوان الثيم مُطفأ في المتجر بقرار تصميم، فكانت صفحة التصنيف بلا h1
   وبلا وصف. هذه الترويسة تعيدهما بنسق الرئيسيّة نفسه: عنوان بخطّ العرض
   وفقرة واحدة هادئة، ثمّ خطّ فاصل رفيع قبل الشبكة.

   مقاسة على 375px أوّلاً. الخصائص منطقيّة (‏inline) فتنقلب وحدها في العربيّة.
   ========================================================================== */

/*
 * فتات الخبز فوق العنوان. تنسيقه الأساسيّ من main.min.css (‏يُحمَّل في كلّ صفحة)،
 * أمّا page-title.min.css فلا يُحمَّل هنا لأنّ شريط عنوان الصفحة مُطفأ — فلا نعتمد
 * عليه. يكفينا ضبط المسافة تحته.
 */
.velora-term-crumbs {
	margin-block-end: 14px;
}

.velora-term-header {
	margin-block-end: 28px;
	padding-block-end: 22px;
	border-block-end: 1px solid var(--velora-line);
	max-width: 62ch;
}

.velora-term-title {
	font-family: var(--velora-serif);
	font-weight: 400;
	font-size: clamp(28px, 7vw, 40px);
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--velora-burnt-d);
	margin: 0;
}

.velora-term-desc {
	font-family: var(--velora-sans);
	font-size: 15px;
	line-height: 1.75;
	color: var(--velora-ink-soft);
	margin-block-start: 12px;
}

.velora-term-desc > :first-child { margin-block-start: 0; }
.velora-term-desc > :last-child  { margin-block-end: 0; }

@media (min-width: 690px) {
	.velora-term-crumbs { margin-block-end: 18px; }

	.velora-term-header {
		margin-block-end: 36px;
		padding-block-end: 26px;
	}

	.velora-term-desc { font-size: 16px; }
}


/* ==========================================================================
   21. وصف المنتج — السطر المختصر وتبويب الوصف
   --------------------------------------------------------------------------
   المكانان لم يكن لهما أيّ تنسيق لأنّ الحقلين كانا فارغين في كلّ المنتجات،
   فكان ووكومرس يخفيهما أصلاً. بعد ملء الأوصاف ظهرا بخطّ الثيم الافتراضيّ.

   قائمة التفاصيل بلا نقاط تعداد — كلّ بند سطر بينه وبين تاليه خطّ شعرة،
   فتُقرأ كجدول مواصفات هادئ لا كقائمة تسوّق.

   بلا letter-spacing ولا text-transform على العناوين الداخليّة: الأولى تكسر
   وصل الحروف العربيّة، والثانية بلا أثر في العربيّة — فيبقى الملفّ واحداً
   للّغتين. والخصائص منطقيّة (‏block/inline) فتنقلب وحدها في RTL.

   مقاسة على 375px أوّلاً.
   ========================================================================== */

/* ---- أ. السطر المختصر تحت السعر ---- */

.woocommerce-product-details__short-description {
	font-family: var(--velora-sans);
	font-size: 15px;
	line-height: 1.75;
	color: var(--velora-ink-soft);
	max-width: 46ch;
	margin-block: 18px 0;
}

.woocommerce-product-details__short-description > :first-child { margin-block-start: 0; }
.woocommerce-product-details__short-description > :last-child  { margin-block-end: 0; }

/* ---- ب. تبويب الوصف ---- */

/*
 * حصر عرض لوحات التبويبات.
 *
 * حاوية المنتج على صفحة المنتج هي .ct-container-full — بلا حدّ عرض إطلاقاً.
 * و Blocksy يحصر شريط التبويبات (ul.wc-tabs) وكتلة الصورة والملخّص بصنفه
 * is-width-constrained، لكنّه لا يحصر <article> الذي يحوي اللوحات. فكانت
 * اللوحات تمتدّ على كامل النافذة، ولوحة الوصف — بـ max-width بلا توسيط —
 * تلتصق ببداية السطر: يميناً في العربيّة ويساراً في الإنجليزيّة. وعلى 375px
 * كان النصّ يلامس الحافّتين بينما باقي الصفحة على مسافة 22.5px.
 *
 * نكرّر هنا ما يفعله is-width-constrained حرفيّاً بمتغيّرات Blocksy نفسها،
 * فتأتي البطانة الجانبيّة المتجاوبة (‏5% سطح مكتب · 6% موبايل) وعرض المحتوى
 * 1180px من مصدر واحد، ويتبعها كلّ شيء لو غيّر المالك عرض الموقع لاحقاً.
 */
.woocommerce-tabs > article {
	margin-inline: auto;
	width: var(--theme-container-width);
	max-width: var(--theme-block-max-width);
}

.woocommerce-Tabs-panel--description {
	font-family: var(--velora-sans);
	font-size: 15px;
	line-height: 1.8;
	color: var(--velora-ink-soft);
	max-width: 68ch;
	/* عمود قراءة موسَّط تحت شريط التبويبات الموسَّط. */
	margin-inline: auto;
}

.woocommerce-Tabs-panel--description > :first-child { margin-block-start: 0; }
.woocommerce-Tabs-panel--description > :last-child  { margin-block-end: 0; }

.woocommerce-Tabs-panel--description p {
	margin-block: 0 1.15em;
}

.woocommerce-Tabs-panel--description h3 {
	font-family: var(--velora-serif);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.3;
	color: var(--velora-burnt-d);
	margin-block: 1.9em 0.6em;
}

/* ---- ج. قائمة التفاصيل ---- */

.woocommerce-Tabs-panel--description ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-Tabs-panel--description ul li {
	margin: 0;
	padding-block: 10px;
	border-block-end: 1px solid var(--velora-line);
}

.woocommerce-Tabs-panel--description ul li:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.woocommerce-Tabs-panel--description ul li strong {
	font-weight: 600;
	color: var(--velora-burnt-d);
}

@media (min-width: 690px) {
	.woocommerce-product-details__short-description,
	.woocommerce-Tabs-panel--description {
		font-size: 16px;
	}

	.woocommerce-Tabs-panel--description h3 {
		font-size: 23px;
	}
}

/* ==========================================================================
   22. سلّة الهيدر المصغّرة — اللوحة المنسدلة
   --------------------------------------------------------------------------
   Blocksy يرسمها افتراضيّاً على خلفيّة رماديّة داكنة `#29333C` بنصّ أبيض،
   وعنوان المنتج بلون الروابط البنّيّ `#3E2415` فوقها = حرف شبه غير مرئيّ،
   والزرّان كلاهما بنّيّ صلب فوق الداكن بلا أيّ فرق بينهما. لا علاقة لأيّ
   من ذلك بهويّة Velora، فنعيد بناء اللوحة كاملةً بألوان البراند.

   ⚠️ الدقّة: `cart-header-element-lazy.min.css` يُحمَّل **بعد** الثيم الابن
   (‏تحميل كسول عند ظهور عنصر السلّة)، فقواعده بدقّة (0,1,0) تغلبنا لو كتبنا
   `.ct-cart-content` وحدها. وقاعدة Blocksy المولَّدة في global.css دقّتها
   `[data-header*="type-1"] [data-id="cart"] .ct-cart-content` = (0,3,0).
   لذلك نسبق كلّ قاعدة هنا بـ `[data-header] [data-id="cart"]` — نتساوى مع
   المولَّدة (ونغلبها بترتيب التحميل) ونتفوّق على الكسولة. بلا `!important`.
   ========================================================================== */

/* ---- أ. اللوحة نفسها ---- */

[data-header] [data-id="cart"] .ct-cart-content {
	/* متغيّرات Blocksy تُستعمل داخل قواعده هو — تغييرها أنظف من مطاردته. */
	--mini-cart-background-color: var(--velora-cream);
	--mini-cart-divider-color: var(--velora-line);
	--mini-cart-items-spacing: 16px;
	--theme-text-color: var(--velora-ink);
	--theme-link-initial-color: var(--velora-ink);
	--theme-link-hover-color: var(--velora-burnt-d);
	--dropdown-top-offset: 12px;

	inline-size: min(346px, calc(100vw - 24px));
	padding: 20px;
	border: 1px solid var(--velora-line);
	border-radius: 3px;
	font-family: var(--velora-sans);

	/*
	 * اللوحة كريميّة فوق صفحة كريميّة، فالفصل بينهما من الظلّ لا من اللون:
	 * طبقة قريبة رفيعة ترسم الحافّة، وطبقة بعيدة واسعة ترفع اللوحة.
	 * والظلّ بلون الحبر (بنّيّ) لا أسود — الأسود يطفئ دفء الكريميّ.
	 */
	box-shadow:
		0 1px 2px rgba(43, 29, 20, 0.05),
		0 20px 44px -20px rgba(43, 29, 20, 0.34);
}

/*
 * على اللمس لا وجود لـ hover: النقرة تفتح صفحة `/cart/` مباشرةً، واللوحة
 * كانت تومض لجزء من ثانية قبل الانتقال. نخفيها فيبقى الموبايل نظيفاً.
 */
@media (hover: none) {
	[data-header] [data-id="cart"] .ct-cart-content { display: none; }
}

/* ---- ب. ترويسة اللوحة (من functions.php) ---- */

/*
 * الحواف السالبة تخرج بالخطّ الفاصل إلى حافّتَي اللوحة فيصير شريط عنوان
 * حقيقيّاً لا سطراً معلّقاً وسط الحشو.
 */
[data-header] [data-id="cart"] .velora-minicart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: -20px -20px 16px;
	padding: 14px 20px 12px;
	border-block-end: 1px solid var(--velora-line);
}

[data-header] [data-id="cart"] .velora-minicart-title {
	font-family: var(--velora-serif);
	font-size: 1.02rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--velora-burnt-d);
}

[data-header] [data-id="cart"] .velora-minicart-count {
	font-size: 0.74rem;
	line-height: 1.2;
	color: var(--velora-ink-soft);
	white-space: nowrap;
}

/* ---- ج. قائمة المنتجات ---- */

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart {
	max-block-size: 46vh;

	/* السحب داخل القائمة لا يجرّ الصفحة تحتها حين تنتهي. */
	overscroll-behavior: contain;

	/* شريط تمرير رفيع بلون الحبر بدل الشريط الرماديّ العريض. */
	scrollbar-width: thin;
	scrollbar-color: rgba(43, 29, 20, 0.22) transparent;
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart::-webkit-scrollbar {
	inline-size: 4px;
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart::-webkit-scrollbar-thumb {
	background: rgba(43, 29, 20, 0.22);
	border-radius: 4px;
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart li {
	/*
	 * عمود صورة ثابت 58px بدل 20% من عرض اللوحة: بنسبة 3:4 يصير ارتفاعه 77px
	 * وهو ثابت لا يتغيّر بطول اسم المنتج، فتبقى الصفوف على إيقاع واحد.
	 */
	grid-template-columns: 58px 1fr;
	grid-column-gap: 14px;
	align-items: start;
	margin-block-end: 16px;
	padding-block-end: 16px;
}

/* الخطّ المتقطّع من Blocksy يبدو تقنيّاً — الخطّ المصمت هو لغة الموقع كلّه. */
[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart li:not(:last-child) {
	border-block-end: 1px solid var(--velora-line);
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart li:last-child {
	margin-block-end: 0;
	padding-block-end: 0;
}

[data-header] [data-id="cart"] .ct-cart-content .ct-media-container {
	border-radius: 2px;
	overflow: hidden;

	/* لون تحت الصورة ريثما تُحمَّل — أدفأ من الأبيض الوامض. */
	background: var(--velora-paper);
}

/* ---- د. بيانات المنتج ---- */

[data-header] [data-id="cart"] .ct-cart-content .product-title {
	font-family: var(--velora-serif);
	font-size: 0.98rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--velora-ink);

	/* فراغ لزرّ الحذف المطلق في نهاية السطر. */
	margin-inline-end: 24px;
	transition: color 0.2s ease;
}

[data-header] [data-id="cart"] .ct-cart-content .product-title:hover {
	color: var(--velora-burnt-d);
}

/* سطر الخيارات (المقاس / اللون) */
[data-header] [data-id="cart"] .ct-cart-content dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 5px;
	margin: 5px 0 0;
	font-size: 0.76rem;
	line-height: 1.5;
	color: var(--velora-ink-soft);
}

[data-header] [data-id="cart"] .ct-cart-content dl.variation dt {
	font-weight: 400;
	opacity: 0.75;
}

[data-header] [data-id="cart"] .ct-cart-content dl.variation dd,
[data-header] [data-id="cart"] .ct-cart-content dl.variation dd p {
	margin: 0;
}

/* «1 × 1,450.00 ج.م» */
[data-header] [data-id="cart"] .ct-cart-content .quantity {
	display: block;
	margin-block-start: 6px;
	font-size: 0.82rem;
	color: var(--velora-ink-soft);
}

[data-header] [data-id="cart"] .ct-cart-content .quantity .woocommerce-Price-amount {
	font-weight: 500;
	color: var(--velora-ink);
}

/* ---- هـ. زرّ حذف الصنف ---- */

/*
 * كان أبيض صارخاً بحجم الأيقونة الافتراضيّ. الحذف فعل نادر ولا رجعة فيه،
 * فيبقى هادئاً حتّى يُقصَد: باهت في الراحة، وبلون البراند عند المرور.
 */
[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart .remove {
	--theme-icon-size: 10px;
	--theme-link-initial-color: var(--velora-ink-soft);

	/*
	 * `position: absolute` مكرّرة عن Blocksy عمداً: قواعد اللوحة عنده في ملفّ
	 * كسول (‏cart-header-element-lazy.css) قد يصل بعد فتح اللوحة بلحظة، وبدونها
	 * يصير زرّ الحذف عنصر شبكة أوّل فيزيح الصورة عموداً كاملاً — ومضة تخطيط
	 * مشوّه. تكرار سطر واحد يمنعها.
	 */
	position: absolute;
	z-index: 2;
	display: flex;
	inset-inline-end: -6px;
	inset-block-start: -6px;
	padding: 7px;
	color: var(--velora-ink-soft);
	opacity: 0.5;
	border-radius: 50%;
	transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

/*
 * البند 10 يكبّر كلّ svg داخل `#header [data-id="cart"]` إلى 20×20 لأنّه
 * قُصد به أيقونة الهيدر — لكنّه يطول أيقونة الحذف داخل اللوحة أيضاً فتصير
 * سلّة قمامة ضخمة وسط صفّ رفيع. نستثني ما داخل اللوحة بدقّة أعلى (1,3,0).
 */
#header [data-id="cart"] .ct-cart-content svg {
	inline-size: var(--theme-icon-size, 10px);
	block-size: var(--theme-icon-size, 10px);
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart .remove:hover {
	color: var(--velora-burnt-d);
	background: var(--velora-paper);
	opacity: 1;
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart .remove:focus-visible {
	outline: 2px solid var(--velora-caramel-d);
	outline-offset: 1px;
	opacity: 1;
}

/* ---- و. المجموع ---- */

/*
 * Blocksy يكتبه 12px عريضاً بحروف كبيرة — صوت عالٍ لا يشبه الموقع.
 * البديل: تسمية هادئة صغيرة، والرقم وحده بخطّ العناوين وبلون البراند —
 * فالعين تقع عليه أوّلاً بلا صراخ.
 */
[data-header] [data-id="cart"] .ct-cart-content .total {
	--theme-text-color: var(--velora-ink-soft);
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total {
	align-items: baseline;
	margin: 0 0 6px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--velora-line);
	font-size: 0.8rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--velora-ink-soft);
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total strong {
	font-weight: 500;
	color: var(--velora-ink-soft);
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-family: var(--velora-serif);
	font-size: 1.14rem;
	font-weight: 400;
	color: var(--velora-burnt-d);
}

/* سطر «الشحن يُحتسب عند إتمام الطلب» (من functions.php) */
[data-header] [data-id="cart"] .velora-minicart-note {
	margin: 0 0 14px;
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--velora-ink-soft);
	opacity: 0.75;
}

/* ---- ز. الزرّان ---- */

/*
 * كانا متطابقين تماماً، فلا يعرف الزائر أيّهما الخطوة التالية.
 * صار «إتمام الطلب» مملوءاً بلون البراند، و«عرض السلّة» مفرَّغاً بإطار —
 * تدرّج بصريّ واضح بضربة عين واحدة.
 */
[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons {
	grid-column-gap: 10px;
	margin: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons .button {
	--theme-button-font-size: 0.8rem;
	--theme-button-font-weight: 500;
	--theme-button-text-transform: none;
	--theme-button-min-height: 46px;
	--theme-button-padding: 0 12px;
	--theme-button-border-radius: 2px;
	--theme-button-letter-spacing: 0.02em;
	--theme-button-shadow: none;

	font-family: var(--velora-sans);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* الأساسيّ */
[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout {
	--theme-button-background-initial-color: var(--velora-burnt-d);
	--theme-button-background-hover-color: var(--velora-caramel-d);
	--theme-button-text-initial-color: var(--velora-cream);
	--theme-button-text-hover-color: var(--velora-cream);
	--theme-button-border: 1px solid transparent;
	--theme-button-border-hover-color: transparent;
}

/* الثانويّ */
[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons .button:not(.checkout) {
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: var(--velora-paper);
	--theme-button-text-initial-color: var(--velora-burnt-d);
	--theme-button-text-hover-color: var(--velora-burnt-d);
	/* الحدّ أغمق قليلاً من `--velora-line`: الخطّ الفاصل يكفيه أن يُلمَح،
	   أمّا حدّ الزرّ فلا بدّ أن يقول «أنا زرّ» من بعيد. */
	--theme-button-border: 1px solid rgba(43, 29, 20, 0.26);
	--theme-button-border-hover-color: var(--velora-burnt-d);
}

[data-header] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons .button:focus-visible {
	outline: 2px solid var(--velora-caramel-d);
	outline-offset: 2px;
}

/*
 * تفضيل تقليل الحركة: انزلاق اللوحة 10px عند الفتح حركة حقيقيّة —
 * نلغيها فتظهر مكانها مباشرةً. (تدرّج الألوان يبقى؛ ليس حركة.)
 */
@media (prefers-reduced-motion: reduce) {
	[data-header] [data-id="cart"] .ct-cart-content,
	[data-header] [data-id="cart"]:hover .ct-cart-content {
		transform: none;
	}
}

/* ==========================================================================
   23. الشحن — ما يراه الزائر قبل أن يدفع
   ========================================================================== */

/*
 * سطر الشحن تحت زرّ الشراء في صفحة المنتج.
 *
 * أكثر سؤال يُسأل قبل الشراء «الشحن بكام؟»، وتأجيل الإجابة لصفحة الدفع أكبر
 * سبب منفرد لترك السلّة. فالسطر هنا لا في الأسفل ولا في صفحة سياسات منفصلة.
 *
 * وهو **مهموس لا صارخ**: لا إطار ولا خلفيّة ملوّنة. المعلومة مطمئنة بطبيعتها،
 * وتلوينها يحوّلها إلى إعلان فيتخطّاها البصر (‏عمى اللافتات).
 */
.velora-ship-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	font-family: var(--velora-sans);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--velora-ink-soft);
}

.velora-ship-note svg {
	flex: 0 0 auto;
	color: var(--velora-caramel);
}

/* سطر التقدّم نحو الشحن المجّانيّ داخل لوحة السلّة المصغّرة. */
[data-header] [data-id="cart"] .velora-minicart-ship {
	margin: 0 0 14px;
	font-size: 0.74rem;
	line-height: 1.5;
	color: var(--velora-ink-soft);
}

/*
 * الرقم الناقص وحده هو الرسالة، فيأخذ لون البراند ووزناً أثقل.
 * البقيّة سياق يُقرأ بطرف العين.
 */
[data-header] [data-id="cart"] .velora-minicart-ship strong {
	font-weight: 600;
	color: var(--velora-burnt-d);
}

/* ==========================================================================
   24. محفظة الموبايل — صندوق الدفع وصفحة الشكر
   ========================================================================== */

/*
 * أرقام التحويل: أهمّ رقم في الصفحة كلّها.
 *
 * الزبونة ستنسخه بإصبعها من شاشة موبايل، فلا يصحّ أن يكون سطراً في فقرة.
 * خلفيّة كريميّة وحدٌّ عريض من جهة البداية يجعلانه كتلة واحدة يقع عليها
 * الإصبع من أوّل مرّة، و`user-select: all` تنتقي الرقم كلّه بلمسة واحدة.
 *
 * و`dir="ltr"` على القيمة إلزاميّ: رقم المحفظة يبدأ بصفر، والخوارزميّة
 * ثنائيّة الاتّجاه تقذف الصفر إلى آخر الرقم في السياق العربيّ فيقرأ الزائر
 * «1012345670» بدل «01012345670» ويحوّل إلى رقم لا وجود له.
 */
.velora-wallet-targets {
	margin: 12px 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.velora-wallet-target {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 12px;
	padding: 10px 14px;
	background: var(--velora-cream);
	border-inline-start: 3px solid var(--velora-caramel);
	border-radius: 4px;
}

.velora-wallet-target-label {
	font-family: var(--velora-sans);
	font-size: 0.76rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--velora-ink-soft);
}

.velora-wallet-target-value {
	font-family: var(--velora-sans);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--velora-burnt-d);
	user-select: all;
	-webkit-user-select: all;
}

.velora-wallet-desc {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.65;
	color: var(--velora-ink-soft);
}

/* حقل رقم المُرسِل. */
.velora-wallet-sender {
	display: grid;
	gap: 6px;
	margin-block-start: 14px;
}

.velora-wallet-label,
.velora-wallet-sender-row label {
	font-family: var(--velora-sans);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--velora-ink);
}

.velora-wallet-input,
.velora-wallet-sender-row .input-text {
	width: 100%;
	padding: 11px 13px;
	font-family: var(--velora-sans);
	font-size: 1rem; /* 16px فأعلى — أقلّ من ذلك يجعل iOS يكبّر الصفحة عند اللمس. */
	color: var(--velora-ink);
	background: #fff;
	border: 1px solid var(--velora-line);
	border-radius: 4px;
}

.velora-wallet-input:focus,
.velora-wallet-sender-row .input-text:focus {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 1px;
	border-color: transparent;
}

.velora-wallet-hint {
	font-family: var(--velora-sans);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--velora-ink-soft);
}

/*
 * صندوق «أكملي الدفع» في صفحة الشكر.
 *
 * الزبونة لم تدفع بعد — هذه ليست صفحة تهنئة بل صفحة تعليمات. فيأخذ الصندوق
 * إطاراً كاملاً يفصله عمّا حوله بدل أن يذوب في تفاصيل الطلب.
 */
.velora-wallet-howto {
	margin: 0 0 32px;
	padding: 20px;
	background: var(--velora-cream);
	border: 1px solid var(--velora-line);
	border-radius: 6px;
}

.velora-wallet-howto-title {
	margin: 0 0 10px;
	font-family: var(--velora-serif);
	font-size: 1.28rem;
	font-weight: 400;
	color: var(--velora-burnt-d);
}

.velora-wallet-amount {
	margin: 0;
	font-family: var(--velora-sans);
	font-size: 0.92rem;
	color: var(--velora-ink-soft);
}

.velora-wallet-amount strong {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--velora-burnt-d);
}

/* داخل صفحة الشكر الصندوق ملوّن أصلاً، فالبطاقات البيضاء أوضح من الكريميّة. */
.velora-wallet-howto .velora-wallet-target {
	background: #fff;
}

.velora-wallet-howto p:last-child {
	margin-block-end: 0;
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--velora-ink-soft);
}

/*
 * شريط التقدّم نحو الشحن المجّانيّ في صفحة السلّة.
 *
 * فوق قائمة المنتجات لا تحتها: القرار بإضافة قطعة يُتّخذ قبل النزول للمجموع،
 * ومن ينزل للمجموع يكون قد قرّر الخروج.
 *
 * والشريط نفسه رفيع (4px) بلا رقم مئويّ: الجملة هي الرسالة، والشريط إحساسٌ
 * بالقرب لا معلومة تُقرأ.
 */
.velora-freeship {
	margin: 0 0 22px;
	padding: 12px 16px;
	background: var(--velora-cream);
	border-radius: 6px;
}

.velora-freeship-text {
	margin: 0 0 8px;
	font-family: var(--velora-sans);
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--velora-ink);
}

.velora-freeship-track {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--velora-line);
	overflow: hidden;
}

.velora-freeship-fill {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: var(--velora-caramel);
	transition: width 0.35s ease;
}

/* اكتمل: اللون يؤكّد الوصول، فلا تحتاج الزائرة أن تقرأ لتعرف. */
.velora-freeship.is-earned .velora-freeship-fill {
	background: var(--velora-burnt-d);
}

/* ==========================================================================
   21. زرّ الدولة والعملة
   --------------------------------------------------------------------------
   كبسولة بنفس مقاس قرص اللغة وبجانبه. والعنصر الحقيقيّ <select> أصليّ لا
   قائمة مرسومة: 99% من الزوّار على الجوّال، وهناك يفتح النظام منتقيه الأصليّ
   — أسرع من أيّ بديل، ويعمل بالكيبورد وقارئ الشاشة بلا سطر إضافيّ.

   والقائمة تحمل أسماء الدول كاملةً (‏248 دولة مجمَّعة بالقارّات)، فنرسم وجهاً
   قصيراً فوقها ونمدّ <select> عليه شفّافاً — انظر التعليق في switcher.php.
   ========================================================================== */

.velora-market {
	position: relative;
	display: inline-flex;
	align-items: center;
	direction: ltr;
	margin: 0;
	line-height: 1;
	vertical-align: middle;
}

.velora-market-face {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 30px;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--velora-line);
	border-radius: 999px;
	font-family: var(--velora-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--velora-ink-soft);
	white-space: nowrap;
	transition: color 0.22s ease, border-color 0.22s ease;
}

/* <select> ممدود فوق الوجه: شفّاف لكنّه هو ما تلمسه الإصبع. */
.velora-market.is-js .velora-market-select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.velora-market.is-js .velora-market-select:focus-visible + .velora-market-face,
.velora-market.is-js .velora-market-select:hover + .velora-market-face {
	color: var(--velora-burnt-d);
	border-color: var(--velora-caramel);
}

/* حلقة التركيز تُرسم على الوجه لأنّ العنصر الحقيقيّ شفّاف. */
.velora-market.is-js .velora-market-select:focus-visible ~ .velora-market-face,
.velora-market.is-js .velora-market-select:focus-visible + .velora-market-face {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

/* بلا جافاسكربت: القائمة نفسها ظاهرة وزرّ «اذهب» بجانبها. */
.velora-market:not(.is-js) .velora-market-select {
	max-width: 160px;
	height: 30px;
	border: 1px solid var(--velora-line);
	border-radius: 999px;
	padding: 0 10px;
	font-family: var(--velora-sans);
	font-size: 0.72rem;
	color: var(--velora-ink-soft);
	background: transparent;
}

.velora-market.is-js .velora-market-go {
	display: none;
}

.velora-market-go {
	margin-inline-start: 6px;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--velora-line);
	border-radius: 999px;
	font-family: var(--velora-sans);
	font-size: 0.72rem;
	color: var(--velora-ink-soft);
	background: transparent;
	cursor: pointer;
}

/* داخل الهيدر: مسافة صغيرة تفصله عن قرص اللغة. */
.ct-header-text .velora-market {
	/* المسافة صارت `gap` على `.entry-content` في القسم 19 — انظر هناك. */
	margin-inline-start: 0;
}

/* النسخة الكاملة — داخل اللوحة المنزلقة على الجوّال: القائمة ظاهرة بعرضها. */
.velora-market--full {
	display: flex;
	width: 100%;
}

/* ⚠️ الدقّة هنا مقصودة: قاعدة `.velora-market.is-js .velora-market-select`
   أعلاه دقّتها (0,3,0) وتخفي القائمة تماماً (‏شفّافة فوق وجهٍ مرسوم)‏ — وهو
   المطلوب في النسخة المصغّرة داخل الهيدر. أمّا النسخة الكاملة داخل اللوحة
   المنزلقة فلا وجه لها، فتبقى القائمة نفسها هي ما يراه الزائر.
   ولأنّ الصنف `is-js` يضعه الجافاسكربت على **كلّ** النماذج، كانت قاعدة
   الإخفاء تغلب هنا أيضاً فيصير عرض النموذج صفراً: زائر الجوّال لم يكن يجد
   زرّ الدولة إطلاقاً، لا في الشريط (‏مخفيّ عمداً لضيق المكان)‏ ولا في اللوحة.
   نضيف `.is-js` لنتساوى في الدقّة، وترتيبُنا المتأخّر يحسم. */
.velora-market--full.is-js .velora-market-select,
.velora-market--full .velora-market-select {
	flex: 1 1 auto;
	max-width: none;
	height: 40px;
	border: 1px solid var(--velora-line);
	border-radius: 999px;
	padding: 0 18px;
	font-family: var(--velora-sans);
	font-size: 0.86rem;
	color: var(--velora-ink);
	background: transparent;
	opacity: 1;
	position: static;
	-webkit-appearance: none;
	appearance: none;
}

.velora-market-offcanvas {
	display: flex;
	justify-content: center;
	padding: 0 0 22px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--velora-line);
}

/* كود الدولة يفصله عن العملة فاصلٌ مرسوم لا محرف، ليختفي معه على الجوّال. */
.velora-market-cc::after {
	content: "\00b7";
	margin: 0 5px;
	opacity: 0.6;
}

/* التابلت: يكفي إسقاط كود الدولة. */
/* الحدّ رُفع من 999.98px إلى 1100px: القائمة صارت خمسة بنود، وعلى 1000px
   يلامس آخرها قرص اللغة. إخفاء رمز الدولة (‏ويبقى رمز العملة)‏ يوفّر نحو 25px
   وهو ما يكفي — والدولة تظلّ قابلة للتغيير من القائمة المنسدلة نفسها. */
@media (max-width: 1100px) {
	.ct-header-text .velora-market {
		margin-inline-start: 5px;
	}

	.ct-header-text .velora-market-face {
		min-width: 22px;
		height: 24px;
		padding: 0 7px;
		font-size: 0.66rem;
	}

	.ct-header-text .velora-market-cc {
		display: none;
	}
}

/* الجوّال: يختفي من الهيدر.

   قيست الحاجة فعلاً عند 375px: اللوجو وحده ~280px، ومعه قرص اللغة والسلّة
   والقائمة لا يبقى للزرّ مكان — فوقع في سطرٍ ثانٍ وزاد ارتفاع الهيدر عن 70px
   المصمَّمة. ولا شيء يضيع بإخفائه: العملة مكتوبة بجانب **كلّ سعرٍ** في الصفحة،
   والزرّ الكامل بأسماء الدول موجود أعلى اللوحة المنزلقة تحت قرص اللغة مباشرةً. */
@media (max-width: 689.98px) {
	.ct-header-text .velora-market {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.velora-market-face {
		transition: none;
	}
}

/* ==========================================================================
   25. قائمة Store — لوحة الأقسام (inc/store-menu.php + assets/store-menu.js)
   --------------------------------------------------------------------------
   اللوحة داخل عنصر <li> نفسه، وبلا `menu-item-has-children`: جافاسكربت Blocksy
   وتنسيقات قوائمه الفرعيّة لا تراها أصلاً، فلا صراع دقّة — المحدّدات أصنافنا.
   ألوانها ألوان سلّة الهيدر (القسم 22): كريميّ بحدّ رفيع وظلّ بلون الحبر.

   السمة hidden تُطفأ بـ display من ملفّ المتصفّح نفسه، وأيّ display نكتبه
   على الصنف يغلبها — فنعيدها صراحةً قبل كلّ شيء.
   ========================================================================== */

.velora-mega[hidden],
.velora-mstore[hidden] {
	display: none;
}

/* --- السهم بجانب الكلمة --- */
.velora-store-chevron {
	flex: 0 0 auto;
	margin-inline-start: 6px;
	opacity: 0.6;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.velora-store-item.is-open > .ct-menu-link .velora-store-chevron {
	opacity: 1;
	transform: rotate(180deg);
}

/* بين 1000 و1279px القائمة ضيّقة أصلاً (القسم 10) — سهمٌ أقرب للكلمة */
@media (min-width: 1000px) and (max-width: 1279.98px) {
	#header .velora-store-chevron {
		margin-inline-start: 4px;
	}
}

/* ---------- 25.1 سطح المكتب ---------- */

#header .velora-store-item {
	position: relative;
}

.velora-mega {
	position: absolute;
	z-index: 30;
	inset-block-start: calc(100% + 10px);
	inset-inline-start: -22px;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: 1fr auto;
	column-gap: 48px;
	inline-size: max-content;
	max-inline-size: calc(100vw - 48px);
	padding: 32px 36px 28px;
	background: var(--velora-stone);
	border: 1px solid var(--velora-line);
	border-radius: 3px;
	box-shadow:
		0 1px 2px rgba(43, 29, 20, 0.05),
		0 30px 60px -30px rgba(43, 29, 20, 0.4);
	text-align: start;
	cursor: default;

	/* الإزاحة الأفقيّة من store-menu.js تُبقي اللوحة داخل النافذة */
	translate: var(--velora-mega-shift, 0px) 0;

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity 0.22s ease,
		transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s linear 0.34s;
}

.velora-store-item.is-open > .velora-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 0.22s ease,
		transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s;
}

/* جسرٌ غير مرئيّ فوق اللوحة: الماوس يعبر الفجوة بين الكلمة واللوحة ولا تُغلق */
.velora-mega::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 100%;
	block-size: 14px;
}

.velora-mega.is-textual {
	grid-template-columns: auto;
}

/* الأعمدة — عمود لكلّ قسم رئيسيّ */
.velora-mega__cols {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(150px, max-content);
	column-gap: 48px;
	align-content: start;
}

.velora-mega__group {
	display: grid;
	align-content: start;
	justify-items: start;
}

/*
 * ⚠️ Blocksy يعطي كلّ رابط `transition: all 0.12s` — و«all» تشمل visibility
 * الموروثة من اللوحة. فلحظةَ الفتح يبدأ الرابط «مخفيّاً» ويتحوّل خلال 0.12s:
 * التركيز بالسهم لأسفل يفشل، والضغط السريع يضيع. نحدّد ما يتحرّك صراحةً.
 */
.velora-mega a {
	text-decoration: none;
	transition: color 0.25s ease;
}

.velora-mega__heading {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-block: 2px 6px;
	font-family: var(--velora-serif);
	font-size: 1.32rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--velora-ink);
}

.velora-mega__heading > span,
.velora-mega__link {
	position: relative;
}

.velora-mega__heading .velora-store-arrow {
	opacity: 0;
	translate: -4px 0;
	transition: opacity 0.25s ease, translate 0.3s ease;
}

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

.velora-mega__list {
	display: grid;
	justify-items: start;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.velora-mega__list li {
	margin: 0;
}

.velora-mega__link {
	display: inline-block;
	padding-block: 7px;
	font-family: var(--velora-sans);
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--velora-ink-soft);
	transition: color 0.25s ease;
}

.velora-mega .velora-mega__link:hover,
.velora-mega .velora-mega__link:focus-visible,
.velora-mega .velora-mega__link[aria-current="page"] {
	color: var(--velora-ink);
}

/* الخطّ البرونزيّ الزاحف تحت الرابط — نفس حركة روابط الهيدر (القسم 7) */
.velora-mega__heading > span::after,
.velora-mega__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -2px;
	block-size: 1px;
	background: var(--velora-caramel-d);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.velora-mega__link::after {
	inset-block-end: 5px;
}

.velora-mega__heading:hover > span::after,
.velora-mega__heading:focus-visible > span::after,
.velora-mega__heading[aria-current="page"] > span::after,
.velora-mega__link:hover::after,
.velora-mega__link:focus-visible::after,
.velora-mega__link[aria-current="page"]::after {
	transform: scaleX(1);
}

.velora-mega a:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 3px;
}

/* «All products» — سطرٌ مستقلّ تحت الأعمدة */
.velora-mega__all {
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-start: 28px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--velora-line);
	font-family: var(--velora-sans);
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--velora-ink);
	transition: color 0.25s ease;
}

.velora-mega .velora-mega__all:hover,
.velora-mega .velora-mega__all:focus-visible {
	color: var(--velora-bronze);
}

.velora-mega__all .velora-store-arrow {
	transition: translate 0.3s ease;
}

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

/* صورة المعاينة — تتبدّل مع الرابط الذي يقف عليه الماوس أو التركيز */
.velora-mega__media {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: relative;
	align-self: start;
	inline-size: 208px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 2px;
	background: var(--velora-stone-deep);
}

.velora-mega__shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.velora-mega__shot.is-active {
	opacity: 1;
}

.velora-mega__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.velora-mega__shot.is-active .velora-mega__img {
	transform: none;
}

.velora-mega__caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 44px 16px 14px;
	background: linear-gradient(to top, rgba(42, 33, 25, 0.62), rgba(42, 33, 25, 0));
	color: var(--velora-stone);
	font-family: var(--velora-serif);
	font-style: italic;
	font-size: 1.02rem;
	line-height: 1.3;
}

/* دخولٌ متدرّج خفيف للمحتوى مع كلّ فتح */
@keyframes velora-mega-rise {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.velora-store-item.is-open .velora-mega__group,
.velora-store-item.is-open .velora-mega__all,
.velora-store-item.is-open .velora-mega__media {
	animation: velora-mega-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.velora-store-item.is-open .velora-mega__media { animation-delay: 0.05s; }
.velora-store-item.is-open .velora-mega__group:nth-child(2) { animation-delay: 0.06s; }
.velora-store-item.is-open .velora-mega__group:nth-child(3) { animation-delay: 0.12s; }
.velora-store-item.is-open .velora-mega__group:nth-child(n+4) { animation-delay: 0.16s; }
.velora-store-item.is-open .velora-mega__all { animation-delay: 0.14s; }

/* ---------- 25.2 الموبايل — أكورديون داخل اللوحة المنزلقة ---------- */

/*
 * الفتح بـ grid-template-rows من 0fr إلى 1fr: ارتفاعٌ يتحرّك بلا قياس جافاسكربت.
 * و visibility تُخرج الروابط المطويّة من ترتيب Tab ومن قارئ الشاشة.
 * الصنف velora-mstore-ready يضعه السكربت — بلاه تبقى اللوحة hidden ويبقى
 * Store رابطاً عاديّاً.
 */
.velora-mstore {
	display: grid;
	grid-template-rows: 1fr;
	align-self: stretch;
	inline-size: 100%;
}

.velora-mstore-ready > .velora-mstore {
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s linear 0.4s;
}

.velora-mstore-ready.is-open > .velora-mstore {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s;
}

/*
 * ⚠️ لا حشو رأسيّ هنا: الحشو لا يُطوى مع الصفّ (‏0fr يطوي المحتوى لا الحشو)،
 * فكان يترك فجوة 16px تحت Store والأكورديون مغلق. المسافة على الأبناء بدلاً منه
 * — تُقصّ مع المحتوى. والحشو الأفقيّ الصغير مساحةٌ لحلقة تركيز لوحة المفاتيح.
 */
.velora-mstore__inner {
	display: grid;
	justify-items: start;
	min-block-size: 0;
	overflow: hidden;
	padding-inline: 3px;
}

.velora-mstore__inner > :first-child {
	margin-block-start: 2px;
}

.velora-mstore__inner > :last-child {
	margin-block-end: 14px;
}

/* دقّة (1,2,0) تغلب قاعدة Blocksy العامّة `.mobile-menu a`.
   والانتقال محدّد صراحةً لنفس سبب لوحة سطح المكتب (‏`all` تشمل visibility). */
#offcanvas .velora-mstore a {
	font-family: var(--velora-sans);
	letter-spacing: 0;
	text-decoration: none;
	transition: color 0.25s ease;
}

#offcanvas .velora-mstore .velora-mstore__all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-block: 10px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--velora-ink);
}

.velora-mstore__group {
	display: grid;
	justify-items: start;
	padding-block: 4px;
}

#offcanvas .velora-mstore .velora-mstore__heading {
	padding-block: 8px;
	font-family: var(--velora-serif);
	font-size: 1.18rem;
	line-height: 1.3;
	color: var(--velora-ink);
}

/* الفروع مُزاحة للداخل، وخطٌّ رأسيّ رفيع يربطها بقسمها */
.velora-mstore__list {
	display: grid;
	justify-items: start;
	margin-block: 2px 4px;
	padding-inline-start: 16px;
	border-inline-start: 1px solid var(--velora-line);
}

#offcanvas .velora-mstore .velora-mstore__link {
	padding-block: 9px;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--velora-ink-soft);
}

#offcanvas .velora-mstore [aria-current="page"] {
	color: var(--velora-ink);
	font-weight: 500;
}

#offcanvas .velora-mstore a:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.velora-store-chevron,
	.velora-mega,
	.velora-store-item.is-open > .velora-mega,
	.velora-mega__shot,
	.velora-mega__img,
	.velora-mega__heading .velora-store-arrow,
	.velora-mega__all .velora-store-arrow,
	.velora-mega__heading > span::after,
	.velora-mega__link::after,
	.velora-mstore-ready > .velora-mstore,
	.velora-mstore-ready.is-open > .velora-mstore {
		transition: none;
	}

	.velora-mega,
	.velora-mega__img {
		transform: none;
	}

	.velora-store-item.is-open .velora-mega__group,
	.velora-store-item.is-open .velora-mega__all,
	.velora-store-item.is-open .velora-mega__media {
		animation: none;
	}
}

/* ==========================================================================
   26. الإضافة للسلّة من البطاقة + بطاقة التأكيد
       (inc/quick-add.php + assets/quick-add.js)
   --------------------------------------------------------------------------
   النموذج داخل خانة زرّ Blocksy (.ct-woo-card-actions)، فمحاذاته المتساوية
   (margin-top:auto) تصفّ الأزرار على خطّ واحد في كلّ صفّ مهما طالت العناوين.

   ⚠️ Blocksy يُلبس كلّ [type="submit"] شكل زرّه (دقّة 0,1,0 و 0,2,0 مع :hover)
   ويرسم ظلّاً على ::before — فمحدّدات الزرّ هنا تبدأ بـ .velora-qa (0,2,0 فما فوق)،
   ومتغيّر الظلّ يُطفأ على النموذج كلّه.
   ========================================================================== */

.ct-woo-card-actions > .velora-qa {
	flex: 1 1 100%;
	min-inline-size: 0;
}

.velora-qa {
	--theme-button-shadow: none;
	--theme-button-transform: none;

	display: grid;
	gap: 14px;
	inline-size: 100%;
	margin-block-start: 4px;
	text-align: start;
}

/* ---------- 26.1 صفّ الخاصّيّة: عنوان صغير + الخيارات ---------- */

.velora-qa__field {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.velora-qa__legend {
	display: flex;
	align-items: baseline;
	gap: 8px;
	inline-size: 100%;
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--velora-sans);
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--velora-ink-soft);
	transition: color 0.25s ease;
}

/* القيمة المختارة بجانب العنوان: «SIZE · M» — والاسم يفرّق الأسود عن الكحليّ */
.velora-qa__value {
	font-size: 0.74rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--velora-ink);
}

.velora-qa__value:not(:empty)::before {
	content: "·";
	margin-inline-end: 8px;
	color: var(--velora-ink-soft);
}

.velora-qa__options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* الراديو الحقيقيّ مخفيّ بصريّاً — يبقى للوحة المفاتيح وقارئ الشاشة */
.velora-qa__input {
	position: absolute;
	inset: 0;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

/* أزرار المقاس — تتقاسم عرض البطاقة في صفٍّ واحد حتّى على 375px */
.velora-qa__chip {
	position: relative;
	display: flex;
	flex: 1 1 0;
	min-inline-size: 30px;
	max-inline-size: 58px;
	cursor: pointer;
}

.velora-qa__chip-text {
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	block-size: 34px;
	padding-inline: 4px;
	border: 1px solid var(--velora-line);
	color: var(--velora-ink);
	font-family: var(--velora-sans);
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.velora-qa__chip:hover .velora-qa__input:not(:disabled) + .velora-qa__chip-text {
	border-color: var(--velora-ink);
}

.velora-qa__input:checked + .velora-qa__chip-text {
	background-color: var(--velora-ink);
	border-color: var(--velora-ink);
	color: var(--velora-stone);
}

/* غير المتاح: باهت وعليه خطّ مائل رفيع */
.velora-qa__input:disabled + .velora-qa__chip-text {
	color: rgba(42, 33, 25, 0.36);
	background-image: linear-gradient(
		to top right,
		transparent calc(50% - 0.5px),
		rgba(42, 33, 25, 0.22) calc(50% - 0.5px),
		rgba(42, 33, 25, 0.22) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
	cursor: not-allowed;
}

.velora-qa__chip.is-out,
.velora-qa__chip.is-none,
.velora-qa__swatch.is-out,
.velora-qa__swatch.is-none {
	cursor: not-allowed;
}

/*
 * لا يتوفّر مع الاختيار الحاليّ (‏مقاسٌ ليس في اللون المختار) — شطبٌ أخفّ، ويبقى
 * قابلاً للضغط: اختياره يمسح الخاصّيّة الأخرى بدل أن تعلق الزائرة (‏quick-add.js).
 */
.velora-qa__chip.is-conflict .velora-qa__input:not(:checked) + .velora-qa__chip-text {
	color: rgba(42, 33, 25, 0.5);
	background-image: linear-gradient(
		to top right,
		transparent calc(50% - 0.5px),
		rgba(42, 33, 25, 0.16) calc(50% - 0.5px),
		rgba(42, 33, 25, 0.16) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
}

.velora-qa__swatch.is-conflict .velora-qa__input:not(:checked) + .velora-qa__dot {
	opacity: 0.55;
}

/*
 * الجوّال: عرض البطاقة الداخليّ نحو 158px. خمسة مقاسات (‏XS–XL) بحدٍّ أدنى 30px
 * وفجوة 6px تحتاج 174px فتنكسر إلى سطرين — 26px وفجوة 4px تسعها (‏146px)، وتبقى
 * فوق الحدّ الأدنى لمساحة اللمس في WCAG 2.2 (‏24×24).
 */
@media (max-width: 689.98px) {
	.velora-qa__field--chip .velora-qa__options {
		gap: 4px;
	}

	.velora-qa__chip {
		min-inline-size: 26px;
	}
}

/* دوائر الألوان: 22px داخل مساحة لمس 30px، والمختار حلقتان — فجوة كريميّة ثمّ حبر */
.velora-qa__swatch {
	position: relative;
	display: inline-grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	cursor: pointer;
}

.velora-qa__dot {
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	background-color: var(--velora-swatch, var(--velora-taupe));
	box-shadow: inset 0 0 0 1px rgba(42, 33, 25, 0.12);
	transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* الألوان الفاتحة (كريميّ، رمليّ) لا تذوب في الخلفيّة */
.velora-qa__swatch.is-light .velora-qa__dot {
	box-shadow: inset 0 0 0 1px rgba(42, 33, 25, 0.3);
}

.velora-qa__swatch:hover .velora-qa__input:not(:disabled) + .velora-qa__dot {
	transform: scale(1.08);
}

.velora-qa__input:checked + .velora-qa__dot {
	box-shadow:
		inset 0 0 0 1px rgba(42, 33, 25, 0.12),
		0 0 0 2px var(--velora-stone),
		0 0 0 3px var(--velora-ink);
}

.velora-qa__input:disabled + .velora-qa__dot {
	opacity: 0.35;
	background-image: linear-gradient(
		to top right,
		transparent calc(50% - 0.75px),
		var(--velora-stone) calc(50% - 0.75px),
		var(--velora-stone) calc(50% + 0.75px),
		transparent calc(50% + 0.75px)
	);
}

.velora-qa__input:focus-visible + .velora-qa__chip-text,
.velora-qa__input:focus-visible + .velora-qa__dot {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

/* قائمة اختيار — لخاصّيّةٍ خياراتها أكثر من ثمانية */
.velora-qa__select {
	inline-size: 100%;
	block-size: 36px;
	padding-block: 0;
	padding-inline: 10px 30px;
	border: 1px solid var(--velora-line);
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%232A2119' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 10px;
	font-family: var(--velora-sans);
	font-size: 0.82rem;
	color: var(--velora-ink);
	appearance: none;
}

.velora-qa__select:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

/* التنبيه: الضغط قبل الاختيار يلوّن الصفّ الناقص ويهزّه هزّةً خفيفة */
.velora-qa__field.is-missing .velora-qa__legend {
	color: var(--velora-caramel);
}

.velora-qa__field.is-missing .velora-qa__input:not(:disabled) + .velora-qa__chip-text,
.velora-qa__field.is-missing .velora-qa__select {
	border-color: rgba(185, 121, 62, 0.7);
}

.velora-qa__field.is-missing .velora-qa__options {
	animation: velora-qa-nudge 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes velora-qa-nudge {
	0%, 100% { transform: none; }
	20% { transform: translateX(-3px); }
	40% { transform: translateX(3px); }
	60% { transform: translateX(-2px); }
	80% { transform: translateX(1px); }
}

/* ---------- 26.2 زرّ الإضافة ---------- */

.velora-qa .velora-qa__submit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: 100%;
	min-block-size: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--velora-ink);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--velora-ink);
	font-family: var(--velora-sans);
	font-size: 0.84rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: none;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.velora-qa .velora-qa__submit:hover,
.velora-qa .velora-qa__submit:focus-visible {
	background: var(--velora-ink);
	border-color: var(--velora-ink);
	color: var(--velora-stone);
}

.velora-qa .velora-qa__submit:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

/* ما الناقص؟ — الزرّ نفسه يقوله لحظيّاً */
.velora-qa.is-hinting .velora-qa__submit,
.velora-qa.is-hinting .velora-qa__submit:hover {
	background: transparent;
	border-color: var(--velora-caramel);
	color: var(--velora-bronze);
}

/* أثناء الإرسال: خطٌّ رفيع يجري في أسفل الزرّ */
.velora-qa.is-busy .velora-qa__submit {
	cursor: progress;
}

.velora-qa.is-busy .velora-qa__submit::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background: linear-gradient(90deg, transparent, var(--velora-caramel), transparent) no-repeat;
	background-size: 50% 100%;
	animation: velora-qa-progress 1s ease-in-out infinite;
}

@keyframes velora-qa-progress {
	from { background-position: -100% 0; }
	to { background-position: 200% 0; }
}

/* أُضيفت: ممتلئ بالحبر وعلامة صحّ ترتسم */
.velora-qa.is-added .velora-qa__submit {
	background: var(--velora-ink);
	border-color: var(--velora-ink);
	color: var(--velora-stone);
}

/* علامة الصحّ بحدَّين فيزيائيَّين عمداً — لا تنقلب في العربيّة */
.velora-qa.is-added .velora-qa__submit-text::before {
	content: "";
	display: inline-block;
	inline-size: 11px;
	block-size: 6px;
	margin-inline-end: 9px;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-3px) rotate(-45deg);
	animation: velora-qa-tick 0.35s ease both;
}

@keyframes velora-qa-tick {
	from {
		opacity: 0;
		transform: translateY(-3px) rotate(-45deg) scale(0.4);
	}

	to {
		opacity: 1;
		transform: translateY(-3px) rotate(-45deg) scale(1);
	}
}

.velora-qa__msg {
	margin: -4px 0 0;
	font-family: var(--velora-sans);
	font-size: 0.76rem;
	line-height: 1.45;
	color: var(--velora-bronze);
}

.velora-qa__msg:empty {
	display: none;
}

/* نفد بالكامل */
.velora-qa__soldout {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	border: 1px solid var(--velora-line);
	color: var(--velora-ink-soft);
	font-family: var(--velora-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- 26.3 صورة البطاقة مع اللون المختار ---------- */

/*
 * نسخة الصورة القديمة فوق الجديدة تتلاشى — ذوبانٌ لا وميض. المحدّد طويل عمداً:
 * قاعدة القسم 11 على صور البطاقة (0,4,3) تكتب transition آخر فتلغي التلاشي.
 */
.woocommerce ul.products li.product .ct-media-container img.velora-qa-ghost {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.45s ease, transform 0.6s ease;
}

.woocommerce ul.products li.product .ct-media-container img.velora-qa-ghost.is-leaving {
	opacity: 0;
}

/* صورة المرور تخصّ اللون الأصليّ — تُطفأ ما دام لونٌ آخر معروضاً */
[data-hover="swap"] .ct-media-container.velora-qa-swapped .ct-swap {
	display: none;
}

[data-hover="swap"] .has-hover-effect.velora-qa-swapped:hover .ct-swap + img {
	opacity: 1;
}

/* شارة الخصم تتبع اللون: لونٌ بلا خصم يُخفيها (‏`hidden`)، ونمط Blocksy للشارة
   يكتب display فيغلب قاعدة المتصفّح الافتراضيّة لـ [hidden]. */
.woocommerce ul.products li.product .onsale[hidden],
.woocommerce .woocommerce-product-gallery .onsale[hidden] {
	display: none;
}

/* ---------- 26.4 قسم «المجموعة» في الرئيسيّة ---------- */

/*
 * إصلاح: شبكة الخطوط الشعريّة (القسم 4.3) كانت مكسورة بصمت. القسم 11
 * (`.woocommerce ul.products` و `… li.product`) بنفس الدقّة ويأتي بعده في الملفّ،
 * فكان يغلبه: فجوة 34px بدل 1px، وبطاقات شفّافة تكشف خلفيّة السطر الداكنة تحتها —
 * فظهرت المجموعة بطاقاتٍ داكنة تفصلها أشرطة عريضة. والقسم 13 يزيدها على الجوّال.
 * الشورت كود يلفّ الشبكة في `.woocommerce`، فنضيفه للمحدّد ونعلو دقّةً بلا !important.
 */
.velora-collection .woocommerce ul.products {
	gap: 1px;
}

.velora-collection .woocommerce ul.products li.product {
	background: var(--velora-stone);
}

/* نفس الهامش الداخليّ للعنوان والسعر (القسم 4.3) */
.velora-collection ul.products li.product .ct-woo-card-actions {
	margin-inline: 20px;
}

/* منتجٌ يبقى بزرّ ووكومرس (‏مجمَّع أو خارجيّ) — هامشه الآن على الخانة لا على الزرّ،
   وإلّا تضاعف (‏قاعدة 4.3 تعطي .button هامشاً 20px أيضاً). */
.velora-collection ul.products li.product .ct-woo-card-actions .button,
.velora-collection ul.products li.product .ct-woo-card-actions .added_to_cart {
	margin-inline: 0;
}

/* على الجوّال بطاقة الرئيسيّة نصف الشاشة، و20px من كلّ جانب تضيّق أزرار المقاس */
@media (max-width: 600px) {
	.velora-collection ul.products li.product .woocommerce-loop-product__title,
	.velora-collection ul.products li.product .price,
	.velora-collection ul.products li.product .ct-woo-card-actions {
		margin-inline: 14px;
	}
}

/* ---------- 26.5 نبضة سلّة الهيدر بعد الإضافة ---------- */

@keyframes velora-cart-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.18); }
	70% { transform: scale(0.96); }
	100% { transform: scale(1); }
}

[data-id="cart"] .ct-cart-item.velora-cart-bump {
	animation: velora-cart-bump 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ---------- 26.6 بطاقة التأكيد ---------- */

/*
 * داكنة فوق صفحةٍ فاتحة — تُرى بلا أن تحجب شيئاً. أسفل الشاشة على الجوّال
 * (فوق شريط الإيماءات في الشاشات ذات الحافّة)، وأعلى الجانب تحت الهيدر على
 * سطح المكتب. لا تسرق التركيز: رسالة، لا نافذة.
 */
.velora-toast[hidden] {
	display: none;
}

.velora-toast {
	position: fixed;
	z-index: 10000;
	inset-inline: 12px;
	inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
	max-inline-size: 420px;
	margin-inline: auto;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.velora-toast.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

@media (min-width: 690px) {
	.velora-toast {
		inset-inline-start: auto;
		inset-inline-end: 24px;
		/* شريط الإدارة (‏للمالك وهو مسجَّل الدخول) يُزيح الهيدر — Blocksy يعرّف طوله */
		inset-block-start: calc(var(--admin-bar, 0px) + var(--header-height, 72px) + 16px);
		inset-block-end: auto;
		inline-size: 380px;
		margin-inline: 0;
		transform: translateY(-10px);
	}
}

.velora-toast .velora-toast__card {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 14px;
	padding: 14px;
	border-radius: 3px;
	background: var(--velora-ink);
	color: var(--velora-stone);
	box-shadow:
		0 2px 6px rgba(20, 14, 9, 0.18),
		0 24px 48px -20px rgba(20, 14, 9, 0.55);
	font-family: var(--velora-sans);
}

.velora-toast .velora-toast__media {
	inline-size: 56px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(239, 231, 216, 0.08);
}

.velora-toast .velora-toast__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.velora-toast .velora-toast__body {
	align-self: center;
	min-inline-size: 0;
	padding-inline-end: 28px;
}

.velora-toast .velora-toast__card > .velora-toast__body:first-child {
	grid-column: 1 / -1;
}

.velora-toast .velora-toast__eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 5px;
	font-size: 0.64rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--velora-caramel);
}

.velora-toast .velora-toast__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-family: var(--velora-serif);
	font-size: 1rem;
	line-height: 1.3;
	color: var(--velora-stone);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.velora-toast .velora-toast__meta {
	margin: 4px 0 0;
	font-size: 0.76rem;
	line-height: 1.45;
	color: rgba(239, 231, 216, 0.72);
}

.velora-toast .velora-toast__meta .woocommerce-Price-amount {
	color: var(--velora-stone);
}

/* النقطة الفاصلة من CSS لا من HTML — فلا تراها TranslatePress عقدةً نصّيّة تسجّلها */
.velora-toast .velora-toast__sep::before {
	content: "·";
	margin-inline: 7px;
}

.velora-toast .velora-toast__part {
	unicode-bidi: isolate;
}

.velora-toast .velora-toast__close {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 6px;
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: rgba(239, 231, 216, 0.7);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.velora-toast .velora-toast__close:hover,
.velora-toast .velora-toast__close:focus-visible {
	background: rgba(239, 231, 216, 0.1);
	color: var(--velora-stone);
}

.velora-toast .velora-toast__actions {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.velora-toast .velora-toast__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 40px;
	padding: 0 12px;
	border: 1px solid rgba(239, 231, 216, 0.5);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--velora-stone);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.velora-toast .velora-toast__btn--ghost:hover {
	background: rgba(239, 231, 216, 0.1);
	border-color: var(--velora-stone);
	color: var(--velora-stone);
}

/* الزرّ الممتلئ فوق الداكن — نفس لغة زرّ البطل (القسم 4.10) */
.velora-toast .velora-toast__btn--solid {
	background: var(--velora-stone);
	border-color: var(--velora-stone);
	color: var(--velora-ink);
}

.velora-toast .velora-toast__btn--solid:hover {
	background: var(--velora-caramel);
	border-color: var(--velora-caramel);
	color: var(--velora-ink);
}

.velora-toast .velora-toast__btn:focus-visible,
.velora-toast .velora-toast__close:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.velora-qa__chip-text,
	.velora-qa__dot,
	.velora-qa .velora-qa__submit,
	.velora-toast,
	.woocommerce ul.products li.product .ct-media-container img.velora-qa-ghost {
		transition: none;
	}

	.velora-toast,
	.velora-qa__swatch:hover .velora-qa__input:not(:disabled) + .velora-qa__dot {
		transform: none;
	}

	.velora-qa__field.is-missing .velora-qa__options,
	.velora-qa.is-added .velora-qa__submit-text::before,
	[data-id="cart"] .ct-cart-item.velora-cart-bump {
		animation: none;
	}
}

/* ==========================================================================
   27. فيديو المعاينة في البطاقة (inc/card-video.php + assets/card-video.js)
   ========================================================================== */

/*
 * فوق الصورة داخل صندوقها 3:4 نفسه (‏الحاوية `overflow: hidden` و`isolation`، فشارات
 * الخصم تبقى فوقه)، وفوق نسخة الذوبان (‏z-index 1 في 26.3). شفّافٌ حتّى يُرسم أوّل
 * إطار (‏`.is-playing`)، والضغط عليه ضغطٌ على رابط المنتج تحته.
 */
.woocommerce ul.products li.product .ct-media-container .velora-card-video {
	position: absolute;
	inset: 0;
	z-index: 2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	background: transparent;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.6s ease;
}

.woocommerce ul.products li.product .ct-media-container.is-playing .velora-card-video {
	opacity: 1;
}

/* نفس تكبير الصورة عند المرور (‏القسم 11) — الفيديو والصورة حركةٌ واحدة. */
.woocommerce ul.products li.product:hover .ct-media-container .velora-card-video {
	transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product .ct-media-container .velora-card-video {
		display: none;
	}
}

/* ==========================================================================
   28. الطقم الكامل — البانر ولوحة اختيار القطع
       (inc/bundle.php + assets/bundle.js)
   --------------------------------------------------------------------------
   البانر من ملفّ التصميم: velora-homepage-2.html (‏الرئيسيّة) و velora-store.html
   (‏المتجر، بمقاساتٍ أصغر). عمود نصٍّ بخلفيّة الحبر وعمود صورة، والقيم الصريحة
   صارت متغيّرات --velora-*، والخصائص منطقيّة فتنقلب وحدها في العربيّة.

   الموبايل أوّلاً: الرئيسيّة عمودٌ واحد (‏النصّ ثمّ الصورة — كالتصميم)، والمتجر
   بطاقةٌ مدمجة بصورةٍ جانبيّة بلا وصف (~270px بدل ~540px) فلا تبعد المنتجات.
   ========================================================================== */

/* ---------- 28.1 البانر ---------- */

.velora-bundle {
	margin-block: 0;
	color: var(--velora-stone);
}

.velora-bundle__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-inline-size: var(--velora-max);
	margin-inline: auto;
	background: var(--velora-ink);
}

.velora-bundle__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-inline-size: 0;
	padding: clamp(40px, 5vw, 72px);
}

.velora-bundle .velora-bundle__copy > * {
	margin: 0;
}

.velora-bundle__eyebrow {
	margin-block-end: 14px;
	font-family: var(--velora-sans);
	font-size: 0.906rem;
	line-height: 1.4;
	color: var(--velora-taupe);
}

.velora-bundle .velora-bundle__title {
	font-family: var(--velora-serif);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--velora-stone);
}

.velora-bundle .velora-bundle__desc {
	max-inline-size: 38ch;
	margin-block-start: 14px;
	font-size: 0.938rem;
	line-height: 1.6;
	color: rgba(239, 231, 216, 0.82);
}

/* ~~قبل~~ بعد — wc_format_sale_price() تلفّهما في span.sale-price، و Blocksy يقلبهما
   (‏`.sale-price del { order: 2 }` في woocommerce.min.css). التصميم: القديم أوّلاً. */
.velora-bundle__price,
.velora-bundle__price .sale-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 4px 14px;
}

.velora-bundle__price .sale-price del,
.velora-bundle-sheet__price .sale-price del {
	order: 0;
}

.velora-bundle .velora-bundle__price {
	margin-block-start: 26px;
	line-height: 1.1;
}

.velora-bundle__price del {
	font-size: 1rem;
	color: rgba(239, 231, 216, 0.5);
	text-decoration: line-through;
	opacity: 1;
}

.velora-bundle__price ins {
	font-family: var(--velora-serif);
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 400;
	color: var(--velora-stone);
	text-decoration: none;
}

.velora-bundle__price .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* سطر الكراميل: «وفّري …» ثمّ سطر الشحن — النقطة الفاصلة من هنا لا من النصّ */
.velora-bundle .velora-bundle__perks {
	display: flex;
	flex-wrap: wrap;
	margin-block-start: 10px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--velora-caramel);
}

.velora-bundle__perks > span + span::before {
	content: "·";
	margin-inline: 0.5em;
}

/* الزرّ مفرَّغ بلون الحجر فوق الحبر، ويمتلئ عند المرور (‏.btn-add-invert في التصميم) */
.velora-bundle .velora-bundle__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	margin-block-start: 22px;
	padding: 14px 32px;
	border: 1px solid var(--velora-stone);
	border-radius: 0;
	background: transparent;
	color: var(--velora-stone);
	font-family: var(--velora-sans);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.velora-bundle .velora-bundle__cta:hover,
.velora-bundle .velora-bundle__cta:focus-visible,
.velora-bundle .velora-bundle__cta[aria-expanded="true"] {
	background: var(--velora-stone);
	color: var(--velora-ink);
}

.velora-bundle .velora-bundle__cta:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 3px;
}

/* الصورة تملأ عمودها — position:absolute لأنّ ارتفاع عنصر الشبكة «ممتدّ» لا «محدَّد»
   (‏نفس سبب صورة البطل، tech-notes بند 68). والتدرّج احتياطيّ من التصميم بلا صورة. */
.velora-bundle__photo {
	position: relative;
	overflow: hidden;
	min-block-size: 260px;
	background: linear-gradient(155deg, var(--velora-caramel), var(--velora-bronze) 60%, var(--velora-metal));
}

.velora-bundle__photo img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

/* التصميم: البانر ملاصقٌ لخطّ شريط القيم. هامش الـ 24px أسفل الشريط (‏تخطيط المحرّر)
   كان مختفياً على خلفيّةٍ من لونه، وفوق البانر الغامق صار شريطاً فاتحاً ظاهراً. */
.velora-values:has(+ .velora-bundle) {
	margin-block-end: 0;
}

@media (min-width: 900.02px) {
	.velora-bundle--home .velora-bundle__inner {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

/* ---------- 28.2 نسخة المتجر والأقسام (velora-store.html) ---------- */

.velora-bundle--store .velora-bundle__inner {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.velora-bundle--store.velora-bundle--top {
	margin-block-end: 48px;
}

.velora-bundle--store.velora-bundle--bottom {
	margin-block-start: 56px;
}

.velora-bundle--store .velora-bundle__copy {
	padding: clamp(32px, 4vw, 56px);
}

.velora-bundle--store .velora-bundle__eyebrow {
	font-size: 0.813rem;
}

.velora-bundle--store .velora-bundle__title {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.velora-bundle--store .velora-bundle__desc {
	max-inline-size: 36ch;
	margin-block-start: 10px;
	font-size: 0.875rem;
}

.velora-bundle--store .velora-bundle__price {
	margin-block-start: 20px;
}

.velora-bundle--store .velora-bundle__price del {
	font-size: 0.938rem;
}

.velora-bundle--store .velora-bundle__price ins {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.velora-bundle--store .velora-bundle__perks {
	margin-block-start: 8px;
}

.velora-bundle--store .velora-bundle__cta {
	margin-block-start: 20px;
	padding: 13px 26px;
}

.velora-bundle--store .velora-bundle__photo {
	min-block-size: 220px;
}

/* الموبايل: بطاقة مدمجة — الصورة شريطٌ جانبيّ، والوصف مخفيّ (‏القطع كلّها في اللوحة) */
@media (max-width: 689.98px) {
	.velora-bundle--store .velora-bundle__inner {
		grid-template-columns: minmax(0, 1fr) 38%;
	}

	.velora-bundle--store.velora-bundle--top {
		margin-block-end: 28px;
	}

	.velora-bundle--store.velora-bundle--bottom {
		margin-block-start: 36px;
	}

	.velora-bundle--store .velora-bundle__copy {
		padding-block: 20px;
		padding-inline: 18px 16px;
	}

	.velora-bundle--store .velora-bundle__eyebrow {
		margin-block-end: 8px;
		font-size: 0.75rem;
	}

	.velora-bundle--store .velora-bundle__title {
		font-size: 1.313rem;
		line-height: 1.2;
	}

	.velora-bundle--store .velora-bundle__desc {
		display: none;
	}

	.velora-bundle--store .velora-bundle__price,
	.velora-bundle--store .velora-bundle__price .sale-price {
		gap: 2px 10px;
	}

	.velora-bundle--store .velora-bundle__price {
		margin-block-start: 12px;
	}

	.velora-bundle--store .velora-bundle__price del {
		font-size: 0.813rem;
	}

	.velora-bundle--store .velora-bundle__price ins {
		font-size: 1.5rem;
	}

	/* سطران لا سطرٌ مكسور: النقطة الفاصلة كانت تبدأ السطر الثاني وحدها */
	.velora-bundle--store .velora-bundle__perks {
		flex-direction: column;
		margin-block-start: 6px;
		font-size: 0.75rem;
	}

	.velora-bundle--store .velora-bundle__perks > span + span::before {
		content: none;
	}

	.velora-bundle--store .velora-bundle__cta {
		inline-size: 100%;
		min-block-size: 44px;
		margin-block-start: 14px;
		padding: 10px 12px;
		font-size: 0.813rem;
	}

	.velora-bundle--store .velora-bundle__photo {
		min-block-size: 0;
	}
}

/* ---------- 28.3 لوحة الاختيار (<dialog>) ---------- */

/*
 * ⚠️ لا display على المحدّد العاريّ: قاعدة المتصفّح `dialog:not([open]) { display:none }`
 * هي التي تخفي اللوحة المغلقة، وأيّ display هنا يغلبها فتظهر مغلقةً فوق الصفحة.
 *
 * الموبايل: لوحة تنزلق من أسفل الشاشة. من 690px: نافذة في الوسط.
 */
.velora-bundle-sheet {
	--sheet-pad: 20px;

	position: fixed;
	inset: auto 0 0;
	inline-size: 100%;
	max-inline-size: 100%;
	max-block-size: 92vh;
	max-block-size: 92dvh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px 6px 0 0;
	background: var(--velora-stone);
	color: var(--velora-ink);
	box-shadow: 0 -18px 48px -20px rgba(20, 14, 9, 0.5);
	overflow: hidden;
	font-family: var(--velora-sans);
}

.velora-bundle-sheet[open] {
	display: flex;
	flex-direction: column;
}

.velora-bundle-sheet::backdrop {
	background: rgba(20, 14, 9, 0.5);
}

/* الخلفيّة لا تتمرّر تحت اللوحة المفتوحة */
html:has(.velora-bundle-sheet[open]) {
	overflow: hidden;
}

.velora-bundle-sheet__panel {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-block-size: 0;
	max-block-size: inherit;
}

.velora-bundle-sheet__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex: none;
	padding: 18px var(--sheet-pad) 14px;
	border-block-end: 1px solid var(--velora-line);
}

.velora-bundle-sheet .velora-bundle-sheet__title {
	margin: 0;
	font-family: var(--velora-serif);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--velora-ink);
}

.velora-bundle-sheet__sub {
	margin: 4px 0 0;
	font-size: 0.813rem;
	line-height: 1.5;
	color: var(--velora-ink-soft);
}

/* زرّ الإغلاق 44px — مساحة لمس كاملة. المحدّد (0,2,0) يغلب شكل أزرار Blocksy. */
.velora-bundle-sheet .velora-bundle-sheet__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 44px;
	block-size: 44px;
	min-block-size: 0;
	margin-block: -10px 0;
	margin-inline-end: -12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--velora-ink);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.velora-bundle-sheet .velora-bundle-sheet__close:hover,
.velora-bundle-sheet .velora-bundle-sheet__close:focus-visible {
	background: var(--velora-stone-deep);
	color: var(--velora-ink);
}

.velora-bundle-sheet .velora-bundle-sheet__close:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

.velora-bundle-sheet__body {
	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* --- «مقاس واحد لكلّ القطع» --- */
.velora-bundle-sheet__same {
	padding: 14px var(--sheet-pad);
	border-block-end: 1px solid var(--velora-line);
	background: var(--velora-stone-deep);
}

.velora-bundle-sheet__same-label {
	margin: 0 0 8px;
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--velora-ink-soft);
}

.velora-bundle-sheet__same-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.velora-bundle-sheet .velora-bundle-sheet__size {
	min-inline-size: 52px;
	block-size: 40px;
	min-block-size: 0;
	margin: 0;
	padding: 0 12px;
	border: 1px solid rgba(42, 33, 25, 0.28);
	border-radius: 0;
	background: var(--velora-stone);
	box-shadow: none;
	color: var(--velora-ink);
	font-family: var(--velora-sans);
	font-size: 0.813rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.velora-bundle-sheet .velora-bundle-sheet__size:hover {
	border-color: var(--velora-ink);
	background: var(--velora-stone);
	color: var(--velora-ink);
}

.velora-bundle-sheet .velora-bundle-sheet__size[aria-pressed="true"] {
	border-color: var(--velora-ink);
	background: var(--velora-ink);
	color: var(--velora-stone);
}

.velora-bundle-sheet .velora-bundle-sheet__size:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

.velora-bundle-sheet__same-note {
	margin: 8px 0 0;
	font-size: 0.76rem;
	line-height: 1.45;
	color: var(--velora-bronze);
}

.velora-bundle-sheet__same-note:empty {
	display: none;
}

/* --- القطع --- */
.velora-bundle-sheet__pieces {
	display: grid;
	margin: 0;
	padding: 0 var(--sheet-pad);
	list-style: none;
}

.velora-bundle-piece {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	margin: 0;
	padding-block: 16px;
	border-block-end: 1px solid var(--velora-line);
}

.velora-bundle-piece:last-child {
	border-block-end: 0;
}

/* الصورة 3:4 مثل البطاقة — Blocksy يرسم الصندوق مربّعاً بـ ::before */
.velora-bundle-piece .velora-bundle-piece__thumb {
	display: block;
	overflow: hidden;
	border-radius: 2px;
	background: var(--velora-stone-deep);
}

.velora-bundle-piece .velora-bundle-piece__thumb::before {
	padding-block-end: 133.333%;
}

.velora-bundle-piece .velora-bundle-piece__thumb img {
	object-fit: cover;
}

/* نسخة الصورة القديمة تذوب فوق الجديدة عند اختيار لون (‏نفس 26.3، بمحدّد اللوحة) */
.velora-bundle-piece .ct-media-container img.velora-qa-ghost {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.velora-bundle-piece .ct-media-container img.velora-qa-ghost.is-leaving {
	opacity: 0;
}

.velora-bundle-piece .velora-bundle-piece__name {
	margin: 0 0 10px;
	font-family: var(--velora-serif);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--velora-ink);
}

.velora-bundle-piece__name a {
	color: inherit;
	text-decoration: none;
}

.velora-bundle-piece__name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.velora-bundle-piece .velora-qa {
	gap: 12px;
	margin: 0;
}

/* --- التذييل: السعر والزرّ --- */
.velora-bundle-sheet__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px 16px;
	flex: none;
	padding: 14px var(--sheet-pad) calc(14px + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid var(--velora-line);
	background: var(--velora-stone);
}

.velora-bundle-sheet__sum > p {
	margin: 0;
}

.velora-bundle-sheet__price,
.velora-bundle-sheet__price .sale-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 2px 10px;
	line-height: 1.15;
}

.velora-bundle-sheet__price del {
	font-size: 0.875rem;
	color: var(--velora-ink-soft);
	opacity: 0.75;
}

.velora-bundle-sheet__price ins {
	font-family: var(--velora-serif);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--velora-ink);
	text-decoration: none;
}

.velora-bundle-sheet__price .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

.velora-bundle-sheet__sum > .velora-bundle-sheet__save {
	display: flex;
	flex-wrap: wrap;
	margin-block-start: 3px;
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--velora-bronze);
}

.velora-bundle-sheet__save > span + span::before {
	content: "·";
	margin-inline: 0.45em;
}

/* الزرّ ممتلئ بالحبر: هو الفعل الوحيد في اللوحة */
.velora-bundle-sheet .velora-bundle-sheet__submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	margin: 0;
	padding: 0 26px;
	border: 1px solid var(--velora-ink);
	border-radius: 0;
	background: var(--velora-ink);
	box-shadow: none;
	color: var(--velora-stone);
	font-family: var(--velora-sans);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.velora-bundle-sheet .velora-bundle-sheet__submit:hover,
.velora-bundle-sheet .velora-bundle-sheet__submit:focus-visible {
	border-color: var(--velora-bronze);
	background: var(--velora-bronze);
	color: var(--velora-stone);
}

.velora-bundle-sheet .velora-bundle-sheet__submit:focus-visible {
	outline: 2px solid var(--velora-caramel);
	outline-offset: 2px;
}

/* أثناء الإرسال: نفس الخطّ الكراميليّ الجاري في زرّ البطاقة */
.velora-bundle-sheet.is-busy .velora-bundle-sheet__submit {
	cursor: progress;
}

.velora-bundle-sheet.is-busy .velora-bundle-sheet__submit::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background: linear-gradient(90deg, transparent, var(--velora-caramel), transparent) no-repeat;
	background-size: 50% 100%;
	animation: velora-qa-progress 1s ease-in-out infinite;
}

.velora-bundle-sheet__msg {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--velora-bronze);
}

.velora-bundle-sheet__msg:empty {
	display: none;
}

/* شاشة 375px: الزرّ بعرض اللوحة تحت السعر — أسهل لإبهامٍ واحد */
@media (max-width: 479.98px) {
	.velora-bundle-sheet__foot {
		grid-template-columns: minmax(0, 1fr);
	}

	.velora-bundle-sheet .velora-bundle-sheet__submit {
		inline-size: 100%;
	}
}

@media (min-width: 690px) {
	.velora-bundle-sheet {
		--sheet-pad: 28px;

		inset: 0;
		inline-size: min(760px, 100% - 48px);
		max-block-size: min(86vh, 860px);
		margin: auto;
		border-radius: 4px;
		box-shadow:
			0 2px 6px rgba(20, 14, 9, 0.12),
			0 32px 80px -24px rgba(20, 14, 9, 0.55);
	}

	.velora-bundle-sheet__head {
		padding-block: 24px 18px;
	}

	.velora-bundle-sheet .velora-bundle-sheet__title {
		font-size: 1.625rem;
	}

	.velora-bundle-piece {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 18px;
	}
}

/* عمودان من القطع على الشاشة الواسعة — الأربع في نظرةٍ واحدة */
@media (min-width: 900px) {
	.velora-bundle-sheet__pieces {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		padding-block: 6px;
	}

	.velora-bundle-piece,
	.velora-bundle-piece:last-child {
		border-block-end: 1px solid var(--velora-line);
	}

	.velora-bundle-piece:nth-last-child(-n + 2):nth-child(odd),
	.velora-bundle-piece:nth-last-child(-n + 2):nth-child(odd) ~ .velora-bundle-piece {
		border-block-end: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.velora-bundle-sheet[open] {
		animation: velora-sheet-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.velora-bundle-sheet[open]::backdrop {
		animation: velora-sheet-fade 0.25s ease;
	}
}

@keyframes velora-sheet-in {
	from {
		opacity: 0;
		transform: translateY(28px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes velora-sheet-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.velora-bundle .velora-bundle__cta,
	.velora-bundle-sheet .velora-bundle-sheet__size,
	.velora-bundle-sheet .velora-bundle-sheet__submit,
	.velora-bundle-piece .ct-media-container img.velora-qa-ghost {
		transition: none;
	}

	.velora-bundle-sheet.is-busy .velora-bundle-sheet__submit::after {
		animation: none;
	}
}

/* ---------- 28.5 سطر السلّة على الموبايل (‏كلّ الأسطر، لا الطقم وحده) ---------- */

/*
 * شبكة ووكومرس للسطر على الموبايل ثابتة: `80px 132px` ثمّ عمود المجموع بعرض محتواه.
 * حاوية السلّة عندنا 330px على شاشة 375، فكان عمود المجموع يخرج عنها ~20px لكلّ سعرٍ
 * من أربعة أرقام — وشارة «Save 240.00 EGP» (‏التي يضعها الطقم على كلّ سطر) تزيده 20px.
 * فعمود التفاصيل مرن، وعمود المجموع بأضيق عرضٍ ممكن (‏الشارة تنكسر سطرين).
 */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 80px minmax(0, 1fr) min-content;
	column-gap: 12px;
}

.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2 / 3;
}

.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 3 / 4;
}

.wc-block-cart.is-mobile .wc-block-cart-item__total .wc-block-components-sale-badge {
	white-space: normal;
	text-align: end;
}

/* ---------- 28.4 صفحة المعاينة (‏iframe لوحة التحكّم — للمدير وحده) ---------- */

.velora-bundle-preview {
	background: var(--velora-stone);
}

.velora-bundle-preview__main {
	padding-block-end: 40px;
}

.velora-bundle-preview__ribbon {
	margin: 0;
	padding: 12px 16px;
	background: #fcf0d8;
	border-block-end: 1px solid #e6c98d;
	color: #6b4a12;
	font-size: 0.813rem;
	line-height: 1.5;
}

.velora-bundle-preview__label {
	max-inline-size: var(--velora-max);
	margin: 0 auto;
	padding: 22px 16px 10px;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--velora-ink-soft);
}

.velora-bundle-preview__store {
	max-inline-size: 820px;
	margin-inline: auto;
	padding-inline: 16px;
}

.velora-bundle-preview .velora-bundle--store.velora-bundle--top {
	margin-block-end: 0;
}