================================================= */
@media (max-width: 768px) {
/* ===============================
🔒 OGRANICZENIE ZAKRESU
=============================== */
section#products {
padding: 0 !important;
margin: 0 !important;
}
section#products .product-miniature {
margin: 0 !important;
padding: 10px 8px !important; /* tylko lekki oddech */
}
section#products .product-description {
margin: 0 !important;
padding: 0 !important;
}
/* ===============================
🟢 TYTUŁ – WIĘKSZY + ZERO MARGINESÓW
=============================== */
section#products h3.product-title-custom,
section#products h3.product-title-custom a,
section#products .product-title-text {
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ===============================
🧹 OEM – ZERO ODSTĘPÓW
=============================== */
section#products .product-oem {
margin: 2px 5px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.25 !important;
}
/* ===============================
🧹 MODEL POJAZDU – ZERO ODSTĘPÓW
=============================== */
section#products .product-vehicle {
margin: 2px 0 5px 0 !important;
padding: 0 !important;
font-size: 16px !important;
line-height: 1.25 !important;
}
/* ===============================
🧨 HARD RESET – WSZYSTKIE
(bootstrap dodaje marginesy)
=============================== */
section#products p {
margin: 0 !important;
padding: 0 !important;
}
/* ===============================
🧨 HARD RESET – WSZYSTKIE
=============================== */
section#products h1,
section#products h2,
section#products h3,
section#products h4,
section#products h5 {
margin: 0 !important;
padding: 0 !important;
}
/* ===============================
🧹 OPIS / PARAMETRY – CIAŚNIEJ
=============================== */
section#products .product-params-line,
section#products .product-desc {
margin-top: 4px !important;
padding: 0 !important;
line-height: 1.3 !important;
}
}
@media (max-width: 768px) {
/* ❌ PRESTA – DODAJ DO ULUBIONYCH */
section#products .wishlist-button-add {
display: none !important;
}
}
/* =================================================
📱 LISTING MOBILE – IKONY TUŻ POD ZDJĘCIEM
================================================= */
@media (max-width: 768px) {
/* ❌ CTA */
section#products .add-to-cart,
section#products .buy-now-btn,
section#products .button-container,
section#products .listing-cart-buttons,
section#products .qty_container {
display: none !important;
}
}
/* =====================================================
📱 MOBILE – SHARE + WISHLIST W PRAWYM GÓRNYM ROGU
(LISTING PRODUKTÓW)
===================================================== */
/* =====================================================
📱 MOBILE – SHARE + WISHLIST W ROGU
(TYLKO POZYCJA, BEZ ZMIAN STYLU)
===================================================== */
@media (max-width: 767px) {
/* kotwica boxa produktu */
body:not(#product) article.product-miniature {
position: relative !important;
}
/* przenosimy CAŁY BLOK IKON */
body:not(#product) article.product-miniature .listing-price-actions {
position: absolute !important;
top: 8px !important;
right: 8px !important;
z-index: 999 !important;
display: flex !important;
gap: 6px !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* upewnienie się, że przyciski zachowują oryginał */
body:not(#product) article.product-miniature .listing-action-btn {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 4px !important; /* tylko klik area, NIE wygląd */
}
/* miejsce na ikony – nic się nie nachodzi */
body:not(#product) article.product-miniature .product-title {
margin-top: 20px !important;
margin-bottom: -20px !important;
}
/* ==============================
OEM – POWIĘKSZENIE TEKSTU
============================== */
/* =========================================
LISTING – POWIĘKSZENIE OEM (DEFINITYWNE)
========================================= */
/* =========================================
LISTING – POWIĘKSZENIE NUMERU OEM
========================================= */
article.product-miniature p.product-oem {
font-size: 16px !important; /* powiększa numer */
line-height: 1.4 !important;
}
/* etykieta zostaje mniejsza */
article.product-miniature p.product-oem strong {
font-size: 14px !important;
}
}
/* =================================================
📱 LISTING MOBILE – KOREKTA SPACINGU TEKSTÓW
================================================= */
@media (max-width: 768px) {
/* ==================================
🧱 1. TYTUŁ – ODSUNIĘCIE OD OEM
================================== */
section#products h3.product-title-custom {
margin-bottom: 6px !important; /* ⬅️ kluczowe */
}
/* ==================================
🔢 2. OEM – ODDECH OD MODELU
================================== */
section#products p.product-oem {
margin-bottom: 6px !important;
}
/* ==================================
🚗 3. MODEL POJAZDU – DOLNY MARGINES
================================== */
section#products p.product-vehicle {
margin-bottom: 8px !important; /* ⬅️ odstęp do parametrów */
}
/* ==================================
🧩 4. PARAMETRY – GÓRA I DÓŁ
================================== */
section#products .product-params-line {
margin-top: 4px !important;
margin-bottom: 6px !important; /* ⬅️ mały odstęp pod parametrami */
}
/* ==================================
📝 5. OPIS – LEKKI ODDECH
================================== */
section#products .product-desc {
margin-top: 4px !important;
}
}
/* =================================================
📱 LISTING MOBILE – STABILNY UKŁAD TEKSTU
================================================= */
@media (max-width: 768px) {
/* =========================================
🟢 TYTUŁ – ZAWSZE BEZPIECZNY ODSTĘP
========================================= */
section#products h3.product-title-custom {
margin-bottom: 8px !important; /* ⬅️ KLUCZ */
}
/* USUWAMY WSZYSTKIE UJEMNE MARGINESY */
section#products .product-title {
margin-top: 0 !important;
margin-bottom: 8px !important;
}
/* =========================================
🔢 OEM = MODEL (TA SAMA CZCIONKA)
========================================= */
section#products p.product-oem,
section#products p.product-oem strong {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.25 !important;
}
/* =========================================
🚗 MODEL POJAZDU
========================================= */
section#products p.product-vehicle {
font-size: 16px !important;
line-height: 1.25 !important;
margin-bottom: 8px !important;
}
/* =========================================
🧩 PARAMETRY – ODDECH OD MODELU I OPISU
========================================= */
section#products .product-params-line {
margin-top: 4px !important;
margin-bottom: 6px !important;
}
section#products p.product-oem strong {
font-weight: 700 !important; /* ⬅️ tylko etykieta bold */
}
}
@media (max-width: 768px) {
section#products .product-title-text {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
}
}
/* =====================================================
📱 MOBILE – LISTING JEDNA KOLUMNA (FINAL v2)
zakres: TYLKO section#products
===================================================== */
@media (max-width: 768px) {
/* =================================================
🧱 KARTA
================================================= */
section#products article.product-miniature {
display: flex !important;
flex-direction: column !important;
padding: 10px 0 !important;
margin: 0 !important;
position: relative !important;
}
section#products .thumbnail-container,
section#products .product-left,
section#products .product-right {
width: 100% !important;
float: none !important;
display: block !important;
}
/* =================================================
🖼 ZDJĘCIE – 90% SZEROKOŚCI
================================================= */
section#products .product-image-container {
display: flex !important;
justify-content: center !important;
}
section#products .product-thumbnail,
section#products .product-thumbnail picture,
section#products .product-thumbnail img {
width: 90% !important;
max-width: 90% !important;
display: block !important;
}
section#products .product-thumbnail img {
height: auto !important;
object-fit: cover !important;
}
/* =================================================
🧾 TEKST – LEKKIE MARGINESY
================================================= */
section#products .product-description,
section#products .product-bottom {
padding: 0 5px !important; /* ⬅️ KLUCZ */
box-sizing: border-box !important;
}
section#products p,
section#products h3 {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* =================================================
🏷 TYTUŁ – WIĘKSZY, MNIEJ BOLD
================================================= */
section#products h3.product-title-custom {
margin: 8px 0 6px 0 !important;
}
section#products .product-title-text {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
font-size: 20px !important; /* ⬅️ większy */
font-weight: 700 !important; /* ⬅️ mniej pogrubiony */
line-height: 1.3 !important;
}
/* =================================================
🔢 OEM / POJAZD / PARAMETRY
================================================= */
section#products p.product-oem,
section#products p.product-vehicle {
font-size: 16px !important;
line-height: 1.25 !important;
margin-bottom: 6px !important;
}
section#products p.product-oem strong {
font-weight: 600 !important;
}
section#products .product-params-line {
margin: 4px 0 6px 0 !important;
line-height: 1.3 !important;
}
section#products .product-desc {
margin-top: 4px !important;
line-height: 1.35 !important;
}
/* =================================================
💰 CENA / INFO
================================================= */
section#products .product-price-and-shipping,
section#products .pl_prices_above_stock {
margin-top: 6px !important;
}
/* =================================================
❤️📤 SHARE + WISHLIST – DÓŁ (NAD KOSZYKIEM)
================================================= */
section#products .listing-price-actions {
margin-top: 10px !important;
padding-top: 6px !important;
display: flex !important;
justify-content: flex-end !important;
gap: 10px !important;
width: 100% !important;
border-top: 1px solid #eee !important;
}
}
/* =====================================================
📱 MOBILE – POWIĘKSZENIE CEN
zakres: TYLKO section#products
===================================================== */
@media (max-width: 768px) {
/* ===============================
💰 CENA GŁÓWNA
=============================== */
section#products span.price {
font-size: 36px !important; /* było ~16 */
font-weight: 600 !important;
line-height: 1.2 !important;
display: inline-block !important;
}
/* ===============================
🚚 CENA Z DOSTAWĄ
=============================== */
section#products .price-with-shipping-value {
font-size: 20px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
display: inline-block !important;
}
section#products .price-with-shipping-label {
font-size: 13px !important; /* etykieta mniejsza */
font-weight: 400 !important;
margin-left: 4px !important;
opacity: 0.85;
}
}
/* =====================================================
📱 MOBILE – STAN / MAGAZYN / WYSYŁKA
zakres: TYLKO section#products
===================================================== */
@media (max-width: 768px) {
/* ===============================
📦 W MAGAZYNIE – DOPISEK "szt."
=============================== */
section#products .pl_availability_stock span::after {
content: " szt." !important;
font-size: 14px;
font-weight: 400;
}
/* ===============================
🔠 POWIĘKSZENIE CZCIONEK
=============================== */
section#products .pl_availability_stock,
section#products .product-condition,
section#products .product-shipping-time {
font-size: 14px !important;
line-height: 1.3 !important;
margin-top: 4px !important;
}
/* etykiety (bold) trochę lżejsze */
section#products .pl_availability_stock strong,
section#products .product-condition strong,
section#products .product-shipping-time strong {
font-weight: 600 !important;
}
}
/* =====================================================
📱 MOBILE – ZDJĘCIE 4:3 (PROSTOKĄT)
zakres: TYLKO section#products
===================================================== */
@media (max-width: 768px) {
/* kontener obrazu wymusza proporcję */
section#products .product-thumbnail {
aspect-ratio: 4 / 3 !important;
overflow: hidden !important;
width: 90% !important; /* zostaje jak ustaliłeś */
margin: 0 auto !important; /* wyśrodkowanie */
}
/* obraz wypełnia kontener */
section#products .product-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* KLUCZ */
transform: translateY(-30px) !important;
}
/* dociągamy treść w górę */
section#products .product-image-container {
margin-bottom: -35px !important;
}
section#products .product-thumbnail {
aspect-ratio: 4 / 3 !important;
overflow: hidden !important;
width: 90% !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
section#products .product-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important; /* ⬅️ KLUCZ */
transform: translateY(-30px) !important; /* zostaje */
}
}
/* =====================================================
📱 MOBILE – IKONY NA DOLE CAŁEGO BOXA PRODUKTU
===================================================== */
@media (max-width: 768px) {
/* 1️⃣ product-bottom = prawdziwy dół karty */
section#products .product-bottom {
position: relative !important;
}
/* 2️⃣ IKONY – PRAWA STRONA, DÓŁ KARTY */
section#products .listing-price-actions {
position: absolute !important;
bottom: 6px !important;
right: 6px !important;
display: flex !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
z-index: 20 !important;
}
}
/* =====================================================
📱 MOBILE – POWIĘKSZENIE IKON (WISHLIST / SHARE)
===================================================== */
@media (max-width: 768px) {
/* przyciski */
section#products .listing-price-actions .listing-action-btn {
padding: 8px !important; /* większy click area */
}
/* same ikony (material-icons) */
section#products .listing-price-actions .listing-action-btn i {
font-size: 32px !important; /* ⬅️ było ~24 */
}
section#products .listing-price-actions {
bottom: -24px !important; /* było 6px → 6 - 20 = -14 */
}
}
@media (max-width: 768px) {
/* kontener zdjęcia – pełna szerokość */
section#products .product-image-container {
display: block !important;
width: 100% !important;
position: relative !important;
}
/* thumbnail – centrowany niezależnie od ikon */
section#products .product-thumbnail {
margin-left: auto !important;
margin-right: auto !important;
left: 50% !important;
transform: translateX(-50%) !important;
position: relative !important;
}
}
/* =====================================================
📱 MOBILE – MARGINESY LISTY PRODUKTÓW (KLUCZOWE)
===================================================== */
@media (max-width: 768px) {
/* kontener całej listy */
section#products .products {
padding-left: 4.5% !important;
padding-right: 4.5% !important;
box-sizing: border-box !important;
}
/* karta nadal pełna szerokość kontenera */
section#products article.product-miniature {
width: 100% !important;
max-width: 100% !important;
}
}
/* =========================================================
MOBILE HEADER – JEDNO LOGO (Z RWD_MENU) – FINAL
========================================================= */
@media (max-width: 767px) {
/* =================================================
1️⃣ UKRYJ WSZYSTKO DESKTOPOWE
================================================= */
header#header nav.header-nav,
#_desktop_logo,
#_desktop_cart,
#_desktop_contact_link,
#_desktop_user_info,
.top-login-link {
display: none !important;
}
/* =================================================
2️⃣ RWD MENU – JAKO JEDYNY HEADER
================================================= */
#rwd_menu {
display: block !important;
border-bottom: none !important;
}
#rwd_menu .container {
display: flex !important;
justify-content: center !important; /* 🔥 środek */
align-items: center !important;
padding: 12px 0 !important;
}
/* =================================================
3️⃣ UKRYJ WSZYSTKIE IKONY W RWD_MENU
================================================= */
#menu-icon2,
#search-icon,
#_mobile_cart,
#_mobile_user_info {
display: none !important;
}
/* =================================================
4️⃣ LOGO – JEDYNE, CENTRALNE
================================================= */
#rwd_menu .rwd_menu_item {
flex: 0 0 auto !important;
text-align: center !important;
}
#rwd_menu .rwd_menu_item img {
display: block !important;
margin: 0 auto !important;
max-height: 42px !important;
width: auto !important;
}
}
/* =========================================================
MOBILE HEADER – JEDNO LOGO (RWD_MENU) – SAFE VERSION
========================================================= */
@media (max-width: 767px) {
/* 1️⃣ Ukryj wszystko desktopowe */
header#header nav.header-nav,
#_desktop_logo,
#_desktop_cart,
#_desktop_contact_link,
#_desktop_user_info,
.top-login-link {
display: none !important;
}
/* 2️⃣ RWD menu jako jedyny header */
#rwd_menu {
display: block !important;
border-bottom: none !important;
}
#rwd_menu .container {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 14px 0 !important;
}
/* 3️⃣ Ukryj TYLKO ikony (nie wrapper!) */
#menu-icon2,
#search-icon,
#_mobile_cart,
#_mobile_user_info {
display: none !important;
}
/* 4️⃣ Logo – wymuszone centrum */
#rwd_menu .rwd_menu_item {
display: block !important;
text-align: center !important;
width: auto !important;
flex: none !important;
}
#rwd_menu .rwd_menu_item a {
display: inline-block !important;
margin: 0 auto !important;
}
#rwd_menu .rwd_menu_item img {
display: block !important;
margin: 0 auto !important;
max-height: 42px !important;
width: auto !important;
}
}
/* ========================= MOBILE – USUŃ PUSTĄ PRZESTRZEŃ POD LOGO ========================= */
@media (max-width: 767px) {
/* HEADER-TOP – minimalna wysokość */
header#header .header-top {
padding-top: 0px !important;
padding-bottom: 0 !important;
margin-bottom: -15px !important;
margin-left: 40px !important;
min-height: 0 !important;
}
/* kontener bez marginesów */
header#header .header-top .container {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* ROW – USUŃ WYSOKOŚĆ */
header#header .header-top .row {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
}
/* wszystko oprócz logo = NIE ISTNIEJE */
header#header .header-top .row > *:not(#_desktop_logo) {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* LOGO – bez dolnych odstępów */
#_desktop_logo {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#_desktop_logo h1 {
margin-bottom: 0 !important;
}
#_desktop_logo img {
margin-bottom: 0 !important;
display: block;
}
}
/* =====================================================
📱 MOBILE – WYMUSZENIE TEKSTU DO LEWEJ (HARD FIX)
===================================================== */
@media (max-width: 768px) {
#js-product-list-header,
#js-product-list-header * {
text-align: left !important;
}
}
/* =====================================================
📱 MOBILE – FILTRY: PADDING + ZAWIJANIE TEKSTU
===================================================== */
@media (max-width: 768px) {
/* główny kontener filtrów */
#search_filters,
#search_filters_brands {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* sekcje filtrów */
#search_filters .facet,
#search_filters_brands .facet {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* listy */
#search_filters ul,
#search_filters li {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* etykiety + linki (TO JEST KLUCZ) */
#search_filters label,
#search_filters a {
display: block !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
/* checkbox + tekst – lepszy układ */
#search_filters .facet-label {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
}
/* liczniki (np. (27)) */
#search_filters .magnitude {
white-space: nowrap !important;
margin-left: 4px !important;
}
}
/* =====================================================
📱 MOBILE – HARD CENTER LOGIN BUTTON
===================================================== */
@media (max-width: 768px) {
footer.form-footer {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
text-align: center !important;
}
footer.form-footer #submit-login {
float: none !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* =====================================================
🖥 DESKTOP – UKRYJ CATEGORY TREE TYLKO Z displayNavFullWidth
===================================================== */
@media (min-width: 769px) {
.header-top .block-categories {
display: none !important;
}
}
@media (max-width: 768px) {
/* block-categories WYŚWIETLONY PO MENU */
.block-categories {
display: none !important;
}
}
@media (min-width: 769px) {
/* block-categories WYŚWIETLONY PO MENU */
.menu.js-top-menu + .block-categories {
display: none !important;
}
}
@media (max-width: 768px) {
/* wrapper – bez zmian domyślnie */
#mobile-categories-wrapper {
position: fixed;
inset: 0;
z-index: 999999;
background: #fff;
display: none !important;
}
/* ⬇️ TYLKO GDY KATEGORIE SĄ OTWARTE */
#mobile-categories-wrapper .block-categories.tp-categories-active {
height: calc(100vh - 60px) !important;
max-height: calc(100vh - 60px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* wrapper widoczny tylko w trybie fullscreen */
body.tp-categories-open #mobile-categories-wrapper {
display: block !important;
}
}
@media (max-width: 768px) {
.ets-author-top {
flex-direction: column;
align-items: center;
text-align: center;
}
.ets-author-avatar {
order: 1;
margin-bottom: 15px;
}
.ets-author-avatar img {
max-width: 140px;
}
.ets-author-intro {
order: 2;
width: 100%;
}
.ets-author-short {
margin-top: 10px;
line-height: 1.6;
}
}
@media (max-width: 768px) {
.mobile-top-search-bar {
position: sticky;
top: 0;
z-index: 9999;
background: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
}
/* =====================================================
📱 MOBILE – RESET I PEWNE WYŚWIETLANIE TOP SEARCH
===================================================== */
@media (max-width: 768px) {
/* 🔥 1. DOMYŚLNIE – UKRYJ */
.mobile-top-search-bar {
display: none !important;
}
/* 🔥 2. POKAŻ TYLKO NA DOZWOLONYCH PODSTRONACH */
body.page-product .mobile-top-search-bar,
body.page-category .mobile-top-search-bar,
body.page-search .mobile-top-search-bar,
body.page-cms .mobile-top-search-bar,
body.page-blog .mobile-top-search-bar {
display: block !important;
}
/* 🔥 3. ODBLOKUJ WNĘTRZE (NAJWAŻNIEJSZE!) */
body.page-product .mobile-top-search-bar .custom-search-wrapper,
body.page-category .mobile-top-search-bar .custom-search-wrapper,
body.page-search .mobile-top-search-bar .custom-search-wrapper,
body.page-cms .mobile-top-search-bar .custom-search-wrapper,
body.page-blog .mobile-top-search-bar .custom-search-wrapper {
display: block !important;
}
/* 🔥 4. STICKY NA GÓRZE */
.mobile-top-search-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10001;
background: #fff;
border-bottom: 1px solid #e5e5e5;
}
/* 🔥 5. ODSUNIĘCIE TREŚCI (TYLKO GDZIE SEARCH JEST) */
body.page-product,
body.page-category,
body.page-search,
body.page-cms,
body.page-blog {
padding-top: 64px; /* wysokość searcha */
}
/* 🔥 6. WYMIARY JAK HOMEPAGE */
.mobile-top-search-bar .custom-search-wrapper {
max-width: 99% !important;
margin: 0 auto !important;
padding: 6px 0 !important;
}
.mobile-top-search-bar .custom-search-input {
height: 48px !important;
font-size: 15px !important;
padding: 0 52px 0 14px !important;
border-radius: 16px !important;
}
.mobile-top-search-bar .custom-search-btn {
width: 50px !important;
height: 50px !important;
right: -8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
.mobile-top-search-bar .custom-search-btn .search-icon {
width: 22px !important;
height: 22px !important;
}
/* 🔥 7. WYŁĄCZONE ELEMENTY */
.mobile-top-search-bar .search-tagline,
.mobile-top-search-bar #vehicleInfoText {
display: none !important;
}
}
/* =====================================================
🖥 DESKTOP – NIGDY NIE POKAZUJ
===================================================== */
@media (min-width: 769px) {
.mobile-top-search-bar {
display: none !important;
}
}
@media (max-width: 768px) {
.ets_block_latest .owl-nav {
top: 10px !important; /* 👈 obniża strzałki */
}
}
/* =====================================================
📱 MOBILE – NAPRAWA SCROLLA TABEL (HARD FIX)
===================================================== */
@media (max-width: 768px) {
/* 🔓 pozwól tabeli scrollować mimo body overflow:hidden */
.ets-post-body table {
display: block !important;
overflow-x: auto !important;
overflow-y: hidden !important;
max-width: 100% !important;
width: 100% !important;
-webkit-overflow-scrolling: touch;
}
/* 🔓 ZABROŃ zawijania – INACZEJ SCROLL SIĘ NIE POJAWI */
.ets-post-body table th,
.ets-post-body table td {
white-space: nowrap !important;
}
}
@media (max-width: 768px) {
.ets-post-body table th,
.ets-post-body table td {
white-space: nowrap !important;
}
}
@media (max-width: 768px) {
.ets-post-body table::-webkit-scrollbar {
height: 6px;
}
.ets-post-body table::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
.ets-post-body table::-webkit-scrollbar-thumb:hover {
background: #F05A26;
}
}
/* =====================================================
📱 MOBILE – BIAŁY PANEL NAD STICKY SEARCH (3px)
===================================================== */
@media (max-width: 768px) {
body#index .custom-search-wrapper {
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
}
/* ⬜ biały panel / oddech */
body#index .custom-search-wrapper::before {
content: "";
display: block;
height: 3px; /* 👈 wysokość panelu */
background: #ffffff; /* 👈 BIAŁE TŁO */
}
}
/* =====================================================
🖥 DESKTOP – KATEGORIE ZAWSZE NAD FILTRAMI
===================================================== */
@media (min-width: 769px) {
/* kolumna lewa jako flex w pionie */
#left-column {
display: flex !important;
flex-direction: column !important;
}
/* KATEGORIE – ZAWSZE PIERWSZE */
#left-column .block-categories {
order: 1 !important;
}
/* FILTRY – ZAWSZE POD KATEGORIAMI */
#left-column #search_filters_wrapper {
order: 2 !important;
}
/* RESZTA MODUŁÓW (brandlist, bannery itd.) */
#left-column > *:not(.block-categories):not(#search_filters_wrapper) {
order: 3 !important;
}
}
/* ===================================================
FINAL: AUTOMATYCZNE POMNIEJSZANIE TYTUŁU – BEZ UCINANIA
=================================================== */
/* ===================================================
CSS-ONLY: MAKSYMALNE ZMNIEJSZANIE TYTUŁU BEZ UCINANIA
=================================================== */
@media (min-width: 769px) {
/* Szary boks nie może się rozpychać */
.ets-post-header {
overflow: hidden !important;
}
/* KONKRETNY ELEMENT: span.title_cat */
.ets-post-header span.title_cat[itemprop="headline"] {
display: block !important;
/* 🔑 AGRESYWNA SKALA – to jest klucz */
font-size: clamp(20px, 1.4vw, 38px) !important;
line-height: 1.1 !important;
/* Zmniejszamy łamanie linii */
max-width: 100% !important;
/* Lepsze łamanie długich słów */
/* NIC NIE UCINAMY */
overflow: visible !important;
text-overflow: unset !important;
white-space: normal !important;
}
}
.prodcat-track {
display: flex;
gap: 10px;
}
/* 🖥 DESKTOP – 5 elementów */
@media (min-width: 769px) {
.bx_prodcat article.product-miniature {
box-sizing: border-box;
flex: 0 0 calc((90% - 20px) / 5); /* 4 × 10px */
max-width: calc((90% - 20px) / 5);
}
}
/* 📱 MOBILE – 2 elementy */
@media (max-width: 768px) {
.bx_prodcat article.product-miniature {
box-sizing: border-box;
flex: 0 0 calc((90% - 10px) / 2); /* 1 × 10px */
max-width: calc((90% - 10px) / 2);
}
}
.prodcat-track {
display: flex;
gap: 0 !important; /* ❌ żadnych gapów */
}
@media (min-width: 769px) {
.products.bx_prodcat {
overflow: hidden !important;
}
.bx_prodcat article.product-miniature {
box-sizing: border-box !important;
flex: 0 0 20% !important; /* 🔥 idealnie pod JS */
max-width: 20% !important;
padding-left: 8px !important;
padding-right: 8px !important; /* ⬅️ ODSTĘPY TU */
}
.products.bx_prodcat {
width: calc(100% - 60px) !important; /* ⬅️ KLUCZ */
max-width: calc(100% - 60px) !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* ❌ ukryj drugą strzałkę */
#next_prodcat a.bx-next:not(:first-child),
#prev_prodcat a.bx-prev:not(:first-child) {
display: none !important;
}
/* =====================================
❌ NO SLIDER – MAŁO PRODUKTÓW
===================================== */
.products.bx_prodcat.prodcat--no-slider {
display: flex !important;
justify-content: flex-start !important;
gap: 24px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* 🔥 KARTA – PEŁNA NORMALNA SZEROKOŚĆ */
.products.bx_prodcat.prodcat--no-slider article.product-miniature {
flex: 0 0 auto !important;
width: 280px !important; /* ⬅️ REALNA SZEROKOŚĆ */
max-width: 280px !important;
padding: 0 !important;
margin: 0 !important;
}
/* jeżeli chcesz środek przy 1 produkcie */
.products.bx_prodcat.prodcat--no-slider:has(article.product-miniature:only-child) {
justify-content: center !important;
}
}
@media (min-width: 769px) {
body[class*="cms-id"] .block-categories.block {
display: none !important;
}
}
section#main header.page-header {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 📄 WSZYSTKIE STRONY CMS */
.page-cms {
line-height: 1.7;
color: #333;
}
/* H1 – jeśli występuje */
.page-cms h1 {
font-size: 28px;
margin-bottom: 20px;
font-weight: 700;
}
/* H2 – główne nagłówki */
.page-cms h2 {
font-size: 24px;
margin: 30px 0 15px;
font-weight: 700;
}
/* H3 – sekcje */
.page-cms h3 {
font-size: 20px;
margin: 25px 0 10px;
font-weight: 600;
}
/* H4 */
.page-cms h4 {
font-size: 18px;
margin: 20px 0 8px;
font-weight: 600;
}
/* Paragrafy */
.page-cms p {
font-size: 16px;
margin-bottom: 12px;
}
/* Listy */
.page-cms ul,
.page-cms ol {
font-size: 16px;
margin: 12px 0 12px 20px;
}
.page-cms li {
margin-bottom: 8px;
}
.cta-button {
min-width: auto;
padding: 10px 18px;
background-color: #ffffff;
color: #f05a26; /* nasz pomarańcz */
font-size: 20px; /* jak tekst */
font-weight: 600; /* jak tekst */
letter-spacing: 0;
text-transform: none; /* ← KLUCZOWE */
border: 2px solid #000000;
border-radius: 12px;
cursor: pointer;
transition:
background-color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
/* SUBTELNY HOVER – JAK TEKST */
.cta-button:hover {
background-color: rgba(240, 90, 38, 0.08); /* bardzo delikatny */
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
/* ACTIVE */
.cta-button:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
#cookie-banner {
top: auto !important;
bottom: 75px !important;
}
}
@media (min-width: 769px) {
body#index .custom-search-wrapper:not(.is-sticky) {
margin-top: 20px !important;
}
}
@media (max-width: 797px) {
.share-row {
margin-top: 10px !important;
}
}
/* === PRODUKT POCZĄTEK === */
/* === HEADER JEDNEJ CZĘŚCI === */
.part-block-header {
display: grid;
grid-template-columns: 140px 18px 1fr 20px;
/* KOD – NAZWA + */
align-items: center;
width: 100%;
padding: 4px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
line-height: 1.35;
color: #232323;
}
/* KOD */
.part-block-header .part-code {
color: #2fb5d2;
font-weight: 600;
white-space: nowrap;
}
/* PAUZA */
.part-block-header .part-separator {
text-align: center;
color: #bbb;
}
/* NAZWA */
.part-block-header .part-name {
color: #333;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* IKONA + / − */
.part-block-header .tab-icon {
font-size: 18px;
font-weight: 700;
line-height: 1;
text-align: right;
cursor: pointer;
}
/* === USUŃ LINIĘ POD NAGŁÓWKIEM CZĘŚCI === */
#pasuje-do .tab-section > .tab-section-header {
border-bottom: none !important;
box-shadow: none !important;
}
/* jeśli theme używa pseudo-elementów */
#pasuje-do .tab-section > .tab-section-header::before,
#pasuje-do .tab-section > .tab-section-header::after {
display: none !important;
content: none !important;
}
/* === NAGŁÓWKI MAREK (Audi, BMW itd.) === */
.brand-section > .tab-section-header {
padding: 4px 8px !important; /* ⬇️ dużo niżej */
min-height: unset;
}
/* tekst marki */
.brand-section > .tab-section-header .tab-section-left span {
font-size: 14px; /* było większe */
font-weight: 600;
}
/* ikona + / − przy marce */
.brand-section > .tab-section-header .tab-icon {
font-size: 16px; /* mniejsza */
font-weight: 700;
line-height: 1;
}
/* usuń zbędne marginesy */
.brand-section {
margin-bottom: 2px !important;
}
/* lista pojazdów – ciaśniej */
.brand-vehicle-list {
margin: 4px 0;
padding-left: 12px;
}
.brand-vehicle-list li {
padding: 1px 0;
font-size: 14px;
line-height: 1.35;
}
/* === LISTA POJAZDÓW – MNIEJSZY PADDING === */
#pasuje-do .brand-vehicle-list {
margin: 2px 0; /* było większe */
padding-left: 12px; /* delikatne wcięcie */
}
#pasuje-do .brand-vehicle-list li {
padding: 1px 0; /* ⬅️ KLUCZOWE – ciaśniej w pionie */
font-size: 13.5px; /* minimalnie mniejsze */
line-height: 1.25; /* zbite, ale czytelne */
color: #333;
}
.product-box-styled { border: 1px solid #ebebeb; border-radius: 15px; padding: 15px; margin-bottom: 10px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
.shipping-info-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px; /* ↑ było: 15px 0 */
border-bottom: 1px solid #f6f6f6;
cursor: pointer;
transition: background 0.2s;
}
.shipping-info-row:hover { background: #fafafa; }
.shipping-info-row:last-child { border-bottom: none; }
.shipping-info-row .label-col { display: flex; align-items: center; gap: 12px; color: #232323; font-size: 16px; }
.shipping-info-row .label-col i { color: #7a7a7a; }
.shipping-info-row .value-col { font-weight: 600; color: #232323; display: flex; align-items: center; gap: 5px; }
.side-panel-custom { position: fixed; top: 0; right: -540px; width: 500px; height: 100%; background: #fff; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 20000; transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); padding: 30px; overflow-y: auto; }
.side-panel-custom.active { right: 0; }
.side-panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.15); display: none; z-index: 9999; backdrop-filter: blur(0px); }
.side-panel-close { position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 24px; }
.carrier-item-list { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eee; }
.carrier-logo { width: 50px; height: auto; margin-right: 15px; object-fit: contain; }
.buy-now-wrapper { margin-top: 15px; }
.buy-now-btn { width: 100%; background: #000; color: #fff; border-radius: 8px; font-weight: bold; padding: 12px; text-transform: uppercase; border: none; }
.buy-now-btn:hover { background: #333; }
.product-extra-buttons .btn { display: block; width: 100%; margin-bottom: 10px; border-radius: 8px; text-align: center; padding: 5px; border: 1px solid #ddd; background: #fff; color: #333; font-weight: 500; transition: 0.2s; }
.product-extra-buttons .btn:hover { background: #f1f1f1; border-color: #bbb; }
.hidden-param { display: none; }
.vehicle-data-toggle { background: none; border: none; color: #2fb5d2; cursor: pointer; padding: 0; font-weight: 600; margin-top: 10px; }
/* NAZWA KURIERA */
.carrier-item-list > div > div > div:first-child {
font-size: 17px;
font-weight: 600;
line-height: 1.3;
}
/* PARAMETRY: dostawa / ilość / waga */
.carrier-item-list div[style*="font-size:12px"] {
font-size: 14px !important;
line-height: 1.5;
}
/* CENA */
.carrier-item-list > div:last-child {
font-size: 18px !important;
font-weight: 700;
}
/* WSPÓLNE USTAWIENIA DLA OBU PRZYCISKÓW */
.add-to-cart,
.buy-now-btn {
font-family: inherit !important;
font-size: 18px !important;
font-weight: 200 !important;
letter-spacing: normal !important;
text-transform: none !important;
border-radius: 6px !important; /* 🔸 lekkie zaokrąglenie */
padding: 14px 18px !important;
}
/* KOLORY */
.add-to-cart,
.buy-now-btn {
background-color: #F05A26 !important;
color: #ffffff !important;
border: none !important;
}
/* HOVER – delikatnie ciemniejszy */
.add-to-cart:hover,
.buy-now-btn:hover {
background-color: #d94f20 !important;
color: #ffffff !important;
}
/* IKONA KOSZYKA – dopasowanie wielkości */
.add-to-cart .material-icons {
font-size: 22px;
vertical-align: middle;
margin-right: 6px;
}
/* WYRÓWNYWANIE LOGA W PIONIE */
.carrier-item-list > div {
align-items: center !important;
}
/* LOGO – stabilny wygląd */
.carrier-logo {
display: block;
margin-right: 15px;
max-height: 40px;
}
.product-oem-info {
font-size: 20px; /* większa czcionka */
color: #000; /* ciemniejsza – ważniejsze info */
font-weight: 500;
}
.product-oem-info strong {
font-size: 24px; /* jeszcze większy sam numer */
font-weight: 600;
color: #000;
}
/* PLUS / MINUS */
.tab-toggle {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.tab-icon {
font-size: 22px;
font-weight: 600;
margin-left: 10px;
transition: transform 0.2s;
}
.vehicle-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.vehicle-table tr:nth-child(odd) {
background: #f7f7f7;
}
.vehicle-table tr:nth-child(even) {
background: #ffffff;
}
.vehicle-table td {
padding: 10px 12px;
font-size: 15px;
}
.vehicle-table .param-name {
font-weight: 600;
width: 40%;
}
.vehicle-table .param-value {
font-weight: 400;
color: #333;
}
/* TYMCZASOWO UKRYTE SEKCJE */
#reviews,
#product-comments {
display: none !important;
}
/* (opcjonalnie) ukryj też zakładki w menu */
a[href="#pasuje-do"],
a[href="#reviews"],
a[href="#product-comments"] {
display: none !important;
}
#typowe-usterki {
display: none !important;
}
a[href="#typowe-usterki"] {
display: none !important;
}
#productCommentsBlock {
display: none !important;
}
/* === FIX: PLUS / MINUS W ZAKŁADKACH === */
.nav-tabs .nav-link.tab-toggle {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px;
}
/* upewniamy się, że span jest widoczny */
.nav-tabs .nav-link.tab-toggle span {
display: inline-flex !important;
align-items: center;
}
/* IKONA + / - */
.nav-tabs .nav-link .tab-icon {
font-size: 22px !important;
font-weight: 700 !important;
color: #000 !important; /* ← WYMUSZENIE KOLORU */
line-height: 1 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* usuń pseudo-elementy theme */
.nav-tabs .nav-link:before,
.nav-tabs .nav-link:after {
display: none !important;
}
/* ================= ACCORDION ================= */
.tab-section {
border: 1px solid #ebebeb;
border-radius: 12px;
background: #fff;
overflow: hidden;
}
.tab-section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
cursor: pointer;
background: #fafafa;
}
.tab-section-header:hover {
background: #f2f2f2;
}
.tab-section-left {
display: flex;
align-items: center;
gap: 10px;
font-size: 17px;
font-weight: 600;
}
.tab-icon {
font-size: 22px;
font-weight: 700;
}
/* ZWIJANIE */
.tab-section.collapsed .tab-section-content {
display: none;
}
/* === COMPACT ACCORDION HEADERS === */
.tab-section-header {
padding: 6px 10px !important; /* było ~14px 18px */
}
.tab-section-left {
font-size: 15px; /* było 17px */
gap: 8px;
}
.tab-section-left .material-icons {
font-size: 18px; /* było 20px */
}
.tab-section-header .tab-icon {
font-size: 18px; /* było 22px */
}
.tab-section-content {
padding: 12px 14px !important;
}
.tab-section {
margin-bottom: 3px !important;
}
.buy-now-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center; /* tekst na środku */
}
/* ikona przyklejona do lewej */
.buy-now-btn .buy-now-icon {
position: absolute;
left: 16px;
font-size: 22px;
}
/* tekst zostaje idealnie na środku */
.buy-now-btn .buy-now-text {
pointer-events: none;
}
.contact-box .btn-muted {
background: #f6f6f6 !important;
border: 1px solid #e0e0e0 !important;
color: #333 !important;
}
.contact-box .btn-muted:hover {
background: #eeeeee !important;
border-color: #d0d0d0 !important;
}
.contact-box .material-icons {
margin-right: 8px;
font-size: 22px;
vertical-align: middle;
}
.price-row-inline {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
/* ikony zawsze po prawej */
.price-icons {
display: flex;
gap: 10px;
margin-left: auto;
}
.price-action-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #000;
}
.price-action-btn i {
font-size: 26px;
}
.price-action-btn:hover {
color: #F05A26 ;
}
.wishlist-btn i {
color: #000;
transition: color .2s;
}
.wishlist-btn.active i,
.wishlist-btn.is-active i {
color: #F05A26 !important;
}
.wishlist-btn.active:hover i,
.wishlist-btn.is-active:hover i {
color: #F05A26 !important;
}
/* ==============================
SHARE MODAL – OVERLAY
============================== */
.share-modal-overlay {
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(0,0,0,.55);
display: flex;
align-items: center;
justify-content: center;
}
/* ==============================
SHARE MODAL – BOX
============================== */
.share-modal {
background: #fff;
width: 100%;
max-width: 420px;
padding: 22px 24px 24px;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,.25);
position: relative;
animation: shareModalIn .25s ease-out;
}
/* ANIMACJA */
@keyframes shareModalIn {
from {
transform: translateY(15px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ==============================
CLOSE BUTTON
============================== */
.share-close {
position: absolute;
top: 10px;
right: 12px;
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: #999;
transition: color .2s ease;
}
.share-close:hover {
color: #F05A26;
}
/* ==============================
MODAL HEADER
============================== */
.share-modal h3 {
margin: 0 0 16px;
font-size: 20px;
font-weight: 600;
text-align: center;
}
/* ==============================
SHARE LINK ROW
============================== */
.share-row {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.share-row input {
flex: 1;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid #ddd;
font-size: 14px;
}
.share-row button {
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 6px;
padding: 0 10px;
cursor: pointer;
transition: background .2s ease, border .2s ease;
}
.share-row button:hover {
background: rgba(240, 90, 38, 0.1);
border-color: #F05A26;
}
.share-row i {
font-size: 20px;
}
/* ==============================
SHARE BUTTONS
============================== */
.share-btn {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background .2s ease, transform .15s ease;
}
/* FACEBOOK */
.share-btn.facebook {
background: #1877f2;
color: #fff;
}
.share-btn.facebook:hover {
background: #145fd1;
transform: translateY(-1px);
}
/* EMAIL */
.share-btn.email {
background: #F05A26;
color: #fff;
}
.share-btn.email:hover {
background: #d94f21;
transform: translateY(-1px);
}
/* ==============================
EMAIL SECTION
============================== */
.share-email-box {
margin-top: 14px;
}
.share-email-box input {
width: 100%;
padding: 9px 10px;
border-radius: 6px;
border: 1px solid #ddd;
font-size: 14px;
margin-bottom: 8px;
}
.share-email-box input:focus {
outline: none;
border-color: #F05A26;
}
/* ==============================
ERROR LABEL
============================== */
.share-error-label {
display: block;
color: #d63636;
font-size: 13px;
margin-bottom: 6px;
}
/* ==============================
MOBILE
============================== */
@media (max-width: 480px) {
.share-modal {
max-width: 92%;
padding: 18px;
}
}
#share-modal-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 999999 !important;
display: flex;
align-items: center;
justify-content: center;
transform: none !important;
isolation: isolate;
}
/* ==============================
🔒 SHARE ROW – DEFINITYWNY FIX
============================== */
.share-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* INPUT – NIE MOŻE ROZPYCHAĆ */
.share-row input {
flex: 1 1 0 !important; /* 🔴 KLUCZ */
min-width: 0 !important; /* 🔴 KLUCZ */
width: auto !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
box-sizing: border-box !important;
}
/* PRZYCISK KOPIUJ – STAŁA SZEROKOŚĆ */
.share-row button {
flex: 0 0 40px !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* ==============================
📱 SIDE PANEL – MOBILE FULLSCREEN
============================== */
@media (max-width: 768px) {
.side-panel-custom {
width: 100vw !important;
max-width: 100vw !important;
right: -100vw !important;
padding: 20px 16px !important;
}
.side-panel-custom.active {
right: 0 !important;
}
.side-panel-overlay {
width: 100vw !important;
height: 100vh !important;
}
}
/* ==============================
📱 MOBILE – EXTRA BUTTONS COMPACT
============================== */
@media (max-width: 768px) {
.product-extra-buttons .btn,
.contact-box .btn {
padding: 8px 10px !important;
font-size: 13px !important;
border-radius: 6px !important;
line-height: 1.25 !important;
}
.product-extra-buttons .btn i,
.contact-box .btn i {
font-size: 18px !important;
margin-right: 6px !important;
}
/* strzałki po prawej mniejsze */
.product-extra-buttons .btn .material-icons:last-child {
font-size: 18px !important;
}
/* odstępy między przyciskami */
.product-extra-buttons .btn {
margin-bottom: 6px !important;
}
}
.product-share-overlay {
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(0,0,0,.55);
display: flex;
align-items: center;
justify-content: center;
}
/* ==============================
PRODUCT SHARE MODAL – LAYOUT
============================== */
.product-share-modal {
position: relative; /* ⬅️ konieczne dla X */
background: #fff;
max-width: 420px;
width: 100%;
padding: 26px 24px 24px;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
/* ===== TYTUŁ – IDEALNIE NA ŚRODKU ===== */
.product-share-modal h3 {
margin: 0 0 18px;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #232323;
}
/* ===== PRZYCISK X ===== */
.product-share-modal .share-close {
position: absolute;
top: 12px;
right: 14px;
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: #999;
line-height: 1;
transition: color .2s ease;
}
.product-share-modal .share-close:hover {
color: #F05A26;
}
/* =========================
🎬 PRODUCT VIDEO BAR
========================= */
.product-video-bar {
margin-top: 14px;
padding: 8px 12px; /* więcej powietrza */
border-radius: 10px;
position: relative;
background: #fff3ee;
border: 1px solid #F05A26;
display: flex;
align-items: center; /* wyśrodkowanie w pionie */
gap: 14px;
font-size: 17px; /* większa czcionka */
font-weight: 700; /* bardziej „buttonowo” */
color: #232323;
cursor: pointer;
transition: background .2s ease, border .2s ease;
}
.product-video-bar span {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
font-weight: 700;
white-space: nowrap;
}
.product-video-bar:hover {
background: #ffe1d6;
border-color: #e94c18;
}
.product-video-bar i {
font-size: 30px; /* ikona proporcjonalnie większa */
color: #F05A26;
}
.product-video-bar:hover i {
color: #e94c18;
}
.product-video-bar .arrow {
margin-left: auto;
font-size: 32px;
}
/* 📱 MOBILE */
@media (max-width: 768px) {
.product-video-bar {
font-size: 14px; /* mniejsza baza */
padding: 7px 10px;
gap: 10px;
}
.product-video-bar span {
font-size: 14px; /* 👈 dokładnie to, o co prosisz */
font-weight: 600;
}
.product-video-bar i {
font-size: 22px;
}
.product-video-bar .arrow {
font-size: 24px;
}
}
/* =========================
🎥 PRODUCT VIDEO MODAL
========================= */
#product-media-overlay {
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(0,0,0,.7);
display: flex;
align-items: center;
justify-content: center;
}
.product-media-modal {
position: relative;
width: 90%;
max-width: 900px;
background: #000;
border-radius: 12px;
overflow: hidden;
}
.product-media-modal video {
width: 100%;
height: auto;
display: block;
}
.media-close {
position: absolute;
top: 10px;
right: 14px;
background: none;
border: none;
color: #fff;
font-size: 32px;
cursor: pointer;
z-index: 2;
}
/* ==============================
KONIEC - SINGLE PRODUKT
============================== */
#block-social-label {
display: none;
}
/* Anty-FOUC */
section#products {
opacity: 0;
transition: opacity .15s ease;
}
section#products.product_show_grid,
section#products.product_show_list {
opacity: 1;
}
/* 🔒 ZAWSZE ukryj przełącznik GRID/LISTA */
.grid_switcher,
.product_show_grid .grid_switcher,
.product_show_list .grid_switcher {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
@media (min-width: 768px) {
.category-desc {
max-width: 980px;
margin-bottom: 10px;
}
}
/* ========================= CATEGORY ADDITIONAL – SAFE FIX ========================= */
.category-desc {
width: 100%;
max-width: 100%;
margin: 0;
box-sizing: border-box;
}
/* ===============================
🔴 PRODUCT FLAGS – TYLKO KARTA PRODUKTU
=============================== */
.product_container .product-flags {
display: flex;
justify-content: center;
align-items: center;
gap: 0px;
padding: 0px 0;
margin-top: -10px !important;
width: 100%;
}
.product_container .product-flags .product-flag {
background: rgb(255, 0, 0);
border: 2px solid rgb(255, 0, 0);
color: #ffffff;
padding: 4px 8px;
border-radius: 0px;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
text-align: center;
}
/* =========================================
🖼️ PRODUCT GALLERY – ACTIVE & HOVER THUMB
========================================= */
/* hover na miniaturce */
.product_container .product-images .thumb:hover {
border: 2px solid #F05A26 !important;
}
/* aktywna miniaturka */
.product_container .product-images .thumb.selected {
border: 2px solid #F05A26 !important;
}
/* jeśli border jest na kontenerze */
.product_container .product-images .thumb-container:hover {
border-color: #F05A26 !important;
}
.product_container .product-images .thumb-container .thumb.selected {
border-color: #F05A26 !important;
}
@media (max-width: 767px) {
.product-description .additional-text-below-description,
.product-description .additional-text-below-description * {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
}
}
.cart-total-netto {
font-size: 13px;
color: #666;
margin-top: -4px;
}
.cart-total-netto .label {
font-weight: 400;
}
.cart-total-netto .value {
font-weight: 600;
}
.cart-total-vat {
font-size: 13px; /* mniejsze niż netto */
color: #666; /* jaśniejszy */
margin-top: -2px; /* lekko podciągnięte */
}
.cart-total-vat .label {
font-weight: 400;
}
.cart-total-vat .value {
font-weight: 600; /* lżejsze niż netto */
}
/* Ukryj CAŁY blok przycisków, jeśli Dodaj do koszyka jest disabled */
.product_right
.cart-and-buy-buttons:has(.add-to-cart:disabled) {
display: none !important;
}
/* === BLOG PAGINATION === */
.blog-paggination .links a,
.blog-paggination .links b {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
margin: 0 4px !important;
background: #ffffff !important;
border: 1px solid #e5e5e5 !important;
border-radius: 4px !important;
color: #333333 !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
/* aktualna strona */
.blog-paggination .links b {
color: #F05A26 !important;
border-color: #F05A26 !important;
font-weight: 600 !important;
cursor: default !important;
}
/* hover */
.blog-paggination .links a:hover {
color: #F05A26 !important;
border-color: #F05A26 !important;
text-decoration: none !important;
}
/* strzałki (prev / next / first / last) */
.blog-paggination .links a.prev,
.blog-paggination .links a.next,
.blog-paggination .links a.frist,
.blog-paggination .links a.last {
font-size: 16px !important;
}
/* usuń dziwne odstępy spanów */
.blog-paggination .links span {
line-height: 1 !important;
}
#angarbest .index_title,
#angarbest .products {
display: none !important;
}
#angarbest .all-product-link {
display: none !important;
}
/* stopka – Produkty: ukryj Promocje */
#link-product-page-prices-drop-1 {
display: none !important;
}
/* stopka – Produkty: ukryj Najczęściej kupowane */
#link-product-page-best-sales-1 {
display: none !important;
}
#author-blog-comment-link {
display: none !important;
}
#order-infos .box ul li:first-child {
display: none !important;
}
/* Delivery label */
#orderBasicInfo .font-weight-bold {
pointer-events: none;
}
.ets-post-body .blog_description a {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.ets-post-header,
.ets-post-header h1,
.ets-post-header .page-heading {
line-height: 1.3 !important;
overflow: visible !important;
}
/* BUY NOW – absolutne centrowanie */
.buy-now-wrapper .buy-now-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: normal !important;
}
/* Ikona */
.buy-now-wrapper .buy-now-btn .buy-now-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
height: auto !important;
}
/* Tekst */
.buy-now-wrapper .buy-now-btn .buy-now-text {
display: flex !important;
align-items: center !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
}
/* 🔥 FINAL FIX – tekst idealnie na środku */
.buy-now-wrapper .buy-now-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.buy-now-wrapper .buy-now-btn .buy-now-icon,
.buy-now-wrapper .buy-now-btn .buy-now-text {
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
}
/* ⬇️ ikona trochę niżej */
.buy-now-wrapper .buy-now-btn .buy-now-icon {
top: 10px !important; /* zmień na 2px jeśli chcesz niżej */
}
.eco-carbon-box {
display: flex !important;
align-items: center !important; /* pion */
justify-content: center !important; /* poziom */
gap: 8px !important;
background: #e8f5e9;
border: 1px solid #c8e6c9;
color: #2e7d32;
padding: 8px 12px;
border-radius: 8px;
font-size: 14px;
line-height: 1;
white-space: nowrap;
text-align: center;
}
.eco-carbon-box .eco-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
color: #43a047;
}
.eco-carbon-box .eco-text {
display: flex;
align-items: center; /* ⬅️ TEKST W PIONIE */
line-height: 1;
}
.eco-carbon-box .eco-value {
margin-left: 4px;
font-weight: 700;
}
.eco-carbon-box strong {
font-weight: 400 !important; /* normalny */
}
.eco-carbon-box .eco-icon {
font-family: 'Material Icons' !important;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
color: #43a047;
}
.eco-carbon-box {
display: flex;
align-items: center;
gap: 10px;
background: #f3faf5;
border: 1px solid #d6eee0;
border-radius: 12px;
padding: 10px 14px;
margin-top: 15px;
}
.eco-icon {
font-size: 22px;
}
.eco-text {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #2f5d3b;
}
.eco-value {
font-weight: 700;
color: #1e7e34;
}
/* ⭕ OKRĄGŁA IKONKA INFO */
.eco-info {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: #1e7e34;
color: #fff;
border-radius: 50%;
font-size: 12px;
cursor: default;
margin-left: 6px;
}
.eco-tooltip {
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%);
width: 420px; /* ⬅️ BYŁO ZA MAŁO */
max-width: 95vw; /* ⬅️ BEZPIECZEŃSTWO */
background: #ffffff;
color: #333;
border: 2px solid #F05A26; /* 🔥 BRANDOWY BORDER */
border-radius: 14px;
padding: 18px 20px;
font-size: 14px;
line-height: 1.6;
word-wrap: break-word;
white-space: normal;
box-shadow: 0 12px 35px rgba(0,0,0,0.18);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, transform .2s ease;
z-index: 999;
}
/* STRZAŁKA */
.eco-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 8px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
/* 👆 HOVER */
.eco-info:hover .eco-tooltip {
opacity: 1;
visibility: visible;
}
.eco-tooltip h3 {
margin-top: 0;
color: #F05A26;
}
.eco-info:hover .eco-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-6px);
}
.eco-info {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 6px;
font-size: 13px;
line-height: 1;
border-radius: 50%;
background: #FFF3ED; /* ✅ JASNE */
color: #F05A26; /* ✅ BRAND */
border: 1.5px solid #43a047; /* zielony eko */
cursor: pointer;
user-select: none;
transition:
background .2s ease,
transform .2s ease,
box-shadow .2s ease;
}
.eco-info {
color: #000 !important;
font-weight: 700; /* opcjonalnie – czytelniejszy */
}
@media (max-width: 768px) {
.eco-carbon-box {
font-size: 12px !important; /* było ~14px */
padding: 8px 10px !important; /* trochę ciaśniej */
}
.eco-carbon-box .eco-value {
font-size: 13px !important;
}
.eco-carbon-box .eco-text {
gap: 4px !important;
}
.eco-carbon-box .eco-icon {
font-size: 18px !important; /* proporcjonalnie mniejsza */
}
}
@media (max-width: 768px) {
.eco-info {
position: static !important;
}
.eco-tooltip {
position: fixed !important;
top: 50% !important;
left: 50% !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
width: 90vw !important;
max-width: 420px !important;
max-height: 80vh !important;
overflow-y: auto !important;
z-index: 10000 !important;
border-radius: 16px !important;
}
/* ❌ usuwamy strzałkę */
.eco-tooltip::after {
display: none !important;
}
}
@media (max-width: 768px) {
.eco-carbon-box .eco-text,
.eco-carbon-box .eco-value {
font-size: 11px !important;
}
}
@media (max-width: 768px) {
.side-panel-custom {
padding-bottom: 50px !important; /* ⬅️ MIEJSCE NA DOLNE MENU */
}
}
.eco-info {
width: 22px;
height: 22px;
border-radius: 50%;
background: #E8F5E9;
border: 1.5px solid #2E7D32;
color: #000; /* czarny pytajnik */
font-weight: 700;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ================================
EKO BOX – PEWNE SELEKTORY
================================ */
/* GŁÓWNY BOX */
.tp-category-extra .eco-impact,
.tp-category-extra .eco-impact--top,
.tp-category-extra .eco-impact--bottom {
border: 2px solid #4CAF50 !important;
background-color: #f0fdf4 !important;
color: #166534 !important;
font-family: sans-serif !important;
padding: 16px !important;
border-radius: 12px !important;
max-width: 900px;
margin: 0 auto !important;
text-align: center !important;
box-sizing: border-box;
}
/* ODSTĘPY GÓRA / DÓŁ */
.tp-category-extra--above .eco-impact,
.tp-category-extra--above .eco-impact--top {
margin-bottom: 20px !important;
}
.tp-category-extra--below .eco-impact,
.tp-category-extra--below .eco-impact--bottom {
margin-top: 20px !important;
}
/* TEKST */
.tp-category-extra .eco-impact-text {
margin: 0 !important;
font-size: 1.05em;
line-height: 1.6;
}
/* LISTY – PRZYWRÓCENIE PUNKTÓW */
.tp-category-extra .eco-impact ul {
list-style-type: disc !important;
list-style-position: inside !important;
margin: 12px auto 0 !important;
padding: 0 !important;
display: inline-block !important;
text-align: left !important;
}
/* ELEMENTY LISTY */
.tp-category-extra .eco-impact li {
margin: 4px 0 !important;
line-height: 1.6;
}
/* SUBSCRIPT CO₂ */
.tp-category-extra sub {
font-size: 0.7em;
vertical-align: baseline;
position: relative;
top: 0.2em;
}
/* ================================
GÓRNA CZĘŚĆ – JEDNA LINIA, FULL WIDTH
================================ */
.tp-category-extra--above .eco-impact,
.tp-category-extra--above .eco-impact--top {
width: 100% !important; /* pełna szerokość */
max-width: none !important; /* brak limitu szerokości */
display: block !important;
}
/* tekst w jednej linii */
.tp-category-extra--above .eco-impact-text {
white-space: nowrap !important; /* 🔥 jedna linia */
overflow: hidden;
text-overflow: ellipsis; /* bezpieczeństwo na mobile */
text-align: center !important;
}
/* zachowanie odstępów */
.tp-category-extra--above {
padding-left: 0;
padding-right: 0;
}
/* ================================
MNIEJSZY PADDING – GÓRNA CZĘŚĆ
================================ */
.tp-category-extra--above .eco-impact,
.tp-category-extra--above .eco-impact--top {
padding: 6px 12px !important; /* ⬅️ MNIEJSZY PADDING */
border-radius: 12px !important;
width: 100% !important;
max-width: none !important;
}
/* tekst w jednej linii */
.tp-category-extra--above .eco-impact-text {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 !important;
line-height: 1.4;
}
/* ================================
GÓRNY PANEL – MARGINESY
================================ */
.tp-category-extra--above .eco-impact,
.tp-category-extra--above .eco-impact--top {
margin-top: 15px !important; /* ✅ odstęp od góry */
margin-bottom: 0 !important; /* ❌ usuwa -10px */
}
/* ================================
DOLNY PANEL – WYMUSZENIE STYLU
================================ */
/* ================================
DOLNY PANEL – FORCE OVERRIDE
================================ */
.tp-category-extra--below .eco-impact {
padding: 24px !important; /* większy box */
}
/* 🍃 Nagłówek */
.tp-category-extra--below .eco-impact > div:first-child {
font-size: 1.4em !important;
font-weight: 700 !important;
margin-bottom: 14px !important;
}
/* Tekst CO2 */
.tp-category-extra--below .eco-impact > div:nth-of-type(2) {
font-size: 1.2em !important;
line-height: 1.9 !important;
}
/* Lista */
.tp-category-extra--below .eco-impact ul {
font-size: 1.15em !important;
line-height: 2 !important;
margin-top: 10px !important;
padding-left: 24px !important;
}
/* =========================================
DOLNY PANEL – AGRESYWNE NADPISANIE STYLI
========================================= */
/* CAŁY DOLNY PANEL */
.tp-category-extra--below .eco-impact {
padding: 8px 10px !important; /* 🔽 MNIEJSZY PADDING */
margin-bottom: -30px !important; /* 🔽 USUNIĘCIE DUŻEJ PRZERWY */
}
/* TEKST: "Kupując dowolną część..." */
.tp-category-extra--below .eco-impact > div:nth-of-type(2) {
margin-bottom: 0 !important; /* ❌ BRAK ODSTĘPU DO LISTY */
font-size: 1.15em !important; /* 🔼 WIĘKSZY TEKST */
line-height: 1.45 !important;
}
/* LISTA PUNKTOWA – TUŻ POD TEKSTEM */
.tp-category-extra--below .eco-impact ul {
margin-top: 0 !important; /* ❌ USUŃ ODSTĘP */
margin-bottom: 0 !important;
padding-left: 20px !important;
}
/* ELEMENTY LISTY – CIAŚNIEJ */
.tp-category-extra--below .eco-impact li {
margin: 2px 0 !important;
line-height: 1.4;
}
.tp-category-extra--above .eco-impact-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
/* 📱 TELEFON – brutalny reset */
@media (max-width: 768px) {
.tp-category-extra--above {
display: block !important; /* zabija flex/grid */
text-align: center !important; /* centrowanie zawartości */
}
.tp-category-extra--above .eco-impact-text {
display: inline-block !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
text-align: center !important;
margin: 0 auto !important; /* fizyczne centrowanie */
width: 100%;
word-break: break-word;
}
}
@media (max-width: 768px) {
.eco-impact {
text-align: center;
display: flex;
justify-content: center;
}
.eco-impact-text {
text-align: center;
padding: 0 12px; /* żeby nie kleiło się do krawędzi */
}
}
.share-modal-overlay {
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
z-index: 999999;
}
/* 📱 MOBILE – WYMUSZENIE UKŁADU JEDNA POD DRUGĄ */
@media (max-width: 768px) {
.eco-impact {
display: flex !important;
flex-direction: column !important; /* 🔥 KLUCZ */
align-items: center !important;
justify-content: flex-start !important;
text-align: center !important;
}
.eco-impact > div,
.eco-impact > ul {
width: 100% !important;
display: block !important;
}
.eco-impact ul {
padding-left: 20px !important;
margin-top: 8px !important;
text-align: left !important; /* lista czytelna */
}
}
/* bx_prodcat – ograniczenie tytułu produktu do 4 linii */
.bx_prodcat .product-title-text {
display: -webkit-box;
-webkit-line-clamp: 4; /* maksymalnie 4 wiersze */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3em; /* możesz dopasować */
max-height: calc(1.3em * 4); /* zabezpieczenie */
}
.bx_prodcat .product-miniature .thumbnail-container {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.bx_prodcat .product-miniature {
height: 455px !important;
display: flex !important;
flex-direction: column !important;
}
@media (min-width: 1024px) {
/* TRACK – LICZY % OD RODZICA */
.products.bx_prodcat .prodcat-track {
display: flex !important;
flex-wrap: nowrap !important;
width: 100% !important; /* 🔑 KLUCZ NR 1 */
min-width: 100% !important; /* 🔑 KLUCZ NR 2 */
}
/* KARTY – ZAWSZE 1/6 */
.products.bx_prodcat .prodcat-track > article.product-miniature {
flex: 0 0 16.6667% !important;
width: 16.6667% !important;
max-width: 16.6667% !important;
box-sizing: border-box !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* =========================================
🔥 OSTATECZNY FIX – 1 PRODUKT = 210px
========================================= */
/* karta produktu – ZAWSZE */
.products.bx_prodcat article.product-miniature {
width: 210px !important;
max-width: 210px !important;
min-width: 210px !important;
flex: 0 0 210px !important;
}
/* track nie może się zapadać */
.products.bx_prodcat .prodcat-track {
display: flex !important;
flex-wrap: nowrap !important;
}
/* kontener NIE może zmniejszać dzieci */
.products.bx_prodcat {
display: block !important;
overflow: hidden;
}
}
/* 🔒 BLOKADA ZAZNACZANIA TEKSTU W SLIDERZE */
.products.bx_prodcat,
.products.bx_prodcat * {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
/* 🔥 MAŁO PRODUKTÓW */
.products.bx_prodcat.prodcat--no-slider {
justify-content: center !important;
}
/* =====================================================
🔥 LISTING HOVER MODAL – FULL CSS
===================================================== */
.listing-hover-modal {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
animation: fadeIn .25s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* TŁO */
.listing-hover-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.65);
backdrop-filter: blur(3px);
}
/* OKNO */
.listing-hover-content {
position: relative;
width: 80%;
max-width: 1000px;
margin: 6% auto;
background: #fff;
border-radius: 12px;
padding: 30px;
z-index: 2;
box-shadow: 0 25px 80px rgba(0,0,0,.35);
animation: scaleIn .25s ease;
}
@keyframes scaleIn {
from { transform: scale(.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* UKŁAD */
.listing-hover-inner {
display: flex;
gap: 40px;
}
/* =====================================================
LEWA STRONA – GALERIA
===================================================== */
.listing-hover-left {
width: 50%;
}
/* GŁÓWNE ZDJĘCIE */
.listing-hover-main-image {
display: flex;
align-items: center;
justify-content: center;
height: 420px;
background: #f9f9f9;
border-radius: 8px;
}
.listing-hover-main-image img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
transition: transform .3s ease;
}
/* MINIATURKI */
.listing-hover-thumbs-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 18px;
}
.listing-hover-thumbs {
display: flex;
gap: 10px;
max-width: 400px;
overflow: hidden;
}
.listing-hover-thumbs img {
width: 70px;
height: 70px;
object-fit: cover;
cursor: pointer;
border-radius: 6px;
border: 2px solid transparent;
transition: all .2s ease;
}
.listing-hover-thumbs img.active {
border-color: #111;
}
.lh-arrow {
width: 38px;
height: 38px;
background: #111;
color: #fff;
border: none;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s ease;
}
.lh-arrow:hover {
background: #333;
}
/* =====================================================
PRAWA STRONA – INFORMACJE
===================================================== */
.listing-hover-right {
width: 50%;
display: flex;
flex-direction: column;
gap: 14px;
}
.hover-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.hover-oem,
.hover-vehicle,
.hover-params {
font-size: 14px;
line-height: 1.5;
}
.hover-oem strong,
.hover-vehicle strong {
font-weight: 600;
}
.hover-cart {
margin-top: 15px;
}
/* LINK DO KARTY */
.hover-full-wrapper {
margin-top: auto;
}
.hover-full-link {
display: inline-block;
padding: 10px 18px;
border-radius: 6px;
background: #111;
color: #fff;
text-decoration: none;
transition: background .2s ease;
}
.hover-full-link:hover {
background: #333;
}
/* ZAMKNIJ */
.listing-hover-close {
position: absolute;
top: 15px;
right: 18px;
font-size: 26px;
border: none;
background: none;
cursor: pointer;
line-height: 1;
}
/* =====================================================
MOBILE – WYŁĄCZ MODAL
===================================================== */
@media (max-width: 1024px) {
.listing-hover-modal {
display: none !important;
}
}
/* =====================================================
🔥 HOVER MODAL – TYPOGRAFIA I CENY
===================================================== */
/* PARAMETRY */
.hover-params {
font-size: 14px;
line-height: 1.6;
}
.hover-params .param-label {
color: #555;
font-weight: 500;
}
.hover-params .param-value {
color: #000;
font-weight: 600;
}
/* =====================================================
CENA GŁÓWNA
===================================================== */
.hover-price .price {
font-size: 32px;
color: #F05A26;
font-weight: 700;
display: block;
margin-bottom: 4px;
margin-top: 10px;
}
/* STARA CENA */
.hover-price .regular-price {
font-size: 14px;
color: #777;
text-decoration: line-through;
margin-left: 8px;
}
/* =====================================================
CENA Z DOSTAWĄ
===================================================== */
.hover-price-shipping {
font-size: 18px;
font-weight: 600;
color: #111;
margin-bottom: 1px;
}
.hover-price-shipping .price-with-shipping-label {
font-size: 12px;
font-weight: 400;
color: #777;
margin-left: 6px;
}
/* =====================================================
STAN + CZAS WYSYŁKI
===================================================== */
.hover-stock,
.hover-shipping-time {
font-size: 14px;
color: #333;
margin-bottom: 1px;
}
/* =====================================================
PRZYCISKI – RÓWNA SZEROKOŚĆ
===================================================== */
.hover-cart {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 15px;
}
.hover-cart .btn {
width: 100%;
height: 44px;
font-size: 14px;
font-weight: 600;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
/* DODAJ DO KOSZYKA */
.hover-cart .add-to-cart {
background: #111;
color: #fff;
border: none;
}
.hover-cart .add-to-cart:hover {
background: #333;
}
/* KUP I ZAPŁAĆ */
.hover-cart .buy-now-btn {
background: #F05A26;
color: #fff;
border: none;
}
.hover-cart .buy-now-btn:hover {
background: #d94f1f;
}
/* =====================================================
PRZYCISK "ZOBACZ PEŁNĄ OFERTĘ"
===================================================== */
.hover-full-wrapper {
margin-top: 20px;
}
.hover-full-link {
width: 100%;
height: 42px;
background: #e5e5e5;
color: #111;
border-radius: 6px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background .2s ease;
}
.hover-full-link:hover {
background: #d8d8d8;
}
/* =====================================================
🔥 PRZYCISKI – IDEALNIE RÓWNE
===================================================== */
.hover-cart {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
/* WAŻNE – FORM TEŻ 100% */
.hover-cart form {
width: 100%;
margin: 0;
}
.hover-cart .btn,
.hover-full-link {
width: 100%;
height: 44px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
/* Ikona wyśrodkowana */
.hover-cart .btn i {
margin-right: 8px;
}
/* =====================================================
🔥 USUNIĘCIE ZBĘDNYCH MARGINESÓW
===================================================== */
.hover-stock,
.hover-shipping-time {
margin: -4px 0;
}
.hover-stock .pl_availability_stock,
.hover-shipping-time .product-shipping-time {
margin: 0;
}
.hover-stock strong,
.hover-shipping-time strong {
font-weight: 600;
}
/* =====================================================
🔥 STRZAŁKI GALERII – BIAŁE Z CZARNYM BORDEREM
===================================================== */
/* =====================================================
🔥 WIĘKSZE STRZAŁKI GALERII
===================================================== */
.lh-arrow {
width: 52px; /* było 38px */
height: 52px; /* było 38px */
background: #fff;
color: #000;
border: 2px solid #000; /* trochę grubszy border */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px; /* większa strzałka */
transition: all .2s ease;
}
.lh-arrow:hover {
background: #f3f3f3;
transform: translateY(-2px);
}
/* lekki efekt kliknięcia */
.lh-arrow:active {
transform: scale(0.95);
}
/* =====================================================
🔥 MINIATURKI – AKTYWNA NA POMARAŃCZOWO
===================================================== */
.listing-hover-thumbs img {
width: 70px;
height: 70px;
object-fit: cover;
cursor: pointer;
border-radius: 6px;
border: 2px solid transparent;
}
/* 🔥 AKTYWNA */
.listing-hover-thumbs img.active {
border: 2px solid #F05A26;
}
/* =========================================
🔥 MINIATURKI – MASKA 4 SZTUK
========================================= */
.listing-hover-thumbs-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.listing-hover-thumbs {
display: flex;
gap: 10px;
overflow: hidden;
width: calc((70px * 4) + (10px * 3)); /* 4 miniaturki + odstępy */
position: relative;
}
.listing-hover-thumbs-track {
display: flex;
gap: 10px;
transition: transform .35s ease;
}
.listing-hover-thumbs img {
width: 70px;
height: 70px;
flex: 0 0 70px;
}
/* ============================= */
/* TYLKO W HOVERZE – 250px */
/* ============================= */
.hover-cart .add-to-cart,
.hover-full-wrapper .hover-full-link {
width: 250px !important;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
transition: all 0.25s ease;
text-decoration: none;
margin: 6px auto;
}
.hover-full-wrapper .hover-full-link {
background: #ffffff;
color: #2c3e50;
border: 2px solid #2c3e50;
}
.hover-full-wrapper .hover-full-link:hover {
background: #2c3e50;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(44, 62, 80, 0.3);
}
/* ============================= */
/* HOVER – szerokość 250px */
/* wyrównanie do lewej */
/* ============================= */
.hover-cart .add-to-cart,
.hover-full-wrapper .hover-full-link {
width: 280px !important;
height: 40px !important;
display: flex;
justify-content: center; /* tekst wyśrodkowany w przycisku */
align-items: center;
gap: 4px !important;
padding: 12px 16px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
transition: all 0.25s ease;
text-decoration: none;
margin: 6px 0; /* ❗ brak auto = wyrównanie do lewej */
}
/* Kontener hovera wyrównany do lewej */
.hover-cart,
.hover-full-wrapper {
display: flex;
justify-content: flex-start; /* ❗ do lewej */
}
.hover-full-wrapper .hover-full-link {
background: #ffffff;
color: #2c3e50;
border: 2px solid #2c3e50;
}
.hover-full-wrapper .hover-full-link:hover {
background: #2c3e50;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(44, 62, 80, 0.3);
}
/* ======================================
🔥 WYŁĄCZENIE HOVER DLA pl_gallery_slider
====================================== */
.pl_gallery_slider .image_thumb {
pointer-events: none; /* blokuje hover i klik */
}
.pl_gallery_slider .image_thumb:hover,
.pl_gallery_slider .image_thumb.selected {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* ======================================
🔥 WYŁĄCZENIE SELECTED W LISTINGU
====================================== */
.pl_gallery_slider .image_thumb.selected {
border: none !important;
box-shadow: none !important;
outline: none !important;
background: none !important;
}
.pl_gallery_slider .image_thumb::after,
.pl_gallery_slider .image_thumb.selected::after {
display: none !important;
}
/* ===============================
🔥 CENA + AKCJE W JEDNEJ LINII
================================ */
/* ===============================
🔥 CENA + AKCJE W JEDNEJ LINII
================================ */
.hover-price-row {
display: flex;
align-items: center;
gap: 20px; /* odstęp między ceną a ikonami */
margin: 14px 0;
}
/* LEWA STRONA – CENY */
.hover-price-wrapper {
display: flex;
flex-direction: column;
gap: 12px; /* odstęp między ceną a ceną z dostawą */
margin-bottom: -5px;
}
/* IKONY */
.hover-actions {
display: flex;
gap: 10px;
margin-top: -20px;
}
/* OKRĄGŁE PRZYCISKI */
.hover-actions .listing-action-btn {
width: 40px;
height: 40px;
border-radius: 50%; /* 🔥 kółko */
border: 1px solid #ddd;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .25s ease;
}
/* HOVER */
.hover-actions .listing-action-btn:hover {
border-color: #F05A26;
color: #F05A26;
transform: translateY(-2px);
}
/* IKONY */
.hover-actions i {
font-size: 20px;
}
.hover-stock
{
margin-top: -30px; /* 🔥 podnosi element wyżej */
}
/* =====================================
🔥 MNIEJSZY ODSTĘP MIĘDZY PRZYCISKAMI
(TYLKO W HOVER MODALU)
===================================== */
#listing-hover-modal .hover-cart {
display: flex;
flex-direction: column;
gap: 1px; /* 🔥 zmniejszony odstęp */
margin-bottom: -20px !important;
}
/* =====================================
🔥 ZAOKRĄGLENIE WRAPPERA
===================================== */
#listing-hover-modal .hover-full-wrapper {
border-radius: 8px;
overflow: hidden; /* żeby przycisk nie wystawał */
}
.tp-checkout-blocker {
position: absolute;
inset: 0;
background: transparent;
z-index: 5;
cursor: not-allowed;
}
.checkout.cart-detailed-actions {
position: relative;
}
/* ===============================
DUŻY PRZYCISK CHECKOUT – DESKTOP
=============================== */
.checkout .btn.btn-primary {
font-size: 22px !IMPORTANT; /* dużo większy tekst */
font-weight: 700;
padding: 22px 60px; /* gruby, wysoki */
border-radius: 8px;
min-width: 360px; /* szeroki */
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* ===============================
MOBILE – OGROMNY I NA ŚRODKU
=============================== */
@media (max-width: 991px) {
.checkout.cart-detailed-actions {
text-align: center;
}
.checkout .btn.btn-primary {
font-size: 14px !IMPORTANT;
display: block;
width: 100%;
min-width: 310px;
box-sizing: border-box; /* 🔥 KLUCZ */
padding: 12px 12px;
margin: 20px auto;
border-radius: 14px;
}
}
/* =====================================================
🔥 LISTING HOVER MODAL – RESPONSYWNY SCALE
===================================================== */
/* Domyślna wersja (duże monitory) */
.listing-hover-content {
max-width: 1200px;
width: 95%;
max-height: 90vh;
overflow: hidden;
}
/* 📺 Laptopy 13–14 cali (1000px–1400px) */
@media (min-width: 1000px) and (max-width: 1400px) {
.listing-hover-content {
transform: scale(0.85);
transform-origin: center center;
}
}
/* 💻 Jeszcze mniejsze laptopy */
@media (max-width: 1200px) {
.listing-hover-content {
transform: scale(0.75);
transform-origin: center center;
}
}
/* 📱 Tablet */
@media (max-width: 992px) {
.listing-hover-content {
transform: scale(0.9);
width: 95%;
}
}