/* ==================================================================
   Beast — עיצוב האתר
   ================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--c-ink);
  background:var(--c-canvas);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-.015em; }

:focus-visible{ outline:3px solid var(--c-ink); outline-offset:3px; }

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0;
  background:var(--c-ink); color:#fff; padding:12px 20px; z-index:999;
}
.skip-link:focus{ inset-inline-start:0; }


/* ---------- כפתורים ---------- */

/*
 * הצורה: מלבן חד עם קטימה באלכסון בשמאל-עליון ובימין-תחתון.
 * clip-path חותך את הפינות, אבל הוא גם מבטל כל border —
 * ולכן הגרסה עם קו מתאר בנויה משתי שכבות מאחורי הטקסט:
 *   ::before  = צבע המסגרת, ממלא את כל הכפתור
 *   ::after   = צבע המילוי, מוקטן ב---edge ונחתך באותה צורה
 * מה שנשאר גלוי מ-::before הוא הקו — והוא עוקב אחרי האלכסון.
 * isolation:isolate מחזיק את שתי השכבות מתחת לטקסט ובתוך הכפתור.
 */

.btn{
  position:relative;
  isolation:isolate;
  display:inline-block;
  font:inherit;
  font-weight:var(--w-bold);
  text-align:center;
  text-decoration:none;
  border:0;
  border-radius:0;
  cursor:pointer;
  padding:15px 34px;
  clip-path:var(--cut-shape);
  transition:background .15s ease, color .15s ease;
}

.btn--block{ display:block; width:100%; }

