@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-v24-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-v24-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-v24-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-v24-latin_latin-ext-600.woff2') format('woff2');
}
/* === FIX: MaterialIcons font-display === */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/MaterialIcons-Regular-12a47ed5fd5585f0f4227fa035a1a607.woff2') format('woff2');
}

/* === GLOBAL FONT OVERRIDE (Roboto → Poppins) === */
:root {
    --font-family-sans-serif: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .menu, .btn,
.form-control, input, textarea, select {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}
/* 2. Wyczyszczenie tła (biel zamiast szarości domyślnych w PrestaShop) */
body {
    background-color: #ffffff;
    color: #333333;
}

#wrapper {
    background-color: #ffffff;
    box-shadow: none !important;
}

/* 3. Przyciski (Czarne, kanciaste jak na mybed) */
.btn-primary, .btn-secondary, .btn-tertiary {
    border-radius: 0px !important;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #333333 !important;
    transform: translateY(-2px);
}

/* 4. Pola formularzy (szukajka, inputy) - minimalizm */
.form-control {
    border-radius: 0px;
    border: 1px solid #e5e5e5;
    background: #fff;
    padding: 10px 15px;
}

/* 5. Usunięcie cieni z kart produktów na listach (płaski design) */
.thumbnail-container, .product-miniature {
    box-shadow: none !important;
    border: none !important;
}

/* ==========================================================================
   UWAGA: Style galerii (Fancybox, YouTube, Progress bar) są w product.tpl
   ========================================================================== */
/* --- IKONY JAK ZE STAREGO SKLEPU (RESTORED STYLE V2) --- */

/* 1. Kółka - wymuszamy rozmiar, żeby nie znikały */
.icon-circle {
    width: 100px;
    height: 100px;
    border: 2px solid #e0e0e0; /* Jasnoszara ramka */
    border-radius: 50%; /* Idealne koło */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background-color: #ffffff;
    margin-bottom: 15px; /* Odstęp od tekstu */
}

/* 2. Styl Ikony (Duża i Szara - jak w starym sklepie) */
.big-gray-icon {
    font-size: 48px !important; /* Rozmiar ikony */
    color: #9e9e9e !important;  /* Szary kolor starego typu */
    transition: all 0.3s ease;
}

/* 3. EFEKT NAJECHANIA (HOVER) - ZŁOTO */
/* Kółko robi się złote */
.advantage-item:hover .icon-circle {
    border-color: #c9a25d; 
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Ikona w środku robi się złota */
.advantage-item:hover .big-gray-icon {
    color: #c9a25d !important;
}

/* 4. Teksty */
.advantage-title {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.advantage-desc {
    font-size: 0.85rem;
    color: #777;
    line-height: 1.3;
}

/* Układ 5 kolumn dla PC */
@media (min-width: 992px) {
    .custom-advantages-row .col-md-2 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* --- STYL KATEGORII NA GŁÓWNEJ (Modern Refactor) --- */

/* Nagłówki sekcji */
.section-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #333;
}

/* Złota kreseczka pod tytułem */
.separator-gold {
    width: 60px;
    height: 2px;
    background-color: #c9a25d; /* Twój złoty */
    margin: 0 auto;
}

/* Karta kategorii */
/* 1. Rodzic musi być bazą (relative) */
.cat-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    height: 100%;
    position: relative !important; /* KLUCZOWE: To jest baza dla linku */
    z-index: 1;
    display: block; /* Upewniamy się, że kafelek jest blokiem */
}
/* 2. Link musi przykryć wszystko jak tafla szkła */
.full-overlay-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999 !important; /* Bardzo wysoki indeks - link leży NA WIERZCHU */
    background-color: rgba(255, 255, 255, 0); /* Przezroczysty, ale fizyczny */
    cursor: pointer; /* Kursor rączki */
    display: block;
}
/* Zdjęcie */
.img-wrapper {
    overflow: hidden; /* Ukrywa powiększenie zdjęcia */
    position: relative;
}

.img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

/* Teksty pod zdjęciem */
.cat-content {
    padding: 20px;
    text-align: center;
}

.cat-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.cat-desc {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    color: #777;
    margin: 0;
    font-style: italic;
}

/* --- EFEKTY INTERAKCJI (HOVER) --- */

/* Po najechaniu na kafelek: */
.cat-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #c9a25d;
}

/* Zdjęcie się przybliża */
.cat-card:hover .img-wrapper img {
    transform: scale(1.05);
}

/* Tytuł zmienia się na złoty */
.cat-card:hover .cat-title {
    color: #c9a25d;
}

/* Link bez podkreślenia */
.cat-link:hover {
    text-decoration: none;
}


/* ==========================================================================
   STOPKA (FOOTER) - WARIANT "KLASYKA PREMIUM" (Styl Hampton/Meblefox)
   ========================================================================== */

/* 1. KONTENER GŁÓWNY */
#footer, .footer-container {
    background-color: #f9f9f9 !important; /* Czysta biel */
    color: #555555 !important;
    padding-top: 10px !important;
    padding-bottom: 0px !important;
}

/* 2. NAGŁÓWKI KOLUMN (np. Informacje, Kategorie) */
#footer .h4, 
.footer-container .h4, 
.footer-container span.h4,
.block-contact-title {
    font-family: 'Poppins', sans-serif !important; /* Prosta, nowoczesna czcionka */
    color: #000000 !important; /* Głęboka czerń dla kontrastu */
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-transform: none !important; /* Bez wielkich liter, wygląda nowocześniej */
    margin-bottom: 6px !important;
    letter-spacing: 0.5px;
}

/* 3. LINKI (Lista pionowa) */
#footer ul li {
    margin-bottom: 12px !important; /* Duże odstępy = luksus */
}

#footer a, #footer p, #footer li {
    color: #666666 !important; /* Grafitowy szary */
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    background: transparent !important;
}

/* 4. EFEKT HOVER (Złoty dotyk) */
#footer a:hover {
    color: #c9a25d !important; /* Twój złoty kolor */
    padding-left: 5px; /* Subtelny ruch w prawo */
}

/* 5. NAPRAWA UKŁADU (Żeby kolumny były równe) */
#footer .links-list li.col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
}
#footer .links-list li a span.ss_icon_group {
    display: none !important; /* Ukrywa ikonki dymków jeśli są */
}
/* --- LINIE ROZDZIELAJĄCE (STYL REFERENCYJNY - ZWARTE MENU) --- */
@media (max-width: 767px) {
    /* 1. Kontenery kolumn (Informacje, Kategorie, Dane firmy) */
    .footer-container .row > div {
        border-bottom: 1px solid #e5e5e5; /* Elegancka szara linia */
        margin-bottom: 0 !important;      /* KLUCZOWE: Usuwamy odstęp między klockami */
        padding-bottom: 0 !important;     /* Resetujemy padding kontenera */
    }

    /* 2. Stylizacja nagłówków wewnątrz (żeby tekst miał powietrze góra/dół) */
    .footer-container .row > div .h4,
    .footer-container .row > div .d-flex {
        padding-top: 5px !important;    /* Odstęp nad napisem */
        padding-bottom: 5px !important; /* Odstęp pod napisem (do linii) */
        margin-bottom: 0 !important;     /* Usuwamy marginesy nagłówków */
    }

    
}
/* 6. DOLNY PASEK (Copyright) */
.footer-bottom, .bottom-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #f9f9f9 !important;
    padding: 20px 0;
    color: #999 !important;
    font-size: 0.85rem !important;
    text-align: center; /* Wyśrodkowanie copyrightu */
}
/* ==========================================================================
   TRUST BAR SOFY24 - WERSJA FINALNA (Z ELEGANCKIMI WCIĘCIAMI)
   ========================================================================== */

/* 1. KONTENER GŁÓWNY (Marginesy zewnętrzne) */
.trust-banner-container {
    /* 25px góra/dół, 20px lewo/prawo (To daje bezpieczny odstęp od krawędzi) */
    padding: 25px 10px !important; 
    
    box-sizing: border-box !important;
    width: 100% !important;
    
    border-top: none !important;
    background: #f9f9f9;
    margin-top: 0px;
}

/* 2. ETYKIETY (Napisy np. "Płatności...") */
.trust-label {
    font-weight: 600;
    color: #333;
    font-size: 0.85rem;
    
    /* TU JEST KLUCZOWE WCIĘCIE NA PC (Odsunięcie napisów od logotypów) */
    margin-right: 35px !important; 
    
    white-space: nowrap;
    text-transform: none;
}

/* 3. IKONY (Logotypy) */
.trust-logos {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* PC: jedna linia */
}

.trust-logos img {
    max-height: 25px;
    width: auto;
    margin: 0 8px; /* Lekki luz między ikonami */
    transition: all 0.3s;
}

/* Opcjonalne wyszarzenie (jeśli chcesz kolorowe, usuń linię niżej) */
/* .trust-logos img { filter: grayscale(100%); opacity: 0.8; } */
/* .trust-logos img:hover { filter: grayscale(0); opacity: 1; } */


/* 4. UKŁAD PULPIT (Desktop > 768px) */
@media (min-width: 768px) {
    .trust-col {
        display: flex;
        align-items: center;
    }
    .border-desktop-sides {
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
    }
    .text-right { text-align: right; }
    .justify-center { justify-content: center; }
    .justify-end { justify-content: flex-end; }
    
    .trust-label { margin-bottom: 0; } 
}


