/* ==========================================================================
   VEROSUN CATALOG CSS (FINAL: SZTABKA + STOPKA SKOPOS + ORYGINALNY WALIDATOR)
   ========================================================================== */

/* 1. BAZA (GRID I KAFELKI) */
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
button:focus, .skopos-nav:focus { outline: none !important; box-shadow: none !important; }

/* KONTENER SIATKI */
.skopos-catalog-wrapper, .facetwp-template {
    display: flex !important; flex-wrap: wrap !important; flex-direction: row !important;
    gap: 20px; padding-top: 20px; padding-bottom: 0 !important; width: 100%;
}

/* KAFELKI */
.skopos-item {
    width: calc(33.333% - 14px) !important; margin-bottom: 20px; cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 4px;
    background: #fff; border: 1px solid #eee; padding-bottom: 10px; display: block; position: relative;
}
.skopos-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }

.skopos-img-container { position: relative; width: 100%; height: 250px; overflow: hidden; }
.skopos-img-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px 4px 0 0; display: block; }

/* SERDUSZKO NA KAFELKU */
.skopos-fav-grid-btn {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255,255,255,0.95); border-radius: 50%;
    width: 34px; height: 34px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); z-index: 5; transition: transform 0.2s;
}
.skopos-fav-grid-btn:hover { transform: scale(1.1); }
.skopos-fav-grid-btn.active .heart-empty { display: none; }
.skopos-fav-grid-btn.active .heart-full { display: block; }
.skopos-fav-grid-btn:not(.active) .heart-full { display: none; }

.skopos-info { padding: 15px 10px; text-align: left; }
.skopos-name { display: block; font-weight: 700; color: #333; font-size: 15px; margin-bottom: 5px; }
.skopos-code { display: block; font-size: 13px; color: #888; text-transform: uppercase; }

/* RWD Kafelków */
@media (max-width: 992px) { .skopos-item { width: calc(50% - 10px) !important; } }
@media (max-width: 600px) { 
    .skopos-item { width: calc(50% - 10px) !important; } 
    .skopos-img-container { height: 160px; }
}


/* 2. FILTRY I STOPKA (SKOPOS STYLE) */

/* Mobile & Tablet */
@media (max-width: 991px) {
    #skopos-filter-panel {
        position: fixed; top: 0; left: 0;
        width: 320px; max-width: 85vw;
        height: 100vh; height: 100dvh;
        background: #fff; z-index: 100000;
        transform: translateX(-100%); 
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
        box-shadow: 10px 0 40px rgba(0,0,0,0.2);
        display: block; 
    }
    #skopos-filter-panel.is-open { transform: translateX(0); }

    .filter__header {
        position: absolute; top: 0; left: 0; width: 100%; height: 60px;
        padding: 0 20px; background: #f9f9f9; border-bottom: 1px solid #eee;
        display: flex; justify-content: space-between; align-items: center; z-index: 10;
    }
    .filter__group-name--main { margin: 0; font-weight: 800; font-size: 16px; color: #111; }
    #skopos-close-btn { cursor: pointer; font-size: 24px; padding: 10px; line-height: 1; }

    .skopos-scroll-container { 
        position: absolute; top: 60px; bottom: 80px; left: 0; width: 100%;
        overflow-y: auto; padding: 20px; 
        -webkit-overflow-scrolling: touch;
    }
    .filter__group { margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; }

    /* STOPKA SKOPOS (Twoja preferencja) */
    .filter__footer {
        position: absolute; bottom: 0; left: 0; width: 100%;
        background: #fff;
        border-top: 1px solid #e5e5e5;
        padding: 15px 20px;
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
        z-index: 20;
        display: flex; 
        flex-direction: row-reverse; /* Najpierw "Zobacz wyniki" */
        gap: 10px;
    }
    #skopos-results-btn {
        flex: 2; background: #000; color: #fff; border: none; padding: 14px 0;
        font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
        display: block !important; cursor: pointer;
    }
    .filter__action--clear {
        flex: 1; background: #f5f5f5; color: #333; border: none; padding: 14px 0;
        font-size: 11px; font-weight: 700; text-transform: uppercase; text-align: center;
        cursor: pointer;
    }
    
    #skopos-curtain {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.6); z-index: 99999;
        opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(2px);
    }
    #skopos-curtain.is-visible { opacity: 1; visibility: visible; }
}

