.c-cart__shop-remove-icon{
	width: 14px !important;
	height: 14px !important;
	font-size: 14px !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.c-cart__shop-remove-icon:hover {
	transform: none !important;
}
body{
	padding: 0 20px;
}
@media screen and (max-width: 1700px) {
	.page-id-7 .woocommerce {
		padding: 20px 43px;
	}
}
@media (max-width: 600px){
	body{
		padding: 0;
	}
}

/* Hide Pagination for Infinite Scroll */
.woocommerce-pagination, 
.c-pagination,
.c-product-grid__load-more-wrap,
nav.woocommerce-pagination {
    display: none !important;
}

/* Infinite Scroll Loading Indicator */
.infinite-scroll-loader {
    text-align: center;
    padding: 30px 0;
}

.infinite-scroll-loader p {
    margin-top: 15px;
    font-size: 14px;
    color: #666;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #000;
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* No More Products Message */
.infinite-scroll-end {
    text-align: center;
    padding: 30px 0;
    color: #666;
    font-size: 14px;
}

.infinite-scroll-end p {
    margin: 0;
}
body #cc-floater {
    bottom: unset !important;
    top: 12.5vw !important;
    left: 0.5vw !important;
    right: unset !important;
    width: 2.5vw !important;
    height: 2.5vw !important;
    line-height: 2.5vw;
    text-align: center !important;
    z-index: 999 !important;
}
#cc-floater svg{
    width: 1.5vw !important;
    height: 1.5vw !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#pojo-a11y-toolbar{
    z-index: 9999 !important;
    top: 9vw !important;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
    font-size: 1.5vw !important;
    padding: 0.6vw !important;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg{
    width: 1.5vw !important;
}
#pojo-a11y-toolbar.pojo-a11y-toolbar-left {
  top: 8vw !important;
}

@media(max-width: 767px){
    /* The category-tile plate colours (#CFE9F6 sky blue, #f8dada pink,
       #d9ede3 light green) used to live here, always on. They are now applied
       in assets/css/accessibility.css instead, only while the accessibility
       toolbar has a text size selected - that is the case where the heading
       outgrows the calm band of the photo behind it. Putting them back here
       would paint them at the default size too. */
    #mobile_header .elementor-nav-menu--dropdown {
        z-index: 9999;
    }

    #pojo-a11y-toolbar.pojo-a11y-toolbar-left {
        top: 50vw !important;
    }
    body #cc-floater{
        bottom: unset !important;
        top: 64vw !important;
        left: 2px !important;
        width: 7.5vw !important;
        height: 7.5vw !important;
        line-height: 7.5vw;
        padding: 4.5vw !important;
    }
    #cc-floater svg {
        width: 5vw !important;
        height: 5vw !important;
    }
    #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
        font-size: 5.5vw !important;
        padding: 2vw !important;
    }
    #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
        width: 5.8vw !important;
    }
    body #pojo-a11y-toolbar {
        top: 48vw !important;
    }


    .cc-pos-right {
        left: 50%;
        right: unset !important;
        bottom: 60px !important;
        width: 95%;
        transform: translateX(-50%);
    }
    .cc-btn{
        padding: 7px 9px !important;
    }
}

/* Remove the problematic body filter only during grayscale mode */
body.pojo-a11y-grayscale {
    -webkit-filter: none !important;
    filter: none !important;
    overflow-x: hidden !important;
}

/* Reapply grayscale to the document root */
html:has(body.pojo-a11y-grayscale) {
    -webkit-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
}

