/* ==========================================================================
   Emcol Digital – Main stylesheet
   Mobile first. RTL first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts – Fb Jabutinski
   העברית מהקבצים הרגילים, הלטינית מקבצי ה-Eng (unicode-range)
   -------------------------------------------------------------------------- */
@font-face{font-family:"FbJabutinski";src:url("../fonts/FbJabutinski-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"FbJabutinski";src:url("../fonts/FbJabutinski-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FbJabutinski";src:url("../fonts/FbJabutinski-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"FbJabutinski";src:url("../fonts/FbJabutinski-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:"FbJabutinski";src:url("../fonts/FbJabutinskiEng-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:"FbJabutinski";src:url("../fonts/FbJabutinskiEng-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:"FbJabutinski";src:url("../fonts/FbJabutinskiEng-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:"FbJabutinski";src:url("../fonts/FbJabutinskiEng-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20BF}

/* --------------------------------------------------------------------------
   2. Global tokens

   נקודת השבירה של הפריסה היא 900px: מתחת לזה מובייל, מ-900px ומעלה דסקטופ.
   היא כתובה כמספר בכל @media ולא כמשתנה, כי custom properties אינם חוקיים
   בתנאי media query. בשינוי – יש להחליף את כל המופעים של 900px/899.98px יחד.
   הערה: ה-783px וה-600px בסעיף 10 הם נקודות השבירה של סרגל הניהול של
   וורדפרס עצמו ואינם קשורים לפריסה – אין לשנות אותם.
   -------------------------------------------------------------------------- */
:root{
  /* colors */
  --black:#000000;
  --white:#ffffff;
  --primary:#FF3818;
  --gray:#6B7280;
  --gray-soft:#707070;
  --banner-bg:#EDEDED;
  --dark:#2B2E34;
  --light-gray:#DFE1E5;
  --dark-gray:#374151;
  --offwhite:#F9FAFB;
  --yellow:#FEF3C7;
  --dark-red:#C2410C;
  --green-light:#E6F4EA;
  --green:#10B981;
  --whatsapp:#25D366;
  --pdf:#EE3124;

  /* roles */
  --page-bg:var(--offwhite);
  --body-color:var(--dark-gray);
  --header-shadow:0px 3px 6px rgba(0,0,0,.16);
  --card-shadow:0 0 6px rgba(0,0,0,.16); /* צל של אלמנט "מונח" – תגית הסטטוס, הגלריה */

  /* type */
  --font-main:"FbJabutinski","Arial Hebrew",Arial,sans-serif;
  --fs-base:18px;
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-bold:700;

  /* layout */
  --wrap:1880px;
  --sidebar-width:400px;
  --sidebar-gap:30px;
  /* הקצה הפנימי של ה-wrap – שם מתחיל סרגל הצד הקבוע */
  --header-height:82px; /* גובה ההדר בדסקטופ – משמש להיסט הפאנלים הצפים */
  --admin-bar-height:0px; /* מקבל ערך אמיתי רק כשסרגל הניהול מוצג – ראו סעיף 10 */
  --gutter:20px; /* דסקטופ מקבל 5vw מיד אחרי הבלוק */
  --radius:5px;
  --banner-image-height:147px; /* זהה ל-EMCOL_BANNER_IMAGE_HEIGHT ב-functions.php */
  --banner-image-cut:.4;       /* חלק התמונה שנחתך בקצה ימין */
  --chip-border:#D8D8D8;
  --filters-actions-height:84px; /* גובה שורת הכפתורים הנעוצה בתחתית פאנל הסינון */
}

/* השוליים הצדדיים גדלים עם המסך מ-900px ומעלה. */
@media (min-width:900px){
  :root{--gutter:5vw}
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* גלילה מיידית למי שביקש פחות תנועה במערכת ההפעלה */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
body{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - var(--admin-bar-height));
  min-height:calc(100dvh - var(--admin-bar-height));
  margin:0;
  background-color:var(--page-bg);
  color:var(--body-color);
  font-family:var(--font-main);
  font-size:var(--fs-base);
  font-weight:var(--fw-light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;font-weight:var(--fw-bold);line-height:1.25;color:var(--black)}
h1{font-size:1.55rem}
h2{font-size:1.33rem}
h3{font-size:1.16rem}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em;padding-inline-start:1.25em}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{position:fixed;top:calc(8px + var(--admin-bar-height));inset-inline-start:8px;z-index:1000;width:auto;height:auto;clip:auto;clip-path:none;background:var(--white);padding:8px 16px;border-radius:var(--radius)}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:calc(0px + var(--admin-bar-height));
  z-index:100;
  background-color:var(--page-bg);
  box-shadow:var(--header-shadow);
}

/* בעמוד מבצע פנימי אין הדר – הניווט שם נעשה בכפתור החזרה שבראש העמוד. */
body.single-sale .site-header{display:none}
.site-header__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px;
  padding-block:30px 0;
}
.site-header__top{
  display:flex;
  flex-direction:row-reverse; /* RTL: הלוגו נשאר בצד שמאל, הכפתורים בימין */
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
}
.site-branding{display:block;flex:0 0 auto}
.site-branding img{max-height:52px;width:auto}
.site-branding .site-title{font-size:1.33rem;font-weight:var(--fw-bold);color:var(--black);margin:0}
@media (max-width:899.98px){
  .site-branding img{max-width:100px;height:auto}
}

/* כפתורי הדר – העיגול הלבן והצל נבנים כאן, ה-SVG נשאר נקי */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.header-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:41px;
  height:41px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 0 6px rgba(0,0,0,.16);
  color:#2B2E34;
  cursor:pointer;
  transition:box-shadow .15s ease,transform .15s ease;
}
.header-action:hover{box-shadow:0 2px 8px rgba(0,0,0,.22)}
.header-action:active{transform:translateY(1px)}
.header-action:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.header-action__icon{display:block}

.main-nav{width:100%}
.main-nav ul{
  display:flex;
  justify-content:space-around; /* מובייל: התפריט ברוחב מלא והפריטים מתפרסים */
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.main-nav li{margin:0}
.main-nav a{
  display:block;
  /* בלי ריפוד צדדי – הקו התחתון חייב להיות ברוחב הטקסט בדיוק.
     הריפוד התחתון הוא המרחק של הקו מהטקסט: 14px במובייל, 25px בדסקטופ. */
  padding:6px 0 14px;
  font-size:15px;
  font-weight:var(--fw-light);
  color:var(--black);
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.main-nav a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .is-current > a,
.main-nav a[aria-current="page"]{
  border-bottom-color:var(--black);
}

/* דסקטופ: שורה אחת – לוגו בימין, תפריט במרכז מדויק, כפתורים בשמאל.
   display:contents מוציא את .site-header__top מהמשוואה, כך ששלושת
   הרכיבים הופכים לתאים של אותו grid בלי לשנות את מבנה ה-HTML. */
@media (min-width:900px){
  .site-header__inner{
    display:grid;
    grid-template-columns:1fr auto 1fr; /* עמודות הצד שוות, ולכן האמצע במרכז */
    align-items:center;
    gap:16px;
    min-height:var(--header-height); /* חייב להתאים ל---header-height */
    padding-block:0;
  }
  .site-header__top{display:contents}
  /* גם השורה מפורשת: אחרת הסדר במבנה (לוגו, כפתורים, תפריט) גורם
     לאלגוריתם המיקום לדחוף את התפריט לשורה חדשה */
  .site-branding{grid-area:1 / 1;justify-self:start}
  .main-nav{grid-area:1 / 2;width:auto; align-self: flex-end;}
  .main-nav ul{justify-content:center;gap:37px}
  .main-nav a{font-size:var(--fs-base);padding-block-end:25px} /* 18px */
  .header-actions{grid-area:1 / 3;justify-self:end}
}

/* --------------------------------------------------------------------------
   5. Page shell
   -------------------------------------------------------------------------- */
.site-main{flex-grow:1;padding-block:24px 40px}

/* בעמודי המבצעים אין כותרת עמוד, ולכן הרווח מההדר נמדד ישירות אל הגריד */
body.has-sales-filters .site-main{padding-block-start:40px}

/* אין הדר בעמוד מבצע פנימי, ולכן גם אין ממה לרווח – התוכן מתחיל בראש העמוד. */
body.single-sale .site-main{padding-block-start:0}

.page-header{margin-bottom:20px}
.page-header .page-title{margin-bottom:4px}
.page-header .page-subtitle{color:var(--gray);font-size:1rem}

.site-footer{
  position:relative;
  padding-block:0 20px;
  font-size:.88rem;
  color:var(--gray);
}

/* "חזרה למעלה" פותח את הפוטר. הקו המפריד נמשך מתחתיו, ולכן הוא פסאודו של
   הבלוק הזה ולא של הפוטר – אבל הבלוק ברוחב מלא, ולכן רוחב הקו לא השתנה:
   --gutter מכל צד, בדיוק כמו קודם. */
.site-footer__top{
  position:relative;
  padding-block:12px 42px;
  margin-bottom: 22px;
}
.site-footer__top::after{
  content:"";
  position:absolute;
  bottom:0;
  inset-inline:var(--gutter);
  height:1px;
  background-color:var(--light-gray);
}

/* RTL: הפריט הראשון יושב בימין, ולכן הקישור לפני הלוגו במבנה. */
.site-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
/* מספר טלפון / כתובת דוא"ל – נקרא משמאל לימין גם בתוך עמוד RTL */
.site-footer__link{
  direction:ltr;
  text-decoration:none;
  font-size:1rem;
  font-weight:var(--fw-regular);
  color:var(--black);
}
.site-footer__link:hover{color:var(--black)}
.site-footer__logo{flex:0 0 auto}
.site-footer__logo img{max-height:40px;width:auto}

/* --------------------------------------------------------------------------
   6. Sales grid + card
   Mobile first: אחד בשורה, 2 מ-600px. מ-900px סרגל הצד מצמצם את השטח
   ולכן חוזרים ל-1, ומשם 2 מ-1000px ו-3 מ-1500px.
   -------------------------------------------------------------------------- */
.sales-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media (min-width:600px){.sales-grid{grid-template-columns:repeat(2,1fr)}}
/* מ-900px נפתח סרגל הצד (400px) וגוזל מרוחב הגריד, ולכן חוזרים לעמודה
   אחת ומוסיפים עמודה בכל פעם שנותר מקום אמיתי לכרטיס נוסף. */
@media (min-width:900px){.sales-grid{grid-template-columns:1fr}}
@media (min-width:1000px){.sales-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1500px){.sales-grid{grid-template-columns:repeat(3,1fr)}}

.sale-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--light-gray);
  border-radius:8px;
  overflow:hidden;
  transition:box-shadow .18s ease;
}
.sale-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.10)}
/* כרטיס של מבצע שהסתיים אינו לחיץ, ולכן גם אינו מגיב למעבר עכבר */
.sale-card.sale-expired:hover{box-shadow:none}
.sale-card__media{position:relative;background:var(--light-gray);aspect-ratio:4/3;overflow:hidden}
.sale-card__media img{width:100%;height:100%;object-fit:cover}
.sale-card__media--empty{display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:.88rem}

