/* ═══════════════════════════════════════════════════════
   مكوّنات إضافية على المرجع البصري:
   إتمام الطلب، التتبع، جدول التحاليل، صفحة المنتج.
   بتستعمل نفس الـtokens بدون ما تغيّر أي قيمة منها.
   ═══════════════════════════════════════════════════════ */

/*
 * خاصية hidden لازم تغلب أي قاعدة display بكلاس.
 * من غير !important القواعد زي .drow{display:flex} بتلغي إخفاء
 * سطر الخصم ولوحات الدرج، وبتظهر كلها مع بعض.
 */
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── حالة المخزون تحت السعر ── */
.stockline{min-height:1.2em;font-size:var(--s--1);color:var(--muted);margin-block:.15rem .5rem}
.stockline.low{color:var(--gold)}
.stockline.out{color:var(--danger)}

.badge.out{background:var(--danger-bg);color:var(--danger-ink);border-color:rgb(var(--danger-rgb) / .35)}

.warnline{margin-top:2rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:14px;
  background:var(--surface-2);color:var(--muted);font-size:var(--s--1);text-align:center}
.warnline.strong{color:var(--ivory);border-color:rgb(var(--danger-rgb) / .32);background:rgb(var(--danger-rgb) / .07);
  text-align:start;margin-block:1.25rem}

/* ── بيانات التقرير ── */
.reportmeta{display:grid;gap:.75rem;margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.reportmeta div{padding:.8rem .95rem;border:1px solid var(--line);border-radius:14px;
  background:var(--surface-2)}
.reportmeta span{display:block;font-size:var(--s--1);color:var(--muted);margin-bottom:.2rem}
.reportmeta b{font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif;font-weight:500;color:var(--ivory);font-size:.95rem}

/* ── صفحات فرعية ── */
.pagehead{padding-block:clamp(6rem,13vw,9rem) clamp(3rem,7vw,5rem)}
.pagehead h1{font-size:var(--s-3);margin-block:.5rem .8rem}
.notfound p{color:var(--muted);margin-bottom:1.6rem}
.crumbs{font-size:var(--s--1);color:var(--muted);margin-bottom:1rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--gold)}

/* ── جدول التحاليل ── */
.labcard{border:1px solid var(--line);border-radius:22px;background:var(--surface);
  padding:clamp(1.2rem,3vw,2rem);margin-bottom:1.6rem}
.labcard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.2rem}
.labcard-head h2{font-size:var(--s-2);margin-bottom:.2rem}
.batchno{font-size:var(--s--1);color:var(--muted);letter-spacing:.04em}
.passpill{padding:.35rem .8rem;border-radius:100px;font-size:var(--s--1);
  background:rgb(var(--gold-rgb) / .12);color:var(--gold);border:1px solid var(--line)}

.labtable{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:var(--s--1)}
.labtable th,.labtable td{padding:.75rem .6rem;text-align:start;
  border-bottom:1px solid var(--line-soft);vertical-align:top}
.labtable thead th{color:var(--muted);font-weight:500;font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif;
  border-bottom-color:var(--line)}
