/* ==========================================================================
   طبقة الوصل بين Elementor ونظام التصميم
   ==========================================================================
   qam.css مكتوبة لترميز البروتوتايب (.wrap · .hero-g · .sec-head)، وهي تخدم
   مخرجات الاختصارات كما هي لأنها تطبع ذلك الترميز حرفياً.

   لكن ويدجتات Elementor تطبع ترميزها الخاص، ولا تصلها تلك القواعد. وأهم فرق:
   الصنف الذي يُكتب في إعدادات الويدجت يهبط على **غلافه** لا على العنصر الداخلي،
   فـ .btn على غلاف بعرض كامل ينتج شريطاً ممتداً لا زراً.

   لذلك تستهدف كل قاعدة هنا العنصر الداخلي عبر الغلاف:
       .is-cta .elementor-button   لا   .is-cta
   ولا تُكتب قيمة لونية واحدة هنا — كلها من :root في qam.css.
   ========================================================================== */

/* ---------- الحاويات: عرض ومسافات البروتوتايب ----------
   Elementor له شكلان: `e-con-boxed` يلفّ أبناءه في `.e-con-inner`،
   و`e-con-full` بلا غلاف داخلي. نغطّي الاثنين وإلا ضربت القاعدة في الفراغ. */
/* في الحاوية المُعلَّبة الخلفية على الحاوية والمحتوى في الغلاف الداخلي،
   فحصر العرض هنا آمن ولا يقصّ الخلفية. */
.elementor-element.e-con-boxed > .e-con-inner {
	max-width: var(--w);
	margin-inline: auto;
	padding-inline: var(--gut);
	width: 100%;
}
.elementor-element.e-con-boxed { max-width: none; }
.elementor-element.e-con-full.sec:not(:has(> .e-con)) {
	max-width: none;
	padding-inline: max(var(--gut), calc((100% - var(--w)) / 2));
}

/* القسم = .sec في البروتوتايب: مسافة رأسية متجاوبة.
   الحشوة الرأسية على القسم نفسه، والأفقية على الغلاف أعلاه. */
.elementor-element.sec {
	padding-block: clamp(46px, 6vw, 80px);
}
.elementor-element.sec-cream { background: var(--qishta-2); }
.elementor-element.sec-honey {
	background: linear-gradient(170deg, #FEF0D8, #FBE2BB);
	border-block: 1px solid var(--saj);
}
.elementor-element.sec-dark { background: var(--hajar); color: var(--qishta); }
.elementor-element.sec-dark .elementor-heading-title { color: #fff; }
.elementor-element.sec-dark .elementor-widget-text-editor { color: var(--saj-d); }

/* الويدجتات لا تفصل بينها مسافة افتراضية — نتحكّم بها من القواعد أدناه */
.elementor-widget { margin-block-end: 0; }

/* ---------- العناوين ---------- */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--f-disp);
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}
.elementor-widget-heading { margin-block-end: 14px; }

/* المقاسات — تُستدعى بصنف على الغلاف */
.elementor-element.d1 .elementor-heading-title {
	font-size: clamp(2.3rem, 5.6vw, 4.1rem);
	line-height: 1.16;
	letter-spacing: -.01em;
}
.elementor-element.d2 .elementor-heading-title {
	font-size: clamp(1.85rem, 4vw, 2.9rem);
	line-height: 1.24;
}
.elementor-element.d3 .elementor-heading-title {
	font-size: clamp(1.45rem, 2.6vw, 1.95rem);
	line-height: 1.3;
}

/* الخط المتدرّج تحت العنوان — لغة البروتوتايب البصرية */
.elementor-element.d2 .elementor-heading-title,
.elementor-element.d3 .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 14px;
}
.elementor-element.d2 .elementor-heading-title::after,
.elementor-element.d3 .elementor-heading-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to left, transparent, var(--saj-d));
}
.elementor-element.sec-dark .elementor-heading-title::after {
	background: linear-gradient(to left, transparent, rgba(224, 207, 180, .32));
}

/* ---------- النصوص ---------- */
.elementor-widget-text-editor {
	color: var(--ink-2);
	line-height: 1.85;
	margin-block-end: 18px;
}
.elementor-widget-text-editor p { margin: 0 0 12px; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-element.lede .elementor-widget-container {
	font-size: clamp(1.02rem, 1.7vw, 1.2rem);
	max-width: 62ch;
}
.elementor-element.hero-p .elementor-widget-container {
	font-size: clamp(1.02rem, 1.7vw, 1.18rem);
	max-width: 54ch;
}
.elementor-widget-text-editor ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.elementor-widget-text-editor ul li {
	position: relative;
	padding-inline-start: 22px;
}
.elementor-widget-text-editor ul li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--jamr);
}

/* ---------- الأزرار ----------
   هنا كانت الغلطة: .btn على الغلاف تجعله شريطاً بعرض الصفحة.
   الغلاف يُترك سطرياً، والتنسيق يذهب إلى <a class="elementor-button">. */
.elementor-widget-button {
	display: inline-block;
	width: auto;
	margin: 4px 0 0;
	margin-inline-end: 10px;
}
.elementor-widget-button .elementor-widget-container,
.elementor-widget-button .elementor-button-wrapper { display: inline-block; }

.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--f-ui);
	font-size: .96rem;
	font-weight: 600;
	line-height: 1;
	padding: 14px 26px;
	border-radius: 6px;
	border: 1px solid transparent;
	background: var(--jamr);
	color: #fff;
	text-decoration: none;
	transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.elementor-button:hover,
.elementor-button:focus-visible {
	background: var(--jamr-d);
	color: #fff;
	transform: translateY(-1px);
}
.elementor-button .elementor-button-content-wrapper { gap: 9px; }

/* الزر الثانوي */
.elementor-element.btn-g .elementor-button {
	background: transparent;
	color: var(--ink);
	border-color: var(--saj-d);
}
.elementor-element.btn-g .elementor-button:hover {
	background: var(--qishta);
	border-color: var(--ink-3);
	color: var(--ink);
}
/* الزر على خلفية داكنة */
.elementor-element.sec-dark .elementor-element.btn-g .elementor-button,
.elementor-element.btn-on-dark .elementor-button {
	background: transparent;
	color: var(--qishta);
	border-color: rgba(224, 207, 180, .42);
}
.elementor-element.btn-on-dark .elementor-button:hover {
	background: rgba(224, 207, 180, .12);
	color: var(--qishta);
}

/* ---------- الهيدر والفوتر: الاختصارات تطبع ترميز البروتوتايب ----------
   الحاوية هنا يجب ألا تفرض عرضاً، لأن .wrap داخل الاختصار يتولّى ذلك. */


.elementor-element#hdr,
.elementor-element#rail,
.elementor-element#ftr { display: block; }
.elementor-element#hdr .elementor-widget,
.elementor-element#rail .elementor-widget,
.elementor-element#ftr .elementor-widget { margin: 0; }

/* الهيدر صفٌّ واحد: الشعار · القائمة · الأزرار.
   تنبيه على البنية: الحاوية بعرض كامل (`e-con-full`) لا تُنشئ `.e-con-inner`
   — أبناؤها مباشرون. لذلك تستهدف القواعد الحاوية نفسها لا غلافاً داخلياً
   لا وجود له. وويدجت Elementor عنصر شبكة بعرض كامل افتراضاً، فينزل كلٌّ
   في سطر ما لم نضبط عرضه. */
/* الخلفية تمتد بعرض الشاشة والمحتوى وحده يتوسّط.
   وضع `max-width` على الحاوية نفسها يحصر خلفيتها معها فتظهر فجوات بيضاء
   على الطرفين — الحشوة المحسوبة تعطي التوسيط دون حصر الخلفية. */
#hdr.e-con,
#rail.e-con {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 20px;
	width: 100%;
	max-width: none;
	padding-block: 0;
	padding-inline: max(var(--gut), calc((100% - var(--w)) / 2));
}
#hdr.e-con { min-height: 78px; }
#rail.e-con { min-height: 48px; gap: 14px; flex-wrap: wrap; }
/* الحشوة العلوية من التصميم (`#ftr{padding-block:52px 0}`) — كانت `padding:0` هنا
   تمحوها، فيلتصق أوّل سطر في الفوتر بحافة الأسود. */
#ftr.e-con { display: block; max-width: none; padding: clamp(44px, 6vw, 60px) 0 0; }

#hdr.e-con > .elementor-widget,
#rail.e-con > .elementor-widget {
	width: auto;
	flex: 0 0 auto;
	margin: 0;
	align-self: center;
}
/* ويدجت القائمة يأخذ المساحة الوسطى، فتلتصق الأزرار بالطرف كما في التصميم */
#hdr.e-con > .elementor-widget:nth-child(2) {
	flex: 1 1 auto;
	min-width: 0;
}
#rail.e-con > .elementor-widget { flex: 1 1 auto; }
#hdr .elementor-widget-container,
#rail .elementor-widget-container { display: block; }

/* القائمة نفسها صفٌّ أيضاً، ومحاذاتها للطرف المقابل للشعار */
#hdr #nav {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 20px);
	justify-content: flex-end;
	flex-wrap: wrap;
}
#hdr .hdr-act { display: flex; align-items: center; gap: 10px; }

/* الشعار نسبته قريبة من المربّع (1692×1431)، فيُضبط بالارتفاع لا بالعرض
   وإلا طغى على الهيدر. قاعدة qam.css تفترض شعاراً عريضاً. */
.logo img {
	height: 58px;
	width: auto;
	max-width: none;
	object-fit: contain;
}
#ftr .logo img,
img.ftr-logo {
	height: 76px;
	width: auto;
	margin-block-end: 16px;
}
@media (max-width: 1080px) {
	.logo img { height: 46px; }
}
/* الشريط العلوي: صفّ واحد أيضاً */
.elementor-element#rail .wrap {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	min-height: 48px;
	padding-block: 7px;
}