/* 5. UKŁAD MOBILNY (Telefon < 767px) - Z WCIĘCIEM */
@media (max-width: 767px) {
    
    /* Upewniamy się, że kontener na telefonie też ma padding 20px */
    .trust-banner-container {
        padding: 25px 10px !important; 
    }

    .mobile-stack {
        display: block !important;
        text-align: left !important;
        border-bottom: 1px solid #eeeeee;
        
        /* Tutaj dajemy 0 po bokach, bo kontener nadrzędny już trzyma odstęp 20px */
        padding: 20px 0 !important; 
        margin: 0 !important;
    }
    
    .mobile-stack:last-child {
        border-bottom: 1px solid #eeeeee !important;
    }

    .trust-label {
        display: block;
        margin-bottom: 15px; /* Odstęp pod napisem */
        font-size: 0.95rem;
    }

    .trust-logos {
        justify-content: space-evenly !important;
        flex-wrap: wrap !important;
        
     
    }

    .trust-logos img {
        margin: 0 15px 10px 0 !important; /* Większe odstępy na dotyk */
        max-height: 30px; 
    }
    
    /* Dodatkowe zabezpieczenie marginesów dla reszty stopki na Sofy24 */
    .footer-container .container,
    .footer-container .row > div {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}
/* ==========================================================================
   FIX: NAPRAWA BRAKUJĄCEJ STRZAŁKI (DANE FIRMY)
   ========================================================================== */

/* 1. Wstawiamy kod strzałki "na siłę" do pustego elementu <i> */
a[href="#footer_contact_list"] .material-icons::before {
    content: "\e313"; /* To jest kod znaku strzałki w dół w Material Icons */
    font-family: 'Material Icons'; /* Wskazujemy, że to ma być ikonka */
    font-style: normal;
    display: block;
}

/* 2. Obsługa obracania (gdy klikniesz i rozwiniesz menu) */
a[href="#footer_contact_list"][aria-expanded="true"] .material-icons {
    transform: rotate(180deg); /* Obrót o 180 stopni */
    transition: transform 0.3s ease; /* Płynna animacja */
}
/* ==========================================================================
   NADПISANIE DOMYŚLNEGO MARGINESU STOPKI (Likwidacja dziury 40px)
   ========================================================================== */
.footer-container {
    margin-top: 15px !important;  /* To kasuje te 40px z theme.css */
    padding-top: 0 !important; /* Dla pewności kasujemy też górny padding */
}

/* ==========================================================================
   MODERN HEADER (NAGŁÓWEK) - SOFY24 / STYL HAMPTON
   ========================================================================== */

/* 1. ZMNIEJSZENIE WYSOKOŚCI I ODSTĘPÓW (DESKTOP + MOBILE) */
.header-top__content {
    /* Usuwamy domyślne duże odstępy (było ok. 20-30px) */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 2. KOREKTA LOGO (Żeby nie rozpychało nagłówka) */
.header-top__block--logo img {
    /* Zmniejszamy nieco logo, żeby nagłówek był zgrabniejszy */
    max-height: 75px !important; 
    width: auto !important;
    /* Płynne skalowanie przy zmianie rozmiaru okna */
    transition: all 0.3s ease;
}

/* 3. IDEALNE WYRÓWNANIE ELEMENTÓW (Logo - Szukajka - Ikony) */
.header-top__row {
    align-items: center !important; /* Wszystko w jednej linii poziomej */
}

/* 4. SZUKAJKA "PREMIUM" (Minimalistyczna linia zamiast pudełka) */
.search-form__input.form-control {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e5e5e5 !important; /* Tylko dolna linia */
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important; /* Tekst od samej krawędzi */
    font-size: 0.95rem;
    height: 40px !important;
}

/* Efekt po kliknięciu w szukajkę (Złota linia) */
.search-form__input.form-control:focus {
    border-bottom-color: #c9a25d !important;
    outline: none !important;
}

/* Przycisk lupki - czysty, bez tła */
.search-form__btn {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    padding: 0 10px !important;
}
.search-form__btn:hover {
    color: #c9a25d !important; /* Złoty kolor po najechaniu */
}

/* 5. IKONY (Konto, Koszyk) - Większe i wyrównane */
.header-top__icon {
    font-size: 28px !important; /* Troszkę większe dla wygody */
    color: #333;
    transition: color 0.3s;
}
.header-top__link:hover .header-top__icon {
    color: #c9a25d !important; /* Złoty hover */
}

/* 6. UKŁAD MOBILNY (Telefon) - Super Slim */
@media (max-width: 767px) {
    /* Jeszcze mniejsze logo na telefonie */
    .header-top__block--logo img {
        max-height: 45px !important; 
		margin-bottom: 5px;
    }
    
    /* Minimalne odstępy na telefonie */
    .header-top__content {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    
    /* Ikony na telefonie też nieco mniejsze, żeby pasowały */
    .header-top__icon {
        font-size: 24px !important;
    }
    
    /* Naprawa wysokości "sticky header" (żeby nie było pustej dziury pod nagłówkiem) */
    .js-header-top-wrapper {
        height: auto !important;
        min-height: 60px !important;
    }
}
/* ==========================================================================
   ZMIANA UKŁADU NAGŁÓWKA - WERSJA POPRAWIONA (ANTI-COLLAPSE)
   ========================================================================== */

@media (min-width: 768px) {
    
    /* 1. KONTENER GŁÓWNY - Blokujemy zawijanie */
    .header-top__row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* 2. LOGO - Pierwsze z lewej */
    .header-top__block--logo {
        order: 1 !important;
        flex: 0 0 auto !important; /* Sztywne, nie rozciąga się */
        width: auto !important;
        margin-right: 30px !important; /* Odstęp od szukajki */
        max-width: none !important;
    }

    /* 3. SZUKAJKA - Środek (NAPRAWA ZAPADANIA SIĘ) */
    .header-top__block--search {
        order: 2 !important;
        /* Tu był błąd. Teraz dajemy 100%, żeby zmusić ją do rozepchania się */
        flex-grow: 1 !important; 
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        min-width: 200px !important; /* ZABEZPIECZENIE: Nie może być węższa niż 200px */
        margin-right: 30px !important; /* Odstęp od ikon */
    }
    
    /* Wymuszenie szerokości na samym formularzu wewnątrz */
    #_desktop_search_from, 
    .search-form, 
    .search-form__form-group {
        width: 100% !important;
        display: flex !important;
    }
    
    /* Pole tekstowe musi widzieć, że ma miejsce */
    .search-form__input.form-control {
        width: 100% !important;
        min-width: 100px !important; 
    }

    /* 4. USER (Konto) - Na prawo */
    .header-top__block--user {
        order: 3 !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* 5. KOSZYK - Na samym końcu */
    .header-top__block--cart {
        order: 4 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: 10px !important;
    }
}
/* ==========================================================================
   PANCERNY CZARNY PASEK - NOWE NAZWY KLAS (RE-BRANDED)
   ========================================================================== */

/* Wymuszamy widoczność rodzica, który trzyma moduł */
.header-nav { display: block !important; background: #000 !important; padding: 0 !important; }

.premium-bar-wrapper {
    background: #000;
    height: 40px;
    width: 100%;
}

.black-premium-strip {
    height: 40px;
    overflow: hidden;
}

.premium-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    max-width: 1300px;
    margin: 0 auto;
}

.premium-item {
    display: flex;
    align-items: center;
    color: #ffffff !important;
    font-size: 11px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-decoration: none !important;
    padding: 0 15px;
}

.premium-item i {
    font-size: 16px !important;
    margin-right: 8px;
    color: #ffffff;
}

.premium-item:hover, .premium-item:hover i {
    color: #c9a25d !important;
}

/* --- UKŁAD PC --- */
@media (min-width: 992px) {
    .premium-track { display: flex; }
    .premium-badges-column .premium-item { border-right: 1px solid #333; }
}

/* ==========================================================================
   GÓRNY PASEK - SWIPE ZE STRZAŁKAMI NA MOBILE (FINAL)
   ========================================================================== */

/* --- SVG IKONA (mapa Polski) --- */
.premium-svg-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    stroke: currentColor;
}

/* --- STRZAŁKI NAWIGACYJNE --- */
.premium-arrow {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 10;
    flex-shrink: 0;
}

.premium-arrow i {
    font-size: 22px !important;
    margin: 0 !important;
    color: #ffffff !important;
}

.premium-arrow:hover i,
.premium-arrow:active i,
.premium-arrow:focus i {
    color: #c9a25d !important;
}

/* --- UKŁAD MOBILE --- */
@media (max-width: 991px) {
    
    /* Zmniejszona wysokość na mobile */
    .premium-bar-wrapper {
        height: 32px !important;
    }
    
    .black-premium-strip {
        height: 32px !important;
    }
    
    .premium-container { 
        display: flex !important;
        align-items: center !important;
        overflow: hidden;
        position: relative;
        padding: 0 !important;
        width: 100%;
        height: 32px !important;
    }
    
    .premium-arrow {
        height: 32px !important;
        padding: 0 8px !important;
    }
    
    .premium-arrow i {
        font-size: 20px !important;
    }
    
    .premium-badges-column {
        flex: 1;
        overflow: hidden;
        position: relative;
    }
    
    .premium-track {
        display: flex;
        transition: transform 0.4s ease-out;
    }
    
    .premium-item { 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 10px !important;
        box-sizing: border-box;
        flex-shrink: 0;
        text-align: center;
        font-size: 10px !important;
    }
    
    .premium-item i {
        font-size: 14px !important;
    }
    
    .premium-svg-icon {
        width: 14px;
        height: 14px;
        margin-right: 6px;
    }
    
    /* Ukryj duplikaty jeśli zostały */
    .premium-track .premium-item.d-lg-none { 
        display: none !important; 
    }
}

/* --- UKŁAD PC (bez zmian) --- */
@media (min-width: 992px) {
    .premium-track { 
        display: flex; 
        transform: none !important;
    }
    .premium-badges-column .premium-item { 
        border-right: 1px solid #333; 
        min-width: auto !important;
    }
    .premium-arrow {
        display: none !important;
    }
}
/* ==========================================================================
   OPISY KATEGORII - <details>/<summary> (SEO-friendly)
   ========================================================================== */

/* Górny opis */
#category-description.cms-content {
    display: block !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    font-size: 13px;
}

/* Dolny opis */
#category-description-2 {
    border-top: 1px solid #eee !important;
    padding-top: 20px !important;
}

/* Summary (przycisk rozwijania) */
.category-details summary.desc-toggle-btn {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #c9a25d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 0;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    list-style: none;
}

/* Usunięcie domyślnego trójkąta przeglądarki */
.category-details summary.desc-toggle-btn::-webkit-details-marker {
    display: none;
}

/* Strzałki ↓/↑ */
.category-details summary.desc-toggle-btn::after {
    content: ' ↓';
}
.category-details[open] summary.desc-toggle-btn::after {
    content: ' ↑';
}

/* Hover/focus */
.category-details summary.desc-toggle-btn:hover,
.category-details summary.desc-toggle-btn:focus {
    color: #b08a4a;
    outline: none;
}

/* Treść opisu */
.category-desc-content {
    font-size: 13px;
    text-align: left;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* ==========================================================================
   OKRUSZKI (BREADCRUMB) - LEKKA WERSJA PREMIUM Z SEPARATOREM >
   ========================================================================== */

.breadcrumb {
    background: transparent !important; /* Brak tła dla lekkości */
    padding: 15px 0 !important;
    margin-bottom: 10px !important;
    border: none !important;
}

.breadcrumb-item {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 300 !important; /* Cienka, luksusowa czcionka */
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #999999 !important;
}

.breadcrumb-item a {
    color: #999999 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.breadcrumb-item a:hover {
    color: #c9a25d !important; /* Złoty Hampton na hover */
}

.breadcrumb-item.active {
    color: #666666 !important;
    font-weight: 400 !important; /* Tylko lekko wyraźniejszy ostatni element */
}

/* ZAMIANA KRESKI NA ZNAK > */
.breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important; /* Twój nowy separator */
    color: #cccccc !important;
    font-weight: 300 !important;
    font-size: 10px !important;
    padding: 0 12px !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   SOFY24 - MASTER CODE v8.0 (FINAL: FIXED FLAGS & COMPACT BOTTOM)
   ========================================================================== */

/* --- 1. SIATKA I KARTY --- */
#products .products, 
.products.row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
    margin: 0 !important;
}



/* ==========================================================================
   SOFY24 - STYLIZACJA PAGINACJI (ZAOKRĄGLONA ELEGANCJA)
   ========================================================================== */

/* 1. KONTENER PAGINACJI */
.pagination {
    align-items: center !important;
    gap: 8px !important;
}

/* 2. WYGLĄD POJEDYNCZEGO KAFELKA (ZAOKRĄGLONY) */
.page-item .page-link {
    color: #222222 !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    
    /* ZMIANA: Większe zaokrąglenie */
    border-radius: 8px !important;
    
    min-width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* 3. HOVER (ZŁOTY) */
.page-item:not(.active) .page-link:hover {
    background-color: #c9a25d !important;
    border-color: #c9a25d !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* 4. AKTYWNA STRONA (CZARNA) */
.page-item.active .page-link {
    background-color: #222222 !important;
    border-color: #222222 !important;
    color: #ffffff !important;
    z-index: 2 !important;
    cursor: default !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* 5. STRZAŁKI */
.page-item .page-link .material-icons {
    font-size: 18px !important;
}

/* 6. WYŁĄCZONE ELEMENTY */
.page-item.disabled .page-link {
    background-color: #f9f9f9 !important;
    color: #cccccc !important;
    border-color: #f0f0f0 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* MOBILE FIX */
@media (max-width: 767px) {
    .page-item .page-link {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }
    .pagination {
        gap: 4px !important;
    }
}

/* ==========================================================================
   SLIDER ZDJĘĆ - WERSJA SOFY24 v13
   FIX: Paginacja AJAX + płynne przejście
   ========================================================================== */

/* KONTENER */
.product-thumb-container {
    position: relative !important;
    overflow: hidden !important;
    height: 200px !important;
    width: 100% !important;
    background: #ffffff;
    contain: layout style;
}

.product-thumb-container.has-gallery { cursor: pointer }

/* GŁÓWNE ZDJĘCIE - z transition dla płynnego ukrycia */
.product-thumb-container .product-thumb-main-link {
    position: absolute !important;
    inset: 0;
    display: block;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.product-thumb-container .product-thumb-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* WRAPPER SLIDERA - startuje niewidoczny, JS kontroluje opacity */
.product-thumb-slider-wrapper {
    position: absolute !important;
    inset: 0;
    overflow: hidden;
    z-index: 5;
    /* opacity kontrolowane przez JS */
}

.product-thumb-slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.product-thumb-slider .swiper-wrapper { height: 100% }

.product-thumb-slider .swiper-slide {
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.product-thumb-slider .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.product-thumb-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* STRZAŁKI */
.product-thumb-prev,
.product-thumb-next {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s, background .2s, border-color .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    border: 1px solid #eee;
    margin: 0 !important;
    padding: 0;
    color: transparent;
    will-change: opacity;
}

.product-thumb-prev { left: 8px }
.product-thumb-next { right: 8px }

.product-thumb-prev svg,
.product-thumb-next svg {
    width: 16px;
    height: 16px;
    stroke: #666;
    transition: stroke .2s;
}

.product-thumb-prev::after,
.product-thumb-next::after { display: none !important }

/* Hover strzałki - ZŁOTY */
.product-thumb-prev:hover,
.product-thumb-next:hover {
    background: #fff;
    border-color: #c9a25d;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.product-thumb-prev:hover svg,
.product-thumb-next:hover svg { stroke: #c9a25d }

/* DESKTOP: strzałki na hover */
.product-miniature:hover .product-thumb-prev,
.product-miniature:hover .product-thumb-next {
    opacity: 1;
    visibility: visible;
}

/* TABLET */
@media (max-width: 991px) {
    .product-thumb-prev,
    .product-thumb-next {
        width: 30px;
        height: 30px;
        background: rgba(255,255,255,.75);
    }
    
    .product-thumb-prev { left: 6px }
    .product-thumb-next { right: 6px }
    
    .product-thumb-prev svg,
    .product-thumb-next svg {
        width: 14px;
        height: 14px;
    }
    
    .product-miniature:hover .product-thumb-prev,
    .product-miniature:hover .product-thumb-next { opacity: .8 }
}

/* MOBILE */
@media (max-width: 767px) {
    .product-thumb-container {
        height: 160px !important;
        background: #fff;
    }
    
    .product-thumb-container .product-thumb-main-img,
    .product-thumb-slider .swiper-slide img {
        object-fit: contain;
        background: #fff;
    }
    
    .product-thumb-prev,
    .product-thumb-next {
        width: 26px;
        height: 26px;
        background: rgba(255,255,255,.6);
        border: none;
        box-shadow: 0 1px 4px rgba(0,0,0,.1);
    }
    
    .product-thumb-prev { left: 4px }
    .product-thumb-next { right: 4px }
    
    .product-thumb-prev svg,
    .product-thumb-next svg {
        width: 12px;
        height: 12px;
        stroke: #555;
    }
    
    /* Mobile: strzałki widoczne po inicjalizacji */
    .slider-initialized .product-thumb-prev,
    .slider-initialized .product-thumb-next {
        opacity: .6;
        visibility: visible;
    }
    
    .product-thumb-prev:active,
    .product-thumb-next:active {
        opacity: .9;
        background: rgba(255,255,255,.8);
    }
}

/* BARDZO MAŁE EKRANY */
@media (max-width: 480px) {
    .product-thumb-container { height: 140px !important }
    
    .product-thumb-prev,
    .product-thumb-next {
        width: 24px;
        height: 24px;
        background: rgba(255,255,255,.5);
    }
    
    .product-thumb-prev svg,
    .product-thumb-next svg {
        width: 10px;
        height: 10px;
    }
    
    .slider-initialized .product-thumb-prev,
    .slider-initialized .product-thumb-next { opacity: .5 }
}

/* FLAGI nad sliderem */
.product-thumb-container .product-flags { z-index: 15 !important }

/* 
   UWAGA: Ukrywanie głównego zdjęcia jest teraz kontrolowane przez JS
   NIE ma tu reguły .slider-initialized .product-thumb-main-link
   JS robi fade-out dopiero gdy slider jest gotowy
*/
/* ==========================================================================
   SOFY24 - MASTER CODE: STRONA PRODUKTU (LEWA + PRAWA KOLUMNA)
   ========================================================================== */

/* --- 1. NAGŁÓWEK (TYTUŁ) I CENA --- */
.product-detail .h1, 
.product-container h1 {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-transform: none !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
}

/* Cena główna */
.product-prices .price,
.product-prices .current-price {
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    display: inline-block !important;
    margin-bottom: 5px !important;
    letter-spacing: -0.5px !important;
}

/* Podatek / Brutto */
.tax-shipping-delivery-label {
    font-size: 12px !important;
    color: #999 !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* --- 2. GALERIA ZDJĘĆ (LEWA KOLUMNA) --- */
.product-cover,
.product-main-images {
    border: none !important;
    background: transparent !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.product-cover img,
.product-main-images img {
    width: 100% !important;
    height: auto !important;
    border-radius: 4px !important;
    border: 1px solid #f5f5f5 !important; /* Bardzo delikatna ramka */
}

/* Miniaturki pod zdjęciem */
.js-product-images, 
.product-thumbs {
    margin-top: 15px !important;
}

.product-thumbs img {
    border: 1px solid #eeeeee !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    opacity: 0.7 !important;
    cursor: pointer !important;
}

/* Aktywna miniaturka - ZŁOTA RAMKA */
.product-thumbs .thumb-container.selected img,
.product-thumbs .swiper-slide-thumb-active img,
.product-thumbs img:hover {
    border-color: #c9a25d !important;
    opacity: 1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}



/* Pola ilości (Input) */
.product-quantity input#quantity_wanted {
    height: 50px !important;
    border: 1px solid #e0e0e0 !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #222 !important;
}

.product-quantity .btn-touchspin {
    height: 50px !important;
    background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
}

/* --- 4. IKONY ZAUFANIA (DOSTAWA/ZWROT) --- */
.blockreassurance_product {
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f0f0f0 !important;
}

.blockreassurance_product > div {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    background: #fcfcfc !important;
    border: 1px solid #f5f5f5 !important;
    border-radius: 4px !important;
}

.blockreassurance_product svg {
    width: 24px !important;
    height: 24px !important;
    margin-right: 15px !important;
    fill: #c9a25d !important; /* Złote ikony */
}
/* Obsługa ikon SVG ze 'stroke' zamiast 'fill' */
.blockreassurance_product svg path {
    stroke: #c9a25d !important;
}

.blockreassurance_product .block-title {
    font-weight: 600 !important;
    color: #222 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
}

/* ==========================================================================
   ZAKŁADKI PRODUKTU — OPCJA 5: IKONY + BOCZNY AKCENT ZŁOTY
   ========================================================================== */
.product-tabs.card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.product-tabs .card-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.product-tabs .nav-tabs.card-header-tabs {
    border-bottom: none !important;
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.product-tabs .nav-item {
    margin-bottom: 0 !important;
}

.product-tabs .nav-link {
    border: none !important;
    color: #777 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 22px 14px 18px !important;
    position: relative !important;
    background: transparent !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Ikona przed tekstem */
.product-tabs .nav-link::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.35 !important;
    transition: opacity 0.3s ease !important;
}

/* Złoty pasek z lewej — aktywny tab */
.product-tabs .nav-link::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 0 !important;
    background: #c9a25d !important;
    border-radius: 0 4px 4px 0 !important;
    transition: width 0.3s ease !important;
}

/* Hover */
.product-tabs .nav-link:hover {
    background: rgba(200, 148, 62, 0.06) !important;
    color: #333 !important;
}
.product-tabs .nav-link:hover::before {
    opacity: 0.6 !important;
}

/* Aktywny tab */
.product-tabs .nav-link.active {
    color: #222 !important;
    background: rgba(200, 148, 62, 0.08) !important;
}
.product-tabs .nav-link.active::before {
    opacity: 1 !important;
}
.product-tabs .nav-link.active::after {
    width: 4px !important;
}

/* --- IKONY DLA POSZCZEGÓLNYCH TABÓW --- */

/* 1. Opis produktu — dokument */
.product-tabs .nav-item:nth-child(1) .nav-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232c3e3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") !important;
}

/* 2. Wymiary i parametry — siatka */
.product-tabs .nav-item:nth-child(2) .nav-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232c3e3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E") !important;
}

/* 3. Opinie klientów — gwiazdka */
.product-tabs .nav-item:nth-child(3) .nav-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232c3e3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") !important;
}

/* 4. Zapytaj — wiadomość */
.product-tabs .nav-item:nth-child(4) .nav-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232c3e3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

.product-description {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #444 !important;
}

/* --- 6. MOBILE FIXES --- */
@media (max-width: 767px) {
    .product-detail .h1 { font-size: 22px !important; }
    .product-prices .current-price { font-size: 26px !important; }
    
    
    /* Układ reassurance */
    .blockreassurance_product > div { padding: 8px !important; }
}
/* ==========================================================================
   SOFY24 - DETALE PRODUKTU (KONFIGURATOR + STRZAŁKI - WERSJA SCOPED)
   Poprawka: Styluje tylko galerię główną, nie psuje innych sliderów
   ========================================================================== */

/* --- 1. STRZAŁKI W GALERII GŁÓWNEJ (TYLKO TU!) --- */
.js-product-images .swiper-button-prev,
.js-product-images .swiper-button-next,
.js-product-images .swiper-button-custom {
    color: #111111 !important; /* Czarne strzałki */
    background-color: rgba(255, 255, 255, 0.9) !important; /* Białe tło */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important; /* Wymuszamy widoczność w galerii */
    visibility: visible !important;
}

/* Ikona w środku */
.js-product-images .swiper-button-prev::after,
.js-product-images .swiper-button-next::after {
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Hover - ZŁOTY */
.js-product-images .swiper-button-prev:hover,
.js-product-images .swiper-button-next:hover,
.js-product-images .swiper-button-custom:hover {
    color: #ffffff !important;
    background-color: #c9a25d !important;
    transform: scale(1.1);
}

/* --- 2. KONFIGURATOR (KAFELKI) --- */
.megaattrgroup-button {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    width: 100% !important;
}

.megaattrgroup-button:hover {
    border-color: #c9a25d !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px) !important;
}

.megaattrgroup-button .step-number {
    background-color: #222222 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    border-radius: 4px !important;
    margin-right: 15px !important;
    font-size: 14px !important;
}

.megaattrgroup-button.selected .step-number {
    background-color: #c9a25d !important;
}

.megaattrgroup-button .megaattr-flexrow1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.megaattrgroup-button .variant-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
}

.megaattrgroup-button .selected-material {
    font-size: 13px !important;
    color: #777 !important;
    font-weight: 400 !important;
}

.megaattrgroup-button:not([data-val="0"]) .selected-material {
    color: #c9a25d !important;
    font-weight: 600 !important;
}

/* Przycisk "SKONFIGURUJ PRODUKT" */
#MegaConfigTrigger {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    border-radius: 4px !important;
    transition: 0.3s !important;
}

#MegaConfigTrigger:hover {
    background-color: #c9a25d !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(201, 162, 93, 0.4) !important;
}

/* ==========================================================================
   SOFY24 - NAPRAWA MODUŁU OPINII (GWIAZDKI POD TYTUŁEM)
   ========================================================================== */

/* 1. KONTENER GŁÓWNY - Układ w jednej linii */
.product-rating-under-title #spr .row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}

/* 2. RESET KOLUMN BOOTSTRAPA */
.product-rating-under-title #spr .col-xs-12 {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* 3. GWIAZDKI */
.product-rating-under-title #spr input[type="radio"] {
    display: none !important;
}

.product-rating-under-title #spr label.star_custom_color {
    font-size: 16px !important;
    color: #c9a25d !important;
    margin: 0 1px !important;
    cursor: default !important;
    float: none !important;
    display: inline-block !important;
}

.product-rating-under-title #spr label {
    background: none !important;
}

/* 4. TEKST OBOK GWIAZDEK */
.product-rating-under-title #spr .average_text_info {
    margin-left: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.product-rating-under-title #spr .average_text_info br {
    display: none !important;
}

.product-rating-under-title #spr .average_text {
    font-size: 12px !important;
    color: #777777 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

/* Link "Read reviews" */
.product-rating-under-title #spr a#spr_scroll_to_review_tab {
    color: #222222 !important;
    text-decoration: underline !important;
    margin-left: 5px !important;
    font-weight: 600 !important;
}

.product-rating-under-title #spr a#spr_scroll_to_review_tab:hover {
    color: #c9a25d !important;
}
/* ==========================================================================
   CZĘŚĆ 1: KARTA PRODUKTU (GALERIA, GWIAZDKI, OPIS)
   ========================================================================== */

