/* =====================================================================
   DvirTech — עיצוב דף המוצרים (products.html)
   =====================================================================
   קובץ נפרד מ-style.css בכוונה: כל מה שנוגע לדף החנות והסינון יושב כאן,
   כך שאפשר לעצב אותו מחדש בלי לגעת בשאר האתר. משתמש במשתני הצבע
   הקיימים (--ink, --ink-soft וכו') עם ערכי גיבוי, כדי שיישב טוב גם אם
   style.css ישתנה.
===================================================================== */

.shop-wrap { padding-top: 32px; padding-bottom: 60px; }
.shop-title { font-size: 26px; margin: 0 0 6px; }
.shop-subtitle { color: var(--ink-soft, #64748b); margin: 0 0 18px; max-width: 720px; }

/* ---------- תפריט "מוצרים" בהדר ---------- */
.nav-drop { position: relative; display: inline-block; }
.nav-drop-btn {
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: 0; letter-spacing: inherit;
}
.nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 10px); inset-inline-start: 0;
  min-width: 200px; background: #fff; border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.14);
  padding: 6px; z-index: 60;
}
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu button {
  display: block; width: 100%; text-align: start; background: none; border: 0;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font: inherit;
  color: var(--ink, #0f172a); white-space: nowrap;
}
.nav-drop-menu button:hover { background: #f1f5f9; }

/* ---------- רצועת הקטגוריות ---------- */
.cat-strip {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px;
  margin-bottom: 18px; scrollbar-width: thin;
}
.cat-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(15,23,42,.12); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--ink, #0f172a);
  transition: background .15s, border-color .15s;
}
.cat-pill:hover { border-color: rgba(15,23,42,.28); }
.cat-pill.active { background: var(--ink, #0f172a); color: #fff; border-color: transparent; }
.cat-pill-n {
  font-size: 11px; font-weight: 700; opacity: .6;
  background: rgba(15,23,42,.08); border-radius: 999px; padding: 1px 7px;
}
.cat-pill.active .cat-pill-n { background: rgba(255,255,255,.2); opacity: .9; }

/* ---------- פריסה: סרגל סינון + רשת מוצרים ---------- */
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }

.filters {
  position: sticky; top: 20px; background: #fff; border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08); padding: 16px; max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filters-head h2 { font-size: 16px; margin: 0; }
.filters-close, .filters-apply, .filters-toggle { display: none; }

.filter-search {
  width: 100%; padding: 9px 12px; border-radius: 9px; font: inherit;
  border: 1px solid rgba(15,23,42,.14); margin-bottom: 14px;
}

.filter-group { border-top: 1px solid rgba(15,23,42,.07); }
.filter-group:first-child { border-top: 0; }
.filter-group-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; cursor: pointer; padding: 12px 2px;
  font: inherit; font-weight: 700; font-size: 14px; color: var(--ink, #0f172a);
}
.filter-group-head .chev { transition: transform .18s; opacity: .5; }
.filter-group.open .filter-group-head .chev { transform: rotate(180deg); }
.filter-group-body { display: none; padding-bottom: 10px; }
.filter-group.open .filter-group-body { display: block; }

.filter-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 2px;
  cursor: pointer; font-size: 14px; border-radius: 7px;
}
.filter-row:hover { background: #f8fafc; }
.filter-row input { accent-color: var(--ink, #0f172a); cursor: pointer; }
.filter-row-label { flex: 1; }
/* ערך שאין לו תוצאות תחת הסינון הנוכחי — עדיין לחיץ, רק מעומעם */
.filter-row.dim { opacity: .42; }
.filter-row-count { font-size: 12px; color: var(--ink-soft, #64748b); }
.no-filters { font-size: 14px; color: var(--ink-soft, #64748b); }

/* ---------- סינון לפי טווח מחירים ----------
   כל הבלוק LTR גם באתר RTL: זול משמאל, יקר מימין — ככה סרגלי מחיר
   נראים בכל מקום, והמספרים ממילא נקראים משמאל לימין. */
.price-group .filter-group-body { direction: ltr; padding: 2px 4px 14px; }
.price-slider { position: relative; height: 26px; }
.price-track, .price-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 4px; pointer-events: none;
}
.price-track { left: 0; right: 0; background: rgba(15,23,42,.12); }
.price-fill { background: var(--grad, linear-gradient(100deg,#2563EB,#4FD9C7)); }

/* שני ה-input שקופים ומונחים זה על זה. בלי pointer-events:none הסקאלה
   העליונה הייתה בולעת כל לחיצה והידית התחתונה לא הייתה ניתנת לתפיסה. */
.price-input {
  position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: none; pointer-events: none;
}
.price-input:focus { outline: none; }
.price-input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue, #2563EB);
  box-shadow: 0 1px 4px rgba(15,23,42,.25);
}
.price-input::-webkit-slider-thumb:active { cursor: grabbing; }
.price-input::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue, #2563EB);
  box-shadow: 0 1px 4px rgba(15,23,42,.25);
}
.price-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(37,99,235,.25); }
.price-input:focus-visible::-moz-range-thumb    { box-shadow: 0 0 0 4px rgba(37,99,235,.25); }
/* סדר הערימה נקבע ב-JS (priceStack_): כששתי הידיות יושבות בדיוק אחת
   על השנייה, זו שיש לה לאן לזוז חייבת להיות למעלה — אחרת נתקעים. */
#priceMax { z-index: 4; }
#priceMin { z-index: 3; }

/* התיבות להקלדה ישירה, אחת מתחת לכל ידית */
.price-fields { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.price-field { flex: 1; min-width: 0; display: block; cursor: text; }
.price-field-label {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-soft, #5b6b82);
}
.price-field-box {
  display: flex; align-items: center; gap: 3px;
  border: 1px solid rgba(15,23,42,.14); border-radius: 8px;
  background: #fff; padding: 0 8px; height: 34px;
  transition: border-color .15s, box-shadow .15s;
}
.price-field-box:focus-within {
  border-color: var(--blue, #2563EB); box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.price-field-cur { font-size: 12px; color: var(--ink-soft, #5b6b82); }
.price-field-input {
  width: 100%; min-width: 0; border: 0; background: none; padding: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink, #0f172a);
}
.price-field-input:focus { outline: none; }
/* החצים של number צרים ומכוערים בתיבה בגודל הזה, והגרירה ממילא
   ממלאת את אותו תפקיד */
.price-field-input::-webkit-outer-spin-button,
.price-field-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-field-input { -moz-appearance: textfield; appearance: textfield; }
.price-fields-sep { padding-bottom: 9px; color: var(--ink-soft, #5b6b82); }

/* ---------- סרגל כלים עליון ---------- */
.shop-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.result-count { font-size: 14px; color: var(--ink-soft, #64748b); font-weight: 600; }
.sort-wrap { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sort-wrap select {
  padding: 7px 10px; border-radius: 8px; font: inherit;
  border: 1px solid rgba(15,23,42,.14); background: #fff; cursor: pointer;
}

/* ---------- צ'יפים של סינונים פעילים ---------- */
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-chips:empty { margin-bottom: 0; }

/* .img-note מוגדר ב-style.css — הוא משמש גם בדף הבית, שטוען רק אותו. */
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3;
}
.chip:hover { background: #e0e7ff; }
.chip-x { opacity: .6; font-size: 11px; }
.chip-clear { background: none; border-color: rgba(15,23,42,.16); color: var(--ink-soft, #64748b); }

/* ---------- רשת המוצרים ---------- */
.product-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
/* הכרטיס הוא <a> לדף המוצר (ראה renderGrid ב-products.js), ולכן צריך
   לאפס את עיצוב הקישור ולהחזיר לטקסט את הצבעים של הכרטיס. */
.p-card {
  display: flex; flex-direction: column; gap: 7px; padding: 14px;
  background: #fff; border: 1px solid var(--line, #e2eaf2); border-radius: var(--radius, 16px);
  transition: box-shadow .18s, transform .18s, border-color .18s;
  text-decoration: none; color: inherit;
}
.p-card:hover {
  box-shadow: 0 10px 28px rgba(14,42,71,.1); transform: translateY(-3px);
  border-color: #c9def8;
}
/* אזור התמונה. אם למוצר יש תמונה אמיתית היא מוצגת contain כדי לא
   להיחתך; אחרת נכנס איור הקטגוריה מ-sprite.js.

   ⚠️ ‎contain ולא ‎cover — וזה לא עניין של טעם. תמונות הספק מגיעות
   כ-600×500 (‎/cache/w_600,h_500,mode_pad/‎) והתיבה כאן היא 132px בגובה
   ויחס אחר לגמרי; ‎cover היה ממלא את התיבה ומוריד את הקצוות של המוצר,
   כלומר מארז בלי חלק עליון וכרטיס מסך בלי מאווררים.
   ⚠️ הריפוד הוא מה שקובע כמה "קטנה" התמונה בתוך המסגרת: עם 14px
   התמונה כבר לא נוגעת בקצה העליון והתחתון, ובמבט מהיר על הרשת זה
   ההבדל בין "תמונה בתוך מסגרת" ל"תמונה שנחתכה במסגרת". הרקע שנחשף
   מסביב הוא בכוונה הגרדיאנט של התיבה עצמה ולא לבן — כך שוליים
   נקראים כמרווח מעוצב ולא כשטח ריק. */
.p-art {
  height: 132px; border-radius: 12px; margin-bottom: 4px;
  background: linear-gradient(155deg, #f3f8ff, #effbf8);
  display: grid; place-items: center; overflow: hidden;
}
/* 🔴 **הבאג שחתך את כל התמונות באתר — אל תסירו את min-height.**
   פריט בתוך grid/flex מקבל `min-height:auto` כברירת מחדל, ו-auto פירושו
   "לא קטן מגודל התוכן". לתמונה 600×500 ברוחב 251 גודל התוכן הוא 209px
   גובה — כלומר `min-height` **דרס את `height:100%`** (132px), האלמנט
   יצא 214px, והמסגרת עם `overflow:hidden` חתכה ממנו 82px. זה 38%
   מהתמונה, בתחתית, בכל כרטיס באתר.

   ⚠️ `object-fit:contain` **אינו** מגן מפני זה: הוא קובע איך הביטמאפ
   יושב בתוך תיבת האלמנט, ולא מונע מתיבת האלמנט לגלוש מההורה. לכן
   הבאג נראה כמו "תמונה חתוכה" למרות ש-contain מוגדר נכון.

   ⚠️ זה גם מסביר למה זה "חוזר" אחרי סנכרון: כל עוד התמונות היו לוגו
   קטן (w_100) גודל התוכן היה קטן מהמסגרת והבאג לא הופיע. ברגע
   שהתמונות הפכו ל-600×500 אמיתיות — הוא נחשף בכל הקטלוג בבת אחת. */
.p-art img {
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  object-fit: contain; padding: 14px;
}
.p-art svg { width: 76px; height: 76px; }
.p-brand {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft, #5f7590);
}
/* מוצג רק בתצוגת "הכל" (products.js), כדי לדעת באיזו קטגוריה כל
   פריט נמצא כשמסתכלים על הקטלוג כולו מעורבב יחד. */
.p-cat-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  color: var(--blue, #1b6fe0); background: var(--blue-soft, #e9f2fe);
  border-radius: 999px; padding: 2px 9px; margin-bottom: 2px;
}
.p-name { font-size: 14.5px; margin: 0; line-height: 1.35; }
.p-spec { font-size: 13px; color: var(--ink-soft, #5f7590); margin: 0; flex: 1; line-height: 1.5; }
/* ---------- שורת התחתית של הכרטיס: מחיר מימין, כפתור עגלה משמאל ----------
   flex בכיוון הדף: ב-RTL המחיר (הילד הראשון) נוחת מימין והכפתור העגול
   משמאל, ובאנגלית הכול מתהפך לבד — בלי כללי כיוון מיוחדים.
   align-items:flex-end — הכפתור מתיישר לתחתית גם כשיש מחיר-מבצע כפול. */
.p-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}
/* המחיר כעמודה: "מחיר קודם" קטן ומחוק מעל, המחיר בפועל גדול מתחתיו.
   Rubik + משקל 800 — אותה טיפוגרפיה של מחירים בדף המוצר ובעגלה. */
.p-price {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 0; font-family: 'Rubik', sans-serif; line-height: 1.15;
}
.p-price-now {
  font-size: 20px; font-weight: 800; color: var(--blue, #1b6fe0);
  letter-spacing: -.01em; white-space: nowrap;
}
.p-price-cur { font-size: 14px; font-weight: 700; }
/* במבצע המחיר בפועל מאדים — אותו אדום של תג ‎-X%‎, כך שהתג והמחיר
   נקראים כזוג. הצבע מוחל רק כשיש p-price-was לידו, אחרת אדום לבד
   נראה כמו אזהרה. */
.p-price--sale .p-price-now { color: #E4322B; }

/* כפתור העגלה העגול — אותו אייקון קו כמו ‎#ui-cart שבהדר, עם ‎+‎ בתוך
   הסל. הסטרוק מוגדר כאן ולא דרך ‎.ui-ic כי ה-SVG כולל path נוסף (ה-+)
   שחייב לרשת את אותם ערכים בדיוק. */
.p-cart-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer; border: none;
  color: #fff; background: linear-gradient(135deg, #3E8BEF, var(--blue, #1b6fe0));
  box-shadow: 0 4px 12px rgba(27,111,224,.30);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.p-cart-btn svg {
  width: 21px; height: 21px; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.p-cart-btn:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 7px 16px rgba(27,111,224,.40); }
.p-cart-btn:active { transform: scale(.94); box-shadow: 0 3px 8px rgba(27,111,224,.30); }
.p-cart-btn:focus-visible { outline: 3px solid rgba(27,111,224,.40); outline-offset: 2px; }
/* מצב "לבדיקת זמינות" — ירוק וואטסאפ. ⚠️ ‎#ui-wa מצויר במילוי ולא בקו
   (ראו ההערה ב-style.css ליד ‎.thx-wa-ic), ולכן היפוך fill/stroke. */
.p-cart-btn--wa { background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 4px 12px rgba(18,140,126,.32); }
.p-cart-btn--wa:hover { box-shadow: 0 7px 16px rgba(18,140,126,.42); }
.p-cart-btn--wa svg { fill: currentColor; stroke: none; }
/* אזל — אפור, חסום, בלי צל ובלי אנימציות ריחוף */
.p-cart-btn[disabled] {
  background: #E7EDF4; color: #8A9AAD; box-shadow: none; cursor: not-allowed;
}
.p-cart-btn[disabled]:hover { transform: none; filter: none; box-shadow: none; }

/* =====================================================================
   שלד טעינה (skeleton)
   =====================================================================
   ⚠️ למה זה קיים: הביקור הראשון באתר מחכה לתשובת getCatalog, ובזמן הזה
   ‎#productGrid‎ היה **ריק לגמרי** — כותרת, סרגל סינון ריק, ושטח לבן.
   זה לא נקרא כ"טוען", זה נקרא כ"האתר שבור", והמשתמש עוזב לפני שהנתונים
   בכלל הגיעו. השלד תופס בדיוק את המקום של הרשת האמיתית, כך שכשהמוצרים
   נוחתים שום דבר לא קופץ (אין layout shift).

   ⚠️ הכרטיסים כאן הם `div` ולא `a` בכוונה — אין לאן ללחוץ עדיין,
   ו-`aria-hidden` מוציא את כולם מקורא המסך. ההודעה הקולית האמיתית
   יושבת ב-‎#resultCount‎ עם aria-live. */
.p-card--skel {
  display: flex; flex-direction: column; gap: 7px; padding: 14px;
  background: #fff; border: 1px solid var(--line, #e2eaf2);
  border-radius: var(--radius, 16px); pointer-events: none;
}
.p-card--skel .sk-art {
  height: 132px; border-radius: 12px; margin-bottom: 4px;
  background: linear-gradient(155deg, #f3f8ff, #effbf8);
}
.p-card--skel .sk-line { height: 11px; border-radius: 6px; background: #EDF2F8; }
.p-card--skel .sk-line.sk-sm    { width: 38%; height: 9px; }
.p-card--skel .sk-line.sk-lg    { width: 88%; height: 13px; margin-top: 2px; }
.p-card--skel .sk-line.sk-md    { width: 66%; }
.p-card--skel .sk-line.sk-price { width: 46%; height: 17px; background: #E4EDF9; }
/* מדמה את ‎.p-foot‎ האמיתי: פס מחיר מימין ועיגול-עגלה משמאל, כדי
   שהחלפת השלד בכרטיסים לא תזיז שום דבר. */
.p-card--skel .sk-foot { display: flex; align-items: flex-end;
  justify-content: space-between; gap: 10px; margin-top: 8px; }
.p-card--skel .sk-cart { flex: none; width: 44px; height: 44px;
  border-radius: 50%; background: #EDF2F8; }

/* הבהוב עדין — מסמן "בעבודה" בלי למשוך את העין מהתוכן שנוחת.
   ⚠️ מכובה למי שביקש פחות תנועה (prefers-reduced-motion); השלד עצמו
   נשאר, רק בלי האנימציה. */
@keyframes dvtSkelPulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.p-card--skel .sk-art,
.p-card--skel .sk-line,
.p-card--skel .sk-cart { animation: dvtSkelPulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .p-card--skel .sk-art,
  .p-card--skel .sk-line,
  .p-card--skel .sk-cart { animation: none; }
}

.empty-state {
  padding: 40px 20px; text-align: center; color: var(--ink-soft, #64748b);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* ---------- עימוד ----------
   בלי כיוון מפורש: הרשימה יורשת את כיוון הדף, כך שב-RTL "הקודם" יושב
   מימין ובאנגלית משמאל — בלי לגעת ב-HTML (ראו renderPager).
   :empty מבטל גם את המרווח, אחרת קטגוריה עם עמוד אחד מקבלת 28px ריקים. */
.pager {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; margin-top: 28px;
}
.pager:empty { margin-top: 0; }
.pager-btn {
  min-width: 38px; height: 38px; padding: 0 10px; cursor: pointer;
  border: 1px solid rgba(15,23,42,.12); border-radius: 9px; background: #fff;
  font: inherit; font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--ink, #0f172a); transition: background .15s, border-color .15s;
}
.pager-btn:hover:not(:disabled):not(.active) { background: #f8fafc; border-color: rgba(15,23,42,.28); }
.pager-btn.active {
  background: var(--ink, #0f172a); color: #fff; border-color: transparent; cursor: default;
}
/* חץ בקצה הרשימה נשאר במקומו ורק מעומעם — כפתור שנעלם מזיז את כל
   שורת המספרים בכל מעבר עמוד. */
.pager-btn:disabled { opacity: .35; cursor: default; }
.pager-gap { padding: 0 2px; color: var(--ink-soft, #64748b); }

/* ---------- מובייל: הסינון הופך למגירה ---------- */
@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters-toggle { display: inline-block; }
  .filters {
    display: none; position: fixed; inset: auto 0 0 0; top: 0;
    z-index: 90; border-radius: 0; max-height: 100vh; padding: 20px;
  }
  .filters.show { display: block; }
  .filters-close { display: block; background: none; border: 0; font-size: 20px; cursor: pointer; }
  .filters-apply { display: block; width: 100%; margin-top: 18px; position: sticky; bottom: 0; }
  .sort-wrap { margin-inline-start: 0; width: 100%; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  /* ידית של 18px היא יעד קטן מדי לאצבע — במגע היא גדלה */
  .price-slider { height: 32px; }
  .price-input { height: 32px; }
  .price-input::-webkit-slider-thumb { width: 24px; height: 24px; }
  .price-input::-moz-range-thumb    { width: 24px; height: 24px; }
  /* יעד מגע נשאר 34px ומעלה גם כשהמספרים מתכווצים */
  .pager-btn { min-width: 34px; height: 34px; padding: 0 8px; font-size: 13px; }
}

/* =====================================================================
   דף מוצר (product.html)
   ===================================================================== */
.pd-wrap { padding-top: 22px; padding-bottom: 60px; }

/* פירורי לחם */
.pd-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-soft, #5f7590); margin-bottom: 20px; }
.pd-crumbs a { color: var(--ink-soft, #5f7590); text-decoration: none; }
.pd-crumbs a:hover { color: var(--blue, #1b6fe0); text-decoration: underline; }
.pd-crumb-sep { opacity: .45; }
.pd-crumb-cur { color: var(--ink, #0e2a47); font-weight: 600; }

/* גוף המוצר: תמונה + פרטים */
.pd-main { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 860px) { .pd-main { grid-template-columns: 1fr 1fr; gap: 40px; } }

.pd-media { position: sticky; top: 90px; }

/* ---------- זכוכית מגדלת ----------
   🔴 **עיגול שנע עם הסמן**, לא פאנל בצד. הגרסה הקודמת הציגה ריבוע
   קבוע ליד התמונה, וזה נקרא כמו תצוגה נפרדת ולא כמו הגדלה.

   ⚠️ `pointer-events:none` הוא קריטי ולא קישוט: העדשה יושבת מתחת
   לסמן, ובלעדיו היא תופסת את ה-mousemove, ה-mouseleave יורה מיד,
   והעדשה מהבהבת ונעלמת.
   ⚠️ `.pd-art` חייב `position:relative` — העדשה ממוקמת יחסית אליו. */
.pd-art-frame{position:relative}
.pd-art-zoomable{cursor:crosshair}
.pd-zoom-lens{
  position:absolute; width:190px; height:190px; border-radius:50%;
  border:3px solid #fff; background-repeat:no-repeat; background-color:#fff;
  box-shadow:0 6px 26px rgba(14,42,71,.28), 0 0 0 1px rgba(14,42,71,.12);
  opacity:0; visibility:hidden; transition:opacity .12s;
  pointer-events:none; z-index:30;
}
.pd-zoom-lens.on{opacity:1; visibility:visible}
/* ⚠️ במגע העדשה מוסרת מה-DOM ב-JS; זו רשת ביטחון בלבד. */
@media (hover: none), (pointer: coarse){ .pd-zoom-lens{display:none} }

/* ---------- שירותי DvirTech ---------- */
.pd-services .pd-svc-lead{margin:0 0 12px;font-size:13.5px;color:var(--ink-soft,#6B7A8D);line-height:1.6}
.pd-svc{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:8px;
  border:1px solid var(--line,#E3EAF3);border-radius:13px;background:#fff;
  text-decoration:none;color:inherit;transition:.15s}
.pd-svc:hover{border-color:#9FC6F5;background:#F7FAFF}
.pd-svc .ui-ic{width:22px;height:22px;flex:none;color:var(--blue,#1B6FE0)}
.pd-svc-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pd-svc-txt b{font-size:14px;color:var(--navy-900,#0E2A47)}
.pd-svc-txt span{font-size:12.5px;color:var(--ink-soft,#6B7A8D);line-height:1.5}
.pd-svc-cta{flex:none;font-size:12.5px;font-weight:700;color:var(--blue,#1B6FE0);white-space:nowrap}
/* ⚠️ בנייד ה-CTA יורד לשורה נפרדת — אחרת הוא מועך את הטקסט */
@media (max-width:520px){
  .pd-svc{flex-wrap:wrap}
  .pd-svc-cta{width:100%;text-align:end}
}
.pd-media{position:sticky; overflow:visible}
@media (max-width: 859px) { .pd-media { position: static; } }
.pd-art {
  background: #fff; border: 1px solid var(--line, #e2eaf2); border-radius: var(--radius, 16px);
  aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--shadow-s, 0 2px 10px rgba(14,42,71,.05));
}
/* ⚠️ אותו כלל כמו ברשת: ‎contain, וריפוד שמרחיק את התמונה מהמסגרת.
   כאן התיבה גדולה (יחס 4:3) ולכן 28px, אחרת המוצר נראה דחוס לשוליים. */
/* אותו באג בדיוק כמו ב-.p-art — ראה ההסבר שם. */
.pd-art img {
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  object-fit: contain; padding: 28px;
}
.pd-art svg { width: 140px; height: 140px; }

.pd-cat-link { display: inline-block; font-size: 12.5px; font-weight: 700;
  color: var(--blue, #1b6fe0); background: var(--blue-soft, #e9f2fe);
  border-radius: 999px; padding: 4px 12px; text-decoration: none; margin-bottom: 12px; }
.pd-cat-link:hover { filter: brightness(.96); }
.pd-brand { font-size: 12px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft, #5f7590); margin-bottom: 4px; }
.pd-title { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; margin: 0 0 10px; }
.pd-sub { font-size: 15px; color: var(--ink-soft, #5f7590); margin: 0 0 20px; line-height: 1.6; }

.pd-price-box { border-top: 1px solid var(--line, #e2eaf2);
  border-bottom: 1px solid var(--line, #e2eaf2); padding: 16px 0; margin-bottom: 20px; }
.pd-price { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 30px; color: var(--blue, #1b6fe0); }
.pd-price-note { font-size: 12.5px; color: var(--ink-soft, #5f7590); margin-top: 4px; }

/* ---------- אחריות (עמודת warranty בגיליון) ----------
   טקסט חופשי כפי שהספק מנסח אותו. יושב בתוך תיבת המחיר כי שם הלקוח
   מחליט, אבל בטורקיז ובגוף רגיל ולא כתג צעקני — זו הרגעה, לא מבצע.
   אותו טורקיז של "במלאי", כי שניהם עונים על אותה שאלה: אפשר לסמוך.
   ⚠️ מוצג רק כשיש ערך — ראו pdWarrantyHtml ב-product.js. */
.pd-warranty{display:flex;align-items:flex-start;gap:8px;margin-top:10px;
  padding:8px 11px;border-radius:10px;background:rgba(18,131,108,.07);
  font-size:13px;font-weight:600;line-height:1.5;color:var(--teal-dark,#12836C)}
.pd-warranty .ui-ic{width:16px;height:16px;flex:none;margin-top:2px}

.pd-buy { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.pd-qty { display: inline-flex; align-items: center; gap: 4px; background: #fff;
  border: 1.5px solid var(--line, #e2eaf2); border-radius: var(--radius-sm, 11px); padding: 4px; }
.pd-qty button { width: 34px; height: 34px; border: none; background: none; cursor: pointer;
  font-size: 19px; font-weight: 700; color: var(--blue, #1b6fe0); border-radius: 8px; line-height: 1; }
.pd-qty button:hover { background: var(--blue-soft, #e9f2fe); }
.pd-qty span { min-width: 30px; text-align: center; font-weight: 700; font-size: 15px; }
.pd-buy .pd-add { width: auto; flex: 1; min-width: 190px; margin-top: 0; }

.pd-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pd-perks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft, #5f7590); }
.pd-perks .ui-ic { width: 18px; height: 18px; color: var(--blue, #1b6fe0); flex: none; }

/* תיאור + מפרט */
.pd-sections { margin-top: 44px; display: grid; gap: 30px; }
.pd-section h2 { font-size: 19px; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--line, #e2eaf2); }
.pd-desc { font-size: 15.5px; line-height: 1.8; color: var(--ink-soft, #5f7590); margin: 0; max-width: 75ch; }

.pd-spec { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pd-spec tr { border-bottom: 1px solid var(--line-soft, #edf2f8); }
.pd-spec tr:nth-child(odd) { background: var(--surface-2, #f7fafd); }
.pd-spec th { text-align: start; font-weight: 600; color: var(--ink-soft, #5f7590);
  padding: 11px 14px; width: 38%; vertical-align: top; }
.pd-spec td { padding: 11px 14px; color: var(--ink, #0e2a47); font-weight: 600; }

.pd-loading { display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 70px 0; color: var(--ink-soft, #5f7590); font-size: 14.5px; }
.pd-missing { text-align: center; padding: 70px 20px; }
.pd-missing h1 { font-size: 24px; margin: 0 0 10px; }
.pd-missing p { color: var(--ink-soft, #5f7590); margin: 0 0 20px; }

/* גילוי נאות מתחת לתמונת המוצר + סה"כ חי לפי כמות (product.html) */
.pd-img-note{margin:10px 2px 0;font-size:11.5px;line-height:1.5;color:var(--ink-soft,#6B7A8D);text-align:center}
.pd-img-note a{color:var(--blue,#1B6FE0);text-decoration:underline}

.pd-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line,#DCE6F2)}
.pd-total-k{font-size:12.5px;color:var(--ink-soft,#6B7A8D)}
.pd-total-k b{font-family:'Rubik',sans-serif;color:var(--ink,#16202C)}
.pd-total-v{font-family:'Rubik',sans-serif;font-weight:800;font-size:18px;color:var(--blue,#1B6FE0)}

/* תג מבצע + מחיר קודם על כרטיס בקטלוג (מופיע רק כשיש oldPrice בגיליון) */
.p-card{position:relative}
.p-sale-badge{position:absolute;inset-inline-start:10px;top:10px;z-index:3;
  background:#E4322B;color:#fff;font-family:'Rubik',sans-serif;font-weight:800;
  font-size:11.5px;padding:4px 9px;border-radius:999px;
  box-shadow:0 2px 8px rgba(228,50,43,.35)}
/* "מחיר קודם" — שורה קטנה ומחוקה *מעל* המחיר בפועל (ה-p-price הוא
   עמודה, ראו למעלה). ⚠️ line-through בלבד, בלי אדום: האדום שמור למחיר
   החדש ולתג האחוז. */
.p-price-was{font-size:12px;font-weight:600;
  color:#9AA8BA;text-decoration:line-through;white-space:nowrap}

/* ---------- אזל המלאי ----------
   ⚠️ הכרטיס מעומעם אבל *לא* מוסתר, והכותרת והמחיר נשארים בניגודיות
   מלאה: לקוח צריך להבין מה אזל, לא לנחש. הכפתור הוא היחיד שנחסם. */
.p-card--oos{opacity:.72}
.p-card--oos .p-art{filter:grayscale(1)}
.p-card--oos .p-name,
.p-card--oos .p-price{opacity:1}
.p-oos-badge{position:absolute;inset-inline-start:10px;top:10px;z-index:3;
  background:#5F7590;color:#fff;font-family:'Rubik',sans-serif;font-weight:700;
  font-size:11.5px;padding:4px 9px;border-radius:999px;
  box-shadow:0 2px 8px rgba(14,42,71,.25)}
/* מצבי אמצע (לקסיקון 18.08.2026): "זמינות מוגבלת" — כתום שמזרז בלי
   להבהיל; "לבדיקת זמינות" — כחול, מזמין פנייה (לא מצב שלילי). */
.p-low-badge{position:absolute;inset-inline-start:10px;top:10px;z-index:3;
  background:#E8890C;color:#fff;font-family:'Rubik',sans-serif;font-weight:800;
  font-size:11.5px;padding:4px 9px;border-radius:999px;
  box-shadow:0 2px 8px rgba(232,137,12,.35)}
.p-ask-badge{position:absolute;inset-inline-start:10px;top:10px;z-index:3;
  background:#1B6FE0;color:#fff;font-family:'Rubik',sans-serif;font-weight:700;
  font-size:11.5px;padding:4px 9px;border-radius:999px;
  box-shadow:0 2px 8px rgba(27,111,224,.30)}
.pd-add[disabled]{background:#E7EDF4;color:#8A9AAD;border-color:#E7EDF4;
  cursor:not-allowed;box-shadow:none}

/* קישור וואטסאפ בשורת "שאלה על המוצר?" */
.pd-wa{color:var(--teal-dark,#12836C);font-weight:700;text-decoration:underline;margin-inline-start:4px}
.pd-wa:hover{color:var(--blue,#1B6FE0)}

/* =====================================================================
   ממלא מקום לתמונת מוצר (.dvt-ph)
   =====================================================================
   ⚠️ למה זה קיים בכלל: עמודת image בגיליון מתמלאת בהדרגה מהסנכרון מול
   הספק, ולכן בכל רגע נתון חלק מהמוצרים בלי תמונה — וזה מצב קבוע, לא
   תקלה זמנית. ממלא המקום חייב להיראות כמו בחירה עיצובית ולא כמו כשל
   טעינה, אחרת קטלוג חצי-מצולם נראה שבור.

   שלושה כללים שמחזיקים את זה:
   1. אין טקסט "אין תמונה" ואין אייקון שבור — מה שמוצג הוא איור
      הקטגוריה ושם היצרן/הדגם, בדיוק כמו לוחית מותג על מדף.
   2. הוא ממלא את *אותה* תיבה שהתמונה הייתה ממלאת (inset:0), ולכן
      הרשת לא קופצת בין כרטיס מצולם לכרטיס בלי תמונה.
   3. רקע גרדיאנט מותג עדין ולא אפור מת — אפור קורא כ"חסר", ותכלת/טורקיז
      קורא כ"ריק בכוונה". ⚠️ זה בדיוק הגרדיאנט שכבר יושב על ‎.p-art
      ועל ‎.cat-art, ולא גוון חדש: כך התיבה נראית זהה בין כרטיס מצולם
      לכרטיס בלי תמונה, ורק התוכן שבתוכה משתנה.

   ⚠️ אותה מחלקה משמשת בדף המוצר, ברשת המוצרים וברצועות, וזה מקור אחד
   לעיצוב במקום שלוש גרסאות שנפרדות בזמן.
   ⚠️ index.html טוען רק את style.css ולא את הקובץ הזה, ולכן home.js
   מזריק עותק מצומצם של הכללים האלה בעצמו. שינוי כאן — לעדכן גם שם. */
.dvt-ph{
  --ph-fs: 11px; --ph-op: 1;
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:12px; text-align:center; overflow:hidden;
  background:linear-gradient(155deg,#F3F8FF,#EFFBF8);
}
/* נגיעת אור רכה בפינה העליונה — מה שמפריד "רקע מעוצב" מ"מלבן צבוע".
   מונח מתחת לתוכן ומחוץ לזרימה, כדי שלא יזיז את המרכוז. */
.dvt-ph::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 22% 0%, rgba(255,255,255,.85), transparent 62%);
}
.dvt-ph > *{position:relative}

/* ⚠️ אין כאן color: איורי ic-* ב-sprite.js הם איורים צבעוניים מלאים עם
   גרדיאנטים משלהם, ולא אייקוני קו על currentColor — צביעה מבחוץ פשוט
   לא הייתה עושה כלום. השליטה היחידה שיש עליהם היא העוצמה (--ph-op).
   ⚠️ המידה נכתבת בכל משטח בנפרד ובסלקטור של שתי מחלקות, כי הכללים
   הקיימים ‎.p-art svg / .pd-art svg / .deal-art svg ספציפיים יותר
   ממחלקה בודדת והיו דורסים כל מידה שנקבעת כאן. */
.dvt-ph-ic{flex:none; opacity:var(--ph-op)}

/* היצרן הוא העוגן הטיפוגרפי: קצר, אותיות גדולות ומרווחות — נקרא
   כלוחית מותג ולא כהודעת שגיאה. */
.dvt-ph-brand{
  font-family:'Rubik',sans-serif; font-weight:700;
  font-size:var(--ph-fs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue,#1B6FE0); opacity:.72; line-height:1.3;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* שם הדגם מוצג רק איפה שהוא לא חוזר על עצמו מיד מתחת לתיבה (דף המוצר).
   בכרטיס ברשת השם ממילא מודפס כשורה נפרדת, ולכן שם מוצג היצרן בלבד. */
.dvt-ph-name{
  font-size:13px; font-weight:700; line-height:1.5;
  color:var(--ink-soft,#6B7A8D); max-width:34ch;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* ⚠️ התמונה מונחת *מעל* ממלא המקום ולא במקומו. כך הוא מוצג כבר בזמן
   הטעינה (במיוחד עם loading="lazy"), וכתובת שבורה שנופלת ל-onerror
   מסירה רק את ה-img וחושפת אותו בחזרה — בלי ריבוע ריק ובלי אייקון
   שבור של הדפדפן. onload מסתיר אותו כשהתמונה באמת עלתה, כדי שרקע
   הגרדיאנט של התיבה יישאר גלוי מסביב לתמונה שמוצגת ב-contain. */
.dvt-art-on .dvt-ph{display:none}

/* =====================================================================
   דף מוצר — תמונה, מלאי ומחיר מבצע
   ===================================================================== */

.pd-art-frame{position:relative}
/* רקע לבן על התמונה עצמה: המסגרת בדף המוצר לבנה ממילא, וזה מבטיח
   שגם PNG שקוף לא יחשוף את האיור שמאחוריו אם onload לא הספיק לרוץ. */
.pd-art-frame img{position:relative;z-index:1;background:#fff}

/* ⚠️ בתיבה הגדולה האיור מוחלש בכוונה (--ph-op) ומתפקד כסימן מים.
   בגודל הזה איור צבעוני מלא של "כרטיס מסך כלשהו" מתחיל להיקרא כתמונת
   המוצר עצמו, וזה בדיוק מה שאסור — הלקוח צריך לדעת שהוא לא ראה את
   הפריט. בכרטיסים הקטנים ההפך נכון: שם האיור קטן, ברור שהוא אמבלמה,
   והחלשה שלו רק הייתה מרוקנת את הכרטיס. */
.pd-art .dvt-ph{--ph-fs:12px; --ph-op:.34; gap:14px; padding:24px}
.pd-art .dvt-ph-ic{width:118px; height:118px}

/* תיבת האיור בכרטיס ברשת ובכרטיס ברצועה — צריכות position:relative
   כדי שממלא המקום יוכל להימתח עליהן. ‎.deal-art מוגדר ב-style.css
   (משותף לדף הבית), ולכן כאן רק התוספת ולא הגדרה מחדש. */
.p-art{position:relative}
.p-art > img{position:relative;z-index:1}
.p-art .dvt-ph{--ph-fs:10.5px; gap:8px}
.p-art .dvt-ph-ic{width:62px; height:62px}

/* ⚠️ ‎.deal-art מגיע מ-style.css עם רקע אפרפר שטוח (--surface-2). כאן הוא
   מיושר לאותו גרדיאנט של שאר תיבות התמונה באתר, אחרת רצועת "מוצרים
   דומים" הייתה התיבה היחידה בדף עם רקע אחר. */
.deal-art{position:relative; background:linear-gradient(155deg,#F3F8FF,#EFFBF8)}
.deal-art > img{position:relative;z-index:1}
.deal-art .dvt-ph{--ph-fs:10px; gap:7px}
.deal-art .dvt-ph-ic{width:54px; height:54px}

/* ---------- מלאי ----------
   שורה קצרה מתחת למחיר. "נותרו X" מוצג רק במלאי נמוך — מספר גדול לא
   אומר ללקוח כלום ורק מסגיר את גודל המלאי. */
.pd-stock{display:flex;align-items:center;gap:8px;margin-top:8px;
  font-size:13px;font-weight:700}
.pd-stock::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.pd-stock--in{color:var(--teal-dark,#12836C)}
.pd-stock--in::before{background:var(--teal-dark,#12836C)}
.pd-stock--out{color:#B23B36}
.pd-stock--out::before{background:#B23B36}
.pd-stock--low{color:#C57108}
.pd-stock--low::before{background:#E8890C}
.pd-stock--ask{color:#1B6FE0}
.pd-stock--ask::before{background:#1B6FE0}
.pd-stock-left{font-weight:600;color:var(--ink-soft,#6B7A8D)}

/* ---------- מחיר ומבצע ---------- */
.pd-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pd-price-was{font-size:15px;font-weight:600;color:#9AA8BA;text-decoration:line-through}
.pd-save{background:#E4322B;color:#fff;font-family:'Rubik',sans-serif;font-weight:800;
  font-size:12px;padding:3px 9px;border-radius:999px}

/* ---------- הערה מתחת לטבלת המפרט ---------- */
.pd-spec-note{margin:12px 2px 0;font-size:12.5px;line-height:1.6;
  color:var(--ink-soft,#6B7A8D);max-width:75ch}

/* =====================================================================
   מעבר רספונסיבי — תוספות מובייל (products.html + product.html)
   =====================================================================
   חלק מהמעבר הרספונסיבי הכלל-אתרי (ראו ההסבר בסוף style.css). תוספות
   בלבד, בסוף הקובץ: מעל הרוחבים האלה שום דבר לא משתנה. */

/* ---------- טבלת המפרט וטקסטים ארוכים בלי שבירה (עד 860px) ----------
   ⚠️ ערכי מפרט מהספק כוללים לפעמים מחרוזת לטינית ארוכה בלי רווחים
   (מק"ט, קישור, שם דגם). מילה כזו לא נשברת לשורה, מרחיבה את תא הטבלה,
   והטבלה — שרוחבה נקבע מהתוכן — דוחפת את כל הדף לרוחב. ‎overflow-wrap
   שובר את המחרוזת בתוך התא, כך שהטבלה נשארת ברוחב העמוד בלי לגלול.
   אותו כלל לשם המוצר בכרטיס ובכותרת דף המוצר — RTL עם טוקנים לטיניים
   ארוכים נחתך באותה צורה. */
@media (max-width:860px){
  .pd-spec th,.pd-spec td{overflow-wrap:anywhere}
  .p-name,.pd-title{overflow-wrap:anywhere}
  /* ⚠️ 16px בשדות קלט במגירת הסינון — פונט קטן יותר גורם ל-iOS לבצע
     זום אוטומטי בפוקוס והמגירה "קופצת". */
  .filter-search,.price-field-input{font-size:16px}
}

/* ---------- רשת המוצרים בטלפון צר (עד 400px) ----------
   ⚠️ minmax(160px,1fr)‎ מפספס בדיוק ב-1px שני טורים ברוחב 375
   (335px פנויים מול 2×160+16=336), כך שאייפון/פיקסל רגילים קיבלו טור
   בודד עם כרטיסי ענק וגלילה אין-סופית. עם 150px נכנסים שני טורים —
   המראה המקובל של חנות בטלפון. במסכים רחבים מזה אין שינוי. */
@media (max-width:400px){
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  /* ⚠️ בשני טורים של ~150px נשארים בערך 135px לתוכן הכרטיס. מחיר בן
     5 ספרות ב-20px ‏+ עיגול 44px ‏+ רווח לא נכנסים בשורה — ולכן כאן
     (ורק כאן) המחיר יורד ל-17px והכפתור ל-38px. עדיין מעל יעד המגע
     המקובל בפועל, והחלופה — עטיפת הכפתור לשורה שנייה — נראית שבורה. */
  .p-foot{gap:8px}
  .p-price-now{font-size:17px}
  .p-price-cur{font-size:12.5px}
  .p-cart-btn{width:38px;height:38px}
  .p-cart-btn svg{width:19px;height:19px}
  .p-card--skel .sk-cart{width:38px;height:38px}
}


/* ==================== כפתור שיתוף בדף המוצר ====================
   יושב מתחת לאזור הקנייה. מכוון להיות משני לגמרי מול "הוסף לסל" —
   קו מתאר בלבד, בלי מילוי — כדי שלא יתחרה על תשומת הלב.
   התפריט נפתח אל תוך הדף (inset-inline-start:0) כדי שב-RTL וב-LTR
   הוא יישאר בתוך המסך. */
.pd-share{position:relative;margin-top:14px}

.pd-share-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-soft);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.pd-share-btn .ui-ic{width:17px;height:17px}
.pd-share-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.pd-share-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.pd-share-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:40;
  min-width:230px;padding:8px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  animation:pdShareIn .14s ease-out;
}
@keyframes pdShareIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pd-share-menu{animation:none}}

.pd-share-head{
  margin:2px 8px 7px;font-size:12px;font-weight:700;
  color:var(--ink-soft);letter-spacing:.02em;
}

.pd-share-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;border:0;border-radius:9px;
  background:none;color:var(--ink);
  font:inherit;font-size:14.5px;font-weight:500;text-align:start;
  text-decoration:none;cursor:pointer;transition:background .12s,color .12s;
}
.pd-share-item .ui-ic{width:19px;height:19px;color:var(--ink-soft);transition:color .12s}
.pd-share-item:hover{background:var(--surface-2);color:var(--blue)}
.pd-share-item:hover .ui-ic{color:var(--blue)}
.pd-share-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pd-share-item.is-ok{color:var(--teal-dark)}
.pd-share-item.is-ok .ui-ic{color:var(--teal-dark)}
.pd-share-item.is-bad{color:var(--red)}
.pd-share-item.is-bad .ui-ic{color:var(--red)}

/* בנייד התפריט נמתח לרוחב הזמין כדי שלא ייחתך בקצה המסך */
@media (max-width:520px){
  .pd-share-menu{inset-inline:0;min-width:0}
}


/* ==================== dvt-mobile-taps-products ====================
   ⚠️ ~80% מהתנועה מהטלפון. מדידה ב-375×812 מצאה שלושה יעדי מגע
   מתחת לסף ה-44×44 המקובל, ואחד מהם הוא **הפעולה המרכזית באתר**:

     .p-cart-btn   38×38  ← כפתור ההוספה לסל שעל כל כרטיס מוצר
     .pager-btn    34×34  ← ניווט בין עמודי התוצאות
     .chip         196×30 ← צ'יפ הסינון הפעיל

   כרטיס בנייד הוא 163px רוחב, כך ש-44px הם 27% ממנו — עדיין מרווח.
   הכל תחוּם ל-max-width:768px; הדסקטופ לא נוגע. */
@media (max-width:768px){
  .p-cart-btn{width:44px; height:44px}
  .pager-btn{min-width:44px; min-height:44px}
  /* הצ'יפ נשאר צר לרוחב אבל מקבל גובה אצבע */
  .chip{min-height:40px}

  /* ---- דף המוצר ----
     ⚠️ כפתורי הכמות היו 34×34. זה השלב שלפני "הוסף לסל", ומי
     שמפספס את ה-+ מוסיף פריט אחד במקום שניים או נוטש. */
  .pd-qty button{min-width:44px; min-height:44px}
  .pd-crumbs a,
  .pd-cat-link,
  .pd-wa,
  .pd-img-note a{display:inline-flex; align-items:center; min-height:44px}
  .pd-share-btn{min-height:44px}
}


/* מק"ט המוצר — משני לגמרי, אבל ניתן לבחירה והעתקה כדי
   שלקוח יוכל לצטט אותו בוואטסאפ. ה-span במספרים מונוספאס
   כדי שלא יובלבלו ספרות דומות. */
.pd-sku{
  margin-top:6px; font-size:12.5px; color:var(--ink-soft);
  letter-spacing:.01em;
}
.pd-sku span{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; color:var(--ink); user-select:all;
}

/* כפתור ההשוואה בדף המוצר — נוסף 25.08 יחד עם compare.html */
.pd-compare{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:10px; text-decoration:none;
  padding:9px 15px; font-size:13.5px;
}
.pd-compare .ui-ic{ width:17px; height:17px }