:root{
  --bg:#0f1115; --card:#191b1f; --soft:#23262c; --line:#3a3326;
  --text:#efe9dc; --muted:#a99f8a; --brand:#c9a227; --brand2:#e7c873;
  --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:"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}
/* بنر خشبي في الشريط العلوي بكثافة متوسطة (خلف الشعار والأزرار) */
header.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('/img/banner-wood.png') center/cover no-repeat;
  opacity:.5;
  /* قناع تدرّج جمالي: يذوب أسفل الخشب والجانبين بنعومة في خلفية الشاشة */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 45%,rgba(0,0,0,.35) 78%,transparent 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 45%,rgba(0,0,0,.35) 78%,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}

/* frame-layer */
:root{ --win-top:calc(175px + 4.5vh); --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}
.frame-window{position:absolute;top:var(--win-top);bottom:var(--win-bottom);left:var(--win-side);right:var(--win-side);overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 97%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#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:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center;
  direction:ltr;
  width:100%;padding:14px 4.5%;box-sizing:border-box;gap:10px}
.nav-edge{display:flex;align-items:center;gap:8px;align-self:start;padding-top:72px;min-width:240px}
.nav-edge-left{justify-content:flex-start}
.nav-edge-right{justify-content:flex-end}
.nav-cats{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;align-self:start;padding-top:72px}
.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(201,162,39,.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)}
.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}
.brand-logo{width:180px;height:180px;object-fit:contain;display:block;filter:drop-shadow(0 1px 6px rgba(201,162,39,.5))}

/* الـ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)}
/* قسم فيديو يوتيوب أسفل المنتجات */
.home-video{margin:24px 0 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(2,1fr);gap:22px 110px;padding:26px 0 24px;max-width:900px;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{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 .old-line .old-price,
#productInfo .tax-note,
#productInfo .note{color:#fff}
.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;
  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(231,200,115,.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(231,200,115,.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}
@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:.92rem}
/* صفّ مضغوط: الاسم + التقييم بجانبه */
/* اسم المنتج وحجم العبوة في سطر أول كامل، وتحته النجوم وعدّاد «تم طلب هذا المنتج» */
.card .card-head{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.card .card-head h3{flex:none;min-width:0}
.card .card-rate{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.82rem}
.order-count{font-size:.7rem;color:var(--brand2);background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.3);padding:2px 7px;border-radius:999px;white-space:nowrap}
.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:4px;animation:pricepulse 1.8s ease-in-out infinite;will-change:transform;
  background:#14161b;padding:2px 10px;border-radius:10px;border:1px solid rgba(231,200,115,.5);
  color:#f5dd94;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);text-shadow:0 0 6px rgba(231,200,115,.25)}
  50%{transform:scale(1.14);text-shadow:0 0 16px rgba(231,200,115,.7)}
}
@media(prefers-reduced-motion:reduce){.price-now{animation:none}}
.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:#fff;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,#e7c873,#b8860b);color:#2a1e05;font-weight:800}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* صفحة المنتج */
.product-wrap{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}
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)}
.row{display:flex;gap:10px}
.note{font-size:.85rem;color:var(--muted);margin-top:6px}
.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:#141312;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(231,200,115,.55), rgba(184,134,11,.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(201,162,39,.5));white-space:nowrap}
/* (أُزيلت بطاقة «آخر طلب» من صفحة الدفع — الطلبات في بوابة العميل) */
/* السلة الفارغة: «سلتك فارغة. تسوّق الآن» في صفٍّ واحد وسط البطاقة — نص فقط بلا بطاقة خلفه،
   مرفوع فوق طبقة التمويه وبارز قليلاً */
#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;margin:6px 0;color:var(--muted)}
.summary .line.total{color:var(--text);font-weight:800;font-size:1.2rem}

/* الكود/التتبع */
/* رمز التتبع بالإطار الخشبي المميز (هوية عتم — كبطاقة التصنيف وأزرار الموقع):
   البنر الخشبي أعلى + نسخته المقلوبة أسفل = إطار متناظر، نص أبيض بظل، مرفوع فوق التمويه */