/* --- 1. STRZAŁKI W GALERII (Fixed & Scoped) --- */
/* Dotyczy tylko głównej galerii, nie psuje sliderów "zobacz także" */
.js-product-images .swiper-button-prev,
.js-product-images .swiper-button-next,
.js-product-images .swiper-button-custom {
    color: #111111 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
    opacity: 0; /* Ukryte domyślnie */
    visibility: hidden;
    margin-top: -20px !important;
    border: 1px solid #eee !important;
}

/* Pokaż strzałki po najechaniu myszką */
.js-product-images:hover .swiper-button-prev,
.js-product-images:hover .swiper-button-next,
.js-product-images:hover .swiper-button-custom {
    opacity: 1 !important;
    visibility: visible !important;
}

.js-product-images .swiper-button-prev::after,
.js-product-images .swiper-button-next::after {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.js-product-images .swiper-button-prev:hover,
.js-product-images .swiper-button-next:hover,
.js-product-images .swiper-button-custom:hover {
    background-color: #c9a25d !important; /* Złoty hover */
    color: #fff !important;
    transform: scale(1.1);
    border-color: #c9a25d !important;
}

/* --- 2. GWIAZDKI POD TYTUŁEM (NAPRAWA UKŁADU) --- */
/* Ustawia gwiazdki i tekst w jednej linii */
.product-rating-under-title #spr .row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}

/* Reset kolumn bootstrapa wewnątrz modułu opinii */
.product-rating-under-title #spr .col-xs-12 {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* Ukrycie inputów radio (kropek) przy gwiazdkach */
.product-rating-under-title #spr input[type="radio"] { display: none !important; }

/* Kolor gwiazdek */
.product-rating-under-title #spr label.star_custom_color {
    font-size: 16px !important;
    color: #c9a25d !important;
    margin: 0 1px !important;
    cursor: default !important;
    float: none !important;
    display: inline-block !important;
    background: none !important;
}

/* Tekst opinii "(5/5)..." */
.product-rating-under-title #spr .average_text_info {
    margin-left: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.product-rating-under-title #spr .average_text_info br { display: none !important; }

.product-rating-under-title #spr .average_text {
    font-size: 12px !important;
    color: #777 !important;
    font-weight: 400 !important;
}

/* Link "Read reviews" */
.product-rating-under-title #spr a#spr_scroll_to_review_tab {
    color: #222 !important;
    text-decoration: underline !important;
    margin-left: 5px !important;
    font-weight: 600 !important;
}
.product-rating-under-title #spr a#spr_scroll_to_review_tab:hover { color: #c9a25d !important; }

/* FIX: Menu dropdown nad flagami produktów */
.l-header, header#header {
    position: relative;
    z-index: 1000 !important;
}

/* ==========================================================================
   CZĘŚĆ 2: KONFIGURATOR - FINAL V20 (PC SLIDE FIX + MOBILE APP)
   ========================================================================== */

/* --- A. BLOKADA SKAKANIA TŁA --- */
html { scrollbar-gutter: stable !important; }
body.modal-open { overflow: hidden !important; padding-right: 0 !important; }

/* --- B. OKNO GŁÓWNE (DESKTOP - TU PRZYWRACAMY ROZSUWANIE) --- */
@media (min-width: 992px) {
    #MegaModal .modal-dialog {
        max-width: 1200px !important;
        width: 90% !important;
        min-height: 600px !important; 
        height: auto !important; /* Okno rośnie */
        margin: 5vh auto !important;
        /* ZMIANA: flex-start pozwala oknu rosnąć w dół od góry */
        display: flex !important;
        align-items: flex-start !important; 
        transform: none !important;
    }
    
    #MegaModal .modal-content {
        min-height: 600px !important;
        height: auto !important;
        border-radius: 8px !important;
        border: none !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: #fff !important;
    }

  #MegaModal .modal-body {
        flex: 1 1 auto !important;
        min-height: 400px !important;
        overflow-y: auto !important;
        height: auto !important;
        max-height: none !important;
        padding: 40px !important;
        position: relative !important;
    }
}

/* [FIX ANIMACJI ROZSUWANIA NA PC] */
/* Aby animacja działała, musi być konkretna wysokość, a nie 'none' */
#MegaModal .megaattr .megaattrgroup-panel {
    max-height: 5000px; /* Wystarczająco dużo, by pomieścić wszystko */
    height: auto;
    overflow: hidden;
    transition: max-height 0.6s ease-in-out; /* Płynne rozwijanie */
}

/* --- C. UKRYCIE LOADERA --- */
.megaattr-loader {
    display: none; 
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: transparent !important;
    z-index: 50 !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
}
.megaattr-loading { display: none !important; }
.megaattr-loader[style*="block"], .megaattr-loader[style*="display: block"] { display: flex !important; }

/* --- D. PASKI PODSUMOWANIA (PC - STICKY) --- */
.megaattrgroup-button {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-left: 5px solid #222 !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    padding: 0 15px !important;
    text-decoration: none !important;
    transition: none !important;
    width: 100% !important;
    min-height: 60px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    
    /* Przyklejanie belki na PC */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
}

.megaattrgroup-button:hover,
.megaattrgroup-button.active {
    border-color: #c9a25d !important;
    border-left-color: #c9a25d !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    transform: translateY(-1px);
}

.megaattrgroup-button .megaattr-flexcolumn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.megaattrgroup-button .step-number {
    background-color: #f4f4f4 !important;
    color: #222 !important;
    font-weight: 800 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    font-size: 14px !important;
    margin: 0 15px 0 0 !important;
    flex-shrink: 0 !important;
}

.megaattrgroup-button .megaattr-flexrow1 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-grow: 1 !important;
    width: auto !important;
}

.megaattrgroup-button .variant-name {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
}

.megaattrgroup-button .selected-material {
    font-size: 13px !important;
    color: #c9a25d !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.megaattrgroup-button .megaattr-flexrow:last-child {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: auto !important;
    height: 100% !important;
}

.megaattr .megaattrgroup-button .selected-image,
.megaattrgroup-button .selected-image {
    position: relative !important;
    top: auto !important; right: auto !important;
    display: block !important;
    width: 45px !important;
    height: 45px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
    margin: 0 !important;
    min-width: 45px !important;
    min-height: 45px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* --- E. KAFELKI (PC) --- */
.materials-list .material {
    border: 1px solid #eeeeee !important; 
    border-radius: 6px !important;
    margin-bottom: 15px !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #fff !important;
    cursor: pointer !important;
    min-height: 150px !important;
    position: relative !important;
    transform: translateZ(0); 
    backface-visibility: hidden;
    z-index: 1 !important;
}

.materials-list .material:hover,
.materials-list .material.selected {
    border-color: #c9a25d !important;
    box-shadow: inset 0 0 0 1px #c9a25d, 0 8px 20px rgba(201, 162, 93, 0.15) !important;
    transform: translateY(-3px);
}

.materials-list .material-image-wrapper {
    width: 100% !important;
    height: 110px !important;
    overflow: hidden !important;
    margin: 0 !important;
    position: relative !important;
    background: #f9f9f9 !important;
}

.materials-list .material-image {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.5s ease;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.materials-list .material:hover .material-image { 
    transform: scale(1.08) translateZ(0); 
}

/* Badge z ceną */
.materials-list .price-impact {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-bottom-left-radius: 6px !important;
    z-index: 10 !important;
    text-align: center !important;
    display: block !important;
    margin: 0 !important;
    height: auto !important;
}
.materials-list .material.selected .price-impact { background-color: #c9a25d !important; }

/* Nazwa */
.materials-list .caption {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 10px 5px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    color: #222 !important;
    height: 40px !important; 
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    margin: 0 !important;
}



/* --- F. STOPKA (PC - PRZYKLEJONA DO DOŁU OKNA) --- */
#MegaModal .modal-footer {
    background-color: #f9f9f9 !important;
    border-top: 1px solid #eee !important;
    padding: 15px 30px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    z-index: 100 !important;

    position: relative !important;
    bottom: auto !important;
}

#MegaModal .modal-footer .text-left.megaattr-product {
    order: 1 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important;
}
#MegaModal .modal-footer .col-md-12 {
    order: 2 !important; flex: 1 1 auto !important; text-align: right !important; margin: 0 !important; padding: 0 25px 0 0 !important;
}
.conf-price-display { font-size: 26px !important; font-weight: 800 !important; color: #111 !important; margin: 0 !important; line-height: 1 !important; }
#MegaModal .modal-footer .text-right.megaattr-product {
    order: 3 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important;
}

#configClose, #configAddToCart {
    width: auto !important; text-transform: uppercase !important; font-weight: 700 !important; padding: 0 30px !important;
    border-radius: 4px !important; transition: 0.3s !important; letter-spacing: 1px !important; height: 45px !important; line-height: 43px !important; font-size: 13px !important; white-space: nowrap !important;
}
#configClose { background-color: #ffffff !important; color: #222222 !important; border: 1px solid #cccccc !important; }
#configAddToCart { background-color: #222222 !important; color: #ffffff !important; border: 1px solid #222222 !important; }

/* --- G. MOBILE OPTIMIZATION (TUTAJ ZOSTAJE UKŁAD APKI) --- */
@media (max-width: 991px) {
    /* 1. Okno na cały ekran - TU ZACHOWUJEMY WEWNĘTRZNY SCROLL */
    #MegaModal .modal-dialog {
        width: 100% !important; height: 100% !important;
        max-width: none !important; margin: 0 !important; padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Na mobile rozciągamy */
    }
    #MegaModal .modal-content {
        height: 100% !important; min-height: 0 !important;
        border-radius: 0 !important; border: none !important;
        overflow: hidden !important; /* Suwak tylko w body */
    }

    /* 2. Przewijany środek */
    #MegaModal .modal-body {
        flex: 1 1 auto !important;
        /* Na mobile MUSI BYĆ SCROLL WEWNĘTRZNY, żeby stopka była fixed */
        overflow-y: scroll !important; 
        padding: 10px !important;
        height: auto !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    /* Na mobile usuwamy limit całkowicie (tam animacja jest mniej ważna niż miejsce) */
    #MegaModal .megaattr .megaattrgroup-panel {
        max-height: none !important;
    }

    /* 3. Kafelki Mobile */
    .materials-list .material {
        min-height: 0 !important; padding: 3px !important; margin-bottom: 8px !important;
    }
    .materials-list .material-image-wrapper { height: 85px !important; }
    .materials-list .caption {
        font-size: 11px !important; padding: 5px 2px !important; height: 35px !important; line-height: 1.1 !important;
    }

/* 4. Paski (NIE-STICKY) - Zwykłe paski na mobile */
    #MegaModal .megaattrgroup-button {
        min-height: 38px !important; height: auto !important; padding: 4px 8px !important; margin-bottom: 6px !important;
        position: static !important; /* Usuwa sticky */
        top: auto !important;
        z-index: auto !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    }
    #MegaModal .megaattrgroup-button .step-number {
        width: 26px !important; height: 26px !important; font-size: 11px !important; margin-right: 8px !important;
    }
    #MegaModal .megaattrgroup-button .megaattr-flexrow1 {
        flex-direction: row !important; /* Nazwa i wybór w jednej linii */
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        flex-grow: 0 !important; /* <--- DODANA BLOKADA PO TWOICH TESTACH */
    }
    #MegaModal .megaattrgroup-button .variant-name { 
        font-size: 11px !important; margin-bottom: 0 !important; line-height: 1 !important; white-space: nowrap !important; width: auto !important; flex: 0 0 auto !important;
    }
    #MegaModal .megaattrgroup-button .variant-name::after { 
        content: ":" !important; 
    }
    #MegaModal .megaattrgroup-button .megaattr-flexrow1 .megaattr-flexcolumn {
        width: auto !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; justify-content: flex-start !important;
    }
       #MegaModal .megaattrgroup-button .selected-material { 
        font-size: 11px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: none !important; margin-bottom: 0 !important; line-height: 1 !important;
    }

    #MegaModal .megaattrgroup-button .selected-image { 
        width: 24px !important; height: 24px !important; min-width: 24px !important; border-radius: 3px !important; top: auto !important; right: auto !important; margin: 0 !important;
    }
    #megaattr-search-info {
        display: none !important;
    }

    /* 5. STOPKA */
    #MegaModal .modal-footer {
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 100 !important;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.05) !important;
        padding: 10px 10px !important;
        background: #fff !important;
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        /* Na mobile stopka nie jest sticky, bo kontener flex trzyma ją na dole */
        position: static !important;
    }

    /* Cena */
    #MegaModal .modal-footer .col-md-12 {
        order: 1 !important; flex: 0 0 100% !important; width: 100% !important; 
        text-align: center !important; padding: 0 0 10px 0 !important; height: auto !important;
    }
    .conf-price-display { font-size: 22px !important; margin: 0 !important; }

    /* Zamknij */
    #MegaModal .modal-footer .text-left.megaattr-product {
        display: block !important; order: 2 !important; flex: 0 0 48% !important; width: 48% !important; padding: 0 !important; margin: 0 !important;
    }

    /* Dodaj */
    #MegaModal .modal-footer .text-right.megaattr-product {
        order: 3 !important; flex: 0 0 48% !important; width: 48% !important; padding: 0 !important; margin: 0 !important;
    }

    /* Przyciski */
    #configClose, #configAddToCart { 
        width: 100% !important; height: 40px !important; line-height: 38px !important; font-size: 12px !important; padding: 0 !important;
    }
}

/* Przycisk na stronie produktu */
#MegaConfigTrigger {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    border-radius: 4px !important;
    transition: 0.3s !important;
    display: block !important;
}
#MegaConfigTrigger:hover {
    background-color: #c9a25d !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(201, 162, 93, 0.4) !important;
}

/* ==========================================================================
   FIX: USUNIĘCIE LIMITU 400px Z MODUŁU - POPRAWIONE SELEKTORY
   ========================================================================== */

