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

:root {
  /* מותג */
  --navy:      #0e2a47;
  --navy-soft: #1d3f63;
  --teal:      #2fe0c7;
  --fuchsia:   #f0186b;
  --crimson:   #e11c4a;

  /* משטחים */
  --surface:   #e9eef4;   /* המשטח שעליו מונחות התמונות */
  --surface-2: #dfe7ef;
  --paper:     #fffdfa;   /* נייר הצילום */
  --line:      #d3dee8;

  /* טקסט */
  --ink:       #16232f;
  --muted:     #5f7891;
  --faint:     #93a8bd;

  /* צל — רך, כמו תמונה מונחת על שולחן */
  --lift-1: 0 1px 2px rgba(14,42,71,.06), 0 2px 8px rgba(14,42,71,.06);
  --lift-2: 0 2px 4px rgba(14,42,71,.07), 0 8px 24px rgba(14,42,71,.10);
  --lift-3: 0 4px 8px rgba(14,42,71,.08), 0 18px 44px rgba(14,42,71,.16);

  --r-sm: 6px;  --r: 12px;  --r-lg: 20px;
  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- בסיס ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Assistant', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Suez One', Georgia, serif; font-weight: 400; line-height: 1.2; margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--fuchsia); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- כותרות ומידע -------------------------------------------------------- */
.eyebrow {
  font-family: 'Heebo', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: none; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--teal); border-radius: 2px; }

.h-xl { font-size: clamp(32px, 5.5vw, 56px); letter-spacing: -.01em; }
.h-lg { font-size: clamp(26px, 3.4vw, 38px); }
.h-md { font-size: clamp(20px, 2.4vw, 26px); }
.lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 52ch; }

/* ============================================================================
 *  החתימה: כרטיס־תמונה. מסגרת נייר לבנה עבה, כמו הדפסה אמיתית.
 * ========================================================================== */
.print {
  background: var(--paper);
  padding: 12px 12px 0;
  border-radius: var(--r-sm);
  box-shadow: var(--lift-2);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
/* 🔴 **מסגרת 4:3 עם `cover` חתכה 25% מכל תמונה** (נמדד, סבב 127): תמונות
   המוצרים ריבועיות (1254×1254), והמסגרת הייתה רחבה — כך שרבע מהגובה ירד,
   בדיוק החלק שבו נגמרת המסגרת/המוצר. יוסי ראה מוצרים קטועים.
   הפתרון: **מסגרת ריבועית** (מתאימה לתמונות עצמן) + `contain` שמבטיח
   שגם תמונה ביחס אחר תוצג במלואה ולא תיחתך לעולם. */
.print > .print-img {
  aspect-ratio: 1/1; background: var(--surface-2);
  overflow: hidden; border-radius: 2px;
  display: grid; place-items: center;
}
.print > .print-img img { width: 100%; height: 100%; object-fit: contain; }
.print > .print-cap { padding: 14px 2px 16px; display: block; }

/* --- ניווט --------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(233,238,244,.86);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease, border-color .25s ease;
}

/* --- הסרגל צף מעל הרצועה ---------------------------------------------------
 * כשיש רצועה בראש הדף, הסרגל אינו יושב מעליה אלא **עליה**: הסרטון עובר
 * מתחתיו והוא חצי שקוף. כך הרצועה מתחילה בקצה העליון של המסך ממש.
 * ⚠️ ברגע שגוללים מעבר לרצועה חייבים לחזור לרקע אטום — אחרת הכיתוב
 *    בסרגל יושב על תוכן הדף ואי אפשר לקרוא אותו. הכיתוב גם מולבן
 *    ומקבל צל, כי מתחתיו וידאו שצבעיו משתנים כל הזמן.
 * ------------------------------------------------------------------------- */
body.has-banner .site-head {
  background: rgba(14, 42, 71, .30);
  backdrop-filter: saturate(1.25) blur(9px);
  border-bottom-color: rgba(255, 255, 255, .16);
}
/* ⚠️ הסרגל דביק ולכן **תופס מקום בזרימה**. במקום להוציא אותו מהזרימה
   (מה שמסבך את מיקום רצועת ההודעה שמעליו), מושכים את הרצועה כלפי מעלה
   בדיוק בגובה הסרגל — והתוצאה זהה: הסרטון עובר מתחתיו. */
body.has-banner .banner { margin-top: calc(-1 * var(--head-h, 69px)); }
body.has-banner .site-head .nav a,
body.has-banner .site-head .icon-btn { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
body.has-banner .site-head .nav a:hover { background: rgba(255,255,255,.18); }
/* ⚠️ הלוגו כהה, והסרטון שמאחוריו כהה גם הוא — הוא כמעט נעלם. עד סבב 114
   הייתה כאן **כרית לבנה**, ויוסי ביקש להסיר אותה: היא נראתה כמו ריבוע
   שהודבק על הסרטון. במקום כרית — מוצגת מעל הרצועה **הגרסה ההפוכה של
   הלוגו** (רק הנייבי לבן), בדיוק כמו בתחתית העמוד. הצבעים נשמרים, אין
   רקע, והקריאוּת נשמרת. `drop-shadow` עדין מפריד אותו מפריים בהיר. */
body.has-banner:not(.past-banner) .brand .dp-logo {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
}

/* מעבר לרצועה — חוזרים לסרגל אטום ולצבעים הרגילים */
body.has-banner.past-banner .site-head {
  background: rgba(233,238,244,.92);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--line);
}
body.has-banner.past-banner .site-head .nav a,
body.has-banner.past-banner .site-head .icon-btn { color: var(--navy); text-shadow: none; }
.head-in { display: flex; align-items: center; gap: 18px; height: 78px; }
/* --- הלוגו: וקטור, גדול, בקצה הימני, ומקושר לדף הבית -------------------- */
.brand {
  display: flex; align-items: center; text-decoration: none; margin-left: auto;
  transition: transform .18s ease, filter .18s ease;
}
/* ריחוף — הלוגו מגיב, כדי שיהיה ברור שהוא קישור לדף הבית */
.brand:hover { transform: translateY(-1px); filter: saturate(1.12) brightness(1.04); }
.brand:active { transform: translateY(0); }
.brand:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 10px; }