.sale-card__body{display:flex;flex-direction:column;flex:1 1 auto;gap:8px;padding:16px}
.sale-card__title{margin:0;font-size:1.16rem;font-weight:var(--fw-regular);color:var(--black)}
.sale-card__brands{margin:0;font-size:.88rem;color:var(--dark-gray)}
.sale-card__brands .label{color:var(--gray)}
/* לגופן Jabutinski אין את התו '|' – המפריד מקבל גופן מערכת */
.sale-card__brands-sep{font-family:Arial,Helvetica,sans-serif}
/* שורת הפעולות: הכפתור תופס חצי מהרוחב בצד אחד, השיתוף נצמד לצד השני */
.sale-card__cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:12px;
}
.sale-card__cta .btn-faux{flex:0 0 50%;width:50%}

/* שיתוף בוואטסאפ – מעל קישור הכרטיס (z-index), אחרת הלחיצה פותחת את המבצע */
.sale-card__share{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.88rem;
  color:var(--gray-soft);
  transition:color .15s ease;
}
.sale-card__share svg{display:block;width:20px;height:auto}
.sale-card__share:hover,
.sale-card__share:focus-visible{color:var(--primary)}
.sale-card__share:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* הכרטיס כולו לחיץ – הקישור פרוס על כל השטח */
.sale-card__link{position:absolute;inset:0;z-index:2;text-indent:-9999px;overflow:hidden}
.sale-card__link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* "כפתור" מדומה – עיצוב בלבד, הקישור האמיתי הוא sale-card__link */
.btn-faux,
.btn{
  display:block;
  width:100%;
  padding:10px 16px;
  border-radius:var(--radius);
  background-color:var(--primary);
  color:var(--white);
  font-size:1rem;
  font-weight:var(--fw-medium);
  text-align:center;
}

/* מצבי מבצע */
.sale-expired .sale-card__media img{filter:grayscale(1)}

