/* ==========================================================================
   BITE & TELL · עמוד הנחיתה
   --------------------------------------------------------------------------
   ⚠ שני מצבי צבע · בהיר לפי ערכה 11 (הלילך של האפליקציה), כהה לפי ערכה 07
     (שזיף). שניהם חולקים את סגול המותג #7B5CBC, ולכן המעבר ביניהם לא
     משנה את הזהות — רק את הרקע.
   ⚠ שלושה מצבים ולא שניים · בחירה מפורשת בהיר, בחירה מפורשת כהה,
     וברירת מחדל שהולכת אחרי מערכת ההפעלה. לכן כל אסימון מוגדר ב-:root
     החשוף, ורק נדרס פעמיים — פעם תחת prefers-color-scheme ופעם תחת
     [data-theme="dark"].
   ⚠ ריפוד צדדי תמיד ב-padding-inline · קיצור padding היה מאפס את
     השוליים של .wrap ודוחף את התוכן אל מחוץ למסך.
   ========================================================================== */

:root{
  /* ---- בהיר · ערכה 11 ---- */
  --bg:#F3EFFA; --ink:#2A2430; --soft:#7D7488;
  --line:rgba(130,112,162,.18);
  /* ⚠ מסגרת המנה · חזקה מ---line כי היא עומדת לבדה בלי מילוי
     מאחוריה. בבהיר הקו העדין פשוט נבלע בלילך. */
  --frame:rgba(130,112,162,.42);
  /* ⚠ קו הקווקו של שביל המנות · שקד בחרה אותו בקנבס */
  --trail:#141413;
  /* הלילך של כפתורי הוואטסאפ · כיתוב שחור עליו */
  --lilac:#C8B6E8; --onLilac:#000000;
  /* ⚠ **פינה רכה · 23 בספטמבר 2026** · בקשת שקד שאף פינה בעמוד לא
     תהיה חדה. זה הרדיוס המינימלי, למקומות שהיו 0. */
  --rSoft:10px;
  /* ⚠ **הפסים ברוחב מלא · 23 בספטמבר 2026** · שקד סימנה את אזור
     הניווט והפתיח ואמרה ״התכוונתי לכל הפינות האלה״. הצ׳יפים שם
     כבר היו עגולים לגמרי; מה שהיה חד זה הפסים עצמם. רדיוס גדול
     יותר מ---rSoft כי הם גדולים בהרבה, וב-10px זה לא נראה. */
  --rBand:18px;
  --surface:rgba(255,255,255,.78); --surface2:rgba(255,255,255,.58);
  --glow:.16;
  --veilA:rgba(24,18,34,.94); --veilB:rgba(24,18,34,.46);

  /* ---- משותף ---- */
  --c:#7B5CBC; --rgb:123,92,188; --onC:#fff;
  --heroInk:#fff; --heroSoft:#E3DCEC;
  --font:'Rubik',system-ui,-apple-system,'Arial Hebrew',sans-serif;
  --r:18px; --rBig:24px; --bw:1px;
  --ease:cubic-bezier(.19,1,.22,1); --nav:72px;
}

/* כהה לפי מערכת ההפעלה · אלא אם המבקר בחר במפורש בהיר */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15101E; --ink:#F1EAF7; --soft:#A093B0;
    --line:rgba(241,234,247,.14);
    --frame:rgba(241,234,247,.24);
    --trail:rgba(241,234,247,.55);
    --surface:rgba(255,255,255,.06); --surface2:rgba(255,255,255,.1);
    --glow:.26;
    --veilA:rgba(21,16,30,.94); --veilB:rgba(21,16,30,.46);
  }
}
/* כהה בבחירה מפורשת · גובר גם על מערכת הפעלה בהירה */
:root[data-theme="dark"]{
  --bg:#15101E; --ink:#F1EAF7; --soft:#A093B0;
  --line:rgba(241,234,247,.14);
  --frame:rgba(241,234,247,.24);
  --trail:rgba(241,234,247,.55);
  --surface:rgba(255,255,255,.06); --surface2:rgba(255,255,255,.1);
  --glow:.26;
  --veilA:rgba(21,16,30,.94); --veilB:rgba(21,16,30,.46);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
  transition:background .4s ease, color .4s ease;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.08; text-wrap:balance; font-weight:800; letter-spacing:-.03em}
.wrap{max-width:1240px; margin:0 auto; padding-inline:24px}

/* זוהר רך בגוון הקטגוריה שבמסך */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(60% 46% at 50% 6%, rgba(var(--rgb),var(--glow)), transparent 72%);
  transition:background .9s ease;
}
.nav,.sec,.foot,#menu{position:relative; z-index:1}

/* אייקונים · יורשים את צבע הכפתור */
.ico{width:1.05em; height:1.05em; flex-shrink:0; fill:currentColor; display:block}

/* ==========================================================================
   כפתור בהיר/כהה · שמש בצד אחד, ירח בצד שני, וכפתור זכוכית שמחליק
   ביניהם בלחיצה.
   ⚠ אין כיתוב · לבקשת שקד.
   ⚠ overflow:hidden על המסילה · בגרסה הקודמת הכפתור העגול היה גדול
     מהמסילה ובלט מחוץ לגבולותיה במצב כהה. עכשיו הוא קטן ממנה
     ויושב בתוך ריפוד קבוע, כך שאין לו לאן לחרוג.
   ========================================================================== */
.modeToggle{
  --mt-w:76px; --mt-h:36px; --mt-knob:42px;
  position:relative; flex-shrink:0; overflow:hidden;
  width:var(--mt-w); height:var(--mt-h);
  border:var(--bw) solid var(--line); border-radius:999px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--ink) 7%, transparent), transparent 60%),
    var(--surface);
  backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:
    inset 0 2px 5px -2px color-mix(in srgb, var(--ink) 32%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #fff 42%, transparent);
  cursor:pointer; padding:0;
  transition:background .35s ease, border-color .35s ease;
}
.modeToggle:focus-visible{outline:2px solid var(--c); outline-offset:3px}

/* ⚠ הכפתור **עוטף את הקצוות במדויק** · inset-block:0 מותח אותו
   לגובה המלא של המסילה, ולכן הוא אליפסה ולא עיגול — בדיוק כמו
   הצורה של התוחם החיצוני. לבקשת שקד. */
.mtKnob{
  position:absolute; z-index:0;
  inset-block:0; inset-inline-start:0;
  width:var(--mt-knob); border-radius:999px;
  background:linear-gradient(150deg, rgba(255,255,255,.66), rgba(255,255,255,.16));
  backdrop-filter:blur(12px) saturate(1.6);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 6px 14px -6px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -6px 11px -8px rgba(0,0,0,.42);
  transition:inset-inline-start .46s cubic-bezier(.6,-.2,.32,1.24);
}
.modeToggle[aria-checked="true"] .mtKnob{
  inset-inline-start:calc(100% - var(--mt-knob));
}