/* KLUCZOWE: Ten selektor pasuje do oryginalnego z megaattr.css */
.megaattr.megaattr-horizontal .megaattrgroup-panel,
.megaattr.megaattr-horizontal1 .megaattrgroup-panel,
#MegaModal.megaattr .megaattrgroup-panel,
#MegaModal.megaattr.megaattr-horizontal .megaattrgroup-panel,
.megaattrgroup-panel {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Modal body - nadpisuje inline height z JS */
#MegaModal .modal-body,
#MegaModal .modal-body[style],
#MegaModal.megaattr .modal-body,
#MegaModal.megaattr.megaattr-horizontal .modal-body,
.megaattr .modal-body,
.megaattr.megaattr-horizontal .modal-body {
    height: auto !important;
    min-height: 60vh !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

/* Modal content */
#MegaModal .modal-content,
#MegaModal.megaattr .modal-content {
    max-height: 95vh !important;
    height: auto !important;
    min-height: 600px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Modal dialog */
#MegaModal .modal-dialog,
#MegaModal.megaattr .modal-dialog {
    max-height: 95vh !important;
    height: auto !important;
}


/* 3. Wstawienie białego znaku "!" do środka */
.megaattr .megaattrgroup-button .variant-req::after,
.megaattr .megaattrgroup-button .variant-req0::after {
    content: "!" !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    font-family: sans-serif !important;
    line-height: 1 !important;
    display: block !important;
}
/* ==========================================================================
   CLEAN UI: UKRYWANIE PUSTYCH ELEMENTÓW I WYKRZYKNIKA
   ========================================================================== */

/* 1. CAŁKOWITE USUNIĘCIE WYKRZYKNIKA */
.megaattr .megaattrgroup-button .variant-req,
.megaattr .megaattrgroup-button .variant-req0 {
    display: none !important;
}

/* 2. UKRYWANIE MINIATURY, GDY NIC NIE JEST WYBRANE */
/* Jeśli span nie ma ustawionego tła (obrazka), ukrywamy go całkowicie */
.megaattr .megaattrgroup-button .selected-image:not([style*="background-image"]) {
    display: none !important;
    border: none !important;      /* Brak ramki */
    box-shadow: none !important;  /* Brak cienia */
    width: 0 !important;          /* Zerowa szerokość */
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* KOREKTA: Gdy obrazek się pojawi (jest wybrany), przywracamy wygląd */
.megaattr .megaattrgroup-button .selected-image[style*="background-image"] {
    display: block !important;
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    margin-left: 10px !important; /* Odsunięcie od tekstu, gdy się pojawi */
}
/* ========================================
   FIX: Fancybox 5 - przesunięcie strony
   ======================================== */

/* Metoda 1: Stabilny scrollbar - zapobiega przeskakiwaniu */
html {
    scrollbar-gutter: stable;
}

/* Metoda 2: Usuń margin-right dodawany przez Fancybox na body */
html.with-fancybox body,
body.hide-scrollbar {
    margin-right: 0 !important;
}

/* Metoda 3: Wyzeruj CSS variable Fancybox */
html.with-fancybox {
    --fancybox-scrollbar-compensate: 0px !important;
}

/* Napraw szerokość fixed elementów podczas lightbox */
html.with-fancybox .header-top,
html.with-fancybox .is-sticky,
html.with-fancybox [style*="position: fixed"] {
    width: 100% !important;
    max-width: 100vw !important;
}

/* Alternatywnie: nadpisz padding-right na fixed elementach */
html.with-fancybox .header-top {
    padding-right: var(--fancybox-scrollbar-compensate, 0) !important;
    box-sizing: border-box !important;
}
/* ==========================================================================
   KONFIGURATOR - ZAZNACZANIE MATERIAŁÓW (dolna część)
   ========================================================================== */

/* Dolna część materiału - klikalny obszar */
.megaattr .material .caption,
.megaattr .material .material-selector-wrapper,
.megaattr .material .price-impact {
    cursor: pointer;
}

/* Większy radio button */
.megaattr .material .material-selector {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Zaznaczony materiał - subtelna ramka (bez białego tła) */
.megaattr .material.selected {
    background: transparent;
    border: 2px solid #333;
    border-radius: 4px;
}

/* Hover na materiale */
.megaattr .material:hover {
    border-color: #999;
}

/* Obrazek - kursor lupy */
.megaattr .material .material-image-link {
    cursor: zoom-in;
}

/* Dolna część - wyróżnienie */
.megaattr .material .caption {
    padding: 4px 2px;
    transition: color 0.2s;
}

.megaattr .material:hover .caption {
    color: #000;
}

.megaattr .material.selected .caption {
    font-weight: 600;
}
/* ==========================================================================
   STICKY BELKI - UKŁADANIE JEDNA POD DRUGĄ
   ========================================================================== */

/* Kontener modala - bez paddingu na górze */
#MegaModal .modal-body {
    padding-top: 0 !important;
}

/* Reset - wszystkie belki sticky */
.megaattr .megaattrgroup-button {
    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: 40 !important;
    background: #fff !important;
    margin-top: 0 !important;
}

/* Pierwsza belka - do samej góry */
.megaattr .megaattrgroup-button:nth-of-type(1) { 
    top: 0px !important; 
    z-index: 45 !important; 
}

/* Kolejne belki - pod pierwszą */
.megaattr .megaattrgroup-button:nth-of-type(2) { top: 55px !important; z-index: 44 !important; }
.megaattr .megaattrgroup-button:nth-of-type(3) { top: 110px !important; z-index: 43 !important; }
.megaattr .megaattrgroup-button:nth-of-type(4) { top: 165px !important; z-index: 42 !important; }
.megaattr .megaattrgroup-button:nth-of-type(5) { top: 220px !important; z-index: 41 !important; }

/* Mobile */
@media (max-width: 991px) {
    .megaattr .megaattrgroup-button:nth-of-type(1) { top: 0px !important; }
    .megaattr .megaattrgroup-button:nth-of-type(2) { top: 50px !important; }
    .megaattr .megaattrgroup-button:nth-of-type(3) { top: 100px !important; }
    .megaattr .megaattrgroup-button:nth-of-type(4) { top: 150px !important; }
    .megaattr .megaattrgroup-button:nth-of-type(5) { top: 200px !important; }
}
/* Radio button wrapper - bez marginesu górnego */
.megaattr .materials-list .material .material-selector-wrapper {
    margin-top: 0 !important;
    padding: 5px 0 !important;
}
/* ==========================================================================
   PŁYNNE PRZEŁĄCZANIE PANELI KONFIGURATORA
   ========================================================================== */

/* Szybsza animacja slideToggle */
.megaattr .megaattrgroup-panel {
    transition: height 0.15s ease-out !important;
}

/* Belki - bez transform przy hover (powoduje przeskok) */
.megaattrgroup-button:hover,
.megaattrgroup-button.active {
    transform: none !important;
}

/* Stabilne belki sticky - bez cienia który się zmienia */
.megaattr .megaattrgroup-button {
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* Przyciski w modal footer - mniejszy margines */
.megaattr .modal-footer button {
    margin-bottom: 3px !important;
}
/* Automatyczna wysokość miniatur - PC i mobile */
.materials-list .material-image-wrapper {
    height: auto !important;
}

.materials-list .material-image,
.materials-list .material-image-link {
    aspect-ratio: 1 / 1;
}
/* Mobile - footer przyklejony do dołu (bez przeskoku) */
@media (max-width: 991px) {
    /* Modal na pełny ekran */
    #MegaModal .modal-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
    
    #MegaModal .modal-content {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
    }
    
 /* Modal body - ZAWSZE z paddingiem na dole dla footera */
    #MegaModal .modal-body,
    #MegaModal.megaattr .modal-body,
    #MegaModal.megaattr.megaattr-horizontal .modal-body {
        padding-bottom: 90px !important;
        height: auto !important;
        min-height: calc(100vh - 90px) !important;
        min-height: calc(100dvh - 90px) !important;
        max-height: none !important;
    }
    
    /* Footer przyklejony */
    #MegaModal .modal-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 85px !important;
        background: #fff !important;
        padding: 10px 15px !important;
        margin: 0 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        z-index: 1060 !important;
    }
}
/* ==========================================================================
   NAGŁÓWEK KONFIGURATORA Z X
   ========================================================================== */

#MegaModal .megaattr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 50;
}

#MegaModal .megaattr-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

#MegaModal .megaattr-close-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 28px;
    text-align: center;
    color: #666;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

#MegaModal .megaattr-close-btn:hover {
    color: #000;
}

/* Mobile */
@media (max-width: 991px) {
    #MegaModal .megaattr-header {
        padding: 2px 10px;
    }
    
    #MegaModal .megaattr-header-title {
        font-size: 14px;
    }
}
/* --- FIX: UKRYWANIE PUSTYCH BADGE'Y CENY --- */
.materials-list .price-impact:empty {
    display: none !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* --- FIX: NAPRAWA WIELKOŚCI I ROZSTAWU GWIAZDEK --- */

/* 1. Reset kontenera gwiazdek (kasujemy wpływ kolumn Bootstrapa) */
.product-rating-under-title #spr .star_custom_size {
    font-size: 13px !important; /* Zmniejszamy z 20px na 13px (eleganckie) */
    width: auto !important;     /* Kontener zajmuje tyle miejsca ile trzeba, nie 50% */
    min-width: 0 !important;
    display: inline-flex !important; /* Gwiazdki w rządku, zwarte */
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Same gwiazdki (Label) */
.product-rating-under-title #spr label.star_custom_color {
    font-size: 13px !important; /* Upewniamy się, że gwiazdka jest mała */
    margin: 0 1px 0 0 !important; /* Minimalny odstęp tylko z prawej (1px) */
    padding: 0 !important;
    width: auto !important;
    line-height: 1 !important;    /* Żeby nie były wysokie */
    float: none !important;       /* Wyłączamy pływanie z modułu */
}

/* 3. Dosunięcie tekstu opinii do gwiazdek */
.product-rating-under-title #spr .average_text_info {
    margin-left: 6px !important; /* Mniejszy odstęp od gwiazdek */
    font-size: 11px !important;  /* Troszkę mniejszy tekst "1 ocen" */
}
/* --- FIX: KOMPAKTOWE OKRUSZKI (BREADCRUMB) --- */

/* 1. Kontener paska - kasujemy zbędne odstępy */
.breadcrumb, nav.breadcrumb {
    padding: 10px 0 0 0 !important; /* Zmniejszone z 15px na 5px */
    margin-bottom: 5px !important; /* Mniejszy odstęp od dołu */
    background: transparent !important;
    min-height: auto !important;
}

/* 2. Jeśli Twój szablon ma wrapper dookoła, też go zerujemy */
.breadcrumb_wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Elementy listy - poprawa interlinii */
.breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.3 !important; /* Żeby tekst nie rozpychał się w pionie */
}

/* 4. FIX NA MOBILE (Mniejsza czcionka, żeby się nie łamało na 3 linie) */
@media (max-width: 767px) {
    .breadcrumb-item {
        font-size: 9px !important; /* Mniejsza czcionka na telefon */
        letter-spacing: 0.5px !important; /* Ciaśniejsze litery */
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 4px !important; /* Mniejsze odstępy przy znaku ">" */
    }
    
    /* Ukrywamy nagłówek "Strona główna" na mobile (zostaje tylko ikona domku jeśli jest), oszczędza miejsce */
    .breadcrumb-item:first-child a {
        display: inline-block;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}
/* --- FIX: USUNIĘCIE DZIURY POD NAGŁÓWKIEM --- */

/* 1. Zerujemy margines całego nagłówka */
.l-header, header#header {
    margin-bottom: 0 !important; /* Było 20px */
    padding-bottom: 0 !important;
}

/* 2. Upewniamy się, że wrapper treści pod spodem też nie ma odstępu */
#wrapper {
    padding-top: 0 !important; /* Często jest tu 20px */
}

/* 3. Dodatkowe dociśnięcie na mobile (jeśli menu PM Advanced Menu robi odstęp) */
@media (max-width: 767px) {
    #_desktop_top_menu, .adtm_menu_container {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }
}
/* ==========================================================================
   OPINIE - KARTA OPINII (gsnippetsreviews) - FIX v3
   Wszystkie selektory z #spr żeby pokonać hook.css
   ========================================================================== */

/* --- 1. UKRYCIE ZBĘDNYCH ELEMENTÓW --- */
#spr .spr_product_page_explain,
#spr .spr_expand_less,
#spr #spr_expand_less,
#spr .spr_expand {
    display: none !important;
}

/* Puste kolumny w top-reviews (tytuł, badge) */
#spr .spr_product_page_reviews .top-reviews .pull-center,
#spr .spr_product_page_reviews .top-reviews > .col-xs-12.pull-right {
    display: none !important;
}

/* --- 2. KONTENER OPINII (KARTA) --- */
/* Nadpisuje #spr .review_container { min-height:150px; padding:10px 15px } */
#spr .review_container.spr_product_page_reviews {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    min-height: 0 !important;
    gap: 0 !important;
    border: none !important;
    border-bottom: 1px solid #eee !important;
    padding: 12px 20px !important;
    margin: 0 !important;
}

/* Nadpisuje #spr .spr_product_page_reviews { flex:100%; margin-top:15px } */
#spr .spr_product_page_reviews {
    flex: none !important;
    margin-top: 0 !important;
}

/* --- 3. GWIAZDKI --- */
#spr .spr_product_page_reviews .top-reviews {
    width: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
}

/* Reset .row i .mb-2 */
#spr .spr_product_page_reviews .row.mb-2.top-reviews {
    margin: 0 12px 0 0 !important;
}

/* Kolumny Bootstrapa wewnątrz - reset */
#spr .spr_product_page_reviews .top-reviews > [class*="col-"] {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    float: none !important;
}

/* Div z block_stars.tpl - gwiazdki w jednej linii */
#spr .spr_product_page_reviews .top-reviews .col-xs-12 > div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

/* Styl pojedynczej gwiazdki - złoty */
#spr .progress-stars {
    color: #FFD700 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* --- 4. TEKST OPINII --- */
#spr .spr_product_page_reviews > div:not(.top-reviews):not(.pull-right):not(.pull-left):not(.row) {
    flex: 1 1 0 !important;
    min-width: 200px !important;
    display: flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
}

#spr .review_text {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #444 !important;
    line-height: 1.5 !important;
    border: none !important;
}

/* --- 5. AUTOR - BEZPOŚREDNIO POD TEKSTEM --- */
#spr .spr_product_page_reviews > .pull-right {
    flex-basis: 100% !important;
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
    float: none !important;
    line-height: 1.2 !important;
}

#spr .review_customer {
    font-size: 11px !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* --- 6. RESET WEWNĘTRZNYCH MARGINESÓW --- */
#spr .review_container.spr_product_page_reviews .row {
    margin: 0 !important;
}

#spr .review_container.spr_product_page_reviews [class*="mb-"] {
    margin-bottom: 0 !important;
}

#spr .review_container.spr_product_page_reviews [class*="mt-"] {
    margin-top: 0 !important;
}

/* --- 7. ODPOWIEDŹ SPRZEDAWCY --- */
#spr .review_text_answer_head {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #666 !important;
}

#spr .review_text_answer {
    font-size: 13px !important;
    color: #555 !important;
    font-style: italic !important;
}
/* Ikona "zweryfikowano" - złoto-brąz */
#spr .spr-icon_success {
    color: #c5a258 !important;
}
#spr .spr_product_page_top_block h4 > i.material-icons:not(.spr-icon_success):not(.spr-icon_danger) {
    display: none !important;
}

/* --- 8. MOBILE --- */
@media (max-width: 767px) {
    #spr .spr_product_page_reviews > div:not(.top-reviews):not(.pull-right):not(.pull-left):not(.row) {
        flex-basis: 100% !important;
        margin-top: 6px !important;
    }

    /* Nagłówek opinii - gwiazdki pod tekstem na mobile */
    #spr .spr_product_page_top_block {
        display: flex !important;
        flex-flow: column nowrap !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    #spr .spr_product_page_top_block > div {
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #spr .spr_product_page_top_block > div:last-child {
        display: none !important;
    }
}
/* ==========================================================================
   WYMIARY I PARAMETRY — CZYSTY HTML + CSS
   ========================================================================== */

.product-features {
    margin-top: 20px !important;
    background: #fff !important;
}

/* --- PRODUCENT (bez zmian) --- */
.product-manufacturer {
    margin-bottom: 0 !important;
    padding-bottom: 15px !important;
    padding-top: 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}
.product-manufacturer::before {
    content: "PRODUCENT";
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    color: #999 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: block !important;
}
.product-manufacturer img {
    max-height: 40px !important;
    width: auto !important;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: 0.3s;
    display: block !important;
}
.product-manufacturer img:hover { filter: grayscale(0%); opacity: 1; }

/* --- UKRYCIE NAGŁÓWKA "OPIS" --- */
.product-features > h3,
.product-features > p.h6 {
    display: none !important;
}

/* ==============================================
   HERO BOXY
   ============================================== */
.pf-hero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.pf-hero__box {
    background: linear-gradient(135deg, #faf7f2 0%, #fff 100%);
    border: 1px solid #e8e4de;
    border-radius: 12px;
    padding: 24px 14px 18px;
    text-align: center;
    transition: all 0.3s ease;
}

.pf-hero__box:hover {
    border-color: #c9a25d;
    box-shadow: 0 6px 20px rgba(200,148,62,0.12);
    transform: translateY(-2px);
}

.pf-hero__value {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #2c3e3a;
    line-height: 1.2;
}

.pf-hero__label {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #c9a25d;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 8px;
}

/* ==============================================
   SIATKA DETALI
   ============================================== */
.pf-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #f0ece6;
}

.pf-details__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid #f0ece6;
    transition: background 0.2s ease;
}

.pf-details__row:nth-child(odd) {
    border-right: 1px solid #f0ece6;
    padding-right: 24px;
}

.pf-details__row:nth-child(even) {
    padding-left: 24px;
}

.pf-details__row:hover {
    background: rgba(200, 148, 62, 0.04);
}

.pf-details__label {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #888;
}

.pf-details__value {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #2c3e3a;
}
.pf-details__value--yes {
    color: #3a8f5c !important;
}

/* ==============================================
   MOBILE
   ============================================== */
@media (max-width: 767px) {
    .pf-hero {
        gap: 8px;
        margin: 16px 0;
    }

    .pf-hero__box {
        padding: 16px 8px 14px;
    }

    .pf-hero__value {
        font-size: 17px;
    }

    .pf-hero__label {
        font-size: 8px;
        margin-top: 5px;
    }
.pf-details {
        grid-template-columns: 1fr;
    }

    .pf-details__row {
        padding: 11px 0;
    }

    .pf-details__row:nth-child(odd) {
        border-right: none;
        padding-right: 0;
    }

    .pf-details__row:nth-child(even) {
        padding-left: 0;
    }
}

/* ==========================================================================
   ZAKŁADKI PRODUKTU — ACCORDION NA MOBILE
   Desktop: taby bez zmian (styl z product-tabs.css)
   Mobile: accordion z rozwijaniem
   ========================================================================== */

/* --- ACCORDION HEADERS (domyślnie ukryte) --- */
.product-tabs .accordion-header {
    display: none;
}

/* --- MOBILE: ZAMIANA TABS → ACCORDION --- */
@media (max-width: 767px) {

    /* Ukryj pasek tabów */
    .product-tabs .card-header {
        display: none !important;
    }

    /* Resetuj tab-content */
    .product-tabs .tab-content {
        padding: 0 !important;
    }

    /* Wszystkie panele */
    .product-tabs .tab-pane {
        display: block !important;
        opacity: 1 !important;
        height: 0;
        overflow: hidden;
        padding: 0 !important;
    }

    /* Otwarty panel */
    .product-tabs .tab-pane.accordion-open {
        height: auto;
        overflow: visible;
        padding: 5px 0 !important;
    }

    /* Animacja wjazdu treści */
    @keyframes accordionFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .product-tabs .tab-pane.accordion-open > * {
        animation: accordionFadeIn 0.7s ease forwards;
    }
/* Pokaż nagłówki accordion — OPCJA 5: IKONY + BOCZNY AKCENT */
    .product-tabs .accordion-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 12px 14px 16px;
        border-bottom: 1px solid #e5e5e5;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        border-radius: 10px;
        margin-bottom: 4px;
        position: relative;
        transition: all 0.3s ease;
        border: none;
    }
    .product-tabs .accordion-header:first-of-type {
        border-top: none;
    }

    /* Złoty pasek z lewej — aktywny */
    .product-tabs .accordion-header::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 0;
        background: #c9a25d;
        border-radius: 0 4px 4px 0;
        transition: width 0.3s ease;
    }

        .product-tabs .accordion-header {
        background: rgba(200, 148, 62, 0.08);
    }

    .product-tabs .accordion-header.accordion-active::before {
        width: 4px;
    }

    /* Ikona przed tytułem */
    .product-tabs .accordion-header span {
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: #777;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .product-tabs .accordion-header span::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        min-width: 20px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.35;
        transition: opacity 0.3s ease;
    }

    .product-tabs .accordion-header.accordion-active span {
        color: #222;
    }

    .product-tabs .accordion-header.accordion-active span::before {
        opacity: 1;
    }

    /* Ikony per accordion (nth-child: 1=Opis, 3=Wymiary, 5=Opinie, 7=Zapytaj) */
    .product-tabs .tab-content > div:nth-child(1) span::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232c3e3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
    }
    .product-tabs .tab-content > div:nth-child(3) span::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232c3e3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
    }
    .product-tabs .tab-content > div:nth-child(5) span::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232c3e3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
    }
    .product-tabs .tab-content > div:nth-child(7) span::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232c3e3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    }

    /* Chevron */
    .product-tabs .accordion-header .accordion-chevron {
        width: 32px;
        height: 32px;
        border: 1px solid #ddd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease, border-color 0.3s ease;
        flex-shrink: 0;
    }

    .product-tabs .accordion-header .accordion-chevron::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid #666;
        border-bottom: 2px solid #666;
        transform: rotate(45deg);
        margin-top: -3px;
        transition: transform 0.3s ease;
    }

    /* Otwarty stan chevron */
    .product-tabs .accordion-header.accordion-active .accordion-chevron {
        border-color: #c9a25d;
    }

    .product-tabs .accordion-header.accordion-active .accordion-chevron::after {
        transform: rotate(-135deg);
        margin-top: 3px;
    }
}
/* ==========================================================================
   ZAKŁADKA "ZAPYTAJ" (FORMULARZ) - PREMIUM STYLE
   ========================================================================== */

