/* ============================================================
   גשש - עיצוב בהשראת bestai.co.il, בגרסת Light בלבד
   (בקשת ארתור, 24.8.2026)
   ה-DNA: טורקיז-מנטה #00D1B8 + גרדיאנטים, נגיעות זהב, Heebo
   עם כותרות גדולות וטקסט-גרדיאנט, פינות ~14px, זוהר רדיאלי עדין.
   מותאם ל-light: מנטה בוהק לדקורציה, טיל כהה לטקסט (AA),
   ירוק/אדום נשארים לסמנטיקת מחירים בלבד.
   ============================================================ */
:root {
  /* מותג - משפחת המנטה של ההשראה */
  --accent: #00C4A7;            /* מנטה - דקורציה וגרדיאנטים */
  --accent-bright: #3BE3C9;
  --accent-deep: #007A68;       /* טיל כהה - קישורים וטקסט, עובר AA על לבן */
  --accent-ink: #06352D;        /* טקסט על כפתורי מנטה */
  --grad-btn: linear-gradient(135deg, #3BE3C9, #00C4A7);
  --grad-btn-hover: linear-gradient(135deg, #2BD1B7, #00AE94);
  --grad-text: linear-gradient(105deg, #009980, #0A6E9E);
  --gold: #E9B308;              /* מבטא משני - נקודות הדגשה */

  /* בסיס בהיר */
  --ink: #101B22;
  --muted: #55656E;             /* 5.9:1 על לבן */
  --bg: #FAFDFC;                /* לבן עם נשימת מנטה */
  --surface: #F1F7F5;
  --card: #FFFFFF;
  --line: #E1EBE8;

  /* סמנטיקת מחירים - נשארת נפרדת מהמותג */
  --drop: #1E7B43;
  --drop-soft: #EAF5EE;
  --rise: #B3372B;
  --rise-soft: #FBEFED;

  --chrome-bg: rgba(255,255,255,.88);
  --footer-bg: #082226;
  --bar-bg: rgba(250,253,252,.96);

  --font-head: 'Heebo', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Assistant', 'Segoe UI', Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(8,34,38,.06), 0 6px 20px rgba(8,34,38,.06);
  --shadow-lift: 0 10px 26px rgba(0,150,128,.16);
  --tap: 2.75rem;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hidden חייב לנצח כל כלל display של קלאסים (למשל .btn) */
[hidden] { display: none !important; }
/* scrollbar-gutter: עמוד קצר ועמוד ארוך שומרים אותו רוחב - בלי הזזה
   אופקית של כל התוכן כשפס הגלילה מופיע או נעלם במעבר בין עמודים */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* מעבר בין עמודים: fade-in בלבד - הקליק מנווט מיידית, והתוכן של
   העמוד החדש נכנס בפייד רך. ההדר זהה בכל העמודים ונשאר יציב.
   reduced-motion מנוטרל ע"י הכלל הגלובלי למעלה. */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
main, .site-footer { animation: page-in .28s ease-out; }
/* פוטר צמוד: עמוד קצר (המעקבים שלי) - הפוטר בתחתית המסך;
   עמוד ארוך - בסוף התוכן. גם מבטיח שהפוטר לעולם לא מצויר
   באמצע המסך לפני שה-JS מילא תוכן. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.22; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 6.5vw, 3.1rem); font-weight: 800; margin: 0 0 .6rem; letter-spacing: -.01em; }
h2 { font-size: clamp(1.25rem, 4vw, 1.7rem); font-weight: 800; margin: 1.9rem 0 .7rem; }
h3 { font-size: 1.1rem; font-weight: 700; margin: 1.2rem 0 .4rem; }
p { margin: .6rem 0; }
a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent-deep); outline-offset: 2px; border-radius: 6px;
}
img { max-width: 100%; height: auto; display: block; }

/* טקסט-גרדיאנט - החתימה של ההשראה */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }

.skip-link {
  position: absolute; top: -3rem; right: 1rem; z-index: 100;
  background: var(--accent-ink); color: #fff; padding: .5rem 1rem; border-radius: 0 0 8px 8px;
}
.skip-link:focus { top: 0; color: #fff; }

/* --- האדר: לבן שקוף עם blur --- */
.site-header {
  background: var(--chrome-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; max-width: 80rem; margin: 0 auto; }
/* הניווט בימין, הלוגו נדחף לשמאל.
   הלוגו נעול LTR - הנקודה יושבת בקצה הימני כמו במילה אנגלית,
   בלי שה-bidi של העמוד יגרור אותה שמאלה. */
.logo {
  direction: ltr; unicode-bidi: isolate;
  font-family: var(--font-head); font-weight: 800; font-size: 1.42rem;
  letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
  margin-right: auto;   /* פיזי בכוונה: דוחף את הלוגו לקצה השמאלי, בלי תלות בכיוון */
}
.logo .zol {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.logo .dot { color: var(--gold); }   /* נקודת הזהב - נקודת המחיר מגרף ההירו */
.site-nav { order: -1; display: flex; gap: .15rem; }
.site-nav a {
  color: var(--muted); text-decoration: none; font-weight: 700; font-size: .95rem;
  padding: .5rem 1.1rem; border-radius: 999px; min-height: var(--tap);   /* ריווח לרוחב הגלולה (דסקטופ) */
  display: inline-flex; align-items: center;
  transition: background .13s ease, color .13s ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); }
.watch-count {
  background: var(--gold); color: #3A2D00; font-weight: 800; font-size: .78rem;
  min-width: 1.3rem; height: 1.3rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; margin-inline-start: .3rem;
}
/* מובייל: שלושת קישורי הניווט בשורה אחת, בלי שבירת טקסט -
   ריווח ופדינג מצומצמים ופונט מוקטן כדי שהכל ייכנס ליד הלוגו */
@media (max-width: 560px) {
  .header-inner { gap: .4rem; padding: .6rem .65rem; }
  .logo { font-size: 1.05rem; }
  .site-nav { gap: .1rem; }
  /* ריפוד מאוזן: המסגרת של העמוד הפעיל רחבה יותר מגבוהה, אותה מסגרת לכל עמוד */
  .site-nav a { font-size: .88rem; padding: .38rem .42rem; white-space: nowrap; }
  .watch-count { min-width: 1.1rem; height: 1.1rem; font-size: .68rem; margin-inline-start: .2rem; }
}

/* --- Hero עם קאבר אורורה: כתמי צבע רכים בלבד, בלי קווים ומספרים --- */
.hero {
  background:
    radial-gradient(40rem 24rem at 86% -12%, rgba(59, 227, 201, .26), transparent 62%),
    radial-gradient(32rem 21rem at 6% 6%, rgba(125, 211, 252, .20), transparent 60%),
    radial-gradient(28rem 18rem at 52% 112%, rgba(255, 211, 77, .14), transparent 64%),
    linear-gradient(180deg, #F1FAF7, var(--bg) 80%);
  padding: 3rem 0 0;
  border-bottom: 1px solid var(--line);   /* קו הסיום של הקאבר */
}
/* הסרגל רוכב על קו הסיום: חציו על הקאבר, חציו מתחתיו */
.hero .cat-chips {
  position: relative; z-index: 5;
  margin-top: 1.9rem;
  margin-bottom: -1.75rem;
}
/* הסקשן הראשון שנראה אחרי ה-Hero מפנה מקום לסרגל הצף -
   גם כשסקשן תוצאות החיפוש שביניהם מוסתר */
.hero + .section,
.hero + .section[hidden] + .section { padding-top: 4.6rem; }
.hero .container { max-width: 68rem; }  /* החלק העליון נשאר ברוחב המקורי */
.hero p.lede { color: var(--muted); font-size: 1.12rem; max-width: 34rem; margin-top: .3rem; }

/* פריסת Hero: טקסט מימין, איור משמאל בדסקטופ; נערם במובייל */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-items: center; }
.hero-copy { min-width: 0; }
.hero-art { max-width: 24rem; margin: 0 auto; }
.hero-art svg { width: 100%; height: auto; display: block; }
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; }
  .hero-art { max-width: none; margin: 0; }
  .hero-grid .cat-chips { grid-column: 1 / -1; }
}

/* אנימציה עדינה לאיור ה-Hero */
.hero-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: hero-draw 1.2s ease-out .25s forwards;
}
.hero-area {
  opacity: 0;
  animation: hero-area-in .8s ease-out 1.1s forwards;
}
.hero-dot {
  transform-box: fill-box; transform-origin: center;
  animation: hero-pulse 2.6s ease-in-out 1.6s infinite;
}
.hero-float {
  transform-box: fill-box; transform-origin: center;
  animation: hero-float 4.5s ease-in-out infinite;
}
.hero-float-2 { animation-duration: 5.5s; animation-delay: -2.2s; }
.hero-float-3 { animation-duration: 5s; animation-delay: -1.1s; }
@keyframes hero-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-area-in { to { opacity: .10; } }
@keyframes hero-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-line { stroke-dashoffset: 0; }
  .hero-area { opacity: .10; }
}

/* תיבת ההדבקה: גלולה מאוחדת */
.paste-box {
  display: flex; align-items: center; gap: .3rem;
  background: var(--card); border: 2px solid var(--line); border-radius: 999px;
  padding: .45rem; margin: 1.4rem 0 .55rem; box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.paste-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,196,167,.15); }
