.jit-os-cart-choice-open {
  overflow: hidden;
}

html.jit-os-cart-choice-open #ea11y-root {
  opacity: 0 !important;
  pointer-events: none !important;
}

.jit-os-cart-choice[hidden] {
  display: none !important;
}

.jit-os-cart-choice,
.jit-os-cart-choice * {
  box-sizing: border-box;
}

.jit-os-cart-choice {
  position: fixed;
  inset: 0;
  z-index: 999999;
  direction: rtl;
  font-family: 'Open Sans Hebrew', 'Open Sans', system-ui, -apple-system, sans-serif;
}

.jit-os-cart-choice__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 19, 0.68);
  backdrop-filter: blur(2px);
}

.jit-os-cart-choice__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 215, 232, 0.28);
  border-radius: 8px;
  background: linear-gradient(160deg, #091b39, #040e1f), #07142c;
  box-shadow: 0 22px 70px rgba(3, 10, 28, 0.34);
  color: #fff;
  outline: none;
}

.jit-os-cart-choice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.jit-os-cart-choice__title {
  margin: 0;
  color: #fff;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.jit-os-cart-choice__close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px;
  max-height: 36px;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  cursor: pointer;
  line-height: 1 !important;
  appearance: none;
}

.jit-os-cart-choice__close span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.jit-os-cart-choice__close svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.jit-os-cart-choice__body {
  padding: 20px;
}

