/* ─── עמוד מוצר בודד (תיק 08, 2026-07-21) ───────────────────────────
   טל: "התמונה הראשית מכווצת, נראית כמו תמונת פספורט". שורש הבעיה:
   styles/sapir.css מגדיר .single-product div.product { grid-template-columns:
   minmax(0,380px) 1fr } בכוונה (הערה בקובץ: "תמונה מוקטנת, לא נמתחת") —
   וגם כשזה לא היה מספיק, .woocommerce-product-gallery של ווקומרס לא נמתחת
   לתא ה-grid כי אין JS של zoom/slider (add_theme_support לא הפעיל אותם) —
   בפועל נמדדה רק 182px מתוך 1144px. הפתרון: ב-woocommerce.php הוחלפה
   הגלריה בתמונה+גלריה עצמאית (ללא JS של ווקומרס), וכאן דורסים את רוחב
   הטור (קובץ זה נטען אחרי sapir.css — לא נגענו בו) כדי שהתמונה תהיה
   באמת חצי מהרוחב. אין שינוי ב-styles/sapir.css עצמו.
   טוקנים בלבד מ-sapir.css/base.css. ─── */

.single-product div.product {
  /* minmax(0, 1fr) ולא 1fr גולמי — 1fr גולמי משתמש במינימום auto (=max-content),
     כך שתוכן שלא יכול להצטמצם (לדוגמה כפתור עם white-space:nowrap) מותח את
     הטור/הגריד כולו מעבר לרוחב המסך. זה בדיוק מה שגרם לגלישה אופקית במובייל
     עם .cake-order-box (functions.php) בתוך העמודה המשותפת. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 768px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* רשת פנימית ותוכן בתוך תא ה-grid לא יגלשו גם אם יש בפנים אלמנט לא-גמיש */
.single-product div.product > .sa-product-media,
.single-product div.product > .sa-product-info {
  min-width: 0;
}
/* מיקום מפורש בתאי ה-grid (מקביל למה ש-sapir.css עושה ל-.woocommerce-product-gallery/.summary
   המקוריים — כאן זה עם שמות המחלקות שלנו, כי הגלריה נבנתה מחדש ב-woocommerce.php).
   ⚠️ במובייל יש טור אחד בלבד (grid-template-columns: minmax(0,1fr)) — חובה לאפס
   את grid-column חזרה ל-1 גם ל-.sa-product-info, אחרת grid-column:2 שנשאר דלוק
   יוצר טור implicit שני ומותח את הדף (זה בדיוק מה שקרה בבדיקה הראשונה). */
@media (min-width: 769px) {
  .single-product div.product > .sa-product-media { grid-column: 1; grid-row: 1; }
  .single-product div.product > .sa-product-info  { grid-column: 2; grid-row: 1; }
}
@media (max-width: 768px) {
  .single-product div.product > .sa-product-media { grid-column: 1; grid-row: 1; }
  .single-product div.product > .sa-product-info  { grid-column: 1; grid-row: 2; }
}
/* ⛔ תיק 05ג (29.07) — כפתורי השיתוף כבר אינם ילד ישיר של גריד המוצר:
   הם עברו לתוך .sa-product-info (ראה woocommerce.php). הכלל הישן
   ‎> .prositive-share { grid-column: 1/-1 }‎ נמחק ולא הושבת — הוא כבר לא
   מתאים לאף אלמנט, והשארתו הייתה מטעה את מי שיקרא את הקובץ.
   עכשיו: שורה קומפקטית בתחתית טור הפרטים, מתחת לשורת הקטגוריה. */
.sa-product-info .prositive-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: .9rem;
}
/* תיק 05 (2026-07-29) — בלוקים שהועברו/נוספו מתחת לשני הטורים: התיאור הארוך
   ורצועת ההמלצות. שניהם ילדים ישירים של גריד המוצר (hooks על
   woocommerce_after_single_product_summary) ולכן חייבים פס מלא במפורש. */
.single-product div.product > .sa-pd-longdesc,
.single-product div.product > .sa-tst-pd-strip { grid-column: 1 / -1; }