.labtable tbody th{font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif;font-weight:500;color:var(--ivory);white-space:nowrap}
.labtable .val{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.labtable .val.pass{color:var(--gold)}
.labtable .val.fail{color:var(--danger)}
.labtable .val small{color:var(--muted);font-weight:300}
.labtable .lim{color:var(--muted);white-space:nowrap}
.labtable .mean{color:var(--muted);font-weight:300;min-width:22ch}
.reportfile{margin-top:1rem;font-size:var(--s--1)}

@media (max-width:640px){
  .labtable,.labtable tbody,.labtable tr,.labtable td,.labtable th{display:block}
  .labtable thead{display:none}
  .labtable tr{border:1px solid var(--line);border-radius:14px;padding:.8rem;margin-bottom:.7rem}
  .labtable td,.labtable th{border:0;padding:.25rem 0}
  .labtable .mean{min-width:0}
}

/* ── صفحة المنتج ── */
.pdp{padding-block:clamp(6rem,13vw,9rem) clamp(3rem,7vw,5rem)}
.pdp-grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.pdp-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
/* قواعد البرطمان في المرجع مربوطة بـ.pcard، فصفحة المنتج محتاجة نسختها */
.pdp-media .jar{position:relative;overflow:hidden;border-radius:26px;
  border:1px solid var(--line-soft);background:var(--surface-2)}
.pdp-media .jar .liq{position:absolute;inset-inline:0;bottom:0;height:68%;
  transition:height .7s var(--ease)}
.pdp-media .jar:hover .liq{height:82%}
.jar.big{aspect-ratio:1;border-radius:26px}
/* صور المنتجات اللي بيرفعها العميل طولية (٢:٣ — صورة برطمان في مشهد).
   object-fit:cover كان بياكل أغلب البرطمان لأن صندوق الكارت عرضي،
   فبقى contain: الصورة بتبان كاملة مهما كانت نسبتها. */
.jar.shot{padding:0;background:var(--surface-2)}
.jar.shot img{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit}

/* صفحة المنتج: من غير نسبة ثابتة خالص — الصورة بتاخد طولها الطبيعي */
.pdp-media .jar.shot{margin:0;aspect-ratio:auto}
.pdp-media .jar.shot img{height:auto}

/* الكارت: نفس نسبة الصور المرفوعة عشان مفيش فراغ حواليها، وارتفاع
   ثابت لكل الكروت عشان الشبكة تفضل متساوية.

   كانت ٣:٤ (طولية) لصور البرطمانات الأولى. المتجر بقى يرفع صور بالعرض
   ١٣٧٤×١١٤٥ (٦:٥ بالظبط) وهيحوّل الباقي — فالصورة العرضية في صندوق
   طولي كان فوقها وتحتها فراغ أطول منها تقريبًا، والكارت طويل على
   الفاضي. المقاس الموصى بيه للصور: ١٢٠٠×١٠٠٠ */
.pcard .jar.shot{height:auto;aspect-ratio:6 / 5}
.pcard .jar.shot::after{content:none}

.thumbs{display:flex;gap:.6rem;margin-top:.9rem;flex-wrap:wrap}
.thumbs .thumb{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:none;cursor:pointer;line-height:0;transition:border-color .2s var(--ease)}
.thumbs .thumb.on{border-color:var(--gold)}
.thumbs .thumb img{width:72px;height:72px;object-fit:cover;display:block}
.pdp-info h1{font-size:var(--s-3);margin-bottom:.6rem}
.pdp-info .lede{color:var(--muted);margin-bottom:1rem}
.pcard.inline{background:none;border:0;padding:0;margin-block:1.4rem}
.pdp-desc{margin-block:1.4rem;color:var(--muted);font-weight:300}
.codline{display:flex;align-items:center;gap:.5rem;color:var(--gold);font-size:var(--s--1);margin-block:.8rem}
.codline svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}

.foodfacts{display:grid;gap:.1rem;margin-block:1.5rem;border:1px solid var(--line);
  border-radius:16px;overflow:hidden}
.foodfacts div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1rem;
  background:var(--surface-2);font-size:var(--s--1)}
.foodfacts dt{color:var(--muted)}
.foodfacts dd{color:var(--ivory);text-align:end}

/* ── لوحات الدرج: عربة / إتمام / تم ── */
.drawer .pane{display:flex;flex-direction:column;height:100%;min-height:0}
.drawer .pane[hidden]{display:none}
.backbtn{background:none;border:0;color:var(--muted);cursor:pointer;padding:.3rem;
  display:grid;place-items:center}
.backbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.backbtn:hover{color:var(--gold)}

/* ── نموذج إتمام الطلب ── */
.form{display:flex;flex-direction:column;gap:.95rem}
.fld{display:flex;flex-direction:column;gap:.35rem}
.fld>span{font-size:var(--s--1);color:var(--muted)}
.fld>span i{color:var(--gold);font-style:normal}
.fld input,.fld select,.fld textarea{
  padding:.75rem .95rem;border-radius:12px;border:1px solid var(--line-soft);
  background:var(--surface-2);color:var(--ivory);font:inherit;font-size:.94rem;
  transition:border-color .2s var(--ease)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--gold)}
