/* ==================================================================
   ELI · 2026-09-22

   1. פתיחה — הצללה נשלטת, בלי טקסט, כפתור שאפשר להזיז ולכבות
   2. כרטיס מוצר — בלי התיאור, כותרת הכרטיס ממורכזת
   3. "הכירו את הכלי" — קרוסלה עם חיתוך אלכסוני
   4. קטגוריות — שני אריחים גדולים וארבעה מתחתם
   5. עמוד מוצר — התיאור הקצר שירד מהכרטיס
   ================================================================== */


/* ==================================================================
   1. פתיחה
   ==================================================================

   ההצללה נמדדת עכשיו במשתנה אחד — --hero-shade בין 0 ל־1 —
   שנקבע במראה ← התאמה אישית ← "פתיחה". הערך 1 משחזר
   בדיוק את המצב הקודם, וברירת המחדל 0.55 — הסרטון נשאר
   קריא ונעים, בלי הוואל שחור על כל המסך. הטקסט ירד
   מהעמוד, ולכן אין מה "להבטיח קריאות" — רק לתת לכפתור
   על מה לשבת. */

.hero--has-text{ --hero-shade:.55; }

.hero--has-text .hero__media video,
.hero--has-text .hero__media img{
  opacity:calc(1 - .34 * var(--hero-shade));
}

.hero--has-text .hero__media::after{
  background:
    linear-gradient(to top,
      rgb(8 8 9 / calc(.88 * var(--hero-shade))) 0%,
      rgb(8 8 9 / calc(.48 * var(--hero-shade))) 34%,
      rgb(8 8 9 / calc(.16 * var(--hero-shade))) 66%,
      rgb(8 8 9 / calc(.34 * var(--hero-shade))) 100%);
}

/* בלי טקסט הכפתור עומד לבדו — ולכן הוא נכנס מוקדם ויושב נמוך יותר */
.hero--no-text .hero__inner{ padding-bottom:clamp(38px, 7vh, 84px); }
.hero--no-text .hero__actions{ animation-delay:.32s; }

/* --- יישור הכפתור ---
   מרגינים פיזיים בכוונה: באתר RTL תכונה לוגית היתה
   מהפכת את "שמאל" ל"ימין" והבחירה במראה היתה משקרת. */
.hero__actions{ width:fit-content; }

.hero--btn-center .hero__inner{ text-align:center; }
.hero--btn-center .hero__actions{ margin-left:auto;  margin-right:auto; }

.hero--btn-left .hero__inner{ text-align:left; }
.hero--btn-left .hero__actions{ margin-left:0;     margin-right:auto; }

.hero--btn-right .hero__inner{ text-align:right; }
.hero--btn-right .hero__actions{ margin-left:auto;  margin-right:0; }

/* המשפט, כשהוא מודלק בחזרה, מתיישר עם הכפתור */
.hero--btn-left.hero--has-text  .hero__text{ margin-left:0;    margin-right:auto; text-align:left; }
.hero--btn-right.hero--has-text .hero__text{ margin-left:auto; margin-right:0;    text-align:right; }


/* ==================================================================
   2. כרטיס המוצר
   ==================================================================

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

.bp-card__category,
.bp-card__title,
.bp-card__model,
.bp-card__model-he{ text-align:center; }

.bp-card__desc{ display:none; }


/* ==================================================================
   3. "הכירו את הכלי" — קרוסלה
   ==================================================================

   כל השקופיות יושבות באותה תא גריד (grid-area:1/1), ולכן
   הבמה מקבלת את גובה השקופית הגבוהה ביותר והעמוד לא
   קופץ במעבר. הפריסה בתוך השקופית מוגדרת ב-ltr בכוונה:
   clip-path עובד בקואורדינטות פיזיות ולא מתהפך ב-RTL, ולכן
   העמודות חייבות להיות קבועות פיזית. הטקסט מוחזר ל-rtl בפנים. */

