.elementor-6625 .elementor-element.elementor-element-1ef20af{--display:flex;--margin-top:-140px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6625 .elementor-element.elementor-element-80f1fbd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}/* Start custom CSS for html, class: .elementor-element-80f1fbd *//* ===== בסיס + מניעת חיתוך מתפריט דביק ===== */
.hc-template{
  --ink:#112435; --muted:#5e6b78; --navy:#0b2a4a; --blue:#1e3a8a; --accent:#2563eb;
  --bg:#f7f9fc; --card:#fff; --stroke:#e7edf5;
  --radius:16px; --shadow:0 8px 24px rgba(17,36,53,.08);
  --header-offset: 96px;
  font-family: "Heebo", "Open Sans Hebrew", Arial, sans-serif;
  color:var(--ink);
  background: var(--bg);
  padding: clamp(24px, 3vw, 36px);
  padding-top: calc(clamp(24px, 3vw, 36px) + var(--header-offset));
}
.hc-full{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; }

/* כותרת */
.hc-hero{ text-align:center; margin-bottom:10px; }
.hc-title-hero{
  margin:0 0 8px;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.15;
  font-size: clamp(30px, 3.8vw, 46px);
  color:#0b2a4a;
  background: linear-gradient(90deg,#0b2a4a 0%, #1e3a8a 50%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hc-subtitle{ margin:0; color:var(--muted); font-size: clamp(14px, 1.6vw, 16px); }

/* סרגל סינון */
.hc-toolbar{display:flex;gap:12px;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--stroke);border-radius:12px;padding:16px clamp(10px,2.4vw,20px);margin:20px 0 18px;box-shadow:var(--shadow)}
.hc-filters{display:flex;gap:10px 14px;flex-wrap:wrap}
.hc-toolbar label{font-size:.9rem;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.hc-toolbar select{appearance:none;border:1px solid var(--stroke);border-radius:10px;padding:12px 14px;min-width:160px;background:#fff;color:var(--ink)}
.hc-right{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.hc-search{position:relative}
.hc-search input{border:1px solid var(--stroke);border-radius:10px;padding:12px 42px 12px 14px;min-width:220px;color:var(--ink)}
.hc-search-ico{position:absolute;right:12px;top:50%;transform:translateY(-50%);opacity:.6}

/* רשת: 4 בעמודה בדסקטופ */
.hc-grid{display:grid;gap:20px;grid-template-columns:repeat(12,1fr)}
@media (min-width:1024px){ .hc-card{grid-column:span 3} }
@media (min-width:700px) and (max-width:1023px){ .hc-card{grid-column:span 6} }
@media (max-width:699px){ .hc-card{grid-column:span 12} }

/* כרטיס */
.hc-card{
  background:var(--card); border:1px solid var(--stroke); border-radius:18px;
  padding:22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px; min-height: 420px;
}

/* תמונות — שקוף + מרכז + זום עדין */
.hc-media{
  background: transparent !important;
  border: 1px solid #dfe6ee !important;
  border-radius: 14px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  padding: 6px;
  min-height: 230px;
}
.hc-media img{
  width: auto !important;
  height: auto !important;
  max-width: 110% !important;   /* זום עדין */
  max-height: 110% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  margin: auto;
}
.hc-media[style*="background-image"]{
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 1px solid #dfe6ee !important;
}

/* ראש כרטיס */
.hc-card-head{display:flex;align-items:center;gap:14px}
.hc-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--navy),var(--blue));box-shadow:0 10px 22px rgba(30,58,138,.18)}
.hc-title{margin:0;font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:.2px}

/* מאפיינים */
.hc-specs{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.98rem;line-height:1.5}
.hc-specs li{display:flex;gap:6px;color:var(--ink)}
.hc-specs strong{color:var(--muted);font-weight:600;min-width:8.2rem}

/* כפתור */
.hc-card-cta{margin-top:auto;display:flex;justify-content:flex-start}
.hc-btn{
  display:inline-block;text-decoration:none !important;color:#fff !important;font-weight:700;
  background-image:linear-gradient(90deg,var(--navy),var(--blue),var(--accent));
  background-size:200% 100%;
  padding:12px 18px;border-radius:12px;
  transition:background-position .8s linear,transform .15s ease,box-shadow .2s ease;
  box-shadow:0 10px 24px rgba(17,36,53,.18)
}
.hc-btn:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 14px 28px rgba(17,36,53,.24)}
.hc-btn:focus{outline:2px solid rgba(37,99,235,.35);outline-offset:2px}
<\/style>

