/* ===== גופן Rubik - נטען מקומית מתוך התבנית (מחליף את Google Fonts שהוסר לגמרי) ===== */
@font-face{
  font-family:'Rubik';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/rubik-hebrew.woff2') format('woff2-variations');
  unicode-range:U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face{
  font-family:'Rubik';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/rubik-latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* פלטה ראשית — ספר מותג 2026, כעת תואם למערכת העיצוב (Mandelboim Design System) */
  --ink:#1F2933;        /* Ink Charcoal — טקסט ולוגו */
  --sage:#7F8C7A;       /* Soft Sage — סלוגן ואזורי עיצוב, כעת נגיעה משנית בלבד (סבב 83) */
  --bone:#FCF9F4;       /* Bone White — גוון בהיר יותר (טון אחד מעל F7F3ED המקורי, לפי בקשת המנכ"ל) — רקע לוגו ורקעים (70%) */
  --greige:#E6DFD6;     /* Warm Greige — טקסטיל בהיר (70%) */
  --terra:#C46A3D;      /* Terracotta — הוגברה למשקל חזותי דומיננטי יותר, לפי בקשת המנכ"ל בסבב 83 (היה "נגיעות בלבד", 10%) — עכשיו הצבע המוביל בבלוקים דקורטיביים גדולים (סרגל הודעות, אייקוני קטגוריה, איור המיטה, badge יועץ השינה, placeholder המפה, תגי הבלוג), לצד --terra-btn המאומת נגישות לשימוש עם טקסט/רקע */
  --sage-green:#9BAA95; /* Soft Sage Green — וריאנט קיר משני (ממערכת העיצוב) */
  --natural-oak:#C9A66B;/* Natural Oak — קירוב לגוון עץ רהיטים; אין הקס מדויק במקור, מסומן במערכת העיצוב כקירוב */
  /* פלטת COCOON — תת-מותג טכנולוגי */
  --midnight:#2D3436;   /* לוגו קוקון */
  --foam:#EDF0EE;       /* רקע קוקון */
  --mineral:#9DAEA0;    /* קיר קוקון */
  --clay:#C57B5B;       /* חיבורים/נגיעות */
  --sage-deep:#5A6756; /* סבב נגישות: הוכהה מ-#6B7A66 (4.35:1 על bone, נכשל AA) ל-4.5:1+ מול טקסט רגיל */
  /* טקסט/רקע נגישים — גרסה מוכהת מעט של terra לשימוש כרקע כפתור מתחת לטקסט בהיר
     (.btn-terra) — terra המקורי נשאר ללא שינוי לכל שימוש דקורטיבי אחר. יחס ניגודיות
     מול --bone: 4.66:1 (עומד ב-WCAG AA 4.5:1). --sage-btn שמור לאותה מטרה עבור btn-sage. */
  --terra-btn:#A65A33;
  --sage-btn:#697465;
  /* צבעי-זיהוי כרטיסי המגה-מניו (סבב 92) — RELAX/BALANCE/PERFORMANCE הם נקודות
     על אותו רצף חם→קר בדיוק כמו הבאדג' באקספלורר "מודל התחושה" (color-mix
     terra↔sage ב-fmRender); COCOON וילדים-ונוער אינם על הרצף, ומקבלים צבעים
     נפרדים משלהם (הפלטה התת-מותגית הקיימת / ink נייטרלי). */
  --zone-relax:var(--terra-btn);
  --zone-mid:color-mix(in oklab, var(--natural-oak) 55%, var(--ink) 45%);
  --zone-perf:var(--sage-deep);
  --zone-cocoon:var(--midnight);
  --zone-kids:var(--ink);
  /* סולם רדיוסים ומרווחים — ממערכת העיצוב (tokens/spacing.css)
     סבב 281 (סקירת עיצוב, סעיף 6): הכלל שנקבע לשיוך רדיוס↔סוג רכיב, לפי
     בקשת המנכ"ל "לקבוע כלל וליישר את כל הרכיבים לפיו" — לא תוכן חדש, רק
     תיעוד מפורש של מה שכבר היה נהוג ברוב האתר, ותיקון החריג היחיד שנמצא
     (.p-card, ר' למטה):
     • --radius-xl — עטיפות-סקשן/עמוד גדולות בלבד (.card-frame). לא כרטיסי-
       מוצר, גם לא כרטיסים "גדולים" אחרים — יש להם lg (למטה).
     • --radius-lg — "כרטיס סטנדרטי": כרטיס-מוצר (.p-card), כרטיס-מידע
       (.info-card), כרטיס-בלוג (.blog-card), פופ-אובר/מודל (.nav-pop,
       .a11y-panel, .compare-modal), כרטיס מגה-תפריט, galleries (.pdp-gallery,
       .article-hero-img), quiz-box, fm-explorer/fm-axis, branch-map, lp-form.
     • --radius-md — "אריח קומפקטי": קרוסלות/כרטיסים קטנים (.cocoon-prod-card,
       .qrec, .rec-card, .search-promo-card), אינפוטים/סלקטים, אייקונים
       קטנים, תגי-אמון (.trust div), תיבות תיאור-אזור/באנר קטגוריה.
     • --radius-sm — אלמנטים זעירים (מסגרת-פוקוס, פרטי-עיצוב דקורטיביים).
     • --radius-pill — כל מה שמעוגל-לגמרי: כפתורים, badges, תגיות, chips. */
  --radius:14px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(31,41,51,.08);
  --shadow-md:0 4px 16px rgba(31,41,51,.10);
  --shadow-lg:0 16px 40px rgba(31,41,51,.14);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
  /* ===== סולם גדלי גופן — נוסף בעקבות משוב מפורש של המנכ"ל: "לא עקבי בין
     אלמנטים" + "קטן מדי לקריאה נוחה" (דסקטופ, כל האתר). לפני הסבב הזה גדלי
     הטקסט היו פזורים על ~20 ערכים כמעט-שרירותיים (13/13.5/14/14.5/15/17/19
     לטקסט גוף; 26/27/28/30/32/34/36 לכותרות-משנה) שנוצרו סבב-אחר-סבב בלי
     סולם מוצהר. הסולם כאן מאחד את כל זה למספר קטן של צעדים ברורים, ומעלה כל
     דרגת "טקסט לקריאה" ברמה אחת ללגיביליות טובה יותר. כותרות-העמוד הגדולות
     ביותר (hero/קטגוריה/עמוד מוצר/סניף — 56–78px, ר' .hero h1 וכו') לא נגעו
     בהן: אלה כבר מהוות היררכיה מכוונת ועקבית לפי חשיבות העמוד, לא סחף. */
  --fs-2xs:14px;   /* דק/הערות/מטא — היה 13/13.5/14px מעורבב */
  --fs-xs:15px;    /* תוויות/הערות טופס — היה 14/14.5px */
  --fs-sm:16px;    /* טקסט גוף משני + שדות טופס — היה 15px */
  --fs-base:18px;  /* טקסט גוף ראשי — היה 17px */
  --fs-md:20px;    /* טקסט מוביל/lead + כותרות-רכיב קטנות — היה 19/20px */
  --fs-card-title:26px; /* כותרת כרטיס (קטלוג/קטגוריה) — היה 26/27px מעורבב */
  --fs-section-h:32px;  /* כותרת-משנה בתוך בלוק/מודאל/תוצאה — היה 30/32/34/36px מעורבב */
  --fs-page-h:40px;     /* כותרת עמוד-תוכן (לא עמוד-בית) — היה 38/40px מעורבב */
  --fs-micro:12.5px;    /* תגיות/באדג'ים/מטא זעיר — היה 11/11.5/12/12.5px מעורבב.
    כוונה: קונסולידציה בלבד, לא הועלה כמו שאר הסולם — אלה תגיות עיצוביות קטנות
    (מחיר בפינת כרטיס, תג COCOON, "-1" בעגלה וכו') לא טקסט-קריאה ראשי, ולכן לא
    נגעו כאן במספרים הקטנים ביותר (10/10.5px, ר' .cart-badge/.vignette-note) —
    אלה מספרים/סמלים בודדים בתוך עיגול/תג קטן, שינוי גודלם עלול לשבור פריסה. */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
.skip-link{position:absolute;right:-999px;top:8px;z-index:200;background:var(--ink);color:var(--bone);padding:10px 18px;border-radius:var(--radius-pill);font-weight:500}
.skip-link:focus{right:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* גופן: ספר המותג לא כלל טיפוגרפיה — Rubik נבחר במערכת העיצוב כתחליף (כיסוי עברית מלא,
   סאנס גיאומטרי מעוגל הקרוב ללוגו). מחליף את הבחירה הקודמת שלנו (Heebo/Karantina/Comfortaa),
   שהייתה בעצמה ניחוש לא מאומת — Rubik הוא כעת המקור הרשמי ממערכת העיצוב שנבנתה בכוונה. */
/* סבב 136: overflow-x:hidden כרשת ביטחון — נוסף בעקבות באג ממשי שבו שורת הכותרת
   הרחיבה את כל העמוד מעבר לרוחב מסך טלפון (ר' הערה מפורטת ליד @media(max-width:560px)),
   מה שגרם לגלישה אופקית של הדף כולו ולחיתוך אלמנטים נוספים (כמו הטקסט בסליידר
   הראשי) שהתבססו על רוחב-view-port אמיתי. לא פותר את שורש הבעיה לבד (שורש
   הבעיה תוקן בנפרד, בכותרת) — אבל מונע שהעמוד כולו "יזוז" הצידה אם אלמנט
   רחב-מדי אחר יתגלה בעתיד.
   סבב 164: hidden הוחלף ל-clip — אותה חסימה ויזואלית בדיוק, אבל hidden עדיין
   נחשב "תיבת גלילה" תכנותית (אפשר להזיז את תוכנה עם scrollLeft/scrollIntoView
   גם בלי סרגל גלילה נראה), בעוד clip שולל גלילה לגמרי. זה היה שורש באג אמיתי:
   scrollIntoView בניווט סליידר המבצעים (dealsNav, ר' JS) "טיפס" בשרשרת האבות
   וזיז בטעות את ה-body עצמו במקום רק את הסליידר, מה שחתך אלמנטים אחרים בעמוד
   (כותרת "מבצעים" ועוד) מחוץ ל-viewport. */
body{overflow-x:clip;font-family:'Rubik',sans-serif;background:var(--bone);color:var(--ink);line-height:1.6;font-weight:400}
h1,h2,h3{font-family:'Rubik',sans-serif;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.wordmark{font-family:'Rubik',sans-serif;font-weight:500;letter-spacing:-.02em;text-transform:lowercase}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
/* נגישות: טבעת פוקוס אחידה למקלדת בלבד (focus-visible) על כל הרכיבים האינטראקטיביים — Soft Sage, לא פוגע בעכבר. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sage);outline-offset:2px;border-radius:var(--radius-sm)}
/* סבב 42: רוחב עמוד הורחב בהשראת אתר עמינח (aminach.co.il) — הדפים שם רצים
   כמעט על כל רוחב המסך במקום עמודת-תוכן ממורכזת עם שוליים גדולים. הועלה
   מ-1180px ל-1920px (מכסה את כל רוחבי המסך הנפוצים ברוב המחשבים), עם ריפוד
   צדדי גמיש (clamp) כדי שגם במסכים 4K+ יישאר מרווח סביר ולא שורות טקסט
   ארוכות מדי לקריאה.
   סבב 47: המנכ"ל דיווח שבפועל העמוד עדיין לא רץ על כל רוחב המסך — במסכים
   רחבים מ-1920px (למשל 2560 ומעלה) התקרה הקבועה עדיין משאירה שוליים ריקים
   משני הצדדים. הוסרה התקרה (max-width:none) כדי שהעמוד ירוץ על 100% מרוחב
   האזור הנראה בכל מסך, ונשען רק על הריפוד הצדדי הגמיש (clamp) למרווח סביר —
   בלי לחזור לעמודת-תוכן קבועה.
   סבב 137: המנכ"ל דיווח שבמסכים רחבים (דסקטופ/אולטרה-וויד) העמוד "צפוף" —
   שורות טקסט וסקשנים נמתחים על כל רוחב המסך במקום עמודת-תוכן קריאה נוחה,
   וכל הדף מרגיש כמו תבנית אחידה אחת בלי שום קצב/וריאציה. הוחזרה תקרת-רוחב
   אמיתית ל-.container (במקום max-width:none), אבל לא כתקרה בודדת אחידה כמו
   לפני סבב 47 — שלושה משתני-רוחב (--w-narrow/--w-content/--w-wide) שמאפשרים
   וריאציה מכוונת בין סקשנים/עמודים: סקשני קריאה/פוקוס (FAQ, hero-mission, דפי
   נחיתה, מאמר/הצהרת-נגישות) צרים יותר לקריאות; רוב הסקשנים והעמודים (ניווט,
   פוטר, מבצעים, יועץ שינה, מודל התחושה, עמוד מוצר, בלוג, סניפים) ברוחב-תוכן
   רגיל; סקשני "ויטרינה" רחבי-גריד (הקולקציות שלנו, COCOON, עמוד קטלוג) מעט
   רחבים יותר. שקופית המוצרים (.ps-wrap) ותמונת ה-hero (.hero-grid) נשארות
   full-bleed ללא שינוי — הן כבר יצאו במפורש מ-.container בסבבים 48/49, בדיוק
   הכיוון ההפוך (רגעים חזותיים בולטים שכן אמורים לגעת בקצה המסך). ר' גם
   .container--narrow/.container--wide בהמשך הקובץ. */
:root{--w-narrow:900px;--w-content:1280px;--w-wide:1600px}
.container{max-width:var(--w-content);margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.container--narrow{max-width:var(--w-narrow)}
.container--wide{max-width:var(--w-wide)}

/* ===== פס הודעות מתחלף =====
   בהשראת פס ההודעות המתחלף שנצפה ב-aminach.co.il (מבצעים/יצירת קשר מתחלפים
   עם חצים ידניים) — כאן עם 4 עובדות אמיתיות שכבר מופיעות במקומות אחרים באתר
   הזה (לא הומצא תוכן שיווקי חדש), בפלטת Soft Sage הכהה כדי לא להתחרות
   חזותית עם פס-האב-טיפוס השחור שמעליו. */
.announce-bar{background:var(--terra-btn);color:var(--bone);display:flex;align-items:center;justify-content:center;gap:16px;padding:9px 14px;font-size:var(--fs-2xs);font-weight:500}
.announce-track{position:relative;height:18px;min-width:300px;text-align:center;overflow:hidden}
.announce-msg{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease-standard),transform .45s var(--ease-standard);white-space:nowrap}
.announce-msg.is-active{opacity:1;transform:none}
.announce-arrow{background:none;border:none;color:var(--bone);font-size:var(--fs-base);line-height:1;cursor:pointer;opacity:.7;transition:opacity var(--dur-base)}
.announce-arrow:hover{opacity:1}

/* ===== ניווט ===== */
/* כותרת האתר בלבד (body>header). באבטיפוס היה <header> יחיד והסלקטור היה חשוף -
   אבל בתבניות וורדפרס יש גם <header class="article-head"> (כתבה) ו-
   <header class="cat-head"> (קטגוריה/מבצעים), וכולם נהיו דביקים עם רקע
   ו-z-index:50: כותרת הכתבה "נדבקה" מעל התפריט בגלילה, כיסתה את המגה-מניו
   (אותו z, מאוחר יותר ב-DOM), ועמוד הקולקציה "נתקע" בגלילה (דיווח מנכ"ל 19.8) */
body>header{background:var(--bone);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--greige)}
/* סבב 157: המנכ"ל ביקש רצועת ניווט "גבוהה" יותר (74px→92px) עם לוגו וקטגוריות
   גדולים יותר, ושהתפריט עצמו יתפרס לאורך הרוחב הפנוי בין הלוגו לאייקונים
   (flex:1 על .menu) עם הקטגוריות מפוזרות באופן שווה על פני כל אותו רוחב
   (justify-content:space-between בתוך .menu, במקום gap קבוע שמצמיד הכל לצד
   אחד) — כך שהתפריט "נצמד" לאייקונים בצד שמאל במקום לצוף עם רווח ריק לפניהם,
   וגם נראה פרוס על פני העמוד ולא מקובץ ליד הלוגו. סבב 160: אחרי סבב 159
   (.nav הפך full-bleed, max-width:none), flex:1+space-between על .menu מתח
   את הקטגוריות על פני כל רוחב הדף (עכשיו ~2000px+ ולא ~1200px כמו קודם) —
   "מזרנים" נדבק לגמרי ללוגו ו"אדריכלים" נדבק לגמרי לאייקונים (space-between
   דוחס את הפריט הראשון/אחרון לקצוות התיבה בלי מרווח), והפערים הפנימיים
   התנפחו לגדלים לא סבירים. הוסר flex:1+space-between מ-.menu — הרוחב חוזר
   להיות טבעי (לפי תוכן+gap קבוע, מוגדל ל-36px לתחושת "פרוס" מתונה בלי
   קיצוניות), ו-justify-content:space-between על .nav עצמו (3 ילדים: לוגו/
   תפריט/אייקונים) נותן מרווח-חיץ שווה וסביר בשני צידי התפריט במקום ה-0px
   הקודם. */
/* סבב 159: .nav עדיין נשא את .container הגלובלי (max-width:1280px, ממורכז) —
   על מסך רחב זה השאיר שוליים ריקים שווים בשני צידי הרצועה, כך שהאייקונים
   (מימין... לא, משמאל ב-RTL) לא נגעו בקצה השמאלי האמיתי של העמוד, בדיוק כמו
   שקרה למגה-מניו לפני סבב 158. max-width:none מבטל את התקרה הגלובלית (רק כאן,
   על .nav עצמו — שאר הסקשנים שמשתמשים ב-.container הרגיל לא מושפעים), כך
   שהרצועה תופסת את כל רוחב הדף, עם padding-ה-container הרגיל (clamp) כשוליים
   העקביים היחידים מכל צד — בדיוק כמו הקונטיינר של המגה-מניו. */
/* סבב 163: justify-content:space-between על .nav (3 ילדים: לוגו/תפריט/אייקונים)
   חילק את השטח הפנוי לשני פערים *שווים* — עכשיו שהרצועה מלאת-רוחב (סבב 159),
   שני הפערים האלה ענקיים, והתפריט "צף" ממורכז עם המון רווח משני הצדדים,
   כולל מהלוגו (המנכ"ל: "menu is centered and far from logo"). הוחלף ל-
   flex-start (אורז לוגו+תפריט צמודים מימין, לפי סדר ה-DOM), עם מרווח קבוע
   ומכוון בין הלוגו לתפריט (ר' .logo למטה — "ample space" אבל לא נדבק) ו-
   margin-inline-start:auto על .nav-cta (ר' למטה) שדוחף רק את האייקונים לקצה
   השמאלי האמיתי, סופג את כל השטח הפנוי הנותר — כך שרק פער אחד (בין התפריט
   לאייקונים) גדול, לא שניים. */
/* סבב 166: אותר באג-שורש אמיתי ונפרד מסליידר המבצעים — הכותרת עצמה לא
   רספונסיבית לרוחבי "לפטופ" אמיתיים. gap:16px כאן ו-.logo margin-inline-end:72px
   ו-.menu gap:36px (למטה) הם ערכים קבועים שתוכננו/נבדקו על מסך שולחני רחב
   (ר' הערות סבב 42/157 — הועלה במפורש בהשראת מסכים "1920px+"). נמדד בפועל על
   מסך הלפטופ שממנו האב-טיפוס נפתח: כל שורת הכותרת (לוגו + 9 פריטי תפריט + 5
   אייקוני nav-cta) רחבה מה-viewport בכ-100–110px בדיוק, כך שהאייקונים השמאליים
   ביותר (טלפון ונגישות) נדחקים לגמרי מחוץ למסך ונחתכים — זה קורה תמיד בטעינה,
   לא רק בלחיצה על סליידר המבצעים (שהוא באג נפרד שכבר טופל למעלה). התיקון: gap
   כאן הוחלף ל-clamp שמצטמצם בהדרגה ברוחבי-לפטופ במקום קבוע-רחב-תמיד. */
.nav{display:flex;align-items:center;justify-content:flex-start;height:92px;gap:clamp(8px,1vw,16px);max-width:none}
/* סבב 157-161: היסטוריית עבודה על הלוגו-כטקסט (wordmark+slogan כ-span-ים,
   יחס-רוחב מחושב ידנית) — הוחלפה בסבב 162 בנכס תמונה אמיתי מספר המותג (ר'
   הערת HTML ליד .logo). .logo עצמו נשאר flex לצורך יישור אנכי מרכזי בתוך
   רצועת הניווט; אין יותר עמודה/שני שורות פנימיות. */
/* סבב 163: מרווח קבוע ומכוון מהתפריט — כדי שהלוגו "יעמוד לבד" (לא ייצמד
   לקטגוריה הראשונה) בלי לחזור למרווח-ענק שצף באמצע הרצועה (ר' הערה ליד .nav
   למעלה). ערך גדול משמעותית מה-gap הפנימי של הקטגוריות (36px) כדי שהעין תבחין
   בבירור בין "מרווח נשימה של הלוגו" ל"מרווח בין קטגוריה לקטגוריה". */
/* סבב 166: 72px קבוע היה חלק ניכר מ-100–110px הגלישה שנמדדה בפועל על מסך
   לפטופ (ר' הערה ליד .nav למעלה) — clamp במקום ערך קבוע, כדי שהמרווח יישאר
   "נשימה" רחבה על מסך רחב אבל יצטמצם ברוחבי-לפטופ ולא ידחוף אייקונים מחוץ למסך. */
.logo{display:flex;align-items:center;cursor:pointer;flex-shrink:0;margin-inline-end:clamp(20px,3vw,72px)}
/* סבב 162: גובה בלבד — width:auto משמר את יחס הרוחב-לגובה המקורי של קובץ
   הלוגו (2250×505px, ≈4.455:1) בלי לעוות. 60px גובה = הגדלה ניכרת ביחס
   לגרסת הטקסט הקודמת (wordmark היה 34px), עדיין נוח בתוך רצועה בגובה 92px. */
.logo-img{height:60px;width:auto;display:block}
/* סבב 166: gap:36px (קבוע) בין 9 פריטי התפריט היה לבדו כ-128px מתוך הגלישה
   שנמדדה על מסך לפטופ אמיתי (8 מרווחים × הפרש של עד 16px) — הסיבה המרכזית
   לכך שאייקוני טלפון/נגישות נחתכים מחוץ למסך. clamp מצמצם בהדרגה ברוחבי-לפטופ,
   ונשאר קרוב לערך המקורי (36px) על מסכים רחבים באמת. */
/* סבב 166 (המשך): font-size:var(--fs-base) הקבוע (18px) על פני 9 פריטי תפריט
   היה עוד תורם לגלישה שנמדדה על מסך לפטופ — clamp נותן קצת יותר מרווח-ביטחון
   מעבר למה שנדרש כדי לסגור בדיוק את הפער שנמדד, כדי לא להישאר בדיוק על הגבול. */
/* 18.7.2026: נוסף פריט ניווט רביעי ("אקססוריז") לתפריט העליון — כדי שהתפריט
   ימשיך להתאים לרוחב עמוד הבית בלי לגלוש, ה-gap וגודל הגופן הפכו "צפופים"
   יותר בכל טווח המסך (bounds מינימום/מקסימום קטנים יותר מקודם), עדיין
   דרך clamp() כך שנשאר responsive. */
.menu{display:flex;gap:clamp(10px,1.5vw,28px);align-items:center;font-size:clamp(13px,0.32vw + 10.4px,15px);font-weight:500}
.menu a{position:relative;padding:6px 2px;white-space:nowrap}
/* פריט ניווט COCOON: מיקום (location) חדש — קישור עוגן ישיר לסקשן #cocoon בדף
   הבית, כדי שהטכנולוגיה תהיה נגישה מכל עמוד באתר ולא רק תיתקל בגלילה במקרה. */
.nav-cocoon{display:flex;align-items:center}
.nav-cocoon .cocoon-mark{height:1.1em;width:6.14em}
/* קו תחתי שצומח מהמרכז החוצה בהובר — במקום צביעה מיידית של border, תנועה עדינה
   שמתאימה לשפה "השקטה" של המותג (בלי טרהקוטה, רק Soft Sage). */
.menu a::after{content:"";position:absolute;right:0;left:0;bottom:0;height:2px;background:var(--sage);transform:scaleX(0);transition:transform var(--dur-base) var(--ease-out)}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1)}
/* ===== תפריטי מוצרים נפתחים — mega-menu ברוחב מלא של הדף — סבב 87 =====
   סבב 85: רשימת טקסט אנכית בקליק על חץ. סבב 86: כרטיסי תמונה, אבל עדיין
   פאנל מצומצם ליד הקטגוריה. המנכ"ל שלח רפרנס (אתר קמעונאות ריהוט אמיתי) —
   ביקש פאנל שנפתח ברוחב מלא של הדף (לא רק ליד הקישור), עם תמונות גדולות
   וברורות, ונפתח *רק* ב-hover — "no click on small arrow". כפתור-החץ הוסר
   לגמרי (גם מה-HTML). הפאנל כבר לא צאצא של .menu-item (כדי שיוכל להתפרס על
   פני כל רוחב ה-header, לא רק רוחב הקישור) — הוא צאצא ישיר של <header>
   (position:relative/sticky כבר קיים שם, אז הוא container תקין ל-position:
   absolute), וממורכז בעצמו באמצעות .container הקיים (אותו max-width/padding
   כמו כל שאר תוכן האתר — לא הומצא רוחב חדש). מכיוון שהפאנל כבר לא צאצא של
   .menu-item, ל-hover יש עכשיו שני "צדדים" נפרדים שכל אחד שומר את הפאנל פתוח:
   ה-.menu-item עצמו (הקישור) וה-.menu-dropdown עצמו (הפאנל) — ר' JS
   (openMenuDrop/scheduleCloseMenuDrop/clearMenuDropClose). נגישות מקלדת: כיוון
   שאין יותר כפתור נפרד לקבל focus, הקישור הראשי עצמו פותח את הפאנל ב-focus
   (onfocus), לא רק ב-hover. */
.menu-item{position:relative;display:flex;align-items:center}
/* סבב 95: לבקשת המנכ"ל — עיצוב "פשוט" אחיד לכל תתי-הקטגוריות במגה-מניו
   (השראה: פאנל מיטות/מצעים הקיים, שהמנכ"ל ציין כמודל — "look like הולנדיה"):
   שורת טקסט אחת בלבד תחת כל תמונה (בלי צבע-זיהוי/פס תחתון/שורה שנייה),
   תמונת מוצר גדולה יותר בתוך הריבוע (כמעט ממלאת אותו), ורצועה קומפקטית עוד
   יותר (padding 22px→14px, מרווח בין כרטיסים 26px→18px). קישור "לצפייה בכל..."
   הוסר לגמרי לבקשת המנכ"ל. מחליף את הפורמט הדו-שורתי/צבעוני של סבב 92. */
/* סבב 157: המנכ"ל ביקש פאנל מגה-מניו "גבוה" יותר (padding 14px→36px), כרטיסים
   גדולים יותר (196px→240px, ר' .menu-mega-card למטה), והקטגוריות מיושרות לימין
   בתוך ה-.container הפנימי (justify-content:center→flex-start — ב-RTL flex-start
   אורז מהצד הימני) במקום ממורכזות. סבב 158: flex-start לבד רק אורז את הכרטיסים
   לימין *בתוך* ה-.container הממורכז (1280px) — על מסך רחב הקונטיינר עצמו עדיין
   יושב עם שוליים ריקים שווים בשני הצדדים, כך שהכרטיסים לא ממש נוגעים בקצה
   הימני האמיתי של העמוד. עכשיו ה-.container הפנימי (רק בתוך הפאנל הזה, לא
   .container הגלובלי) מרוחב ל-1600px (כדי ש-5 כרטיסים ב-240px ייכנסו בשורה
   אחת בלי גלישה) ומוצמד ממש לקצה הימני (margin-inline-start קבוע במקום auto),
   כדי שהכרטיסים ייראו מיושרים לקצה העמוד, לא רק לקצה קונטיינר ממורכז. */
.menu-dropdown.menu-mega{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--greige);box-shadow:var(--shadow-lg);padding:36px 0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);z-index:65}
.menu-dropdown.menu-mega .container{max-width:var(--w-wide);margin:0;margin-inline-start:clamp(20px,4vw,64px);padding-inline-start:0;padding-inline-end:clamp(20px,4vw,64px)}
.menu-dropdown.menu-mega.show{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.menu-mega-row{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:22px}
/* סבב 99: לבקשת המנכ"ל — רקע bone קבוע על כל כרטיס (לא רק ב-hover), וביטול
   מלא של קידוד-הצבע שנוסף בסבב 96 (--card-accent על פס-התמונה ועל הטקסט).
   ל-beds/linens ממילא לא הועבר accent (סבב 96 הגביל אותו למזרנים בלבד), כך
   שהשינוי כאן משפיע בפועל רק על חמשת כרטיסי "מזרנים". background עדיין
   מתעדכן קלות ב-hover (גוון bone מעט כהה יותר) לאפקט אינטראקציה מינימלי. */
.menu-mega-card{width:240px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 0 10px;border-radius:var(--radius-lg);overflow:hidden;background:var(--bone);transition:background var(--dur-base) var(--ease-standard)}
.menu-mega-card:hover,.menu-mega-card:focus-visible{background:var(--greige)}
/* סבב 97: זום אחיד (1.32) לא היה מספיק לכל התמונות — לצילומים המקוריים יש
   יחס שוליים-לבנים/מוצר שונה מאוד אחד מהשני (הקנבס של RELAX/COCOON/PERFORMANCE
   כולל הרבה יותר שוליים ריקים מזה של BALANCE/ילדים ונוער), כך שאותו % זום
   משאיר חלק מהתמונות נראות קטנות משמעותית מאחרות. נוסף --img-zoom כמשתנה-CSS
   מוזרם inline לכל כרטיס בנפרד (ר' MEGA_ZOOM ב-JS) כדי לכייל זום שונה
   לכל תמונה לפי הצורך בפועל, במקום ערך גורף אחד לכולן. */
/* סבב 135: תוקן מראה "תמונה בתוך תמונה" — לפני כן ל-.mmc-img היה background:#fff
   ופינות מעוגלות משלו, מרופד ע"י padding על .menu-mega-card שמאחוריו (בגוון bone),
   כך שנוצרו שני מלבנים מעוגלים מקוננים (הריבוע הלבן של התמונה בתוך כרטיס הבון
   הגדול, עם מרווח נראה לעין ביניהם). עכשיו ה-padding על הכרטיס הוסר לגמרי מלמעלה
   ומהצדדים (נשאר רק מתחת לטקסט), ול-.mmc-img יש רק פינות עליונות מעוגלות (תואמות
   בדיוק לפינות העליונות של הכרטיס עצמו, overflow:hidden על ההורה חותך את השאר) —
   כך שהתמונה יושבת צמודה לגמרי לקצוות הכרטיס במקום "לצוף" בתוכו במסגרת נפרדת. */
.menu-mega-card .mmc-img{width:100%;aspect-ratio:2/1;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
/* 24.8: העיצוב המקורי (contain+blend) נועד לתמונות-מוצר גזורות מהאבטיפוס; באתר החי אלה צילומי לייף-סטייל - cover מלא (דיווח מנכ"ל: "התמונות לא מכסות את השטח") */
.menu-mega-card .mmc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-out)}
.menu-mega-card:hover .mmc-img img,.menu-mega-card:focus-visible .mmc-img img{transform:scale(1.05)}
/* סבב 106: התוויות עברו מ-"RELAX" ל-"קולקציית RELAX" וכו' — ארוך יותר,
   כך ש-white-space:nowrap (סבב 96/97) הוסר כדי לאפשר גלישה טבעית לשתי
   שורות (עדיין ממורכז) במקום גלישה מחוץ לגבולות הכרטיס (196px). */