/* מלא */
.btn--primary{
  background:var(--g-orange);
  color:#fff;
  font-size:1.2rem;
}
.btn--primary:hover,
.btn--primary:focus-visible{ background:var(--g-orange-hover); color:#fff; }

/* קו מתאר */
.btn--outline{
  background:transparent;
  color:#fff;
  font-size:1.2rem;
  --edge-color:#fff;
  --fill-color:var(--c-graphite);
}
.btn--outline::before{
  content:"";
  position:absolute; inset:0;
  background:var(--edge-color);
  z-index:-2;
}
.btn--outline::after{
  content:"";
  position:absolute; inset:var(--edge);
  background:var(--fill-color);
  clip-path:var(--cut-shape);
  z-index:-1;
}
.btn--outline:hover,
.btn--outline:focus-visible{
  --edge-color:var(--c-orange);
  --fill-color:var(--c-orange);
  color:#fff;
}

/*
 * חשיפת אייקון: הטקסט זז הצידה ועגלה מחליקה פנימה.
 * ה-clip-path כבר חותך את מה שגולש, אז אין צורך ב-overflow:hidden.
 * רק במכשירים עם עכבר — במגע אין ריחוף, ורק היה מהבהב בלחיצה.
 */
.btn--reveal{ position:relative; }

.btn--reveal .btn__label{
  display:inline-block;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}

.btn--reveal .btn__icon{
  position:absolute;
  top:50%;
  inset-inline-end:22px;
  display:grid; place-items:center;
  opacity:0;
  transform:translate(-16px, -50%);
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.btn--reveal .btn__icon-svg{
  width:1.15em; height:1.15em;
  stroke:currentColor;
}

@media (hover:hover) and (pointer:fine){
  .btn--reveal:hover .btn__label,
  .btn--reveal:focus-visible .btn__label{ transform:translateX(15px); }

  .btn--reveal:hover .btn__icon,
  .btn--reveal:focus-visible .btn__icon{
    opacity:1;
    transform:translate(0, -50%);
  }
}

@media (prefers-reduced-motion:reduce){
  .btn--reveal .btn__label,
  .btn--reveal .btn__icon{ transition:none; }
}

/* קו מתאר כתום על רקע כהה — הווריאציה מהצילום */
.btn--outline-orange{ --edge-color:var(--c-orange); }

/* clip-path חותך outline רגיל, אז הסימון מגיע מבפנים */
.btn:focus-visible{ outline:0; box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 6px var(--c-ink); }

/* ---------- שורת הודעה ---------- */

/*
 * הבאנר הלבן שמעל ההדר. הוא חלק מהראש הקבוע (.site-top) ולכן
 * נשאר צמוד למעלה יחד עם ההדר גם בגלילה.
 *
 * הודעה ארוכה נשברת לשורה שנייה, אבל לא יותר: line-clamp חותך
 * בשתי שורות עם שלוש נקודות — בכל רוחב מסך.
 *
 * שים לב: אין כאן border-bottom או צל. כל קו הפרדה בין הבאנר
 * הלבן להדר הכהה נראה כ"רצועה אפורה" דקה — התפר חלק בכוונה.
 */
.topbar{
  background:#fff;
  color:var(--c-ink);
  font-size:clamp(.6rem, 2.5vw, .9rem);
  font-weight:var(--w-medium);
  line-height:1.3;
  text-align:center;
  padding:9px 0;
}
.topbar .wrap{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- כותרת עליונה ---------- */

/*
 * הראש כולו — באנר + לוגו + קטגוריות — עטוף ב-.site-top אחד
 * שדבוק לראש המסך בכל גלילה ובכל עמוד.
 *
 * sticky ולא fixed בכוונה: sticky משאיר את הבלוק בזרימת המסמך,
 * ולכן התוכן שמתחתיו מתחיל בדיוק אחריו בלי padding ידני — גם
 * כשגובה הבאנר משתנה בין שורה אחת לשתיים ברוחבי מסך שונים.
 */
.site-top{
  position:sticky; top:0; z-index:100;
}

/* ההדר תמיד אטום. שום דבר לא זולג מאחוריו. */
.site-header{
  background:var(--c-graphite);
}

/* --- שורה עליונה: המבורגר | לוגו | חיפוש וסל --- */

.site-header__bar{
  height:var(--header-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--s-3);
}

/*
 * בלי min-width:0 עמודת גריד לא מוכנה לרדת מתחת לרוחב המינימלי של
 * התוכן שלה, ובמסכים צרים (320px) שלוש העמודות יחד חורגות מהמסך —
 * העגלה, שהיא הפריט הקיצוני, נדחפת אל מחוץ למסגרת.
 */
.site-header__bar > *{ min-width:0; }

.nav-toggle{
  justify-self:start;
  display:grid; place-items:center;
  background:none; border:0; padding:0;
  width:46px; height:46px;
  cursor:pointer;
}
/*
 * קובץ ה-SVG שלכם רחב ושטוח (יחס 44:20), לא מרובע כמו אייקוני
 * החיפוש והעגלה. מקבעים לפי הגובה ומשאירים לרוחב להתרחב באופן
 * יחסי — כך שלושת האייקונים נראים באותו משקל חזותי על אותו קו.
 */
.nav-toggle__icon{ width:auto; height:26px; display:block; }

.site-logo{
  justify-self:center;
  display:block;
  color:#fff;               /* צובע את החלק הכהה של הלוגו */
  text-decoration:none;
  line-height:0;
}
.site-logo__mark,
.site-logo img{
  height:calc(var(--header-h) - 32px);
  width:auto;
  max-width:min(52vw, 320px);
  object-fit:contain;
}

.header-actions{
  justify-self:end;
  display:flex; align-items:center; gap:var(--s-2);
}

.icon-btn{
  position:relative;
  display:grid; place-items:center;
  width:46px; height:46px;
  background:none; border:0; padding:0; cursor:pointer;
  color:#fff; text-decoration:none;
}
.icon-btn__icon{ width:26px; height:26px; }
.icon-btn:hover{ color:var(--c-orange); }

.header-cart__count{
  position:absolute; top:2px; inset-inline-start:2px;
  min-width:20px; height:20px;
  display:grid; place-items:center;
  background:var(--c-orange); color:#fff;
  border-radius:10px;
  font-size:.75rem; font-weight:var(--w-bold);
  padding:0 5px;
}

/*
 * מסכים צרים: מצמצמים את שלושת המרכיבים של השורה — המרווח בין
 * העמודות, גודל כפתורי האייקון, והתקרה של הלוגו — כדי שהכל ייכנס
 * גם ב-320px. נבדק ב-320 / 360 / 375 / 390 / 414.
 */
@media (max-width:480px){
  .site-header__bar{ gap:8px; }
  .header-actions{ gap:2px; }
  .icon-btn,
  .nav-toggle{ width:40px; height:40px; }
  .icon-btn__icon{ width:23px; height:23px; }
  .nav-toggle__icon{ height:22px; }
  .site-logo__mark,
  .site-logo img{ max-width:44vw; }
  .header-cart__count{
    min-width:17px; height:17px;
    font-size:.68rem; padding:0 4px;
  }
}

@media (max-width:360px){
  .site-header__bar{ gap:4px; }
  .icon-btn,
  .nav-toggle{ width:36px; height:36px; }
  .icon-btn__icon{ width:21px; height:21px; }
  .site-logo__mark,
  .site-logo img{ max-width:40vw; }
}

/* --- שורה שנייה: כפתורי הקטגוריות --- */

.pill-nav{ padding-bottom:var(--s-2); }

.pill-nav__list{
  min-height:var(--nav-h);
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:var(--s-2);
  list-style:none; margin:0; padding:0;
}

.pill-nav__list a{
  position:relative;
  isolation:isolate;
  will-change:transform;
  transition:transform .34s cubic-bezier(.22,.9,.28,1);
  display:block;
  padding:11px 26px;
  border:0;
  border-radius:0;
  clip-path:var(--cut-shape);
  background:transparent;
  color:#fff;
  font-size:1.05rem;
  font-weight:var(--w-medium);
  text-decoration:none;
  white-space:nowrap;
  /* ברירת מחדל: רק הטקסט. הקופסה הכתומה מופיעה
     ברפרוף במחשב ובנגיעה במובייל. */
  --edge-color:transparent;
  --fill-color:transparent;
}
.pill-nav__list a::before{
  content:"";
  position:absolute; inset:0;
  background:var(--edge-color);
  z-index:-2;
}
.pill-nav__list a::after{
  content:"";
  position:absolute; inset:1.5px;
  background:var(--fill-color);
  clip-path:var(--cut-shape);
  z-index:-1;
}
.pill-nav__list a:focus-visible,
.pill-nav__list a:active{
  --edge-color:var(--c-orange);
  --fill-color:var(--c-orange);
}

/* רפרוף — רק במכשירים שבאמת יודעים לרפרף,
   כדי שבמגע הכתום לא ייתקע אחרי נגיעה */
@media (hover:hover){
  .pill-nav__list a:hover{
    --edge-color:var(--c-orange);
    --fill-color:var(--c-orange);
  }
}

.pill-nav__list a::before,
.pill-nav__list a::after{ transition:background .18s ease; }

/*
 * הקטגוריה שנמצאים בה נשארת כתומה.
 * וורדפרס מוסיף את המחלקות האלה לפריט התפריט הפעיל,
 * ו-aria-current מוסיף גם הכרזה נכונה לקוראי מסך.
 */
.pill-nav__list .current-menu-item > a,
.pill-nav__list .current-menu-ancestor > a,
.pill-nav__list .current-product-ancestor > a,
.pill-nav__list a[aria-current]{
  --edge-color:var(--c-orange);
  --fill-color:var(--c-orange);
  font-weight:var(--w-bold);
}

/* בזמן שהכפתור נמשך אחרי הסמן הוא צריך להגיב מיד, לא להשתרך */
.pill-nav__list a.is-magnet{ transition-duration:.08s; }

@media (prefers-reduced-motion:reduce){
  .pill-nav__list a{ transition:none; transform:none !important; }
}

/*
 * במובייל מוצגות שלוש הקטגוריות הראשונות בלבד —
 * השאר זמינות במגירה, שנפתחת מההמבורגר.
 */
@media (max-width:760px){
  .pill-nav__list{
    flex-wrap:nowrap;
    justify-content:center;
    gap:6px;
  }
  .pill-nav__list > li:nth-child(n+4){ display:none; }
  .pill-nav__list a{
    padding:9px 12px;
    font-size:clamp(.72rem, 3.1vw, .95rem);
  }
}

@media (max-width:380px){
  .pill-nav__list{ gap:4px; }
  .pill-nav__list a{ padding:8px 7px; font-size:clamp(.68rem, 2.9vw, .95rem); }
}

/* --- חיפוש --- */

.site-search[hidden]{ display:none; }

.site-search{
  border-top:1px solid rgba(255,255,255,.16);
  background:var(--c-graphite);
  padding-block:var(--s-3);
}
.site-search form{ display:flex; gap:var(--s-2); }
.site-search input[type="search"],
.site-search input[type="text"]{
  flex:1;
  font:inherit;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:0;
  background:rgba(255,255,255,.06);
  color:#fff;
}
.site-search input::placeholder{ color:#9A9A9A; }
.site-search button{
  font:inherit; font-weight:var(--w-bold);
  padding:14px 28px;
  border:0; border-radius:0;
  clip-path:var(--cut-shape);
  background:var(--g-orange); color:#fff;
  cursor:pointer;
}

/* ---------- מגירה ---------- */

/*
 * שים לב: [hidden] הוא display:none בעדיפות נמוכה מאוד,
 * וכל display מפורש גובר עליו. לכן ההסתרה נכתבת במפורש.
 * האתר כולו RTL, אז המגירה ממוקמת ב-right פיזי — לא inset-inline,
 * שמתהפך ומציב אותה בשמאל.
 */

.drawer-scrim{
  position:fixed; inset:0; z-index:110;
  background:rgba(0,0,0,.55);
  animation:fade-in .2s ease-out;
}
.drawer-scrim[hidden]{ display:none; }

.drawer{
  position:fixed; z-index:120;
  top:0; bottom:0;
  right:0; left:auto;
  width:min(370px, 86vw);
  background:var(--c-surface);
  display:flex; flex-direction:column;
  padding:0 0 var(--s-4);
  overflow-y:auto;
  overscroll-behavior:contain;
  box-shadow:-8px 0 28px rgba(0,0,0,.18);
  animation:drawer-in .22s ease-out;
}
.drawer[hidden]{ display:none; }

@keyframes drawer-in{ from{ transform:translateX(100%); } }
@keyframes fade-in{ from{ opacity:0; } }

@media (prefers-reduced-motion:reduce){
  .drawer, .drawer-scrim{ animation:none; }
}

/*
 * רצועת המותג שבראש המגירה — כהה, נדבקת לקצוות (הדרוור עצמו בלי
 * ריפוד עליון/צדדי, ראה .drawer{ padding }). הלוגו יושב עליה כדבר
 * הראשון שרואים, בדיוק כמו בהדר הראשי, עם אותה משמעות של השחור/כתום.
 */
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-3);
  background:var(--c-graphite);
}
.drawer__head .icon-btn{ color:#fff; }

.drawer__logo{ display:block; line-height:0; }
.drawer__logo-mark,
.drawer__logo img{ height:34px; width:auto; max-width:180px; object-fit:contain; }

.drawer__nav{ padding-inline:var(--s-3); }

.drawer__list{ list-style:none; margin:0; padding:0; }
.drawer__list li{ border-bottom:1px solid var(--c-hairline); }
.drawer__list a{
  display:block;
  padding:16px 4px;
  font-size:1.2rem;
  font-weight:var(--w-medium);
  text-decoration:none;
}
.drawer__list a:hover{ color:var(--c-orange); }
.drawer__list .sub-menu{ list-style:none; margin:0 0 10px; padding:0 16px 0 0; }
.drawer__list .sub-menu li{ border:0; }
.drawer__list .sub-menu a{ padding:9px 4px; font-size:1rem; color:var(--c-slate); }

.drawer__foot{ margin-top:auto; padding:var(--s-3) var(--s-3) 0; }

.drawer__foot-row{ display:flex; align-items:stretch; gap:var(--s-2); }
.drawer__cart{ flex:1; }

/*
 * כפתור הטיקטוק — ריבוע קטום באותה שפה של כפתורי האתר, לא בצבעי
 * המותג הצבעוניים של טיקטוק, כדי שיישאר עקבי עם שאר האתר.
 */
.drawer__social{
  flex:none;
  width:52px; height:52px;
  display:grid; place-items:center;
  background:var(--c-ink);
  color:#fff;
  clip-path:var(--cut-shape);
  transition:background .15s ease;
}
.drawer__social:hover,
.drawer__social:focus-visible{ background:var(--c-orange); }
.drawer__social-icon{ width:24px; height:24px; }

body.drawer-open{ overflow:hidden; }

/* ---------- Hero במסך מלא ---------- */

/*
 * הפתיחה מתחילה מתחת לראש הקבוע ולא זולגת מאחוריו:
 * ההדר אטום ויושב מעליה בזרימת המסמך, וההירו ממלא בדיוק את
 * מה שנשאר מהמסך — 100svh פחות הגובה הנמדד של הראש.
 *
 * svh ולא vh: בנייד vh מתעלם משורת הכתובת של הדפדפן והתחתית
 * הייתה נחתכת. --head-actual נמדד ב-theme.js כי גובה הבאנר
 * משתנה בין שורה אחת לשתיים.
 *
 * עד שתעלה תמונה או סרטון מהניהול, מוצג רקע גרפיט כמציין מקום.
 */
.hero{
  position:relative;
  min-height:calc(100svh - var(--head-actual) - var(--bx-peek, 44px));
  overflow:hidden;
  background:var(--c-graphite);
  color:#fff;
}

/* התמונה או הסרטון ממלאים את הסקשן לרוחב ולגובה בלי להתעוות */
.hero__media{
  position:absolute; inset:0;
  z-index:0;
}
.hero__media img,
.hero__media video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/*
 * הטקסט והכפתור הוסרו בינתיים (לבקשתך). הסגנונות נשארים כאן
 * כדי שכשנחזיר את הטקסט — כולל ההצללה שמבטיחה קריאות —
 * יהיה רק לבטל את ההערה ב-front-page.php.
 *
 * ההצללה תחזור עם הטקסט: בלי טקסט היא רק מחשיכה את התמונה.
 */
.hero--has-text .hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.55) 38%,
    rgba(0,0,0,.18) 70%,
    rgba(0,0,0,.35) 100%
  );
}