.fld textarea{resize:vertical;min-height:60px}
.fld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(1rem) calc(50% + 2px),calc(1rem + 5px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.err{color:var(--danger);font-size:.78rem;font-style:normal;min-height:0}
.err:empty{display:none}
.okmsg{color:var(--gold);font-size:.78rem;font-style:normal}

.couponrow{display:flex;gap:.5rem}
.couponrow input{flex:1;min-width:0}
.couponrow .btn{padding-inline:1.1rem;white-space:nowrap}

.paymethods{display:flex;flex-direction:column;gap:.5rem}
.pm{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.pm input{accent-color:var(--gold);margin-top:.25rem}
.pm b{display:block;font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif;font-weight:500;color:var(--ivory);font-size:.94rem}
.pm small{color:var(--muted);font-size:.8rem}
.pm:has(input:checked){border-color:var(--gold)}

.formerr{color:var(--danger);font-size:var(--s--1);margin-bottom:.6rem;
  padding:.6rem .8rem;border-radius:10px;background:rgb(var(--danger-rgb) / .09);
  border:1px solid rgb(var(--danger-rgb) / .28)}

/* ── شاشة تم الطلب ── */
.dbody.done{text-align:center;display:flex;flex-direction:column;gap:.85rem;
  align-items:center;justify-content:center;padding-block:1.5rem}
.tick svg{width:74px;height:74px;fill:none;stroke:var(--gold);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.tick circle{opacity:.28}
.dbody.done h4{font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif;font-size:var(--s-2);color:var(--ivory)}
.doneline{color:var(--muted);font-size:var(--s--1)}
.ordbox{width:100%;padding:1rem;border:1px dashed var(--line);border-radius:16px;
  background:var(--surface-2)}
.ordbox span{display:block;font-size:var(--s--1);color:var(--muted);margin-bottom:.25rem}
.ordbox b{font-size:1.25rem;letter-spacing:.06em;font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif}
.donesum{width:100%;display:grid;gap:.1rem;border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.donesum div{display:flex;justify-content:space-between;padding:.6rem .9rem;
  background:var(--surface-2);font-size:var(--s--1)}
.donesum dt{color:var(--muted)}
.donesum dd{color:var(--ivory)}
.dbody.done .btn{width:100%}

/* ── تتبع الطلب ── */
.trackform{display:grid;gap:.7rem;grid-template-columns:1fr;max-width:520px;margin-inline:auto}
.trackform input{padding:.9rem 1.1rem;border-radius:100px;border:1px solid var(--line-soft);
  background:var(--surface-2);color:var(--ivory);font:inherit}
.trackform input:focus{outline:none;border-color:var(--gold)}
.trackhint{font-size:.76rem;color:var(--muted-2);text-align:center}

.trackresult{max-width:560px;margin:1.8rem auto 0;padding:1.3rem;
  border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.trackresult.err{color:var(--danger);text-align:center;border-color:rgb(var(--danger-rgb) / .3)}
.tr-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;padding-bottom:.9rem;border-bottom:1px solid var(--line-soft)}
.tr-head span{font-size:var(--s--1);color:var(--muted)}
.tr-head b{display:block;font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif;font-size:1.1rem;letter-spacing:.05em}
.statepill{padding:.35rem .85rem;border-radius:100px;background:rgb(var(--gold-rgb) / .13);
  color:var(--gold)!important;border:1px solid var(--line);white-space:nowrap}
.tr-courier,.tr-eta{margin-top:.8rem;font-size:var(--s--1);color:var(--muted)}
.tr-courier b{color:var(--ivory)}

.tr-timeline{list-style:none;margin:1.2rem 0 0;padding:0 1rem 0 0;
  border-inline-end:1px solid var(--line);position:relative}
.tr-timeline li{position:relative;padding-block:.5rem;padding-inline-end:1.1rem}
.tr-timeline li::before{content:"";position:absolute;inset-inline-end:-1.32rem;top:.95rem;
  width:9px;height:9px;border-radius:50%;background:var(--gold-deep)}
.tr-timeline li.done::before{background:var(--gold);box-shadow:0 0 0 3px rgb(var(--gold-rgb) / .16)}
.tr-timeline b{display:block;font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif;font-weight:500;
  color:var(--ivory);font-size:.94rem}
.tr-timeline time{font-size:.76rem;color:var(--muted)}

.tr-items{list-style:none;margin:1.2rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--line-soft)}
.tr-items li{display:flex;justify-content:space-between;gap:1rem;
  padding-block:.3rem;font-size:var(--s--1);color:var(--muted)}
.tr-total{display:flex;justify-content:space-between;align-items:center;
  margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line)}
.tr-total b{font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif;font-size:1.15rem}

/* طلب الاسترجاع — الموقع بيوعد بيه في الشريط العلوي، فلازم يبقى منه مسار */
.tr-return{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.tr-return .hint{font-size:var(--s--1);color:var(--muted)}
.tr-return-note{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line-soft);
  font-size:var(--s--1);color:var(--muted-2)}
.rt-form{flex-basis:100%;margin-top:.9rem;display:grid;gap:.8rem}
.rt-form .fld{display:grid;gap:.35rem}
.rt-form .fld > span{font-size:var(--s--1);color:var(--muted)}
.rt-form select,.rt-form textarea{width:100%;padding:.7rem .9rem;border-radius:12px;
  background:var(--void);color:var(--ivory);border:1px solid var(--line);
  font:inherit;font-size:var(--s--1);resize:vertical}
.rt-form select:focus-visible,.rt-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.rt-note{font-size:.76rem;color:var(--muted-2);line-height:1.7}
.rt-note a{color:var(--gold);text-decoration:underline}
.rt-msg{font-size:var(--s--1);line-height:1.7}
.rt-msg.err{color:var(--danger)}
.rt-msg.ok{color:var(--gold-light)}
.rt-err{font-size:var(--s--1);color:var(--danger)}

/* باقي طلبات نفس رقم الموبايل — العميل الدائم بيشوف تاريخه من غير حساب */
.tr-others{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line-soft)}
.tr-others h4{font-size:var(--s--1);color:var(--muted);font-weight:400;margin-bottom:.6rem}
.tr-others ul{list-style:none}
.tr-other{display:flex;align-items:center;gap:.7rem;width:100%;text-align:start;
  padding:.6rem .7rem;border-radius:12px;border:1px solid transparent;
  font-size:var(--s--1);color:var(--ivory-3);cursor:pointer;
  touch-action:manipulation;transition:border-color .2s var(--ease),background .2s var(--ease)}
.tr-other:hover,.tr-other:focus-visible{border-color:var(--line);background:rgb(var(--gold-rgb) / .06)}
.tr-other .no{font-family:ui-monospace,monospace;font-size:.78rem}
.tr-other .st{color:var(--muted)}
.tr-other .dt{color:var(--muted-2);font-size:.76rem}
.tr-other .tt{margin-inline-start:auto;white-space:nowrap}
@media(max-width:479px){
  .tr-other{flex-wrap:wrap;gap:.3rem .7rem}
  .tr-other .tt{margin-inline-start:0}
}

/* ── رسالة عابرة ── */
#flash{position:fixed;inset-block-end:calc(env(safe-area-inset-bottom,0) + 5.5rem);
  inset-inline:1rem;margin-inline:auto;max-width:440px;z-index:120;
  padding:1.05rem 1.3rem;border-radius:16px;text-align:center;font-size:.95rem;
  background:var(--surface-2);color:var(--ivory);border:1px solid var(--gold);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
#flash.on{opacity:1;transform:translateY(0)}
/* جملة الحث تحت تنبيه حذف الصنف. نصها من الإعدادات، وسيبانها فاضية
   بتخفي السطر — فالشكل ده لازم يشتغل بسطر واحد وبسطرين. */
#flash .f-msg{display:block;font-weight:400;line-height:1.6}
#flash .f-nudge{display:block;margin-top:.5rem;font-size:.88rem;
  font-weight:500;line-height:1.6;color:var(--gold-light)}