.mmc-row1{font-size:var(--fs-base);font-weight:600;color:var(--ink);line-height:1.3;padding:0 10px}
/* סבב 179: שורה שנייה קטנה בכרטיסי RELAX/PERFORMANCE במגה-מניו — מציינת את
   החומר המרכזי (ויסקו/לטקס) שהצרכן מחפש לפי שם, לבקשת המנכ"ל. לא מוצגת ל-
   BALANCE (חומר מעורב, לא אחיד לכל הדגמים בקולקציה — ר' MEGA_MATERIAL_SUB). */
.mmc-row2{font-size:var(--fs-micro);color:var(--sage-deep);font-weight:500;line-height:1.3;padding:2px 10px 0}
.menu-mega-card .cocoon-mark{height:1.1em;width:6.2em;display:inline-block}
.menu-dropdown.menu-mega a::after{display:none}
/* סבב 163: margin-inline-start:auto (=margin-left פיזי ב-RTL) סופג את כל
   השטח הפנוי שנשאר אחרי לוגו+תפריט (ר' הערה ליד .nav), ודוחף רק את קבוצת
   האייקונים לקצה השמאלי האמיתי — כך שהתפריט לא "מרגיש" ממורכז, והפער הגדול
   היחיד ברצועה הוא בין סוף התפריט לאייקונים, לא סביב התפריט משני הצדדים. */
/* סבב 166: gap:8px קבוע + כפתורי 40px קבועים תרמו גם הם לגלישה שנמדדה בפועל
   על מסך לפטופ (ר' הערה ליד .nav). clamp מצטמצם מעט ברוחבי-לפטופ. */
.nav-cta{display:flex;gap:clamp(4px,0.5vw,8px);align-items:center;margin-inline-start:auto}
.nav-cta .btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1}
.nav-cta .btn-icon{width:clamp(34px,2.4vw,40px);height:clamp(34px,2.4vw,40px);padding:0;border-radius:50%;flex-shrink:0;position:relative}
.nav-cta .btn-icon svg{width:19px;height:19px}
/* ===== פריטי ניווט חדשים: טלפון/חיפוש/חשבון/עגלה — סבב 39 =====
   כל אחד הוא כפתור-אייקון שפותח "בועה"/פאנל צף (nav-pop) מתחת לו. פאנל אחד
   פתוח בכל רגע נתון (togglePop סוגר את האחרים), נסגר בלחיצה מחוץ לו, ב-Escape,
   ובכל ניווט בין עמודים (go()). וואטסאפ הוצא מכאן לגמרי לכפתור צף (ר' .wa-float). */
.nav-pop-wrap{position:relative}
/* סבב 237: היה var(--terra) — הצבע הדקורטיבי הגולמי — כרקע מתחת לטקסט לבן קטן
   (10px, מספר פריטים בעגלה). יחס ניגודיות בפועל 3.83:1, נכשל ב-WCAG AA (4.5:1
   לטקסט רגיל/קטן, terra אינו גדול/מודגש מספיק כדי לזכות בסף המופחת 3:1).
   הוחלף ל-var(--terra-btn) — הגרסה המוכהת שכבר נוצרה בסבב 72 בדיוק למטרה הזו
   (רקע כפתור/badge מתחת לטקסט בהיר), 5.08:1 מול לבן — עומד בנוחות ב-AA. */
