/* ============ الألوان والخطوط ============ */
:root{
  --bg:#FAF6EF;          /* خلفية كريمي فاتحة */
  --card:#FFFFFF;        /* الكروت أبيض */
  --soft:#F1EAE0;        /* خلفية البحث والأزرار الهادية */
  --text:#2E2723;
  --muted:#8A8078;
  --gold:#C4A05E;        /* اللون الدهبي */
  --gold-soft:#EFE2CB;
  --line:#EDE4D8;
  --green:#25D366;       /* واتساب */
  --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo',system-ui,-apple-system,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============ خلفية الصفحة (صورة الكافيه) ============
   طبقة ثابتة ورا المحتوى كله — مش بتتحرك مع التمرير.
   فوقها طبقة كريمي شفافة عشان الكروت والكلام يفضلوا واضحين.
   لو حبيتي تغيّري الصورة: بدّلي ملف assets/bg.jpg
   ولو الخلفية باينة أوي أو خفيفة أوي: غيّري الرقم .55 تحت
   (رقم أكبر = خلفية أهدى، رقم أصغر = الصورة تبان أكتر) */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;
  background:url("assets/bg.jpg") center top / cover no-repeat;
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;
  background:rgba(250,246,239,.55);
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:520px;margin:0 auto;position:relative;min-height:100vh}

/* ============ الهيدر ============ */
.appbar{
  position:sticky;top:0;z-index:30;
  background:rgba(250,246,239,.94);backdrop-filter:blur(12px);
  padding:14px 16px 10px;
}
.appbar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.logo{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.45rem;font-weight:700;color:var(--gold);
  letter-spacing:3px;
}
.icon-btn{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--text);
}
.icon-btn svg{width:22px;height:22px}

/* البحث + السلة */
.search-row{display:flex;gap:10px;align-items:center}
.search{
  flex:1;display:flex;align-items:center;gap:10px;
  background:var(--soft);border-radius:999px;padding:11px 16px;
}
.search svg{width:19px;height:19px;color:var(--muted);flex:0 0 auto}
.search input{
  flex:1;border:0;background:none;outline:none;
  font-family:inherit;font-size:.92rem;color:var(--text);
}
.search input::placeholder{color:var(--muted)}
.cart-btn{
  display:flex;align-items:center;gap:7px;
  background:var(--soft);border-radius:999px;padding:11px 15px;
  font-weight:700;font-size:.9rem;white-space:nowrap;
}
.cart-btn svg{width:19px;height:19px}
.cart-btn b{color:var(--gold)}

/* ============ البانر (الفيديو) ============ */
/* البانر = لوح كريمي فيه الكلام + الفيديو جنبه، وبينهم تدرّج ناعم.
   الطريقة دي بتضمن إن الكلام يفضل واضح مهما كان لون الفيديو. */