/* ⛔ תיק 05 (2026-07-29) — נוסה ובוטל באותו יום, אל תנסה שוב.
   כדי לאזן טור פרטים ארוך מול כריכה קצרה הוצמדה הכריכה בגלילה
   (position:sticky + align-self:start על .sa-product-media).
   ⛔ נכשל בפועל אצל טל: ‎.related.products‎ ו-‎.sa-tst-pd-strip‎ הם ילדים
   ישירים של אותו ‎div.product‎ ולכן נכנסים לשורות גריד נוספות באותו טור —
   הכריכה נשארה דבוקה והתוכן שמתחתיה נגלל *מעליה*. סטיקי בעמוד הזה מחייב
   קודם להוציא את הבלוקים שמתחת מהגריד למיכל נפרד, וזה שינוי מבני.
   האיזון הושג בדרך אחרת: העברת רצועת ההמלצות מחוץ לטור הפרטים לבדה
   הורידה את הטור מ-1410px ל-1053px (נמדד). */

/* ── מדיה: תמונה ראשית גדולה + גלריה קטנה מתחתיה ── */
.sa-product-media {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* 2026-07-26 (Wave 2 / Agent A) — טל: "התמונה חתוכה, לא רואים את הטקסט על
   הכריכה". שורש הבעיה: aspect-ratio:4/5 + object-fit:cover קבועים כאן היו
   כופים יחס-רוחב-גובה אחיד על כל התמונות, בזמן שכריכת הספר הפיזי (מוצר 19)
   היא 1671×2560 (יחס 0.65 — כריכת ספר, לא 0.8) וכריכות הספרים הדיגיטליים
   (71/72) הן ריבוע 1080×1080 (יחס 1.0). כל תמונה שלא ביחס 4:5 המדויק — נחתכה.
   זו לא הגדרת גודל/קרופ של ווקומרס (woocommerce_single_image_width וכו') —
   התמונה כאן נשלפת בגודל 'large' דרך wp_get_attachment_image, לא דרך גדלי
   התמונה הממוצעים של ווקומרס. הפתרון: בלי aspect-ratio קבוע, בלי cover —
   כמו .bk-cover ב-page-book.php (הרפרנס המאושר): width:100%; height:auto,
   היחס הטבעי של כל תמונה נשמר, אין חיתוך לעולם. מסגרת עם רקע ממורכז
   (object-fit:contain + max-height) שומרת על גובה סביר גם לכריכת ספר
   ארוכה, בלי לחתוך אף פיקסל. */
.sa-pd-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--espresso-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
/* height:auto חובה — אחרת width/height שב-HTML (מ-wp_get_attachment_image) גוברים על aspect-ratio */
.sa-pd-main-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto !important;
  max-height: 640px;
  object-fit: contain;
  margin: 0 auto;
  /* תיק 05 (2026-07-29) — טל: "תמונה מלבנית עם שפיצים בתוך כרטיס מעוגל
     לא נראה טוב". נמדד: לכרטיס .sa-pd-main רדיוס 22px ולתמונה 0px, ומכיוון
     שיש ריפוד --sp-4 בין המסגרת לתמונה, פינות התמונה החדות בולטות בתוך
     המסגרת המעוגלת. ⛔ אין כאן שום חיתוך: רדיוס בלבד, היחס הטבעי נשמר
     (width:auto / height:auto / contain — ראה ההערה למעלה). --radius,
     ולא --radius-lg, כדי שהעיגול הפנימי יהיה קטן מהחיצוני כמו שצריך. */
  border-radius: var(--radius);
}
.sa-pd-thumbs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.sa-pd-thumb {
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  cursor: pointer;
  background: none;
  transition: var(--transition);
}
.sa-pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-pd-thumb.is-active,
.sa-pd-thumb:hover { border-color: var(--gold); }

/* ── פרטי מוצר ── */
.sa-product-info .product_title {
  font-family: var(--font-heading);
  color: var(--cream);
  font-weight: 800;
}
.sa-product-info p.price,
.sa-product-info span.price {
  color: var(--gold-soft);
  font-weight: 800;
  font-size: 1.6rem;
  font-family: var(--font-heading);
}

/* 2026-07-26 (Wave 2 / Agent A) — טל: "הכפתור דחוס בתוך הטקסט". אין margin
   בין הבלוקים (h1/price/description/form/meta) שיוצאים ברצף מ-
   do_action('woocommerce_single_product_summary') — רווח אחיד בין כל
   בלוק ישיר, מהסקאלה הקיימת (--sp-* מ-assets/base.css), לא ערך מומצא.
   היררכיה: כותרת → מחיר → יתרונות/תיאור → הוסף לסל → משלוח → פרטים. */
.sa-product-info > * + * {
  margin-top: var(--sp-5);
}
.sa-product-info .woocommerce-product-details__short-description {
  color: var(--text-muted);
  line-height: 1.6;
}
/* הכפתור עצמו הוא ה-CTA המרכזי בעמוד — רווח גדול יותר מעליו (לפני) כדי
   שיתנתק ברור מהתיאור/היתרונות שמעליו, לא רק margin האחיד */
.sa-product-info form.cart {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.sa-product-info .product_meta {
  color: var(--text-muted);
  font-size: .88rem;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.sa-product-info .product_meta > span {
  display: block;
}

/* יתרונות ספר פיזי (מוצר 19 בלבד, woocommerce.php עדיפות 25) — 3 עובדות בלבד */
.sa-pd-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  /* תיק 05 (2026-07-29) — טל: "החלק של היתרונות צמוד מדי לחלק שמעליו".
     שורש הבעיה נמדד בדפדפן: המרווח בפועל היה 0px בעוד כל שאר הבלוקים
     בטור קיבלו 24px. הסיבה היא ספציפיות שווה — ‎.sa-product-info > * + *‎
     ו-‎.sa-pd-benefits‎ שתיהן (0,1,0), והשנייה מאוחרת יותר בקובץ ולכן
     ‎margin:0‎ שלה ניצח את ‎margin-top‎ האחיד. התיקון: לאפס רק את הצדדים
     שבאמת צריכים איפוס ⛔ בלי קיצור ‎margin‎ (שמאפס גם את top) ולתת
     ליתרונות מרווח עליון מפורש — הם פותחים בלוק חדש אחרי התיאור. */
  margin-block-end: 0;
  margin-inline: 0;
  margin-top: var(--sp-5);
  padding: 0;
}
.sa-pd-benefits li {
  position: relative;
  padding-inline-start: 1.2em;
  color: var(--cream);
  font-size: .95rem;
  font-weight: 600;
}
.sa-pd-benefits li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--gold);
  font-weight: 700;
}