.jit-os-cart-choice__product {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.jit-os-cart-choice__image {
  display: block;
  width: 112px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: #123f91;
}

.jit-os-cart-choice__product-text {
  min-width: 0;
}

.jit-os-cart-choice__name {
  display: block;
  margin: 0 0 6px;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.jit-os-cart-choice__meta {
  margin: 0;
  color: #b9c5d6;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.jit-os-cart-choice__price {
  color: #fff;
  font-weight: 900;
}

.jit-os-cart-choice-promo {
  border: 1px solid rgba(0, 215, 232, 0.32);
  border-radius: 8px;
  background: rgba(0, 215, 232, 0.1);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
}

.jit-os-cart-choice-promo strong {
  color: #00d7e8;
  font-weight: 900;
}

.jit-os-cart-choice-promo--modal {
  margin: 14px 0 0;
  padding: 10px 12px;
}

.jit-os-cart-choice-promo--cart {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #07142c;
  border-color: rgba(0, 215, 232, 0.38);
  box-shadow: 0 10px 24px rgba(3, 10, 28, 0.08);
}

.jit-os-cart-choice-promo--sidecart {
  margin: 0 0 14px;
  padding: 11px 12px;
  background: rgba(0, 215, 232, 0.08);
  border-color: rgba(0, 215, 232, 0.34);
  color: #fff;
  text-align: center;
}

.jit-os-cart-choice__copy {
  margin: 20px 0 18px;
  color: #d6e4f4;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
}

.jit-os-cart-choice__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.jit-os-cart-choice__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: 'Open Sans Hebrew', 'Open Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.jit-os-cart-choice__button:hover,
.jit-os-cart-choice__button:focus-visible {
  transform: translateY(-1px);
}

.jit-os-cart-choice__button:disabled {
  cursor: wait;
  opacity: 0.74;
  transform: none;
}

.jit-os-cart-choice__button--primary {
  background: #00d7e8 !important;
  color: #031126 !important;
  box-shadow: 0 12px 24px rgba(0, 215, 232, 0.18) !important;
}

.jit-os-cart-choice__button--secondary {
  background: #fff !important;
  color: #07142c !important;
}

.jit-os-cart-choice__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
}

/* The cart SVG is geometrically centered in its 24x24 viewBox, but its
   visual MASS sits in the upper half (cart body above wheels). On desktop
   this reads as "icon too high" next to the Hebrew label. Nudge the cart
   icon down by 2px so the perceived center of mass matches the glyph
   center. The credit-card icon is mass-balanced and needs no nudge. */
.jit-os-cart-choice__button--secondary .jit-os-cart-choice__icon {
  transform: translateY(2px);
}

.jit-os-cart-choice__icon svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

.jit-os-cart-choice__continue {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px auto 0 !important;
  padding: 5px 10px;
  border: 0 !important;
  background: transparent !important;
  color: #b9c5d6 !important;
  font-family: 'Open Sans Hebrew', 'Open Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center !important;
  text-decoration: underline;
  cursor: pointer;
  float: none !important;
}

.jit-os-cart-choice__continue:hover,
.jit-os-cart-choice__continue:focus-visible {
  color: #fff !important;
}

.jit-os-cart-choice__message {
  min-height: 20px;
  margin: 8px 0 0;
  color: #00d7e8;
  font-size: 14px;
  text-align: center;
}

.jit-os-cart-choice__message[data-error] {
  color: #ffd2d2;
}

@media (max-width: 640px) {
  .jit-os-cart-choice__overlay {
    backdrop-filter: blur(3px);
  }

  .jit-os-cart-choice__panel {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw;
    max-height: min(82dvh, 680px);
    overflow-y: auto;
    transform: none !important;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 14px 14px 0 0;
  }

  .jit-os-cart-choice__head {
    padding: 14px 16px;
  }

  .jit-os-cart-choice__title {
    font-size: 19px !important;
  }

  .jit-os-cart-choice__body {
    padding: 16px;
  }

  .jit-os-cart-choice__product {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }

  .jit-os-cart-choice__image {
    width: 86px;
  }

  .jit-os-cart-choice__name {
    font-size: 18px;
    line-height: 1.22;
  }

  .jit-os-cart-choice__meta {
    font-size: 14px;
  }

  .jit-os-cart-choice__copy {
    margin: 16px 0 14px;
    font-size: 16px;
    line-height: 1.45;
  }

  .jit-os-cart-choice-promo {
    font-size: 14px;
  }

  .jit-os-cart-choice__actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .jit-os-cart-choice__button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  .jit-os-cart-choice__continue {
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jit-os-cart-choice__button {
    transition: none;
  }
}

/* ==========================================================================
   Sitewide shop tweaks (Nicole+Shir 2026-05-20).
   These rules ONLY apply on shop/product/category pages via the body class
   guard (the homepage and the rest of the site are unaffected).

   (1) Disable Elementor's sticky behavior on the two header sections so it
       does not compete with the SALE banner.
       Header sections: elementor-element-6ed1e8a (desktop+tablet) and
       elementor-element-0828f6e (mobile). Both carry data-settings
       sticky:"top" and used to fight the SALE banner for top:0.
   (2) Make the SALE banner section (#top-bar-promo, fallback class
       elementor-element-7ef0339) sticky at top:0.
   ========================================================================== */

body.woocommerce-shop .elementor-element-6ed1e8a.elementor-sticky,
body.woocommerce-shop .elementor-element-0828f6e.elementor-sticky,
body.single-product .elementor-element-6ed1e8a.elementor-sticky,
body.single-product .elementor-element-0828f6e.elementor-sticky,
body.product-category .elementor-element-6ed1e8a.elementor-sticky,
body.product-category .elementor-element-0828f6e.elementor-sticky,
body.page-id-19468 .elementor-element-6ed1e8a.elementor-sticky,
body.page-id-19468 .elementor-element-0828f6e.elementor-sticky {
  position: static !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  box-shadow: none !important;
}

body.woocommerce-shop .elementor-sticky__spacer,
body.single-product .elementor-sticky__spacer,
body.product-category .elementor-sticky__spacer,
body.page-id-19468 .elementor-sticky__spacer {
  display: none !important;
  height: 0 !important;
}

body.woocommerce-shop .elementor-element-6ed1e8a.elementor-sticky--active,
body.woocommerce-shop .elementor-element-0828f6e.elementor-sticky--active,
body.single-product .elementor-element-6ed1e8a.elementor-sticky--active,
body.single-product .elementor-element-0828f6e.elementor-sticky--active,
body.product-category .elementor-element-6ed1e8a.elementor-sticky--active,
body.product-category .elementor-element-0828f6e.elementor-sticky--active,
body.page-id-19468 .elementor-element-6ed1e8a.elementor-sticky--active,
body.page-id-19468 .elementor-element-0828f6e.elementor-sticky--active {
  position: static !important;
  top: auto !important;
  transform: none !important;
}

/* The banner is rendered INSIDE the Elementor header (its parent is
   `header.elementor-location-header` which is only ~139px tall on
   desktop). `position: sticky` would only stick the banner while the
   header is in view, then release it on further scroll. To keep the
   banner pinned to the viewport top across the entire page, use
   `position: fixed` instead and reserve space below it so the rest of
   the page does not jump up by 53px on load.

   The banner's actual rendered height is ~53px on desktop and ~74px on
   mobile (multi-line wrap). We use min-height with a CSS variable so a
   future copy/font tweak does not break the layout. */
body.woocommerce-shop #top-bar-promo,
body.single-product #top-bar-promo,
body.product-category #top-bar-promo,
body.page-id-19468 #top-bar-promo,
body.woocommerce-shop .elementor-element-7ef0339,
body.single-product .elementor-element-7ef0339,
body.product-category .elementor-element-7ef0339,
body.page-id-19468 .elementor-element-7ef0339 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  position: fixed !important;
  top: 0 !important;
  inset-inline: 0;
  /* v0.1.39 (2026-06-02): raised from z-index:100 to 99999. After v0.1.38
     disabled Elementor sticky on the header, the header section (0828f6e)
     kept its z-index:600 in normal flow, so as it scrolled up under the
     fixed banner it painted OVER the SALE strip (Alon's exact diagnosis:
     "the header rises over the SALE strip - a z-index problem"). 99999 puts
     the banner above the header (600) while staying below the cart-choice
     modal (999999). */
  z-index: 99999 !important;
  width: 100% !important;
}

/* Reserve space at the top of the document so the fixed banner does
   not cover the header logo / nav. The min-height on the banner above
   matches this padding exactly so there is no visible gap before the
   JS height-sync fires on first paint. */
body.woocommerce-shop,
body.single-product,
body.product-category,
body.page-id-19468 {
  padding-top: 56px !important;
}

/* v0.1.32 (2026-06-02): vertically center the single-line SALE text on
   desktop. The banner section is a flex column with justify-content:center,
   so a single line SHOULD center inside the 56px min-height. But Elementor's
   inner container (`.e-con-inner`) carries padding-top:1.2em (~19.2px) with
   padding-bottom:0, and the theme adds a paragraph margin-bottom (~14.4px).
   Together those asymmetries push the one-line text below center at full
   desktop width (Alon 2026-06-02: "the SALE line sits at the bottom of the
   strip on desktop; centered only when the window is narrow / text wraps").
   Zero both so the flex centering actually centers the line. Scoped to the
   banner only - no other section/container on the site is affected. */
body.woocommerce-shop #top-bar-promo .e-con-inner,
body.single-product #top-bar-promo .e-con-inner,
body.product-category #top-bar-promo .e-con-inner,
body.page-id-19468 #top-bar-promo .e-con-inner,
body.woocommerce-shop .elementor-element-7ef0339 .e-con-inner,
body.single-product .elementor-element-7ef0339 .e-con-inner,
body.product-category .elementor-element-7ef0339 .e-con-inner,
body.page-id-19468 .elementor-element-7ef0339 .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.woocommerce-shop #top-bar-promo p,
body.single-product #top-bar-promo p,
body.product-category #top-bar-promo p,
body.page-id-19468 #top-bar-promo p,
body.woocommerce-shop .elementor-element-7ef0339 p,
body.single-product .elementor-element-7ef0339 p,
body.product-category .elementor-element-7ef0339 p,
body.page-id-19468 .elementor-element-7ef0339 p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* v0.1.33 (2026-06-02): balance the banner line breaks so the last word
     can NEVER orphan onto a line by itself. At ~480px the text used to wrap
     to line1=516px / line2="הרכישה" 55px (a single-word orphan Alon flagged:
     "never let a single word drop to its own line - all line breaks must be
     symmetric and aesthetic"). `text-wrap: balance` makes the two lines
     roughly equal width (verified 278/293 at 480px) at every width. The
     inline JS still glues "20% הנחה" with a non-breaking space; balance
     handles the rest. */
  text-wrap: balance !important;
}

@media (max-width: 768px) {
  body.woocommerce-shop #top-bar-promo,
  body.single-product #top-bar-promo,
  body.product-category #top-bar-promo,
  body.page-id-19468 #top-bar-promo,
  body.woocommerce-shop .elementor-element-7ef0339,
  body.single-product .elementor-element-7ef0339,
  body.product-category .elementor-element-7ef0339,
  body.page-id-19468 .elementor-element-7ef0339 {
    /* Mobile banner naturally renders ~79-86px once Hebrew Heebo finishes
       loading and the SALE text wraps to two lines. Reserve 90px so the
       first paint always covers the actual banner height, even before the
       JS sync runs. JS will fine-tune downward if the banner is shorter. */
    min-height: 90px !important;
  }
  body.woocommerce-shop,
  body.single-product,
  body.product-category,
  body.page-id-19468 {
    padding-top: 90px !important;
  }
}

/* The WordPress admin bar sits above the banner for logged-in admins.
   Push the banner down by the admin bar height so it does not overlap. */
body.admin-bar.woocommerce-shop #top-bar-promo,
body.admin-bar.single-product #top-bar-promo,
body.admin-bar.product-category #top-bar-promo,
body.admin-bar.page-id-19468 #top-bar-promo,
body.admin-bar.woocommerce-shop .elementor-element-7ef0339,
body.admin-bar.single-product .elementor-element-7ef0339,
body.admin-bar.product-category .elementor-element-7ef0339,
body.admin-bar.page-id-19468 .elementor-element-7ef0339 {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar.woocommerce-shop #top-bar-promo,
  body.admin-bar.single-product #top-bar-promo,
  body.admin-bar.product-category #top-bar-promo,
  body.admin-bar.page-id-19468 #top-bar-promo,
  body.admin-bar.woocommerce-shop .elementor-element-7ef0339,
  body.admin-bar.single-product .elementor-element-7ef0339,
  body.admin-bar.product-category .elementor-element-7ef0339,
  body.admin-bar.page-id-19468 .elementor-element-7ef0339 {
    top: 46px !important;
  }
}

/* Make the OS Experts shop page (page-id 19468) mobile layout match
   the product page mobile layout exactly. The shop page's own
   Elementor CSS (post-19468.css) has a -20px margin-bottom on a
   hidden descendant (`elementor-element-70a272ed`) that, combined
   with the desktop-only `header-container` section above it, makes
   the visible mobile content (`.elementor-19468` wrap) start at
   y=188 instead of y=208 - 20px INSIDE the bottom of the theme
   header. The result is the dark cyber mobile-hero section visibly
   overlapping the bottom of the white theme header, creating the
   "cut" / "פער" Alon flagged 2026-05-27. Force the shop wrap to
   start AT the theme header bottom on mobile so banner -> header ->
   hero stack cleanly with no overlap.

   v0.1.27 (2026-05-27 evening): once v0.1.26 fixed the 20px overlap,
   Alon scrolled down and back up and saw a NEW white strip between
   the SALE banner and the OS logo header strip on mobile. The
   theme-builder header (`header.elementor-location-header`) has a
   transparent background, so whatever sits behind it (the body's
   default light-gray bg, rgb(241,242,243)) shows through. Before
   v0.1.26 the dark cyber wrap was overlapping into the header by
   20px, masking that gap. With proper structure now, the body's
   light gray is exposed.

   Fix: paint the body's background DARK NAVY on the shop page mobile
   only, matching the banner's color exactly. The light-gray content
   sections lower in the page have their own opaque backgrounds, so
   they paint OVER this body bg - only the transparent header area
   (and any tiny seams above the dark cyber hero) show the navy.
   Result: banner -> header area -> dark cyber hero all look
   continuous dark on first paint AND after scroll. */
@media (max-width: 767px) {
  body.page-id-19468 > div.elementor.elementor-19468 {
    margin-top: 20px !important;
  }
  /* v0.1.31 (2026-06-02): REMOVED the navy body background (it used to be
     `body.page-id-19468 { background-color: #05173d }` here). That navy bled
     through the gaps between content sections and showed as a mid-page dark
     "strip" on mobile (Shir 2026-06-02). It was redundant: the header itself
     is painted navy below, which is what actually covers the banner+header
     seam. Removing the body navy returns inter-section gaps to the site's
     default light background (far less visible) while the banner stays
     STICKY (position:fixed, above) exactly as designed. */
  /* v0.1.28 (2026-05-27 evening): on Alon's Poco mobile the Hebrew
     banner text wraps to 2 lines and the SALE banner renders taller
     than my chrome-devtools at the same viewport width. The theme
     header (transparent) over body navy ALMOST hid the seam, but
     Alon still saw a visible navy strip between banner-bottom and
     where the OS logo image sits in the header (header internal
     padding above the logo widget). Solution: paint the header
     element itself the same navy color as the banner so the entire
     vertical span from y=0 (banner top) through the bottom of the
     header is one continuous navy block. The OS logo widget and
     cart/wishlist/hamburger icons remain visible on top. No more
     visible seam at any viewport width, fonts, or scroll state. */
  body.page-id-19468 header.elementor-location-header,
  body.page-id-19468 header.elementor-location-header > .elementor-section,
  body.page-id-19468 header.elementor-location-header .elementor-container,
  body.page-id-19468 header.elementor-location-header .elementor-column,
  body.page-id-19468 header.elementor-location-header .elementor-widget-wrap {
    background-color: #05173d !important;
  }
  /* v0.1.33 (2026-06-02): tuck the navy header up 3px under the fixed SALE
     banner so no light-gray body-background sliver can show at the
     banner/header seam when the mobile browser address bar collapses or
     expands on scroll (Alon 2026-06-02: "ugly white line between the SALE
     strip and the top menu on mobile when I scroll down and back up - the
     transition should be seamless like it was before"). Banner and header
     are both #05173d, so a 3px overlap is invisible - it only closes the
     hairline gap. Scoped to the shop page (page-id-19468), the only surface
     where the seamless navy banner+header is the intended design. */
  body.page-id-19468 header.elementor-location-header {
    margin-top: -3px !important;
  }
  /* v0.1.34 (2026-06-02): THE white-line root cause + bulletproof fix.
     Diagnosis (live, scroll-down-then-up at 600px): a ~20px band of the
     light-gray body background (rgb(241,242,243)) shows full-width at the
     header BOTTOM (y~182), between the navy header and the dark cyber hero.
     That band is the `margin-top:20px` on the content wrap (.elementor-19468,
     added v0.1.26 to stop the hero overlapping the header). It used to be
     covered by the navy body background; when v0.1.31 removed the navy body
     (to kill the mid-page strip), this top gap started showing light-gray
     after the Elementor sticky recalc on scroll = Alon's "white line".
     Fix: a FIXED navy backdrop behind ONLY the top region (z-index:-1, top
     230px). It fills that gap (and any banner/header seam sliver or
     address-bar-collapse sliver) with navy, WITHOUT repainting the whole
     body navy - so the mid-page strip never returns (the backdrop ends at
     230px; the dark hero and lower light sections paint over it). It sits
     behind all content (logos/menu/hero are opaque and paint on top) and is
     click-through. Scoped to the shop page only. */
  body.page-id-19468::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 230px;
    background-color: #05173d;
    z-index: -1;
    pointer-events: none;
  }
  /* v0.1.36 (2026-06-02): removed the v0.1.35 cyan divider (Alon found the
     bright cyan line harsh "נראה על הפנים").
     v0.1.37 (2026-06-02): refined separation - instead of a line, paint the
     SALE strip a touch LIGHTER navy (#0c2557) than the menu (#05173d), so the
     promo bar and the menu read as two distinct tonal bands with NO line.
     Alon chose this (his "change the strip background colour" idea) from a
     tonal-step vs faint-hairline mockup. Mobile + shop page only; desktop
     keeps its own separation (transparent menu over the cyber hero). The gap
     below the menu stays #05173d (backdrop) so the white-line fix is intact.
     v0.1.48 (2026-06-04, Shir): soften the seam. The v0.1.37 flat tonal step
     still butted two solid blues edge-to-edge, which Shir found unattractive
     on mobile ("2 גוונים של כחול שפחות יפים אחד אחרי השני... כשזה צמוד.. אולי
     מעבר כזה פייד בניהם או משהו, שקיפות כזאת"). Replace the flat fill with a
     vertical gradient: HOLD the lighter promo navy (#0c2557) across the SALE
     text band, then FADE to the EXACT menu/backdrop navy (#05173d) at the
     bottom edge - so the strip melts into the logo/menu with no hard line,
     while keeping a subtle lighter-at-top distinction. The gradient lives only
     on the outer #top-bar-promo; the inner Elementor containers go transparent
     so the single fade reads cleanly instead of re-fading three times. The
     bottom stop is #05173d = the header bg + the ::before backdrop, so the
     blend continues seamlessly into the menu zone. Mobile + shop page only. */
  body.page-id-19468 #top-bar-promo {
    background-color: #0c2557 !important;
    background-image: linear-gradient(180deg, #0c2557 0%, #0c2557 58%, #081f40 82%, #05173d 100%) !important;
  }
  body.page-id-19468 #top-bar-promo .e-con-inner,
  body.page-id-19468 #top-bar-promo .elementor-widget-wrap {
    background-color: transparent !important;
    background-image: none !important;
  }

  /* v0.1.49 (2026-06-04, Alon): add a VERY subtle moving sheen so the SALE
     strip reads as a LIVE, distinct band vs the static menu. Even with the
     v0.1.48 gradient fade Alon felt the strip still "connected" to the menu /
     not enough separation; his fix idea was a "ממש ממש ממש עדינה" background
     animation. A faint bluish-white light band (with a whisper of brand cyan
     #00EBFF at ~0.06 alpha) drifts slowly (16s) across the strip via a clipped
     ::after that sits BEHIND the SALE text. Pure background-position animation
     (no layout/reflow), pointer-events:none, and DISABLED under
     prefers-reduced-motion. The v0.1.48 vertical gradient stays underneath as
     the seam blend; the inner text containers are lifted above the sheen so
     the SALE text stays crisp. Mobile + shop page only. */
  body.page-id-19468 #top-bar-promo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(150,185,235,0.10) 47%, rgba(0,235,255,0.06) 50%, rgba(150,185,235,0.10) 53%, rgba(255,255,255,0) 60%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    animation: jitOsSaleSheen 16s linear infinite;
  }
  body.page-id-19468 #top-bar-promo .e-con-inner,
  body.page-id-19468 #top-bar-promo .elementor-widget-wrap {
    position: relative;
    z-index: 1;
  }
}

