/* منيو المندلاوي كافيه: أسود وذهبي. تركيبة «الواجهة ثم الصنف»: غلاف وختم الشعار، كاشي أصناف بأيقونات ذهبية، وكل صنف بصفحته.
   الذهبي بس للأسعار والتحديد والأيقونات والشعار، والباقي كتابة دافية على أسود */
:root{
  --paper:#0B0B0A;--card:#151412;--ink:#F3ECE1;--accent:#F1BD7B;--on-accent:#0B0B0A;
  /* الألوان الثانوية تنحسب من الأساسية، حتى أي ألوان يختارها الكوفي من «المظهر» تبقى متناسقة */
  --raise:color-mix(in srgb,var(--card) 95%,var(--ink));
  --mute:color-mix(in srgb,var(--ink) 60%,var(--paper));
  --line:color-mix(in srgb,var(--ink) 9%,transparent);
  --line-2:color-mix(in srgb,var(--ink) 14%,transparent);
  --gold-a:color-mix(in srgb,var(--accent) 16%,transparent);
  --gold-l:color-mix(in srgb,var(--accent) 34%,transparent);
  --bar:color-mix(in srgb,var(--paper) 90%,transparent);
  --f:"IBM Plex Sans Arabic",system-ui,sans-serif;--h:"Aref Ruqaa",serif;
  --pad:16px;--bar-h:60px;--sub-h:48px;--top:calc(var(--bar-h) + env(safe-area-inset-top));--ease:cubic-bezier(.2,.8,.2,1);
  --cover-h:228px;--badge:92px;
  /* العلامة واسم الكوفي (الخط مالته) ماسكات شفافية بس، تنصبغ بالذهبي من «المظهر»: أخف بكثير من صور ملونة */
  --mark:url(/img/brand/mark-m.webp);--wordmark:url(/img/brand/wordmark-m.webp);
  /* نقشة ذهبية خفيفة: حبوب قهوة متفرقة (بدل النجمة، طلب الـ CEO 2026-10-22)، تنستعمل كماسك فتاخذ لون التحديد من «المظهر» */
  --lattice:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cg%20transform%3D'translate(13%2014)%20rotate(-28)'%3E%3Cellipse%20rx%3D'5.2'%20ry%3D'7.6'%2F%3E%3Cpath%20d%3D'M0%20-7.6C-2.6%20-3%202.6%203%200%207.6'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(37%2036)%20rotate(34)'%3E%3Cellipse%20rx%3D'5.2'%20ry%3D'7.6'%2F%3E%3Cpath%20d%3D'M0%20-7.6C-2.6%20-3%202.6%203%200%207.6'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent;min-height:100vh}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:start}
a{color:inherit}
em{font-style:normal}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* علامة الشعار (الدائرة) بلون التحديد: ماسك على صورة العلامة، حتى تتبع ألوان «المظهر» */
.mk{display:block;background:var(--accent);-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
/* اسم الكوفي بخط الشعار: ذهبي بتدرج خفيف مثل الشعار الأصلي */
.wmk{display:block;width:100%;aspect-ratio:600/290;
  background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 82%,#fff),var(--accent) 45%,color-mix(in srgb,var(--accent) 86%,#000));
  -webkit-mask:var(--wordmark) center/contain no-repeat;mask:var(--wordmark) center/contain no-repeat}
svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* ===== الشريط العلوي. بالصنف: يلزك فوك، يمين رجوع، النص العلامة، يسار البحث.
   بالواجهة: شفاف فوك الغلاف وبيه زر البحث بس، وأول ما تنزل تحت الغلاف يصير شريط كامل بالعلامة ===== */
.bar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;height:var(--top);padding:env(safe-area-inset-top) var(--pad) 0;
  background:var(--bar);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);transition:box-shadow .25s,background .25s}