.shw{
  padding-block:clamp(56px, 7vw, 96px);
  background:var(--c-bg, #FFFFFF);
  overflow:hidden;
}

.shw__stage{
  position:relative;
  display:grid;
}

.shw__slide{
  grid-area:1 / 1;
  direction:ltr;
  display:grid;
  grid-template-columns:minmax(0, 1.03fr) minmax(0, .97fr);
  align-items:stretch;
  min-block-size:clamp(400px, 43vw, 552px);
  background:var(--c-plate, #F6F2EC);
  clip-path:var(--cut-media-shape);
  --cut-media:20px;
  --shw-skew:11%;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .48s cubic-bezier(.2,.7,.3,1),
             transform .48s cubic-bezier(.2,.7,.3,1),
             visibility 0s linear .48s;
}

.shw__slide.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  z-index:2;
  transition-delay:0s;
}

/* --- התמונה והחיתוך --- */

.shw__media{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--c-graphite, #2B2B2B);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--shw-skew)) 100%, 0 100%);
}

.shw__media img{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.035);
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1);
}
.shw__slide.is-active .shw__media img{ transform:scale(1); }

/*
 * הקו הכתום של החיתוך. זו שכבה שנחתכת באותה אלכסון
 * של התמונה, ברוחב 2.5px — כך הקו יושב בדיוק על הקצה
 * בלי לחשב זוויות או לסובב אלמנטים.
 */