.sale-badge{
  position:absolute;
  top:16px;
  inset-inline-start:20px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 7px;
  border-radius:5px;
  font-size:.8rem;
  font-weight:var(--fw-regular);
  pointer-events:none;
}
.sale-badge__dot{display:block;flex:none}
/* לגופן Jabutinski אין את התו '|' – המפריד מקבל גופן מערכת */
.sale-badge__sep{font-family:Arial,Helvetica,sans-serif;opacity:.7}
/* הנקודה והטקסט באותו צבע (currentColor); הרקע לפי הסטטוס */
.sale-active .sale-badge{background:var(--green-light);color:var(--green)}
.sale-expiring .sale-badge{background:var(--yellow);color:var(--dark-red)}
.sale-expired .sale-badge{background:var(--light-gray);color:var(--dark-gray)}

.no-results{
  padding:32px 16px;
  text-align:center;
  color:var(--gray);
  background:var(--white);
  border:1px dashed var(--light-gray);
  border-radius:8px;
}

/* pagination */
.emcol-pagination{margin-top:28px;display:flex;justify-content:center}
.emcol-pagination .page-numbers{
  display:inline-block;min-width:36px;padding:6px 10px;margin:0 3px;
  text-align:center;border-radius:var(--radius);background:var(--white);
  border:1px solid var(--light-gray);color:var(--dark-gray);font-size:1rem;
}
.emcol-pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:var(--white)}

/* --------------------------------------------------------------------------
   7. Single sale
   -------------------------------------------------------------------------- */
.back-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:65px;
  margin-inline-start:-10px; /* יישור אופטי לשוליים */
}
.back-button svg{display:block}
/* המילה "חזרה" – בדסקטופ בלבד */
.back-button__label{display:none}

/* מובייל: הגלריה לפני התוכן, כמו קודם – סדר ה-DOM הפוך בגלל הדסקטופ */
.sale-single__columns{display:flex;flex-direction:column;gap: 20px 0;}
/* מובייל: הגלריה יוצאת מה---gutter של ה-wrap ונפרסת לרוחב המסך המלא.
   margin שלילי בדיוק בגודל הריפוד של .wrap – ולכן הרוחב הוא 100vw. */
.sale-single__aside{
  order:-1;
  margin-inline:calc(var(--gutter) * -1);
}

/* כפתור השיתוף. מובייל: זהה ל-.search-fab – אותו גודל, צבע ומיקום:
   sticky, נעצר 20px מעל תחתית המסך כל עוד המבצע נגלל ונגלל למעלה יחד עם
   סופו, ממורכז. הוא הילד האחרון של ה-wrap, וה-margin התחתון השלילי מבטל את
   הגובה שהוא תופס בזרימה. בדסקטופ – לבן על אפור, בראש העמוד (ראו למטה). */
.sale-share{
  position:sticky;
  bottom:20px;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:fit-content;
  height:50px;
  padding-inline:1.6em;
  margin-inline:auto;
  margin-block:36px -20px; /* זהה ל-bottom */
  border-radius:25px;
  background-color:var(--dark);
  color:var(--white);
  font-size:15px;
  font-weight:var(--fw-regular);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.sale-share__icon{flex:0 0 auto}
.sale-share:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.sale-single__header{margin-bottom:16px}
.sale-single__title{margin-bottom:32px;font-size:24px;font-weight:var(--fw-regular);color:var(--black)}
.sale-single__brands{margin:0 0 6px;font-size:1rem;color:var(--gray)}
/* תגית הסטטוס בעמוד המבצע – אותה תגית כמו בכרטיס, כבלוק ברוחב מלא וממורכז */
.sale-badge--block{
  position:static;
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:10px;
  padding:10px;
  border-radius:5px;
  box-shadow:var(--card-shadow);
  pointer-events:auto;
}

/* כותרות הביניים ("אירוע המבצע:", "תקציר המבצע") – כמו הכותרת הראשית */
.sale-single__label{margin:1.6em 0 0.6em;font-size:var(--fs-base);font-weight:var(--fw-regular);color:var(--black)}
.sale-single__events{margin:0;color:var(--black)}
.sale-single__content{margin:0 0 20px;color:var(--black)}
.sale-single__content img{border-radius:8px}

/* הטקסט המשפטי של המבצע – אפור כולו, כולל כותרות שנכתבו בעורך */
.sale-single__legal{
  margin-block:30px;
  padding-top:20px;
  border-top:1px solid var(--gray);
  color:var(--gray);
}
.sale-single__legal :is(h1,h2,h3,h4,h5,h6){color:var(--gray)}
.sale-single__legal h2{font-size:24px;font-weight:var(--fw-regular)}
/* הכותרת "משפטיות:" – כמו שאר כותרות הביניים, רק בצבע הבלוק */
.sale-single__legal h2.sale-single__legal-title{margin:0 0 0.6em;font-size:var(--fs-base);font-weight:var(--fw-regular)}

/* גלריה / סליק */
.sale-gallery{margin-bottom:20px}
/* העיצוב על .slick-list (האזור הנראה של הסליידר); בלי Slick – למשל תמונה
   ראשית בודדת – אין .slick-list, ולכן העטיפה עצמה מקבלת אותו */
.sale-gallery__slider .slick-list,
.sale-gallery__slider:not(.slick-initialized){
  background:var(--light-gray);
  overflow:hidden;
  box-shadow:var(--card-shadow);
}
/* התמונה נשארת ביחס הטבעי שלה, והסליידר מתאים את גובהו (adaptiveHeight) */
.sale-gallery__slide img{display:block;width:100%;height:auto}
/* סרטון – ל-iframe אין יחס טבעי משלו, ולכן הוא נשאר בקופסה קבועה 4:3 */
.sale-gallery__slide--video{position:relative;aspect-ratio:4/3;background:var(--black)}
.sale-gallery__slide--video iframe,
.sale-gallery__slide--video video{position:absolute;inset:0;width:100%;height:100%;border:0}

.sale-gallery .slick-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  list-style:none;
  margin:12px 0 0;
  padding:0;
}
.sale-gallery .slick-dots li{width:8px;height:8px;margin:0;line-height:0}
.sale-gallery .slick-dots li button{
  display:block;
  width:8px;
  height:8px;
  padding:0;
  border-radius:50%;
  background-color:var(--light-gray);
  text-indent:-9999px;
  overflow:hidden;
  transition:background-color .15s ease;
}
.sale-gallery .slick-dots li.slick-active button{background-color:var(--primary)}

/* דסקטופ: כפתור החזרה מעל, ומתחתיו שתי עמודות שוות – התוכן בראשונה,
   הגלריה בשנייה. הבאנר (בפוטר) נשאר מתחת לשתיהן. */