.bar.edge{box-shadow:0 1px 0 var(--line)}
.ib{grid-row:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s}
.ib:active{transform:scale(.94);background:var(--raise)}
.ib svg{width:21px;height:21px;stroke-width:1.8}
.back{grid-column:1}
.find{grid-column:3}
.v-home .back{display:none}
.v-cat .back{color:var(--accent);box-shadow:inset 0 0 0 1px var(--gold-l)}
.bar-c{grid-column:2;grid-row:1;position:relative;justify-self:stretch;display:grid;place-items:center;height:44px;min-width:0;text-decoration:none;transition:opacity .25s}
.bar-c .mk{width:38px;height:38px;transition:opacity .25s,transform .3s var(--ease)}
/* بصفحة الصنف: أول ما العنوان يطلع من الشاشة، اسم الصنف ياخذ مكان العلامة بالشريط */
.bar-t{position:absolute;inset:0;display:block;line-height:44px;text-align:center;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s var(--ease);pointer-events:none}
.bar.titled .bar-c .mk{opacity:0;transform:scale(.8)}
.bar.titled .bar-t{opacity:1;transform:none}
.v-home .bar{position:fixed;inset-inline:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;pointer-events:none}
.v-home .bar>*{pointer-events:auto}
.v-home .bar .bar-c{opacity:0;pointer-events:none}
.v-home .bar .find{background:color-mix(in srgb,var(--paper) 52%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent)}
.v-home .bar.solid{background:var(--bar);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.v-home .bar.solid .bar-c{opacity:1;pointer-events:auto}
.v-home .bar.solid .find{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}

/* ===== الواجهة: غلاف بزوايا تحت مدورة، ختم الشعار نازل على حافته، اسم الكوفي، سطر الدوام، وأزرار التواصل ===== */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.cover{position:relative;isolation:isolate;overflow:hidden;width:100%;height:calc(var(--cover-h) + env(safe-area-inset-top));border-radius:0 0 32px 32px;background:var(--paper)}
.cover>img{width:100%;height:100%;object-fit:cover}
/* صورة الكوفي: تغميق خفيف فوك (لزر البحث) وجوه (حتى الختم يبرز) */
.cover.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 30%,transparent 60%,rgba(0,0,0,.4))}
/* الغلاف بدون صورة: أسود بنقشة ذهبية خفيفة، توهج من تحت، ودوائر تطلع من ختم الشعار مثل الموج */
.cover:not(.photo){background:
  radial-gradient(62% 95% at 50% 100%,color-mix(in srgb,var(--accent) 19%,transparent),transparent 72%),
  radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 60%),var(--paper);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--accent) 18%,transparent)}