/* Change toolbar positioning only during grayscale mode */
body.pojo-a11y-grayscale #pojo-a11y-toolbar {
    position: fixed !important;
    z-index: 99999 !important;
}
.cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider{
    background: #ababff !important;
}
body.pojo-a11y-grayscale .wpcf7-not-valid-tip {
    color: #fff;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .mail-icon img {
    border: 1px solid #fff !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn{
    border: 1px solid #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-high-contrast .mail-icon img {
    border: 1px solid #fff !important;
}
body.pojo-a11y-high-contrast .cc-slider {
    background: gray !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider {
    background: gray !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .mobile-menu svg {
    background: #fff !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .mail-icon img {
    border: 1px solid #fff !important;
}
/* Header separator.
   2px, because 1px between two black areas reads as nothing on a phone.
   transition:none, because Elementor sets `transition: border .3s` on every
   .e-con, so the line fades in instead of appearing.
   No `:not(#pojo-a11y-toolbar)` here - that pattern only exists to out-rank the
   plugin's own background rules, and it needs .top-header to sit two levels
   below body to match at all. Nothing sets a border on a div, so the plain
   selector is both simpler and more robust. */
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .top-header,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .top-header{
    border-bottom: 2px solid #fff !important;
    transition: none !important;
}
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .top-header{
    border-bottom: 2px solid #000 !important;
    transition: none !important;
}
body.pojo-a11y-high-contrast .mobile-menu svg {
    background: #fff !important;
}

/* ...but not the submenu chevrons.

   The white plate above exists for the hamburger toggle, whose glyph is a fixed
   dark grey (fill rgb(27,27,27)) and would vanish into a black page. The
   `.mobile-menu svg` it is written against also catches the eight `.sub-arrow`
   chevrons next to the parent menu items, and those are the opposite case: they
   follow the palette, so the mode paints them #fff and then the plate paints
   #fff behind them. Measured in both dark modes: fill #fff on background #fff -
   the arrow becomes the small white square in the report. Light background got
   away with it only because it fills the glyph black.

   Transparent instead, so the chevron sits on the row's own background: #fff on
   #000 in high and negative contrast, #000 on #fff in light background. The
   span is included because the palette paints that too, and a chevron with a
   transparent svg inside an opaque span would still read as a box.

   Desktop is not involved - its chevrons are outside .mobile-menu, never got
   the plate, and measure correctly in all three modes. */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .mobile-menu .sub-arrow,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .mobile-menu .sub-arrow svg,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .mobile-menu .sub-arrow,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .mobile-menu .sub-arrow svg,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .mobile-menu .sub-arrow,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .mobile-menu .sub-arrow svg {
    background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg {
    background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg {
    background: transparent !important;
}

/* ==========================================================================
   Floating buttons: WhatsApp and the reCAPTCHA badge.

   Both are fixed to the bottom right and neither knows the other exists.
   Measured before this block, on a 375x812 phone:

     sticky icon bar   fixed, bottom 0, 66px tall (81px at the largest
                       accessibility text size), z-index 999
     reCAPTCHA badge   fixed, bottom 14px, 60px tall  -> sits INSIDE the bar's
                       strip and, having no z-index, is painted underneath it.
                       Invisible and unclickable on every phone and tablet.
     WhatsApp          fixed, bottom 12% (97px here), 60x60

   So the badge is stacked above the bar, WhatsApp above the badge, and both
   are made smaller. The breakpoint is 1189px because that is where the sticky
   bar itself stops (Elementor hides it from 1190px up, `elementor-hidden-
   laptop`); above that the bottom strip is free and only the sizes change.

   Sizes are set on the WhatsApp <img>, which is what Elementor sizes
   (post-10642.css: 70px, 60px below 768px). None of this is !important in the
   source, so a single !important here wins regardless of load order.

   The badge is shrunk with a transform rather than by overriding its `right`,
   because Google's own script sets `right` inline to slide the panel out on
   hover - an !important of ours would freeze it shut. The origin is the catch:
   the badge is a 256px box parked at `right: -186px`, so only its leftmost
   70px - the logo - is on screen. Scaling about `100% 100%` (its own corner,
   186px off screen) would drag the logo out of the viewport entirely.
   `transform-origin: 70px 100%` is the point where the viewport's right edge
   crosses the badge, so that point stays put and the logo shrinks flush
   against the screen edge: 70px wide -> 60px at 0.85, 49px at 0.7.

   Verified at 375x812 and 1280x900, with the accessibility text size off and
   at maximum: no overlap between bar, badge and button in any combination.
   ========================================================================== */
.elementor-10642 .elementor-element.elementor-element-350b774 img {
    width: 56px !important;
}
/* 10% of the viewport height in Elementor, which on a short laptop window puts
   the button on top of the badge. Pinned instead. */
.elementor-10642 .elementor-element.elementor-element-350b774 {
    bottom: 80px !important;
}
.grecaptcha-badge {
    transform: scale(0.85) !important;
    transform-origin: 70px 100% !important;
    z-index: 9;
}

@media (max-width: 1189px) {
    .elementor-10642 .elementor-element.elementor-element-350b774 img {
        width: 48px !important;
    }
    /* Clears the badge, which now ends 132px up. */
    .elementor-10642 .elementor-element.elementor-element-350b774 {
        bottom: 140px !important;
    }
    /* 90px clears the sticky bar at its tallest (81px) with room to spare. */
    .grecaptcha-badge {
        transform: scale(0.7) !important;
        transform-origin: 70px 100% !important;
        bottom: 90px !important;
    }
}

/* ==========================================================================
   Product card: the wishlist tooltip opened from the wrong place.

   The tooltip (.c-product-grid__icon-text, "הוסף לרשימת משאלות") is a sibling
   of the heart inside .c-product-grid__thumb-button, and the theme fades it in
   on `.c-product-grid__thumb-button:hover`. It is hidden with `opacity: 0`
   only - it keeps its box and, until now, its pointer events.

   Measured on a product card at 1440px:

     .c-product-grid__thumb-button--wishlist   138px wide
     .c-product-grid__icon--wishlist (heart)    18px wide
     .c-product-grid__icon-text (tooltip)      107px wide, 71px from the heart

   The button's hit area is therefore mostly the invisible tooltip. While the
   card is hovered the list is `visibility: visible`, so document.elementFromPoint
   at a point 66px away from the heart - over what looks like bare product
   photo - returns the tooltip span itself, which is inside the button and so
   matches :hover. The box then fades in with the cursor nowhere near the heart,
   which reads as "hovering the product pops up a black box".

   pointer-events: none takes the span out of hit-testing, leaving the 18px
   heart as the only thing that can open it. The tooltip is not interactive -
   the click target is the button - so nothing is lost.
   ========================================================================== */
.c-product-grid__icon-text {
    pointer-events: none;
}

/* ==========================================================================
   Hanukkah discount badge (carousella_hanukkah_sale_badge in functions.php).

   The image replaces the theme's text badge, so its frame has to go. Three
   classes on the selector because this file loads early and the theme's
   `.c-product__wrap .c-badge` would otherwise win on the product page.
   ========================================================================== */
.c-badge.c-badge--sale.c-badge--hanukkah {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    top: 0;
    vertical-align: middle;
}
.c-badge--hanukkah img {
    display: block;
    width: 84px;
    height: 84px;
    max-width: none;
}
/* Beside the price on the product page, where there is less room. */
.c-product__wrap .c-badge--hanukkah img {
    width: 64px;
    height: 64px;
}
@media (max-width: 767px) {
    .c-badge--hanukkah img {
        width: 60px;
        height: 60px;
    }
}