/* ---- Futurism: the site references "futurizem" but no @font-face ever defined it ---- */
@font-face{font-family:'futurizem';src:url('/wp-content/uploads/2025/12/Futurism-Light.woff2') format('woff2'),url('/wp-content/uploads/2025/12/Futurism-Light.woff') format('woff'),url('/wp-content/uploads/2025/12/Futurism-Light.ttf') format('truetype');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'futurizem';src:url('/wp-content/uploads/2025/12/Futurism-Black.woff2') format('woff2'),url('/wp-content/uploads/2025/12/Futurism-Black.woff') format('woff'),url('/wp-content/uploads/2025/12/Futurism-Black.ttf') format('truetype');font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:'Futurism';src:url('/wp-content/uploads/2025/12/Futurism-Light.woff2') format('woff2'),url('/wp-content/uploads/2025/12/Futurism-Light.woff') format('woff');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'Futurism';src:url('/wp-content/uploads/2025/12/Futurism-Black.woff2') format('woff2'),url('/wp-content/uploads/2025/12/Futurism-Black.woff') format('woff');font-weight:600 900;font-style:normal;font-display:swap}

/* ---- sidebar column: kill the inherited flex gap so headers stack evenly ---- */
.elementor-element-1700f11 { gap: 0 !important; row-gap: 0 !important; }
.elementor-element-1700f11 > .elementor-element { margin: 0 !important; }

.elementor-widget-jet-smart-filters-checkboxes,
.elementor-widget-jet-smart-filters-checkboxes > .elementor-widget-container,
.elementor-widget-jet-smart-filters-checkboxes .jet-filter { margin: 0 !important; padding: 0 !important; }

/* ---- label = accordion header ---- */
.elementor-widget-jet-smart-filters-checkboxes .jet-filter-label {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-family: 'futurizem', sans-serif; font-size: 14px; color: #111111;
  padding: 8px 2px; margin: 0; font-weight: 600;
  border-bottom: 1px solid #e6e6e6;
}
.elementor-widget-jet-smart-filters-checkboxes .jet-filter-label:after {
  content: "\203A"; font-size: 18px; line-height: 1; color: #111111;
  transform: rotate(90deg); transition: transform .2s ease;
}
.elementor-widget-jet-smart-filters-checkboxes.mv-acc-open .jet-filter-label:after { transform: rotate(-90deg); }

/* ---- collapsed: every wrapper must go, the inline max-height sits on .jet-filter-items-scroll ---- */
.elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list,
.elementor-widget-jet-smart-filters-checkboxes .jet-filter-items-scroll,
.elementor-widget-jet-smart-filters-checkboxes .jet-filter-items-scroll-container,
.elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper {
  display: none !important; max-height: 0 !important; height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important;
}

/* ---- open ---- */
.elementor-widget-jet-smart-filters-checkboxes.mv-acc-open .jet-checkboxes-list,
.elementor-widget-jet-smart-filters-checkboxes.mv-acc-open .jet-filter-items-scroll-container,
.elementor-widget-jet-smart-filters-checkboxes.mv-acc-open .jet-checkboxes-list-wrapper {
  display: block !important; height: auto !important; max-height: none !important; overflow: visible !important;
}
.elementor-widget-jet-smart-filters-checkboxes.mv-acc-open .jet-filter-items-scroll {
  display: block !important; height: auto !important; max-height: none !important;
  overflow: visible !important; padding: 4px 2px 8px !important;
}

/* ---- more than 7 options -> that list scrolls instead of running down the page.
       JS measures 7 rows and writes the height into --mv-cap on the widget.  ---- */