@media (min-width:900px){
  .back-button{
    width:auto;
    gap:10px;
    height:auto;
    padding-inline-start:10px;
    margin-block:50px;
  }
  .back-button__label{
    display:inline;
    font-size:18px;
    font-weight:var(--fw-light);
    line-height:1;
    color:var(--dark); /* כמו החץ */
  }

  /* שורה עליונה: החזרה בקצה אחד והשיתוף בקצה השני, מעל הגלריה;
     העמודות בשורה שמתחת לכל הרוחב */
  /* העמודות מפורשות: ב-auto השורה של .sale-single__columns (שפורסת על
     שתיהן) הייתה מרחיבה אותן לפי התוכן שלה, וכפתור החזרה נמתח לרוחב העמודה */
  .sale-single > .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }
  .sale-single > .wrap > .back-button{justify-self:start}
  .sale-single__columns{grid-column:1 / -1}
  .sale-share{
    position:static;
    grid-row:1;
    grid-column:2;
    margin:0; /* ממורכז בשורה של כפתור החזרה (align-items:center) */
  }

  .sale-single__columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:10%;
    align-items:start;
  }
  /* פריט גריד לא מתכווץ מתחת לרוחב התוכן שלו (min-width:auto), והסליידר
     פורס את כל השקופיות לרוחב – ולכן בלי זה העמודה הייתה גולשת */
  .sale-single__main,
  .sale-single__aside{min-width:0}
  /* הגלריה נצמדת לראש המסך בזמן גלילת התוכן. ה-sticky על העמודה ולא על
     .sale-gallery: העמודה (align-items:start) גבוהה בדיוק כמו הגלריה, ולכן
     לגלריה לא היה לאן לזוז בתוכה – ואילו העמודה זזה בתוך כל גובה הגריד.
     אין הדר בעמוד מבצע, אז ההיסט הוא רק סרגל הניהול. */
  .sale-single__aside{
    order:0;
    margin-inline:0;
    position:sticky;
    top:calc(var(--admin-bar-height) + 20px);
  }
  .sale-single__label,
  .sale-single__legal h2.sale-single__legal-title{font-size:24px}
  .sale-gallery{margin-bottom:0}
  /* במובייל הגלריה נפרסת לרוחב המסך ולכן בלי פינות; בדסקטופ היא בתוך
     העמודה ומקבלת אותן בחזרה. */
  .sale-gallery__slider .slick-list,
  .sale-gallery__slider:not(.slick-initialized){border-radius:8px}
}

/* מפרט */
.sale-specs{margin-top:24px}
.sale-specs__group{
  background:var(--white);
  border:1px solid var(--light-gray);
  border-radius:8px;
  padding:16px;
  margin-bottom:16px;
}
.sale-specs__group:last-child{margin-bottom:0}
/* שם הדגם – כותרת הטבלה שלו */
.sale-specs__model{margin:0;padding-bottom:10px;border-bottom:1px solid var(--light-gray);font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--black)}
.sale-specs__row{padding-block:10px;border-bottom:1px solid var(--light-gray)}
.sale-specs__row:first-child{padding-top:0}
.sale-specs__row:last-child{padding-bottom:0;border-bottom:0}
.sale-specs__key{margin:0 0 2px;font-size:1rem;font-weight:var(--fw-medium);color:var(--black)}
.sale-specs__value{margin:0;font-size:1rem;color:var(--dark-gray);white-space:pre-line}
/* שורת מפרט שהערך שלה הוא קובץ – אייקון הורדה לפני שם הקובץ */
.sale-specs__value--file{white-space:normal}
.sale-specs__file{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.sale-specs__file:hover span,
.sale-specs__file:focus-visible span{text-decoration:underline}
.sale-specs__file-icon{flex:0 0 auto;color:var(--pdf)}

/* --------------------------------------------------------------------------
   8. Notifications
   -------------------------------------------------------------------------- */
.page-header--center{text-align:center}
.page-content--center{text-align:center;margin-bottom:24px}

.notifications-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* אין התראות – תמונה ומתחתיה כותרת, ממורכזות */
.notifications-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding-block:32px;
  text-align:center;
}
.notifications-empty__image{display:block;max-width:100%;height:auto}
.notifications-empty__title{
  margin:0;
  font-size:20px;
  font-weight:var(--fw-regular);
  color:var(--black);
}

.notification{
  position:relative;
  background:var(--white);
  border:1px solid var(--light-gray);
  border-radius:8px;
  padding:16px;
  transition:box-shadow .18s ease;
}
.notification--linked:hover{box-shadow:0 4px 14px rgba(0,0,0,.10)}
.notification--expired{opacity:.75}

/* כל הפריט לחיץ – הקישור פרוס על כל השטח, קיים רק כשהמבצע בתוקף */
.notification__link{position:absolute;inset:0;z-index:2;text-indent:-9999px;overflow:hidden}
.notification__link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* שורת המטא: המותג והתגית בתחילת השורה, תאריך הפרסום בסופה */
.notification__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  /* כל הטקסטים בשורת המטא – אפורים, קטנים ודקים */
  font-size:15px;
  font-weight:var(--fw-light);
  color:var(--gray);
}
.notification__terms{margin:0}
/* לגופן Jabutinski אין את התו '|' – המפריד מקבל גופן מערכת */
.notification__sep{font-family:Arial,Helvetica,sans-serif}
/* התאריך נצמד לסוף השורה ואינו נשבר */
.notification__date{margin:0;flex:0 0 auto}
.notification__title{margin:0 0 6px;font-size:15px;font-weight:var(--fw-light);color:var(--black)}
.notification__excerpt{margin:0;font-size:15px;font-weight:var(--fw-light);color:var(--black)}
.notification__excerpt p{margin:0 0 .6em}
.notification__excerpt p:last-child{margin-bottom:0}
.notification__cta{
  margin:10px 0 0;
  font-size:15px;
  font-weight:var(--fw-regular);
  color:var(--black);
}
/* החץ מקבל גופן מערכת כמו המפריד, והוא מתהפך מעצמו בכיוון RTL */
.notification__cta-chevron{font-family:Arial,Helvetica,sans-serif}

/* --------------------------------------------------------------------------
   9. Login
   -------------------------------------------------------------------------- */
.login-screen{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px var(--gutter);
}

.login-box{
  width:100%;
  max-width:420px;
  background:var(--white);
  border:1px solid var(--light-gray);
  border-radius:8px;
  padding:28px 24px;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
}

.login-box__logo{display:flex;justify-content:center;margin-bottom:20px}
.login-box__logo img{max-height:56px;width:auto}

.login-box__header{text-align:center;margin-bottom:20px}
.login-box__title{margin:0}
.login-box__intro{margin-top:8px;font-size:1rem;color:var(--gray)}

.login-notice{
  margin:0 0 16px;
  padding:10px 14px;
  border-radius:var(--radius);
  font-size:1rem;
}
.login-notice--error{background:var(--yellow);color:var(--dark-red)}
.login-notice--success{background:var(--green-light);color:var(--green)}

