:root{
  --bg:#0f1115; --card:#191b1f; --soft:#23262c; --line:#363046;
  --text:#ebe7f2; --muted:#a69cb5; --brand:#b48ce0; --brand2:#bf99e8; /* لون الخزامى (لافندر) بطلب المالك — بديل ذهب الشعار */
  --green:#3f7d4e; --amber:#f0b429; --red:#c0563f; --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:17px} /* الأساس 16→17px: كل خطوط الموقع (rem) تكبر درجة موحّدة */
html,body{height:100%;margin:0;overflow:hidden}
body{
  font-family:"Tajawal","Segoe UI",Tahoma,system-ui,sans-serif;
  background:#0b0c0e; color:var(--text); direction:rtl; line-height:1.7;
}

/* ===== الإطار الخشبي ===== */

/* الشريط شفاف فوق الزخرفة الخشبية */
header.nav{position:fixed;top:0;left:0;right:0;z-index:200;
  background:transparent;border-bottom:none}
/* بنر موحَّد بنفس لون خلفية الشعار الغامقة (#2b1f3d) — فيصير الشعار والبنر وحدة واحدة
   بلا مستطيل بارز. تدرّج غامق خفيف فقط (لا توهّج على البنر — التوهّج على الشعار وحده) */
header.nav::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#342650 0%,#2b1f3d 55%,#241a33 100%);
  /* شبه صلب أعلى ليطابق صندوق الشعار المعتم، ويخفت مع التمرير */
  opacity:calc(1 - .6 * var(--nav-p,0));transition:opacity .12s linear;
  /* قناع تدرّج جمالي: يذوب أسفل الخشب والجانبين بنعومة في خلفية الشاشة */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 78%,rgba(0,0,0,.45) 91%,transparent 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 78%,rgba(0,0,0,.45) 91%,transparent 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
header.nav .nav-inner{position:relative;z-index:1}
/* الترويسة تتلاشى وتنزاح مع التمرير (بدل التثبيت الدائم المزعج): البنر والأزرار
   ينزاحان للأعلى ويتلاشيان، والشعار يتلاشى «في مكانه» بلا إزاحة — ويعود الجميع
   تدريجياً عند الرجوع للأعلى. المتغيّر --nav-p (0..1) يضبطه سكربت التمرير. */
header.nav{--nav-p:0}
header.nav.nav-gone{pointer-events:none}
/* الأزرار والأقسام: تنزاح للأعلى وتختفي كلياً (١٠٠٪) */
header.nav .nav-edge,header.nav .nav-cats{opacity:calc(1 - var(--nav-p));transform:translateY(calc(var(--nav-p) * -38px));transition:opacity .12s linear,transform .12s linear;will-change:opacity,transform}
/* الشعار: يختفي كلياً في مكانه بلا إزاحة */
/* الشعار: منحنى تلاشٍ سريع البداية (٧٠٪ مبكراً) ثم تدريجي حتى يبقى ٣٪ — يضبطه السكربت عبر --logo-o */
header.nav .brand{opacity:var(--logo-o,1);transition:opacity .1s linear;will-change:opacity}
@media(prefers-reduced-motion:reduce){header.nav .nav-edge,header.nav .nav-cats,header.nav .brand,header.nav::before{transition:none}}

/* frame-layer */
:root{ --win-top:calc(190px + 3.2vh); --win-bottom:4%; --win-side:0%; }
.frame-layer{position:fixed;inset:0;z-index:0;overflow:hidden}
.frame-stage{position:absolute;top:-4.5%;bottom:-4.5%;left:-7%;right:-7%}
.frame-bg{display:none}
/* الحاوية تمتد لكامل الارتفاع، والمحتوى يُزاح للأسفل بمقدار الترويسة عبر padding-top.
   هكذا يبقى المحتوى تحت الترويسة في الأعلى، ويمرّر تحتها ويملأ مكانها عند التمرير
   (لا فراغ داكن). وأُزيل تدرّج التعتيم العلوي (القناع الأسود) فيظهر المحتوى كاملاً. */
.frame-window{position:absolute;top:0;bottom:var(--win-bottom);left:var(--win-side);right:var(--win-side);padding-top:var(--win-top);overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 97%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 97%,transparent 100%)}
.frame-window::-webkit-scrollbar{width:10px}
.frame-window::-webkit-scrollbar-track{background:rgba(0,0,0,0)}
.frame-window::-webkit-scrollbar-thumb{background:#000;border-radius:3px}

/* ===== فيديو الزيت المنسكب خلف الشعار وعلى المنتجات ===== */
/* انسكاب الزيت: عمود رأسي يبدأ من الشعار وينساب على المنتجات أسفل */
.oil-pour{position:fixed;top:30px;left:45%;
  width:auto;height:calc(100vh - 30px);max-width:46vw;
  transform:translateX(-50%) translateY(calc(var(--oil-shift,0) * 1px));
  object-fit:contain;object-position:top center;z-index:160;pointer-events:none;
  mix-blend-mode:screen;opacity:.38;
  filter:saturate(.85) contrast(1.05) brightness(.95);
  /* يبدأ الزيت من كلمة "عتم" + نطاق مخفّف أسفل الشعار مباشرة (17%–35%) لتهدئة توهّج الأصفر هناك فقط، ثم كامل نزولاً */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 11%,rgba(0,0,0,.5) 17%,rgba(0,0,0,.5) 33%,#000 48%,#000 88%,transparent 100%),conic-gradient(from 0deg at 50% -38%,transparent 169deg,#000 178deg,#000 182deg,transparent 191deg);
  mask-image:linear-gradient(180deg,transparent 0,transparent 11%,rgba(0,0,0,.5) 17%,rgba(0,0,0,.5) 33%,#000 48%,#000 88%,transparent 100%),conic-gradient(from 0deg at 50% -38%,transparent 169deg,#000 178deg,#000 182deg,transparent 191deg);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transform-origin:50% 0;animation:oilsway 5s ease-in-out infinite, oilfade 2s ease-out both;
  transition:opacity .4s}
/* تدرّج ظهور فيديوهات سكب الزيت خلال أول ثانيتين (من شفاف إلى شفافيتها المحدّدة) */
@keyframes oilfade{from{opacity:0}}
/* تأرجح أسفل الزيت يمين ويسار حول نقطة الشعار (الأعلى ثابت) */
@keyframes oilsway{
  0%,100%{transform:translateX(-50%) translateY(calc(var(--oil-shift,0) * 1px)) rotate(-3.5deg)}
  50%{transform:translateX(-50%) translateY(calc(var(--oil-shift,0) * 1px)) rotate(3.5deg)}
}
@media(prefers-reduced-motion:reduce){.oil-pour{display:none}}
/* نسختان إضافيتان: تظهران من الوسط نزولاً فقط (الأعلى قرب الشعار يبقى مفرداً) — فتصبح 3 خيوط في الوسط والأسفل */
.oil-extra{position:fixed;top:30px;width:auto;height:calc(100vh - 30px);max-width:46vw;
  transform:translateX(-50%);transform-origin:50% 0;
  object-fit:contain;object-position:top center;z-index:159;pointer-events:none;
  mix-blend-mode:screen;opacity:.32;filter:saturate(.85) contrast(1.05) brightness(.95);
  animation:oilsway 5s ease-in-out infinite, oilfade 2s ease-out both;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 38%,#000 52%,#000 86%,transparent 100%),conic-gradient(from 0deg at 50% -38%,transparent 169deg,#000 178deg,#000 182deg,transparent 191deg);
  mask-image:linear-gradient(180deg,transparent 0,transparent 38%,#000 52%,#000 86%,transparent 100%),conic-gradient(from 0deg at 50% -38%,transparent 169deg,#000 178deg,#000 182deg,transparent 191deg);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.oil-extra-left{left:30%;animation-delay:-1.6s, 0s}
.oil-extra-right{left:60%;animation-delay:-3.2s, 0s}
@media(prefers-reduced-motion:reduce){.oil-extra{display:none}}
/* بطاقة التقييمات مرفوعة فوق طبقة الفيديو، بخلفية 60% ليظهر الفيديو خلفها بـ40% */
#reviewsCard{position:relative;z-index:200;background:rgba(23,25,29,.6);backdrop-filter:none;-webkit-backdrop-filter:none}
/* صفحات المنتجات التفصيلية: تخفيف ظهور الفيديو 30% */
.oil-pour.oil-dim{opacity:.27}
.oil-extra.oil-dim{opacity:.22}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 18px}

/* ===== الـ Nav — 5 أعمدة ===== */
/* ترويسة بعمود واحد: الشعار على البنر أعلى، وصف السلة/الدخول أسفله (بين البنر والمنتجات) */
.nav-inner{
  display:flex;flex-direction:column;align-items:center;
  direction:ltr;
  width:100%;padding:10px 4.5% 8px;box-sizing:border-box;gap:2px}
.nav-actions{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:980px;margin-top:6px}
.nav-edge{display:flex;align-items:center;gap:8px}
.nav-edge-left{justify-content:flex-start}
.nav-edge-right{justify-content:flex-end}
.nav-cats{display:none}
.nav-pill{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:1.5px solid var(--brand);border-radius:999px;color:var(--brand2);font-size:.85rem;font-weight:700;white-space:nowrap;transition:.2s}
.nav-pill:hover{background:var(--brand);color:#000}
.nav-cat-btn{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:.78rem;transition:.2s}
.nav-cat-btn span{font-size:.72rem}
.nav-cat-btn:hover,.nav-cat-btn.active{border-color:var(--brand);color:var(--brand2);background:rgba(154,106,212,.08)}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:1.65rem;color:var(--brand2);text-shadow:0 1px 6px rgba(0,0,0,.7);filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));animation:logoGlow 2.8s ease-in-out infinite;will-change:filter}
.brand .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;font-size:1.25rem}
/* هامش سالب: يقصّ الفراغ الشفاف حول الإكليل فيقلّ ارتفاع صندوق الشعار — دون تصغير الإكليل المرئي */
/* الشعار الأفقي (خزامى الخليج) على خلفيته البنفسجية — ماسك يخفت أطرافه الأربعة
   فيذوب المستطيل البنفسجي في اللوح الخشبي بنفس أسلوب قناع البنر (source-in/intersect) */
.brand-logo{height:118px;width:auto;max-width:min(440px,82vw);object-fit:contain;display:block;margin:-8px 0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* توهّج أبيض على الشعار يشتعل ويخبو — على العنصر الأب (.brand) لأن الماسك على الصورة يقصّ الفلتر */
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)) drop-shadow(0 0 4px rgba(255,255,255,.22))}
  50%{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(255,255,255,.95)) drop-shadow(0 0 46px rgba(255,255,255,.6))}
}
@media(prefers-reduced-motion:reduce){.brand{animation:none}}

/* الـblur في ::before لا على العنصر نفسه: backdrop-filter على الحاوية يقفل
   سياق التكديس فيحبس نصوصها تحت فيديو الزيت */
.panel,.stat,.order-card{position:relative}
.panel::before,.stat::before,.order-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card{background:rgba(23,25,29,.88)}
.panel{background:rgba(23,25,29,.9)}
.stat{background:rgba(23,25,29,.9)}
/* ===== بوابة العميل (حسابي): عمود مضغوط بنحو ثلث عرض الشاشة على الكمبيوتر،
   ولوحاته أبرز عن خلفية الزيت المنسكب (تعتيم أعلى) ===== */
