/* עיצוב ייעודי לחנות/אזור הלקוחות - בנוסף ל-css/style.css המשותף (משתני צבע/כפתורים) */

/* ---------- כותרת דסקטופ: פס עליון (חשבון/שפה) + לוגו/חיפוש/פעולות + שורת קטגוריות - כל
   השלושה עטופים יחד ונשארים דבוקים למעלה במהלך גלילה (position: sticky על העטיפה כולה, לא
   רק על החלק התחתון) - כדי שאפשר יהיה לעבור קטגוריה, לחפש מוצר, להתחבר/לצאת לחשבון, או
   ללחוץ על הלוגו כדי לחזור לדף הראשי מכל נקודה בעמוד ---------- */
.portal-desktop-sticky-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
}
.portal-header-desktop {
  background: white;
  border-bottom: 1px solid var(--border);
}
.portal-desktop-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 24px;
  background: #f3f4f6;
  font-size: 13px;
}
.portal-desktop-topbar-start { display: flex; align-items: center; gap: 16px; }
.portal-desktop-account {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
}
.portal-desktop-welcome { font-size: 13px; font-weight: 600; color: var(--text); }
.portal-desktop-support { font-size: 13px; font-weight: 600; color: var(--text); }
.portal-desktop-support a { color: var(--primary); font-weight: 600; text-decoration: none; }
.portal-desktop-support a:hover { text-decoration: underline; }
.portal-desktop-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 11px 24px;
}
/* ממוקם מוחלט במרכז השורה (לא בזרימת ה-flex הרגילה) כדי שהלוגו יישאר תמיד באמצע הרוחב
   בדיוק, בלי קשר לרוחב תיבת החיפוש/אזור הפעולות משני צדדיו. z-index מפורש הכרחי כאן: מאז
   שנוסף position:relative גם ל-.portal-search-row (בשביל תיבת החיפוש המהיר, ר' למטה) שני
   האלמנטים "ממוקמים" וסדר הציור ביניהם נקבע לפי סדר ה-DOM - תיבת החיפוש מגיעה אחרי הלוגו
   בדוק, ובלי z-index גבוה יותר כאן היא ציירה מעליו והסתירה אותו לגמרי מאחורי הרקע שלה */
.portal-header-desktop .portal-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}
/* position: relative כאן על שתי הגרסאות (דסקטופ/מובייל) כדי ש-.portal-quick-search-dropdown
   (ר' catalog.html) יתמקם ביחס לתיבת החיפוש עצמה ולא ביחס למסך כולו */
.portal-search-row { position: relative; }
.portal-header-desktop .portal-search-row { flex: 1; margin-bottom: 0; }
.portal-header-desktop .portal-search-row input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
  background: #f9fafb;
}
/* margin-inline-start: auto דוחף את הקבוצה לקצה הרחוק תמיד (גם אם שורת החיפוש ליד הלוגו
   מוסתרת בדף הזה - ראו catalog.html - ואז אין שכן עם flex:1 שיידחוף אותה בעצמו) */
.portal-desktop-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; margin-inline-start: auto; }
.portal-desktop-action {
  position: relative;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.portal-desktop-action:hover { color: var(--primary); }
.portal-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  margin-inline-start: 4px;
  vertical-align: 2px;
}
/* שורת הקטגוריות: מתחת ללוגו/חיפוש/פעולות, בתוך אותו מכל דביק (.portal-header-desktop) כדי
   שתישאר צמודה למסך בגלילה יחד עם שורת החיפוש. מוצגת כפס טבלה עם קו מפריד בין כל קטגוריה
   לשכנתה, ממורכז אופקית בשורה (וכך גם כל שורה נוספת אם יש); ברוחב מלא זו שורה אחת, וכשהמסך
   מצטמצם (אבל עדיין ברמת דסקטופ - מעל שבירת המובייל למטה בקובץ) היא עוברת ל-flex-wrap כדי
   שהקטגוריות שלא נכנסו יירדו לשורה שנייה במקום להיחתך/לגלול לרוחב; שני ה-media queries
   שאחריה מקטינים בהדרגה את גודל הכתב/הריפוד כדי לצמצם כמה שאפשר את הצורך ביותר משתי שורות */