@keyframes jitOsSaleSheen {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-19468 #top-bar-promo::after {
    animation: none !important;
    background-image: none !important;
  }
}

/* v0.1.40 (2026-06-03, Shir): shop DESKTOP/tablet header logo size = match the
   rest of the site. The shop page's own header template (page-id-19468) renders
   the OS logo (os-white.webp, widget 8e6c01c) at a % width = ~142px wide / 100px
   tall = ~83% of the 120px header, so Shir saw it as "huge / out of proportion"
   next to every other page ("חזר להיות ענק"). The homepage uses the SAME image
   at a fixed 95x66 (~56% of header) - copy that exact size. The widget lives in
   a hidden-mobile section so this only affects desktop/tablet; mobile uses the
   wide bull logo (widget 22220c5) and is untouched. HIGH specificity
   (body.page-id-19468 + header + widget + .elementor-widget-container + img) is
   REQUIRED to beat Elementor's own !important width rule - a lower-specificity
   selector loses the cascade (verified live). NOT in our plugin before: the
   logo size is the Elementor header template's; this is a scoped CSS override. */
body.page-id-19468 header.elementor-location-header .elementor-element-8e6c01c .elementor-widget-container img {
  width: 95px !important;
  max-width: 95px !important;
  height: auto !important;
}