/* שני האייקונים · שמש בצד ההתחלה, ירח בצד הסיום */
.mtFace{
  position:absolute; z-index:1; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:calc((var(--mt-knob) - 17px) / 2);
}
.mtFace > span{display:grid; place-items:center; transition:opacity .35s ease, transform .35s ease}
.mtFace .ico{width:17px; height:17px}
.mtSun{color:#E0A33A}
.mtMoon{color:#8E79C4}
/* הפעיל מלא, הכבוי דהוי */
.modeToggle[aria-checked="false"] .mtMoon{opacity:.34; transform:scale(.88)}
.modeToggle[aria-checked="true"]  .mtSun{opacity:.34; transform:scale(.88)}

/* ---------- ניווט ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  border-block-end:var(--bw) solid var(--line);
  border-radius:var(--rBand);
}
.nav .wrap{display:flex; align-items:center; gap:14px; height:var(--nav)}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0}
.logo img{width:36px; height:36px; object-fit:contain}
.logo b{font-weight:800; font-size:14.31px; letter-spacing:-.01em; white-space:nowrap}
#nv{display:flex; gap:4px; margin-inline-start:auto; font-size:12.97px}
#nv a{text-decoration:none; color:var(--soft); padding:8px 12px; border-radius:999px;
  transition:background .22s, color .22s; white-space:nowrap}
#nv a:hover{background:var(--surface2); color:var(--ink)}
/* המקטע שבמסך מודגש בניווט */
#nv a.on{color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent)}
.navcta{display:flex; gap:8px; flex-shrink:0; margin-inline-start:auto}
#nv ~ .navcta{margin-inline-start:0}

.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font); font-size:12.52px; font-weight:400; padding:10px 18px;
  border-radius:999px; border:var(--bw) solid var(--line);
  background:var(--surface); backdrop-filter:blur(14px); color:inherit;
  cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:hover{transform:translateY(-2px); border-color:var(--c)}
.btn:focus-visible{outline:2px solid var(--c); outline-offset:2px}
.btn.fill{background:var(--c); border-color:transparent; color:var(--onC)}
.btn.fill:hover{filter:brightness(1.1)}
.btn.icon{padding:10px 14px}

/* ---------- הפתיח ---------- */
/* ⚠ גובה הפתיח · חזר לגובה שהיה לפני שרצועת התמונות ירדה, ואפילו
   נמוך ממנו — לבקשת שקד. הוא **לא** נמתח על כל המסך.
   ⚠ min-height ולא height · אם התוכן צריך יותר מקום (נייד צר,
     גופן גדול) הפתיח גדל במקום לחתוך את הכפתורים. */
.top{display:flex; flex-direction:column}
.hero{
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  border-radius:var(--rBand);
  /* ⚠ **הגובה נקבע מהתוכן · 23 בספטמבר 2026** · שקד ביקשה שהתמונה
     תיגמר בדיוק אחרי שורת השירותים והכפתורים. הרצפה הורדה כדי
     שהתוכן — ולא מספר קבוע — יקבע את הגובה. */
  min-height:clamp(340px, 42vh, 420px);
}
.shot{position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease}
.shot.on{opacity:1}
.shot img{width:100%; height:100%; object-fit:cover; animation:burns 16s ease-out both}
@keyframes burns{from{transform:scale(1.02) translate3d(0,0,0)} to{transform:scale(1.17) translate3d(-1.6%,-1%,0)}}
/* ⚠ זוהר רך בין הניווט לתמונה · לבקשת שקד.
   screen על תמונה כהה מייצר הילה במקום שכבה אפורה. */
.hero::before{
  content:''; position:absolute; inset-inline:0; top:0; height:clamp(90px,13vh,150px);
  z-index:3; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(to bottom, rgba(var(--rgb),.5), rgba(var(--rgb),.12) 46%, transparent 86%);
  transition:background .9s ease;
}
.hero::after{
  content:''; position:absolute; inset-inline:0; top:0; height:1px; z-index:4; pointer-events:none;
  background:linear-gradient(to left, transparent, rgba(var(--rgb),.85), transparent);
}
.veil{position:absolute; inset:0; background:
  linear-gradient(to top, var(--veilA) 3%, var(--veilB) 42%, transparent 76%),
  linear-gradient(to left, var(--veilB), transparent 62%)}
/* ⚠ ריפוד עליון · בלי זה שורת ״אוכל שמספר סיפור״ נצמדת לניווט
   כשהתוכן ממלא את הפתיח. */
/* ⚠ עמודה · הצ׳יפים עולים למעלה עם order:-1 */
.hero .wrap{position:relative; z-index:2; padding-block:26px 40px; width:100%;
  display:flex; flex-direction:column; align-items:stretch}
.slug{display:flex; align-items:center; gap:12px; font-size:11.63px; letter-spacing:.24em;
  color:#C8B6E8; margin-bottom:14px}
.slug::before{content:''; width:44px; height:1px; background:currentColor}
/* ⚠ שתי השורות באותו גודל · שקד הגדילה את השורה הראשונה */
.hero h1{font-size:clamp(30.41px,5.098vw,75.13px); color:var(--heroInk)}
.hero h1 em{display:block; font-style:normal; font-weight:800; font-size:1em;
  color:var(--heroInk); letter-spacing:-.03em}
/* ⚠ השורה השנייה נכנסת פנימה · שקד הזיחה אותה ברווחים בקנבס */
.hero h1 .h1b{display:block; padding-inline-start:clamp(0px,6.8vw,100px)}
.hsay{max-width:none; margin-top:18px}
/* ⚠ גדול ומודגש · לפי הקנבס */
.hsay p{font-size:clamp(12.97px,1.252vw,17.89px); font-weight:600; line-height:1.85;
  margin:0 0 10px; color:var(--heroSoft)}
.hsay p:last-child{margin-bottom:0}
/* שורת השירותים · מחליפה את הפסקה השנייה */
.hline{margin:0; font-weight:800; color:#C8B6E8;
  font-size:clamp(14.31px,1.878vw,26.83px); line-height:normal}
/* ⚠ שורה אחת ממורכזת מעל הכול · כותרות הקבוצות ירדו (הקנבס) */
.chips{order:-1; display:flex; flex-direction:row; flex-wrap:wrap;
  justify-content:center; gap:8px; margin:0 0 22px}
.chips span{
  font-size:12.52px; color:#ffffff; padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px); white-space:nowrap;
}
/* ⚠ הכפתורים לפינה השמאלית התחתונה · לפי הקנבס */
/* ⚠ שורה אחת · המלל בימין, הכפתורים בשמאל · בקשת שקד */
.hcta{display:flex; align-items:center; justify-content:space-between;
  gap:16px 24px; margin-top:16px; flex-wrap:wrap}
.hBtns{display:flex; gap:10px; flex-wrap:wrap}
.hcta .hline{margin:0; flex:1 1 auto; min-width:0}
/* ⚠ בדיוק כמו בקנבס · שניהם 16px/300, השני שקוף עם מסגרת לבנה */
.hcta .btn{font-size:14.31px; font-weight:300; padding:15px 38px; backdrop-filter:none}
.hcta .btn:not(.fill){background:transparent; border-color:rgba(255,255,255,.4); color:#ffffff}
.hcta .btn:not(.fill):hover{border-color:#ffffff}

/* ==========================================================================
   ⚠ מאודות ומטה · הכול ממורכז לאמצע · לבקשת שקד.
   הפסקאות שומרות רוחב שורה קריא ומתמרכזות ב-margin-inline:auto,
   כדי שמלל ממורכז לא ייפרס על שורות ארוכות מדי.
   ========================================================================== */
/* ⚠ הניווט דביק, ולכן כל עוגן צריך מרווח עליון · אחרת הכותרת
   של המקטע נוחתת מתחת לשורת הניווט ולא נראית. */
#about,#menu,#gallery,#event,#order{scroll-margin-top:calc(var(--nav) + 18px)}
/* ⚠ הכרטיס יוצא 1296 ב-1440 · בדיוק כמו בקנבס */
/* ⚠ **הכרטיס נכנס במסך אחד · 23 בספטמבר 2026** · בקשת שקד. הסקשן
   היה 915px בתוך חלון של 880. נחתכו 88: הריפוד האנכי 58→30,
   המרווח מעל הכרטיס 20→12, והמדליון 122→92. הכותרת והטופס לא
   נגעו בהם, כמו שביקשה. */
#event.wrap{max-width:1440px; padding-inline:clamp(16px,5vw,72px);
  padding-block:clamp(22px,2.2vw,30px)}
/* ⚠ התפריט רחב יותר ועם פחות שוליים · לפי צילום המסך */
/* ⚠ **רצועה מעוגלת לתפריט · 23 בספטמבר 2026** · שקד ביקשה שבכל
   מעבר שיש בו קו ישר יהיה רדיוס, ובמפורש ״בכל מה שיוצא מהמטבח,
   גם מעל וגם מתחת״. הסקשן מקבל רקע עדין משלו ופינות מעוגלות, ולכן
   הוא נקרא כרצועה אחת שמתחילה ונגמרת בעיגול — במקום קו חד.
   הרקע עדין בכוונה: הוא מסמן את הגבול בלי להתחרות בתוכן. */
#menu{
  background:color-mix(in srgb, var(--ink) 3.5%, transparent);
  border-radius:var(--rBand);
  padding-block-end:clamp(10px,1.4vw,20px);
}
#menu > .wrap{max-width:1580px}
/* ⚠ 1440 בדיוק · כך תיבת התוכן של הפיצול יוצאת 1396 והעמודות 754/610 */
#menu #menuAll{max-width:1440px; padding-inline:0}
/* ⚠ הרווח בין המקטעים צומצם לבקשת שקד · היה 56–92 */
.sec{padding-block:clamp(34px,4.4vw,58px); text-align:center}
.eye{font-size:11.63px; letter-spacing:.24em; color:var(--c); font-weight:300}
.h2{font-size:clamp(25.04px,3.578vw,46.51px); margin-top:12px}
/* ⚠ בקנבס לכל מקטע גודל כותרת משלו · אודות 58, תפריט וגלריה 46 */
#about .h2{font-size:clamp(26.83px,3.605vw,51.88px)}
#menu .h2,#gallery .h2{font-size:clamp(23.26px,2.862vw,41.14px)}
.lead{font-size:clamp(13.42px,1.064vw,15.21px); line-height:normal; color:var(--soft);
  max-width:52ch; margin:14px auto 0}

/* ⚠ הסיפור של שקד · שבירות השורה שלה נשמרות, ולכן רוחב הפסקה
   רחב מהרגיל — כדי שהשורות שלה לא יישברו שוב באמצע. */
#abtext{margin-top:18px}
#abtext p{
  font-size:clamp(13.42px,1.297vw,15.21px); line-height:1.95; color:var(--soft);
  margin:0 auto 20px; max-width:62ch; text-wrap:pretty;
}
#abtext p:last-child{margin-bottom:0}
.abSub{
  margin:14px auto 0; max-width:42ch;
  font-size:clamp(13.42px,1.342vw,17.89px); font-weight:800; letter-spacing:normal;
  color:var(--c); line-height:normal;
}
/* ״רגע... מי הכין את זה?״ · אצל שקד זו כותרת קטנה, לא פסקה */
#abtext p.abPull{
  /* ⚠ סגול וגדול יותר · שקד שינתה בקנבס */
  font-size:clamp(18.78px,2.147vw,30.41px); font-weight:800; letter-spacing:-.03em;
  color:var(--c); line-height:1.3; max-width:26ch; margin-block:4px 22px;
}
#abtext p.abEnd{
  font-size:clamp(14.31px,1.431vw,18.78px); font-weight:500; color:var(--ink); margin-top:4px;
  line-height:1.7;
}