.login-field{margin:0 0 14px}
.login-field__label{
  display:block;
  margin-bottom:6px;
  font-size:1rem;
  font-weight:var(--fw-medium);
  color:var(--black);
}
.login-field__input{
  display:block;
  width:100%;
  padding:10px 12px;
  font:inherit;
  font-size:1rem;
  color:var(--dark-gray);
  background:var(--offwhite);
  border:1px solid var(--light-gray);
  border-radius:var(--radius);
}
.login-field__input:focus{
  outline:none;
  border-color:var(--primary);
  background:var(--white);
}

.login-remember{
  margin:0 0 18px;
  font-size:1rem;
  color:var(--gray);
}
.login-remember label{display:flex;align-items:center;gap:8px;cursor:pointer}
.login-remember input{accent-color:var(--primary);width:16px;height:16px;margin:0}

.login-submit{border:0;cursor:pointer}

.login-lost{
  margin:16px 0 0;
  text-align:center;
  font-size:.88rem;
  color:var(--gray);
}
.login-lost a:hover{color:var(--primary)}

/* --------------------------------------------------------------------------
   10. Admin bar
   וורדפרס הופך את הסרגל ל-absolute מתחת ל-600px, כלומר הוא נגלל עם העמוד
   בזמן שה-margin-top של html נשאר. כאן הוא נעוץ תמיד, ו---admin-bar-height
   מחזיק את הגובה בפועל כדי שכל אלמנט נעוץ יוסיף אותו ל-top שלו ב-calc.
   -------------------------------------------------------------------------- */
body.admin-bar{--admin-bar-height:46px}

@media screen and (min-width:783px){
  body.admin-bar{--admin-bar-height:32px}
}

@media screen and (max-width:600px){
  #wpadminbar{position:fixed}
}

/* --------------------------------------------------------------------------
   11. Footer logout
   -------------------------------------------------------------------------- */
.site-footer__logout{margin:12px 0 0;text-align:center}
.site-footer__logout a{text-decoration:underline}
.site-footer__logout a:hover{color:var(--primary)}

/* --------------------------------------------------------------------------
   12. WhatsApp button
   רכיב עצמאי – לא תלוי ב-.btn, כדי שאפשר יהיה למקם אותו בכל מקום.
   -------------------------------------------------------------------------- */
.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  border-radius:var(--radius);
  background-color:var(--whatsapp);
  color:var(--white);
  font-size:1rem;
  font-weight:var(--fw-medium);
  text-align:center;
  transition:filter .15s ease;
}
.btn-whatsapp:hover{filter:brightness(.94)}
.btn-whatsapp:focus-visible{outline:2px solid var(--whatsapp);outline-offset:2px}
.btn-whatsapp__icon{flex:0 0 auto}

/* וריאציה לרוחב מלא, לשימוש בתוך טור צר */
.btn-whatsapp--block{display:flex;width:100%}

/* --------------------------------------------------------------------------
   13. Login – בקשת גישה
   -------------------------------------------------------------------------- */
.login-help{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--light-gray);
  text-align:center;
}
.login-help__text{
  margin:0 0 12px;
  font-size:1rem;
  color:var(--gray);
}

/* --------------------------------------------------------------------------
   14. Banner
   קופסה אפורה בתוך ה-wrap. התמונה צמודה לקצה ימין וכ-40% ממנה נחתך שם,
   והתוכן ממלא את שאר הרוחב. ב-RTL הפריט הראשון יושב בימין, ולכן התמונה
   ראשונה במבנה.
   -------------------------------------------------------------------------- */
.banner{margin-top:40px}
.banner__inner{
  display:flex;
  align-items:center;
  gap:16px;
  overflow:hidden; /* מה שחורג מהתמונה נחתך כאן, יחד עם הפינות המעוגלות */
  border-radius:10px;
  background-color:var(--banner-bg);
}

/* התיבה תופסת רק את החלק הגלוי של התמונה, ו---banner-image-width מגיע מה-PHP */
.banner__media{
  flex:0 0 auto;
  width:calc(var(--banner-image-width) * (1 - var(--banner-image-cut)));
}
.banner__image{
  width:var(--banner-image-width);
  max-width:none;
  height:var(--banner-image-height);
  display:block;
  /* דחיפה החוצה מעבר לקצה ימין – שם נמצא החיתוך */
  transform:translateX(calc(var(--banner-image-cut) * 100%));
}

.banner__content{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  padding-block:20px;
  padding-inline-end:20px;
}
.banner__text{font-size:1rem;color:var(--dark-gray)}
.banner__text :last-child{margin-bottom:0}

@media (min-width:900px){
  .banner__content{
    align-items:center;
    text-align:center;
    padding:20px;
  }
}

/* --------------------------------------------------------------------------
   15. Back to top
   -------------------------------------------------------------------------- */
.back-to-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--gray-soft);
  font-size:.88rem;
}
.back-to-top:hover{color:var(--black)}
.back-to-top__chevron{flex:0 0 auto}

/* --------------------------------------------------------------------------
   16. Notifications panel
   שכבה קבועה מעל האתר – פס לבן עם כפתור הסגירה, ומתחתיו הרשימה שנגללת.
   -------------------------------------------------------------------------- */
.header-action--notifications{position:relative}
.header-action__badge{
  position:absolute;
  top:6px;
  inset-inline-end:6px;
  width:9px;
  height:9px;
  border-radius:50%;
  background-color:var(--primary);
  border:2px solid var(--white);
  display:none;
}
.header-action__badge.is-visible{display:block}

body.notifications-open{overflow:hidden}

.notifications-panel{
  position:fixed;
  inset:var(--admin-bar-height) 0 0;
  z-index:200;
  display:flex;
  flex-direction:column;
  background-color:var(--offwhite);
  /* סגור: מוסט אל מחוץ למסך בצד ימין, כמו פאנל החיפוש.
     visibility מוציא אותו גם ממסלול המקלדת, ומתחלף רק בתום ההחלקה */
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .3s ease,visibility 0s linear .3s;
}
body.notifications-open .notifications-panel{
  transform:translateX(0);
  visibility:visible;
  transition:transform .3s ease;
}

.notifications-panel__bar{
  flex:0 0 auto;
  background-color:var(--white);
  /*box-shadow:var(--header-shadow);*/
}
.notifications-panel__bar-inner{
  display:flex;
  align-items:center;
  padding-block:12px;
}
.notifications-panel__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-inline-start:-10px; /* יישור אופטי לשוליים, כמו כפתור החזרה */
  color:var(--black);
}
.notifications-panel__icon{display:block}
.notifications-panel__icon--x{display:none}

/* גוף הפאנל הוא האזור שנגלל, ולא כל המסך */
.notifications-panel__body{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-block:24px;
}
.notifications-panel__title{
  margin:0 0 20px;
  text-align:center;
  font-weight:var(--fw-regular);
}
body.notifications-open .header-action--notifications{
  background-color:var(--primary);
  color:var(--white);
}