/* ====================================================================
   v0.1.41 (2026-06-03, Alon QA round 2) - three scoped fixes.
   ==================================================================== */

/* (A) Side-cart drawer overlap. The fixed SALE strip (#top-bar-promo) is
   z-index 99999; Elementor's side-cart drawer (.elementor-menu-cart__container,
   the overlay + panel lightbox) is only 9998, so on mobile the strip painted
   OVER the top of the open drawer (Alon 2026-06-03: "הסטריפ העליון עולה עליו").
   Raise the whole drawer above the strip so the open drawer covers it - which
   also hides the strip while the drawer is open (its promo is already shown
   inside the drawer, so it is redundant there). Stays well below the
   cart-choice modal (.jit-os-cart-choice = 999999). */
.elementor-menu-cart__container {
  z-index: 100000 !important;
}

/* (B) Cart page dead space at top (mobile). The cart page (page-id 19506) uses
   an Elementor Canvas template (no site header), but its first section
   (.elementor-element-2f1deca1) carries a hardcoded margin-top:200px - intended
   to clear a header that does not exist on a canvas page. On mobile that 200px
   is pure empty space above the cart (Alon 2026-06-03: "שטח מת למעלה בסל").
   Trim it on mobile only; desktop is left untouched. */
@media (max-width: 767px) {
  body.page-id-19506 .elementor-element-2f1deca1 {
    margin-top: 24px !important;
  }
}