/* ---------- أقسام العمودين: الهيرو · عن المطعم · كيف تطلب ----------
   الحاويات هنا `e-con-full` فلا `.e-con-inner` لها، والقواعد تستهدفها مباشرة.
   الشرط `:has(> .e-con + .e-con)` يقصر الشبكة على الأقسام التي فيها عمودان
   فعلاً، فلا تتأثر الأقسام ذات العمود الواحد. */
.elementor-element.sec:has(> .e-con + .e-con) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 52px);
	align-items: center;
	max-width: none;
	padding-inline: max(var(--gut), calc((100% - var(--w)) / 2));
}
.elementor-element.hero-sec:has(> .e-con + .e-con) {
	grid-template-columns: 1.06fr .94fr;
	gap: clamp(30px, 5vw, 64px);
}
.elementor-element.sec > .e-con { display: block; padding: 0; width: auto; }

@media (max-width: 900px) {
	.elementor-element.sec:has(> .e-con + .e-con) { grid-template-columns: 1fr; }
}

/* الفوتر: شبكة الأعمدة الأربعة — على الحاوية نفسها لأنها e-con-full */
#ftr-g.e-con {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 34px;
	max-width: none;
	padding-block: 54px 40px;
	padding-inline: max(var(--gut), calc((100% - var(--w)) / 2));
}
#ftr-g.e-con > .elementor-widget { margin: 0; width: auto; }
@media (max-width: 900px) {
	#ftr-g.e-con { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	#ftr-g.e-con { grid-template-columns: 1fr; }
}

/* ---------- الهيرو ---------- */
.elementor-element.hero-sec {
	background: var(--hajar);
	color: var(--qishta);
	padding-block: clamp(48px, 7vw, 86px) clamp(52px, 7vw, 92px);
	position: relative;
	overflow: hidden;
}
/* التدرّجان اللذان يعطيان الهيرو عمقه في التصميم: وهج أحمر من أعلى اليمين
   وآخر عسلي من أسفل اليسار. القاعدة الأصلية في qam.css على #hero، وهو معرّف
   لا وجود له في بنية Elementor. */
.elementor-element.hero-sec::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 88% at 78% -12%, rgba(225, 37, 43, .20), transparent 58%),
		radial-gradient(90% 70% at 20% 110%, rgba(249, 162, 43, .14), transparent 62%);
}
.elementor-element.hero-sec > * { position: relative; z-index: 1; }
.elementor-element.hero-sec .elementor-heading-title { color: #fff; }
.elementor-element.hero-sec .elementor-widget-text-editor { color: var(--ink-3); }
/* عنوان الهيرو بلا الخط المتدرّج — الخط للعناوين الفرعية لا للعنوان الرئيسي */
.elementor-element.hero-sec .elementor-heading-title::after { display: none; }
.elementor-element.hero-sec .d1 .elementor-heading-title { display: block; }

/* شارة «مأكولات شعبية ويمنية أصيلة — منذ 1987» */
.hero-since {
	display: inline-block;
	margin-block-end: 18px;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--asal);
	border: 1px solid rgba(249, 162, 43, .34);
	background: rgba(249, 162, 43, .1);
	border-radius: 99px;
	padding: 6px 16px;
}

/* أرقام الهيرو داخل القسم الداكن */
.hero-stats {
	display: flex;
	gap: clamp(16px, 3.2vw, 36px);
	flex-wrap: wrap;
	margin-block-start: 28px;
	padding-block-start: 26px;
	border-block-start: 1px solid rgba(234, 223, 201, .16);
}
.hero-stats div b {
	display: block;
	font-family: var(--f-disp);
	font-size: 2.05rem;
	font-weight: 700;
	color: #fff;
	line-height: 1;
}
.hero-stats div span {
	display: block;
	margin-block-start: 7px;
	font-size: .84rem;
	color: var(--ink-3);
}

/* إطار صورة الهيرو و«عن المطعم» — قوس التنور كما في التصميم */
.hero-frame {
	border-radius: var(--arch);
	overflow: hidden;
	border: 1px solid rgba(224, 207, 180, .2);
	position: relative;
	background: var(--hajar-2);
}
.hero-frame img { display: block; width: 100%; height: auto; }
.hero-tag {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	background: rgba(13, 13, 13, .86);
	color: #fff;
	padding: 12px 18px;
	border-start-end-radius: 12px;
}
.hero-tag b { display: block; font-family: var(--f-disp); font-size: 1.04rem; }
.hero-tag span { display: block; font-size: .78rem; color: var(--saj-d); margin-block-start: 3px; }
.sec-cream .hero-frame { border-color: var(--saj); background: var(--saj); }

/* خط خطوات الطلب */
.tline {
	list-style: none;
	margin: 0;
	padding-inline-start: 24px;
	border-inline-start: 2px solid var(--saj);
}
.tline li { position: relative; padding-block-end: 26px; }
.tline li:last-child { padding-block-end: 0; }
.tline li::before {
	content: '';
	position: absolute;
	inset-inline-start: -31px;
	top: 7px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--jamr);
	border: 3px solid var(--qishta-2);
}
.tline b {
	display: block;
	font-family: var(--f-disp);
	font-size: 1.28rem;
	color: var(--jamr-d);
	line-height: 1.3;
}
.tline p { margin: 5px 0 0; color: var(--ink-2); font-size: .94rem; line-height: 1.75; }

/* ---------- مخرجات الاختصارات داخل حاوية Elementor ----------
   الاختصار يطبع ترميز البروتوتايب، فلا نريد للحاوية أن تفرض flex عليه. */
.elementor-widget-shortcode > .elementor-widget-container { display: block; }
.elementor-widget-shortcode .cities,
.elementor-widget-shortcode .bgrid,
.elementor-widget-shortcode .cats,
.elementor-widget-shortcode .sigs,
.elementor-widget-shortcode .offs,
.elementor-widget-shortcode .bstats { width: 100%; }

/* ---------- الصفحات الداخلية: رأس الصفحة ---------- */
.elementor-element.phead {
	background: linear-gradient(180deg, #FFFBF2, var(--qishta));
	padding-block: clamp(38px, 5vw, 62px);
	border-block-end: 1px solid var(--saj);
}

/* ---------- تصحيحات RTL ---------- */
.elementor-widget-button:last-child { margin-inline-end: 0; }

/* ---------- بطاقات ووكومرس: تتبع لغة التصميم ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: #fff;
	border: 1px solid var(--saj);
	border-radius: var(--arch);
	overflow: hidden;
	padding: 0 0 18px;
	text-align: center;
	transition: border-color .18s, transform .2s var(--ease);
}
.woocommerce ul.products li.product:hover { border-color: var(--jamr); transform: translateY(-3px); }
.woocommerce ul.products li.product img { margin: 0 0 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--f-disp);
	font-size: 1.16rem;
	font-weight: 700;
	color: var(--ink);
	padding: 0 16px;
}
.woocommerce ul.products li.product .price {
	font-family: var(--f-disp);
	font-size: 1.32rem;
	font-weight: 700;
	color: var(--jamr-d);
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jamr);
	color: #fff;
	border-radius: 6px;
	padding: 10px 20px;
	font-family: var(--f-ui);
	font-size: .88rem;
	font-weight: 600;
	margin-top: 10px;
}
.woocommerce ul.products li.product .button:hover { background: var(--jamr-d); color: #fff; }

/* سطر بيانات الصنف: سعرات · تحضير · مسببات حساسية */
.qam-imeta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 6px 0 4px;
	font-size: .8rem;
	color: var(--ink-2);
}
.qam-imeta b { font-weight: 700; color: var(--ink); }
.qam-imeta .alg { display: inline-flex; gap: 4px; }
.qam-imeta .alg i {
	font-style: normal;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	font-size: .7rem;
	font-weight: 700;
	border-radius: 50%;
	background: var(--saj);
	color: var(--ink-2);
}
.woocommerce div.product .qam-imeta { justify-content: flex-start; margin-block: 10px 16px; }

/* عنوان الأرشيف ووصفه */
.woocommerce .woocommerce-products-header__title,
.elementor-widget-theme-archive-title .elementor-heading-title {
	font-family: var(--f-disp);
	color: var(--ink);
}
.woocommerce-result-count, .woocommerce-ordering { color: var(--ink-2); font-size: .9rem; }

/* ==========================================================================
   المتجر — ما لا يوجد في البروتوتايب لأنه لم يحتجه
   ========================================================================== */

/* روابط صفوف المنيو: البروتوتايب يفتح درجاً، ونحن نذهب لصفحة الصنف الحقيقية
   لأن الدايركشن (٤.٤) يريد صفحة مفهرسة لكل طبق. فالرابط يجب ألّا يبدو رابطاً. */
.mrow-b > a, .mrow-im { color: inherit; display: block; }
.mrow-b > a:hover b { color: var(--jamr-d); }

/* ترقيم الصفحات */
.qam-pager { margin-top: 26px; }
.qam-pager ul { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.qam-pager a, .qam-pager span {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--saj-d);
	border-radius: 6px;
	font-weight: 600;
	font-size: .9rem;
	color: var(--ink);
	transition: .16s;
}
.qam-pager a:hover { background: var(--jamr); border-color: var(--jamr); color: #fff; }
.qam-pager .current { background: var(--hajar); border-color: var(--hajar); color: var(--qishta); }

/* رسالة عابرة — نصّ البروتوتايب inline، وهنا صفٌّ واحد في ورقة الأنماط */
#qam-toast {
	position: fixed;
	bottom: 22px;
	inset-inline-end: 22px;
	z-index: 140;
	background: var(--hajar);
	color: var(--qishta);
	padding: 13px 20px;
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 600;
	box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5);
	opacity: 0;
	transform: translateY(8px);
	transition: .25s;
	pointer-events: none;
}
#qam-toast.on { opacity: 1; transform: none; }