#flash.warn{border-color:var(--gold);
  background:linear-gradient(180deg,
    rgb(var(--gold-rgb) / .13), var(--surface-2))}



@media (prefers-reduced-motion:reduce){
  #flash{transition:none}
}

/* ── صفحات السياسات ── */
.policy h1{margin-bottom:1.4rem}
.prose p{color:var(--muted);font-weight:300;margin-bottom:1rem;max-width:72ch}
.prose p:first-of-type{color:var(--ivory);font-weight:300}
.updated{margin-top:2rem;font-size:var(--s--1);color:var(--muted-2)}

/* ── كارت المنتج: تصميم ثابت ──
   كل جزء في الكارت (الصورة، الاسم، الوصف، الأحجام، السعر، رسالة
   المخزون، الزرار) صف مشترك مع الكروت اللي جنبه — subgrid. وصف سطرين
   في كارت أو رسالة «نفد رصيد الوزن ده» تلات سطور بتحجز نفس المساحة في
   الكارت اللي جنبه، فكل اللي تحتها يفضل على نفس الخط.

   الحشو متغيّرات: الـ.pbody بيبقى display:contents فحشوه ما بيتحسبش،
   فبيتحط على العناصر نفسها. */
.pgrid{--pgap:1.25rem;align-items:stretch}
.pcard{--px:1.4rem;--pt:1.4rem;--pb:1.4rem;display:flex;flex-direction:column}
@media(max-width:619.98px){
  .pgrid{--pgap:.7rem}
  .pcard{--px:.6rem;--pt:.6rem;--pb:.65rem}
}
.pbody{display:flex;flex-direction:column;flex:1;padding:var(--pt) var(--px) var(--pb)}
.pcard .sizes{min-height:2.6rem}
/* المتصفحات من غير subgrid: الزرار على الأقل في آخر الكارت.
   كانت margin-top:auto على .add نفسه — بعد ما اتحط جوّه .addrow
   (عشان عدّاد الكمية) بقت على عنصر مش ابن الـflex فما بقتش بتعمل حاجة */