/* 1. KONTENER GŁÓWNY */
.x13askabouttheproduct_form {
    max-width: 800px !important; /* Ograniczamy szerokość, żeby nie był rozciągnięty */
    margin: 20px auto !important; /* Środkowanie */
    padding: 10px !important;
}

/* 2. WIERSZE FORMULARZA */
.x13askabouttheproduct_form .form-group.row {
    margin-bottom: 20px !important; /* Większe odstępy między polami */
    align-items: center !important; /* Wyrównanie etykiety do środka pola */
}

/* 3. ETYKIETY (IMIĘ, EMAIL...) */
.x13askabouttheproduct_form label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: right !important; /* Na komputerze etykiety do prawej */
    padding-right: 20px !important;
}

/* Gwiazdka wymagane (ukrywamy domyślną czerwoną, robimy złotą kropkę jeśli trzeba, lub zostawiamy standard) */
.x13askabouttheproduct_form label.required:after {
    color: #c9a25d !important; /* Złota gwiazdka */
}

/* 4. POLA (INPUTY) */
.x13askabouttheproduct_form .form-control {
    background-color: #fcfcfc !important; /* Bardzo jasne tło */
    border: 1px solid #e0e0e0 !important; /* Delikatna ramka */
    border-radius: 4px !important; /* Lekkie zaokrąglenie */
    padding: 12px 15px !important; /* Duży, wygodny padding */
    font-size: 14px !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* Aktywne pole (po kliknięciu) */
.x13askabouttheproduct_form .form-control:focus {
    background-color: #fff !important;
    border-color: #c9a25d !important; /* Złota ramka po kliknięciu */
    box-shadow: 0 0 0 3px rgba(201, 162, 93, 0.1) !important; /* Złota poświata */
}

/* Pole tekstowe (Textarea) */
.x13askabouttheproduct_form textarea.form-control {
    min-height: 120px !important; /* Wyższe pole na treść */
    resize: vertical !important;
}

/* 5. PRZYCISK "WYŚLIJ" */
.x13askabouttheproduct_form .btn-primary {
    background-color: #222 !important; /* Czarny */
    color: #fff !important;
    border: none !important;
    padding: 12px 40px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    margin-top: 10px !important;
}

.x13askabouttheproduct_form .btn-primary:hover {
    background-color: #c9a25d !important; /* Złoty hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(201, 162, 93, 0.3) !important;
}

/* 6. MOBILE (DOSTOSOWANIE DO TELEFONU) */
@media (max-width: 767px) {
    .x13askabouttheproduct_form {
        padding: 0 !important;
        margin: 10px 0 !important;
        max-width: 100% !important;
    }

    /* Etykiety nad polami */
    .x13askabouttheproduct_form label {
        text-align: left !important;
        padding-right: 0 !important;
        padding-bottom: 5px !important;
        margin-bottom: 0 !important;
        font-size: 12px !important;
        color: #777 !important; /* Lżejszy kolor na mobile */
    }

    /* Przycisk na całą szerokość */
    .x13askabouttheproduct_form .form-footer {
        text-align: center !important;
    }
    
    .x13askabouttheproduct_form .btn-primary {
        width: 100% !important;
        padding: 15px !important; /* Łatwiejsze klikanie */
    }
    
    /* Inputy */
    .x13askabouttheproduct_form .form-control {
        font-size: 16px !important; /* Zapobiega zoomowaniu na iPhone */
    }
}
/* ==========================================================================
   FIX FINALNY: TREŚĆ ZAKŁADEK (MOBILE) - ODDECH I SZEROKOŚĆ
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Kontener treści - ZMNIEJSZAMY MARGINESY */
    .product-tabs .card-body {
        padding-top: 10px !important;   /* Mały odstęp od paska zakładek */
        padding-bottom: 20px !important;
        padding-left: 10px !important;  /* Boki: 15px to standard mobile */
        padding-right: 10px !important;
    }

    /* 2. Reset pierwszego elementu tekstu (żeby nie robił dziury u góry) */
    .product-description > *:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* 3. Pasek zakładek - dopasowanie wcięcia do treści */
    /* Żeby napis "OPIS" zaczynał się w tym samym pionie co tekst opisu */
    .product-tabs .nav-tabs {
        padding-left: 15px !important; 
        padding-right: 15px !important;
    }
    
    /* Zmniejszenie odstępu pod paskiem */
    .product-tabs .card-header {
        margin-bottom: 5px !important; /* Maksymalne zbliżenie paska do treści */
        border-bottom: 1px solid #f5f5f5 !important;
    }
}
/* ==========================================================================
   STYLIZACJA OPISU - WERSJA BEZPIECZNA (STYL + LINKI)
   ========================================================================== */

/* 1. OGÓLNA TYPOGRAFIA (CZYTELNOŚĆ) */
.product-description {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    color: #5a5a5a !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* 2. NAGŁÓWKI H2 (Jeśli występują w opisie) */
.product-description h2 {
    font-size: 18px !important;
    color: #5a5a5a !important;
    font-weight: 700 !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eee !important;
    line-height: 1.4 !important;
}

/* 3. POGRUBIENIA (STRONG) JAKO NAGŁÓWKI SEKCJI */
/* Nie używamy display:block, żeby nie robić podwójnych enterów. 
   Tylko kolorujemy i powiększamy, ufając enterom w HTML. */
.product-description strong,
.product-description b {
    color: #5a5a5a !important;
    font-weight: 600 !important;
}

/* 4. ZWYKŁE AKAPITY */
.product-description p {
    margin-bottom: 10px !important;
}

/* 5. STYLIZACJA LINKÓW (NA ZŁOTO) */
.product-description a {
    color: #c9a25d !important;        /* Twój złoty */
    font-weight: 600 !important;
    text-decoration: underline !important; /* Podkreślenie, żeby było widać że to link */
    transition: all 0.3s ease !important;
}

/* Hover linku */
.product-description a:hover {
    color: #000 !important;           /* Po najechaniu czarny */
    text-decoration: none !important;
    background-color: #fff8e1 !important; /* Delikatne tło po najechaniu */
}

/* 6. FIX: NAPRAWA LINKÓW POGRUBIONYCH */
/* To naprawia sytuację, gdy link w środku ma <strong> i robił się czarny */
.product-description a strong,
.product-description a span,
.product-description a b {
    color: #c9a25d !important; /* Wymuszamy złoty nawet dla pogrubienia w linku */
    cursor: pointer !important;
}

/* Hover dla pogrubionego linku */
.product-description a:hover strong,
.product-description a:hover span,
.product-description a:hover b {
    color: #000 !important;
}

/* 7. LISTY PUNKTOWANE (Jeśli użyjesz <ul> w edytorze) */
.product-description ul {
    margin-bottom: 14px !important;
    padding-left: 20px !important;
}
.product-description ul li {
    margin-bottom: 2px !important;
    list-style: none !important;
}
/* === CA Raty obok ceny === */
.product-price-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.product-price-row #caraty {
    margin: 0 0 5px 0!important;
    padding: 0 !important;
    line-height: 1;
}

.product-price-row #caraty img {
    max-height: 30px;
    width: auto;
}
/* Ukryj oryginalne wyświetlanie w displayProductAdditionalInfo */
.product-additional-info > #caraty {
    display: none !important;
}

/* ==========================================================================
   BUTTON TELEFONU W NAGŁÓWKU (POPRAWIONY DLA MOBILE)
   ========================================================================== */

/* 1. Wygląd przycisku na komputerze (Pigułka z ramką) */
.custom-phone-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    
    border: 2px solid #c9a25d;
    border-radius: 50px;
    padding: 6px 15px;
    background-color: transparent; /* Upewniamy się, że nie ma tła */
    
    color: #000;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* 2. DOSTOSOWANIE DO TELEFONU (MOBILE) - TU JEST NAPRAWA */
@media (max-width: 767px) {
    

    
    /* Ukrywamy numer telefonu */
    .custom-phone-btn  {
        display: none !important;
    }
    

    /* !!! KLUCZOWE: ROZPYCHANIE LOGO !!! */
    /* Dzięki temu logo urośnie i zajmie miejsce zwolnione przez telefon */
    #header .header-logo,
    .header-logo {
        flex: 1 !important;        /* Zajmij całe wolne miejsce! */
        display: flex;
        justify-content: flex-start; /* Wyrównaj do lewej */
        padding-left: 0 !important;
    }
    
    #header .header-logo img {
        max-height: 40px !important; /* Pozwalamy logo być wyższym */
        width: auto !important;
        max-width: 100% !important;
    }
}

/* OPCJA 5. Jeśli jednak CHCESZ numer na telefonie (może być ciasno!) */
/* Odkomentuj poniższe linie, jeśli numer ma być widoczny na mobile: */
/*
@media (max-width: 767px) {
    .custom-phone-btn .phone-number {
        display: block !important;
        font-size: 12px;
    }
    .custom-phone-btn {
        border: 1px solid #c9a25d;
        padding: 4px 8px;
    }
}
*/
/* ==========================================================================
   USTAWIENIE KOLEJNOŚCI W NAGŁÓWKU (PC) - TELEFON ZA WYSZUKIWARKĄ
   ========================================================================== */
@media (min-width: 992px) { /* Tylko na komputerach (powyżej tabletu) */
    
    /* 1. Logo - Pierwsze z lewej */
    .header-top__block--logo {
        order: 1 !important;
    }

    /* 2. Wyszukiwarka - Druga (Środek) */
    .header-top__block--search {
        order: 2 !important;
    }

    /* 3. Telefon - Trzeci (W Twoim wybranym miejscu) */
    .header-top__block--phone {
        order: 3 !important;
        margin-left: 20px !important;  /* Odstęp od wyszukiwarki */
        margin-right: 20px !important; /* Odstęp od ikonek */
        flex-grow: 0 !important;       /* Nie rozciągaj się, zajmij tylko tyle ile trzeba */
    }

    /* 4. Ikony Użytkownika i Koszyka - Na samym końcu */
    .header-top__block--user {
        order: 4 !important;
    }
    
    .header-top__block--cart {
        order: 5 !important;
    }
    
    /* Jeśli są jakieś inne elementy (np. wishlist), wrzuć je na koniec */
    .header-top__row > div {
        order: 6; 
    }
}
/* FIX: Zielony pasek po wybraniu konfiguracji */
.megaattr-combination-icon .material-icons {
    font-size: 16px !important;
    color: #999 !important;
}
.megaattr-combination-result.has-selection .megaattr-combination-icon .material-icons {
    color: #38a169 !important;
}

/* 1. ZMIANA KOLORU LICZNIKA W KOSZYKU */
.header-top__badge.header-top__badge--smaller {
    background-color: #000000 !important; /* Elegancka czerń zamiast niebieskiego */
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    border: 2px solid #ffffff; /* Biała obwódka, żeby badge "odcinał się" od ikony */
    top: -5px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. POPRAWA WYGLĄDU PRZYCISKU TELEFONU */
.custom-phone-btn {
    display: flex;
    align-items: center;
    background: #f8f8f8; /* Delikatne jasnoszare tło */
    padding: 8px 15px;
    border-radius: 25px;
    border: 1px solid #e0e0e0;
    text-decoration: none !important;
    color: #333 !important;
    transition: all 0.3s ease;
}

.custom-phone-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-color: #c5a57d; /* Złoty akcent przy najechaniu */
}

.custom-phone-btn i {
    margin-right: 8px;
    font-size: 20px;
    color: #c5a57d; /* Złoty kolor słuchawki */
}

.phone-number {
    font-weight: 700;
    font-size: 14px;
}

/* 3. SUBTELNE EFEKTY DLA IKONY KONTA I KOSZYKA */
.header-top__block--user .header-top__icon,
.header-top__block--cart .header-top__icon {
    font-size: 30px; /* Nieco większe ikony dla lepszej klikalności */
    color: #333;
    transition: color 0.3s ease;
}

.header-top__link:hover .header-top__icon {
    color: #c5a57d; /* Zmiana koloru ikon na złoty przy najechaniu */
}

/* Usunięcie domyślnych niebieskich obwódek i podkreśleń */
.header-top__link, .header-top__link:hover {
    text-decoration: none;
    outline: none;
}


/* ==========================================================================
   PASEK KONTAKTOWY (nad stopką)
   ========================================================================== */

.contact-bar {
    background-color: #f9f9f9;
    border-bottom: 1px solid #e8e8e8;
    padding: 22px 15px;
    width: 100%;
    box-sizing: border-box;
}

.contact-bar__row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

.contact-bar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0;
    justify-content: center;
    padding: 5px 10px;
}

/* Separatory pionowe */
.contact-bar__item + .contact-bar__item {
    border-left: 1px solid #e8e8e8;
}

/* Kółko z ikoną */
.contact-bar__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border: 2px solid #d4c5a0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background-color: #faf8f3;
}

.contact-bar__icon i {
    font-size: 21px;
    color: #c9a25d;
    transition: color 0.3s ease;
}

/* Hover */
.contact-bar__item:hover .contact-bar__icon {
    background-color: #c9a25d;
    border-color: #c9a25d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 162, 93, 0.25);
}

.contact-bar__item:hover .contact-bar__icon i {
    color: #fff;
}

/* Tekst */
.contact-bar__text {
    display: flex;
    flex-direction: column;
}

.contact-bar__label {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.contact-bar__value {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    text-decoration: none !important;
    line-height: 1.3;
}

a.contact-bar__value:hover {
    color: #c9a25d;
}

/* MOBILE */
@media (max-width: 767px) {
    .contact-bar {
        padding: 15px;
    }

    .contact-bar__row {
        flex-direction: column;
        gap: 0;
    }

    .contact-bar__item {
        justify-content: flex-start;
        width: 100%;
        flex: none;
        padding: 14px 10px;
    }

    .contact-bar__item + .contact-bar__item {
        border-left: none;
        border-top: 1px solid #f0f0f0;
    }

    .contact-bar__icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .contact-bar__icon i {
        font-size: 20px;
    }

    .contact-bar__value {
        font-size: 14px;
    }
}

/* TABLET */
@media (min-width: 768px) and (max-width: 991px) {
    .contact-bar__row {
        flex-wrap: wrap;
    }

    .contact-bar__item {
        flex: 1 1 45%;
        justify-content: flex-start;
        padding: 10px 15px;
    }

    .contact-bar__item:nth-child(odd) {
        border-left: none;
    }

    .contact-bar__item:nth-child(n+3) {
        border-top: 1px solid #e8e8e8;
    }
}
/* Stylizacja listy danych firmy */
.footer-address-list {
    list-style: none !important; /* Usuwa kropki */
    padding: 0 !important;
    margin: 0 !important;
}

.footer-address-list li {
    margin-bottom: 6px !important; /* Odstępy między liniami */
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* Opis marki na górze */
.footer-address-list .brand-desc {
    color: #333; /* Nieco ciemniejszy kolor */
    margin-bottom: 12px !important;
}

/* Pusta przestrzeń (separator) */
.footer-address-list .separator {
    height: 8px; /* Pusta przerwa między opisem a danymi firmy */
    margin: 0 !important;
}

/* Nazwa prawna firmy - Pogrubiona */
.footer-address-list .legal-name {
    font-weight: 700;
    color: #1a1a1a;
}

/* NIP - Lekko mniejszy, techniczny */
.footer-address-list .nip {
    font-family: 'Courier New', monospace; /* Techniczny font dla numerów (opcjonalne) */
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #444;
    margin-top: 4px !important;
}
/* ==========================================================================
   PASEK SORTOWANIA I WIDOKU (NAD PRODUKTAMI) - GOLD STYLE
   ========================================================================== */

/* 1. OGÓLNY KONTENER */
#js-product-list-top {
    margin-bottom: 20px !important;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0; /* Delikatna linia oddzielająca od produktów */
}

/* 2. POLA WYBORU (Sortowanie + Ilość na stronę) */
#js-product-list-top .custom-select {
    height: 40px !important; /* Wysokość dopasowana do filtrów */
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    color: #444 !important;
    font-weight: 500 !important;
    cursor: pointer;
    
    /* USUNIĘCIE STAREJ STRZAŁKI */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* NOWA ZŁOTA STRZAŁKA (SVG) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a25d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
    padding-right: 30px !important; /* Miejsce na strzałkę */
    padding-left: 15px !important;
    
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

/* Efekt po najechaniu lub kliknięciu w listę */
#js-product-list-top .custom-select:hover,
#js-product-list-top .custom-select:focus {
    border-color: #c9a25d !important; /* Złota ramka */
}

/* 3. IKONY ZMIANY WIDOKU (Siatka / Lista) */
/* Domyślny stan (nieaktywny) - Szary */
#js-product-list-top .display-toggle__link {
    color: #b0b0b0 !important; /* Jasny szary zamiast czarnego/niebieskiego */
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

#js-product-list-top .display-toggle__icon {
    font-size: 24px !important;
}