/* הטעינה מיוצגת בטבעת מסתובבת; הטקסט נשאר לקוראי מסך בלבד */
.notifications-panel__loading{
  display:flex;
  justify-content:center;
  padding-block:24px;
}
.notifications-panel__spinner{
  width:28px;
  height:28px;
  border:2px solid var(--light-gray);
  border-block-start-color:var(--primary);
  border-radius:50%;
  animation:emcol-spin .7s linear infinite;
}
@keyframes emcol-spin{
  to{transform:rotate(360deg)}
}

/* בלי לבטל לגמרי – הסימון היחיד לכך שהטעינה עדיין רצה */
@media (prefers-reduced-motion:reduce){
  .notifications-panel__spinner{animation-duration:2s}
}

/* --------------------------------------------------------------------------
   17. Sales search + filters
   מובייל: כפתור צף שפותח מודאל. דסקטופ: סרגל צד קבוע, בלי כפתור.
   -------------------------------------------------------------------------- */
/* sticky ולא fixed: הכפתור נעצר 20px מעל תחתית המסך כל עוד .site-main נגלל,
   וכשמגיעים לסופו הוא נגלל למעלה יחד איתו ואינו מכסה את הפוטר.
   ה-margin התחתון השלילי מבטל את הגובה שהוא תופס בזרימה, כדי שלא ייווצר
   רווח בין התוכן לפוטר. margin-inline:auto ממרכז אותו במקום left/transform. */
.search-fab{
  position:sticky;
  bottom:20px;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:fit-content;
  height:50px;
  padding-inline:1.6em;
  margin-inline:auto;
  margin-block:36px -20px; /* זהה ל-height */
  border-radius:25px;
  background-color:var(--dark);
  color:var(--white);
  font-size:15px;
  font-weight:var(--fw-regular);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.search-fab__icon{flex:0 0 auto}

.sales-filters{
  position:fixed;
  inset:var(--admin-bar-height) 0 0;
  z-index:200;
  display:flex;
  flex-direction:column;
  background-color:var(--offwhite);
  /* סגור: מוסט אל מחוץ למסך בצד ימין. visibility מוציא אותו גם ממסלול
     המקלדת, ומתחלף רק בתום ההחלקה כדי שהיציאה תישאר גלויה */
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .3s ease,visibility 0s linear .3s;
}
body.filters-open .sales-filters{
  transform:translateX(0);
  visibility:visible;
  transition:transform .3s ease;
}
body.filters-open{overflow:hidden}

.sales-filters__bar{
  flex:0 0 auto;
  background-color:var(--white);
  box-shadow:var(--header-shadow);
}
.sales-filters__bar-inner{
  display:flex;
  align-items:center;
  padding-block:12px;
}
.sales-filters__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-inline-start:-10px;
  color:var(--black);
}
.sales-filters__close svg{display:block}

.sales-filters__body{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* בתחתית פנוי מקום לרוחב הכפתורים הנעוצים, שאינם בזרימה */
  padding-block:24px var(--filters-actions-height);
}
.sales-filters__title{
  margin:0 0 20px;
  font-size:22px;
  font-weight:var(--fw-regular);
  text-align:center;
}
/* הכותרת השנייה נושמת מהשדה שמעליה, ונשענת על תחילת השורה בכל רוחב מסך */
.sales-filters__title--filters{margin-block-start:28px;text-align:start}

.sales-filters__field{position:relative;margin:0 0 16px}
.sales-filters__input{
  display:block;
  width:100%;
  height:40px;
  /* בתחילת השורה יושב האייקון, ולכן הריפוד שם רחב יותר */
  padding-block:0;
  padding-inline:38px 20px;
  font:inherit;
  font-size:16px;
  font-weight:var(--fw-light);
  color:var(--dark-gray);
  background:var(--banner-bg);
  border:0;
  border-radius:var(--radius);
}
.sales-filters__input::placeholder{color:var(--dark-gray);opacity:1}
.sales-filters__input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--primary)}

/* ה-X של דפדפני webkit מיותר – לניקוי יש את "נקה סינון" */
.sales-filters__input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}

/* האייקון דקורטיבי בלבד, ולכן אינו קולט לחיצות ומעביר אותן לשדה */
.sales-filters__field-icon{
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:20px;
  transform:translateY(-50%);
  color:var(--black);
  pointer-events:none;
}

/* הקבוצות שטוחות – מפריד דק ביניהן במקום מסגרת מסביב לכל אחת */
.sales-filters__group{
  border-block-end:1px solid var(--banner-bg);
}
.sales-filters__group:last-of-type{border-block-end:0}
.sales-filters__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  /* 21 + 27 (18px בגובה שורה 1.5) + 21 + מפריד = שורה של 70px, כמו בעיצוב */
  padding-block:21px;
  font-size:18px;
  font-weight:var(--fw-regular);
  color:var(--black);
  cursor:pointer;
  list-style:none;
}
.sales-filters__summary::-webkit-details-marker{display:none}

/* פלוס כשסגור, מינוס כשפתוח – שני ה-SVG בקו של 2px בצבע --gray-soft */
.sales-filters__summary::after{
  content:"";
  flex:0 0 auto;
  width:15px;
  height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cg fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='7.5' y1='1' x2='7.5' y2='14'/%3E%3Cline x1='14' y1='7.5' x2='1' y2='7.5'/%3E%3C/g%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
.sales-filters__group[open] .sales-filters__summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='2' viewBox='0 0 15 2'%3E%3Cline x1='14' y1='1' x2='1' y2='1' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:15px 2px;
}

.sales-filters__options{padding:0 0 24px}

/* שלוש עמודות שוות – רוחב הצ'יפ נגזר מהן ולא נקבע מראש */
.sales-filters__chips{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px 18px;
}
.sales-filters__sublabel{
  margin:24px 0 20px;
  font-size:18px;
  color:var(--gray);
}
.sales-filters__sublabel:first-child{margin-block-start:0}

/* ה-input עצמו מוסתר; ה-span הוא הצ'יפ הנראה, ומצב הבחירה נגזר ממנו */
.sales-filters__option{
  position:relative;
  display:block;
  cursor:pointer;
}
.sales-filters__option input{
  position:absolute;
  width:0;
  height:0;
  margin:0;
  opacity:0;
}
.sales-filters__option span{
  display:flex;
  align-items:center;
  justify-content:center;
  height:35px;
  padding-inline:6px;
  font-size:15px;
  text-align:center;
  color:var(--black);
  border:1px solid var(--chip-border);
  border-radius:var(--radius);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.sales-filters__option input:checked + span{
  background-color:var(--offwhite);
  border-color:var(--dark);
  box-shadow:0 0 3px rgba(0,0,0,.161);
}
.sales-filters__option input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}