/* ==========================================================================
   לשוניות הקטגוריות · דביקות, ומגלגלות במקום להחליף תצוגה.
   ⚠ עוצבו מחדש · שקד: ״לא אוהבת שזה תחום בין שני קווים וזה קטן ממש״.
   ירדו שני הקווים, הכרטיס גדל, נוספה שורת מידע, והמדף מקבל צל רק
   ברגע שהוא נתקע למעלה — כך אין שום מסגרת בזמן גלילה רגילה.
   ========================================================================== */
/* ⚠ **גלולה צפה ולא פס · 23 בספטמבר 2026** · בקשת שקד: ״שהיא תהיה
   ברוחב מינימלי כמו כפתור צף כזה ארוך״. הרקע והמסגרת ירדו מהפס
   שברוחב מלא ועברו ל-`.menuTabs`, שמתכווץ לרוחב התוכן וממורכז. */
.tabsBar{
  position:sticky; top:var(--nav); z-index:50;
  background:transparent; border:0; pointer-events:none;
  transition:none;
}
.tabsBar > .wrap{pointer-events:none}
.tabsBar.stuck .menuTabs{
  box-shadow:0 18px 38px -24px color-mix(in srgb, var(--ink) 85%, transparent);
}
/* ⚠ **המדף הודק · 23 בספטמבר 2026** · בקשת שקד ״את התפריט הזה אני
   רוצה לעשות צר יותר״. הגובה ירד מ-100px ל-70: התמונות 52→38,
   הריפוד האנכי 16→10, והריפוד בתוך הלשונית הוקטן בהתאם. */
.menuTabs{
  pointer-events:auto;
  display:flex; gap:10px; justify-content:flex-start; align-items:center;
  width:fit-content; max-width:100%; margin-inline:auto;
  overflow-x:auto; scrollbar-width:none;
  padding:7px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(20px) saturate(1.35);
  border:var(--bw) solid var(--line);
  transition:box-shadow .35s ease;
}
.menuTabs::-webkit-scrollbar{display:none}
.mtab{
  display:flex; align-items:center; gap:6px; padding:6px 6px 6px 6px; flex-shrink:0;
  border:1px solid transparent; border-radius:999px; background:transparent;
  color:var(--soft); font-family:var(--font); font-weight:400;
  transition:color .25s, border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s;
}
/* הכפתור שמגלגל לקטגוריה · הוא הלשונית עצמה מבחינת המשתמשת */
.mtGo{
  display:flex; align-items:center; gap:10px; padding:0 11px 0 0;
  border:0; background:transparent; color:inherit; cursor:pointer;
  font-family:var(--font); font-weight:inherit; font-size:inherit;
}
/* ⚠ **כפתור ההזמנה בלשונית · אפשרות ג׳ של שקד · 23 בספטמבר 2026**
   מוצג רק בלשונית הפעילה. מדף הלשוניות דביק, ולכן הכפתור נשאר על
   המסך כל זמן שגוללים את הקטגוריה — בלי להוסיף שורה לעמוד.
   העיצוב הוא ״זכוכית עם הילה״ שהיא בחרה מתוך החמישה. */