/* משלוח (woocommerce.php עדיפות 35, מוצרים פיזיים שאינם עוגות) — עובדה נעולה */
.sa-pd-shipping {
  font-size: .92rem;
  color: var(--text-muted);
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: var(--sp-3);
}

/* ⛔ עוגות: איסוף עצמי בלבד, אין משלוחים (החלטת טל — לא ניסוח חדש) */
.sa-pd-pickup-note {
  margin-top: var(--sp-3);
  font-size: .92rem;
  color: var(--text-muted);
  border-inline-start: 3px solid var(--berry);
  padding-inline-start: var(--sp-3);
}
.sa-pd-cake-cta { display: inline-flex; margin-top: var(--sp-4); }

/* הצעת החבילה בעמודי הספרים הדיגיטליים (תיק 05ח).
   ⛔ פטל כרקע בלבד, לא כצבע טקסט — הטקסט קרם והמספר זהב (כלל 3). */
.sa-pd-bundle {
  border: 1px solid rgba(201,162,75,.45);
  border-radius: var(--radius-lg);
  background: var(--espresso-2);
  padding: var(--sp-5);
}
.sa-pd-bundle-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-heading);
  color: var(--cream);
  font-weight: 800;
  font-size: 1.1rem;
}
.sa-pd-bundle-text { margin: 0 0 var(--sp-4); color: var(--text-muted); line-height: 1.6; }
.sa-pd-bundle-text strong,
.sa-pd-bundle-text .woocommerce-Price-amount { color: var(--gold-soft); }
.sa-pd-bundle-btn { display: inline-flex; }

