/* ==========================================================================
   קוצ׳ינה — ווידג'טים לאלמנטור · גיליון אחד
   --------------------------------------------------------------------------
   כלל ברזל בקובץ הזה: כל ערך שיש לו קונטרול בעורך נקרא כ-var(--name, ברירת-מחדל)
   ולעולם לא מוגדר על .cucina-hero. אלמנטור כותב את המשתנים על {{WRAPPER}},
   שהוא ה-*אב* של .cucina-hero — אם היינו מגדירים את אותו משתנה גם כאן, ההגדרה
   של הילד הייתה מנצחת וכל פקדי הצבע היו מפסיקים לעבוד בשקט.
   ========================================================================== */

/* ווידג'ט בעל רוחב מלא — בלי זה אלמנטור מכווץ אותו לרוחב התוכן */
.elementor-widget-cucina-hero-platter,
.elementor-widget-cucina-hero-platter > .elementor-widget-container { width: 100%; }

/* ==========================================================================
   1 · הבמה
   ========================================================================== */

.cucina-hero {
  /* טוקנים פנימיים בלבד — אין להם קונטרול, ולכן מותר להגדיר אותם כאן */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-press:  120ms;
  --d-hover:  180ms;
  --d-reveal: 520ms;
  --d-cross:  900ms;

  --p: 0;                       /* התקדמות הגלילה, נכתב ע"י ה-JS */

  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  align-items: center;
  overflow: clip;               /* מונע גלילה אופקית מכל אלמנט פנימי */
  isolation: isolate;
  /* זהה לאתר הסטטי במדויק (4.5rem / 7rem). לקונטרול "ריווח פנימי"
     אין ברירת מחדל, ולכן הערכים כאן בתוקף עד שהלקוחה קובעת אחרים —
     ואז הערך שלה מנצח, וזה הרצוי. */
  padding-block: 4.5rem 7rem;

  font-family: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
  color: #3B2D22;

  background:
    radial-gradient(120% 92% at 78% 6%,  #FFFDF9 0%, rgba(255,253,249,0) 58%),
    radial-gradient(100% 80% at 12% 96%, var(--c-linen, #EDE3D4) 0%, rgba(237,227,212,0) 62%),
    linear-gradient(178deg,
      var(--c-paper,   #FBF8F3) 0%,
      var(--c-paper-2, #F5EFE5) 68%,
      var(--c-linen,   #EDE3D4) 100%);
}

.cucina-hero *, .cucina-hero *::before, .cucina-hero *::after { box-sizing: border-box; }

.cu-h-full   { min-height: 100svh; }
.cu-h-auto   { min-height: 0; }
.cu-h-custom { min-height: 92vh; }
@supports not (height: 1svh) { .cu-h-full { min-height: 100vh; } }

/* רקע נוסף אופציונלי מ-Group_Control_Background */
.cucina-hero .hero__bgextra {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; background-size: cover; background-position: center;
}

.cucina-hero .hero__light {
  position: absolute; inset: -12% -6% auto -6%; height: 78%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.95) 0%, rgba(255,248,236,.5) 44%, rgba(255,248,236,0) 76%);
  transform: translate3d(0,0,0);
  will-change: transform;
}

.cucina-hero .hero__grain {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.cucina-hero .hero__inner {
  position: relative; z-index: 4;
  width: 100%; max-width: 1400px;
  margin-inline: auto;
  /* הריווח האופקי על ה-inner ולא על הסקשן — בדיוק כמו באתר הסטטי.
     כך ה-max-width כולל את הריווח, ורוחב העמודות יוצא זהה; והרקע
     ממשיך לרוץ מקצה לקצה. */
  padding-inline: clamp(1.25rem, 5vw, 5rem);
  display: grid;
  /* דרך משתנה ולא ישירות: כך ה-media query למטה יכול לדרוס את הפריסה
     במסך צר גם אחרי שהלקוחה שינתה את חלוקת העמודות בדסקטופ. */
  grid-template-columns: var(--cu-cols, minmax(0, 1fr) minmax(0, 1.02fr));
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}

.cucina-hero .hero__copy    { order: var(--cu-order-copy, 1);    min-width: 0; }
.cucina-hero .hero__platter { order: var(--cu-order-platter, 2); min-width: 0; position: relative; will-change: transform, opacity; }

/* ==========================================================================
   2 · טקסט
   --------------------------------------------------------------------------
   overflow-wrap ו-hyphens כאן הם ההגנה על מובייל: מילה עברית ארוכה
   (או URL) לא תוכל לחרוג מהמסך גם אם הלקוחה תקטין את הרוחב.
   ========================================================================== */

.cucina-hero .hero__eyebrow {
  margin: 0 0 1.5rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  font-size: clamp(.72rem, .66rem + .28vw, .82rem);
  font-weight: 600; letter-spacing: .2em;
  color: var(--cu-eyebrow, #7A5334);
  overflow-wrap: anywhere;
}
.cucina-hero .hero__eyebrow i { flex: 0 0 auto; width: 2rem; height: 1px; background: #C8BAA3; }

.cucina-hero .hero__title {
  margin: 0;
  font-family: "Frank Ruhl Libre", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 1.6rem + 4.4vw, 5.5rem);
  line-height: 1.06;
  letter-spacing: -0.008em;
  color: #241B14;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.cucina-hero .hero__title em {
  font-style: normal; font-weight: 700;
  color: var(--c-terracotta, #C2703B);
}
.cucina-hero .hero__title .w { display: inline-block; }

.cucina-hero .hero__lead {
  margin: 1.5rem 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, .94rem + .5vw, 1.28rem);
  font-weight: 300; line-height: 1.6;
  color: #6B5A4B;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.cucina-hero .hero__trust {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  font-size: clamp(.75rem, .71rem + .16vw, .82rem);
  font-weight: 500; letter-spacing: .06em;
  color: #6B5A4B;
}
.cucina-hero .hero__trust li {
  display: flex; align-items: center;
  position: relative;
  padding-inline-start: .85rem;
  overflow-wrap: anywhere;
}
.cucina-hero .hero__trust li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--cu-dot, #B8934A);
}

/* ==========================================================================
   3 · כפתורים
   ========================================================================== */

.cucina-hero .hero__actions {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem;
}

/* ⚠️ הבסיס של הכפתור חייב לחול בכל ווידג'ט שמשתמש ב-.cu-btn.
   כשזה היה מוגבל ל-.cucina-hero, אותו כפתור בסקשן אחר קיבל רק את
   נעילת הצבעים ובלי שום גיאומטריה — וה-SVG רונדר בגודלו הטבעי.
   ‏.cu-root מתווסף ע"י כל render, ולכן ווידג'ט חדש עובד מיד. */
.cu-root .cu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px;
  padding: .9rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: clamp(.9rem, .86rem + .24vw, 1rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d-press) var(--ease-out),
              background-color var(--d-hover) ease,
              color var(--d-hover) ease,
              border-color var(--d-hover) ease,
              box-shadow var(--d-hover) var(--ease-out);
}
.cu-root .cu-btn svg {
  width: 1em; height: 1em; flex: 0 0 auto;
  transition: transform var(--d-hover) var(--ease-out);
}
.cu-root .cu-btn--primary { box-shadow: 0 .7rem 1.6rem -.5rem rgba(36,27,20,.3); }
.cucina-hero .cu-btn--ghost { backdrop-filter: blur(10px) saturate(150%); }

.cu-root .cu-btn:active { transform: translate3d(0,1px,0) scale(.985); }

/* ==========================================================================
   4 · המגש
   ========================================================================== */

.cucina-hero .platter__stage {
  position: relative;
  width: 100%; max-width: 640px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  perspective: 1200px;
  transform-style: preserve-3d;
  will-change: transform;
}

.cucina-hero .platter__board {
  position: absolute; inset: 2% -6% 0% -6%;
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(56% 50% at 47% 42%,
    var(--cu-board-1, rgba(255,255,255,.92)) 0%,
    rgba(252,249,243,.72) 42%,
    var(--cu-board-2, rgba(240,231,217,.42)) 68%,
    rgba(237,227,212,0) 100%);
  transform: translate3d(0,0,0);
}
.cucina-hero .platter__board::after {
  content: ""; position: absolute; inset: 34% 12% 2% 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(120,92,62, calc(.2 * var(--cu-board-shadow, 1))) 0%,
    rgba(120,92,62,0) 100%);
  filter: blur(18px);
}

/* מיקום הכלי — פיזי בכוונה. זו קומפוזיציה ויזואלית בתוך במה מרובעת,
   לא זרימת טקסט; logical properties היו הופכות אותה ב-LTR. */
.cucina-hero .tile {
  --cx: var(--x, 50%);
  --cy: var(--y, 50%);
  --cs: var(--size, 27%);

  position: absolute;
  width: var(--cs); aspect-ratio: 1 / 1;
  left: calc(var(--cx) - var(--cs) / 2);
  top:  calc(var(--cy) - var(--cs) / 2);
  z-index: 3;
  text-decoration: none;
  transform-style: preserve-3d;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.cucina-hero .tile--lead { z-index: 4; }

.cucina-hero .tile__media {
  position: absolute; inset: 0;
  display: block; border-radius: 50%;
  overflow: hidden; isolation: isolate;
  background: var(--cu-tile-bg, #DCD1BF);
  box-shadow:
    0 1.2rem 2.6rem -.8rem rgba(36,27,20, calc(.28 * var(--cu-shadow, 1))),
    0 .3rem .9rem -.4rem  rgba(36,27,20, calc(.18 * var(--cu-shadow, 1))),
    inset 0 0 0 1px var(--cu-ring, rgba(255,255,255,.55));
  transition: box-shadow var(--d-hover) var(--ease-out),
              opacity var(--d-hover) ease,
              filter var(--d-hover) ease;
}
.cucina-hero .tile--lead .tile__media {
  box-shadow:
    0 1.2rem 2.6rem -.8rem rgba(36,27,20, calc(.28 * var(--cu-shadow, 1))),
    0 .3rem .9rem -.4rem  rgba(36,27,20, calc(.18 * var(--cu-shadow, 1))),
    inset 0 0 0 2px var(--cu-ring-lead, rgba(227,206,159,.85));
}

.cucina-hero .tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* ברירת מחדל, גם אם הקונטרול אופס */
  object-position: center;
  opacity: 0;
  /* ה-scale הזעיר הוא מה שהופך את ההחלפה מ"חשיפה כפולה" ל"החלפה" */
  transform: scale(calc(var(--cu-img-zoom, 1) * 1.03));
  transition: opacity var(--d-cross) var(--ease-in-out),
              transform var(--d-cross) var(--ease-out);
}
.cucina-hero .tile__img.is-on {
  opacity: 1;
  transform: scale(var(--cu-img-zoom, 1));
}

.cucina-hero .tile__label {
  position: absolute; inset-inline: -30%; top: calc(100% + .7rem);
  text-align: center;
  font-size: clamp(.75rem, .71rem + .16vw, .82rem);
  font-weight: 600; letter-spacing: .06em; line-height: 1.3;
  color: var(--cu-label, #241B14);
  pointer-events: none;
  overflow-wrap: anywhere;
}
.cucina-hero .tile__label b,
.cucina-hero .tile__label i { font-weight: inherit; font-style: normal; }
/* השם המלא בדסקטופ, המקוצר במובייל — ראו ההערה ליד המדיה-קוורי */
.cucina-hero .tile__label i { display: none; }

/* עמעום-להתמקדות */
.cucina-hero .platter__stage[data-focus] .tile:not([data-hot]) .tile__media {
  opacity: var(--cu-dim, .68);
  filter: saturate(.86);
}

.cucina-hero .platter__hint {
  margin: clamp(1.25rem, 3vw, 2.75rem) 0 0;
  text-align: center;
  font-size: clamp(.75rem, .71rem + .16vw, .82rem);
  letter-spacing: .06em;
  color: #6B5A4B;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   5 · רמז גלילה + מסירת רקע
   ========================================================================== */

.cucina-hero .hero__cue {
  position: absolute; z-index: 5;
  inset-block-end: clamp(1.5rem, 4vh, 3rem);
  left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  min-height: 44px;
  font-size: clamp(.75rem, .71rem + .16vw, .82rem);
  font-weight: 500; letter-spacing: .2em;
  color: #6B5A4B; text-decoration: none;
  opacity: calc(1 - var(--p) * 8);
}
@keyframes cu-cue-flow {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 6px, 0); }
}
.cucina-hero .hero__cue i {
  display: block; width: 1px; height: 2.4rem;
  background: linear-gradient(to bottom, var(--cu-cue-line, #C8BAA3), rgba(200,186,163,0));
  animation: cu-cue-flow 2200ms var(--ease-in-out) infinite alternate;
}

.cucina-hero .hero__bleed {
  position: absolute; inset-inline: 0; bottom: 0;
  height: 40vh; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    color-mix(in srgb, var(--cu-bleed, #EDE3D4) 6%, transparent)  22%,
    color-mix(in srgb, var(--cu-bleed, #EDE3D4) 20%, transparent) 44%,
    color-mix(in srgb, var(--cu-bleed, #EDE3D4) 48%, transparent) 66%,
    color-mix(in srgb, var(--cu-bleed, #EDE3D4) 78%, transparent) 84%,
    var(--cu-bleed, #EDE3D4) 100%);
  opacity: calc(.35 + var(--p) * .65);
}
/* דפדפן בלי color-mix — רמפה פשוטה, אף פעם לא ריבוע אטום */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .cucina-hero .hero__bleed {
    background: linear-gradient(to bottom, rgba(237,227,212,0) 0%, var(--cu-bleed, #EDE3D4) 100%);
  }
}

/* ==========================================================================
   6 · מצבי pre-animation — רק תחת שער ה-JS
   --------------------------------------------------------------------------
   opacity הוא באחריות CSS ולא JS: animation רץ מחוץ ל-main thread ולכן
   תמיד מגיע לסוף. לולאת rAF נחנקת בטאב ברקע, ב-iframe של אלמנטור
   וב-prerender — ובגרסה מוקדמת האריחים נשארו שם ב-opacity:0.
   ========================================================================== */

@keyframes cu-rise-blur {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(10px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0);   }
}
@keyframes cu-rise { from { opacity: 0; transform: translate3d(0,12px,0); } to { opacity: 1; transform: none; } }
@keyframes cu-fade { from { opacity: 0; } to { opacity: 1; } }

.cucina-anim .cucina-hero .hero__title .w {
  opacity: 0;
  animation: cu-rise-blur var(--d-reveal) var(--ease-out) forwards;
  animation-delay: calc(140ms + var(--i, 0) * 70ms);
}
.cucina-anim .cucina-hero [data-rise] {
  opacity: 0;
  animation: cu-rise 480ms var(--ease-out) forwards;
  animation-delay: calc(260ms + var(--rise, 0) * 90ms);
}
.cucina-anim .cucina-hero .platter__board {
  opacity: 0; animation: cu-fade 560ms var(--ease-out) 60ms forwards;
}
.cucina-anim .cucina-hero .tile {
  opacity: 0;
  animation: cu-fade 400ms var(--ease-out) forwards;
  animation-delay: calc(160ms + var(--o, 0) * 70ms);
}

/* reduced-motion: אותה היררכיה, בלי תזוזה ובלי blur */
.cucina-anim-soft .cucina-hero .hero__title .w,
.cucina-anim-soft .cucina-hero [data-rise],
.cucina-anim-soft .cucina-hero .tile {
  opacity: 0;
  animation: cu-fade 300ms ease forwards;
  animation-delay: calc(60ms + var(--i, var(--rise, var(--o, 0))) * 40ms);
}

/* ==========================================================================
   7 · hover בלבד (מכשיר מצביע מדויק)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .cucina-hero .tile__label {
    opacity: 0; transform: translate3d(0, 8px, 0);
    transition: opacity var(--d-hover) var(--ease-out),
                transform var(--d-hover) var(--ease-out);
  }
  .cucina-hero .tile[data-hot] .tile__label,
  .cucina-hero .tile:focus-visible .tile__label { opacity: 1; transform: none; }

  .cucina-hero .tile[data-hot] .tile__media {
    box-shadow:
      0 3rem 5.5rem -1rem rgba(36,27,20, calc(.42 * var(--cu-shadow, 1))),
      0 .7rem 1.6rem -.4rem rgba(36,27,20, calc(.24 * var(--cu-shadow, 1))),
      inset 0 0 0 1px var(--cu-ring, rgba(255,255,255,.7));
  }
  .cucina-hero .cu-btn--primary:hover { box-shadow: 0 2.4rem 4.4rem -1rem rgba(36,27,20,.36); }
  .cucina-hero .cu-btn--primary:hover svg { transform: translateX(-3px); }
  .cucina-hero[dir="ltr"] .cu-btn--primary:hover svg { transform: translateX(3px) scaleX(-1); }
  .cucina-hero[dir="ltr"] .cu-btn svg { transform: scaleX(-1); }
}

/* ==========================================================================
   8 · מובייל — נתיב נפרד, לא דסקטופ מכווץ
   ========================================================================== */

/* ‏(א) לפי רוחב: ריווח, גדלים, מה שלא נשלט מקונטרול.
   ‏grid-template-columns ו-max-width של המגש **לא** כאן בכוונה — לשניהם יש
   קונטרול רספונסיבי, ואלמנטור מקמפל אותם בספציפיות (0,4,0) שמנצחת כל
   media query שלנו. מי שיוסיף אותם לכאן ייצור כלל מת. */
@media (max-width: 1024px) {
  .cucina-hero { align-items: start; padding-block: 3rem 4rem; }
  .cucina-hero .hero__inner { grid-template-columns: var(--cu-cols-m, minmax(0, 1fr)); }
  .cucina-hero .platter__stage { perspective: none; }
}

/* ‏(ב) לפי יכולת המכשיר: בלי hover התוויות חייבות להיות גלויות תמיד,
   ואם הן גלויות תמיד הן חייבות לשבת **בתוך** העיגול — מתחתיו הן היו
   מתנגשות בעיגולים השכנים. זה נכון גם לטאבלט רחב, ולכן התנאי הוא
   יכולת המכשיר. הרוחב נוסף כתנאי שלישי בגלל מקרה קצה שנתפס בבדיקה:
   חלון דסקטופ צר (390px) מדווח hover:hover, ואז התווית נשארה מתחת לעיגול
   עם inset-inline:-30% — וחרגה 9px מעבר לקצה המסך ונחתכה. */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  /* בתוך העיגול יש כ-70px, ולכן כאן מוצג השם המקוצר.
     שם מלא היה נשבר לשתי שורות ומצטופף בשישה עיגולים. */
  .cucina-hero .tile__label {
    opacity: 1 !important;
    transform: none !important;
    inset-inline: 6%; top: auto; bottom: 6%;
    font-size: max(11px, .62rem);
    line-height: 1.2;
    color: var(--cu-label-mob, #fff);
    text-shadow: 0 1px 5px rgba(28,20,14,.55);
  }
  .cucina-hero .tile__label b { display: none; }
  .cucina-hero .tile__label i { display: block; }
  .cucina-hero .tile__media::after {
    content: ""; position: absolute; inset: 42% 0 0;
    background: linear-gradient(to top,
      rgba(28,20,14, var(--cu-scrim, .6)) 0%, rgba(28,20,14,0) 100%);
    pointer-events: none;
  }
  .cucina-hero .platter__stage[data-focus] .tile:not([data-hot]) .tile__media {
    opacity: 1; filter: none;
  }
}

/* ‏(ג) מובייל אמיתי — מיושר לברייקפוינט של אלמנטור (767px) כדי שלא ייווצר
   פס רוחב שבו הכלל שלנו והכלל של אלמנטור אומרים דברים שונים. */
@media (max-width: 767px) {
  .cucina-hero { padding-block: 2.25rem 3rem; }
  .cucina-hero .hero__inner { padding-inline: 1.15rem; }
  .cucina-hero .tile { --cx: var(--xm, 50%); --cy: var(--ym, 50%); --cs: var(--sm, 31%); }
  .cucina-hero .tile--no-mobile { display: none; }
  .cucina-hero .hero__cue { display: none; }
  .cucina-hero .hero__trust { gap: .6rem 1.25rem; }
}

@media (max-width: 480px) {
  .cucina-hero .hero__actions { gap: .6rem; }
  .cucina-hero .hero__eyebrow { gap: .5rem; margin-bottom: 1.1rem; }
  /* כששורת-העל נשברת לשתי שורות, הקו המפריד נשאר תלוש. עדיף בלעדיו. */
  .cucina-hero .hero__eyebrow i { display: none; }
}

@media (max-width: 360px) {
  .cucina-hero .tile__label { font-size: 11px; inset-inline: 4%; bottom: 5%; }
  .cucina-hero .hero__title { font-size: clamp(1.95rem, 8.5vw, 2.4rem); }
  .cucina-hero .hero__trust { font-size: 11px; gap: .5rem 1rem; }
  /* שני כפתורים לא נכנסים זה ליד זה ב-320px.
     ‏flex-direction על ההורה, ולא flex על הכפתור — לכפתור יש קונטרול
     ("רוחב מלא") שאלמנטור מקמפל בספציפיות גבוהה יותר, ו-flex כאן היה כלל מת.
     ‏align-items: stretch משיג את אותה תוצאה בלי להתנגש. */
  .cucina-hero .hero__actions { flex-direction: column; align-items: stretch; }
}

/* טלפון בשכיבה — 100svh הוא ~390px, אין סיכוי להכניס הכל */
/* טלפון בשכיבה — 100svh הוא ~390px. משחררים את הגובה כך שהעמוד פשוט
   נגלל, במקום לדחוס תוכן לרצועה. גם כאן: בלי grid-template-columns
   ובלי max-width למגש — לשניהם יש קונטרול שמנצח. */
@media (max-height: 560px) and (orientation: landscape) {
  .cucina-hero.cu-h-full,
  .cucina-hero.cu-h-custom { min-height: 0; }
  /* בלי padding-block כאן: לקונטרול "ריווח פנימי" יש כלל בספציפיות
     גבוהה יותר, וכל ערך שנכתוב כאן יהיה כלל מת. הריווח של מובייל
     ממילא מתאים גם לשכיבה. */
  .cucina-hero { align-items: center; padding-block: 1.75rem; }
  .cucina-hero .hero__cue { display: none; }
  .cucina-hero .platter__hint { display: none; }
}

/* ==========================================================================
   9 · העדפות נגישות
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cucina-hero .hero__light { transform: none !important; }
  .cucina-hero .hero__cue i { animation: none; }
  .cucina-hero .tile__img,
  .cucina-hero .tile__img.is-on { transition: opacity 240ms ease; transform: scale(var(--cu-img-zoom, 1)); }
  .cucina-hero .cu-btn { transition: background-color var(--d-hover) ease, color var(--d-hover) ease; }
  .cucina-hero .cu-btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .cucina-hero .cu-btn--ghost { backdrop-filter: none; }
}
/* ‏prefers-contrast: כאן במכוון לא נוגעים בצבעי הטקסט — לכל אחד מהם יש
   קונטרול, ודריסה שלו הייתה או כלל מת או !important שחוסם את הלקוחה.
   מה שכן עוזר ולא מתנגש: להוריד רעש ולחזק גבולות. */
@media (prefers-contrast: more) {
  .cucina-hero .hero__grain { display: none; }
  .cucina-hero .tile__media { box-shadow: inset 0 0 0 2px #241B14; }
  .cucina-hero .hero__eyebrow i { height: 2px; }
}

/* ==========================================================================
   10 · מצב עורך אלמנטור
   --------------------------------------------------------------------------
   בעורך אין אנימציות (שער ה-JS לא נוסף שם בכלל), אבל צריך גם למנוע
   מהסקשן להיות גבוה מהמסך כדי שאפשר יהיה לערוך אותו בנוחות.
   ========================================================================== */

.cucina-editor-preview.cu-h-full { min-height: 78vh; }
.cucina-editor-preview .hero__cue { opacity: .5; }
.cucina-editor-preview .tile,
.cucina-editor-preview .hero__title .w,
.cucina-editor-preview [data-rise],
.cucina-editor-preview .platter__board {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}
.cucina-editor-preview .tile__img.is-on { opacity: 1 !important; }

/* ==========================================================================
   11 · ELEMENTOR IMAGE RESET OVERRIDE  —  אין למחוק
   --------------------------------------------------------------------------
   אלמנטור שולח `.elementor img { height: auto; max-width: 100% }`.
   לזה ולכלל `.tile__img` יש ספציפיות זהה (0,1,1) והגיליון שלו נטען אחרי —
   ולכן הוא מנצח, והתוצאה היא תמונה שמתכנסת ליחס הטבעי שלה ומשאירה
   פס ריק בתוך העיגול. כאן המידות נאמרות מחדש ברמה אחת מעל.
   ‏object-fit מושאר בכוונה בחוץ, כדי שהקונטרול "כיסוי ומיקום" ימשיך לנצח.
   ========================================================================== */

.cucina-hero .tile__media .tile__img {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  border-radius: inherit;
  display: block;
}

/* ==========================================================================
   12 · INTERACTIVE STATE PINS  —  אין למחוק
   --------------------------------------------------------------------------
   כל כלל כאן מתקן את אותו באג: הכללים שלנו יושבים בספציפיות (0,2,0),
   וכל תבנית וורדפרס שולחת `a:hover`, `a:visited` או `.elementor a:hover`
   בספציפיות שווה או גבוהה — ומנצחת. בלוקאלהוסט זה לא מופיע כי אין תבנית
   מתחרה; זה נחשף רק כשהווידג'ט עולה לאתר אמיתי, וצבע ורוד/סגול של
   התבנית דולף לכפתורים ולקישורים.
   ‏!important יושב תמיד על ההצהרה ש**צורכת** משתנה, לעולם לא על המשתנה —
   וכך פקדי הצבע בעורך ממשיכים לעבוד במלואם.
   ========================================================================== */

/* הכלי הוא צילום, לא כפתור — אסור שתבנית תצבע אותו או תמסגר אותו */
.cucina-hero .tile,
.cucina-hero .tile:link,
.cucina-hero .tile:visited,
.cucina-hero .tile:hover,
.cucina-hero .tile:focus,
.cucina-hero .tile:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: 0 !important;
}
.cucina-hero .tile__label,
.cucina-hero .tile:hover .tile__label { text-decoration: none !important; }

/* קישורי טקסט בסקשן: התווית והרמז לא מקבלים קו תחתון או צבע-קישור */
.cucina-hero .hero__cue,
.cucina-hero .hero__cue:link,
.cucina-hero .hero__cue:visited,
.cucina-hero .hero__cue:hover,
.cucina-hero .hero__cue:focus {
  text-decoration: none !important;
  background: transparent !important;
}

/* טבעת מיקוד אחת ואחידה לכל דבר שאפשר להגיע אליו במקלדת */
.cucina-hero .tile:focus-visible .tile__media,
.cucina-hero .hero__cue:focus-visible {
  outline: 2px solid var(--cu-focus, #B8934A) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   ══════════  ווידג'ט 2 — בין לקוחותינו · רצועת לוגואים נעה  ══════════
   --------------------------------------------------------------------------
   בלי קופסאות ובלי גריד. הלוגואים יושבים על הרצועה בגובה אחיד וברוחב
   טבעי לכל אחד — האיזון האופטי נעשה בקובץ עצמו (docs/_prep-logos.py),
   ולא ע"י דחיסה למסגרת אחידה. זה ההבדל בין רצועה מקצועית לבין
   שורת תמונות באותו גודל.

   אותם כללים כמו בהירו: כל ערך שיש לו קונטרול נקרא כ-var(--name, fallback),
   ואף media query כאן לא כותב פרופרטי שיש לו קונטרול.
   ========================================================================== */

.elementor-widget-cucina-clients,
.elementor-widget-cucina-clients > .elementor-widget-container { width: 100%; }

.cucina-clients {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-hover: 220ms;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: clip;
  isolation: isolate;
  padding-block: clamp(3.5rem, 8vh, 6.5rem);

  font-family: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
  color: #3B2D22;

  background: linear-gradient(180deg,
    var(--cl-bg-1, #EDE3D4) 0%,
    var(--cl-bg-2, #F7F2E9) 62%,
    var(--cl-bg-2, #F7F2E9) 100%);
}

.cucina-clients *, .cucina-clients *::before, .cucina-clients *::after { box-sizing: border-box; }

.cucina-clients .clients__bgextra {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; background-size: cover; background-position: center;
}
.cucina-clients .clients__glow {
  position: absolute; inset: -24% -10% auto -10%; height: 74%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.82) 0%, rgba(255,250,240,.34) 46%, rgba(255,250,240,0) 78%);
}
.cucina-clients .clients__grain {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: .24; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.cucina-clients .clients__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 900px;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 5rem);
}

/* ── כותרת ── */

.cucina-clients .clients__head { text-align: center; }

.cucina-clients .clients__eyebrow {
  margin: 0 0 1rem;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  font-size: clamp(.72rem, .66rem + .28vw, .82rem);
  font-weight: 600; letter-spacing: .2em;
  color: var(--cu-eyebrow, #7A5334);
  overflow-wrap: anywhere;
}
.cucina-clients .clients__eyebrow i {
  flex: 0 0 auto; width: clamp(1.5rem, 4vw, 3rem); height: 1px; background: #C8BAA3;
}

.cucina-clients .clients__title {
  margin: 0;
  font-family: "Frank Ruhl Libre", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  line-height: 1.12; letter-spacing: -0.006em;
  color: #241B14;
  text-wrap: balance; overflow-wrap: anywhere;
}
.cucina-clients .clients__title em {
  font-style: normal; font-weight: 700;
  color: var(--c-terracotta, #C2703B);
}
.cucina-clients .clients__title .w { display: inline-block; }

.cucina-clients .clients__lead {
  margin: 1rem auto 0;
  max-width: 62ch;
  font-size: clamp(.95rem, .9rem + .35vw, 1.12rem);
  font-weight: 300; line-height: 1.65;
  color: #6B5A4B;
  text-wrap: pretty; overflow-wrap: anywhere;
}

/* ══ הרצועות ══════════════════════════════════════════════════════════
   מקצה לקצה בכוונה — זה מה שגורם להן להיראות כמו סרט שעובר דרך העמוד
   ולא כמו רכיב בתוך קופסה.
   ══════════════════════════════════════════════════════════════════ */

.cucina-clients .clients__rails {
  position: relative; z-index: 2;
  margin-block-start: clamp(2rem, 5vw, 3.25rem);
  display: flex; flex-direction: column;
  gap: 30px;
}
.cucina-clients.has-rules .clients__rails {
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-block: 1px solid var(--cl-rule, rgba(122,83,52,.14));
}

.cucina-clients .rail {
  /* ⚠️ ה-LTR חייב לשבת גם כאן, על המכל, ולא רק על ה-track.
     ‏.rail__track רחב מהמכל, ובמכל RTL בלוק רחב-מדי נצמד לימין
     והגלישה יוצאת שמאלה — כלומר כל המסילה נמצאת מחוץ למסך משמאל,
     והחצי הימני של הרצועה נראה ריק. עם LTR הקצה השמאלי של המסילה
     מיושר לקצה השמאלי של הרצועה, וזה מה שמתמטיקת ההיסט מניחה. */
  direction: ltr;
  position: relative;
  height: var(--cl-rail-h, 92px);
  overflow: hidden;
  /* הלוגואים נמסים בקצוות במקום להיחתך בקו ישר */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 var(--cl-fade, 160px),
    #000 calc(100% - var(--cl-fade, 160px)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 var(--cl-fade, 160px),
    #000 calc(100% - var(--cl-fade, 160px)), transparent 100%);
}

.cucina-clients .rail__track {
  direction: ltr;   /* ראו ההערה ב-.rail */
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
  /* התנועה היא transform בלבד — אף פעם לא left/margin */
  transform: translate3d(0, 0, 0);
}

.cucina-clients .rail__set {
  direction: ltr;
  display: flex; align-items: center; flex: 0 0 auto;
  height: 100%;
  gap: var(--cl-gap, 64px);
  padding-right: var(--cl-gap, 64px);
}

.cucina-clients .logo {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  display: flex; align-items: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.cucina-clients .logo__img {
  height: calc(100% * var(--cl-scale, 1) * var(--cu-img-zoom, 1));
  width: auto; max-width: none;
  object-fit: contain; object-position: center;
  filter: grayscale(var(--cl-gray, 1));
  opacity: var(--cl-op, .68);
  transition: filter var(--d-hover) ease,
              opacity var(--d-hover) ease,
              transform var(--d-hover) var(--ease-out);
  -webkit-user-drag: none; user-select: none;
}

/* גרירה: הסמן אומר מה אפשר לעשות.
   ‏touch-action: pan-y — גרירה אופקית נתפסת על ידינו, אבל גלילה
   אנכית של העמוד ממשיכה לעבוד באצבע. */
.cucina-clients.is-draggable .rail { cursor: grab; touch-action: pan-y; }
.cucina-clients.is-draggable .rail.is-dragging { cursor: grabbing; }
.cucina-clients.is-draggable .rail.is-dragging * { pointer-events: none; }

/* ── שם הלקוח: שורה אחת משותפת מתחת לרצועות ──
   הכיתוב לא יכול לשבת מעל הלוגו, כי ה-rail חייב overflow:hidden
   בשביל הלולאה — וכל תווית שחורגת ממנו הייתה נחתכת. */
.cucina-clients .clients__caption {
  position: relative; z-index: 3;
  margin: clamp(.9rem, 2vw, 1.4rem) auto 0;
  min-height: 1.6em;
  text-align: center;
  font-size: clamp(11px, .7rem + .12vw, .84rem);
  font-weight: 600; letter-spacing: .04em;
  color: #241B14;
  opacity: 0;
  transition: opacity 200ms ease;
}
.cucina-clients .clients__caption.is-on { opacity: 1; }
.cucina-clients .logo__name {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.cucina-clients .clients__note {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  text-align: center;
  font-size: clamp(11px, .7rem + .12vw, .82rem);
  letter-spacing: .04em;
  color: #6B5A4B;
  overflow-wrap: anywhere;
}

/* ── כניסה בגלילה ── */
@keyframes cl-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.cucina-anim .cucina-clients .clients__rails { opacity: 0; }
.cucina-anim .cucina-clients .clients__rails.is-in {
  opacity: 0;
  animation: cl-rise 620ms var(--ease-out) 120ms forwards;
}
.cucina-anim .cucina-clients .clients__head [data-rise],
.cucina-anim .cucina-clients .clients__note {
  opacity: 0;
  animation: cu-rise 480ms var(--ease-out) forwards;
  animation-delay: calc(120ms + var(--rise, 0) * 90ms);
}
.cucina-anim .cucina-clients .clients__title .w {
  opacity: 0;
  animation: cu-rise-blur 520ms var(--ease-out) forwards;
  animation-delay: calc(80ms + var(--i, 0) * 60ms);
}
.cucina-anim-soft .cucina-clients .clients__rails.is-in,
.cucina-anim-soft .cucina-clients .clients__head [data-rise],
.cucina-anim-soft .cucina-clients .clients__title .w,
.cucina-anim-soft .cucina-clients .clients__note {
  opacity: 0;
  animation: cu-fade 300ms ease forwards;
  animation-delay: calc(60ms + var(--i, var(--rise, 0)) * 30ms);
}

/* ── ריחוף: הלוגו חוזר לצבע מלא, השאר נסוגים ── */
@media (hover: hover) and (pointer: fine) {
  .cucina-clients .rail:hover .logo:not(:hover) .logo__img {
    opacity: calc(var(--cl-op, .68) * var(--cl-dim, .45));
  }
  .cucina-clients .logo:hover .logo__img,
  .cucina-clients .logo:focus-visible .logo__img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.07);
  }
}

/* במכשיר מגע אין ריחוף — הלוגואים בצבע מלא מלכתחילה */
@media (hover: none), (pointer: coarse) {
  .cucina-clients .logo__img { filter: grayscale(0); opacity: 1; }
}

/* ══ מצב סטטי — reduced-motion, מפסק כבוי, או עורך ══
   הרצועות נפתחות לשורות עוטפות וממורכזות. אף פעם לא נשארים
   עם תוכן חתוך או מוסתר. */
.cucina-clients.cu-no-anim .rail,
.cucina-clients.is-static .rail,
.cucina-editor-preview .rail {
  height: auto;
  overflow: visible;
  cursor: default;
  -webkit-mask-image: none; mask-image: none;
}
.cucina-clients.cu-no-anim .rail__track,
.cucina-clients.is-static .rail__track,
.cucina-editor-preview .rail__track {
  width: 100%;
  transform: none !important;
  will-change: auto;
}
.cucina-clients.cu-no-anim .rail__set,
.cucina-clients.is-static .rail__set,
.cucina-editor-preview .rail__set {
  flex-wrap: wrap; justify-content: center;
  width: 100%;
  row-gap: clamp(1.25rem, 3vw, 2rem);
  padding-inline-end: 0;
}
.cucina-clients.cu-no-anim .logo,
.cucina-clients.is-static .logo,
.cucina-editor-preview .logo { height: var(--cl-rail-h, 92px); }
.cucina-clients.cu-no-anim .clients__rails,
.cucina-clients.is-static .clients__rails,
.cucina-editor-preview .clients__rails { opacity: 1 !important; animation: none !important; }
/* בעורך מוותרים גם על הצמצום לרוחב מלא, כדי שהשורות לא יגלשו */
.cucina-editor-preview .rail__set { padding-inline: clamp(1.15rem, 5vw, 5rem); }

/* ── ברייקפוינטים — רק מה שאין לו קונטרול ── */
@media (max-width: 767px) {
  /* בלי gap לרצועות כאן: לקונטרול "מרווח בין הרצועות" יש ערך מובייל
     משלו בספציפיות גבוהה יותר, וכל ערך שנכתוב כאן יהיה כלל מת. */
  .cucina-clients { padding-block: clamp(2.5rem, 6vh, 4rem); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .cucina-clients { padding-block: 2rem; }
}

/* ── נגישות ── */
@media (prefers-reduced-motion: reduce) {
  .cucina-clients .logo__img { transition: opacity var(--d-hover) ease, filter var(--d-hover) ease; }
  .cucina-clients .logo:hover .logo__img { transform: none; }
}
@media (prefers-contrast: more) {
  .cucina-clients .clients__grain { display: none; }
  .cucina-clients .logo__img { filter: grayscale(0); opacity: 1; }
}

/* ── IMAGE RESET: `.elementor img { height:auto }` היה מכווץ כל לוגו
   לגובה הטבעי שלו והורס את האיזון בין הלוגואים ברצועה ── */
.cucina-clients .logo .logo__img {
  height: calc(100% * var(--cl-scale, 1) * var(--cu-img-zoom, 1));
  width: auto;
  max-width: none;
  min-width: 0;
  display: block;
}

/* ── STATE PINS: הלוגו הוא לוגו, לא קישור צבוע ── */
.cucina-clients .logo,
.cucina-clients .logo:link,
.cucina-clients .logo:visited,
.cucina-clients .logo:hover,
.cucina-clients .logo:focus,
.cucina-clients .logo:active {
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.cucina-clients .logo:focus-visible {
  outline: 2px solid var(--cu-focus, #B8934A) !important;
  outline-offset: 6px !important;
  border-radius: 4px;
}
/* ==========================================================================
   מפסק אנימציה לסקשן בודד
   --------------------------------------------------------------------------
   כשהמפסק "אנימציות" בווידג'ט כבוי, ה-render מוסיף cu-no-anim.
   בלי זה מצבי ה-pre-animation שתחת .cucina-anim היו ממשיכים להסתיר
   את התוכן, כי ה-JS לא מריץ את מה שאמור לחשוף אותו.
   ========================================================================== */
.cucina-anim .cu-no-anim .tile,
.cucina-anim .cu-no-anim .hero__title .w,
.cucina-anim .cu-no-anim [data-rise],
.cucina-anim .cu-no-anim .platter__board,
.cucina-anim .cu-no-anim .clients__grid .client,
.cucina-anim .cu-no-anim .clients__title .w,
.cucina-anim .cu-no-anim .clients__note,
.cucina-anim-soft .cu-no-anim .tile,
.cucina-anim-soft .cu-no-anim .hero__title .w,
.cucina-anim-soft .cu-no-anim [data-rise],
.cucina-anim-soft .cu-no-anim .clients__grid .client,
.cucina-anim-soft .cu-no-anim .clients__title .w,
.cucina-anim-soft .cu-no-anim .clients__note {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* ==========================================================================
   ══════════════  ווידג'ט 3 — רקע לכל העמוד  ══════════════
   --------------------------------------------------------------------------
   שכבה אחת קבועה מאחורי כל העמוד. גוררים פעם אחת, והיא לא תופסת מקום
   בפריסה. שלוש הערות שחייבות להישאר נכונות:

   ‏1. ה-JS מעביר את השכבה ל-<body> ומשחזר שם את שרשרת הסלקטורים של
      אלמנטור, אחרת position:fixed נשבר בתוך אב עם transform/filter,
      וכל קונטרול עיצוב על הווידג'ט מפסיק לעבוד.
   ‏2. אסור לתת ל-.cucina-portal-root/.cucina-portal אף פעם transform,
      filter או contain — כל אחד מהם הופך אותם ל-containing block
      ומנתק את השכבה מה-viewport.
   ‏3. כל התנועה כאן היא transform/opacity, במחזורים של 70–110 שניות.
      רקע שמושך תשומת לב הוא רקע כושל.
   ========================================================================== */

.elementor-widget-cucina-page-bg,
.elementor-widget-cucina-page-bg > .elementor-widget-container {
  height: 0; min-height: 0; margin: 0; padding: 0;
  overflow: visible;
}

.cucina-portal-root,
.cucina-portal { position: static; }

.cucina-pagebg {
  --p: 0;        /* התקדמות הגלילה בכל העמוד, 0→1 */
  --par: 0px;    /* היסט הפרלקסה של הטבעות */

  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* ‏אין כאן contain. ‏contain: strict נראה כמו אופטימיזציה נכונה
     (בידוד ציור), אבל בפועל הוא גרם לשכבה להפסיק להיצבע אחרי גלילה
     והעמוד יצא לבן לגמרי. overflow:hidden כבר נותן את רוב הבידוד. */
}

.cucina-pagebg > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── הבסיס: גרדיאנט גבוה מהחלון שנע עם הגלילה ──
   זה מה שגורם לעמוד להיקרא כיריעה אחת ולא כרצף סקשנים. */
.cucina-pagebg .pagebg__base {
  top: -50%; height: 200%; inset-inline: 0;
  background: linear-gradient(180deg,
    var(--bg-1, #FBF8F3) 0%,
    var(--bg-2, #F3ECE0) 46%,
    var(--bg-3, #EDE3D4) 100%);
  transform: translate3d(0, calc(var(--p) * -25%), 0);
  will-change: transform;
}

/* ── אור חלון נודד ── */
@keyframes cu-bg-drift-a {
  0%   { transform: translate3d(-5%, -3%, 0) scale(1); }
  50%  { transform: translate3d(5%,  3%, 0) scale(1.09); }
  100% { transform: translate3d(-5%, -3%, 0) scale(1); }
}
@keyframes cu-bg-drift-b {
  0%   { transform: translate3d(4%,  3%, 0) scale(1.04); }
  50%  { transform: translate3d(-4%,-2%, 0) scale(1); }
  100% { transform: translate3d(4%,  3%, 0) scale(1.04); }
}

.cucina-pagebg .pagebg__light {
  inset: -22%;
  background: radial-gradient(38% 44% at 64% 20%,
    var(--light-col, #FFFFFF) 0%, transparent 72%);
  opacity: var(--light-op, .62);
  animation: cu-bg-drift-a var(--drift, 88s) ease-in-out infinite;
  will-change: transform;
}

.cucina-pagebg .pagebg__glow {
  inset: -26%;
  background: radial-gradient(34% 40% at 22% 78%,
    var(--glow-col, #C2703B) 0%, transparent 70%);
  opacity: var(--glow-op, .09);
  animation: cu-bg-drift-b calc(var(--drift, 88s) * 1.27) ease-in-out infinite;
  will-change: transform;
}

/* ── טבעות המגש ──
   שוליים של כלי הגשה גדולים שעוברים דרך העמוד. שתי מערכות מפינות
   נגדיות — ההצטלבות ביניהן היא מה שמונע מהרקע להיראות כתבנית חוזרת. */
.cucina-pagebg .pagebg__rings {
  inset: -18%;
  opacity: var(--ring-op, .1);
  /* עצירה רכה משני צידי הקו — קו חד ברוחב פיקסל אחד עושה שיניים
     ומוארה על מסכי DPR שונים */
  background: repeating-radial-gradient(circle at 88% 6%,
    transparent 0 calc(var(--ring-gap, 104px) - 2.2px),
    var(--ring-col, #7A5334) calc(var(--ring-gap, 104px) - 1.1px)
                              calc(var(--ring-gap, 104px) - 0.4px),
    transparent var(--ring-gap, 104px));
  transform: translate3d(0, var(--par), 0);
  will-change: transform;
}
.cucina-pagebg .pagebg__rings--b {
  opacity: calc(var(--ring-op, .1) * .72);
  background: repeating-radial-gradient(circle at 8% 94%,
    transparent 0 calc(var(--ring-gap, 104px) * 1.38 - 2.2px),
    var(--ring-col, #7A5334) calc(var(--ring-gap, 104px) * 1.38 - 1.1px)
                              calc(var(--ring-gap, 104px) * 1.38 - 0.4px),
    transparent calc(var(--ring-gap, 104px) * 1.38));
  transform: translate3d(0, calc(var(--par) * -0.62), 0);
}

/* ── אריג הפשתן ──
   שלושה דברים הופכים רשת לאריג, וכולם נחוצים:
   ‏(א) מרווח לא שווה בין הכיוונים — רשת סימטרית נקראת כנייר משבצות;
   ‏(ב) הטיה קלה — רשת מיושרת לפיקסלים נקראת דיגיטלית וגם עושה מוארה;
   ‏(ג) שתי וערב בעוצמות שונות — באריג אמיתי כיוון אחד כבד מהשני. */
.cucina-pagebg .pagebg__weave {
  inset: -14%;
  opacity: var(--weave-op, .05);
  mix-blend-mode: multiply;
  transform: rotate(2.4deg);
  background-image:
    repeating-linear-gradient(0deg,
      var(--weave-col, #7A5334) 0 1px, transparent 1px var(--weave-size, 7px)),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--weave-col, #7A5334) 58%, transparent) 0 1px,
      transparent 1px calc(var(--weave-size, 7px) * 1.34));
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .cucina-pagebg .pagebg__weave {
    background-image:
      repeating-linear-gradient(0deg,
        var(--weave-col, #7A5334) 0 1px, transparent 1px var(--weave-size, 7px)),
      repeating-linear-gradient(90deg,
        var(--weave-col, #7A5334) 0 1px, transparent 1px calc(var(--weave-size, 7px) * 1.34));
  }
}

.cucina-pagebg .pagebg__grain {
  opacity: var(--grain-op, .26);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.cucina-pagebg .pagebg__vignette {
  background: radial-gradient(122% 100% at 50% 44%,
    transparent 50%, rgb(90 66 44 / var(--bg-vig, .34)) 100%);
}

/* ══ השתלטות על הסקשנים ══
   כשהרקע נוכח, הסקשנים שלנו מוותרים על הרקע שלהם — כך הרקע רץ דרך
   כל העמוד בלי תפרים. שני סלקטורים: :has() עובד בלי JS, והקלאס על
   <html> הוא הגיבוי לדפדפן ישן. */
body:has(.cucina-pagebg.is-takeover) .cucina-hero:not(.cu-keep-bg),
body:has(.cucina-pagebg.is-takeover) .cucina-clients:not(.cu-keep-bg),
body:has(.cucina-pagebg.is-takeover) .cucina-about:not(.cu-keep-bg),
html.cucina-pagebg-on .cucina-hero:not(.cu-keep-bg),
html.cucina-pagebg-on .cucina-clients:not(.cu-keep-bg),
html.cucina-pagebg-on .cucina-about:not(.cu-keep-bg) {
  background: transparent;
}
/* השכבות המקומיות של הסקשנים מיותרות כשיש רקע עמוד — הן היו מכפילות
   את הגרעין ואת האור ומכהות את התוצאה */
body:has(.cucina-pagebg.is-takeover) .cucina-hero:not(.cu-keep-bg) .hero__grain,
body:has(.cucina-pagebg.is-takeover) .cucina-clients:not(.cu-keep-bg) .clients__grain,
body:has(.cucina-pagebg.is-takeover) .cucina-clients:not(.cu-keep-bg) .clients__glow,
html.cucina-pagebg-on .cucina-hero:not(.cu-keep-bg) .hero__grain,
html.cucina-pagebg-on .cucina-clients:not(.cu-keep-bg) .clients__grain,
html.cucina-pagebg-on .cucina-clients:not(.cu-keep-bg) .clients__glow { display: none; }

/* ⚠️ הכללים הגלובליים היחידים בכל התוסף, ובכוונה.
   השכבה יושבת ב-z-index שלילי, ולכן **כל** אלמנט אטום בין ה-body
   לתוכן מכסה אותה לגמרי. כמעט כל תבנית וורדפרס עוטפת את העמוד
   ב-div כזה עם רקע לבן — וזו בדיוק הסיבה שהרקע "נראה שנייה בטעינה
   ואז נעלם".
   ה-JS מנטרל את שרשרת האבות בפועל (מדויק לכל תבנית); הרשימה כאן
   היא הגנה לרגע שלפני שה-JS רץ ולעוטפים בענף DOM אחר. */
html.cucina-pagebg-on body,
html.cucina-pagebg-on #page,
html.cucina-pagebg-on .site,
html.cucina-pagebg-on #content,
html.cucina-pagebg-on #main,
html.cucina-pagebg-on #primary,
html.cucina-pagebg-on .site-content,
html.cucina-pagebg-on .site-main,
html.cucina-pagebg-on .content-area,
html.cucina-pagebg-on .page-content,
html.cucina-pagebg-on .elementor-location-main,
body:has(.cucina-pagebg) { background-color: transparent !important; }

/* רשת ביטחון: אם השכבה נכשלת מכל סיבה, הקנבס עדיין בצבע הנכון
   ולא לבן. ה-JS מדייק את הערך לצבע האמצעי שהלקוחה בחרה. */
html.cucina-pagebg-on { background-color: #F3ECE0; }

/* ── מצב סטטי: צמצום תנועה / מפסק כבוי / עורך ── */
.cucina-pagebg.cu-no-anim .pagebg__light,
.cucina-pagebg.cu-no-anim .pagebg__glow,
.cucina-editor-preview.cucina-pagebg .pagebg__light,
.cucina-editor-preview.cucina-pagebg .pagebg__glow { animation: none; }
.cucina-pagebg.cu-no-anim .pagebg__base,
.cucina-editor-preview.cucina-pagebg .pagebg__base { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cucina-pagebg .pagebg__light,
  .cucina-pagebg .pagebg__glow { animation: none; }
  .cucina-pagebg .pagebg__base,
  .cucina-pagebg .pagebg__rings { transform: none; }
}
@media (prefers-contrast: more) {
  .cucina-pagebg .pagebg__grain,
  .cucina-pagebg .pagebg__weave,
  .cucina-pagebg .pagebg__rings { display: none; }
}

/* ── שלט באדיטור ──
   בלי זה הווידג'ט בלתי נראה בעורך, ואי אפשר לבחור אותו כדי להגיע
   לקונטרולים שלו. */
.elementor-editor-active .elementor-widget-cucina-page-bg,
.elementor-editor-active .elementor-widget-cucina-page-bg > .elementor-widget-container { height: auto; }
.elementor-editor-active .elementor-widget-cucina-page-bg > .elementor-widget-container::before {
  content: "רקע לכל העמוד — פעיל. לא נראה בפריסה, וצובע את כל העמוד מאחור.";
  display: block;
  padding: .7rem 1rem;
  border: 1px dashed rgba(122, 83, 52, .45);
  border-radius: 8px;
  background: rgba(255, 255, 255, .55);
  font: 600 12px/1.5 "Assistant", system-ui, sans-serif;
  color: #7A5334;
  text-align: center;
  direction: rtl;
}

/* ==========================================================================
   ══════════════  ווידג'ט 4 — קצת עלינו  ══════════════
   --------------------------------------------------------------------------
   שתי תמונות שנחתכות זו על זו + תג ותק שמעגן את הקומפוזיציה. הטקסט זהה
   למקור; מה שהשתנה הוא היחס בין האלמנטים.
   אותם כללים: כל ערך שיש לו קונטרול נקרא כ-var(--name, fallback),
   ואף media query כאן לא כותב פרופרטי שיש לו קונטרול.
   ========================================================================== */

.elementor-widget-cucina-about,
.elementor-widget-cucina-about > .elementor-widget-container { width: 100%; }

.cucina-about {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --d-hover: 200ms;
  --ab-p: 0;              /* התקדמות הסקשן במסך, ‏-1..1 — נכתב ע"י ה-JS */
  --ab-par: 26px;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding-block: clamp(3.5rem, 9vh, 7rem);
  font-family: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
  color: #3B2D22;
  background: linear-gradient(180deg,
    var(--ab-bg-1, #F7F2E9) 0%, var(--ab-bg-2, #F3ECE0) 100%);
}

.cucina-about *, .cucina-about *::before, .cucina-about *::after { box-sizing: border-box; }

.cucina-about .about__bgextra {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; background-size: cover; background-position: center;
}

.cucina-about .about__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: var(--ab-cols, minmax(0, 1fr) minmax(0, 1.08fr));
  align-items: center;
  gap: clamp(2.25rem, 5vw, 5rem);
}

.cucina-about .about__copy  { order: var(--ab-order-copy, 1);  min-width: 0; }
.cucina-about .about__media { order: var(--ab-order-media, 2); min-width: 0; }

/* ── עמודת התמונות ──
   התמונה המשנית נדחפת לכיוון הטקסט וחותכת את הראשית. זה הגשר הוויזואלי
   בין שתי העמודות, ובלעדיו זו "תמונה ליד טקסט" ולא קומפוזיציה. */

.cucina-about .about__media {
  position: relative;
  padding-block-end: 9%;
}

.cucina-about .about__shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ab-radius, 18px);
  background: #E7DFD3;
  box-shadow:
    0 2.2rem 4.5rem -1.4rem rgba(60, 40, 25, calc(.34 * var(--ab-shadow, 1))),
    0 .5rem 1.2rem -.5rem   rgba(60, 40, 25, calc(.16 * var(--ab-shadow, 1))),
    inset 0 0 0 1px var(--ab-frame, rgba(255,255,255,.7));
}

.cucina-about .about__shot--main {
  aspect-ratio: 4 / 5;
  transform: translate3d(0, calc(var(--ab-p) * var(--ab-par)), 0);
}

.cucina-about .about__shot--sub {
  position: absolute;
  inset-inline-start: -9%;
  bottom: 0;
  width: var(--ab-sub-size, 48%);
  aspect-ratio: 1 / 1;
  z-index: 2;
  transform: translate3d(0, calc(var(--ab-p) * var(--ab-par) * -0.72), 0);
}

.cucina-about .about__img {
  display: block;
  width: 100%; height: 100%;
  max-width: none; min-width: 0;
  object-fit: cover; object-position: center;
}

/* ── תג הוותק ── */
.cucina-about .about__stat {
  position: absolute;
  inset-inline-end: -5%;
  bottom: 16%;
  z-index: 3;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .85rem 1.25rem 1rem;
  border-radius: calc(var(--ab-radius, 18px) * .8);
  background: var(--ab-stat-bg, rgba(253,250,244,.94));
  box-shadow:
    0 1.4rem 3rem -1rem rgba(60,40,25, calc(.3 * var(--ab-shadow, 1))),
    inset 0 0 0 1px var(--ab-stat-line, rgba(184,147,74,.5));
  backdrop-filter: blur(6px) saturate(140%);
  transform: translate3d(0, calc(var(--ab-p) * var(--ab-par) * 0.42), 0);
}

.cucina-about .about__figure {
  display: flex; align-items: baseline; gap: .35rem;
  font-family: "Frank Ruhl Libre", "Times New Roman", serif;
  line-height: 1;
}
.cucina-about .about__num {
  font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-terracotta, #C2703B);
  font-variant-numeric: tabular-nums;   /* המספר לא קופץ ברוחב בזמן הספירה */
  direction: ltr;
}
.cucina-about .about__unit {
  font-size: clamp(.95rem, .88rem + .3vw, 1.15rem);
  font-weight: 400;
  color: #3B2D22;
}
.cucina-about .about__cap {
  font-family: "Assistant", system-ui, sans-serif;
  font-size: max(11px, .72rem);
  letter-spacing: .05em;
  color: #6B5A4B;
  white-space: nowrap;
}

/* ── עמודת הטקסט ── */

.cucina-about .about__eyebrow {
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: .9rem;
  font-size: clamp(.72rem, .66rem + .28vw, .82rem);
  font-weight: 600; letter-spacing: .2em;
  color: var(--cu-eyebrow, #7A5334);
  overflow-wrap: anywhere;
}
.cucina-about .about__eyebrow i {
  flex: 1 1 auto; max-width: 5rem; height: 1px; background: #C8BAA3;
}

.cucina-about .about__title {
  margin: 0;
  font-family: "Frank Ruhl Libre", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3.5rem);
  line-height: 1.1; letter-spacing: -0.008em;
  color: #241B14;
  text-wrap: balance; overflow-wrap: anywhere;
}
.cucina-about .about__title em {
  font-style: normal; font-weight: 700;
  color: var(--c-terracotta, #C2703B);
}
.cucina-about .about__title .w { display: inline-block; }

.cucina-about .about__body {
  margin: clamp(1.15rem, 2.5vw, 1.75rem) 0 0;
  max-width: 46ch;
}
.cucina-about .about__body p {
  margin: 0 0 .9em;
  font-size: clamp(.96rem, .92rem + .3vw, 1.08rem);
  font-weight: 300; line-height: 1.78;
  color: #6B5A4B;
  text-wrap: pretty; overflow-wrap: anywhere;
}
.cucina-about .about__body p:last-child { margin-bottom: 0; }

/* הפסקה הראשונה נושאת את המשפט החזק ביותר — היא לא צריכה להיראות
   כמו כל השאר */
.cucina-about .about__body p.is-lead {
  font-size: clamp(1.05rem, .98rem + .45vw, 1.28rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ab-lead, #3B2D22);
  margin-bottom: 1.1em;
}

.cucina-about .about__actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ── כניסה בגלילה ── */
@keyframes ab-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ab-media-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.975); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.cucina-anim .cucina-about:not(.is-in) .about__media,
.cucina-anim .cucina-about:not(.is-in) [data-rise],
.cucina-anim .cucina-about:not(.is-in) .about__title .w { opacity: 0; }

.cucina-anim .cucina-about.is-in .about__media {
  opacity: 0;
  animation: ab-media-in 740ms var(--ease-out) forwards;
}
.cucina-anim .cucina-about.is-in .about__title .w {
  opacity: 0;
  animation: cu-rise-blur 560ms var(--ease-out) forwards;
  animation-delay: calc(90ms + var(--i, 0) * 55ms);
}
.cucina-anim .cucina-about.is-in [data-rise] {
  opacity: 0;
  animation: ab-rise 520ms var(--ease-out) forwards;
  animation-delay: calc(120ms + var(--rise, 0) * 110ms);
}

.cucina-anim-soft .cucina-about.is-in .about__media,
.cucina-anim-soft .cucina-about.is-in [data-rise],
.cucina-anim-soft .cucina-about.is-in .about__title .w {
  opacity: 0;
  animation: cu-fade 300ms ease forwards;
  animation-delay: calc(60ms + var(--i, var(--rise, 0)) * 40ms);
}

/* ── מצב סטטי ── */
.cucina-about.cu-no-anim .about__shot--main,
.cucina-about.cu-no-anim .about__shot--sub,
.cucina-about.cu-no-anim .about__stat,
.cucina-editor-preview.cucina-about .about__shot--main,
.cucina-editor-preview.cucina-about .about__shot--sub,
.cucina-editor-preview.cucina-about .about__stat { transform: none !important; }

.cucina-anim .cucina-about.cu-no-anim .about__media,
.cucina-anim .cucina-about.cu-no-anim [data-rise],
.cucina-anim .cucina-about.cu-no-anim .about__title .w,
.cucina-editor-preview.cucina-about .about__media,
.cucina-editor-preview.cucina-about [data-rise],
.cucina-editor-preview.cucina-about .about__title .w {
  opacity: 1 !important;
  animation: none !important;
}

/* ── ברייקפוינטים — רק מה שאין לו קונטרול ── */
@media (max-width: 1024px) {
  /* בלי max-width לפסקאות כאן: לקונטרול "רוחב מקסימלי לפסקאות" יש
     ערכי טאבלט ומובייל משלו בספציפיות גבוהה יותר, וכל ערך כאן היה כלל מת. */
  .cucina-about .about__inner { grid-template-columns: var(--ab-cols-m, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cucina-about { padding-block: clamp(2.75rem, 7vh, 4.5rem); }
  .cucina-about .about__media { padding-block-end: 13%; max-width: 30rem; margin-inline: auto; }
  .cucina-about .about__stat { inset-inline-end: -3%; bottom: 10%; padding: .7rem 1rem .8rem; }
  .cucina-about .about__shot--sub { inset-inline-start: -4%; }
}
@media (max-width: 360px) {
  .cucina-about .about__cap { white-space: normal; }
}

/* ── נגישות ── */
@media (prefers-reduced-motion: reduce) {
  .cucina-about .about__shot--main,
  .cucina-about .about__shot--sub,
  .cucina-about .about__stat { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .cucina-about .about__stat { backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .cucina-about .about__shot { box-shadow: inset 0 0 0 2px #241B14; }
  .cucina-about .about__stat { box-shadow: inset 0 0 0 2px #241B14; }
}

/* ── IMAGE RESET: `.elementor img { height:auto }` היה מכווץ את התמונות
   ליחס הטבעי שלהן ומשאיר פס ריק בתוך המסגרת ── */
.cucina-about .about__shot .about__img {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  border-radius: inherit;
}

/* ── STATE PINS משותפים לכל הווידג'טים ── */
.cu-root .cu-btn--primary,
.cu-root .cu-btn--primary:link,
.cu-root .cu-btn--primary:visited,
.cu-root .cu-btn--primary:active {
  color: var(--btn-fg, #FBF8F3) !important;
  background: var(--btn-bg, #241B14) !important;
  border-color: var(--btn-line, #241B14) !important;
  text-decoration: none !important;
}
.cu-root .cu-btn--primary:hover,
.cu-root .cu-btn--primary:focus,
.cu-root .cu-btn--primary:focus-visible {
  color: var(--btn-fg-h, var(--btn-fg, #FBF8F3)) !important;
  background: var(--btn-bg-h, #7A5334) !important;
  border-color: var(--btn-line-h, #7A5334) !important;
  text-decoration: none !important;
}
.cu-root .cu-btn--ghost,
.cu-root .cu-btn--ghost:link,
.cu-root .cu-btn--ghost:visited,
.cu-root .cu-btn--ghost:active {
  color: var(--gbtn-fg, #241B14) !important;
  background: var(--gbtn-bg, rgba(255,255,255,.55)) !important;
  border-color: var(--gbtn-line, #C8BAA3) !important;
  text-decoration: none !important;
}
.cu-root .cu-btn--ghost:hover,
.cu-root .cu-btn--ghost:focus,
.cu-root .cu-btn--ghost:focus-visible {
  color: var(--gbtn-fg-h, var(--gbtn-fg, #241B14)) !important;
  background: var(--gbtn-bg-h, #FFFFFF) !important;
  border-color: var(--gbtn-line-h, #7A5334) !important;
  text-decoration: none !important;
}
.cu-root .cu-btn:focus-visible {
  outline: 2px solid var(--cu-focus, #B8934A) !important;
  outline-offset: 3px !important;
}