.paste-box.valid { border-color: var(--drop); }
.paste-box.valid:focus-within { box-shadow: 0 0 0 4px rgba(30,123,67,.14); }
.paste-box.error { border-color: var(--rise); animation: paste-shake .3s ease; }
@keyframes paste-shake {
  25% { transform: translateX(4px); }
  50% { transform: translateX(-4px); }
  75% { transform: translateX(3px); }
}
.paste-box input {
  flex: 1; font-family: var(--font-body); font-size: 1.1rem; color: var(--ink);
  padding: .7rem .7rem; border: none; background: transparent;
  min-height: 3.1rem; min-width: 0; direction: ltr; text-align: left;
}
.paste-box input:focus { outline: none; }
.paste-box input::placeholder { direction: rtl; text-align: right; color: var(--muted); }
.paste-box .btn { padding: .65rem 1.6rem; min-height: 3.1rem; font-size: 1.08rem; flex: 0 0 auto; }
.paste-btn {
  flex: 0 0 auto; width: 3.1rem; height: 3.1rem; border-radius: 999px;
  border: none; background: var(--surface); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-deep);
  transition: background .13s ease;
}
.paste-btn svg { width: 1.6rem; height: 1.6rem; }
.paste-btn:hover { background: #E4F5F0; }

/* מובייל: טקסט קטן יותר בתיבת בדיקת המחיר */
@media (max-width: 560px) {
  .paste-box { padding: .32rem; }
  .paste-box input { font-size: .95rem; padding: .45rem .5rem; min-height: 2.6rem; }
  .paste-box .btn { font-size: .95rem; padding: .45rem 1.05rem; min-height: 2.6rem; }
  .paste-box .paste-btn { width: 2.6rem; height: 2.6rem; }
  .paste-box .paste-btn svg { width: 1.35rem; height: 1.35rem; }
}

.paste-hint {
  font-size: .88rem; color: var(--muted); margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}

/* --- סרגל קטגוריות: "עגינה" צפה - כל הצ'יפים בכרטיס גלולה אחד --- */
.cat-chips {
  display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center;
  width: fit-content; max-width: 100%;
  min-height: 3.7rem;   /* שומר את הגובה עוד לפני שה-JS ממלא צ'יפים - בלי קפיצה */
  margin: 3.6rem auto 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 2.2rem; padding: .4rem .5rem;
  box-shadow: var(--shadow);
}
.cat-chips:empty { visibility: hidden; }   /* בלי הבהוב גלולה ריקה לפני המילוי */
/* גריד שבא אחרי סרגל קטגוריות מקבל את אותו אוויר כמו בדף הבית
   (47px בין תחתית הסרגל לתוכן) - כלל אחד, נשמר בכל העמודים */
.cat-chips + .card-grid { margin-top: 2.95rem; }

/* רמז גלילה לסרגל נגלל: צל רך בקצה מסמן "יש עוד", ונעלם בסוף
   הגלילה. טריק רקעים בלבד - שכבות הכיסוי (local) נגללות עם התוכן
   ומסתירות את הצל (scroll) כשמגיעים לקצה. סימטרי, עובד גם ב-RTL. */
.cat-chips {
  --chips-fade:
    linear-gradient(90deg, var(--card) 40%, rgba(255, 255, 255, 0)) 0 0 / 2.6rem 100% no-repeat local,
    linear-gradient(270deg, var(--card) 40%, rgba(255, 255, 255, 0)) 100% 0 / 2.6rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16, 27, 34, .16), rgba(16, 27, 34, 0)) 0 0 / 1.15rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 27, 34, .16), rgba(16, 27, 34, 0)) 100% 0 / 1.15rem 100% no-repeat scroll,
    var(--card);
}
/* במובייל: שורה אחת נגללת אופקית במקום ערימת שורות */
@media (max-width: 640px) {
  .cat-chips {
    flex-wrap: nowrap; justify-content: flex-start;
    width: 100%; overflow-x: auto;
    scrollbar-width: none;
    background: var(--chips-fade);
    scroll-snap-type: x proximity; scroll-padding-inline: .5rem;
  }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chip { flex: 0 0 auto; }
}
/* סרגל הסינון בעמודי הרשימה: תמיד שורה אחת, נגלל אופקית אם צר */
.cat-chips[data-list-filter] {
  flex-wrap: nowrap; justify-content: flex-start;
  overflow-x: auto; scrollbar-width: none;
  background: var(--chips-fade);
  scroll-snap-type: x proximity; scroll-padding-inline: .5rem;
}
.cat-chips[data-list-filter]::-webkit-scrollbar { display: none; }
/* ריפוד מעט צר יותר - שמונה צ'יפים נכנסים בשורה בלי לגלוש מהמסגרת */
.cat-chips[data-list-filter] .cat-chip { flex: 0 0 auto; padding-inline: .74rem; }
.cat-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: transparent; border: none; border-radius: 999px;
  padding: .45rem .85rem; text-decoration: none; font-weight: 700; font-size: .95rem;
  color: var(--ink); min-height: var(--tap);
  scroll-snap-align: start;   /* גלילת הסרגל נעצרת על גבול צ'יפ, לא באמצעו */
  transition: background .13s ease, color .13s ease;
}
.cat-chip:hover { background: var(--surface); color: var(--ink); }
.cat-chip.active { background: var(--accent-ink); color: #fff; }
.cat-emoji { font-size: 1.15rem; }
.cat-icon { display: inline-flex; color: var(--accent-deep); }
.cat-icon svg { width: 1.45rem; height: 1.45rem; }
.cat-chip.active .cat-icon { color: #fff; }
/* --- קאבר עמוד קטגוריה: האורורה של דף הבית בגובה קומפקטי;
   הסרגל רוכב על קו הסיום, חציו על הקאבר וחציו מתחתיו --- */
.cat-hero {
  background:
    radial-gradient(40rem 24rem at 86% -12%, rgba(59, 227, 201, .26), transparent 62%),
    radial-gradient(32rem 21rem at 6% 6%, rgba(125, 211, 252, .20), transparent 60%),
    radial-gradient(28rem 18rem at 52% 112%, rgba(255, 211, 77, .14), transparent 64%),
    linear-gradient(180deg, #F1FAF7, var(--bg) 80%);
  padding: 2.7rem 0 0;
  border-bottom: 1px solid var(--line);
}
.cat-hero .container { max-width: 68rem; }
.cat-hero h1 { margin: 0; }
.cat-hero .price-date { margin: .45rem 0 0; font-size: 1rem; max-width: 46rem; }
/* רצועת נתונים חיים מהקטגוריה - עובדות שנמדדו בלבד */
.cat-stats {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: .9rem; row-gap: .3rem;
  margin-top: .9rem; font-size: .95rem; color: var(--muted);
  min-height: 1.5rem;   /* בלי קפיצה לפני שהנתונים נטענים */
}
.cstat strong { color: var(--ink); font-weight: 700; }
.cstat .cstat-drop { color: var(--drop); font-weight: 700; }
.cstat + .cstat::before { content: '·'; margin-inline-end: .9rem; opacity: .55; }
.cat-hero .cat-chips {
  position: relative; z-index: 5;
  margin-top: 1.9rem;
  margin-bottom: -1.75rem;
}
/* משמר את מרווח 2.95rem בין הסרגל למוצרים:
   3.45 + מרווח הגריד 1.2 פחות 1.7 של החצי הבולט של הסרגל */
.cat-hero + .container { padding-top: 3.45rem; }
/* קאבר בלי סרגל שרוכב על הקו (המעקבים שלי): נסגר עם אוויר,
   והתוכן מתחתיו שומר על אותו מקצב של 2.95rem מהקו */
.cat-hero-plain { padding-bottom: 2.4rem; }
.cat-hero-plain + .container { padding-top: 1.75rem; }
/* צ'יפים שהם כפתורי סינון - לא קישורים */
button.cat-chip { font-family: inherit; cursor: pointer; }
/* --- סרגל סינון מוצרים בעמודי הרשימה --- */
.list-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: .85rem;               /* אוויר בין הסרגל שרוכב על הקו למסננים */
  min-height: 2.7rem;               /* בלי קפיצה לפני שהסרגל מתמלא */
}
.list-toolbar:not(.ready) { visibility: hidden; }
.list-toolbar select {
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink);
  background-color: #FFFFFF; border: 1.5px solid var(--line); border-radius: 999px;
  padding: .42rem 1rem; max-width: 100%; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355656E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: left .8rem center; background-size: .95rem;
  padding-inline-end: 2.3rem;
}
.list-toolbar select:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 196, 167, .16);
}
.clear-filters {
  font: inherit; font-size: .92rem; font-weight: 700; color: var(--accent-deep);
  background: none; border: none; cursor: pointer; padding: .3rem .2rem;
}
.clear-filters:hover { text-decoration: underline; color: var(--ink); }
.toolbar-count { margin-inline-start: auto; font-size: .92rem; color: var(--muted); }
/* כפתור הסינון למובייל - קיים תמיד ב-DOM, מוצג רק במסך צר */
.filters-toggle { display: none; }
@media (max-width: 640px) {
  .filters-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: .2rem;   /* קרוב יותר לסרגל הקטגוריות */
    background: #FFFFFF; border: 1.5px solid var(--line); border-radius: 999px;
    padding: .42rem 1.05rem; min-height: var(--tap);
    font: inherit; font-size: .92rem; font-weight: 700; color: var(--ink);
    cursor: pointer;
    transition: border-color .13s ease;
  }
  .filters-toggle svg { width: 1.05rem; height: 1.05rem; }
  .filters-toggle[aria-expanded="true"] { border-color: var(--accent); }
  .filters-toggle .ft-count {
    background: var(--gold); color: #3A2D00; font-weight: 800; font-size: .74rem;
    min-width: 1.25rem; height: 1.25rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* הסרגל עצמו מוסתר עד פתיחה; נפתח בעמודה מסודרת */
  .list-toolbar { display: none; }
  .list-toolbar.open {
    display: flex; flex-direction: column; align-items: stretch;
    margin-top: .6rem;
  }
  .list-toolbar.open .toolbar-count { margin-inline-start: 0; }
}
/* --- עמוד 404 --- */
/* הקאבר ממלא את כל הגובה עד הפוטר - בלי רצועה לבנה מתחת לכפתורים */
.nf-main { display: flex; flex-direction: column; }
.nf-main .nf-hero { flex: 1; border-bottom: none; }
.nf-main + .site-footer { margin-top: 0; }
.nf-hero { text-align: center; padding-top: 3.2rem; }
.nf-hero .container { max-width: 44rem; }
.nf-art { max-width: 18rem; margin: 0 auto; }
.nf-art svg { width: 100%; height: auto; display: block; }
/* איור 404: מדף חנות שהמוצרים קופצים אליו - ומשבצת אחת נשארה ריקה */
.nf-pop {
  opacity: 0;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: nf-pop .55s cubic-bezier(.34, 1.56, .64, 1) .25s forwards;
}
.nf-pop-2 { animation-delay: .4s; }
.nf-pop-3 { animation-delay: .55s; }
@keyframes nf-pop {
  from { opacity: 0; transform: scale(.7) translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nf-fade-in { to { opacity: 1; } }
/* קו-המתאר המקווקו של המשבצת הריקה - הקווים צועדים סביבו */
.nf-slot {
  opacity: 0;
  animation: nf-fade-in .45s ease-out .85s forwards,
             nf-march 1.9s linear 1.1s infinite;
}
@keyframes nf-march { to { stroke-dashoffset: -26; } }
/* תגיות המחיר; זו של המוצר החסר נשארה תלויה - ומתנדנדת */
.nf-tags { opacity: 0; animation: nf-fade-in .5s ease-out .7s forwards; }
.nf-tag-lost {
  opacity: 0;
  transform-box: fill-box; transform-origin: 50% 0%;
  animation: nf-fade-in .4s ease-out .95s forwards,
             nf-swing 3.2s ease-in-out 1.4s infinite;
}
@keyframes nf-swing {
  0%, 100% { transform: rotate(4deg); }
  50% { transform: rotate(-4deg); }
}
/* זכוכית המגדלת סורקת את המשבצת הריקה */
.nf-scan {
  transform-box: fill-box; transform-origin: center;
  animation: nf-scan 5.5s ease-in-out infinite;
}
@keyframes nf-scan {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  32% { transform: translate(-16px, 7px) rotate(-5deg); }
  65% { transform: translate(8px, 3px) rotate(3deg); }
}
.nf-q { transform-box: fill-box; transform-origin: center; animation: nf-q 2.2s ease-in-out 1s infinite; }
@keyframes nf-q {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
/* ניצוץ מהבהב בתוך המשבצת הריקה */
.nf-spark {
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: nf-blink 2.6s ease-in-out 1.6s infinite;
}
@keyframes nf-blink {
  0%, 100% { opacity: 0; transform: scale(.6); }
  12% { opacity: 1; transform: scale(1); }
  30% { opacity: 0; transform: scale(.6); }
}
@media (prefers-reduced-motion: reduce) {
  .nf-pop, .nf-slot, .nf-tags, .nf-tag-lost { opacity: 1; animation: none; }
  .nf-scan, .nf-q { animation: none; }
  .nf-spark { animation: none; opacity: .7; }
}
.nf-code {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(4.6rem, 12vw, 7.4rem); line-height: 1; margin: .2rem 0 0;
  background: linear-gradient(135deg, #3BE3C9 0%, #00A88F 52%, #067F8F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nf-hero h1 { margin-top: .35rem; }
.nf-sub { color: var(--muted); font-size: 1.05rem; max-width: 30rem; margin: .6rem auto 0; }
.nf-actions {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .7rem; margin-top: 1.7rem;
}
/* רצועת הדילים: רחבה יותר מהטקסט, מיושרת להתחלה */
.nf-hero .nf-lows-wrap { max-width: 64rem; margin-top: 2.6rem; text-align: start; }
.nf-lows-title { font-size: 1.18rem; margin: 0; display: flex; align-items: center; }
.nf-lows-wrap .card-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .nf-lows-wrap .card-grid { grid-template-columns: repeat(4, 1fr); } }
.nf-report { margin: 2.2rem 0 0; font-size: .9rem; color: var(--muted); text-align: center; }
.nf-report a { color: var(--accent-deep); font-weight: 600; }
.nf-report a:hover { color: var(--ink); }
/* --- טעינה במנות --- */
/* מנה חדשה שנפתחת בגלילה: כל כרטיס עולה ומתבהר, בהפרש קטן מחברו.
   backwards - שהכרטיס יחכה שקוף עד שמגיע תורו בשרשרת */
.batch-in { animation: card-in .5s cubic-bezier(.22, .61, .36, 1) backwards; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } }
.load-sentinel { height: 1px; }
.load-more { text-align: center; margin: 1.7rem 0 .4rem; }
.load-more-btn { min-height: 2.7rem; padding-inline: 1.7rem; }
.load-more-note { margin: .6rem 0 0; font-size: .88rem; color: var(--muted); }

/* מצב ריק אחרי סינון */
.list-empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted);
  padding: 2.4rem 1rem; background: #FFFFFF;
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
}
/* התת-כותרת מתיישרת לקו ההתחלה של טקסט הכותרת - רוחב האריח + הרווח */
.cat-hero h1:has(.h2-icon) + .price-date { margin-inline-start: 3.28rem; }
/* וכך גם רצועת הנתונים ושורת "ראו גם" שמתחתיה */
.cat-hero h1:has(.h2-icon) ~ .cat-stats,
.cat-hero h1:has(.h2-icon) ~ .cat-also { margin-inline-start: 3.28rem; }
/* כפתורי מעבר בין הרשימות בקאבר */
.cat-also { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }
.also-label { font-size: .92rem; font-weight: 600; color: var(--muted); }
.also-btn {
  display: inline-flex; align-items: center;
  padding: .42rem 1.05rem; border-radius: 999px;
  background: #FFFFFF; border: 1.5px solid var(--line);
  color: var(--accent-deep); font-weight: 700; font-size: .92rem; text-decoration: none;
  transition: background .13s ease, color .13s ease;
}
.also-btn:hover { background: var(--surface); color: var(--ink); }
@media (max-width: 560px) {
  .cat-hero { padding-top: 2.1rem; }
  /* פחות אוויר בין ההדר לכותרת ההירו */
  .hero { padding-top: 1.9rem; }
  /* ריווח שורות אחיד לכל טקסט הגוף במובייל (הכותרות שומרות על שלהן) */
  body { line-height: 1.5; }
  .hero p.lede { font-size: 1.05rem; }
  /* כותרת ותת-כותרת הקאבר - מעט קטנות יותר */
  .cat-hero h1 { font-size: 1.5rem; }
  .cat-hero .price-date { font-size: .9rem; }
  /* אריח האייקון ליד הכותרת - מעט קטן יותר, וההזחה שמתחתיו מתעדכנת בהתאם */
  .cat-hero h1:has(.h2-icon) { gap: .45rem; }   /* האייקון קרוב יותר לכותרת */
  .cat-hero h1 .h2-icon { padding: .26rem; margin-inline-end: 0; }
  .cat-hero h1 .h2-icon svg { width: 1.2rem; height: 1.2rem; }
  .cat-hero h1:has(.h2-icon) + .price-date,
  .cat-hero h1:has(.h2-icon) ~ .cat-stats,
  .cat-hero h1:has(.h2-icon) ~ .cat-also { margin-inline-start: 2.17rem; }
  /* אריחי האייקונים של סקשני עמוד הבית - מעט קטנים יותר, ההזחה של תת-הכותרת בהתאם */
  h2 .h2-icon { padding: .26rem; }
  h2 .h2-icon svg { width: 1rem; height: 1rem; }
  main h2:has(.h2-icon) + .section-sub { margin-inline-start: 2.07rem; }
  /* כרטיס הגרף: פחות ריפוד = גרף רחב וגבוה יותר */
  main .chart-card { padding: .6rem .5rem; }
  /* שורת "ראו גם": העמודים בשורה אחת נגללת במקום ערימה */
  .cat-also { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
  .cat-also::-webkit-scrollbar { display: none; }
  .also-label { flex: 0 0 auto; }
  .also-btn { flex: 0 0 auto; font-size: .88rem; padding: .38rem .85rem; }
  /* השורה פורצת עד קצה המסך - כפתור חתוך בקצה = יש עוד בגלילה */
  .cat-also { margin-inline-end: -1rem; padding-inline-end: 1rem; }
  /* כפתור לרשימה המלאה - מעט קטן יותר */
  main .see-all { font-size: .9rem; padding: .26rem .75rem; }
}
/* אייקון כותרת סקשן - אריח גרדיאנט עם גליף לבן, בשפת הכפתור הראשי */
.h2-icon {
  display: inline-flex; vertical-align: -7px; margin-inline-end: .55rem;
  background: var(--grad-btn); color: #fff;
  border-radius: .6rem; padding: .34rem;
  box-shadow: 0 3px 9px rgba(0, 196, 167, .30);
}
/* גליפים בסגנון צללית - מילוי מלא, בלי קו מתאר */
.h2-icon svg { width: 1.12rem; height: 1.12rem; fill: currentColor; }
/* הכותרת הופכת לשורת flex - האייקון ממורכז אנכית מול הטקסט */
h2:has(.h2-icon) { display: flex; align-items: center; }
/* קישור "לרשימה המלאה" - בקצה הנגדי של שורת הכותרת */
.see-all {
  margin-inline-start: auto; align-self: center;
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 700;
  color: var(--accent-deep); text-decoration: none; white-space: nowrap;
  padding: .32rem .95rem;
  border: 1px solid var(--line); border-radius: 999px;   /* מסגרת קו עדין */
  transition: border-color .13s ease, color .13s ease;
}
.see-all:hover { border-color: var(--accent); color: var(--ink); }
/* כותרת עמוד רשימה - אייקון האריח בגודל מותאם ל-h1 */
h1:has(.h2-icon) { display: flex; align-items: center; gap: .6rem; }
h1 .h2-icon svg { width: 1.45rem; height: 1.45rem; }
/* תת-הכותרת מתיישרת לקו ההתחלה של טקסט הכותרת (רוחב האריח + הרווח) */
h2:has(.h2-icon) + .section-sub { margin-inline-start: 2.35rem; }
/* --- כפתורים: גרדיאנט המנטה הוא צבע הפעולה --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 800; font-size: 1.02rem;
  padding: .7rem 1.6rem; border-radius: 999px; text-decoration: none;
  border: none; cursor: pointer; min-height: var(--tap);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--grad-btn); color: var(--accent-ink);
  box-shadow: 0 4px 14px rgba(0,196,167,.30);
}
.btn-primary:hover {
  background: var(--grad-btn-hover); color: var(--accent-ink);
  box-shadow: 0 7px 20px rgba(0,196,167,.38); transform: translateY(-1px);
}
.btn-ghost { background: var(--card); color: var(--accent-deep); border: 2px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-ghost[aria-pressed="true"] { background: var(--surface); border-color: var(--accent); color: var(--accent-ink); }

/* --- רשת כרטיסי מוצרים --- */
.card-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1.2rem 0;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
@media (min-width: 960px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(5, 1fr); } }

.pcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #BDE8DE; }

/* כוכב הוספה למעקבים - בפינת הכרטיס */
.card-watch {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.93);
  color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .13s ease, transform .13s ease, border-color .13s ease;
}
@media (hover: hover) { .card-watch:hover { color: #DBA400; border-color: #E9C86A; transform: scale(1.1); } }   /* רק בעכבר: במגע מצב hover "נדבק" והכוכב נשאר צהוב אחרי הסרה */
.card-watch[aria-pressed="true"] { color: #DBA400; border-color: #E9C86A; }
.card-watch svg { width: 1.15rem; height: 1.15rem; }
.card-watch svg path { fill: none; }
.card-watch[aria-pressed="true"] svg path { fill: currentColor; }
.pcard .thumb { aspect-ratio: 1; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 2.3rem; }
.pcard-body { padding: .65rem .8rem .8rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.pcard .name { font-weight: 400; font-size: 1.02rem; line-height: 1.38; color: var(--ink); margin: 0; }
/* wrap: בכרטיס צר הצ'יפ יורד שלם לשורה הבאה במקום להישבר או להיחתך */
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin-top: auto; }
.price-now { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; direction: ltr; }
.price-now.deal { color: var(--drop); }   /* מחיר משתלם - מודגש בירוק */

/* מחיר קודם חצוי - ממוצע מדוד עם תווית, לא "מחיר מקורי" של מוכר */
.price-was { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.price-was b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }   /* בלי קו חוצה - קו חוצה = "מחיר מקורי" */
/* לצד המחיר הגדול: שורת השוואה לממוצע (בלי קו חוצה) + מגמת השבוע */
.price-hero .ph-row { display: flex; align-items: flex-end; gap: 1.1rem; flex-wrap: wrap; }
.ph-side { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 .5rem; }
.ph-avg { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .92rem; line-height: 1.3; }
.ph-avg b { color: var(--ink); font-weight: 800; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.ph-avg .delta { font-size: .86rem; }
.ph-trend { font-size: .88rem; font-weight: 700; line-height: 1.3; }
.ph-trend b { font-variant-numeric: tabular-nums; }
.ph-trend.down { color: var(--drop); }
.ph-trend.up { color: var(--rise); }
.ph-trend.flat { color: var(--muted); font-weight: 600; }
.ph-trend .tr-arrow { font-weight: 800; }

/* דירוג עלי אקספרס בכרטיס - מידע מיובא, מיוחס במפורש */
.ali-rating { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); line-height: 1.3; }
.ali-rating .star { color: #DBA400; font-size: .92rem; }
.ali-rating .src { font-size: .74rem; }
/* שורת הדירוג באותו גודל כמו שורת "הנתונים עודכנו" שמתחתיה */
.p-info .ali-rating { font-size: .84rem; margin: .45rem 0 0; }
.p-info .ali-rating .src { font-size: .84rem; }
.delta { font-weight: 700; font-size: .82rem; padding: .05rem .5rem; border-radius: 999px; font-variant-numeric: tabular-nums; direction: ltr; white-space: nowrap; }
.delta.down { background: var(--drop-soft); color: var(--drop); }
.delta.up { background: var(--rise-soft); color: var(--rise); }
.delta.flat { background: var(--surface); color: var(--muted); }

/* פירורי לחם - עמוד מוצר בלבד: העמוד הכי עמוק בהיררכיה */
.crumbs {
  display: flex; align-items: center; min-width: 0;
  font-size: .92rem; color: var(--muted); margin: 1.15rem 0 0;
}
.crumbs a { color: var(--muted); text-decoration: none; flex: 0 0 auto; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumb-sep { margin: 0 .45rem; opacity: .65; flex: 0 0 auto; }
.crumb-cur {
  color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* --- עמוד מוצר: פריסת שתי עמודות בסגנון עמוד מוצר של עלי אקספרס -
   גלריה גדולה בצד ההתחלה, פאנל מחיר ופעולות לצידה, הגרף פרוס מתחת --- */
.product-layout {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem; margin-top: 1.4rem;
}
@media (min-width: 860px) {
  .product-layout {
    /* עמודת הגלריה ברוחב התוכן שלה (תמונה + מסילה) - פאנל המידע
       מקבל את כל השאר ונצמד אליה */
    grid-template-columns: minmax(0, 35.2rem) minmax(0, 1fr);
    gap: 3.6rem; align-items: start;
  }
}
/* הגלריה - תמונת מוצר גדולה על כרטיס לבן עם הילה רכה */
.p-img-main {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; max-height: 29rem;
}
.p-img-main::before {
  content: ""; position: absolute; inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 196, 167, .12), transparent 68%);
}
.p-img-main .p-emoji { position: relative; font-size: clamp(6.5rem, 24vw, 10.5rem); line-height: 1; }
.p-img-note { font-size: .8rem; color: var(--muted); text-align: center; margin: .6rem 0 0; }
/* שורת הסרטון - מדיה שייכת לאזור הגלריה */
.p-video-note {
  font-size: .85rem; color: var(--muted); margin: .6rem 0 0;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
}
.p-video-note a { color: var(--accent-deep); font-weight: 700; text-decoration: none; }
.p-video-note a:hover { text-decoration: underline; color: var(--ink); }
.p-video-note .p-meta-ic { display: inline-flex; color: var(--accent-deep); }
.p-video-note .p-meta-ic svg { width: 1.05rem; height: 1.05rem; }
/* גווני רקע לתמונה הראשית - מוחלפים מהגלריה */
.p-img-main.tint-1::before { background: radial-gradient(circle, rgba(125, 211, 252, .15), transparent 68%); }
.p-img-main.tint-2::before { background: radial-gradient(circle, rgba(255, 211, 77, .17), transparent 68%); }
.p-img-main.tint-3::before { background: radial-gradient(circle, rgba(16, 27, 34, .07), transparent 68%); }
/* רצועת תמונות ממוזערות */
.p-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .7rem; }
.p-thumb {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1; cursor: pointer; padding: 0;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.p-thumb::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; }
.p-thumb.t0::before { background: radial-gradient(circle, rgba(0, 196, 167, .14), transparent 70%); }
.p-thumb.t1::before { background: radial-gradient(circle, rgba(125, 211, 252, .17), transparent 70%); }
.p-thumb.t2::before { background: radial-gradient(circle, rgba(255, 211, 77, .20), transparent 70%); }
.p-thumb.t3::before { background: radial-gradient(circle, rgba(16, 27, 34, .08), transparent 70%); }
.p-thumb span, .p-thumb img { position: relative; }
.p-thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-thumb:hover { border-color: var(--accent); }
.p-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 196, 167, .15); }
/* בדסקטופ: מסילת אריחים אנכית בצד שמאל של התמונה, נמתחת לגובהה המלא */
@media (min-width: 860px) {
  .p-gallery {
    /* עמודת התמונה מוגבלת לרוחב התמונה עצמה (29rem) - המסילה צמודה אליה */
    display: grid; grid-template-columns: minmax(0, 29rem) 5.4rem;
    gap: .75rem; align-items: stretch; justify-content: start;
  }
  .p-img-main { grid-column: 1; grid-row: 1; }
  .p-thumbs {
    grid-column: 2; grid-row: 1; margin-top: 0;
    grid-template-columns: 1fr; grid-template-rows: none;
    align-content: start;           /* מעט תמונות - נערמות מלמעלה */
    /* height:0 + min-height:100% - המסילה לא קובעת את גובה השורה */
    height: 0; min-height: 100%;
  }
  .p-thumb { font-size: 2.2rem; }
  /* חמש תמונות ומעלה: הקוביות מתכווצות כך שכולן נכנסות בגובה התמונה */
  .p-thumbs:has(.p-thumb:nth-child(5)) { grid-auto-rows: minmax(0, 1fr); }
  .p-thumbs:has(.p-thumb:nth-child(5)) .p-thumb {
    height: 100%; width: auto; aspect-ratio: 1 / 1;
    justify-self: center; font-size: 1.5rem;
  }
  .p-img-note, .p-video-note { grid-column: 1; }   /* ממורכזים מול התמונה הגדולה בלבד */
}
/* בלוק פרטי המוצר מה-API */
.p-meta {
  border-top: 1px solid var(--line);
  margin-top: 1.1rem; padding-top: .95rem;
  display: grid; gap: .3rem;
  font-size: .95rem; color: var(--muted);
}
.p-meta:not(:has(.p-meta-row:not([hidden]))) { display: none; }
.p-meta-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.p-meta-row a { color: var(--accent-deep); font-weight: 700; text-decoration: none; }
.p-meta-row a:hover { text-decoration: underline; color: var(--ink); }
.p-meta-ic { display: inline-flex; color: var(--accent-deep); flex: 0 0 auto; }
.p-meta-ic svg { width: 1.15rem; height: 1.15rem; }
.p-meta .ship-free { color: var(--accent-deep); }   /* כמו קישורי החנות והקטגוריה */
.p-meta .src-note { font-size: .82rem; }
/* סרט "שפל כל הזמנים" על התמונה - מוצג רק כשהמדידות אומרות זאת */
.p-img-badge {
  position: absolute; top: .95rem; right: .95rem; z-index: 2;
  background: #FFD34D; color: #4A3B00;
  font-weight: 800; font-size: .88rem;
  padding: .32rem .85rem; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}
/* פאנל המידע */
.p-info h1 { font-size: clamp(1.3rem, 4.5vw, 1.8rem); line-height: 1.3; margin: 0; }
.p-info .price-date { margin: .3rem 0 0; }
/* בלוק המחיר - רצועה מודגשת כמו אצל עלי */
.p-info .price-hero {
  background: var(--surface); border-radius: var(--radius);
  padding: .95rem 1.15rem .85rem; margin: 1.1rem 0 0;
}
/* כפתורי הפעולה בפאנל - גדולים, במקום שהעין מגיעה אליו אחרי המחיר */
@media (min-width: 720px) {
  .p-info .action-bar { padding: 1.15rem 0 0; }   /* אוויר מבלוק פרטי המוצר שמעל */
  .p-info .action-bar .btn { min-height: 3.15rem; font-size: 1.08rem; }
  .p-info .action-bar .btn-primary { flex: 1.35; }
  .p-info .action-bar .watch-btn { flex: 1; }
}

/* המחיר-גיבור */
.price-hero { margin: .9rem 0 .2rem; }
.price-hero .v {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.5rem, 10vw, 3.6rem); line-height: 1.05;
  color: var(--ink); font-variant-numeric: tabular-nums; direction: ltr;
  display: inline-block;
}
.price-hero .l { font-size: .88rem; color: var(--muted); }