.cart-badge{position:absolute;top:-3px;left:-3px;background:var(--terra-btn);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:50%;padding:0 3px;box-shadow:0 0 0 2px var(--bone)}
.nav-pop{position:absolute;top:calc(100% + 12px);left:0;background:#fff;border:1px solid var(--greige);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px;width:300px;display:none;z-index:65;text-align:right}
.nav-pop.show{display:block;animation:fade .2s ease}
.nav-pop::before{content:"";position:absolute;top:-6px;left:14px;width:12px;height:12px;background:#fff;border-inline-start:1px solid var(--greige);border-top:1px solid var(--greige);transform:rotate(45deg)}
.nav-pop h4{font-size:var(--fs-xs);font-weight:600;margin-bottom:12px}
/* פאנל הטלפון */
.phone-pop{text-align:center}
.phone-pop .phone-num{display:block;font-size:22px;font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:.01em}
.phone-pop .phone-sub{font-size:var(--fs-micro);color:var(--sage-deep);margin-top:10px}
/* פאנל החיפוש — רחב יותר כדי להכיל 3 הצעות מבצע לצד שדה החיפוש */
.nav-pop-search{width:420px}
.search-promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.search-promo-card{border:1px solid var(--greige);border-radius:var(--radius-md);padding:10px 8px;text-align:center;font-size:var(--fs-micro);transition:border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.search-promo-card:hover{border-color:var(--sage);transform:translateY(-2px)}
.search-promo-card .spc-eyebrow{display:block;color:var(--terra-btn);font-weight:600;font-size:10.5px;margin-bottom:4px}
.search-promo-card .spc-name{display:block;font-weight:500;line-height:1.3;margin-bottom:3px}
.search-promo-card .spc-price{display:block;font-size:var(--fs-micro);font-weight:600;color:var(--ink)}
/* פאנל החשבון */
.acc-tabs{display:flex;gap:6px;margin-bottom:14px}
.acc-tab{flex:1;padding:8px 4px;border-radius:var(--radius-pill);border:1px solid var(--greige);background:var(--bone);font-size:var(--fs-micro);font-weight:500;color:var(--ink)}
.acc-tab.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.acc-form{display:flex;flex-direction:column;gap:10px}
.acc-form input{font-family:inherit;font-size:var(--fs-sm);border:1.5px solid var(--greige);border-radius:var(--radius-md);padding:10px 14px;background:#fff;color:var(--ink)}
.acc-form input:focus{outline:2px solid var(--sage);border-color:var(--sage)}
/* פאנל העגלה */
.cart-empty{text-align:center;padding:8px 4px 4px}
.cart-empty p{font-size:var(--fs-2xs);margin-bottom:14px;color:var(--sage-deep)}
@media(max-width:920px){.nav-pop-search{width:340px}.search-promo-grid{grid-template-columns:1fr}}
@media(max-width:560px){.nav-pop{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.nav-pop::before{display:none}}
/* הערה, סבב 87: כלל בטלת ה-position:fixed שהיה כאן עבור .menu-dropdown הוסר —
   הפאנלים כבר לא נושאים מחלקת nav-pop (עברו להיות צאצאי header ישירים, ר'
   סוף הקובץ), אז הכלל הכללי .nav-pop{position:fixed} למעלה כבר לא נוגע בהם
   כלל, ואין יותר צורך לבטל אותו במפורש. */
/* ===== כפתור וואטסאפ צף — קבוע בכל עמוד (הוצא מהתפריט הראשי). סבב 71: הועבר לצד ימין (מסומטרי מול כפתור הנגישות שבצד שמאל). ===== */
.wa-float{position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);z-index:90;transition:transform var(--dur-base) var(--ease-standard),filter var(--dur-base) var(--ease-standard),bottom var(--dur-base) var(--ease-standard)}
.wa-float:hover{transform:scale(1.07);filter:brightness(1.05)}
.wa-float svg{width:27px;height:27px}
@media(max-width:560px){.wa-float{bottom:18px;right:18px;width:50px;height:50px}.wa-float svg{width:24px;height:24px}}
/* סבב 234: תוקנה חפיפה אמיתית שנמצאה בבדיקה — .wa-float (fixed, bottom:18–26px,
   z-index:90) יושב פיזית מעל שני פסים אחרים שגם הם fixed בתחתית המסך המלא:
   .pdp-sticky-cta (עמוד מוצר, מובייל/טאבלט בלבד) ו-.compare-bar (השוואת דגמים,
   בכל רוחב מסך) — לשניהם גובה כולל של כ-68–72px (ריפוד+כפתור), כך שכפתור
   הוואטסאפ הסתיר בפועל חלק מהמחיר/פריטי ההשוואה בפינה. נעשה שימוש ב-:has()
   (נתמך בכל הדפדפנים המודרניים, ר' גם color-mix/aspect-ratio שכבר בשימוש בקובץ)
   כדי להזיז את הכפתור מעלה אוטומטית בדיוק כשאחד הפסים גלוי בפועל (.show) —
   בלי JS נוסף, מסתמך על אותם toggle קיימים (initStickyCta/renderCompareBar). */
body:has(.pdp-sticky-cta.show) .wa-float,
body:has(.compare-bar.show) .wa-float{bottom:92px}
/* סבב 235: אותו סוג חפיפה נמצא גם מול הפאנלים העליונים (חיפוש/חשבון/עגלה/טלפון,
   .nav-pop) — מתחת ל-560px (ר' @media(max-width:560px) למעלה) הם הופכים ל"בוטום-
   שיט" fixed;bottom:0;left:0;right:0 (כמו .pdp-sticky-cta/.compare-bar), כך
   שהוואטסאפ הצף (bottom:18px באותו breakpoint) יושב תמיד בתוך האזור התחתון של
   הפאנל הפתוח — הכי בולט בפאנל הטלפון (.phone-pop) הקצר, ששם האזור התחתון
   שלו (כפתור "חייגו עכשיו"/משפט השעות) הוא בדיוק האזור שהכפתור מכסה. במקום
   להזיז (כמו שני הפסים למעלה, שגובהם קבוע וידוע), כאן מוסתר לגמרי — גובה
   הפאנלים משתנה לפי תוכן (חיפוש/עגלה יכולים להיות ארוכים בהרבה מהטלפון), אז
   הזזה בגובה קבוע לא הייתה מבטיחה פתרון לכל המקרים. */
@media(max-width:560px){body:has(.nav-pop.show) .wa-float{display:none}}

/* ===== ווידג'ט נגישות — סבב 71, שודרג עיצובית בסבב 73/75/80. סבב 129: עבר מכפתור
   צף קבוע (position:fixed, פינה שמאלית-תחתונה של המסך) להיות חלק מ-.nav-cta
   בכותרת עצמה — הפריט האחרון בשורת האייקונים (הכי שמאלי ב-RTL, לבקשת המנכ"ל
   "top left of the menu"). גם הוקטן ב-30% (64px/49px → 45px/34px). הפאנל נפתח
   כלפי מטה עכשיו (top, לא bottom) כי הכפתור בראש העמוד ולא בתחתיתו.
   פונקציונליות: הגדלת/הקטנת טקסט, ניגודיות גבוהה, גווני אפור, הדגשת קישורים, גופן קריא,
   עצירת אנימציות, סמן מוגדל, איפוס — נשמר ב-localStorage. אינו תחליף לביקורת נגישות
   מקצועית מלאה (ת"י 5568 / WCAG 2.0 AA), ר' audit-report.md. ===== */
.a11y-widget{position:relative}
/* סבב 166: 45px קבוע — עוד תורם קטן לגלישה שנמדדה על מסך לפטופ (ר' הערה ליד .nav). */
.a11y-toggle{width:clamp(36px,2.6vw,45px);height:clamp(36px,2.6vw,45px);border-radius:50%;overflow:hidden;background:var(--ink);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--dur-base) var(--ease-standard),filter var(--dur-base) var(--ease-standard);flex-shrink:0}
.a11y-toggle:hover{transform:scale(1.07);filter:brightness(1.15)}
.a11y-toggle svg{width:34px;height:34px}
.a11y-panel{position:absolute;top:calc(100% + 12px);left:0;width:320px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:18px;display:flex;flex-direction:column;gap:10px;max-height:min(560px,calc(100vh - 108px));overflow-y:auto;z-index:65}
.a11y-panel[hidden]{display:none}
.a11y-panel h3{margin:0 0 4px;font-size:var(--fs-base);color:var(--ink)}
/* פרופילים מהירים — שילוב מוכן של מספר הגדרות בלחיצה אחת, בהשראת ווידג'טי נגישות מסחריים.
   כל הכפתורים בפאנל מוגדלים במכוון (min-height 44px+) — זהו כלי נגישות, ומי שפותח
   אותו עשוי בדיוק להיות מי שמתקשה עם יעדי-לחיצה קטנים או טקסט צפוף. */
.a11y-profiles{display:flex;gap:8px;margin-bottom:2px}
.a11y-profile{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;background:var(--bone);border:1.5px solid var(--greige);border-radius:var(--radius-sm);padding:10px 4px;font-size:var(--fs-2xs);font-family:inherit;color:var(--ink);cursor:pointer}
.a11y-profile:hover{background:var(--greige)}
.a11y-profile:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
.a11y-profile svg{width:24px;height:24px}
.a11y-divider{height:1px;background:var(--greige);margin:2px 0 4px}
.a11y-panel button[data-a11y]{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;background:var(--bone);border:1.5px solid var(--greige);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--fs-sm);font-family:inherit;color:var(--ink);cursor:pointer;text-align:right}
.a11y-panel button[data-a11y] svg{width:21px;height:21px;flex-shrink:0}
.a11y-panel button[data-a11y]:hover{background:var(--greige)}
.a11y-panel button[data-a11y]:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
.a11y-panel .a11y-label{flex:1;text-align:right}
.a11y-panel button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.a11y-panel button[aria-pressed="true"]::after{content:"✓";font-size:var(--fs-base);font-weight:700;flex-shrink:0}
/* סבב 237: כפתור "איפוס" בתוך ווידג'ט הנגישות עצמו היה var(--terra) (הגולמי)
   מתחת לטקסט לבן — 3.83:1, נכשל ב-AA (4.5:1). אירוני במיוחד כי זה בדיוק הכפתור
   של כלי-הנגישות. הוחלף ל-var(--terra-btn) — 5.08:1 מול לבן, עומד ב-AA. */
.a11y-panel .a11y-reset{background:var(--terra-btn);color:#fff;border-color:var(--terra-btn);justify-content:center;margin-top:4px}
.a11y-panel .a11y-reset span{flex:none}
.a11y-panel .a11y-statement{display:block;font-size:var(--fs-2xs);text-align:center;padding:8px;margin-top:2px;color:var(--sage-deep);text-decoration:underline}
@media(max-width:560px){.a11y-panel{width:min(300px,calc(100vw - 36px))}}

/* ===== מצבי נגישות מיושמים על html — מופעלים ע"י ווידג'ט הנגישות ===== */
html.a11y-font-1 body{font-size:112%}
html.a11y-font-2 body{font-size:124%}
html.a11y-font-3 body{font-size:136%}
html.a11y-contrast body{background:#000 !important;color:#fff !important}
/* 24.8: הסלקטורים המקוריים (.site-header) לא קיימים במרקאפ שלנו - ההדר נשאר
   בהיר עם קישורים צהובים (ניגודיות גרועה מהרגיל). הותאם לתגיות בפועל, כולל
   רכיבים עם רקע בהיר משלהם שהחוק הכללי על body לא תופס. */
html.a11y-contrast body>header,html.a11y-contrast footer,
html.a11y-contrast .announce-bar,html.a11y-contrast .menu-dropdown.menu-mega,
html.a11y-contrast .nav-pop,html.a11y-contrast .a11y-panel,
html.a11y-contrast .p-card,html.a11y-contrast .cat-card,html.a11y-contrast .info-card,
html.a11y-contrast .card-frame,html.a11y-contrast .cat-zone-desc,
html.a11y-contrast .blog-card,html.a11y-contrast .branch-card{background:#000 !important;color:#fff !important}
html.a11y-contrast :is(.p-card,.cat-card,.info-card,.card-frame,.cat-zone-desc,.blog-card,.branch-card) :is(h2,h3,h4,p,span,div){color:#fff !important}
html.a11y-contrast .announce-bar,html.a11y-contrast .announce-msg{color:#ffd166 !important}
html.a11y-contrast a{color:#ffd166 !important}
html.a11y-contrast .btn-primary{background:#ffd166 !important;color:#000 !important}
html.a11y-grayscale{filter:grayscale(1)}
html.a11y-underline a{text-decoration:underline !important}
html.a11y-readable body,html.a11y-readable body *{font-family:Arial,Helvetica,sans-serif !important;letter-spacing:.02em !important}
html.a11y-stop-anim *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
html.a11y-cursor,html.a11y-cursor *{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M2 2 L2 26 L9 20 L13 30 L17 28 L13 18 L22 18 Z" fill="black" stroke="white" stroke-width="1.5"/></svg>') 2 2,auto !important}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-inline-start:4px}
.nav-toggle span{width:22px;height:2px;background:var(--ink);transition:transform var(--dur-base),opacity var(--dur-base)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.btn{border:none;border-radius:var(--radius-pill);padding:11px 22px;font-size:var(--fs-xs);font-weight:500;transition:background var(--dur-base) var(--ease-standard),filter var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
/* מיקרו-אינטראקציה: הרמה עדינה בהובר, "לחיצה" קלה בלחיצה בפועל — משוב מישושי
   עדין, בלי לגעת בצבעים (רק transform+shadow), כדי לא לסתור את כלל 70/20/10. */
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.btn-primary{background:var(--ink);color:var(--bone)}
.btn-primary:hover{filter:brightness(.88)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone)}
.btn-terra{background:var(--terra-btn);color:var(--bone)}
.btn-terra:hover{filter:brightness(.88)}
.btn-sage{background:var(--sage-btn);color:var(--bone)}
.btn-sage:hover{filter:brightness(.88)}

/* ===== חשיפה בגלילה — עדינה ומכובדת, בקצב השפה השקטה של המותג =====
   סבב 202: תוקן באג אמיתי — `.reveal` הגדיר opacity:0 כברירת מחדל בלתי-מותנית, כך
   שכל התוכן (כולל רצועת המבצעים המיד מתחת לתפריט) היה תלוי לחלוטין בהצלחת ה-JS
   (IntersectionObserver) כדי להיחשף בכלל. בפתיחה ישירה של הקובץ בדפדפן (file://)
   דווח שהתוכן נשאר ריק לגמרי גם אחרי גלילה/המתנה — כלומר ה-observer מעולם לא "תפס".
   כדי שהאתר לעולם לא ייתקע ריק (bez קשר לסיבה המדויקת), ההיגיון הפוך עכשיו:
   ברירת המחדל של `.reveal` היא **גלוי** (opacity:1) — ה-JS הוא זה שמוסיף `.reveal-pending`
   (opacity:0) *לפני* שהוא מתחיל לצפות באלמנט, ורק אז מסיר אותה בהדרגה עם הכניסה
   לתצוגה. אם ה-JS לא ירוץ בכלל מכל סיבה, האלמנטים פשוט יוצגו מיד במלואם, בלי אנימציה
   — לא ייעלמו. פירוט מלא בסבב 202 ב-audit-report.md. */
.reveal-pending{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal-pending.is-visible{opacity:1;transform:none}

@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ===== אנימציות "חיות" — כניסת הירו + מוני אמון. גם ה-entrance וגם ה-float
   נמצאים בתוך @media(prefers-reduced-motion:no-preference) — כך שמשתמשי
   reduced-motion רואים הכול במצב הסופי המלא (opacity:1), בלי שום סיכון להסתרה. ===== */
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes drawLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* מוני אמון */
.stats-band{background:var(--ink);color:var(--bone);padding:48px 0}
/* סבב 49: stats-grid יצא מ-.container המשותף (בהתאם להחלטת המנכ"ל להרחיב את
   טיפול ה-full-bleed שניתן לרצועת המבצעים גם לכאן) וקיבל ריפוד צדדי משלו, זהה
   בערכו לריפוד ש-.container היה נותן (clamp זהה) — הרקע הכהה של הרצועה כבר
   רץ קצה-לקצה גם קודם (רקע ברמת ה-section, לא היה תלוי ב-container), כך שהשינוי
   הנראה לעין כאן קטן; העיקר הוא העקביות הארכיטקטונית עם שאר הרצועות. */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center;padding-inline:clamp(20px,4vw,64px)}
.stats-grid>div{position:relative}
.stats-grid>div+div::before{content:"";position:absolute;right:-13px;top:50%;transform:translateY(-50%);height:46px;width:1px;background:rgba(252,249,244,.16)}
.stat-num{display:block;font-size:clamp(36px,5vw,54px);font-weight:700;color:var(--bone);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.stat-num .u{color:var(--terra)}
.stat-cap{display:block;margin-top:9px;font-size:var(--fs-2xs);font-weight:400;opacity:.88;line-height:1.45;max-width:22ch;margin-inline:auto}
@media(max-width:620px){.stats-grid{grid-template-columns:1fr 1fr;gap:30px 20px}.stats-grid>div+div::before{display:none}}
/* וידאו תהליכי ייצור — full-bleed, ממוקם מיד מתחת לרצועת מוני האמון (.stats-band).
   אותה שיטה בדיוק כמו .promo-slider (ר' הערה שם): ה-<section> לא עטוף ב-.container,
   כך שהוא נצמד ל-100% מרוחב אזור התצוגה בלי ריפוד צדדי. הווידאו דומם (ללא סאונד,
   כל הקליפים גזורים ללא פס קול), לופ אוטומטי — קטעי ייצור אמיתיים מהמפעל בשדרות. */
.mfg-video{position:relative;overflow:hidden;background:var(--ink);line-height:0}
/* גובה מוקטן ב-50% לבקשת המנכ"ל: aspect-ratio:32/9 (כפול-רוחב מול 16/9 הטבעי של
   קובץ המקור) מייצר גובה מוצג שהוא בדיוק מחצית מהגובה שהיה מתקבל בתצוגת 16/9
   רגילה על אותו רוחב מסך — לא רק תקרת max-height, אלא היחס עצמו. object-fit:cover
   ממשיך לחתוך למרכז (קרופ עדין מלמעלה/מלמטה) כדי שהקצוות לא יתעוותו. */
.mfg-video__el{display:block;width:100%;aspect-ratio:32/9;max-height:41vh;object-fit:cover}
.mfg-video__caption{position:absolute;inset-inline:0;bottom:0;padding:18px clamp(20px,4vw,64px);background:linear-gradient(to top,rgba(31,41,51,.62),transparent);color:var(--bone);font-size:var(--fs-2xs);font-weight:400;line-height:1.5}
@media(max-width:620px){.mfg-video__el{aspect-ratio:16/9;max-height:28vh}}
@media(prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead,.hero-actions,.hero-badge{opacity:0;animation:heroUp .7s var(--ease-out) forwards}
  .hero h1{animation-delay:.05s}
  .hero .lead{animation-delay:.22s}
  .hero-actions{animation-delay:.4s}
  .hero-badge{animation-delay:.6s;will-change:transform}
  .hero-visual .bed{animation:floaty 4.6s var(--ease-standard) 1.2s infinite alternate}
  .hero-badge:hover{animation-play-state:paused}
  /* כניסה מדורגת של כרטיסי הקטלוג. fill-mode=backwards בלבד: הכרטיס מתחיל שקוף
     ומחליק פנימה, ואחרי הכניסה חוזר לסגנון הבסיס — כך שהרמת ה-hover (transform)
     ממשיכה לעבוד ולא נדרסת. העיכוב מוגבל (min 12) כדי שגריד גדול לא ימתין יותר מדי. */
  #prodGrid .p-card{animation:cardIn .5s var(--ease-out) backwards;animation-delay:calc(min(var(--i,0),12)*45ms)}
}

/* ===== הירו ===== */
.hero{background:var(--bone);padding:88px 0 76px}
/* סבב 45: יחס העמודות הפוך מ-1.05fr/.95fr (טקסט מעט גדול מהתמונה) ל-.75fr/1.25fr
   (התמונה דומיננטית, פחות מקום לטקסט) — לבקשת המנכ"ל שהתמונה תהיה "בולטת ומעוצבת". */
.hero-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:center}
/* סבב 49: hero-grid יצא מ-.container המשותף כדי שתמונת הירו (hero-visual) תוכל
   לדמם עד קצה המסך האמיתי, באותה רוח כמו רצועת המבצעים (סבב 48). עמודת הטקסט
   מקבלת ריפוד משלה (padding-inline-start בלבד — הצד הפנימי כבר מרווח ע"י ה-gap
   מול התמונה), כך שהיא לא נוגעת בקצה המסך. במובייל (קריסה לעמודה אחת) הריפוד
   הופך לסימטרי (שני הצדדים), כי שם הטקסט תופס את כל רוחב השורה. */
.hero-grid>div:first-child{padding-inline-start:clamp(20px,4vw,64px)}
.hero h1{font-size:clamp(40px,5.4vw,66px);color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--sage)}
.hero p.lead{font-size:var(--fs-md);color:var(--ink);max-width:58ch;margin:18px 0 30px;font-weight:300}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
/* שורת הרגעה מתחת ל-CTA — עובדות אמת שכבר קיימות באתר, בטון Soft Sage מרוסן. */
.hero-reassure{margin-top:16px;font-size:var(--fs-2xs);font-weight:400;color:var(--sage-deep);letter-spacing:.01em}
/* סבב 43: aspect-ratio הועלה מ-4/3 ל-1/1 בהשראת עמינח (תמונת ירו דומיננטית וגבוהה
   יותר) — וגם מדויק יותר: תמונת המקור (טוקיו-זוגי.jpeg) עצמה מרובעת בערך, כך
   שהמעבר גם מגדיל את הנוכחות החזותית וגם מציג יותר מהתמונה האמיתית (פחות חיתוך
   מ-object-fit:cover על ריבוע לעומת מלבן 4:3).
   סבב 50: המנכ"ל דיווח שהירו גבוה מדי וביקש להקטין את הגובה ב-25%. מכיוון
   שרוחב עמודת התמונה נשאר קבוע (יחס ה-grid לא השתנה) והגובה נגזר ישירות
   מה-aspect-ratio, aspect-ratio 1/1 (גובה=רוחב) הוחלף חזרה ל-4/3 (גובה=75%
   מהרוחב) — הפחתה מדויקת של 25% בגובה עמודת התמונה עצמה (שהיא הגורם הדומיננטי
   לגובה הכולל של הסקשן, בהשוואה לריפוד הקבוע העליון/תחתון). */
/* border-radius א-סימטרי: הצד החוצץ עם קצה המסך האמיתי (שמאל בעברית/RTL, כי
   hero-visual היא העמודה השנייה ב-grid) ריבועי לגמרי (bleed נקי); הצד הפנימי
   (ימין, פונה לטקסט) נשאר מעוגל, לרמוז שזו עדיין "כרטיס" מעוצב ולא רק תמונה גולמית.
   סבב 145: נמצא באג אמיתי שגרם לדיווח "hero section looks disjointed" — aspect-
   ratio:4/3 בלי שום תקרת-גובה, על עמודה full-bleed (1.25fr מתוך כל רוחב המסך,
   לא מתוך .container), מתנפח למידות אבסורדיות במסכים רחבים (במוניטור 2600px+
   זה יוצא עמודה ברוחב ~1625px וגובה ~1220px!). כל שורת ה-grid (hero-grid,
   align-items:center) נמתחת לגובה הענק הזה, כך שעמודת הטקסט (הרבה יותר נמוכה
   בפועל) "צפה" ממורכזת-אנכית אי-שם באמצע תמונה ענקית — בגלילה ראשונה לתוך
   הסקשן (בדיוק כמו בצילום שנשלח) רואים רק פיסת-תמונה ענקית בלי טקסט בכלל,
   מה שקורא כ"עוד תמונה full-bleed שנדבקה מתחת לסליידר" ולא כסקשן-תוכן מגובש.
   ניסיון תיקון ראשון (עדיין סבב 145): הוספת max-height:640px ישירות לצד
   aspect-ratio:4/3 על אותו כלל — זה יצר תקלה חדשה שדווחה מיד ("text very far
   right from photo"): כשגובה מוגבל ע"י max-height בזמן ש-aspect-ratio עדיין
   מוצהר, חלק מהדפדפנים מחשבים מזה גם רוחב-מועדף חדש (עקבי ל-4:3 לפי הגובה
   המוגבל, ~853px) שמתחרה ב-justify-items:stretch המובנה של ה-grid לעמודה
   (~1625px) — התוצאה בפועל: הקופסה כבר לא נמתחת למלוא רוחב העמודה שהוקצתה לה,
   ונשאר רווח ריק עצום בין התמונה לטור הטקסט.
   סבב 146: הפתרון הנכון — לא לערבב aspect-ratio עם max-height על אותו אלמנט
   בכלל. aspect-ratio:4/3 הרגיל נשאר כברירת מחדל (עובד טוב עד ~1920px, שם הוא
   כבר לא מתנפח בצורה קיצונית). רק ממסך רחב מאוד (min-width:1920px) — בדיוק
   האזור שבו הבאג המקורי קרה בפועל — הכלל מוחלף לגמרי לגובה מוחלט וקבוע
   (aspect-ratio:auto + height, לא max-height), כך שאין לרגע אחד ריבוי-אילוצים
   מתחרים: או aspect-ratio קובע הכל (מסכים רגילים), או height מוחלט קובע הכל
   (מסכים ענקיים) — לעולם לא שניהם יחד. ר' media query בהמשך הקובץ. */
.hero-visual{position:relative;border-radius:0 var(--radius-lg) var(--radius-lg) 0;overflow:hidden;background:var(--greige);aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:center;box-shadow:var(--shadow-md)}
@media(min-width:1920px){
  /* ר' הערה מפורטת ליד .hero-visual למעלה — מסכים ענקיים בלבד עוברים לגובה
     מוחלט (לא aspect-ratio) כדי למנוע את התקלה של סבב 145. */
  .hero-visual{aspect-ratio:auto;height:min(640px,58vh)}
}
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* סקרים עדין בתחתית תמונת הירו — עומק ותחושת פרימיום לצילום הלייף-סטייל, בלי צבע חדש (Ink בשקיפות בלבד). */
.hero-visual::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(31,41,51,.28),transparent);pointer-events:none;z-index:1}
.bed{width:78%;position:relative;margin-bottom:14%}
.bed .headboard{height:74px;background:var(--terra);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.bed .mattress{height:52px;background:#fff;border:1px solid var(--greige);border-radius:0 0 var(--radius-sm) var(--radius-sm);position:relative}
.bed .blanket{position:absolute;inset:22px 0 0 0;background:var(--greige);border-radius:4px 4px var(--radius-sm) var(--radius-sm)}
.bed .pillow{position:absolute;top:-16px;width:34%;height:30px;background:var(--bone);border-radius:var(--radius-md);border:1px solid var(--greige)}
.bed .pillow.p1{right:8%}
.bed .pillow.p2{right:46%}
.bed .pillow.accent{position:absolute;top:-6px;right:30%;width:18%;height:22px;background:var(--sage);border-radius:var(--radius-sm)}
.hero-badge{position:absolute;top:18px;right:18px;z-index:2;background:var(--bone);border-radius:var(--radius-pill);padding:8px 16px 8px 14px;font-size:var(--fs-2xs);font-weight:500;color:var(--sage-deep);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:7px}
.hero-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--terra);flex-shrink:0}
/* סבב 50: טקסט השליחות מתחת לירו מורכז — לפי בקשת המנכ"ל ("below it text should
   be centered"). align-items:center ממרכז את הפסקאות (שכל אחת מוגבלת ל-65ch)
   ביחס לרוחב המלא של הסקשן, וה-text-align:center על הפסקה עצמה מרכז גם את
   הטקסט הפנימי (חשוב כששורה עוטפת יותר משורה אחת). */
.hero-mission{margin-top:40px;padding-top:36px;border-top:1px solid var(--greige);display:flex;flex-direction:column;align-items:center;gap:16px}
/* סבב 155: המנכ"ל ביקש שטקסט השליחות (hero-mission) יעלה לגודל כמו כותרת-
   המשנה של ה-hero עצמו (.hero p.lead, fs-md/20px) — היה fs-sm/16px, נראה קטן
   מדי ביחס למשקל התוכן (שני פסקאות שלמות על המותג). סבב 156: תיבת הטקסט
   הורחבה ב-25% — גם תקרת-הרוחב של .hero-mission עצמו (דורס את container--narrow
   הגלובלי, ר' HTML, רק כאן ולא בכל הסקשנים האחרים שחולקים --w-narrow כמו
   FAQ/דפי-נחיתה/מאמר) וגם ה-max-width של הפסקאות (65ch→81.25ch), כדי ששני
   האילוצים יגדלו ביחד ולא ייסתרו זה את זה. */
.hero-mission{max-width:calc(var(--w-narrow) * 1.25)}
.hero-mission p{max-width:calc(65ch * 1.25);font-weight:300;font-size:var(--fs-md);line-height:1.7;color:var(--ink);margin:0;text-align:center}

/* ===== שקופיות מוצרים מומלצים (Hero Slider) =====
   3 שקופיות: מזרן COCOON (פארק אבניו, אינדקס אמיתי 8 במערך המזרנים), מיטה
   (YOYO, אינדקס אמיתי 4 במערך המיטות — עודכן מ-2 בסבב 243, כי מיטת קארין
   פוצלה לשלוש שורות-קטלוג נפרדות ["חום"/"אפור"/"אופטי"] לפני YOYO במערך,
   מה שהזיז את כל האינדקסים אחריה; העדכון בוצע כאן וב-viewProduct('beds',...)
   בהתאם, כדי לא לשבור את כפתור "לצפייה במוצר" בשקופית), וחבילת מבצע — השקופית האחרונה אינה
   ממציאה מחיר חבילה שלא קיים; היא מקשרת לדף הנחיתה הקיים באתר (page-landing),
   שכבר מציג טיימר אמיתי ומבצע "עד 50% הנחה על דגמים נבחרים". רוטציה אוטומטית +
   חיצים ידניים + נקודות — באותה שיטה שכבר משמשת את פס ההודעות למעלה
   (ר' announceNav/resetAnnounceTimer ב-JS), לא נבנה מנגנון כפול. */
/* סבב 47: ריפוד עליון הוקטן מ-56px ל-22px — המנכ"ל דיווח על "רווח" מיותר בין
   התפריט לרצועת המבצעים. סבב 48: בוטל כליל (padding:0) — המנכ"ל דיווח שעדיין
   נשאר רווח, ושהרוחב לא באמת מלא. הפתרון המלא: הרצועה יצאה מ-.container לגמרי
   (ר' HTML — אין יותר <div class="container"> עוטף את .ps-wrap בסקשן הזה בלבד),
   כך שהיא נצמדת ל-100% מרוחב אזור התצוגה בלי שום ריפוד צדדי/עליון/תחתון —
   full-bleed אמיתי, נוגעת בקו התחתון של ה-header משני הצדדים ומלמעלה. */
.promo-slider{padding:0}
/* border-radius הוסר (היה var(--radius-lg)) — עם הרצועה עכשיו full-bleed עד
   קצוות המסך, פינות מעוגלות היו נראות שבורות/לא-שלמות בקצה בדיוק. */
.ps-wrap{position:relative;background:linear-gradient(135deg,#1F2933 0%,#28323d 100%);border:1px solid rgba(252,249,244,.08);overflow:hidden;box-shadow:var(--shadow-md)}
/* סבב 43: הועלה מ-420px ל-520px (ומ-600 ל-680 במובייל, ר' מדיה קווערי) —
   בהשראת עמינח, כדי שרצועת המבצעים תהיה יותר דומיננטית ופחות "פס" צר.
   סבב 145: המנכ"ל דיווח (אחרי שבדק גם את הולנדיה וגם עמינח בפועל) שאצלנו
   הסליידר עדיין מרגיש "קצר" בהשוואה — בשני האתרים ההם הסליידר הראשי תופס נתח
   דומיננטי מגובה המסך הנראה (viewport) בטעינה ראשונית, לא רק גובה-פיקסלים קבוע
   שנראה קטן יחסית על מסך גבוה. הוחלף מ-min-height קבוע (520px) ל-clamp יחסי
   ל-viewport (78vh) עם רצפה/תקרה — כך שעל מסך רגיל/גבוה הסליידר תמיד יתפוס נתח
   ניכר מהמסך הנראה בכניסה לעמוד (כמו אצלם), אבל לא יתנפח לאינסוף על מסכים
   גבוהים מאוד ולא יקטן מדי על מסכים נמוכים. */
.ps-track{position:relative;min-height:clamp(520px,78vh,820px)}
/* סבב 126: הוחלף ממבנה דו-טורי (טקסט בטור נפרד + תמונה בטור נפרד) לתמונה אחת
   רחבה על פני כל השקופית, עם טקסט "צף" מעליה (overlay), בהנחיית המנכ"ל
   ("one wide section, not divided in two... floating text"). .ps-slide כבר לא
   grid — .ps-media ממלאת את כל השטח, ו-.ps-info הוא פאנל absolute מעליה. */
.ps-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s var(--ease-standard),transform .6s var(--ease-standard),visibility 0s linear .6s}
.ps-slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease-standard),transform .6s var(--ease-standard)}
/* סבב 128: המנכ"ל תיקן — הכוונה לא הייתה להעביר את הטקסט לצד שמאל לגמרי
   (זה בוטל), אלא להשאיר אותו בצד ימין ולהזיז אותו מעט שמאלה (מרווח מקצה הימין,
   לא צמוד ל-0) כדי לפנות מקום לחץ הניווט בלי לשנות צד. עוגן ימין מפורש. */
.ps-info{position:absolute;top:0;bottom:0;right:66px;z-index:2;padding:44px 48px;display:flex;flex-direction:column;justify-content:center;gap:10px;width:min(50%,480px)}
.ps-eyebrow{font-size:var(--fs-2xs);font-weight:600;color:var(--terra-btn);letter-spacing:.02em}
.ps-info h3{font-size:var(--fs-section-h);color:var(--bone);text-shadow:0 2px 10px rgba(0,0,0,.35)}
.ps-info p{font-weight:300;color:rgba(252,249,244,.85);max-width:40ch;margin:0;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.ps-price{font-size:var(--fs-card-title);font-weight:700;margin-top:2px;color:var(--bone);text-shadow:0 2px 10px rgba(0,0,0,.35)}
.ps-price s{font-weight:300;color:rgba(252,249,244,.6);font-size:var(--fs-sm);margin-inline-start:8px}
.ps-info .btn{align-self:flex-start;margin-top:6px}
.ps-info .btn-primary{background:var(--bone);color:var(--ink)}
.ps-info .btn-primary:hover{filter:brightness(.9)}
.ps-media{position:absolute;inset:0;overflow:hidden;background:linear-gradient(160deg,var(--greige) 0%,#d8cfc2 100%)}
.ps-media img{width:100%;height:100%;object-fit:cover}
/* גרדיאנט כהה מהצד שבו יושב הטקסט (ימין) לעבר שקיפות מלאה בצד השני —
   מבטיח קריאות לטקסט הצף בלי צורך בכרטיס/רקע אטום נפרד.
   סבב 246: המנכ"ל דיווח שהתמונות תחת הטקסט נראות "עמומות" — מקורו בעוצמת
   הגרדיאנט (עד .82 שחור) שכוילה במקור לצילומים/הדמיות ישנות; שלוש התמונות
   שהוחלפו בסבב 245 (פארק אבניו/YOYO/TUDOR) הן צילומי לייף-סטייל עשירים
   בפרטים ותאורה שנבלעים תחת שכבה כהה כזו. עוצמת המקסימום הופחתה (.82→.58,
   .5→.28) ונקודת השקיפות המלאה קודמה מעט (72%→68%), כדי שיותר מהתמונה
   האמיתית תיראה בעין בעודה שומרת על קריאות הטקסט (שנעזר גם ב-text-shadow
   קיים על h3/p/ps-price, לא רק בגרדיאנט). */
.ps-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to left, rgba(31,41,51,.58) 0%, rgba(31,41,51,.28) 38%, rgba(31,41,51,0) 68%)}
.ps-media-illustrated{display:flex;align-items:flex-end;justify-content:center}
/* סבב 128: הטקסט נשאר בצד ימין (רק הוזז מעט שמאלה, right:66px) — לכן החצים
   חוזרים למיקום הרגיל בשני קצוות השקופית (לא קיבוץ), כי הפער (66px) מהקצה
   הימני כבר משאיר מקום נקי לחץ "הבא" בלי חפיפה עם הפאנל. */
.ps-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--greige);box-shadow:var(--shadow-sm);font-size:var(--fs-md);line-height:1;color:var(--ink);cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;transition:background var(--dur-base)}
.ps-arrow:hover{background:var(--bone)}
.ps-arrow.next{right:16px}
.ps-arrow.prev{left:16px}
.ps-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.ps-dot{width:9px;height:9px;border-radius:50%;background:var(--greige);border:none;cursor:pointer;padding:0;transition:background var(--dur-base)}
.ps-dot.on{background:var(--terra)}

/* ===== רצועות ===== */
.section{padding:64px 0}
/* סבב 139: "כרטיס צף" (floating framed card) — בהשראת כרטיסי הפרומו המעוגלים
   שנצפו בדף הבית של הולנדיה (hollandia.co.il, ר' גם סבב 138/.deals-bleed למעלה):
   שם, בין רצועות full-bleed, יושבים לסירוגין כרטיסי-פרומו מעוגלים (border-radius,
   רוחב-תוכן קבוע, שוליים ניכרים של רקע-העמוד מסביב מכל הצדדים) — קצב "נוגע-בקצה
   / צף-במסגרת / נוגע-בקצה" שמפר את תחושת ה"תבנית האחידה" (המנכ"ל: "breaks a
   mold"). .card-frame היא המחלקה הכללית (רדיוס+צל+ריפוד פנימי) שמיישמת את זה על
   .container רגיל. סבב 154: המנכ"ל ביקש שכל תיבות ה-card-frame (מבצעים/יועץ-
   השינה/מודל-התחושה/הקולקציות שלנו) יקבלו בדיוק את רקע COCOON — הרקע הועבר
   לכאן (מ-.cocoon למטה, ר' הערה שם) כך שכולן חולקות אותו רקע כברירת מחדל,
   בלי דריסה נפרדת לכל סקשן. */
.card-frame{background:linear-gradient(180deg,var(--bone) 0%, #EFE9E0 100%);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:48px clamp(24px,4vw,64px)}
/* נגיעת טרהקוטה חוזרת — לא רקע, לא צבע דומיננטי, רק סימן דקורטיבי קבוע לפני כל כותרת רצועה.
   זו "נגיעה" נוספת בתוך ה-10% המותרים לספר המותג, לא מעבר אליה. */
.section-title{font-size:44px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
/* נגיעת מותג: פס אנכי קצר (kicker) בטרהקוטה בצד המוביל של הכותרת (ימין ב-RTL) —
   נקרא כהדגשה, לא כסימן מינוס. */
.section-title::before{content:"";flex:0 0 auto;width:4px;height:0.82em;background:var(--terra);border-radius:2px}
.section-sub{color:var(--sage-deep);margin-bottom:34px;font-weight:300;font-size:var(--fs-base);max-width:65ch}
/* הובהר: היה background:var(--greige) מלא. Bone White ו-Warm Greige הם אותה קבוצת "70%" בספר
   המותג (עמ' 9: "Bone White / Warm Greige - 70%") — כך שהעברת רצועות מלאות מ-Greige ל-Bone
   היא הזזת יחס בתוך אותה קבוצה מותרת, לא סטייה ממנה. ההפרדה הוויזואלית בין רצועות נשמרת
   בקו דק במקום מילוי צבע מלא, ולא ב"מדכא" מלא-עמוד. */
.strip-greige{background:var(--bone);border-top:1px solid var(--greige);border-bottom:1px solid var(--greige)}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* לפני התיקון: background:var(--bone) — זהה בדיוק לרקע הרצועה שמתחתיו (אותו Bone White),
   כך שהכרטיס לא נבדל ממה שמתחתיו במנוחה, רק ב-hover. עכשיו הכרטיס "מרחף" מעל הרקע
   בלבן אמיתי — כמו p-card ושדות הטופס הקיימים באתר — עם צל עדין קבוע, לא רק בהעברת עכבר. */
.cat-card{background:#fff;border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);cursor:pointer;border:1px solid transparent}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cat-card .icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--terra);opacity:.9;margin-bottom:16px;display:flex;align-items:center;justify-content:center}
.cat-card .icon svg{width:28px;height:28px;stroke:var(--bone);fill:none;stroke-width:1.8}
.cat-card h3{font-size:var(--fs-card-title)}
.cat-card p{font-size:var(--fs-2xs);color:var(--sage-deep);margin-top:4px}
/* סבב 59: כרטיסי הקטגוריות בעמוד הבית (מזרנים/מיטות וריהוט/מתכווננים/מצעים) מקבלים
   תמונה אמיתית במקום אייקון גנרי. class נפרד (cat-card--photo) כדי לא לפגוע
   בשימוש החוזר של .cat-card בתגי האמון (אחריות/משלוח/סניפים) */
.cat-card.cat-card--photo{padding:0;overflow:hidden}
.cat-card--photo .cat-card-photo{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center}
.cat-card--photo .cat-card-body{padding:20px 22px 26px}

/* ===== COCOON — רקע Bone White (הכלל "רק על Mineral Sage" הוסר בהנחיית המנכ"ל) ===== */
/* עודכן לפי הנחיית המנכ"ל: קיר Mineral Sage הורגש "כהה מדי" מול שאר האתר (Bone
   White) — הכלל שקבע קיר COCOON חייב Mineral Sage הוסר במפורש, והרקע הוחלף
   ל-Bone White כמו שאר האתר. הפרדה חזותית מהסקשנים השכנים (גם הם Bone) נשמרת
   ע"י אותו קו-מסגרת דק שכבר משמש את .strip-greige, לא ע"י צבע רקע שונה. */
/* סבב 54: אותו גרדיאנט עדין שכבר משמש ב-.quiz-section/.feel-model — מונע מ-
   .cocoon-point (bone, ר' למטה) "להיעלם" על רקע שטוח זהה, מבלי לחזור ל-#fff.
   סבב 139: padding/border-top/border-bottom הוסרו מכאן — הם היו שייכים לתבנית
   ה"רצועה מלאת-רוחב" הקודמת. הסקשן עצמו עבר ל-.section הרגיל (ר' HTML, רקע
   העמוד הרגיל מסביב), וה-.cocoon עצמו זז מה-<section> אל ה-.container שבתוכו,
   ששם הוא עכשיו משמש רק לרקע/צבע-טקסט הכרטיס — הרדיוס/צל/ריפוד מגיעים מ-
   .card-frame (מוחל יחד איתו על אותו אלמנט, ר' .card-frame למעלה). */
/* סבב 154: הרקע (גרדיאנט bone→#EFE9E0) עבר ל-.card-frame עצמה כברירת מחדל
   לכל התיבות — כאן נשאר רק color:midnight, ש-COCOON עדיין צריך (טקסט כהה על
   הגרדיאנט), אבל שאר תיבות ה-card-frame לא (הן משתמשות בצבע-הטקסט הרגיל שלהן). */
.cocoon{color:var(--midnight)}
.cocoon-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
/* לוגוטייפ COCOON™ — נכס אמיתי מתוך ספר המותג (מנדלבוים_ספר_מותג_מאוחד.pdf, עמ' 5).
   סבבים קודמים ניסו לשחזר את הלוגו כ-SVG (ידני, ואז מדוד-פיקסלים) — עדיין קירוב.
   בסבב זה: קרופ ישיר של הגרפיקה המקורית מתוך ה-PDF (400dpi), עם רקע לבן מוסר לשקיפות
   בלבד — ללא שום שינוי בצבעים, בפרופורציות או בצורת האותיות עצמן. קובץ: cocoon-logo.png
   (יחס ממדים מקורי 1600×287 = 5.575:1), נטען פעם אחת כתמונת רקע ומשמש בכל מקום ע"י
   .cocoon-mark / .cocoon-logo בגדלים שונים — background-size:contain שומר תמיד על
   היחס המדויק, כך שאין סיכון להתעוותות בשום גודל תצוגה. */
.cocoon-logo,.cocoon-mark{display:inline-block;background:url('../img/cocoon-logo.png') center/contain no-repeat}
/* סבב 54: נוסף display:block — .cocoon-logo ו-.cocoon-tag (הבאנר "Design
   Technology for Deep Sleep" מיד אחריו ב-HTML) שניהם היו inline-block בלי שום
   שבירת שורה ביניהם, כך שהתגית ישבה בטעות לצד הלוגו על אותה שורה במקום מתחתיו
   (ה-margin-top:10px של .cocoon-tag נועד ברור ליצור רווח אנכי מתחת ללוגו, לא
   רווח לצד). .cocoon-logo הוא class ייעודי המשמש רק כאן (בניגוד ל-.cocoon-mark
   המשותף, שמופיע גם בזרימת טקסט רגילה במקומות אחרים ולכן נשאר inline-block). */
.cocoon-logo{height:56px;width:312px;display:block}
.cocoon-mark{height:.8em;width:4.46em;vertical-align:-.12em}
.cocoon-tag{color:var(--foam);background:var(--midnight);display:inline-block;border-radius:var(--radius-pill);padding:5px 14px;font-size:var(--fs-2xs);margin-top:10px}
.cocoon p{margin-top:16px;max-width:65ch;font-weight:300;font-size:var(--fs-base)}
/* סבב 123: שני המשפטים המלאים (ללא שינוי טקסט) בתוך תגית-כמוסה מלאה (pill),
   בדיוק כמו .cocoon-tag ("Design Technology for Deep Sleep") — בלי נקודת-בולט,
   ערוכים אחד מעל השני (כמו הפריסה הקודמת, גריד אנכי). */
.cocoon-points{display:grid;gap:12px}
.cocoon-point{background:var(--midnight);color:var(--foam);border-radius:var(--radius-pill);padding:14px 24px;font-size:var(--fs-sm);text-align:center}
.cocoon-point strong{color:var(--clay);font-weight:600}
/* הרחבת תוכן COCOON — למה זו לא עוד "שכבת נוחות": מבוסס על הכתבה המאושרת
   "כתבת תוכן COCOON 2026 - מעודכן.docx" (סעיף החידוד שנוסף בה), מובא כעת גם
   לאתר עצמו ולא רק למסמך הנפרד. */
.cocoon-deep{grid-column:1/-1;margin-top:40px;padding-top:34px;border-top:1px solid rgba(45,52,54,.18)}
/* סבב 272: תוקן פער אמיתי-שני מסבב 271 — התיקון הקודם תיקן רק את סלקטור ה-
   ::before (מ-.cocoon-deep ל-#cocoon .fm-head), אבל **שתי** הגדרות סגנון
   נוספות שהיו על h3 ועל .cocoon-mark שבתוכו נשארו רשומות תחת ".cocoon-deep
   h3"/".cocoon-deep h3 .cocoon-mark" — סלקטורים ש**גם הם** הפסיקו לתפוס
   משהו מאז ה-h3 עבר ל-.fm-head בסבב 269 (אומת ב-jsdom: 0 matches). התוצאה
   בפועל: ל-h3 לא היה display:flex בכלל (ברירת-המחדל של הדפדפן — לא flex),
   ולכן ה-::before עם width/height מפורשים פשוט לא הוצג (width/height
   מתעלמים על pseudo-element ברירת-מחדל display:inline בתוך non-flex parent)
   — זה ההסבר המדויק ל"עדיין ללא שינוי" שהמנכ"ל דיווח עליו פעמיים. בנוסף,
   .cocoon-mark (הלוגו המוטבע בתוך הכותרת) איבד את מידותיו (height/width),
   מה שהסביר גם את הלוגו המעוות/"COCOon" שנראה בצילום-המסך שצורף.
   שתי ההגדרות אוחדו כעת לתוך #cocoon .fm-head h3 (ולא class חדש) — אותם
   ערכים בדיוק שהיו ב-.cocoon-deep h3 המקורי, רק בסלקטור שתואם את המיקום
   האמיתי של ה-h3 היום. */
/* סבב 273: לבקשת המנכ"ל — גודל הכותרת הוגדל לזהה בדיוק ל-h2.section-title
   שכבר משמש ביועץ השינה/מודל התחושה ("שמור על אחידות בין הפיסקאות"). הערכים
   (font-size/margin-bottom/gap) הועתקו 1:1 מ-.section-title (שורה ~717) —
   לא הופעל class="section-title" ישירות על ה-h3 כדי לא להסתמך על יחסי-
   specificity בין class גלובלי לסלקטור ה-#id הממוקד הזה (שהיה עלול לדרוס
   בטעות ערך אחד ולא אחר אם יתעדכן .section-title בעתיד) — העתקה מפורשת
   נותנת שליטה ברורה וקריאה, ומובטח שהתוצאה זהה בפועל. font-weight:600
   נשאר (h2.section-title לא מגדיר font-weight מפורש, נשען על ברירת-המחדל
   הכבדה של h1-h6 בגיליון-הבסיס — h3 כאן שומר את אותה משקל-פונט מפורש
   שכבר היה לו, לא שונה). .cocoon-mark נשאר ביחס em (.72em/4.01em) —
   מתעדכן אוטומטית ביחס לגודל-הפונט החדש (יחס קבוע, לא נדרש שינוי ערך). */
#cocoon .fm-head h3{font-size:44px;margin-bottom:14px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#cocoon .fm-head h3::before{content:"";flex:0 0 auto;width:4px;height:0.82em;background:var(--terra);border-radius:2px}
#cocoon .fm-head h3 .cocoon-mark{height:.72em;width:4.01em}
.cocoon-deep p{margin-top:12px;max-width:65ch;font-weight:300;font-size:var(--fs-sm);line-height:1.6}
/* מתוחכם ל-3 הרגעים: נעשה שימוש חוזר ברכיב ה-accordion הקיים (ר' .acc-item/
   .acc-head/.acc-body ופונקציית acc() בהמשך), במקום 3 תיבות טקסט תמיד-גלויות —
   אינטראקטיביות אמיתית (קליק לפתיחה), ולא רק עיצוב סטטי. עדכון צבע גבול בלבד
   כדי להיראות טוב על רקע Mineral Sage של הסקשן (ולא הגריג' הבהיר של PDP לבן). */
.cocoon-accordion{margin:22px 0;border-top-color:rgba(45,52,54,.25)}
.cocoon-accordion .acc-item{border-bottom-color:rgba(45,52,54,.25)}
.cocoon-accordion .acc-head{color:var(--midnight);font-size:var(--fs-sm)}
.cocoon-accordion .acc-body{color:var(--midnight);font-weight:300;font-size:var(--fs-xs);line-height:1.6}
.cocoon-close{background:rgba(45,52,54,.09);border-radius:var(--radius-md);padding:16px 18px;max-width:none!important}
.cocoon-close b{font-weight:600}
/* אפליקביליות: אילו דגמים אמיתיים כוללים COCOON היום — נשלף חי מ-CATALOGS
   (ר' renderCocoonProductStrip), לא רשימה קבועה בקוד, כדי שיישאר מסונכרן אם
   הקטלוג משתנה. */
.cocoon-applic{margin-top:34px;padding-top:28px;border-top:1px solid rgba(45,52,54,.25)}
.cocoon-applic h4{font-size:var(--fs-sm);font-weight:600;margin-bottom:14px;color:var(--midnight)}
.cocoon-prod-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
/* סבב 280 (סקירת עיצוב, סעיף 3): .cocoon-prod-card ו-.qrec (למטה) הם אותו
   רכיב-קונספט כמו .p-card — תמונה+שם+מחיר, לחיצה=מעבר לעמוד מוצר — אבל
   נשארו בשפה העיצובית הישנה (רקע לבן שטוח + מסגרת greige) אחרי שרק .p-card
   עודכן. מיושרים כאן לאותה שפה: גרדיאנט רקע עדין + מסגרת טרה-קוטה לפי
   הנחיות המיתוג (עבה יותר ב-.p-card מכיוון שהוא כרטיס גדול יותר; כאן דק
   יותר, מתאים לגודל הכרטיס הקטן בקרוסלה). */
.cocoon-prod-card{background:linear-gradient(180deg,#fff 0%, var(--bone) 100%);border:1px solid var(--terra);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.cocoon-prod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--terra-btn)}
/* סבב 42 — תיקון: height:86px קבוע היה מכויל לרוחב הישן (1180px); ברוחב החדש
   (1920px) אותו גובה קבוע עם width:100% יצר תמונות רחבות-שטוחות במיוחד, מה
   שגרם ל-object-fit:cover לחתוך חלק גדול מאוד מכל תמונת מוצר ("יוצא מהפריים").
   הוחלף ליחס-רוחב-גובה (4:3, כמו בכל שאר תמונות המוצר באתר — .p-visual) כך
   שהחיתוך יישאר עקבי בכל רוחב מסך. */
.cocoon-prod-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.cocoon-prod-card .cpc-body{padding:12px 14px}
.cocoon-prod-card .cpc-name{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--midnight);line-height:1.35;text-align:center}/* 24.8: "שיראה כמו כותרת" - הוגדל, הודגש ומורכז */
.cocoon-prod-card .cpc-price{display:block;font-size:var(--fs-micro);color:var(--midnight);opacity:.75;margin-top:2px}
.cocoon-applic .btn-ghost{border-color:var(--midnight);color:var(--midnight)}
.cocoon-applic .btn-ghost:hover{background:var(--midnight);color:var(--foam)}/* 24.8: הדריסה הקודמת השאירה טקסט כהה על רקע כהה בריחוף */
/* מיקום: באנר הקשרי בעמוד קטגוריית המזרנים בלבד (מוצג/מוסתר ב-renderCategoryPage),
   מקשר חזרה לסקשן ההעמקה בדף הבית — כדי שהמידע לא יישאר "תקוע" רק בדף הבית. */
.cat-cocoon-banner{display:flex;align-items:center;gap:12px;background:var(--foam);border:1px solid var(--mineral);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:22px;font-size:var(--fs-2xs);color:var(--midnight)}
/* סבב 281 (סקירת עיצוב, סעיף 5): לבקשת המנכ"ל — באנר-מיתוג מקביל ל-cat-cocoon-banner
   לקטגוריות מיטות/כריות ומצעים/אקססוריז, שלא היה להן עד כה אף באנר. לא
   COCOON™ (זו טכנולוגיה ספציפית למזרנים) — פלטת bone/terra נייטרלית יותר,
   באותה תבנית מבנה (אייקון+טקסט+קישור) כדי להישאר עקבי עם שפת-האתר. */
.cat-category-banner{display:flex;align-items:center;gap:12px;background:var(--bone);border:1px solid var(--terra);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:22px;font-size:var(--fs-2xs);color:var(--ink)}
.cat-category-banner .ccb-ic{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--terra);color:var(--bone);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm)}
.cat-cocoon-banner .cocoon-mark{height:1em;width:5.575em;flex-shrink:0}
.cat-cocoon-banner a{color:var(--midnight);text-decoration:underline}
/* ===== תיאור-אזור בעמוד קטגוריה — סבב 90 =====
   מוצג בתחילת עמוד הקטגוריה (מיד אחרי כותרת+תקציר) כשנבחר צ'יפ יחיד (relax/mid/perf/
   cocoon), כדי להסביר את ההיגיון של אותה קבוצת דגמים — בדיוק כפי שנוסח ב"מודל
   התחושה" בעמוד הבית. אותו דפוס "פס kicker אנכי בטרהקוטה" שכבר קיים בכותרות מקטע. */
.cat-zone-desc{position:relative;background:var(--greige);border-radius:var(--radius-md);padding:20px 24px 20px 20px;margin-bottom:22px;max-width:none;width:100%}
.cat-zone-desc::before{content:"";position:absolute;top:14px;bottom:14px;right:0;width:4px;background:var(--terra-btn);border-radius:2px}
.cat-zone-desc h2{font-size:var(--fs-card-title);margin:0 0 8px;color:var(--ink)}
.cat-zone-desc p{font-size:var(--fs-md);line-height:1.7;color:var(--ink);margin:0;opacity:.9}
/* סבב 212: תקציר-הפתיחה של הקטגוריה (#catSub בלבד — לא כל שימושי .section-sub
   האחרים באתר) מקבל את אותה גודל-גופן כמו כותרת תיבת-המידע (26px), לבקשת
   המנכ"ל. נכתב כ-#catSub ספציפי (לא שינוי ל-.section-sub הכללי) כדי לא
   להשפיע על טקסטים אחרים המשתמשים באותו class בעמודי הבית/מדריכים/יצירת-קשר. */
#catSub{font-size:26px}

/* ===== פסקת-הצגה ל-Nova Luna בדף הבית — סבב 261, מחליף סבב 260 =====
   סבב 260 בנה קופסת card-frame עם eyebrow/h2/כפתור (כמו #deals) — המנכ"ל
   ביקש בסבב 261 גרסה שונה לגמרי: "עומד לבדו", באותה צורה בדיוק כמו טקסט-
   השליחות מתחת להירו ("שינה היא לא רק סוף היום...", .hero-mission), וצמוד
   לתמונת הבאנר (.home-banner/TAHITI) שמתחתיו — כדי שהקורא יבין שיש חיבור
   בין הטקסט לתמונה. לכן: הוסרה לגמרי ה-CSS הייעודית (.nova-luna-intro
   .eyebrow) — אין class חדש כלל, ה-HTML למטה משתמש ב-.hero-mission הגלובלי
   הקיים (לא scoped ל-.hero — מוגדר כ-class עצמאי, ר' שורה ~619), בלי לשנות
   את ההגדרה המקורית שלו כדי לא להשפיע על השימוש הקיים תחת ההירו. הצמידות
   לתמונה מושגת ב-HTML עם style="margin-top:0" על ה-.home-banner הספציפי
   הזה בלבד (לא על .home-banner השני, TUDOR, שאין לו טקסט מעליו וצריך את
   המרווח הרגיל). */

/* ===== באנר-בליד תמונה (בין מבצעים ליועץ השינה, ובין מודל-התחושה ל-COCOON) —
   סבב 183, פושט בסבב 185, תוקן יחס-רוחב/גובה בסבב 186, תוקן שוב בסבב 188 =====
   full-bleed אמיתי: ה-<section> לא עטוף ב-.container (אותה טכניקה בדיוק כמו
   .hero-visual/.deals-slider) כדי שהתמונה תיגע בקצה המסך משני הצדדים.
   סבב 185: לבקשת המנכ"ל הוסרו ה-scrim הכהה וכל שכבת הטקסט/כפתור — נשארה
   תמונה נקייה בלבד.
   סבב 187: שתי התמונות (TAHITI/TUDOR מקולקציית Nova Luna) נחתכו מראש
   (Python/PIL, לא רק CSS) מה-TIFF המקורי ליחס קבוע 2.35:1, ממורכזות
   ידנית סביב המיטה עצמה — לא הסתמכות עיוורת על object-fit:cover.
   סבב 188: המנכ"ל דיווח שבמסך רחב מוצג רק חלק עליון מהמיטה — הסיבה: הגובה
   שהיה כאן (clamp(420px,50vw,680px)) נתקע בתקרה של 680px גם כשהרוחב ממשיך
   לגדול, כך שבמסך רחב (למשל 2600px) יחס הרוחב-גובה בפועל של הקונטיינר
   (2600/680≈3.8:1) חרג משמעותית מיחס החיתוך המדויק שנחתך מראש (2.35:1) —
   ו-object-fit:cover נאלץ לגזור עוד, מעבר לקומפוזיציה המכוונת, וקטע את
   התחתית של המיטה. הוחלף ל-aspect-ratio:2.35 כדי שהקונטיינר יתאים בדיוק
   ליחס החיתוך המוכן מראש.
   סבב 189: אבל aspect-ratio בלי width מפורש גרם לבאג נפרד וגרוע יותר — בלי
   width:100% מפורש, חלק מהדפדפנים מחשבים את רוחב הבלוק כ"מתכווץ-להתאמה"
   (shrink-to-fit, נגזר מהגובה הקבוע/מוגבל ע"י max-height כפול היחס) במקום
   להימתח למלוא רוחב המסך כמו בלוק רגיל — כך שהבאנר "התכווץ" לרוחב חלקי
   וב-RTL בלוק מתכווץ נצמד לצד ימין (בדיוק הבאג שדווח: "aligned to the
   right"). נוסף width:100% מפורש כדי לבטל את העמימות הזו לגמרי. */
.home-banner{position:relative;width:100%;aspect-ratio:2.35;max-height:880px;min-height:220px;overflow:hidden;margin:64px 0}
.home-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:720px){
  .home-banner{margin:44px 0}
}

/* ===== יועץ השינה ===== */
/* סבב 51: רקע לבן טהור (#fff) התנגש ויזואלית עם הגוון הקרם/חם של שאר העמוד —
   הוחלף ב-var(--bone) (זהה לרקע העמוד עצמו). למה לא greige: כפתורי התשובות
   (.quiz-opt, בהמשך) כבר משתמשים ב-var(--greige) — אם גם הכרטיס היה greige,
   הכפתורים היו "נעלמים" בתוך הכרטיס (אותו צבע בדיוק, רק גבול שקוף עד הובר). */
.quiz-box{background:var(--bone);border:1.5px solid var(--terra);border-radius:var(--radius-lg);padding:34px;max-width:720px;margin:0 auto;box-shadow:var(--shadow-sm)}
.quiz-q{font-size:var(--fs-section-h);margin-bottom:18px}
.quiz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.quiz-opt{background:var(--greige);border:1.5px solid transparent;border-radius:var(--radius-md);padding:16px 14px;font-size:var(--fs-sm);font-weight:500;text-align:center;transition:border-color var(--dur-base) var(--ease-standard)}
.quiz-opt:hover{border-color:var(--sage)}
.quiz-progress{display:flex;gap:6px;margin-bottom:22px}
.quiz-progress i{height:4px;flex:1;background:var(--greige);border-radius:var(--radius-pill);transition:background var(--dur-base)}
.quiz-progress i.done{background:var(--sage)}
.quiz-progress i.current{background:var(--terra)}
.quiz-result h3{font-size:var(--fs-section-h);margin-bottom:6px}
.quiz-result .rec{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.rec-card{flex:1;min-width:170px;background:var(--greige);border-radius:var(--radius-md);padding:18px;cursor:pointer;transition:transform var(--dur-base) var(--ease-standard)}
.rec-card:hover{transform:translateY(-3px)}
.rec-card b{font-size:var(--fs-base);display:block}
.rec-card span{font-size:var(--fs-2xs);color:var(--sage-deep)}
/* יועץ השינה — גרסה בולטת ומורחבת (בהשראת Helix/Casper/Saatva) */
/* סבב 146: border-top הוסף כאן כי מבצעים/יועץ-השינה/מודל-התחושה רצו ברצף על
   אותו bone שקט כמעט זהה בלי שום הפרדה. סבב 147: הפתרון הוחלף לגמרי — המנכ"ל
   ביקש ששלושתם ייכנסו ל"קופסה" (card-frame) כמו COCOON/הקולקציות שלנו, ולא רק
   קו-הפרדה דק. הרקע/הגרדיאנט של הסקשן הזה (וגם border-top) הוסרו — הסקשן עצמו
   חוזר ל-bone שקוף רגיל (ר' body{background:var(--bone)}), וה-card-frame על
   .container (ר' HTML: .container.container--wide.card-frame.quiz-wrap) הוא
   מה שנותן את הרקע/הגבול/ההפרדה מהסקשנים השכנים עכשיו — הפרדה חזקה בהרבה
   מקו דק (כרטיס צף עם שוליים ניכרים משני הצדדים), ובאותה תקרת-רוחב בדיוק כמו
   COCOON. */
.quiz-section{}
.quiz-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center}
.quiz-intro-col .eyebrow{display:inline-block;color:var(--terra-btn);letter-spacing:.14em;font-size:var(--fs-2xs);font-weight:600;margin-bottom:10px}
.quiz-intro-col h2{line-height:1.12;color:var(--ink)}
.quiz-intro-col>p{font-weight:300;font-size:var(--fs-base);line-height:1.6;color:var(--ink);max-width:65ch}
.quiz-vps{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:11px}
.quiz-vps li{position:relative;padding-inline-start:28px;font-size:var(--fs-sm);font-weight:300;line-height:1.4}
/* סבב 237: תג-הצ'קמארק (✓) היה var(--terra) הגולמי מתחת לגליף לבן 11px — 3.83:1,
   נכשל ב-AA לטקסט קטן. הוחלף ל-var(--terra-btn), 5.08:1 מול לבן. */
.quiz-vps li::before{content:"";position:absolute;inset-inline-start:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--terra-btn);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.quiz-vps li::after{content:"✓";position:absolute;inset-inline-start:4px;top:2px;color:#fff;font-size:11px;font-weight:700}
.quiz-section .quiz-box{max-width:none;margin:0}
.quiz-step-n{font-size:var(--fs-micro);font-weight:600;color:var(--sage-deep);letter-spacing:.06em;margin-bottom:8px}
.quiz-hint{font-size:var(--fs-2xs);font-weight:300;color:var(--sage-deep);margin:-8px 0 16px}
.quiz-opt.sel{border-color:var(--terra);background:#fff;color:var(--terra-btn)}
.quiz-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:center}
.quiz-start{text-align:center;padding:14px 0}
.quiz-start .quiz-q{margin-bottom:8px}
.quiz-start .btn{margin-top:8px}
.quiz-result .eyebrow{display:inline-block;color:var(--terra-btn);letter-spacing:.14em;font-size:var(--fs-2xs);font-weight:600;margin-bottom:4px}
.quiz-recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px}
/* סבב 280: ר' הערה ליד .cocoon-prod-card — אותו איחוד שפה עיצובית. */
.qrec{background:linear-gradient(180deg,#fff 0%, var(--bone) 100%);border:1px solid var(--terra);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;text-align:right;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.qrec:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--terra-btn)}
.qrec img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--greige);display:block}
.qrec-b{padding:12px}
.qrec-match{display:inline-block;font-size:var(--fs-micro);color:var(--terra-btn);font-weight:700;margin-bottom:4px}
.qrec-b b{display:block;font-size:var(--fs-xs);line-height:1.25}
.qrec-b>span{font-size:var(--fs-micro);color:var(--sage-deep);display:block;margin-top:3px}
.qrec-price{font-weight:700;margin-top:7px;font-size:var(--fs-xs)}
@media(max-width:920px){.quiz-wrap{grid-template-columns:1fr;gap:26px}.quiz-section .quiz-box{max-width:640px;margin:0 auto}}

/* ===== מודל התחושה — אקספלורר אינטראקטיבי (סבב 35) =====
   רצף תחושה אחד (RELAX↔PERFORMANCE) + שני מדדי איכות בלתי-תלויים. צבעי מותג בלבד:
   Sage=RELAX, Terracotta=PERFORMANCE (נגיעה), Ink/Bone/Greige לשאר. */
/* סבב 53: הוסף גרדיאנט עדין כדי שהכרטיסים הפנימיים (bone) יהיו ניכרים על רקע
   הסקשן. סבב 146: border-top הוסף להפרדה מיועץ-השינה שמעליו. סבב 147: שני אלה
   הוחלפו — כל הסקשן (מבצעים/יועץ-השינה/מודל-התחושה) עובר לקופסת card-frame
   אחידה כמו COCOON/הקולקציות שלנו (ר' HTML: .container.container--wide
   .card-frame). הסקשן עצמו חוזר ל-bone שקוף רגיל בלי גרדיאנט/גבול — ה-card-frame
   הוא שנותן רקע+צל+הפרדה עכשיו, בעקביות מלאה עם שאר האתר. */
.feel-model{}
.feel-model .eyebrow{display:inline-block;color:var(--terra-btn);letter-spacing:.14em;font-size:var(--fs-2xs);font-weight:600;margin-bottom:10px}
.fm-head{max-width:720px;margin-bottom:32px}
.fm-lead{font-size:var(--fs-base);font-weight:300;color:var(--ink);line-height:1.7;margin-top:8px;max-width:65ch}
/* סבב 274: לבקשת המנכ"ל — הכותרת וגוף הטקסט נמתחים לרוחב מלא של השורה, אך ורק
   בפרק קוקון (#cocoon) ובמודל התחושה (#feel-model) — לא בשום שימוש אחר
   אפשרי של .fm-head/.fm-lead/.cocoon-deep p (כרגע רק שני האלה משתמשים בהם
   בפועל, אבל הסקופ מפורש ל-id של כל סקשן, לא לכלל הגלובלי, כדי לא לשנות
   ברירת-מחדל לכל שימוש עתידי). max-width:none מבטל את ההגבלה (720px על
   .fm-head, 65ch על .fm-lead/.cocoon-deep p) בלי לגעת בערכי ברירת-המחדל
   עצמם (עדיין רלוונטיים למקומות אחרים שלא צוינו כאן). */
#feel-model .fm-head,#cocoon .fm-head{max-width:none}
/* סבב 276: התיקון בסבב 275 (הקטנת margin-bottom ל-12px) היה שגוי מיסודו —
   ההנחה ש"שולי CSS מתכווצים" הייתה שגויה, כי #cocoon עדיין ישב בתוך container
   עם class="cocoon-grid" (display:grid) — ופריטי-grid לא מתכווצים (collapse)
   זה עם זה, בניגוד לזרימת-בלוק רגילה. בנוסף ל-h3 היה style="margin:0" מוטבע
   (inline) שדרס לגמרי את margin-bottom:14px של #cocoon .fm-head h3 (שורה 814).
   התוצאה בפועל: מרווח = 0 (מ-h3) + 12px (fm-head) + 44px (cocoon-grid gap) +
   0 (cocoon-deep) = 56px — מרווח גדול ומנגנון שונה לגמרי ממודל-התחושה.
   התיקון האמיתי (סבב 276): הוסרה class="cocoon-grid" מה-container (שורה
   2152 — הפריסה הדו-עמודתית שהיא נועדה לה כבר לא קיימת בתוכן הנוכחי), הוסר
   ה-style="margin:0" המוטבע מה-h3 (כך שהוא חוזר להשתמש ב-margin-bottom:14px
   מה-class, בדיוק כמו .section-title אצל מודל-התחושה), ובוטל ה-override כאן
   לגמרי — כעת #cocoon חוזר לזרימת-בלוק רגילה, ה-margin-bottom:14px של ה-h3
   "בורח" דרך גבול fm-head (bottom margin collapse, כי אין border/padding),
   ומתכווץ (collapse) מול margin-top:12px של הפסקה הראשונה שב-cocoon-deep
   (אח צמוד) לפי הערך הגדול מביניהם → 14px — זהה במדויק למנגנון ולתוצאה של
   מודל התחושה (section-title margin-bottom:14px collapse מול fm-lead
   margin-top:8px → 14px). */
#feel-model .fm-lead{max-width:none}
#cocoon .cocoon-deep p{max-width:none}
/* סבב 277: לבקשת המנכ"ל — אותה מתיחה לרוחב מלא כמו fm-lead/cocoon-deep p,
   הופעלה גם על .fm-desc (הטקסט המתאר את הסיווג RELAX/BALANCE/PERFORMANCE
   מתחת לתג המספרי בסליידר מודל-התחושה) — היה מוגבל ל-65ch, כעת נפתח לרוחב
   המלא של .fm-explorer, scoped ל-#feel-model בלבד כמו שאר הכללים כאן. */
#feel-model .fm-desc{max-width:none}
/* סבב 153: המנכ"ל ביקש לחזור לגרסה המקורית של הסליידר עצמו, כפי שנבנה
   לראשונה (סבב 35–58), אחרי כמה סבבי ניסוי (147–152: הסרת כרטיס fm-explorer,
   הזזת fm-badge לפי אזור, הגדלת מספרי-קצה, כפתורי pill) שאף אחד מהם לא צלח.
   fm-explorer/fm-ends/fm-end/fm-scale/fm-readout/fm-badge חוזרים בדיוק לקוד
   המקורי. הכרטיס החיצוני (container--wide card-frame על הסקשן, סבב 147/12)
   ורקע הסקשן האחיד (bone, סבב 147) נשארים — החלטה נפרדת ומאושרת בפני עצמה
   (איחוד רוחב+רקע לכל שלוש הסקשנים מבצעים/יועץ-השינה/מודל-התחושה). */
/* סבב 52: רקע לבן טהור (#fff) הוחלף ב-var(--bone), אותו תיקון שניתן לכרטיס
   יועץ השינה בסבב 51 — הפאנל עדיין ניכר בזכות הגבול (greige) והצל, בלי הניגוד
   החד מול הגוון הקרם של שאר העמוד. */
.fm-explorer{background:var(--bone);border:1px solid var(--greige);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:30px 28px}
/* סבב 169: לבקשת המנכ"ל — הניסוח המלא (עברית+אנגלית) בשתי הקצוות הוחלף
   למילת-המפתח האנגלית בלבד (RELAX/PERFORMANCE), ונוסף קצה שלישי באמצע
   (BALANCE) מעל "מאוזן" הקיים ב-.fm-scale מתחת לסליידר — אותה שיטת פריסה
   בדיוק (flex + justify-content:space-between עם 3 פריטים) כבר משמשת שם,
   כך שהיישור בין BALANCE ל"מאוזן" מתחתיו עקבי איתו. font-size הוגדל טיפה
   (fs-2xs←fs-sm) עכשיו שהטקסט קצר בהרבה ויש יותר מקום. */
.fm-ends{display:flex;justify-content:space-between;font-size:var(--fs-sm);font-weight:600;margin-bottom:12px;gap:10px}
.fm-end.relax{color:var(--sage-deep)}
.fm-end.balance{color:var(--ink)}
.fm-end.perf{color:var(--terra-btn)}
.fm-range{width:100%;height:12px;-webkit-appearance:none;appearance:none;background:linear-gradient(to left,var(--sage) 0%,var(--greige) 50%,var(--terra) 100%);border-radius:var(--radius-pill);direction:rtl;outline-offset:5px;cursor:pointer}
.fm-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--ink);border:3px solid var(--bone);box-shadow:var(--shadow-md);cursor:grab;transition:transform var(--dur-fast) var(--ease-standard)}
.fm-range:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.1)}
.fm-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--ink);border:3px solid var(--bone);box-shadow:var(--shadow-md);cursor:grab}
.fm-scale{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--sage-deep);margin-top:8px}
.fm-readout{display:flex;gap:18px;align-items:center;margin:24px 0 4px}
/* סבב 55: הצבע לא עוד קפיצה גסה בין 3 גוונים שטוחים (sage/oak/terra) לפי אזור —
   המנכ"ל ציין שערך 4 (רגע אחרי סף ה-RELAX) צריך "לנטות לירוק", וב-oak שטוח לכל
   טווח 4–6 הוא נראה זהה בין 4 ל-6 למרות שהם קרובים לקצוות שונים של הסולם. עכשיו
   ה-JS (fmRender) קובע גוון ברציפות לפי הערך המדויק (1–10) עם color-mix בין sage
   ל-terra — 4 קרוב יותר לירוק, 6 קרוב יותר לטרהקוטה, ורק 5.5 בדיוק באמצע. הבסיס
   (var(--sage)) נשאר כברירת מחדל ל-no-JS/לפני טעינה (תואם לערך ברירת המחדל 3 ב-HTML). */
.fm-badge{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;border-radius:var(--radius-lg);background:var(--sage);color:var(--bone);transition:background var(--dur-base) var(--ease-standard)}
.fm-badge b{font-size:40px;font-weight:700;line-height:1}
/* סבב 169: תווית האזור בתג עברה למילת-מפתח אנגלית בלבד (ר' fmZone ב-JS,
   ותיקון .fm-ends למעלה) — פחות טקסט לדחוס בתוך עיגול 96px, אז font-size
   הוגדל טיפה (11px→fs-micro). */
.fm-badge span{font-size:var(--fs-micro);font-weight:600;margin-top:5px;text-align:center;padding:0 6px;letter-spacing:.02em;line-height:1.3}
.fm-desc{font-size:var(--fs-sm);line-height:1.65;font-weight:300;color:var(--ink);margin:0;max-width:65ch}
.fm-matches{margin-top:22px;border-top:1px solid var(--greige);padding-top:20px}
.fm-matches-title{font-size:var(--fs-sm);font-weight:600;margin-bottom:14px}
.fm-matches-sub{font-weight:400;font-size:var(--fs-2xs);color:var(--sage-deep)}
.fm-match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
/* סבב 57: היה var(--bone) — זהה בדיוק לרקע ההורה שלו (.fm-explorer, שהפך bone
   בסבב 52), כך שכרטיסי ההתאמה (כולל שתי שורות פרדייז החדשות) "נעלמו" בתוכו.
   הוחלף ל-greige, אותו דפוס bone-חיצוני/greige-פנימי שכבר עובד ב-quiz-box/quiz-opt.
   הגבול הפך ל-transparent (כמו ב-.quiz-opt) במקום greige זהה לרקע — כך שהוא לא
   "נעלם" גם הוא, ומשמש רק לאפקט ה-hover (border-color:var(--sage)) שכבר קיים. */
.fm-mc{display:block;background:var(--greige);border:1px solid transparent;border-radius:var(--radius-md);padding:14px;cursor:pointer;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.fm-mc:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--sage)}
.fm-mc-name{font-size:var(--fs-sm);font-weight:600;margin-bottom:10px}
.fm-mc-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-micro);color:var(--sage-deep);margin-top:6px}
.fm-meter{display:inline-flex;gap:3px}
.fm-meter i{width:9px;height:9px;border-radius:2px;background:var(--greige);display:block}
.fm-meter i.on{background:var(--ink)}
.fm-meter i.half{background:linear-gradient(to left,var(--ink) 50%,var(--greige) 50%)}
.fm-meter i.rng{background:color-mix(in oklab,var(--ink) 26%,#fff)}
.fm-meter i.rng-half{background:linear-gradient(to left,color-mix(in oklab,var(--ink) 26%,#fff) 50%,var(--greige) 50%)}
/* סבב 57: .fm-meter משותף גם למודל ההשוואה (.compare-modal, רקע לבן — שם ה-greige
   הבררת-מחדל נותן ניגוד טוב, לא שונה). אבל בתוך .fm-mc (שהפך greige באותו סבב),
   נקודות ה"ריק" (ברירת המחדל, ללא on/half) היו נעלמות — אותו רקע בדיוק כמו הכרטיס.
   Override ממוקד רק לתוך .fm-mc: הנקודות הריקות הופכות ל-bone (בהיר יותר מ-greige),
   כך שהן מנוגדות לכרטיס גם בלי לגעת בברירת המחדל המשותפת (rng/rng-half לא
   רלוונטיים כאן — fmMeter() לשימוש בכרטיסים לא מייצר אותם, רק on/half).
   סבב 58 — תיקון דחוף: `.fm-mc .fm-meter i` ו-`.fm-meter i.on` (הבסיסי) יש להם
   אותה ספציפיות בדיוק (2 מחלקות+תג), וה-override כאן הופיע *אחרי* i.on במקור —
   כך שה-bone ניצח גם על נקודות מלאות (on), ומחק את הצבע הכהה שמייצג ניקוד בפועל
   ("הצבעים של הניקוד השתבשו"). נוסף כאן במפורש `.fm-mc .fm-meter i.on` עם
   ספציפיות גבוהה יותר (3 מחלקות+תג) כדי להבטיח שהניקוד המלא תמיד ינצח, בלי
   תלות בסדר ההופעה בקובץ. */
.fm-mc .fm-meter i{background:var(--bone)}
.fm-mc .fm-meter i.on{background:var(--ink)}
.fm-mc .fm-meter i.half{background:linear-gradient(to left,var(--ink) 50%,var(--bone) 50%)}
.fm-meter-rng{font-size:10px;color:var(--sage-deep);margin-inline-start:6px}
.fm-axes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.fm-axis{background:var(--bone);border:1px solid var(--greige);border-radius:var(--radius-lg);padding:22px 24px}
.fm-axis-h{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.fm-axis-ic{width:40px;height:40px;border-radius:var(--radius-md);background:var(--foam);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fm-axis-ic svg{width:22px;height:22px;stroke:var(--sage-deep);fill:none;stroke-width:1.7}
.fm-axis h3{font-size:var(--fs-md)}
.fm-axis p{font-size:var(--fs-2xs);font-weight:300;line-height:1.65;color:var(--ink)}
.fm-legend{margin-top:12px;font-size:var(--fs-micro);color:var(--sage-deep);background:var(--bone);border-radius:var(--radius-sm);padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px 16px}
.fm-legend-item{display:inline-flex;align-items:center;gap:6px}
.fm-foot{margin-top:22px;font-size:var(--fs-2xs);font-weight:300;color:var(--ink);text-align:center;max-width:65ch;margin-inline:auto;line-height:1.65}
@media(max-width:920px){.fm-match-grid{grid-template-columns:1fr 1fr}.fm-axes{grid-template-columns:1fr}}
@media(max-width:560px){.fm-readout{flex-direction:column;text-align:center}}

/* ===== גריד מוצרים ===== */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.chip{background:var(--bone);border:1.5px solid var(--greige);border-radius:var(--radius-pill);padding:8px 18px;font-size:var(--fs-2xs);font-weight:500;transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.chip:hover{border-color:var(--sage)}
/* מותאם לרכיב Tag של מערכת העיצוב: מצב פעיל = "שטיפת" טרהקוטה עדינה (border+טקסט טרהקוטה),
   לא מילוי מלא בצבע — כך שגם פילטר פעיל תמידי לא הופך לצבע דומיננטי (עקרון 10% טרהקוטה). */
.chip.on{background:color-mix(in oklab, var(--terra) 12%, white);border-color:var(--terra);color:var(--terra-btn)}
/* ===== סרגל סינון מחיר/מידה בעמוד קטגוריה — סבב 181 (עיצוב אקורדיון) =====
   מחליף את גרסת ה-<select> הקודמת (סבב 180) בסרגל צדדי (aside) בסגנון
   אקורדיון עם checkbox לכל אפשרות + מונה תוצאות חי — לפי רפרנס ויזואלי
   שסיפק המנכ"ל. יושב מימין לרשת המוצרים (עמוד ב-dir="rtl", כך שהפריט
   הראשון במקור ה-HTML — ה-aside — מוצג מימין באופן טבעי, בלי float/order).
   האפשרויות (מידות, טווחי מחיר) עדיין נגזרות דינמית מהדאטה האמיתית של כל
   קטגוריה (computePriceBands/computeSizeOptions ב-JS) — לא רשימה קבועה,
   והמונה ליד כל אפשרות הוא ספירה "פאסטית" אמיתית (מחשב כמה מוצרים תואמים
   בהינתן שאר הפילטרים הפעילים, לא רק ספירה גולמית של כל הקטגוריה). */
/* סבב 182: תוקן באג פריסה — ב-dir="rtl", עמודת-הרשת הראשונה (הראשונה ברשימת
   grid-template-columns) ממוקמת פיזית מימין, כלומר מוקצית לפריט ה-DOM הראשון
   (aside, שממילא מופיע מימין). "1fr 260px" הקצה בטעות את העמודה הגמישה (1fr)
   ל-aside (שהתנפח למלוא הרוחב) ואת ה-260px הצר לרשת המוצרים (שנדחסה ל-3
   עמודות של כ-80px). "260px 1fr" מתקן: aside מקבל את הרוחב הקבוע הצר,
   רשת המוצרים מקבלת את השאר. */
.cat-layout{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start}
.cat-filters{position:sticky;top:110px;display:flex;flex-direction:column}
.filter-acc-item{border-bottom:1px solid var(--greige);padding:16px 0}
.filter-acc-item:first-child{border-top:1px solid var(--greige)}
.filter-acc-head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;font-family:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink);cursor:pointer;padding:0;text-align:right}
.filter-acc-head .ico{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--greige);display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--ink);flex-shrink:0;transition:border-color var(--dur-base) var(--ease-standard)}
.filter-acc-head:hover .ico{border-color:var(--sage)}
.filter-acc-body{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.filter-acc-body[hidden]{display:none}
.filter-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-2xs);color:var(--ink);cursor:pointer}
.filter-opt input[type=checkbox]{width:16px;height:16px;accent-color:var(--terra-btn);cursor:pointer;flex-shrink:0}
.filter-opt .lbl{display:flex;align-items:center;gap:8px}
.filter-opt .cnt{color:var(--sage-deep);font-size:11px;font-variant-numeric:tabular-nums}
.filter-opt.zero{opacity:.4}
.filter-opt.zero input{cursor:not-allowed}
.filter-reset{align-self:flex-start;background:none;border:none;font-family:inherit;font-size:var(--fs-2xs);font-weight:500;color:var(--terra-btn);text-decoration:underline;cursor:pointer;padding:0 0 16px}
.cat-result-count{font-size:var(--fs-2xs);color:var(--sage-deep);margin-bottom:14px}
@media(max-width:900px){
  .cat-layout{grid-template-columns:1fr}
  .cat-filters{position:static;order:2;border-top:1px solid var(--greige);margin-top:8px;padding-top:8px}
  .cat-main{order:1}
}
.grid-products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1200px){.cat-layout .grid-products{grid-template-columns:repeat(2,1fr)}}
/* סבב 130: סליידר "מבצעים" בדף הבית — שורה אחת גוללת (4 כרטיסים ברוחב העמוד)
   במקום רשת קבועה של 2 שורות (המנכ"ל: "clogs the page"), בהשראת דוגמת TEMPUR
   שצורפה (שורה אחת, חצים משני הצדדים). scroll-snap טבעי של הדפדפן — בלי JS
   מורכב לגרירה/מגע, רק חצים שמזיזים כרטיס אחד בכל לחיצה (dealsNav()). */
.deals-slider{position:relative}
/* היסטוריית סבבים 138–144 (תבנית "קרוסלת-בליד א-סימטרית", בהשראת הולנדיה —
   שורת הכרטיסים יצאה מ-.container ודממה עד קצה המסך): כמה סבבים של תיקוני-
   ריפוד/רוחב-תקרה/יישור-כותרת (מתועדים בפירוט בהיסטוריית ה-git/audit-report.md
   סבבים 138–144, לא כאן — הועברו לשם כדי לא להעמיס). סבב 147: המנכ"ל ביקש
   שמבצעים ייכנס ל"קופסה" (card-frame) כמו COCOON/הקולקציות שלנו — בליד עד קצה
   המסך לא הגיוני בתוך כרטיס מעוגל עם צל, אז התבנית הוחלפה: הכותרת+השורה חזרו
   להיות יחד באותו .container.container--wide.card-frame (ר' HTML), הקרוסלה
   האופקית (חצים+גלילה) נשארת אבל עכשיו חסומה בגבולות הכרטיס. */
.deals-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px}
/* סבב 168: "רעידה" נוספת שנותרה בסליידר המבצעים לא הייתה קשורה לגלילה עצמה —
   העכבר יושב קרוב לחץ (למשל ליד הכרטיס הראשון), וכשהכרטיסים גולשים מתחתיו
   תוך כדי האנימציה, כל כרטיס שחוצה את מיקום הסמן "נכנס" רגעית ל-:hover
   (translateY(-4px)+צל+זום-תמונה, ר' .p-card:hover) ואז יוצא ממנו — נראה כגל
   של קפיצות קטנות. dealsNav (ר' JS) מוסיף/מסיר את המחלקה הזו על .deals-track
   רק למשך אנימציית הניווט התכנותית, ומנטרלת אירועי עכבר על הכרטיסים כדי
   שאף כרטיס לא "יתפוס" hover בזמן שהוא חולף מתחת לסמן הנייח. */
.deals-track.is-navigating .p-card{pointer-events:none}
.deals-track::-webkit-scrollbar{display:none}
/* היה flex:0 0 calc((100% - 66px)/4) — התאמה מדויקת ל-4 כרטיסים בדיוק בלי הצצה.
   סבב 138 ניסה clamp(230px,22vw,300px) (רוחב קבוע-יחסית, לא תלוי ב-100% של
   ההורה) כדי שתמיד יישאר "שבר" כרטיס גלוי — אבל זה יצר באג הפוך שדווח בפועל:
   עם 300px כתקרה, ב-6 המוצרים הקיימים ב-dealsGrid ובמסך רחב (אחרי תיקון סבב 140
   ל-.deals-bleed) כל 6 הכרטיסים פשוט הצטמצמו-פנימה ונכנסו בשלמותם לרצועה בלי
   גלישה כלל — אז לא נשאר מה לגלול, החצים הפסיקו לעשות משהו, ו-flex-start
   (ברירת המחדל, שבתוך flex ב-RTL "אורז" ימינה) השאיר את כל 6 הכרטיסים צמודים
   לימין עם רווח ריק בצד שמאל. סבב 141: הוחלף לאחוז יחסי (23% מרוחב ההורה בפועל,
   עם רצפת min-width כדי שלא יקטן מדי בדסקטופ צר) — בדיוק כמו שהמובייל
   (flex-basis:86%, שורה ~1043 למטה) כבר עשה נכון מההתחלה. אחוז יחסי מתכייל
   אוטומטית לפי הרוחב האמיתי של הרצועה בכל גודל מסך (במקום תקרת-פיקסלים קבועה),
   כך שתמיד יוצגו כ-4 כרטיסים מלאים + הצצה חלקית לכרטיס נוסף, גם במוניטורים
   ענקיים — ומכיוון שיש בפועל 6 מוצרים, תמיד יישאר צורך אמיתי לגלול. */
.deals-track .p-card{flex:0 0 max(210px, calc(23% - 18px));scroll-snap-align:start;min-width:0}
.deals-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--greige);box-shadow:var(--shadow-sm);font-size:var(--fs-md);line-height:1;color:var(--ink);cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;transition:background var(--dur-base)}
.deals-arrow:hover{background:var(--bone)}
/* סבב 132: תוקן כיוון הפוך — .deals-track הוא flex בתוך דף RTL, כך שהכרטיס
   הראשון (dealsIdx=0) יושב מימין וכל כרטיס הבא ממשיך שמאלה. לכן הכפתור שמקדם
   קדימה (next, dealsNav(1)) חייב לשבת בקצה שמאל (שם נמצא התוכן הבא שטרם נחשף),
   והכפתור שחוזר אחורה (prev, dealsNav(-1)) בקצה ימין (חזרה לתחילת הרשימה) —
   לפני התיקון זה היה הפוך (next מימין, prev משמאל), מה שגרם לתחושת "גלילה
   הפוכה" שדווחה.
   סבב 147: לאחר שהסליידר חזר להיות חסום בתוך card-frame (ר' הערה ליד
   .deals-slider למעלה), אין יותר צורך בביטויי-ריפוד מיוחדים שמתחשבים בבליד —
   שני החצים פשוט צמודים בריפוד קטן וקבוע לקצוות הריצועה עצמה, בתוך הכרטיס. */
