/* =====================================================================
DvirTech — מערכת העיצוב של האתר
=====================================================================
גרסת עיצוב בהירה, לפי המוקאפ של החנות. הגרסה הקודמת (הכהה) נשמרה
כ-style-OLD-backup.css.
מה השתנה ומה לא:
• כל שמות המחלקות נשמרו בדיוק. אף קובץ JS לא צריך להשתנות בגללי.
• ההדר הפך מנייבי כהה ללבן, עם חיפוש ואייקונים — כמו במוקאפ.
• הרקע הכהה נשאר רק במקומות שבהם הוא "מסך של מכשיר": הדמיית המחשב
בבונה, הבאנרים השיווקיים והפוטר.
• ⚠️ שינוי מודע: ה-headbar כבר לא נעול ל-direction:ltr. במוקאפ הלוגו
יושב מימין, כמקובל ב-RTL, ולכן ההדר עוקב אחרי כיוון המסמך: לוגו
מימין בעברית, משמאל באנגלית.
===================================================================== */
:root{
/* --- נייבי המותג. השמות navy-* נשמרו כי קוד קיים מסתמך עליהם --- */
--navy-950:#0B2C4D;
--navy-900:#12395F;
--navy-800:#1B4A76;
--bg:#F5F8FC;
--surface:#FFFFFF;
--surface-2:#F7FAFD;
--ink:#0E2A47;
--ink-soft:#5F7590;
--line:#E2EAF2;
--line-soft:#EDF2F8;
--blue:#1B6FE0;
--blue-dark:#0E4C97;
--blue-soft:#E9F2FE;
--teal:#2FC4B0;
--teal-dark:#0E9C8A;
--grad: linear-gradient(100deg, var(--blue) 0%, var(--teal) 100%);
--amber:#D9822B;
--amber-bg:#FFF6EA;
--red:#E0453F;
--red-bg:#FDEEEE;
--wa:#10A37F;
--wa-2:#0C8467;
--radius:16px;
--radius-sm:11px;
--shadow-s:0 2px 10px rgba(14,42,71,.05);
--shadow:0 8px 30px rgba(14,42,71,.08);
--shadow-lg:0 22px 56px rgba(14,42,71,.14);
}
*{box-sizing:border-box}
/* min-height + flex-column + footer{margin-top:auto} = "sticky footer".
בלי זה, בדף שהתוכן שלו קצר מגובה החלון (בולט במסך אנכי/portrait, אבל
קורה גם ב-thanks/terms) הפוטר נעצר איפה שהתוכן נגמר — באמצע המסך —
ומתחתיו נשאר שטח ריק בצבע הרקע. עכשיו הוא תמיד נדחף לתחתית. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Heebo',sans-serif;line-height:1.65;
min-height:100vh;display:flex;flex-direction:column}
/* פריט flex מקבל min-width:auto ולכן מסרב להתכווץ מתחת לרוחב התוכן
שלו. אפס מאפשר לרצועות הגלילה האופקיות (.rowscroll) להתכווץ כרגיל
במקום לדחוף את הדף לרוחב. */
body > *{min-width:0}
body > footer{margin-top:auto}
/* ריווח מהתוכן שמעל, בלי לשבור את ה-sticky footer: כשהתוכן קצר
margin-top:auto מנצח וממילא נוצר רווח גדול יותר; padding נוסף רק
כשהדף ארוך והפוטר צמוד לתוכן. */
body > footer.footer-top-gap{padding-top:44px}
h1,h2,h3,h4,.brand-font{font-family:'Rubik',sans-serif;color:var(--ink)}
/* width:100% נדרש כי .wrap הוא לפעמים פריט flex ישיר של body (ראו
ה-sticky footer למטה), ושם ה-margin:0 auto מבטל את ה-stretch — בלי
רוחב מפורש הוא נצמד ל-max-width שלו וגולש מהחלון. עם width:100%
הוא נשאר min(1200px, רוחב האב) בכל הקשר. */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
/* ⚠️ "תמונות להמחשה בלבד" — תנאי מפורש של הספק לשימוש בתמונות המוצר
שלו, ולא קישוט. מוגדר כאן ולא ב-products.css כי דף הבית טוען רק את
style.css. מכוון להיות קריא אך לא להתחרות במוצר: קטן, אפור, בשוליים.
:empty מסתיר אותו כשאין בדף אף תמונת מוצר אמיתית. */
.img-note{margin:0 2px 12px;font-size:11.5px;line-height:1.5;
color:var(--ink-soft,#6B7A8D)}
.img-note:empty{display:none;margin:0}
img{max-width:100%;display:block}
a{color:inherit}
/* איור מהספרייה (sprite.js). ברירת מחדל 1em כדי שאייקון שמישהו שכח
לתת לו מידה מפורשת לא ייפול לגודל ברירת המחדל של הדפדפן ל-SVG לא
ממודד (300×150) — זה קרה בפועל לכפתור הירו וניפח אותו לענק. כל
שימוש עם מידה משלו (למשל .trust-strip .ui-ic) פשוט דורס את זה. */
.ic{width:1em;height:1em;display:block;flex:none}
[class*="ui-"] use,.ui-ic{fill:none}
.ui-ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ---------- header ---------- */
header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.headbar{display:flex;align-items:center;gap:20px;padding:10px 0}
/* הלוגו: sprite.js מחליף את ה- המקורי (הדמיה על קיר משרד, לא
נכס גרפי נקי) בשרטוט וקטורי (#dvt-logo, viewBox 360×104). הגובה כאן
קובע את הגודל; הרוחב נגזר לבד מיחס הממדים של ה-viewBox. */
.brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;transition:opacity .15s}
.brand:hover{opacity:.82}
/* הלוגו האמיתי (575×420, ~1.37:1) הרבה יותר מרובע מהשרטוט הווקטורי
הזמני (3.46:1) שעליו כוילו המידות האלה קודם — לכן חוזרים ל-64px
שהיה גובה הלוגו המקורי בעיצוב האתר, לפני שהיה צריך לצמצם אותו כדי
להכיל את הבאנר הרחב של הווקטור. */
.brand-logo{height:64px;width:auto;display:block}
.footer-logo{height:40px;width:auto;display:block;margin:0 auto 12px}
.footer-grid .footer-logo{margin:0 0 12px}
nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
nav a,.nav-drop-btn{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;transition:.15s;position:relative;padding-bottom:2px}
nav a::after,.nav-drop-btn::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transition:transform .18s}
nav a:hover,.nav-drop-btn:hover{color:var(--blue)}
nav a:hover::after,.nav-drop-btn:hover::after{transform:scaleX(1)}
nav a.active{color:var(--blue);font-weight:700}
nav a.active::after{transform:scaleX(1)}
/* הדגשה עדינה ל"למה DvirTech?" — טקסט בגרדיאנט המותג, בלי גימיקים.
דרישת דביר: שיבלוט בתפריט אבל בלי לכער/להפוך את ההדר לצעקני. */
nav a.nav-accent{font-weight:700;background:var(--grad);
-webkit-background-clip:text;background-clip:text;color:transparent}
nav a.nav-accent:hover{filter:brightness(1.12)}
@media(max-width:1000px){nav{display:none}}
/* חיפוש + אייקוני פעולה בהדר (דף הבית) */
.head-search{flex:1;max-width:330px;position:relative;margin-inline-start:auto}
.head-search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 38px 10px 14px;
font-family:'Heebo',sans-serif;font-size:13.5px;background:var(--surface-2);color:var(--ink);transition:.15s}
.head-search input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(27,111,224,.12)}
.head-search .ui-ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-soft)}
/* ---------- תפריט תוצאות חיפוש נפתח (site-search.js) ---------- */
/* רחב יותר מהתיבה עצמה בכוונה — שם מוצר + מחיר לא מצטמצמים ל-330px */
.site-search-panel{
display:none;position:absolute;top:calc(100% + 8px);inset-inline-start:0;width:max(100%,380px);
background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
padding:6px;z-index:80;max-height:70vh;overflow-y:auto;
}
.site-search-panel.show{display:block}
.site-search-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.site-search-row:hover{background:var(--surface-2)}
.site-search-row .ssr-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
flex:1;min-width:0}
/* תמונת המוצר בשורת החיפוש. ⚠️ flex:none — בלי זה השם הארוך מועך
אותה לרוחב אפס והשורה נראית כאילו אין תמונה. */
.site-search-row .ssr-thumb{position:relative;flex:none;width:36px;height:36px;border-radius:9px;
background:var(--surface-2);overflow:hidden;display:grid;place-items:center}
.site-search-row .ssr-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
background:#fff}
.site-search-row .ssr-ph{display:grid;place-items:center;width:100%;height:100%}
.site-search-row .ssr-ph svg{width:18px;height:18px;color:var(--ink-soft);fill:none;stroke:currentColor;stroke-width:1.6}
/* התמונה עלתה — ממלא המקום מפנה מקום כדי שלא יציץ מבעד ל-PNG שקוף */
.site-search-row .ssr-thumb.on .ssr-ph{opacity:0}
.site-search-row .ssr-meta{display:flex;align-items:center;gap:8px;flex:none}
.site-search-row .ssr-cat{font-size:11px;color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:2px 8px}
.site-search-row .ssr-price{font-size:13px;font-weight:800;color:var(--blue);font-family:'Rubik',sans-serif;white-space:nowrap}
.site-search-all{display:block;text-align:center;margin-top:4px;padding:10px;border-radius:8px;
font-size:13px;font-weight:700;color:var(--blue);text-decoration:none;border-top:1px solid var(--line)}
.site-search-all:hover{background:var(--blue-soft)}
.site-search-empty{padding:16px 10px;text-align:center;font-size:13px;color:var(--ink-soft)}
.head-acts{display:flex;align-items:center;gap:6px;flex:none}
.head-ic{width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);
display:grid;place-items:center;position:relative;cursor:pointer;color:var(--ink);transition:.15s}
.head-ic:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.head-ic .ui-ic{width:19px;height:19px}
.head-ic-badge{position:absolute;top:-6px;inset-inline-end:-6px;background:var(--blue);color:#fff;font-size:10.5px;
font-weight:800;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.lang-switch{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:3px;flex:none;margin-inline-start:auto}
.head-search ~ .lang-switch,.head-acts ~ .lang-switch{margin-inline-start:0}
.lang-btn{border:none;background:none;color:var(--ink-soft);font-size:12px;font-weight:600;padding:6px 12px;border-radius:16px;cursor:pointer;transition:.15s;font-family:'Heebo',sans-serif}
.lang-btn.active{background:var(--grad);color:#fff}
.lang-btn:hover:not(.active){color:var(--blue)}
/* ---------- hero ---------- */
/* הירו הפך מרקע כהה לרקע לבן עם "גל" כחול. הטקסט שהיה לבן חייב היה
להפוך לכהה — זו הסיבה שהצבעים כאן מפורשים ולא יורשים. */
.hero{position:relative;background:#fff;overflow:hidden;padding:64px 0 50px;text-align:center}
.hero-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero h1{font-size:clamp(30px,4.4vw,48px);font-weight:800;margin:0 0 16px;color:var(--ink);position:relative;line-height:1.22;letter-spacing:-.01em}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--ink-soft);font-size:16.5px;max-width:620px;margin:0 auto;position:relative}
/* ירו דף הבית: התמונה היא הרקע של הסקשן כולו, מקצה לקצה, והטקסט
יושב מעליה. */
.hero-full{position:relative;overflow:hidden;padding:0;background:#F4F5FB}
.hero-full .hero-photo{
position:absolute;inset:0;z-index:0;
background-image:url("images/hero-products.jpg");
background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* הדהייה שמונעת את מראה "התמונה החתוכה שהודבקה": הצבע כאן נמדד בפועל
מקצוות הקובץ (#F4F5FB) והוא כמעט זהה לרקע האתר (--bg #F5F8FC), ולכן
המעבר בין התמונה לדף לא נראה כקו תפר. הדהייה חזקה למטה, שם התמונה
נפגשת עם פס היתרונות הלבן, וקלה מאוד למעלה מתחת להדר. */
.hero-full .hero-photo::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(180deg, rgba(244,245,251,.55) 0%, rgba(244,245,251,0) 18%,
rgba(245,248,252,0) 68%, var(--bg) 100%);
}
.hero-full .hero-in{
position:relative;z-index:1;
display:flex;align-items:center;
min-height:clamp(340px,34vw,470px);
/* פס היתרונות צף 26px מעל תחתית הירו (.trust-strip{margin-top:-26px}).
בלי השוליים האלה כפתור ה-CTA נכנס בדיוק מתחתיו במסכים גבוהים־צרים
(מסך אנכי) ונראה "בתוך" הפס. 56px = 26 של החפיפה + מרווח נשימה. */
padding-bottom:56px;
/* direction:ltr מקבע את הטקסט לצד השמאלי *הפיזי* בכל שפה — שם
התמונה ריקה (רק הגל), בעוד שהמוצרים יושבים בחציה הימני. אילו
היינו נשענים על flex-start בדף RTL, הטקסט היה נוחת ימינה בדיוק
על גבי המסך והמארז. הטקסט עצמו מוחזר ל-rtl בשורה הבאה. */
direction:ltr;
}
.hero-full .hero-copy{direction:rtl;max-width:430px}
.hero-copy h1{margin-bottom:16px}
/* ⚠️ `margin-inline:auto` ולא רק `text-align`. הפסקה צרה מהמכל
(32ch מול 430px), ובלי שוליים אוטומטיים הבלוק נצמד לקצה
ההתחלה — שב-RTL הוא ימין. הטקסט נראה מרוכז, הבלוק לא היה. */
.hero-copy .hero-lede{font-size:17.5px;color:var(--ink-soft);margin:0 auto 30px;max-width:32ch;line-height:1.65}
/* .btn ברירת המחדל היא width:100% (נכון לכפתורים בתוך כרטיס/סיידבר),
אבל כאן הכפתור יושב לצד טקסט וצריך רק לעטוף את התוכן שלו.
⚠️ הסלקטור מפורש כ-".hero-copy .hero-cta" (במקום ".hero-cta" בלבד)
כדי לנצח את ".btn{width:100%}" בקסקייד: לשני הסלקטורים אותה
ספציפיות (מחלקה בודדת), ו-.btn מוגדר בהמשך הקובץ. */
.hero-copy .hero-cta{width:auto;padding:13px 26px}
/* מתחת ל-820px אין מספיק רוחב גם לטקסט וגם למוצרים באותה שורה, ולכן
התמונה מוסטת ימינה (המוצרים נשארים בקדר) והטקסט מקבל שכבת קריאוּת
לבנה-שקופה מעליה במקום להתנגש בה. */
@media(max-width:820px){
.hero-full .hero-photo{background-position:72% center}
/* ⚠️ קודם הבד היה קלוש מדי בדיוק בפס האמצעי (.35→.25) — שם יושב
ה-lede האפור, ומאחוריו המסך הכחול הבוהק. התוצאה: הכיתוב כמעט לא
נקרא בנייד (דיווח של דביר עם צילום). מחזקים את הפס האמצעי כדי
שלטקסט יהיה בסיס קריא, בלי להסתיר את התמונה לגמרי. */
.hero-full .hero-photo::after{
background:
linear-gradient(180deg, rgba(244,245,251,.90) 0%, rgba(244,245,251,.64) 38%,
rgba(245,248,252,.42) 66%, var(--bg) 100%);
}
.hero-full .hero-in{min-height:400px}
.hero-full .hero-copy{max-width:none}
/* הכיתוב עצמו: כהה יותר + הילה לבנה עדינה, כדי לבלוט מעל התמונה בלי
להוסיף "קופסה" שתשבור את המראה של טקסט הצף על הצילום. */
.hero-copy h1{text-shadow:0 1px 10px rgba(255,255,255,.85), 0 0 2px rgba(255,255,255,.7)}
.hero-copy .hero-lede{color:var(--ink);font-weight:500;
text-shadow:0 1px 6px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.8)}
}
.trust-bar{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-wrap{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;padding:18px 0;font-size:13px;color:var(--ink-soft)}
.trust-wrap span b{color:var(--blue);font-weight:700}
/* פס היתרונות של דף הבית — הכרטיס הלבן שצף מעל הירו */
.trust-strip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
display:grid;grid-template-columns:repeat(5,1fr);position:relative;z-index:2;margin:-26px 0 0}
.trust-strip>div{display:flex;align-items:center;gap:13px;padding:20px 18px;position:relative}
.trust-strip>div + div::before{content:"";position:absolute;inset-inline-start:0;top:22%;height:56%;width:1px;background:var(--line)}
.trust-strip .ui-ic{width:30px;height:30px;color:var(--blue);flex:none}
.trust-strip b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);font-family:'Rubik',sans-serif}
.trust-strip span{display:block;font-size:12px;color:var(--ink-soft)}
@media(max-width:900px){
.trust-strip{grid-template-columns:repeat(2,1fr);margin-top:20px}
.trust-strip>div + div::before{display:none}
.trust-strip>div{border-top:1px solid var(--line)}
.trust-strip>div:nth-child(-n+2){border-top:0}
}
@media(max-width:520px){ .trust-strip{grid-template-columns:1fr} .trust-strip>div:nth-child(2){border-top:1px solid var(--line)} }
/* ---------- כותרת סקשן + קרוסלה ---------- */
.sec-head{display:flex;align-items:center;gap:12px;margin:44px 0 4px}
.sec-head h2{font-size:20px;font-weight:800;margin:0;display:flex;align-items:center;gap:9px}
.sec-head h2 .ui-ic{width:22px;height:22px;color:var(--blue)}
.sec-head .more{margin-inline-start:auto;font-size:13px;font-weight:700;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.sec-head .more:hover{text-decoration:underline}
.sec-head .more .ui-ic{width:14px;height:14px}
/* רצועה נגללת אופקית. הכפתורים בקצוות מופיעים רק בדסקטופ. */
.carousel{position:relative}
.rowscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:14px;
overflow-x:auto;padding:16px 2px 22px;scroll-behavior:smooth;scrollbar-width:thin}
.rowscroll::-webkit-scrollbar{height:6px}
.rowscroll::-webkit-scrollbar-thumb{background:#CFDCEA;border-radius:3px}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:38px;height:38px;border-radius:50%;
background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.car-btn:hover{color:var(--blue);border-color:var(--blue)}
.car-btn .ui-ic{width:17px;height:17px}
.car-prev{inset-inline-start:-16px}
.car-next{inset-inline-end:-16px}
/* ה-path של החץ מצייר חץ שמאלה. SVG לא מתהפך לבד ב-RTL, ולכן הכיוון
נקבע כאן במפורש: החץ תמיד מצביע החוצה מהרצועה, לכיוון שאליו גוללים. */
[dir="ltr"] .car-next .ui-ic{transform:scaleX(-1)}
[dir="rtl"] .car-prev .ui-ic{transform:scaleX(-1)}
@media(max-width:1000px){.car-btn{display:none}}
/* ---------- כרטיס קטגוריה ---------- */
.cat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 12px;
box-shadow:var(--shadow-s);
text-align:center;text-decoration:none;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .2s;display:block}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#C9DEF8}
.cat-card .cat-art{height:96px;border-radius:12px;background:linear-gradient(155deg,#F3F8FF,#EFFBF8);
display:grid;place-items:center;margin-bottom:11px;overflow:hidden}
.cat-card .cat-art svg{width:60px;height:60px}
/* תמונת קטגוריה אמיתית (מוגדרת ב-HOME_CAT_IMAGE ב-home.js) גוברת על
האיור — אותו כלל שחל על תמונת מוצר בכרטיסי החנות. */
.cat-card .cat-art img{width:100%;height:100%;object-fit:contain;padding:11px}
.cat-card b{font-size:13px;font-weight:600;color:var(--ink);font-family:'Heebo',sans-serif}
/* ---------- באנרים שיווקיים ---------- */
/* הכותרת, המשפט והכפתור צרובים בתוך קובץ התמונה עצמו, ולכן הבאנר הוא
פשוט בתוך קישור. width:100% + height:auto = היחס נשמר תמיד
והתמונה לעולם לא נחתכת — לא בדסקטופ ולא בנייד. */
.promo-stack{display:grid;gap:14px;margin:16px 0 6px}
.promo-banner{display:block;border-radius:var(--radius);overflow:hidden;
border:1px solid var(--line);background:#0B1A2C;line-height:0;
transition:transform .2s,box-shadow .2s}
.promo-banner:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.promo-banner img{display:block;width:100%;height:auto}
.promo-pair{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){ .promo-pair{grid-template-columns:1fr 1fr} }
.promo-row{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0 6px}
@media(min-width:900px){ .promo-row{grid-template-columns:1fr 1.35fr 1fr} }
.promo{border-radius:var(--radius);padding:24px 26px;display:flex;align-items:center;gap:16px;min-height:150px;
text-decoration:none;overflow:hidden;position:relative;transition:transform .2s,box-shadow .2s}
.promo:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.promo-txt{position:relative;z-index:1}
.promo b{display:block;font-family:'Rubik',sans-serif;font-size:19px;font-weight:800;margin-bottom:5px}
.promo span{display:block;font-size:13.5px;margin-bottom:14px;opacity:.9}
/* 🔴 ==================== תיקון גלובלי: תמונות חתוכות ====================
פריט בתוך grid/flex מקבל `min-height:auto` כברירת מחדל — כלומר "אל
תקטן מגודל התוכן". תמונת מוצר 600×500 שנכנסת למסגרת רחבה ונמוכה
מקבלת גובה תוכן גדול מהמסגרת, `min-height` **דורס את `height:100%`**,
האלמנט גולש, ו-`overflow:hidden` חותך את התחתית.
⚠️ `object-fit:contain` לא מונע את זה — הוא מסדר את הביטמאפ *בתוך*
תיבת האלמנט ולא מונע מהתיבה לגלוש. זו הסיבה שהתמונות נראו חתוכות
למרות ש-contain הוגדר נכון בכל המסגרות.
⚠️ הבאג "חוזר" אחרי סנכרון ספק כי הוא תלוי בגודל התמונה: כשהתמונות
היו לוגו w_100 גודל התוכן היה קטן מהמסגרת ולא היה מה לחתוך. ברגע
שהסנכרון החליף אותן ב-600×500 אמיתיות הוא נחשף בכל האתר בבת אחת.
**כל מסגרת תמונה חדשה שנוסיף חייבת לרשת את הכלל הזה.** */
.cat-card .cat-art img,
.deal-art img,
.opt .thumb img,
.slot-icon-wrap img,
.product-card img{min-width:0;min-height:0}
.promo .go{display:inline-block;font-size:12.5px;font-weight:700;padding:9px 20px;border-radius:9px}
/* תג ההטבה בכרטיס הבונה. קטן ומאופק בכוונה — הוא צריך להיקרא כעובדה
על השירות ולא כמדבקת מבצע. הסימן ✓ נוסף ב-CSS ולא ב-HTML כדי שהוא
לא ייכנס לתרגום ולא ישוכפל בין data-he ל-data-en. */
.promo .promo-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
font-size:11.5px;font-weight:700;letter-spacing:.2px;padding:5px 11px;margin-bottom:2px;
border-radius:999px;background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.34);color:#fff;backdrop-filter:blur(2px)}
.promo .promo-badge::before{content:"✓";font-weight:900;font-size:11px;opacity:.95}
.promo--light .promo-badge{background:#EAF3FF;border-color:#C9DEF8;color:var(--blue)}
.promo svg.promo-art{width:96px;height:96px;flex:none;margin-inline-start:auto;position:relative;z-index:1}
/* כהה — פה הכהה עובד, כי הבאנר הוא "תמונה" ולא ממשק */
/* באנר עם צילום ברקע. התמונה יושבת בצד הפיזי שממנו הגיעה (ימין), ומעליה
גרדיאנט כהה שמתחזק לכיוון הטקסט — כך הכותרת נשארת קריאה בלי תלות
בבהירות הצילום עצמו, וגם אם התמונה תוחלף בעתיד. */
/* ⚠️ הסלקטור כפול (.promo.promo--photo) בכוונה: .promo--dark/--blue
מוגדרים בהמשך הקובץ ומשתמשים ב-shorthand background, שהיה דורס את
התמונה. שתי מחלקות = ספציפיות גבוהה יותר, וכך הצילום מנצח. */
.promo.promo--photo{
background-image:
linear-gradient(to left, rgba(8,18,33,.05) 0%, rgba(8,18,33,.30) 38%, rgba(8,18,33,.80) 72%, rgba(8,18,33,.90) 100%),
var(--promo-img);
background-size:auto, cover;
background-position:center, center right;
background-repeat:no-repeat, no-repeat;
background-color:#0B1A2C;
color:#DCE8F4;
}
.promo.promo--photo b{color:#fff}
.promo.promo--photo .promo-txt{max-width:64%;position:relative;z-index:1}
[dir="ltr"] .promo.promo--photo{
background-image:
linear-gradient(to right, rgba(8,18,33,.05) 0%, rgba(8,18,33,.30) 38%, rgba(8,18,33,.80) 72%, rgba(8,18,33,.90) 100%),
var(--promo-img);
background-position:center, center left;
}
.promo--dark{background:radial-gradient(ellipse 70% 90% at 15% 20%,rgba(47,196,176,.18),transparent 60%),
linear-gradient(135deg,#132C4D,#1D1440);color:#DCE8F4}
.promo--dark b{color:#fff}
.promo--dark .go{background:#fff;color:var(--ink)}
.promo--blue{background:radial-gradient(ellipse 60% 90% at 85% 15%,rgba(47,196,176,.2),transparent 62%),
linear-gradient(135deg,#0B2C4D,#12395F);color:#C8DCEC}
.promo--blue b{color:#fff}
.promo--blue .go{background:var(--grad);color:#fff}
.promo--light{background:linear-gradient(140deg,#EEF5FE,#EAF8F5);color:var(--ink-soft);border:1px solid var(--line)}
.promo--light b{color:var(--blue-dark)}
.promo--light .go{background:#fff;color:var(--blue);border:1px solid #C9DEF8}
/* אלמנטים בהדר שממתינים לפיצ'ר עתידי (כרגע: אייקון חשבון/התחברות).
נשארים בקוד כדי שאפשר יהיה להחזיר אותם בשורה אחת. */
.head-ic--hidden{display:none !important}
/* ---------- משוב "נוסף לעגלה" ---------- */
/* הכדור שטס מהמוצר לעגלה. position:fixed כי המסלול מחושב מקואורדינטות
מסך (getBoundingClientRect), ו-pointer-events:none כדי שלא יחסום קליק. */
.cart-fly{position:fixed;z-index:9999;width:16px;height:16px;margin:-8px 0 0 -8px;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle at 32% 30%, #7CC4FF, var(--blue,#1B6FE0));
box-shadow:0 0 0 4px rgba(27,111,224,.18), 0 6px 16px rgba(27,111,224,.45)}
/* קפיצה קצרה של אייקון העגלה ברגע שהכדור מגיע */
@keyframes cartBump{
0%{transform:scale(1)} 35%{transform:scale(1.28)}
60%{transform:scale(.94)} 100%{transform:scale(1)}
}
.cart-bump{animation:cartBump .42s cubic-bezier(.34,1.56,.64,1)}
/* תג "+N" שעולה ונמוג מעל העגלה */
@keyframes cartPlus{
0%{opacity:0;transform:translate(-50%,4px) scale(.7)}
22%{opacity:1;transform:translate(-50%,-10px) scale(1)}
75%{opacity:1;transform:translate(-50%,-14px) scale(1)}
100%{opacity:0;transform:translate(-50%,-26px) scale(.9)}
}
.cart-plus{position:absolute;left:50%;top:-6px;transform:translate(-50%,0);
background:var(--blue,#1B6FE0);color:#fff;font-family:'Rubik',sans-serif;font-weight:800;
font-size:11.5px;line-height:1;padding:4px 8px;border-radius:999px;white-space:nowrap;
pointer-events:none;z-index:5;box-shadow:0 4px 12px rgba(27,111,224,.4);
animation:cartPlus 1.1s ease-out forwards}
/* בהעדפת "פחות אנימציות": בלי תנועה, אבל התג עדיין נראה כשנייה —
אחרת הלקוח לא מקבל שום משוב שהמוצר נוסף. */
@media(prefers-reduced-motion:reduce){
.cart-bump{animation:none}
.cart-plus{animation:none;opacity:1;transform:translate(-50%,-12px)}
}
/* ---------- כרטיס מבצע בדף הבית ---------- */
.deal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;
box-shadow:var(--shadow-s);
display:flex;flex-direction:column;position:relative;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.deal:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#C9DEF8}
/* ⚠️ הרקע כאן הוא הגרדיאנט ולא --surface-2 האפור. תמונת מוצר מוצגת
contain ולכן כמעט תמיד נשארים שוליים סביבה — ועל אפור שטוח השוליים
האלה נקראים כ"התמונה לא נטענה עד הסוף", בעוד שעל הגרדיאנט התכלכל
של שאר תיבות התמונה באתר הם נקראים כמסגרת. עד עכשיו התיקון הזה היה
משוכפל פעמיים בחוץ (.deal-art ב-products.css והזרקת הכללים ב-home.js)
כי כאן נשאר האפור; מקור אחד עדיף על שני עוקפים. */
.deal-art{height:110px;border-radius:12px;background:linear-gradient(155deg,#F3F8FF,#EFFBF8);display:grid;place-items:center;margin-bottom:12px;overflow:hidden}
.deal-art svg{width:70px;height:70px}
.deal-art img{width:100%;height:100%;object-fit:contain;padding:12px}
.deal-cat{font-size:11px;color:var(--ink-soft);margin-bottom:3px}
.deal-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.45;min-height:38px}
.deal-foot{margin-top:auto;padding-top:11px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.deal-price{font-family:'Rubik',sans-serif;font-weight:800;font-size:16px;color:var(--blue)}
.deal-old{font-size:11.5px;color:#A6B4C6;text-decoration:line-through;display:block;line-height:1.3}
/* מחיר קודם (oldPrice מהגיליון) + תג אחוז ההנחה על כרטיס המבצע */
.deal-was{font-size:12px;color:#9AA8BA;text-decoration:line-through;font-weight:600}
.deal-badge{position:absolute;inset-inline-start:10px;top:10px;z-index:2;
background:var(--red,#E4322B);color:#fff;font-family:'Rubik',sans-serif;font-weight:800;
font-size:11.5px;letter-spacing:.2px;padding:4px 9px;border-radius:999px;
box-shadow:0 2px 8px rgba(228,50,43,.35)}
.deal-off{background:var(--red-bg);color:var(--red);font-size:11px;font-weight:800;padding:4px 8px;border-radius:8px;
font-family:'Rubik',sans-serif;border:1px solid #F6CFCE}
.deal-tag{position:absolute;top:12px;inset-inline-start:12px;font-size:9.5px;font-weight:800;padding:4px 10px;
border-radius:20px;background:var(--grad);color:#fff;font-family:'Rubik',sans-serif}
/* ---------- פס יצרנים ---------- */
/* כותרת פס המותגים.
🔴 **לא קישוט — היא החלק שמונע הטעיה.** פס לוגואים בלי כותרת
נקרא כמו "שותפים עסקיים"; "מותגים שאנו מוכרים" אומר בדיוק מה
שהוא. ראה ההערה ב-home.html ואת §14 בתקנון. */
.brand-strip-h{font-family:'Rubik',sans-serif;font-size:15px;font-weight:800;
color:var(--ink-soft,#5F7590);text-align:center;margin:0 0 16px;
letter-spacing:.2px}
/* 🔴 **הלוגו מוסתר עד שהוא באמת נטען.** ראה ההסבר ב-home.html:
הסתרת הטקסט כברירת מחדל הותירה פס ריק כששרת החזיר 200 לקובץ
חסר. הכיוון הזה נכשל תמיד לצד הבטוח — טקסט.
✅ **עיגולים לבנים, לפי הבקשה של דביר.** תמונת המקור החדשה על
רקע לבן אפשרה להשקיף את הרקע (הקודמת, על אפור, לא — הנשר של
GIGABYTE היה באותו גוון). ראה tools/crop-brands.py.
⚠️ העיגול הוא על ה-`` ולא על התמונה: תמונה שקופה בתוך עיגול
לבן נותנת את המראה הנקי, ועיגול על התמונה עצמה היה גוזם לוגו
רחב כמו "Western Digital". */
/* 🔴 **שורה אחת שנגללת, לא שתי שורות עקומות — 23.08.**
דביר: "האתר כן מעודכן כולל התמונות אבל זה לא נראה טוב. צריך אולי
ליצור גלגלת כמו שיש במבצעים שאפשר להחליק, או להקטין את הלוגואים."
13 מותגים ב-88px נדחסו ל-10+3 — שורה שנייה עם שלושה בודדים
ומרווח ריק ענק. שתי הבעיות נפתרות יחד: **בלי גלישה** ועם גלילה
אופקית, כמו רצועת המבצעים.
⚠️ `flex-wrap:nowrap` הוא העיקר. בלעדיו ההקטנה לבדה רק דוחסת
את השורה השנייה במקום לבטל אותה. */
.brand-strip{
gap:14px;flex-wrap:nowrap;justify-content:flex-start;
overflow-x:auto;overflow-y:hidden;
/* ⚠️ שלושת אלה אינם קישוט. רצועה שאינה גולשת בתוך הורה מצומצם
קורסת לרוחב התוכן או דוחפת את העמוד לגלילה אופקית; שלושתם יחד
כולאים את הגלילה **בתוך הרצועה** ולא בעמוד. */
width:100%;max-width:100%;min-width:0;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.brand-strip::-webkit-scrollbar{height:6px}
.brand-strip::-webkit-scrollbar-thumb{background:var(--line,#E2EAF2);border-radius:99px}
/* ⚠️ `flex-shrink:0` — בתוך רצועה שאינה נגללת פלקס היה מכווץ את
העיגולים לסגלגלים במקום לאפשר גלילה. */
.brand-strip a.has-logo{flex:0 0 auto;scroll-snap-align:center}
.brand-strip a.has-logo{
width:76px;height:76px;padding:0;border-radius:50%;
background:#fff;border:1px solid var(--line,#E2EAF2);
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 3px 10px rgba(14,42,71,.06);
transition:transform .15s,box-shadow .15s;
}
.brand-strip a.has-logo:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(14,42,71,.12);
}
/* ⚠️ 70%/42% ולא `width:100%`: הלוגואים שונים ביחס הרוחב-גובה
(AMD רחב פי 3.7, intel כמעט ריבועי). `contain` בתוך תיבה
מרובעת שומר על שניהם קריאים ובאותו משקל ויזואלי. */
.brand-logo-img{display:none;max-width:70%;max-height:42%;
width:auto;height:auto;object-fit:contain}
.brand-strip a.has-logo .brand-logo-img{display:block}
.brand-strip a.has-logo span{display:none}
@media(max-width:600px){
.brand-strip a.has-logo{width:64px;height:64px}
}
.brand-strip-note{font-size:11.5px;color:var(--ink-soft,#5F7590);text-align:center;
margin:14px auto 0;max-width:640px;line-height:1.6;opacity:.85}
/* ⚠️ הכלל השני של הרצועה בקובץ. `justify-content` ו-`flex-wrap`
כאן היו גוברים על הכלל למעלה (אותה ספציפיות, מאוחר יותר) —
ולכן הם מיושרים אליו. */
.brand-strip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:18px 20px;margin:30px 0 10px;display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:nowrap}
.brand-strip span,.brand-strip a{font-family:'Rubik',sans-serif;font-weight:800;font-size:15px;
color:#93A6BC;letter-spacing:.5px;transition:color .15s,opacity .15s;text-decoration:none}
.brand-strip span:hover,.brand-strip a:hover{color:var(--blue)}
.brand-strip a:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
/* ---------- layout ---------- */
.builder{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;padding:32px 0 70px;align-items:start}
@media(max-width:900px){.builder{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-s);margin-bottom:20px}
.panel.locked{opacity:.55}
.panel h3{margin:0 0 6px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.panel .sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 16px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;background:var(--grad);color:#fff;border-radius:50%;font-size:12px;font-weight:700;flex-shrink:0}
.lock-msg{font-size:13px;color:var(--ink-soft);background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--radius-sm);padding:14px;text-align:center}
.filter-explainer{background:var(--blue-soft);border:1px solid #C7DDFC;color:var(--blue-dark);font-size:13px;padding:12px 16px;border-radius:var(--radius-sm);text-align:center;line-height:1.5}
.options{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.opt{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px;cursor:pointer;transition:.15s;background:#fff;position:relative;overflow:hidden}
.opt:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--shadow-s)}
.opt.selected{border-color:var(--blue);background:linear-gradient(180deg,#F1FBF9,#F0F6FE);box-shadow:0 0 0 2px rgba(27,111,224,.14)}
.opt .thumb{width:100%;height:74px;border-radius:8px;background:linear-gradient(155deg,#F3F8FF,#EFFBF8);display:flex;align-items:center;justify-content:center;margin-bottom:8px;overflow:hidden}
.opt .thumb img{height:100%;width:100%;object-fit:contain}
.opt .thumb svg{width:38px;height:38px;color:var(--blue)}
.opt .name{font-weight:600;font-size:13.5px;color:var(--ink)}
.opt .spec{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.opt .reason{font-size:10.5px;color:var(--ink-soft);margin-top:5px;line-height:1.4;background:var(--surface-2);border-radius:6px;padding:5px 7px}
.opt .price{font-size:13px;font-weight:700;color:var(--blue);margin-top:7px}
.opt.selected .price{color:var(--teal-dark)}
.badge-tag{display:inline-block;font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;margin-bottom:8px}
.badge-rec{background:var(--grad);color:#fff}
.badge-info{background:#E4F3FB;color:#1E6B8C}
.badge-works{background:var(--amber-bg);color:#92650F}
.badge-bad{background:var(--red-bg);color:#A33333}
.filter-note{font-size:11.5px;color:var(--teal-dark);background:#F0FDFA;border:1px solid #B7EFE5;padding:6px 10px;border-radius:8px;margin-bottom:10px;display:inline-block}
/* ---------- sidebar ---------- */
.sticky{position:sticky;top:88px}
/* בורר אופן המשלוח בדף התשלום. כרטיס לכל אפשרות ולא