:root{--font-family-body: "Merriweather Sans", "Helvetica", "Arial", "sans-serif";--font-family-label: "Merriweather Sans", "Helvetica", "Arial", "sans-serif";--font-family-semi: "Merriweather Sans", "Helvetica", "Arial", "sans-serif";--font-family-title: "Merriweather Sans", "Helvetica", "Arial", "sans-serif";--color-a-hover: #333;--color-primary: #333;--color-secondary: #333;--bg-color-btn: #333;--bg-color-btn-hover: #333;--color-btn: #333333;--color-btn-hover: #333333;--color-price: #151900;--bg-color-label-new: #151900;--bg-color-label-sale: #dc4200;--ax-form-bi-width: 1px;--ax-form-btn-width: 1px;}@media (max-width: 767px){#box-product-grid .archive-wrapper-items{margin-left: calc(-10px/2);margin-right: calc(-10px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(10px/2);padding-right: calc(10px/2);margin-bottom: 10px;}}@media (min-width: 768px) and (max-width: 1024px){#box-product-grid .archive-wrapper-items{margin-left: calc(-20px/2);margin-right: calc(-20px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(20px/2);padding-right: calc(20px/2);margin-bottom: 20px;}}@media (min-width: 1025px) and (max-width: 1199px){#box-product-grid .archive-wrapper-items{margin-left: calc(-30px/2);margin-right: calc(-30px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(30px/2);padding-right: calc(30px/2);margin-bottom: 30px;}}@media (min-width: 1200px){#box-product-grid .archive-wrapper-items{margin-left: calc(-30px/2);margin-right: calc(-30px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(30px/2);padding-right: calc(30px/2);margin-bottom: 30px;}}@media (max-width: 767px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/2); flex: 0 0 calc(100%/2); max-width: calc(100%/2);}}@media (min-width: 768px) and (max-width: 1024px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/2); flex: 0 0 calc(100%/2); max-width: calc(100%/2);}}@media (min-width: 1025px) and (max-width: 1199px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/3); flex: 0 0 calc(100%/3); max-width: calc(100%/3);}}@media (min-width: 1200px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/4); flex: 0 0 calc(100%/4); max-width: calc(100%/4);}}@media (max-width: 1024px){html{font-size: 62.5%;}}@media (min-width: 1025px){html{font-size: 62.5%;}}@media (min-width: 1025px){.container{max-width:1750px;}}@charset "utf-8"; /* 0) Rodzice miniatury – bez dodatkowych teł/cieni */ .js-product-miniature .thumbnail-container, .js-product-miniature .thumbnail.product-thumbnail{ background:transparent !important; box-shadow:none !important; } /* 1) „Ściana” jako tło KONTENERA, nie mniejsze od obrazu */ .js-product-miniature .wrapper-imgs{ background:#f3f4f6; /* kolor ściany */ border-radius:6px; aspect-ratio:1 / 1; /* równy kafelek */ position:relative; overflow:hidden; /* optyczny margines (większy dół) bez dotykania obrazków */ --pad-top:12px; --pad-side:14px; --pad-bottom:22px; /* nie używamy paddingu, żeby nie wpływać na układ motywu */ } /* 2) Margines optyczny realizujemy ograniczeniem rozmiaru, ale możliwie neutralnie – tylko gdy obraz jest bezpośrednim dzieckiem */ .js-product-miniature .wrapper-imgs > picture > img, .js-product-miniature .wrapper-imgs > img{ max-width:calc(100% - 2*var(--pad-side)) !important; max-height:calc(100% - var(--pad-top) - var(--pad-bottom)) !important; width:auto !important; height:auto !important; object-fit:contain; display:block; background:transparent !important; transform:none !important; /* nie pozwól niczemu go przesuwać */ } /* 3) BEZPIECZNIK widoczności – okładka ma być widoczna */ .js-product-miniature .wrapper-imgs > picture:first-of-type, .js-product-miniature .wrapper-imgs > img:first-of-type{ opacity:1 !important; visibility:visible !important; } /* 4) Przyciski / quick view na wierzchu i klikalne */ .js-product-miniature .element-top{ position:relative; } .js-product-miniature .wrapper-buttons-action, .js-product-miniature .highlighted-informations, .js-product-miniature .axps-buttons-tootip-top, .js-product-miniature .quick-view{ position:absolute; z-index:30; /* ponad obrazkami */ pointer-events:auto; } /* 5) Mobile – ciut ciaśniej, większy obraz */ @media (max-width:576px){ .js-product-miniature .wrapper-imgs{ --pad-top:8px; --pad-side:10px; --pad-bottom:16px; } } /* === GLOBAL: ustaw z powrotem warstwy i pozycje przycisków na wszystkich listach === */ .js-product-miniature .element-top{ position:relative; } /* przyciski dolne – domyślnie na środku u dołu */ .js-product-miniature .wrapper-buttons-action, .js-product-miniature .axps-buttons-tootip-top, .js-product-miniature .highlighted-informations{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:8px; z-index:40; pointer-events:auto; } /* szybki podgląd (lupka) – w prawym górnym rogu */ .js-product-miniature .quick-view{ position:absolute; top:0px; right:0px; left:auto; bottom:auto; transform:none; z-index:40; pointer-events:auto; } /* desktop: pokaż przyciski na hover (jak wcześniej) */ @media (hover:hover){ .js-product-miniature .wrapper-buttons-action, .js-product-miniature .axps-buttons-tootip-top, .js-product-miniature .highlighted-informations, .js-product-miniature .quick-view{ opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s linear, transform .2s ease; } .js-product-miniature:hover .wrapper-buttons-action, .js-product-miniature:hover .axps-buttons-tootip-top, .js-product-miniature:hover .highlighted-informations, .js-product-miniature:hover .quick-view{ opacity:1; visibility:visible; } } /* mobile: brak hovera → pokaż zawsze */ @media (max-width:767.98px){ .js-product-miniature .wrapper-buttons-action, .js-product-miniature .axps-buttons-tootip-top, .js-product-miniature .highlighted-informations, .js-product-miniature .quick-view{ opacity:1; visibility:visible; } } /* === 1) Obraz "wisi" nad ścianą – cień liczony od krawędzi samego IMG === */ .js-product-miniature .wrapper-imgs { overflow: visible; /* cień ma prawo wyjść poza kafelek */ background: #f3f4f6; /* ściana */ position: relative; } /* IMG – bez transformów, z marginesem optycznym jak masz wcześniej */ .js-product-miniature .wrapper-imgs > picture > img, .js-product-miniature .wrapper-imgs > img{ background: #fff; /* „płótno/ramka” */ border-radius: 3px; /* naturalny cień jak z lampy z góry-lewej */ filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)) drop-shadow(0 3px 4px rgba(0,0,0,.10)); /* ważne: zerujemy wszelkie efekty motywu */ box-shadow: none !important; transform: none !important; } /* === 2) Cień kontaktowy pod obrazem (subtelna elipsa przy dolnej krawędzi) === */ .js-product-miniature .wrapper-imgs::before{ content:""; position:absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--pad-bottom,16px) - 4px); width: calc(100% - 2*var(--pad-side,10px)); /* dopasowanie do maxi-szerokości obrazu */ max-width: 92%; height: 18px; border-radius: 999px; background: radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.14) 35%, rgba(0,0,0,0) 100%); opacity: .65; pointer-events:none; z-index: 0; /* pod obrazem */ } /* obraz zawsze nad pseudo-elementem */ .js-product-miniature .wrapper-imgs > * { position: relative; z-index: 1; } /* mobile: trochę mniejszy „kontakt” */ @media (max-width:576px){ .js-product-miniature .wrapper-imgs::before{ height: 14px; opacity:.6; } } /* WYŁĄCZ mój wcześniejszy cień kontaktowy */ .js-product-miniature .wrapper-imgs::before{ content: none !important; } /* Naturalny cień „wiszącego” obrazu – bez poświaty */ .js-product-miniature .wrapper-imgs > picture > img, .js-product-miniature .wrapper-imgs > img{ background:#fff; border-radius:3px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.20)) drop-shadow(0 4px 6px rgba(0,0,0,.12)); box-shadow:none !important; transform:none !important; } /* Kontener pozwala wyjść cieniowi poza kafelek */ .js-product-miniature .wrapper-imgs{ overflow:visible; } /* TYLKO strona produktu: obraz ma się mieścić w polu (bez przycinania) */ .page-product .product-images-cover .p-ax-img-loader img { object-fit: contain !important; background: transparent !important; filter: drop-shadow(0 12px 16px rgba(0,0,0,.20)) drop-shadow(0 4px 6px rgba(0,0,0,.12)); max-width: calc(100% - 140px) !important; max-height: calc(100% -140px) !important; box-shadow: none !important; transform: none !important; } .easyzoom-product { background: #F5F6F8 !important; z-index: 0 !important; } /*ukrywanie zdjecia 1 po najechaniu myszka*/ /* — tylko dla listy produktów — */ .js-product-miniature .wrapper-imgs.has-second-img{ position: relative; /* układ warstw */ overflow: hidden; } /* Ułóż oba obrazy w tej samej pozycji (jeden nad drugim) */ .js-product-miniature .wrapper-imgs.has-second-img > picture, .js-product-miniature .wrapper-imgs.has-second-img > img{ position: absolute !important; inset: 0 !important; /* top/right/bottom/left: 0 */ margin: auto; transition: opacity .25s ease, visibility .25s linear; } /* Domyślnie: widać TYLKO pierwsze zdjęcie */ .js-product-miniature .wrapper-imgs.has-second-img > :nth-of-type(1){ opacity: 1 !important; visibility: visible !important; z-index: 1; } .js-product-miniature .wrapper-imgs.has-second-img > :nth-of-type(2){ opacity: 0 !important; visibility: hidden !important; z-index: 2; } /* Na hover kafelka: ukryj #1 i pokaż #2 (ma zostać tylko drugie) */ @media (hover:hover){ .js-product-miniature:hover .wrapper-imgs.has-second-img > :nth-of-type(1){ opacity: 0 !important; visibility: hidden !important; } .js-product-miniature:hover .wrapper-imgs.has-second-img > :nth-of-type(2){ opacity: 1 !important; visibility: visible !important; } } /* (opcjonalnie) jeśli jest więcej niż 2 obrazki, ukryj >2 na liście */ .js-product-miniature .wrapper-imgs.has-second-img > :nth-of-type(n+3){ display: none !important; } /* --- Efekt fade + lekkie powiększenie drugiego zdjęcia --- */ /* Dodaj płynne przejście opacity i transformacji */ .js-product-miniature .wrapper-imgs.has-second-img > picture, .js-product-miniature .wrapper-imgs.has-second-img > img { position: absolute !important; inset: 0 !important; margin: auto; transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.6s ease; transform: scale(1); backface-visibility: hidden; /* płynniejsze renderowanie */ } /* Hover — pierwsze zdjęcie znika */ @media (hover:hover){ .js-product-miniature:hover .wrapper-imgs.has-second-img > :nth-of-type(1){ opacity: 0 !important; visibility: hidden !important; transform: scale(1); } } .pswp__item, .pswp__zoom-wrap { background: transparent !important; }