/* * PPSERVIS — add-to-cart popup and its cross-sell carousel. * * Was echoed inline into the of every page (580 lines, on a shop where more than half * the visitors are on mobile). Nothing here paints above the fold — the popup does not exist * until something is added to the cart — so it belongs in a file the browser can cache. */ .xoo-cp-container{ width:min(780px,calc(100vw - 56px)); max-width:min(780px,calc(100vw - 56px)); max-height:none!important; padding:14px 16px 0!important; overflow-x:hidden; overflow-y:hidden!important; position:relative!important; border:1px solid #dfe5ea; border-radius:10px; background:#fff!important; box-shadow:0 18px 40px rgba(17,24,39,.18); } .xoo-cp-modal{ overflow:visible!important; } .xoo-cp-close.xoo-cp-icon-cross{ position:absolute; top:10px; right:10px; z-index:30; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:#fff; box-shadow:0 4px 12px rgba(17,24,39,.16); color:#3e4a59; } .xoo-cp-content{gap:8px} .xoo-cp-btns{margin-bottom:0} .xoo-cp-btns{ display:flex; justify-content:space-between; gap:14px; padding-top:8px; border-top:1px solid #e5e7eb; } .xoo-cp-btns .xcp-btn{ flex:1 1 0; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:4px; font-size:14px; font-weight:700; text-transform:uppercase; text-decoration:none!important; letter-spacing:.01em; } .xoo-cp-btns .xoo-cp-close.xcp-btn{ color:#8fbe1f!important; background:#fff; border:2px solid #8fbe1f; } .xoo-cp-btns .xoo-cp-btn-vc.xcp-btn{ color:#fff!important; background:#8fbe1f; border:2px solid #8fbe1f; } .xoo-cp-pdetails{ width:100%; table-layout:fixed; border-bottom:1px solid #e5e7eb; margin-bottom:8px; padding-bottom:8px; display:block; background:#fff!important; } .xoo-cp-pdetails tbody{ display:block; width:100%; background:#fff!important; } .xoo-cp-pdetails tr{ display:grid; grid-template-columns:88px minmax(0,1fr) 150px; align-items:center; gap:14px; width:100%; background:#fff!important; } .xoo-cp-pdetails td{ display:block; width:auto!important; padding:0!important; vertical-align:middle; background:transparent!important; box-shadow:none!important; border:0!important; } .xoo-cp-pimg{width:84px!important} .xoo-cp-pimg img{ width:72px!important; height:72px!important; object-fit:contain; border-radius:6px; background:#fff; display:block; } .xoo-cp-ptitle{ background:transparent!important; box-shadow:none!important; } .xoo-cp-ptitle a{ color:#00688d; font-size:16px!important; font-weight:600!important; line-height:1.2; display:block; width:100%; text-decoration:none; background:transparent!important; box-shadow:none!important; } .xoo-cp-pprice{ text-align:right!important; width:128px!important; background:transparent!important; box-shadow:none!important; } .xoo-cp-pprice .custom-price-without-vat{ color:#00688d; font-size:19px; font-weight:700; line-height:1.1; } .xoo-cp-pprice .custom-price-with-vat{ color:#6b7280; font-size:12px; font-weight:600; } .pp-xoo-cp-visible-slot{margin:6px 0 0!important;padding:0!important;overflow:hidden!important} .pp-xoo-cp-extra{display:flex;flex-direction:column;gap:8px;overflow:hidden!important} .pp-xoo-cp-pack-note{ color:#5f6b78; font-size:12px; line-height:1.3; } .xoo-cp-crosssells{ margin-top:14px!important; margin-bottom:0!important; padding:16px 18px 10px!important; border:2px solid #d8eaf7!important; border-radius:18px 18px 0 0!important; background:#f8fcff!important; box-shadow:inset 0 0 0 1px rgba(216, 234, 247, .35)!important; } .xoo-cp-btns{ position:relative!important; z-index:50!important; margin-top:0!important; padding-top:18px!important; padding-bottom:0!important; margin-bottom:0!important; background:#fff!important; box-shadow:none!important; border-top:0!important; border-radius:0 0 10px 10px!important; isolation:isolate!important; } .xoo-cp-btns::before{ display:none!important; } .xoo-cp-btns::after{ content:""; position:absolute; left:-40px; right:-40px; top:-24px; bottom:-40px; background:#fff!important; z-index:0!important; pointer-events:none; } .xoo-cp-btns .xcp-btn{ position:relative; z-index:1!important; } .xoo-cp-crosssells .carousel-title{ margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid #e2edf6; font-size:13px; line-height:1.25; text-align:center; color:#4b5563; text-transform:uppercase; font-weight:700; letter-spacing:.01em; } .xoo-cp-crosssells .popup-crosssell-carousel .carousel-container{ position:relative; padding:0 18px; } .xoo-cp-crosssells .popup-crosssell-carousel .carousel-track-wrapper{ width:100%!important; overflow:hidden!important; } .xoo-cp-crosssells .popup-crosssell-carousel .carousel-track{ display:flex!important; flex-wrap:nowrap!important; align-items:flex-start!important; gap:12px!important; width:100%!important; } .xoo-cp-crosssells .popup-crosssell-carousel .carousel-track .pp-popup-crosssell-card{ flex:0 0 calc((100% - 24px) / 3)!important; width:calc((100% - 24px) / 3)!important; min-width:calc((100% - 24px) / 3)!important; max-width:calc((100% - 24px) / 3)!important; height:auto!important; transform:none!important; margin:0!important; min-height:0!important; box-sizing:border-box!important; } .xoo-cp-crosssells .popup-crosssell-carousel .carousel-nav{ width:44px; height:44px; padding:.35rem; border:1px solid #e0eaf3; background:#fff; box-shadow:0 10px 22px rgba(79, 104, 128, .14); z-index:999!important; cursor:pointer!important; pointer-events:auto!important; position:absolute!important; } .xoo-cp-crosssells .popup-crosssell-carousel .carousel-prev, .xoo-cp-crosssells .popup-crosssell-carousel .carousel-next, .xoo-cp-crosssells .popup-crosssell-carousel .carousel-nav *{ pointer-events:auto!important; } .xoo-cp-crosssells .popup-crosssell-carousel .carousel-nav svg{ width:28px; height:28px; } .xoo-cp-crosssells .popup-crosssell-carousel .carousel-prev{left:-22px} .xoo-cp-crosssells .popup-crosssell-carousel .carousel-next{right:-22px} @media (min-width:768px){ .xoo-cp-crosssells.pp-popup-crosssell-count-1 .carousel-track .pp-popup-crosssell-card{ flex-basis:100%!important; width:100%!important; min-width:100%!important; max-width:100%!important; } .xoo-cp-crosssells.pp-popup-crosssell-count-2 .carousel-track .pp-popup-crosssell-card{ flex-basis:calc((100% - 12px) / 2)!important; width:calc((100% - 12px) / 2)!important; min-width:calc((100% - 12px) / 2)!important; max-width:calc((100% - 12px) / 2)!important; } .xoo-cp-crosssells.pp-popup-crosssell-count-1 .carousel-nav, .xoo-cp-crosssells.pp-popup-crosssell-count-2 .carousel-nav{ display:none!important; } } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card{ display:block!important; padding:0 0 6px; border:1px solid #dfe7ef; border-radius:10px; background:#fff; box-shadow:0 2px 6px rgba(31, 56, 88, .04); overflow:hidden; min-height:0; min-width:0!important; align-self:flex-start!important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-image-section{ width:100%; min-height:0!important; height:auto!important; flex:none!important; padding:8px 10px 0; margin:0!important; float:none!important; position:relative; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .ppservis-product-image-badges .ppservis-product-image-badges__left-stack{ top:20px !important; left:20px !important; gap:8px !important; max-width:calc(100% - 40px) !important; pointer-events:none !important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .ppservis-product-image-badges .marketing-badges{ gap:6px !important; pointer-events:none !important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .ppservis-product-image-badges .marketing-label{ font-size:10px !important; line-height:1.05 !important; padding:4px 8px !important; border-radius:7px !important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .ppservis-product-image-badges .manufacturer-logo{ width:34px !important; height:34px !important; padding:3px !important; pointer-events:none !important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-info, .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-bottom{ width:100%; padding:0 10px; margin:0!important; float:none!important; clear:both!important; min-height:0!important; height:auto!important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-info{ display:grid!important; grid-template-rows:auto auto auto; align-content:start; row-gap:2px; flex:none!important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-image-link{ min-height:0!important; height:112px!important; width:100%; display:flex; align-items:center; justify-content:center; text-align:center; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-image-link img{ max-height:102px; max-width:100%; width:auto; object-fit:contain; margin:0 auto; display:block; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-bottom{ padding:0 10px 10px!important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-title{ display:block!important; width:100%; min-height:38px; margin:6px 0 3px; padding:0; font-size:14px; line-height:1.22; text-align:center; overflow:hidden; box-sizing:border-box; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-title a{ display:block; color:#2f3843; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-details{ width:100%; min-height:18px; display:flex!important; align-items:center; justify-content:center; margin:0; padding:0; text-align:center; color:#6b7280; font-size:11px; line-height:1.2; overflow:hidden; box-sizing:border-box; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-details > *{ max-width:100%; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .rating-availability-row{ display:flex!important; align-items:center; justify-content:space-between; gap:8px; margin:0; padding:0; width:100%; box-sizing:border-box; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-rating{ display:flex!important; align-items:center; min-height:18px; flex:0 0 auto; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-rating .stars{ display:flex; gap:1px; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-rating .star-icon{ width:11px; height:11px; color:#f3c316; fill:#f3c316; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-rating .star-empty{ color:#d7dce2; fill:#d7dce2; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-rating .review-count{ font-size:9px; line-height:1; color:#7b8794; margin-left:3px; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .availability-badge{ flex:1 1 auto; display:flex; justify-content:center; min-width:0; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .availability-badge .badge, .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .availability-badge .badge-link{ font-size:9px!important; line-height:1.1!important; padding:2px 6px!important; border-radius:10px!important; white-space:nowrap; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .wishlist-button{ display:flex!important; justify-content:flex-end; align-items:center; min-width:28px; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .wishlist-button .yith-add-to-wishlist-button-block{ margin:0!important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .wishlist-button .pp-popup-wishlist-link, .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .wishlist-button a.add_to_wishlist, .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .wishlist-button .add_to_wishlist{ display:inline-flex!important; align-items:center; justify-content:center; width:20px; height:20px; color:#0f8fda!important; background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; text-decoration:none!important; opacity:1!important; visibility:visible!important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .wishlist-button .pp-popup-wishlist-link svg, .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .wishlist-button a.add_to_wishlist svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .wishlist-button .feedback{ display:none!important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .price-detail-row{ display:flex!important; justify-content:space-between; align-items:flex-end; gap:6px; width:100%; box-sizing:border-box; margin-top:10px; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .price-section{ display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; flex:1 1 auto; min-height:46px; text-align:left; min-width:0; padding-top:8px; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .price-section .woocommerce-Price-amount{ font-size:16px!important; line-height:1.1; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .current-price--sale, .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .current-price--sale .woocommerce-Price-amount{ color:#00688d!important; font-weight:700; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .price-section .original-price{ display:block; font-size:11px; line-height:1.1; color:#99a1ab; text-decoration:line-through; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .price-incl-tax{ font-size:11px; line-height:1.2; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .detail-button-container{ display:flex; align-items:flex-end; justify-content:flex-end; flex:none!important; min-width:88px; padding-top:8px; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .detail-button, .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .buy-button{ display:inline-flex; align-items:center; justify-content:center; min-width:88px; min-height:30px; font-size:12px; padding:7px 12px; } @media (max-width:767px){ .xoo-cp-container{ width:calc(100vw - 20px); max-width:calc(100vw - 20px); max-height:none!important; padding:14px 12px 12px; overflow:hidden!important; } .xoo-cp-pdetails tr{ grid-template-columns:64px minmax(0,1fr) 96px; gap:8px; } .xoo-cp-btns{gap:10px} .xoo-cp-btns .xcp-btn{ min-height:46px; font-size:13px; } .xoo-cp-pimg{width:64px!important} .xoo-cp-pimg img{ width:56px!important; height:56px!important; } .xoo-cp-ptitle{align-self:start;padding-top:2px} .xoo-cp-ptitle a{font-size:12px!important;line-height:1.15} .xoo-cp-pprice{width:112px!important;align-self:start} .xoo-cp-pprice .custom-price-without-vat{font-size:16px} .xoo-cp-crosssells .carousel-title{font-size:12px;margin-bottom:10px} .xoo-cp-crosssells .popup-crosssell-carousel .carousel-container{padding:0 12px} .xoo-cp-crosssells .popup-crosssell-carousel .carousel-track{gap:12px!important} .xoo-cp-crosssells .popup-crosssell-carousel .carousel-track .pp-popup-crosssell-card{ flex:0 0 100%!important; width:100%!important; min-width:100%!important; max-width:100%!important; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-image-link{min-height:0!important;height:110px!important} .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-image-link img{max-height:96px} .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-title{ min-height:30px; font-size:12px; } .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .product-details{font-size:10px} .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .rating-availability-row{gap:6px} .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .price-detail-row{margin-top:6px} .xoo-cp-crosssells .popup-crosssell-carousel .pp-popup-crosssell-card .price-section{min-height:42px;padding-top:6px} .xoo-cp-crosssells .popup-crosssell-carousel .carousel-nav{ width:34px; height:34px; } .xoo-cp-crosssells .popup-crosssell-carousel .carousel-prev{left:-6px} .xoo-cp-crosssells .popup-crosssell-carousel .carousel-next{right:-6px} }