/* (C) "Blue line on scroll" on the MOBILE shop page (Alon QA 2026-06-03; fixed
   for real in v0.1.44 after two wrong guesses). ROOT CAUSE, pixel-verified:
   the fixed navy backdrop `body.page-id-19468::before` (the v0.1.34 header
   white-line fix - position:fixed, top:0, height:230px, #05173d) bleeds through
   any TRANSPARENT gap in the scrolling content within the top 230px. There is
   exactly ONE such gap on this page: the product-carousel section
   (`.elementor-element-62ab9db`) has `margin-top:10px` (a transparent gap; the
   section's own bg is light #f1f2f3). During scroll that 10px margin sat over
   the fixed navy backdrop, so a #05173d line appeared just above the carousel.
   The backdrop is CORRECT for the header region; the bug was this lone content
   margin exposing it. Fix = close the gap so the light section sits flush and
   the backdrop can't show through. This is NOT the cyan headline underline and
   NOT a box-shadow (the v0.1.41-43 box-shadow attempt did nothing and is
   removed). Mobile + shop page only; desktop is unaffected. */
@media (max-width: 767px) {
  body.page-id-19468 .elementor-19468 .elementor-element-62ab9db {
    margin-top: 0 !important;
  }
}

/* v0.1.42 (2026-06-03): side-cart reassurance sub-line. The mini-cart promo box
   gets a second line clarifying the 20% is calculated/shown on the cart page +
   checkout (mini-carts can't render the coupon line). Static, no count
   dependency (the mini-cart fragment is cached client-side and not reliably
   re-rendered on count changes). */
.jit-os-cart-choice-promo__sub {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #00d7e8;
}

/* v0.1.47 (2026-06-03): hide the fixed SALE strip while the side-cart drawer is
   open. The drawer (.elementor-menu-cart__container, fixed, full viewport,
   z 100000) is nested inside the header SECTION whose z-index:600 creates a
   stacking context, so it can't beat the root-level fixed strip
   (#top-bar-promo, z 99999) - the strip painted OVER the drawer's top and
   clipped the close button + first product (Alon QA 2026-06-03, "the header
   overlaps the side-cart"). JS adds html.jit-os-sidecart-open while the drawer
   is open; this rule hides the strip then (it returns on close). The
   html.class #id selector (specificity 1,1,1) beats the existing
   `#top-bar-promo{display:flex!important}` (1,0,0). */
html.jit-os-sidecart-open #top-bar-promo {
  display: none !important;
}