/* الفرع المختار داخل المودال */
.bpick-city { margin-bottom: 14px; }

/* زر «أضف» المعطَّل حين لا يستقبل الفرع طلبات */
.add[disabled] { opacity: .45; cursor: not-allowed; }
.add[disabled]:hover { background: none; border-color: var(--saj-d); color: inherit; }

/* ووكومرس يطبع سعره في span.price، وهي في البروتوتايب فئة السعر الكبير.
   نحصر الشكل الكبير على صفحة الصنف ونترك بطاقات «أصناف قريبة» أصغر. */
.woocommerce ul.products li.product span.price { font-size: 1.15rem; }

/* ---------- النماذج ---------- */
/* البروتوتايب لا يملك رسائل نجاح ولا مصيدة، لأن نموذجه لا يرسل. */
.qam-form-panel { max-width: 560px; }
.qam-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qam-note {
	border-radius: 8px;
	padding: 12px 15px;
	font-size: .92rem;
	font-weight: 600;
	margin: 0 0 4px;
	border: 1px solid;
}
.qam-note-ok { background: rgba(44, 74, 56, .09); border-color: rgba(44, 74, 56, .3); color: var(--sahawiq); }
.qam-note-bad { background: rgba(178, 58, 40, .08); border-color: rgba(178, 58, 40, .3); color: #8f2c1f; }
.field label span[aria-hidden] { color: var(--jamr-d); }

/* ---------- المعرض: figure مخفيّة بالفلتر ---------- */
.gal figure[hidden] { display: none; }

/* ==========================================================================
   جسر كتل التصميم على ترميز Elementor
   ========================================================================== */

/* `.qam-rule` في البروتوتايب عنصر يلفّ العنوان، وElementor يلفّ العنوان بطبقة
   `.elementor-widget-container` — فالفئة تنزل على الغلاف الخارجي والخطّ يحتاج
   أن يكون شقيقاً للعنوان. ننقل السلوك إلى الطبقة الداخلية. */
.elementor-widget.qam-rule > .elementor-widget-container {
	display: flex;
	align-items: center;
	gap: 14px;
}
.elementor-widget.qam-rule > .elementor-widget-container::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to left, transparent, var(--saj-d));
}
.elementor-widget.qam-rule { margin-bottom: 26px; }
.elementor-widget.qam-rule .elementor-heading-title { flex: none; }

/* عمودان: حاوية Elementor بصفّ، وتنكسر إلى عمود على الجوال كما في `.split` */
.e-con.qam-split { align-items: flex-start; }
@media (max-width: 820px) {
	.e-con.qam-split { flex-direction: column !important; }
	.e-con.qam-split > .e-con { width: 100% !important; }
}

/* عمود جانبي أضيق من عمود المحتوى — نسبة `.split` هي 1fr 1fr، ولوحات الجانب
   لا تحتاج نصف الصفحة */
@media (min-width: 821px) {
	.e-con.qam-aside > .e-con:first-child { flex: 1 1 62%; }
	.e-con.qam-aside > .e-con:last-child { flex: 1 1 34%; }
}

/* قوائم اللوحات الجانبية */
.qam-plist { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.qam-plist a { display: flex; justify-content: space-between; font-size: .93rem; }
.qam-plist a:hover { color: var(--jamr-d); }

/* بطاقة فرع مخفاة بالتصفية */
[data-qam-bcard][hidden], .mrow[hidden], .msec[hidden] { display: none; }

/* ---------- الفوتر ---------- */
/* الشبكة نفسها تأتي من .ftr-g في qam.css — الاختصار يُخرجها بلا وسيط.
   ما يبقى هنا: إلغاء هوامش ويدجت Elementor الذي يحتويها. */
.e-con .elementor-widget-shortcode > .elementor-widget-container > .ftr-g { width: 100%; }

/* ---------- لوحة الأرقام في العمود الجانبي ---------- */
.qam-nums { display: grid; gap: 14px; margin-top: 14px; }
.qam-nums > div { display: flex; align-items: baseline; gap: 12px; }
.qam-nums b {
	font-family: var(--f-disp);
	font-size: 1.9rem;
	color: var(--jamr-d);
	line-height: 1;
}

/* ==========================================================================
   السلة والدفع والفاتورة
   --------------------------------------------------------------------------
   كُتب هذا القسم من الصفر بعد خمس جولات من التراكم، وكل قاعدة فيه مقيسة
   بتصوير الصفحة على ١٤٤٠ و٣٩٠ بكسل لا بقراءة الترميز.

   ثلاث قواعد عامّة له:
   - البطاقات `.panel` بزاوية `--r` (٨ بكسل) لا `--arch` (٢٠٠ بكسل — شكل القبّة
     في الهيرو). القبّة على بطاقة نموذجٍ ترسم قوساً غريباً أعلاها.
   - الجوال أولاً: أغلب الطلبات منه.
   - الخيارات كلّها (استلام، دفع) بشكل `.opt` من البروتوتايب: بطاقة بزرّ دائري
     مرسوم، والمدخل الحقيقي مخفيّ بصرياً لا عن قارئ الشاشة.
   ========================================================================== */

/* مدخل مخفيّ بصرياً يبقى قابلاً للتركيز وقارئ الشاشة */
.qam-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.opt:has(.qam-sr:focus-visible) { outline: 2px solid var(--jamr); outline-offset: 2px; }

/* ---------- الخيار المشترك ---------- */
.qam-opts { display: grid; gap: 10px; }
.qam-opts .opt { cursor: pointer; margin: 0; background: #fff; }
.opt-p { font-weight: 700; color: var(--jamr-d); white-space: nowrap; font-size: .95rem; }
.qam-wa-ico { width: 22px; height: 22px; fill: #25d366; flex: none; }

/* ---------- شريط الخطوات ---------- */
.qam-steps { list-style: none; padding: 0; margin: 0 0 24px; }
.qam-steps .step { list-style: none; }

/* ---------- الشبكة ---------- */
.qam-co { align-items: start; }
.qam-co-main { display: grid; gap: 18px; min-width: 0; }
.qam-co .panel h2 { margin: 0 0 14px; }
.qam-co .panel h2 .num { color: var(--jamr-d); }
.qam-co-sum { position: sticky; top: 130px; }
.qam-co-sum > h2 { margin: 0; }
.qam-co-from { margin: 4px 0 14px; }
.qam-order-sec .woocommerce-notices-wrapper:empty { display: none; }
.qam-order-sec .woocommerce-NoticeGroup { grid-column: 1 / -1; }

/* لوحة الفرع داخل الشبكة */
.qam-order-branch .opt { cursor: default; }
.qam-order-branch .opt .btn { flex: none; }

/* ---------- الحقول ---------- */
.qam-co-details .woocommerce-billing-fields > h3,
.qam-co-details .woocommerce-additional-fields > h3 { display: none; }
.qam-co-details .woocommerce-billing-fields__field-wrapper,
.qam-co-details .woocommerce-additional-fields__field-wrapper { display: grid; gap: 14px; }
.qam-co-details .form-row { width: 100%; float: none; padding: 0; margin: 0; }
.qam-co-details .woocommerce-additional-fields { margin-top: 14px; }
.qam-co-details label {
	display: block;
	font-size: .88rem;
	font-weight: 600;
	margin-bottom: 7px;
	color: var(--ink);
}
.qam-co-details .required { color: var(--jamr-d); text-decoration: none; border: 0; }
.qam-co-details .optional { color: var(--ink-3); font-weight: 500; }
.qam-co-details input[type="text"],
.qam-co-details input[type="tel"],
.qam-co-details input[type="email"],
.qam-co-details textarea {
	width: 100%;
	border: 1.5px solid var(--saj);
	border-radius: 8px;
	padding: 13px 14px;
	font-family: var(--f-ui);
	font-size: 1rem;              /* أقلّ من ١٦ بكسل يجعل iOS يكبّر الصفحة عند التركيز */
	line-height: 1.5;
	background: #fff;
	color: var(--ink);
	transition: border-color .16s, box-shadow .16s;
}
.qam-co-details textarea { min-height: 84px; resize: vertical; }
.qam-co-details input:focus,
.qam-co-details textarea:focus {
	outline: none;
	border-color: var(--jamr);
	box-shadow: 0 0 0 3px rgba(192, 118, 26, .14);
}
.qam-co-details .woocommerce-invalid input { border-color: #b23a28; }
.qam-co-details input[type="tel"] { direction: ltr; text-align: right; }

/* ---------- مراجعة الطلب ---------- */
.qam-review { border: 0; margin: 0; }
.qam-review-items { margin-bottom: 6px; }
.qam-rv-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--saj);
}
.qam-rv-im { width: 50px; height: 50px; border-radius: 6px; overflow: hidden; background: var(--saj); flex: none; }
.qam-rv-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qam-rv-b { flex: 1; min-width: 0; line-height: 1.45; }
.qam-rv-b b { display: block; font-size: .93rem; font-weight: 600; }
.qam-rv-b .num { font-size: .8rem; color: var(--ink-3); }
.qam-rv-p { white-space: nowrap; font-weight: 700; font-size: .93rem; }
.qam-review .sumline.tot .qam-total { color: var(--jamr-d); }
.qam-vat { margin: 6px 0 0; }

/* ---------- الدفع والتأكيد ---------- */
.qam-pay { margin-top: 18px; background: none; border-radius: 0; }
.qam-pay .payment_box { display: none; }
.qam-place { margin: 16px 0 0; padding: 0; }
.qam-place .woocommerce-privacy-policy-text { font-size: .8rem; color: var(--ink-3); margin: 0 0 12px; line-height: 1.6; }
.qam-place .woocommerce-privacy-policy-text p { margin: 0; }
.qam-place .woocommerce-privacy-policy-text a { color: var(--ink-2); text-decoration: underline; }
.qam-place-bar { display: flex; align-items: center; gap: 14px; }
.qam-place-total { display: grid; line-height: 1.2; flex: none; }
.qam-place-total small { font-size: .78rem; color: var(--ink-3); }
/* خطّ الواجهة لا الزخرفي: «ر.س» بالخطّ الزخرفي تتشابك حروفها فتُقرأ رسماً */
.qam-place-total b { font-family: var(--f-ui); font-weight: 800; font-size: 1.2rem; color: var(--jamr-d); white-space: nowrap; }
.qam-place-btn { flex: 1; padding: 15px 20px; font-size: 1.02rem; font-weight: 700; }
.qam-place-btn.processing, .qam-place-btn:disabled { opacity: .55; cursor: not-allowed; }
.qam-closed-note { margin: 0 0 12px; font-size: .88rem; }
.qam-prep-note { margin: 12px 0 0; text-align: center; }

/* ووكومرس يغطّي النموذج بطبقة تحميل بيضاء أثناء التحديث */
.qam-co .blockUI.blockOverlay { border-radius: var(--r); }

/* ---------- الجوال ---------- */
@media (max-width: 900px) {
	.qam-steps .step { padding: 10px 6px; font-size: .8rem; }
	.qam-steps .step b { font-size: .68rem; }
	.qam-co { grid-template-columns: 1fr; gap: 18px; }
	.qam-co .panel { padding: 18px; }
	.qam-co-sum { position: static; }

	/* شريط التأكيد ثابتٌ أسفل الشاشة بالإجمالي والزرّ معاً */
	.qam-place-bar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 95;
		background: #fff;
		border-top: 1px solid var(--saj);
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		box-shadow: 0 -10px 26px -14px rgba(30, 20, 16, .4);
	}
	.qam-order-sec { padding-bottom: 96px !important; }
	.qam-order-branch .opt { flex-wrap: wrap; }
	/* «تغيير» تحت العنوان لا بجانبه: بجانبه يعصر العنوان في ثلاثة أسطر ضيّقة */
	.qam-order-branch .opt-b { flex-basis: calc(100% - 32px); }
	.qam-order-branch .opt .btn { margin-inline-start: 32px; }
}

/* ---------- الشاشة الكبيرة ---------- */
@media (min-width: 901px) {
	.qam-co { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; }
}

/* ==========================================================================
   صفحة السلة
   ========================================================================== */

.qam-cart-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.qam-cart-items { min-width: 0; }
.qam-cart-page .mbr { margin-bottom: 18px; }
.qam-crows { background: #fff; border: 1px solid var(--saj); border-radius: var(--r); padding: 4px 20px; }
.qam-cart-page .citem { align-items: center; padding: 16px 0; border-bottom: 1px solid var(--saj); }
.qam-cart-page .citem:last-child { border-bottom: 0; }
.qam-cart-page .citem-im { width: 76px; height: 76px; }
.qam-cart-page .citem b a { color: var(--ink); }
.qam-cart-page .citem b a:hover { color: var(--jamr-d); }
.qam-cart-sum { position: sticky; top: 130px; }
.qam-cart-sum h2 { margin: 0 0 6px; }

/* أزرار الكمية: أكبر للّمس — ٢٦ بكسل في البروتوتايب أصغر من إصبع */
.qty { border: 1.5px solid var(--saj-d); border-radius: 8px; padding: 2px; gap: 2px; background: #fff; }
.qty button {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ink);
	background: none;
	border: 0;
	padding: 0;
}
.qty button:hover { background: var(--saj); color: var(--ink); }
.qty span { min-width: 28px; font-size: .95rem; }

@media (max-width: 900px) {
	.qam-cart-page { grid-template-columns: 1fr; gap: 18px; }
	.qam-cart-sum { position: static; }
	.qam-crows { padding: 2px 14px; }
	.qam-cart-page .citem-im { width: 64px; height: 64px; }
}

/* ==========================================================================
   الفاتورة
   ========================================================================== */

.qam-invoice { width: 100%; }
.qam-inv-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--saj);
	border-radius: var(--r);
	padding: 22px 24px;
	margin-bottom: 18px;
}
.qam-inv-head .d2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.qam-inv-ok {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(44, 74, 56, .1);
	color: var(--sahawiq);
	border-radius: 99px;
	padding: 5px 14px;
	font-size: .85rem;
	font-weight: 700;
}
.qam-inv-ok::before { content: '✓'; }
.qam-inv-prep {
	text-align: center;
	background: var(--qishta-2);
	border: 1px solid var(--saj);
	border-radius: var(--r);
	padding: 12px 18px;
	min-width: 120px;
}
.qam-inv-prep b { display: block; font-family: var(--f-disp); font-size: 2rem; color: var(--jamr-d); line-height: 1; }
.qam-inv-prep span { font-size: .8rem; color: var(--ink-2); }
.qam-inv-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.qam-inv-grid .panel h3 { margin: 0 0 4px; }
.qam-inv-grid .sumline span:last-child { text-align: end; }

