/* ==========================================================================
   Base — טוקנים, טיפוגרפיה, RTL
   --------------------------------------------------------------------------
   שפה חזותית: לבן, שחור, ירוק.
   שלושה צבעים בלבד, והירוק נדגם מקובץ הלוגו עצמו (#448e42) כדי
   שהאתר והמותג יהיו זהים ולא רק דומים.

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

   הטיפוגרפיה: Arial בלבד, בכל האתר. זה גופן מערכת — הוא כבר מותקן
   אצל הגולש, נטען מיידית, ואינו דורש בקשה חיצונית ל-Google Fonts.
   בעברית Arial היא ברירת המחדל המוכרת ביותר, והיא נקייה וקריאה
   בכל גודל.
   ========================================================================== */

:root {
  /* ---------- שחור ---------- */
  --ink:        #000000;
  --ink-2:      #4a4a4a;   /* טקסט משני */
  --ink-3:      #8c8c8c;   /* מטא-מידע */

  /* ---------- לבן ---------- */
  --bg:         #ffffff;   /* הקנבס */
  --bg-2:       #f4f4f4;   /* שדה שקוע — טפסים */
  --bg-3:       #ebebeb;   /* מצע התמונה */
  --paper:      #ffffff;

  --line:       #e0e0e0;
  --line-2:     #efefef;
  --line-ink:   #000000;   /* קו מבני */

  /* ---------- ירוק המותג ---------- */
  --accent:     #448e42;   /* נדגם מהלוגו */
  --accent-ink: #34702f;   /* ריחוף ולחיצה */
  --accent-soft:#e8f2e7;   /* רקע רך — התראות הצלחה */

  /*
   * כל האותות מצביעים על אותו ירוק.
   * בעיצוב הקודם מבצע היה אדום והתראה הייתה ענבר; בפלטה של שלושה
   * צבעים אין להם מקום. השמות נשמרו כדי לא לשבור קבצים שמשתמשים
   * בהם, והערך אחיד.
   */
  --hot:        #448e42;
  --hot-ink:    #34702f;
  --hot-soft:   #e8f2e7;

  --sale:       #448e42;
  --sale-soft:  #e8f2e7;
  --ok:         #448e42;
  --ok-soft:    #e8f2e7;

  /* אזהרה ומצב ניטרלי — אפור, לא צבע נוסף */
  --warn:       #4a4a4a;
  --warn-soft:  #f0f0f0;
  --brass:      #4a4a4a;
  --brass-ink:  #000000;
  --brass-soft: #f0f0f0;

  /* ---------- מרווחים ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 36px; --sp-7: 56px; --sp-8: 80px;
  --sp-9: 120px;

  /* אפס רדיוס — הקווים ישרים */
  --radius-sm: 0px;
  --radius:    0px;
  --radius-lg: 0px;

  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: 0 30px 70px rgba(0,0,0,.20);

  --container: 1360px;
  --header-h:  64px;

  /*
   * גופן אחד לכל האתר.
   * Arial Hebrew הוא השם של הגרסה העברית ב-macOS ו-iOS; בלעדיו
   * המערכת שם נופלת לגופן ברירת מחדל שונה לגמרי. Helvetica ו-Liberation
   * Sans הן החלופות המטריות בלינוקס ובאנדרואיד.
   */
  --font: Arial, "Arial Hebrew", "Helvetica Neue", Helvetica,
          "Liberation Sans", "Segoe UI", sans-serif;
  --font-display: var(--font);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- טיפוגרפיה ---------- */

/*
 * ל-Arial אין משקל 900, רק רגיל ומודגש. כדי שכותרת עדיין תיקרא
 * כהצהרה ולא כטקסט מודגש, הפיצוי הוא בשלושה מקומות: מרווח אותיות
 * שלילי, שורות צמודות, וגודל נדיב. זה בדיוק מה שעושים מותגים
 * שבנויים על Helvetica.
 */
h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--ink);
}

h1 { font-size: clamp(2.1rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem;  letter-spacing: -.02em; }
h4 { font-size: .95rem;  letter-spacing: -.01em; line-height: 1.4; }

p { margin: 0 0 var(--sp-3); max-width: 68ch; }

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

img { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

/*
 * תווית מיקרו — החוט המקשר של העיצוב.
 * חוזרת מעל כל מדור, מעל שם המותג בכרטיס ובפרטי הפריט, וכך העין
 * לומדת שטקסט קטן ומרווח הוא תמיד מטא-מידע ולא תוכן.
 */
.eyebrow,
.micro {
  font-family: var(--font);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.folio {
  font-family: var(--font);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 0;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink); color: #fff;
  font-weight: 700;
}
.skip-link:focus { inset-inline-start: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

@media (max-width: 760px) {
  .container { padding-inline: var(--sp-4); }
  body { line-height: 1.66; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}