/* אפשרות שאינה מקבילה לאחרות – שורה שלמה */
.sales-filters__option--wide{grid-column:1 / -1}

/* רשימת תיבות סימון פשוטה, בלי מסגרות – בשונה מהצ'יפים,
   כאן תיבת הסימון עצמה היא הסימן הנראה */
.sales-filters__list{display:grid;gap:14px}
.sales-filters__check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  color:var(--black);
  cursor:pointer;
}
.sales-filters__check input{
  flex:none;
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--dark);
  cursor:pointer;
}

/* מותגים היררכיים: שם המותג הוא שורת טקסט פשוטה – מיושרת לתחילת השורה
   ובלי מסגרת – והדגמים שלו נפתחים מתחתיו כצ'יפים רגילים, שלושה בשורה.
   גם מותג בלי דגמים נראה כשורה כזאת, אף שהיא עצמה הבחירה. */
.sales-filters__brands{display:grid;gap:18px}

/* השורה הפותחת אינה בחירה, ולכן היא כפתור – בלי מצב מסומן */
.sales-filters__brand-row--toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  height:35px;
  padding:0;
  font:inherit;
  font-size:15px;
  color:var(--black);
  text-align:start;
  background:none;
  border:0;
  cursor:pointer;
}
.sales-filters__brand-row--toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* מותג בלי דגמים – אותה שורת טקסט, ולכן מראה הצ'יפ יורד ממנה
   והבחירה מסומנת במשקל הגופן במקום במסגרת */
.sales-filters__option.sales-filters__brand-row span{
  justify-content:flex-start;
  height:35px;
  padding-inline:0;
  text-align:start;
  border:0;
  border-radius:0;
}
.sales-filters__option.sales-filters__brand-row input:checked + span{
  font-weight:700;
  background:none;
  box-shadow:none;
}
.sales-filters__brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* החץ מצביע מטה כשסגור ומתהפך כשהדגמים פתוחים */
.sales-filters__brand-chevron{
  flex:0 0 auto;
  display:flex;
  color:var(--gray-soft);
  transition:transform .2s ease;
}
.sales-filters__brand-chevron svg{display:block}
.sales-filters__brand[data-open] .sales-filters__brand-chevron{transform:rotate(180deg)}

/* גובה האזור מונפש ב-JS, ולכן התוכן נחתך בזמן ההחלקה */
.sales-filters__brand-models{overflow:hidden}
.sales-filters__brand-models .sales-filters__chips{padding-block-start:18px}


/* שדה השנה תופס עמודה אחת, ולכן רוחבו זהה לצ'יפ */
.sales-filters__year{
  width:100%;
  height:35px;
  padding-inline:6px;
  font:inherit;
  font-size:15px;
  text-align:center;
  color:var(--black);
  background-color:var(--offwhite);
  border:1px solid var(--dark);
  border-radius:var(--radius);
  box-shadow:0 0 3px rgba(0,0,0,.161);
  -moz-appearance:textfield; /* בלי חיצי ה-number */
  appearance:textfield;
}
.sales-filters__year::-webkit-inner-spin-button,
.sales-filters__year::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}
.sales-filters__year:focus{outline:none;border-color:var(--primary)}

/* סליידר השנה – תמיד משמאל (הישנה) לימין (החדשה), גם בעמוד RTL.
   ה-range עצמו הוא הפקד: ערך בשנים שלמות (step="1"), מקלדת ונגישות. הידית
   והצבע שלו שקופים – הידית הנראית (::after) והחלק הצבוע מצוירים על העטיפה
   לפי --year-fill (0–1), כי ידית native קופצת בין הצעדים. בגרירה ה-JS מזין
   את --year-fill ממיקום האצבע (.is-dragging – בלי transition), ובשחרור הוא
   חוזר לשנה שנבחרה, והמעבר מנפיש את הידית אליה. @property נדרש כדי שמשתנה
   CSS יונפש. מרכז הידית נע בין 11px ל-(100% - 11px), וגבול הצבע איתו.
   הידית היא הריבוע מהעיצוב – 22px, צל ושלושה קווים. */
@property --year-fill{
  syntax:'<number>';
  inherits:true;
  initial-value:1;
}
.sales-filters__year-slider{
  --thumb:22px;
  position:relative;
  direction:ltr;
  margin-top:24px;
  transition:--year-fill .18s ease-out;
}
.sales-filters__year-slider.is-dragging{transition:none}
.sales-filters__year-slider::after{
  content:"";
  position:absolute;
  top:0;
  left:calc((100% - var(--thumb)) * var(--year-fill));
  width:var(--thumb);
  height:var(--thumb);
  border-radius:2px;
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M6 6v11M11 6v11M16 6v11' fill='none' stroke='%23f9fafb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow:0 0 6px rgba(0,0,0,.161);
  pointer-events:none; /* הלחיצות עוברות ל-range שמתחת */
}
.sales-filters__year-slider:has(:focus-visible)::after{outline:2px solid var(--dark);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .sales-filters__year-slider{transition:none}
}

.sales-filters__year-range{
  display:block;
  width:100%;
  height:var(--thumb);
  margin:0;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.sales-filters__year-range:focus{outline:none}
.sales-filters__year-range::-webkit-slider-runnable-track{
  height:5px;
  border-radius:3px;
  background:linear-gradient(to right,
    var(--primary) 0 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--year-fill)),
    var(--banner-bg) 0);
}
.sales-filters__year-range::-moz-range-track{
  height:5px;
  border-radius:3px;
  background:linear-gradient(to right,
    var(--primary) 0 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--year-fill)),
    var(--banner-bg) 0);
}
/* הידית ה-native – באותו גודל בדיוק (אזור הלחיצה והגרירה), אבל שקופה */
.sales-filters__year-range::-webkit-slider-thumb{
  width:var(--thumb);
  height:var(--thumb);
  margin-top:calc((5px - var(--thumb)) / 2); /* ממורכז על הפס */
  border:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
}
.sales-filters__year-range::-moz-range-thumb{
  width:var(--thumb);
  height:var(--thumb);
  border:0;
  background:transparent;
}

/* מובייל: הכפתורים נעוצים לתחתית המסך, מחוץ לאזור הנגלל.
   ה-fixed נמדד מול .sales-filters – ה-transform שלו יוצר את בלוק ההכלה –
   ולכן הוא נצמד לתחתית הפאנל, שהיא תחתית המסך. */