.hero__inner{
  position:relative; z-index:1;
  width:100%;
  align-self:flex-end;
  padding-bottom:var(--s-6);
}
.hero--has-text{ display:flex; align-items:flex-end; }

/*
 * כותרת הפתיחה בפונט Karantina — פונט תצוגה בעברית, לא Heebo.
 * שתי שורות בכוונה: הראשונה קטנה ולבנה, השנייה גדולה וכתומה.
 */
.hero__title{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.05;
  max-width:20ch;
  margin-bottom:var(--s-3);
}
.hero__title span{ display:block; }

.hero__title-line1{
  font-size:clamp(1.7rem, 4vw, 2.6rem);
  color:#fff;
}
.hero__title-line2{
  font-size:clamp(3rem, 8vw, 5.5rem);
  color:var(--c-orange);
}

.hero__text{
  font-size:var(--t-lead);
  color:#DEDEDE;
  max-width:46ch;
  margin-bottom:var(--s-4);
}

.hero__actions{ display:flex; gap:var(--s-2); flex-wrap:wrap; }

@media (max-width:700px){
  .hero__inner{ padding-bottom:var(--s-5); }
  .hero__actions .btn{ flex:1 1 auto; }
}

/* ---------- אזורי תוכן ---------- */

.section{ padding-block:var(--s-6); }

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-3);
  margin-bottom:var(--s-4);
  flex-wrap:wrap;
}