.portal-desktop-categories-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: 0 24px;
}
.portal-desktop-categories-bar a {
  display: inline-block;
  padding: 10px 18px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border-inline-end: 1px solid var(--border);
}
.portal-desktop-categories-bar a:last-child { border-inline-end: none; }
.portal-desktop-categories-bar a:hover, .portal-desktop-categories-bar a.active { color: var(--primary); background: #f9fafb; }
@media (max-width: 1300px) {
  .portal-desktop-categories-bar { padding: 0 16px; }
  .portal-desktop-categories-bar a { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 1050px) {
  .portal-desktop-categories-bar a { padding: 6px 9px; font-size: 12px; }
}
@media (max-width: 900px) {
  .portal-desktop-categories-bar { padding: 0 10px; }
  .portal-desktop-categories-bar a { padding: 5px 6px; font-size: 11px; }
}
/* חלופה לשורת הקטגוריות: כפתור "☰ קטגוריות" עם תפריט נפתח, מוצג במקום השורה (ר.
   updateDesktopCategoriesLayout ב-portal-api.js) כשגם שתי שורות לא מספיקות לכל הקטגוריות
   ברוחב המסך הנוכחי - position: relative כדי שהתפריט הנפתח (שממוקם מוחלט) ייפתח בדיוק
   מתחת לכפתור עצמו */
.portal-desktop-categories-toggle-row { position: relative; padding: 6px 24px 10px; }
.portal-desktop-categories-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
}
.portal-desktop-categories-toggle:hover { color: var(--primary); }

/* ---------- כותרת מובייל: לוגו + תפריט "☰ קטגוריות" נפתח באותה שורה, וחיפוש בשורה נפרדת
   מתחתיה - מוצגת רק במסך מצומצם, ונשארת דבוקה למעלה בגלילה (position: sticky) מאותה סיבה
   שהכותרת הדסקטופ נשארת דבוקה ---------- */
.portal-header-mobile {
  display: none;
  background: var(--sidebar-bg);
  color: white;
  padding: 10px 24px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.portal-mobile-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.portal-header-mobile .portal-logo { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; color: inherit; text-decoration: none; flex-shrink: 0; }
.portal-logo-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.2); flex-shrink: 0; }
.portal-header-mobile .portal-search-row { margin-bottom: 0; }
.portal-header-mobile .portal-search-row input {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
}
/* ---------- תיבת "5 התוצאות הכי רלוונטיות" מתחת לחיפוש (ר' catalog.html) - מוצג בכל
   דף בפורטל שבו תיבת החיפוש קיימת, בלי תלות בקטגוריה שנבחרה ---------- */
.portal-quick-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  z-index: 250;
  overflow: hidden;
}
.portal-quick-search-dropdown.open { display: block; }
.portal-qs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  cursor: default;
}
.portal-qs-row:last-child { border-bottom: none; }
.portal-qs-image {
  width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--surface-muted);
  font-size: 20px;
}
.portal-qs-image img { width: 100%; height: 100%; object-fit: contain; }
/* שם המוצר מקבל כמה שיותר מקום - שאר האזורים (תמונה/כמות/הוספה) כולם ברוחב קבוע ומינימלי,
   כדי שהשם עצמו יוכל להתרחב עד גלישה לשתי שורות (במקום שלוש נקודות שחותכות אותו) */
.portal-qs-info { flex: 1 1 auto; min-width: 0; }
.portal-qs-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; line-height: 1.3;
}
.portal-qs-price { font-size: 12px; color: var(--primary); font-weight: 700; margin-top: 2px; }
/* תיבת קלט פשוטה בלבד - בלי כפתורים, בלי מסגרת נוספת - בדיוק ברוחב שמספיק ל-4 ספרות ולא
   יותר, כדי להשאיר כמה שיותר מקום לשם המוצר. רקע כחלחל בכוונה - אחרת השדה נבלע ברקע הלבן
   של השורה. !important הכרחי כאן: תיבת החיפוש המהיר (.portal-quick-search-dropdown) יושבת
   בתוך .portal-search-row (כדי להצמד ויזואלית לחיפוש עצמו) - וזה בדיוק מה שגורם ל-<input>
   הזה להיתפס גם ע"י הכלל הרחב .portal-search-row input (שמיועד לתיבת החיפוש עצמה, עם
   width:100%/border-radius:999px), שספציפי יותר (2 מחלקות) ממחלקה בודדת וזוכה תמיד.
   בלי ה-!important השדה מתנפח לרוחב מלא ומכסה את שם המוצר - זו הייתה הבעיה האמיתית מההתחלה,
   לא type=number כמו שחשבתי קודם */