.pcard .addrow{margin-top:auto}

@supports (grid-template-rows:subgrid){
  /* المسافة بين صفوف الكروت بقت هامش تحت الكارت: الـsubgrid بيورث
     row-gap الشبكة، فكانت هتتحط بين أجزاء الكارت نفسه */
  .pgrid{row-gap:0}
  .pcard{display:grid;grid-template-rows:subgrid;grid-row:span 8;
    row-gap:0;margin-bottom:var(--pgap)}
  .pcard .pbody{display:contents}
  /* كل جزء بطوله الطبيعي من أول الصف — من غيرها بيتمطّ يملا الصف:
     أزرار الأحجام في كارت بتلات أحجام كانت بتطول لـ٨٠ بكسل عشان جنبه
     كارت بأربعة لفّوا على سطرين */
  .pcard .pbody > *{margin-inline:var(--px);align-self:start}
  .pcard .pbody > h3{margin-top:var(--pt)}
  .pcard .pbody > .addrow{margin-top:0;margin-bottom:var(--pb);align-self:end}
  /* المساحة بقت بتتحجز من الصف نفسه — مش محتاجين حد أدنى ثابت */
  .pcard .pbody .note{min-height:0}
}

/* حالة طلب الاسترجاع — العميل لازم يشوف قراره، مش الأهلية بس.
   بعد الرفض الأهلية بترجع «ينفع تطلب» والرفض بيختفي لو ما اتعرضش هنا. */
.tr-rq{margin-top:1.2rem;padding:.9rem 1rem;border-radius:14px;
  border:1px solid var(--line);background:rgb(var(--void-rgb) / .45);
  border-inline-start:3px solid var(--muted)}
.tr-rq.wait{border-inline-start-color:var(--muted)}
.tr-rq.ok{border-inline-start-color:var(--gold)}
.tr-rq.no{border-inline-start-color:var(--danger)}
.tr-rq-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.tr-rq-head b{font-family:"Noto Kufi Arabic","Reem Kufi",sans-serif;font-size:var(--s--1)}
/* الشارة الذهبية بتقرا كأنها موافقة — الرفض لازم ياخد لونه */
.tr-rq.no .statepill{background:rgb(var(--danger-rgb) / .14);color:var(--danger)!important;
  border-color:rgb(var(--danger-rgb) / .28)}
.tr-rq-reason{margin-top:.5rem;font-size:var(--s--1);line-height:1.8;color:var(--ivory-3)}
.tr-rq-note{margin-top:.5rem;font-size:var(--s--1);line-height:1.8;color:var(--ivory)}
.tr-rq-note span{color:var(--muted)}
.tr-rq-when{margin-top:.5rem;font-size:.76rem;color:var(--muted-2)}

/* إزاحة شريط العرض — لازم تبقى هنا مش في styles.css: الملف ده بيتحمّل
   بعده، و.pagehead/.pdp فيهم padding-block بالاختصار فكان هيلغي أي
   padding-block-start متكتوب قبل كده. */
.pagehead{padding-block-start:calc(var(--promo-h) + clamp(6rem,13vw,9rem))}
.pdp{padding-block-start:calc(var(--promo-h) + clamp(6rem,13vw,9rem))}