/* ממורכז — לסקשנים שהכותרת בהם יושבת באמצע השורה */
.section__head--center{ justify-content:center; text-align:center; }

/*
 * הסוגר הכתום — קו אחד רציף, לא שניים.
 * הוא יורד בצד החיצוני של הכותרת, פונה בפינה מעוגלת
 * ורץ לאורך התחתית. נבנה משתי מסגרות של אותו אלמנט,
 * ולכן החיבור ביניהן תמיד מושלם ואפשר לעגל אותו.
 *
 * הצד: התכונות הלוגיות מתהפכות ב-RTL, ולכן inline-end כאן הוא שמאל —
 * בדיוק כמו בצילום. אם צריך להעביר לימין, מחליפים end ב-start בשלוש
 * השורות המסומנות.
 */
.section-title{
  position:relative;
  padding-block:var(--rule-rise) var(--rule-drop);
  padding-inline-end:var(--rule-gap);   /* RTL: מרווח בין הקו לקופסה */
}

.section-title::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-end:0;                    /* RTL: נצמד לשמאל */
  inline-size:var(--rule-run);
  border-inline-end:var(--rule) solid var(--c-orange);
  border-block-end:var(--rule) solid var(--c-orange);
  border-end-end-radius:var(--rule-round);
  pointer-events:none;
}

