/* ═══════════════════════════════════════════════════════════════
   menu-stage.css — عرض «الصنف الكبير»  (v361، 2026-10-29، راجعوا js/menu-stage.js)
   بطاقة بنّية غامقة بألوان نيرو مكس (الجمرة --brand والكهرماني --brand2)
   حتى تذهب العين للأكل. يُحمَّل بعد skin-live.css.
   ═══════════════════════════════════════════════════════════════ */
.nm-stage{ display:none; }
body.menu-stage .nm-stage{ display:block; }
/* v366: الشبكة كاملة تبقى تحت البطاقة (سهولة الوصول)، والصنف المعروض فوق عليه إطار */
body.menu-stage #menuSections .items-grid .item.nm-st-on{ outline:3px solid var(--brand2, #F2B544); outline-offset:-3px; }
body.menu-stage #menuSections .items-grid .item-thumb,
body.menu-stage #menuSections .items-grid .item-ph{ cursor:zoom-in; }

.nm-stage{
  --st-bg:#2A1A0F; --st-bg2:#3B2414; --st-ink:#FFF5E8; --st-dim:#D9BFA3;
  --st-ac:var(--brand2, #F2B544); --st-ac2:var(--brand-deep, #C1511C);
  background:radial-gradient(120% 70% at 50% 0%, var(--st-bg2) 0%, var(--st-bg) 70%);
  color:var(--st-ink); border-radius:26px; padding:14px 14px 16px; margin:4px 0 14px;
  box-shadow:0 24px 50px -30px rgba(40,20,5,.7);
}

/* ── الصورة وشريط الصور الصغيرة ── */
.nm-st-hero{ position:relative; }
.nm-st-pic{
  position:relative; aspect-ratio:16/11; border-radius:20px; overflow:hidden; touch-action:pan-y;
  background:radial-gradient(circle at 50% 55%, rgba(242,181,68,.28) 0%, rgba(242,181,68,0) 62%);
}
.nm-st-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:20px; border:none; box-shadow:none; }
.nm-st-ph{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:repeating-linear-gradient(135deg, rgba(255,245,232,.035) 0 14px, transparent 14px 28px); border-radius:20px; }
.nm-st-ph .item-ph{ width:118px; height:118px; flex:0 0 auto; border-radius:50%; background:rgba(242,181,68,.14); box-shadow:0 0 0 10px rgba(242,181,68,.06); }
.nm-st-ph .cat-icon{ width:58px; height:58px; opacity:.9; stroke:var(--st-ac) !important; }
.nm-st-mark{ font-family:var(--kufi, 'El Messiri', serif); font-size:1.15rem; color:rgba(255,245,232,.28); }
.nm-st-tag{
  position:absolute; top:10px; inset-inline-start:10px; padding:5px 11px; border-radius:999px;
  background:rgba(20,10,4,.72); color:var(--st-ac); font-size:.72rem; font-weight:800;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.nm-st-pic.in-next{ animation:stIn .32s cubic-bezier(.23,1,.32,1); --st-from:-28px; }
.nm-st-pic.in-prev{ animation:stIn .32s cubic-bezier(.23,1,.32,1); --st-from:28px; }
@keyframes stIn{ from{ opacity:.2; transform:translateX(var(--st-from)) scale(.97); } to{ opacity:1; transform:none; } }

.nm-st-arrow{
  position:absolute; top:calc(50% - 20px); width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(20,10,4,.55); color:var(--st-ink); font-size:1.6rem; line-height:1; display:none;
  align-items:center; justify-content:center; transition:transform .16s cubic-bezier(.23,1,.32,1), opacity .2s;
}
.nm-st-arrow.next{ left:8px; }   /* التالي يسار الصورة (عربي) */
.nm-st-arrow.prev{ right:8px; }
.nm-st-arrow:disabled{ opacity:0; pointer-events:none; }
.nm-st-arrow:active{ transform:scale(.94); }
.nm-st-arrow{ display:flex; direction:ltr; unicode-bidi:isolate; }   /* v368: ظاهرة على الجوال كمان؛ ltr حتى ما تنعكس ‹ › بالعربي فيأشّر السهم للجهة الغلط */
@media (hover:none){ .nm-st-arrow{ width:34px; height:34px; font-size:1.35rem; top:calc(50% - 17px); background:rgba(20,10,4,.45); } }

.nm-st-count{ position:absolute; bottom:10px; inset-inline-end:10px; padding:4px 10px; border-radius:999px;
  background:rgba(20,10,4,.72); color:var(--st-ink); font-size:.75rem; font-weight:800; font-variant-numeric:tabular-nums; direction:ltr; }

/* ── الاسم والسعر والإضافة ── */
.nm-st-info{ text-align:center; padding:12px 2px 0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.nm-st-group{ font-size:.72rem; font-weight:700; color:var(--st-ac); background:rgba(242,181,68,.12); padding:3px 10px; border-radius:999px; }
.nm-st-name{ margin:2px 0 0; font-family:'Noto Kufi Arabic', sans-serif; font-weight:800; font-size:1.35rem;   /* v366: «الخط مش واضح» — كان رقعة */
  line-height:1.3; color:var(--st-ink); text-wrap:balance; }
.nm-st-en{ direction:ltr; font-size:.74rem; color:var(--st-dim); letter-spacing:.02em; }
.nm-st-desc{ margin:4px 0 0; font-size:.8rem; line-height:1.6; color:var(--st-dim); max-width:34em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nm-st-desc[hidden]{ display:none; }
.nm-st-buy{ width:100%; display:flex; align-items:center; gap:10px; margin-top:10px; }
.nm-st-price{
  flex:0 0 auto; font-size:1.55rem; font-weight:900; color:var(--st-ac); font-variant-numeric:tabular-nums;
  background:rgba(255,245,232,.07); padding:8px 14px; border-radius:16px; line-height:1.2;
}
.nm-st-price small{ font-size:.5em; font-weight:700; color:var(--st-dim); }

.nm-stage .qty-controls{ flex:1 1 auto; min-width:0; display:flex; justify-content:center; }
.nm-stage .add-btn{
  width:100%; min-height:54px; border:none; border-radius:18px !important; cursor:pointer;
  background:var(--st-ac2); color:#FFF7EC; font-size:1.1rem; font-weight:800;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), 0 12px 26px -12px var(--st-ac2);
  transition:transform .16s cubic-bezier(.23,1,.32,1);
}
.nm-stage .add-btn::after{ content:" +"; }
.nm-stage .add-btn:active{ transform:scale(.97); }
.nm-stage .qty-stepper{ gap:18px; background:rgba(255,245,232,.08); border-radius:18px; padding:6px 10px; }
.nm-stage .qty-stepper button{ width:44px; height:44px; border-radius:50%; font-size:1.4rem; background:var(--st-ac2); color:#FFF7EC; border:none; }
.nm-stage .qty-stepper .qty-val{ min-width:2ch; font-size:1.35rem; font-weight:800; color:var(--st-ink); }
/* الوزن والقطعة وخيار شيبس/رز — نفس عناصر app.js بألوان البطاقة */
.nm-stage .weight-select-wrap{ width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:center; }
.nm-stage .weight-select-wrap select{ flex:1 1 0; min-width:0; min-height:50px; border-radius:16px; font-size:1rem; font-weight:700; }
.nm-stage .piece-add-btn, .nm-stage .weight-add-btn{
  flex:0 0 auto; width:50px; height:50px; border:none; border-radius:16px; cursor:pointer;
  background:var(--st-ac2); color:#FFF7EC; font-size:1.5rem; font-weight:800; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}
.nm-stage .piece-remove-btn, .nm-stage .weight-remove-btn{
  width:38px; height:38px; border:none; border-radius:50%; background:rgba(255,245,232,.12); color:var(--st-ink); cursor:pointer;
}
.nm-stage .weight-qty-label{ flex:1 1 100%; color:var(--st-ac); font-weight:800; }
.nm-stage .side-pick{ width:100%; display:flex; flex-direction:column; gap:8px; }
.nm-stage .side-pick-row{ display:flex; align-items:center; gap:10px; justify-content:center; }
.nm-stage .side-plus{ flex:1; min-height:50px; border:none; border-radius:16px; background:var(--st-ac2); color:#FFF7EC; font-weight:800; font-size:1rem; cursor:pointer; }
.nm-stage .side-minus{ width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,245,232,.12); color:var(--st-ink); font-size:1.3rem; }
.nm-stage .side-pick-row .qty-val{ color:var(--st-ink); font-weight:800; }

@media (min-width:700px){
  .nm-stage{ display:none; }
  body.menu-stage .nm-stage{ display:grid; grid-template-columns:1.15fr 1fr; gap:18px; align-items:center; padding:18px; }
  .nm-st-info{ padding:0; }
}
@media (prefers-reduced-motion:reduce){ .nm-st-pic.in-next, .nm-st-pic.in-prev{ animation:none; } }
.nm-stage .weight-select-wrap input.weight-select{ width:110px !important; min-height:50px; border-radius:16px; text-align:center; font-size:1.15rem; font-weight:800; }
.nm-stage .weight-select-wrap > span{ color:var(--st-dim); font-weight:700; }

/* ── v368: نقاط التنقّل تحت الصورة + الصورة تتلاشى فوق البديل لما تحمّل ── */
.nm-st-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; padding:10px 0 0; }
.nm-st-dots[hidden]{ display:none; }
.nm-st-dot{ width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(255,245,232,.28); cursor:pointer;
  transition:width .25s cubic-bezier(.23,1,.32,1), background .25s; }
.nm-st-dot.on{ width:22px; background:var(--st-ac); }
.nm-st-dot::before{ content:""; display:block; margin:-8px; height:24px; }   /* هدف لمس أكبر من النقطة */
.nm-st-pic > .nm-st-ph{ position:absolute; inset:0; }
.nm-st-pic > .nm-st-img{ position:absolute; inset:0; transition:opacity .35s ease; }
.nm-st-img.nm-st-loading{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .nm-st-dot, .nm-st-pic > .nm-st-img{ transition:none; } }