.elementor-widget-jet-smart-filters-checkboxes.mv-acc-open .mv-scrollbox {
  display: block !important;
  height: auto !important;
  max-height: var(--mv-cap, 210px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-inline-end: 8px !important;
}

/* ---- the bar has to be visible before you touch it ----
   Chrome and Helium on Windows 11 draw an overlay scrollbar that stays invisible
   until the box is actually scrolled, so a capped list reads as a dead end.
   Brave ships that flag off, which is why it looked fine there. Styling
   ::-webkit-scrollbar opts the box out of overlay mode: the bar is then always
   painted and reserves its own width. That opt-out is cancelled the moment
   scrollbar-color is set, so the standard properties are kept for Firefox only,
   behind @supports. Applied to JetSmartFilters' own scroll wrappers as well as
   .mv-scrollbox, so whichever element ends up scrolling shows a bar. ---- */
.elementor-widget-jet-smart-filters-checkboxes .mv-scrollbox::-webkit-scrollbar,
.elementor-widget-jet-smart-filters-checkboxes .jet-filter-items-scroll::-webkit-scrollbar,
.elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper::-webkit-scrollbar { width: 8px; }

.elementor-widget-jet-smart-filters-checkboxes .mv-scrollbox::-webkit-scrollbar-track,
.elementor-widget-jet-smart-filters-checkboxes .jet-filter-items-scroll::-webkit-scrollbar-track,
.elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper::-webkit-scrollbar-track { background: #efefef; border-radius: 4px; }

.elementor-widget-jet-smart-filters-checkboxes .mv-scrollbox::-webkit-scrollbar-thumb,
.elementor-widget-jet-smart-filters-checkboxes .jet-filter-items-scroll::-webkit-scrollbar-thumb,
.elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper::-webkit-scrollbar-thumb { background: #b5b5b5; border-radius: 4px; }

.elementor-widget-jet-smart-filters-checkboxes .mv-scrollbox::-webkit-scrollbar-thumb:hover,
.elementor-widget-jet-smart-filters-checkboxes .jet-filter-items-scroll::-webkit-scrollbar-thumb:hover,
.elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper::-webkit-scrollbar-thumb:hover { background: #8f8f8f; }

@supports not selector(::-webkit-scrollbar) {
  .elementor-widget-jet-smart-filters-checkboxes .mv-scrollbox,
  .elementor-widget-jet-smart-filters-checkboxes .jet-filter-items-scroll,
  .elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #b5b5b5 #efefef;
  }
}

/* ---- rows ---- */
.elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list__row,
.elementor-widget-jet-smart-filters-checkboxes .jet-filter-row { padding: 2px 0 !important; margin: 0 !important; line-height: 1.35; }
.elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list__item {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 0;
  font-family: 'futurizem', sans-serif; font-size: 14px; color: #111111; line-height: 1.35;
}
.elementor-widget-jet-smart-filters-checkboxes .jet-filters-counter { font-family: 'futurizem', sans-serif; font-size: 14px; color: #111111; }

/* ---- no options here -> drop the group ---- */
.mv-jsf-empty { display: none !important; }

/* ---- old mv-shop-filters sidebar: retired, JSF replaces it ---- */
.mvf-wrap, [data-mvf-form] { display: none !important; }

/* ---- sorting: above the grid, pushed to the left ---- */
.elementor-widget-jet-smart-filters-sorting.mv-sort { margin: 0 0 14px auto; max-width: 220px; }
.elementor-widget-jet-smart-filters-sorting.mv-sort select,
.elementor-widget-jet-smart-filters-sorting.mv-sort .jet-sorting-select {
  font-family: 'futurizem', sans-serif; font-size: 14px; color: #111111;
  padding: 8px 10px; border: 1px solid #d9d9d9; border-radius: 3px; width: 100%;
}
html[dir="rtl"] .elementor-widget-jet-smart-filters-sorting.mv-sort,
body.rtl .elementor-widget-jet-smart-filters-sorting.mv-sort { margin-left: 0; margin-right: auto; }

/* ---- mobile: filters live inside a sheet ---- */
.mv-filter-toggle { display: none; }
@media (max-width: 767px) {
  .mv-filter-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 0 0 12px; padding: 12px 16px; cursor: pointer;
    font-family: 'futurizem', sans-serif; font-size: 14px; font-weight: 600; color: #fff;
    background: #111111; border: 0; border-radius: 3px;
  }
  body.mv-filters-open { overflow: hidden; }

  /* the sidebar column becomes a full-screen sheet */
  .mv-filters-sheet {
    position: fixed !important; inset: 0 !important; z-index: 99999 !important;
    width: 100% !important; max-width: none !important;
    background: #fff !important; overflow-y: auto !important;
    padding: 56px 16px 90px !important;
    display: none !important;
  }
  body.mv-filters-open .mv-filters-sheet { display: block !important; }

  .mv-sheet-close {
    position: fixed; top: 8px; left: 12px; z-index: 100000;
    width: 38px; height: 38px; border: 0; border-radius: 50%;
    background: #f0f0f0; color: #111; font-size: 22px; line-height: 1; cursor: pointer;
    display: none;
  }
  body.mv-filters-open .mv-sheet-close { display: block; }

  .mv-sheet-apply {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100000;
    padding: 14px 16px; border: 0; cursor: pointer;
    font-family: 'futurizem', sans-serif; font-size: 15px; font-weight: 700;
    color: #fff; background: #111111; display: none;
  }
  body.mv-filters-open .mv-sheet-apply { display: block; }
}

/* ---- mv-card-bottom-align: pin the product text block to the bottom of the card ----
   The loop item is a flex column: image, [manufacturer band], title, divider, price,
   spacer, add-to-cart. Cards are already equal height, but only SOME products carry the
   manufacturer band (a 37px text-editor widget). On those cards the column has no slack
   left, so flexbox shrank the divider (26px -> 5px) and the spacer (22px -> 1px) to make
   room, which is what pushed their prices 21px out of line with the rest.

   Fix: lock every text row at its natural height and let the IMAGE absorb the difference
   instead. Cards with a band get a slightly shorter photo; title, price and button then
   land at the same height on every card. ---- */
.elementor-loop-container .e-loop-item .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
.elementor-loop-container .e-loop-item .e-con-inner > .elementor-widget-text-editor,
.elementor-loop-container .e-loop-item .e-con-inner > .elementor-widget-woocommerce-product-title,
.elementor-loop-container .e-loop-item .e-con-inner > [class*='elementor-widget-divider'],
.elementor-loop-container .e-loop-item .e-con-inner > .elementor-widget-woocommerce-product-price,
.elementor-loop-container .e-loop-item .e-con-inner > .elementor-widget-spacer,
.elementor-loop-container .e-loop-item .e-con-inner > [class*='woocommerce-product-add-to-cart'] {
  flex-shrink: 0 !important;
}
.elementor-loop-container .e-loop-item .e-con-inner > .elementor-widget-flipped-featured-image,
.elementor-loop-container .e-loop-item .e-con-inner > .elementor-widget-image {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* two lines reserved for the name, so a short and a long title still put the divider and
   price at the same height */
.elementor-loop-container .e-loop-item .elementor-widget-woocommerce-product-title .product_title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  line-height: 1.4;
}

/* ---- mv-card-pin-rows ----
   flex-shrink:0 was not enough: Elementor sizes the divider and spacer widgets from its
   own generated CSS, and they still came out 19px/15px on a plain card versus 5px/1px on
   a card carrying the manufacturer band. Pin both to a fixed height so every card has an
   identical text stack, and let the photo above take up whatever slack is left. ---- */
.elementor-loop-container .e-loop-item .e-con-inner > [class*='elementor-widget-divider'] {
  height: 19px !important;
  flex: 0 0 19px !important;
}
.elementor-loop-container .e-loop-item .e-con-inner > .elementor-widget-spacer {
  height: 15px !important;
  flex: 0 0 15px !important;
}
.elementor-loop-container .e-loop-item .e-con-inner > .elementor-widget-text-editor {
  flex: 0 0 auto !important;
}

/* ---- mv-card-quote-parity ----
   Quote-only products (no price, WhatsApp "לקבל הצעת מחיר" button) rendered a 42px
   button instead of the 48px quantity+cart block, and their price element is empty so it
   collapsed. Together that lifted their price row 20px above everyone else's. Reserve the
   same height for both variants so mixed rows still line up. ---- */
.elementor-loop-container .e-loop-item .e-con-inner > [class*='woocommerce-product-add-to-cart'] {
  min-height: 48px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}
.elementor-loop-container .e-loop-item .e-con-inner > .elementor-widget-woocommerce-product-price {
  min-height: 35px !important;
}
.elementor-loop-container .e-loop-item .price {
  display: block;
  min-height: 21px;
}