/* Desktop */
@media (min-width: 992px) {
    #skopos-trigger-btn, #skopos-curtain, #skopos-close-btn, #skopos-results-btn { display: none !important; }

    .filter, #skopos-filter-panel {
        position: static !important; transform: none !important; width: 100% !important;
        height: auto !important; background: transparent !important; box-shadow: none !important;
        display: block !important; border-right: 1px solid #eee; padding-right: 20px; margin-bottom: 40px;
    }
    .filter__header {
        position: static; height: auto; width: 100%; padding: 0 0 15px 0; margin-bottom: 20px;
        border-bottom: 2px solid #000; background: transparent; display: block;
    }
    .filter__group-name--main { font-size: 18px; color: #000; padding: 0; margin: 0; }
    .skopos-scroll-container { position: static; padding: 0; overflow: visible; height: auto; }
    .filter__group { border-bottom: 1px solid #eee; }
    
    .filter__footer {
        display: block; position: static; background: transparent; border: none; padding: 20px 0; margin-top: 20px;
    }
    .filter__action--clear {
        display: block; width: 100%; padding: 12px; background: #f5f5f5; border: 1px solid #ddd;
        color: #333; font-size: 12px; font-weight: 700; text-transform: uppercase;
        cursor: pointer; text-align: center; transition: all 0.2s ease;
    }
    .filter__action--clear:hover { background: #000; color: #fff; border-color: #000; }
}
.facetwp-facet { margin-bottom: 20px; }


/* 3. BELKA MOBILNA (SZTABKA) */
@media (min-width: 769px) { .verosun-mobile-only, .verosun-split-container { display: none !important; } }
@media (max-width: 768px) {
    .verosun-mobile-only { display: block !important; margin-bottom: 20px; }
    .filter__btn.verosun-split-container {
        display: flex !important; flex-direction: row !important; width: 100%; height: 50px;
        padding: 0 !important; border: 2px solid #000 !important; background: #fff !important;
        border-radius: 0 !important; gap: 0 !important; align-items: stretch; overflow: hidden;
    }
    .v-split-col {
        width: 50% !important; flex: 1 1 50% !important; display: flex; align-items: center; justify-content: center;
        border: none !important; background: transparent !important; margin: 0 !important;
        color: #000 !important; font-weight: 700; font-size: 13px; text-transform: uppercase;
        text-decoration: none !important; cursor: pointer;
    }
    .v-split-left { border-right: 1px solid #e0e0e0 !important; }
    .v-split-right .red-heart { color: #d65b5b !important; font-size: 17px; margin-right: 6px; line-height: 1; }
    .v-split-right .black-text, .v-split-right .mobile-fav-count { color: #000 !important; font-weight: 700; }
}


/* 4. MODAL - PRZYWRÓCONE ORYGINALNE STYLE */

#skopos-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s;
}
#skopos-modal-overlay.skopos-visible { opacity: 1; visibility: visible; }
#skopos-modal-overlay.skopos-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.skopos-modal-box {
    background: #fff; width: 900px; max-width: 90%; height: auto; max-height: 90vh;
    border-radius: 4px; position: relative; display: flex; flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); margin: 0 auto;
}
.skopos-modal-content { display: flex; flex-direction: row; height: 100%; border-radius: 4px; overflow: hidden; }
.skopos-modal-left { width: 55%; background: #f0f0f0; position: relative; display: flex; align-items: center; justify-content: center; }
.skopos-modal-left img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* SERDUSZKO W MODALU (Z pliku verosun-catalog.css.txt - białe, 44px) */
.skopos-modal-heart {
    position: absolute !important;
    top: 20px !important; right: 20px !important; left: auto !important; bottom: auto !important;
    background: #fff !important; /* Przywrócone tło */
    border-radius: 50%;
    width: 44px; height: 44px; 
    border: none; cursor: pointer; 
    display: flex !important; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    z-index: 50;
}
.skopos-modal-heart:hover { transform: scale(1.1); }
.skopos-modal-heart.active .heart-empty { display: none; }
.skopos-modal-heart.active .heart-full { display: block; }
.skopos-modal-heart:not(.active) .heart-full { display: none; }

.skopos-modal-right { width: 45%; padding: 40px; overflow-y: auto; text-align: left; background: #fff; }
.skopos-modal-right h2 { margin-top: 0; font-size: 26px; color: #222; margin-bottom: 20px; font-weight: 700; }
.spec-row { margin-bottom: 10px; font-size: 14px; color: #666; border-bottom: 1px solid #f5f5f5; padding-bottom: 8px; }
.spec-row strong { color: #222; width: 110px; display: inline-block; }


/* --- WALIDATOR (ORYGINALNY Z PLIKU) --- */
.verosun-validator-box {
    background: #fafafa; /* Jasnoszare tło z pliku */
    border: 1px solid #eee; 
    border-radius: 6px; 
    padding: 20px; 
    margin: 25px 0; 
}
.v-validator-header { 
    font-size: 11px; font-weight: 800; color: #999; text-transform: uppercase; margin-bottom: 12px; 
}
.v-inputs-row { display: flex; gap: 10px; margin-bottom: 8px; }
.v-inputs-row input { 
    width: 50%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; 
}
.v-clear-btn { 
    display: block; width: 100%; text-align: right; margin-bottom: 10px; 
    font-size: 11px; color: #aaa; text-decoration: underline; 
    background: none; border: none; cursor: pointer; 
}
.v-systems-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* KAFELKI WYNIKÓW (Z kolorowym paskiem po lewej) */
.v-sys-item { 
    background: #fff; padding: 10px; border-radius: 4px; 
    border-left: 4px solid #ddd; /* TO JEST TEN KLUCZOWY ORYGINALNY STYL */
}
.v-sys-item span { font-weight: 700; font-size: 13px; color: #333; display: block; }
.v-sys-item small { font-size: 11px; color: #777; margin-top: 3px; display: block; }

/* STATUSY (Zielony/Czerwony) */
.v-sys-item.ok { border-left-color: #27ae60; background: #f0fff4; }
.v-sys-item.ok small { color: #27ae60; font-weight: bold; }

.v-sys-item.err { border-left-color: #e74c3c; background: #fff5f5; }
.v-sys-item.err small { color: #c0392b; font-weight: bold; }

.v-belka-info { 
    margin-top: 15px; font-size: 12px; color: #777; text-align: center; border-top: 1px solid #eee; padding-top: 8px; 
}

.skopos-btn { display: block; width: 100%; padding: 15px 0; background: #111; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-size: 14px; text-align: center; margin-top: 25px; transition: 0.2s; }

/* Nawigacja */
.skopos-nav {
    position: absolute; top: 50%; transform: translateY(-50%); background: #fff; width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer; font-size: 20px; color: #333; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0,0,0,0.15); z-index: 100; transition: 0.2s;
}
.skopos-nav:hover { background: #000; color: #fff; }
.skopos-prev { left: -80px; }
.skopos-next { right: -80px; }
.skopos-close { position: absolute; top: -15px; right: -15px; background: #000; color: #fff; border: 2px solid #fff; width: 34px; height: 34px; line-height: 30px; text-align: center; border-radius: 50%; cursor: pointer; z-index: 101; font-size: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* --- MODAL MOBILE --- */
@media (max-width: 768px) {
    .skopos-modal-box {
        position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; max-height: none !important; border-radius: 0 !important; margin: 0 !important; transform: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; z-index: 100000; background: #fff;
    }
    .skopos-modal-content { flex-direction: column; height: auto; border-radius: 0; }
    .skopos-modal-left { width: 100%; height: auto; display: block; position: relative; }
    .skopos-modal-left img { width: 100%; height: auto; max-height: 50vh; display: block; }
    
    /* Serduszko Mobile (Na zdjęciu, prawy dół) */
    .skopos-modal-heart {
        position: absolute !important; bottom: 35px !important; right: 10px !important;
        top: auto !important; left: auto !important;
        background: rgba(255,255,255,1) !important;
        border-radius: 50%; width: 44px; height: 44px; border: none;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 20;
    }

    .skopos-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%); background: rgba(255,255,255,0.85); width: 36px; height: 36px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-size: 18px; z-index: 30; }
    .skopos-prev { left: 10px !important; }
    .skopos-next { right: 10px !important; }
    .skopos-modal-box > .skopos-prev, .skopos-modal-box > .skopos-next { display: none !important; }
    .skopos-modal-right { width: 100%; padding: 20px; padding-bottom: 80px; }
    .skopos-close { position: fixed; top: 10px; right: 10px; background: #fff; color: #000; border: none; width: 40px; height: 40px; font-size: 24px; line-height: 40px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 100001; }
}

/* 5. INNE */
.filter__group-name { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; margin: 0; cursor: pointer; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #222; letter-spacing: 0.5px; transition: color 0.2s; }
.filter__group-name:hover { color: #000; }
.filter__group-name::after { content: '+'; font-size: 22px; font-weight: 300; color: #888; margin-right: 5px; line-height: 1; transition: transform 0.3s ease; }
.filter__group.active .filter__group-name::after { content: '−'; color: #000; transform: rotate(180deg); }
.filter__group .facetwp-facet { display: none; padding-bottom: 20px; padding-top: 5px; }

.facetwp-checkbox { margin-bottom: 8px; padding-left: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E"); background-size: 18px; background-repeat: no-repeat; background-position: left center; font-size: 14px; color: #444; }
.facetwp-checkbox.checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 12l2 2 4-4' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); color: #000; font-weight: 600; }

.filter__fav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; border-bottom: 1px solid #f0f0f0; margin: 0; background: transparent; text-decoration: none !important; color: #222; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; }
.filter__fav-link .heart-icon { color: #d65b5b; font-size: 18px; margin-right: 8px; }
.filter__fav-link::after { content: 'ZOBACZ'; font-size: 10px; font-weight: 600; color: #333; border: 1px solid #ddd; background: #fff; padding: 6px 12px; border-radius: 2px; transition: all 0.2s; }
.filter__fav-link:hover::after { border-color: #000; color: #000; }

.verosun-pagination-container { width: 100%; display: flex; justify-content: center; align-items: center; padding: 0 !important; margin-top: 10px !important; margin-bottom: 40px; text-align: center; position: relative; z-index: 5; }
.verosun-pagination-container .facetwp-page { display: inline-block; padding: 6px 10px !important; margin: 0 3px; border: 1px solid #eaeaea; background-color: #fff; color: #333; text-decoration: none; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; border-radius: 4px; transition: all 0.2s ease; cursor: pointer; }
.verosun-pagination-container .facetwp-page:first-child, .verosun-pagination-container .facetwp-page:last-child { padding-left: 20px !important; padding-right: 20px !important; font-weight: bold; }
.verosun-pagination-container .facetwp-page.active { background-color: #fec303; border-color: #fec303; color: #fff; font-weight: 700; cursor: default; }
.verosun-pagination-container .facetwp-page:hover { border-color: #fec303; color: #333; }

.verosun-badges-container { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.v-badge { font-size: 9px; font-weight: 800; padding: 3px 6px; border-radius: 3px; text-transform: uppercase; background: #eee; color: #333; }
.v-status-badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; font-size: 10px; font-weight: 800; color: #fff; border-radius: 2px; z-index: 5; }
.v-status-wyczerpanie { background-color: #d63031; }
.v-status-nowosc { background-color: #00b894; }

.verosun-local-seo { margin-top: 50px; border-top: 1px solid #eaeaea; padding: 30px 0; width: 100%; display: block; }
.verosun-local-seo h2 { font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.verosun-local-seo p { font-size: 15px; color: #555; }

.skopos-title { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; color: #333; line-height: 1.2; display: block; }
/* =========================================
   SEO & TYPOGRAFIA (Zmiana na H3)
   ========================================= */
.skopos-title {
    font-family: 'Roboto', sans-serif; /* Dziedziczy z motywu, ale dla pewności */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: #333;
    line-height: 1.2;
    display: block; /* H3 jest blokowy, ale w FacetWP różnie bywa */
}
/* =========================================
   SEO LOKALNE (Local Power Pack - Wersja V-1.3)
   ========================================= */
.verosun-local-seo {
    margin-top: 50px;
    border-top: 1px solid #eaeaea;
    padding-top: 30px;
    padding-bottom: 30px;
    clear: both;
    width: 100%;
    display: block;
}

/* Główny nagłówek sekcji (H2) */
.verosun-local-seo h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 20px; /* Odpowiednik klasy h4 */
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

/* Podnagłówek (H3) - nowość z notatnika */
.verosun-local-seo h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 16px; /* Odpowiednik klasy h5 */
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #444;
}

.verosun-local-seo p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

.verosun-local-seo strong {
    color: #333;
    font-weight: 600;
}

/* Mały tekst na dole (Call to Action) */
.verosun-local-seo .verosun-seo-footer {
    font-size: 13px;
    color: #777;
    margin-top: 10px;
}
/* ==========================================================================
   FIX MIGOTANIA NA MOBILE (Rezerwacja miejsca na zdjęcie)
   ========================================================================== */
@media (max-width: 991px) {
    /* Wymuszamy minimalną wysokość kontenera ze zdjęciem w modalu.
       Dzięki temu tabelka walidatora nie "wskoczy" do góry, 
       zanim zdjęcie się załaduje. */
    .skopos-modal-left {
        min-height: 350px; /* Rezerwujemy miejsce na start */
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff; /* Białe tło w trakcie ładowania */
        position: relative;
        transition: min-height 0.2s ease; /* Płynne dopasowanie jeśli zdjęcie jest wyższe */
    }

    /* Opcjonalnie: Dodajemy delikatny loader (kręcące się kółko), 
       który będzie widać zanim pojawi się zdjęcie */
    .skopos-modal-left::before {
        content: '';
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        border: 2px solid #f0f0f0;
        border-top-color: #333;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        z-index: 0;
    }
    
    /* Zdjęcie przykryje loader, gdy się załaduje */
    .skopos-modal-left img {
        z-index: 1; 
        position: relative;
        background: #fff;
    }
}
/* ==========================================================================
   VEROSUN PLISY - FIX MOBILE (Zlicowanie zdjęcia z górną krawędzią)
========================================================================== */
@media (max-width: 991px) {
    .plisy-mobile-fix { 
        min-height: auto !important; 
        align-items: flex-start !important; 
        padding-top: 0px !important; 
        margin-top: 0px !important;
    }
}
/* ==========================================================================
   VEROSUN PLISY - CIEMNE TŁO MODALA (Dopasowanie do zdjęć tkanin)
========================================================================== */
.skopos-modal-left.plisy-bg-dark {
    background-color: #333333 !important;
}

/* ==========================================================================
   6. WIZUALNE FILTRY KOLORÓW (KAFELKI)
   ========================================================================== */
.facetwp-facet-kolory {
    /* Tu nie ruszamy nic, układ bazowy kafelków */
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}

.facetwp-facet-kolory .facetwp-checkbox {
    width: 36px !important;
    height: 36px !important;
    border-radius: 4px !important; 
    border: 1px solid #d1d1d1 !important;
    background-image: none !important; 
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    position: relative; 
}

.facetwp-facet-kolory .facetwp-checkbox.checked {
    border: 2px solid #2271b1 !important; 
}

/* POWIĘKSZONY I POGRUBIONY PTASZEK (Zaznaczenie) */
.facetwp-facet-kolory .facetwp-checkbox.checked::after {
    content: '' !important;
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 15px; /* Powiększony (z 6x12 na 8x15) */
    border: solid white; 
    border-width: 0 3px 3px 0; /* Pogrubiony (z 2px na 3px) */
    transform: translate(-50%, -55%) rotate(45deg);
    display: block !important;
    z-index: 15;
}

/* WYJĄTEK DLA JASNYCH TKANIN (Kontrast) */
/* Jeśli tkanina jest jasna (biały, beżowy, żółty, pomarańczowy), ptaszek zmienia kolor na ciemny antracyt */
.facetwp-facet-kolory .facetwp-checkbox.checked[data-value="bialy"]::after,
.facetwp-facet-kolory .facetwp-checkbox.checked[data-value="bezowy"]::after,
.facetwp-facet-kolory .facetwp-checkbox.checked[data-value="zolty"]::after,
.facetwp-facet-kolory .facetwp-checkbox.checked[data-value="pomaranczowy"]::after {
    border-color: #333333 !important;
}

/* --------------------------------------------------------------------------
   INTUICYJNY GHOST V6 (Złoty środek: 2px grubości, żywa czerwień)
   -------------------------------------------------------------------------- */
.facetwp-facet-kolory .facetwp-checkbox.disabled {
    opacity: 1 !important; 
    cursor: not-allowed !important;
    pointer-events: none !important;
    overflow: hidden !important;
    filter: none !important; 
    position: relative !important; 
}

/* KROK 1: "Biała mgła" zostaje bez zmian */
.facetwp-facet-kolory .facetwp-checkbox.disabled::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(255, 255, 255, 0.65) !important; 
    z-index: 5 !important;
    display: block !important;
    border: none !important;
}

/* KROK 2: Kreska (2px) krzyżyk w eleganckim, nie zgaszonym kolorze */
.facetwp-facet-kolory .facetwp-checkbox.disabled::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: 
        linear-gradient(to top right, transparent calc(50% - 1px), #ff0000 calc(50% - 1px), #ff0000 calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to bottom right, transparent calc(50% - 1px), #ff0000 calc(50% - 1px), #ff0000 calc(50% + 1px), transparent calc(50% + 1px)) !important;
    z-index: 10 !important; 
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ==========================================================================
   7. AKORDEON FILTRÓW (PŁYNNY RUCH + FIX UKŁADU KAFELKÓW)
   ========================================================================== */
.filter__group {
    border-bottom: 1px solid #e5e5e5 !important;
}

.filter__group-name {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer;
    padding: 18px 0 !important; 
    font-weight: 600;
    color: #333;
}

.filter__group-name::after {
    content: '+';
    font-size: 22px;
    transition: transform 0.3s ease;
}

.filter__group.v-filter-open .filter__group-name::after {
    content: '−'; 
    color: #2271b1;
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   STAN ZAMKNIĘTY (Oszustwo Iluzjonisty)
   -------------------------------------------------------------------------- */
.filter__group .facetwp-facet {
    max-height: 0;
    opacity: 0;
    overflow: hidden !important; 
    margin: 0 !important;
    padding: 0 !important;
    
    /* Wymuszamy block, by FacetWP nie zniknął, a animacja ruszyła */
    display: block !important; 
    visibility: hidden;

    /* Trik: Przy zamykaniu opacity znika w 0.15s */
    transition: opacity 0.15s ease-out, max-height 0.35s cubic-bezier(0, 1, 0, 1), padding 0.35s ease, visibility 0.35s;
}

/* --------------------------------------------------------------------------
   STAN OTWARTY (Gładki wjazd + PRZYWRÓCENIE FLEXA DLA KOLORÓW)
   -------------------------------------------------------------------------- */
.filter__group.v-filter-open .facetwp-facet {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    padding-top: 10px !important;
    padding-bottom: 18px !important;
    
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in, padding 0.4s ease;
}

/* !!! KLUCZOWY FIX !!! */
/* Przywracamy układ siatki (flex) dla kolorów, gdy filtr jest otwarty */
.filter__group.v-filter-open .facetwp-facet-kolory {
    display: flex !important;
}
/* ==========================================================================
   WIZUALNY UX: ZWIJANIE WALIDATORA (MODAL)
   ========================================================================== */
.v-validator-header {
    cursor: pointer !important;
    position: relative;
    user-select: none;
}

/* Strzałka informująca o możliwości rozwinięcia */
.v-validator-header::after {
    content: '▾';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%); /* Idealne wyśrodkowanie w pionie */
    font-size: 24px;
    transition: transform 0.3s ease;
    color: #777;
}

/* Obrót strzałki po zwinięciu */
.v-validator-header.is-collapsed::after {
    transform: translateY(-50%) rotate(-90deg);
}