.pat{position:absolute;inset:0;background:var(--accent);opacity:.12;
  -webkit-mask:var(--lattice) 50% 0/48px 48px repeat,radial-gradient(85% 120% at 50% 100%,#000 10%,transparent 78%);-webkit-mask-composite:source-in;
  mask:var(--lattice) 50% 0/48px 48px repeat,radial-gradient(85% 120% at 50% 100%,#000 10%,transparent 78%);mask-composite:intersect}
.ripple{position:absolute;inset:0;opacity:.75;
  background:repeating-radial-gradient(circle at 50% 100%,transparent 0 51px,color-mix(in srgb,var(--accent) 26%,transparent) 51px 52px,transparent 52px 66px);
  -webkit-mask:radial-gradient(70% 115% at 50% 100%,#000 20%,transparent 72%);mask:radial-gradient(70% 115% at 50% 100%,#000 20%,transparent 72%)}
/* الختم: دائرة سودة بعلامة الشعار الذهبية، حافتها بلون الصفحة حتى تبين قاصة الغلاف */
.badge{position:relative;z-index:2;width:var(--badge);height:var(--badge);margin-top:calc(var(--badge) / -2);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%),var(--paper);
  box-shadow:0 0 0 5px var(--paper),inset 0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent),0 12px 30px rgba(0,0,0,.55)}
.badge .mk{width:70%;height:70%}
.hero .wm{width:min(58vw,236px);margin-top:12px}

.tag-l{margin-top:4px;color:var(--mute);font-size:13px}
.status{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:10px;padding:0 var(--pad);font-size:13px;color:var(--mute)}
.st{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-weight:600;font-size:12.5px}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st.on{background:color-mix(in srgb,#5FD08A 13%,transparent);color:#7FDCA2}.st.off{background:var(--card);color:var(--mute)}
/* أزرار التواصل: متساوية، 4 كحد أعلى. إذا أقل، ما تتمدد على كل العرض */
.acts{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;width:calc(100% - 2 * var(--pad));max-width:calc(var(--n) * 96px + (var(--n) - 1) * 10px);margin-top:14px}
.acts a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:66px;padding:10px 4px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font-size:12.5px;font-weight:600;transition:transform .15s,background .2s}
.acts a:active{transform:scale(.96);background:var(--raise)}
.acts svg{width:21px;height:21px;stroke:var(--accent);stroke-width:1.7}
/* فاصل بين الواجهة والأصناف: خط ذهبي رفيع يختفي بالطرفين (مثل الخطوط جنب «صُنع للأصدقاء» بالشعار) ومعين صغير بالنص */
.divider{display:flex;align-items:center;gap:10px;width:min(76%,420px);margin-top:24px}
.divider i{flex:1;height:1px;background:linear-gradient(to left,transparent,color-mix(in srgb,var(--accent) 55%,transparent))}
.divider i:last-child{background:linear-gradient(to right,transparent,color-mix(in srgb,var(--accent) 55%,transparent))}
.divider b{width:6px;height:6px;flex:none;rotate:45deg;border-radius:1px;background:var(--accent);opacity:.85}
.notice{width:calc(100% - 2 * var(--pad));margin-top:12px;padding:10px 14px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:1.75;text-align:center}
@media (prefers-reduced-motion:no-preference){
  .hero .wm{animation:rise .9s var(--ease) both}
  .cover:not(.photo)>span{animation:fade 1.6s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(8px) scale(.985)}}
  @keyframes fade{from{opacity:0}}
}

/* كاشي الأصناف: أيقونة ذهبية بدائرة مثل ختم الشعار، الاسم، والعدد. السطر الأخير بالنص */
.tiles{--c:2;--g:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);margin:20px var(--pad) 0}
.tile{flex:0 0 calc((100% - (var(--c) - 1) * var(--g)) / var(--c));min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:146px;padding:16px 10px 14px;border-radius:22px;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;text-align:center;transition:transform .15s,background .2s}
.tile:active{transform:scale(.975);background:var(--raise)}
.ic{flex:none;display:grid;place-items:center;border-radius:50%;color:var(--accent);
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);
  box-shadow:inset 0 0 0 1px var(--gold-l),0 0 0 4px var(--card),0 0 0 5px color-mix(in srgb,var(--accent) 9%,transparent)}
.ic svg{stroke-width:1.5}
.tile .ic{width:58px;height:58px;margin-bottom:11px}
.tile .ic svg{width:28px;height:28px}
.tile b{font-size:15.5px;font-weight:600;line-height:1.4}
.tile small{font-size:12px;color:var(--mute)}

/* عناوين: الاسم بالرقعة، خط رفيع، وتلميح */
.ch{display:flex;align-items:center;gap:12px;margin:34px 0 14px}
.ch h2{font-family:var(--h);font-size:28px;font-weight:700;line-height:1.25}
.ch i{flex:1;height:1px;background:linear-gradient(to left,var(--line-2),transparent)}
.ch span{font-size:12.5px;color:var(--mute);white-space:nowrap}

/* اختيارات المندلاوي: شريط يتسحب */
.picks{padding:0 var(--pad)}
.rail{display:flex;gap:12px;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 4px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.pk{position:relative;flex:none;width:214px;scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;padding:8px 8px 14px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:transform .15s}
.pk:active{transform:scale(.98)}
.pk .ph{border-radius:18px}
.pk em{position:absolute;top:16px;inset-inline-start:16px;z-index:1;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--accent);backdrop-filter:blur(6px)}
.pk>b{font-size:16px;font-weight:600;margin:10px 6px 0}
.pk .pr{margin:0 6px}

/* ===== صفحة الصنف ===== */
.cv{padding:0 var(--pad)}
.ct{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.ct .ic{width:48px;height:48px}
.ct .ic svg{width:24px;height:24px}
.ct h1{font-family:var(--h);font-size:30px;font-weight:700;line-height:1.3}
.ct h1:focus{outline:0}
.ct div>span{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.ct>div{min-width:0}

/* شريط الأقسام الفرعية: كلام بدون كبسولات، وخط ذهبي يمشي تحت القسم اللي إنت بيه. يلزك تحت الشريط العلوي */
.sub{position:sticky;top:var(--top);z-index:15;margin:0 calc(-1 * var(--pad)) 4px;padding:0 var(--pad);height:var(--sub-h);overflow-x:auto;scrollbar-width:none;
  background:var(--bar);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.sub::-webkit-scrollbar{display:none}
.sub-in{position:relative;display:flex;align-items:stretch;gap:2px;width:max-content;min-width:100%;height:100%}
.sub a{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--mute);white-space:nowrap;transition:color .25s}
.sub a.on{color:var(--ink);font-weight:600}
.sub .ind{position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:var(--accent);pointer-events:none}
.sub .ind.go{transition:transform .38s var(--ease),width .38s var(--ease)}
.sub a:first-child{margin-inline-start:-13px}

/* عنوان القسم الفرعي: معين ذهبي صغير، الاسم، والعدد */
.grp{scroll-margin-top:calc(var(--top) + var(--sub-h) + 10px)}
.gh{display:flex;align-items:center;gap:10px;margin:24px 2px 12px}
.grp:first-of-type .gh{margin-top:16px}
.gh::before{content:"";width:7px;height:7px;flex:none;rotate:45deg;background:var(--accent);border-radius:1.5px}
.gh h2{font-size:16.5px;font-weight:600;letter-spacing:.1px}
.gh span{min-width:24px;height:22px;padding:0 7px;display:inline-grid;place-items:center;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:11.5px;font-weight:600;color:var(--mute)}

/* المنتجات: كاشي مربع بعمودين (3 بالآيباد بالطول، 4 بالعرض)، تحته الاسم والسعر */
.list.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.ph{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--paper)}
/* صور صاحب الكوفي من الموبايل بأي قياس: تنقص مربع من الوسط */
.ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.gc{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;transition:transform .15s}
.gc:active{transform:scale(.98)}
.gc .ph{box-shadow:inset 0 0 0 1px var(--line)}
.gc em{position:absolute;top:8px;inset-inline-start:8px;z-index:1;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--accent);backdrop-filter:blur(6px)}
.gc>b{font-size:15px;font-weight:600;line-height:1.45;margin:8px 4px 0}
.gc .pr{margin:0 4px;font-size:15px}
/* المنتج بدون صورة: كاشي غامق بنقشة ذهبية خفيفة وإطار رفيع جوه، بنصه أيقونة الصنف واسم المنتج بخط الرقعة الذهبي.
   كل كاشي بيه اسم مختلف، فالسطر الكامل بدون صور يبين مثل منيو مطبوع، مو تكرار للشعار */
.ph.none{display:grid;place-items:center;
  background:radial-gradient(85% 80% at 50% 38%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%),linear-gradient(165deg,var(--card),var(--paper));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent)}