/* הלוגו מוטמע כ-SVG ב-DOM ולא כתמונה — ולכן אי אפשר לגרור אותו או
   "להעתיק תמונה". `pointer-events:none` מוודא שהלחיצה תמיד מגיעה לקישור
   שעוטף אותו ולא לצורה שבתוכו. */
.dp-logo {
  display: block; height: 62px; width: auto; max-width: 100%;
  pointer-events: none; user-select: none;
}
@media (max-width: 900px) { .dp-logo { height: 52px; } }

/* במסך צר שורת המחץ קטנה מכדי להיקרא — מסתירים אותה ומצמצמים את
   ה-viewBox לרוחב, כך שהלוגו נשאר מאוזן ולא נשאר חלל ריק מתחתיו. */
@media (max-width: 620px) {
  .dp-logo { height: 40px; }
  .dp-logo .lg-tag { display: none; }
  .dp-logo-full { view-box: 0 0 655 200; }
}

/* --- הלוגו בסרגל: מעט גדול יותר, ובלי רקע (סבב 114) ---------------------
   מוגדל רק בסרגל ולא בכלל `.dp-logo`, כדי שהתחתית והאולפן לא ישתנו.
   גובה הסרגל עלה יחד איתו — אחרת הלוגו נחתך. */
.brand .dp-logo { height: 72px; }
@media (max-width: 900px) { .brand .dp-logo { height: 58px; } }
@media (max-width: 620px) { .brand .dp-logo { height: 46px; } }

/* מעל הרצועה מוצגת הגרסה ההפוכה, ומתחתיה הרגילה. ההחלפה ב-CSS בלבד —
   שתי הגרסאות כבר בדף, ולכן אין הבהוב ואין קריאת רשת בגלילה. */
.brand .dp-logo-light { display: none; }
body.has-banner:not(.past-banner) .brand .dp-logo-light { display: block; }
body.has-banner:not(.past-banner) .brand .dp-logo:not(.dp-logo-light) { display: none; }

/* הלוגו המלא בתחתית — יש שם מקום, ולכן גם גדול יותר */
.foot-logo { display: inline-block; text-decoration: none; }
.foot-logo .dp-logo { height: 92px; }
@media (max-width: 620px) { .foot-logo .dp-logo { height: 68px; } }
@media (max-width: 620px) { .foot-logo .dp-logo .lg-tag { display: block; } }

/* שרידים מהכיתוב הקודם — נשמרים לתאימות אם משתמשים בהם במקום אחר */
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--navy);
  display: grid; place-items: center; color: var(--teal); font-family: 'Suez One'; font-size: 17px; }
.brand-name { font-family: 'Suez One'; font-size: 18px; color: var(--navy); line-height: 1; }
.brand-sub { font-family: 'Heebo'; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }

.nav { display: flex; gap: 4px; }
.nav a {
  padding: 8px 13px; border-radius: 999px; text-decoration: none;
  font-size: 14.5px; color: var(--muted); transition: background .2s, color .2s;
}
.nav a:hover { background: rgba(255,255,255,.7); color: var(--navy); }
.nav a[aria-current] { background: var(--navy); color: #fff; }
@media (max-width: 860px) { .nav { display: none; } }

.icon-btn {
  position: relative; width: 40px; height: 40px; border: 0; border-radius: 11px;
  background: transparent; color: var(--navy); cursor: pointer;
  display: grid; place-items: center; transition: background .2s;
}
.icon-btn:hover { background: rgba(255,255,255,.75); }
.icon-btn svg { width: 21px; height: 21px; }

/* ---- תמונת הפרופיל בכותרת ------------------------------------------------
   גדולה ומודגשת: טבעת טורקיז + טבעת לבנה מפרידה, כך שהיא בולטת גם על רקע
   בהיר וגם ליד אייקון העגלה. הכפתור עצמו מתרחב כדי להכיל אותה. */
#btnUser { width: 48px; height: 48px; border-radius: 50%; }
#btnUser:hover { background: transparent; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 2.5px var(--teal), 0 0 0 5px #fff, 0 4px 12px -3px rgba(14,42,71,.35);
  transition: box-shadow .2s, transform .2s;
}
#btnUser:hover .avatar,
#btnUser:focus-visible .avatar {
  transform: scale(1.05);
  box-shadow: 0 0 0 2.5px var(--navy), 0 0 0 5px #fff, 0 6px 16px -4px rgba(14,42,71,.45);
}
.avatar-txt {
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 700; line-height: 1;
}
.badge {
  position: absolute; top: 3px; inset-inline-start: 3px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--fuchsia); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  font-family: 'Heebo';
}

/* --- כפתורים ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border: 0; border-radius: 11px; cursor: pointer;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .22s, background .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--fuchsia); color: #fff; box-shadow: 0 4px 14px rgba(240,24,107,.28); }
.btn-primary:hover { background: #d9145d; box-shadow: 0 6px 20px rgba(240,24,107,.34); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn-sm { padding: 9px 17px; font-size: 14px; border-radius: 9px; }
.btn-danger { background: #d92b2b; color: #fff; box-shadow: 0 4px 14px rgba(217,43,43,.26); }
.btn-danger:hover { background: #bf2222; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }

/* --- אישור לפני פעולה בלתי הפיכה --- */
.dp-confirm { position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(14,42,71,.42); backdrop-filter: blur(2px); }
.dp-confirm-card { background: #fff; border-radius: 16px; padding: 22px;
  max-width: 380px; width: 100%; box-shadow: 0 18px 50px rgba(14,42,71,.24); text-align: center; }