/* התאמה אישית (29.07) — הדגשה חיובית, לכן זהב ולא הקו האדמדם של האיסוף */
.sa-pd-custom-note {
  font-size: .95rem;
  color: var(--cream);
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: var(--sp-3);
}

/* ── מוצרים קשורים/משלימים בעמוד המוצר — אותו קו עיצובי כמו /shop/,
   בלי לגעת ב-shop.css (שם זה מוגבל ל-body.woocommerce-shop).
   תיקון אלמנטי הרפאים (shop.css) מכסה .related.products אבל לא
   .upsells.products — מוסיפים כאן כדי לא לפתוח שוב את אותו באג. ── */
.related.products ul.products::before,
.related.products ul.products::after,
.upsells.products ul.products::before,
.upsells.products ul.products::after {
  display: none !important;
  content: none !important;
}
/* 29.07.2026 — נמצא במדידה בדפדפן: shop.css משתיק את אלמנטי ה-clearfix של ווקומרס
   (‎::before/::after‎, content:" "‎ display:table) רק תחת body.woocommerce-shop.
   בעמוד מוצר בודד (‎body.single-product‎) הם עדיין קיימים, ובתוך ul עם display:grid
   הם נחשבים כפריטי גריד לכל דבר — תופסים תא אחד בפועל וגורמים בדיוק לכרטיס
   הרביעי (מתוך 4 אמיתיים) לגלוש לשורה נפרדת, גם אחרי שהעמודות תוקנו למעלה.
   הכלל הזה היה קיים כבר לגבי upsells בלבד — עכשיו גם related. */
/* 29.07.2026 — טל: "שיהיה תמיד שורה אחת שלמה או שורות שוות, אם 4 תמונות שיהיה
   4 בשורה". הבאג: עמודות קבועות (3 בדסקטופ) לא תלויות במספר הפריטים בפועל —
   ווקומרס מציג עד 4 "קשורים" כברירת מחדל (posts_per_page=4 בליבה, לא נדרס כאן),
   כך שבדיוק 4 פריטים לתוך רשת של 3 עמודות משאיר כרטיס רביעי יתום בשורה שנייה.
   התיקון: מספר העמודות נגזר ממספר ה-<li class="product"> בפועל בתוך ה-<ul>
   (‎:has()‎ — כבר בשימוש בפרויקט, ראה cart.css/cakes.css), לא קבוע מראש.
   4 היא תקרת העמודות כי זו תקרת הפריטים של ווקומרס; 5+ (upsells ידניים
   עתידיים) נופל לתצוגת 3 עמודות מאוזנת, כמו התקן הקיים ב-related.css
   ל-‎.sa-related-track--5/--6‎. */
.single-product .related.products ul.products,
.single-product .upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--sp-6) !important;
  list-style: none;
  margin: var(--sp-6) 0 0 !important;
  padding: 0 !important;
}
/* ⚠️ טווח 561px ומעלה בלבד: בלי min-width כאן, ה-‎:has()‎ (ספציפיות גבוהה
   יותר מהכלל הבסיסי של המדיה-קוורי למובייל למטה) היה מנצח גם מתחת ל-560px
   ומבטל את רשת ה-2 העמודות של המובייל — זו הייתה טעות שנתפסה במדידה בפועל
   ב-375px לפני שדווח. */