.mtOrder{
  display:none; align-items:center; justify-content:center;
  padding:7px 15px; border-radius:999px; text-decoration:none; white-space:nowrap;
  font-size:10.73px; font-weight:800; color:var(--ink);
  background:color-mix(in srgb, var(--tc) 16%, transparent);
  backdrop-filter:blur(10px) saturate(1.4);
  border:var(--bw) solid color-mix(in srgb, var(--tc) 42%, transparent);
  transition:background .35s, box-shadow .35s, transform .25s var(--ease);
}
.mtab[aria-current="true"] .mtOrder{display:inline-flex}
.mtOrder:hover{
  background:color-mix(in srgb, var(--tc) 26%, transparent); transform:translateY(-1px);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--tc) 14%, transparent),
             0 12px 22px -14px var(--tc);
}
.mtOrder:focus-visible{outline:2px solid var(--tc); outline-offset:2px}
.mtab img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  filter:saturate(.35) brightness(.9); transition:filter .35s, box-shadow .35s;
}
.mtab .mtx{display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:normal}
.mtab b{font-weight:500; font-size:12.52px; letter-spacing:normal}
.mtab small{font-size:10.29px; color:var(--soft); opacity:.85}
.mtab:hover{color:var(--ink)}
.mtab:hover .mtGo{transform:translateY(-1px)}
.mtab:hover img{filter:none}
.mtGo:focus-visible{outline:2px solid var(--tc); outline-offset:3px; border-radius:999px}
.mtab[aria-current="true"]{
  color:var(--ink);
  background:color-mix(in srgb, var(--tc) 13%, transparent);
  border-color:color-mix(in srgb, var(--tc) 45%, transparent);
  box-shadow:0 12px 26px -18px var(--tc);
}
.mtab[aria-current="true"] img{
  filter:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--tc) 55%, transparent);
}
.mtab[aria-current="true"] b{color:var(--ink)}

/* ==========================================================================
   קטגוריה · עמוד מפוצל · לפי צילום המסך ששקד שלחה.
   הצד הימני (כותרת, כפתור, מלל) **נדבק ולא זז** בזמן שהמנות
   נגללות משמאל. כשנגמרות המנות — מתחילה הקטגוריה הבאה.
   ⚠ --tabsH נמדד בזמן ריצה · הניווט ומדף הלשוניות שניהם דביקים,
     והצד הדביק חייב לעצור מתחתיהם ולא מאחוריהם.
   ========================================================================== */
/* ⚠ **הקו המפריד ירד · 23 בספטמבר 2026** · שקד: ״בכל מעבר בו יש קו
   ישר נעשה גם רדיוס כזה... יש כאילו קיווקוו מיותר, צריך לסדר״.
   הקו הדק הזה הוא שחתך בין קטגוריה לקטגוריה. במקומו הסקשן כולו
   קיבל רצועה מעוגלת, כמו שהיא אהבה בתמונת הפתיח. */
.cat{padding-block:clamp(36px,5vw,64px)}
.cat:first-child{border-block-start:0}

.catSplit{
  display:grid;
  /* ⚠ המלל מקבל הרבה יותר מקום מהתמונות · לפי צילום המסך */
  grid-template-columns:minmax(340px, 54%) 1fr;
  gap:clamp(18px,2.36vw,34px);
  padding:40px 22px;
  align-items:start;
  text-align:start;
}
.catSide{
  position:sticky;
  /* הכפתור הצף נתלה על הצד הזה */
  top:calc(var(--nav) + var(--tabsH, 86px) + 18px);
  align-self:start;
  /* ⚠ חובה · בלי זה שורת היתרונות ב-nowrap מרחיבה את עמודת הרשת מעבר למסך */
  min-width:0;
  /* ⚠ כל ילד מתכווץ לרוחב התוכן שלו · כך זה בקנבס, ובלי זה המלל
     נפרס על כל רוחב העמודה במקום להתקבץ */
  display:flex; flex-direction:column; align-items:flex-start;
}

.cno{display:block; font-weight:800; font-size:15.21px; letter-spacing:.2em; color:var(--cc)}
/* ⚠ כל מילה בשורה משלה ובגודל אחר · האחרונה הגדולה ביותר ובצבע */
.catBig{margin-top:6px; line-height:.92; letter-spacing:-1.2px}
.catBig span{display:block}
/* ⚠ גדול ומדורג שמאלה · שקד קבעה את הגדלים וההזחות בקנבס.
   ההזחה היא padding-inline-start כי בעמוד ימין-לשמאל ה-start הוא הימין. */
.catBig .w-mid{font-size:clamp(26.83px,6.216vw,89.44px); color:var(--ink);
  padding-inline-start:clamp(0px,2.8vw,40px)}
/* ⚠ **המרווח צומצם · 23 בספטמבר 2026** · בקשת שקד: לצמצם את הרווח
   בין ״שלישי״ ל״של״ ובין ״אירוח״ ל״שף״. שתיהן הכותרות היחידות בנות
   שלוש שורות, ולכן `.w-small` פוגע בדיוק בהן. המרווח היה 20px
   (נמדד ב-1633), והוא יורד ל-4. הערך ב-em כדי שיתכווץ עם הגופן. */
.catBig .w-small{font-size:clamp(21.47px,4.973vw,71.55px); color:var(--soft); font-weight:800;
  margin-top:-.2em;
  padding-inline-start:clamp(0px,10.4vw,150px)}
.catBig .w-main{font-size:clamp(33.99px,7.46vw,107.33px); color:var(--cc); margin-top:2px;
  position:relative; top:-.167em;
  padding-inline-start:clamp(0px,6.9vw,100px)}
/* ⚠ **כל הכותרות מתחילות באותו גובה · 23 בספטמבר 2026** · בקשת שקד.
   כותרת של מילה אחת (״שישניצל״, ״ספיישל״) מתחילה ב-w-main, שנושא
   הרמה של -.167em ולכן ישבה 17px גבוה מכותרת רב-שורתית שמתחילה
   ב-w-mid. w-mid קטן פי 1.2 מ-w-main (6.95vw מול 8.34), ולכן אותה
   הרמה בדיוק היא .2em אצלו — וזה מיישר את שתיהן לפיקסל. */
.catBig .w-mid:first-child{position:relative; top:-.2em; margin-top:2px}

/* ⚠ **כפתור ״להזמנה״ הוסר · 23 בספטמבר 2026** · בקשת שקד. הכללים
   שלו נמחקו כאן וב-build.js. `ctaTo` נשאר בנתונים. */