.deals-arrow.next{left:8px}
.deals-arrow.prev{right:8px}
/* סבב 278: לבקשת המנכ"ל — עדכון מראה כרטיס-מוצר (.p-card), המשמש בכל רשתות
   המוצרים באתר (רשת קטגוריה/prodGrid, "משלימים את החוויה"/crossSell,
   "נצפו לאחרונה"/recentGrid, קרוסלת deals) — שינוי אחד כאן חל בכולן. הרקע
   הלבן-שטוח הוחלף בגרדיאנט עדין (לבן→bone, כמו .card-frame במקומות אחרים
   באתר) וצל מנוחה קל (elevated look).
   סבב 279: לבקשת המנכ"ל — מסגרת בטרה-קוטה מודגשת לפי הנחיות המיתוג (ר' הערת
   --terra למעלה: "הצבע המוביל בבלוקים דקורטיביים", לא --terra-btn שנועד
   לטקסט/רקע עם ניגודיות מאומתת — מסגרת דקורטיבית משתמשת ב-terra המלא, לא
   בגרסת-הנגישות המוכהה). גלויה תמיד (לא רק בהובר), ומתעבה/מתכהה קלות בהובר
   ל--terra-btn לאפקט אינטראקטיבי.
   סבב 281 (סקירת עיצוב, סעיף 6): רדיוס-הפינות הוחזר מ-xl ל-lg. בסבב 278
   הוא הוגדל ל-xl מתוך מחשבה ש"רחב יותר = מעודכן יותר", אבל זה סתר את הכלל
   שנקבע עכשיו במפורש (ר' --radius-lg/--radius-xl למעלה): xl שמור לעטיפות-
   סקשן גדולות (.card-frame) בלבד, וכרטיס-מוצר שייך למשפחת "כרטיס סטנדרטי"
   (lg) יחד עם info-card/blog-card/nav-pop/מגה-תפריט וכו'. */