@media (min-width: 561px) {
  .single-product .related.products ul.products:has(> li.product:nth-child(3):last-child),
  .single-product .upsells.products ul.products:has(> li.product:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .single-product .related.products ul.products:has(> li.product:nth-child(2):last-child),
  .single-product .upsells.products ul.products:has(> li.product:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .single-product .related.products ul.products:has(> li.product:only-child),
  .single-product .upsells.products ul.products:has(> li.product:only-child) {
    grid-template-columns: 1fr !important;
    max-width: 50%;
    margin-inline: auto !important;
  }
}
@media (max-width: 560px) {
  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-4) !important;
  }
  .single-product .related.products ul.products:has(> li.product:only-child),
  .single-product .upsells.products ul.products:has(> li.product:only-child) {
    grid-template-columns: 1fr !important;
    max-width: 70%;
  }
  /* מספר אי-זוגי מעל 1 (למשל 3, בעמודי הספרים) — הפריט האחרון לא נשאר צמוד
     לטור אחד לבד: הוא תופס את שתי העמודות וממורכז, כדי שהשורה האחרונה תיראה
     מכוונת ולא שבורה. */
  .single-product .related.products ul.products:has(> li.product:nth-child(3):last-child) > li.product:last-child,
  .single-product .upsells.products ul.products:has(> li.product:nth-child(3):last-child) > li.product:last-child {
    grid-column: 1 / -1 !important;
    max-width: 70% !important;
    margin-inline: auto !important;
  }
}
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product {
  background: var(--espresso-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  text-align: center;
  /* 29.07.2026 — נמצא במדידה ב-768px: styles/sapir.css מגדיר גלובלית
     ‎.woocommerce ul.products li.product:last-child:nth-child(odd){grid-column:1/-1;
     max-width:340px}‎ עבור עמוד /shop/ (טבלת 2 עמודות שם, פריט אחרון אי-זוגי).
     הסלקטור לא מוגבל ל-shop, ולכן דלף גם לרשת הזו: כל מספר קשורים אי-זוגי
     (3, לדוגמה — שלושת הספרים) גרם לפריט האחרון לקפוץ לשורה נפרדת במלוא הרוחב,
     בדיוק הבאג שתוקן למעלה, רק ממקור אחר. לא נגענו ב-sapir.css (קובץ גלובלי,
     סוכנים אחרים עובדים עליו) — דורסים כאן, ספציפיות גבוהה יותר, קובץ זה נטען
     אחריו ממילא. */
  grid-column: auto !important;
  max-width: none !important;
}
.single-product .related.products ul.products li.product:hover,
.single-product .upsells.products ul.products li.product:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgba(201,162,75,.45);
  transform: translateY(-4px);
}
.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link,
.single-product .upsells.products ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
/* תיק 05 (2026-07-29) — טל: "התמונות חתוכות, רואים רק את האף של ספיר
   והכותרת חתוכה... שיהיו חדות ולא מטושטשות".
   ⛔ שני באגים נפרדים, ורק אחד מהם CSS:
   1. חיתוך — ‎aspect-ratio:4/3 + object-fit:cover‎ שהיו כאן כפו יחס אחיד
      על כל תמונה. זה בדיוק הדפוס שכבר תוקן פעם בתמונה הראשית (ראה הערת
      2026-07-26 למעלה) ונשאר כאן. הכלל בפרויקט: הכלה, לא כיסוי.
      מודדים יחס טבעי מול מוצג — עם contain הם זהים תמיד.
   2. טשטוש — לא ניתן לתיקון ב-CSS: הקובץ שנטען היה
      ‎woocommerce_thumbnail‎ 300x300 עם crop=1, שהוצג ב-358px (הגדלה 19%).
      תוקן ב-woocommerce.php דרך פילטר ‎single_product_archive_thumbnail_size‎
      → ‎medium_large‎ (768 רוחב, בלי crop). ⛔ שום תמונה לא הוגדלה ולא
      נוצרה — הגודל הזה כבר קיים בדיסק לכל התמונות (אומת ב-metadata).
   תא בגובה קבוע עם contain שומר על יישור הכרטיסים בשורה בלי לחתוך: כריכת
   ספר דיוקנית וצילום עוגה רוחבי חיים באותו תא בלי שאף אחד ייחתך. */
.single-product .related.products ul.products li.product img,
.single-product .upsells.products ul.products li.product img {
  width: 100% !important;
  height: 240px !important;
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--espresso);
  padding: var(--sp-3);
  display: block;
  margin: 0 0 var(--sp-3);
}
@media (max-width: 560px) {
  .single-product .related.products ul.products li.product img,
  .single-product .upsells.products ul.products li.product img {
    height: 170px !important;
  }
}
/* הכותרת נחתכה כי היא נצמדה לתמונה בלי מקום לשתי שורות — גובה מינימלי
   של שתי שורות מיישר גם את הכרטיסים בשורה */