/* הקופסה הקרמית שהטקסט יושב עליה */
.section-title__plate{
  display:inline-block;
  background:var(--c-plate);
  padding:var(--plate-pad-b) var(--plate-pad-i);
  clip-path:var(--plate-shape);
}

.section-title__eyebrow{
  font-size:var(--t-small);
  font-weight:var(--w-bold);
  color:var(--c-orange);
  margin:0 0 var(--s-1);
}

.section-title__text{
  font-size:var(--t-section);
  font-weight:var(--w-black);
  line-height:1.1;
  margin:0;
  text-wrap:balance;   /* אם כותרת חריגה בכל זאת נשברת — שתישבר מאוזן */
}

/* בלי קופסה — לשימוש כשהסקשן כבר יושב על רקע קרם */
.section-title--bare .section-title__plate{
  background:none;
  padding:0;
  clip-path:none;
}

/* גרסה קטנה — כיתוב מקדים מעל כותרת גדולה */
.section-title--sm .section-title__text{
  font-size:clamp(1rem, 1.6vw, 1.35rem);
  font-weight:var(--w-bold);
  letter-spacing:.01em;
}

/* על רקע כהה: קופסה שקופה בהירה, טקסט לבן */
.section--dark .section-title__plate{ background:rgba(255,255,255,.07); }
.section--dark .section-title__text{ color:#fff; }

@media (max-width:700px){
  .section-title{
    --rule-gap:6px;
    --rule-rise:0px;
    --rule-drop:6px;
    --plate-pad-i:18px;   /* צומצם — מפנה מקום לטקסט כדי שכותרת ארוכה תישאר על שורה אחת */
    --plate-pad-b:13px;
    --plate-cut:10px;
  }
}

.section__link{
  font-weight:var(--w-bold);
  color:var(--c-orange-deep);
  text-decoration:none;
  border-bottom:2px solid currentColor;
}

/*
 * גרסה מצומצמת של כותרת הסקשן — שורה אחת קצרה בשחור, בלי כותרת
 * גדולה מתחתיה (נבחרת החודש). הקופסה הקרמית מקבלת ריפוד קטן משלה
 * במקום הריפוד הגדול שנועד לכותרת דו-שורתית, כדי שלא תיראה מנופחת
 * ביחס לטקסט הקצר. white-space:nowrap מבטיח שהיא לא תישבר לשתי
 * שורות באף רוחב מסך; ה-clamp שומר על גודל קריא גם ב-320px.
 */
.section__head--tight .section-title{
  padding-block:0 10px;
  padding-inline-end:14px;
}
.section__head--tight .section-title__plate{
  padding:12px 22px;
}
.section__head--tight .section-title__text{
  white-space:nowrap;
  font-size:clamp(.85rem, 2.6vw, 1.3rem);
}


/* ---------- שירות ומעבדה ---------- */

/*
 * שלוש עמודות שוות, צמודות זו לזו בלי רווח.
 *
 * כל תמונה נחתכת בפינות שלה, וגם התפרים הפנימיים מקבלים קטימה.
 * הרקע של הגריד הוא הקרם, ולכן החריץ שנפתח בכל קטימה מתמלא
 * בקרם של הכרטיס במקום ברקע העמוד — וזה מה שיוצר את ההמשכיות.
 * הקטימה על הגריד עצמו מטפלת בשתי הפינות החיצוניות של הרצועה.
 */
.svc__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
  align-items:stretch;
  clip-path:var(--cut-media-shape);
  background:var(--c-plate);
}