/* אינדיקטורים משניים */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1rem 0;
}
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .55rem .7rem; text-align: center;
}
.stat .v { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; direction: ltr; }
.stat .l { font-size: .78rem; color: var(--muted); }

/* פסק דין */
.verdict-badge {
  display: flex; align-items: center; gap: .6rem;
  border-radius: var(--radius); padding: .8rem 1.1rem; margin: 1rem 0;
  font-weight: 700; font-size: 1.02rem;
}
.verdict-badge.good { background: var(--drop-soft); color: var(--drop); border: 1px solid #C4E5D1; }
.verdict-badge.warn { background: var(--rise-soft); color: var(--rise); border: 1px solid #F0D2CD; }
.verdict-badge .icon { font-size: 1.3rem; }

/* --- הגרף --- */
.chart-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem; margin: 1.2rem 0;
}
.chart-wrap { direction: ltr; position: relative; touch-action: pan-y; transition: opacity .18s ease; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .chart-wrap { transition: none; } }

.chart-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: chart-draw .9s ease-out forwards;
}
/* נקודות ותוויות נכנסות אחרי שהקו מסיים להיצבע */
.chart-pt { opacity: 0; animation: chart-pt-in .35s ease-out .8s forwards; }
.chart-now {
  transform-box: fill-box; transform-origin: center;
  animation: chart-pt-in .35s ease-out .8s forwards, hero-pulse 2.6s ease-in-out 1.5s infinite;
}
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-pt-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chart-line { animation: none; stroke-dashoffset: 0; }
  .chart-pt, .chart-now { animation: none; opacity: 1; }
}
/* חץ הכפתור הראשי - אייקון קו בשפת האייקונים של האתר, קנה ארוך */
.btn-arrow { width: 1.4rem; height: 1.12rem; }
/* --- כפתור הכסף --- */
.buy-btn { white-space: nowrap; }
/* תג שפל על הכפתור + טבעת זהב - רק כשהמדידות אומרות שפל */
.bb-low {
  background: #FFD34D; color: #4A3B00;
  font-size: .78rem; font-weight: 800;
  padding: .12rem .55rem; border-radius: 999px;
}
.buy-btn.at-low { box-shadow: 0 0 0 2px #FFD34D, 0 6px 16px rgba(219, 164, 0, .28); }
/* שורת ציפייה - ממורכזת מול הכפתור הראשי בלבד: שורת-צל עם אותן
   פרופורציות של סרגל הפעולות (1.35 / 1 / רוחב כפתור השיתוף) */
.cta-note { font-size: .8rem; color: var(--muted); margin: .5rem 0 0; text-align: center; }
@media (min-width: 720px) {
  .p-info .cta-note { display: flex; gap: .6rem; margin-inline-end: 3.7rem; }
  .p-info .cta-note .cn-text { flex: 1.35; text-align: center; }
  .p-info .cta-note::after { content: ""; flex: 1; }
}
/* פעימה חד-פעמית אחרי פסק דין חיובי */
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.035); }
  65% { transform: scale(1.008); }
}
.buy-btn.pulse-once { animation: cta-pulse .95s ease-in-out .7s 2; }
@media (prefers-reduced-motion: reduce) { .buy-btn.pulse-once { animation: none; } }
/* מובייל צר: הכפתור הראשי שומר על התווית והמחיר; התג והחץ יורדים
   (טבעת הזהב עדיין מסמנת שפל) וכפתור המעקב הופך לאייקון בלבד */