.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title {
  min-height: 2.6em;
  line-height: 1.3;
}
.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title {
  color: var(--cream);
  font-size: 1.05rem;
  margin: 0 var(--sp-4) var(--sp-2);
}
.single-product .related.products ul.products li.product .price,
.single-product .upsells.products ul.products li.product .price {
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 var(--sp-4) var(--sp-4);
}
.single-product .related.products ul.products li.product .price .woocommerce-Price-amount,
.single-product .upsells.products ul.products li.product .price .woocommerce-Price-amount {
  color: var(--gold-soft);
}
.single-product .related.products ul.products li.product a.add_to_cart_button,
.single-product .related.products ul.products li.product a.button,
.single-product .upsells.products ul.products li.product a.add_to_cart_button,
.single-product .upsells.products ul.products li.product a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: auto var(--sp-4) var(--sp-5);
  padding: .75rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--espresso);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(201,162,75,.25);
  transition: background .2s ease, transform .2s ease, filter .2s ease;
}
.single-product .related.products ul.products li.product a.add_to_cart_button:hover,
.single-product .related.products ul.products li.product a.button:hover,
.single-product .upsells.products ul.products li.product a.add_to_cart_button:hover,
.single-product .upsells.products ul.products li.product a.button:hover {
  background: var(--gold-soft);
  color: var(--espresso);
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* ── רצועת "מה שכתבו לי" (Wave 3 / Agent B, 2026-07-26) ──
   woocommerce.php עדיפות 45 — 17 ההמלצות הנבחרות, קומפקטי, לא קיר תמונות.
   .sa-tst-item / .sa-tst-img / .sa-tst-lightbox-* מוגדרים גלובלית ב-
   styles/pages/testimonials.css (נטען בכל האתר בכוונה — ראו הערה שם).
   כאן רק מסגרת הרצועה עצמה, ספציפית לעמוד מוצר. */
/* ⚠️ תיק 05 (2026-07-29) — הרצועה יצאה מ-.sa-product-info והיא עכשיו ילד
   ישיר של גריד המוצר (ראה ההערה ב-woocommerce.php). טל: "לא ברור וקטן
   בשולחני... אולי כדאי בגדול ולא בצד בקטן". נמדד לפני: רוחב רצועה 552px,
   פריט 110px. אחרי: רוחב מלא של המיכל, פריט 200px בשולחני. */
.sa-tst-pd-strip {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.sa-tst-pd-label {
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 1.5rem;
  font-family: var(--font-heading);
  margin: 0 0 var(--sp-5);
}

/* ⛔ תיק 05ו (29.07) — נמחקו מכאן כל הכללים של המימוש הידני של הרצועה:
   .sa-tst-pd-track (מסלול גלילה), .sa-tst-pd-bar (קו גרירה),
   .sa-tst-pd-nav ו-.sa-tst-pd-arrow (כפתורי חץ שנבנו ידנית).
   הרצועה עברה לספריית הקרוסלות של האתר, בדיוק כמו ההמלצות בעמוד הספרים.
   ⛔ הכללים נמחקו ולא הושבתו — השארתם הייתה מתנגשת בעיצוב של הספרייה.

   ⛔ חצי הלייטבוקס: הכפייה הידנית של הסדר נמחקה גם היא. היא נועדה לתקן
   היפוך שמקורו האמיתי היה הרצועה הישנה. הלייטבוקס עצמו לא השתנה. */
.sapd-reviews { padding-bottom: var(--sp-6); }
.sapd-reviews .sapd-rev-item { width: 150px; height: auto; }
@media (min-width: 769px) { .sapd-reviews .sapd-rev-item { width: 200px; } }
.sapd-reviews .sa-tst-pd-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.sapd-reviews .swiper-button-prev,
.sapd-reviews .swiper-button-next { color: var(--gold-soft); }
.sapd-reviews .swiper-pagination-bullet { background: var(--cream-soft); opacity: .4; }
.sapd-reviews .swiper-pagination-bullet-active { background: var(--gold); opacity: 1; }

/* ── תיאור ארוך (woocommerce.php עדיפות 8) — קיים בפועל רק ב-20 העוגות ── */
.sa-pd-longdesc {
  color: var(--text-muted);
  line-height: 1.7;
}
.sa-pd-longdesc-title {
  font-family: var(--font-heading);
  color: var(--cream);
  font-size: 1.5rem;
  margin: 0 0 var(--sp-4);
}
.sa-pd-longdesc p { margin: 0 0 var(--sp-4); }
.sa-pd-longdesc p:last-child { margin-bottom: 0; }
.sa-pd-longdesc img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* ══════════════════════════════════════════════════════════════════
   בלוקי התוכן של הספר הפיזי (מוצר 19) — קידומת sa-b19
   ══════════════════════════════════════════════════════════════════
   🔴 תוקן 30.7.2026: פותח ההערה הזו ("סלאש-כוכבית") נמחק בטעות בעריכה
   קודמת מאותו יום, וכל מה שנשאר היה זנב טקסט חופשי + סוגר הערה.
   התוצאה: מפרש ה-CSS קרא את הטקסט העברי כתחילת סלקטור, המשיך לחפש
   סוגר-מסולסל, ובלע לתוך אותו "סלקטור" שגוי גם את הכלל שאחריו —
   ‎grid-column‎ של ‎.sa-b19‎. הכלל היה קיים בקובץ אך **מעולם לא נכנס
   לרשימת הכללים המפוענחת** של הדפדפן, ולכן 5 סקשני עמוד המוצר נפלו
   לשתי עמודות הגריד של תמונה+פרטי-מוצר במקום למלא רוחב מלא.
   ⛔ זו הסיבה ש-‎!important‎ שנוסף כאן זמנית לא עזר — כלל שלא נפוענח
   כלל אינו מתמודד על עדיפות. ה-‎!important‎ הוסר, הוא היה מיותר.
   ⛔ לקח: אין להריץ ‎sed‎ על קובץ עיצוב בשרת. עורכים מקומית עם הקשר.
   (ראה woocommerce.php עדיפות 6). אין דליפה לעוגות/לספרים הדיגיטליים.
   ⛔ אין שימוש חוזר ב-.bk-* — הן שייכות ל-page-book.php ול-books.css
   (כלל 9 ב-AGENT-BRIEF). קידומת sa-b19- בלעדית.
   ══════════════════════════════════════════════════════════════════ */
.single-product div.product > .sa-b19 { grid-column: 1 / -1; }

/* ⛔ תיק 05ג (29.07) — טל: "בסוף כל סקשן יש קו מפריד בריווח לא אחיד".
   זו הייתה טעות, לא כוונה: הקו הוא border-top, והמרחק *מעליו* היה
   margin-top ואילו המרחק *מתחתיו* היה padding-top — שני טוקנים שונים
   (sp-8 = 4.5rem מעל, sp-7 = 3rem מתחת), ולכן הקו נראה דבוק לסקשן הבא.
   בנוסף שלושת סוגי הבלוקים (b19 / רצועת המלצות / תיאור ארוך) השתמשו כל
   אחד בצמד אחר. ⛔ הכלל מכאן: אותו טוקן משני צדי הקו, ואותו צמד לכולם. */
.single-product div.product > .sa-b19,
.single-product div.product > .sa-tst-pd-strip,
.single-product div.product > .sa-pd-longdesc {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--border);
}
.sa-b19 {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--border);
}
/* 29.07 — טל: "התת-כותרת נצמדת ימינה במקום להיות ממורכזת".
   ⛔ text-align על ההורה לבדו לא הספיק: base.css מגדיר יישור על ‎p‎ עצמו,
   וספציפיות אלמנט מנצחת ירושה (ירושה תמיד מפסידה לכלל מפורש, בלי קשר
   לסדר בקובץ). לכן יישור מפורש לילדים, לא רק למיכל. */
