/* ================================================ 0. UKRYCIE DŁUGIEGO TEKSTU NA STRONIE GŁÓWNEJ ================================================ */ body.main_page .seoText, body.main_page .page-description, body.main_page .customText, body.main_page .cmsText { display: none !important; } /* ====================================================================== 1. BIAŁE TŁO POD ZDJĘCIAMI – ROZWIĄZANIE #3 (DARK MODE FIX) ====================================================================== */ .product_box__image, .product__image, .product__image-wrapper, .product_item__image, .product_tile__image, .product_box__image-wrapper { background: #ffffff !important; /* ⭐ Jasne tło pod zdjęciem ⭐ */ background-color: #ffffff !important; /* = zdjęcie widoczne na czarnym motywie */ background-image: none !important; box-shadow: none !important; filter: none !important; mix-blend-mode: normal !important; background-blend-mode: normal !important; isolation: isolate !important; } /* Jeśli IdoSell dokłada pseudo-elementy */ .product_box__image::before, .product_box__image::after, .product__image::before, .product__image::after, .product_tile__image::before, .product_tile__image::after { content: none !important; display: none !important; background: transparent !important; background-image: none !important; } /* Zdjęcia – bez filtrów, bez mieszania */ .product_box__image img, .product__image img, .product_item__image img, .product_tile__image img, .product__image picture, .product_box__image picture, .product__image source { background: transparent !important; background-image: none !important; filter: none !important; mix-blend-mode: normal !important; background-blend-mode: normal !important; image-rendering: auto !important; isolation: isolate !important; } /* Lazyload placeholder */ .lazyload, .lazyloading, .lazyloaded, [class*="placeholder"], .lazyload::before, .lazyload::after { background: #ffffff !important; /* białe tło także w czasie ładowania */ background-image: none !important; box-shadow: none !important; filter: none !important; } /* ====================================================================== 2. KAFELKI PRODUKTÓW – WYGLĄD ====================================================================== */ .product_box, .product_item, .product, .product_tile { background: #ffffff !important; border-radius: 16px !important; border: 1px solid transparent !important; overflow: visible !important; padding-bottom: 28px !important; box-shadow: none !important; transform: scale(1) !important; transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out !important; } .product_box:hover, .product_item:hover, .product:hover, .product_tile:hover { transform: scale(1.03) !important; box-shadow: 0 12px 26px rgba(0,0,0,0.18) !important; } /* ====================================================================== 3. CENA – WYŚRODKOWANIE I ODSUNIĘCIE ====================================================================== */ .product__price { width: 100% !important; text-align: center !important; margin: 16px 0 12px 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .product__price .price, .product__price .price_value, .product__price small, .product__price .unit { display: block !important; width: 100% !important; margin-bottom: 6px !important; text-align: center !important; } .product__footer, .product_box__footer, .product_item__footer { padding-bottom: 30px !important; margin-top: 6px !important; } /* ===================================================================== ŁADNE PRZYCISKI DLA HEADER — DZIAŁAJĄCE DLA KENOCHEM.COM ===================================================================== */ /* Kontener logowania i list zakupowych */ .header-nav__login, .header-nav__lists { display: inline-flex !important; align-items: center !important; } /* Styl przycisków */ .header-nav__login a, .header-nav__lists a, .header-nav__lists__toggle { background: #ffffff !important; border: 1px solid #dcdcdc !important; padding: 8px 16px !important; border-radius: 22px !important; font-weight: 600 !important; color: #333 !important; text-decoration: none !important; transition: 0.25s ease-in-out !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important; } /* Ikony koszyka / logowania */ .header-nav__login a i, .header-nav__lists a i, .header-nav__lists__toggle i { font-size: 16px !important; opacity: 0.8 !important; } /* Hover efekt */ .header-nav__login a:hover, .header-nav__lists a:hover, .header-nav__lists__toggle:hover { background: #69c56f !important; border-color: #69c56f !important; color: #fff !important; box-shadow: 0 4px 12px rgba(105,197,111,0.35) !important; } /* Kliknięcie – małe przybliżenie */ .header-nav__login a:active, .header-nav__lists a:active, .header-nav__lists__toggle:active { transform: scale(0.96) !important; } /* ============================================================ BLACK WEEK — CZARNY PROSTOKĄT Z OGNIEM — wersja 50% mniejsza ============================================================ */ .product::before, .product_box::before, .product_item::before, .product_tile::before { content: "BLACK WEEK"; position: absolute; /* Pozycjonowanie w rogu po zmniejszeniu */ top: 12px; /* było 12px → /2 */ left: 12px; /* było 12px → /2 */ padding: 6px 14px; /* zmniejszone o 50% */ font-size: 13px; /* było 13px → /2 */ font-weight: 800; text-transform: uppercase; letter-spacing: 1px; /* CZARNY prostokąt */ background: #000 !important; color: #fff !important; border-radius: 5px; /* też zmniejszone */ /* 🔥 OGNISTY GLOW — skalujemy przez transform */ transform: scale(0.5); transform-origin: top left; box-shadow: 0 0 5px rgba(255, 80, 0, 0.8), 0 0 10px rgba(255, 120, 0, 0.6), 0 0 18px rgba(255, 160, 0, 0.4), 0 0 25px rgba(255, 200, 0, 0.25); z-index: 60; } /* kotwica badge */ .product, .product_box, .product_item, .product_tile { position: relative !important; } /* ============================================================= FIRE GLOW – PODSTAWOWY OGNISTY CIEŃ NA HOVER ============================================================= */ .product:hover, .product_box:hover, .product_item:hover, .product_tile:hover { transform: scale(1.03) !important; border-color: rgba(255, 110, 0, 0.6) !important; box-shadow: 0 0 8px rgba(255, 80, 0, 0.6), 0 0 16px rgba(255, 120, 0, 0.5), 0 0 28px rgba(255, 160, 0, 0.3), 0 0 40px rgba(255, 200, 0, 0.25) !important; animation: firePulse 0.9s infinite ease-in-out !important; } /* ============================================================= FIRE PULSE ANIMATION – ANIMOWANE PŁOMIENNE MIGOTANIE ============================================================= */ @keyframes firePulse { 0% { box-shadow: 0 0 8px rgba(255, 80, 0, 0.6), 0 0 16px rgba(255, 120, 0, 0.5), 0 0 28px rgba(255, 160, 0, 0.3), 0 0 40px rgba(255, 200, 0, 0.25); } 50% { box-shadow: 0 0 14px rgba(255, 80, 0, 0.9), 0 0 30px rgba(255, 120, 0, 0.7), 0 0 45px rgba(255, 160, 0, 0.5), 0 0 60px rgba(255, 200, 0, 0.35); } 100% { box-shadow: 0 0 8px rgba(255, 80, 0, 0.6), 0 0 16px rgba(255, 120, 0, 0.5), 0 0 28px rgba(255, 160, 0, 0.3), 0 0 40px rgba(255, 200, 0, 0.25); } }