/* ========================================================= METALIZAR - SLIDERS EDIT v1.4.0 Woo Product Slider exact integration. ========================================================= */ /* Exact image wrapper from Woo Product Slider. */ .wpsf-product .sp-wps-product-image-area.mse-price-image-area { position: relative !important; } /* Keep the label above both front and hover/back images. */ .wpsf-product .sp-wps-product-image-area.mse-price-image-area > .mse-price-sticker { z-index: 30; } /* The same price is now displayed on the image label. */ .wpsf-product .wpsf-product-price.mse-original-price { display: none !important; } /* ========================================================= PRODUCT DETAILS Keep the image price tag as the only visible price, remove the Add button, and use the Metalizar blue title. ========================================================= */ /* Original Woo Product Slider price below the product title. */ .wpsf-product .wpsf-product-price, .wpsf-product .wpsf-product-price.mse-original-price, .wpsf-product .sp-wps-product-details .price { display: none !important; } /* Exact Woo Product Slider cart wrapper from the rendered markup. Hide the wrapper itself; no generic WooCommerce selectors are needed. */ .wps-product-section .wpsf-product .wpsf-cart-button { display: none !important; } /* Keep the slider/theme title behavior whenever ANY hover-capable pointer (mouse/trackpad) is available. Only touch-style devices with no hover capability get the permanently blue title. */ @media (any-hover: none) and (any-pointer: coarse) { .wpsf-product .wpsf-product-title, .wpsf-product .wpsf-product-title a, .wpsf-product .sp-wps-product-details .wpsf-product-title, .wpsf-product .sp-wps-product-details .wpsf-product-title a, .wpsf-product .wpsf-product-title a:hover, .wpsf-product .wpsf-product-title a:focus, .wpsf-product .wpsf-product-title a:active, .wpsf-product .wpsf-product-title a:visited { color: #2997FF !important; } /* On touch layouts Woo Product Slider fixes the title wrapper to 50px with overflow:hidden. Three-line product names need ~60px at the current 20px line-height, so the last line gets clipped. Keep at least three lines, but allow longer names to grow naturally. */ .wpsf-product .wpsf-product-title, .wpsf-product .sp-wps-product-details .wpsf-product-title { height: auto !important; min-height: 60px !important; max-height: none !important; overflow: visible !important; white-space: normal !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; } .wpsf-product .wpsf-product-title a, .wpsf-product .sp-wps-product-details .wpsf-product-title a { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; white-space: normal !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; } /* Woo Product Slider stretches every slide to the Swiper wrapper height on touch layouts. After removing the price/cart rows, the actual card content is shorter, so that stretch leaves a fixed empty area below. Let the wrapper and slides size themselves from their real content. */ .wps-product-section.mse-slider-navigation .swiper-wrapper { align-items: flex-start !important; height: auto !important; } .wps-product-section.mse-slider-navigation .wpsf-product.swiper-slide { height: auto !important; align-self: flex-start !important; } .wps-product-section.mse-slider-navigation .swiper, .wps-product-section.mse-slider-navigation [id^="sp-woo-product-slider-"] { height: auto !important; } } /* ========================================================= SLIDER ARROWS Match the category slider navigation exactly: centered vertically on the slide, circular glass button, thin chevron, left/right at the slide edges. ========================================================= */ /* Make the Woo Product Slider section a stable positioning context. */ .wps-product-section.mse-slider-navigation { position: relative !important; } .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-prev, .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-next { position: absolute !important; top: 50% !important; bottom: auto !important; z-index: 30 !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; display: grid !important; place-items: center !important; background: rgba(6,10,16,.18) !important; border: 1px solid rgba(255,255,255,.13) !important; border-radius: 50% !important; color: rgba(255,255,255,.76) !important; box-shadow: none !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 1 !important; visibility: visible !important; transform: translateY(-50%) !important; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease !important; } .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-prev { left: 3px !important; right: auto !important; } .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-next { right: 3px !important; left: auto !important; } /* Remove Swiper/Woo Product Slider's own arrow glyphs. */ .wps-product-section.mse-slider-navigation .wpsp-nav::after, .wps-product-section.mse-slider-navigation .wpsp-nav::before { content: none !important; display: none !important; } .wps-product-section.mse-slider-navigation .wpsp-nav > i { display: none !important; } /* Exact SVG geometry used by the category slider arrows. */ .wps-product-section.mse-slider-navigation .mse-slider-nav__icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } /* Do not let the Woo Product Slider hover preset replace our design. */ .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-prev:hover, .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-next:hover, .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-prev:focus, .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-next:focus { background: rgba(6,10,16,.18) !important; border-color: rgba(255,255,255,.13) !important; color: rgba(255,255,255,.76) !important; } @media (max-width: 767px) { .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-prev, .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-next { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; } .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-prev { left: 0 !important; } .wps-product-section.mse-slider-navigation .wpsp-nav.swiper-button-next { right: 0 !important; } .wps-product-section.mse-slider-navigation .mse-slider-nav__icon { width: 16px; height: 16px; } } /* ========================================================= PRICE TAG Copied from Metalizar Product Showcase v1.5.4 visual style. ========================================================= */ .wpsf-product .mse-price-sticker { position: absolute; left: 50%; bottom: 10px; z-index: 30; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 132px; padding: 10px 19px 11px 17px; box-sizing: border-box; background: linear-gradient( 135deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.018) 30%, rgba(255,255,255,0) 56% ), linear-gradient( 180deg, #1b2b45 0%, #15253d 48%, #101d31 100% ); border: 1px solid rgba(184,191,201,.42); border-radius: 2px; box-shadow: 0 11px 20px rgba(0,0,0,.30), 0 4px 7px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(0,0,0,.35), inset 4px 0 10px rgba(255,255,255,.018), inset -5px 0 12px rgba(0,0,0,.08), inset 0 -12px 20px rgba(0,0,0,.12); color: #d7dade; font-family: "Oswald", "Arial Narrow", Arial, sans-serif; line-height: 1; text-align: left; white-space: nowrap; opacity: 1; visibility: visible; transform: translate3d(-50%, 0, 0) rotate(-1.2deg) scale(1); transform-origin: center center; pointer-events: none; } /* PRICE LABEL */ .wpsf-product .mse-price-sticker::before { content: "ЦЕНА"; display: block; margin-bottom: 5px; color: rgba(208,213,220,.78); font-family: "Oswald", "Arial Narrow", Arial, sans-serif; font-size: 8px; font-weight: 500; line-height: 1; letter-spacing: 2.2px; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0,0,0,.45); } /* PRICE TAG HOLE */ .wpsf-product .mse-price-sticker::after { content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #0b1320; box-shadow: inset 0 1px 3px rgba(0,0,0,.85), 0 0 0 1px rgba(184,191,201,.40); } /* PRICE TYPOGRAPHY */ .wpsf-product .mse-price-sticker .price, .wpsf-product .mse-price-sticker .wpsf-product-price { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 7px; margin: 0 !important; padding: 0 !important; color: #d9dde2 !important; line-height: 1 !important; } .wpsf-product .mse-price-sticker .woocommerce-Price-amount { margin: 0 !important; padding: 0 !important; color: #d9dde2 !important; font-family: "Oswald", "Arial Narrow", Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1 !important; letter-spacing: .4px; text-shadow: 0 1px 0 rgba(255,255,255,.10), 0 2px 2px rgba(0,0,0,.35); } .wpsf-product .mse-price-sticker .woocommerce-Price-currencySymbol { color: rgba(217,221,226,.86); font-size: .78em; } /* SALE PRICE */ .wpsf-product .mse-price-sticker del { margin-right: 5px; color: rgba(172,178,186,.68) !important; font-size: .63em; font-weight: 400; opacity: 1 !important; text-decoration-thickness: 1px; } .wpsf-product .mse-price-sticker del .woocommerce-Price-amount, .wpsf-product .mse-price-sticker del .woocommerce-Price-currencySymbol { color: rgba(172,178,186,.68) !important; font-size: inherit; } .wpsf-product .mse-price-sticker ins { color: #eef1f4 !important; font-weight: 500; text-decoration: none !important; background: transparent !important; } .wpsf-product .mse-price-sticker ins .woocommerce-Price-amount { color: #eef1f4 !important; } /* Slightly more compact on the smaller slider cards. */ @media (max-width: 900px) { .wpsf-product .mse-price-sticker { bottom: 8px; min-width: 123px; padding: 9px 18px 10px 15px; } .wpsf-product .mse-price-sticker::before { margin-bottom: 4px; font-size: 7px; letter-spacing: 1.9px; } .wpsf-product .mse-price-sticker .woocommerce-Price-amount { font-size: 21px; } } @media (max-width: 520px) { .wpsf-product .mse-price-sticker { bottom: 4px; min-width: 104px; padding: 7px 15px 8px 13px; box-shadow: 0 8px 15px rgba(0,0,0,.27), 0 3px 5px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.065), inset 0 -1px 0 rgba(0,0,0,.32), inset 3px 0 8px rgba(255,255,255,.015), inset 0 -9px 15px rgba(0,0,0,.11); } .wpsf-product .mse-price-sticker::before { margin-bottom: 3px; font-size: 6px; letter-spacing: 1.6px; } .wpsf-product .mse-price-sticker::after { top: 7px; right: 7px; width: 5px; height: 5px; } .wpsf-product .mse-price-sticker .woocommerce-Price-amount { font-size: 17px; letter-spacing: .25px; } }