.svc__media{
  margin:0;
  background:var(--c-graphite);
  aspect-ratio:1;
  clip-path:var(--cut-media-shape);
}
.svc__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.svc__card{
  background:var(--c-plate);
  padding:var(--svc-pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* בתוך הכרטיס הכותרת כבר לא צריכה מרווח תחתון גדול */
.svc__card .section__head{ margin-bottom:var(--s-3); }

.svc__title{
  font-size:var(--t-section);
  font-weight:var(--w-black);
  line-height:1.15;
  margin:0 0 var(--s-3);
}
.svc__title .hl{ color:var(--c-orange); }

.svc__text{
  color:#4A4A4A;
  line-height:1.75;
  margin:0;
}

@media (max-width:1000px){
  .svc__grid{ grid-template-columns:1fr; }
  .svc__media--a{ order:1; }        /* המעבדה נפתחת למעלה */
  .svc__card{ --svc-pad:26px; order:2; }
  .svc__media--b{ order:3; }        /* התצוגה יורדת מתחת לכרטיס */
  .svc__media{ aspect-ratio:16/10; }
}


/* ---------- שלוש הסיבות ---------- */

.feats{
  list-style:none;
  margin:var(--s-6) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s-4);
}

.feat{ position:relative; display:flex; }

.feat__inner{
  flex:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/*
 * contain ולא ברירת המחדל fill — אחרת הדפדפן מותח את ה-SVG
 * לריבוע ומעוות אייקון שיחס הצלעות שלו אינו 1:1.
 */
.feat__icon{
  inline-size:var(--feat-icon);
  block-size:var(--feat-icon);
  object-fit:contain;
  margin-bottom:var(--s-2);
}

.feat__title{
  font-size:clamp(1rem, 1.5vw, 1.25rem);
  font-weight:var(--w-black);
  margin:0 0 var(--s-1);
}

.feat__text{
  color:var(--c-slate);
  font-size:var(--t-small);
  line-height:1.55;
  margin:0;
  max-width:30ch;
}

/*
 * בנייד כל סיבה הופכת לכרטיס קרם עם קו מתאר כתום דק שמוסט
 * החוצה ולמטה. אותה שפה של הסוגר, רק סגורה מארבעה צדדים.
 * הצדדים כאן פיזיים בכוונה — ההסטה צריכה להיות שמאלה תמיד.
 */
@media (max-width:1000px){
  .feats{ gap:var(--s-3); margin-top:var(--s-5); }

  /*
   * הקופסה נחתכת ב-clip-path, ולכן קו המתאר לא יכול לשבת עליה —
   * הוא היה נחתך יחד איתה. הוא יושב על ה-li שעוטף אותה.
   */
  .feat__inner{
    background:var(--c-plate);
    clip-path:var(--plate-shape);
    padding:var(--s-3) 14px var(--s-4);
    justify-content:flex-start;
    position:relative;
    z-index:1;
  }

  .feat::before{
    content:"";
    position:absolute;
    top:var(--feat-offset);
    bottom:calc(var(--feat-offset) * -1);
    left:calc(var(--feat-offset) * -1);
    right:var(--feat-offset);
    border:1px solid var(--c-orange);
    pointer-events:none;
  }

  .feat__text{ font-size:.8rem; line-height:1.55; }
}

/*
 * בטלפון שלוש עמודות משאירות לכל כרטיס כ-100px, והטקסט
 * נשבר לשבע שורות — מה שמותח את הקופסאות למטה.
 * עמודה אחת ברוחב מלא מחזירה את הטקסט לשורה-שתיים.
 */
@media (max-width:620px){
  .feats{ grid-template-columns:1fr; gap:12px; }
  .feat__inner{ padding:16px 20px; }
  .feat__icon{ inline-size:64px; block-size:64px; }
  .feat__text{ font-size:.9rem; line-height:1.6; max-width:44ch; }
}

@media (max-width:420px){
  .feat{ padding-inline:0; }
}


/* ---------- כרטיס מוצר ---------- */

.bp-grid{
  display:grid;
  grid-template-columns:repeat(var(--bp-cols,4), minmax(0,1fr));
  gap:var(--s-4);
}
/* טאבלט ומטה: תמיד שניים בשורה, גם בטלפון */
@media (max-width:1000px){
  .bp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); }
}
@media (max-width:420px){
  .bp-grid{ gap:10px; }
}