.p-card{background:linear-gradient(180deg,#fff 0%, var(--bone) 100%);border-radius:var(--radius-lg);overflow:hidden;border:1.5px solid var(--terra);box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);cursor:pointer}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--terra-btn)}
.p-visual{aspect-ratio:4/3;background:var(--greige);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.p-visual img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
/* בהשראת הובר על כרטיס מוצר שנצפה ב-aminach.co.il: זום עדין על התמונה בהובר.
   סבב 192: כפתור "צפייה מהירה במוצר" + שכבת ההצללה (quick-scrim/quick-view)
   הוסרו לבקשת המנכ"ל מכל הכרטיסים באתר — לחיצה על הכרטיס עצמו כבר פותחת
   את עמוד המוצר (viewProduct), כך שהכפתור היה כפול. נשאר רק זום עדין. */
.p-card:hover .p-visual img{transform:scale(1.055)}
/* תיקון עקביות תמונות מוצר (בעקבות בדיקה מול mandelboim.com בפועל):
   התגלה שבצילומי המזרנים האמיתיים יש חוסר עקביות משמעותי בזווית/היקף הצילום —
   חלק ממולאים את הפריים (טוקיו, סן-טרופה) וחלק צולמו קטנים ומרוחקים עם המון
   רקע לבן ריק סביבם (איביזה, נאמוס) — וה-object-fit:cover הקודם החמיר את זה,
   כי הוא גזר כל תמונה לפי המידות שלה בפריים. .p-visual.isolate מנרמל את כולן
   לאותה שפה חזותית של ריו: המוצר "צף" באמצע ברקע ניטרלי אחיד, עם ריווח וגודל
   קבועים ללא תלות בקרופ המקורי של הצילום. */
.p-visual.isolate{background:#fff}
.p-visual.isolate img{width:auto;height:auto;max-width:90%;max-height:85%;object-fit:contain;mix-blend-mode:multiply}
/* .p-visual.vignette — למוצרים בקטגוריית מיטות שאין עבורם עדיין צילום לייף-סטייל
   בחדר שינה אמיתי (זוהתה דוגמה מאומתת: מיטת קארין, מוצגת באתר האמיתי עצמו על
   רקע לבן שטוח, בניגוד לכל שכנותיה). לא הופקה כאן תמונה מזויפת/הדמיית AI
   שמתחזה לצילום אמיתי של חדר — זו רקע מאויר (קווי רצפה/קיר/מסגרת/צמח) באותה
   שפה גרפית שכבר קיימת בעמוד הבית (mattress-ill, hero-visual), כדי לרמז הקשר
   של חדר שינה סביב תמונת המוצר האמיתית, מבלי להתחזות לצילום.
   סבב 243: הערה זו נשארה לתיעוד היסטורי בלבד — קארין קיבלה 3 תמונות לייף-סטייל
   אמיתיות (חום/אפור/אופטי) ופוצלה ל-3 שורות קטלוג, כך שכיתת vignette (שאף פעם
   לא הופעלה בפועל בדאטה — נבדק, אין vignette:true על אף מוצר) כעת רלוונטית רק
   כתשתית עתידית לדגם-מיטה אחר שיגיע ללא צילום כלל. */
.p-visual.vignette{background:linear-gradient(180deg, var(--bone) 0%, var(--bone) 60%, var(--greige) 60%, var(--greige) 100%)}
.p-visual.vignette::before{content:"";position:absolute;right:13%;top:20%;width:16%;height:24%;border:2px solid var(--terra);opacity:.28;border-radius:var(--radius-sm)}
.p-visual.vignette::after{content:"";position:absolute;left:14%;bottom:38%;width:10px;height:34px;background:var(--sage);opacity:.4;border-radius:var(--radius-pill) var(--radius-pill) 2px 2px}
.p-visual.vignette img{position:relative;z-index:1;width:auto;height:auto;max-width:80%;max-height:64%;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(31,41,51,.2))}
.vignette-note{position:absolute;top:12px;left:12px;z-index:3;background:rgba(255,255,255,.92);color:var(--sage-deep);font-size:10px;font-weight:500;padding:2px 8px;border-radius:var(--radius-pill);border:1px solid var(--greige)}
.mattress-ill{width:72%;height:44%;background:#fff;border-radius:var(--radius-md);border:1px solid #ddd5c9;position:relative;box-shadow:var(--shadow-md)}
.mattress-ill::before{content:"";position:absolute;inset:0 0 62% 0;background:var(--bone);border-radius:var(--radius-md) var(--radius-md) 0 0}
.mattress-ill .band{position:absolute;bottom:26%;left:0;right:0;height:9px;background:var(--sage);opacity:.55}
.mattress-ill.firm .band{background:var(--ink);opacity:.4}
.mattress-ill.plush .band{background:var(--terra);opacity:.5}
.p-tag{position:absolute;top:12px;right:12px;background:var(--bone);border-radius:var(--radius-pill);padding:4px 12px;font-size:var(--fs-micro);font-weight:500;color:var(--sage-deep);z-index:3}
.p-tag.cocoon{background:var(--mineral);color:var(--midnight)}
.p-body{padding:18px}
.p-body h3{font-size:var(--fs-card-title)}
.p-body .meta{font-size:var(--fs-2xs);color:var(--sage-deep);margin:2px 0 10px}
/* סבב 179: ר' materialize() -- מבליט "ויסקו"/"לטקס" בתוך מחרוזות מפרט (meta/pdpSub/
   כרטיסי המלצה) כדי שיהיו קלים לזיהוי חזותי, בלי לשנות את שאר עיצוב הטקסט. */
.mat-hi{color:var(--ink);font-weight:600}
.p-body .price{font-size:var(--fs-md);font-weight:700}
.p-body .price s{font-weight:300;color:var(--sage-deep);font-size:var(--fs-sm);margin-inline-start:8px}

/* ===== עמוד מוצר ===== */
/* סבב 213: תיקון-פריסה — עמודת הגלריה/תגי-האמון (העמודה הראשונה, קצרה יותר) הפכה
   ל-position:sticky בדסקטופ כדי שתישאר בתצוגה בזמן שהמבקר גולל דרך התוכן הארוך
   בעמודה השנייה (אקורדיון מפרט/משלוח/אחריות, ביקורות, קרוס-סייל, נצפו לאחרונה) —
   קודם לכן שתי העמודות היו נעלמות יחד, כך שהמחיר וכפתור "הוספה לסל" נעלמו לגמרי
   ברגע שגוללים מעבר לגובה הגלריה. align-items:start נדרש כדי ש-sticky יעבוד בתוך
   grid (בלי זה שתי העמודות נמתחות לאותו גובה ו-sticky לא זז). מבוטל שוב במובייל/
   טאבלט (ר' @media(max-width:920px) למטה) כי שם ה-grid כבר קורס לעמודה אחת. */
/* סבב 220 (המשך): תגי-האמון (.trust) עברו מהעמודה הראשונה (גלריה) לעמודה השנייה
   (info) — ממוקמים כעת מיד אחרי כפתורי הרכישה (pdp-ctas), לפני כרטיס "יש שאלה על
   הדגם?". זה תיקון לבאג-אמיתי שדווח: כש-.pdp קורס לעמודה אחת במובייל/טאבלט
   (@media(max-width:920px)), תגי-האמון (שהיו בעמודה הראשונה) הופיעו *לפני*
   הכותרת/מחיר (עמודה שנייה) בסדר-הקריאה בפועל. במיקום החדש הם תמיד אחרי המחיר
   וכפתור הרכישה — גם בדסקטופ (ליד ה-CTA, מיקום שיווקי סטנדרטי לתגי-אמון) וגם
   במובייל (ר' הערת HTML למעלה). עמודת הגלריה נשארה sticky ומכילה כעת רק
   תמונה+אצבעונים. */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;padding-top:44px;align-items:start}
.pdp>div:first-child{position:sticky;top:110px}
.pdp-gallery{background:var(--greige);border-radius:var(--radius-lg);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative}
.pdp-gallery .mattress-ill{width:70%;height:34%}
/* גלריית תמונות (עד 3) — נוסף לקראת צילום מוצר אמיתי. מוצג רק כשיש 2+ תמונות
   לדגם (ר' renderGallery). thumb.on מסומן בגבול טרהקוטה, תואם את שפת המיתוג. */
/* סבב 168 (סבב-רספונסיביות): כרגע תמיד תמונה יחידה בפועל (ר' הערת HTML למטה),
   כך שהשורה מוסתרת ולא נבדקה בפועל — אבל אם/כשיתווספו כמה תמונות מוצר, שורת
   אצבעונים ללא flex-wrap/overflow יכולה לגלוש באותה צורה בדיוק כמו הכותרת.
   overflow-x:auto כאן הוא רשת ביטחון זולה: אם יום אחד יהיו יותר אצבעונים
   ממה שנכנס ברוחב הטור, הם יגללו אופקית במקום לגלוש/להיחתך מחוץ לעמוד. */
.pdp-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto}
.pdp-thumbs button{width:76px;height:76px;padding:0;flex-shrink:0;border-radius:var(--radius-md);border:2px solid var(--greige);overflow:hidden;cursor:pointer;background:var(--bone);transition:border-color var(--dur-base) var(--ease-standard)}
.pdp-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-thumbs button:hover{border-color:var(--sage)}
.pdp-thumbs button.on{border-color:var(--terra)}
.crumb{font-size:var(--fs-2xs);color:var(--sage-deep);margin:20px 0 4px}
.pdp h1{font-size:56px}
.pdp .sub{color:var(--sage-deep);font-weight:300;margin-bottom:14px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.badge{font-size:var(--fs-micro);background:var(--greige);border-radius:var(--radius-pill);padding:5px 13px;font-weight:500}
/* סבב 221: לבקשת המנכ"ל, כל הרובריקות (RELAX/אחריות/גובה/COCOON/בידוד תנועה/פילו
   טופ/תפירת קווילט) מוצגות באותו צבע אחיד — הצבע הייחודי של .badge.cocoon הוסר
   כדי שהשורה תיראה כרובריקה אחת עקבית, לא כמה סגנונות שונים. */
.badge.cocoon{background:var(--greige);color:inherit}
.opt-label{font-size:var(--fs-2xs);font-weight:700;margin:18px 0 8px}
/* סבב 201: בורר המידה בעמוד המוצר עבר מרצועת כפתורים (מתאים לכל היותר ל-7 גדלים)
   לתפריט נפתח (<select>) יחיד — לבקשת המנכ"ל, בעקבות הרחבת כל דגם ל-14 גדלים מלאים
   בסבב 200 (7 רוחבים × 2 אורכים), שהפכה את רצועת הכפתורים לעמוסה/לא נוחה לשימוש.
   כל מידה מוצגת עם מחירה המדויק בתוך האפשרות עצמה (למשל "160×200 — 12,945 ₪"),
   כך שאין צורך ללחוץ כדי לראות את המחיר של כל גודל. */
.sizes{-webkit-appearance:none;appearance:none;width:auto;min-width:120px;max-width:170px;display:inline-block;border:1.5px solid var(--greige);background-color:#fff;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232B2A28" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');background-repeat:no-repeat;background-position:left 12px center;background-size:14px;border-radius:var(--radius-md);padding:10px 14px 10px 32px;font-family:inherit;font-size:var(--fs-xs);font-weight:500;color:var(--ink);text-align:right;cursor:pointer;transition:border-color var(--dur-base) var(--ease-standard)}
.sizes:hover{border-color:var(--sage)}
.sizes:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pdp-price{font-size:34px;font-weight:700;margin:20px 0 4px}
.pdp-price small{font-size:var(--fs-sm);font-weight:400;color:var(--sage-deep)}
.pdp-ctas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 8px}
.pdp-ctas .btn{padding:15px;font-size:var(--fs-sm)}
/* סבב 252: בלוק CTA לדגמים ללא מחיר קבוע (p.p==="") — מחליף את buy-box המחיר/
   מידה/הוספה-לסל. ר' הערת HTML ליד #pdpConsultCta ו-renderSizes() ב-JS. */
.pdp-consult-cta{margin:20px 0 8px;padding:20px;background:var(--foam,var(--greige));border-radius:var(--radius-lg)}
.pdp-consult-note{font-size:var(--fs-sm);line-height:1.7;color:var(--ink);margin:0 0 14px}
.pdp-consult-pricefrom{font-size:var(--fs-md);font-weight:600;color:var(--ink);margin:0 0 14px}
.pdp-consult-cta .btn{width:100%;padding:15px;font-size:var(--fs-sm)}
/* סבב 213: פס "הוספה לסל" דביק בתחתית המסך — מובייל/טאבלט בלבד. כשה-grid קורס
   לעמודה אחת (@media(max-width:920px), כמו שאר .pdp), אין יותר sticky buy-box
   (ר' הערה למעלה), כך שהמבקר שגולל דרך המפרט/ה-FAQ מאבד גישה מיידית למחיר/כפתור
   הרכישה עד שיגלול חזרה למעלה. הפס הזה מוצג/מוסתר לפי IntersectionObserver על
   הכפתורים הראשיים (#pdpCtasMain, ר' initStickyCta ב-JS) — מופיע רק ברגע שהכפתור
   הראשי כבר לא נראה בגלילה כלפי מטה, לא באופן קבוע. */
.pdp-sticky-cta{position:fixed;bottom:0;inset-inline:0;z-index:55;display:none;align-items:center;justify-content:space-between;gap:14px;background:#fff;border-top:1px solid var(--greige);padding:12px 16px;box-shadow:var(--shadow-lg);transform:translateY(100%);transition:transform var(--dur-base) var(--ease-standard)}
.pdp-sticky-cta.show{transform:translateY(0)}
.pdp-sticky-cta b{font-size:var(--fs-md);font-weight:700;white-space:nowrap}
.pdp-sticky-cta .btn{padding:12px 22px;font-size:var(--fs-sm);white-space:nowrap;flex-shrink:0}
@media(max-width:920px){.pdp-sticky-cta{display:flex}}
/* סבב 280: לבקשת המנכ"ל (סקירת עיצוב) — הרשת הייתה קבועה ל-4 עמודות, אבל
   renderTrust() מציב תג יחיד בקטגוריות שאינן מזרנים/ילדים, כך שנוצרה קופסה
   בודדת עם המשך שורה ריק/שבור. auto-fit עם רוחב-מינימום נותן פריסה תקינה
   בכל מספר תגים (1 עד 4), בלי לשנות את המראה כשיש 4 תגים מלאים (מזרנים). */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:22px}
.trust div{background:#fff;border:1px solid var(--greige);border-top:3px solid var(--terra);border-radius:var(--radius-md);padding:12px;font-size:var(--fs-2xs);text-align:center;font-weight:500;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.trust div:hover{border-color:var(--sage);border-top-color:var(--terra);box-shadow:var(--shadow-sm)}
.accordion{margin-top:26px;border-top:1px solid var(--greige)}
/* סבב 60: עמודת ה-FAQ בדף הבית מוצרת לרוחב קריא (כמו ברוב מקורות ה-FAQ המובילים),
   בניגוד ליתר מקטעי דף הבית שהם full-width — סקופ ממוקד רק ל-#faq, לא שינוי כללי ל-.container.
   תוקן בסבב 61: margin:0 auto מירכז את הבלוק במסך — לא עקבי עם שאר מקטעי דף הבית
   שצמודים לימין (RTL). הוחלף ל-margin-inline-end:auto כדי שהבלוק יישאר צמוד לימין,
   ורק הרוחב הנותר (860px < container) "יזלוג" שמאלה. */
.faq-wrap{max-width:860px;margin-inline-end:auto}
.acc-item{border-bottom:1px solid var(--greige)}
.acc-head{width:100%;background:none;border:none;text-align:right;padding:16px 2px;font-size:var(--fs-sm);font-weight:500;display:flex;justify-content:space-between;align-items:center;color:var(--ink);transition:color var(--dur-base) var(--ease-standard)}
.acc-head:hover{color:var(--sage-deep)}
.acc-head span{color:var(--sage-btn);font-size:var(--fs-md);line-height:1;transition:color var(--dur-base) var(--ease-standard)}
.acc-item.open .acc-head span{color:var(--terra-btn)}
/* פתיחה/סגירה מונפשת (בקשת מנכ"ל 19.8) - max-height במקום display כדי לאפשר
   transition. 1000px מכסה גם את תשובות ה-FAQ הארוכות. */
.acc-body{display:block;max-height:0;overflow:hidden;padding:0 2px;font-size:var(--fs-sm);font-weight:300;line-height:1.65;transition:max-height .45s var(--ease-standard),padding-bottom .35s var(--ease-standard)}
.acc-item.open .acc-body{max-height:1000px;padding-bottom:16px}
@media(prefers-reduced-motion:reduce){.acc-body{transition:none}}
/* ===== כרטיס-מפרט אמיתי בעמוד מוצר — נוסף כדי למלא את מקום ה-placeholder הכן שהיה
   ב"מפרט טכני" ("מפרט מדויק... אינו מפורסם באתר האמיתי"). נתון המקור: מסמכי "כרטיסי
   מוצר" שהמנכ"ל הכין (מפרטי ספוגים/web-cards) — תגית קולקציה, גובה מזרן, מבנה שכבות
   מלא ויתרונות עיקריים, לכל דגם שיש לו התאמה חד-משמעית לדגם קטלוג קיים (p.card).
   דגמים בלי p.card ממשיכים להציג את טקסט ה-placeholder המקורי כפי שהיה. */
/* סבב 196: בורר גובה (14/16 ס"מ) בכרטיס-מפרט — לדגמים שיש להם שתי גרסאות גובה
   אמיתיות (p.card.heights[]). לוחץ קורא ל-selectSpecHeight() שמעדכן גם את הטקסט
   בכרטיס וגם את מחירי המידות (renderSizes עם override), כי המחיר משתנה בפועל
   בין הגבהים (ר' CATALOGS.mattress.products הערה ליד ג'וניור). */
.pdp-spec-top{margin:0 0 18px}
.pdp-spec-top:empty{display:none}
.spec-height-toggle{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.spec-card .spec-tagline{font-weight:600;color:var(--terra-btn);font-size:var(--fs-sm);margin:0 0 8px}
.spec-card .spec-meta{font-size:var(--fs-xs);color:var(--sage-deep);margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spec-card .spec-meta .badge{margin:0}
.spec-card .spec-desc{margin:0 0 14px;opacity:.9}
.spec-card h2{font-size:var(--fs-xs);color:var(--ink);margin:16px 0 8px;font-weight:600}
.spec-card ol,.spec-card ul{margin:0 0 6px;padding-right:20px}
.spec-card li{margin-bottom:7px}
/* סבב 225: לבקשת המנכ"ל, מבנה השכבות ב"אודות המוצר" עבר מרשימה ממוספרת (ol) לרשימת
   בולטים בעיצוב טרהקוטה (--terra, הצבע המאושר בפלטה) — בלי מספור. */
.spec-card .layer-list{list-style:none;padding-right:0}
.spec-card .layer-list li{position:relative;padding-right:20px}
.spec-card .layer-list li::before{content:"";position:absolute;right:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--terra)}
.spec-card .spec-audience{margin-top:14px;padding:12px 14px;background:var(--bone);border-radius:var(--radius-md);font-size:var(--fs-xs);opacity:.85}
.cross{margin-top:56px}
.cross h2{font-size:var(--fs-section-h);margin-bottom:20px}

/* ===== עמוד סניף ===== */
.branch-hero{background:var(--bone);border-bottom:1px solid var(--greige);padding:52px 0}
.branch-hero h1{font-size:60px}
.branch-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;padding:44px 0}
.branch-grid>*{min-width:0}/* עמודות fr לא גולשות כשתוכן פנימי רחב - תוקן ע"פ ממצא סריקת 20.8 (187px גלישה בכל עמודי הסניפים) */
.info-card{background:#fff;border:1px solid var(--greige);border-radius:var(--radius-lg);padding:26px}
.info-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--bone);font-size:var(--fs-sm)}
.info-row:last-child{border:none}
.info-row b{min-width:96px}
/* סבב 125: הוחלף מ-placeholder סטטי ("[ מפה אינטראקטיבית — Google Maps ]", אותה
   תיבה כתומה לכל הסניפים) למפת Google Maps אמיתית לכל סניף, לפי הכתובת האמיתית
   שלו מ-BRANCHES — ר' renderBranchPage(). לא נדרש מפתח API (google.com/maps?q=...
   &output=embed מבוסס-חיפוש, לא Maps Embed API הרשמי) — מספיק לתצוגה/QA של
   אב-הטיפוס; לפרודקשן מומלץ להעביר ל-Maps Embed API עם מפתח רשמי. */
.branch-map{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;margin-bottom:10px;border:1px solid var(--greige);background:var(--greige)}
.branch-map iframe{width:100%;height:100%;border:0;display:block}
.branch-map-link{display:inline-block;margin-bottom:22px;font-size:var(--fs-2xs);color:var(--sage-deep);text-decoration:underline}
.form{display:grid;gap:12px}
.form input,.form select{font-family:inherit;font-size:var(--fs-sm);border:1.5px solid var(--greige);border-radius:var(--radius-md);padding:12px 14px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus{outline:2px solid var(--sage);border-color:var(--sage)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-note{font-size:var(--fs-micro);color:var(--sage-deep)}
/* סבב 237: היה var(--sage) (הגולמי) מתחת לטקסט bone — 3.37:1, נכשל ב-AA. זו
   הודעת-האישור האמיתית שמוצגת אחרי כל שליחת טופס באתר (leadOk()) — טקסט
   שהמשתמש צריך לקרוא בפועל, לא דקורטיבי. הוחלף ל-var(--sage-btn), 4.66:1 מול
   bone — עומד ב-AA. */
.ok-msg{background:var(--sage-btn);color:var(--bone);border-radius:var(--radius-md);padding:16px;text-align:center;font-weight:500;display:none}

/* ===== דף נחיתה ===== */
.lp-hero{background:var(--ink);color:var(--bone);padding:64px 0;text-align:center}
.lp-hero .eyebrow{color:var(--greige);letter-spacing:.2em;font-size:var(--fs-2xs);margin-bottom:10px}
.lp-hero h1{font-size:clamp(48px,6vw,78px);color:var(--bone)}
.lp-hero h1 em{font-style:normal;color:var(--terra)}
.lp-hero p{font-weight:300;max-width:54ch;margin:14px auto 0}
.timer{display:flex;gap:12px;justify-content:center;margin:26px 0}
.timer div{background:rgba(252,249,244,.1);border:1px solid rgba(252,249,244,.25);border-radius:var(--radius-md);padding:12px 18px;min-width:76px}
.timer b{font-size:28px;display:block;font-family:'Rubik';font-weight:600}
.timer span{font-size:var(--fs-micro);color:var(--greige)}
.lp-form{background:var(--bone);border-radius:var(--radius-lg);padding:26px;max-width:520px;margin:30px auto 0;color:var(--ink);text-align:right}
.lp-form h3{font-size:var(--fs-section-h);margin-bottom:14px}
.lp-benefits{padding:56px 0}
.lp-benefits .cats{grid-template-columns:repeat(3,1fr)}

/* ===== סניפים בבית ===== */
.branch-strip{display:flex;gap:10px;flex-wrap:wrap}
.branch-pill{background:#fff;border:1px solid var(--greige);border-radius:var(--radius-pill);padding:9px 18px;font-size:var(--fs-2xs);font-weight:500;transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.branch-pill:hover{border-color:var(--sage);background:var(--greige)}

/* ===== חיפוש בקטגוריה ===== */
.search-box{margin-bottom:18px;max-width:360px}
.search-box input{width:100%;font-family:inherit;font-size:var(--fs-sm);border:1.5px solid var(--greige);border-radius:var(--radius-pill);padding:11px 18px;background:#fff;color:var(--ink)}
.search-box input:focus{outline:2px solid var(--sage);border-color:var(--sage)}

/* ===== ביקורות ===== */
.reviews{margin-top:30px;border-top:1px solid var(--greige);padding-top:22px}
.reviews h2{font-size:var(--fs-section-h);margin-bottom:12px}
.reviews-empty{background:var(--greige);border-radius:var(--radius-md);padding:22px;text-align:center}
.reviews-empty p{font-size:var(--fs-xs);margin-bottom:12px}

/* ===== השוואת דגמים ===== */
.card-compare{position:absolute;bottom:10px;left:10px;background:rgba(252,249,244,.94);border-radius:var(--radius-sm);padding:5px 9px;font-size:var(--fs-micro);display:flex;gap:6px;align-items:center;z-index:2}
.card-compare input{cursor:pointer}
.compare-bar{position:fixed;bottom:0;inset-inline:0;background:var(--ink);color:var(--bone);padding:14px 22px;display:none;align-items:center;justify-content:space-between;gap:14px;z-index:60;box-shadow:var(--shadow-lg);flex-wrap:wrap}
.compare-bar.show{display:flex}
.compare-bar .items{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--fs-2xs);color:var(--greige)}
.compare-modal-bg{position:fixed;inset:0;background:rgba(31,41,51,.55);display:none;align-items:center;justify-content:center;z-index:70;padding:24px}
.compare-modal-bg.show{display:flex}
.compare-modal{background:#fff;border-radius:var(--radius-lg);max-width:920px;width:100%;max-height:85vh;overflow:auto;padding:0 28px 28px}
/* כותרת מודל דביקה + כפתור סגירה קבוע — כדי שהטבלה הארוכה תישאר נוחה לניווט. */
.cmp-modal-head{position:sticky;top:0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 0 12px;margin-bottom:8px;border-bottom:1px solid var(--greige);z-index:5}
.cmp-modal-head h2{font-size:var(--fs-section-h);margin:0}
.cmp-close{width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1px solid var(--greige);background:#fff;font-size:22px;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.cmp-close:hover{background:var(--bone);border-color:var(--sage)}
/* טבלת השוואה: פסים לסירוגין + עמודת תוויות "דביקה" (sticky) ומודגשת — קריאוּת
   לטבלה הארוכה (11+ שורות תועלות) גם בגלילה אופקית במסכים צרים. border-collapse:separate
   נדרש כדי ש-sticky ישמור על גבולות התאים. */
.compare-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-2xs)}
.compare-table th,.compare-table td{border-bottom:1px solid var(--greige);padding:10px;text-align:right;vertical-align:top}
.compare-table th{color:var(--ink);font-weight:600;font-size:var(--fs-2xs);position:sticky;right:0;background:var(--bone);z-index:2;box-shadow:-1px 0 0 var(--greige)}
.compare-table tbody tr:nth-child(even) td{background:color-mix(in oklab, var(--greige) 30%, #fff)}
.compare-table tbody tr:hover td{background:color-mix(in oklab, var(--sage) 12%, #fff)}

/* ===== בלוג — סבב 39, תוכן מלא בסבב 40–41 =====
   24 כתבות אמיתיות מ"מידע מקצועי" באתר mandelboim.com (כותרות, קישורים, תמונות
   וגוף מלא — לא הומצא תוכן, נשלף מהאתר החי). כל כרטיס נפתח כעמוד מאמר בתוך
   האתר החדש עצמו (viewArticle) — אין עוד קישורים חיצוניים. */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.blog-card{background:#fff;border:1px solid var(--greige);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.blog-tag{align-self:flex-start;background:color-mix(in oklab, var(--terra) 14%, white);color:var(--terra-btn);font-size:var(--fs-micro);font-weight:600;padding:4px 12px;border-radius:var(--radius-pill)}
.blog-card h3{font-size:var(--fs-base);line-height:1.35;font-weight:600}
.blog-card .blog-link{font-size:var(--fs-2xs);font-weight:600;color:var(--terra-btn);margin-top:auto;padding-top:4px}
.blog-card .blog-link:hover{text-decoration:underline}
@media(max-width:920px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}
/* ===== עמוד מאמר יחיד — סבב 40 =====
   המאמרים עצמם (לא רק קישור) מוצגים כעת בתוך האתר החדש — תוכן מלא, שנשלף
   מהאתר החי ונוקה מתגי ניווט/פוטר/עוגיות. ר' BLOG_POSTS[].body ב-JS. */
.article-page{max-width:760px}
.article-tag-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.article-hero-img{width:100%;border-radius:var(--radius-lg);margin:18px 0 26px;aspect-ratio:16/9;object-fit:cover;background:var(--greige);display:block}
.article-meta{color:var(--sage-deep);font-size:var(--fs-2xs);margin-top:10px}
.article-body{font-size:var(--fs-base);line-height:1.78;max-width:70ch;font-weight:300}
.article-body h2{font-size:var(--fs-card-title);margin:36px 0 14px;font-weight:600}
.article-body h3{font-size:var(--fs-md);margin:26px 0 10px;font-weight:600}
.article-body p{margin-bottom:16px}
.article-body ul{margin:0 0 18px;padding-inline-start:22px}
.article-body ol{margin:0 0 18px;padding-inline-start:22px}
.article-body li{margin-bottom:7px}
.article-body strong{font-weight:600;color:var(--ink)}
.article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:var(--fs-xs)}
.article-body table th,.article-body table td{border:1px solid var(--greige);padding:9px 12px;text-align:right}
.article-body table th{background:var(--bone);font-weight:600}
.article-back{margin-top:8px}
.article-more{margin-top:54px;border-top:1px solid var(--greige);padding-top:30px}
@media(max-width:560px){.article-body{font-size:var(--fs-sm)}.article-body h2{font-size:22px}}

/* ===== פוטר ===== */
footer{background:var(--ink);color:var(--greige);padding:48px 0 30px;margin-top:70px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px;font-size:var(--fs-2xs)}
/* 30.8: העמודה החמישית ("סוגי מזרנים") מצמצמת כל טור - בלפטופ צר עוברים ל-3
   טורים לפני הקריסה ל-2 במובייל (שורה למטה, @media 920). */
@media(max-width:1180px){.foot-grid{grid-template-columns:repeat(3,1fr)}}
.foot-grid h3{color:var(--bone);font-size:var(--fs-sm);margin-bottom:12px}
.foot-grid a{display:block;padding:3px 0;opacity:.85}
.foot-grid a:hover{opacity:1}
/* ספר מותג עמ' 10 (יישום בדיגיטל): לוגו Mandelboim מותר רק על Bone White/Foam White,
   וטקסט מנדלבוים תמיד ב-Ink Charcoal/Midnight Charcoal — לכן הלוגו בפוטר יושב על "צ'יפ"
   Bone White בסגנון הפילים הקיימים באתר (hero-badge / cocoon-tag), ולא ישירות על ה-Ink. */
.foot-logo{font-family:'Rubik';font-weight:500;font-size:var(--fs-md);color:var(--ink);background:var(--bone);display:inline-block;padding:8px 20px;border-radius:var(--radius-pill);letter-spacing:-.01em;margin-bottom:14px}/* 24.8: מרווח מהטקסט שמתחת (דיווח מנכ"ל) */
/* סבב 239: טופס הרשמה לניוזלטר בפוטר — נוסף בעקבות השוואה מול הולנדיה ("הצטרפו
   למשפחה") ועמינח ("הצטרפו לניוזלטר שלנו"), שני המתחרים מציגים טופס כזה בפוטר
   ואצלנו לא היה קיים בכלל (רק אזכור-מדיניות בטקסט הפרטיות, לא UI אמיתי — ר'
   השוואה-הולנדיה-UX-UI.md, חלק ד׳ #1). פס רוחב-מלא בין foot-grid לבין
   foot-bottom, לא עמודה נוספת ב-grid — כדי לא לדחוס עוד טור צר בתוך 4 העמודות
   הקיימות. אותו דפוס `leadOk()`/`.ok-msg` כמו כל טופס-דמו אחר באתר (7 טפסים
   קיימים, ר' סבב 236 — כולם עם required/type תקין, לא הומצא איסוף-דאטה אמיתי,
   זה placeholder-אב-טיפוס בדיוק כמו הטפסים האחרים). */
.foot-newsletter{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 0;margin-top:8px;border-top:1px solid rgba(252,249,244,.15)}
.foot-newsletter h4{color:var(--bone);font-size:var(--fs-sm);margin-bottom:4px}
.foot-newsletter p{font-size:var(--fs-2xs);opacity:.8;max-width:46ch}
.foot-newsletter-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.foot-newsletter-form input{font-family:inherit;font-size:var(--fs-sm);border:1.5px solid transparent;border-radius:var(--radius-md);padding:12px 14px;background:#fff;color:var(--ink);min-width:220px}
.foot-newsletter-form input:focus-visible{outline:2px solid var(--sage-green);border-color:var(--sage-green)}
.foot-newsletter-form .btn{padding:12px 24px;white-space:nowrap}
/* .ok-msg עצמו (רקע/צבע/ריפוד) כבר מוגדר גלובלית למעלה (סבב 237, sage-btn/bone
   נגיש) — כאן רק תוספת ה-layout הדרושה כדי שיתפוס שורה שלמה בתוך הפס הגמיש. */
.foot-newsletter-form .ok-msg{flex-basis:100%;font-size:var(--fs-2xs)}
@media(max-width:640px){.foot-newsletter{flex-direction:column;align-items:flex-start}.foot-newsletter-form{width:100%}.foot-newsletter-form input{flex:1;min-width:0}}
.foot-bottom{border-top:1px solid rgba(252,249,244,.15);margin-top:34px;padding-top:18px;font-size:var(--fs-micro);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media(max-width:920px){
  .hero-grid,.cocoon-grid,.pdp,.branch-grid{grid-template-columns:1fr}
  /* סבב 213: ה-sticky buy-box (ר' .pdp>div:first-child למעלה) רלוונטי רק כשיש שתי
     עמודות אמיתיות זו לצד זו — כשה-grid קורס לעמודה אחת כאן, sticky על העמודה
     הראשונה יגרום לגלריה "להיתקע" למעלה בזמן שהעמודה השנייה (שעכשיו ממש מתחתיה,
     לא לידה) גוללת מתחתיה, מה שנראה שבור. מבוטל במפורש; הפס הדביק התחתון
     (.pdp-sticky-cta) הוא התחליף המובייל/טאבלט. */
  .pdp>div:first-child{position:static;top:auto}
  /* סבב 49: בקריסה לעמודה אחת, עמודת הטקסט תופסת את כל הרוחב — ריפוד סימטרי
     משני הצדדים (במקום רק inline-start בדסקטופ), והתמונה מדממת עד שני הקצוות
     ולכן כל הפינות ריבועיות (לא רק צד אחד כמו בדסקטופ). */
  .hero-grid>div:first-child{padding-inline:clamp(20px,4vw,64px)}
  .hero-visual{border-radius:0}
  /* סבב 126: .ps-slide/.ps-media כבר לא grid (תמונה מלאה + טקסט צף, ר' CSS
     ראשי) — במובייל הפאנל הצף עובר לתפוס את כל הרוחב במקום להצטמצם ל-50%,
     כדי שהטקסט יישאר קריא על פני רוחב התמונה המלא. */
  .ps-track{min-height:400px}
  .ps-info{right:0;width:100%;padding:26px 22px}
  /* סבב 246: אותה הפחתת-עוצמה כמו הדסקטופ למעלה (ר' הערה שם), בגרסת המובייל
     (גרדיאנט אנכי, כהה למטה איפה שהטקסט יושב). */
  .ps-media::after{background:linear-gradient(0deg, rgba(31,41,51,.62) 0%, rgba(31,41,51,.34) 40%, rgba(31,41,51,0) 72%)}
  /* סבב 127: במובייל הפאנל תופס רוחב מלא (אין "צד פנוי" לקבץ בו את החצים) —
     החצים עוברים לפינה העליונה במקום התחתונה, מחוץ לאזור הטקסט הממורכז אנכית. */
  .ps-arrow{bottom:auto;top:14px}
  .cocoon-prod-strip{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .grid-products{grid-template-columns:repeat(2,1fr)}
  /* סליידר המבצעים בטאבלט: היה calc((100% - 22px)/2) — התאמה מדויקת ל-2 כרטיסים
     בדיוק. הוחלף לאותה לוגיקת "הצצה" שנוספה בדסקטופ בסבב 138 (ר' .deals-bleed),
     כדי שההצצה תישאר עקבית בכל הרוחבים ולא רק בדסקטופ/מובייל. */
  .deals-track .p-card{flex-basis:min(320px,46vw)}
  .nav-toggle{display:flex}
  /* סבב 157: flex:1/justify-content:space-between נוספו ל-.menu הבסיסי לפריסת
     דסקטופ (ר' הערה למעלה ליד .menu) — לא רלוונטיים לרשימה האנכית של מובייל,
     מבוטלים כאן במפורש כדי שהפריטים יישארו בערימה רגילה מלמעלה למטה. */
  .menu{display:none;position:absolute;top:100%;inset-inline:0;background:var(--bone);border-bottom:1px solid var(--greige);flex:none;flex-direction:column;justify-content:flex-start;gap:2px;padding:10px 22px 16px;box-shadow:var(--shadow-md)}
  .menu.open{display:flex}
  .menu a{padding:12px 2px;border-bottom:1px solid var(--greige)}
  .menu a:last-child{border-bottom:none}
  /* תפריטי הקטגוריות הנפתחים — סבב 87: הפאנל ברוחב מלא נפתח רק ב-hover/focus
     (ר' JS), ששניהם לא רלוונטיים למגע. במובייל, הפאנל (שכבר לא צאצא של
     .menu-item — צאצא ישיר של header, ר' סוף הקובץ) פשוט לא נפתח כלל — לחיצה
     על הקטגוריה מנווטת ישירות לעמוד הקטגוריה המלא, ששם כבר קיימים שבבי
     הסינון לכל תתי-הקטגוריות (התנהגות סבירה ונפוצה — מגה-מניו הוא בעיקרו
     דפוס דסקטופ; לא נבנה מנגנון מגע נפרד לפאנל הזה). */
  .menu-item{flex-direction:column;align-items:stretch}
  .menu-item>a{border-bottom:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .lp-benefits .cats{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid-products{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr}
  .pdp-ctas,.form-row{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr 1fr}
  /* פס נייד: כרטיס כמעט-מלא + הצצה קטנה לכרטיס הבא, לרמז שיש עוד להחליק אליו */
  .deals-track .p-card{flex-basis:86%}
  .deals-arrow{width:36px;height:36px}
  /* סבב 136: תוקן גלישה אופקית בכותרת בנייד — הלוגו (סמל + סלוגן) וחמשת
     אייקוני nav-cta (חיפוש/חשבון/עגלה/טלפון/נגישות) מעולם לא כווצו/הצטמצמו
     במובייל, כך שסך הרוחב הדרוש (לוגו + סלוגן + 5 אייקוני 40-45px + מרווחים)
     עלה בהרבה על רוחב מסך טלפון טיפוסי (360–414px) — מה שגרם ללוגו "להיחתך"
     מחוץ למסך ולדחוף את שאר העמוד לגלישה אופקית (ראו גם overflow-x:hidden
     חדש על body, כרשת ביטחון). כאן: הסלוגן מוסתר לגמרי במובייל (חוזר במסכים
     גדולים יותר), גופן שם המותג מוקטן, המרווחים בשורת האייקונים מצומצמים,
     והאייקונים עצמם (וגם ווידג'ט הנגישות) מוקטנים מעט — כדי שכל שורת הכותרת
     תיכנס ברוחב מסך טלפון בלי לגלוש. */
  /* סבב 162: הלוגו הפך לתמונה אחת (mandelboim-logo.png, כולל הסלוגן בתוכה) —
     אין יותר .wordmark/.slogan נפרדים להקטין/להסתיר; פשוט מקטינים את .logo-img
     עצמו (width:auto שומר על הפרופורציה). */
  /* 27.8: שורת הכותרת עדיין גלשה בטלפון (נמדד חי: דרושים 450px ברוחב מסך 390 -
     גלישה של 60px שדחפה את כל העמוד הצידה, ר' דיווח "שבירת רוחב במובייל").
     ה-clamp של margin-inline-end על .logo נותר 20px גם בטלפון, והלוגו+5
     האייקונים+ההמבורגר פשוט לא נכנסו. הערכים כאן מכווצים כל מרכיב במעט
     במקום להסתיר פונקציונליות. */
  .logo-img{height:32px}
  .logo{margin-inline-end:8px}
  .nav{gap:6px}
  .nav-cta{gap:3px}
  .nav-cta .btn-icon{width:34px;height:34px}
  .nav-cta .btn-icon svg{width:17px;height:17px}
  .a11y-toggle{width:34px;height:34px}
  .a11y-toggle svg{width:26px;height:26px}
  .nav-toggle{padding:6px}
  .container{padding:0 14px}
}
/* טלפונים צרים (iPhone SE/mini, 320-414): כיווץ נוסף של אותה שורה - כל היעדים
   נשארים מעל מינימום שטח-המגע של WCAG (24px), רק צפופים יותר. */
@media(max-width:414px){
  .logo-img{height:28px}
  .logo{margin-inline-end:4px}
  .nav{gap:4px}
  .nav-cta{gap:2px}
  .nav-cta .btn-icon{width:30px;height:30px}
  .nav-cta .btn-icon svg{width:15px;height:15px}
  .a11y-toggle{width:30px;height:30px}
  .a11y-toggle svg{width:23px;height:23px}
  .nav-toggle{padding:4px}
  .container{padding:0 12px}
  /* פס ההודעות: min-width:300px על הרצועה + 2 חצים + gap 16 + ריפוד דרשו 372px
     ודחפו את העמוד הצידה במסכי 320-360. במובייל הרצועה פשוט תופסת את מה שנשאר. */
  .announce-bar{gap:8px;padding:9px 10px}
  .announce-track{min-width:0;flex:1}
}
/* מסכים צרים במיוחד (320px - iPhone SE דור 1/מיני): נמדד שהשורה עדיין דרשה
   341px, אז שלב כיווץ אחרון. */
@media(max-width:360px){
  .logo-img{height:25px}
  .nav-cta .btn-icon{width:28px;height:28px}
  .a11y-toggle{width:28px;height:28px}
  .a11y-toggle svg{width:21px;height:21px}
  .container{padding:0 10px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ WP/WC adapter - תוספות לוורדפרס, לא מהאבטיפוס ============ */
/* כל מה שמתחת לשורה הזו נכתב עבור וורדפרס/ווקומרס בלבד, עם הטוקנים הקיימים של
   האבטיפוס בלבד. הסלקטורים כתובים באותה ספציפיות של גיליון הליבה של ווקומרס
   (או מעליה), בהנחה הסטנדרטית שה-CSS של התבנית נטען אחרי זה של ווקומרס.
   בלי important בכל הקובץ. */

/* --- 1. פס הניהול: ההדר הדביק (position:sticky;top:0) יורד מתחת ל-admin bar --- */
body.admin-bar>header{top:32px}
@media(max-width:782px){body.admin-bar>header{top:46px}}

/* --- 2. עטיפת תוכן לעמודי ווקומרס (עגלה/תשלום/חשבון) --- */
.woo-wrap{max-width:var(--w-content);margin-inline:auto;padding:32px clamp(20px,4vw,64px)}

/* --- 3. שדות טופס של ווקומרס + טופס הווריאציות בעמוד מוצר - אותו מראה כמו שדות
   האבטיפוס (.form input / .acc-form input), כולל טבעת פוקוס בסגנון ה-focus-visible
   הגלובלי (outline ירוק-מרווה + גבול תואם) --- */
.woocommerce :is(input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],textarea,select),.woocommerce .quantity .qty{font:inherit;border:1.5px solid var(--greige);border-radius:var(--radius-md);padding:10px 14px;background:#fff;color:var(--ink)}
.woocommerce :is(input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],textarea,select):focus,.woocommerce form .form-row :is(input,textarea,select):focus,.woocommerce .quantity .qty:focus{outline:2px solid var(--sage);border-color:var(--sage)}
.woocommerce table.variations{border:none;border-collapse:collapse;margin:0 0 14px}
.woocommerce table.variations th,.woocommerce table.variations td{border:none;background:none;padding:6px 0 6px 12px;text-align:right;vertical-align:middle}
.woocommerce table.variations label{font-weight:500}
/* כפתורי הקנייה (הוספה לסל / מעבר לתשלום / ביצוע הזמנה) במראה btn + btn-terra של
   האבטיפוס, בלי לדרוש את מחלקת btn (ווקומרס מדפיס מחלקות משלו). is() עם
   button#place_order מקנה לכל הרשימה ספציפיות ברמת id, שגוברת על כללי הליבה
   של ווקומרס בלי שימוש ב-important */
:is(button.single_add_to_cart_button,a.checkout-button,button#place_order){display:inline-block;border:none;border-radius:var(--radius-pill);padding:11px 22px;font-size:var(--fs-xs);font-weight:500;background:var(--terra-btn);color:var(--bone);text-align:center;cursor:pointer;transition:background var(--dur-base) var(--ease-standard),filter var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
:is(button.single_add_to_cart_button,a.checkout-button,button#place_order):hover{background:var(--terra-btn);color:var(--bone);filter:brightness(.88);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
:is(button.single_add_to_cart_button,a.checkout-button,button#place_order):active{transform:translateY(0) scale(.97);box-shadow:none}

/* --- 4. הודעות מערכת של ווקומרס - כרטיסים נקיים בשפת האתר (פס צד: מרווה להצלחה,
   גריג' למידע, טרהקוטה לשגיאה - terra הגולמי מותר כאן, זה גבול דקורטיבי ולא טקסט) --- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:#fff;border:none;border-inline-start:4px solid var(--sage);border-radius:var(--radius-md);padding:14px 18px;box-shadow:var(--shadow-sm);list-style:none;color:var(--ink);margin:0 0 18px}
.woocommerce-info{border-inline-start-color:var(--greige)}
.woocommerce-error{border-inline-start-color:var(--terra)}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}

/* --- 5. טבלאות עגלה/תשלום: רוחב מלא, בלי מסגרות, מפרידי שורות דקים --- */
.woocommerce table.shop_table{width:100%;border:none;border-radius:0;border-collapse:collapse}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border:none;border-bottom:1px solid var(--greige);padding:14px 10px;text-align:right}
.woocommerce table.shop_table th{font-weight:600}
.woocommerce table.shop_table img{width:64px;height:auto;border-radius:var(--radius-md)}
.woocommerce table.shop_table .coupon{display:flex;gap:10px;align-items:center}
/* סלקטור באורך הזה כי זו בדיוק הספציפיות שכלל הליבה של ווקומרס נותן לשדה הקופון */
.woocommerce table.shop_table td.actions .coupon .input-text{width:180px;font:inherit;border:1.5px solid var(--greige);border-radius:var(--radius-md);padding:10px 14px}
.woocommerce .cart_totals{background:#fff;border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}

/* --- 6. אזור החשבון שלי: תפריט כעמודת גלולות + טיפוגרפיה בסיסית לתוכן.
   הפריסה הדו-טורית מותנית ב-has() (שכבר בשימוש באבטיפוס) כדי שעמוד ההתחברות,
   שאין בו תפריט חשבון, לא יידחס לטור הצר --- */
.woocommerce-account div.woocommerce:has(.woocommerce-MyAccount-navigation){display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start}
@media(max-width:900px){.woocommerce-account div.woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr}}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.woocommerce-MyAccount-navigation ul li a{display:block;padding:10px 16px;border-radius:var(--radius-pill);transition:background var(--dur-base) var(--ease-standard)}
.woocommerce-MyAccount-navigation ul li a:hover,.woocommerce-MyAccount-navigation ul li.is-active>a{background:var(--greige)}
.woocommerce-MyAccount-content{font-size:var(--fs-sm);line-height:1.7}
.woocommerce-MyAccount-content h2{font-size:var(--fs-section-h);margin:0 0 14px}
.woocommerce-MyAccount-content h3{font-size:var(--fs-md);margin:18px 0 10px}
.woocommerce-MyAccount-content p{margin:0 0 14px}

/* --- 7. סימון מחירים + הסתרת תג המבצע המובנה (התבנית מציגה תג משלה) --- */
.price del{opacity:.55;font-weight:400}
.price ins{text-decoration:none;font-weight:600}
.woocommerce span.onsale,span.onsale{display:none}

/* --- 8. פירורי לחם --- */
.woocommerce .woocommerce-breadcrumb{font-size:var(--fs-2xs);color:rgba(31,41,51,.6);margin-block:18px 8px}
.woocommerce .woocommerce-breadcrumb a{color:inherit}
.woocommerce .woocommerce-breadcrumb a:hover{text-decoration:underline}

/* --- 9. שדה כמות --- */
.woocommerce .quantity .qty{width:64px;text-align:center}

/* --- 10. דירוג כוכבים (גם אם גופן הכוכבים של ווקומרס לא נטען, הצבע עקבי) --- */
.woocommerce p.stars a{color:var(--terra-btn)}
.woocommerce .star-rating{color:var(--terra-btn)}

/* --- 11. מחלקת הליבה של וורדפרס לקוראי מסך - זהה אחד לאחד ל-sr-only של האבטיפוס --- */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- 12. שורות טופס וכוכבית שדה חובה. visibility:visible כי ברירת המחדל של ווקומרס
   מסתירה את הכוכבית; הצבע terra-btn - הגרסה המאומתת נגישות לטקסט קטן --- */
.woocommerce form .form-row{margin:0 0 14px;padding:0}
.woocommerce form .form-row label{display:block;font-size:var(--fs-xs);font-weight:500;margin-bottom:6px;line-height:1.5}
.woocommerce form .form-row .input-text{width:100%}
.woocommerce form .form-row .required{color:var(--terra-btn);text-decoration:none;visibility:visible}

/* == WP components - הועבר מהתבנית הקודמת == */
/* בלוקים מ-style.css של תבנית ה-staging הקודמת, עבור מחלקות וורדפרס/ווקומרס
   שאינן באבטיפוס ושה-PHP החדש משתמש בהן בפועל. ערכי ה-px שהתבנית הקודמת
   קבעה כתחליף לטוקני --fs-* (מתועד שם: "14px=fs-2xs, 12.5px=fs-micro,
   32px=fs-section-h") הוחזרו כאן לטוקנים עצמם - הם קיימים בקובץ הזה.
   סלקטורים הותאמו רק היכן שהמרקאפ החדש שונה, מתועד ליד כל בלוק. */

/* --- עמוד מוצר (PDP): פריסה דו-טורית + עמודת מידע דביקה (round 247) --- */
.mb-pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:start;padding:32px 0 24px}
@media(max-width:920px){.mb-pdp{grid-template-columns:1fr}.mb-pdp-info{position:static}}
.mb-pdp-info{position:sticky;top:110px}
.mb-pdp-info .product_title{font-size:var(--fs-section-h);margin-bottom:.35em}
.mb-pdp-info .price{font-size:var(--fs-card-title);font-weight:600;color:var(--ink);display:block;margin:.2em 0 .6em}
.mb-pdp-info .price ins{color:var(--terra-btn);text-decoration:none;font-weight:700}
.mb-pdp-info .price del{opacity:.55;font-size:.75em;margin-inline-start:8px}
.mb-pdp-info .woocommerce-variation-price{margin-bottom:.6em}
/* בורר הווריאציות של ווקומרס בלבוש הסלקט מהאבטיפוס (round 201) - עיצוב בלבד,
   בלי לגעת ב-select וב-JS של ווקומרס. הקידומת .mb-pdp נועדה לגבור על כללי
   הטפסים הכלליים שב-adapter (שוברת תיקו ספציפיות בלי important) */
.mb-pdp .mb-pdp-info table.variations{width:100%;border:0;margin:0 0 16px}
.mb-pdp .mb-pdp-info table.variations tr{display:block;margin-bottom:10px}
.mb-pdp .mb-pdp-info table.variations td,.mb-pdp .mb-pdp-info table.variations th{padding:0;display:block;text-align:right}
.mb-pdp .mb-pdp-info table.variations select{width:100%;padding:14px 44px 14px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--greige);background:var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231F2933' stroke-width='2' fill='none'/%3E%3C/svg%3E") left 16px center/14px no-repeat;font-size:var(--fs-sm);color:var(--ink);appearance:none;cursor:pointer}
.mb-pdp-info .reset_variations{display:inline-block;margin-top:6px;font-size:var(--fs-2xs);color:var(--sage-btn)}
.mb-pdp-info .single_add_to_cart_button{width:100%;padding:16px 26px;font-size:var(--fs-sm);margin-top:8px}
.mb-pdp-info .quantity{display:inline-block;margin-inline-end:12px}
.mb-pdp-info .mb-branch-cta{margin-top:10px}
.mb-pdp-info .mb-branch-cta .btn{display:block;width:100%;text-align:center}

/* --- טאבים בעמוד מוצר (הפלט של woocommerce-tabs) --- */
.mb-pdp-tabs{margin-top:40px}
.mb-pdp-tabs .woocommerce-tabs ul.tabs{display:flex;gap:8px;border-bottom:1.5px solid var(--greige);margin-bottom:24px;padding:0;list-style:none}
.mb-pdp-tabs .woocommerce-tabs ul.tabs li{padding:12px 20px;cursor:pointer;font-weight:500;border-bottom:2px solid transparent}
.mb-pdp-tabs .woocommerce-tabs ul.tabs li.active{border-color:var(--terra);color:var(--terra-btn)}
.mb-pdp-tabs .woocommerce-tabs ul.tabs li a{color:inherit}

/* --- באדג'ים לדגם (round 250). הותאם: המרקאפ החדש מדפיס span.mb-badge, לא li --- */
.mb-badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0}
.mb-badge{background:var(--greige);color:var(--ink);border-radius:var(--radius-pill);padding:6px 14px;font-size:var(--fs-micro);font-weight:500}
.mb-badge:first-child{background:var(--sage-btn);color:var(--bone)}

/* --- כרטיס מפרט טכני (round 250). הותאם למחלקות המרקאפ החדש: הכותרת היא h3
   בתוך .mb-spec-head (לא .mb-spec-tagline), רשימת השכבות היא .mb-spec-layers
   (לא .mb-layer-list), ונוספו העטיפות החדשות segment/audience/benefits --- */
.mb-spec-card .mb-spec-segment{display:inline-block;color:var(--terra-btn);font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;margin-bottom:6px}
.mb-spec-card .mb-spec-head h3{font-size:var(--fs-md);font-weight:600;color:var(--ink);margin:0 0 .4em}
.mb-spec-card .mb-spec-desc{font-size:var(--fs-sm);line-height:1.7;color:var(--ink);max-width:65ch}
.mb-spec-card h4{font-size:var(--fs-base);margin:1.2em 0 .4em}
.mb-spec-card .mb-spec-audience{margin-top:14px;padding:12px 14px;background:var(--bone);border-radius:var(--radius-md);font-size:var(--fs-xs)}
.mb-spec-layers,.mb-spec-benefits ul{list-style:none;margin:.6em 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.mb-spec-layers li,.mb-spec-benefits li{padding-inline-start:18px;position:relative;font-size:var(--fs-xs);line-height:1.6;color:var(--ink)}
.mb-spec-layers li::before,.mb-spec-benefits li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--terra-btn)}

/* --- קישור "לצפייה בכל..." בתחתית המגה-תפריט --- */
.menu-mega-viewall{display:block;text-align:center;margin-top:32px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;color:var(--terra-btn)}
.menu-mega-viewall:hover{text-decoration:underline}

/* == רכיבי התבנית החדשה == */
/* מחלקות שה-PHP וה-JS של התבנית החדשה מדפיסים ואינן קיימות באבטיפוס.
   טוקנים קיימים בלבד, מאפיינים לוגיים ל-RTL, בלי important. */

/* --- כותרת עליונה --- */
/* wp_nav_menu מדפיס פריטי li (בתפריט הראשי ובעמודות הפוטר items_wrap ללא ul) - איפוס תבליטים */
.menu li,.foot-grid li{list-style:none;margin:0;padding:0}
/* פס ההודעות: גובה יחסי לפונט ורוחב גמיש במקום הערכים הקבועים של האבטיפוס -
   ההודעות מנוהלות תוכן ואורכן משתנה */
.announce-track{height:1.4em;min-width:300px;max-width:520px}/* 24.8: min-width:60% פיזר את החצים לקצוות במסך רחב - הוצמדו לטקסט */
.announce-nav{background:none;border:none;color:var(--bone);font-size:var(--fs-base);line-height:1;cursor:pointer;opacity:.7;transition:opacity var(--dur-base)}
.announce-nav:hover{opacity:1}
/* פאנל הטלפון: מספר הטלפון במרקאפ החדש הוא .phone-big (באבטיפוס: .phone-num) */
.nav-pop-phone .phone-big{font-size:22px;font-weight:600;letter-spacing:.01em;margin:0 0 10px}
/* מיני-עגלה: הפלט של woocommerce_mini_cart בתוך הפאנל */
.nav-pop-cart{width:340px}
.nav-pop-cart ul.woocommerce-mini-cart{list-style:none;margin:0 0 14px;padding:0;max-height:300px;overflow-y:auto}
.nav-pop-cart .woocommerce-mini-cart-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--greige);font-size:var(--fs-2xs)}
.nav-pop-cart .woocommerce-mini-cart-item img{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-md)}
.nav-pop-cart .woocommerce-mini-cart-item a.remove{font-size:var(--fs-md);line-height:1;color:var(--terra-btn);flex-shrink:0}
.nav-pop-cart .woocommerce-mini-cart-item .quantity{margin-inline-start:auto;color:var(--sage-deep);white-space:nowrap}
.nav-pop-cart .woocommerce-mini-cart__empty-message{text-align:center;color:var(--sage-deep);font-size:var(--fs-2xs);margin:8px 0}
.nav-pop-cart .woocommerce-mini-cart__total{display:flex;justify-content:space-between;gap:10px;font-weight:600;margin:0 0 12px}
.nav-pop-cart .woocommerce-mini-cart__buttons{display:flex;gap:10px;margin:0}
.nav-pop-cart .woocommerce-mini-cart__buttons .button{flex:1;text-align:center;border-radius:var(--radius-pill);padding:11px 14px;font-size:var(--fs-2xs);font-weight:500;background:var(--greige);color:var(--ink);transition:filter var(--dur-base) var(--ease-standard)}
.nav-pop-cart .woocommerce-mini-cart__buttons .button.checkout{background:var(--terra-btn);color:var(--bone)}
.nav-pop-cart .woocommerce-mini-cart__buttons .button:hover{filter:brightness(.92)}

/* --- כרטיס מוצר: הכרטיס כולו הוא עכשיו קישור <a>, ותיבת ההשוואה אח ישיר שלו --- */
.p-card{position:relative}
.p-card-link{display:block;color:inherit;text-decoration:none}
/* פינה נגדית ל-.p-tag (שיושבת inline-start) כדי שלא יתנגשו על אותו כרטיס */
.p-card>.card-compare{position:absolute;top:12px;bottom:auto;inset-inline-end:12px;inset-inline-start:auto;z-index:2}

/* --- ארכיון קטגוריה --- */
.mb-archive{padding-block-end:56px}
.cat-head{margin-block:6px 18px}
.mb-cat-banner{margin-block-end:8px}
.mb-cat-banner img{width:100%;max-height:320px;object-fit:cover;border-radius:var(--radius-xl);display:block}
.mb-cat-banner-body{padding:20px 0}
.mb-cat-banner-body h2{font-size:var(--fs-section-h);margin-bottom:6px}
.mb-cat-banner-body p{font-size:var(--fs-base);font-weight:300;color:var(--sage-deep);max-width:65ch;margin:0 0 12px}
/* סרגלי הצ'יפים (קטגוריה/בלוג) - אותה פריסה כמו .toolbar באבטיפוס */
.cat-toolbar,.blog-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
/* עמודת הסינון: המרקאפ החדש הוא .cat-side (באבטיפוס: .cat-filters). אותה
   התנהגות: דביקה בדסקטופ, נערמת מתחת לגריד במובייל. נקודת השבירה 900 נשמרת
   זהה לכלל .cat-layout הקיים */
.cat-side{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:14px}
@media(max-width:900px){.cat-side{position:static;order:2;border-top:1px solid var(--greige);margin-top:8px;padding-top:16px}}
.cat-search{width:100%;font:inherit;font-size:var(--fs-sm);border:1.5px solid var(--greige);border-radius:var(--radius-pill);padding:11px 18px;background:#fff;color:var(--ink)}
.cat-search:focus{outline:2px solid var(--sage);border-color:var(--sage)}
.cat-count{font-size:var(--fs-2xs);color:var(--sage-deep);margin-block:10px}
.cat-empty,.cat-none{text-align:center;color:var(--sage-deep);padding:40px 0}
/* גריד הכרטיסים: המרקאפ החדש הוא div.grid.products (לא .grid-products של
   האבטיפוס ולא ul.products של ווקומרס) - אותם כללי עמודות כמו .grid-products */
.grid.products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1200px){.cat-layout .grid.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){.grid.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.products{grid-template-columns:1fr}}
/* תיבת הסבר-האזור שה-JS ממלא לפי הצ'יפ הפעיל - מקבילה ל-.cat-zone-desc מהאבטיפוס */
.zone-desc{position:relative;background:var(--greige);border-radius:var(--radius-md);padding:20px 24px;margin-bottom:22px}
.zone-desc::before{content:"";position:absolute;top:14px;bottom:14px;inset-inline-start:0;width:4px;background:var(--terra-btn);border-radius:2px}
.zone-desc h2,.zone-desc h3{font-size:var(--fs-card-title);margin:0 0 8px}
.zone-desc p{font-size:var(--fs-md);line-height:1.7;margin:0;opacity:.9}
.zone-desc[hidden]{display:none}
.cat-about{margin-top:48px}

/* --- תוספות עמוד מוצר --- */
#pdpCtasMain{display:block}
/* הגלריה המותאמת (mb_pdp_gallery מחליפה את גלריית ווקומרס) */
.pdp-img-wrap{border-radius:var(--radius-lg);overflow:hidden;background:var(--foam)}
.pdp-img-wrap img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
/* האצבעונים במרקאפ החדש הם img ישירים עם מחלקת cur (באבטיפוס: button.on) */
.pdp-thumbs img{width:76px;height:76px;object-fit:cover;flex-shrink:0;border-radius:var(--radius-md);border:2px solid var(--greige);cursor:pointer;transition:border-color var(--dur-base) var(--ease-standard)}
.pdp-thumbs img:hover{border-color:var(--sage)}
.pdp-thumbs img.cur{border-color:var(--terra)}
/* רצועת מודל התחושה: תג אזור + מדי fm-meter הקיימים */
.mb-feel-band{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:12px 0;border-block:1px solid var(--greige);margin:14px 0}
.mb-feel-zone{display:inline-block;border-radius:var(--radius-pill);padding:5px 14px;font-size:var(--fs-micro);font-weight:600;background:var(--zone-mid);color:var(--bone)}
.mb-feel-zone.relax{background:var(--zone-relax)}
.mb-feel-zone.balance{background:var(--zone-mid)}
.mb-feel-zone.performance{background:var(--zone-perf)}
.mb-feel-row{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);color:var(--ink)}
/* בלוק תיאום פגישה למוצרי ייעוץ (מחליף buy-box למוצר בלי מחיר) */
.mb-consult-cta{background:#fff;border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm);margin:20px 0 8px}
.mb-consult-cta h3{font-size:var(--fs-md);margin:0 0 8px}
.mb-consult-cta p{font-size:var(--fs-sm);line-height:1.7;margin:0 0 14px}
.mb-consult-price{font-size:var(--fs-md);font-weight:600;margin:0 0 10px}
.mb-recently-viewed{margin-top:48px}
.mb-recently-viewed[hidden]{display:none}
.mb-recently-viewed h3{font-size:var(--fs-section-h);margin-bottom:16px}
/* הכרטיסים הם .p-card מלאים (pdp.js) - עמודות 150px מעכו אותם (בדיקת 1.0.3
   חי); רוחב מינימלי כמו רשת הקטלוג + הקטנת טיפוגרפיה לכרטיס משני */
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.rv-grid a{display:block;color:var(--ink)}
.rv-grid .rv-card .p-body h3{font-size:14.5px;line-height:1.4;margin-bottom:4px}
.rv-grid .rv-card .price{font-size:14px}
.rv-grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
/* פס ה-CTA הדביק: שם המוצר והמחיר במרקאפ החדש הם span (באבטיפוס: b) */
.pdp-sticky-cta .psc-name{font-size:var(--fs-2xs);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdp-sticky-cta .psc-price{font-size:var(--fs-md);font-weight:700;white-space:nowrap}
/* תווית "מחיר לפי בקשה" בתוך שורות מחיר (mb_price_display) */
.mb-price-request{color:var(--sage-deep);font-weight:500}

/* --- בלוג --- */
/* הגריד עובר ל-auto-fill; הכלל המאוחר-בקובץ דורס גם את שלוש-העמודות הקבועות
   של האבטיפוס וגם את נקודות-השבירה הישנות שלו - auto-fill מכסה את כל הרוחבים */
.blog-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
/* כרטיס הבלוג במרקאפ החדש: תמונה עד קצות הכרטיס וגוף מרופד - דורס את
   ריפוד-הכרטיס האחיד של האבטיפוס */
.blog-card{padding:0;overflow:hidden;box-shadow:var(--shadow-sm)}
.blog-card-link{display:block;color:inherit;height:100%}
.blog-card-img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.blog-card-body{padding:18px;display:flex;flex-direction:column;gap:10px}
.blog-card-body h3{font-size:var(--fs-base);line-height:1.35;font-weight:600;margin:0}
.blog-card-tag{align-self:flex-start;background:color-mix(in oklab, var(--terra) 14%, white);color:var(--terra-btn);font-size:var(--fs-micro);font-weight:600;padding:4px 12px;border-radius:var(--radius-pill)}
.blog-card-meta{font-size:var(--fs-2xs);color:var(--sage-deep);margin:0}
.mb-article .article-head{margin-block-end:20px}
.article-head .blog-card-tag{display:inline-block;margin-bottom:10px}
.article-hero img{width:100%;height:auto;border-radius:var(--radius-lg);display:block;margin:18px 0 26px;aspect-ratio:16/9;object-fit:cover}
/* טיפוגרפיית תוכן: המרקאפ החדש משתמש ב-.entry-content (באבטיפוס: .article-body) -
   אותם ערכים, מוחלים על כל עמודי התוכן */
:is(.mb-article,.mb-page,.mb-architects,.mb-b2b,.mb-landing,.mb-branch) .entry-content{font-size:var(--fs-base);line-height:1.78;max-width:70ch;font-weight:300}
:is(.mb-article,.mb-page,.mb-architects,.mb-b2b) .entry-content h2{font-size:var(--fs-card-title);margin:36px 0 14px;font-weight:600}
:is(.mb-article,.mb-page,.mb-architects,.mb-b2b) .entry-content h3{font-size:var(--fs-md);margin:26px 0 10px;font-weight:600}
:is(.mb-article,.mb-page,.mb-architects,.mb-b2b,.mb-landing,.mb-branch) .entry-content p{margin-bottom:16px}
:is(.mb-article,.mb-page,.mb-architects,.mb-b2b) .entry-content :is(ul,ol){margin:0 0 18px;padding-inline-start:22px}
:is(.mb-article,.mb-page,.mb-architects,.mb-b2b) .entry-content li{margin-bottom:7px}
@media(max-width:560px){.mb-article .entry-content{font-size:var(--fs-sm)}.mb-article .entry-content h2{font-size:22px}}
.mb-related{margin-top:48px}
.mb-back-link{margin-top:24px}
/* פס פירורי לחם גלובלי (1.0.32): יושב בין הכותרת לתוכן בכל התבניות למעט עמוד
   הבית. הרוחב מתיישר לרוחב ה-.container של התבנית שמתחתיו לפי מחלקת ה-body של
   וורדפרס - ברירת המחדל היא --w-content, והחריגים למטה. */
.mb-breadcrumb-bar{padding-top:14px}
.mb-breadcrumb-bar .container{max-width:var(--w-content)}
/* 1.0.34: הרוחב נגזר מהמחלקה של ה-main שמתחת לפס עצמו (:has), במקום ממיפוי
   מחלקות-body. המיפוי הקודם ניחש לפי סוג העמוד ופספס תבניות שחורגות ממנו -
   למשל עמוד "מעצבים ואדריכלים", שהוא page רגיל אבל בפריסה רחבה, שם הפירורים
   יצאו צרים מהכותרת (דיווח מנכ"ל עם סימון אדום). כאן אין ניחוש: אותה מחלקת
   רוחב בדיוק שהתבנית עצמה משתמשת בה. */
body:has(main.container--wide) .mb-breadcrumb-bar .container{max-width:var(--w-wide)}
body:has(main.container--narrow) .mb-breadcrumb-bar .container{max-width:var(--w-narrow)}
/* .woo-wrap מוגדר אחרי .container--wide ולכן גובר עליו בעמודי ווקומרס (נמדד:
   main של עמוד קטגוריה נושא את שתי המחלקות אבל רוחבו בפועל 1280). אותו סדר
   הכרעה נשמר כאן, אחרת הפס יוצא רחב ב-80px מהתוכן. */
body:has(main.woo-wrap) .mb-breadcrumb-bar .container{max-width:var(--w-content)}
/* ‎.section מוגדר אחרי .container ולכן מאפס את הריפוד האופקי שלו - בתבניות
   האלה התוכן נצמד לקצה ה-container בעוד פס הפירורים שמר ריפוד של עד 64px,
   וזה הפער שנראה בצילום של עמוד "מעצבים ואדריכלים". */
body:has(main:is(.section,.mb-404)) .mb-breadcrumb-bar .container{padding-inline:0}
/* תבניות שה-main שלהן אינו .container בכלל (שאלות נפוצות, עמוד נחיתה) -
   התוכן בפנים יושב ב-container--narrow רגיל, עם ריפוד. */
body:has(main:is(.mb-faq-page,.mb-landing)) .mb-breadcrumb-bar .container{max-width:var(--w-narrow)}
/* התבניות מתחילות ב-.section (ריפוד 64px) - הפס מבטל את הכפילות בראש העמוד. */
.mb-breadcrumb-bar+main.section,.mb-breadcrumb-bar+*>main.section{padding-top:26px}
.mb-breadcrumb{font-size:var(--fs-2xs);color:rgba(31,41,51,.6);margin-block:0}
.mb-breadcrumb a:hover{text-decoration:underline}
.mb-breadcrumb .mb-bc-sep{margin-inline:4px;opacity:.7}
/* פלט Yoast מגיע כ-<p id="breadcrumbs"> בתוך ה-nav - מאפס את מרווחי הפסקה. */
.mb-breadcrumb #breadcrumbs,.mb-breadcrumb p{margin:0;font-size:inherit;color:inherit}
.mb-breadcrumb .breadcrumb_last{color:var(--ink);font-weight:500}
@media(max-width:560px){.mb-breadcrumb{font-size:var(--fs-micro)}.mb-breadcrumb-bar{padding-top:10px}}
.mb-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:32px}
.mb-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:var(--radius-pill);background:var(--greige);color:var(--ink);font-size:var(--fs-2xs)}
.mb-pagination .page-numbers.current{background:var(--terra-btn);color:var(--bone)}

/* --- סניפים --- */
.branch-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:8px}
.branch-card h2{font-size:var(--fs-card-title);margin-bottom:8px}
.branch-card-addr{margin:0 0 4px}
.branch-card-hours{font-size:var(--fs-2xs);color:var(--sage-deep);margin:0}
.branch-facts{list-style:none;margin:0;padding:0}
.branch-facts li{margin-block:6px}
.branch-actions,.branch-card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-block:14px}
.branch-book{margin-top:28px}
.branch-book h2{font-size:var(--fs-section-h);margin-bottom:6px}
.branch-book p{color:var(--sage-deep);margin:0 0 16px}
/* .branch-map כבר מעוצב באבטיפוס (יחס 16/9, radius-lg, iframe מלא) - רק רצפת גובה */
/* min-height+aspect-ratio יחד גרמו לרוחב מחושב-מחדש שגלש מהעמודה (אותו לקח כמו סבב 146) - גובה קבוע ואיפוס היחס */
.branch-map{aspect-ratio:auto;height:420px}
.branch-others{margin-top:40px}
.branch-others h2{font-size:var(--fs-section-h);margin-bottom:16px}

/* --- דף נחיתה --- */
.lp-head{text-align:center}
.lp-head .section-title{justify-content:center}
.lp-head .section-sub{margin-inline:auto}
.lp-head .eyebrow{margin-bottom:10px}
.lp-hero-img img{width:100%;border-radius:var(--radius-xl);display:block}
.lp-timer{display:flex;justify-content:center;gap:18px;margin-block:22px}
.lp-timer-slot{text-align:center;background:#fff;border:1px solid var(--greige);border-radius:var(--radius-md);padding:12px 18px;min-width:76px}
.lp-timer-slot b{display:block;font-size:var(--fs-page-h);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.lp-timer-slot span{font-size:var(--fs-2xs);color:var(--sage-deep)}
.lp-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-block:24px}
@media(max-width:720px){.lp-benefits{grid-template-columns:1fr}}
.lp-form{margin-top:32px}
.lp-form h2{font-size:var(--fs-section-h);margin-bottom:14px}
.lp-terms{margin-top:24px}

/* --- טפסי לידים (סניף/נחיתה/אדריכלים/B2B/יועץ; טופס הניוזלטר בפוטר שומר
   על פריסת הפלקס של האבטיפוס ולכן לא נכלל כאן) --- */
:is(.branch-book,.lp-form,.arch-signup,.b2b-form) form,form.quiz-lead{display:grid;gap:10px}
:is(.branch-book,.lp-form,.arch-signup,.b2b-form,form.quiz-lead) label{font-size:var(--fs-2xs);font-weight:500}
:is(.branch-book,.lp-form,.arch-signup,.b2b-form,form.quiz-lead) :is(input,select,textarea){font:inherit;font-size:var(--fs-sm);border:1.5px solid var(--greige);border-radius:var(--radius-md);padding:12px 14px;background:#fff;color:var(--ink)}
:is(.branch-book,.lp-form,.arch-signup,.b2b-form,form.quiz-lead) :is(input,select,textarea):focus{outline:2px solid var(--sage);border-color:var(--sage)}
.arch-signup,.b2b-form{margin-top:32px}
.arch-signup h2,.b2b-form h2{font-size:var(--fs-section-h);margin-bottom:6px}
/* הודעת שגיאה בשליחת ליד (.ok-msg כבר מוגדר באבטיפוס; ה-JS מציג עם display:block) */
.err-msg{display:none;margin-top:10px}
.err-msg,.quiz-lead-err{color:var(--terra-btn);font-weight:500;font-size:var(--fs-2xs)}

/* --- שונות --- */
/* eyebrow גלובלי - באבטיפוס הוגדר רק בסקופים נקודתיים, המרקאפ החדש משתמש בו
   גם בקוקון/נובה-לונה/דף נחיתה. אותם ערכים בדיוק כמו הסקופים הקיימים */
.eyebrow{display:inline-block;color:var(--terra-btn);letter-spacing:.14em;font-size:var(--fs-2xs);font-weight:600}
.mb-page-thumb img{width:100%;border-radius:var(--radius-lg);display:block;margin-bottom:20px}
.foot-brand-text{max-width:36ch}
.foot-social a{display:inline-block;margin-inline-end:12px}
/* קישור הדילוג נושא גם sr-only - בפוקוס מבטלים את הקיצוץ ומציגים כגלולה קבועה */
.skip-link.sr-only:focus{position:fixed;top:8px;inset-inline-start:8px;width:auto;height:auto;margin:0;padding:8px 14px;overflow:visible;clip:auto;white-space:nowrap;background:var(--ink);color:var(--bone);border-radius:var(--radius-pill);z-index:999}

/* --- התאמות למחלקות המצב שה-JS של התבנית מטיל (main.js) --- */
/* הפאנלים והמגה-תפריט נפתחים במחלקת open (באבטיפוס: show) */
.nav-pop.open{display:block;animation:fade .2s ease}
.menu-dropdown.menu-mega.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
@media(max-width:560px){body:has(.nav-pop.open) .wa-float{display:none}}
/* חשיפה בגלילה: ה-JS שם reveal-pending על שורש המסמך ו-in על אלמנט שנחשף -
   מנגנון שונה מהאבטיפוס (שם reveal-pending הוטל על האלמנט עצמו). לכן: נטרול
   כלל האבטיפוס על השורש (בלעדיו כל העמוד היה נעלם לרגע), והחלה נכונה על
   הצאצאים. המעבר חי רק בזמן שהשורש נושא את המחלקה, כך שה-transition הרגיל
   של .p-card חוזר לפעול מיד אחרי חלון החשיפה */
html.reveal-pending{opacity:1;transform:none}
html.reveal-pending .reveal{transition:opacity .55s ease,transform .55s ease}
html.reveal-pending .reveal:not(.in){opacity:0;transform:translateY(18px)}

/* --- מוצרים קשורים/אפסלים בעמוד מוצר (מסמך QA 10.8: "תמונות ענקיות") ---
   WooCommerce עוטף את הלולאה ב-ul.products, מרקאפ שלא קיים באבטיפוס ולכן לא
   קיבל שום כלל - כל כרטיס נמתח לרוחב מלא עם תמונת ענק. הכרטיסים עצמם הם
   .p-card מ-content-product.php - כאן רק רשת + כותרת מקטע */
.related.products,.up-sells.products{margin-top:56px}
.related.products>h2,.up-sells.products>h2{font-size:var(--fs-section-h);font-weight:600;margin:0 0 20px}
.related.products ul.products,.up-sells.products ul.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1100px){.related.products ul.products,.up-sells.products ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.related.products ul.products,.up-sells.products ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.related.products ul.products,.up-sells.products ul.products{grid-template-columns:1fr}}

/* --- בלוק הסיפור הגלוי בעמוד מוצר (mb_pdp_spec_top) - יושב בעמודת המידע
   מתחת לבאדג'ים, לפני המחיר. אותן מחלקות-בת כמו .mb-spec-card בטאב */
.mb-spec-top{margin:14px 0 18px;padding:0;background:transparent;box-shadow:none}
.mb-spec-top .mb-spec-desc{font-weight:300}
.mb-spec-top .mb-spec-audience{margin-top:10px}

/* --- סימן COCOON: גודל ברירת-מחדל גלובלי. עד כה הוגדרו מידות רק בהקשרים
   נקודתיים (.nav-cocoon / .menu-mega-card) - בכל הקשר אחר ה-span נשאר ברוחב 0
   ונעלם (מסמך QA: "חסרה המילה COCOON" באריח המגה-תפריט) */
.cocoon-mark{height:1.1em;width:6.2em;vertical-align:-.18em}

/* --- חיפוש ללא תוצאות --- */
.cat-none-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* --- טוסט אישור הוספה לסל (main.js: mbToast) --- */
.mb-toast{position:fixed;bottom:96px;inset-inline-start:50%;transform:translateX(50%) translateY(12px);background:var(--ink);color:var(--bone);border-radius:var(--radius-pill);padding:12px 22px;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--shadow-lg);z-index:120;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.mb-toast.show{opacity:1;transform:translateX(50%) translateY(0)}
.mb-toast .mb-toast-check{color:var(--sage);margin-inline-end:6px}
@media(prefers-reduced-motion:reduce){.mb-toast{transition:opacity .25s ease}}

/* --- עמוד 404 --- */
.mb-404{text-align:center;padding:64px 0 80px}
.mb-404 h1{font-size:var(--fs-page-h);margin-bottom:10px}
.mb-404 p{color:var(--sage-deep);margin:0 0 22px}
.mb-404 .search-box{max-width:420px;margin:0 auto 26px}
.mb-404-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* --- עמוד מבצעים (page-promotions.php) --- */
.mb-promo-empty{max-width:60ch;margin:12px auto 0;text-align:center}
.mb-promo-empty p:first-child{color:var(--sage-deep);line-height:1.7}
.mb-promo-empty .cat-none-links{justify-content:center}
.mb-faq-page{padding-top:8px}

/* --- עמודי עגלה/תשלום/חשבון (בלוקים של WooCommerce) ---
   ביטול מגבלת רוחב-הקריאה + ריווח לפריסה הדו-עמודתית של בלוק התשלום */
.mb-wc-page .entry-content{max-width:none;font-weight:400}
.mb-wc-page .wp-block-woocommerce-checkout,.mb-wc-page .wp-block-woocommerce-cart{margin-top:8px}
.mb-wc-page .wc-block-components-sidebar-layout{gap:32px}
.mb-wc-page .wc-block-components-form .wc-block-components-text-input input,
.mb-wc-page .wc-block-components-text-input input{font:inherit}

/* --- לוגו+תגית COCOON בראש המקטע (הוחזר בבקשת מנכ"ל 19.8; הוסר בעבר בסבב 268) --- */
.cocoon-brand{margin-top:16px}
.cocoon-brand .cocoon-logo{height:44px;width:245px}

/* --- תיאור קטגוריה/קולקציה: נפרס לרוחב מלא (חיים, 19.8) - .section-sub מגביל
   ל-65ch ותיבת ה-cat-zone-desc נראתה "קטועה" ברוחב העמוד --- */
.cat-head .cat-desc{max-width:none}

/* --- בועת הצ'אט מעל סרגלי-התחתית (דיווח 24.8: "נקה"/"להשוואה" מוסתרים) -
   אותו פתרון :has() כמו .wa-float (סבב 234). חל גם על הבועה הפנימית וגם על
   וידג'ט Glassix שמחליף אותה --- */
body:has(.compare-bar.show) #mb-ai-chat-launcher,
body:has(.pdp-sticky-cta.show) #mb-ai-chat-launcher{inset-block-end:92px !important;transition:inset-block-end .2s ease}
/* 24.8: הסלקטורים האמיתיים של הווידג'ט (נבדקו מול ה-DOM החי): הבועה+הודעת
   הפתיחה ב-#glassix-widget-launcher-container, חלון השיחה הפתוח ב-
   #glassix-widget-iframe-container */
body:has(.compare-bar.show) #glassix-widget-launcher-container,
body:has(.pdp-sticky-cta.show) #glassix-widget-launcher-container,
body:has(.compare-bar.show) #greeting-message-container,
body:has(.pdp-sticky-cta.show) #greeting-message-container{bottom:96px !important;transition:bottom .2s ease}
/* 24.8ב: בועית הפתיחה ("היי, כיצד נוכל לסייע?") היא אלמנט fixed נפרד -
   #greeting-message-container - שנשאר למטה בזמן שהמשגר עלה (דיווח מנכ"ל) */
body:has(.compare-bar.show) #glassix-widget-iframe-container,
body:has(.pdp-sticky-cta.show) #glassix-widget-iframe-container{bottom:180px !important;transition:bottom .2s ease}

/* --- עמוד מוצר: הצמדת "למי מתאים" לשולי הטקסט (דיווח 24.8 "לא מיושר") -
   תיבת-הרקע עם הריפוד הפנימי יצרה הזחה ביחס לפסקאות --- */
.mb-spec-top .mb-spec-audience{background:transparent;padding:0;margin-top:12px}

/* --- טופס ודירוג חוות-דעת (ווקומרס) - עיצוב מלא בטוקני המותג + כוכבים
   גרפיים במקום קישורי-טקסט (דיווח מנכ"ל 24.8). המרקאפ p.stars נוצר ע"י
   ה-JS של ווקומרס; כאן רק ההלבשה --- */
#reviews{max-width:640px}
#reviews .woocommerce-Reviews-title,#reviews .comment-reply-title{font-size:var(--fs-section-h);font-weight:600;display:block;margin-bottom:10px}
#reviews .comment-reply-title{font-size:var(--fs-md)}
#reviews .woocommerce-noreviews{color:var(--sage-deep);margin-bottom:18px}
#review_form .comment-form{display:grid;gap:14px;margin-top:8px}
#review_form .comment-notes{color:var(--sage-deep);font-size:var(--fs-2xs);margin:0}
#review_form label{display:block;font-size:var(--fs-2xs);font-weight:500;margin-bottom:5px}
#review_form input[type="text"],#review_form input[type="email"],#review_form textarea{width:100%;font:inherit;font-size:var(--fs-sm);border:1.5px solid var(--greige);border-radius:var(--radius-md);padding:12px 14px;background:#fff;color:var(--ink)}
#review_form input:focus,#review_form textarea:focus{outline:2px solid var(--sage);border-color:var(--sage)}
#review_form .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:var(--fs-2xs)}
#review_form .comment-form-cookies-consent label{margin:0;font-weight:400}
#review_form .form-submit{margin:0}
#review_form .form-submit .submit{font:inherit;font-size:var(--fs-sm);font-weight:500;background:var(--terra-btn);color:var(--bone);border:none;border-radius:var(--radius-pill);padding:13px 34px;cursor:pointer;transition:transform var(--dur-fast)}
#review_form .form-submit .submit:hover{transform:translateY(-1px)}
/* כוכבים גרפיים */
#review_form p.stars{display:inline-flex;gap:6px;font-size:26px;line-height:1;margin:2px 0 0}
#review_form p.stars a{position:relative;display:inline-block;width:1em;height:1em;text-indent:-9999px;overflow:hidden;text-decoration:none;border:none}
#review_form p.stars a::before{content:"\2605";position:absolute;inset:0;text-indent:0;color:var(--greige);transition:color .12s ease}
#review_form p.stars:hover a::before{color:var(--terra)}
#review_form p.stars a:hover ~ a::before{color:var(--greige) !important}
#review_form p.stars.selected a::before{color:var(--terra)}
#review_form p.stars.selected a.active ~ a::before{color:var(--greige)}
/* רשימת חוות-דעת קיימות */
#reviews .commentlist{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
#reviews .commentlist .comment_container{background:#fff;border:1px solid var(--greige);border-radius:var(--radius-lg);padding:16px 18px}
#reviews .commentlist img.avatar{display:none}
#reviews .commentlist .meta{font-size:var(--fs-2xs);color:var(--sage-deep);margin:0 0 6px}
#reviews .commentlist .star-rating{color:var(--terra);font-size:14px}
#reviews .commentlist .description p{margin:0;font-size:var(--fs-sm);line-height:1.65}

/* --- טבלאות בעמודי תוכן (מדיניות משלוחים וכד') - עיצוב מותג בסיסי --- */
.entry-content table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:var(--fs-sm)}
.entry-content table th{background:var(--ink);color:var(--bone);font-weight:600;text-align:right;padding:10px 14px}
.entry-content table td{border:1px solid var(--greige);padding:10px 14px;background:#fff}
.entry-content table tr:nth-child(even) td{background:var(--bone)}

/* --- גלריית סניף: קרוסלה עם לופ אינסופי וחצים, מתחת למפה (27.8ב) --- */
.branch-side{min-width:0;display:flex;flex-direction:column;gap:14px}
.branch-gallery{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;background:var(--greige)}
.branch-gallery img.bgal-slide{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .55s ease}
.branch-gallery img.bgal-slide.is-active{opacity:1}
.bgal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--greige);box-shadow:var(--shadow-sm);font-size:var(--fs-md);line-height:1;color:var(--ink);cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:background var(--dur-base)}
.bgal-arrow:hover{background:#fff}
.bgal-arrow.prev{inset-inline-start:10px}
.bgal-arrow.next{inset-inline-end:10px}
@media(prefers-reduced-motion:reduce){.branch-gallery img.bgal-slide{transition:none}}

/* --- כרטיס סניף בעמוד הראשי: תמונת הסניף בראש הכרטיס (27.8ב) --- */
.branch-card{overflow:hidden}
.branch-card-photo{display:block;margin:-26px -26px 16px}
.branch-card-photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}