/* Stan AKTYWNY lub HOVER - Złoty */
#js-product-list-top .display-toggle__link.active,
#js-product-list-top .display-toggle__link:hover {
    color: #c9a25d !important; /* Twój złoty kolor */
    background-color: #fffbf0; /* Bardzo jasne złote tło (opcjonalnie) */
}

/* Usunięcie domyślnych teł/ramek jeśli szablon je dodaje */
#js-product-list-top .display-toggle__elem {
    padding: 0 2px !important;
}

/* ==========================================================================
   STICKY MENU (Advanced Top Menu) - przyklejanie pod headerem na DESKTOP
   Używamy position:sticky w JS - dropdown działa poprawnie
   ========================================================================== */

/* Menu kiedy jest przyklejone */
#_desktop_top_menu.is-sticky-menu {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

/* Wewnętrzny kontener zachowuje max-width i centruje się */
#_desktop_top_menu.is-sticky-menu #adtm_menu_inner {
    max-width: 1300px;
    margin: 0 auto;
}

/* Fancybox fix */
html.with-fancybox #_desktop_top_menu.is-sticky-menu {
    padding-right: inherit;
}

#_desktop_top_menu.adtm_menu_container.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================================
   FIX: Usunięcie luki/przeskoku między nagłówkiem a menu nawigacji
   ========================================================================== */
.header-top,
.header-top__content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#_desktop_top_menu,
.adtm_menu_container,
#adtm_menu {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.js-header-top-wrapper {
    margin-bottom: 0 !important;
}
/* Oceny na liście: pełny tekst PC, krótki mobile */
.spr-short { display: none; }

@media (max-width: 767px) {
    .spr-full { display: none !important; }
    .spr-short { display: inline !important; }
}
/* ==========================================================================
   SIDEBAR - WIDGET KONTAKTOWY (PREMIUM GOLD)
   ========================================================================== */

/* Kontener główny widgetu */
.sidebar-widget.contact-widget-premium {
    background-color: #fcfcfc; /* Spójne z tłem filtra */
    border: 1px solid #e5e5e5;
    border-top: 3px solid #c9a25d; /* ZŁOTA LINIA */
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 30px; /* Odstęp od kolejnego elementu */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    text-align: left;
    font-family: 'Poppins', sans-serif;
}

/* Nagłówek "Obsługa Klienta" */
.contact-widget-premium .widget-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.contact-widget-premium .title {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-widget-premium .subtitle {
    font-size: 12px;
    color: #c9a25d; /* Złoty akcent */
    font-weight: 600;
    margin: 0;
}

/* Sekcja "Biuro" */
.contact-widget-premium .contact-section {
    margin-bottom: 15px;
}

.contact-widget-premium .label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 2px;
}

.contact-widget-premium .phone-link {
    display: block;
    text-decoration: none;
    color: #222;
    transition: color 0.3s ease;
}

.contact-widget-premium .phone-link:hover {
    color: #c9a25d; /* Złoty po najechaniu */
}

.contact-widget-premium .main-phone {
    font-size: 20px; /* Duży numer */
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.contact-widget-premium .note {
    display: block;
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}

/* ZDJĘCIE KONSULTANTKI - WERSJA PEŁNA (BEZ OBCINANIA) */
.contact-widget-premium .consultant-image {
    margin: 15px -20px; /* Rozciągnięcie na całą szerokość boksu */
    overflow: hidden;
    position: relative;
    height: auto !important; /* ZMIANA: Wysokość dopasuje się do zdjęcia */
    min-height: 100px; /* Zabezpieczenie przed skakaniem przy ładowaniu */
}

.contact-widget-premium .consultant-image img {
    width: 100%;
    height: auto !important; /* ZMIANA: Zachowaj proporcje */
    object-fit: contain; /* ZMIANA: Pokaż całe zdjęcie */
    display: block; /* Usuwa puste miejsce pod zdjęciem */
}

/* Stopka (Komórka i Email) */
.contact-widget-premium .contact-footer {
    padding-top: 10px;
}

.contact-widget-premium .mobile-phone {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.contact-widget-premium .email-link {
    font-size: 14px;
    color: #555;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.contact-widget-premium .email-link:hover {
    color: #c9a25d;
}

/* Ikony w stopce */
.contact-widget-premium i.material-icons {
    font-size: 16px;
    color: #c9a25d; /* Złote ikonki */
    margin-right: 8px;
}
/* ==========================================================================
   SIDEBAR - WIDGET "DLACZEGO WARTO" (PREMIUM GOLD)
   ========================================================================== */

.sidebar-widget.advantages-widget-premium {
    background-color: #fcfcfc;      /* Jasne, czyste tło */
    border: 1px solid #e5e5e5;      /* Delikatna ramka */
    border-top: 3px solid #c9a25d;  /* ZŁOTA LINIA NA GÓRZE */
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 30px;            /* Odstęp od dołu */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    text-align: left;
    font-family: 'Poppins', sans-serif;
}

/* Nagłówek */
.advantages-widget-premium .widget-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.advantages-widget-premium .title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

/* Pojedynczy wiersz (Ikona + Tekst) */
.advantages-widget-premium .advantage-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
}

.advantages-widget-premium .advantage-item:last-child {
    margin-bottom: 0 !important;
}

/* --- KOLUMNA Z IKONĄ --- */
.advantages-widget-premium .icon-col {
    flex: 0 0 40px !important;      /* Stała szerokość na ikonę */
    width: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding-top: 2px !important;    /* Wyrównanie z pierwszą linią tekstu */
}

.advantages-widget-premium .icon-col i {
    font-size: 26px !important;
    color: #c9a25d !important;      /* Twój złoty kolor */
}

/* --- KOLUMNA Z TEKSTEM --- */
.advantages-widget-premium .text-col {
    flex: 1 !important;
}

.advantages-widget-premium .text-col h5 {
    font-size: 13px !important;
    font-weight: 700 !important;    /* Pogrubiony tytuł */
    color: #222 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

.advantages-widget-premium .text-col p {
    font-size: 12px !important;     /* Czytelny, ale drobny tekst */
    color: #666 !important;         /* Szary kolor opisu */
    line-height: 1.5 !important;    /* Dobry oddech między liniami */
    margin: 0 !important;
    text-align: left !important;
}
/* ==========================================================================
   TRUST BAR POD LISTĄ PRODUKTÓW (KATEGORIA) - PREMIUM STYLE
   ========================================================================== */

/* 1. Kontener główny - pasek */
.custom-trust-bar-list {
    display: flex;
    justify-content: space-around; /* Równe odstępy */
    align-items: center;
    padding: 30px 0;
    margin-top: 40px; /* Odstęp od produktów */
    border-top: 1px solid #f0f0f0; /* Delikatna linia oddzielająca od góry */
    border-bottom: 1px solid #f0f0f0; /* Opcjonalna linia na dole */
    background: #fcfcfc;
    width: 100%;
}

/* 2. Pojedynczy element (Ikona + Tekst) */
.custom-trust-bar-list .trust-item {
    display: flex;
    align-items: center;
    gap: 15px; /* Odstęp ikony od tekstu */
    flex: 1;
    justify-content: center;
}

/* 3. Ikona SVG */
.custom-trust-bar-list .trust-icon svg {
    width: 42px;
    height: 42px;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover efekt dla ikony */
.custom-trust-bar-list .trust-item:hover .trust-icon svg {
    transform: scale(1.1);
}

/* 4. Teksty */
.custom-trust-bar-list .trust-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.custom-trust-bar-list .trust-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    line-height: 1.2;
}

.custom-trust-bar-list .trust-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #777;
    font-weight: 400;
}

/* ==========================================================================
   TRUST BAR POD PAGINACJĄ - MOBILE FIX (JEDNA LINIA)
   ========================================================================== */

@media (max-width: 767px) {
    /* 1. KONTENER GŁÓWNY - WYMUSZAMY POZIOM */
    .custom-trust-bar-list {
        flex-direction: row !important;       /* To naprawia Twój problem (było column) */
        flex-wrap: nowrap !important;         /* Nie zawijaj do nowej linii */
        justify-content: space-around !important; 
        align-items: flex-start !important;   
        gap: 5px !important;
        padding: 15px 5px !important;
    }

    /* 2. POJEDYNCZY ELEMENT - IKONA NAD TEKSTEM */
    /* Żeby 3 elementy zmieściły się obok siebie, układamy je pionowo w środku */
    .custom-trust-bar-list .trust-item {
        flex-direction: column !important;    /* Ikona wędruje NAD tekst */
        justify-content: flex-start !important;
        align-items: center !important;       /* Wyśrodkowanie */
        text-align: center !important;
        padding: 0 2px !important;            
        flex: 1 1 33% !important;             /* Każdy element ma 1/3 szerokości */
        width: 33% !important;
        min-width: 0 !important;
    }

    /* 3. DOPASOWANIE IKONY */
    .custom-trust-bar-list .trust-icon {
        margin-bottom: 8px !important;        /* Odstęp ikony od tekstu */
        margin-right: 0 !important;           /* Kasujemy margines boczny wersji PC */
    }
    
    .custom-trust-bar-list .trust-icon svg {
        width: 32px !important;               /* Mniejsza ikona na telefon */
        height: 32px !important;
    }

    /* 4. DOPASOWANIE TEKSTÓW */
    .custom-trust-bar-list .trust-content {
        align-items: center !important;       /* Centrowanie tekstów */
        width: 100% !important;
    }

    .custom-trust-bar-list .trust-title {
        font-size: 10px !important;           /* Mniejsza czcionka */
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;       /* Pozwól na łamanie tekstu w 2 linie */
        height: auto !important;             
        min-height: 24px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-bottom: 3px !important;
    }

    .custom-trust-bar-list .trust-desc {
        font-size: 9px !important;            
        line-height: 1 !important;
        display: block !important;           
        white-space: nowrap !important;      
    }
}

/* Slider na stronie głównej */
/* =============================================
   HOMESLIDER CAPTION STYLING - sofy24.pl
   ============================================= */

/* Slide container - relative positioning for caption overlay */
.homeslider__slide {
  position: relative;
  overflow: hidden;
}

.homeslider__slide a {
  display: block;
  position: relative;
}

/* Ciemniejszy gradient */
.homeslider__slide a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.5) 20%,
    rgba(0, 0, 0, 0.15) 35%,
    transparent 50%
  );
  z-index: 1;
  pointer-events: none;
}

/* Caption container */
.homeslider__caption {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  padding: 40px 60px;
  max-width: 550px;
  background: none; /* usuwamy bialy box */
}

/* Title */
.homeslider__title {
  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;
}

/* Description */
.homeslider__desc {
  margin: 0 0 24px 0;
}

.homeslider__desc p {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Złoty button */
.homeslider__caption .btn-fake {
  display: inline-block;
  padding: 14px 36px;
  background-color: #C5A47E;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
  border: none;
  border-radius: 31px;
  letter-spacing: 0.02em;
  margin-top: 16px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
  cursor: pointer;
}

.homeslider__caption .btn-fake:hover {
  background-color: #b08d68;
  color: #ffffff;
  transform: translateY(-1px);
}

/* =============================================
   RESPONSIVE - TABLET
   ============================================= */
@media (max-width: 992px) {
  .homeslider__caption {
    padding: 30px 40px;
    max-width: 450px;
  }

  .homeslider__title {
    font-size: 30px;
  }

  .homeslider__desc p {
    font-size: 15px;
  }

  .homeslider__caption .btn-fake {
    padding: 12px 28px;
    font-size: 14px;
  }
}

/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */
@media (max-width: 576px) {
  .homeslider__slide a::before {
    width: 100%;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.3) 50%,
      transparent 100%
    );
  }

  .homeslider__caption {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    max-width: 100%;
    padding: 24px 20px;
    text-align: center;
    pointer-events: none;
  }

  .homeslider__caption a,
  .homeslider__caption .btn-fake {
    pointer-events: auto;
  }

  .homeslider__title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .homeslider__desc p {
    font-size: 14px;
  }

  .homeslider__caption .btn-fake {
     display: inline-block;
        width: auto;
        padding: 10px 20px;
        font-size: 13px;
  }
}

/* =============================================
   POPULARNE KATEGORIE - SWIPER
   ============================================= */
.kategorie-section {
  max-width: 1400px;
  margin: 15px auto;
  position: relative;
}

.kategorie-section__title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 24px 0;
}

.kategorie-wrapper {
  position: relative;
}

/* Slide */
.kategorie-section .swiper-slide {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  aspect-ratio: 3 / 4;
  max-height: 320px;
}

.kategorie-section .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
  position: relative;
}

.kategorie-section .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.4s ease;
}

.kategorie-section .swiper-slide:hover img {
  transform: scale(1.05);
}

/* Label NA zdjęciu */
.kategorie-section .kategoria-label {
  position: absolute !important;
  top: 16px !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: fit-content;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 30px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* Navigation arrows */
.kategorie-wrapper .swiper-button-next,
.kategorie-wrapper .swiper-button-prev {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #1a1a1a !important;
}

.kategorie-wrapper .swiper-button-next::after,
.kategorie-wrapper .swiper-button-prev::after {
  font-size: 14px !important;
  font-weight: 700;
}



/* RESPONSIVE */
@media (max-width: 768px) {
  .kategorie-section .swiper-slide {
    max-height: 260px;
  }
}

@media (max-width: 576px) {
  .kategorie-section__title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .kategorie-section .swiper-slide {
    max-height: 220px;
  }

  @media (max-width: 576px) {
  .kategorie-section .kategoria-label {
    font-size: 11px !important;
    padding: 6px 12px;
    white-space: normal !important;
    text-align: center;
    max-width: 90%;
  }
}
}
/* ==========================================================================
   SEKCJA SEO - TEKST
   ========================================================================== */

.seo-content-section .text-content {
  max-width: 1100px;
  margin: 0 auto;
}

.seo-content-section p {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  text-align: left;
}

/* Nagłówki SEO */
.section-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: #1a1a1a;
  margin-top: 36px;
  margin-bottom: 16px;
  text-align: center;
  position: relative;
  border-left: none;
  padding-left: 0;
}

.section-heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: #C5A47E;
  margin: 10px auto 0 auto;
}

/* Linki */
.gold-link {
  color: #C5A47E;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #C5A47E;
}

.gold-link:hover {
  color: #b08d68;
  border-bottom-color: transparent;
}

/* Lista */
.custom-gold-list {
  list-style: none;
  padding-left: 0;
  columns: 2;
  max-width: 400px;
  margin: 10px auto;
}

.custom-gold-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 15px;
  color: #555;
}

.custom-gold-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #C5A47E;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 8px;
}

/* ==========================================================================
   KAFELKI SEO - LINKI DO KATEGORII
   ========================================================================== */

.seo-card {
  background: #f8f7f4;
  border: none;
  padding: 24px;
  transition: all 0.3s ease;
  border-radius: 8px;
  height: 100%;
  position: relative;
  text-align: center !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.seo-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #1a1a1a;
  transition: color 0.3s;
}

.seo-card .small {
  font-size: 13px !important;
  line-height: 1.5;
}

.seo-card:hover {
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.seo-card:hover .seo-card-title {
  color: #C5A47E;
}

.full-overlay-link {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999 !important;
  background-color: transparent;
  cursor: pointer;
  display: block;
  outline: none !important;
  border: none !important;
  text-decoration: none !important;
}
/* KAFELKI SEO - ZWIJANE (CSS only) */
.seo-toggle-input {
  display: none !important;
}

.seo-cards-toggle {
  display: block;
  margin: 0 auto 24px;
  color: #C5A47E;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.seo-cards-toggle::after {
  content: 'Zobacz kategorie ▾';
}

.seo-cards-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.seo-cards-wrapper .row.mb-4 {
  margin-bottom: 0 !important;
}

.seo-toggle-input:checked ~ .seo-cards-toggle::after {
  content: 'Zwiń kategorie ▴';
}

.seo-toggle-input:checked ~ .seo-cards-wrapper {
  max-height: 2000px;
}
a.seo-card {
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
}
/* ==========================================================================
   FIX: Blog Related Posts - Carousel Items (Squeezed layout)
   Bootstrap col-sm-4/col-lg-4 classes conflict with Owl Carousel widths
   ========================================================================== */
.ets_blog_related_posts_type_carousel .owl-item .ets-blog-related-posts-list-li {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 15px;
}

.ets_blog_related_posts_type_carousel .ets_item_img {
    width: 100%;
    display: block;
}

.ets_blog_related_posts_type_carousel .ets_item_img img {
    width: 100%;
    height: auto;
}
.blog_description *,
.blog_description span,
.blog_description strong,
.blog_description p {
    font-family: 'Poppins', sans-serif !important;
}
/* --- Główny kontener - czyszczenie stylu --- */
.ets_comment_form_blog {
    background: #fff;
    padding: 15px 0;
    max-width: 100%;
    font-family: 'Lato', 'Open Sans', sans-serif; /* Elegancka czcionka */
    color: #333;
}

/* Tytuł sekcji - minimalistyczny */
.ets_comment_form_blog .title_blog {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    color: #000;
}

/* --- UKŁAD (Magia Flexboxa bez zmiany HTML) --- */
/* To sprawia, że pola ustawiają się obok siebie */
.ets-blog-form-comment form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px; /* Odstęp między polami */
}

/* Domyślnie każdy rząd ma 100% szerokości */
.blog-comment-row {
    width: 100%;
    margin-bottom: 0 !important; /* Reset marginesów */
}

/* Imię i Email - ustawiamy na 48% szerokości, żeby były w jednej linii */
.blog-comment-row.blog-name,
.blog-comment-row.blog-email {
    width: calc(50% - 6px); /* Połowa minus połowa odstępu */
}

/* --- STYLIZACJA PÓL (Inputy) --- */
.ets_comment_form_blog label {
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 3px;
    display: block;
}

.ets_comment_form_blog input.form-control,
.ets_comment_form_blog textarea.form-control {
    width: 100%;
    background: #fff;
    border: 1px solid #e6e6e6; /* Bardzo jasna ramka */
    padding: 8px 12px;
    font-size: 13px;
    color: #333;
    border-radius: 0; /* Hampton lubi ostre krawędzie */
    box-shadow: none;
    box-sizing: border-box;
    transition: border 0.3s;
}