.ph.none::before{content:"";position:absolute;inset:0;background:var(--accent);opacity:.08;
  -webkit-mask:var(--lattice) 50% 50%/38px 38px repeat,radial-gradient(closest-side,#000 30%,transparent 100%);-webkit-mask-composite:source-in;
  mask:var(--lattice) 50% 50%/38px 38px repeat,radial-gradient(closest-side,#000 30%,transparent 100%);mask-composite:intersect}
.ph.none::after{content:"";position:absolute;inset:7px;border-radius:14px;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}
.np{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 14px;text-align:center}
.np svg{width:22px;height:22px;color:var(--accent);stroke-width:1.5;opacity:.75}
.np b{font-family:var(--h);font-weight:700;font-size:clamp(19px,5.9vw,28px);line-height:1.35;color:var(--accent);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-weight:700;font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums}
.pr i{font-style:normal;font-size:11px;color:var(--mute);font-weight:500}
.half{font-size:11.5px;font-weight:500;color:var(--mute)}
.so{font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--raise);color:var(--mute)}
.it.out .th,.it.out .ph{filter:grayscale(1);opacity:.45}.it.out>b,.it.out .pr,.it.out .nm b{color:var(--mute)}

/* نتائج البحث بس: سطور (صورة صغيرة، الاسم، الصنف، السعر) */
.list.rows{display:grid;gap:10px}
.it.row{display:flex;align-items:center;gap:14px;width:100%;min-height:100px;padding:10px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:transform .15s,background .2s}
.it.row:active{transform:scale(.985);background:var(--raise)}
.th{position:relative;width:80px;height:80px;border-radius:16px;overflow:hidden;flex:none;background:var(--paper)}
.th img{width:100%;height:100%;object-fit:cover}
.th.none{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 68%),var(--paper);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 13%,transparent)}
.th.none .mk{width:50%;aspect-ratio:1;opacity:.92}
.tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.nm{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.nm b{font-size:16px;font-weight:600;line-height:1.5}
.nm em,.tg{font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.tx small{color:var(--mute);font-size:12.5px;line-height:1.6}

/* آخر الصنف: الصنف الجاي، ورجوع لكل الأصناف */
.next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:14px;margin-top:34px;padding:14px 16px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:transform .15s,background .2s}
.next:active{transform:scale(.985);background:var(--raise)}
.next small{grid-column:2;grid-row:1;font-size:12px;color:var(--mute)}
.next .ic{grid-column:1;grid-row:1/3;width:46px;height:46px}
.next .ic svg{width:22px;height:22px}
.next b{grid-column:2;grid-row:2;font-size:16px;font-weight:600}
.next>svg{grid-column:3;grid-row:1/3;width:22px;height:22px;stroke-width:1.8;color:var(--accent)}
.all{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;min-height:44px;margin:14px auto 0;padding:0 18px;border-radius:99px;color:var(--mute);text-decoration:none;font-size:14px;font-weight:500}
.all svg{width:18px;height:18px;stroke-width:1.8}

/* الدخول للصفحة: ظهور هادي */
@media (prefers-reduced-motion:no-preference){
  .enter{animation:enter .32s var(--ease) both}
  @keyframes enter{from{opacity:0;transform:translateY(8px)}}
}

/* ===== الفوتر: الدوام الكامل لكل الأيام، والكريدت ===== */
footer{text-align:center;padding:44px 18px calc(40px + env(safe-area-inset-bottom));color:var(--mute);font-size:13px;margin-top:44px;border-top:1px solid var(--line)}
/* الفوتر يعيد استعمال العلامة واسم الكوفي اللي انحملن فوك، فما يحمل صورة جديدة */
.fmk{width:46px;height:46px;margin:0 auto 12px}
.flogo{width:150px;margin:0 auto 18px;opacity:.95}
.fad{display:flex;align-items:center;justify-content:center;gap:6px;max-width:320px;margin:0 auto 14px;line-height:1.7}
.fad svg{width:16px;height:16px;flex:none;stroke:var(--accent);stroke-width:1.8}
.hours{list-style:none;max-width:320px;margin:0 auto 16px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:6px 16px}
.hours li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.hours li:last-child{border:0}
.hours li span:first-child{font-weight:600;color:var(--ink)}
footer a{color:var(--ink);font-weight:600}
.by{margin-top:14px;font-size:12px}

/* ===== تفاصيل المنتج: ورقة من جوه بالموبايل، بالنص بالتابلت ===== */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.62);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet.open{opacity:1;pointer-events:auto}
.sc{position:relative;outline:0;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--card);border-radius:28px 28px 0 0;box-shadow:0 -1px 0 var(--line-2);transform:translateY(40px);transition:transform .32s var(--ease);padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain}
.sheet.open .sc{transform:none}
.sc .x{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(8px);display:grid;place-items:center}
.sc .x svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2}
/* صورة المنتج بقياسها الحقيقي (عرضية، مربعة، أو طولية)، والطولية تنقص من فوك وجوه حتى الكلام يبقى بالشاشة */
.sc .im{display:grid;place-items:center;background:var(--paper)}
.sc .im img{width:100%;height:auto;max-height:min(60vh,560px);object-fit:cover}
.sc .im.none{position:relative;overflow:hidden;height:200px;background:radial-gradient(50% 75% at 50% 50%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 75%),var(--paper)}
.sc .im.none::before{content:"";position:absolute;inset:0;background:var(--accent);opacity:.09;
  -webkit-mask:var(--lattice) 50% 50%/36px 36px repeat,radial-gradient(closest-side,#000 25%,transparent 100%);-webkit-mask-composite:source-in;
  mask:var(--lattice) 50% 50%/36px 36px repeat,radial-gradient(closest-side,#000 25%,transparent 100%);mask-composite:intersect}
.sc .im.none .mk{position:relative;width:88px;aspect-ratio:1}
.sc .bd{padding:20px 22px 28px}
.sc .cn{font-size:12.5px;color:var(--mute);font-weight:600}
.sc h3{font-family:var(--h);font-size:32px;line-height:1.35;margin-top:4px}
.sc p{color:var(--mute);line-height:1.8;margin-top:6px}
.sc p:empty{display:none}
.sc .chips{display:flex;gap:6px;margin-top:10px}
.sc .chips:empty{display:none}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.prices div{background:var(--paper);border-radius:16px;padding:12px 16px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mute);font-size:13px}
.prices span{display:block;font-size:12px}
.prices b{font-size:24px;color:var(--accent);font-variant-numeric:tabular-nums}
.prices div:only-child{grid-column:1/-1}

/* ===== البحث: شاشة كاملة فوك المنيو، يدور بكل المنتجات ===== */
.sv{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:var(--paper)}
.sv-top{display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) var(--pad) 10px;box-shadow:0 1px 0 var(--line)}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 16px;height:50px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--mute);transition:box-shadow .2s}
.search:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.search svg{width:19px;height:19px;stroke-width:2;flex:none}
.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.search input::placeholder{color:var(--mute);opacity:1}
.search input::-webkit-search-cancel-button{display:none}
.sv-x{flex:none;height:44px;padding:0 8px;color:var(--accent);font-weight:600;font-size:15px}
.sv-b{flex:1;overflow-y:auto;padding:16px var(--pad) calc(28px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.sv-hint p,.sv-n{font-size:13px;color:var(--mute);margin-bottom:10px}
.sv-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sv-cats a{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font-size:14px;font-weight:500}
.sv-cats svg{flex:none;width:22px;height:22px;stroke:var(--accent);stroke-width:1.5}
.sv .it.row small{color:var(--mute);font-size:12px}
.empty{text-align:center;color:var(--mute);padding:48px 18px}

.nf{text-align:center;padding:90px 20px}
.nf .mk{width:64px;height:64px;margin:0 auto}
.nf b{display:block;font-family:var(--h);font-size:70px;color:var(--accent);margin-top:10px}
.nf h1{font-size:18px;font-weight:600}
.nf a{display:inline-flex;align-items:center;height:46px;padding:0 22px;margin-top:18px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none}

/* ===== التابلت بالطول (آيباد ميني، آيباد، آيباد برو): كاشي أصناف بـ 4 أعمدة، والمنتجات بثلاثة ===== */
@media (min-width:700px){
  :root{--pad:max(32px,calc((100vw - 1040px) / 2));--bar-h:70px;--sub-h:52px;--cover-h:300px;--badge:108px}
  .bar{grid-template-columns:48px minmax(0,1fr) 48px}
  .ib{width:48px;height:48px}
  .bar-c .mk{width:44px;height:44px}
  .bar-t{font-size:17px}
  .cover{border-radius:0 0 44px 44px}
  .hero .wm{width:280px;margin-top:14px}
  .tag-l,.status{font-size:14px}
  .acts{max-width:calc(var(--n) * 120px + (var(--n) - 1) * 12px);gap:12px;margin-top:18px}
  .acts a{min-height:74px;font-size:13.5px}
  .notice{max-width:640px}
  .divider{margin-top:30px}
  .tiles{--c:var(--cp);--g:14px;margin-top:26px}
  .tile{min-height:168px;border-radius:24px}
  .tile .ic{width:64px;height:64px;margin-bottom:12px}
  .tile .ic svg{width:30px;height:30px}
  .tile b{font-size:16.5px}
  .tile small{font-size:12.5px}
  .ch{margin-top:44px}
  .ch h2{font-size:32px}
  .pk{width:240px}
  .ct{margin-top:26px}
  .ct .ic{width:56px;height:56px}
  .ct .ic svg{width:27px;height:27px}
  .ct h1{font-size:36px}
  .sub a{font-size:15px;padding:0 15px}
  .sub a:first-child{margin-inline-start:-15px}
  .list.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 16px}
  .gc>b{font-size:16px}
  .gc .pr{font-size:16px}
  .ph.none::after{inset:9px;border-radius:16px}
  .np svg{width:26px;height:26px}
  .list.rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .it.row{min-height:112px;padding:12px;gap:16px}
  .th{width:88px;height:88px}
  .next{max-width:560px;margin-inline:auto}
  .sheet{align-items:center;padding:24px}
  .sc{border-radius:28px;box-shadow:0 0 0 1px var(--line-2),0 30px 80px rgba(0,0,0,.5)}
  .sv-b{padding-top:22px}
  .sv-cats{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===== التابلت بالعرض والكمبيوتر: كل الأصناف بسطر واحد، والمنتجات بأربعة أعمدة ===== */
@media (min-width:1100px){
  :root{--pad:max(40px,calc((100vw - 1240px) / 2));--cover-h:290px}
  .tiles{--c:var(--cl)}
  .tile{min-height:160px;padding-inline:8px}
  .tile b{font-size:15.5px}
  .rail{--bleed:var(--pad);margin-inline-start:calc(-1 * var(--bleed));margin-inline-end:calc(-1 * var(--bleed))}
  .list.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .list.rows{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* تفاصيل المنتج: الصورة يمين والكلام يسار */
  .sheet#sheet .sc{width:min(860px,100%);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;max-height:min(88vh,560px)}
  .sc #sheet-body{display:contents}
  .sc .im{height:100%;min-height:420px}
  .sc .im img{height:100%;max-height:none}
  .sc .im.none{height:100%}
  .sc .bd{overflow:auto;padding:36px 32px;align-self:center}
}
@media (hover:hover){
  .tile:hover,.next:hover,.it.row:hover,.sv-cats a:hover,.acts a:hover{background:var(--raise)}
  .ib:hover{background:var(--raise)}
  .gc:hover .ph img{transform:scale(1.03)}
  .gc .ph img{transition:transform .4s var(--ease)}
}