@media (max-width: 479px) {
  .action-bar { gap: .4rem; padding-left: .7rem; padding-right: .7rem; }
  .action-bar .btn { padding-inline: .7rem; }
  .buy-btn .bb-low, .buy-btn .btn-arrow { display: none; }
  .watch-btn .wb-label { display: none; }
  .watch-btn { padding-inline: .8rem; }
  .watch-btn svg { width: 1.35rem; height: 1.35rem; }
}
/* כוכב המעקב בכפתור - הכוכב הקווי של הכרטיסיות, מתמלא בזהב כשבמעקב */
.watch-btn svg { width: 1.15rem; height: 1.15rem; }
.watch-btn svg path { fill: none; }
.watch-btn[aria-pressed="true"] svg { color: #DBA400; }
.watch-btn[aria-pressed="true"] svg path { fill: currentColor; }
/* כפתור השיתוף - ריבועי, בקצה סרגל הפעולות */
.share-btn { flex: 0 0 auto; padding-inline: .85rem; }
.share-btn svg { width: 1.25rem; height: 1.25rem; }
.share-btn.copied { color: var(--drop); border-color: var(--drop); }

.chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: .2rem .6rem; font-size: .82rem; font-weight: 700;
  box-shadow: var(--shadow); white-space: nowrap; direction: ltr;
  transform: translate(-50%, -130%); display: none;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

.range-chips { display: flex; gap: .45rem; margin-bottom: .7rem; }
.range-chips button {
  font-family: var(--font-body); font-weight: 700; font-size: .9rem;
  padding: .35rem .95rem; min-height: 2.25rem;
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--muted);
  cursor: pointer; transition: all .13s ease;
}
.range-chips button[aria-pressed="true"] { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.chart-legend { font-size: .85rem; color: var(--muted); margin-top: .5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.chart-legend .low { color: var(--drop); font-weight: 700; }
.chart-legend .cur { color: #8A6A00; font-weight: 700; }   /* 5:1 על לבן (היה 3.9) */
.chart-legend .hi { color: #5F7370; font-weight: 700; }   /* היה #B9C9C5 - 1.9:1, מתחת לתקן */
.chart-legend .avgl { color: #55656E; font-weight: 700; }
/* שורת ההקשר בבועית הסקראב */
.chart-tip .tip-sub { display: block; direction: rtl; font-weight: 600; font-size: .76rem; color: var(--muted); }
.chart-tip .tip-below { color: var(--drop); font-weight: 800; }
.chart-tip .tip-above { color: var(--rise); font-weight: 800; }

/* --- מוצרים קשורים בתחתית עמוד המוצר --- */
.related-sec { margin: 2.4rem 0 1.2rem; }
.related-title { display: flex; align-items: center; font-size: 1.35rem; margin: 0; }
.related-title [data-rel-cat] { margin-inline-start: .3rem; }
/* גלולת "לכל הקטגוריה" - בולטת מקישור, שקטה מכפתור ראשי */
.related-title .also-btn {
  margin-inline-start: auto; flex: 0 0 auto;
  font-family: var(--font-body); font-size: .98rem; padding: .48rem 1.25rem;
}
.related-sub { color: var(--muted); font-size: .92rem; margin: .35rem 0 0; }

/* --- גילוי נאות --- */
/* מרווח אחיד מהפוטר בכל האתר: תיבת גילוי שסוגרת עמוד לא מוסיפה מרווח משלה */
.container > .aff-disclosure:last-child { margin-bottom: 0; }
.aff-disclosure {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .7rem 1rem; font-size: .89rem; margin: 1rem 0;
}
.aff-disclosure::before {
  content: "!";
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .15rem;
  border-radius: 50%; border: 2px solid var(--accent-deep);
  color: var(--accent-deep); background: transparent;
  font-family: var(--font-head); font-weight: 800; font-size: .76rem; line-height: 1;
  padding-top: .4px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- סרגל פעולה תחתון במובייל --- */
.action-bar {
  position: fixed; bottom: 0; right: 0; left: 0; z-index: 60;
  background: var(--bar-bg); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  display: flex; gap: .6rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
}
.action-bar .btn-primary { flex: 1; }
body.has-action-bar { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }   /* אייפון: מעל פס הבית */
@media (min-width: 720px) {
  .action-bar { position: static; background: none; border: none; padding: 1rem 0; backdrop-filter: none; }
  body.has-action-bar { padding-bottom: 0; }
}

/* --- שלד טעינה --- */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, #E7F2EE 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: var(--radius-sm); color: transparent !important; min-height: 1em;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- סרגל דביק בדסקטופ (עמוד מוצר): הכפתור עוקב אחרי הגלילה --- */
.p-sticky {
  position: fixed; top: 0; right: 0; left: 0; z-index: 70;
  background: var(--bar-bg); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%); transition: transform .25s ease;
}
.p-sticky.show { transform: translateY(0); }
.p-sticky-in { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; }
.ps-name {
  font-weight: 700; color: var(--ink); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-price { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ps-btn { flex: 0 0 auto; min-height: 2.5rem; font-size: .98rem; }
@media (max-width: 719px) { .p-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .p-sticky { transition: none; } }

/* --- הסרה מהמעקב: אנימציית יציאה + פופ-אפ אישור --- */
.pcard.wl-removing { opacity: 0; transform: scale(.95); transition: opacity .26s ease, transform .26s ease; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16, 27, 34, .45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  animation: modal-bd-in .2s ease-out;
}
.modal {
  position: relative; overflow: hidden;
  background: var(--card); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(16, 27, 34, .28);
  padding: 2rem 2.1rem 1.7rem; max-width: 26rem; width: 100%;
  text-align: center;
  animation: modal-in .22s ease-out;
}
/* פס גרדיאנט המותג בראש הדיאלוג */
.modal::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0;
  height: 4px; background: var(--grad-btn);
}
/* אייקון הכוכב בעיגול רך - הכוכב הזהוב המוכר של פריט במעקב;
   האדום שמור לכפתור הפעולה עצמו */
.modal-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.3rem; height: 3.3rem; border-radius: 50%;
  background: #FDF6E1; color: #DBA400;
  margin-bottom: .9rem;
}
.modal-ic svg { width: 1.65rem; height: 1.65rem; }
.modal-ic svg path { fill: currentColor; }   /* מלא, כמו כוכב במצב "במעקב" */
.modal-title { font-family: var(--font-head); font-weight: 800; font-size: 1.32rem; margin: 0; color: var(--ink); }
.modal-sub { color: var(--muted); font-size: 1rem; margin: .5rem 0 0; }
.modal-actions { display: flex; gap: 1.2rem; justify-content: center; margin-top: 1.5rem; }
.modal-actions .btn { flex: 1; min-height: 2.8rem; }
@keyframes modal-in { from { opacity: 0; transform: scale(.94) translateY(8px); } }
@keyframes modal-bd-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .modal, .modal-backdrop { animation: none; } }
.modal-danger { background: var(--rise-soft); color: var(--rise); border: 1px solid #F0D2CD; }
.modal-danger:hover { filter: brightness(.97); }
.modal-check {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: 2.1rem; font-size: .88rem; color: var(--muted); cursor: pointer;
}
.modal-check input { accent-color: var(--accent); width: 1rem; height: 1rem; cursor: pointer; }

/* --- מחיר יעד - ממוסגר בראש כרטיס הגרף, בקצה השורה של צ'יפי הטווח --- */
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem;
}
.chart-head .range-chips { margin-bottom: 0; }
.target-row {
  font-size: .92rem;
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .32rem .9rem; min-height: 2.25rem;
}
.tgt-ic { display: inline-flex; color: var(--accent-deep); flex: 0 0 auto; }
.tgt-ic svg { width: 1.05rem; height: 1.05rem; }
.tgt { color: var(--muted); font-weight: 600; }
.tgt.hit { color: var(--drop); font-weight: 800; }
.tgt-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; font-weight: 700; color: var(--accent-deep);
}
.tgt-link:hover { text-decoration: underline; color: var(--ink); }
.tgt-sep { color: var(--muted); opacity: .6; }
.tgt-input {
  font: inherit; width: 6.8rem; padding: .32rem .6rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
}
.tgt-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 196, 167, .16); }
.tgt-save { min-height: 2.2rem; font-size: .92rem; padding: .3rem 1rem; }
/* יעד על כרטיס מעקב */
.wl-target { display: flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .85rem; font-weight: 700; color: var(--muted); }
.wl-target.hit { color: var(--drop); }

/* שורת פסק-דין בכרטיס מעקב - מה קרה מאז ששמרת, ברוחב מלא */
.wl-verdict {
  display: block; margin-top: .5rem;
  padding: .42rem .7rem; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 700; text-align: center;
}
.wl-verdict.down { background: var(--drop-soft); color: var(--drop); }
.wl-verdict.up { background: var(--rise-soft); color: var(--rise); }
.wl-verdict.flat { background: var(--surface); color: var(--muted); }

/* קליק יוצא מכרטיס מעקב - מופיע רק כשהמחיר ירד מאז השמירה */
.wl-go {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .6rem; padding: .5rem .9rem;
  background: var(--grad-btn); color: var(--accent-ink);
  border-radius: 999px; font-weight: 800; font-size: .9rem;
  cursor: pointer; box-shadow: 0 3px 9px rgba(0, 196, 167, .25);
  transition: filter .13s ease;
}
.wl-go:hover { filter: brightness(1.05); }
.wl-go svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state .big { font-size: 3rem; margin-bottom: .5rem; }
.empty-state .btn { margin-top: .9rem; }   /* הכפתור יורד קצת מתחת לטקסט */

/* --- סקשנים ופוטר --- */
/* מרווח אחיד בין סקשנים: כל סקשן תורם 1.8rem מכל צד, ותוכן אחרון
   בלי margin משלו - כך הפער בין כל שני סקשנים זהה תמיד (3.6rem) */
.section { padding: 1.8rem 0; }
.section .container > h2:first-child { margin-top: 0; }
.section .container > :last-child { margin-bottom: 0; }

/* תת-כותרת של סקשן */
.section-sub {
  margin: -.35rem 0 1rem;
  font-size: 1rem; color: var(--muted);
}
.section.alt { background: var(--surface); border-block: 1px solid var(--line); }
/* לפני רצועה צבעונית הגבול נראה מיד - מוסיפים אוויר לבן כדי שהפער
   הנתפס ישתווה לפער שבין שני סקשנים לבנים */
.section + .section.alt { margin-top: 1.8rem; }
.steps { display: grid; gap: .8rem; grid-template-columns: 1fr; margin: 1rem 0; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(3, 1fr); } }
/* כרטיסי שלבים: מספור ענק מגזיני מלא על רקע מנטה עדין */
.step {
  background: linear-gradient(165deg, #FFFFFF 20%, #E9F8F3);
  border: 1px solid #D3EEE5;
  border-radius: 26px;
  padding: .9rem 1.15rem 1.1rem;
  transition: transform .16s ease, box-shadow .16s ease;
}
.step:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
/* מספר רפאים גדול בצד ימין - סימן מים מאחורי הסצנה */
.step { position: relative; overflow: hidden; }
.step .n {
  position: absolute; top: -0.9rem; right: .5rem; z-index: 0;
  font-family: var(--font-head); font-weight: 800;
  font-size: 5.2rem; line-height: 1;
  color: #7FD8C4; opacity: .38;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
  pointer-events: none; margin: 0;
}
.step .step-art, .step strong, .step p { position: relative; z-index: 1; }
.step strong { font-family: var(--font-head); font-size: 1.08rem; color: var(--ink); }
.step p { font-size: .93rem; color: var(--muted); margin: .3rem 0 0; }

/* סצנות מונפשות בשלבים - האיור למעלה, הטקסט מתחתיו.
   כל האלמנטים ממוקמים במצב-הסיום, כך ש-reduced-motion מציג תמונה שלמה. */
.step-art { margin: 0 0 .8rem; }
.step-art svg { width: 100%; height: auto; display: block; max-height: 7.5rem; }

/* ציר-זמן מאוחד: כל הסצנות על מחזור אחד של 9.6 שניות -
   הלינק נדבק (0-14%) ← הזכוכית סורקת (28-58%) ← המטבע נקנה (62-88%) */

/* סצנה 1: הלינק צונח בסיבוב קל, טבעת אישור מתפשטת, התיבה מהבהבת ירוק */
.sa1-chip { transform-box: fill-box; transform-origin: center; animation: sa1-drop 9.6s ease-in-out infinite; }
@keyframes sa1-drop {
  0%   { opacity: 0; transform: translate(-16px, -32px) rotate(-7deg); }
  4%   { opacity: 1; transform: translate(-16px, -32px) rotate(-7deg); }
  12%  { transform: translate(0, 0) rotate(0deg); }
  90%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  95%, 100% { opacity: 0; transform: translate(-16px, -32px) rotate(-7deg); }
}
.sa1-ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: sa1-ripple 9.6s ease-out infinite; }
@keyframes sa1-ripple {
  0%, 11% { opacity: 0; transform: scale(.5); }
  14%  { opacity: .6; transform: scale(.8); }
  22%  { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(.5); }
}
.sa1-flash { animation: sa1-glow 9.6s ease-in-out infinite; }
@keyframes sa1-glow {
  0%, 11% { stroke: #E1EBE8; }
  15%, 24% { stroke: #1E7B43; }
  30%, 100% { stroke: #E1EBE8; }
}

/* סצנה 2: הזכוכית מופיעה אחרי ההדבקה, סורקת וחושפת את הדיל */
.sa2-lens { transform: translate(148px, 70px); animation: sa2-scan 9.6s ease-in-out infinite; }
@keyframes sa2-scan {
  0%, 25% { opacity: 0; transform: translate(46px, 40px); }
  29%  { opacity: 1; transform: translate(46px, 40px); }
  37%  { transform: translate(74px, 52px); }
  44%  { transform: translate(96px, 44px); }
  51%  { transform: translate(118px, 62px); }
  58%  { opacity: 1; transform: translate(148px, 70px); }
  88%  { opacity: 1; transform: translate(148px, 70px); }
  93%, 100% { opacity: 0; transform: translate(46px, 40px); }
}
.sa2-tag { transform-box: fill-box; transform-origin: center; animation: sa2-pop 9.6s ease-in-out infinite; }
@keyframes sa2-pop {
  0%, 56% { opacity: 0; transform: scale(.6); }
  62%, 88% { opacity: 1; transform: scale(1); }
  93%, 100% { opacity: 0; transform: scale(.6); }
}

/* סצנה 3: אחרי שהדיל התגלה - המטבע נופל לעגלה, קפיצה וניצוצות */
.sa3-coin { animation: sa3-fall 9.6s ease-in-out infinite; }
@keyframes sa3-fall {
  0%, 60% { opacity: 0; transform: translate(0, -36px); }
  64%  { opacity: 1; transform: translate(0, -36px); }
  71%  { transform: translate(0, 0); }
  90%  { opacity: 1; transform: translate(0, 0); }
  95%, 100% { opacity: 0; transform: translate(0, 0); }
}
.sa3-cart { transform-box: fill-box; transform-origin: center bottom; animation: sa3-bounce 9.6s ease-in-out infinite; }
@keyframes sa3-bounce {
  0%, 70% { transform: translateY(0); }
  74% { transform: translateY(3px); }
  78% { transform: translateY(-2px); }
  82%, 100% { transform: translateY(0); }
}
.sa3-spark { animation: sa3-twinkle 9.6s ease-in-out infinite; }
@keyframes sa3-twinkle {
  0%, 72% { opacity: 0; }
  78%, 88% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
.sa3-check { transform-box: fill-box; transform-origin: center; animation: sa3-approve 9.6s ease-in-out infinite; }
@keyframes sa3-approve {
  0%, 74% { opacity: 0; transform: scale(.5); }
  79%  { opacity: 1; transform: scale(1.12); }
  83%, 90% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(.5); }
}

/* מספר הרפאים מתקרב כשהסצנה שלו רצה - מוסר את השרביט לבא בתור */
.steps .step .n { transform-origin: top right; }
.steps .step:nth-child(1) .n { animation: sn1-zoom 9.6s ease-in-out infinite; }
@keyframes sn1-zoom {
  0%   { transform: scale(1); opacity: .38; }
  5%   { transform: scale(1.16); opacity: .55; }
  20%  { transform: scale(1.16); opacity: .55; }
  27%, 100% { transform: scale(1); opacity: .38; }
}
.steps .step:nth-child(2) .n { animation: sn2-zoom 9.6s ease-in-out infinite; }
@keyframes sn2-zoom {
  0%, 27% { transform: scale(1); opacity: .38; }
  32%  { transform: scale(1.16); opacity: .55; }
  56%  { transform: scale(1.16); opacity: .55; }
  63%, 100% { transform: scale(1); opacity: .38; }
}
.steps .step:nth-child(3) .n { animation: sn3-zoom 9.6s ease-in-out infinite; }
@keyframes sn3-zoom {
  0%, 60% { transform: scale(1); opacity: .38; }
  66%  { transform: scale(1.16); opacity: .55; }
  88%  { transform: scale(1.16); opacity: .55; }
  95%, 100% { transform: scale(1); opacity: .38; }
}

@media (prefers-reduced-motion: reduce) {
  .sa2-lens { transform: translate(148px, 70px); }
  .sa2-tag, .sa3-spark, .sa3-check { opacity: 1; }
  .sa1-ring { opacity: 0; }
  .steps .step .n { animation: none; }
}

/* --- עמודי תוכן: אודות, שקיפות, פרטיות, נגישות --- */
.prose { max-width: 46rem; padding-bottom: 1.5rem; }
.prose h1 { margin-top: 1.6rem; font-size: clamp(1.6rem, 5vw, 2.3rem); }
.prose h2 { font-size: 1.22rem; margin: 1.7rem 0 .4rem; }
.prose .updated { color: var(--muted); font-size: .9rem; margin-top: -.2rem; }
.prose ul { padding-inline-start: 1.2rem; margin: .5rem 0; }
.prose li { margin: .3rem 0; }

/* עמוד שו"ת: גריד רחב יותר + שורת פתיחה */
.prose-wide { max-width: 62rem; }
.faq-intro { font-size: 1.05rem; color: var(--muted); max-width: 46rem; margin: .4rem 0 1.4rem; }

/* תיבת הבהרה - גבולות השירות, בנגיעת הזהב של האתר */
.notice-box {
  background: #FDF6E1; border: 1px solid #EDD79A;
  border-radius: var(--radius-sm);
  padding: 1.05rem 1.25rem; margin: 1.6rem 0;
}
.notice-box h2 { margin: 0 0 .45rem; font-size: 1.15rem; }
.notice-box h2::before {
  content: "!";
  display: inline-flex; align-items: flex-end; justify-content: center;
  width: 1.45rem; height: 1.32rem; margin-inline-end: .5rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path d='M12 2 22 20 H2 Z' fill='none' stroke='%23B98A00' stroke-width='2.2' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  color: #8A6A00;   /* 4.7:1 על הרקע הצהבהב (היה 2.9) */
  font-family: var(--font-head); font-weight: 800; font-size: .78rem; line-height: 1;
  padding-bottom: 2.4px; padding-right: 2px; text-align: center;
  vertical-align: middle;
}
.notice-box p { margin: 0; }

/* טופס יצירת קשר */
.contact-form {
  margin: 1.2rem 0 2rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem 1.6rem 1.4rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem 1.3rem;
}
.form-row-full { grid-column: 1 / -1; }
@media (max-width: 700px) { .contact-form { grid-template-columns: 1fr; padding: 1.2rem 1.1rem; } }
.form-row { display: flex; flex-direction: column; gap: .3rem; }
.form-row label { font-weight: 700; font-size: .95rem; color: var(--ink); }
.form-row input, .form-row select, .form-row textarea {
  font: inherit; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: .65rem .9rem; width: 100%;
}
.form-row textarea { resize: vertical; min-height: 7rem; }
/* חץ מותאם ל-select - ממוקם פנימה מהקצה השמאלי */
.form-row select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355656E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: left .9rem center;
  background-size: 1rem;
  padding-inline-end: 2.5rem;
}
.form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 196, 167, .16);
}
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-note { font-size: .85rem; color: var(--muted); margin: 0; }

