/* ═══════════════════════════════════════════════════════════
   עמוד המלצות — Wave 3 / Agent B (2026-07-26), שוכתב 29.07.2026
   סקשן "המלצות ממתכונים" הוחלף לסליידר אחיד 29.07.2026 (tik: סליידר המלצות)
   קידומת בלעדית: .sa-tst-  (לא .bk-micro, לא .reviews-swiper, לא sbk-rev-*,
   לא sapd-reviews — כל אלה בלעדיים לעמודים/רצועות אחרים, ראו AGENT-BRIEF)
   ⚠️ קובץ זה לא רשום ב-$scope ב-functions.php ⇐ נטען גלובלית בכל האתר
   בכוונה: מחלקות הלייטבוקס המשותפות (.sa-tst-lightbox / .sa-tst-item)
   משרתות גם את רצועת ההמלצות בעמוד מוצר (woocommerce.php + product.css).
   כל כלל כאן ממוסגר תחת מחלקת sa-tst- ייעודית — אין סלקטור גלובלי גולמי.
   ═══════════════════════════════════════════════════════════ */

/* ── כותרת עמוד ── */
.sa-tst-hero { text-align: center; }

/* ── סקשן "המלצות ממתכונים" — רקע קרם בהיר → טקסט כהה בלבד (חוק ברזל האתר) ── */
.sa-tst-section--recipes {
  background: var(--cream, #f6ede1);
  --sa-tst-heading: #2a1c16;
  --sa-tst-body: #5d4a3e;
}
.sa-tst-section--recipes .section-header h2,
.sa-tst-section--recipes .section-header .label {
  color: var(--sa-tst-heading);
}
.sa-tst-section--recipes .section-header .label { opacity: .75; }

/* ── סקשן "המלצות מהזמנות" — רקע כהה, טקסט קרם/זהב (הפטל אף פעם לא טקסט) ── */
.sa-tst-section--orders {
  background: var(--espresso, #241511);
}
.sa-tst-section--orders .section-header h2 { color: var(--cream, #f6ede1); }
.sa-tst-section--orders .section-header .label { color: var(--gold-soft, #e2c98a); }

/* מקום-שמור: הסקשן ריק כרגע, הודעה בעברית בלבד — לא ממציאים תמונות/מספרים */
.sa-tst-orders-placeholder {
  text-align: center;
  color: var(--gold-soft, #e2c98a);
  font-size: 1.05rem;
  padding: var(--sp-6, 2rem) var(--sp-4, 1rem);
  margin: 0;
}

/* ═══ סליידר "המלצות ממתכונים" — 37 שקופיות, כולן באותו גודל ═══
   ⛔ תיק "סליידר המלצות" (29.07.2026) — מחליף את שלוש הרשתות הישנות
   (top4/featured/rest). התקן מתועד ב-assets/components.css, אותו קונפיג
   כמו .sapd-reviews (woocommerce.php) ו-.reviews-swiper (page-books.php).
   רוחב שקופית קבוע — לא object-fit — כי כל 37 התמונות כמעט זהות ביחס
   (1100 רוחב מקור, יחס ≈2.168-2.175), אז רוחב אחיד מספיק ליצירת גובה
   כמעט זהה בלי שום חיתוך (.sa-tst-img נשאר height:auto כרגיל). */
.sa-tst-swiper { padding: var(--sp-6, 2rem) 0 var(--sp-2, .5rem); }
.sa-tst-swiper .sa-tst-slide { width: 210px; }
@media (min-width: 680px) {
  .sa-tst-swiper .sa-tst-slide { width: 240px; }
}
.sa-tst-swiper .sa-tst-item { margin: 0; }

.sa-tst-swiper .swiper-button-prev,
.sa-tst-swiper .swiper-button-next { color: var(--gold, #c9a24b); }
.sa-tst-swiper .swiper-pagination-bullet { background: var(--espresso, #241511); opacity: .35; }
.sa-tst-swiper .swiper-pagination-bullet-active { background: var(--gold, #c9a24b); opacity: 1; }

/* סמן יד בדסקטופ בלבד — סוויפר מוסיף .swiper-grab-cursor/.swiper-grabbing
   מעצמו (grabCursor: true) על המכולה, כאן רק מוודאים שבמגע לא נדבק סמן */
@media (hover: hover) and (pointer: fine) {
  .sa-tst-swiper { cursor: grab; }
  .sa-tst-swiper.swiper-grabbing { cursor: grabbing; }
}

/* מיקוד מקלדת גלוי — keyboard: { enabled: true } בקונפיג */
.sa-tst-swiper:focus-visible {
  outline: 2px solid var(--gold, #c9a24b);
  outline-offset: 4px;
  border-radius: var(--radius, 12px);
}

/* ⛔ דרישת נגישות קשיחה — משלים את swiper.autoplay.stop() שבתבנית */
@media (prefers-reduced-motion: reduce) {
  .sa-tst-swiper .swiper-wrapper { transition-duration: 0ms !important; }
}

/* ── רשת "קהילה"/"הזמנות" — נשאר בשימוש בלעדי לסקשן "המלצות מהזמנות"
   (עדיין ריק, "בקרוב" — לא נגעו בו). ⛔ אל תמחקו: זו לא שארית מתה. ── */
.sa-tst-grid--rest {
  columns: 2;
  column-gap: var(--sp-3, .75rem);
  margin-block-start: var(--sp-6, 2rem);
}
@media (min-width: 560px)  { .sa-tst-grid--rest { columns: 3; } }
@media (min-width: 820px)  { .sa-tst-grid--rest { columns: 4; } }
@media (min-width: 1100px) { .sa-tst-grid--rest { columns: 5; } }

.sa-tst-grid--rest .sa-tst-item { margin-block-end: var(--sp-3, .75rem); }

/* ── פריט תמונה (כפתור, לנגישות + קליק) ── */
.sa-tst-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius, 14px);
  overflow: hidden;
  break-inside: avoid;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sa-tst-item:hover,
.sa-tst-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.sa-tst-item:focus-visible {
  outline: 2px solid var(--gold, #c9a24b);
  outline-offset: 2px;
}
.sa-tst-item--rest { opacity: .92; }
.sa-tst-item--rest:hover,
.sa-tst-item--rest:focus-visible { opacity: 1; }

/* ⛔ בלי crop בשום גודל תצוגה — גובה אוטומטי לפי יחס התמונה המקורי
   (צילומי מסך גבוהים וצרים, 1100×2385 בערך). ראה לקח מתועד בתיק. */
.sa-tst-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══ לייטבוקס משותף (עמוד ההמלצות + רצועת עמוד מוצר) ═══ */
.sa-tst-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4, 1rem);
}
.sa-tst-lightbox[hidden] { display: none; }
body.sa-tst-lightbox-open { overflow: hidden; }

.sa-tst-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 8, .82);
}

.sa-tst-lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 480px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3, .75rem);
}

.sa-tst-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius, 14px);
  background: #111;
}

.sa-tst-lightbox-close {
  position: absolute;
  inset-block-start: -2.5rem;
  inset-inline-end: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.sa-tst-lightbox-close:hover { background: rgba(255,255,255,.28); }

.sa-tst-lightbox-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5, 1.5rem);
}
.sa-tst-lightbox-nav button {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 0;
  background: var(--gold, #c9a24b);
  color: var(--espresso, #241511);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.sa-tst-lightbox-nav button:hover { background: var(--gold-soft, #e2c98a); }