/* ═══ المنيو الكامل ═══ */
.menu { padding-bottom: var(--s8); }

/* شريط الأقسام: ملتصق تحت الشريط العلوي */
.cats {
  position: sticky;
  top: var(--topbar-h);
  z-index: 30;
  height: var(--cats-h);
  background: rgba(255, 243, 228, 0.94);
  box-shadow: 0 1px 0 var(--hairline);
}
.cats-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.cats-inner::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 7px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-full);
  background: var(--paper);
  transition: background-color var(--d-state) ease, color var(--d-state) ease,
              border-color var(--d-state) ease, transform var(--d-tap) ease;
}
.chip:active { transform: scale(0.95); }
@media (hover: hover) { .chip:not([aria-current]):hover { border-color: var(--cocoa-2); } }
.chip[aria-current="true"] {
  color: var(--cream);
  background: var(--cocoa);
  border-color: var(--cocoa);
}

/* ── قسم ── */
.cat { padding: var(--s6) 0 var(--s4); }
.cat-head {
  position: relative;
  margin: 0 var(--gutter) var(--s4);
  padding: var(--s5) var(--s5) var(--s4);
  border-radius: var(--r-lg);
  background: var(--bg);
  overflow: hidden;
}
.cat-en {
  position: absolute;
  inset-inline-start: 0.1em;
  bottom: -0.18em;
  font-family: var(--script);
  font-size: clamp(3.6rem, 19vw, 7.5rem);
  line-height: 1;
  rotate: -5deg;
  color: rgba(46, 26, 16, 0.1);
  direction: ltr;
  pointer-events: none;
  white-space: nowrap;
}
.cat-name {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.1;
  text-wrap: balance;
}
.cat-blurb {
  position: relative;
  margin: var(--s1) 0 0;
  max-width: 36ch;
  font-size: 0.92rem;
  color: var(--cocoa-2);
}

.rows {
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
  display: grid;
  gap: 12px;
}
@media (min-width: 760px) {
  .rows { grid-template-columns: 1fr 1fr; gap: 16px; }
}

.row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transition: transform var(--d-state) var(--ease-out), box-shadow var(--d-state) ease;
}
@media (hover: hover) {
  .row:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(46, 26, 16, 0.06), 0 18px 40px -16px rgba(46, 26, 16, 0.28);
  }
  .row:hover .row-img img { transform: scale(1.06); }
  .add:hover { background: #46291A; }
  .add.in-cart:hover { background: var(--avocado-deep); }
}
.row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  text-align: start;
  border: 0;
  background: none;
}
.row-img {
  position: relative;
  flex: none;
  width: 92px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
}
.row-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
.row-text { min-width: 0; display: grid; gap: 1px; }
.row-name { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.row-en {
  font-family: var(--brand);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cocoa-2);
  direction: ltr;
  text-align: right;
}
.row-desc {
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--cocoa-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
}
.row-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--tangerine);
  white-space: nowrap;
}

/* زر الإضافة — مشترك بين الصفوف وبطاقات الأفوكادو */
.add {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--cream);
  background: var(--cocoa);
  transition: transform var(--d-tap) ease, background-color var(--d-state) ease;
}
.add:active { transform: scale(0.88); }
.add svg { width: 20px; height: 20px; }
.add[data-qty]::after {
  content: attr(data-qty);
  position: absolute;
  top: -6px; inset-inline-end: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cocoa);
  background: var(--apricot);
  border-radius: var(--r-full);
  box-shadow: 0 0 0 2px var(--paper);
}
.add.in-cart { background: var(--avocado); }

/* ═══ الفوتر ═══ */
.foot {
  padding: var(--s8) var(--gutter) calc(var(--s8) + 70px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--cream);
  background: var(--cocoa);
}
.foot-word {
  margin: 0;
  font-family: var(--brand);
  font-weight: 800;
  font-size: clamp(4.5rem, 26vw, 11rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--apricot);
  direction: ltr;
}
.foot-script {
  margin: -0.2em 0 0;
  font-family: var(--script);
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  color: var(--cream);
  direction: ltr;
  rotate: -5deg;
}
.foot-tag {
  margin: var(--s3) 0 var(--s1);
  font-family: var(--display);
  font-size: 1.5rem;
}
.foot-city { margin: 0 0 var(--s5); color: rgba(255, 243, 228, 0.7); }
.foot-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--s6);
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(255, 243, 228, 0.3);
  border-radius: var(--r-full);
}
.foot-links svg { width: 18px; height: 18px; }
.foot-small { margin: 4px 0; font-size: 0.8rem; color: rgba(255, 243, 228, 0.6); }
.foot-credit { margin-top: var(--s4); font-size: 0.85rem; color: var(--apricot-soft); }

/* الشاشات العريضة: المنيو بعمود مقروء بالنص بدل ما يتمدد لآخر الشاشة */
@media (min-width: 1100px) {
  .cats-inner, .cat { max-width: 1180px; margin-inline: auto; }
}

/* ═══ البخار — فوق المشروبات الساخنة ═══
   ثلاث خيوط SVG بتطلع وبتتوسّع وبتختفي، كل وحدة بتوقيت مختلف حتى ما
   يبين التكرار. transform و opacity بس، والضباب من filter على الحاوية. */
.steam {
  position: absolute;
  z-index: 1;
  left: var(--sx);
  top: var(--sy);
  width: 46%;
  height: calc(var(--sy) * 0.95);
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: blur(1.6px);
}
.steam i {
  position: absolute;
  bottom: 0;
  left: 41%;
  width: 18%;
  height: 100%;
  opacity: 0;
  transform-origin: 50% 100%;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M10 98C3 82 17 68 10 52S3 22 10 2' fill='none' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: steam 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.steam i:nth-child(2) { left: 22%; animation-duration: 4.3s; animation-delay: 1.3s; }
.steam i:nth-child(3) { left: 60%; animation-duration: 3.9s; animation-delay: 2.4s; }
@keyframes steam {
  0%   { opacity: 0; transform: translateY(18%) scale(0.75, 0.5); }
  30%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-30%) scale(1.35, 1.1) skewX(-10deg); }
}
.row-img .steam { filter: blur(1px); }
@media (prefers-reduced-motion: reduce) {
  .steam i { animation: none; opacity: 0.35; transform: none; }
}