/* Efekt po kliknięciu w pole */
.ets_comment_form_blog input.form-control:focus,
.ets_comment_form_blog textarea.form-control:focus {
    border-color: #333; /* Ciemna ramka przy aktywności */
    outline: none;
}

/* Zmniejszenie wysokości pola komentarza */
.ets_comment_form_blog textarea.form-control {
    min-height: 80px; /* Mniejsze niż standardowe */
    height: 80px;
}

/* --- STOPKA (Gwiazdki i Przycisk) --- */
/* Ukrywamy zbędne kontenery, jeśli psują układ */
.blog-comment-row.flex_space_between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
    border-top: 1px solid #f5f5f5; /* Delikatna linia oddzielająca */
    padding-top: 15px;
}

/* Gwiazdki */
.blog-rate-post {
    display: flex;
    align-items: center;
}
.blog-rate-post label {
    margin-right: 10px;
    margin-bottom: 0;
}
.blog_rating_box {
    color: #c5a47e; /* Kolor beżowy/złoty (Hampton gold) */
    font-size: 16px;
    cursor: pointer;
}

/* Przycisk */
.blog-submit input.button {
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 8px 25px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 0; /* Usunięcie marginesów */
}

.blog-submit input.button:hover {
    background-color: #fff;
    color: #000;
}

/* --- RESPONSYWNOŚĆ (Na telefonach jeden pod drugim) --- */
@media (max-width: 767px) {
    .blog-comment-row.blog-name,
    .blog-comment-row.blog-email {
        width: 100%;
    }
    
    .blog-comment-row.flex_space_between {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .blog-submit input.button {
        width: 100%;
    }
}
/* =============================================
   SEKCJA SOCIAL PROOF / krust
   ============================================= */
.krust-section {
  position: relative;
  padding: 70px 15px;
  overflow: hidden;
  border-radius: 16px;
}

.krust-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.krust-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.krust-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.krust-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 45px;
  line-height: 1.3;
}

.krust-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.krust-stat {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  /* Animacja wjazdu */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.krust-stat.visible {
  opacity: 1;
  transform: translateY(0);
}

.krust-stat:nth-child(2) { transition-delay: 0.1s; }
.krust-stat:nth-child(3) { transition-delay: 0.2s; }
.krust-stat:nth-child(4) { transition-delay: 0.3s; }
.krust-stat:nth-child(5) { transition-delay: 0.4s; }

.krust-number {
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #C5A47E;
  line-height: 1;
  margin-bottom: 6px;
  width: 100%;
  text-align: center;
}

.krust-label {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  width: 100%;
  text-align: center;
}

.krust-desc {
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  margin: 6px 0 0;
  width: 100%;
  text-align: center;
}

@media (max-width: 768px) {
  .krust-section {
    padding: 40px 15px;
  }

  .krust-heading {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .krust-stats {
    gap: 12px;
  }

  .krust-stat {
    min-width: calc(50% - 12px);
    max-width: calc(50% - 12px);
    padding: 20px 12px;
  }

  .krust-stat:last-child {
    min-width: 100%;
    max-width: 100%;
  }

  .krust-number {
    font-size: 28px;
  }

  .krust-label {
    font-size: 12px;
  }

  .krust-desc {
    font-size: 11px;
  }
}
/* =============================================
   SEKCJA MAREK / BRANDS 02 SWIPER
   ============================================= */
.brands-02-section {
  padding: 25px 0px;
  background: #fff;
}

.brands-02-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.brands-02-slider-wrapper {
  position: relative;
  margin: 0 auto;
  padding: 0 45px;
}

.brands-02-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
}

.brands-02-item img {
  max-height: 45px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.brands-02-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.brands-02-slider-wrapper .swiper-button-prev,
.brands-02-slider-wrapper .swiper-button-next {
  position: absolute;
  top: auto;
  bottom:50%;
  transform: translateY(50%);
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  z-index: 3;
}

.brands-02-slider-wrapper .swiper-button-prev {
  left: 0;
}

.brands-02-slider-wrapper .swiper-button-next {
  right: 0;
}
.brands-02-slider-wrapper .swiper {
  overflow: hidden;
}

.brands-02-slider-wrapper .swiper-button-prev::after,
.brands-02-slider-wrapper .swiper-button-next::after {
  font-size: 14px;
  color: #1a1a1a;
}
/* === FIX: Gwiazdki w bloku średniej kategorii === */
#spr .average_cat_block .rating-star-display > input {
    display: none !important;
}
#spr .average_cat_block .rating-star-display > label:before,
#spr .average_cat_block .rating-star-display > label {
    font-family: Material Icons;
    display: inline-block !important;
    width: initial !important;
    font-size: 0.9em !important;
    margin-left: -4px;
}
#spr .average_cat_block .rating-star-display > .half.product-block-half:before {
    position: relative;
    left: 7px !important;
}
#spr .average_cat_block .rating-star-display {
    flex-wrap: nowrap !important;
}

.brands-02-slider-wrapper .swiper-button-prev:hover,
.brands-02-slider-wrapper .swiper-button-next:hover {
  border-color: #C5A47E;
}

@media (max-width: 768px) {
  .brands-02-item img {
    max-height: 35px;
    max-width: 120px;
  }
}

@media (max-width: 480px) {
  .brands-02-item img {
    max-height: 30px;
    max-width: 110px;
  }

  .brands-02-slider-wrapper {
    padding: 0 10px;
  }
}
/* === FIX: Gwiazdki w kategoriach - ukrycie inputów i naprawienie nakładania === */
#spr_list .rating-star-display > input {
    display: none !important;
}

#spr_list .rating-star-display > label:before,
#spr_list .rating-star-display > label {
    font-family: Material Icons;
    display: inline-block !important;
    width: initial !important;
    font-size: 0.9em !important;
}

#spr_list .rating-star-display > .half.product-block-half:before {
    position: relative;
    left: 7px !important;
}

#spr_list .rating-star-display {
    flex-wrap: nowrap !important;
}
/* Strona potwierdzenia zamówienia */
#content-hook_order_confirmation .card-block {
    background-color: #f0f7f0 !important;
    border: 1px solid #c3e6c3 !important;
    border-radius: 10px !important;
    padding: 25px 30px !important;
    margin-bottom: 20px !important;
}

/* Karty szczegółów i podsumowania */
.page-order-confirmation + .card-group .card {
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
}

.page-order-confirmation + .card-group .card-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e5e5e5 !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Karta rejestracji */
.page-order-confirmation ~ .row .card {
    border-radius: 10px !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.page-order-confirmation ~ .row .card-header {
    background-color: #f8f9fa !important;
    border-radius: 10px 10px 0 0 !important;
}
/* Odstęp między wierszami (row) */
body.page-index .custom-category-grid .row.mb-4 {
    margin-bottom: 10px !important;
}

/* Odstęp pod każdą kartą (col) */
body.page-index .custom-category-grid .col-md-4.mb-4 {
    margin-bottom: 10px !important;
}
/* === TWOJE WNĘTRZE - label na zdjęciu + zaokrąglenia === */

/* Zaokrąglony box */
body.page-index .custom-category-grid .cat-card {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

/* Zdjęcie na pełną wysokość */
body.page-index .custom-category-grid .img-wrapper {
    position: relative;
    height: 100%;
}

body.page-index .custom-category-grid .img-wrapper img {
    height: 280px;
    object-fit: cover;
}

/* Label NA zdjęciu */
body.page-index .custom-category-grid .cat-content {
    position: absolute;
    bottom: 16px;
	top:Auto;
    left: 0;
    right: 0;
    padding: 0;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

body.page-index .custom-category-grid .cat-title {
    display: inline-block;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    color: #1a1a1a;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    padding: 8px 18px;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 0;
}

/* Ukryj opis - nie potrzebny w tym stylu */
body.page-index .custom-category-grid .cat-desc {
    display: none;
}

/* Hover - tytuł złoty */
body.page-index .custom-category-grid .cat-card:hover .cat-title {
    color: #c9a25d;
}

/* Mobile - mniejsze zdjęcia */
@media (max-width: 767px) {
    body.page-index .custom-category-grid .img-wrapper img {
        height: 200px;
    }
    
    body.page-index .custom-category-grid .cat-title {
        font-size: 12px;
        padding: 6px 14px;
    }
}
body.page-index .homeslider {
    border-radius: 16px;
    overflow: hidden;
}

body.page-index .seo-content-section.my-5 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}
body.page-index .seo-content-section hr {
    margin: 0 !important;
}
body.page-index .seo-content-section .row.mb-5 {
    margin-bottom: 0 !important;
}

div.hidden-md-up.up {
    display: none !important;
}

/* ==========================================================================
   BANER "DLACZEGO MY?" - 4 KARTY - STRONY KATEGORII
   ========================================================================== */

.wu2 {
    width: 100%;
    background: #f9f9f9;
    border-top: 1px solid #eeebe6;
    border-bottom: 1px solid #eeebe6;
	border-radius: 16px;
    margin-top: 25px;
    position: relative;
	margin-bottom: 0px;
}

/* Złota kreska na górze */
.wu2::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 15%, #c9a25d 35%, #d4b06a 50%, #c9a25d 65%, transparent 85%);
}

.wu2-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Grid --- */
.wu2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

/* --- Karta --- */
.wu2-card {
    padding: 34px 28px 12px;
    text-align: center;
    position: relative;
    transition: background 0.4s ease;
    border-right: 1px solid #eeebe6;
}

.wu2-card:last-child {
    border-right: none;
}

.wu2-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #c9a25d;
    transition: width 0.4s ease;
}

.wu2-card:hover {
    background: rgba(201,162,93,0.04);
}

.wu2-card:hover::before {
    width: 50px;
}

/* Ikona */
.wu2-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 1.5px solid #e0dcd5;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.wu2-card:hover .wu2-icon {
    border-color: #c9a25d;
    box-shadow: 0 6px 20px rgba(201,162,93,0.12);
    transform: translateY(-2px);
}

.wu2-icon svg {
    width: 26px;
    height: 26px;
    stroke: #bbb;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.4s ease;
}

.wu2-card:hover .wu2-icon svg {
    stroke: #c9a25d;
}

.wu2-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.wu2-card-highlight {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #c9a25d;
    margin-bottom: 12px;
}

.wu2-card-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 300;
    color: #999;
    line-height: 1.65;
}

.wu2-card:hover .wu2-card-desc {
    color: #777;
}

/* --- Responsywność --- */
@media (max-width: 1024px) {
    .wu2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wu2-card {
        border-right: none;
        border-bottom: 1px solid #eeebe6;
    }
    .wu2-card:nth-child(odd) {
        border-right: 1px solid #eeebe6;
    }
    .wu2-card:nth-child(3),
    .wu2-card:nth-child(4) {
        border-bottom: none;
    }
}

@media (max-width: 600px) {
    .wu2 {
        padding: 20px 0;
    }
    .wu2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wu2-card {
        border-right: none;
        border-bottom: 1px solid #eeebe6;
        padding: 18px 12px 16px;
    }
    .wu2-card:nth-child(odd) {
        border-right: 1px solid #eeebe6;
    }
    .wu2-card:nth-child(3),
    .wu2-card:nth-child(4) {
        border-bottom: none;
    }
    .wu2-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }
    .wu2-icon svg {
        width: 20px;
        height: 20px;
    }
    .wu2-card-title {
        font-size: 11px;
        letter-spacing: 0.5px;
        margin-bottom: 3px;
    }
    .wu2-card-highlight {
        font-size: 11px;
        margin-bottom: 0;
    }
    .wu2-card-desc {
        display: none;
    }
}
/* ==========================================================================
   PODKATEGORIE - POZIOMY PASEK NAD PRODUKTAMI
   DOPISAĆ NA KOŃCU custom.css
   ========================================================================== */

/* 1. KONTENER PASKA */
.subcategories-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0 14px;
margin: 0 0 10px;
max-width: 100% !important;
    border-bottom: 1px solid #f0f0f0;
}

/* 2. PIGUŁKI (linki podkategorii) */
.subcategories-bar .subcat-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #8a6d2f;
    background: rgba(201, 162, 93, 0.08);
    border: 1.5px solid #c9a25d;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
    line-height: 1.3;
}

/* 3. HOVER */
.subcategories-bar .subcat-pill:hover {
    color: #c9a25d;
    border-color: #c9a25d;
    background: rgba(201, 162, 93, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(201, 162, 93, 0.12);
    text-decoration: none;
}

/* 4. AKTYWNA PODKATEGORIA (opcjonalnie - JS doda klasę .active) */
.subcategories-bar .subcat-pill.active {
    color: #fff;
    background: #c9a25d;
    border-color: #c9a25d;
}

/* 5. UKRYCIE ORYGINALNEGO BLOKU W SIDEBARZE */
#left-column .block-categories {
    display: none !important;
}

/* 6. MOBILE - mniejsze pigułki, scroll poziomy */
@media (max-width: 991px) {
    .subcategories-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 12px 16px 14px;
        gap: 8px;
        margin: 0 -15px 10px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .subcategories-bar::-webkit-scrollbar {
        display: none;
    }
    .subcategories-bar .subcat-pill {
        font-size: 13px;          /* było 11px */
        padding: 9px 16px;        /* było 6px 14px */
        flex-shrink: 0;
    }
}
/* Ukrycie starego bloku kategorii w sidebarze */
#left-column > .card.mb-md-3:first-child {
    display: none !important;
}

/* ==========================================================================
   RZĄD PRZYCISKÓW: KONFIGURATOR + KOSZYK (BLACK PREMIUM)
   Wrapper: .product-buttons-row dodany w product.tpl
   ========================================================================== */

/* 1. Kontener — flexbox */
.product-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

/* 2. Flatowanie zagnieżdżenia modułu megaattr */
.product-buttons-row > .product-additional-info,
.product-buttons-row .megaattr-selected-buttons,
.product-buttons-row .megaattr-buttons.megaattr-product {
    display: contents;
}

/* 3. Ukryj elementy niepotrzebne w rzędzie przycisków */
.product-buttons-row #caraty,
.product-buttons-row .megaattr-loader1,
.product-buttons-row .megaattr-information {
    display: none !important;
}

/* 4. Ukryj selektor ilości */
.product-buttons-row .product-add-to-cart .qty,
.product-buttons-row .product-add-to-cart .col-auto,
.product-buttons-row .product-add-to-cart #product-availability,
.product-buttons-row .product-add-to-cart .product-minimal-quantity {
    display: none !important;
}

/* Lewa: konfigurator */
.product-buttons-row .megaattr-confbox-wrapper {
    flex: 1 1 0;
    min-width: 180px;
    order: 1;
    margin: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden;
}

/* Prawa: koszyk */
.product-buttons-row > .product-add-to-cart {
    flex: 1 1 0;
    min-width: 180px;
    order: 2;
}

/* Pod przyciskami: wynik konfiguracji */
.product-buttons-row .megaattr-combination-result {
    flex-basis: 100%;
    order: 3;
}

.megaattr-buttons.megaattr-product {
    margin-bottom: 15px;
}

/* ---- STYL: PRZYCISK KONFIGURATORA (CZERŃ) ---- */
.megaattr-confbox {
    background: #c9a25d !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    min-height: 54px;
    height: 100% !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    text-align: center;
    justify-content: center !important;
    cursor: pointer;
}

.megaattr-confbox:hover {
    background: #b8923e !important;
    box-shadow: 0 4px 12px rgba(201,162,93,0.25) !important;
}

.megaattr-confbox-txt {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.megaattr-confbox-txt::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.megaattr-confbox-inner {
    justify-content: center !important;
}

.megaattr-confbox-circles,
.megaattr-confbox-inner > *:not(.megaattr-confbox-txt) {
    display: none !important;
}

/* ---- STYL: PRZYCISK KOSZYKA (BIAŁY Z CZARNĄ RAMKĄ) ---- */
.product-buttons-row .product-add-to-cart .product-quantity {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    align-items: stretch !important;
}

.product-buttons-row .product-add-to-cart .product-quantity .add {
    flex: 1 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
}

.product-buttons-row .product-add-to-cart .add-to-cart {
    background: transparent !important;
    color: #1a1a1a !important;
    border: 1.5px solid #ddd !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 24px !important;
    min-height: 54px;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
}

.product-buttons-row .product-add-to-cart .add-to-cart:hover {
    background: #333 !important;
    color: #fff !important;
    border-color: #333 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ---- PASEK WYNIKU KONFIGURACJI ---- */
.product-buttons-row .megaattr-combination-result,
#megaattr_combination_result {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    min-height: auto !important;
    line-height: 1.5 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #999 !important;
    font-size: 12.5px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}
.megaattr-combination-result p,
#megaattr_combination_result p {
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 575px) {
    .product-buttons-row {
        flex-direction: column;
    }
    .product-buttons-row .megaattr-confbox-wrapper,
    .product-buttons-row > .product-add-to-cart {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
    .megaattr-confbox,
    .product-buttons-row .product-add-to-cart .add-to-cart {
        min-height: 48px;
    }
}

/* Stan po wybraniu opcji — zielone podświetlenie */
.megaattr-combination-result.has-selection,
#megaattr_combination_result.has-selection {
    background: #f0fff4 !important;
    border: 1px solid #c6f6d5 !important;
    border-left: 1px solid #c6f6d5 !important;
    border-radius: 100px !important;
    padding: 8px 16px !important;
    color: #2f855a !important;
    font-size: 12.5px !important;
    display: inline-flex !important;
    gap: 6px;
}

/* ==========================================================================
   WARIANT 3 — STRONA PRODUKTU (NOWY UKŁAD)
   ========================================================================== */

/* ── Podtytuł (opis krótki pod H1) ── */
.v3-subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* ── Rating row z separatorem ── */
.v3-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