.catHead{position:relative; width:100%; display:flex; flex-direction:column; align-items:flex-start}

/* ⚠ **שבירה טבעית במקום חיתוך · 23 בספטמבר 2026** · עד היום היה כאן
   `nowrap`, כי שקד ביקשה שכל ארבע ההטבות ייכנסו בשורה אחת. עם
   הנוסחים החדשים שלה זה כבר לא אפשרי בגודל קריא: ״שישניצל״ דורשת
   758px בתוך טור של 732, וכדי לדחוס אותה לשורה אחת היה צריך לרדת
   ל-16px — 24% מתחת ל-21 שהיא בחרה בקנבס.
   `wrap` נותן את הטוב משניהם: קטגוריה שנכנסת נשארת בשורה אחת,
   וזו שלא — נשברת לשתיים במקום להיחתך. הגדלים חזרו לשלה. */
.perks{
  /* ⚠ **צמוד לכותרת · 23 בספטמבר 2026** · בקשת שקד, אחרי שכפתור
     ״להזמנה״ ירד: ״שהעיגולים המתארים יהיו צמודים לכותרת עם ממש
     מעט מרווח״. היה 22px. */
  list-style:none; margin:8px 0 0; padding:0 0 2px; width:100%; min-height:0;
  display:flex; flex-wrap:wrap; gap:5px; justify-content:center; align-items:center;
}
.perks::-webkit-scrollbar{display:none}
.perks li{
  display:flex; align-items:center; gap:5px; flex-shrink:0;
  /* ⚠ גדול יותר · שקד הגדילה ל-21 בקנבס */
  /* ⚠ **16px · ברירת מחדל זמנית · 23 בספטמבר 2026** · שקד בחרה 21
     בקנבס, אבל עם הנוסחים החדשים שלה זה מייצר שבירה 3+1 בכל רוחב
     שנבדק (120 מתוך 120). נמדדו שש אפשרויות: ב-19px נשברות 55,
     ב-18px ארבעים, ב-16px שש, וב-15px אפס. 16 הוא הפשרה — כמעט
     תמיד שורה אחת, ועדיין קריא. ההחלטה הסופית שלה. */
  font-size:clamp(9.39px,0.966vw,14.31px); white-space:nowrap;
  padding:7px 8px; border-radius:999px;
  background:rgba(var(--crgb),.1);
  border:var(--bw) solid rgba(var(--crgb),.26);
}
.perks .pe{font-size:1.15em; line-height:1}
.catTag{margin:20px 0 0; font-size:11.63px; letter-spacing:.14em; color:var(--cc)}

/* ⚠ מודגש · שקד שינתה בקנבס */
.catSub{margin:24px 0 0; margin-inline-start:15px; font-size:clamp(13.42px,1.252vw,17.89px); line-height:normal;
  color:var(--cc); font-weight:900; max-width:none}
.catStory{margin:14px 0 0; max-width:none; width:100%}
.catStory p{margin:0 0 2px; margin-inline-start:15px; width:min(750px,100%); font-size:clamp(12.97px,1.252vw,17.89px); line-height:1.8; color:var(--soft)}
.catStory p:last-child{margin-bottom:0}
.catStory strong{font-weight:800; color:var(--ink)}
/* שורת הסיום · ״שלישי כבר טעים יותר״ */
.catClose{margin:2px 0 0; margin-inline-start:15px; width:min(750px,100%); font-size:clamp(13.42px,1.252vw,17.89px); font-weight:800; color:var(--cc); line-height:1.8}
/* ⚠ שורת פתיחת המכירה · נטויה, מחליפה את שורת ״N מנות · יום · שעה״ */
.catOpen{margin:2px 0 0; margin-inline-start:15px; width:min(750px,100%); display:flex; align-items:center; gap:7px;
  font-size:clamp(11.63px,1.118vw,16.1px); font-style:italic; font-weight:800; color:var(--soft); line-height:1.8}
.catOpen span{font-style:normal}
.cmeta{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:18px; font-size:11.18px; color:var(--soft)}
.cmeta b{font-weight:400; color:var(--cc)}
.cmeta i{font-style:normal}
/* ⚠ **שורת הסיכום של השף · 23 בספטמבר 2026** · שקד ביקשה שהיא תהיה
   ״באותו העיצוב כמו שורת הפתיחה — רק בצבע לבן״. הגודל והמשקל נלקחו
   מ-.catSub, והצבע לבן כבקשתה.
   ⚠ **הערה שלי, לא שינוי** · הרקע של העמוד במצב יום הוא #F3EFFA.
   לבן על הרקע הזה כמעט בלתי קריא. השארתי לבן כי כך ביקשה, וצירפתי
   את מדידת הניגודיות בתשובה. */