/* لوحة واتساب: الإجراء الأهمّ بعد الطلب، بلون واتساب لا بلون الموقع */
.qam-wa-panel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	background: #f0faf3;
	border: 1.5px solid #9ed9b2;
	border-radius: var(--r);
	padding: 20px 22px;
	margin: 0 0 18px;
}
.qam-wa-ic {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #1fa855;
	color: #fff;
}
.qam-wa-txt h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; }
.qam-wa-txt p { margin: 4px 0 0 !important; font-size: .95rem; line-height: 1.6; }
.qam-wa-panel .btn {
	margin: 0 !important;
	background: #1fa855;
	border-color: #1fa855;
	color: #fff;
	white-space: nowrap;
	padding: 15px 28px;
	font-size: 1rem;
	font-weight: 700;
}
.qam-wa-panel .btn:hover { background: #168a44; border-color: #168a44; }

@media (max-width: 760px) {
	.qam-inv-head { padding: 18px; }
	.qam-inv-grid { grid-template-columns: 1fr; }
	.qam-wa-panel { grid-template-columns: auto minmax(0, 1fr); padding: 18px; gap: 12px 14px; }
	.qam-wa-ic { width: 44px; height: 44px; }
	.qam-wa-panel .btn { grid-column: 1 / -1; width: 100%; text-align: center; }
}

/* ---------- إشعارات ووكومرس على لغة التصميم ---------- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	list-style: none;
	border-radius: 8px;
	padding: 13px 16px;
	font-size: .92rem;
	font-weight: 600;
	border: 1px solid;
	margin: 0 0 16px;
}
.woocommerce-message { background: rgba(44, 74, 56, .08); border-color: rgba(44, 74, 56, .3); color: var(--sahawiq); }
.woocommerce-error { background: rgba(178, 58, 40, .07); border-color: rgba(178, 58, 40, .3); color: #8f2c1f; }
.woocommerce-info { background: var(--qishta-2); border-color: var(--saj-d); color: var(--ink-2); }
.woocommerce-error li { margin: 0; }

/* ---------- تفوّق مقصود على أنماط ووكومرس ----------
   قِيست بالأنماط المحسوبة في المتصفّح لا بقراءة الملفات:

   ووكومرس                                         تخصيصه   ما فرضه
   .woocommerce form .form-row                     ٠،٢،١    هامش ٦ + حشوة ٣ على كل حقل
   .woocommerce form .form-row input.input-text    ٠،٣،٢    حشوة ٨ بكسل بدل ١٣
   .woocommerce-checkout #payment                  ١،١،٠    خلفية بنفسجية rgba(129,110,153,.14)

   فقواعدنا تبدأ بالمعرّف (#customer_details · #payment) لتتفوّق بوضوح لا
   بـ!important متناثرة. */

#customer_details .form-row { margin: 0; padding: 0; }
#customer_details label { line-height: 1.45; margin-bottom: 7px; }
#customer_details .woocommerce-input-wrapper { display: block; }
#customer_details input.input-text,
#customer_details textarea.input-text {
	padding: 13px 14px;
	height: auto;
	border: 1.5px solid var(--saj);
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.5;
	background: #fff;
	box-shadow: none;
}
#customer_details input.input-text:focus,
#customer_details textarea.input-text:focus {
	border-color: var(--jamr);
	box-shadow: 0 0 0 3px rgba(192, 118, 26, .14);
	outline: none;
}

#payment.qam-pay { background: none; border-radius: 0; padding: 0; }
/* div في المحدِّد: قاعدة ووكومرس #payment div.form-row (١،٢،١) تفوق بدونه. */
#payment.qam-pay div.place-order { padding: 0; margin: 16px 0 0; background: none; }
#payment.qam-pay .wc_payment_methods { border: 0; padding: 0; margin: 0; }

/* شريط الخطوات: البروتوتايب فيه قاعدتان لـ.steps — قائمة «كيف تطلب» بعدّاد
   دائري، وشريط صفحة الطلب. ترميزنا قائمة فيرث العدّاد؛ يُلغى هنا. */
.qam-steps li::before { content: none; display: none; }
.qam-steps li { padding-inline-start: 0; counter-increment: none; }
.qam-steps { display: flex; }

/* ==========================================================================
   الأزرار: لون التصميم لا لون Elementor
   --------------------------------------------------------------------------
   Elementor يكتب في CSS كل صفحة قاعدةً افتراضية لويدجت الزرّ:
   `.elementor-widget-button .elementor-button{background-color:var(--e-global-color-accent)}`
   بتخصيص (0,2,0) يغلب `.elementor-button` (0,1,0) هنا — فخرجت أزرار الموقع
   كلّها برتقالية (لون Accent في الطقم #F9A22B)، والتصميم يجعل الزرّ الأساسي
   `btn-p` أحمر. `body` يرفع التخصيص فوقها، وتبقى `.btn-g` و`.btn-on-dark`
   (0,3,0) فوق هذه.
   ========================================================================== */