/* الجذر الحقيقي للاندماج مع فيديو الزيت: الفيديو fixed بـz-index:160، والبطاقات كانت
   بلا position صريح (static) فيُرسم الفيديو فوق خلفية الصندوق نفسه (لا النص فقط).
   رفع الصندوق كاملاً (خلفية+حد+ظل) فوق طبقة الفيديو يحلّ الاندماج نهائياً — على الجهازين. */
.portal-page .panel,.portal-page .stat,.portal-page .verified-bar{
  position:relative;z-index:210;
  /* خلفية معتمة كلياً (لا 97٪): على الكمبيوتر فيديو الزيت يستخدم mix-blend-mode:screen
     (يُبرز الإضاءة) فيتسرّب توهّجه عبر أي نسبة شفافية ولو ضئيلة ويبدو كضبابية. صلبة تماماً
     تمنع أي تسرّب مهما كان وضع المزج خلفها. */
  background:rgb(15,17,21)}
/* خلفية البطاقات هنا شبه معتمة أصلاً — الطبقة الزجاجية (::before) لا تفيد بصرياً وتسبّب
   ضبابية على النص والحدود بعد رفع البطاقة فوق الفيديو، فنعطّلها هنا خاصة (وضوح كامل) */
.portal-page .panel::before,.portal-page .stat::before{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(min-width:681px){
  .portal-page{max-width:clamp(580px,40vw,720px)}
  .portal-page .stats{gap:11px;margin:16px 0}
  .portal-page .stat{padding:15px 8px}
  .portal-page .hero{padding:20px 0 4px}
  .portal-page .hero h1{font-size:1.5rem}
  /* الكمبيوتر: حد ذهبي واضح + ظل داكن يفصل كل بطاقة عن الخلفية */
  .portal-page .panel,.portal-page .stat,.portal-page .verified-bar{
    border-color:var(--brand);
    box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(154,106,212,.2)}
  /* الوسط: تصنيف العميل (الذهبي) — بارز بتوهّج ذهبي خفيف حوله، على الكمبيوتر أيضاً */
  .portal-page .stats .stat:nth-child(2){
    background:rgba(30,22,42,.97);
    border-color:var(--brand2);
    box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(210,178,240,.45),0 0 22px 4px rgba(210,178,240,.35)}
}
.portal-page #p-orders .panel{overflow-x:auto}
/* الجوال: الإحصاءات الثلاث في صف واحد دائماً (لا تكديس عمودي) — عدد الطلبات يمين،
   التصنيف (العميل الذهبي) وسط بارز بتوهّج ذهبي خفيف، الخصم الدائم يسار */
@media(max-width:640px){
  .portal-page .stats{grid-template-columns:repeat(3,1fr);gap:7px}
  .portal-page .stat{padding:10px 4px}
  .portal-page .stat .num{font-size:.95rem}
  .portal-page .stat .lbl{font-size:.6rem;line-height:1.3}
  .portal-page .stats .stat:nth-child(2){
    background:rgba(30,22,42,.97);
    border-color:var(--brand2);
    box-shadow:0 0 0 1px rgba(210,178,240,.4),0 0 16px 3px rgba(210,178,240,.4)}
}
/* قسم فيديو يوتيوب أسفل المنتجات */
.home-video{max-width:780px;margin:24px auto 32px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:#000}
.home-video iframe{width:100%;height:100%;border:none;display:block}

/* الواجهة الرئيسية */
.hero{text-align:center;padding:54px 18px 30px}
/* رابط رجوع أعلى صفحات المنتج والدفع — فوق فيديو الزيت وواضح */
.back-link{position:relative;z-index:210;display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.6);opacity:.92;transition:.2s}
.back-link:hover{opacity:1;color:var(--brand2)}
.hero h1{font-size:2.2rem;margin:0 0 12px;background:linear-gradient(135deg,#fff,var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);max-width:620px;margin:0 auto;font-size:1.05rem}

/* الشبكة — بطاقات صغيرة: 4 في الصف على الشاشات الكبيرة */
/* الحجم الأصلي — فقط حشوة علوية أكبر لإنزال البطاقات عن حافة البنر */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 0 24px;max-width:1160px;margin:0 auto}
/* الزيت يمتزج على صورة وخلفية البطاقة، بينما النصوص والأرقام (.body) مرفوعة فوقه.
   لتحرير الجسم من قفل سياق التكديس: الـblur في ::before والإمالة 3D على الصورة لا البطاقة */
.card .body{position:relative;z-index:210}
#productInfo .price,#productInfo .old-line{position:relative;z-index:210}
/* كل النصوص فوق فيديو الزيت (z-index 160) — الصور والخلفيات تبقى تحت الامتزاج.
   a.media مستثنى لأنه غلاف صورة المنتج */
.frame-window h1,.frame-window h2,.frame-window h3,.frame-window h4,
.frame-window p,.frame-window label,.frame-window span,.frame-window small,
.frame-window b,.frame-window strong,.frame-window td,.frame-window th,.frame-window li,
.frame-window input,.frame-window select,.frame-window textarea,.frame-window button,
.frame-window a:not(.media),.frame-window footer,
.frame-window .badge,.frame-window .vbadge,
.frame-window .alert,.frame-window .otp-dev-code{position:relative;z-index:210}
/* نفس هروب #reviewsCard: إلغاء blur اللوحة حتى لا تصير سياقاً يقفل سطرَي السعر */
#productInfo,#productInfo::before{backdrop-filter:none;-webkit-backdrop-filter:none}
/* عنوان صفحة المنتج: مرفوع فوق فيديو الزيت فقط — التنسيق الأصلي (أبيض) بلا تغيير */
#productInfo h2{position:relative;z-index:210}
/* صفحة المنتج: نصوص السعر (الحالي) + شامل الضريبة + شرح المنتج باللون الأبيض */
#productInfo .price,
#productInfo .price .plabel,
#productInfo .price small,
#productInfo .price-now,
#productInfo .old-line .plabel,
#productInfo .tax-note,
#productInfo .note{color:#fff}
/* السعر السابق: "ر.س" تبقى بلون عادي واضح — والتخفيف (بلا تغبيش) على الرقم نفسه فقط */
#productInfo .old-line .old-price{color:#fff}
#productInfo .old-line .old-price .old-num{color:rgba(255,255,255,.62);font-weight:500}
.card{position:relative;background:rgba(25,27,31,.65);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
  transition:box-shadow .25s ease,border-color .2s}
.card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card:hover{border-color:var(--brand);box-shadow:0 22px 48px rgba(0,0,0,.5),0 0 0 1px rgba(210,178,240,.25)}
/* لمعان زجاجي يتبع المؤشّر */
.grid .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;transition:opacity .3s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(210,178,240,.28),transparent 60%)}
.grid .card:hover::after{opacity:1}