.shw__media::after{
  content:"";
  position:absolute; inset:0; z-index:3;
  background:var(--c-orange, #F14B1C);
  clip-path:polygon(
    calc(100% - 2.5px) 0,
    100% 0,
    calc(100% - var(--shw-skew)) 100%,
    calc(100% - var(--shw-skew) - 2.5px) 100%
  );
  pointer-events:none;
}

.shw__media--empty{
  display:grid;
  place-items:center;
  background:var(--c-plate-deep, #EDE3D7);
}
.shw__media--empty span{
  color:var(--c-slate, #8A8A8A);
  font-size:.9rem;
  font-weight:var(--w-medium, 500);
}

/* --- הצד המשקף: תמונה בשמאל --- */

.shw__slide--flip .shw__media{
  order:2;
  clip-path:polygon(var(--shw-skew) 0, 100% 0, 100% 100%, 0 100%);
}
.shw__slide--flip .shw__media::after{
  clip-path:polygon(
    var(--shw-skew) 0,
    calc(var(--shw-skew) + 2.5px) 0,
    2.5px 100%,
    0 100%
  );
}
.shw__slide--flip .shw__body{ order:1; }

/* --- הטקסט --- */

.shw__body{
  direction:rtl;
  text-align:right;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(9px, 1.2vw, 15px);
  padding-block:clamp(34px, 4.2vw, 58px);
  padding-right:clamp(26px, 3.4vw, 50px);
  padding-left:clamp(30px, 5.2vw, 74px);
}
.shw__slide--flip .shw__body{
  padding-right:clamp(30px, 5.2vw, 74px);
  padding-left:clamp(26px, 3.4vw, 50px);
}

.shw__eyebrow{
  margin:0;
  font-size:.8rem;
  font-weight:var(--w-black, 900);
  letter-spacing:.15em;
  color:var(--c-orange, #F14B1C);
}

.shw__title{
  margin:0;
  font-size:clamp(1.85rem, 3.3vw, 2.9rem);
  font-weight:var(--w-black, 900);
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--c-ink, #0A0A0A);
}
.shw__title span{
  display:block;
  margin-top:.1em;
  font-size:.58em;
  font-weight:var(--w-bold, 700);
  letter-spacing:-.01em;
  color:var(--c-orange-deep, #C93A0F);
}

.shw__text{
  margin:0;
  max-width:48ch;
  font-size:clamp(.92rem, 1.1vw, 1.02rem);
  line-height:1.72;
  color:var(--c-graphite, #2B2B2B);
}

.shw__points{
  margin:clamp(4px, .6vw, 8px) 0 0;
  padding-top:clamp(12px, 1.5vw, 19px);
  border-top:1px solid var(--c-hairline, #E6E6E6);
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(10px, 1.3vw, 18px);
}
.shw__points li{ min-inline-size:0; }
.shw__points b{
  display:block;
  font-size:clamp(.98rem, 1.45vw, 1.24rem);
  font-weight:var(--w-black, 900);
  line-height:1.15;
  color:var(--c-ink, #0A0A0A);
}
.shw__points .shw__ltr{ direction:ltr; unicode-bidi:isolate; text-align:right; }
.shw__points span{
  display:block;
  margin-top:3px;
  font-size:.76rem;
  line-height:1.3;
  color:var(--c-slate, #8A8A8A);
}

.shw__cta{
  align-self:flex-start;
  margin-top:clamp(6px, 1vw, 12px);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  background:var(--c-orange, #F14B1C);
  color:#fff;
  text-decoration:none;
  font-weight:var(--w-black, 900);
  font-size:.95rem;
  clip-path:var(--cut-shape);
  --cut:12px;
  transition:background .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}
.shw__cta:hover,
.shw__cta:focus-visible{
  background:var(--c-orange-deep, #C93A0F);
  transform:translateY(-2px);
}
.shw__cta svg{ inline-size:16px; block-size:16px; }

/* --- החיצים והנקודות --- */

.shw__controls{
  margin-top:clamp(18px, 2.3vw, 28px);
  display:flex;
  align-items:center;
  gap:clamp(8px, 1vw, 14px);
}

.shw__nav{
  inline-size:38px;
  block-size:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  cursor:pointer;
  background:var(--c-plate, #F6F2EC);
  color:var(--c-ink, #0A0A0A);
  clip-path:var(--cut-shape);
  --cut:9px;
  transition:background .2s ease, color .2s ease;
}
.shw__nav:hover,
.shw__nav:focus-visible{
  background:var(--c-orange, #F14B1C);
  color:#fff;
}
.shw__nav svg{ inline-size:17px; block-size:17px; }

.shw__dots{ display:flex; align-items:center; gap:8px; }

/* מעוין קטן — השפה הזוויתית של האתר, בגודל של נקודה */
.shw__dot{
  inline-size:9px;
  block-size:9px;
  padding:0;
  border:0;
  cursor:pointer;
  background:var(--c-plate-deep, #EDE3D7);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition:background .22s ease, transform .22s cubic-bezier(.34,1.4,.5,1);
}
.shw__dot:hover{ background:var(--c-slate, #8A8A8A); }
.shw__dot.is-on{ background:var(--c-orange, #F14B1C); transform:scale(1.4); }

.shw__count{
  margin:0;
  margin-inline-start:auto;
  font-size:.85rem;
  color:var(--c-slate, #8A8A8A);
  direction:ltr;
  unicode-bidi:isolate;
}
.shw__count b{ color:var(--c-ink, #0A0A0A); font-weight:var(--w-black, 900); }

/* --- נייד --- */

@media (max-width:860px){

  .shw__slide{
    grid-template-columns:minmax(0, 1fr);
    min-block-size:0;
    --cut-media:16px;
  }

  /* החיתוך עובר מהצד לתחתית — אותה שפה, נכון לעמודה אחת */
  .shw__media,
  .shw__slide--flip .shw__media{
    order:1;
    aspect-ratio:4 / 3;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
  }
  .shw__media::after,
  .shw__slide--flip .shw__media::after{
    clip-path:polygon(
      0 calc(100% - 2.5px),
      100% calc(100% - 36.5px),
      100% calc(100% - 34px),
      0 100%
    );
  }

  .shw__body,
  .shw__slide--flip .shw__body{
    order:2;
    padding:clamp(22px, 5.5vw, 32px);
    padding-top:clamp(8px, 2vw, 14px);
  }

  .shw__points{ gap:8px; }
  .shw__points b{ font-size:.98rem; }
  .shw__points span{ font-size:.7rem; }

  .shw__cta{ align-self:stretch; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .shw__slide{ transform:none; transition-duration:.001s; }
  .shw__slide .shw__media img,
  .shw__slide.is-active .shw__media img{ transform:none; transition:none; }
  .shw__cta:hover,
  .shw__cta:focus-visible{ transform:none; }
}


/* ==================================================================
   4. קטגוריות — שני אריחים גדולים וארבעה מתחתם
   ==================================================================

   שתי הקטגוריות שמביאות את רוב המכירות מקבלות את השורה
   העליונה בשלמותה, וארבע הנותרות נפרשות מתחתן במרווח
   אחיד. הסקשן רחב משאר העמוד — זו נקודת הנשימה שלו. */

.cats > .wrap{
  max-inline-size:min(1520px, 100% - 2 * var(--gutter, 20px));
}

.cat__grid--desk{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(12px, 1.15vw, 18px);
}

.cat__grid--desk > .cat__tile{ aspect-ratio:4 / 3; }

.cat__grid--desk > .cat__tile:nth-child(1),
.cat__grid--desk > .cat__tile:nth-child(2){
  grid-column:span 2;
  aspect-ratio:16 / 9;
  --cut-media:26px;
}

.cat__grid--desk > .cat__tile:nth-child(-n+2) .cat__title{
  font-size:clamp(1.85rem, 2.75vw, 2.6rem);
}
.cat__grid--desk > .cat__tile:nth-child(-n+2) .cat__eyebrow{
  font-size:1rem;
}

/* --- מסגרת כתומה שנמשכת בריחוף --- */

.cat__frame{
  position:absolute;
  inset:clamp(8px, .7vw, 12px);
  z-index:3;
  pointer-events:none;
  border:1px solid rgba(241, 75, 28, .92);
  clip-path:var(--cut-media-shape);
  --cut-media:12px;
  opacity:0;
  transform:scale(1.035);
  transition:opacity .38s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.cat__tile:hover .cat__frame,
.cat__tile:focus-visible .cat__frame,
.cat__tile:focus-within .cat__frame{ opacity:1; transform:none; }

/* --- הבזק הכתום שעובר פעם אחת בחשיפה --- */

.cat__sweep{
  position:absolute;
  inset:-25% -10%;
  z-index:2;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(104deg,
    transparent 44%,
    rgba(241, 75, 28, .00) 47%,
    rgba(241, 75, 28, .50) 50%,
    rgba(241, 75, 28, .00) 53%,
    transparent 56%);
  transform:translateX(-130%);
}

@keyframes beast-cat-sweep{
  0%  { transform:translateX(-130%); opacity:0; }
  28% { opacity:1; }
  100%{ transform:translateX(130%);  opacity:0; }
}

/* --- החשיפה בגלילה ---
   המצב המוסתר נמצא מאחורי .js-reveal שה-JS מוסיף.
   בלי JS האריחים גלויים כרגיל — לעולם לא עמוד ריק. */

.cats.js-reveal .cat__tile{
  opacity:0;
  transform:translateY(26px) scale(.986);
  transition:opacity .72s cubic-bezier(.2,.7,.3,1),
             transform .72s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--cat-i, 0) * .075s);
}
.cats.js-reveal .cat__tile.is-in{ opacity:1; transform:none; }

.cats.js-reveal .cat__tile.is-in .cat__sweep{
  animation:beast-cat-sweep .95s cubic-bezier(.3,.7,.3,1) forwards;
  animation-delay:calc(var(--cat-i, 0) * .075s + .22s);
}

/* --- ריחוף --- */

.cat__title{ transition:transform .42s cubic-bezier(.2,.7,.3,1); }
.cat__eyebrow{ transition:transform .42s cubic-bezier(.2,.7,.3,1), color .3s ease; }

.cat__tile:hover .cat__title,
.cat__tile:focus-visible .cat__title{ transform:translateY(-3px); }
.cat__tile:hover .cat__eyebrow,
.cat__tile:focus-visible .cat__eyebrow{ transform:translateY(-2px); }

.cat__tile:hover .cat__img{ transform:scale(1.06); }

/* הפרלקס של שני האריחים הגדולים — ה-JS קובע את המשתנים */
.cat__tile--par .cat__img{
  transform:translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.075);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.cat__tile--par.is-tracking .cat__img{ transition:transform .18s linear; }

@media (max-width:1080px){
  .cat__grid--desk{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cat__grid--desk > .cat__tile:nth-child(1),
  .cat__grid--desk > .cat__tile:nth-child(2){ grid-column:span 2; }
}

@media (prefers-reduced-motion: reduce){
  .cats.js-reveal .cat__tile{ opacity:1; transform:none; transition:none; }
  .cats.js-reveal .cat__tile.is-in .cat__sweep{ animation:none; opacity:0; }
  .cat__tile--par .cat__img{ transform:none; }
  .cat__tile:hover .cat__title,
  .cat__tile:hover .cat__eyebrow{ transform:none; }
}


/* ==================================================================
   5. עמוד המוצר — התיאור הקצר שירד מהכרטיס
   ================================================================== */

.pdp-carddesc{
  margin:0 0 var(--s-3, 16px);
  max-width:52ch;
  font-size:clamp(.95rem, 1.15vw, 1.06rem);
  line-height:1.68;
  color:var(--c-graphite, #2B2B2B);
}