body .elementor-widget-button .elementor-button { background: var(--jamr); color: #fff; }
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus-visible { background: var(--jamr-d); color: #fff; }

/* ==========================================================================
   الهيدر الفاتح
   --------------------------------------------------------------------------
   طلب العميل: الهيدر أبيض لا أسود. الشريط العلوي (الفرع وحالته) بلون القشطة
   ليبقى طبقةً مستقلّة فوق الأبيض، والقائمة والقائمة المنسدلة ولوحة الجوال
   كلّها فاتحة. البرتقالي `--asal` لا يصلح للرابط النشط على الأبيض (تباين ٢:١)
   فصار الأحمر الداكن.
   ========================================================================== */
#rail { background: var(--qishta); color: var(--ink-2); border-bottom: 1px solid var(--saj); }
#rail .rail-name { color: var(--ink); }
#rail .rail-sep { background: var(--saj-d); }
#rail .rail-mode { color: var(--ink-2); }
#rail .rail-btn { border-color: var(--saj-d); color: var(--ink); }
#rail .rail-btn:hover { background: #fff; border-color: var(--ink-3); }

#hdr {
	background: #fff;
	color: var(--ink);
	border-bottom: 1px solid var(--saj);
	box-shadow: 0 10px 28px -22px rgba(28, 26, 24, .5);
}
#hdr .nav-i > a,
#hdr .nav-i > button { color: var(--ink); }
#hdr .nav-i > a:hover,
#hdr .nav-i > button:hover { background: var(--qishta); }
#hdr .nav-i.on > a,
#hdr .nav-i.on > button { color: var(--jamr-d); }
#hdr .drop {
	background: #fff;
	border-color: var(--saj);
	box-shadow: 0 22px 44px -20px rgba(28, 26, 24, .32);
}
#hdr .drop a { color: var(--ink-2); }
#hdr .drop a:hover { background: var(--qishta); color: var(--jamr-d); }
#hdr .lang { border-color: var(--saj-d); color: var(--ink-2); }
#hdr .lang:hover { background: var(--qishta); color: var(--ink); }
#hdr .burger { border-color: var(--saj-d); }
#hdr .burger span,
#hdr .burger span::before,
#hdr .burger span::after { background: var(--ink); }

/* لوحة القائمة على الجوال.
   قاعدة `#hdr #nav` أعلاه (صفّ سطح المكتب: justify-content:flex-end) تغلب
   تخطيط اللوحة في qam.css لأن تخصيصها أعلى — فكانت الروابط في وسط اللوحة
   بعرض نصّها ومدفوعةً إلى أسفلها. وزرّ الإغلاق كان تحت الشريط العلوي: اللوحة
   داخل الهيدر (z 55) والشريط فوقه (z 60)، فيرتفع الهيدر حين تُفتح. */
@media (max-width: 1080px) {
	#hdr #nav {
		background: #fff;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 0;
	}
	#hdr .nav-i > a,
	#hdr .nav-i > button {
		width: 100%;
		justify-content: space-between;
		border-bottom-color: var(--saj);
	}
	#hdr .drop { background: transparent; box-shadow: none; }
	#hdr .nav-close { color: var(--ink); }
	#hdr:has(#nav.open) { z-index: 90; }
}

/* ==========================================================================
   هيرو الفيديو
   --------------------------------------------------------------------------
   بعرض الشاشة، والنص فوق الفيديو بظلٍّ داكن من جهته (اليمين) ومن الأسفل حيث
   شريط الأسماء. الغلاف `background_video_fallback` خلفيةٌ للقسم نفسه، فيظهر
   حتى يبدأ الفيديو، ومكانه إن تعذّر أو أُوقف.
   ========================================================================== */
.elementor-element.qam-hero-v {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(560px, calc(100svh - 126px), 860px);
	padding: 0;
	background-color: var(--hajar);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}
.qam-hero-v > .elementor-background-video-container {
	z-index: 0;
	pointer-events: none;
	transition: opacity .8s var(--ease);
}
/* تكبيرٌ يسير يُخرج من الإطار عنوان يوتيوب وشعاره عند الأطراف.
   والإزاحة تبقى: Elementor يوسّط الإطار بـ`translate(-50%,-50%)` من منتصفه،
   و`scale` وحدها تمحوها فينزل الفيديو إلى ربع الشاشة السفلي فوق الغلاف. */
.qam-hero-v > .elementor-background-video-container iframe { transform: translate(-50%, -50%) scale(1.18); }
/* موقوف: تختفي الطبقة فيظهر الغلاف ساكناً — لا شاشة يوتيوب «متوقّف» */
.qam-hero-v.is-paused > .elementor-background-video-container,
.qam-hero-v.is-veiled > .elementor-background-video-container { opacity: 0; }

.elementor-element.qam-hero-v::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(270deg, rgba(13, 13, 13, .88) 0%, rgba(13, 13, 13, .66) 36%, rgba(13, 13, 13, .2) 70%, rgba(13, 13, 13, .06) 100%),
		linear-gradient(0deg, rgba(13, 13, 13, .8) 0%, transparent 36%),
		radial-gradient(60% 80% at 95% 0%, rgba(225, 37, 43, .24), transparent 62%);
}

.qam-hero-v > .qam-hero-in {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	max-width: none;
	padding-inline: max(var(--gut), calc((100% - var(--w)) / 2));
	padding-block: clamp(56px, 9vh, 110px) clamp(118px, 15vh, 160px);
}
.qam-hero-in > .elementor-widget { max-width: 660px; margin: 0; }