@keyframes reveal{
  0%  {opacity:0;transform:translateY(26px) scale(.97)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
/* backwards لا forwards: بعد انتهاء الظهور يتحرر الأنيميشن كلياً فلا يبقى
   filter/transform مطبّقاً يقفل سياق التكديس ويحبس الأسعار تحت فيديو الزيت */
.grid .card{animation:reveal .8s cubic-bezier(.22,.61,.36,1) backwards}
.grid .card:nth-child(1){animation-delay:.05s}
.grid .card:nth-child(2){animation-delay:.15s}
.grid .card:nth-child(3){animation-delay:.25s}
.grid .card:nth-child(4){animation-delay:.35s}
.grid .card:nth-child(5){animation-delay:.45s}
.grid .card:nth-child(6){animation-delay:.55s}
@media(prefers-reduced-motion:reduce){.grid .card{opacity:1;animation:none}}

/* شريط شعارات الشركاء — تمرير مستمر يمين ← يسار */
.logos-marquee{position:relative;overflow:hidden;width:100%;margin:18px 0;padding:14px 0;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-track{display:inline-flex;flex-wrap:nowrap;width:max-content;direction:ltr;white-space:nowrap}
.logo-chip{flex:0 0 auto;width:150px;height:80px;margin-right:18px;background:#f4f4f6;border-radius:18px;
  display:flex;align-items:center;justify-content:center;padding:0 10px;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.logo-chip span{font-size:1.05rem;white-space:nowrap;font-family:"Segoe UI",Tahoma,sans-serif}
.logo-chip img{max-height:52px;max-width:128px;object-fit:contain;display:block}
/* زر واتساب عائم — يبرز أسفل يمين الشاشة بنبض دائم، ويتضخّم لحظياً عند تمرير الصفحة */
.wa-fab{position:fixed;bottom:22px;right:22px;z-index:500;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35);animation:waPulse 2.4s ease-in-out infinite;transition:transform .25s ease}
.wa-fab:hover{transform:scale(1.09)}
.wa-fab svg{width:32px;height:32px;fill:#fff}
.wa-fab.wa-boost{transform:scale(1.16)}
@keyframes waPulse{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 0 0 rgba(37,211,102,.5)}50%{box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 0 15px rgba(37,211,102,0)}}
@media(max-width:680px){.wa-fab{width:52px;height:52px;bottom:16px;right:16px}.wa-fab svg{width:29px;height:29px}}
@media(prefers-reduced-motion:reduce){.wa-fab{animation:none}}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* بلا will-change: يقفل سياق الصورة دائماً فيحبس شارة الخصم النصية تحت الزيت.
   القفل الآن مؤقت أثناء الإمالة الفعلية فقط */
.card .media{position:relative;aspect-ratio:14/9;background:#000;overflow:hidden;
  transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.card .media img{width:100%;height:100%;object-fit:cover}
.card .badge{position:absolute;top:7px;inset-inline-start:7px;background:var(--brand);padding:3px 8px;border-radius:999px;font-size:.7rem;font-weight:700;display:flex;align-items:center;gap:4px}
.card .body{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1}
/* التنسيق الأصلي (أبيض) — الرفع فوق فيديو الزيت يتم عبر .body لا عبر الخط */
/* عنوان بارتفاع موحّد (حتى سطرين) — يمنع اختلاف ارتفاع البطاقات فتتساوى أزرار «أضف الطلب» */
.card h3{margin:0;font-size:.9rem;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
/* صفّ مضغوط: الاسم + التقييم بجانبه */
/* اسم المنتج وحجم العبوة في سطر أول كامل، وتحته النجوم وعدّاد «تم طلب هذا المنتج» */
.card .card-head{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.card .card-head h3{flex:none;min-width:0;width:100%}
.card .card-rate{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;font-size:.82rem}
/* عدّاد الطلبات بجانب النجوم في نفس الصف بخط أصغر (يقصّ نصه إن ضاق بدل الالتفاف) */
.card .order-count{font-size:.62rem;color:var(--brand2);white-space:nowrap;flex-shrink:0}
/* «تم طلب هذا المنتج X مرة» في صفحة المنتج: نص صغير بلا خلفية */
#productInfo .order-count{font-size:.68rem;color:var(--brand2)}
.card .stars{flex-shrink:0;font-size:.8rem;letter-spacing:0}
.card .card-rate .muted{font-size:.78rem}
.card .desc{color:var(--muted);font-size:.8rem;flex:1}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-weight:800;font-size:1.2rem;color:var(--brand2)}
/* السعر الحالي: نبض لافت + شريحة داكنة صلبة تُبقي الأرقام بارزة تحت فيديو الزيت */
.price-now{display:inline-flex;align-items:baseline;gap:3px;line-height:1.05;animation:pricepulse 2.6s ease-in-out infinite;will-change:transform;
  background:#14161b;padding:1px 6px;border-radius:7px;border:1px solid rgba(210,178,240,.5);
  color:#e3cdf7;font-weight:900;
  margin-inline-start:12px;
  transform-origin:center; /* تمدد متماثل: «شامل الضريبة» صارت بالجهة الأخرى فالتباعد متساوٍ للجهتين */
  text-shadow:0 1px 0 #000,0 -1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 2px 6px rgba(0,0,0,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.6)}
@keyframes pricepulse{
  0%,100%{transform:scale(1);box-shadow:0 2px 10px rgba(0,0,0,.6)}
  50%{transform:scale(1.03);box-shadow:0 2px 10px rgba(0,0,0,.6),0 0 9px rgba(210,178,240,.35)}
}
@media(prefers-reduced-motion:reduce){.price-now{animation:none}}
/* مقاييس Tajawal الرأسية تزيح الرقم لأعلى داخل المربع النابض فيلتصق بحافته العليا —
   نستثني المربع من الخط الجديد فيعود الرقم متوسّطاً كما كان قبل تركيب الخط */
.price-now,.price-now small{font-family:"Segoe UI",Tahoma,system-ui,sans-serif}

/* ===== بطاقات صفحة الدفع بارزة عن الفيديو — نفس معالجة بوابة العميل المثبتة =====
   فيديو الزيت mix-blend-mode:screen يتسرّب توهّجه عبر أي شفافية ولو ضئيلة،
   فالخلفية صلبة تماماً + رفع البطاقة فوق طبقة الفيديو + تعطيل الطبقة الزجاجية */
.checkout-grid .panel{position:relative;z-index:210;background:rgb(15,17,21)}
.checkout-grid .panel::before{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(min-width:681px){
  .checkout-grid .panel{
    border-color:var(--brand);
    box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(154,106,212,.2)}
}
.old-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.old-line .old-price{text-decoration:line-through;color:var(--muted);font-weight:700;font-size:.85rem}
.plabel{font-size:.62rem;color:var(--muted);font-weight:600}
.disc{color:#fff;background:var(--red);font-weight:800;font-size:.72rem;padding:1px 6px;border-radius:6px}
.tax-note{font-size:.68rem;color:var(--muted);margin-top:3px}
/* «شامل الضريبة» بجانب بطاقة السعر النابضة: نفس تباعد «السعر الحالي» عنها (12px) */
.price .tax-note{margin-top:0;margin-inline-start:12px;align-self:baseline}
.price small{color:var(--muted);font-weight:600;font-size:.76rem}

/* الأزرار */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#221536;border:none;padding:12px 18px;border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;font-family:inherit}
/* تبديل لون/خلفية الزر فوري بلا تدرّج زمني عند التمرير */
.btn,.btn:hover,.btn:active{transition-property:transform,box-shadow}
/* عند التمرير/النقر: يتحول الزر لخلفية البنر الخشبي العلوي كاملةً (بدل الأزرق الافتراضي) */
.btn:hover,.btn:active,
.btn.green:hover,.btn.green:active{
  /* الأصلية أعلى (قوس فوق) + نسخة مقلوبة رأسياً أسفل (قوس تحت) = إطار متناظر */
  background:
    url('/img/banner-wood.png') center top / 100% 50% no-repeat,
    url('/img/banner-wood-flip.png') center bottom / 100% 50% no-repeat;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75);filter:none;
  /* قناع خفيف على الجانبين فقط يذوّب الحواف (بلا تفتيت للقوسين فوق/تحت) */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--brand)}
.btn.green{background:linear-gradient(135deg,#d2b2f0,#8657b8);color:#221536;font-weight:800}
.btn.block{width:100%}
/* تساوي ارتفاع بطاقات الشبكة صراحةً + الزر يلتصق بأسفل كل بطاقة → أزرار «أضف الطلب» بمستوى واحد دائماً */
.grid{align-items:stretch}
.grid>.card{height:100%}
.card .body{justify-content:flex-start}
.card .body>.btn.block{margin-top:auto}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* صفحة المنتج */
/* صفحة المنتج بأسلوب المتاجر الحديثة: عمود واحد متمركز — الصورة أعلى ثم التفاصيل تتدفّق تحتها */
.product-wrap{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto;padding:20px 0 50px}
.product-wrap .gallery{order:1}
.product-wrap #productInfo{order:2}
/* سطر التوفير (أخضر) كما في المتاجر الحديثة */
.save-line{display:inline-block;background:rgba(63,125,78,.18);border:1px solid var(--green);color:#8fe0a3;font-weight:800;font-size:.9rem;padding:4px 12px;border-radius:8px;margin:8px 0 4px}
/* سطر السعر: الحالي بارز + السابق مشطوب + نسبة الخصم — في صف واحد */
.price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:2px}
#productInfo .price-row .price-now{font-size:1.2rem;font-weight:800;color:var(--brand2)}
#productInfo .price-row .old-price{text-decoration:line-through;color:#fff;font-size:.82rem}
#productInfo .price-row .old-price .old-num{color:rgba(255,255,255,.6);font-weight:500}
/* «شامل الضريبة» بجانب السعر في نفس السطر (لا سطر جديد) */
#productInfo .price-row .tax-note{margin-top:0;font-size:.7rem;white-space:nowrap;align-self:center}
.product-wrap-OLD{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;padding:34px 0 60px}
@media(max-width:840px){.product-wrap{grid-template-columns:1fr}.product-wp{grid-template-columns:1fr}}
.video-box{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000}
.video-box iframe{width:100%;height:100%;border:0}
.product-img{width:100%;border-radius:var(--radius);border:1px solid var(--line);margin-top:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.panel h2{margin:0 0 6px}
/* عنوان قسم بنمط احترافي: أيقونة + عنوان، ويتبعه وصف صغير رمادي (مستوحى من ترتيب المتاجر الحديثة) */
.sec-head{display:flex;align-items:center;gap:9px;margin:0 0 3px}
.sec-head .sec-ic{font-size:1.15rem;line-height:1;filter:saturate(1.1)}
.sec-head h2{margin:0}
.sec-sub{color:var(--muted);font-size:.83rem;line-height:1.55;margin:0 0 14px}
label{display:block;font-weight:600;margin:14px 0 6px;font-size:.92rem}
input,select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--soft);color:var(--text);font-family:inherit;font-size:1rem}
input:focus,select:focus{outline:none;border-color:var(--brand)}
/* منع تكبير iOS التلقائي عند الكتابة: أي حقل خطه أقل من 16px يجبر Safari على الزوم.
   نثبّت ١٦px لكل حقول الإدخال على الجوال (بصرياً قريب جداً من الحالي، بلا زوم مزعج) */
@media (max-width:680px){
  input,select,textarea,
  .checkout-grid input,.checkout-grid select,
  #reviewsCard input,#reviewsCard select{font-size:16px}
}
.row{display:flex;gap:10px}
.note{font-size:.85rem;color:var(--muted);margin-top:6px}
/* رسالة تحقّق رقم الجوال اللحظية: صغيرة جداً وحمراء وفورية تحت الحقل */
.phone-err{font-size:.68rem;color:#ff5c5c;font-weight:700;margin-top:5px;line-height:1.4;animation:phoneErrIn .18s ease}
@keyframes phoneErrIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
/* اختيار طريقة الدفع (بطاقة / تمارا) في ملخّص الطلب */
.pm-label{display:block;font-size:.82rem;color:var(--muted);margin:12px 0 6px;font-weight:700}
.pay-method{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.pm-choice{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.15s;background:rgba(0,0,0,.15)}
.pm-choice.sel{border-color:var(--brand2);box-shadow:0 0 0 1px var(--brand2)}
.pm-choice input{accent-color:#3ec1a4;width:16px;height:16px;flex:none}
/* بلا التفاف (nowrap): لو التفّ النص سطرين يتوسّط الكتلة ككل فيبدو السطر الأول
   مكتوباً فوق منتصف الزر بدل توسيطه رأسياً بدقة — بقاؤه سطراً واحداً يضمن التوسيط */
.pm-txt{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
@media(max-width:360px){.pm-txt{font-size:.78rem;gap:4px}}
/* شارة Apple Pay (مطابقة للشعار الرسمي: أبيض بإطار ونص أسود) */
.ap-mark{display:inline-block;background:#fff;color:#000;font-weight:600;padding:1px 10px;border-radius:7px;
  border:1.5px solid #000;font-size:.82rem;line-height:1.5;letter-spacing:.2px;
  font-family:-apple-system,"SF Pro Display","Helvetica Neue","Segoe UI",sans-serif}
/* شعار تمارا — مطابق للهوية التي أرسلها المالك: «tamara» أسود عريض على تدرّج بنفسجي */
.tamara-mark{display:inline-block;color:#000;font-weight:900;padding:2px 11px;border-radius:8px;font-size:.8rem;letter-spacing:.2px;
  background:linear-gradient(115deg,#9b7bf0 0%,#c9a3f0 55%,#e8b489 100%)}
.alert{padding:11px 14px;border-radius:10px;font-weight:600;font-size:.9rem;margin-top:10px}
/* رسائل النجاح بلون ذهبي يطابق الطابع (بدل الأخضر الذي كان يظهر خلف منطقة العنوان) */
.alert.ok{background:rgba(20,60,35,.96);color:#a7f3c9;border:1px solid #22c55e}
/* خطأ بارز وواضح: خلفية صلبة (لا تشفّ خلفية الفيديو) + نص أبيض كبير + اهتزاز لِلَفت الانتباه */
.alert.err{background:#7f1d1d;color:#fff;border:2px solid #ef4444;font-size:1.05rem;font-weight:800;text-align:center;padding:14px 16px;box-shadow:0 4px 18px rgba(239,68,68,.35);animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* صندوق الرمز التجريبي (وضع المحاكاة): أرقام كبيرة واضحة قابلة للنقر للنسخ */
.otp-dev-code{display:block;margin-top:10px;background:#131118;border:2px dashed var(--brand);border-radius:12px;padding:12px 14px;text-align:center;cursor:pointer}
.otp-dev-code small{display:block;color:var(--muted);font-size:.8rem;margin-bottom:4px}
.otp-dev-code b{font-size:1.7rem;letter-spacing:8px;color:var(--brand2);font-variant-numeric:tabular-nums}
/* بطاقة التصنيف بهوية الموقع: الإطار الخشبي نفسه المستخدم في أزرار الموقع (ادفع الآن عند
   التمرير) — البنر الخشبي أعلى + نسخته المقلوبة أسفل = إطار متناظر، ونص أبيض بظل للوضوح */
.alert.tier{
  background:
    url('/img/banner-wood.png') center top / 100% 50% no-repeat,
    url('/img/banner-wood-flip.png') center bottom / 100% 50% no-repeat;
  background-color:#3b2a12;
  color:#fff;font-weight:800;font-size:1rem;text-align:center;
  border:2px solid var(--brand);border-radius:12px;padding:13px 16px;
  text-shadow:0 1px 4px rgba(0,0,0,.85);
}
.alert.tier b{color:#fff}
/* وميض النجاح في منطقة الشريط: صغير بحجم الكتابة، يظهر ثانية واحدة ثم يتلاشى (يُزال من JS) */
.vanish{animation:vanishFade 1s ease forwards}
@keyframes vanishFade{0%{opacity:0;transform:translateY(-5px)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
.flash-mini{display:inline-block;width:auto;margin:0;padding:4px 10px;font-size:.88rem;font-weight:700;box-shadow:none;animation-name:vanishFadeIn}
/* داخل الشريط: تلاشٍ بلا إزاحة عمودية حتى لا يهتز محتوى الشريط */
@keyframes vanishFadeIn{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}
/* شريط «الجوال المؤكَّد» يحل محل بطاقة التحقق بعد النجاح: الرقم + شارة التصنيف بهوية عتم */
.verified-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:rgba(23,25,29,.92);border:1px solid var(--brand);border-radius:12px;padding:12px 16px;position:relative;z-index:210}
.verified-bar .vb-phone{color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:1px}
.verified-bar .vb-phone span{direction:ltr;unicode-bidi:embed}
/* شارة التصنيف (لكل التصنيفات: جديد/فضي/ذهبي): مزيج الهوية —
   تدرّج ذهبي شفاف فوق البنر الخشبي المتناظر فيظهر نقش الخشب عبر الوهج الذهبي */
.etim-badge{display:inline-flex;align-items:center;gap:6px;
  background:
    linear-gradient(135deg, rgba(210,178,240,.55), rgba(134,87,184,.5)),
    url('/img/banner-wood.png') center top / 100% 50% no-repeat,
    url('/img/banner-wood-flip.png') center bottom / 100% 50% no-repeat;
  background-color:#3b2a12;
  color:#fff;font-weight:800;font-size:.95rem;padding:6px 16px;border-radius:999px;
  border:2px solid var(--brand);text-shadow:0 1px 4px rgba(0,0,0,.85);
  filter:drop-shadow(0 1px 6px rgba(154,106,212,.5));white-space:nowrap}
/* الشارة + سطر المزايا (خصم/طلبات) في عمود متمركز داخل الشريط العلوي */
.vb-tier-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:5px}
.vb-perk{font-size:.72rem;font-weight:800;color:var(--brand2);white-space:nowrap;letter-spacing:.2px;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* جملة استرجاع البيانات: صغيرة وخفيفة (لا تزاحم) */
.restore-note{display:block;font-size:.72rem;color:var(--muted);font-weight:600;margin-top:10px}
/* (أُزيلت بطاقة «آخر طلب» من صفحة الدفع — الطلبات في بوابة العميل) */
/* السلة الفارغة: «سلتك فارغة. تسوّق الآن» في صفٍّ واحد وسط البطاقة — نص فقط بلا بطاقة خلفه،
   مرفوع فوق طبقة التمويه وبارز قليلاً */
#cartEmpty{position:relative;z-index:210;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:220px;color:var(--text);font-weight:700;font-size:1.08rem}
#cartEmpty a{font-weight:800;font-size:1.12rem}
.summary{border-top:1px dashed var(--line);margin-top:16px;padding-top:14px}
.summary .line{display:flex;justify-content:space-between;gap:16px;margin:6px 0;color:var(--muted)}
/* اسم المنتج يمكن أن يقصُر/يلتفّ، والعدد×السعر يبقى كاملاً بفجوة واضحة قبله */
.summary .line>span:first-child{min-width:0;overflow-wrap:anywhere}
.summary .line>span:last-child{flex-shrink:0}
.summary .line.total{color:var(--text);font-weight:800;font-size:1.2rem}
/* سطور المنتجات في ملخّص صفحة الدفع (#coItems): فجوة واضحة بين الاسم والعدد×السعر */
#coItems .line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:8px 0;color:var(--text)}
#coItems .line>span:first-child{min-width:0;overflow-wrap:anywhere;font-weight:600}
#coItems .line>span:last-child{flex-shrink:0;color:var(--brand2);font-weight:700}

/* الكود/التتبع */
/* رمز التتبع بالإطار الخشبي المميز (هوية عتم — كبطاقة التصنيف وأزرار الموقع):
   البنر الخشبي أعلى + نسخته المقلوبة أسفل = إطار متناظر، نص أبيض بظل، مرفوع فوق التمويه */
.code-pill{display:inline-block;
  background:
    url('/img/banner-wood.png') center top / 100% 50% no-repeat,
    url('/img/banner-wood-flip.png') center bottom / 100% 50% no-repeat;
  background-color:#3b2a12;
  border:2px solid var(--brand);color:#fff;font-weight:800;letter-spacing:4px;
  padding:10px 22px;border-radius:12px;font-size:1.6rem;position:relative;z-index:210;
  text-shadow:0 1px 4px rgba(0,0,0,.85);box-shadow:0 2px 14px rgba(154,106,212,.25)}
.steps{display:flex;justify-content:space-between;margin:30px 0;position:relative}
.steps::before{content:"";position:absolute;top:18px;inset-inline:8%;height:3px;background:var(--line)}
.step{position:relative;z-index:2;text-align:center;flex:1}
.step .dot{width:38px;height:38px;border-radius:50%;background:var(--soft);border:2px solid var(--line);display:grid;place-items:center;margin:0 auto 8px;font-weight:700}
.step.done .dot{background:var(--green);border-color:var(--green)}
.step.active .dot{background:var(--brand);border-color:var(--brand)}
.step small{color:var(--muted);font-size:.82rem}
.step.done small,.step.active small{color:var(--text)}

/* الجداول */
table{width:100%;border-collapse:collapse;margin-top:14px}
th,td{text-align:right;padding:11px 12px;border-bottom:1px solid var(--line);font-size:.92rem}
th{color:var(--muted);font-weight:700}
.tag{padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.tag.pending{background:rgba(245,158,11,.15);color:#fcd34d}
.tag.confirmed{background:rgba(108,92,231,.18);color:var(--brand2)}
.tag.shipped{background:rgba(59,130,246,.15);color:#93c5fd}
.tag.delivered{background:rgba(34,197,94,.15);color:#86efac}
.tag.cancelled{background:rgba(239,68,68,.15);color:#fca5a5}

/* بطاقات إحصاءات */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
@media(max-width:640px){.stats{grid-template-columns:1fr}}
.stat{background:var(--card);border:1px solid var(--brand);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:0 2px 14px rgba(154,106,212,.18)}
/* نصوص البطاقة divs — تُرفع فوق طبقة التمويه الزجاجية (::before z-index:0) وإلا ظهرت مموّهة */
.stat .num,.stat .lbl{position:relative;z-index:210}
.stat .num{font-size:1.3rem;font-weight:800;color:var(--brand2);text-shadow:0 1px 5px rgba(154,106,212,.3)}
.stat .lbl{color:#fff;font-weight:600;font-size:.74rem;margin-top:2px}

/* رسالة SMS معروضة */
.sms-bubble{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:10px 0;white-space:pre-line;font-size:.92rem;position:relative;z-index:210}
.sms-bubble .meta{color:var(--muted);font-size:.76rem;margin-top:8px;display:flex;gap:10px;align-items:center}

footer{border-top:1px solid var(--line);padding:26px 18px;text-align:center;color:var(--muted);font-size:.88rem}
.footer-nav{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.footer-nav a{color:var(--brand2);font-weight:700;font-size:.95rem}
.footer-nav a:hover{color:var(--brand)}
.footer-nav span{color:var(--line)}
.center{text-align:center}
.mt{margin-top:18px}

/* ===== الترويسة الموسّعة: بحث + سلة + حساب ===== */
.nav-search{flex:1;max-width:420px;margin:0 22px;position:relative}
.nav-search input{width:100%;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--soft);color:var(--text)}
.nav-search button{position:absolute;inset-inline-start:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.05rem}
.nav-actions{display:flex;align-items:center;gap:16px}
.icon-btn{position:relative;color:var(--brand2);cursor:pointer;background:none;border:none;display:inline-flex;align-items:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.icon-btn:hover{color:#fff}
.icon-btn svg{display:block}
.cart-count{position:absolute;top:-7px;inset-inline-end:-9px;background:var(--brand);color:#fff;font-size:.68rem;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 4px}
@media(max-width:760px){.nav-search{margin:0 10px}.brand span:not(.logo){display:none}}

/* ===== شريط الأقسام ===== */
.cats-bar{display:flex;gap:10px;overflow-x:auto;padding:14px 0;scrollbar-width:thin}
.cat-chip{display:flex;align-items:center;gap:7px;white-space:nowrap;background:var(--card);border:1px solid var(--line);padding:9px 16px;border-radius:999px;font-weight:700;font-size:.92rem;transition:.15s}
.cat-chip:hover,.cat-chip.active{border-color:var(--brand);color:var(--brand2)}

/* ===== مشغّل الفيديو الداخلي (inline) + العائم (mini player) ===== */
.video-hero{position:relative;border-radius:var(--radius);overflow:hidden;margin:18px 0;border:1px solid var(--line);aspect-ratio:21/9;background:#000}
.js-video{position:relative}
.vframe-holder{position:absolute;inset:0;z-index:1}
.vframe-holder iframe{width:100%;height:100%;border:0;display:block}
.vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.js-video.playing .vposter,.js-video.playing .play-overlay,.js-video.playing .vbadge{display:none}
.play-overlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;cursor:pointer;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55))}
.play-overlay .pbtn{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:1.8rem;color:#111;transition:.15s}
.play-overlay:hover .pbtn{transform:scale(1.08)}
.play-overlay .ptext{position:absolute;bottom:18px;inset-inline-start:22px;color:#fff;font-weight:800;font-size:1.3rem;text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* المشغّل العائم عند السكرول */
.pip-close{display:none;position:absolute;top:6px;inset-inline-end:6px;z-index:5;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:none;cursor:pointer;font-size:1rem;line-height:1}
.js-video.pip{position:fixed !important;bottom:20px;inset-inline-start:20px;width:340px;max-width:46vw;aspect-ratio:16/9;height:auto;z-index:260;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.6);margin:0}
.js-video.pip .pip-close{display:grid;place-items:center}
@media(max-width:560px){.js-video.pip{width:60vw;inset-inline-start:10px;bottom:10px}}

/* ===== معرض صور المنتج ===== */
.gallery .main{aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#0c0e12;position:relative}
/* شارة الخصم على صورة المنتج (بدل كتابتها بجانب السعر) */
.gallery .main .gallery-off{position:absolute;top:10px;inset-inline-start:10px;z-index:6;background:var(--red);color:#fff;font-weight:800;font-size:1.05rem;padding:5px 13px;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.gallery .main img{width:100%;height:100%;object-fit:cover}
/* تكبير صورة المنتج (lightbox) — نقر للتكبير + دعم اللمس (pinch) على الجوال */
.zoom-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;overflow:auto;cursor:zoom-out;-webkit-overflow-scrolling:touch;touch-action:pinch-zoom;overscroll-behavior:contain;animation:zfade .2s ease}
@keyframes zfade{from{opacity:0}to{opacity:1}}
.zoom-overlay .zoom-img{max-width:96vw;max-height:96vh;object-fit:contain;transition:transform .3s ease;cursor:zoom-in;touch-action:pinch-zoom;user-select:none;-webkit-user-drag:none}
.zoom-overlay .zoom-img.zoomed{transform:scale(2.4);cursor:zoom-out}
.zoom-overlay .zoom-close{position:fixed;top:14px;inset-inline-end:16px;z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:1.2rem;cursor:pointer;display:grid;place-items:center}
.gallery .vbadge{position:absolute;bottom:12px;inset-inline-start:12px;background:rgba(0,0,0,.6);color:#fff;padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:700;display:flex;gap:6px;align-items:center}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:2px solid var(--line);cursor:pointer}
.thumbs img.active{border-color:var(--brand)}

/* ===== خيارات المنتج (مقاس/لون) ===== */
.opt-group{margin-top:14px}
.opt-group .opt-name{font-weight:700;margin-bottom:8px}
.opt-values{display:flex;gap:9px;flex-wrap:wrap}
.opt-val{padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--soft);cursor:pointer;font-weight:600;font-size:.92rem;user-select:none}
.opt-val.sel{border-color:var(--brand);background:rgba(108,92,231,.18);color:var(--brand2)}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qty-stepper button{background:var(--soft);border:none;color:var(--text);width:42px;height:42px;font-size:1.2rem;cursor:pointer}
.qty-stepper input{width:54px;text-align:center;border:none;border-inline:1px solid var(--line);background:transparent;color:var(--text)}

/* ===== التقييمات ===== */
.stars{color:#f59e0b;letter-spacing:1px}
.stars .empty{color:var(--line)}
.review{border-top:1px solid var(--line);padding:14px 0}
/* شريط تقييمات متحرّك (كاروسيل) بدل السجل */
.reviews-carousel{overflow:hidden;width:100%;min-height:84px;border-top:1px solid var(--line);margin-top:6px}
.reviews-track{display:flex;direction:ltr;transition:transform .45s cubic-bezier(.5,0,.2,1);will-change:transform}
.reviews-track .slide{flex:0 0 100%;min-width:100%;box-sizing:border-box;direction:rtl;text-align:right;border-top:none;padding:14px 4px;display:flex;flex-direction:column;justify-content:center}
.review .who{font-weight:700}

/* ===== السلة ===== */
/* عنصر السلة: كل شيء في صف واحد — الاسم (يمين، يملأ) ثم العدّاد فالسعر فزر الحذف (يسار) */
.cart-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.cart-item .ci-name{flex:1;min-width:0;font-weight:700;font-size:.9rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item .ci-opts{color:var(--muted);font-size:.76rem;font-weight:500}
.cart-item .qty-stepper{flex:0 0 auto}
.cart-item .ci-price{flex:0 0 auto;color:var(--brand2);font-weight:800;font-size:.95rem;white-space:nowrap}
.cart-item .rm{flex:0 0 auto;color:var(--red);cursor:pointer;background:none;border:none;font-size:1rem;line-height:1;padding:0 2px}
.checkout-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:24px;padding:24px 0 60px;align-items:start}
@media(max-width:820px){.checkout-grid{grid-template-columns:1fr}}

/* ===== طرق الدفع والشحن ===== */
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pay-opt,.ship-opt{border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;display:flex;align-items:center;gap:10px;background:var(--soft);transition:.15s}
/* الخيار المختار: خلفية ذهبية صلبة بنص داكن + مرفوع فوق فيديو الزيت ليبرز نقياً */
/* الخيار المختار: نفس تدرّج زر «متابعة للدفع» بالضبط + مرفوع فوق الفيديو */
.pay-opt.sel,.ship-opt.sel{position:relative;z-index:210;border-color:var(--brand2);background:linear-gradient(135deg,#d2b2f0,#8657b8);color:#221536;font-weight:800;box-shadow:0 4px 16px rgba(134,87,184,.35)}
.pay-opt.sel b,.ship-opt.sel b,.pay-opt.sel .muted,.ship-opt.sel .muted{color:#221536}
.pay-opt .pm-logo{font-weight:800;font-size:.78rem;background:#fff;color:#111;border-radius:6px;padding:3px 7px}
.ship-opt{justify-content:space-between;margin-bottom:10px}
/* بطاقة صغيرة «إضافة عنوان جديد» أسفل بطاقات العناوين */
/* كل بطاقات العناوين وبطاقة الإضافة مرفوعة فوق فيديو الزيت بخلفية صلبة — واضحة غير مغسولة */
#savedAddrPick .addr-card,#savedAddrPick .addr-add{position:relative;z-index:210}
/* بطاقة العنوان بأسلوب المتاجر: سطر واحد (رمز وطني ملوّن + الدولة/المدينة/العنوان)
   + زر اختيار دائري يمين + أيقونتا تعديل/حذف يسار — بهوية عِتِم (داكن + ذهبي) */
#savedAddrPick .addr-card{display:flex;align-items:center;gap:12px;background:#14161b;
  border:1px solid var(--line);border-radius:12px;padding:11px 13px !important;margin-bottom:8px;cursor:pointer;transition:.15s}
#savedAddrPick .addr-card:hover{border-color:var(--brand)}
#savedAddrPick .addr-card.sel{border-color:var(--brand2);box-shadow:0 0 0 1px var(--brand2)}
.addr-radio{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--brand);position:relative}
.addr-card.sel .addr-radio{border-color:var(--brand2)}
.addr-card.sel .addr-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brand2)}
.addr-text{flex:1;min-width:0;font-size:.9rem;line-height:1.7;color:#efeaf6;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.addr-nat{color:var(--brand2);font-weight:700;white-space:nowrap}
.addr-actions{flex:none;display:flex;gap:4px}
.addr-ic{background:transparent;border:none;cursor:pointer;font-size:1rem;padding:4px 5px;border-radius:8px;line-height:1;transition:.15s}
.addr-ic:hover{background:rgba(255,255,255,.09)}
.addr-ic.del:hover{background:rgba(224,90,75,.2)}
.addr-add{border:2px dashed var(--brand2);border-radius:12px;padding:14px;text-align:center;color:#dfc9f5;font-weight:800;cursor:pointer;background:#181521;transition:.15s;font-size:1rem}
.addr-add:hover{background:rgba(154,106,212,.22);border-style:solid}

/* ===== أزرار التبويب/الحساب ===== */
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tab{padding:10px 16px;cursor:pointer;color:var(--muted);font-weight:700;border-bottom:2px solid transparent}
.tab.active{color:var(--text);border-color:var(--brand)}
.fav-btn{background:none;border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;color:var(--text)}
.fav-btn.on{color:var(--red);border-color:var(--red)}
/* قلب المفضلة كأيقونة فقط (بلا نص) في صفحة المنتج */
.fav-btn.icon{border:none;background:none;padding:0 2px;font-size:1.55rem;line-height:1;color:var(--muted);flex:0 0 auto}
.fav-btn.icon:hover{color:var(--red)}
.fav-btn.icon.on{color:var(--red);border:none}
/* رأس البطاقة: اسم المنتج (يمين) + قلب المفضلة (يسار) بنفس السطر */
.pi-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pi-head h2{flex:1;min-width:0}
/* «ستوفّر» بجانب القلب في السطر الأول (يوفّر مساحة أسفل ويقلّل ارتفاع البطاقة) */
.pi-head-side{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* «ستوفّر» الخضراء على حدود النص تماماً — بلا هوامش داخلية زائدة */
#productInfo .pi-head-side .save-line{margin:0;align-self:center;width:auto;font-size:.7rem;padding:1px 4px;border-radius:6px;white-space:nowrap}
/* «الكمية» بنفس سطر العدّاد */
.qty-row{display:flex;align-items:center;gap:12px}
.qty-row .opt-name{margin-bottom:0}
.muted{color:var(--muted)}
.flex{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(50%);background:var(--green);color:#062b14;font-weight:800;padding:12px 22px;border-radius:12px;z-index:300;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1}

/* ===== بوابة الدفع الشكلية ===== */
.pay-panel{position:relative}
.pay-secure{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,rgba(34,197,94,.14),rgba(108,92,231,.10));border:1px solid rgba(34,197,94,.3);border-radius:12px;padding:10px 14px}
.pay-secure .lock{font-size:1.1rem}
.pay-secure .ssl{font-size:.78rem;color:#86efac;font-weight:700}
.pay-trust{text-align:center;color:var(--muted);font-size:.8rem;margin-top:12px}
#cardForm{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}

/* شاشة معالجة الدفع */
.pay-overlay{position:fixed;inset:0;background:rgba(7,9,12,.86);backdrop-filter:blur(4px);display:none;place-items:center;z-index:400;padding:20px}
.pay-overlay.open{display:grid}
.pay-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 26px;width:min(420px,100%);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.pay-card-head{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:var(--brand2);border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.spinner{width:54px;height:54px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--brand);margin:6px auto 18px;animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#payStageText{font-weight:700;font-size:1rem}
.pay-amount{margin-top:10px;font-size:1.6rem;font-weight:800;color:var(--brand2)}
.pay-check{width:70px;height:70px;border-radius:50%;background:var(--green);color:#062b14;font-size:2.3rem;font-weight:900;display:grid;place-items:center;margin:6px auto 16px;animation:pop .4s ease}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.pay-success{font-size:1.2rem;font-weight:800;color:#86efac}

/* ===== رمز التحقق OTP ===== */
#otpBox{margin-top:8px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:6px}

/* ===== شريط خطوات الطلب (معلومات → دفع → تأكيد) ===== */
.steps-bar{display:flex;gap:8px;margin-bottom:4px}
.steps-bar .sb{flex:1;text-align:center;padding:10px 6px;border-radius:10px;background:var(--soft);border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:.82rem}
.steps-bar .sb.active{background:rgba(108,92,231,.15);border-color:var(--brand);color:var(--brand2)}
.steps-bar .sb.done{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4);color:#86efac}

.tier-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:800;margin-inline-start:4px;vertical-align:middle}
.track-link{color:var(--brand2);text-decoration:underline;font-weight:700;word-break:break-all}
.track-link:hover{color:#fff}
.loyal-row{margin:12px 0}
/* نص «أنجزت X من Y — باقٍ Z»: أوضح من الرمادي الباهت، وبلون التصنيف نفسه لتمييزه فوراً
   (CSS قياسي بلا حيل خاصة بمتصفح — يعرض متطابقاً في كل المتصفحات) */
.loyal-status{color:var(--bar-glow,var(--text));font-weight:700;font-size:.72rem;white-space:nowrap}
/* صف البادج + الجملة: البادج يبقى بحجمه والجملة تأخذ بقيتها في سطر واحد */
.loyal-row .flex.between{flex-wrap:nowrap;gap:10px}
.loyal-row .flex.between>span:first-child{flex:0 0 auto}
@media(max-width:680px){ .loyal-status{font-size:.64rem} }
/* الخط الزمني لعدد الطلبات (برنامج الولاء): أثخن قليلاً + تدرّج لمعان داخلي يوضّح
   خطّي الفضي والذهبي في كل المتصفحات (لا حيل خاصة بمتصفح — CSS قياسي فقط) */
.progress{height:4px;border-radius:999px;background:var(--soft);border:1px solid var(--line);overflow:visible}
.progress .bar{height:100%;border-radius:999px;transition:width .4s;position:relative;overflow:hidden;
  box-shadow:0 0 10px 1px var(--bar-glow,transparent)}
.progress .bar::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%)}
@media print{ header.nav,footer,.btn{display:none!important} body{background:#fff;color:#000} .panel{border:1px solid #ccc} }

/* ===== بطاقات الطلبات في لوحة التاجر ===== */
.order-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.oc-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px}
.oc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.oc-field{display:flex;flex-direction:column;gap:3px}
.oc-field .lbl{color:var(--muted);font-size:.8rem}
.oc-field .val{font-weight:700;font-size:.95rem}
.oc-items{padding:12px 0;border-bottom:1px dashed var(--line)}
.oc-items .lbl{color:var(--muted);font-size:.82rem}
.oi-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.oi-row img{width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.oi-info{flex:1;display:flex;flex-direction:column}
.oi-info b{font-size:.92rem}
.oi-info .muted{font-size:.78rem}
.oi-qty{color:var(--muted);font-weight:700}
.oi-price{font-weight:800;color:var(--brand2);min-width:90px;text-align:start}
.oc-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-top:12px;font-size:.85rem}
.oc-total{font-weight:800;font-size:1.1rem;color:var(--green)}
@media(max-width:680px){ .oc-grid{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .oc-grid{grid-template-columns:1fr} }
/* زوج السعر: «الحالي» و«السابق قبل الخصم» جنباً إلى جنب على كل المقاسات (حتى الجوال) */
.oc-pricepair{display:flex;gap:12px}
.oc-pricepair .oc-field{flex:1;min-width:0}

/* ========================================================
   التوافق مع الجوال / iOS (آيفون وآيباد)
   عرض الصفحة يختلف عن الكمبيوتر تلقائياً حسب حجم الشاشة
   ======================================================== */
html{-webkit-text-size-adjust:100%}            /* منع تكبير النص تلقائياً في iOS */
body{-webkit-tap-highlight-color:transparent}
.btn,.opt-val,.cat-chip,.pay-opt,.ship-opt{ -webkit-user-select:none; touch-action:manipulation }
.cats-bar{-webkit-overflow-scrolling:touch}    /* تمرير سلس للأقسام على iOS */
/* مساحة آمنة لحواف الآيفون (الـ notch) */
header.nav{padding-top:env(safe-area-inset-top)}
footer{padding-bottom:calc(26px + env(safe-area-inset-bottom))}

/* أجهزة لوحية (آيباد) — عمودان أو ثلاثة */
@media (max-width:1024px){
  .container{padding:0 14px}
  .grid{grid-template-columns:repeat(3,1fr);gap:16px}
}
/* الجوال (آيفون) — عمودان وعرض مختلف */
@media (max-width:680px){
  .nav-inner{padding:10px 14px}
  .brand{font-size:1.05rem}
  .nav-actions{gap:13px}
  .cats-bar{padding:10px 0;gap:8px}
  .cat-chip{padding:8px 13px;font-size:.85rem}

  .video-hero{aspect-ratio:16/9;margin:12px 0}        /* الفيديو أطول قليلاً على الجوال */
  .play-overlay .ptext{font-size:1rem;inset-inline-start:14px;bottom:12px}
  .play-overlay .pbtn{width:60px;height:60px;font-size:1.5rem}

  .hero{padding:22px 0 4px}
  .hero h1{font-size:1.5rem}
  .hero p{font-size:.95rem}

  .grid{grid-template-columns:repeat(2,1fr);gap:11px;padding:4mm 0 50px}
  /* تصغير ارتفاع البطاقة ~٢٪ على الجوال: حشوة رأسية وفجوة داخلية أقل قليلاً */
  .card .body{padding:9px 11px;gap:5px}
  .card h3{font-size:.84rem;line-height:1.2;min-height:2.4em}
  /* تصغير النجوم وجملة عدّاد الطلبات على الجوال */
  .card .stars{font-size:.62rem;letter-spacing:-.5px}
  .card .card-rate{font-size:.66rem;gap:4px}
  .card .card-rate .muted{font-size:.6rem}
  .card .order-count{font-size:.54rem;padding:0}
  .card .desc{display:none}                            /* إخفاء الوصف على الجوال لواجهة أنظف */
  .price{font-size:1.05rem}
  .card .btn{padding:9px 10px;font-size:.85rem}

  /* صفحة المنتج: عمود واحد */
  .product-wrap{grid-template-columns:1fr;gap:18px;padding:18px 0 40px}
  .gallery .main{aspect-ratio:3/2}
  .panel{padding:16px}

  /* السلة والدفع: عمود واحد + ملخص أسفل */
  .checkout-grid{grid-template-columns:1fr;gap:16px}
  .pay-grid{grid-template-columns:repeat(3,1fr)}
  .cart-item img{width:62px;height:62px}

  table{display:block;overflow-x:auto;white-space:nowrap}  /* جداول قابلة للتمرير أفقياً */

  /* المشغّل العائم أصغر ومناسب للجوال */
  .js-video.pip{width:64vw;inset-inline-start:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
}
/* شاشات صغيرة جداً */
@media (max-width:330px){ .grid{grid-template-columns:1fr} }

/* ============================================================
   إصلاحات الجوال v2: ترويسة بترتيب مخصص + بنر بقوس كامل + إلغاء
   توسعة المسرح (سبب اقتصاص البطاقات) + صور كاملة + فيديو واحد
   ============================================================ */
@media (max-width:680px){
  /* إلغاء توسعة مسرح الخلفية 114% — كانت تقصّ البطاقات يميناً ويساراً */
  .frame-stage{top:0;bottom:0;left:0;right:0}

  /* الترويسة: الشعار مُنزَّل عن حافة الشاشة (مسافة علوية) وحده على البنر، والسلة/الدخول أسفله */
  .nav-inner{padding:24px 12px 12px;gap:2px}
  .brand{margin:0}
  .brand-logo{height:64px;width:auto;max-width:72vw;margin:0}
  .nav-actions{margin-top:20px;padding:0 2px;max-width:none}
  .nav-pill{padding:7px 13px;font-size:.8rem}

  /* البنر يغطّي منطقة الشعار ويمتدّ لأسفل قليلاً — والسلة/الدخول تظهر أسفله */
  header.nav::before{inset:0 0 auto 0;height:118px}

  /* بنر مرفوع + فراغ أسود علوي أقل 50% = منتجات أكبر */
  /* المنتجات ترتفع للأعلى: المسافة العلوية = ارتفاع الرأس فقط، والفجوة عن البنر = 4mm (حشوة الشبكة) */
  :root{--win-top:calc(env(safe-area-inset-top) + 152px)}

  /* فيديو الزيت: يغطي كامل الشاشة كخلفية حية أصيلة — بلا حواف ظاهرة ولا اهتزاز
     (object-fit:cover يملأ ويقصّ الزوائد، وإلغاء الأقنعة والتأرجح يخفي أي حدود) */
  .oil-extra{display:none}
  .oil-pour{top:0;left:0;width:100vw;height:100vh;max-width:none;
    transform:none;object-fit:cover;object-position:center;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 92%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 92%,transparent 100%);
    animation:oilfade 2s ease-out both;opacity:.26}

  /* صور المنتجات كاملة داخل إطار مربع — لا اقتصاص */
  /* نسبة الإطار = نسبة الصورة (3:2) فتملأها بلا هامش أعلى/أسفل */
  .card .media{aspect-ratio:3/2}
  .card .media img{object-fit:cover;background:transparent}
}

/* إخفاء زر التشغيل المثلث الذي يعرضه آيفون/سفاري على الفيديو الموقوف —
   فيديو الزيت خلفية جمالية ولا يجب أن يبدو للعميل أنه «فيديو» */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.oil-pour::-webkit-media-controls,.oil-extra::-webkit-media-controls{display:none!important}

/* ============================================================
   بطاقات المنتجات المختصرة (أسلوب أمازون): كل الكتابات بيضاء،
   سطر سعر واحد مع «سابقاً»، وشارة الخصم على الصورة مضاعفة الحجم
   ============================================================ */
.card .body,.card h3,.card .card-rate,.card .card-rate .muted{color:#fff}
.card .order-count{color:#fff}
.card .price-now,.card .price-now small{color:#fff}
/* سطر السعر عمودياً بارتفاع موحّد: «السابق» فوق والسعر الحالي تحت — يمنع اختلاف الالتفاف بين البطاقات */
.card .price-line{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:2.7em}
.card .price-line .price-now{margin-inline-start:0}
.card .was{color:#fff;opacity:.7;font-size:.82rem;font-weight:600;white-space:nowrap}
.card .was s{text-decoration:line-through} /* الشطب على الرقم فقط لا على كلمة «سابقاً» */
/* شارة الخصم على الصورة: ضعف الحجم لتغني عن أي نص خصم داخل البطاقة */
.card .badge-off{font-size:1.4rem;padding:6px 16px;font-weight:800}

@media (max-width:680px){
  /* صفحة المنتج على الجوال: عمودي كالسابق — الصورة فوق ثم بطاقة المواصفات/السعر/الطلب
     تحتها، مع تصغيرها قليلاً لبطاقة أقصر */
  .product-wrap{display:flex;flex-direction:column;gap:12px}
  .gallery{order:1}
  #productInfo{order:2;padding:14px}
  #productInfo h2{font-size:1.15rem;margin:4px 0}
  #productInfo .note{font-size:.85rem}
  .gallery .thumbs img{width:56px;height:56px}
}

/* ============================================================
   توهّج زيتي حي (بديل فوري للفيديو): يعمل بالتنسيقات فلا تحجبه قيود
   التشغيل التلقائي على الجوال — يظهر لحظة الفتح ويختفي حين يعمل الفيديو
   ============================================================ */
.oil-glow{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 44% at 50% 8%, rgba(210,178,240,.5), transparent 72%),
    radial-gradient(46% 40% at 18% 60%, rgba(154,106,212,.3), transparent 72%),
    radial-gradient(52% 44% at 82% 82%, rgba(134,87,184,.26), transparent 72%);
  animation:glowPulse 5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.5;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(12px) scale(1.03)}}

/* ============================================================
   توحيد خلفية الحاسوب مع الجوال + إبراز صور المنتجات + شارة أصغر
   ============================================================ */
/* 1) إزالة «المثلثات الثلاثة»: فيديو واحد يغطي الشاشة كاملة بلا أقنعة إسفينية ولا تأرجح.
   أداء: بلا مزج (mix-blend) وبلا فلاتر — كانا يثقلان معالج الرسم على شاشات اللابتوب الكبيرة */
.oil-extra{display:none}
.oil-pour{top:0;left:0;width:100vw;height:100vh;max-width:none;transform:none;
  object-fit:cover;object-position:center;
  mix-blend-mode:normal;filter:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-over;mask-composite:add;
  animation:oilfade 2s ease-out both;opacity:.22}
/* 2) إبراز صور المنتجات 75%: الصورة تعلو طبقة الزيت، وتسمح بمرور 25% فقط من الامتزاج خلفها */
.card .media{position:relative;z-index:210}
.card .media img{opacity:.75} /* امتزاج الزيت مع صور العبوات 25% */
/* 3) شارة الخصم على الصورة أصغر بـ30% (كانت 1.4rem) */
.card .badge-off{font-size:1rem;padding:4px 11px}

/* صورة صفحة المنتج (المعرض): فوق طبقة الفيديو وتمرّر 25% امتزاج فقط — كبطاقات الرئيسية */
.gallery .main{z-index:210}
.gallery .main img{opacity:.75}
.gallery .thumbs{position:relative;z-index:210}

/* عند عمل فيديو الخلفية: التوهّج يخفت 40% ويبقى نابضاً — وإن توقف الفيديو عاد كاملاً */
.oil-glow.dim{animation-name:glowPulseDim}
@keyframes glowPulseDim{0%,100%{opacity:.3;transform:translateY(0) scale(1)}50%{opacity:.6;transform:translateY(12px) scale(1.03)}}

/* راحة العين: حضور أخف لفيديو الخلفية (15% بدل 22%) في كل الصفحات */
.oil-pour{opacity:.15}
.oil-pour.oil-dim{opacity:.13}

/* تذييل: شعارات وسائل الدفع (حبوب بيضاء كالمتاجر الكبرى) + بيانات المؤسسة */
.pay-badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:14px 0 10px;direction:ltr}
.pay-badges .pb{display:inline-flex;align-items:center;justify-content:center;background:#f4f4f5;border-radius:10px;padding:7px 14px;min-width:58px;height:34px;font-size:.85rem;font-weight:800;line-height:1}
.pay-badges .mc-c{display:inline-block;width:18px;height:18px;border-radius:50%;opacity:.92}
.biz-info{color:var(--text);font-size:.85rem;font-weight:600;margin:4px 0 8px}

/* ============================================================
   تهذيب احترافي: صفحة المنتج أصغر خطاً · تأكيد الطلب أهدأ · إدارة مضغوطة
   ============================================================ */
/* ١) صفحة المنتج: خط أنعم وأصغر */
#productInfo{font-size:.9rem}
#productInfo h2{font-size:1.1rem}
#productInfo .note{font-size:.84rem;line-height:1.85}
#productInfo .price-now{font-size:1.2rem}
#productInfo .plabel,#productInfo .tax-note{font-size:.78rem}
#productInfo .old-line{font-size:.8rem}
.opt-name{font-size:.85rem}
#reviewsCard h2{font-size:1.05rem}

/* ٢) رسالة تأكيد الطلب: خط أهدأ وأصغر بلا ضخامة */
.oc-page .hero{padding:20px 0 8px}
.oc-page .hero h1{font-size:1.3rem;font-weight:700;letter-spacing:.2px}
.oc-page .hero p{font-size:.88rem}
.oc-page .code-pill{font-size:1.15rem;padding:6px 15px;letter-spacing:2px}
.oc-page .panel{font-size:.9rem}
.oc-page h2{font-size:1.05rem}
/* بطاقة التأكيد: عمودان جنباً لجنب لتقليل الارتفاع — الكود+الأزرار (يمين)، الملخّص (يسار) */
.oc-done{padding:14px 16px}
/* يمين: العنوان كتابةً وتحته ٣ مربعات صغيرة بارتفاع موحّد (نفس مربع الرمز) · يسار: ملخّص الفاتورة */
.oc-done-grid{display:flex;gap:11px;flex-wrap:wrap;align-items:center;justify-content:space-between}
/* جناحان متساويان (flex:1) حول عمود الرمز → الرمز في منتصف الصفحة تماماً (تحت الشعار) */
.oc-side{flex:1 1 0;min-width:230px;display:flex;align-items:center;gap:10px}
.oc-side-act{justify-content:space-between}  /* متابعة يميناً · تتبّع ملاصق للرمز (يساراً) */
.oc-side-sum{justify-content:flex-end}    /* RTL: أقصى اليسار */
/* الزران متوازيان: نفس الارتفاع ونفس المستوى (لا أعلى ولا أنزل) */
.oc-side-act .oc-cell{min-height:38px;padding:4px 12px;font-size:.9rem}
/* عمود الرمز: الكتابة الصغيرة فوق مربع الرمز فقط */
.oc-codecol{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px}
/* إزاحة خفيفة نحو يسار المشاهد + إنزال صف الأزرار ليتوسّط ارتفاع مربع الرمز
   (سطر العنوان فوق المربع يرفع مركز العمود، فننزّل الأزرار ~11px لتحاذي المربع) — كمبيوتر فقط */
@media(min-width:681px){
  .oc-codecol{transform:translateX(-12px)}
  .oc-side-act{position:relative;top:11px}
}
.oc-code-label{font-size:.72rem;color:var(--muted);font-weight:700;white-space:nowrap}
/* الجوال: تكديس متمركز */
@media(max-width:680px){
  .oc-done-grid{flex-direction:column;align-items:center}
  .oc-side{width:100%;min-width:0;justify-content:center}
}
.oc-cell{flex:0 1 auto;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:6px 16px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(0,0,0,.18);font-size:.95rem}
a.oc-cell{text-decoration:none;font-weight:800;cursor:pointer;transition:.15s}
/* تتبّع بلون خشبي مطابق لمربع الرمز (نفس الحجم والارتفاع بلا تغيير) */
.oc-cell.act-track{
  background:
    url('/img/banner-wood.png') center top / 100% 50% no-repeat,
    url('/img/banner-wood-flip.png') center bottom / 100% 50% no-repeat;
  background-color:#3b2a12;color:#fff;border:1px solid var(--brand);
  min-height:38px;padding:4px 12px;font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.oc-cell.act-track:hover{filter:brightness(1.12)}
/* متابعة التسوق أعرض قليلاً (بنفس الارتفاع) */
.oc-cell.act-shop{color:var(--brand2);min-height:38px;padding:4px 30px}
.oc-cell.act-shop:hover{border-color:var(--brand);background:rgba(154,106,212,.12)}
.oc-cell-code{padding:4px 8px}
.oc-cell-code .code-pill{font-size:.95rem;padding:4px 9px;letter-spacing:1px}
.oc-cell-code .oc-copy-ic{width:30px;height:30px;font-size:.95rem}
/* الملخّص كالفاتورة: مربع بحد وخلفية، بعرض محدود فتقترب الكتابة من الرقم */
.oc-done .oc-summary{flex:0 1 340px;text-align:right;margin:0;
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:rgba(0,0,0,.22)}
.oc-done .oc-summary .line{gap:14px;margin:5px 0}
.oc-done .oc-summary .line span:first-child{color:var(--muted)}
.oc-done .oc-summary .line.total{border-top:1px dashed var(--line);padding-top:8px;margin-top:8px}
/* أيقونة نسخ الرمز (بلا كلمات) بجانب الرمز */
.oc-copy-ic{background:transparent;border:1px solid var(--line);color:var(--brand2);cursor:pointer;
  font-size:1.05rem;width:38px;height:38px;border-radius:10px;display:inline-grid;place-items:center;transition:.15s}
.oc-copy-ic:hover{background:rgba(154,106,212,.16);border-color:var(--brand)}
/* (أُلغي الفاصل الجانبي — التخطيط صار عموداً: الرمز فوق متوسّطاً والملخّص أسفله بفاصل علوي) */

/* ٣) لوحة الإدارة: كثافة مضغوطة احترافية */
.admin-compact{font-size:.85rem}
.admin-compact .hero h1{font-size:1.35rem}
.admin-compact .hero p{font-size:.85rem}
.admin-compact .panel,.admin-compact .order-card{padding:12px 14px}
.admin-compact h2{font-size:1rem;margin:0 0 8px}
.admin-compact .stat{padding:10px 8px}
.admin-compact .stat .num{font-size:1.25rem}
.admin-compact .stat .lbl{font-size:.72rem}
.admin-compact label,.admin-compact .lbl{font-size:.76rem}
.admin-compact input,.admin-compact select,.admin-compact textarea{padding:7px 9px;font-size:.83rem}
.admin-compact .btn{padding:7px 12px;font-size:.8rem}
.admin-compact table{font-size:.8rem}
.admin-compact td,.admin-compact th{padding:6px 8px}
.admin-compact .oc-head b{font-size:.95rem!important}

/* بطاقة التقييمات: مسافات مشدودة (عنوان ← اسم ← تقييم متتابعة بلا فجوات) */
#reviewsCard{padding:14px 16px}
#reviewsCard h2{margin:0 0 6px}
#reviewsCard .reviews-carousel{margin:4px 0 0}
#reviewsCard .review{padding:8px 2px}
#reviewsCard .review .who{font-size:.88rem}
#reviewsCard .review p{font-size:.86rem;line-height:1.75}
/* فاصل صريح بين عرض التقييمات وخيار إضافة تقييم العميل */
.rev-sep{border-top:1px dashed var(--brand);margin:12px 0 10px;opacity:.55}
#reviewsCard label{font-size:.8rem;margin-top:6px}
#reviewsCard input,#reviewsCard select{padding:8px 10px;font-size:.85rem}
#reviewsCard form .btn{margin-top:8px;padding:8px 14px;font-size:.85rem}

/* بطاقة شرح المنتج على الجوال: مسافات مقلّصة وخط أصغر (طلب المالك) */
@media (max-width:680px){
  /* خط أكبر مقروء — والهوامش المشدودة كما هي (البطاقة لا تتغير).
     --pi-gap: مسافة رأسية موحّدة واحدة تُستخدم بين كل أسطر بطاقة المنتج (السعر
     السابق ← شامل الضريبة ← الشرح ← خانة الكمية) — ثابتة بغضّ النظر عن طول
     الشرح مستقبلاً، لأن margin-top لا يتأثر بطول المحتوى الذي يسبقه. */
  #productInfo{padding:12px;font-size:.95rem;--pi-gap:4px}
  /* عنوان المنتج في سطر واحد دائماً — السكربت يصغّر الخط تلقائياً حتى يسع */
  #productInfo h2{font-size:1.12rem;margin:2px 0 4px;white-space:nowrap;overflow:hidden}
  #productInfo .flex{gap:6px;row-gap:4px;margin-top:8px}
  #productInfo .price{margin-top:6px}
  /* سطر السعر ينزل قليلاً بمسافة علوية متوازنة (كي لا يتشابك مع سطر التقييم فوقه) */
  #productInfo .price-row{margin-top:8px}
  #productInfo .price-now{font-size:1.22rem}
  #productInfo .old-line{margin-top:var(--pi-gap);font-size:.84rem}
  #productInfo .tax-note{font-size:.78rem;margin-top:var(--pi-gap)}
  #productInfo .note{font-size:.89rem;line-height:1.75;margin:var(--pi-gap) 0 0}
  #productInfo .mt{margin-top:8px}
  #productInfo .opt-group{margin:var(--pi-gap) 0 0}
  #productInfo .opt-name{font-size:.86rem;margin-bottom:4px}
  #productInfo .qty-stepper button{width:28px;height:28px;font-size:.95rem}
  #productInfo .qty-stepper input{width:38px;height:28px;font-size:.88rem}
  #productInfo .row.mt{margin-top:10px;gap:8px}
  #productInfo .btn{padding:9px 8px;font-size:.9rem}
  /* سطر التقييم على الجوال: النجوم + عدد التقييم + عدّاد الطلبات بحجم واحد متناسق */
  #productInfo .stars{font-size:.66rem;letter-spacing:-.5px}
  #productInfo .flex .muted{font-size:.66rem}
  #productInfo .order-count{font-size:.6rem;padding:0}
}

/* وسائل الدفع بالتذييل: سطر واحد دائماً بشعارات مصغّرة */
.pay-badges{flex-wrap:nowrap;gap:5px;margin:12px auto 8px;max-width:100%;justify-content:center}
.pay-badges .pb{min-width:0;height:24px;padding:3px 8px;font-size:.6rem;border-radius:7px;flex-shrink:1}
.pay-badges .pb b{font-size:.6rem;white-space:nowrap}
.pay-badges .mc-c{width:12px;height:12px}

/* ============================================================
   ضغط متوسط للبطاقات في كل الصفحات (طلب المالك): هوامش ومسافات وخطوط
   أصغر بنحو 20-25% لإظهار معلومات أكثر في الشاشة بسكرول أقل — بلا ازدحام
   ============================================================ */
.panel{padding:16px}
.order-card{padding:13px;margin-bottom:12px}
.oc-head{padding-bottom:9px}
.oc-grid{gap:10px;padding:10px 0}
.oc-field{gap:2px}
.oc-field .lbl{font-size:.75rem}
.oc-field .val{font-size:.9rem}
.summary{margin-top:12px;padding-top:11px}
.summary .line{margin:4px 0}
.summary .line.total{font-size:1.1rem}
.panel h2{margin:0 0 8px;font-size:1.1rem}
.hero{padding:34px 14px 20px}
.hero h1{font-size:1.9rem;margin:0 0 8px}
.cart-item{padding:10px 0}
.stat{padding:9px 10px}
.stats{gap:9px;margin:12px 0}
@media (max-width:680px){
  .panel{padding:13px}
  .hero{padding:18px 0 6px}
  .hero h1{font-size:1.5rem;margin:0 0 4px}
  .hero p{font-size:.9rem}
  .order-card{padding:11px}
  .stats{gap:9px;margin:12px 0}
}

/* زر «أضف تقييمك» القابل للطي — ينسدل النموذج تحته عند النقر */
.rev-toggle{display:inline-flex;align-items:center;gap:8px;background:rgba(154,106,212,.12);border:1px solid var(--brand);color:var(--brand2);font-weight:800;font-size:.95rem;padding:9px 16px;border-radius:10px;cursor:pointer;transition:.2s}
.rev-toggle:hover{background:rgba(154,106,212,.2)}
.rev-toggle .chev{font-size:.8rem}
#reviewForm{margin-top:12px !important}

/* رابط «العودة للرئيسية» في صفحة المنتج: أنزله قليلاً وحاذِه فوق الصورة المتمركزة
   (نفس عرض الصورة 560، محاذاة يمين) — قريب منها دون أن يعلوها */
.product-page .back-link{max-width:560px;margin:26px auto 2px;width:100%;justify-content:flex-start}
@media (max-width:680px){ .product-page .back-link{margin:34px auto 6px;padding:0 4px} }

/* الحاسوب: دفع زوجَي الأقسام نحو الحواف (بعيداً عن الشعار) لإخلاء وسط الشاشة للتوهّج،
   وتقريب كل زوج معاً — دون التصاق (تُطبَّق فوق 680 فقط؛ الجوال له ترتيبه) */
@media (min-width:681px){
  .nav-inner > .nav-cats{gap:6px}
  .nav-inner > .nav-cats:first-of-type{justify-content:flex-start;padding-inline-start:3%}
  .nav-inner > .nav-cats:last-of-type{justify-content:flex-end;padding-inline-end:3%}
}

/* ترويسة الجوال: إخفاء «تتبع» (متاح من التذييل) + رفع «حسابي/السلة» + تصغير أيقونتهما قليلاً */
@media (max-width:680px){
  .nav-track{display:none}
  .nav-edge .nav-pill{margin-top:-20px;padding:3px 9px;font-size:.8rem;border-width:1px}
  .nav-edge .nav-pill svg{width:18px;height:18px}
}

/* الجوال: دفع زوجَي الأقسام لأقصى الحافتين (بعيداً عن الشعار) وتقريب كل زوج */
@media (max-width:680px){
  .nav-cat-btn{padding:4px 8px;font-size:.7rem}
}

/* الحاسوب: إخفاء «تتبع» من الترويسة (متاح من التذييل) + تصغير أيقونتَي «حسابي/السلة» قليلاً */
@media (min-width:681px){
  .nav-track{display:none}
  .nav-edge .nav-pill{padding:4px 10px;gap:4px;margin-top:6px;border-width:1px}
  .nav-edge .nav-pill svg{width:18px;height:18px}
}

/* بطاقة المنتج على الجوال: زر «أضف الطلب» بعرض البطاقة كاملاً + ارتفاع أقل ٣٠٪ */
@media (max-width:680px){
  .card .body .btn.block{width:100%;align-self:stretch;padding:7px 10px;font-size:.82rem;line-height:1.15;margin-top:7px}
  .card h3{font-size:.9rem}
}

/* الكمبيوتر: زر «أضف الطلب» ممدّد بعرض البطاقة كاملاً + ارتفاع أقل ٣٠٪ */
@media (min-width:681px){
  .card .body .btn.block{width:100%;align-self:stretch;padding:6px 15px;font-size:.85rem;gap:5px;line-height:1.15;margin-top:7px}
  .card .body .btn.block .btn-plus{font-weight:900;font-size:1.05rem;line-height:1}
}

/* تصغير زرَّي «أضف للسلة / شراء الآن» في صفحة المنتج */
#productInfo .row.mt .btn{padding:9px 12px;font-size:.9rem}
/* ضغط صفحة إتمام الشراء والدفع: مربعات وخطوط أصغر (نحو النصف) */
.checkout-grid{gap:16px;padding:16px 0 40px}
.checkout-grid .panel{padding:13px}
.pay-panel h2,.checkout-grid h2{font-size:1rem;margin:0 0 8px}
.pay-secure{padding:6px 10px}
.pay-secure .ssl{font-size:.7rem}
.pay-grid{gap:7px}
.pay-opt,.ship-opt{padding:8px 10px;gap:7px;border-radius:9px}
.pay-opt .pm-logo{font-size:.72rem;padding:2px 6px}
.steps-bar{margin-bottom:8px}
.steps-bar .sb{padding:6px 5px;font-size:.75rem}
.checkout-grid label{font-size:.8rem;margin-top:6px}
.checkout-grid input,.checkout-grid select{padding:8px 10px;font-size:.85rem}
.checkout-grid .summary{margin-top:10px;padding-top:10px}
.checkout-grid .summary .line{margin:3px 0;font-size:.85rem}
.checkout-grid .summary .line.total{font-size:1.05rem}
.checkout-grid .btn{padding:9px 12px;font-size:.88rem}
.addr-card,#savedAddrPick .addr-add{padding:9px 11px !important;font-size:.85rem}

/* ============================================================
   ضغط قوي لصفحة السلة (طلب المالك): بطاقة وخط أصغر بكثير على الجهازين
   ============================================================ */
.cart-item .qty-stepper button{width:28px;height:28px;font-size:.95rem}
.cart-item .qty-stepper input{width:34px;font-size:.85rem}
/* الملخص: أزرار متلاصقة بلا فجوات كبيرة */
.checkout-grid .btn.block.mt{margin-top:10px}
/* بطاقة السلة والملخص: حشوة أقل + عنوان أصغر */
.cart-page .panel,.container .panel{padding:13px}
.cart-hero h1,.hero h1{font-size:1.6rem}
@media (max-width:680px){
  .cart-item{gap:7px;padding:8px 0}
  .cart-item .ci-name{font-size:.82rem}
  .cart-item .ci-price{font-size:.88rem}
  .cart-item .qty-stepper button{width:26px;height:26px}
  /* أوسع كي تظهر الأرقام من خانتين (١٠ فأكثر) كاملة بلا قصّ */
  .cart-item .qty-stepper input{width:40px;font-size:.85rem;padding:0 2px}
  .hero h1{font-size:1.35rem}
}

/* نافذة الدفع المدمجة (Moyasar.js) — تظهر فوق الموقع دون مغادرته */
.moy-modal{position:fixed;inset:0;z-index:500;background:rgba(7,9,12,.82);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}
.moy-box{position:relative;width:100%;max-width:440px;background:#14161b;border:1px solid var(--brand);border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:92vh;overflow-y:auto}
.moy-close{position:absolute;top:10px;inset-inline-start:12px;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1}
.moy-head{text-align:center;font-weight:800;color:var(--brand2);font-size:1.1rem;margin-bottom:4px}
.moy-amount{text-align:center;font-weight:900;font-size:1.5rem;color:#fff;margin-bottom:14px}
.mysr-form{min-height:80px}
/* تحسين ألوان نموذج مياسر ليتناسق مع الموقع الداكن */
.moy-box .mysr-form input,.moy-box .mysr-form .mysr-input{border-radius:9px}

/* ============================================================
   فلسفة عامة: مضغوط وسلس بأقل سكرول في كل الصفحات (طلب المالك)
   ============================================================ */
/* ١) صفحة المنتج (كمبيوتر): الصورة يساراً + بطاقة المعلومات يميناً، أعرض وأصغر خطاً */
@media (min-width:681px){
  /* المحاذاة الرأسية: البطاقة والمعرض بنفس الارتفاع (stretch) — أعلى البطاقة
     بمحاذاة أعلى الصورة الكبيرة، وأسفلها بمحاذاة أسفل الصور المصغّرة */
  .product-wrap{flex-direction:row;max-width:1060px;gap:26px;align-items:stretch;direction:ltr;padding:12px 0 34px}
  /* المعرض عمود: الصورة أعلى، والمصغّرات تُثبّت أسفله (تنزل لقاع العمود عند التمدد) */
  .product-wrap > .gallery{flex:0 0 45%;order:1;display:flex;flex-direction:column;justify-content:space-between}
  /* البطاقة عمود مرن بنفس ارتفاع المعرض، والفراغ يتوزّع بالتساوي بين الأسطر
     (space-between) بدل تكديس المحتوى فوق وترك قاع فارغ */
  .product-wrap > #productInfo{flex:1;order:2;direction:rtl;text-align:right;font-size:.85rem;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
  #productInfo h2{font-size:1.14rem;margin:0;line-height:1.35}
  #productInfo .price-row .price-now{font-size:1.3rem}
  #reviewsCard{max-width:1060px;margin-inline:auto}
  #productInfo .flex{gap:6px}
  #productInfo .price-row{margin:0;gap:12px}
  /* «ستوفّر» بجانب القلب في سطر العنوان الأول */
  #productInfo .tax-note{font-size:.72rem}
  /* الوصف يتنفّس: خط أوضح وارتفاع سطر أريح — يشغل وسط البطاقة بلا حشر */
  #productInfo .note{margin:0;font-size:.86rem;line-height:1.9}
  #productInfo .opt-group{margin:0}
  #productInfo .opt-name{margin-bottom:0;font-size:.9rem}
  #productInfo .qty-stepper button{width:28px;height:28px;font-size:.95rem}
  #productInfo .qty-stepper input{width:38px;height:28px;font-size:.9rem}
  #productInfo .row.mt{margin-top:0;padding-top:2px;gap:10px}
  #productInfo .btn{padding:11px 14px;font-size:.95rem}
}
/* الجوال: صفحة المنتج تبقى عمودية RTL كاملة العرض */
@media (max-width:680px){
  .product-wrap{direction:rtl;max-width:none}
}
/* ٢) صفحة إتمام الطلب (فاتورة ما بعد الدفع): مضغوطة على الجهازين — معلومات بسيطة بلا حجم كبير */
.oc-page .hero{padding:18px 0 6px}
.oc-page .hero h1{font-size:1.35rem}
.oc-page .hero p{font-size:.84rem}
.oc-page .panel{padding:12px}
.oc-page .code-pill{font-size:1.25rem;padding:6px 14px;letter-spacing:2px}
.oc-page .summary .line{margin:3px 0;font-size:.85rem}
.oc-page .summary .line.total{font-size:1.05rem}
.oc-page h2{font-size:1rem;margin:0 0 6px}
.oc-page .sms-bubble{padding:9px 11px;font-size:.8rem;margin:6px 0}
.oc-page .sms-bubble .meta{font-size:.7rem}
.oc-page .btn{padding:8px 14px;font-size:.85rem}
/* ٣) خيارات شركات الشحن: أصغر بكثير */
.ship-opt{padding:7px 10px !important;margin-bottom:6px !important;font-size:.82rem}
.ship-opt b{font-size:.85rem}
.ship-opt .muted{font-size:.72rem !important}

/* منع زوم iOS في صفحة الدفع: قاعدة .checkout-grid input العامة (font-size:.85rem ≈14.5px)
   كانت تتغلّب على قاعدة منع الزوم العامة لأنها أخصّ وتأتي بعدها — فيكبّر Safari الصفحة
   عند الكتابة في كود الخصم وبقية الحقول ولا يعيدها. نفرض ١٦px على الجوال هنا (بعد السطر
   المسبِّب، فتفوز بترتيب المصدر) مع إبقاء الحجم المضغوط على الكمبيوتر كما هو. */
@media (max-width:680px){
  .checkout-grid input,.checkout-grid select,#offerCode{font-size:16px}
}

/* الكمبيوتر: بطاقات اختيار شركة الشحن كانت كبيرة — نضغطها نحو ٤٠٪ (خط + حشو + تباعد)
   لتظهر أرتب وأسهل. للجوال تبقى قواعد الضغط العامة كما هي (مناسبة أصلاً). */
@media (min-width:681px){
  /* حجم متوازن: أصغر من السابق لكن أكبر ٢٠٪ من التصغير الأول (كان مبالغاً فيه) */
  .ship-opt{padding:6px 11px !important;margin-bottom:6px !important;font-size:.72rem}
  .ship-opt b{font-size:.79rem}
  .ship-opt .ship-note{font-size:.67rem;line-height:1.3}
}