<script>
(function(){
  const q  = (s, r=document)=>r.querySelector(s);
  const qa = (s, r=document)=>Array.from(r.querySelectorAll(s));
  const grid  = q('#hc-grid');
  const cards = qa('.hc-card', grid);
  const fW = q('#f-weight'), fH = q('#f-height'), fB = q('#f-battery'), fU = q('#f-usage'), fS = q('#f-search');

  function inRange(val, key){
    if(!val) return true;
    const num = parseFloat(key);
    if(isNaN(num)) return true;
    if(val === '<=1.5') return num <= 1.5;
    if(val === '1.6-2.5') return num >= 1.6 && num <= 2.5;
    if(val === '2.6-3.5') return num >= 2.6 && num <= 3.5;
    if(val === '>3.5') return num > 3.5;
    if(val === '<=4') return num <= 4;
    if(val === '4-6') return num >= 4 && num <= 6;
    if(val === '>6') return num > 6;
    return true;
  }
  const norm = s => (s||'').toString().trim().toLowerCase();

  function applyFilters(){
    const vW = fW.value, vH = fH.value, vB = norm(fB.value), vU = norm(fU.value), vS = norm(fS.value);
    let visible = 0;
    cards.forEach(card=>{
      const w = card.getAttribute('data-weight');
      const h = card.getAttribute('data-height');
      const b = norm(card.getAttribute('data-battery'));
      const u = norm(card.getAttribute('data-usage'));
      const t = norm(card.getAttribute('data-title') || card.textContent);
      const ok = inRange(vW,w) && inRange(vH,h) && (!vB || b===vB) && (!vU || u===vU) && (!vS || t.includes(vS));
      card.style.display = ok ? '' : 'none';
      if(ok) visible++;
    });

    let empty = q('.hc-empty', grid.parentElement);
    if(!empty){
      empty = document.createElement('p');
      empty.className = 'hc-empty';
      empty.style.cssText = 'text-align:center;color:#5e6b78;margin-top:16px;display:none';
      empty.textContent = 'לא נמצאו תוצאות לפי הסינון.';
      grid.after(empty);
    }
    empty.style.display = visible ? 'none' : 'block';
  }

  [fW,fH,fB,fU].forEach(el=>el.addEventListener('change', applyFilters));
  fS.addEventListener('input', applyFilters);
  applyFilters();
})();
</script>
<style>
/* גובה גדול ל-HERO */
.hc-hero{
  position: relative;
  min-height: 420px;       /* ↑ תעלה ל-520/600px אם תרצה עוד */
  padding: 48px 16px;      
  display: grid;
  align-content: center;    /* מרכז טקסט אנכי */
  justify-items: center;    /* מרכז אופקי */
}
.hc-hero > *{ position: relative; z-index: 1; } /* טקסט מעל הרקע */
.hc-hero-bg{ position:absolute; inset:0; }       /* הרקע מכסה את כל הגובה */
@media (max-width:700px){
  .hc-hero{ min-height: 360px; padding: 40px 14px; }
}
<\/style>
<style>
/* גובה כל הכרטיס */
.hc-card{
  min-height: 520px;        /* היה ~420px – הגדלתי */
}

/* להגדיל את משבצת התמונה בתוך הכרטיס */
.hc-media{
  aspect-ratio: auto;       /* מבטל יחס קבוע */
  min-height: 260px;        /* קובע גובה מינימלי נוח לתמונה */
}

/* במסכים קטנים – קצת פחות כדי שלא יצא ארוך מדי */
@media (max-width:700px){
  .hc-card{ min-height: 480px; }
  .hc-media{ min-height: 220px; }
}
<\/style>
/* === HERO חזק וגבוה יותר === */
.hc-hero{
  position: relative;
  min-height: 460px; /* ← אם תרצה: 520 / 600 / 700 */
  padding: 60px 20px; 
  display: flex;
  flex-direction: column;
  justify-content: center; /* מרכז אנכי */
  align-items: center;     /* מרכז אופקי */
  text-align: center;
}