/* כפתור מתחת לגריד */
.grid-cta{
  display:flex;
  justify-content:center;
  margin-top:var(--s-5);
}

.bp-card{
  background:var(--c-surface);
  border:1px solid var(--c-hairline);
  border-radius:var(--r-card);
  padding:clamp(14px, 3vw, 28px) clamp(12px, 2.4vw, 24px) clamp(14px, 2.4vw, 24px);
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-card);
}

.bp-card__category{
  font-size:clamp(.82rem, 2vw, 1.05rem);
  font-weight:var(--w-medium);
  color:var(--c-slate);
  margin:0 0 var(--s-1);
}

.bp-card__title{
  font-size:clamp(1.05rem, 3.2vw, 1.75rem);
  font-weight:var(--w-black);
  margin:0 0 var(--s-1);
}
.bp-card__title a{ text-decoration:none; }

.bp-card__model{
  font-size:clamp(.82rem, 2vw, 1.1rem);
  color:var(--c-slate);
  margin:0 0 var(--s-3);
}

.bp-card__media{
  position:relative;
  border-radius:var(--r-media);
  overflow:hidden;
  background:var(--c-graphite);
  aspect-ratio:1/1;
}
.bp-card__media img{ width:100%; height:100%; object-fit:cover; }

.bp-card__badge{
  position:absolute; top:12px; right:12px;
  background:var(--c-ink); color:#fff;
  font-size:clamp(.72rem, 1.8vw, .95rem);
  font-weight:var(--w-bold);
  padding:7px clamp(10px, 1.6vw, 18px);
  clip-path:var(--cut-shape);
  --cut:8px;
}

.bp-specs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:var(--s-3) 0 var(--s-4);
}
.bp-spec{
  text-align:center;
  padding:0 clamp(2px, .8vw, 6px);
  border-inline-start:1px solid var(--c-hairline);
}
.bp-spec:last-child{ border-inline-start:0; }
.bp-spec__icon{
  display:block; margin:0 auto clamp(5px, 1vw, 10px);
  width:clamp(18px, 2.4vw, 26px); height:clamp(18px, 2.4vw, 26px);
}
.bp-spec__value{ font-size:clamp(.95rem, 2.6vw, 1.5rem); font-weight:var(--w-bold); line-height:1.15; }
.bp-spec__unit{ font-size:clamp(.7rem, 1.7vw, 1.05rem); font-weight:var(--w-bold); }
.bp-spec__label{ font-size:clamp(.7rem, 1.7vw, .95rem); color:var(--c-slate); margin-top:4px; }

.bp-card .btn--primary{
  margin-top:auto;
  font-size:clamp(.95rem, 2.6vw, 1.35rem);
  padding:clamp(11px, 2vw, 17px) 14px;
  --cut:clamp(9px, 1.6vw, 14px);
}
.bp-card .btn--primary.loading{ opacity:.65; pointer-events:none; }
.bp-card .added_to_cart{
  display:block; text-align:center; margin-top:10px;
  color:var(--c-orange-deep); font-weight:var(--w-bold); text-decoration:none;
}


/* ---------- הקטגוריות שלנו ---------- */

/*
 * מחשב: שלוש עמודות 770 / 375 / 375. הגיבור פורש שתי שורות.
 * ב-RTL הפריט הראשון בגריד נוחת מימין, ולכן הגיבור ראשון בקוד
 * והשאר נופלים למקומם במילוי אוטומטי — בדיוק כמו במוקאפ.
 */
.cat__grid{
  display:grid;
  gap:var(--cat-gap);
}

/* מחשב: שש קטגוריות, שלוש בשורה, כולן באותו גודל */
.cat__grid--desk{ grid-template-columns:repeat(3, 1fr); }

/* מובייל: שלוש קטגוריות בלבד, אחת מתחת לשנייה */
.cat__grid--mob{ display:none; grid-template-columns:1fr; }

.cat__tile{
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  text-decoration:none;
  aspect-ratio:375/253;
  background:var(--c-tile-dark);
  clip-path:var(--cut-media-shape);
  --cut-media:18px;
}