.portal-qs-qty-input {
  width: 34px !important; box-sizing: border-box; text-align: center; border: 1px solid #bfdbfe !important;
  background: #dbeafe !important; border-radius: 6px !important; padding: 4px 2px !important; flex-shrink: 0;
  font-size: 13px; font-family: inherit;
}
/* ± להפיכת הכמות למינוס (רק למנהל/סוכן מכירות) - אותו רעיון וצבע פעיל (אדום) כמו הכפתור
   המקביל בפופ-אפ ההוספה לסל ובעריכת ההזמנה הפנימית, לעקביות */
.portal-qs-sign-toggle {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; flex-shrink: 0;
}
.portal-qs-sign-toggle.active { background: var(--danger); color: #fff; border-color: var(--danger); }
.portal-qs-add-btn, .portal-qs-open-btn {
  flex-shrink: 0; background: var(--primary); color: #fff; border: none; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.portal-qs-add-btn:hover, .portal-qs-open-btn:hover { background: var(--primary-dark); }

/* תפריט "☰ קטגוריות" נפתח במובייל - חלק מ-.portal-mobile-top-row, לצד הלוגו (position:
   relative כדי שהתפריט הנפתח - שממוקם מוחלט - ייפתח בדיוק מתחת לכפתור עצמו) */
.portal-menu-row { position: relative; }
.portal-menu-toggle {
  background: none;
  border: none;
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.portal-menu-toggle:hover { color: white; }
.portal-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  min-width: 200px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 40;
}
.portal-menu-dropdown.open { display: block; }
.portal-menu-dropdown a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.portal-menu-dropdown a:last-child { border-bottom: none; }
.portal-menu-dropdown a:hover, .portal-menu-dropdown a.active { background: #f3f4f6; color: var(--primary); }

/* ---------- מעבר בין כותרת דסקטופ לכותרת מובייל, לפי רוחב המסך ---------- */
.portal-bottom-nav { display: none; }
@media (max-width: 860px) {
  .portal-desktop-sticky-wrap { display: none; }
  .portal-header-mobile { display: block; }
  .portal-bottom-nav { display: flex; }
  .portal-main { padding-bottom: 80px; }
}
/* ---------- סרגל ניווט תחתון קבוע (מובייל בלבד): חשבון שלי / מועדפים / סל קניות / ראשי ---------- */
.portal-bottom-nav {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background: white;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  z-index: 50;
}
.portal-bottom-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px 8px;
  background: none;
  border: none;
  color: var(--text-light);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.portal-bottom-item.active, .portal-bottom-item:hover { color: var(--primary); }
.portal-bottom-icon { position: relative; font-size: 19px; line-height: 1; }
.portal-bottom-badge {
  position: absolute;
  top: -8px;
  left: -10px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
/* בדסקטופ נפתח כלפי מטה מתחת לכפתור "חשבון שלי" שבפס העליון; במובייל (media query למטה)
   נפתח כלפי מעלה, מיד מעל סרגל הניווט התחתון הקבוע */
.portal-account-menu {
  display: none;
  position: fixed;
  top: 34px;
  right: 24px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  min-width: 200px;
  overflow: hidden;
  z-index: 51;
}
.portal-account-menu.open { display: block; }
@media (max-width: 860px) {
  .portal-account-menu { top: auto; left: auto; bottom: 60px; right: 12px; }
}
.portal-account-header { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.portal-account-name { font-weight: 700; }
.portal-account-taxid { font-size: 12px; color: var(--text-light); margin-top: 2px; }

/* ---------- פופאפ סל קניות (דסקטופ בלבד) - נפתח מ"סל קניות" בשורת הפעולות ---------- */
.portal-cart-popup {
  display: none;
  position: fixed;
  top: 92px;
  left: 24px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  width: 320px;
  max-width: 92vw;
  overflow: hidden;
  z-index: 51;
}
.portal-cart-popup.open { display: block; }
.portal-cart-popup-empty { padding: 24px 16px; text-align: center; color: var(--text-light); font-size: 14px; }
.portal-cart-popup-list { max-height: 320px; overflow-y: auto; padding: 8px; }
.portal-cart-popup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.portal-cart-popup-row:last-child { border-bottom: none; }
.portal-cart-popup-row img, .portal-cart-popup-noimg {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f4f6;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.portal-cart-popup-info { flex: 1; min-width: 0; }
.portal-cart-popup-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.portal-cart-popup-price { font-size: 13px; font-weight: 700; color: var(--primary); margin-top: 2px; }
.portal-cart-popup-qty { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.portal-cart-popup-qty button {
  width: 22px; height: 22px; border: 1px solid var(--border); background: white; border-radius: 5px;
  cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
}
.portal-cart-popup-qty span { min-width: 18px; text-align: center; font-weight: 600; font-size: 12.5px; }
.portal-cart-popup-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 15px; flex-shrink: 0; align-self: flex-start; }
.portal-cart-popup-actions {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
}
.portal-cart-popup-actions a { flex: 1; text-align: center; padding: 10px 8px; font-size: 13px; width: auto; }
.portal-account-menu a, .portal-account-menu button {
  display: block;
  width: 100%;
  text-align: right;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.portal-account-menu a:hover, .portal-account-menu button:hover { background: #f3f4f6; }

/* ---------- מועדפים (לב על כרטיס מוצר) ---------- */
.portal-card-favorite {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255,255,255,0.9);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-card-favorite.active { color: var(--danger); }

.portal-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: #eff6ff;
  color: var(--text);
  padding: 8px 24px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
/* ברוך שובך + שירות לקוחות כבר משולבים בפס העליון של כותרת הדסקטופ - מוצג בנפרד רק במובייל */
@media (min-width: 861px) {
  .portal-subbar { display: none; }
}
/* ילד ראשון בתוך .portal-header-mobile הדביקה (ר' renderPortalHeader) - כדי שהשורה תישאר
   צמודה למסך מעל הלוגו/חיפוש/קטגוריות בגלילה, במקום לגלול משם כמו שאר תוכן העמוד. המרווח
   השלילי מבטל את הריפוד של ההורה כדי שהרקע הבהיר ייגע בשוליים ממש כמו הפס העליון בדסקטופ */
.portal-header-mobile .portal-subbar { margin: -10px -24px 10px; }
.portal-welcome { font-weight: 600; }
.portal-support { color: var(--text-light); }
.portal-support a { color: var(--primary); font-weight: 600; text-decoration: none; }
.portal-support a:hover { text-decoration: underline; }

.portal-main { max-width: 1200px; margin: 0 auto; padding: 24px; padding-bottom: 80px; }

.portal-sort-row { align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--text-light); }
.portal-sort-row select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  color: var(--text);
}

/* קרוסלת פרסומות בראש עמוד הקטלוג */
.portal-carousel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 22px;
  background: #f3f4f6;
  transition: height 0.3s ease;
}
.portal-carousel-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.5s ease;
}
.portal-carousel-slide {
  flex: 0 0 100%;
  position: relative;
  cursor: pointer;
}
/* רספונסיבי: התמונה מוצגת בשלמותה (בלי חיתוך) בכל רוחב מסך, והגובה נקבע לפי היחס שלה (ר' fitCarouselHeight) */
.portal-carousel-slide img { width: 100%; height: auto; display: block; }
.portal-carousel-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  color: white;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
}
.portal-carousel-price { font-size: 16px; font-weight: 700; }
.portal-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.portal-carousel-arrow:hover { background: white; }
.portal-carousel-prev { right: 12px; }
.portal-carousel-next { left: 12px; }
.portal-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.portal-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0;
}
.portal-carousel-dot.active { background: white; }

.portal-card-highlight {
  animation: portal-card-pulse 1s ease-in-out 2;
}
@keyframes portal-card-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px var(--primary); }
}