.dp-confirm-card h4 { margin: 0 0 8px; font-family: 'Heebo'; font-size: 18px; color: var(--navy); }
.dp-confirm-card p { margin: 0 0 18px; font-size: 14px; color: var(--ink); line-height: 1.55; }
/* --- זמני שבת וחג בתחתית --------------------------------------------- */
.shabbat-note {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); border-inline-start: 3px solid var(--teal);
  font-size: 13px; line-height: 1.6;
}
.shabbat-note b { display: block; color: var(--teal); font-size: 13.5px; }
.shabbat-note span { color: #b8c9da; }
/* סגור כרגע — מודגש יותר, זו המידע שהלקוח צריך *עכשיו* */
.shabbat-note.is-closed { background: rgba(240, 24, 107, .12); border-inline-start-color: var(--fuchsia); }
.shabbat-note.is-closed b { color: #ff86b0; }

/* --- חלון קופץ ----------------------------------------------------------
   ⚠️ כפתור הסגירה **מחוץ לתמונה ובגודל אצבע** (44px). כשהוא יושב על
   התמונה הוא נבלע בה, ובנייד לא מצליחים לסגור — וחלון שאי אפשר לסגור
   הוא הדרך המהירה ביותר לאבד לקוח. */
.dp-pop {
  position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(14, 42, 71, .55); backdrop-filter: blur(3px);
  animation: popIn .22s ease;
}
@keyframes popIn { from { opacity: 0 } to { opacity: 1 } }
/* ⚠️ **רוחב מוגדר ולא רק `max-width`.** `container-type: inline-size` על
   המסגרת מבטל את תרומת התוכן לרוחב — ובכרטיס שרוחבו "לפי התוכן" התוצאה
   היא רוחב **אפס** והחלון פשוט לא נראה. נמדד ונתפס בבדיקת הדפדפן.
   `width:100%` נותן רוחב מוגדר מההורה, ו-`max-width` עדיין תוחם. */
/* ⚠️ **הכרטיס כולו מצטמצם, לא רק המסגרת** — אחרת כפתור הסגירה, שממוקם
   לפי הכרטיס, מרחף באוויר הרחק מפינת המסגרת.
   `--pop-ar` (יחס התמונה) נקבע ב-`popupFitImage`; 99 = "עדיין לא נמדד". */
.dp-pop-card {
  position: relative; width: 100%;
  max-width: min(min(560px, 92vw), calc(78vh * var(--pop-ar, 99)));
}

/* --- מסגרת · תמונה · טקסט --------------------------------------------------
 * ⚠️ **הטקסט יושב בתוך `.dp-pop-frame`** — ולכן הוא תמיד בתוך המסגרת ולא
 * מחוצה לה, מעצם המבנה. `overflow:hidden` שומר גם על הפינות המעוגלות.
 * ⚠️ `container-type` הוא מה שמאפשר למדוד את גודל הטקסט באחוזים מרוחב
 * החלון (`cqw`): כך תצוגה מקדימה ברוחב 280px נראית **בדיוק** כמו חלון
 * ברוחב 560px. בפיקסלים המסך היה משקר ליוסי בזמן הכוונון.
 * -------------------------------------------------------------------------- */
/* ⚠️ **המסגרת מצטמצמת לתמונה — לא התמונה למסגרת.** קודם הוגבל גובה
   התמונה (`max-height` + `object-fit:contain`), והתוצאה בתמונה גבוהה הייתה
   **פס לבן משני הצדדים**: הרוחב נשאר מלא והתמונה הצטמצמה בתוכו. עכשיו
   התמונה תמיד ממלאת 100% מרוחב המסגרת, והגובה נשלט על ידי הצרת המסגרת
   לפי יחס התמונה (`--pop-ar`, נקבע ב-`popupFitImage`). */
.dp-pop-frame {
  container-type: inline-size;
  border: var(--pop-bw, 0) solid var(--pop-bc, transparent);
  border-radius: var(--pop-br, 14px);
  overflow: hidden; background: #fff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .38);
}
.dp-pop-media { position: relative; display: block; line-height: 0; }
.dp-pop-img { display: block; width: 100%; height: auto; background: #fff; }
.dp-pop-noimg { aspect-ratio: 4 / 3; background: var(--surface-2); }
.dp-pop-link { display: block; text-decoration: none; }

.dp-pop-txt {
  font-size: 22px;                                  /* גיבוי לדפדפן ישן */
  font-size: calc(var(--pop-fs, 7) * 1cqw);
  line-height: 1.25; margin: 0; white-space: normal; word-break: break-word;
}
/* --- מיקום חופשי, בלי לברוח מהמסגרת ---------------------------------------
 * 🔴 שתי מלכודות שנמדדו בדפדפן, ושתיהן נראות "עובד" עד שבודקים בפינה:
 *
 * 1. **`translate(-50%,-50%)` מוציא חצי מהטקסט החוצה.** במיקום 96% החצי
 *    הימני יוצא מהמסגרת ונחתך. הפתרון: ההזזה היא באחוז **מיקומו של הטקסט
 *    עצמו** — ‎`translateX(-X%)`‎ ולא ‎-50%‎. ב-0% הטקסט צמוד לשמאל, ב-100%
 *    צמוד לימין, ובאמצע ממורכז — **ותמיד בפנים**, בלי חישוב ובלי JS.
 * 2. **רוחב "לפי התוכן" נשבר במיקום קיצוני.** לאלמנט מוחלט עם `left:96%`
 *    הרוחב הזמין הוא 4% — והטקסט נשבר לאות בשורה (נמדד: 96×2248 פיקסלים).
 *    לכן `width:max-content`, שמתעלם מהרוחב הזמין, ו-`max-width` שתוחם.
 * -------------------------------------------------------------------------- */
.dp-pop-over {
  position: absolute;
  transform: translate(calc(var(--pop-tx, 50) * -1%), calc(var(--pop-ty, 50) * -1%));
  width: max-content; max-width: calc(100% - 12px);
  padding: .35em .6em; border-radius: .4em;
}
/* רצועה מעל/מתחת לתמונה — בתוך המסגרת, על רקע הכרטיס */
.dp-pop-band { padding: .6em .7em; }
/* ⚠️ **`z-index` חובה כאן.** `container-type` על המסגרת יוצר הקשר-ערימה,
   ולכן המסגרת נצבעת מעל כפתור הסגירה שקודם לה ב-DOM — הכפתור היה קיים,
   נראה חצי, ולא היה ניתן ללחיצה כלל (Playwright דיווח שהתמונה "חוטפת" את
   הלחיצה). זה בדיוק הדפוס מסבב 95: **"לחיצה שלא עושה כלום" = אלמנט מאחורי
   משהו אחר.** */
.dp-pop-x {
  position: absolute; z-index: 2; top: -14px; inset-inline-end: -14px;
  width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: var(--navy); display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.dp-pop-x:hover { background: var(--surface-2); }
.dp-pop-x svg { width: 22px; height: 22px; }
@media (max-width: 620px) {
  .dp-pop { padding: 14px; }
  .dp-pop-x { top: -10px; inset-inline-end: -6px; }
}
@media (prefers-reduced-motion: reduce) { .dp-pop { animation: none; } }

/* --- כרטיס קטגוריה --------------------------------------------------------
 * נשען על אותו `.print.card` של המוצר — יוסי ביקש שייראה "בערך כמו תצוגה
 * חיצונית של מוצר", וזה מושג בשימוש חוזר ולא בשכפול הסגנון.
 * ⚠️ התיאור מוגבל לשתי שורות: תיאור ארוך היה מגדיל כרטיס אחד יותר
 * מהאחרים ושובר את היישור שנקבע בסבב 111.
 * -------------------------------------------------------------------------- */
.cat-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 4px;
  font-size: 13px; line-height: 1.45; color: var(--muted);
}
.cat-count { color: var(--muted); font-weight: 600; }
.cat-card .print-img { transition: transform .3s var(--ease); }
.cat-back-row { margin-bottom: 18px; }

/* --- שער השבת: הכניסה לאתר סגורה -----------------------------------------
 * מסתיר **הכול** ומשאיר את השער בלבד. הסתרה ולא מחיקה: ברגע ההבדלה הדף
 * נפתח מעצמו, וכל מה שהיה בו חייב לחזור כפי שהיה.
 * ------------------------------------------------------------------------ */
body.is-shut { overflow: hidden; background: var(--navy); }
body.is-shut > *:not(.gate) { display: none !important; }
.gate {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 24px;
  background: var(--navy); color: #fff; text-align: center;
}
.gate-card { max-width: 460px; }
.gate-logo { margin-bottom: 26px; }
.gate-logo .dp-logo { height: 92px; width: auto; max-width: 100%; }
.gate h1 {
  margin: 0 0 12px; font-family: 'Suez One', Georgia, serif;
  font-size: clamp(26px, 5vw, 38px); line-height: 1.25; font-weight: 400;
}
.gate-when {
  margin: 0 0 22px; color: var(--teal); font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 700; line-height: 1.5;
}
.gate-note { margin: 0; color: #b8c9da; font-size: 14.5px; line-height: 1.6; }

/* --- החנות סגורה לשבת/חג --------------------------------------------------
 * יושבת **מעל הסרגל**, כמו רצועת ההודעה — כדי שלא תשבור את הסרגל הצף
 * שמרחף מעל הרצועה העליונה. נייבי כהה ולא אדום: זו הודעת שעות פתיחה,
 * לא תקלה.
 * ------------------------------------------------------------------------ */
.shut { background: var(--navy); color: #fff; padding: 12px 0; }
.shut-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.shut b { font-size: 15.5px; }
.shut span { color: var(--teal); font-size: 14px; font-weight: 600; }
.shut small { flex-basis: 100%; color: #b8c9da; font-size: 12.5px; }
@media (max-width: 620px) {
  .shut { padding: 10px 0; }
  .shut b { font-size: 14.5px; }
}

/* --- כרטיס הכניסה המהירה עם גוגל -----------------------------------------
 * יושב מתחת לסרגל, לא עליו: הסרגל דביק ב-z-index 50, והכרטיס ב-90 —
 * מעליו, אך מתחת לחלונות (100) כדי שחלון פתוח תמיד יכסה אותו.
 * ⚠️ מיקום **פיזי** ולא לוגי: יוסי ביקש "בצד שמאל למעלה", והאתר כולו RTL —
 * `inset-inline-start` היה שם אותו דווקא מימין.
 * ------------------------------------------------------------------------ */
/* ה-top כאן הוא ערך פתיחה בלבד — `placeCard` מודדת את תחתית הסרגל בפועל
   וכותבת אותו. ערך קבוע כאן הניח את הכרטיס **על** הסרגל כשרצועת ההודעה
   מוצגת מעליו. */
.dp-tap {
  position: fixed; top: 118px; z-index: 90;
  width: 300px; max-width: calc(100vw - 24px); padding: 16px 18px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px -16px rgba(14, 42, 71, .42);
  animation: tapIn .26s var(--ease, ease);
}
.dp-tap-left  { left: 16px; }
.dp-tap-right { right: 16px; }
@keyframes tapIn { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
/* הכותרת מפנה מקום לכפתור הסגירה שיושב באותו גובה, בצד הפיזי שנבחר */
.dp-tap-title { margin: 0 0 4px; padding-left: 30px; font-size: 15.5px;
                font-weight: 700; color: var(--navy); }
.dp-tap-right .dp-tap-title { padding-left: 0; padding-right: 30px; }
.dp-tap-body  { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* גובה שמור לכפתור — כדי שהכרטיס לא "יקפוץ" כשכפתור גוגל מסיים להיטען */
.dp-tap-go { min-height: 44px; display: flex; justify-content: center; }
.dp-tap-go .btn { margin: 0; }
.dp-tap-wait { font-size: 14px; color: var(--muted); align-self: center; }
.dp-tap-other {
  display: block; width: 100%; margin-top: 10px; text-align: center;
  font-size: 13px; color: var(--muted);
}
/* כפתור הסגירה — 44px, המידה שאפשר לפגוע בה באצבע */
.dp-tap-x {
  position: absolute; top: 4px; left: 4px;
  width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--faint); display: grid; place-items: center;
}
.dp-tap-right .dp-tap-x { left: auto; right: 4px; }
.dp-tap-x:hover { background: var(--surface-2); color: var(--navy); }
.dp-tap-x svg { width: 17px; height: 17px; }
@media (max-width: 620px) {
  .dp-tap { left: 10px; right: 10px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .dp-tap { animation: none; } }

/* שם הפריט שהפעולה חלה עליו — בולט, כדי שלא יימחק הפריט הלא נכון */
.dp-confirm-card .dp-confirm-subj { margin: 0 0 10px; font-size: 15px; color: var(--navy); }
.dp-confirm-btns { display: flex; gap: 8px; }
.dp-confirm-btns .btn { flex: 1; }

/* שדה חובה — כוכבית אדומה, כדי שלא יישאר שדה ריק בטעות */
.req::after { content: ' *'; color: var(--fuchsia); font-weight: 700; }

/* פרטי קשר בפוטר — קישורים פעילים */
.foot-contact { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; font-size: 14px; }
.foot-contact a { display: inline-flex; align-items: center; gap: 8px; }
.foot-contact svg { flex: none; opacity: .75; }

/* תיאור ההזמנה ברשימת האזור האישי */
.ord-desc { color: var(--navy) !important; font-weight: 600; }

/* --- טאבים באזור האישי --- */
.acc-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line);
  margin: 0 0 20px; overflow-x: auto; }
.acc-tab { background: none; border: 0; padding: 11px 16px; cursor: pointer;
  font-family: 'Heebo'; font-size: 14.5px; font-weight: 600; color: var(--muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; white-space: nowrap;
  display: flex; align-items: center; gap: 6px; }
.acc-tab:hover { color: var(--navy); }
.acc-tab.on { color: var(--navy); border-bottom-color: var(--fuchsia); }
.acc-n { font-size: 11.5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: #eef1f6; color: var(--muted); display: inline-grid; place-items: center; }
.acc-tab.on .acc-n { background: var(--fuchsia); color: #fff; }

/* --- כרטיסיות תמונות באזור האישי --- */
.pkg-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: #fff; margin-bottom: 10px; }
.pkg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pkg-code { font-family: 'Heebo'; font-size: 17px; letter-spacing: 1.5px; color: var(--navy); display: block; }
.pkg-sub { font-size: 12.5px; color: var(--muted); display: block; }
.pkg-state { font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: #eefaf8; color: #0e6b5f; }
.pkg-state.used { background: #eef1f6; color: #5a6e82; }
.pkg-state.expired { background: #fdeaea; color: #a12626; }
.pkg-bar { height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; margin: 12px 0 8px; }
.pkg-bar i { display: block; height: 100%; background: var(--teal, #2fe0c7); }
.pkg-nums { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.pkg-nums b { color: var(--navy); font-family: 'Heebo'; }
.pkg-hist { margin-top: 10px; }
.pkg-hist summary { cursor: pointer; font-size: 13px; color: var(--navy); }
.pkg-hist ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pkg-hist li { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px;
  font-size: 12.5px; color: var(--muted); padding: 6px 0; border-top: 1px solid var(--line); }
.pkg-ord { font-family: 'Heebo'; color: var(--navy); }

/* --- הפרויקטים שלי באזור האישי --- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.proj-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column; }
.proj-thumb { aspect-ratio: 4/3; background: #f4f7f9; display: grid; place-items: center; overflow: hidden; }
.proj-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.proj-noimg { font-size: 12.5px; color: var(--faint); }
.proj-meta { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 2px; }
.proj-meta b { font-size: 14px; color: var(--navy); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.proj-meta span { font-size: 12.5px; color: var(--muted); }
.proj-tag { align-self: flex-start; font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: #eefaf8; color: #0e6b5f; margin-top: 4px; }
.proj-tag.warn { background: #fff6e6; color: #7a5c00; }
/* האזור האישי כשהוא מוצג בתוך האולפן (במסגרת): רק החלון נראה, בלי
   הכותרת ובלי תוכן האתר — כדי שייראה כחלון של האולפן ולא כאתר שני. */
body.embed-account { background: transparent; }
body.embed-account #head,
body.embed-account #main,
body.embed-account footer,
body.embed-account .site-foot { display: none !important; }
body.embed-account #modal { background: rgba(14,42,71,.28); }
/* קטע מהאתר בתוך האולפן (צור קשר): מסתירים את הכותרת הדביקה ואת ההירו,
   כדי שהקטע המבוקש יהיה מה שרואים ולא דף בית מוקטן. */
body.embed-site .site-head,
body.embed-site .hero { display: none !important; }
body.embed-site { background: var(--surface); }

/* תפריט תמונת הפרופיל */
.user-menu { position: fixed; z-index: 120; min-width: 180px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px -14px rgba(14,42,71,.35); display: grid; gap: 2px; }
.user-menu button { width: 100%; text-align: start; padding: 10px 12px; border: none;
  background: transparent; border-radius: 8px; font: inherit; font-size: 14.5px;
  color: var(--navy); cursor: pointer; }
.user-menu button:hover { background: #f2f6fa; }
.user-menu button.danger { color: #b4224a; }
.user-menu button.danger:hover { background: #fdecf1; }
/* העיצוב האחרון שהלקוח עבד עליו — כדי שלא יחפש אותו ברשימה */
.proj-tag.last { background: var(--teal); color: #06312b; font-weight: 700; }
.proj-card.proj-last { border-color: var(--teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 35%, transparent); }
.proj-acts { display: flex; align-items: center; gap: 6px; padding: 8px 12px 12px; margin-top: auto; }
.proj-acts .btn { flex: 1; }

/* --- העלאת קבצים בזרימת ההזמנה --- */
.up-zone { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 30px 18px; border: 2px dashed var(--line); border-radius: 14px;
  background: #fbfcfd; cursor: pointer; transition: .15s; text-align: center; }
.up-zone:hover, .up-zone.over { border-color: var(--teal, #2fe0c7); background: #f2fbfa; }
.up-zone b { font-family: 'Heebo'; font-size: 15px; color: var(--navy); }
.up-zone span { font-size: 13px; color: var(--muted); }
.up-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.up-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px; color: var(--navy); background: #fff; }
.up-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.link { background: none; border: 0; padding: 0; color: var(--fuchsia);
  cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* --- תמונת המוצר בכרטיס ההזמנה + זכוכית מגדלת ----------------------------
 * הריחוף מגדיל את האזור שמתחת לעכבר. `overflow:hidden` על המסגרת הוא מה
 * שהופך את זה ל"זכוכית מגדלת" ולא לתמונה שגולשת החוצה.
 * ------------------------------------------------------------------------- */
.pd-img {
  position: relative; padding: 0; border: 0; cursor: zoom-in; width: 100%;
  overflow: hidden; border-radius: 2px;
}
.pd-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .18s ease-out; will-change: transform;
}
/* ההגדלה עצמה. המוקד נקבע ב-JS לפי מיקום הסמן. */
.pd-img.zooming img { transform: scale(2.4); }
/* בזמן ההגדלה אין צורך ברמז — הוא רק מפריע */
.pd-img.zooming .pd-zoom { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pd-img img { transition: none; }
  .pd-img.zooming img { transform: scale(1.8); }
}
.pd-zoom {
  position: absolute; inset-block-end: 9px; inset-inline-start: 9px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(14, 42, 71, .78); color: #fff; transition: .15s;
  pointer-events: none;
}

.dp-zoom {
  position: fixed; inset: 0; z-index: 400; background: rgba(8, 20, 34, .93);
  display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 26px;
}
/* 🔴 **`max-height:100%` לא אכף כאן** (סבב 125). הבמה היא פריט ברשת עם
   `align-items:center`, ולכן גובהה אינו "מוחלט" מבחינת הדפדפן, ואחוזים
   שנשענים עליו מתפרשים כ-`none`: תמונה של 1240px נמתחה במלואה בתוך במה
   של 786px, גלשה, ונחתכה — הלקוח ראה את אמצע התמונה בלבד (נמדד).
   התיקון: `min-height:0` שמאפשר לבמה להתכווץ, **ותקרה ביחידות מסך**
   (`vh`) שאינה תלויה באף אחוז. ⚠️ הערך מנכה את הריפוד (26+26), את סרגל
   הזום (~48) ואת המרווח מעליו (16). */
/* 🔴 **מרכוז ברשת נשען על גובה השורה — והשורה נקבעה לפי הגובה הטבעי של
   התמונה** (1240px), לא לפי הבמה (786px). התוצאה: התמונה מורכזה בתוך
   שורה דמיונית ענקית, כלומר נדחפה 228px למטה ויצאה מתחתית המסך, אל מאחורי
   סרגל הזום. במסך צר זה לא קרה — שם התמונה קטנה מהבמה ממילא, ולכן נראה
   כאילו "בנייד זה תקין".
   התיקון: מרכוז ב-`position:absolute; inset:0; margin:auto` — הוא נשען על
   **תיבת הבמה עצמה**, שגובהה מוחלט, ולא על שורה שנגזרת מהתוכן. */
.dp-zoom-stage {
  position: relative;
  width: 100%; height: 100%; min-height: 0; min-width: 0;
  overflow: hidden;
}
.dp-zoom-stage img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  display: block; cursor: zoom-in;
  transition: transform .12s ease-out; touch-action: none; user-select: none;
}
.dp-zoom-x {
  position: absolute; inset-block-start: 14px; inset-inline-end: 16px;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 18px;
}
.dp-zoom-x:hover { background: rgba(255, 255, 255, .3); }
.dp-zoom-bar {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  background: rgba(255, 255, 255, .12); padding: 7px 12px; border-radius: 999px;
}
.dp-zoom-bar button {
  min-width: 34px; height: 32px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 15px; padding: 0 12px;
}
.dp-zoom-bar button:hover { background: rgba(255, 255, 255, .32); }
.dp-zoom-pct { color: #fff; font-size: 13px; min-width: 46px; text-align: center; }
/* הרמז יושב מתחת לסרגל, ואינו לוכד לחיצות — לחיצה עליו סוגרת כמו הרקע */
.dp-zoom-hint {
  color: rgba(255, 255, 255, .62); font-size: 12.5px; margin-top: 9px;
  pointer-events: none; text-align: center;
}

/* --- הרצועה העליונה: סרטון/תמונה לכל רוחב המסך ---------------------------
 * ⚠️ **היחס הוא מה שמסתיר את סימן המים.** `--banner-ratio` רחב מיחס
 * המקור (16:9), ולכן `object-fit:cover` חותך **לגובה בלבד**; יחד עם
 * `object-position` שמעוגן למעלה, החלק התחתון של הפריים — ובו הסימן —
 * לעולם אינו מוצג. אין לרדת מתחת ל-2.34 (נאכף גם ב-JS).
 * ------------------------------------------------------------------------- */
.banner {
  position: relative; width: 100%;
  aspect-ratio: var(--banner-ratio, 3);
  /* גג לגובה, כדי שבמסך רחב מאוד הרצועה לא תבלע את הדף */
  max-height: 62vh;
  overflow: hidden; background: var(--navy);
}
.banner-media {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.banner-txt {
  position: absolute; inset: auto 0 0 0; padding: 26px 22px 20px;
  background: linear-gradient(to top, rgba(14, 42, 71, .68), transparent);
  color: #fff; text-align: center; pointer-events: none;
}
.banner-txt span {
  font-family: 'Suez One'; font-size: clamp(17px, 2.6vw, 30px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
@media (max-width: 700px) { .banner { max-height: 46vh; } }

/* --- הכפתור הראשי, צף על הרצועה -----------------------------------------
 * המיקום האנכי נקבע בניהול (`top` באחוזים), וה-translate ממרכז אותו סביב
 * הנקודה שנבחרה — כך ש-0% הוא באמת הקצה העליון ו-100% הקצה התחתון.
 * הריחוף העדין נועד למשוך את העין; מי שביקש פחות תנועה לא יקבל אותו.
 * ------------------------------------------------------------------------- */
.banner-cta {
  position: absolute; inset-inline-start: 50%; z-index: 3;
  transform: translate(50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 999px; white-space: nowrap;
  background: var(--fuchsia); color: #fff; text-decoration: none;
  font-family: 'Heebo'; font-weight: 700; font-size: clamp(15px, 1.5vw, 18px);
  box-shadow: 0 10px 30px rgba(240, 24, 107, .42), 0 2px 8px rgba(0, 0, 0, .25);
  animation: dp-float 2.6s ease-in-out infinite;
  transition: box-shadow .2s ease;
}
.banner-cta:hover {
  animation-play-state: paused;
  box-shadow: 0 14px 38px rgba(240, 24, 107, .55), 0 2px 8px rgba(0, 0, 0, .3);
}
.banner-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@keyframes dp-float {
  0%, 100% { transform: translate(50%, -50%); }
  50%      { transform: translate(50%, calc(-50% - 9px)); }
}
@media (max-width: 620px) { .banner-cta { padding: 11px 22px; } }

/* מי שביקש פחות תנועה — בלי ריחוף ובלי וידאו מתנגן */
@media (prefers-reduced-motion: reduce) {
  .banner-cta { animation: none; }
  .banner-media { animation: none; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: 54px 0 64px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } }

.hero h1 { margin: 16px 0 18px; }
.hero h1 em { font-style: normal; color: var(--fuchsia); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.hero-facts { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.fact b { font-family: 'Suez One'; font-size: 21px; color: var(--navy); display: block; line-height: 1.1; }
.fact span { font-family: 'Heebo'; font-size: 12.5px; color: var(--muted); }

/* ערימת ההדפסות — התמונות מונחות על המשטח */
.stack { position: relative; height: 400px; }
.stack .print { position: absolute; width: 62%; }
.stack .print:nth-child(1) { top: 0;    inset-inline-end: 4%;  transform: rotate(-4.5deg); z-index: 3; }
.stack .print:nth-child(2) { top: 84px; inset-inline-start: 2%; transform: rotate(3.5deg);  z-index: 2; width: 56%; }
.stack .print:nth-child(3) { bottom: 6px; inset-inline-end: 16%; transform: rotate(-1.5deg); z-index: 1; width: 50%; }
.stack .print:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: var(--lift-3); z-index: 9; }
@media (max-width: 900px) { .stack { height: 320px; } }

/* --- קטלוג --------------------------------------------------------------- */
.sec { padding: 56px 0; }
.sec-head { margin-bottom: 30px; }

/* --- רקע וקטורי למקטע ----------------------------------------------------
 * הקישוט יושב בשכבה אחורית ונחתך בגבולות המקטע. הטקסט נשאר בזרימה הרגילה
 * (`position:relative` על העטיפה) — הרקע אינו מזיז שום דבר.
 * ⚠️ `overflow:hidden` חובה: הצורות גדולות מהמקטע בכוונה, כדי שייחתכו
 * בקצוות ולא ייראו כמו אלמנטים שהונחו במרכז.
 * ------------------------------------------------------------------------ */
.sec-hasvec { position: relative; overflow: hidden; isolation: isolate; }
.sec-hasvec > .wrap { position: relative; z-index: 1; }
.sec-vec {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none; user-select: none;
  /* 🔴 בלי המסכה הזו הקישוט **נגמר בקו ישר** בגבול המקטע (`overflow:hidden`
     חותך אותו), והרקע נראה כמו פס שהודבק על הדף במקום כמו רקע. הדהייה
     למעלה ולמטה היא מה שהופך את המעבר לרך. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 84%, transparent 100%);
}
/* הגלים נשענים על תחתית המקטע — דהייה בתחתית הייתה מוחקת אותם. */
.sec-vec--waves {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
}

/* --- מרחב נשימה לטקסט שמעל הקישוט ---------------------------------------
 * 🔴 טקסט אפור על גוון טורקיז יורד בניגודיות. הילה בהירה ורכה מתחת לטקסט
 * מחזירה אותו — בלי לשנות את צבעי הטיפוגרפיה של האתר.
 * `.wrap` יוצר הקשר-ערימה משלו (position+z-index), ולכן `z-index:-1` כאן
 * יושב **מעל ה-SVG ומתחת לטקסט** ולא נופל אל מאחורי המקטע.
 * ---------------------------------------------------------------------- */
.sec-hasvec > .wrap::before {
  content: ''; position: absolute; inset: -30px -40px; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,.80) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,0) 76%);
}
/* 🔴 **בלי החלשה גורפת בנייד.** ההחלשה ל-55% על גבי שקיפויות שכבר היו
   נמוכות הפכה את הרקע לבלתי-נראה בטלפון — יוסי הגדיר ולא ראה כלום.
   האיזון נעשה בשקיפויות של הצורות עצמן, במקום אחד. */
/* צורות שנועדו למסך צר בלבד (ראה ההערה ב-aboutVector) */
.vec-narrow { display: none; }
@media (max-width: 760px) { .vec-narrow { display: inline; } }
@media (prefers-reduced-motion: no-preference) {
  .sec-vec { transition: opacity .3s var(--ease); }
}
.sec-head p { margin-top: 8px; }

.cat-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.chip {
  padding: 9px 17px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper); cursor: pointer; font-size: 14.5px; color: var(--muted);
  transition: all .2s;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }

.card { cursor: pointer; border: 0; padding: 12px 12px 0; text-align: start; font: inherit; width: 100%; }
.card:hover { transform: translateY(-5px); box-shadow: var(--lift-3); }

/* ============================================================================
 *  גובה אחיד לכל כרטיסי הקטלוג.
 *  הכרטיס נמתח לגובה השורה, לשם ולדגם שמורות תמיד שתי שורות, והמחיר
 *  נצמד לתחתית. כך מוצר בעל שם ארוך ("מסגרת תמונת-מראה מלבנית") אינו
 *  מייצר כרטיס גבוה מהאחרים.
 * ========================================================================== */
.card { display: flex; flex-direction: column; }
.card > .print-cap { flex: 1; display: flex; flex-direction: column; }

.card .cap-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  /* ⚠️ `min-height` **נמדד ולא חושב.** גובה שורה של 22px מייצר קופסה של
     23px, ותוספת הדגם (גופן אחר באותה שורה) מוסיפה עוד 2px. לכן ארבעת
     הצירופים — שורה/שתיים × עם דגם/בלי — נמדדו בדפדפן, והמקסימום שבהם
     הוא הערך כאן. חישוב "שתי שורות = 2 × line-height" נותן 44 ומחטיא. */
  font-size: 16.5px; line-height: 22px; min-height: 48px;
}
.card .name { font-family: 'Suez One'; font-size: 16.5px; line-height: 22px; color: var(--navy); }
.card .model { font-family: 'Heebo'; font-size: 11.5px; line-height: 22px; color: var(--faint); }
.card .price {
  display: block; margin-top: auto; padding-top: 7px;
  font-size: 14.5px; color: var(--muted);
}
.card .price b { font-family: 'Heebo'; font-weight: 700; font-size: 17px; color: var(--fuchsia); }
.card .tag {
  position: absolute; top: 20px; inset-inline-start: 20px; z-index: 2;
  background: var(--teal); color: var(--navy); font-family: 'Heebo'; font-size: 11px;
  font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
/* `display:flex` כדי שהכרטיס יתמלא לגובה התא ברשת — בלעדיו העטיפה
   נמתחת והכרטיס הלבן שבתוכה נשאר בגובהו הטבעי. */
.card-wrap { position: relative; display: flex; }
.card.out { opacity: .62; }
.card.out .tag { background: var(--surface-2); color: var(--muted); }

/* --- מודאל --------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(11,25,44,.55); backdrop-filter: blur(3px);
  padding: 20px; overflow-y: auto;
}
.overlay.open { display: grid; place-items: start center; }
.sheet {
  background: var(--paper); border-radius: var(--r-lg); width: min(720px, 100%);
  margin: 5vh 0; box-shadow: var(--lift-3); overflow: hidden;
  animation: rise .26s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.sheet-head {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.sheet-head h3 { font-size: 19px; color: var(--navy); margin-inline-end: auto; }
.sheet-body { padding: 22px; }
.sheet-foot {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px;
  border-top: 1px solid var(--line); background: #fff;
}
.sheet-foot .total { margin-inline-end: auto; }
.sheet-foot .total b { font-family: 'Suez One'; font-size: 22px; color: var(--navy); display: block; line-height: 1.1; }
.sheet-foot .total span { font-size: 12px; color: var(--muted); }

/* --- טפסים --------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }

/* כפתור שנראה כקישור — לפעולות משניות בתוך טפסים */
.lnk { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
       color: var(--fuchsia); text-decoration: underline; text-underline-offset: 3px; }
.lnk:hover { opacity: .72; }
.lnk:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; background: #fff; transition: border-color .18s;
}
.field input:focus, .field textarea:focus { border-color: var(--navy); outline: none; }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.field .err { font-size: 12.5px; color: var(--crimson); margin-top: 5px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .row-2 { grid-template-columns: 1fr; } }

/* --- בחירת מידה ---------------------------------------------------------- */
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 11px; }
.size {
  border: 1.5px solid var(--line); background: #fff; border-radius: var(--r);
  padding: 14px 10px; cursor: pointer; text-align: center; transition: all .18s;
}
.size:hover { border-color: var(--navy); }
.size[aria-pressed="true"] { border-color: var(--fuchsia); box-shadow: 0 0 0 3px rgba(240,24,107,.12); }
.size .shape { margin: 0 auto 9px; background: var(--surface-2); border-radius: 2px; }
.size .dim { font-family: 'Heebo'; font-size: 14px; font-weight: 600; color: var(--navy); }
.size .amt { font-size: 13px; color: var(--fuchsia); font-weight: 600; }
.size .min { font-size: 11px; color: var(--faint); }
.size[disabled] { opacity: .45; cursor: not-allowed; }

/* --- מסלולים ------------------------------------------------------------- */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
@media (max-width: 700px) { .paths { grid-template-columns: 1fr; } }
.path {
  border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px;
  background: #fff; cursor: pointer; text-align: start; transition: all .2s;
}
.path:hover { border-color: var(--navy); transform: translateY(-2px); }
.path h4 { font-size: 16px; color: var(--navy); margin-bottom: 5px; }
.path p { font-size: 13.5px; color: var(--muted); margin: 0; }
.path .cost { font-family: 'Heebo'; font-size: 12.5px; font-weight: 700; color: var(--fuchsia); margin-top: 9px; display: block; }

/* סמל המדינה בשורת הכיתוב. SVG מוטמע — דגלי אמוג׳י אינם מצוירים ב-Windows.
   `vertical-align` מיישר אותו לגובה האותיות כשהוא יושב בתוך משפט. */
.flag {
  width: 24px; height: 16px; flex: none; border-radius: 2.5px;
  box-shadow: 0 0 0 1px rgba(14, 42, 71, .16);
  display: inline-block; vertical-align: -3px;
}
.flag-sm { width: 17px; height: 11.5px; vertical-align: -1px; margin-inline-start: 3px; }

/* --- עגלה ---------------------------------------------------------------- */
.line-item { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line-item .thumb { width: 60px; height: 60px; border-radius: 8px; background: var(--surface-2); flex: none; overflow: hidden; }
.line-item .info { flex: 1; min-width: 0; }
.line-item .info b { display: block; color: var(--navy); font-size: 15px; }
.line-item .info small { color: var(--muted); font-size: 12.5px; }
.line-item .amt { font-family: 'Heebo'; font-weight: 700; color: var(--navy); }

.totals { margin-top: 18px; }
.totals .r { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14.5px; color: var(--muted); }
.totals .r.sum { border-top: 2px solid var(--navy); margin-top: 8px; padding-top: 13px;
  font-family: 'Suez One'; font-size: 19px; color: var(--navy); }

/* --- מצבים --------------------------------------------------------------- */
.empty { text-align: center; padding: 52px 20px; color: var(--muted); }
.empty h3 { color: var(--navy); margin-bottom: 8px; }

.note { padding: 13px 16px; border-radius: var(--r); font-size: 13.5px; line-height: 1.6; }
.note-info { background: #eaf7ff; color: #14506e; border-inline-start: 3px solid #2b9fd6; }
.note-warn { background: #fff6e6; color: #7a5c00; border-inline-start: 3px solid #f0a500; }
.note-ok   { background: #eafaf4; color: #12634a; border-inline-start: 3px solid var(--teal); }
.note-err  { background: #fdeef1; color: #8d1030; border-inline-start: 3px solid var(--crimson); }

.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, #f2f6fa 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: var(--r-sm); }
@keyframes sk { to { background-position: -200% 0; } }

.toast {
  position: fixed; inset-block-end: 22px; inset-inline-start: 50%; transform: translateX(50%);
  background: var(--navy); color: #fff; padding: 13px 22px; border-radius: 11px;
  box-shadow: var(--lift-3); z-index: 200; font-size: 14.5px;
  animation: rise .24s var(--ease);
}

/* --- כותרת תחתונה -------------------------------------------------------- */
.site-foot { background: var(--navy); color: #b9cbdd; margin-top: 60px; padding: 46px 0 26px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 26px; } }
.site-foot h4 { color: #fff; font-size: 15px; margin-bottom: 13px; }
.site-foot a { color: #b9cbdd; text-decoration: none; }
.site-foot a:hover { color: var(--teal); }
.hours { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12); }
.foot-base { border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 18px;
  font-size: 12.5px; color: #7d95ac; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* --- מסכים צרים ---------------------------------------------------------- */
@media (max-width: 480px) {
  .hero { padding: 34px 0 44px; }
  .hero-facts { gap: 18px; }
  .sheet { margin: 0; border-radius: var(--r) var(--r) 0 0; min-height: 92vh; }
  .sheet-foot { flex-wrap: wrap; }
  .sheet-foot .btn { flex: 1; }
  .grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  /* גם כאן הגובה נמדד: הצירוף הגבוה ביותר במסך צר יצא 43px */
  .card .cap-title { font-size: 14.5px; line-height: 20px; min-height: 44px; }
  .card .name { font-size: 14.5px; line-height: 20px; }
  .card .model { line-height: 20px; }
  .size-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* --- הודעת הרצה ---------------------------------------------------------- */
.ribbon {
  background: var(--navy); color: var(--teal); text-align: center;
  padding: 8px 16px; font-size: 13.5px; font-family: 'Heebo';
}