/** Shopify CDN: Minification failed Line 3398:2 Unexpected "50%" Line 3399:0 Unexpected "}" **/ /* ===== Manus Custom CSS - Fratelli Leo Precise Redesign ===== */ /* Matching the design mockup exactly */ /* === GLOBAL === */ body { background-color: #ffffff !important; color: #333333 !important; font-family: 'Helvetica Neue', Arial, sans-serif !important; } /* === TOP BAR === */ .announcement-bar, .header-top-bar, .top-bar, #shopify-section-header .top-bar, .site-header__top-bar, .section_top_bar, .top_bar { background-color: #f5f5f5 !important; color: #555555 !important; font-size: 13px !important; border-bottom: 1px solid #e0e0e0 !important; } /* === NAVIGATION === */ .site-header, #shopify-section-header, .header, nav.main-nav, .main-header, .site-header__inner { background-color: #ffffff !important; border-bottom: 1px solid #e5e5e5 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; } .site-header a, .main-nav a, .nav-link, .site-nav__link, .header__nav a, .nav-bar__link { color: #333333 !important; font-weight: 500 !important; } .site-header a:hover, .main-nav a:hover { color: #e8611a !important; } /* === HERO BANNER - SLIDESHOW === */ /* Title: large, bold, white, uppercase, two lines */ .slide_caption .caption_text h2, .slideshow__caption h2, .caption_text h2 { font-size: 58px !important; font-weight: 900 !important; color: #ffffff !important; text-shadow: 2px 3px 10px rgba(0,0,0,0.6) !important; line-height: 1.05 !important; text-transform: uppercase !important; letter-spacing: -1px !important; margin-bottom: 16px !important; max-width: 420px !important; } /* Subtitle: small, white */ .slide_caption .caption_text p, .slideshow__caption p, .caption_text p { font-size: 15px !important; color: #ffffff !important; font-weight: 400 !important; text-shadow: 1px 1px 5px rgba(0,0,0,0.5) !important; margin-bottom: 28px !important; max-width: 380px !important; line-height: 1.5 !important; } /* SHOP NOW button */ .slide_caption .caption_text .btn.slider_btn, .caption_text a.btn.slider_btn, a.btn.slider_btn { background-color: #e8611a !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; padding: 14px 32px !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; display: inline-block !important; transition: background 0.2s !important; } a.btn.slider_btn:hover { background-color: #c94f0f !important; } /* Slide caption position */ .slide_caption.position_left { text-align: left !important; } .slide_caption .container { padding-left: 60px !important; } /* === BRAND LOGOS SECTION (below hero) === */ .section_image_with_text_overlay { background-color: #ffffff !important; padding: 20px 0 !important; } /* === THREE FEATURES MODULE (custom-multi-box) === */ section.custom-multi-box { background-color: #ffffff !important; padding: 40px 0 !important; } .custom-container { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 20px !important; padding: 0 20px !important; } .custom-container .block { flex: 1 !important; background-color: #ffffff !important; border: 1px solid #e5e5e5 !important; border-radius: 6px !important; padding: 24px 20px !important; text-align: left !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } /* Icon: orange circle */ .custom-container .block i { height: 64px !important; width: 64px !important; font-size: 26px !important; padding: 18px !important; background: #e8611a !important; border-radius: 50% !important; color: #ffffff !important; margin-right: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Feature title */ .custom-container .block .custom_bottom_caption h3 { font-size: 16px !important; font-weight: 700 !important; color: #333333 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 0 6px 0 !important; } /* Feature description */ .custom-container .block .custom_bottom_text { font-size: 13px !important; color: #666666 !important; line-height: 1.5 !important; } .custom-container .block a.inner_block { display: flex !important; align-items: center !important; text-decoration: none !important; } /* === CATEGORY BANNERS (FANALI / SPECCHIETTI) === */ .section_banners_custom { background-color: #f8f8f8 !important; } .section_banners_custom .banner_item { border-radius: 8px !important; overflow: hidden !important; position: relative !important; } .section_banners_custom h2.section_heading { font-size: 22px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: #222222 !important; text-align: center !important; margin-bottom: 24px !important; } /* Category label on image */ .section_banners_custom .banner_caption .caption_text h3 { font-size: 22px !important; font-weight: 800 !important; color: #ffffff !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-shadow: 1px 1px 4px rgba(0,0,0,0.6) !important; } /* === PRODUCTS CAROUSEL === */ .section_products_carousel { background-color: #ffffff !important; padding: 40px 0 !important; } .section_products_carousel h2.section_heading { font-size: 22px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: #222222 !important; text-align: center !important; margin-bottom: 32px !important; } /* Product card */ .product_card, .product-card, .grid__item .product, .product_item, .product-item { background-color: #ffffff !important; border: 1px solid #e5e5e5 !important; border-radius: 6px !important; padding: 16px !important; box-shadow: none !important; transition: box-shadow 0.2s !important; } .product_card:hover, .product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important; } /* Product title */ .product_card .product_title, .product-card .product-title, .product_item__title, .product__title { font-size: 14px !important; font-weight: 600 !important; color: #333333 !important; } /* OEM code subtitle */ .product_card .product_vendor, .product-card .product-vendor, .product_item__vendor { font-size: 12px !important; color: #e8611a !important; } /* Price */ .product_card .product_price, .product-card .product-price, .product_item__price, .price { font-size: 16px !important; font-weight: 700 !important; color: #333333 !important; } /* Add to Cart button */ .product_card .btn, .product-card .btn, .product_item .btn-add-to-cart, .btn-cart, .product_card button[type="submit"], .product-card button[type="submit"] { background-color: #e8611a !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 600 !important; width: 100% !important; text-align: center !important; cursor: pointer !important; } .product_card .btn:hover, .product-card .btn:hover { background-color: #c94f0f !important; } /* === TESTIMONIALS === */ .section_testimonials { background-color: #ffffff !important; padding: 40px 0 !important; } .section_testimonials h2.section_heading { font-size: 22px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: #222222 !important; text-align: center !important; margin-bottom: 32px !important; } .testimonials_item { background-color: #ffffff !important; border: 1px solid #e5e5e5 !important; border-radius: 8px !important; padding: 24px !important; margin: 0 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } .testimonials_item__icon { color: #e8611a !important; font-size: 28px !important; display: block !important; margin-bottom: 12px !important; } .testimonials_item__text { font-size: 14px !important; color: #555555 !important; line-height: 1.6 !important; margin-bottom: 16px !important; } .testimonials_item__author { font-size: 14px !important; font-weight: 700 !important; color: #333333 !important; font-style: normal !important; } /* Add star rating after author */ .testimonials_item__author::after { content: "\2605\2605\2605\2605\2605" !important; display: block !important; color: #e8611a !important; font-size: 14px !important; margin-top: 6px !important; font-style: normal !important; } /* === NEWSLETTER === */ .section_newsletter { background-color: #1a2a3a !important; padding: 60px 0 !important; } .section_newsletter h2, .section_newsletter .newsletter_title { color: #ffffff !important; font-size: 28px !important; font-weight: 700 !important; text-align: center !important; margin-bottom: 8px !important; } .section_newsletter p, .section_newsletter .newsletter_text { color: #aaaaaa !important; text-align: center !important; font-size: 14px !important; margin-bottom: 24px !important; } .section_newsletter .newsletter_form { display: flex !important; max-width: 500px !important; margin: 0 auto !important; } .section_newsletter input[type="email"] { flex: 1 !important; padding: 14px 18px !important; border: none !important; border-radius: 4px 0 0 4px !important; font-size: 14px !important; background: #ffffff !important; } .section_newsletter button[type="submit"], .section_newsletter .btn { background-color: #e8611a !important; color: #ffffff !important; border: none !important; border-radius: 0 4px 4px 0 !important; padding: 14px 24px !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer !important; } /* === FOOTER === */ footer, .site-footer, #shopify-section-footer { background-color: #1a1a1a !important; color: #cccccc !important; padding: 48px 0 24px !important; } footer h4, footer h3, footer .footer__heading, .site-footer h4, .site-footer h3 { color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 16px !important; } footer a, .site-footer a { color: #999999 !important; font-size: 13px !important; text-decoration: none !important; } footer a:hover, .site-footer a:hover { color: #e8611a !important; } footer p, .site-footer p { color: #999999 !important; font-size: 13px !important; } .site-footer__copyright { color: #666666 !important; font-size: 12px !important; text-align: center !important; border-top: 1px solid #333333 !important; padding-top: 16px !important; margin-top: 32px !important; } /* === ALL BUTTONS GLOBAL === */ .btn, button.btn, a.btn, input[type="submit"], .button, .shopify-payment-button__button { background-color: #e8611a !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; } .btn:hover, a.btn:hover { background-color: #c94f0f !important; color: #ffffff !important; } /* === SEARCH BUTTON === */ .search-bar__submit, .search__submit, button[type="submit"].search-submit { background-color: #e8611a !important; color: #ffffff !important; border: none !important; border-radius: 0 4px 4px 0 !important; } /* === WISHLIST / HEART BUTTON === */ .wishlist-btn, .btn-wishlist, .product_wishlist, .icon-heart, .wishlist-icon { color: #cccccc !important; } .wishlist-btn:hover, .btn-wishlist:hover { color: #e8611a !important; } /* === SECTION HEADINGS GLOBAL === */ h2.section_heading { font-size: 22px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: #222222 !important; text-align: center !important; margin-bottom: 32px !important; } /* === REMOVE LARGE EMPTY SPACES === */ .section_products_carousel .swiper-container, .section_products_carousel .swiper-wrapper { min-height: auto !important; } /* === SHOP BY CATEGORY HEADING === */ .section_banners_custom .container > h2, .section_banners_custom h2.section_heading { font-size: 22px !important; font-weight: 800 !important; text-transform: uppercase !important; color: #222222 !important; text-align: center !important; } /* ===== BRAND LOGOS BAR ===== */ .manus-brand-logos-bar { background: #ffffff !important; padding: 20px 0 !important; border-bottom: 1px solid #f0f0f0 !important; text-align: center !important; } .manus-brand-logos-bar img { max-height: 80px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; } /* ===== HERO BANNER TEXT IMPROVEMENTS ===== */ .section_slideshow__large .slide_caption__title, .section_slideshow__large .slide__title, .section_slideshow__large h1, .section_slideshow__large h2 { font-size: 52px !important; font-weight: 900 !important; color: #ffffff !important; text-shadow: 2px 2px 8px rgba(0,0,0,0.5) !important; line-height: 1.1 !important; text-transform: uppercase !important; } /* ===== CATEGORY BANNERS (FANALI/SPECCHIETTI) ===== */ .section_banners_custom .banner_item__title, .section_banners_custom .banner__title { font-size: 24px !important; font-weight: 700 !important; color: #ffffff !important; text-transform: uppercase !important; } /* ===== THREE FEATURES BOX (CUSTOM MULTI BOX) ===== */ .custom-multi-box { background: #ffffff !important; } .custom-multi-box .multi_box__item { background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 4px !important; padding: 20px !important; } .custom-multi-box .multi_box__title, .custom-multi-box h3 { color: #333333 !important; font-weight: 700 !important; } /* ===== PRODUCT CARDS ===== */ .product-card, .product_card, .product__card, .grid__item .product-item { background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 4px !important; } .product-card .price, .product__price { color: #333333 !important; font-weight: 700 !important; } /* ===== TESTIMONIALS ===== */ .section_testimonials { background: #f8f8f8 !important; } .testimonial__item, .testimonial-card { background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 4px !important; padding: 20px !important; } /* ===== HIDE DUPLICATE PRODUCT CAROUSEL TITLE ===== */ #shopify-section-index_products_carousel_m7LPXb .section_heading { display: none !important; } #shopify-section-index_products_carousel_m7LPXb { display: none !important; } /* ===== SHOP BY CATEGORY TITLE ===== */ .section_banners_custom .section_heading h2, .section_banners_custom .section__title { font-size: 28px !important; font-weight: 700 !important; color: #333333 !important; text-align: center !important; text-transform: uppercase !important; } /* ===== FIX PRODUCT CAROUSEL HEIGHT ===== */ #shopify-section-1572354019887 .swiper-container, #shopify-section-1572354019887 .swiper-wrapper, #shopify-section-1572354019887 .swiper-slide, .section_products-carousel .swiper-container, .section_products-carousel .swiper-wrapper { height: auto !important; min-height: auto !important; max-height: none !important; } /* ===== FIX PRODUCT SECTION PADDING ===== */ .section_products-carousel { padding-top: 20px !important; padding-bottom: 20px !important; } /* ===== PRODUCT CARD IMPROVEMENTS ===== */ .product_card_item, .product-card, .carousel_product_item { background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 6px !important; overflow: hidden !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important; } /* ===== PRODUCT TITLE COLOR ===== */ .product_card_item .product_card__title, .product_card_item h3, .product_card_item .product__title { color: #333333 !important; font-size: 13px !important; } /* ===== PRODUCT OEM CODE ===== */ .product_card_item .product__sku, .product_card_item .sku { color: #e8611a !important; font-size: 11px !important; } /* ===== PRODUCT PRICE ===== */ .product_card_item .product__price, .product_card_item .price { color: #333333 !important; font-weight: 700 !important; font-size: 16px !important; } /* ===== ADD TO CART BUTTON ===== */ .product_card_item .btn-cart, .product_card_item button[type="submit"], .product_card_item .add-to-cart { background-color: #e8611a !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; font-weight: 600 !important; } /* ===== REMOVE EXTRA WHITESPACE IN CAROUSEL ===== */ .section_products-carousel .swiper-container-horizontal { height: auto !important; } .products_carousel__wrapper { height: auto !important; } /* ===== FIX TESTIMONIALS SPACING ===== */ .section_testimonials { padding-top: 40px !important; padding-bottom: 40px !important; } /* ===== TESTIMONIAL CARDS ===== */ .testimonial__item, .testimonial-item, .review-card { background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 6px !important; padding: 24px !important; } /* ===== TESTIMONIAL QUOTE MARK ===== */ .testimonial__item::before, .testimonial-item::before { color: #e8611a !important; font-size: 48px !important; } /* ===== STAR RATINGS ===== */ .star-rating, .stars, .rating-stars { color: #e8611a !important; } /* ===== SECTION HEADING PRODOTTI IN EVIDENZA ===== */ #shopify-section-1572354019887 .section_heading h2, #shopify-section-1572354019887 .section__title { font-size: 26px !important; font-weight: 800 !important; text-transform: uppercase !important; color: #222222 !important; text-align: center !important; letter-spacing: 1px !important; } /* ===== FIX SLIDESHOW HEIGHT ===== */ #slideshow_1572352576613, #slideshow_1572352576613 .swiper-slide, .section_slideshow .swiper-slide, .slideshow__slide { height: 70vh !important; min-height: 500px !important; max-height: 700px !important; } #shopify-section-1572352576613 { height: auto !important; } /* ===== FIX BRAND LOGOS BAR SIZE ===== */ .manus-brand-logos-bar { padding: 16px 40px !important; background: #ffffff !important; border-bottom: 1px solid #f0f0f0 !important; } .manus-brand-logos-bar img { height: 50px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; } /* ===== FIX CATEGORY BANNERS TITLE ===== */ .section_banners_custom .banner__title, .banners_custom__item .banner__title { font-size: 22px !important; font-weight: 800 !important; text-transform: uppercase !important; color: #ffffff !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important; } /* ===== FIX CATEGORY BANNERS BUTTON ===== */ .section_banners_custom .btn, .banners_custom__item .btn { background-color: #e8611a !important; color: #ffffff !important; border: none !important; font-weight: 700 !important; text-transform: uppercase !important; } /* ===== HERO BANNER HEIGHT FIX ===== */ /* Override 1100px hardcoded height */ #slideshow_1572352576613, .section_slider, .section_slider .swiper-slide, .section_slider .image_slide, .section_slider .img_placeholder__wrap { height: 580px !important; min-height: 400px !important; max-height: 580px !important; } /* Ensure background image covers properly */ .section_slider .img_placeholder__wrap { background-size: cover !important; background-position: center center !important; width: 100% !important; } /* Remove extra space below slideshow */ #shopify-section-1572352576613 { overflow: hidden !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ===== BRAND LOGOS BAR - FULL WIDTH ===== */ .manus-brand-logos-bar { width: 100% !important; padding: 20px 60px !important; background: #ffffff !important; border-bottom: 1px solid #eeeeee !important; text-align: center !important; } .manus-brand-logos-bar img { height: 45px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; } /* ===== RESTORE PRODUCT CAROUSELS ===== */ #shopify-section-1572354019887, #shopify-section-index_products_carousel_m7LPXb { display: block !important; } /* ===== FIX TESTIMONIALS HEIGHT ===== */ #shopify-section-1639339008075b6e1c { max-height: none !important; } .section_testimonials .swiper-container, .section_testimonials .swiper-wrapper, #testimonials_1639339008075b6e1c .swiper-container, #testimonials_1639339008075b6e1c .swiper-wrapper { height: auto !important; min-height: 0 !important; } .section_testimonials .swiper-slide, #testimonials_1639339008075b6e1c .swiper-slide { height: auto !important; } /* ===== FIX PRODUCT CAROUSEL HEIGHT ===== */ #products_carousel_1572354019887 .swiper-container, #products_carousel_index_products_carousel_m7LPXb .swiper-container { height: auto !important; } #products_carousel_1572354019887 .swiper-slide, #products_carousel_index_products_carousel_m7LPXb .swiper-slide { height: auto !important; } /* ===== PRODUCT CARDS STYLE ===== */ .product_card, .product-card, .grid__item .product-card-wrapper { background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 4px !important; overflow: hidden !important; } /* ===== TESTIMONIALS CARD STYLE ===== */ .testimonial_item, .testimonials__item { background: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 8px !important; padding: 20px !important; } .testimonial_item .quote, .testimonials__item .quote { color: #e8611a !important; font-size: 40px !important; line-height: 1 !important; } .testimonial_item .stars, .testimonials__item .stars, .testimonial_item .rating, .testimonials__item .rating { color: #e8611a !important; } /* ===== FORCE HIDE SECOND CAROUSEL ===== */ [id="shopify-section-index_products_carousel_m7LPXb"] { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* ===== FIX BRAND LOGO IMAGE WIDTH ===== */ .manus-brand-logos-bar { width: 100% !important; padding: 15px 0 !important; background: #ffffff !important; border-bottom: 1px solid #f0f0f0 !important; overflow: hidden !important; } .manus-brand-logos-bar img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; object-fit: contain !important; } /* ===== FIX SLIDESHOW CONTAINER HEIGHT ===== */ /* Remove extra space below slideshow */ #shopify-section-1572352576613 { overflow: hidden !important; } #shopify-section-1572352576613 .swiper-container, #shopify-section-1572352576613 .swiper { overflow: hidden !important; } /* Fix the slideshow wrapper to not have extra height */ .index_slideshow_section { overflow: hidden !important; max-height: 580px !important; } /* ===== IMPROVE HERO BANNER TEXT ===== */ /* Make title even bigger and bolder like effect image */ .slide_content h2, .slide_content .slide_heading, #slideshow_1572352576613 h2 { font-size: 52px !important; font-weight: 900 !important; line-height: 1.1 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: #ffffff !important; text-shadow: 2px 2px 8px rgba(0,0,0,0.5) !important; margin-bottom: 15px !important; } /* Subtitle text */ .slide_content p, .slide_content .slide_description { font-size: 15px !important; color: #ffffff !important; text-shadow: 1px 1px 4px rgba(0,0,0,0.5) !important; margin-bottom: 25px !important; max-width: 400px !important; } /* ===== FINAL FIX: BRAND LOGOS BAR FULL WIDTH ===== */ /* Override all previous conflicting styles */ .manus-brand-logos-bar { width: 100% !important; padding: 20px 0 !important; background: #ffffff !important; border-bottom: 1px solid #eeeeee !important; text-align: center !important; overflow: visible !important; box-sizing: border-box !important; } .manus-brand-logos-bar > div { width: 100% !important; padding: 0 40px !important; box-sizing: border-box !important; } .manus-brand-logos-bar img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; display: block !important; object-fit: fill !important; } /* ===== FINAL FIX: HERO BANNER NO EXTRA SPACE ===== */ /* Remove extra space below slideshow */ #shopify-section-1572352576613 { margin-bottom: 0 !important; padding-bottom: 0 !important; } #shopify-section-1572352576613 .section_slideshow_full_width { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ===== FINAL FIX: REMOVE SPACE BETWEEN HERO AND LOGOS ===== */ #shopify-section-1572439463694 { margin-top: 0 !important; padding-top: 0 !important; } /* ===== FINAL FIX: HERO BANNER IMAGE FILLS SECTION ===== */ /* Fix img_placeholder__wrap to fill the full section height */ #shopify-section-1572352576613 .img_placeholder__wrap, #shopify-section-1572352576613 .img_placeholder__large, #shopify-section-1572352576613 .swiper-slide, #shopify-section-1572352576613 .swiper-wrapper { height: 580px !important; min-height: 580px !important; max-height: 580px !important; } #shopify-section-1572352576613 .img_placeholder__wrap { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Ensure the slideshow section itself has no extra space */ #shopify-section-1572352576613 { height: 580px !important; overflow: hidden !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } #shopify-section-1572352576613 .section_slideshow_full_width { height: 580px !important; overflow: hidden !important; } /* ===== HERO BRAND LOGOS BAR (EMBEDDED IN BANNER BOTTOM) ===== */ .manus-slideshow-wrapper { position: relative !important; overflow: visible !important; } .manus-hero-brand-logos { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background: rgba(15, 15, 15, 0.82) !important; padding: 14px 40px !important; z-index: 20 !important; box-sizing: border-box !important; } .manus-hero-brand-logos-inner { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; } .manus-hero-brand-logos-img { width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; display: block !important; object-fit: contain !important; /* no filter needed - image is already white on transparent */ } /* Make slideshow section position relative for absolute child */ .section_slideshow_full_width { position: relative !important; } /* ===== HIDE OLD STANDALONE BRAND LOGOS BAR ===== */ .manus-brand-logos-bar { display: none !important; } /* ===== PRODUCTS CAROUSEL TITLE - BLACK TEXT STYLE ===== */ /* Override orange background title bar */ #shopify-section-1572354019887 .carousel_title, #shopify-section-1572354019887 .section_title, #shopify-section-1572354019887 h2.section_title, #shopify-section-1572354019887 .with_bg .section_title { background: transparent !important; background-color: transparent !important; color: #1a1a1a !important; font-size: 28px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; padding: 30px 0 20px !important; text-align: center !important; } /* Remove orange background from carousel wrapper */ #shopify-section-1572354019887 .carousel_wrap.with_bg { background: #ffffff !important; background-color: #ffffff !important; } #shopify-section-1572354019887 .carousel_wrap.with_bg .section_title { background: transparent !important; color: #1a1a1a !important; } /* ===== SHOP BY CATEGORY SECTION ===== */ .manus-shop-by-category { background: #f8f8f8 !important; } /* ===== THREE FEATURES SECTION IMPROVEMENTS ===== */ #shopify-section-custom_multi_box_iF8NXm { background: #ffffff !important; padding: 30px 0 !important; } /* ===== HERO BANNER HEIGHT - ENSURE BRAND LOGOS FIT ===== */ /* Section must be overflow visible to show the logo bar outside slideshow */ #shopify-section-1572352576613 { overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* Slideshow image height */ #shopify-section-1572352576613 .img_placeholder__wrap, #shopify-section-1572352576613 .img_placeholder__large, #shopify-section-1572352576613 .swiper-slide, #shopify-section-1572352576613 .swiper-wrapper { height: 520px !important; min-height: 520px !important; max-height: 520px !important; } /* Slideshow container height */ #shopify-section-1572352576613 .section_slideshow_full_width { height: 520px !important; min-height: 520px !important; max-height: 520px !important; overflow: hidden !important; } /* Wrapper must be same height as slideshow */ .manus-slideshow-wrapper { height: 520px !important; min-height: 520px !important; } /* ===== FIX: CAPTION POSITION (avoid overlap with logo bar) ===== */ /* The logo bar is ~160px at bottom of 520px slideshow */ /* Caption should be in upper portion */ #shopify-section-1572352576613 .slide_caption { padding-bottom: 180px !important; } /* ===== FIX: REMOVE GAP BETWEEN LOGO BAR AND FEATURES SECTION ===== */ /* The section has overflow:visible, so the logo bar extends below */ /* The next section should start right after the logo bar */ #shopify-section-custom_multi_box_iF8NXm { margin-top: 0 !important; padding-top: 0 !important; } /* Ensure no extra margin on slideshow section */ #shopify-section-1572352576613 { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ===== FIX: REDUCE SPACE BETWEEN LOGO BAR AND FEATURES SECTION ===== */ #shopify-section-custom_multi_box_iF8NXm { padding-top: 0 !important; margin-top: 0 !important; } /* Override the inline CSS padding-top: 60px on .custom-multi-box */ #shopify-section-custom_multi_box_iF8NXm section.custom-multi-box, #shopify-section-custom_multi_box_iF8NXm .custom-multi-box { padding-top: 30px !important; padding-bottom: 40px !important; } /* ===== FIX: ELIMINATE ALL PADDING BETWEEN LOGO BAR AND FEATURES ===== */ #shopify-section-custom_multi_box_iF8NXm section.custom-multi-box, #shopify-section-custom_multi_box_iF8NXm .custom-multi-box, #shopify-section-custom_multi_box_iF8NXm section { padding-top: 20px !important; } /* ===== FIX: HIDE SERVICES TITLE AND REDUCE CONTAINER MARGIN ===== */ #shopify-section-custom_multi_box_iF8NXm .caption_text, #shopify-section-custom_multi_box_iF8NXm .caption_text h5, #shopify-section-custom_multi_box_iF8NXm .container > h5 { display: none !important; } #shopify-section-custom_multi_box_iF8NXm .container { margin-top: 0 !important; padding-top: 0 !important; } /* ===== FIX: PRODUCTS CAROUSEL TITLE - BLACK TEXT ON WHITE BACKGROUND ===== */ #shopify-section-1572354019887 .manus-section-title-bar, #shopify-section-1572354019887 .section-title-bar, #shopify-section-1572354019887 .products-carousel-title { background: #ffffff !important; background-color: #ffffff !important; color: #111111 !important; border-bottom: 2px solid #eeeeee !important; padding: 20px 0 !important; } #shopify-section-1572354019887 .manus-section-title-bar h2, #shopify-section-1572354019887 .manus-section-title-bar .section-title, #shopify-section-1572354019887 h2.section-title, #shopify-section-1572354019887 .products-carousel-title h2 { color: #111111 !important; font-size: 28px !important; font-weight: 700 !important; text-transform: uppercase !important; } /* Override any orange background on the title */ #shopify-section-1572354019887 [class*="title-bar"], #shopify-section-1572354019887 [class*="section-header"] { background: #ffffff !important; color: #111111 !important; } /* ===== FIX: FEATURES SECTION - ADD SUBTITLE TEXT ===== */ #shopify-section-custom_multi_box_iF8NXm .custom_bottom_caption p { display: block !important; font-size: 13px !important; color: #777777 !important; margin-top: 4px !important; } /* ===== FIX: PRODUCTS CAROUSEL TITLE - BLACK TEXT ON WHITE BACKGROUND ===== */ #shopify-section-1572354019887 .manus-section-title-bar, #shopify-section-1572354019887 .section-title-bar, #shopify-section-1572354019887 .products-carousel-title, #shopify-section-1572354019887 .caption_text { background: #ffffff !important; background-color: #ffffff !important; color: #111111 !important; border-bottom: none !important; padding: 20px 0 !important; } #shopify-section-1572354019887 .manus-section-title-bar h2, #shopify-section-1572354019887 .manus-section-title-bar .section-title, #shopify-section-1572354019887 h2.section-title, #shopify-section-1572354019887 .products-carousel-title h2, #shopify-section-1572354019887 .caption_text h2, #shopify-section-1572354019887 .caption_text h3 { color: #111111 !important; font-size: 28px !important; font-weight: 700 !important; text-transform: uppercase !important; } /* Override any orange background on the title */ #shopify-section-1572354019887 [class*="title-bar"], #shopify-section-1572354019887 [class*="section-header"], #shopify-section-1572354019887 [style*="background"] { background: #ffffff !important; color: #111111 !important; } /* ===== FIX: PRODUCTS CAROUSEL SECTION HEADING - WHITE BACKGROUND BLACK TEXT ===== */ #shopify-section-1572354019887 h2.section_heading { background: #ffffff !important; background-color: #ffffff !important; color: #111111 !important; border-bottom: 2px solid #eeeeee !important; padding: 24px 0 !important; font-size: 26px !important; font-weight: 700 !important; text-align: center !important; text-transform: uppercase !important; letter-spacing: 1px !important; } /* Also fix the SHOP BY CATEGORY title */ #shopify-section-1572439463694 .manus-shop-by-category-title, #shopify-section-1572439463694 h2.section_heading, #shopify-section-1572439463694 .shop-by-category-title { background: #ffffff !important; color: #111111 !important; font-size: 26px !important; font-weight: 700 !important; text-align: center !important; text-transform: uppercase !important; padding: 24px 0 !important; } /* =================================================================== FINAL REFINEMENTS - Apple Font, Darker Hero, Smaller Logo, Shadows =================================================================== */ /* ===== 1. APPLE SYSTEM FONT - GLOBAL ===== */ body, html, body *, html * { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; } /* ===== 2. HERO BANNER - DARK OVERLAY (压暗天空) ===== */ /* Add a dark gradient overlay on top of the background image */ #shopify-section-1572352576613 .img_placeholder__large, #shopify-section-1572352576613 .img_placeholder__wrap { position: relative !important; } /* Dark overlay via pseudo-element on the slide */ #shopify-section-1572352576613 .swiper-slide::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.20) 100% ) !important; z-index: 1 !important; pointer-events: none !important; } /* Ensure caption text is above the overlay */ #shopify-section-1572352576613 .slide_caption, #shopify-section-1572352576613 .swiper-slide .slide_caption { position: relative !important; z-index: 5 !important; } /* ===== 3. HERO BRAND LOGOS - SMALLER & ELEGANT ===== */ /* Reduce logo bar height for a more refined look */ .manus-hero-brand-logos { padding: 10px 60px !important; background: rgba(10, 10, 10, 0.88) !important; } .manus-hero-brand-logos-img { height: 38px !important; width: auto !important; max-height: 38px !important; display: block !important; margin: 0 auto !important; object-fit: contain !important; } .manus-hero-brand-logos-inner { max-width: 1100px !important; margin: 0 auto !important; } /* ===== 4. SUBTLE SHADOWS ON ALL CARDS ===== */ /* Feature cards */ .custom-container .block, #shopify-section-custom_multi_box_iF8NXm .block { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important; border: 1px solid #eeeeee !important; border-radius: 8px !important; transition: box-shadow 0.25s ease !important; } .custom-container .block:hover, #shopify-section-custom_multi_box_iF8NXm .block:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important; } /* Product cards */ .product_card_item, .product-card, .carousel_product_item, .product_card, .grid__item .product-card-wrapper { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important; border: 1px solid #eeeeee !important; border-radius: 8px !important; transition: box-shadow 0.25s ease !important; } .product_card_item:hover, .product-card:hover, .carousel_product_item:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13) !important; } /* Testimonial cards */ .testimonial_item, .testimonials__item, .testimonials_item, .testimonial__item, .testimonial-card, .review-card { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important; border: 1px solid #eeeeee !important; border-radius: 10px !important; transition: box-shadow 0.25s ease !important; } /* Header / Nav shadow */ .site-header, #shopify-section-header, .header, nav.main-nav, .main-header { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; } /* ===== 5. TYPOGRAPHY REFINEMENTS ===== */ /* Hero title - slightly smaller, more elegant */ .slide_caption .caption_text h2, .slideshow__caption h2, .caption_text h2, .slide_content h2, #slideshow_1572352576613 h2 { font-size: 52px !important; font-weight: 800 !important; letter-spacing: -0.5px !important; line-height: 1.08 !important; } /* Hero subtitle */ .slide_caption .caption_text p, .caption_text p, .slide_content p { font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0.1px !important; opacity: 0.92 !important; } /* Section headings - refined */ .section_products_carousel h2.section_heading, #shopify-section-1572354019887 h2.section_heading, .section_banners_custom h2.section_heading, #shopify-section-1572439463694 h2.section_heading { font-size: 24px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; color: #1a1a1a !important; } /* Feature card titles */ .custom-container .block .custom_bottom_caption h3, #shopify-section-custom_multi_box_iF8NXm h3 { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; } /* Feature card descriptions */ .custom-container .block .custom_bottom_text, #shopify-section-custom_multi_box_iF8NXm .custom_bottom_text { font-size: 13px !important; line-height: 1.6 !important; color: #666666 !important; } /* Product titles */ .product_card_item .product_card__title, .product_card_item h3, .carousel_product_item .product__title { font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; } /* Product prices */ .product_card_item .product__price, .product_card_item .price, .carousel_product_item .price { font-size: 16px !important; font-weight: 700 !important; color: #1a1a1a !important; } /* Testimonial text */ .testimonials_item__text, .testimonial__item .text, .testimonial_item p { font-size: 14px !important; line-height: 1.65 !important; color: #555555 !important; } /* ===== 6. SHOP NOW BUTTON - REFINED ===== */ a.btn.slider_btn, .caption_text a.btn.slider_btn { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; padding: 13px 30px !important; border-radius: 3px !important; } /* ===== 7. CATEGORY BANNER BUTTONS ===== */ .section_banners_custom .btn, .banners_custom__item .btn, #shopify-section-1572439463694 .btn { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1px !important; padding: 10px 24px !important; border-radius: 3px !important; } /* ===== 8. NEWSLETTER SECTION ===== */ .section_newsletter h2, .section_newsletter .newsletter_title { font-size: 26px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; } /* ===== 9. FOOTER REFINEMENTS ===== */ footer, .site-footer, #shopify-section-footer { font-size: 13px !important; } /* ===== 10. GENERAL SMOOTHNESS ===== */ * { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* =================================================================== CRITICAL FIX: Restore caption absolute positioning The caption must be absolute positioned over the background image =================================================================== */ /* ===== FIX: CAPTION MUST BE ABSOLUTE POSITIONED ===== */ /* Remove the relative position override that broke the layout */ #shopify-section-1572352576613 .slide_caption, #shopify-section-1572352576613 .swiper-slide .slide_caption, .section_slideshow_full_width .slide_caption, .swiper-slide .slide_caption { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; /* Leave bottom space for logo bar (~70px) */ bottom: 70px !important; width: 100% !important; height: auto !important; z-index: 10 !important; display: flex !important; align-items: center !important; } /* ===== FIX: DARK OVERLAY MUST BE BELOW CAPTION ===== */ #shopify-section-1572352576613 .swiper-slide { position: relative !important; overflow: hidden !important; } /* Dark gradient overlay - z-index 2 (above image, below caption) */ #shopify-section-1572352576613 .swiper-slide::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient( 160deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.40) 45%, rgba(0, 0, 0, 0.15) 100% ) !important; z-index: 2 !important; pointer-events: none !important; } /* Caption container z-index above overlay */ #shopify-section-1572352576613 .slide_caption .container { position: relative !important; z-index: 10 !important; padding-left: 80px !important; } /* ===== FIX: REMOVE PADDING-BOTTOM THAT PUSHED CAPTION DOWN ===== */ #shopify-section-1572352576613 .slide_caption { padding-bottom: 0 !important; } /* ===== HERO TEXT STYLES ===== */ #shopify-section-1572352576613 .caption_text h2, #shopify-section-1572352576613 .slide_caption h2 { font-size: 54px !important; font-weight: 800 !important; color: #ffffff !important; text-shadow: 2px 3px 12px rgba(0,0,0,0.7) !important; line-height: 1.05 !important; text-transform: uppercase !important; letter-spacing: -0.5px !important; margin-bottom: 14px !important; } #shopify-section-1572352576613 .caption_text p, #shopify-section-1572352576613 .slide_caption p { font-size: 15px !important; color: rgba(255,255,255,0.92) !important; text-shadow: 1px 1px 6px rgba(0,0,0,0.6) !important; margin-bottom: 28px !important; max-width: 400px !important; line-height: 1.55 !important; } /* ===== SHOP NOW BUTTON ===== */ #shopify-section-1572352576613 a.btn.slider_btn, #shopify-section-1572352576613 .caption_text a.btn { background-color: #e8611a !important; color: #ffffff !important; border: none !important; border-radius: 3px !important; padding: 13px 30px !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; display: inline-block !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(232,97,26,0.4) !important; } #shopify-section-1572352576613 a.btn.slider_btn:hover { background-color: #c94f0f !important; } /* =================================================================== CRITICAL FIX: Font Icon Restoration The apple system font override broke Font Awesome icons. We must EXCLUDE icon elements from the apple font override. =================================================================== */ /* ===== RESTORE ICON FONTS - Override the apple font for icon elements ===== */ /* Font Awesome icons use pseudo-elements and specific classes */ .fa, .fas, .far, .fal, .fab, .fad, [class*="fa-"], i.fa, i.fas, i.far, i.fal, i.fab, .icon, .icons, /* Shopify theme specific icon classes */ .icon-bag, .icon-search, .icon-menu, .icon-close, .icon-arrow-right, .icon-arrow-left, .icon-account, .icon-wishlist, /* Any element using font-awesome */ [data-icon], /* Swiper navigation arrows */ .swiper-button-next::after, .swiper-button-prev::after, /* Star ratings */ .spr-icon, .star, .stars, /* Cart and wishlist icons */ .cart-icon, .wishlist-icon, /* All pseudo-elements that might use icon fonts */ *::before, *::after { font-family: inherit !important; } /* ===== TARGETED APPLE FONT - Only for text content, not icons ===== */ /* Reset the overly broad font rule and apply more carefully */ body, h1, h2, h3, h4, h5, h6, p, span, a, div, li, td, th, input, button, select, textarea, label { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; } /* ===== EXCEPTION: Restore icon fonts for specific elements ===== */ /* Font Awesome 4.x */ .fa::before, .fa::after, [class^="fa-"]::before, [class*=" fa-"]::before, /* Font Awesome 5.x */ .fas::before, .far::before, .fal::before, .fab::before, .fad::before, /* Common icon font classes used by Shopify themes */ .icon::before, .icon::after, .icon-bag::before, .icon-search::before, .icon-menu::before, .icon-close::before, .icon-arrow-right::before, .icon-arrow-left::before, .icon-account::before, .icon-wishlist::before, /* Swiper navigation */ .swiper-button-next::after, .swiper-button-prev::after, /* Star rating icons */ .spr-icon::before, .spr-icon-star::before, /* Wishlist heart icons */ .ti-heart::before, .ti-shopping-cart::before { font-family: FontAwesome, "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 5 Solid", "themify", "simple-line-icons", "icomoon", "Material Icons", inherit !important; } /* ===== FIX BUTTON TEXT ALIGNMENT ===== */ /* Ensure all buttons have proper text centering */ button, .btn, a.btn, input[type="button"], input[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 6px !important; line-height: 1 !important; } /* Product card action buttons - fix icon + text alignment */ .product_card .btn, .product_card button, #products_carousel_1572354019887 .btn, #products_carousel_1572354019887 button, .product-card .btn, .product-card button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; min-height: 40px !important; } /* ===== MOBILE RESPONSIVE FIXES ===== */ @media (max-width: 768px) { /* Fix header icons on mobile */ .header-icons a, .header-icons button, .site-header__icons a, .site-header__icons button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 36px !important; min-height: 36px !important; } /* Fix mobile navigation hamburger icon */ .mobile-nav-toggle, .menu-toggle, .hamburger, [class*="menu-icon"], [class*="nav-toggle"] { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; background: transparent !important; border: none !important; cursor: pointer !important; } /* Fix product card buttons on mobile */ .product_card .btn, .product-card .btn { padding: 10px 12px !important; font-size: 12px !important; width: 100% !important; max-width: none !important; } /* Fix category banners on mobile - stack vertically */ .manus-banners-grid { flex-direction: column !important; } .manus-banner-item { width: 100% !important; height: 220px !important; } /* Fix three feature boxes on mobile - stack vertically */ .custom-multi-box .row, .custom-multi-box .columns { flex-direction: column !important; } /* Fix hero banner text on mobile */ #shopify-section-1572352576613 .slide_caption h2, #shopify-section-1572352576613 .slide_caption .caption_text h2 { font-size: 32px !important; line-height: 1.1 !important; } #shopify-section-1572352576613 .slide_caption p { font-size: 13px !important; } /* Fix hero banner caption padding on mobile */ #shopify-section-1572352576613 .slide_caption .container { padding-left: 20px !important; padding-right: 20px !important; } /* Fix brand logo bar on mobile */ .manus-hero-brand-logos-bar { height: 50px !important; } .manus-hero-brand-logos-img { height: 28px !important; } } /* ===== SPECIFIC FIX: Product card add to cart button ===== */ /* The button has an icon + text, both need to be centered */ .product_card .add-to-cart-btn, .product_card [name="add"], .product_card .btn-cart, button[name="add"], .btn-addtocart { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 18px !important; background-color: #e8611a !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; width: 100% !important; min-height: 40px !important; text-align: center !important; } /* =================================================================== CRITICAL FIX v2: Font Awesome Icon Font Restoration The apple system font override broke ALL icon elements. This fix uses maximum specificity to restore icon fonts. =================================================================== */ /* ===== MAXIMUM SPECIFICITY FIX FOR FONT AWESOME ICONS ===== */ /* These rules MUST come AFTER the apple font rules to override them */ /* Font Awesome 4.x - used by this theme */ html body i.fa, html body i.fas, html body i.far, html body i.fal, html body i.fab, html body i[class*="fa-"], html body span.fa, html body span[class*="fa-"] { font-family: FontAwesome, "Font Awesome 5 Free", "Font Awesome 5 Solid" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; line-height: 1 !important; speak: never !important; } /* Also fix the ::before pseudo-elements of icon elements */ html body i.fa::before, html body i.fas::before, html body i.far::before, html body i.fal::before, html body i.fab::before, html body i[class*="fa-"]::before, html body span[class*="fa-"]::before { font-family: FontAwesome, "Font Awesome 5 Free", "Font Awesome 5 Solid" !important; } /* ===== FIX SPECIFIC ICONS IN HEADER ===== */ /* Search button icon */ button[type="submit"] i.fa, button[type="submit"] i[class*="fa-"], .search_form button i, .header-search button i, form[action*="search"] button i { font-family: FontAwesome, "Font Awesome 5 Free" !important; font-size: 16px !important; } /* Cart icon */ .icon-bag, .cart-icon, a[href*="/cart"] i, .header-cart i, .cart_count_wrap i { font-family: FontAwesome, "Font Awesome 5 Free" !important; } /* Wishlist icon */ .icon-wishlist, a[href*="wishlist"] i, .header-wishlist i { font-family: FontAwesome, "Font Awesome 5 Free" !important; } /* Navigation icons */ .nav-icon, .hamburger i, .mobile-menu i, [class*="icon-menu"], [class*="menu-icon"] { font-family: FontAwesome, "Font Awesome 5 Free" !important; } /* ===== FIX THEMIFY ICONS (used by some Shopify themes) ===== */ html body [class*="ti-"], html body [class^="ti-"] { font-family: "themify" !important; font-style: normal !important; font-weight: normal !important; } /* ===== FIX SIMPLE LINE ICONS ===== */ html body [class*="icon-"], html body [class^="icon-"] { font-family: "simple-line-icons", FontAwesome !important; } /* ===== FIX SWIPER NAVIGATION ARROWS ===== */ .swiper-button-next::after, .swiper-button-prev::after { font-family: swiper-icons, FontAwesome !important; } /* ===== RESET: Remove the broken *::before, *::after rule ===== */ /* The previous CSS had *::before, *::after { font-family: inherit } which was wrong */ /* We need to ensure icon pseudo-elements use their own font */ /* ===== MOBILE FIXES ===== */ @media (max-width: 768px) { /* Ensure header icons are visible and properly sized on mobile */ .header-icons i, .site-header i, header i, #header i { font-family: FontAwesome, "Font Awesome 5 Free" !important; font-size: 18px !important; } /* Fix search button on mobile */ .search_form button, .header-search button { background-color: #e8611a !important; color: white !important; border: none !important; padding: 8px 14px !important; border-radius: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; min-height: 40px !important; } /* Fix mobile menu toggle */ .mobile-nav-toggle, .menu-toggle, button[class*="menu"], button[class*="hamburger"] { background: transparent !important; border: none !important; padding: 8px !important; color: #1a1a1a !important; } /* Fix product card buttons on mobile - ensure text is centered */ .product_card .btn, .product_card button, .product-card .btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 10px !important; font-size: 12px !important; gap: 6px !important; } } /* ===== FIX PRODUCT CARD BUTTONS - Ensure icon and text are centered ===== */ .product_card .btn-cart, .product_card [name="add"], .product_card .add-to-cart, #products_carousel_1572354019887 button[name="add"], #products_carousel_1572354019887 .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-align: center !important; line-height: 1 !important; vertical-align: middle !important; } /* Fix icon inside product card buttons */ #products_carousel_1572354019887 button i, #products_carousel_1572354019887 .btn i, .product_card button i, .product_card .btn i { font-family: FontAwesome, "Font Awesome 5 Free" !important; font-size: 14px !important; line-height: 1 !important; vertical-align: middle !important; } /* ================================================================ COMPREHENSIVE FIX BLOCK - Applied after style.scss.css Fixes: Font Awesome icons, product card buttons, carousel arrows, mobile responsive, third feature card subtitle ================================================================ */ /* ===== CRITICAL: RESTORE FONT AWESOME ICON FONT ===== */ /* The global font-family override breaks FA icons - fix them back */ .fa, .fa:before, [class^="fa-"], [class*=" fa-"], i.fa, i[class^="fa-"], i[class*=" fa-"], .fa-shopping-cart, .fa-heart, .fa-search, .fa-bars, .fa-user, .fa-lock, .fa-cog, .fa-ban, .fa-angle-left, .fa-angle-right, .fa-angle-up, .fa-angle-down, .fa-truck, .fa-thumbs-up, .fa-credit-card, .fa-check, .fa-times, .fa-star, .fa-envelope, .fa-phone, .fa-map-marker, .fa-home, .fa-tag, .fa-tags { font-family: "FontAwesome" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; speak: none !important; } /* ===== FIX: SWIPER ARROW BUTTONS - FONT AWESOME ICONS ===== */ /* The swiper prev/next buttons use :before pseudo-elements with FA font */ .swiper_btn, .swiper_btn__prev, .swiper_btn__next, [class*="swiper_btn"] { font-family: "FontAwesome" !important; } .swiper_btn:before, .swiper_btn__prev:before, .swiper_btn__next:before { font-family: "FontAwesome" !important; font-style: normal !important; font-weight: normal !important; display: block !important; speak: none !important; } .swiper_btn__prev:before { content: "\f104" !important; font: 28px/50px "FontAwesome" !important; } .swiper_btn__next:before { content: "\f105" !important; font: 28px/50px "FontAwesome" !important; } /* Carousel prev/next button styling */ .swiper_btn { width: 40px !important; height: 40px !important; background: rgba(255,255,255,0.9) !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; color: #1a1a1a !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; z-index: 10 !important; } .swiper_btn:hover { background: #FF7828 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(255,120,40,0.3) !important; } /* ===== FIX: PRODUCT CARD BUTTONS - ICON BUTTONS ===== */ /* btn-cart is a 50x50 icon button with FA shopping cart icon */ .btn-cart, button.btn-cart { background-color: #FF7828 !important; color: #ffffff !important; border: none !important; width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background-color 0.2s ease !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; vertical-align: middle !important; } .btn-cart i.fa, .btn-cart i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 18px !important; color: #ffffff !important; display: block !important; line-height: 1 !important; width: auto !important; height: auto !important; } .btn-cart:hover { background-color: #e06010 !important; } /* ===== FIX: WISHLIST BUTTON ===== */ .wishlist_btn, a.wishlist_btn, .btn.btn_icon.wishlist_btn { background-color: #f5f5f5 !important; color: #999999 !important; border: 1px solid #e5e5e5 !important; width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; vertical-align: middle !important; text-decoration: none !important; } .wishlist_btn i.fa, .wishlist_btn i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 18px !important; color: #999999 !important; display: block !important; line-height: 1 !important; } .wishlist_btn:hover, .wishlist_btn.active { background-color: #fff0eb !important; border-color: #FF7828 !important; color: #FF7828 !important; } .wishlist_btn:hover i.fa, .wishlist_btn.active i.fa { color: #FF7828 !important; } /* ===== FIX: QUICK VIEW / DETTAGLI BUTTON ===== */ .quick_view_btn { background-color: #f5f5f5 !important; color: #555555 !important; border: 1px solid #e5e5e5 !important; height: 44px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 14px !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; transition: all 0.2s ease !important; white-space: nowrap !important; vertical-align: middle !important; } .quick_view_btn i.fa { font-family: "FontAwesome" !important; font-size: 13px !important; margin-right: 5px !important; color: #555555 !important; } .quick_view_btn:hover { background-color: #1a1a1a !important; border-color: #1a1a1a !important; color: #ffffff !important; } .quick_view_btn:hover i.fa { color: #ffffff !important; } /* ===== FIX: PRODUCT LINKS CONTAINER ===== */ .product_links { display: flex !important; align-items: center !important; gap: 6px !important; padding: 12px 0 0 0 !important; flex-wrap: nowrap !important; } .product_links form { display: inline-flex !important; align-items: center !important; } /* ===== FIX: HEADER ICON BUTTONS ===== */ /* Search, account, cart, wishlist in header */ .header_icons .fa, .header_icons i.fa, .header__icons .fa, .header__icons i.fa, .site-header .fa, .site-header i.fa, #shopify-section-header .fa, #shopify-section-header i.fa { font-family: "FontAwesome" !important; font-size: 18px !important; font-style: normal !important; } /* ===== FIX: FEATURE SECTION ICONS ===== */ .custom-container .block i.fa, .custom-container .block i[class*="fa-"], #shopify-section-custom_multi_box_iF8NXm i.fa, #shopify-section-custom_multi_box_iF8NXm i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 26px !important; font-style: normal !important; color: #ffffff !important; } /* ===== FIX: THIRD FEATURE CARD - POLITICHE DI RESO ===== */ /* Ensure description text is visible even if empty in settings */ #shopify-section-custom_multi_box_iF8NXm .block:nth-child(3) .custom_bottom_text, #shopify-section-custom_multi_box_iF8NXm .block:last-child .custom_bottom_text { display: block !important; min-height: 20px !important; } /* ===== MOBILE RESPONSIVE FIXES ===== */ @media (max-width: 768px) { /* Hero banner */ #shopify-section-1572352576613 .img_placeholder__wrap, #shopify-section-1572352576613 .img_placeholder__large, #shopify-section-1572352576613 .swiper-slide, #shopify-section-1572352576613 .swiper-wrapper { height: 380px !important; min-height: 380px !important; max-height: 380px !important; } #shopify-section-1572352576613 .section_slideshow_full_width { height: 380px !important; } .manus-slideshow-wrapper { height: 380px !important; } /* Hero text */ #shopify-section-1572352576613 .caption_text h2, #shopify-section-1572352576613 .slide_caption h2 { font-size: 28px !important; letter-spacing: 0 !important; margin-bottom: 8px !important; } #shopify-section-1572352576613 .caption_text p, #shopify-section-1572352576613 .slide_caption p { font-size: 13px !important; margin-bottom: 16px !important; max-width: 260px !important; } #shopify-section-1572352576613 .slide_caption .container { padding-left: 20px !important; padding-right: 20px !important; } /* SHOP NOW button */ a.btn.slider_btn { padding: 10px 20px !important; font-size: 13px !important; } /* Brand logos bar */ .manus-hero-brand-logos { padding: 8px 15px !important; } .manus-hero-brand-logos-img { height: 24px !important; max-height: 24px !important; } /* Three features - stack vertically */ .custom-container { flex-direction: column !important; padding: 0 15px !important; gap: 12px !important; } .custom-container .block { width: 100% !important; flex: none !important; } /* Product cards */ .product_links { flex-wrap: wrap !important; gap: 4px !important; } .btn-cart, button.btn-cart { width: 40px !important; height: 40px !important; min-width: 40px !important; } .wishlist_btn { width: 40px !important; height: 40px !important; min-width: 40px !important; } .quick_view_btn { height: 40px !important; font-size: 11px !important; padding: 0 10px !important; } /* Navigation hamburger */ #megamenu_mobile_toggle i.fa, #megamenu_mobile_toggle i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 22px !important; } /* Category banners */ .section_banners_custom .row > div { margin-bottom: 15px !important; } /* Carousel arrows */ .swiper_btn { width: 32px !important; height: 32px !important; } } @media (max-width: 480px) { /* Even smaller screens */ #shopify-section-1572352576613 .caption_text h2 { font-size: 22px !important; } .manus-hero-brand-logos-img { height: 20px !important; max-height: 20px !important; } .quick_view_btn { display: none !important; } .product_links { justify-content: flex-start !important; } } /* ===== FIX: ENSURE FONT AWESOME WORKS IN ALL CONTEXTS ===== */ /* Override the global * rule that broke icon fonts */ .fa:before, [class^="fa-"]:before, [class*=" fa-"]:before { font-family: "FontAwesome" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ===== FIX: PRODUCT ITEM CARD SHADOW ===== */ .product_item { box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important; border-radius: 8px !important; overflow: hidden !important; transition: box-shadow 0.25s ease !important; background: #ffffff !important; } .product_item:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important; } /* ===== FIX: PRODUCT INFO PADDING ===== */ .product_item .product_info { padding: 12px 14px 14px !important; } .product_item .product_name a { font-size: 13px !important; font-weight: 600 !important; color: #1a1a1a !important; text-decoration: none !important; line-height: 1.4 !important; display: block !important; } .product_item .product_price .money { font-size: 16px !important; font-weight: 700 !important; color: #1a1a1a !important; } .product_item .product_price .money_sale { color: #999999 !important; text-decoration: line-through !important; font-size: 13px !important; font-weight: 400 !important; } /* ===== FIX: PRODUCT BADGE ===== */ .product_badge.new { background-color: #1a1a1a !important; color: #ffffff !important; font-size: 10px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 3px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .product_badge.sale { background-color: #FF7828 !important; color: #ffffff !important; } /* ================================================================ OVERRIDE responsive.scss.css BUTTON RULES These rules use higher specificity to override the responsive stylesheet which loads AFTER manus-custom.css ================================================================ */ /* Override responsive.scss.css: @media (max-width: 1199px) .color_scheme .product_listing__main .btn-cart { font-size: 20px; width: 40px; height: 40px; line-height: 40px; } */ @media (max-width: 1199px) { .color_scheme .product_listing__main .btn-cart, .color_scheme .product_listing__main .wishlist_btn, .color_scheme .product_listing__main .btn_options, .btn-cart, button.btn-cart { font-size: 0 !important; width: 44px !important; height: 44px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin-right: 0 !important; vertical-align: middle !important; } .color_scheme .product_listing__main .btn-cart i.fa, .color_scheme .product_listing__main .btn-cart i[class*="fa-"], .btn-cart i.fa, .btn-cart i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 18px !important; line-height: 1 !important; display: block !important; color: #ffffff !important; } .color_scheme .product_listing__main .wishlist_btn i.fa, .color_scheme .product_listing__main .wishlist_btn i[class*="fa-"], .wishlist_btn i.fa, .wishlist_btn i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 18px !important; line-height: 1 !important; display: block !important; color: #999999 !important; } } /* Override responsive.scss.css: @media (max-width: 767px) .color_scheme .product_listing__main .btn-cart { font-size: 23px; width: 50px; height: 50px; line-height: 50px; margin-right: 15px; } */ @media (max-width: 767px) { .color_scheme .product_listing__main .btn-cart, .color_scheme .product_listing__main .wishlist_btn, .color_scheme .product_listing__main .btn_options, .color_scheme .section_products-column .item_collection .btn-cart, .color_scheme .section_template__collection .product_listing__main .btn-cart, .color_scheme .section_template__collection .product_listing__main .wishlist_btn, .btn-cart, button.btn-cart { font-size: 0 !important; width: 40px !important; height: 40px !important; line-height: 1 !important; margin-right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; vertical-align: middle !important; } .color_scheme .product_listing__main .btn-cart i.fa, .color_scheme .product_listing__main .btn-cart i[class*="fa-"], .btn-cart i.fa, .btn-cart i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 16px !important; line-height: 1 !important; display: block !important; color: #ffffff !important; } .color_scheme .product_listing__main .wishlist_btn i.fa, .color_scheme .product_listing__main .wishlist_btn i[class*="fa-"], .wishlist_btn i.fa, .wishlist_btn i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 16px !important; line-height: 1 !important; display: block !important; color: #999999 !important; } /* Fix product_links layout on mobile */ .color_scheme .product_listing__main .product_links, .product_links { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 5px !important; padding: 10px 0 0 !important; justify-content: flex-start !important; } .product_links form { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; } /* Quick view button on mobile - keep visible but smaller */ .color_scheme .product_listing__main .product_links .quick_view_btn, .quick_view_btn { display: inline-flex !important; height: 40px !important; padding: 0 10px !important; font-size: 11px !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important; } .quick_view_btn i.fa { font-family: "FontAwesome" !important; font-size: 12px !important; margin-right: 4px !important; } } /* Override responsive.scss.css: @media (max-width: 479px) */ @media (max-width: 479px) { .color_scheme .product_listing__main .btn-cart, .color_scheme .product_listing__main .wishlist_btn, .color_scheme .product_listing__main .btn_options, .btn-cart, button.btn-cart { font-size: 0 !important; width: 38px !important; height: 38px !important; line-height: 1 !important; margin-right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .btn-cart i.fa, .btn-cart i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 15px !important; line-height: 1 !important; display: block !important; color: #ffffff !important; } .wishlist_btn i.fa, .wishlist_btn i[class*="fa-"] { font-family: "FontAwesome" !important; font-size: 15px !important; line-height: 1 !important; display: block !important; color: #999999 !important; } /* On very small screens, hide quick view */ .quick_view_btn { display: none !important; } } /* ===== FINAL: ENSURE FONT AWESOME ALWAYS WINS ===== */ /* This must be at the very end to override everything */ .fa.fa-shopping-cart, i.fa.fa-shopping-cart, .fa.fa-heart, i.fa.fa-heart, .fa.fa-search, i.fa.fa-search, .fa.fa-bars, i.fa.fa-bars, .fa.fa-user, i.fa.fa-user, .fa.fa-angle-left, i.fa.fa-angle-left, .fa.fa-angle-right, i.fa.fa-angle-right { font-family: "FontAwesome" !important; font-style: normal !important; font-weight: normal !important; speak: none !important; display: inline-block !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ================================================================ FINAL COMPREHENSIVE FIX - ALL REMAINING ISSUES ================================================================ */ /* ===== 1. HERO BANNER: MOVE CAR TO THE RIGHT ===== The background image should be positioned so the car is on the right and text has breathing room on the left */ #shopify-section-1572352576613 .img_placeholder__wrap, #shopify-section-1572352576613 .img_placeholder__large, .section_slider .img_placeholder__wrap { background-position: 70% center !important; } /* ===== 2. FONT AWESOME ICON FIX - NUCLEAR OPTION ===== Force Font Awesome on ALL fa icons regardless of inheritance The issue: body * { font-family: -apple-system } overrides icon font Solution: use :before pseudo-element with explicit font-family */ /* Force all .fa icons to use FontAwesome */ i[class*="fa-"], i.fa, span[class*="fa-"], .fa:before, i[class*="fa-"]:before { font-family: "FontAwesome" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; display: inline-block !important; } /* btn-cart icon - override ALL responsive rules */ .btn-cart i, .btn-cart i.fa, .btn-cart i[class*="fa-"], button.btn-cart i, button.btn-cart i.fa { font-family: "FontAwesome" !important; font-size: 18px !important; font-style: normal !important; font-weight: normal !important; color: #ffffff !important; display: block !important; line-height: 1 !important; width: auto !important; height: auto !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; } /* wishlist_btn icon */ .wishlist_btn i, .wishlist_btn i.fa, .wishlist_btn i[class*="fa-"], a.wishlist_btn i { font-family: "FontAwesome" !important; font-size: 18px !important; font-style: normal !important; font-weight: normal !important; color: #999999 !important; display: block !important; line-height: 1 !important; width: auto !important; height: auto !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; } /* quick_view_btn icon */ .quick_view_btn i, .quick_view_btn i.fa { font-family: "FontAwesome" !important; font-size: 13px !important; font-style: normal !important; font-weight: normal !important; display: inline-block !important; margin-right: 4px !important; } /* btn-cart container: ensure flex centering */ .btn-cart, button.btn-cart { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; line-height: 1 !important; font-size: 0 !important; background-color: #ff7828 !important; border: none !important; border-radius: 6px !important; cursor: pointer !important; vertical-align: middle !important; overflow: hidden !important; } /* wishlist_btn container */ .wishlist_btn, a.wishlist_btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; line-height: 1 !important; font-size: 0 !important; background-color: #f0f0f0 !important; border: 1px solid #dddddd !important; border-radius: 6px !important; cursor: pointer !important; vertical-align: middle !important; overflow: hidden !important; } /* Override ALL responsive.scss.css rules for btn-cart at all breakpoints */ @media (max-width: 1199px) { .btn-cart, button.btn-cart, .color_scheme .product_listing__main .btn-cart, .color_scheme .product_listing__main .btn_options { font-size: 0 !important; width: 44px !important; height: 44px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin-right: 0 !important; } .btn-cart i, .btn-cart i.fa, .color_scheme .product_listing__main .btn-cart i { font-family: "FontAwesome" !important; font-size: 18px !important; line-height: 1 !important; display: block !important; color: #ffffff !important; } .wishlist_btn, .color_scheme .product_listing__main .wishlist_btn { font-size: 0 !important; width: 44px !important; height: 44px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin-right: 0 !important; } .wishlist_btn i, .wishlist_btn i.fa { font-family: "FontAwesome" !important; font-size: 18px !important; line-height: 1 !important; display: block !important; color: #999999 !important; } } @media (max-width: 767px) { .btn-cart, button.btn-cart, .color_scheme .product_listing__main .btn-cart, .color_scheme .product_listing__main .btn_options, .color_scheme .section_products-column .item_collection .btn-cart, .color_scheme .section_template__collection .product_listing__main .btn-cart { font-size: 0 !important; width: 44px !important; height: 44px !important; line-height: 1 !important; margin-right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .btn-cart i, .btn-cart i.fa, .color_scheme .product_listing__main .btn-cart i { font-family: "FontAwesome" !important; font-size: 17px !important; line-height: 1 !important; display: block !important; color: #ffffff !important; } .wishlist_btn, .color_scheme .product_listing__main .wishlist_btn, .color_scheme .section_template__collection .product_listing__main .wishlist_btn { font-size: 0 !important; width: 44px !important; height: 44px !important; line-height: 1 !important; margin-right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .wishlist_btn i, .wishlist_btn i.fa { font-family: "FontAwesome" !important; font-size: 17px !important; line-height: 1 !important; display: block !important; color: #999999 !important; } } @media (max-width: 479px) { .btn-cart, button.btn-cart, .color_scheme .product_listing__main .btn-cart, .color_scheme .product_listing__main .btn_options { font-size: 0 !important; width: 40px !important; height: 40px !important; line-height: 1 !important; margin-right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .btn-cart i, .btn-cart i.fa { font-family: "FontAwesome" !important; font-size: 16px !important; line-height: 1 !important; display: block !important; color: #ffffff !important; } .wishlist_btn, .color_scheme .product_listing__main .wishlist_btn { font-size: 0 !important; width: 40px !important; height: 40px !important; line-height: 1 !important; margin-right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .wishlist_btn i, .wishlist_btn i.fa { font-family: "FontAwesome" !important; font-size: 16px !important; line-height: 1 !important; display: block !important; color: #999999 !important; } } /* ===== 3. FANALI/SPECCHIETTI: SIDE-BY-SIDE FULL-IMAGE CARDS WITH SHADOW ===== Two columns side by side, each is a full-image background card Title text overlaid at bottom-left of each image Subtle shadow for depth and layer effect */ /* Override the left-right layout we added before - restore original grid */ .section_banners_custom .row { display: flex !important; flex-wrap: wrap !important; gap: 0 !important; margin: 0 -10px !important; } .section_banners_custom .col-sm-6 { padding: 0 10px !important; margin-bottom: 20px !important; } /* Banner card: full image background with overlay */ .section_banners_custom .banner_item { border-radius: 10px !important; overflow: hidden !important; position: relative !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08) !important; transition: box-shadow 0.3s ease, transform 0.3s ease !important; cursor: pointer !important; } .section_banners_custom .banner_item:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.10) !important; transform: translateY(-2px) !important; } /* Image background fills the card */ .section_banners_custom .img_placeholder__wrap { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; transition: transform 0.4s ease !important; } .section_banners_custom .banner_item:hover .img_placeholder__wrap { transform: scale(1.04) !important; } /* Caption overlay: positioned at bottom-left */ .section_banners_custom .banner_caption { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 60px 24px 24px 24px !important; background: linear-gradient(to top, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.30) 60%, transparent 100%) !important; text-align: left !important; } /* Title in caption */ .section_banners_custom .banner_caption .caption_text h3 { font-size: 26px !important; font-weight: 800 !important; color: #ffffff !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-shadow: 1px 2px 6px rgba(0,0,0,0.5) !important; margin: 0 0 12px 0 !important; line-height: 1.1 !important; } /* Button in caption */ .section_banners_custom .banner_caption .btn.banner_btn { display: inline-block !important; background-color: #e8611a !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; padding: 10px 22px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-decoration: none !important; transition: background 0.2s !important; } .section_banners_custom .banner_caption .btn.banner_btn:hover { background-color: #c94f0f !important; } /* Mobile: stack vertically */ @media (max-width: 767px) { .section_banners_custom .row { flex-direction: column !important; margin: 0 !important; } .section_banners_custom .col-sm-6 { padding: 0 !important; margin-bottom: 16px !important; width: 100% !important; } .section_banners_custom .banner_caption .caption_text h3 { font-size: 22px !important; } } /* ===== BANNER BUTTON FIX: Hide orange btn to match design, fix overflow ===== The design shows only title text overlaid on image, no button Remove overflow:hidden so caption is not clipped */ .section_banners_custom .banner_item { overflow: visible !important; } /* Keep the image contained within the card */ .section_banners_custom .img_placeholder__wrap { overflow: hidden !important; border-radius: 10px !important; } /* Hide the orange FANALI/SPECCHIETTI button - not in the design */ .section_banners_custom .banner_caption .btn.banner_btn { display: none !important; } /* Fix the caption to not overflow */ .section_banners_custom .banner_caption { overflow: hidden !important; border-radius: 0 0 10px 10px !important; } /* Remove any horizontal dividers/lines between cards */ .section_banners_custom .col-sm-6 { border: none !important; outline: none !important; } .section_banners_custom .col-sm-6::after, .section_banners_custom .col-sm-6::before { display: none !important; } /* Fix horizontal line between the two cards on mobile */ .section_banners_custom .row::after, .section_banners_custom .row::before { display: none !important; } /* ===== FA5 ICON FIX: Use Font Awesome 5 classes for icons ===== Override btn-cart and wishlist_btn icons to use FA5 */ .btn-cart i, .btn-cart i.fa, .btn-cart i.fa-shopping-cart, .wishlist_btn i, .wishlist_btn i.fa, .wishlist_btn i.fa-heart { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-style: normal !important; display: inline-block !important; font-size: 16px !important; line-height: 1 !important; -webkit-font-smoothing: antialiased !important; } /* Shopping cart icon - FA5 solid */ .btn-cart i.fa-shopping-cart::before, .btn-cart i.fa::before { content: "\f07a" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; } /* Heart icon - FA5 regular (outline) */ .wishlist_btn i.fa-heart::before, .wishlist_btn i.fa::before { content: "\f004" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; } /* Ensure btn-cart icon color is white */ .btn-cart i::before { color: #ffffff !important; } /* Ensure wishlist icon color is grey */ .wishlist_btn i::before { color: #999999 !important; } @media (max-width: 767px) { .btn-cart i, .btn-cart i.fa, .wishlist_btn i, .wishlist_btn i.fa { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-size: 16px !important; line-height: 1 !important; } .btn-cart i.fa-shopping-cart::before, .btn-cart i.fa::before { content: "\f07a" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; color: #ffffff !important; } .wishlist_btn i.fa-heart::before, .wishlist_btn i.fa::before { content: "\f004" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; color: #999999 !important; } } @media (max-width: 479px) { .btn-cart i, .btn-cart i.fa, .wishlist_btn i, .wishlist_btn i.fa { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-size: 16px !important; } .btn-cart i.fa-shopping-cart::before, .btn-cart i.fa::before { content: "\f07a" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; color: #ffffff !important; } .wishlist_btn i.fa-heart::before, .wishlist_btn i.fa::before { content: "\f004" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; color: #999999 !important; } } /* ===== FOOTER ACCORDION ICON FIX ===== Replace Font Awesome 4 chevron-down with pure CSS arrow (no font dependency) Fixes iOS Safari display issue (shows as bars/squares/tofu) */ .color_scheme .linklist_menu_title::after, .linklist_menu_title::after { font-family: Arial, sans-serif !important; font: normal normal normal 20px/1 Arial, sans-serif !important; content: "\25BE" !important; color: #ffffff !important; position: absolute !important; right: 20px !important; top: 50% !important; margin-top: -10px !important; cursor: pointer !important; display: none !important; backface-visibility: hidden !important; transform: translateZ(0) !important; transition: transform 0.3s ease-in-out !important; } .color_scheme .linklist_menu_title.open::after, .linklist_menu_title.open::after { transform: rotate(180deg) !important; } @media (max-width: 991px) { .color_scheme .linklist_menu_title::after, .linklist_menu_title::after { display: block !important; font-family: Arial, sans-serif !important; font: normal normal normal 20px/1 Arial, sans-serif !important; content: "\25BE" !important; color: #ffffff !important; } } @media (max-width: 767px) { .color_scheme .linklist_menu_title::after, .linklist_menu_title::after { display: block !important; font-family: Arial, sans-serif !important; font: normal normal normal 20px/1 Arial, sans-serif !important; content: "\25BE" !important; color: #ffffff !important; } } @media (max-width: 479px) { .color_scheme .linklist_menu_title::after, .linklist_menu_title::after { display: block !important; font-family: Arial, sans-serif !important; font: normal normal normal 20px/1 Arial, sans-serif !important; content: "\25BE" !important; color: #ffffff !important; } } /* ===== GLOBAL FA4 → FA5 ICON FIX ===== Force all Font Awesome icons to use FA5 (better iOS Safari support) Covers all icons site-wide */ /* Base rule: all with fa classes use FA5 */ i.fa, i[class*=" fa-"], i[class^="fa-"] { font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", FontAwesome !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; line-height: 1 !important; } /* Brand icons need FA5 Brands font */ i.fa-cc-amex, i.fa-cc-mastercard, i.fa-cc-paypal, i.fa-cc-visa, i.fa-google-wallet, i.fa-facebook, i.fa-facebook-f, i.fa-twitter, i.fa-instagram, i.fa-youtube, i.fa-whatsapp, i.fa-linkedin, i.fa-pinterest { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; } /* Solid icons need FA5 Free with weight 900 */ i.fa-shopping-cart, i.fa-lock, i.fa-search, i.fa-bars, i.fa-times, i.fa-angle-left, i.fa-angle-right, i.fa-chevron-down, i.fa-chevron-up, i.fa-chevron-left, i.fa-chevron-right, i.fa-check, i.fa-truck, i.fa-sync, i.fa-refresh, i.fa-thumbs-up, i.fa-phone, i.fa-map-marker, i.fa-envelope, i.fa-user, i.fa-cog, i.fa-star, i.fa-dollar, i.fa-usd { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; } /* Regular icons (outline) */ i.fa-heart, i.fa-star-o, i.fa-heart-o, i.fa-envelope-o { font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; } /* Specific ::before content overrides for common icons */ i.fa-shopping-cart::before { content: "\f07a" !important; } i.fa-heart::before { content: "\f004" !important; } i.fa-lock::before { content: "\f023" !important; } i.fa-search::before { content: "\f002" !important; } i.fa-bars::before { content: "\f0c9" !important; } i.fa-times::before { content: "\f00d" !important; } i.fa-angle-left::before { content: "\f104" !important; } i.fa-angle-right::before { content: "\f105" !important; } i.fa-chevron-down::before { content: "\f078" !important; } i.fa-chevron-up::before { content: "\f077" !important; } i.fa-chevron-left::before { content: "\f053" !important; } i.fa-chevron-right::before { content: "\f054" !important; } i.fa-check::before { content: "\f00c" !important; } i.fa-truck::before { content: "\f0d1" !important; } i.fa-thumbs-up::before { content: "\f164" !important; } i.fa-phone::before { content: "\f095" !important; } i.fa-envelope::before { content: "\f0e0" !important; } i.fa-user::before { content: "\f007" !important; } i.fa-star::before { content: "\f005" !important; } i.fa-whatsapp::before { content: "\f232" !important; } i.fa-facebook::before, i.fa-facebook-f::before { content: "\f39e" !important; } i.fa-twitter::before { content: "\f099" !important; } i.fa-instagram::before { content: "\f16d" !important; } i.fa-youtube::before { content: "\f167" !important; } i.fa-cc-visa::before { content: "\f1f0" !important; } i.fa-cc-mastercard::before { content: "\f1f1" !important; } i.fa-cc-paypal::before { content: "\f1f4" !important; } i.fa-cc-amex::before { content: "\f1f3" !important; } i.fa-sync::before, i.fa-refresh::before { content: "\f021" !important; } /* ============================================================ MANUS: Brand Navigation Bar ============================================================ */ .manus-brand-nav { background: #1a1a1a; border-bottom: 2px solid #FF7828; width: 100%; overflow: hidden; position: relative; z-index: 100; } .manus-brand-nav__inner { display: flex; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 16px; } .manus-brand-nav__label { color: #FF7828; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; padding-right: 12px; border-right: 1px solid #333; margin-right: 12px; flex-shrink: 0; } .manus-brand-nav__scroll { display: flex; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 2px; padding: 8px 0; } .manus-brand-nav__scroll::-webkit-scrollbar { display: none; } .manus-brand-nav__item { color: #ccc; text-decoration: none; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 5px 10px; border-radius: 3px; transition: all 0.2s ease; flex-shrink: 0; } .manus-brand-nav__item:hover { color: #fff; background: #333; text-decoration: none; } .manus-brand-nav__item--luxury { color: #FFD700; font-weight: 600; } .manus-brand-nav__item--luxury:hover { color: #fff; background: #FF7828; } .manus-brand-nav__item--all { color: #FF7828; font-weight: 700; border: 1px solid #FF7828; margin-left: 4px; } .manus-brand-nav__item--all:hover { background: #FF7828; color: #fff; } .manus-brand-nav__divider { color: #444; padding: 0 4px; flex-shrink: 0; font-size: 14px; } /* Mobile: hide label on small screens */ @media (max-width: 640px) { .manus-brand-nav__label { display: none; } .manus-brand-nav__item { font-size: 11px; padding: 4px 8px; } } /* ============================================================ MANUS: WhatsApp Floating Button ============================================================ */ 50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.75); } } /* Mobile: compact version */ @media (max-width: 640px) { } /* ============================================================ MANUS: Brand Nav Scroll Hint ============================================================ */ /* 右侧渐变遮罩提示可滑动 */ .manus-brand-nav { position: relative; } .manus-brand-nav::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 70px; background: linear-gradient(to right, transparent, #1a1a1a 90%); pointer-events: none; z-index: 2; transition: opacity 0.3s; } /* 右侧橙色箭头 */ .manus-brand-nav::before { content: '›'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #FF7828; font-size: 24px; font-weight: 900; line-height: 1; z-index: 3; pointer-events: none; animation: manus-nav-arrow 1.2s ease-in-out infinite; } @keyframes manus-nav-arrow { 0%, 100% { right: 10px; opacity: 1; } 50% { right: 6px; opacity: 0.7; } } .manus-brand-nav.at-end::after, .manus-brand-nav.at-end::before { opacity: 0; }