.banner{
  margin:4px 16px 0;border-radius:var(--r);overflow:hidden;
  position:relative;height:200px;display:flex;background:#FFFCF6;
  box-shadow:0 4px 20px rgba(140,110,60,.08);
}
.banner video{flex:1;min-width:0;height:100%;object-fit:cover;display:block}
.banner-text{
  flex:0 0 54%;position:relative;z-index:2;padding:0 20px;
  display:flex;flex-direction:column;justify-content:center;background:#FFFCF6;
}
.banner-text::after{ /* التدرّج الناعم ناحية الفيديو */
  content:"";position:absolute;inset-block:0;inset-inline-end:-46px;width:46px;
  background:linear-gradient(to left,#FFFCF6,rgba(255,252,246,0));
}
html[dir="ltr"] .banner-text::after{
  background:linear-gradient(to right,#FFFCF6,rgba(255,252,246,0));
}
.banner-text h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.75rem;line-height:1.25;color:var(--gold);font-weight:700;
}
.banner-text p{font-size:.85rem;color:#6B615A;margin-top:6px}

/* ============ شريط الأقسام ============ */
.chips{
  display:flex;gap:9px;overflow-x:auto;
  padding:18px 16px 6px;scrollbar-width:none;
  position:sticky;top:118px;z-index:20;
  background:linear-gradient(180deg,var(--bg) 70%,transparent);
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:8px 18px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);
  font-size:.88rem;font-weight:600;color:var(--text);transition:.18s;
}
.chip.on{background:var(--gold);border-color:var(--gold);color:#fff}

/* ============ شبكة الأصناف ============ */
.grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:10px 16px 150px;
}
.cat-head{
  grid-column:1/-1;font-size:1.05rem;font-weight:800;
  padding:14px 2px 0;scroll-margin-top:180px;
}
.card{
  background:var(--card);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 3px 14px rgba(140,110,60,.07);
  transition:.15s;
}
.card:active{transform:scale(.985)}
.card-img{
  height:132px;margin:10px 10px 0;border-radius:14px;
  background:linear-gradient(140deg,var(--gold-soft),#F7EFE2);
  display:grid;place-items:center;font-size:2.6rem;
  position:relative;overflow:hidden;
}
/* الصورة الحقيقية لو الصنف عنده img في data.js
   object-position: center = الصورة بتتقص من نصها، يعني المنتج
   يفضل في المنتصف مهما كان مقاس الكارت */
.card-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;
}
.fav-btn{
  position:absolute;top:7px;inset-inline-end:7px;
  width:29px;height:29px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--muted);
  font-size:.95rem;line-height:1;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(140,110,60,.13);
}
.fav-btn.on{color:#D9534F}
.card-info{padding:11px 13px 13px;display:flex;flex-direction:column;flex:1}
.card-info h3{font-size:.98rem;font-weight:700;line-height:1.4}
.card-info p{font-size:.76rem;color:var(--muted);line-height:1.5;margin:2px 0 10px;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.price{font-size:1.05rem;font-weight:800}
.price span{font-size:.6em;font-weight:400;color:var(--muted)}
.add{
  background:var(--gold);color:#fff;font-weight:700;font-size:.82rem;
  border-radius:999px;padding:7px 16px;
}
.add:active{filter:brightness(.93)}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 0}

/* ============ فوتر ============ */
footer{
  text-align:center;padding:26px 20px 120px;color:var(--muted);
  font-size:.8rem;border-top:1px solid var(--line);margin:0 16px;
}
footer strong{display:block;color:var(--text);font-size:.95rem;margin-bottom:4px}

/* ============ زرار واتساب العائم ============ */
/* دايرة صغيرة عشان ما تغطّيش زراير "أضف" في الكروت */
.wa{
  position:fixed;bottom:88px;inset-inline-end:calc(50% - 260px + 14px);z-index:40;
  width:52px;height:52px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;
  box-shadow:0 5px 18px rgba(37,211,102,.42);
}
.wa svg{width:27px;height:27px;fill:#fff}
@media (max-width:552px){.wa{inset-inline-end:14px}}

/* ============ الشريط السفلي ============ */
.tabbar{
  position:fixed;bottom:0;inset-inline:0;z-index:45;
  max-width:520px;margin:0 auto;
  background:var(--card);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:9px 0 calc(9px + env(safe-area-inset-bottom));
  box-shadow:0 -3px 18px rgba(140,110,60,.07);
}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.72rem;color:var(--muted);position:relative}
.tabbar a.on{color:var(--gold)}
.tabbar svg{width:23px;height:23px}
.badge{
  position:absolute;top:-3px;inset-inline-end:22%;
  background:var(--gold);color:#fff;font-size:.62rem;font-weight:800;
  min-width:17px;height:17px;border-radius:999px;display:none;place-items:center;padding:0 4px;
}
.badge.show{display:grid}

/* ============ صفحة تفاصيل المنتج ============ */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:14px 16px;background:rgba(250,246,239,.94);backdrop-filter:blur(12px);
}
.back{width:38px;height:38px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:0 2px 8px rgba(140,110,60,.1)}
.back svg{width:20px;height:20px;color:var(--text)}
.topbar h2{font-size:1rem;font-weight:700;flex:1}