.menuNote{margin:14px 0 0; margin-inline-start:15px; font-size:clamp(13.42px,1.252vw,17.89px);
  line-height:normal; font-weight:900; color:#FFFFFF; max-width:none}

/* ---------- עמודת המנות ---------- */
/* ⚠ בלי רווח · הכרטיסים מתחברים לשביל אחד רציף (הקנבס) */
.catDishes{display:grid; gap:0; min-width:0}
/* ⚠ אפשרות ד · **מסגרת קו אחת** מקיפה את התמונה, השם והמחיר יחד.
   בלי מילוי ובלי טשטוש · שקד בחרה את זה ב-22 בספטמבר 2026. */
/* ⚠ אפשרות ד׳ הפכה לשביל · שקד ציירה בקנבס מסגרת מקווקוות שמתחברת
   מכרטיס לכרטיס: אחד פתוח משמאל, הבא פתוח מימין, וכך הלאה.
   הצדדים כאן פיזיים (left/right) כי הזיגזג עצמו פיזי. */
.dish{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(12px,1.39vw,20px);
  padding:clamp(12px,1.11vw,16px);
  background:transparent; backdrop-filter:none;
  /* ⚠ **אין פינה חדה · 23 בספטמבר 2026** · בקשת שקד ״כל מקום שיש
     בו פינה אני רוצה שיהיה רדיוס מעט עגול״. היה 0. */
  border:0; border-bottom:var(--bw) dashed var(--trail); border-radius:var(--rSoft);
  transition:border-color .3s, transform .3s var(--ease);
}
.dish:nth-child(odd){
  border-right:var(--bw) dashed var(--trail);
  border-top-left-radius:26px; border-top-right-radius:26px; border-bottom-right-radius:26px;
}
.dish:nth-child(even){
  border-left:var(--bw) dashed var(--trail);
  border-top-left-radius:26px; border-top-right-radius:26px; border-bottom-left-radius:26px;
}
.dish:first-child{border-top:var(--bw) dashed var(--trail); border-top-left-radius:var(--rSoft)}
.dish:hover{border-color:var(--cc); transform:translateY(-3px)}
/* ⚠ הצדדים מתחלפים · זה מה שיוצר את הזיגזג שבצילום */
.dish:nth-child(even){direction:ltr}
.dish:nth-child(even) .dbd{direction:rtl}

.dph{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:#000;
  border-radius:var(--r); border:0;
}
.dph img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.dish:hover .dph img{transform:scale(1.06)}
/* ⚠ **אפשרות ד · שכבת ריחוף · 23 בספטמבר 2026** · שקד בחרה בה מתוך
   ארבע התצוגות. התיאור נפתח על התמונה ולא מתחת לשם, כך שהכרטיס
   לא מתארך והשובל שומר על הקצב שלו.
   ⚠ בנייד אין ריחוף · `data-open` נפתח בלחיצה, מ-build.js. */
.dph.hasOver{cursor:pointer}
.dOver{
  position:absolute; inset:0; z-index:2; padding:clamp(12px,1.2vw,20px);
  display:grid; place-content:center; overflow-y:auto;
  background:linear-gradient(to top, rgba(10,6,16,.95), rgba(10,6,16,.84));
  opacity:0; transition:opacity .35s var(--ease);
}
.dph:hover .dOver,
.dph:focus-visible .dOver,
.dph[data-open="true"] .dOver{opacity:1}
/* ⚠ ממורכז · בקשת שקד */
.dOver p{
  margin:0; color:rgba(255,255,255,.92); text-align:center;
  font-size:clamp(11.18px,0.939vw,13.86px); line-height:1.6; font-weight:300;
}
.dno{position:absolute; top:10px; inset-inline-start:10px; z-index:3; font-size:9.39px; font-weight:400;
  letter-spacing:.14em; color:#fff; background:rgba(0,0,0,.46); backdrop-filter:blur(6px);
  padding:3px 8px; border-radius:999px}

/* ⚠ רק השם והמחיר · ממורכזים · בלי לוח משלהם · המסגרת של .dish
   כבר מקיפה אותם יחד עם התמונה. */
.dbd{
  display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(8px,1vw,16px);
  background:transparent; border:0;
}
.dish h4{font-size:clamp(16.1px,1.494vw,21.47px); line-height:1.3}
.dpr{font-weight:800; font-size:clamp(16.99px,1.556vw,22.36px); color:var(--cc);
  white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* ---------- נייד · הכול נערם ---------- */
@media (max-width:1000px){
  /* ⚠ עקיפות כרטיס האירוע עברו לבלוק ה-1000px שבהמשך · ראו שם */
  .catSplit{grid-template-columns:1fr; gap:26px}
  .catSide{position:static; text-align:center}
  /* ⚠ בנייד הכפתור הצף חוזר לזרימה · אחרת הוא רוכב על הכותרת */
  .catBig .w-mid,.catBig .w-small,.catBig .w-main{padding-inline-start:0}
  .hero h1 .h1b{padding-inline-start:0}
  .catBig .cTop,.catBig .cMain{text-align:center}
  .perks{justify-content:center}
  .catSub,.catStory,.menuNote{margin-inline:auto}
  .cmeta{justify-content:center}
}
@media (max-width:640px){
  .dish,.dish:nth-child(even){grid-template-columns:1fr; direction:rtl}
  .dph{aspect-ratio:16/10}
  /* בטלפון אין מקום לשורה אחת · נשברים לשורות במקום גלילה אופקית */
  .perks{flex-wrap:wrap; overflow-x:visible}
}

/* ---------- גלריה ---------- */
.galleryRails{
  border-radius:var(--rBand); overflow:hidden;
  display:flex; gap:12px; height:min(860px,104svh); overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
}
.grail{flex:1; display:flex; flex-direction:column; gap:12px; animation:railUp var(--dur) linear infinite}
.grail:nth-child(even){animation-direction:reverse}
@keyframes railUp{from{transform:translateY(0)} to{transform:translateY(-50%)}}
.gshot{position:relative; margin:0; flex-shrink:0; overflow:hidden; border-radius:var(--r);
  border:var(--bw) solid var(--line)}
.gshot img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .7s var(--ease)}
.gshot figcaption{position:absolute; inset-inline:0; bottom:0; padding:24px 10px 9px; font-size:9.84px;
  line-height:1.4; color:#fff; background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  opacity:0; transition:opacity .35s}
.gshot:hover img{transform:scale(1.06)}
.gshot:hover figcaption{opacity:1}

/* ==========================================================================
   כרטיס האירועים · לפי ההשראה ששקד שלחה · מלל ופרטי קשר בצד אחד,
   טופס בצד השני, הכול בתוך כרטיס זכוכית אחד.
   ⚠ המלל בכרטיס מיושר לימין ולא ממורכז · כך זה בהשראה, וזו החלטה
     מאוחרת יותר מההנחיה למרכז הכול מאודות ומטה.
   ========================================================================== */
/* ⚠ הערכים כאן הגיעו מבמת העיצוב · שקד בחרה אותם ושלחה אותם ב-22
   בספטמבר 2026. הגדלים עטופים ב-clamp כדי שלא ישברו בנייד. */
.eventCard{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px; align-items:start;
  margin-top:12px; padding:24px clamp(18px,2.6vw,38px) clamp(18px,2.6vw,38px);
  border:var(--bw) solid var(--line); border-radius:40px;
  background:var(--surface); backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:0 40px 80px -34px color-mix(in srgb, var(--ink) 85%, transparent);
  text-align:start;
}

/* ---- הצד המילולי ---- */
/* ⚠ כל המרווחים בצד המילולי הם gap:20 · כמו בקנבס */
/* ⚠ המרווחים הודקו כדי שהכרטיס ייכנס במסך אחד · בקשת שקד */
.ecText{display:flex; flex-direction:column; gap:11px}
/* ⚠ שלוש שורות כותרת · השלישית בגרדיאנט · עיצוב שקד מהקנבס */
.ecTitle{line-height:1.08; display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.ecTitle span{display:block; letter-spacing:-.03em; white-space:nowrap}
.ecT1{font-size:clamp(23.26px,3.757vw,53.67px); color:var(--ink); margin-top:10px;
  margin-inline-start:clamp(0px,4.9vw,70px)}
.ecT2{font-size:clamp(28.62px,5.59vw,80.5px); color:var(--c); margin-top:-.333em;
  margin-inline-start:clamp(0px,1.39vw,20px)}
.ecT3{
  font-size:clamp(39.35px,8.703vw,125.22px); margin-top:-.393em;
  margin-inline-start:clamp(0px,11.1vw,160px);
  background-image:linear-gradient(180deg,#C599F2,#49ACB6);
  background-clip:text; -webkit-background-clip:text;
  color:var(--c); -webkit-text-fill-color:transparent;
}
/* ⚠ **הוקטן בשני גדלים · 23 בספטמבר 2026** · בקשת שקד: כל מה
   שבכרטיס חוץ מהכותרת והטופס. ×0.8 על התקרה ועל המקדם. */
.ecLead{margin:0; font-size:clamp(11.63px,1.252vw,17.89px); font-weight:800; color:var(--c)}
/* ⚠ **רוחב קבוע → תקרה · 23 בספטמבר 2026** · 650 ו-680 הם המספרים
   מהקנבס של שקד, ואני שמתי אותם כ-`width` קבוע. הטור בפועל הוא
   579px ב-1440, כך שהמלל בלט 71 פיקסל שמאלה מהכותרת שמעליו ואכל
   את המרווח בין שתי העמודות. עכשיו הם תקרה: ברוחב שבו הטור גדול
   מהם הם נעצרים על המספר שלה, ובצר יותר הם מתכווצים איתו. */
.ecBody{margin:0; width:100%; max-width:650px}
.ecBody p{font-size:clamp(11.63px,1.503vw,21.47px); line-height:1.6; color:var(--soft); margin:0 0 5px}
.ecBody p:last-child{margin-bottom:0}
.ecBody p.ecStrong{font-weight:800}
/* ⚠ **הגודל של שקד · שתי שורות מרצון** · אחרי שנוספה ״סדנאות״
   השורה דורשת 637px בתוך טור של 579. כדי להחזיק אותה בשורה אחת
   היה צריך 19px במקום 25 שהיא בחרה. היא נשברת לשתיים ונשארת
   בגודל שלה. */
.ecServices{margin:0; width:100%; max-width:680px; font-size:clamp(10.73px,1.252vw,17.89px); font-weight:800; color:#000000}
/* ⚠ שורה אחת · העיגולים סביב האייקונים ירדו בקנבס */
.ecRows{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:8px}
.ecRow{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:clamp(11.18px,1.002vw,14.31px); font-weight:800; color:var(--c);
  transition:transform .2s var(--ease), opacity .2s}
a.ecRow:hover{transform:translateX(-3px)}
.ecIco{display:grid; place-items:center; color:var(--c); flex-shrink:0}
.ecIco .ico{width:17px; height:17px}

/* ---- צד הטופס ---- */
.ecForm{display:flex; flex-direction:column; align-items:center;
  width:min(515px,100%); justify-self:end; box-sizing:border-box;
  padding:18px 32px 32px; background:var(--bg); border:var(--bw) solid var(--line); border-radius:30px}
.ecMark{display:grid; place-items:center; width:clamp(66px,6.4vw,92px); height:clamp(66px,6.4vw,92px);
  margin-bottom:10px; border-radius:50%; border:3px solid var(--bg); box-sizing:content-box}
.ecMark img{width:100%; height:100%; object-fit:contain}

/* ⚠ שתי עמודות · תווית ממורכזת מעל כל שדה · עיצוב שקד מהקנבס */
form{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:15px;
  width:100%; margin:0; padding:0;
  background:transparent; border:0; border-radius:var(--rSoft); backdrop-filter:none; text-align:start}
.f{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px}
.f label{width:100%; text-align:center; font-size:clamp(11.63px,1.243vw,17.89px); color:var(--soft)}
.f.wide{grid-column:1 / -1}
.f.half{grid-column:1 / -1}
.f.half input{width:50%; text-align:center}
/* ⚠ השדה בצורת גלולה, והאייקון בקצה השמאלי · כמו בהשראה */
input,select,textarea{
  font-family:var(--font); font-weight:300; font-size:14.31px; color:var(--ink);
  background:color-mix(in srgb, var(--surface2) 80%, var(--bg));
  border:var(--bw) solid var(--line); border-radius:14px;
  /* ⚠ האייקון בתוך השדה ירד · התווית שמעליו תפסה את מקומו */
  padding-block:13px; padding-inline:15px; width:100%; height:55px; text-align:start;
  box-shadow:inset 0 2px 5px -3px color-mix(in srgb, var(--ink) 40%, transparent);
  transition:border-color .2s, box-shadow .2s;
}
textarea{height:112px; min-height:112px; resize:vertical; border-radius:14px; padding-block:13px}
.f.wide textarea{width:90%}
select{appearance:none; -webkit-appearance:none}
select option{background:var(--bg); color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--c);
  box-shadow:0 0 0 3px rgba(var(--rgb),.2)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb, var(--soft) 78%, transparent)}
/* ⚠ שדה התאריך · הדפדפן מוסיף כפתור לוח שנה משלו בדיוק במקום
   שבו יושב האייקון שלנו, ונוצרו שני אייקונים. מסתירים את שלו
   ומניחים אותו שקוף מעל שלנו — כך הלחיצה עדיין פותחת את הלוח. */
input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute; inset-inline-end:14px; top:13px;
  width:28px; height:28px; margin:0; padding:0;
  opacity:0; cursor:pointer;
}
input[type="date"]{position:relative}

/* ⚠ הדפדפן כופה direction:ltr על שדה טלפון, ולכן הכיתוב ״טלפון״
   נדחף שמאלה בזמן שכל שאר השדות מיושרים לימין. מחזירים אותו
   לימין · הספרות עצמן עדיין נקראות משמאל לימין כרגיל. */
input[type="tel"], input[type="number"]{direction:rtl; text-align:start}

.fico{
  position:absolute; inset-inline-end:19px; top:17px;
  display:grid; place-items:center; color:var(--soft);
  pointer-events:none; opacity:.75;
}
.fico .ico{width:19px; height:19px}
.f:focus-within .fico{color:var(--c); opacity:1}

/* ⚠ לילך עם כיתוב שחור · שקד בחרה בקנבס · רוחב מינימלי נשמר */
.send{
  grid-column:1 / -1;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:fit-content; justify-self:center; padding-inline:22px;
  border:var(--bw) solid transparent; background:var(--lilac); color:var(--onLilac);
  font-family:var(--font); font-weight:600; font-size:clamp(15.21px,1.521vw,21.47px);
  height:50px; padding-block:0; padding-inline:10px;
  border-radius:25px; cursor:pointer; margin-top:14px;
  transition:transform .2s var(--ease), filter .2s;
}
.send .ico{width:clamp(22px,2.1vw,30px); height:clamp(22px,2.1vw,30px)}
.send:hover{transform:translateY(-2px); filter:brightness(1.1)}
.send:focus-visible{outline:2px solid var(--c); outline-offset:3px}
.tiny{font-size:10.73px; color:var(--soft); line-height:1.65; margin:2px 0 0; text-align:center}

/* ---------- אפליקציה ---------- */
.appBox{margin-top:0; 
  background:var(--surface); backdrop-filter:blur(18px) saturate(1.3);
  border:var(--bw) solid var(--line); border-radius:var(--rBig);
  /* ⚠ רחב יותר · שקד הגדילה ל-864 בקנבס */
  padding:clamp(24px,4vw,56px) clamp(20px,3.4vw,48px); max-width:864px; margin:30px auto 0;
}
.appBox .eye{display:block; margin-bottom:10px}
.appBox h3{font-size:clamp(21.47px,2.987vw,42.93px)}
.appBox p{font-size:13.42px; line-height:1.75; color:var(--soft); margin:14px auto 0; max-width:44ch}
.stores{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px}
/* ⚠ שורה אחת · ״App Store · בקרוב״ · כמו בקנבס */
.store{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  padding:14px 30px; border:var(--bw) solid var(--line); border-radius:16px;
  background:var(--surface); color:var(--soft); font-size:13.42px; text-align:center;
  transition:transform .2s var(--ease), border-color .25s;
}
.store b{font-weight:300; font-size:13.42px}
.store span{font-size:13.42px; color:var(--soft)}
.store:not(.off):hover{transform:translateY(-2px); border-color:var(--c)}
.store.off{opacity:.5; cursor:default}
.appnote{font-size:11.63px; color:var(--soft); margin:20px auto 0; max-width:42ch}
/* ⚠ לילך עם כיתוב שחור · שקד בחרה בקנבס */
.wabig{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px; text-decoration:none;
  font-size:clamp(13.42px,1.252vw,17.89px); font-weight:600; padding:15px 34px; border-radius:999px;
  background:var(--lilac); color:var(--onLilac);
  transition:transform .2s var(--ease), filter .2s;
}
.wabig .ico{width:24px; height:24px}
.wabig:hover{transform:translateY(-2px); filter:brightness(1.1)}

/* ---------- סיום ---------- */
/* ==========================================================================
   הסיום · מידע בלבד, שתי שורות · לבקשת שקד.
   ⚠ אין כאן כפתורים ואין ניווט · רק שם המותג, המשפט, הכתובת והטלפון.
   ========================================================================== */
.foot{border-block-start:var(--bw) solid var(--line); border-radius:var(--rBand); padding-block:30px 34px; text-align:center}
.foot .wrap{display:flex; flex-direction:column; align-items:center; gap:8px}
.fLine{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px 12px; margin:0; font-size:12.52px; color:var(--soft); line-height:1.6;
}
.fLine img{width:26px; height:26px; object-fit:contain}
.fLine b{font-weight:800; font-size:13.42px; color:var(--ink); letter-spacing:-.01em}
.fInfo i{font-style:normal; opacity:.45}
.fInfo a{color:inherit; text-decoration:none; transition:color .2s}
.fInfo a:hover{color:var(--c)}

.up{opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s var(--ease)}
.up.seen{opacity:1; transform:none}

/* ==========================================================================
   ⚠ מחשב · התפריט עובר למגזין · לבקשת שקד.
   מ-900 פיקסל ומעלה כל מנה היא כפולה: תמונה בצד אחד, הפרטים בשני,
   והצדדים מתחלפים בכל מנה.
   ========================================================================== */
@media (min-width:900px){
  .dishGrid{grid-template-columns:1fr; gap:0}
  .dishGrid .dish{
    display:grid; grid-template-columns:1fr 1fr; align-items:center;
    background:transparent; backdrop-filter:none;
    border-width:0 0 var(--bw) 0; border-radius:var(--rSoft);
  }
  .dishGrid .dish:last-child{border-block-end:0}
  .dishGrid .dish:nth-child(even){direction:ltr}
  .dishGrid .dish:nth-child(even) .dbd{direction:rtl}
  .dishGrid .dph{aspect-ratio:16/10; border-radius:var(--r)}
  .dishGrid .dbd{padding:26px 34px; gap:10px}
  .dishGrid .dish h4{font-size:clamp(17.89px,1.968vw,25.04px)}
  .dishGrid .dish p{font-size:13.42px}
  .dishGrid .dpr{font-size:23.26px}
  .dishGrid .dish:hover{transform:none; border-color:var(--line)}
  .dishGrid .dish:hover .dph img{transform:scale(1.05)}

}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition-duration:.01ms !important}
  .up{opacity:1; transform:none}
}

