:root{
  /* ── نظام ألوان العلامة ── */
  --marble:#FDFBF8; --cream:#FAF6EE; --beige:#F0E6D0; --border:#E0CCAA;
  --gold-light:#E8D5A8; --gold:#C9A96E; --gold-vivid:#B8943F; --gold-dark:#A07D45;
  --text-dark:#2C1F0E; --text-mid:#5A4535; --brown-soft:#8B6E4E;
  --pink-pastel:#F9D5E5; --pink-mid:#E0849F; --pink-deep:#C4587A;

  /* ── حزمة الخطوط: الفخامة الرقمية ── */
  --font-ar-display:'El Messiri',sans-serif;
  --font-ar-body:'Cairo',sans-serif;
  --font-en-display:'Playfair Display',serif;
  --font-en-body:'Raleway',sans-serif;

  --radius-lg:20px; --radius-md:14px; --radius-sm:10px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; scroll-behavior:smooth; }
body{
  font-family:var(--font-ar-body);
  background:var(--cream);
  color:var(--text-dark);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  padding-bottom:2rem;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.app{ max-width:520px; margin:0 auto; background:var(--marble); min-height:100vh; position:relative; }

/* ══ HEADER ══ */
header{
  background:linear-gradient(160deg,#1f150a 0%, var(--text-dark) 55%, #4a3320 100%);
  padding:1.4rem 1.1rem 0; position:sticky; top:0; z-index:30;
  border-bottom:1px solid rgba(201,169,110,0.35);
  transition:padding .25s ease;
}
header.scrolled{ padding-top:.7rem; }
.brand-row{ display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; transition:.25s; overflow:hidden; }
header.scrolled .brand-row{ max-height:0; margin-bottom:0; opacity:0; }
.brand-logo{
  width:42px; height:42px; border-radius:50%; background:var(--marble);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(201,169,110,.5);
}
.brand-logo img{ width:100%; height:100%; object-fit:cover; }
.brand-name-ar{ font-family:var(--font-ar-display); font-size:1.1rem; font-weight:700; color:#fff; line-height:1.15; }
.brand-name-en{ font-family:var(--font-en-display); font-style:italic; font-size:.68rem; color:var(--gold-light); letter-spacing:1.4px; }

.search-box{
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(201,169,110,.35);
  border-radius:var(--radius-md); padding:.65rem .85rem; margin-bottom:.9rem;
}
.search-box input{
  background:none; border:none; outline:none; flex:1; color:#fff;
  font-family:var(--font-ar-body); font-size:.83rem;
}
.search-box input::placeholder{ color:rgba(255,255,255,.45); }
.search-icon{ color:var(--gold-light); font-size:.85rem; }
.search-clear{ color:var(--gold-light); font-size:.75rem; display:none; }
.search-clear.show{ display:block; }

/* ══ CATEGORY CHIPS ══ */
.chips-wrap{ background:var(--text-dark); padding:0 1.1rem .9rem; position:sticky; top:0; z-index:29; }
.chips{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; font-family:var(--font-ar-body); font-size:.76rem; font-weight:600;
  padding:.48rem 1rem; border-radius:20px; border:1px solid rgba(201,169,110,.4);
  color:var(--gold-light); background:rgba(255,255,255,.04); white-space:nowrap; transition:.15s;
}
.chip.active{
  background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff;
  border-color:var(--gold-dark); box-shadow:0 3px 10px rgba(160,125,69,.35);
}

/* ══ SECTIONS ══ */
.section-label{ display:flex; align-items:baseline; gap:.55rem; padding:1.1rem 1.1rem .7rem; }
.section-label .ar{ font-family:var(--font-ar-display); font-size:1rem; font-weight:700; }
.section-label .en{ font-family:var(--font-en-display); font-style:italic; font-size:.72rem; color:var(--brown-soft); }
.section-line{ flex:1; height:1px; background:var(--border); }

.empty-state{ text-align:center; padding:3rem 1.5rem; color:var(--brown-soft); font-size:.85rem; }

/* ══ PRODUCT GRID ══ */
.grid{ padding:0 1.1rem; display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:.4rem; }
.card{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(224,204,170,.5); box-shadow:0 3px 14px rgba(44,31,14,.06);
  display:flex; flex-direction:column; position:relative; text-align:right;
}
.card-media{ aspect-ratio:1/1; position:relative; background:var(--beige); overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.badge{
  position:absolute; top:.45rem; right:.45rem; font-size:.6rem; font-weight:700;
  padding:.2rem .5rem; border-radius:20px; background:var(--pink-deep); color:#fff;
  box-shadow:0 2px 6px rgba(196,88,122,.4); z-index:2;
}
.badge.new{ background:var(--gold-vivid); }
.badge.featured{ background:var(--text-dark); }
.fav-btn{
  position:absolute; bottom:.4rem; left:.4rem; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--pink-deep); z-index:2;
}
.fav-btn.active{ background:var(--pink-deep); color:#fff; }
.card-body{ padding:.65rem .7rem .75rem; display:flex; flex-direction:column; flex:1; }
.card-name-ar{ font-family:var(--font-ar-display); font-size:.86rem; font-weight:700; line-height:1.25; }
.card-name-en{ font-family:var(--font-en-display); font-style:italic; font-size:.63rem; color:var(--brown-soft); margin-bottom:.4rem; direction:ltr; text-align:right; }
.card-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.price-ar{ font-family:var(--font-ar-display); font-size:.82rem; font-weight:700; }
.price-old{ font-size:.62rem; color:var(--brown-soft); text-decoration:line-through; margin-inline-start:.3rem; }
.unavailable .card-media img{ filter:grayscale(60%); opacity:.55; }
.unavailable .card-media::after{
  content:'غير متوفر حاليًا'; position:absolute; inset:0; background:rgba(44,31,14,.4);
  color:#fff; font-size:.66rem; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:.4rem; z-index:1;
}

/* ══ WHATSAPP FAB ══ */
.fab{
  position:fixed; bottom:1.1rem; left:50%; transform:translateX(calc(-1 * min(260px,50vw) + 1.1rem));
  width:50px; height:50px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:40;
}

/* ══ BOTTOM SHEET ══ */
.overlay{
  position:fixed; inset:0; background:rgba(44,31,14,.5); z-index:98;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.overlay.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:99; max-width:520px; margin:0 auto;
  background:#fff; border-radius:24px 24px 0 0; max-height:88vh; overflow-y:auto;
  transform:translateY(100%); transition:transform .3s ease;
}
.sheet.open{ transform:translateY(0); }
.sheet-media{ height:230px; position:relative; background:var(--beige); overflow:hidden; }
.sheet-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity .3s; }
.sheet-media img.active{ opacity:1; }
.sheet-close{
  position:absolute; top:.8rem; left:.8rem; width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center; z-index:3;
}
.play-btn{
  position:absolute; inset:0; margin:auto; width:44px; height:44px; background:rgba(44,31,14,.55);
  border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; z-index:2;
}
.sheet-body{ padding:1.3rem 1.2rem 1.6rem; }
.sheet-name-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.15rem; }
.sheet-name-ar{ font-family:var(--font-ar-display); font-size:1.25rem; font-weight:700; }
.sheet-heart{ font-size:1.15rem; color:var(--pink-deep); flex-shrink:0; }
.sheet-name-en{ font-family:var(--font-en-display); font-style:italic; font-size:.8rem; color:var(--brown-soft); margin-bottom:.7rem; direction:ltr; text-align:right; }
.sheet-desc{ font-family:var(--font-ar-body); font-weight:300; font-size:.84rem; color:var(--text-mid); line-height:1.65; margin-bottom:.9rem; }
.divider{ height:1px; background:var(--beige); margin:.9rem 0; }

.block-label{ font-family:var(--font-ar-body); font-weight:700; font-size:.82rem; margin-bottom:.6rem; }
.variant-chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.3rem; }
.variant-chip{
  font-size:.76rem; font-weight:600; padding:.45rem .9rem; border-radius:12px;
  border:1.5px solid var(--border); background:var(--cream); color:var(--text-mid);
}
.variant-chip.active{ background:var(--gold); color:#fff; border-color:var(--gold-dark); }

.addon-row{
  display:flex; align-items:center; justify-content:space-between; background:var(--cream);
  border:1px solid var(--beige); border-radius:var(--radius-md); padding:.65rem .85rem; margin-bottom:.5rem;
}
.addon-left{ display:flex; align-items:center; gap:.55rem; }
.checkbox{ width:21px; height:21px; border-radius:6px; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#fff; transition:.2s; flex-shrink:0; }
.addon-row.checked .checkbox{ background:var(--gold); border-color:var(--gold-dark); }
.addon-row.checked{ border-color:var(--gold); background:rgba(201,169,110,.08); }
.addon-name{ font-size:.82rem; }
.addon-price{ font-size:.78rem; font-weight:600; color:var(--gold-dark); }

.meta-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.3rem; }
.meta-chip{ font-size:.72rem; background:var(--cream); border:1px solid var(--beige); border-radius:10px; padding:.3rem .6rem; color:var(--text-mid); }
.ingredients-text{ font-size:.8rem; color:var(--text-mid); line-height:1.6; }

.sheet-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:1.1rem; gap:.6rem; }
.total-block .lbl{ font-size:.65rem; color:var(--brown-soft); margin-bottom:.1rem; }
.total-price{ font-family:var(--font-ar-display); font-size:1.35rem; font-weight:700; }
.share-btn{
  font-family:var(--font-ar-body); font-weight:700; font-size:.8rem; color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark)); padding:.75rem 1.3rem;
  border-radius:14px; box-shadow:0 6px 16px rgba(160,125,69,.35); display:flex; align-items:center; gap:.4rem;
}

/* ══ FOOTER ══ */
footer{ text-align:center; padding:1.6rem 1.2rem 2rem; }
footer .fa{ font-family:var(--font-ar-display); font-size:.92rem; color:var(--gold-dark); margin-bottom:.15rem; }
footer .fe{ font-family:var(--font-en-display); font-style:italic; font-size:.68rem; color:var(--brown-soft); letter-spacing:1px; margin-bottom:.9rem; }
.rating-row{ display:flex; justify-content:center; gap:.9rem; font-size:1.35rem; margin-bottom:.6rem; }
.rating-row span{ opacity:.55; transition:.15s; cursor:pointer; }
.rating-row span:hover, .rating-row span.picked{ opacity:1; transform:scale(1.15); }
.rating-note{ font-size:.68rem; color:var(--brown-soft); }

.skeleton{ background:linear-gradient(90deg,var(--beige) 25%, var(--cream) 37%, var(--beige) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; }
@keyframes sk{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

@media (min-width:480px){ .grid{ grid-template-columns:1fr 1fr 1fr; } }