.portal-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-bottom: 28px;
}
.portal-grid > .portal-card {
  flex: 1 1 200px;
  max-width: 220px;
}
.portal-category-heading {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  /* מרווח שתואם לגובה הכותרת הדביקה (position: sticky) - כדי שגלילה לכותרת (למשל בלחיצה
     על צ'יפ תת-קטגוריה) לא תסתיר אותה מתחת לכותרת */
  scroll-margin-top: 75px;
}
.portal-category-heading:not(:first-child) { margin-top: 8px; }
/* כותרת תת-קטגוריה (למשל "טבקים" בתוך "נרגילות") - היררכית ופחות בולטת מכותרת הקטגוריה
   עצמה, כדי שברור שזו חלוקה פנימית ולא קטגוריה נפרדת */
.portal-subcategory-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  margin: 4px 0 14px;
  scroll-margin-top: 75px;
}
@media (max-width: 860px) {
  .portal-category-heading, .portal-subcategory-heading { scroll-margin-top: 90px; }
}

/* אינדקס תתי-קטגוריות בראש עמוד קטגוריה - שורת צ'יפים לקפיצה מהירה לתת-קטגוריה, גוללת
   אופקית במקום לשבור שורה כשיש הרבה תתי-קטגוריות (בעיקר במובייל) */