/* ---------- נייד ---------- */
@media (max-width:1000px){
  .galleryRails{height:min(560px,76svh)}
  .grail:nth-child(4){display:none}
  /* כרטיס האירועים נערם · מלל למעלה, טופס מתחת, והכול ממורכז */
  .eventCard{grid-template-columns:1fr; gap:30px; text-align:center}
  /* ⚠ **הרוחבים הקבועים חייבים ליפול כאן ולא למעלה · 23 בספטמבר 2026**
     `.ecBody` ו-`.ecServices` מקבלים 650px ו-680px מהקנבס, והם מוגדרים
     **אחרי** בלוק ה-1000px הראשון. למדיה-קוורי אין ספציפיות משלו, ולכן
     כלל מאוחר באותה ספציפיות מנצח — והעקיפה שם מעולם לא תפסה. התוצאה:
     טור הגריד נמתח ל-680px בתוך כרטיס של 351px, והעמוד גלש 330 פיקסל
     הצידה בכל טלפון. זה מה ששקד ראתה כ״פס בצד״: מעבר לקצה של סקשן
     ברוחב המסך נחשף רקע הגוף.
     ⚠ `min-width:0` הוא החלק השני · פריט גריד לא מתכווץ מתחת לרוחב
     המינימלי של תוכנו בלי זה, גם כשהרוחב עצמו כבר אחוזי. */
  .ecText,.ecForm{min-width:0}
  .ecBody,.ecServices{width:100%; max-width:100%}
  .ecForm{width:100%; max-width:515px}
  .ecTitle span{white-space:normal}
  .ecBody{margin-inline:auto}
  .ecList li{justify-content:center}
  .ecRows{justify-items:center}
  .ecTitle{margin-inline:auto}
}
/* ⚠ קישורי הניווט יורדים כבר ב-900 · הלוגו, חמישה קישורים ושלושה
   כפתורים לא נכנסים ברוחב טאבלט, והשורה גלשה אל מחוץ למסך. */