.detail{padding:0 16px 170px}
.detail-img{
  height:210px;border-radius:var(--r);margin:6px 0 20px;
  background:linear-gradient(140deg,var(--gold-soft),#F7EFE2);
  display:grid;place-items:center;font-size:5rem;
  box-shadow:0 4px 18px rgba(140,110,60,.09);
  overflow:hidden;
}
.detail-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;
}
.detail h1{font-size:1.55rem;font-weight:800;line-height:1.35}
.detail .lead{color:var(--muted);font-size:.88rem;margin-bottom:12px}
.base-price{font-size:1.5rem;font-weight:800;color:var(--gold)}
.base-price span{font-size:.52em;font-weight:400;color:var(--muted)}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 18px}
.pill{
  font-size:.74rem;color:#6B615A;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:4px 13px;
}
.detail p.desc{color:#5C534C;font-size:.93rem}

.section-h{font-size:.95rem;font-weight:800;margin:26px 0 10px}
.opt{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1.5px solid var(--line);
  border-radius:14px;padding:13px 15px;margin-bottom:9px;transition:.15s;
}
.opt.on{border-color:var(--gold);background:#FFFBF3}
.dot{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid #D8CDBE;display:grid;place-items:center;transition:.15s}
.opt.check .dot{border-radius:6px}
.opt.on .dot{border-color:var(--gold)}
.opt.on .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold)}
.opt.check.on .dot::after{border-radius:2px}
.opt-name{flex:1;font-size:.92rem;font-weight:600}
.opt-price{font-size:.83rem;color:var(--muted)}

.qty{display:flex;align-items:center;gap:20px;margin-top:6px}
.qty-btn{
  width:44px;height:44px;border-radius:50%;background:var(--card);
  border:1.5px solid var(--line);font-size:1.4rem;font-weight:700;
  display:grid;place-items:center;
}
.qty-btn:active{border-color:var(--gold);color:var(--gold)}
.qty-num{font-size:1.3rem;font-weight:800;min-width:30px;text-align:center}

/* الشريط الثابت تحت في صفحة المنتج */
.bottombar{
  position:fixed;bottom:0;inset-inline:0;z-index:45;
  max-width:520px;margin:0 auto;
  background:var(--card);border-top:1px solid var(--line);
  padding:13px 16px calc(13px + env(safe-area-inset-bottom));
}
.btn-main{
  width:100%;background:var(--gold);color:#fff;
  font-weight:800;font-size:1rem;border-radius:16px;padding:15px;
  display:flex;justify-content:center;gap:10px;
}
.btn-main:active{filter:brightness(.93)}

/* ============ صفحة الطلب ============ */
.order-list{padding:8px 16px 170px}
.line{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border-radius:16px;padding:13px;margin-bottom:10px;
  box-shadow:0 3px 12px rgba(140,110,60,.06);
}
.line .ico{
  flex:0 0 50px;height:50px;border-radius:12px;
  background:linear-gradient(140deg,var(--gold-soft),#F7EFE2);
  display:grid;place-items:center;font-size:1.5rem;
}
.line-body{flex:1;min-width:0}
.line-body h4{font-size:.95rem;font-weight:700}
.line-body small{display:block;color:var(--muted);font-size:.76rem;line-height:1.6}
.line-price{font-weight:800;white-space:nowrap;font-size:.95rem}
.del{color:#C0564C;font-size:.75rem;font-weight:700;margin-top:4px}
.sum{
  background:var(--card);border-radius:16px;padding:16px;margin-top:16px;
  box-shadow:0 3px 12px rgba(140,110,60,.06);
}
.sum div{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);padding:3px 0}
.sum div.grand{font-size:1.1rem;font-weight:800;color:var(--text);border-top:1px solid var(--line);margin-top:9px;padding-top:11px}
.btn-wa{
  width:100%;background:var(--green);color:#fff;font-weight:800;font-size:1rem;
  border-radius:16px;padding:15px;display:flex;justify-content:center;align-items:center;gap:10px;
}
.btn-wa svg{width:21px;height:21px;fill:#fff}

/* رسالة التأكيد */
.toast{
  position:fixed;bottom:150px;inset-inline:0;z-index:60;
  margin:0 auto;width:max-content;max-width:88%;
  background:var(--text);color:#fff;font-weight:700;font-size:.88rem;
  padding:11px 22px;border-radius:999px;
  opacity:0;transform:translateY(14px);transition:.28s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0)}