/* אקורדיון שאלות ותשובות - תיבות נפתחות */
.faq-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin: .6rem 0;
}
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .8rem;
  padding: 1.15rem 1.3rem; border-radius: var(--radius-sm);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--surface); }
.faq-item summary h2 { margin: 0; font-size: 1.15rem; }
.faq-item summary::after {
  content: ""; flex: 0 0 auto; margin-inline-start: auto;
  width: .55rem; height: .55rem;
  border-left: 2.5px solid var(--accent-deep); border-bottom: 2.5px solid var(--accent-deep);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item .faq-a { margin: 0; padding: .45rem 1.3rem 1.25rem; }
/* אוויר בין התיבות לסקשן הסיום */
.faq-item + h2 { margin-top: 2.8rem; }

.site-footer { background: var(--footer-bg); color: #AFC8C4; margin-top: 3rem; padding: 2.8rem 0 0; font-size: .92rem; }
.site-footer > .container { padding-bottom: 2.2rem; }
/* כשהעמוד מסתיים בסקשן צבוע - הפוטר נצמד אליו בלי רצועה לבנה */
main:has(> .section.alt:last-child) + .site-footer { margin-top: 0; }
.section.alt:last-child { padding-bottom: 2.2rem; }
.site-footer a { color: #AFC8C4; }
.site-footer a:hover { color: var(--accent-bright); }
/* עמודות מפת-אתר בפוטר */
.footer-cols {
  display: grid; grid-template-columns: repeat(6, auto);
  gap: 1.4rem 3.4rem; justify-content: start;
  margin: 0 0 2rem;
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.5rem; }
  .footer-cols .fcol-brand { grid-column: 1 / -1; max-width: none; margin-inline-end: 0; }
  .footer-cols .fcol-cats { grid-column: 1 / -1; max-width: none; margin-inline-start: 0; }
}
.fcol { display: flex; flex-direction: column; gap: .5rem; }
/* עמודת המותג שפותחת את המפה */
.fcol-brand { max-width: 13rem; margin-inline-end: 1.5rem; gap: 0; }
.footer-logo {
  margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem;
  letter-spacing: -.02em; color: #fff; text-align: right; unicode-bidi: isolate;
}
.footer-logo .zol { color: var(--accent-bright); }
.footer-logo .dot { color: var(--gold); }
.footer-tagline { margin: .35rem 0 0; font-size: .9rem; color: #AFC8C4; line-height: 1.55; }
/* כפתור בדיקת מחיר מתחת ללוגו - מוביל לתיבת ההדבקה */
.site-footer .footer-cta {
  margin-top: 1rem; align-self: flex-start;
  padding: .45rem 1.15rem; font-size: .95rem; min-height: 2.4rem;
  color: var(--accent-ink);   /* כהה - גובר על צבע הקישורים הכללי של הפוטר */
}
.site-footer .footer-cta:hover { color: var(--accent-ink); }
.footer-cta svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
/* מובייל: המותג במרכז המסך - לוגו גדול יותר, הסלוגן והכפתור מתחתיו */
@media (max-width: 560px) {
  .footer-cols .fcol-brand { align-items: center; text-align: center; }
  .footer-logo { font-size: 1.75rem; text-align: center; }
  .footer-tagline { margin-top: .05rem; line-height: 1.5; }                 /* צמוד ללוגו */
  .site-footer .footer-cta { align-self: center; margin-top: 1.45rem; }  /* והכפתור מעט נמוך יותר */
  /* מפת האתר כולה ממורכזת - עמודות, כותרות, קישורים וצ'יפי הקטגוריות */
  .footer-cols .fcol { align-items: center; text-align: center; }
  .fcol-title::after { margin-inline: auto; }
  .footer-cats { justify-content: center; }
}
/* עמודת צ'יפי הקטגוריות - נדחפת לקצה השמאלי של המפה */
.fcol-cats { margin-inline-start: auto; max-width: 22rem; }
.footer-cats { display: flex; flex-wrap: wrap; gap: .45rem; }
.footer-cats .foot-cat {
  font-size: .92rem; color: #AFC8C4; text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px; padding: .22rem .7rem; white-space: nowrap;
}
.footer-cats .foot-cat:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
.fcol-title { margin: 0 0 .25rem; font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: #fff; }
/* קו מנטה קצר תחת כל כותרת עמודה */
.fcol-title::after {
  content: ""; display: block; width: 1.5rem; height: 2px;
  background: linear-gradient(90deg, #3BE3C9, #00C4A7);
  border-radius: 2px; margin-top: .35rem;
}
.fcol a { color: #AFC8C4; text-decoration: none; font-size: .92rem; width: fit-content; }
.fcol a:hover { color: var(--accent-bright); }
/* תיבת גילוי נאות - התאומה הכהה של התיבה מעמוד המוצר */
.footer-disclosure {
  display: flex; gap: .6rem; align-items: flex-start;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  padding: .85rem 1.05rem; font-size: .85rem;
}
.footer-disclosure::before {
  content: "!";
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .12rem;
  border-radius: 50%; border: 2px solid var(--accent-bright);
  color: var(--accent-bright); background: transparent;
  font-family: var(--font-head); font-weight: 800; font-size: .76rem; line-height: 1;
  padding-top: .4px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}
/* רצועת סיום ברוחב מלא - גוון כהה מעט מרקע הפוטר, צמודה לתחתית */
.footer-copyright {
  font-size: .92rem; color: #7E9BA0; text-align: center;
  background: rgba(0, 0, 0, .28);
  padding: 1.05rem 1rem;
}

.price-date { font-size: .84rem; color: var(--muted); }

/* ============ עמוד מי אנחנו - סיפור עם איורים מונפשים ============ */
/* רוחב הגריד של ההירו בדף הבית (תיבת בדיקת המחיר) */
.about-container { max-width: 68rem; }
.about-hero { text-align: center; max-width: 44rem; margin: 2.2rem auto 1rem; }
.about-hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
.about-hero .lede { color: var(--muted); font-size: 1.15rem; margin-top: .6rem; }

.story-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem;
  align-items: center; margin: 3.2rem 0;
}
.story-section.flip .story-art { order: -1; }
.story-copy h2 { margin: 0 0 .6rem; font-size: 1.45rem; }
.story-copy p { color: var(--ink); font-size: 1.02rem; }
.story-copy .muted { color: var(--muted); }
.story-art svg { width: 100%; height: auto; display: block; max-height: 15rem; }
@media (max-width: 760px) {
  .story-section { grid-template-columns: 1fr; gap: 1.2rem; margin: 2.4rem 0; }
  .story-section.flip .story-art { order: 0; }
}

.about-values { display: flex; flex-direction: column; gap: .7rem; margin-top: .9rem; }
.about-value { display: flex; gap: .6rem; align-items: flex-start; }
.about-value p { margin: 0; }
.about-value .v-ic {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: .45rem;
  background: var(--grad-btn); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; margin-top: .1rem;
}
.about-cta {
  text-align: center; background: linear-gradient(165deg, #FFFFFF 20%, #E9F8F3);
  border: 1px solid #D3EEE5; border-radius: var(--radius);
  padding: 2rem 1.5rem; margin: 3rem 0 1rem;
}
.about-cta h2 { margin: 0 0 .4rem; }
.about-cta p { color: var(--muted); margin: 0 0 1.1rem; }

/* --- אנימציות הסצנות (לולאות עצמאיות, עדינות) --- */
/* סצנה 1: המחיר המנופח נמחק והאמיתי מופיע */
.ab1-strike { transform-box: fill-box; transform-origin: right center; transform: scaleX(0); animation: ab1-strike 6s ease-in-out infinite; }
@keyframes ab1-strike {
  0%, 22% { transform: scaleX(0); }
  38%, 90% { transform: scaleX(1); }
  97%, 100% { transform: scaleX(0); }
}
.ab1-real { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ab1-real 6s ease-in-out infinite; }
@keyframes ab1-real {
  0%, 42% { opacity: 0; transform: scale(.6); }
  52% { opacity: 1; transform: scale(1.08); }
  56%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(.6); }
}
/* סצנה 2: הגרף מצייר את עצמו ונקודת הזהב נוחתת */
.ab2-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ab2-draw 7s ease-in-out infinite; }
@keyframes ab2-draw {
  0%, 8% { stroke-dashoffset: 1; }
  45%, 90% { stroke-dashoffset: 0; }
  97%, 100% { stroke-dashoffset: 1; }
}
.ab2-dot { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ab2-dot 7s ease-in-out infinite; }
@keyframes ab2-dot {
  0%, 44% { opacity: 0; transform: scale(.4); }
  52% { opacity: 1; transform: scale(1.25); }
  58%, 90% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(.4); }
}
.ab2-area { opacity: 0; animation: ab2-area 7s ease-in-out infinite; }
@keyframes ab2-area {
  0%, 40% { opacity: 0; }
  55%, 90% { opacity: .12; }
  97%, 100% { opacity: 0; }
}
/* סצנה 3: תג האישור קופץ והגלולות מרחפות */
.ab3-badge { transform-box: fill-box; transform-origin: center; animation: ab3-badge 5.5s ease-in-out infinite; }
@keyframes ab3-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}
.ab3-float { transform-box: fill-box; transform-origin: center; animation: ab3-float 4.5s ease-in-out infinite; }
.ab3-float-2 { animation-delay: -2.2s; }
@keyframes ab3-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
/* סצנה 4: רדאר - טבעות מתפשטות ונקודות נדלקות */
.ab4-ring { transform-box: fill-box; transform-origin: center; animation: ab4-ring 4.8s ease-out infinite; }
.ab4-ring-2 { animation-delay: -2.4s; }
@keyframes ab4-ring {
  0% { transform: scale(.25); opacity: .55; }
  75% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
.ab4-blip { opacity: .25; animation: ab4-blip 4.8s ease-in-out infinite; }
.ab4-blip-2 { animation-delay: -1.6s; }
.ab4-blip-3 { animation-delay: -3.2s; }
@keyframes ab4-blip {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ab1-strike { transform: scaleX(1); }
  .ab1-real, .ab2-dot { opacity: 1; }
  .ab2-line { stroke-dashoffset: 0; }
  .ab2-area { opacity: .12; }
  .ab4-ring { opacity: 0; }
  .ab4-blip { opacity: 1; }
}
/* --- שדרוגי סצנות מי-אנחנו --- */
.ab1-fake { transform-box: fill-box; transform-origin: center; animation: ab1-fake 6s ease-in-out infinite; }
@keyframes ab1-fake {
  0%, 22% { opacity: 1; transform: scale(1) rotate(0deg); }
  38%, 90% { opacity: .3; transform: scale(.88) rotate(-7deg); }
  97%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.ab1-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ab1-ring 6s ease-out infinite; }
@keyframes ab1-ring {
  0%, 44% { opacity: 0; transform: scale(.5); }
  52% { opacity: .55; transform: scale(.9); }
  62%, 100% { opacity: 0; transform: scale(1.45); }
}
.ab2-m { opacity: 0; }
.ab2-m1 { animation: ab2-m1 7s ease-in-out infinite; }
@keyframes ab2-m1 { 0%, 15% { opacity: 0; } 19%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ab2-m2 { animation: ab2-m2 7s ease-in-out infinite; }
@keyframes ab2-m2 { 0%, 24% { opacity: 0; } 28%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ab2-m3 { animation: ab2-m3 7s ease-in-out infinite; }
@keyframes ab2-m3 { 0%, 33% { opacity: 0; } 37%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ab3-check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ab3-check 5.5s ease-in-out infinite; }
@keyframes ab3-check {
  0%, 10% { stroke-dashoffset: 1; }
  30%, 88% { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 1; }
}
.ab3-spark { transform-box: fill-box; transform-origin: center; opacity: .15; animation: ab3-spark 5.5s ease-in-out infinite; }
.ab3-spark-2 { animation-delay: -2.7s; }
@keyframes ab3-spark {
  0%, 100% { opacity: .15; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.ab4-sweep { transform-origin: 110px 76px; opacity: .3; animation: ab4-spin 4.8s linear infinite; }
@keyframes ab4-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ab1-fake { opacity: .3; }
  .ab1-ring { opacity: 0; }
  .ab2-m { opacity: 1; }
  .ab3-check { stroke-dashoffset: 0; }
  .ab3-spark { opacity: 1; }
  .ab4-sweep { opacity: .12; }
}
/* מובייל: תיבת תוכן הפנייה בעמוד יצירת קשר - 100px */
@media (max-width: 560px) {
  .form-row textarea { min-height: 100px; height: 100px; }
}

/* כותרת המוצרים הקשורים: בדסקטופ עם שם הקטגוריה, במובייל "עוד בקטגוריה" בלבד */
.rel-short { display: none; }
@media (max-width: 560px) {
  .rel-full { display: none; }
  .rel-short { display: inline; }
}

/* מובייל: המצב הריק במעקבים - הטקסט מתחת לכותרת צר יותר, לא נמרח לרוחב המסך */
@media (max-width: 560px) {
  .empty-state p { max-width: 19rem; margin-inline: auto; }
}

/* --- פס הקריאה של הגרף (מובייל): הערך הנגרר מוצג מעל הגרף, לא מתחת לאצבע --- */
.chart-readout {
  display: none; min-height: 1.7rem; margin: 0 0 .3rem; text-align: center;
  font-size: .9rem; color: var(--muted); line-height: 1.4;
  direction: rtl; unicode-bidi: isolate;   /* .chart-wrap הוא LTR בשביל ה-SVG; הטקסט כאן עברי */
}
/* הכרזה לקוראי מסך - מחוץ למסך, מתעדכנת רק בסוף גרירה */
.chart-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* מיקוד מקלדת על הגרף */
.chart-wrap svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.chart-readout strong { color: var(--ink); font-size: 1.02rem; }
.chart-readout .ro-when { font-weight: 700; color: var(--accent-deep); }
.chart-readout .tip-below { color: var(--drop); font-weight: 800; }
.chart-readout .tip-above { color: var(--rise); font-weight: 800; }
.chart-readout.hint { font-size: .84rem; }
.legend-compact { display: none; }
@media (max-width: 560px) {
  .chart-readout { display: block; }
  .chart-tip { display: none !important; }   /* הבועית הצפה מיותרת כשיש פס קריאה */
  /* מקרא קומפקטי: מסביר רק מה שהגרף לא מסביר בעצמו */
  .chart-legend > span:not(.legend-compact) { display: none; }
  .legend-compact { display: inline; color: #55656E; font-weight: 600; }
}

/* מובייל: עמודי תוכן (יצירת קשר, מדריכים, שאלות) - האלמנט האחרון לא מוסיף מרווח
   משלו והקונטיינר בלי ריפוד תחתון, כך שהמרווח מהפוטר הוא 48px כמו בשאר האתר */
@media (max-width: 560px) {
  .prose { padding-bottom: 0; }
  .prose > :last-child { margin-bottom: 0; }
}

/* --- פס בטא (להסרה ביום ה-API דרך הדגל BETA_NOTICE ב-app.js) --- */
.beta-bar {
  background: #FDF6E1; border-bottom: 1px solid #EDD79A; color: #5C4A00;
  font-size: .84rem; line-height: 1.45; text-align: center; padding: .4rem 1rem;
}
.beta-bar .beta-tag {
  display: inline-block; background: var(--gold); color: #3A2D00; font-weight: 800; font-size: .72rem;
  border-radius: 999px; padding: .05rem .55rem; margin-inline-end: .45rem; vertical-align: 1px;
}
.beta-bar .beta-en { color: #6E5F20; margin-inline-start: .45rem; }
@media (max-width: 560px) { .beta-bar .beta-en { display: block; margin: 0; } }

/* שורות ההקשר מתחת לגרף - מספרים מהמדידות שהעין לא מחלצת מהקו */
.chart-context { display: flex; flex-direction: column; gap: .3rem; margin: .8rem 0 .1rem; font-size: .9rem; color: var(--muted); line-height: 1.4; }
.chart-context b { color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-context .ctx-ic { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); margin-inline-end: .45rem; vertical-align: 1px; }
/* היסטוריה דלילה: הבדיקה במצב "עדיין אין מספיק נתונים" */
.verdict-badge.pending { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }

/* --- סרגל קטגוריות במובייל: מקצה לקצה, נגיעה נוחה, מצב פעיל רך --- */
@media (max-width: 640px) {
  .cat-chips, .cat-chips[data-list-filter] {
    margin-inline: -1rem; width: calc(100% + 2rem); max-width: none;
    padding: .45rem 1rem; gap: 5px;
    border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
    scroll-padding-inline: 1rem;
  }
  /* מטרת נגיעה 48px, ורווח 8px בין אריחים - קשה ללחוץ על השכן בטעות */
  .cat-chip, .cat-chips[data-list-filter] .cat-chip { min-height: 3rem; padding: .5rem .9rem; gap: .5rem; }
  /* פעיל: רקע מנטה רך, אייקון בצבע המותג, שם כהה מודגש */
  .cat-chip.active { background: #E4F5F0; color: var(--ink); }
  .cat-chip.active .cat-icon { color: var(--accent-deep); }
}

/* --- טוסט: משוב קצר בתחתית המסך --- */
.toast {
  position: fixed; left: 50%; bottom: calc(1.1rem + env(safe-area-inset-bottom)); z-index: 80;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: .6rem 1.05rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(16, 27, 34, .28);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--accent-bright); font-weight: 700; margin-inline-start: .35rem; }
body.has-action-bar .toast { bottom: calc(5.6rem + env(safe-area-inset-bottom)); }   /* מעל פס הרכישה */
@media (min-width: 720px) { body.has-action-bar .toast { bottom: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
/* תגובת לחיצה על כרטיס במגע */
@media (hover: none) { .pcard:active { transform: scale(.985); transition: transform .08s ease; } }
/* --- בדיקת מחיר מכל עמוד: אייקון בהדר, מובייל בלבד --- */
.site-nav .nav-search { display: none; }   /* ספציפיות מעל .site-nav a */
@media (max-width: 560px) {
  .site-nav .nav-search {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.95rem; height: 1.95rem; min-height: 0; padding: 0; border-radius: 50%; flex: 0 0 auto;
    background: var(--surface); color: var(--accent-deep); margin-inline-start: .05rem;
  }
  .site-nav .nav-search svg { width: 1rem; height: 1rem; }
  .site-nav a { padding-inline: .36rem; }
  .logo { font-size: 1rem; }
}
@media (max-width: 350px) { .site-nav .nav-search { display: none; } }   /* מסכים זעירים: אין מקום */

/* --- מובייל: המסך הראשון של עמוד המוצר - שם, מחיר והבדיקה לפני התמונה ---
   display:contents מפרק את שתי העמודות לילדיהן, ו-order מסדר מחדש;
   הדסקטופ (שתי עמודות) לא נוגע בזה */
@media (max-width: 859px) {
  .product-layout { display: flex; flex-direction: column; gap: 0; }   /* הרווח של רשת הדסקטופ לא מתאים לפריטים בודדים */
  .product-layout > .p-gallery, .product-layout > .p-info { display: contents; }
  .product-layout .p-name { margin-bottom: .35rem; }
  .product-layout .ali-rating, .product-layout .price-date { margin: .2rem 0 0; }
  .product-layout .p-name { order: 1; }
  .product-layout .ali-rating { order: 2; }
  .product-layout .price-date { order: 3; }
  .product-layout .price-hero { order: 4; }
  .product-layout .verdict-badge { order: 5; }
  .product-layout .p-img-main { order: 6; margin-top: 1rem; }
  .product-layout .p-thumbs { order: 7; }
  .product-layout .p-video-note { order: 8; }
  .product-layout .p-img-note { order: 9; }
  .product-layout .stats { order: 10; }
  .product-layout .p-meta { order: 11; }
  .product-layout .action-bar { order: 12; }
  .product-layout .cta-note { order: 13; }
  /* תמונה קטנה ורחבה - המסך הראשון נשאר להחלטה */
  .p-img-main { aspect-ratio: 16 / 9; max-height: 210px; }
  .p-img-main .p-emoji { font-size: 5rem; }
  .p-thumbs { gap: .5rem; }
  .p-thumb { font-size: 1.5rem; }
}

/* --- הדר במובייל: גלולת העמוד הפעיל נמוכה יותר, האייקון ממורכז לגובה הקישורים --- */
@media (max-width: 560px) {
  .site-nav { align-items: center; }
  .site-nav a { min-height: 2.2rem; padding-block: .2rem; }
  .site-nav .nav-search { align-self: center; }
}

/* --- הדר במובייל: גלולת העמודים רחבה יותר (ריווח לרוחב), עם קיזוז כדי להישאר בשורה אחת --- */
@media (max-width: 560px) {
  .header-inner { padding: .55rem .5rem; gap: .3rem; }
  .logo { font-size: .95rem; }
  .site-nav { gap: 0; }
  .site-nav a { font-size: .86rem; padding-inline: .6rem; }
  .site-nav .nav-search { width: 1.8rem; height: 1.8rem; }
}

/* --- מובייל: התמונה הראשית גדולה ובולטת, התמונות הקטנות מוקטנות בהתאם --- */
@media (max-width: 859px) {
  .p-img-main { aspect-ratio: 4 / 3; max-height: 290px; }
  .p-img-main .p-emoji { font-size: 6.6rem; }
  .p-thumbs { display: flex; justify-content: center; gap: .45rem; margin-top: .6rem; }
  .p-thumb { width: 3.3rem; height: 3.3rem; flex: 0 0 auto; font-size: 1.3rem; }
}
/* --- הדר במובייל: הגלולה של העמודים רחבה יותר, והשאר מתכווץ כדי שהשורה תחזיק תג דו-ספרתי --- */
@media (max-width: 560px) {
  .header-inner { padding: .55rem .25rem; gap: .25rem; }
  .logo { font-size: .82rem; }
  .site-nav a { padding-inline: .75rem; font-size: .82rem; }   /* פיצוי לעיגול החיפוש הגדול - השורה חייבת להחזיק תג דו-ספרתי ב-375px */
  .site-nav .nav-search { width: 2rem; height: 2rem; margin-inline-start: .3rem; }   /* עיגול גדול יותר, אוויר מ"המעקבים שלי" */
  .site-nav .nav-search svg { width: 1.1rem; height: 1.1rem; }
  .watch-count { margin-inline-start: .1rem; }
}

/* --- שכבת חיפוש מההדר (מובייל): התיבה החכמה נפתחת מעל העמוד הנוכחי --- */
.search-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16,27,34,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: modal-bd-in .18s ease-out;
}
.so-panel {
  background: var(--card); border-radius: 0 0 var(--radius) var(--radius);
  padding: .7rem 1rem 1rem; box-shadow: 0 18px 48px rgba(16,27,34,.28);
  max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  animation: so-in .22s ease-out;
}
@keyframes so-in { from { transform: translateY(-16px); opacity: 0; } }
.so-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.so-title { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.so-close {
  background: var(--surface); border: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
}
.so-close svg { width: 1.05rem; height: 1.05rem; }
.so-panel .paste-box { margin: 0; }
.so-panel .paste-hint { margin: .5rem 0 0; text-align: right; }
.so-results { margin-top: .7rem; display: flex; flex-direction: column; gap: .4rem; }
.so-item {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); background: var(--card);
}
.so-item:active { background: #E4F5F0; }
.so-emoji { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
.so-name { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; line-height: 1.3; }
.so-price { font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.so-item .delta { flex: 0 0 auto; }
.so-more { color: var(--muted); font-size: .82rem; margin: .1rem 0 0; }
body.so-open { overflow: hidden; }