.cat__tile--cream{ background:var(--c-plate-deep); }

.cat__img{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.cat__tile:hover .cat__img{ transform:scale(1.045); }

/* הצללה כדי שהכותרת תישאר קריאה על כל תמונה */
.cat__tile--photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(10,8,8,.88) 0%,
    rgba(10,8,8,.45) 32%,
    rgba(10,8,8,0)   62%);
  pointer-events:none;
}

/* --- כפתור החיצים --- */

/*
 * הצד פיזי בכוונה. הכפתור צריך לשבת בשמאל-עליון תמיד,
 * ותכונה לוגית הייתה מעבירה אותו לימין ב-RTL.
 */
.cat__badge{
  position:absolute;
  top:var(--cat-badge-in);
  left:var(--cat-badge-in);
  inline-size:var(--cat-badge);
  block-size:var(--cat-badge);
  display:grid; place-items:center;
  background:var(--c-orange);
  color:#fff;
  clip-path:var(--cut-shape);
  transition:background .18s ease;
  z-index:2;
}
.cat__tile:hover .cat__badge,
.cat__tile:focus-visible .cat__badge{ background:var(--c-orange-deep); }

/* הקובץ מצביע ימינה, ב-RTL הופכים אותו */
.cat__badge svg{
  inline-size:22px; block-size:22px;
  fill:currentColor;
  transform:scaleX(-1);
  transition:transform .22s cubic-bezier(.34,1.4,.5,1);
}
.cat__tile:hover .cat__badge svg,
.cat__tile:focus-visible .cat__badge svg{ transform:scaleX(-1) translateX(-3px); }

/* --- הטקסט --- */
.cat__text{
  position:relative; z-index:1;
  inline-size:100%;
  padding:0 var(--cat-pad-i) var(--cat-pad-b);
  text-align:right;
}
.cat__eyebrow{
  display:block;
  font-size:.92rem;
  font-weight:var(--w-medium);
  color:var(--c-tile-eyebrow);
  margin-bottom:var(--s-1);
}
.cat__title{
  display:block;
  font-size:clamp(1.35rem, 2vw, 1.7rem);
  font-weight:var(--w-black);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--c-tile-title);
}
.cat__tile--hero .cat__title{ font-size:clamp(1.6rem, 2.6vw, 2.15rem); }

/* על הקרם הצבעים מתהפכים */
.cat__tile--cream .cat__title{ color:var(--c-ink); }
.cat__tile--cream .cat__eyebrow{ color:var(--c-tile-eyebrow-ink); }

/* נייד: הגיבור על כל הרוחב, השאר שניים בשורה */
@media (max-width:820px){
  .cat__grid--desk{ display:none; }
  .cat__grid--mob{ display:grid; --cat-gap:15px; }
  .cat__tile{ aspect-ratio:16/7; --cut-media:14px; }
  :root{ --cat-badge:44px; --cat-badge-in:11px; --cat-pad-i:18px; --cat-pad-b:20px; }
  .cat__badge{ --cut:10px; }
  .cat__badge svg{ inline-size:18px; block-size:18px; }
  .cat__eyebrow{ font-size:.78rem; }
}



/* ---------- וואטסאפ צף ---------- */

.wa-float{
  position:fixed;
  z-index:90;
  inset-inline-end:18px;
  bottom:18px;
  width:var(--wa-size);
  height:var(--wa-size);
  display:grid; place-items:center;
  background:#25D366;
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
.wa-float:hover,
.wa-float:focus-visible{ transform:scale(1.06); }
.wa-float svg{ width:56%; height:56%; }

/* כשהמגירה פתוחה הוא לא צריך להפריע */
body.drawer-open .wa-float{ display:none; }

@media (max-width:700px){
  :root{ --wa-size:54px; }
  .wa-float{ inset-inline-end:14px; bottom:14px; }
}

/* ---------- כותרת תחתונה ---------- */

.site-footer{
  background:var(--c-graphite);
  color:#C9C9C9;
  margin-top:var(--s-6);
  padding-block:var(--s-5) var(--s-4);
}

.site-footer__cols{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:var(--s-4);
  padding-bottom:var(--s-4);
  border-bottom:1px solid rgba(255,255,255,.14);
}
@media (max-width:860px){
  .site-footer__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .site-footer__cols{ grid-template-columns:1fr; }
}

.site-footer h2{
  color:#fff;
  font-size:1.05rem;
  font-weight:var(--w-bold);
  margin-bottom:var(--s-2);
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li + li{ margin-top:8px; }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ color:#fff; }

.site-footer__brand .site-logo{ color:#fff; display:inline-block; margin-bottom:var(--s-2); }

.site-footer__bottom{
  padding-top:var(--s-3);
  font-size:var(--t-small);
}


@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}