/** * מכון נדב — חלון "מה כוללת הערכה?". * Layered over YITH Quick View; the plugin itself is untouched. */ /* ------------------------------------------------- scroll position rescue */ /* The plugin locks the page with `overflow:hidden` on , which zeroes the scroll offset and never restores it. Doubling the class beats the plugin's own rule regardless of stylesheet order; the page is instead held still by pinning the body, which preserves the offset. */ html.yith-quick-view-is-open.yith-quick-view-is-open, html.yith-quick-view-is-open.yith-quick-view-is-open body { overflow: visible !important; } html.mn-qv-lock, html.mn-qv-lock body { overflow: hidden !important; } html.mn-qv-lock body { position: fixed !important; inset-inline: 0 !important; width: 100% !important; } /* The WhatsApp and Crisp bubbles are fixed at z-index 99999999 and cover the buy button on a phone. */ html.yith-quick-view-is-open .ccw_plugin, html.yith-quick-view-is-open .crisp-client, html.yith-quick-view-is-open #crisp-chatbox { display: none !important; } /* ------------------------------------------------------------- the window */ .yith-quick-view.yith-modal { background: rgba( 12, 17, 24, 0.62 ); backdrop-filter: blur( 4px ); -webkit-backdrop-filter: blur( 4px ); } .yith-quick-view .yith-quick-view-overlay { background: transparent !important; } .yith-quick-view .yith-quick-view-overlay p { display: none; } /* Roomy on a desktop: up to 960px wide and nearly the screen's full height, so a long description has room (the owner asked, 23/09 and 24/09/2026). Both can be set in Elementor. A phone gets the whole screen, below. */ .yith-quick-view .yith-wcqv-wrapper { position: fixed !important; inset: 0 !important; margin: auto !important; width: min( var( --mn-qv-width, 960px ), calc( 100vw - 32px ) ) !important; height: min( var( --mn-qv-height, 94vh ), calc( 100vh - 32px ) ) !important; display: block !important; } .yith-quick-view .yith-wcqv-main { height: 100% !important; display: flex !important; flex-direction: column; border-radius: 4px; border-top: var( --mn-qv-top-w, 4px ) solid var( --mn-qv-top, var( --mn-primary ) ); overflow: hidden; box-shadow: 0 24px 64px -16px rgba( 12, 17, 24, 0.55 ) !important; background: #fff; } /* The plugin nests: content > .product > [itemscope] > .summary. Each level has to pass the height through for the description to be the only scroller. */ .yith-quick-view .yith-quick-view-content, .yith-quick-view .yith-quick-view-content > .product, .yith-quick-view .yith-quick-view-content > .product > [itemscope] { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; } .yith-quick-view .summary.entry-summary { flex: 1 !important; min-height: 0 !important; height: auto !important; display: block !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 0 22px 20px !important; margin: 0 !important; width: 100% !important; } /* perfect-scrollbar's rail, now that the panel scrolls natively */ .yith-quick-view .ps-scrollbar-y-rail, .yith-quick-view .ps-scrollbar-x-rail { display: none !important; } .yith-quick-view .summary.entry-summary::-webkit-scrollbar { width: 8px; } .yith-quick-view .summary.entry-summary::-webkit-scrollbar-thumb { background: #dcd4c8; border-radius: 99px; } .yith-quick-view .summary.entry-summary::-webkit-scrollbar-thumb:hover { background: #c4b9a8; } /* The theme's floating "scroll down" animation is printed inside the product description and drifts over the window. */ .yith-quick-view lottie-player { display: none !important; } /* ------------------------------------------------------------------- head */ .mn-qv-head { flex: none; padding: 18px 22px 14px; border-bottom: 1px solid #ece6dd; background: #fff; padding-inline-end: 56px; } .mn-qv-head .product_title { margin: 0 0 4px !important; padding: 0 !important; font-size: var( --mn-qv-title-size, 23px ) !important; line-height: 1.3 !important; font-weight: 700; color: #17202b !important; text-align: start; } .mn-qv-head .price { margin: 0 !important; padding: 0 !important; font-size: 15px !important; color: #6f7681 !important; text-align: start; } .mn-qv-head .price .amount, .mn-qv-head .price .mn-card__amount { font-size: 20px; font-weight: 700; color: #17202b; } .mn-qv-head .price .mn-card__from { font-size: 14px; font-weight: 400; color: #8b949f; } /* ------------------------------------------------------------------ close */ /* The plugin sizes and positions this control itself and hides its literal "X" with `text-indent: -99999px`, which also drags a text glyph off centre. The cross is drawn here instead, so it cannot drift. */ .yith-quick-view .yith-wcqv-head { position: absolute !important; top: 14px !important; bottom: auto !important; /* Logical only, and start before end: a physical `left`/`right` declared afterwards would silently win over them. */ inset-inline-start: auto !important; inset-inline-end: 16px !important; width: 36px !important; height: 36px !important; z-index: 20 !important; } .yith-quick-view a.yith-quick-view-close { position: relative !important; display: block !important; width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #e6dfd4 !important; border-radius: 3px !important; background: #f4efe7 !important; color: #6f7681 !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; text-decoration: none !important; box-shadow: none !important; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .yith-quick-view a.yith-quick-view-close::before, .yith-quick-view a.yith-quick-view-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; border-radius: 1px; background: currentColor; } .yith-quick-view a.yith-quick-view-close::before { transform: translate( -50%, -50% ) rotate( 45deg ); } .yith-quick-view a.yith-quick-view-close::after { transform: translate( -50%, -50% ) rotate( -45deg ); } .yith-quick-view a.yith-quick-view-close:hover { background: var( --mn-primary-strong ) !important; border-color: var( --mn-primary-strong ) !important; color: var( --mn-on-primary-strong ) !important; } /* --------------------------------------------------------- "there is more" */ .yith-quick-view .yith-quick-view-content { position: relative; } /* A fade at the foot of the description, so the text visibly runs on rather than stopping. It clears itself once the reader reaches the end. */ .mn-qv-more { position: absolute; inset-inline: 0; bottom: 0; height: 86px; pointer-events: none; background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.92 ) 62%, #fff 100% ); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; opacity: 1; transition: opacity 0.25s ease; z-index: 3; } .mn-qv-more.is-done { opacity: 0; } /* Faded out at the end: no longer clickable or reachable by Tab either (the hiding waits for the fade). */ .mn-qv-more.is-done .mn-qv-more__chev { visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .mn-qv-more__chev { pointer-events: auto; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e6dfd4; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px -2px rgba( 23, 32, 43, 0.22 ); animation: mn-qv-nudge 1.8s ease-in-out infinite; transition: opacity 0.25s ease, border-color 0.15s ease; } .mn-qv-more__chev::before { content: ""; width: 9px; height: 9px; margin-top: -3px; /* Physical sides on purpose: a down-chevron is the same shape in RTL, and `border-inline-end` would flip it to point sideways. */ border-right: 2px solid var( --mn-primary ); border-bottom: 2px solid var( --mn-primary ); transform: rotate( 45deg ); } .mn-qv-more__chev:hover { border-color: var( --mn-primary ); } /* Once the reader has scrolled, the chevron stops bouncing but stays, until the end of the description is reached (the owner asked, 24/09/2026). */ .mn-qv-more.is-moved .mn-qv-more__chev { animation: none; } @keyframes mn-qv-nudge { 0%, 100% { transform: translateY( 0 ); } 50% { transform: translateY( 4px ); } } @media ( prefers-reduced-motion: reduce ) { .mn-qv-more__chev { animation: none; } } /* ------------------------------------------------------------------- foot */ .mn-qv-foot { flex: none; padding: 14px 22px 18px; border-top: 1px solid #ece6dd; background: #faf8f5; } .mn-qv-foot form.cart { margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 11px; } .mn-qv-foot table.variations { display: none !important; } .mn-qv-foot .mn-card__plansrow { display: flex; flex-wrap: wrap; gap: 7px; } .mn-qv-foot .mn-card__plan { flex: 1 1 auto; min-width: 0; border: 1px solid var( --mn-plan-border, #ddd6cb ); background: var( --mn-plan-bg, #fff ); color: var( --mn-plan-text, #4a5563 ); border-radius: var( --mn-plan-radius, 4px ); padding: 9px 10px; font-size: 14.5px; font-weight: var( --mn-plan-weight, 600 ); line-height: 1.3; cursor: pointer; white-space: nowrap; font-family: inherit; transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease; } .mn-qv-foot .mn-card__plan:hover { border-color: var( --mn-plan-active-border, var( --mn-primary ) ); color: var( --mn-plan-active-text, #17202b ); } .mn-qv-foot .mn-card__plan.is-active { background: var( --mn-plan-active-bg, var( --mn-primary-tint ) ); border-color: var( --mn-plan-active-border, var( --mn-primary ) ); color: var( --mn-plan-active-text, #17202b ); box-shadow: inset 0 0 0 1px var( --mn-plan-active-border, var( --mn-primary ) ); } /* Here there is room for each plan's price, under its name, so the choice is made knowing what it costs. (The 'direct' flow styles its own.) */ body.mn-flow-button .mn-qv-foot .mn-card__plan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } body.mn-flow-button .mn-qv-foot .mn-card__planprice { font-size: 13px; font-weight: 500; color: #7a8390; font-variant-numeric: tabular-nums; transition: color 0.14s ease; } body.mn-flow-button .mn-qv-foot .mn-card__plan:hover .mn-card__planprice, body.mn-flow-button .mn-qv-foot .mn-card__plan.is-active .mn-card__planprice { color: var( --mn-primary-text-soft ); } .mn-qv-foot .single_variation_wrap { position: static !important; width: auto !important; margin: 0 !important; display: block !important; } .mn-qv-foot .woocommerce-variation { display: none !important; } .mn-qv-foot .single_add_to_cart_button { position: relative !important; width: 100% !important; /* The card's button, a little larger. */ height: calc( var( --mn-buy-height, 46px ) + 6px ) !important; border: var( --mn-buy-border-w, 0px ) solid var( --mn-buy-border, transparent ) !important; border-radius: var( --mn-buy-radius, 4px ) !important; background-color: var( --mn-buy-bg, var( --mn-primary ) ) !important; background-image: linear-gradient( var( --mn-buy-angle, 135deg ), var( --mn-buy-bg, var( --mn-primary ) ), var( --mn-buy-bg2, var( --mn-buy-bg, var( --mn-primary ) ) ) ) !important; color: var( --mn-buy-text, var( --mn-buy-text-auto, var( --mn-on-primary ) ) ) !important; font-size: calc( var( --mn-buy-size, 17px ) + 1px ) !important; font-weight: var( --mn-buy-weight, 700 ) !important; line-height: calc( var( --mn-buy-height, 46px ) + 6px - 2 * var( --mn-buy-border-w, 0px ) ) !important; padding: 0 !important; opacity: 1 !important; cursor: pointer !important; transition: background-color 0.15s ease, color 0.15s ease; } .mn-qv-foot .single_add_to_cart_button:hover { background-color: var( --mn-buy-hover-bg, var( --mn-buy-hover-auto, var( --mn-primary-strong ) ) ) !important; background-image: none !important; color: var( --mn-buy-hover-text, var( --mn-buy-hover-text-auto, var( --mn-on-primary-strong ) ) ) !important; } /* ------------------------------------------------------------ small screens */ /* A phone, upright or on its side: the window is the whole screen, edge to edge, with a larger close button in its corner. */ @media ( max-width: 767px ), ( max-height: 500px ) { .yith-quick-view .yith-wcqv-wrapper { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; inset: 0 !important; margin: 0 !important; } .yith-quick-view .yith-wcqv-main { border-radius: 0; box-shadow: none !important; } .yith-quick-view .yith-wcqv-head { top: 12px !important; inset-inline-end: 12px !important; width: 44px !important; height: 44px !important; } .yith-quick-view a.yith-quick-view-close { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: #fff !important; border-color: #ddd6cb !important; color: #17202b !important; box-shadow: 0 2px 8px -2px rgba( 23, 32, 43, 0.25 ) !important; } .yith-quick-view a.yith-quick-view-close::before, .yith-quick-view a.yith-quick-view-close::after { width: 18px; } .mn-qv-head { padding-inline-end: 66px; } .mn-qv-head .product_title { font-size: calc( var( --mn-qv-title-size, 23px ) - 3px ) !important; } .mn-qv-foot .mn-card__plan { font-size: 13.5px; padding: 8px 8px; } }