/* styles/pages/sticky-buy.css — בר רכישה דביק בעמוד מוצר, 2.8.2026.
   נטען אוטומטית ע"י ה-glob של styles/pages/*.css. המבנה והלוגיקה ב-woocommerce.php.

   ⛔ מפת האלמנטים הקבועים באתר — נמדדה בפועל 2.8.2026, לא לנחש אותה מחדש:
     header .site-header      z-index 900   למעלה
     .sa-a11y                 z-index 998   שמאל, 84 פיקסל מלמטה
     #saToTop                 z-index 998   ימין, 24 פיקסל מלמטה
     .whatsapp-float          z-index 999   שמאל, 24 פיקסל מלמטה
     #cookie-bar              z-index 9999  רוחב מלא, צמוד לתחתית
   הבר הזה מקבל 995: מעל התוכן, מתחת לכל הכפתורים הצפים ומתחת לשורת הקוקיז.

   ⛔ שלושת הכללים שטל ביקש — "שלא יסתיר דברים אחרים":
   1. שורת הקוקיז: שני ברים צמודים לתחתית הם בלגן. כל עוד שורת הקוקיז גלויה,
      בר הרכישה לא מוצג בכלל. היא נסגרת פעם אחת ונשמרת, אז זו לא בעיה מתמשכת.
   2. הכפתורים הצפים: כשהבר גלוי, שלושתם עולים בגובה הבר. הערך מגיע ממשתנה
      אחד (--sa-buy-h) כדי שלא ייווצר פער בין המידות בשתי נקודות שבירה.
   3. הפוטר: הבר נעלם ברגע שהפוטר נכנס למסך. אין מצב שהוא מכסה פרטי קשר. */

:root { --sa-buy-h: 72px; }

/* ⚠️ ‎display:flex‎ למטה גובר על ‎display:none‎ של דפדפן עבור התכונה hidden.
   בלי הכלל הזה הבר היה מוצג גם כשה-PHP סימן אותו כמוסתר. */
.sa-buybar[hidden] { display: none; }

.sa-buybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 995;
  /* הרצועה עצמה ברוחב מלא — התוכן שלה מתרכז. בלי זה השם נדבק לקצה אחד
     והכפתור לקצה השני, ובמסך רחב נוצר בין שניהם חלל ריק ענק (טל, 2.8.2026). */
  display: flex;
  justify-content: center;
  min-height: var(--sa-buy-h);
  padding: var(--sp-3, .75rem) var(--sp-5, 1.5rem);
  background: var(--espresso-2, #33201a);
  border-top: 1px solid rgba(201, 162, 75, .35);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .3);
  color: var(--cream, #f6ede1);

  /* מוסתר כברירת מחדל. transform ולא display כדי שהמעבר יהיה על שכבת הקומפוזיטור
     ולא יגרור חישוב פריסה מחדש. visibility מונע מיקוד מקלדת על בר מוסתר. */
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .25s ease-out, visibility 0s linear .25s;
}

.sa-buybar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .25s ease-out, visibility 0s;
}

/* מי שביקש פחות תנועה מקבל הופעה מיידית, בלי החלקה */
@media (prefers-reduced-motion: reduce) {
  .sa-buybar { transition: none; }
}

/* עמודת התוכן. 900 פיקסל ולא רוחב מלא: מעבר לזה המרחק בין שם המוצר לכפתור
   הופך למסע עיניים ארוך, והבר מפסיק להיקרא כיחידה אחת. הרוחב תואם את עמודת
   הטקסט של שאר האתר. */
.sa-buybar-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 1rem);
  width: 100%;
  max-width: 900px;
}

.sa-buybar-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 75, .35);
}

.sa-buybar-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sa-buybar-title {
  font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cream, #f6ede1);
  /* שם ארוך נחתך לשורה אחת — הכותרת המלאה נמצאת ממילא מעל בעמוד */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-buybar-price {
  font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-soft, #e2c98a);
  font-variant-numeric: tabular-nums;
}

/* המחיר מגיע מווקומרס כתגיות del/ins במוצר במבצע — משטחים אותן לשורה אחת */
.sa-buybar-price del { opacity: .55; font-weight: 500; margin-inline-end: .4em; }
.sa-buybar-price ins { text-decoration: none; }

.sa-buybar-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 132px;
  padding: 0 var(--sp-5, 1.5rem);
  border: 0;
  border-radius: 999px;
  background: var(--berry, #b03a52);
  color: #fff;
  font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}

.sa-buybar-btn:hover,
.sa-buybar-btn:focus-visible {
  background: var(--berry-hover, #8e2b40);
}

.sa-buybar-btn:focus-visible {
  outline: 3px solid var(--gold-soft, #e2c98a);
  outline-offset: 2px;
}

/* ─── הכפתורים הצפים עולים כשהבר גלוי ─── */
/* המחלקה נדבקת ל-html ולא ל-body: ווקומרס וליטספיד משכתבים מחלקות על body
   בעדכוני עגלה ב-ajax, ומחלקה שנוספה ב-JS עלולה להימחק שם. */
html.sa-buybar-on .whatsapp-float,
html.sa-buybar-on #saToTop {
  bottom: calc(24px + var(--sa-buy-h));
  transition: bottom .25s ease-out;
}

html.sa-buybar-on .sa-a11y {
  bottom: calc(84px + var(--sa-buy-h));
  transition: bottom .25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html.sa-buybar-on .whatsapp-float,
  html.sa-buybar-on #saToTop,
  html.sa-buybar-on .sa-a11y { transition: none; }
}

/* ─── מובייל ─── */
@media (max-width: 600px) {
  :root { --sa-buy-h: 66px; }

  .sa-buybar-inner { gap: var(--sp-3, .75rem); max-width: none; }

  .sa-buybar {
    padding: var(--sp-2, .5rem) var(--sp-4, 1rem);
    /* מרווח לפס המחוות בתחתית מסכי מובייל מודרניים */
    padding-bottom: max(var(--sp-2, .5rem), env(safe-area-inset-bottom));
  }

  /* התמונה יורדת במובייל: הרוחב שווה יותר לשם, למחיר ולכפתור */
  .sa-buybar-thumb { display: none; }

  .sa-buybar-title { font-size: .88rem; }
  .sa-buybar-price { font-size: 1rem; }

  .sa-buybar-btn {
    min-width: 112px;
    padding: 0 var(--sp-4, 1rem);
    font-size: .95rem;
  }
}

/* מסכים צרים במיוחד — שם המוצר יורד, נשארים מחיר וכפתור */
@media (max-width: 360px) {
  .sa-buybar-title { display: none; }
}