@media (max-width:900px){
  #nv{display:none}
  .navcta{gap:7px}
}
@media (max-width:760px){
  :root{--nav:64px}
  .hero{min-height:480px}
  .hero .wrap{padding-block-end:34px}
  .galleryRails{height:440px; gap:9px}
  .grail:nth-child(3){display:none}
}
/* מתחת לזה נשארים רק האייקונים · חוץ מהכפתורים הראשיים בפתיח.
   ⚠ גם כפתור המצב מתכווץ · המסילה המלאה (116px) דחפה את שורת
   הניווט 12 פיקסל מחוץ למסך באייפון. בלי הכיתוב הוא עדיין קריא. */
@media (max-width:560px){
  /* ⚠ בטלפון צר שתי עמודות שדות נחנקות · עמודה אחת */
  form{grid-template-columns:1fr}
  .f.half input{width:70%}
  .f.wide textarea{width:100%}
  .navcta{gap:6px}
  .btn{padding:9px 13px; font-size:12.07px}
  .navcta .btn span{display:none}
  .modeToggle{--mt-w:70px; --mt-h:34px; --mt-knob:39px}
}
@media (max-width:420px){
  .dishGrid{grid-template-columns:repeat(2,1fr); gap:10px}
  .wrap{padding-inline:16px}
}
/* ⚠ מסכים צרים במיוחד · הלוגו, שני כפתורים וכפתור המצב לא נכנסים
   ב-335 פיקסל. מכווצים ריפוד ומרווחים במקום להסתיר את שם המותג. */
@media (max-width:360px){
  .wrap{padding-inline:12px}
  .navcta{gap:5px}
  .nav .wrap{gap:8px}
  .logo img{width:32px; height:32px}
  .logo b{font-size:12.97px}
  .btn{padding:8px 11px}
  .modeToggle{--mt-w:62px; --mt-knob:35px}
  .mtFace .ico{width:15px; height:15px}
}