.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(201,162,39,.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(201,162,39,.18)}
/* نصوص البطاقة divs — تُرفع فوق طبقة التمويه الزجاجية (::before z-index:0) وإلا ظهرت مموّهة */
.stat .num,.stat .lbl{position:relative;z-index:210}
.stat .num{font-size:2.1rem;font-weight:800;color:var(--brand2);text-shadow:0 1px 6px rgba(201,162,39,.35)}
.stat .lbl{color:#fff;font-weight:700;font-size:.95rem;margin-top:6px}

/* رسالة 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:1;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#0c0e12;position:relative}
.gallery .main img{width:100%;height:100%;object-fit:contain}
/* تكبير صورة المنتج (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;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-item img{width:78px;height:78px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.cart-item .ci-body{flex:1}
.cart-item .ci-opts{color:var(--muted);font-size:.82rem}
.cart-item .rm{color:var(--red);cursor:pointer;background:none;border:none;font-size:.85rem}
.checkout-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:24px;padding:24px 0 60px}
@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,#e7c873,#b8860b);color:#2a1e05;font-weight:800;box-shadow:0 4px 16px rgba(184,134,11,.35)}
.pay-opt.sel b,.ship-opt.sel b,.pay-opt.sel .muted,.ship-opt.sel .muted{color:#2a1e05}
.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{background:#14161b}
/* نص العناوين أبيض واضح بظل داكن (يُقرأ على البطاقة الداكنة والمختارة الذهبية) */
#savedAddrPick .addr-card b{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85)}
#savedAddrPick .addr-card .muted{color:#f2ede0;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.addr-add{border:2px dashed var(--brand2);border-radius:12px;padding:14px;text-align:center;color:#f2dc9b;font-weight:800;cursor:pointer;background:#1c1a12;transition:.15s;font-size:1rem}
.addr-add:hover{background:rgba(201,162,39,.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)}
.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}
.progress{height:10px;border-radius:999px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
.progress .bar{height:100%;border-radius:999px;transition:width .4s}
@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} }

/* ========================================================
   التوافق مع الجوال / 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:16px 0 50px}
  .card .body{padding:11px;gap:6px}
  .card h3{font-size:.95rem}
  .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:1}
  .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:380px){ .grid{grid-template-columns:1fr} }

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

  /* ترتيب الترويسة:
     صف 1: أزرار الأقسام الأربعة — زران يساراً وزران يميناً على الجزء الأسود فوق الخشب
     صف 2: الشعار وسطاً بحجمه الكامل فوق قوس الخشب
     صف 3: السلة+تتبع يساراً ودخول يميناً — متناسقة حول محور الشعار */
  .nav-inner{display:flex;flex-wrap:wrap;align-items:center;padding:6px 10px 10px;row-gap:7px;gap:6px}
  .nav-cats{order:1;width:calc(50% - 3px);padding-top:0;gap:6px;flex-wrap:nowrap}
  .nav-inner .nav-cats:first-of-type{justify-content:flex-start}
  .nav-inner .nav-cats:last-of-type{justify-content:flex-end}
  .nav-cat-btn{flex-direction:row;gap:4px;padding:5px 10px;font-size:.72rem;white-space:nowrap}
  .brand{order:2;width:100%;justify-content:center;margin:0}
  .brand-logo{width:180px;height:180px}
  .nav-edge{order:3;min-width:0;padding-top:0;width:calc(50% - 3px)}
  .nav-edge-left{justify-content:flex-start}
  .nav-edge-right{justify-content:flex-end}
  .nav-pill{padding:8px 14px;font-size:.82rem}

  /* البنر الخشبي: القوس يبقى بحجمه الكبير وسطاً، يبدأ تحت صف الأقسام،
     وأطراف البنر تُقصّ خارج الشاشة (لا تُضغط) */
  header.nav::before{top:40px;background-size:auto 100%;background-position:center top}

  /* نافذة المحتوى تبدأ تحت الترويسة الجديدة */
  :root{--win-top:290px}

  /* فيديو الزيت: خيط واحد أوضح (أداء وبطارية أفضل) */
  .oil-extra{display:none}
  .oil-pour{max-width:80vw;opacity:.34}

  /* صور المنتجات كاملة داخل إطار مربع — لا اقتصاص */
  .card .media{aspect-ratio:1/1}
  .card .media img{object-fit:contain;background:#0b0d10}
}

/* إخفاء زر التشغيل المثلث الذي يعرضه آيفون/سفاري على الفيديو الموقوف —
   فيديو الزيت خلفية جمالية ولا يجب أن يبدو للعميل أنه «فيديو» */
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}