.hc-hero-bg{
  position:absolute; 
  inset:0;
  background:
    radial-gradient(1400px 400px at 70% 0%, rgba(37,99,235,.32), transparent 60%),
    linear-gradient(135deg, rgba(11,42,74,.97), rgba(30,58,138,.97));
  filter: saturate(120%);
}

.hc-title-hero{
  color:#ffffff;
  font-size: clamp(42px, 5vw, 68px); /* גדול יותר */
  font-weight: 800;
  margin-bottom: 12px;
  text-shadow: 0 3px 14px rgba(0,0,0,.25);
}

.hc-subtitle{
  color:#e9f1ff;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
}
/* === רקע אדום פרארי חזק רק ל-HERO === */
.hc-hero-bg{
  background: linear-gradient(135deg, #8e0000, #c80000, #ff1d1d) !important;
  opacity: 1 !important;
}

/* טקסט נשאר חד */
.hc-title-hero{
  color:#ffffff !important;
  text-shadow:0 3px 14px rgba(0,0,0,.32);
}

.hc-subtitle{
  color:#ffecec !important;
}
/* === HERO אדום פרארי רקע בלבד === */
.hc-hero{
  background: linear-gradient(135deg, #8e0000, #c80000, #ff1d1d);
  color: #fff !important;
  /* אם יש תמונת רקע לפני זה מבטל אותה */
  background-image: linear-gradient(135deg, #8e0000, #c80000, #ff1d1d) !important;
}

/* טקסט לבן חד */
.hc-title-hero{
  color: #ffffff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.32);
}

.hc-subtitle{
  color: #ffecec !important;
}
/* === הירו - גרדיאנט אדום #e73333 חי === */
.hc-hero-bg {
  background: linear-gradient(135deg, #e73333 0%, #d82828 45%, #b30000 100%) !important;
  opacity: 1 !important;
}

.hc-title-hero,
.hc-subtitle {
  color: #ffffff !important;
}

/* === כפתור "פרטים נוספים" - גרדיאנט באותו צבע === */
.hc-card-cta .hc-btn:first-child {
  background: linear-gradient(90deg, #e73333 0%, #d82828 45%, #b30000 100%) !important;
  color: #ffffff !important;
  border: none !important;
  background-size: 200% 100%;
  transition: background-position .6s ease, transform .2s ease, box-shadow .25s ease;
  box-shadow: 0 8px 22px rgba(231, 51, 51, 0.35);
}

.hc-card-cta .hc-btn:first-child:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(231, 51, 51, 0.45);
}
/* === צבע אייקון כמו הירו והכפתור (#e73333) === */
.hc-ico {
  background: linear-gradient(135deg, #e73333 0%, #d82828 45%, #b30000 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(231, 51, 51, 0.35) !important;
  border: none !important;
}

/* היילייט בהובר קטן */
.hc-ico:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(231, 51, 51, 0.45) !important;
  transition: .25s ease;
}
/* איקון – פחות זוהר */
.hc-card-head .hc-ico {
  background: linear-gradient(135deg, #e54f47, #c93a33) !important;
  box-shadow: 0 6px 14px rgba(229, 79, 71, .22) !important; /* פחות הארה */
}

/* כפתור פרטים נוספים – פחות בוהק */
.hc-btn.primary {
  background-image: linear-gradient(90deg, #e54f47, #c93a33, #e54f47) !important;
  box-shadow: 0 6px 18px rgba(229, 79, 71, .25) !important; /* הורדנו */
}
.hc-btn.primary:hover {
  box-shadow: 0 8px 22px rgba(229, 79, 71, .32) !important;
  transform: translateY(-1px);
}
/* איקון רקע אדום, סמל לבן */
.hc-card .hc-ico {
  background: #ed251e !important;
  box-shadow: 0 6px 14px rgba(237, 37, 30, .28) !important;
}

.hc-card .hc-ico svg {
  fill: #ffffff !important;
}/* End custom CSS */