.sales-filters__actions{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  padding:16px var(--gutter);
  background-color:var(--offwhite);
  border-block-start:1px solid var(--banner-bg);
  display:flex;
  gap:10px;
  justify-content: space-between;
}
.filter-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0.42 1 0;
  padding:10px 16px;
  border-radius:5rem;
  font-size:1rem;
  font-weight:var(--fw-medium);
  text-align:center;
  cursor:pointer;
  border:1px solid transparent;
}
.filter-btn--primary{
  background-color:var(--primary);
  border-color:var(--primary);
  color:var(--white);
}
.filter-btn--ghost{
  background-color:transparent;
  border-color:var(--dark);
  color:var(--dark);
}

@media (min-width:900px){
  .search-fab{display:none}

  /* אזור התוכן הוא הגריד של שתי העמודות: הסרגל בימין והמבצעים בשמאל.
     הסרגל הוא פריט אמיתי בגריד, ולכן .site-main גדל מעצמו כדי להכיל
     אותו גם כשיש מעט מבצעים – והפוטר תמיד מתחיל מתחתיו.
     ה-wrap עובר לכאן, כי הילדים עצמם כבר לא עוטפים את עצמם. */
  body.has-sales-filters .site-main{
    display:grid;
    grid-template-columns:var(--sidebar-width) minmax(0,1fr);
    grid-template-rows: 1fr max-content;
    column-gap:var(--sidebar-gap);
    align-items:start;
    width:100%;
    max-width:var(--wrap);
    margin-inline:auto;
    padding-block-start:44px;
    padding-inline:var(--gutter);
  }
  /* מיקום מפורש, כדי שסדר האלמנטים ב-HTML לא יקבע את הפריסה */
  body.has-sales-filters .site-main > .wrap{
    grid-column:2;
    grid-row:1;
    max-width:none;
    margin-inline:0;
    padding-inline:0;
  }
  /* הבאנר חוצה את שתי העמודות, מתחת לשתיהן */
  body.has-sales-filters .site-main > .banner{grid-column:2;grid-row:2}
  body.has-sales-filters .site-main > .banner > .wrap{padding-inline:0}

  /* סרגל צד sticky בעמודה הראשונה של הגריד, בצד ימין ב-RTL */
  /* אותה קופסה כמו כרטיס מבצע בגריד */
  .sales-filters{
    display:flex;
    /* היצמדות לתחתית ולא לראש: הסרגל נגלל עם העמוד עד שתחתיתו נכנסת
       למסך, ואז ננעל שם בזמן שממשיכים לגלול. sticky חסום בגבולות
       תא הגריד שלו – והוא פרוס על שתי השורות של .site-main – ולכן
       בסוף התוכן הוא משוחרר ועולה עם העמוד, בלי להיכנס לפוטר.
       הגובה נשאר לפי התוכן: בלי max-height אין גלילה פנימית, והסרגל
       כולו נקרא תוך כדי גלילת העמוד. */
    position:sticky;
    grid-column:1;
    grid-row: span 2;
    /* ברירת המחדל – סרגל שנכנס במסך – נצמד מתחת להדר */
    inset-block:calc(var(--admin-bar-height) + var(--header-height) + 44px) auto;
    inset-inline:auto;
    width:auto;
    z-index:90;
    background-color:var(--white);
    border:1px solid var(--light-gray);
    border-radius:8px;
    /* בדסקטופ הסרגל תמיד פתוח, ולכן ההחלקה מהצד מתבטלת */
    transform:none;
    visibility:visible;
  }
  /* סרגל גבוה מהמסך נצמד לתחתיתו: הוא נגלל עם העמוד עד שתחתיתו נכנסת
     למסך וננעל שם. ההיצמדות ההפוכה נדרשת רק כאן, כי סרגל נמוך היה
     נדחף כלפי מטה אל תחתית המסך. המחלקה נקבעת ב-syncFiltersSticky. */
  .sales-filters.is-tall{inset-block:auto 24px}
  body.filters-open .sales-filters{transform:none;visibility:visible}
  .sales-filters__title{text-align:start}
  .sales-filters__bar{display:none}

  /* בדסקטופ הכפתורים נעוצים לתחתית האזור הנגלל ולא לתחתית המסך, כדי
     שלא ייעלמו מתחת לגלילה הפנימית כשמרחיבים את קבוצות הסינון.
     ה-margin השלילי מבטל את ה-padding של .wrap כך שהרקע חוצה את כל
     רוחב הסרגל והתוכן אינו נראה מבעד לשוליים בזמן הגלילה. */
  .sales-filters__body{padding-block-end:0}
  .sales-filters__actions{
    position:sticky;
    inset-block-end:0;
    margin-block-start:20px;
    margin-inline:-20px;
    padding:16px 20px;
    background-color:var(--white);
    border-block-start:1px solid var(--light-gray);
  }

  /* בתוך עמודה של 300px אין מקום ל---gutter של 5vw */
  .sales-filters .wrap{padding-inline:20px}

  /* הסרגל עוצר בתחתית .site-main, ולכן הפוטר כבר אינו מתנגש בו.
     הרקע האטום נשאר כדי שהפוטר יישאר אטום מעל כל תוכן שנגלל. */
  body.has-sales-filters .site-footer{
    position:relative;
    z-index:95;
    background-color:var(--page-bg);
  }
  body.filters-open{overflow:visible}
}

@media (prefers-reduced-motion:reduce){
  .sales-filters,
  body.filters-open .sales-filters,
  .notifications-panel,
  body.notifications-open .notifications-panel{transition:none}
}

/* דסקטופ: העדכונים אינם מסך מלא אלא קופסה צפה בצד שמאל, מתחת להדר */
@media (min-width:900px){
  .notifications-panel{
    inset-block:calc(var(--admin-bar-height) + var(--header-height)) auto;
    inset-inline:auto 0;
    width:650px;
    max-width:calc(100vw - var(--gutter) * 2);
    max-height:calc(100vh - var(--header-height) - 24px);
    border:1px solid var(--light-gray);
    /*border-radius:8px;*/
    /* מתחת להדר (z-index 100), ולכן הוא נשלף מתחתיו כלפי מטה במקום מהצד */
    z-index:95;
    transform:translateY(-100%);
  }
  body.notifications-open .notifications-panel{transform:translateY(0)}

  /* בלי הפס הלבן – כפתור הסגירה הופך ל-X בפינה */
  .notifications-panel__bar{
    background-color:transparent;
    box-shadow:none;
  }
  .notifications-panel__bar-inner{justify-content:flex-end;padding-block:8px}
  .notifications-panel__icon--chevron{display:none}
  .notifications-panel__icon--x{display:block}

  /* --gutter של 5vw גדול מדי בתוך קופסה של 650px */
  .notifications-panel .wrap{padding-inline:20px}

  .notifications-panel__body{padding-block:0 24px}
  .notifications-panel__title{text-align:start}

  body.notifications-open{overflow:visible}
}