.sa-b19-head { text-align: center; margin-bottom: var(--sp-6); }
.sa-b19-head h2,
.sa-b19-head p,
.sa-b19-head .sa-b19-label { text-align: center; }
/* ⛔ נמדד: ‎max-width‎ נתפס אבל ‎margin-inline:auto‎ נדרס ל-0, ולכן הפסקה
   הצרה נצמדה לקצה ההתחלתי (ימין) במקום להתמרכז — בדיוק מה שטל ראה.
   העלאת ספציפיות עם ‎.single-product‎ פותרת. ⛔ לא ‎!important‎. */
.single-product .sa-b19-head p {
  max-width: 62ch;
  margin-inline: auto;
}
.sa-b19-head h2 {
  font-family: var(--font-heading);
  color: var(--cream);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin: 0 0 var(--sp-3);
}
.sa-b19-head p { color: var(--text-muted); margin: 0; }
/* ⛔ תווית על רקע כהה = זהב. לא פטל — הפטל הוא רקע/הדגשה בלבד (כלל 3). */
.sa-b19-label {
  display: inline-block;
  color: var(--gold-soft);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  margin-bottom: var(--sp-2);
}

/* ── קרוסלת הצצה לספר ── */
.sa-b19-slider { position: relative; }
.sa-b19-track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.sa-b19-track::-webkit-scrollbar { display: none; }
.sa-b19-track.is-grabbing { cursor: grabbing; }
.sa-b19-food-item {
  flex: 0 0 auto;
  width: 210px;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--espresso-2);
}
@media (min-width: 769px) { .sa-b19-food-item { width: 280px; } }
.sa-b19-food-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  pointer-events: none; /* שהגרירה לא תיתפס כגרירת תמונה של הדפדפן */
}
.sa-b19-bar {
  position: relative;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border);
  margin-top: var(--sp-4);
  overflow: hidden;
}
.sa-b19-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 30%;
  border-radius: var(--radius-pill);
  background: var(--gold);
}