.portal-subgroup-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.portal-subgroup-chip {
  flex-shrink: 0;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: white;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.portal-subgroup-chip:hover { background: #f3f4f6; border-color: var(--primary); color: var(--primary); }

/* במסך טלפון - לעולם לא פחות מ-2 מוצרים בשורה. המקום שמצטמצם הוא התמונה/כפתורים/גופן
   של הכרטיס עצמו, לא מספר העמודות - לכן קבוע לרשת (repeat(2, 1fr)) במקום auto-fill */
@media (max-width: 480px) {
  .portal-grid { gap: 10px; }
  .portal-grid > .portal-card { flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px); }
  .portal-card-image { height: 90px; }
  .portal-card-image .portal-no-image { font-size: 22px; }
  .portal-card-body { padding: 8px 9px; gap: 4px; }
  .portal-card-name { font-size: 12px; line-height: 1.25; }
  .portal-card-price { font-size: 13px; }
}

.portal-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.portal-card-image {
  position: relative;
  width: 100%;
  height: 150px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* object-fit: contain (לא cover) + ריפוד אחיד - כך שכל תמונת מוצר, בלי קשר לפרופורציות
   הקובץ המקורי שלה, נכנסת שלמה בתוך אותה מסגרת בדיוק ויוצרת שורה אחידה מבחינה חזותית,
   במקום שכל תמונה תיחתך/תוגדל אחרת ותיראה "פזורה" בגובה משתנה */
.portal-card-image img { width: 100%; height: 100%; object-fit: contain; padding: 10px; cursor: pointer; }
.portal-card-image .portal-no-image { font-size: 32px; color: #d1d5db; }
.portal-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; text-align: center; }
.portal-card-name { font-size: 14px; font-weight: 600; line-height: 1.35; flex: 1; }
.portal-card-description { font-size: 12px; color: var(--text-light); line-height: 1.3; }
.portal-card-price { font-size: 17px; font-weight: 700; color: var(--primary); }
.portal-card-unit-price { font-size: 12px; color: var(--text-light); margin-top: 2px; }
/* כפתור "להזמנה" שמוצג במקום מחיר למבקר אנונימי (לא מחובר) - ר' isAnonymousVisitor ב-catalog.html */
.portal-card-order-cta {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-size: 13px;
  font-weight: 700;
}
/* ---------- מודל הוספה לסל (תמונה/שם/מחיר/ווריאציה/כמות) ---------- */
.quick-add-box {
  position: relative;
  width: 340px;
  max-width: 90vw;
  text-align: center;
}
.quick-add-close {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #f3f4f6;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
}
.quick-add-close:hover { background: #e5e7eb; }
.quick-add-image {
  width: 100%;
  height: 160px;
  background: #f3f4f6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
}
.quick-add-image img { width: 100%; height: 100%; object-fit: contain; padding: 10px; cursor: zoom-in; touch-action: manipulation; }
.quick-add-image .portal-no-image { font-size: 40px; color: #d1d5db; }
.quick-add-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.quick-add-description { font-size: 13px; color: var(--text-light); line-height: 1.4; margin-bottom: 8px; }
.quick-add-price { font-size: 18px; font-weight: 700; color: var(--primary); }
.quick-add-price-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.quick-add-unit-price { font-size: 13px; color: var(--text-light); text-align: center; margin-top: -12px; margin-bottom: 16px; }
.quick-add-edit-price { flex-shrink: 0; }
.quick-add-edit-price.locked { cursor: not-allowed; opacity: 0.55; background: #f3f4f6; color: var(--text-light); }
.quick-add-variation-label { font-size: 13px; font-weight: 600; color: var(--text-light); margin-bottom: 8px; text-align: right; }
.quick-add-variation-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.quick-add-variation-square {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.quick-add-variation-square:hover { background: #f3f4f6; }
.quick-add-variation-square.selected { background: var(--primary); color: white; border-color: var(--primary); }
/* תפריט נפתח קומפקטי לבחירת ווריאציה כשיש הרבה חברים בקבוצה (מעל VARIATION_SCROLL_THRESHOLD) -
   במקום select ילידי שנפתח כרשימה ענקית שתופסת את כל המסך (לא ידידותי, במיוחד במובייל):
   כפתור קטן שפותח פאנל גובה קבוע עם גלילה פנימית וחיפוש */
.quick-add-variation-dropdown { position: relative; margin-bottom: 16px; text-align: right; }
.quick-add-variation-dropdown-toggle {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.quick-add-variation-dropdown-toggle::after { content: '▾'; color: var(--text-light); margin-inline-start: 8px; }
.quick-add-variation-dropdown-toggle:hover { background: #f9fafb; }
.quick-add-variation-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 20;
  padding: 8px;
}
.quick-add-variation-dropdown-panel.open { display: block; }
.quick-add-variation-dropdown-search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 6px;
}
.quick-add-variation-dropdown-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.quick-add-variation-dropdown-item {
  padding: 8px 10px;
  border: none;
  background: none;
  text-align: right;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
}
.quick-add-variation-dropdown-item:hover { background: #f3f4f6; }
.quick-add-variation-dropdown-item.selected { background: var(--primary); color: white; }
.quick-add-variation-dropdown-empty { padding: 10px; text-align: center; font-size: 13px; color: var(--text-light); }

/* ---------- מוצרים משלימים בתחתית מודל ההוספה לסל (למשל ראש תואם למכשיר) ---------- */
#quickAddRelatedSection { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); text-align: right; }
.quick-add-related-title { font-size: 13px; font-weight: 700; color: var(--text-light); margin-bottom: 10px; }
.quick-add-related-list { display: flex; flex-direction: column; gap: 10px; }
.quick-add-related-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.quick-add-related-top { display: flex; align-items: center; gap: 10px; }
.quick-add-related-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background: #f3f4f6;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.quick-add-related-info { flex: 1; min-width: 0; text-align: right; }
.quick-add-related-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-add-related-price { font-size: 12px; color: var(--primary); font-weight: 700; }
.quick-add-related-controls { display: flex; flex-direction: column; gap: 8px; }
/* כל אפשרות (למשל כל התנגדות) בשורה נפרדת משלה - לא ברשימה נפתחת - כדי שאפשר יהיה
   לראות ולבחור בלחיצה אחת בלי לפתוח כלום */
.quick-add-related-options { display: flex; flex-direction: column; gap: 4px; max-height: 130px; overflow-y: auto; }
.quick-add-related-option-row {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  background: white;
  color: var(--text);
  text-align: right;
  cursor: pointer;
}
.quick-add-related-option-row:hover { background: #f3f4f6; }
.quick-add-related-option-row.selected { background: var(--primary); color: white; border-color: var(--primary); }
.quick-add-related-bottom-row { display: flex; align-items: center; gap: 6px; }
.quick-add-related-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.quick-add-related-qty-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  background: #f3f4f6;
  color: var(--text);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.quick-add-related-qty-btn:hover { background: #e5e7eb; }
.quick-add-related-qty-value {
  width: 48px;
  text-align: center;
  padding: 4px 2px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
}
.quick-add-related-add {
  flex-shrink: 0;
  margin-inline-start: auto;
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.quick-add-related-add:hover { background: var(--primary-dark); }
.quick-add-related-add:disabled { background: #d1d5db; cursor: not-allowed; }
.quick-add-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.quick-add-qty input {
  width: 60px;
  text-align: center;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}

/* הערה חופשית ללקוח לגבי המוצר הנוסף (למשל "בלי חריף") - נשמרת על שורת הפריט בעגלה
   ומועברת אל שורת הפריט בהזמנה בפועל, כדי שהצוות יראה אותה ב"הערה" ליד אותו פריט */
.quick-add-note-field { margin-bottom: 16px; text-align: right; }
.quick-add-note-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-light); margin-bottom: 4px; }
.quick-add-note-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.portal-empty { text-align: center; padding: 60px 20px; color: var(--text-light); }

/* עגלת קניות */
.portal-cart-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.portal-cart-row img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #f3f4f6; flex-shrink: 0; }
.portal-cart-row .portal-cart-name { flex: 1; font-weight: 600; font-size: 14px; }
.portal-cart-note { font-weight: 400; font-size: 12px; color: var(--text-light); margin-top: 2px; }
.portal-cart-variation { font-size: 12px; font-weight: 500; color: var(--primary); margin-top: 2px; }
.portal-cart-qty { display: flex; align-items: center; gap: 8px; }
.portal-cart-qty button {
  width: 28px; height: 28px; border: 1px solid var(--border); background: white; border-radius: 6px;
  cursor: pointer; font-size: 16px; line-height: 1;
}
.portal-cart-qty span { min-width: 24px; text-align: center; font-weight: 600; }
.portal-cart-price-block { min-width: 90px; text-align: left; }
.portal-cart-unit-price { font-size: 11px; color: var(--text-light); margin-bottom: 2px; }
.portal-cart-line-total { font-weight: 700; }
.portal-cart-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 18px; }

/* עמוד עגלת הקניות כטבלה עם כותרות עמודה (מוצר / מחיר ליחידה / כמות / סה"כ) - שונה מ.portal-cart-row
   הישן (עדיין בשימוש בקופה/פרטי הזמנה כשורות flex, לא נוגעים בו) */
.portal-cart-table { width: 100%; border-collapse: collapse; }
.portal-cart-table thead th {
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-light);
  padding: 0 8px 10px;
  border-bottom: 2px solid var(--border);
}
.portal-cart-table thead th:not(:first-child) { text-align: center; }
.portal-cart-table td { padding: 14px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.portal-cart-table td:not(.portal-cart-product-cell) { text-align: center; }
.portal-cart-product-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: right;
}
.portal-cart-product-cell img, .portal-cart-noimg {
  width: 56px; height: 56px; border-radius: 8px; object-fit: contain; background: #f3f4f6; flex-shrink: 0;
}
.portal-cart-barcode { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.portal-cart-note-input {
  display: block;
  margin-top: 6px;
  width: 100%;
  max-width: 220px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}
.portal-cart-unit-price-cell { font-size: 13px; color: var(--text-light); }
@media (max-width: 640px) {
  .portal-cart-table thead { display: none; }
  .portal-cart-table, .portal-cart-table tbody, .portal-cart-table tr, .portal-cart-table td { display: block; width: 100%; }
  .portal-cart-table tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .portal-cart-table td { border-bottom: none; padding: 4px 0; }
  .portal-cart-table td:not(.portal-cart-product-cell) { text-align: right; }
  .portal-cart-unit-price-cell::before { content: "מחיר ליחידה: "; color: var(--text-light); }
  .portal-cart-line-total::before { content: "סה\"כ: "; color: var(--text-light); font-weight: 400; }
}

.portal-cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid var(--text);
  font-size: 18px;
  font-weight: 700;
}

/* היסטוריית הזמנות */
.portal-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.portal-order-row:hover { background: #f9fafb; }

/* ---------- לייטבוקס תמונת מוצר - לחיצה על כל תמונת מוצר פותחת תצוגה מוגדלת ---------- */
.portal-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  cursor: zoom-out;
}
.portal-lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.portal-lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  background: white;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

/* ---------- הודעת "טוסט" קצרה (למשל אישור הסרת מוצר מהעגלה) ---------- */
.portal-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--text);
  color: white;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 4000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.portal-toast.open { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 861px) {
  .portal-toast { bottom: 32px; }
}

/* ---------- כפתור וואטסאפ צף - קבוע בכל דפי הפורטל (ר' ensureWhatsAppButton) ---------- */
/* מובייל: מוצמד לסרגל הניווט התחתון (גובהו בפועל 54px) עם רווח קטן בלבד, לא מרחף גבוה מעליו.
   גם בצד שמאל צמוד כמעט לגמרי לקצה המסך (6px) - רק בדסקטופ נשאר המרווח הרחב יותר (16px) */
.portal-whatsapp-btn {
  position: fixed;
  bottom: 60px;
  left: 6px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 60;
  transition: transform .15s ease;
}
.portal-whatsapp-btn:hover { transform: scale(1.06); }
@media (min-width: 861px) {
  .portal-whatsapp-btn { bottom: 28px; left: 16px; }
}

/* מחיר עם מבצע: מחיר חדש בולט, מחיר מקורי מחוק, תגית אחוז וחיסכון */
.portal-promo-price { margin-top: 6px; text-align: center; }
.pp-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px; }
.pp-now { font-size: 22px; font-weight: 800; color: #dc2626; letter-spacing: -0.3px; }
.pp-side { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pp-badge { background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(239,68,68,.45); animation: ppPulse 1.8s ease-in-out infinite; }
.pp-was { font-size: 13px; color: #9ca3af; position: relative; }
.pp-was::after { content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: #ef4444; transform: rotate(-8deg); border-radius: 2px; }
.pp-save { margin-top: 6px; padding: 5px 8px; border-radius: 10px; font-size: 13px; font-weight: 800; color: #7c2d12; background: linear-gradient(110deg, #fef3c7 0%, #fde68a 45%, #fef3c7 100%); background-size: 200% 100%; animation: ppShine 3s linear infinite; border: 1px solid #fcd34d; }
.pp-save span { display: block; font-size: 11px; font-weight: 500; color: #92400e; }
@keyframes ppPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ppShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pp-badge, .pp-save { animation: none; } }
.portal-qs-info .pp-now { font-size: 16px; }
.portal-qs-info .pp-save { font-size: 12px; padding: 3px 6px; }

/* שורות סיכום ההזמנה (סכום לפני הנחה / הנחה / לתשלום) */
.portal-cart-summary-col { flex-direction: column; align-items: stretch; gap: 8px; }
.ps-line { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 600; }
.ps-line-discount { color: #dc2626; font-weight: 800; }
.ps-line-total { font-size: 20px; font-weight: 800; padding-top: 6px; border-top: 1px dashed #d1d5db; }
.quick-add-price .pp-now { font-size: 26px; }
.quick-add-price .pp-was { margin-inline-start: 4px; }
.quick-add-price .pp-save { max-width: 300px; margin: 8px auto 0; }
.quick-add-related-price .pp-now { font-size: 16px; }
.quick-add-related-price .pp-save { display: none; }

/* הנחה בכל שורת מוצר (עגלה, פופ-אפ עגלה, עמוד הזמנה) */
.pp-now-sm { font-size: 16px; }
.pp-cart-save { font-size: 12px; font-weight: 800; color: #047857; }
.portal-cart-popup-price .pp-badge, .portal-cart-line-total .pp-badge, .portal-cart-unit-price-cell .pp-badge { font-size: 11px; padding: 1px 6px; animation: none; }
.portal-cart-unit-price-cell .pp-was, .portal-cart-line-total .pp-was, .portal-cart-popup-price .pp-was { display: inline-block; }

/* תתי-קטגוריות מקוננות: כותרות ברמות עמוק יותר קטנות יותר ומוזחות */
h5.portal-subcategory-heading { font-size: 15px; margin: 14px 0 8px; color: var(--text-light, #6b7280); }
.portal-subcategory-depth-2 { margin-right: 14px; }
.portal-subcategory-depth-3 { margin-right: 28px; }
.portal-subcategory-depth-4 { margin-right: 42px; }

/* כפתורי קפיצה לתתי-תתי-קטגוריות: שורה מתחת לכותרת של תת-הקטגוריה שמכילה אותן */
.portal-subgroup-children-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 12px; }
.portal-subgroup-chip-sub { padding: 5px 14px; font-size: 13px; background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.portal-subgroup-chip-sub:hover { background: #e0e7ff; border-color: var(--primary); }


/* כמות הניתנת להקלדה ישירה בעגלה ובפופ-אפ העגלה (בנוסף לכפתורי + ו-−) */
.portal-cart-qty-input, .portal-cart-popup-qty-input {
  width: 56px; text-align: center; font-weight: 600; font-family: inherit;
  border: 1px solid #d1d5db; border-radius: 6px; padding: 4px 2px; background: #fff;
}
.portal-cart-popup-qty-input { width: 46px; font-size: 12.5px; padding: 2px; }
.portal-cart-qty-input:focus, .portal-cart-popup-qty-input:focus { outline: 2px solid #93c5fd; border-color: #3b82f6; }