/* ── CONFIG HINT ── */
.v3-config-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #999;
    margin-bottom: 18px;
}

.v3-config-hint svg {
    flex-shrink: 0;
    stroke: #999;
}

/* ── CHIPS (cechy produktu) ── */
.v3-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

.v3-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: #f5f5f0;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 500;
    color: #333;
    border: 1px solid #eee;
}

.v3-chip svg {
    color: #c9a25d;
    stroke: #c9a25d;
}

/* ── SPECS GRID (wymiary, 3 kolumny) ── */
.v3-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1px;
    background: #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}

.v3-spec {
    background: #fff;
    padding: 18px 14px;
    text-align: center;
}

.v3-spec-val {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.v3-spec-lbl {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #999;
}

/* ── TRUST STRIP (4 kolumny) ── */
.v3-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.v3-trust-item {
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    position: relative;
}

.v3-trust-item + .v3-trust-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    height: 64%;
    width: 1px;
    background: #e5e5e5;
}

.v3-trust-ico {
    width: 28px;
    height: 28px;
    color: #333;
    opacity: 0.65;
}

.v3-trust-txt {
    font-size: 11.5px;
    font-weight: 600;
    color: #111;
}

.v3-trust-sub {
    font-size: 10.5px;
    color: #999;
    margin-top: -2px;
}

/* ── Ukryj stary trust bar na stronie produktu ── */
.product-container .custom-trust-bar {
    display: none !important;
}



/* Stary premium grid (gdyby został w HTML) */
.product-features-box {
    display: none !important;
}

/* ── MOBILE v3 ── */
@media (max-width: 767px) {
    .product-prices .price,
    .product-prices .current-price {
        font-size: 30px !important;
    }

.v3-specs-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
	

    .v3-trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .v3-trust-item:nth-child(1),
    .v3-trust-item:nth-child(2) {
        border-bottom: 1px solid #e5e5e5;
    }

    .v3-trust-item:nth-child(3)::before {
        display: none;
    }
}
/* === GWIAZDKI INLINE — FORCE === */
.rating-star-display.col-lg-6 {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
	margin-left: 9px;
}

.average_text_info.col-lg-6 {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

.rating-star-display + .average_text_info br {
    display: none !important;
}

.average_text_info .average_text + br {
    display: none !important;
}

.average_text_info .average_text a {
    color: #c9a25d !important;
    text-decoration: underline !important;
}
/* Ikona wózka na przycisku koszyka */
.product-buttons-row .add-to-cart::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' stroke='%231a1a1a' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Hover — ikona na biało */
.product-buttons-row .add-to-cart:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
}

/* === PASEK REALIZACJI I DOSTAWY (WARIANT B) === */
.vb-delivery-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #ede8dc;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}

.vb-del-item {
    background: #faf8f3;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vb-del-item svg {
    width: 22px;
    height: 22px;
    stroke: #c9a25d;
    flex-shrink: 0;
}

.vb-del-info {
    display: flex;
    flex-direction: column;
}

.vb-del-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    font-weight: 500;
}

.vb-del-value {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    margin-top: 1px;
}

@media (max-width: 767px) {
    .vb-delivery-bar {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   WARIANT 3 — KARTY PRODUKTÓW NA LIŚCIE
   ========================================================================== */

/* --- KARTA --- */
.product-miniature, .product-miniature.card {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    position: relative !important;
    background: #fff !important;
    overflow: hidden !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.product-miniature.card:hover {
    border-color: #c9a25d !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* --- ZDJĘCIE --- */
.product-miniature__thumb img {
    height: 220px !important;
    width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.product-miniature.card:hover .product-miniature__thumb img {
    transform: scale(1.03) !important;
}

/* --- FLAGI (badge) --- */
.product-flags {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    pointer-events: none !important;
    width: auto !important;
    max-width: 80% !important;
}

.product-flags__flag {
    padding: 5px 12px !important;
    margin-bottom: 5px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: max-content !important;
    min-width: max-content !important;
    display: block !important;
    max-width: none !important;
    position: static !important;
    transform: none !important;
    background: #c5a158  !important;
    color: #fff !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.product-flags__flag--discount { background-color: #d63333 !important; }
.product-flags__flag--online-only {
    background-color: #2c3e3a;
	    
    color: #fff !important;
}


/* --- BODY KARTY --- */
.pm-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

}

/* --- TYTUŁ --- */
.pm-body .product-miniature__title {
    padding: 0 !important;
    min-height: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    margin-bottom: 6px !important;
}

.pm-body .product-miniature__title a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111 !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
}

/* --- WYMIARY (tekst) --- */
.pm-dims {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* --- CHIPSY CECH --- */
.pm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.pm-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #f5f5f0;
    border: 1px solid #eee;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    color: #555;
    line-height: 1.3;
}

/* --- DOLNA SEKCJA --- */
.pm-bottom {
    margin-top: auto;
	display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.pm-price-row {
flex-direction: column;
gap: 2px;
margin-bottom: 0;
}

/* Cena */
.pm-pricing {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pm-pricing .product-miniature__pricing {
    margin: 0 !important;
}

.pm-pricing .price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1 !important;
}

.pm-pricing .price.price--regular {
    font-size: 13px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    position: static !important;
}

/* --- PRZYCISK KONFIGURUJ (ZŁOTY) --- */
.pm-cta {
width: auto !important;
display: inline-flex !important;
flex-shrink: 0 !important;
padding: 9px 18px !important;
    background: #c1a053 !important;
    color: #fff !important;
border-radius: 24px !important;
font-size: 12px !important;
text-transform: none !important;
white-space: nowrap !important;
}

.pm-cta:hover {
    background: #a8893f !important;
    color: #fff !important;
}

.pm-cta svg {
    stroke: #fff;
    flex-shrink: 0;
}

/* --- Ukryj stary bottom flex --- */
.pm-body ~ .product-bottom-flex-line {
    display: none !important;
}

/* Ukryj stary styl actions */
.pm-body .product-miniature__actions {
    display: none !important;
}

/* ==========================================================================
   MOBILE — Karty 2 kolumny
   ========================================================================== */
@media (max-width: 767px) {
    #products .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .product-miniature__thumb img {
        height: 160px !important;
    }

    .pm-body {
        padding: 10px 12px 14px;
    }

    .pm-body .product-miniature__title a {
        font-size: 12.5px !important;
    }

    .pm-dims {
        font-size: 11px;
    }

    .pm-chip {
        font-size: 10px;
        padding: 3px 8px;
    }

    .pm-pricing .price {
        font-size: 17px !important;
    }


.pm-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;           /* NOWE - pozwala przyciskowi przejść do nowej linii */
    gap: 6px;                  /* NOWE - odstęp gdy się zawinie */
    overflow: visible !important; /* NOWE - nadpisuje overflow:hidden z karty */
}

.pm-cta {
    width: auto !important;
    padding: 7px 14px !important;
    font-size: 11px !important;
    min-width: 0;              /* NOWE - pozwala się kurczyć */
    flex-shrink: 1 !important; /* NOWE - może się zmniejszyć */
    overflow: visible !important;
}

.pm-price-row {
    margin-bottom: 0;
}
	
}
@media (max-width: 767px) {
  .products-list_block {
    padding: 0 0.25rem;
  }
}
@media (max-width: 767px) {
  #js-product-list-top {
    display: none;
  }
}
/* ==========================================================================
   GALERIA HIGALLERY — Tytuł, Opis, Tabela specyfikacji
   ========================================================================== */

/* --- Tytuł H1 --- */
.gallery-title {
    font-size: 28px;
    font-weight: 600;
    color: #2c2c2c;
    text-align: center;
    margin: 10px 0 8px;
    line-height: 1.3;
}

.gallery-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: #c0a870;
    margin: 10px auto 20px;
}

/* --- Opis galerii --- */
.gallery-description,
.gal-desc {
    margin: 10px 0 30px;
}

.gallery-description p,
.gal-desc p {
    font-size: 15px;
    line-height: 1.75;
    color: #4a4a4a;
    text-align: justify;
    margin-bottom: 15px;
}

.gallery-description p:last-child,
.gal-desc p:last-child {
    margin-bottom: 0;
}

.gallery-description strong {
    color: #2c2c2c;
}

/* --- Tabela specyfikacji --- */
.gallery-description table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 14px;
}

.gallery-description table tr {
    border-bottom: 1px solid #f0ece6;
}

.gallery-description table tr:last-child {
    border-bottom: none;
}

.gallery-description table td {
    padding: 9px 14px;
    vertical-align: top;
    color: #4a4a4a;
}

.gallery-description table td:first-child {
    font-weight: 600;
    color: #2c2c2c;
    width: 45%;
    background: #faf8f5;
}

/* --- Badges cech specjalnych --- */
.gallery-description .spec-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.gallery-description .spec-badge {
    display: inline-block;
    background: #f5f0e8;
    color: #5a4a30;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .gallery-title { font-size: 22px; }
    .gallery-description,
    .gal-desc {
        margin-bottom: 20px;
    }
    .gallery-description p,
    .gal-desc p {
        font-size: 14px;
        line-height: 1.65;
        text-align: left;
    }
    .gallery-description table td {
        padding: 7px 10px;
        font-size: 13px;
    }
}
/* ==========================================================================
   Sekcja CTA — próbki + tkanina na metry (.sample-cards)
   ========================================================================== */

.sample-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

.sample-card {
    background: #faf8f5;
    border: 1px solid #e8e0d4;
    border-radius: 10px;
    padding: 18px 20px;
}

.sample-card .card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sample-card .card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.sample-card .card-icon.scissors {
    background: rgba(192,168,112,0.2);
}

.sample-card .card-icon.ruler {
    background: rgba(138,154,122,0.2);
}

.sample-card .card-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sample-card .card-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
    align-self: flex-start;
}

.sample-card .card-tag.free {
    background: #c0a870;
    color: #fff;
}

.sample-card .card-tag.order {
    background: #e0dcd0;
    color: #6a5a40;
}

.sample-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0;
}

.sample-card p {
    font-size: 13px;
    line-height: 1.5;
    color: #5a5040;
    margin: 0 0 10px;
}

.sample-card .card-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.sample-card .card-links a {
    font-size: 12px;
    color: #8a6a30;
    font-weight: 600;
    text-decoration: none;
}

.sample-card .card-links a:hover {
    text-decoration: underline;
}

@media (max-width: 650px) {
    .sample-cards {
        grid-template-columns: 1fr;
    }
}
/* Fix: przyciski w dropdown wyszukiwarki */
.js-search-result .pm-cta,
.search-result .pm-cta {
    font-size: 11px;
    padding: 4px 8px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.js-search-result .pm-bottom,
.search-result .pm-bottom {
    flex-wrap: wrap;
    gap: 4px;
}
/* === PASEK WYSZUKIWARKI - ZAOKRĄGLONY === */
.search-form__form-group {
    border-radius: 25px;
    border: 1px solid #ccc;
    overflow: hidden;
    background: #fff;
}

.search-form__input.form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 20px !important;
    outline: none !important;
}

.search-form__input.form-control:focus {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.search-form__input.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}

.search-form__btn {
    border: none !important;
    background: transparent !important;
}portant;
    -webkit-text-fill-color: #333 !important;
}

/* === Banery tkaniny (s24fb) === */
.s24fb_wrap > p, .s24fb_wrap > br { display: none; }
.s24fb_card { position: relative; display: flex; flex-direction: column; justify-content: center; height: 140px; border-radius: 10px; overflow: hidden; padding: 24px 28px; text-decoration: none; }
.s24fb_card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.s24fb_label, .s24fb_title, .s24fb_sub, .s24fb_btn { position: relative; z-index: 2; }
.s24fb_label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #c4a97d; font-weight: 600; margin-bottom: 6px; }
.s24fb_title { font-weight: 700; font-size: 17px; color: #fff; margin: 0 0 4px; line-height: 1.3; text-transform: none; letter-spacing: 0; border: none; background: none; padding: 0; }
.s24fb_sub { font-size: 12px; color: rgba(255,255,255,.65); margin: 0 0 14px; line-height: 1.4; }
.s24fb_btn { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 7px 20px; background: #b8965a; color: #fff !important; border-radius: 5px; font-size: 12px; font-weight: 600; text-decoration: none !important; transition: background .25s; border: none; cursor: pointer; }
.s24fb_btn:hover { background: #a6844e; }
@media (max-width: 768px) {
  .s24fb_wrap { grid-template-columns: 1fr !important; gap: 8px; }
  .s24fb_card { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; height: auto; padding: 12px 14px; background: #fff; border: 1px solid #e8e0d4; border-radius: 10px; }
  .s24fb_card > img { position: static; width: 52px; height: 52px; border-radius: 10px; border: 2px solid #c4a97d; object-fit: cover; grid-row: 1 / -1; align-self: center; }
  .s24fb_label { display: none; }
  .s24fb_title { font-size: 13px; color: #2c2c2c; margin: 0 0 2px; }
  .s24fb_sub { font-size: 10px; color: #777; margin: 0 0 4px; }
  .s24fb_btn { background: none; padding: 0; font-size: 11px; color: #b8965a !important; }
  .s24fb_btn:hover { background: none; transform: none; }
}
/* Zamknij - bardziej zaokrąglone */
#MegaModal .modal-footer .text-right #configSave { 
    background-color: #c9a25d !important; 
    color: #ffffff !important; 
    border: 1px solid #c9a25d !important; 
    border-radius: 12px !important; 
}
#MegaModal .modal-footer .text-right #configSave:hover { 
    background-color: #b08a47 !important; 
}
#MegaModal .modal-footer .text-left #configSave { 
    background-color: #ffffff !important; 
    color: #222222 !important; 
    border: 1px solid #cccccc !important; 
    border-radius: 12px !important; 
}
.conf-rata {
    font-size: 14px;
    font-weight: 400;
    color: #666;
}
.conf-rata strong {
    color: #333;
    font-weight: 600;
}


/* ==========================================================================
   POPRAWKI KONTRASTU (WCAG SEO FIX)
   ========================================================================== */

/* 2. Wymiary na karcie produktu (szary tekst na białym) */
.pm-dims {
    color: #555555 !important;
}


/* 4. Złote linki tekstowe w opisach (przyciemnione złoto) */
.gold-link {
    color: #8f6b2e !important;
}
.gold-link:hover {
    color: #6e5020 !important;
    border-bottom-color: transparent !important;
}

/* 5. Przycisk "Czytaj dalej" na blogu */
.ets_block_latest .read_more,
.read_more {
    color: #555555 !important;
}
.ets_block_latest .read_more:hover {
    border-bottom-color: #555555 !important;
}

/* 6. Etykiety w pasku kontaktowym (Telefon stacjonarny itp.) */
.contact-bar__label {
    color: #555555 !important;
}
.pm-cta:hover svg {
	stroke: #ffffff !important;
}

/* Rezerwacja miejsca dla ikonek płatności w stopce */
img[src*="blik.svg"],
img[alt="BLIK"] {
    aspect-ratio: 33 / 17 !important;
    width: 33px !important;
    height: auto !important;
}
/* Stabilizacja etykiet kategorii przed przesunięciami */
.kategorie-section .kategoria-label {
    contain: layout;
}

/* === FIX CLS: Blog slider === */
.ets_block_slider .ets-blog-swiper {
    min-height: 350px;
}
@media (max-width: 767px) {
    .ets_block_slider .ets-blog-swiper {
        min-height: 300px;
    }
}
@media (max-width: 1200px) {
    .fpp_searchers .content-permanent-mobile {
        /* Już jest display:none z domyślnego CSS modułu — nic więcej nie trzeba */
    }
    
    /* Tylko dla trybu BEZ float buttona — zaczynaj zwinięty */
    .fpp_searchers .searcher-body.fpp-start-collapsed {
        display: none;
    }
}


.col-md-12 .conf-initial-price-display {
    display: none;
}
#spr .rating-star-display > label.product-block-half, 
#spr_list .rating-star-display > label.product-block-half {
    overflow: visible !important;
}

#spr .rating-star-display > .half.product-block-half::before {
    left: 13px !important;
}
/* === PIGUŁKI DOSTAWCÓW === */
/* Dodaj na koniec custom.css */
 
.pm-chip--express {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}
 
.pm-chip--premium {
    background: #fff3e0 !important;
    color: #e65100 !important;
}
@media (max-width: 576px) {
  .homeslider .swiper-button-prev,
  .homeslider .swiper-button-next {
    display: none !important;
  }
}
.category-desc-content ul {
    list-style-position: outside;
    padding-left: 1.5rem;
}
.category-desc-content ul li p {
    margin: 0;
}
/* Poprawka LCP - brak opoznienia ladowania glownego bannera */
.homeslider:not(.swiper-initialized) .swiper-wrapper {
    display: block !important;
}
.homeslider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none !important;
}
/* Fallback PRZED inicjalizacją Swipera */
.kategorie-wrapper .swiper:not(.swiper-initialized) {
  overflow: hidden;
}

.kategorie-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 12px;
}

.kategorie-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 calc((100% - 12px * 1.3) / 2.3) !important;
  width: calc((100% - 12px * 1.3) / 2.3) !important;
  min-width: 0;
}

@media (min-width: 576px) {
  .kategorie-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper { gap: 14px; }
  .kategorie-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
    flex-basis: calc((100% - 14px * 2.3) / 3.3) !important;
    width: calc((100% - 14px * 2.3) / 3.3) !important;
  }
}

@media (min-width: 768px) {
  .kategorie-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper { gap: 16px; }
  .kategorie-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
    flex-basis: calc((100% - 16px * 3.3) / 4.3) !important;
    width: calc((100% - 16px * 3.3) / 4.3) !important;
  }
}

@media (min-width: 1024px) {
  .kategorie-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper { gap: 18px; }
  .kategorie-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
    flex-basis: calc((100% - 18px * 4.5) / 5.5) !important;
    width: calc((100% - 18px * 4.5) / 5.5) !important;
  }
}

.kategorie-wrapper .swiper-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 270 / 330;
  display: block;
}