/* ── שלושת היתרונות ── */
.sa-b19-feats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 769px) { .sa-b19-feats { grid-template-columns: repeat(3, 1fr); } }
.sa-b19-feat {
  background: var(--espresso-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  text-align: center;
}
.sa-b19-feat-icon { font-size: 2rem; margin-bottom: var(--sp-3); }
.sa-b19-feat h3 {
  font-family: var(--font-heading);
  color: var(--cream);
  font-size: 1.15rem;
  margin: 0 0 var(--sp-3);
}
.sa-b19-feat p { color: var(--text-muted); margin: 0; line-height: 1.65; }

/* ── נעים להכיר ── */
.sa-b19-about { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
/* 29.07 — טל: "להקטין את התמונה היא ענקית מדי". שני שינויים יחד, כי אחד
   לבדו לא הספיק: טור התמונה צר מטור הטקסט, ובנוסף תקרה מוחלטת לתמונה
   עצמה. ⛔ בלי חיתוך ובלי מתיחה — התקרה על הרוחב, הגובה נשאר אוטומטי. */
@media (min-width: 769px) { .sa-b19-about { grid-template-columns: 1.25fr .75fr; } }
.sa-b19-about-img { display: flex; justify-content: center; }
.sa-b19-about-text p { color: var(--text-muted); line-height: 1.75; margin: 0 0 var(--sp-4); }
.sa-b19-about-text h2 {
  font-family: var(--font-heading);
  color: var(--cream);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin: 0 0 var(--sp-4);
}
.sa-b19-sig { display: block; color: var(--gold-soft); font-weight: 700; }
.sa-b19-about-img img {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
  aspect-ratio: 600 / 900;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* ── שאלות ותשובות ── */
.sa-b19-faq { max-width: 760px; margin-inline: auto; }
.sa-b19-faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--espresso-2);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.sa-b19-faq summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  color: var(--cream);
  font-weight: 700;
  list-style: none;
}
.sa-b19-faq summary::-webkit-details-marker { display: none; }
.sa-b19-faq summary::after {
  content: '+';
  float: inline-end;
  color: var(--gold);
  font-weight: 700;
}
.sa-b19-faq details[open] summary::after { content: '−'; }
.sa-b19-qa { padding: 0 var(--sp-5) var(--sp-4); }
.sa-b19-qa p { color: var(--text-muted); margin: 0; line-height: 1.7; }

/* ── רצועת ההנעה הסופית ── */
.sa-b19-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  background: var(--espresso-2);
  border: 1px solid rgba(201,162,75,.35);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.sa-b19-cta-inner h2 {
  font-family: var(--font-heading);
  color: var(--cream);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  margin: 0 0 var(--sp-2);
}
.sa-b19-cta-inner p { color: var(--text-muted); margin: 0; }