.qam-hero-v .hero-since {
	margin-block-end: 22px;
	color: var(--asal);
	background: rgba(13, 13, 13, .38);
	border-color: rgba(249, 162, 43, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.qam-hero-v .hero-t .elementor-heading-title {
	display: block;
	color: #fff;
	font-size: clamp(2.7rem, 6vw, 5.1rem);
	line-height: 1.14;
	text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
}
.qam-hero-v .hero-t .elementor-heading-title::after { display: none; }
.qam-hero-v .hero-t em { font-style: normal; color: var(--asal); }
.qam-hero-v .hero-p { margin-block-start: 18px !important; }
.qam-hero-v .hero-p p {
	margin: 0;
	max-width: 540px;
	color: rgba(255, 255, 255, .86);
	font-size: clamp(1rem, 1.25vw, 1.14rem);
	line-height: 1.85;
}
.qam-hero-v .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; }
.qam-hero-v .hero-cta .btn { padding: 15px 28px; font-size: 1rem; }
.qam-hero-v .hero-cta .btn-on-dark {
	color: #fff;
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.qam-hero-v .hero-cta .btn-on-dark:hover { background: rgba(255, 255, 255, .18); }

/* شريط الأسماء وزرّ الإيقاف — ملتصق بأسفل الهيرو */
.qam-hero-v > .elementor-widget-shortcode {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
}
.qam-reel {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 12px;
	padding-inline: max(var(--gut), calc((100% - var(--w)) / 2));
	border-top: 1px solid rgba(234, 223, 201, .18);
	background: rgba(13, 13, 13, .45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.qam-reel-band {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* حشوةٌ لا `gap`: الفجوة بين النسختين تجعل نصف الشريط أطول من نسخة بنصف
   فجوة فيقفز عند الالتفاف. والاتجاه نحو اليمين كشريط الأخبار العربي. */
.qam-reel-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: qam-reel 40s linear infinite;
}
.qam-reel-track span,
.qam-reel-track i { padding-inline: 13px; white-space: nowrap; }
.qam-reel-track span { font-family: var(--f-disp); font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.35; color: var(--qishta); }
.qam-reel-track i { font-style: normal; font-size: .85rem; color: var(--asal); }
.qam-hero-v.is-paused .qam-reel-track { animation-play-state: paused; }
@keyframes qam-reel { to { transform: translateX(50%); } }

.qam-reel-pause {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(234, 223, 201, .45);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	transition: background .18s var(--ease);
}
.qam-reel-pause:hover { background: rgba(255, 255, 255, .18); }
.qam-reel-pause svg { width: 17px; height: 17px; fill: currentColor; }
.qam-reel-pause .i-play,
.qam-hero-v.is-paused .qam-reel-pause .i-pause { display: none; }
.qam-hero-v.is-paused .qam-reel-pause .i-play { display: block; }

/* حركة مخفَّضة: لا فيديو أصلاً، والغلاف وحده */
@media (prefers-reduced-motion: reduce) {
	.qam-hero-v > .elementor-background-video-container,
	.qam-reel-pause { display: none; }
}

/* الجوال: النص أسفل الشاشة فوق ظلٍّ صاعد — والفيديو يملأ ما فوقه */
@media (max-width: 767px) {
	.elementor-element.qam-hero-v {
		justify-content: flex-end;
		min-height: clamp(540px, calc(100svh - 118px), 760px);
	}
	.elementor-element.qam-hero-v::before {
		background:
			linear-gradient(0deg, rgba(13, 13, 13, .94) 0%, rgba(13, 13, 13, .76) 42%, rgba(13, 13, 13, .28) 74%, rgba(13, 13, 13, .12) 100%),
			radial-gradient(80% 50% at 100% 0%, rgba(225, 37, 43, .2), transparent 62%);
	}
	.qam-hero-v > .qam-hero-in { padding-block: 48px 92px; }
	.qam-hero-v .hero-since { font-size: .78rem; padding: 5px 12px; margin-block-end: 16px; }
	.qam-hero-v .hero-t .elementor-heading-title { font-size: clamp(2.3rem, 10.5vw, 3.1rem); }
	.qam-hero-v .hero-cta { gap: 10px; margin-block-start: 24px; }
	.qam-hero-v .hero-cta .btn { flex: 1 1 100%; padding: 15px 18px; }
	.qam-reel { gap: 10px; padding-block: 9px; }
	.qam-reel-pause { width: 38px; height: 38px; }
}

/* ==========================================================================
   قصة حافلة — النص والصورة
   --------------------------------------------------------------------------
   القسم حاوية boxed: عموداه داخل `.e-con-inner`، فالشبكة هنا على الغلاف
   الداخلي — قاعدة `.sec:has(> .e-con + .e-con)` لا تصل إليهما.
   ========================================================================== */
.elementor-element.qam-story > .e-con-inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(36px, 6vw, 92px);
	align-items: center;
}
.qam-story > .e-con-inner > .e-con { display: block; width: auto; max-width: none; padding: 0; }
.qam-story .qam-rule .elementor-heading-title { flex: 0 1 auto; }
/* العمود كتلةٌ لا flex، فلا فجوة Elementor بين الويدجتات — المسافات صريحة */
.qam-story-txt .elementor-widget-heading { margin-block-end: 22px; }
.qam-story-txt .elementor-widget-text-editor p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.95; margin: 0; }
.qam-story-txt .elementor-widget-text-editor + .elementor-widget-text-editor { margin-block-start: 14px; }

.qam-points {
	list-style: none;
	margin: 26px 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.qam-points li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 14px;
	background: #fff;
	border: 1px solid var(--saj);
	border-radius: var(--r);
}
.qam-points-ic {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(225, 37, 43, .08);
	color: var(--jamr);
}
.qam-points-ic svg { width: 20px; height: 20px; fill: currentColor; }
.qam-points b { font-size: .93rem; font-weight: 600; line-height: 1.5; color: var(--ink); }

/* الصورة: قوس التنّور بنسبة ثابتة — لا فراغ بيج تحت صورة مربّعة — وقوسٌ
   ثانٍ بخطٍّ رفيع مُزاح خلفها، والختم على الطرف المواجه للنص */
.qam-story-fig { position: relative; max-width: 470px; margin-inline: auto; }
.qam-story-fig::before {
	content: '';
	position: absolute;
	inset-block: 20px -20px;
	inset-inline: 20px -20px;
	border: 1.5px solid var(--saj-d);
	border-radius: var(--arch);
}
.qam-story-fig .hero-frame {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 5;
	border: 0;
	background: var(--saj);
	box-shadow: 0 34px 60px -34px rgba(28, 26, 24, .5);
}
.qam-story-fig .hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.qam-seal {
	position: absolute;
	z-index: 2;
	inset-inline-start: -30px;
	bottom: 52px;
	display: grid;
	place-content: center;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: var(--jamr);
	color: #fff;
	text-align: center;
	line-height: 1.1;
	box-shadow: 0 18px 34px -16px rgba(184, 26, 32, .7);
}
.qam-seal::after {
	content: '';
	position: absolute;
	inset: 7px;
	border: 1px dashed rgba(255, 255, 255, .55);
	border-radius: 50%;
}
.qam-seal small { font-size: .8rem; opacity: .9; }
.qam-seal b { font-family: var(--f-disp); font-size: 2.1rem; font-weight: 700; }

@media (max-width: 900px) {
	.elementor-element.qam-story > .e-con-inner { grid-template-columns: 1fr; gap: 48px; }
	.qam-story-fig { max-width: 330px; }
	.qam-seal { width: 96px; height: 96px; inset-inline-start: -14px; bottom: 36px; }
	.qam-seal b { font-size: 1.7rem; }
}
@media (max-width: 560px) {
	.qam-points { grid-template-columns: 1fr; gap: 8px; margin: 22px 0 24px; }
	.qam-points li { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
	.qam-points-ic { width: 36px; height: 36px; }
}

/* ==========================================================================
   رأس القسم (العنوان ووصفه)
   --------------------------------------------------------------------------
   `.sec-head` في التصميم صفٌّ: [العنوان والوصف] … [زرّ]، وqam.css يضع له
   `align-items:flex-end` ليحاذي الزرّ أسفل العنوان. وحاوية Elementor عمودٌ،
   فصار flex-end المحورَ الأفقي — وفي RTL هو اليسار: العنوان والوصف في الطرف
   المقابل. `stretch` يعيدهما إلى البداية، ويترك خطّ `.qam-rule` يمتدّ بعد العنوان.
   ========================================================================== */
.elementor-element.sec-head.e-con { align-items: stretch; }

/* ==========================================================================
   الهيدر الثابت
   --------------------------------------------------------------------------
   كان الشريط العلوي `sticky` داخل غلاف هيدر Elementor، واللاصق لا يتجاوز
   حاويته: فينزلق فوق الشعار والقائمة والسلة في أوّل ٧٨ بكسل من التمرير، ثم
   يختفي الاثنان — وعلى الجوال يفقد الزبون زرّ السلة وهو يتصفّح ١٢١ صنفاً.
   الغلاف كلّه لاصق الآن بإزاحة سالبة بقدر الشريط العلوي (يقيسه qam.js):
   يمرّ الشريط ويبقى الهيدر.
   ========================================================================== */
.elementor-location-header {
	position: sticky;
	top: calc(var(--qam-admin, 0px) - var(--qam-rail-h, 49px));
	z-index: 60;
}
#rail { position: relative; top: auto; }
html { scroll-padding-top: calc(var(--qam-hdr-h, 78px) + 16px); }
@media (max-width: 1080px) {
	#hdr.e-con { min-height: 66px; }
}

/* ==========================================================================
   شريط السلة السفلي — الجوال
   ========================================================================== */
.qam-cartbar { display: none; }
@media (max-width: 900px) {
	.qam-cartbar:not([hidden]) {
		position: fixed;
		inset-inline: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom));
		z-index: 90;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 13px 16px;
		border-radius: 14px;
		background: var(--jamr);
		color: #fff;
		font-family: var(--f-ui);
		font-size: 1rem;
		font-weight: 700;
		text-align: start;
		box-shadow: 0 16px 32px -14px rgba(184, 26, 32, .65);
	}
	.qam-cartbar .cart-n { min-width: 28px; height: 28px; font-size: .9rem; }
	.qcb-t { flex: 1; }
	.qcb-p { font-size: 1.02rem; white-space: nowrap; }
	.qam-cartbar.bump { animation: qam-bump .45s var(--ease); }
	/* مكان للشريط تحت آخر الفوتر */
	body.qam-has-cartbar #ftr { padding-bottom: 84px; }
}
@keyframes qam-bump {
	35% { transform: scale(1.035); }
}

/* ==========================================================================
   درج الصنف: هيكل التحميل
   ========================================================================== */
.dish-bd.is-loading .sk-line {
	display: block;
	height: 13px;
	margin: 12px 0;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--saj) 0%, #f5eddf 50%, var(--saj) 100%);
	background-size: 200% 100%;
	animation: qam-sk 1.1s linear infinite;
}
.dish-bd.is-loading .sk-short { width: 55%; }
@keyframes qam-sk { to { background-position: -200% 0; } }

/* ==========================================================================
   المنيو: شريط الأقسام اللاصق
   ========================================================================== */
.qam-menu-full .qam-mnav {
	position: sticky;
	top: calc(var(--qam-admin, 0px) + var(--qam-hdr-h, 78px));
	z-index: 40;
	display: flex;
	flex-wrap: nowrap;
	gap: 7px;
	overflow-x: auto;
	scrollbar-width: none;
	margin: 16px 0 20px;
	padding: 10px 12px;
	border: 1px solid var(--saj);
	border-radius: var(--r);
	background: rgba(254, 251, 245, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 22px -20px rgba(28, 26, 24, .5);
}
.qam-menu-full .qam-mnav::-webkit-scrollbar { display: none; }
.qam-menu-full .qam-mnav a { flex: none; white-space: nowrap; scroll-snap-align: center; }
.qam-menu-full .qam-mnav a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.qam-menu-full .qam-mnav a.on i { color: var(--saj-d); }
.qam-menu-full .msec { scroll-margin-top: calc(var(--qam-hdr-h, 78px) + 80px); }

@media (max-width: 767px) {
	/* بعرض الشاشة: الشريط حافةٌ لحافة */
	.qam-menu-full .qam-mnav {
		margin-inline: calc(var(--gut) * -1);
		padding-inline: var(--gut);
		border-inline: 0;
		border-radius: 0;
	}
	/* الفلاتر سطرٌ واحد يتمرّر — كانت ثلاثة أسطر تدفع أوّل صنف إلى ما بعد الشاشة */
	.mtools { padding: 12px; }
	.mtools .fbar {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 10px -12px 0;
		padding: 0 12px 2px;
	}
	.mtools .fbar::-webkit-scrollbar { display: none; }
	.mtools .fb { flex: none; white-space: nowrap; padding: 7px 14px; font-size: .86rem; }
}

/* ==========================================================================
   الفوتر على الجوال: عمودا الروابط جنباً إلى جنب، ولمسٌ أوسع
   ========================================================================== */
#ftr ul a { display: inline-block; padding-block: 5px; }
#ftr ul { gap: 2px; }
@media (max-width: 520px) {
	#ftr .ftr-g { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
	#ftr .ftr-g > :first-child,
	#ftr .ftr-g > :last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   الرئيسية على الجوال: الأقسام والأطباق شريطان يُسحبان
   --------------------------------------------------------------------------
   كانت خمس بطاقات أقسام (١٦٥٠ بكسل) وأربعة أطباق (١٧٠٠ بكسل) فوق بعضها.
   سحبٌ أفقي بإيقاع البطاقة، وطرف البطاقة التالية ظاهر ليُفهم أن هناك المزيد.
   ========================================================================== */
@media (max-width: 640px) {
	body.home .cats-feat,
	body.home .sigs {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(var(--gut) * -1);
		padding: 4px var(--gut) 14px;
	}
	body.home .cats-feat::-webkit-scrollbar,
	body.home .sigs::-webkit-scrollbar { display: none; }
	body.home .cats-feat > * { flex: 0 0 66%; scroll-snap-align: center; }
	body.home .sigs > * { flex: 0 0 80%; scroll-snap-align: center; }
}

/* المعرض على الجوال: عمودان */
@media (max-width: 560px) {
	.gal { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ==========================================================================
   صفحة الفرع: ساعات العمل وأزرار الفعل
   --------------------------------------------------------------------------
   `.hours/.hrow` بلا أي نمط — فالتصق اسم اليوم بالوقت («05:30كل الأيام»).
   هذه أنماط `.bhrs/.bhr` في التصميم.
   ========================================================================== */
.hours { display: grid; gap: 8px; margin-top: 8px; }
.hrow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 13px;
	border-radius: 6px;
	border: 1px solid transparent;
	background: var(--qishta);
	font-size: .93rem;
}
.hrow > span:first-child { min-width: 78px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.hrow > .num { font-weight: 600; }
.hrow b { margin-inline-start: auto; font-size: .76rem; font-weight: 700; color: #1f6b3c; }
.hrow.on { background: rgba(95, 191, 126, .12); border-color: rgba(31, 107, 60, .26); }
@media (max-width: 560px) {
	.bact { grid-template-columns: 1fr 1fr; }
	.bact a,
	.bact button { flex-direction: row; min-height: 52px; font-size: .92rem; }
}

/* بطاقة فرع بلا صورة: شريطٌ قصير بدل قوسٍ فارغ بارتفاع الصورة */
.bcard-im:not(:has(img)) {
	height: 78px;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(249, 162, 43, .22), transparent 60%),
		linear-gradient(180deg, #f3e8d4, var(--saj));
}

/* ==========================================================================
   اتصل بنا — صفوف كالتصميم
   ========================================================================== */
.qam-cpanel + .qam-cpanel,
.elementor-widget-shortcode + .elementor-widget-shortcode .qam-cpanel { margin-top: 18px; }
.qam-cpanel h2 { margin: 0 0 12px; }
.qam-cinfo { display: grid; }
.qam-cinfo-r,
.qam-bphone {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 10px 0;
	border-bottom: 1px solid var(--saj);
}
.qam-cinfo-r:last-child,
.qam-bphone:last-child { border-bottom: 0; }
.qam-cinfo-r span { color: var(--ink-2); }
.qam-cinfo-r b { color: var(--jamr-d); font-weight: 700; font-size: 1.08rem; }
.qam-cinfo-r:hover b { color: var(--jamr); }
.qam-bphones { display: grid; }
.qam-bphone > span a { font-weight: 600; }
.qam-bphone > span a:hover { color: var(--jamr-d); }
.qam-bphone small { font-size: .78rem; color: var(--ink-3); margin-inline-start: 4px; }
.qam-bphone > a.num { color: var(--jamr-d); font-weight: 600; white-space: nowrap; padding-block: 6px; }

/* ==========================================================================
   صفحة الصنف
   ========================================================================== */
.qdp .crumb { padding: 0 0 18px; }
.qdp-g { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.qdp-im { aspect-ratio: 1; border: 0; background: var(--saj); box-shadow: 0 30px 60px -36px rgba(28, 26, 24, .5); }
.qdp-im img { width: 100%; height: 100%; object-fit: cover; }
.qdp-cat {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 13px;
	border-radius: 99px;
	background: rgba(225, 37, 43, .08);
	color: var(--jamr-d);
	font-size: .85rem;
	font-weight: 600;
}
.qdp-in h1 { margin: 0 0 12px; }
.qdp-desc p { margin: 0 0 10px; }
.qdp-in .dish-price { margin-top: 18px; font-size: 2.1rem; }
.qdp-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.qdp-act .btn-p { flex: 1 1 240px; padding-block: 15px; font-size: 1.02rem; }
.qdp-act .btn-g { flex: 0 1 auto; padding-block: 15px; }
.qdp .qam-closed-note { margin: 14px 0 0; }
.qam-more-h { margin-bottom: 18px; }
@media (max-width: 820px) {
	.qdp-g { grid-template-columns: 1fr; gap: 22px; }
	.qdp-im { aspect-ratio: 4 / 3; border-radius: 120px 120px var(--r) var(--r); }
	.qdp-act .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   المقالة
   ========================================================================== */
.qam-post-head .crumb { padding: 0 0 14px; }
.qam-post-head h1 { margin: 0 0 12px; max-width: 26ch; }
.qam-post-head .lede { max-width: 62ch; }
.qam-post-meta { margin: 14px 0 0; color: var(--ink-3); }
.elementor-element.qam-post > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}
.qam-post > .e-con-inner > .e-con { display: block; width: auto; max-width: none; padding: 0; }
.qam-post-fig { margin: 0 0 26px; border: 1px solid var(--saj); border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; }
.qam-post-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qam-prose { max-width: 68ch; font-size: 1.04rem; line-height: 1.95; }
.qam-prose p { margin: 0 0 1.1em; }
.qam-prose h2 { font-family: var(--f-disp); font-size: 1.7rem; font-weight: 700; line-height: 1.35; margin: 1.9em 0 .55em; }
.qam-prose h3 { font-size: 1.2rem; font-weight: 600; margin: 1.7em 0 .5em; }
.qam-prose ul,
.qam-prose ol { margin: 0 0 1.2em; padding-inline-start: 1.2em; }
.qam-prose li { margin-bottom: .45em; }
.qam-prose a { color: var(--jamr-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.qam-post-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.qam-post-cta > div { flex: 1; min-width: 200px; }
.qam-post-cta p { margin: 4px 0 0; }
.qam-post-more { position: sticky; top: calc(var(--qam-hdr-h, 78px) + 20px); }
.qam-post-more ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.qam-post-more li { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--saj); }
.qam-post-more li:last-child { border-bottom: 0; padding-bottom: 0; }
.qam-post-more a { font-size: .95rem; font-weight: 600; line-height: 1.55; }
.qam-post-more a:hover { color: var(--jamr-d); }
.qam-post-more small { font-size: .78rem; color: var(--ink-3); }
@media (max-width: 900px) {
	.elementor-element.qam-post > .e-con-inner { grid-template-columns: 1fr; }
	.qam-post-more { position: static; }
	.qam-prose { font-size: 1rem; }
	.qam-prose h2 { font-size: 1.45rem; }
}

/* إشعارات ووكومرس: أيقونة ووكومرس المطلقة تقع على أوّل كلمة في RTL (حشوتنا
   أضيق من موضعها)، وحلقة التركيز تظهر لأن ووكومرس يركّز الصندوق برمجياً
   ليقرأه قارئ الشاشة — لا لأن الزائر وصل إليه بلوحة المفاتيح. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before { content: none !important; }
.woocommerce-NoticeGroup:focus,
.woocommerce-error:focus,
.woocommerce-message:focus,
.woocommerce-info:focus { outline: none; }
.woocommerce-error li + li { margin-top: 4px; }

/* لوحة البحث لم تعد لاصقة على الشاشة الكبيرة: شريط الأقسام (٦٤ بكسل) يلتصق
   مكانها. كانت اللوحة كلها لاصقة (`top:58px` في qam.css) — ١٩٠ بكسل من شاشة
   ٩٠٠ — فلمّا صار الهيدر ثابتاً (٧٨ بكسل) دخل رأسها تحته وغطّت شريط الأقسام. */
@media (min-width: 900px) {
	.qam-menu-full .mtools { position: static; box-shadow: none; }
}

/* ---------- 1.5.0 · النسخة الإنجليزية ---------- */

/* العنوان بجوار خطّ `.qam-rule` كان `flex:none` فلا يلتفّ أبداً: «Thank you for
   your order» و«Order from your nearest branch» أعرض من شاشة الجوال فخرجا
   عن حافّتها. الآن يلتفّ العنوان عند الحاجة، ويبقى للخطّ ٢٤ بكسل على الأقل. */
.qam-rule .d2,
.qam-rule .d3,
.elementor-widget.qam-rule .elementor-heading-title { flex: 0 1 auto; min-width: 0; }
.qam-rule::after,
.elementor-widget.qam-rule > .elementor-widget-container::after { min-width: 24px; }

/* رقم وقت التحضير داخل `<b>` في درج الصنف — قاعدة البروتوتايب
   `.dish-facts span` (للتسمية تحت الرقم) كانت تصغّره هو أيضاً. */
.dish-facts b .num { font-size: inherit; color: inherit; }

/* شارة قسم المقالة الرئيسية في «من ثقافة المطبخ اليمني»: موضعها في البروتوتايب
   أعلى الصورة عند زاويتها، والصورة قوس مستدير من فوق يقصّ ما في زاويته —
   فكانت «أدلة المدن» تظهر «…دن» بالعربية و«…uides» بالإنجليزية. أسفل الصورة
   زاويتها شبه قائمة فتظهر الشارة كاملة. */
.lead-tag { top: auto; bottom: 16px; }

/* `.split` من البروتوتايب شبكةٌ بعمودين — وعلى قسم Elementor «محدود العرض»
   تقع الشبكة على القسم نفسه، فيأخذ غلافه الداخلي (`.e-con-inner`) العمود الأول
   وحده ويبقى نصف الصفحة فارغاً: «قيمنا / محطات الطريق» في «عن الشركة»، و«رمضان
   في عم قاسم» في العروض، وقسم الامتياز — بالعربية والإنجليزية. يعود القسم
   مرناً كما يريده Elementor، والعمودان داخل غلافه. */
.e-con.qam-split.split { display: flex; }
@media (min-width: 821px) {
	.e-con.qam-aside.split > .e-con-inner > .e-con:first-child { flex: 1 1 62%; }
	.e-con.qam-aside.split > .e-con-inner > .e-con:last-child { flex: 1 1 34%; }
}
@media (max-width: 820px) {
	.e-con.qam-split > .e-con-inner { flex-direction: column !important; }
	.e-con.qam-split > .e-con-inner > .e-con { width: 100% !important; }
}

/* فيديو الهيرو ملفٌّ مرفوع (1.6.0). Elementor يحجّم عنصر الفيديو إطاراً ١٦:٩
   يغطّي القسم ثم يقصّ الفيديو داخله — والفيديو ٣:١ على الكمبيوتر ورأسيّ على
   الجوال، فكان يُقصّ مرّتين ويُكبَّر على الجوال إلى ثلث حجمه. يملأ القسم هنا
   مباشرة، و`object-fit: cover` يقصّ مرّة واحدة بقدر الحاجة. */
.qam-hero-v > .elementor-background-video-container > .elementor-background-video-hosted {
	width: 100% !important;
	height: 100% !important;
}

/* ==========================================================================
   1.6.1 · صور الأصناف كاملة، والهيرو بنسبة الفيديو
   ========================================================================== */

/* صور الأصناف الجديدة ١٦:٩ وعليها الشعار واسم الطبق عند الأطراف، وإطار الدرج
   كان ١٦:١١ وصفحة الصنف مربّعاً بـ`cover` — فقُصّ الشعار والاسم. الإطار الآن
   ١٦:٩ والصورة `contain`: الجديدة تملؤه تماماً، والمربّعة القديمة تظهر كاملة
   بهامش فاتح على جانبيها. صور المنيو الصغيرة تبقى مقصوصة على الطبق في وسطها. */
.dish-im { aspect-ratio: 16 / 9; background: var(--qishta); }
.dish-im img { object-fit: contain; }
.qdp-im,
.qdp-im.hero-frame { aspect-ratio: 16 / 9; border-radius: var(--r); background: var(--qishta); }
.qdp-im img,
.qdp-im.hero-frame img { height: 100%; object-fit: contain; }
@media (max-width: 820px) {
	.qdp-im,
	.qdp-im.hero-frame { aspect-ratio: 16 / 9; border-radius: var(--r); }
}

/* الفيديو ٣:١، والهيرو كان ٧٧٤ بكسل على شاشة ١٤٤٠ — فيُكبَّر الفيديو ليملأ
   الارتفاع ولا يظهر إلا ٦٢٪ من عرضه («قريب جداً»). زيادة الارتفاع تزيد التكبير.
   الارتفاع الآن ثلث عرض الشاشة (نسبة الفيديو) وأقلّه ما يسع النص: ~٧٧٪ من
   الفيديو على ١٤٤٠، وكاملاً على ١٩٢٠. الجوال كما هو: نسخته الرأسية مقصوصة له. */
@media (min-width: 768px) {
	.elementor-element.qam-hero-v { min-height: max(600px, 33.34vw); }
	.qam-hero-v > .qam-hero-in { padding-block: clamp(40px, 5vh, 64px) 104px; }
}

/* ==========================================================================
   1.8.0 · عروض الجمعة البيضاء
   --------------------------------------------------------------------------
   قسم داكن (لحظة علامة، كـ«أطباق لازم تجرّبها») وثلاث بطاقات بقوس كبطاقات
   المدن: القوس يحمل الوجبة والرقم الكبير — هو العرض نفسه (½ · 15% · هدية).
   ========================================================================== */
.e-con.wf { position: relative; overflow: hidden; isolation: isolate; }
.e-con.wf::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(55% 70% at 88% -10%, rgba(255, 255, 255, .11), transparent 62%),
		radial-gradient(45% 60% at 6% 110%, rgba(225, 37, 43, .24), transparent 64%);
}
.elementor-element.wf-top { margin-block-end: 16px; }
.elementor-element.wf-top p { margin: 0; }
.wf-date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 15px;
	border: 1px solid rgba(249, 162, 43, .55);
	border-radius: 99px;
	color: var(--asal);
	font-size: .88rem;
	font-weight: 700;
}
.wf-date::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--asal); }
.elementor-element.wf-h .elementor-heading-title { display: block; color: #fff; }
.elementor-element.wf-h .elementor-heading-title::after { display: none; }
.elementor-element.wf-h em { font-style: normal; color: var(--asal); }
.elementor-element.wf-lede { margin-block: 12px 0; }
.elementor-element.wf-lede p { margin: 0; color: var(--saj-d); }
.elementor-element.wf-lede p + p { margin-top: 2px; }

.e-con.wf-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 30px;
	align-items: stretch;
}
.e-con.wf-card {
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	padding: 0 !important;
	background: #fff;
	color: var(--ink);
	border-radius: var(--arch);
	overflow: hidden;
	box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7);
}
.e-con.wf-card > .elementor-widget { width: 100%; margin: 0 !important; }
.elementor-element.wf-arch {
	position: relative;
	overflow: hidden;
	padding: 30px 16px 18px;
	text-align: center;
	background: linear-gradient(168deg, #FEF1DA 0%, #F6D9A9 100%);
	border-bottom: 1px solid var(--saj);
}
.elementor-element.wf-arch::before {
	content: '';
	position: absolute;
	inset-inline-start: -30%;
	top: -58%;
	width: 160%;
	height: 118%;
	border-radius: 50%;
	border: 1px solid rgba(184, 26, 32, .13);
}
.elementor-element.wf-arch p { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.wf-meal { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #8A6427; }
.wf-n {
	margin: 4px 0 2px;
	font-family: var(--f-disp);
	font-size: clamp(2.9rem, 5.6vw, 3.6rem);
	font-weight: 700;
	line-height: 1.05;
	color: var(--jamr-d);
}
.wf-u { font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.elementor-element.wf-t { padding: 18px 20px 0; }
.elementor-element.wf-t .elementor-heading-title { margin: 0; font-family: var(--f-disp); font-size: 1.42rem; line-height: 1.35; color: var(--ink); }
.elementor-element.wf-d { padding: 6px 20px 0; }
.elementor-element.wf-d p { margin: 0 0 8px; font-size: .94rem; line-height: 1.8; color: var(--ink-2); }
.elementor-element.wf-d .wf-tag { color: var(--jamr-d); font-weight: 700; }
.wf-or { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 6px; }
.wf-or li { padding: 9px 12px; border-radius: var(--r); background: var(--qishta); font-size: .9rem; line-height: 1.7; color: var(--ink); }
.wf-or li.wf-or-sep { padding: 0; background: none; text-align: center; font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.elementor-element.wf-m { margin-top: auto !important; padding: 12px 20px 0; }
.wf-meta { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--saj); display: grid; gap: 4px; font-size: .87rem; line-height: 1.7; color: var(--ink-2); }
.wf-meta b { color: var(--ink); }
.elementor-element.wf-go { padding: 14px 20px 20px; }
.elementor-element.wf-go .elementor-button-wrapper,
.elementor-element.wf-go .elementor-button { display: flex; width: 100%; }
@media (max-width: 900px) {
	.e-con.wf-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
	.e-con.wf-card { border-radius: 120px 120px var(--r) var(--r); }
}

/* ==========================================================================
   1.8.0 · صفحة التوصيل — بطاقات التطبيقات بقوس كبطاقات المدن
   ========================================================================== */
.dapps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 8px; }
.dapp {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--saj);
	border-radius: var(--arch);
	overflow: hidden;
	transition: border-color .2s, transform .26s var(--ease), box-shadow .26s var(--ease);
}
.dapp:hover { border-color: var(--jamr); transform: translateY(-4px); box-shadow: 0 18px 38px rgba(28, 26, 24, .1); }
.dapp-arch { padding: 30px 14px 18px; text-align: center; background: linear-gradient(168deg, #FEF1DA 0%, #F6D9A9 100%); border-bottom: 1px solid var(--saj); }
.dapp-arch svg { display: block; width: 34px; height: 34px; margin: 0 auto 6px; fill: var(--jamr-d); }
.dapp-n { margin: 0; font-family: var(--f-disp); font-size: 1.6rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.dapp-l { flex: 1; margin: 0; padding: 16px 18px 0; font-size: .93rem; line-height: 1.8; color: var(--ink-2); }
.dapp-f { padding: 16px 18px 18px; }
.dapp-f .btn { width: 100%; justify-content: center; }
.dapp-off { opacity: .55; cursor: default; pointer-events: none; }
@media (max-width: 560px) {
	.dapps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.dapp { display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: var(--r) 60px 60px var(--r); }
	html.ltr-mode .dapp { border-radius: 60px var(--r) var(--r) 60px; }
	.dapp-arch { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 8px; border-bottom: 0; border-inline-end: 1px solid var(--saj); }
	.dapp-arch svg { width: 28px; height: 28px; }
	.dapp-n { font-size: 1.22rem; }
	.dapp-l { padding: 14px 16px 0; font-size: .88rem; }
	.dapp-f { padding: 10px 16px 14px; }
	.dapp-f .btn { padding-block: 10px; font-size: .88rem; }
}
/* المدة والفروع والزرّ أسفل البطاقة دائماً — والبطاقات الثلاث بطول واحد. وقاعدة
   `.wf-card > .elementor-widget { margin: 0 }` أقوى من `margin-top: auto` وحدها. */
.e-con.wf-card > .elementor-widget.wf-m { margin-top: auto !important; }
/* خيارا العشاء صندوقان و«أو» بينهما — بلا نقاط القوائم العامة */
.wf-or li::before { display: none !important; }
.wf-or li { list-style: none; }
.elementor-widget-text-editor .wf-or { gap: 6px; }
.elementor-widget-text-editor .wf-or li { padding: 9px 12px; }
.elementor-widget-text-editor .wf-or li.wf-or-sep { padding: 0; }
.elementor-widget-text-editor .wf-meta { gap: 4px; }
/* «HungerStation» أعرض من عمود ١١٢ بكسل على الجوال بالإنجليزية فقُصّ طرفه */
@media (max-width: 560px) {
	html.ltr-mode .dapp { grid-template-columns: 132px minmax(0, 1fr); }
	html.ltr-mode .dapp-n { font-size: 1.02rem; }
}