/* Style dla strony marki (pa_marka) */

/* --- UKŁAD KAFLI (DESKTOP) --- */
.marka-kategorie-kafelki {
    display: grid;
    /* Używamy auto-fit z minmax, aby kafelki automatycznie się skalowały.
       Minimalny rozmiar kafelka ustawiamy na 160px/180px, aby zmieściły się 2 na telefonie. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px; /* Zwiększony gap dla lepszego wyglądu */
    padding: 20px 0;
}

.marka-kafelek {
    width: 100%;
    display: flex; /* Zmiana na flex dla lepszej kontroli nad treścią */
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px 10px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.marka-kafelek:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border-color: #d0d0d0;
}

.kafelek-obraz {
    overflow: hidden;
    margin: 5px;
    margin-bottom: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ustalona wysokość zostaje, ale dodajemy max-width dla lepszej kontroli */
    max-width: 150px; 
    width: 100%;
    height: 150px; 
}

.kafelek-obraz img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}

.kafelek-tytul {
    font-size: 16px !important;
    margin: 0;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* --- UKŁAD NAGŁÓWKA --- */
.marka-header-block {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}

.marka-header-image {
    flex-shrink: 0;
    width: 150px; /* <--- Zmieniamy to */
    height: 150px; /* <--- I to */
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.marka-header-image img {
    max-width: 80%; /* Mniejsze logo wewnątrz ramki */
    max-height: 80%;
    object-fit: contain;
}

.marka-header-title {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 700;
}

.marka-header-description {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.marka-podkategorie-naglowek {
    font-size: 20px;
    font-weight: 600;
}

/* --- Style dla sekcji Czytaj dalej (Read More) --- */

.marka-desc-container {
    position: relative;
    margin-bottom: 20px;
}

.marka-header-description {
    position: relative;
    max-height: 110px; /* Wysokość zwiniętego tekstu (ok. 4-5 linii) */
    overflow: hidden;
    transition: max-height 0.5s ease; /* Płynna animacja */
    
    /* Efekt zanikania tekstu na dole */
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Klasa usuwająca maskę, gdy tekst jest krótki */
.marka-header-description.no-mask {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Styl po rozwinięciu */
.marka-desc-container.expanded .marka-header-description {
    max-height: 2000px; /* Wystarczająco dużo, by pokazać cały tekst */
    -webkit-mask-image: none;
    mask-image: none;
}

/* Styl przycisku "Czytaj dalej..." */
.marka-read-more-btn {
    margin-top: 8px;
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
    color: #000;
    font-size: 16px;
    display: inline-block;
}

.marka-read-more-btn:hover {
    text-decoration: none;
    color: #555;
}

/* --- UKŁAD DWUKOLUMNOWY --- */
.marka-layout-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Lewa kolumna */
.marka-sidebar {
    width: 280px; /* Stała szerokość drzewka */
    flex-shrink: 0;
}

/* Prawa kolumna */
.marka-content {
    flex-grow: 1;
    min-width: 0; /* Zapobiega rozpychaniu flexboxa */
}

/* --- STYL DRZEWKA KATEGORII (Styl "Jak na zdjęciu") --- */

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 2px solid #6b6668; /* Kreska jak na screenie */
    display: inline-block;
    padding-bottom: 5px;
}

.custom-product-categories {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #eee;
    border-radius: 4px;
}

/* Elementy listy */
.custom-product-categories li {
    position: relative;
    border-bottom: 1px solid #eee;
    list-style: none;
    margin: 0;
}

.custom-product-categories li:last-child {
    border-bottom: none;
}

/* Linki w drzewku */
.custom-product-categories li a {
    display: block;
    padding: 12px 40px 12px 15px;
    text-decoration: none;
    color: #333;
    font-size: 15px;
    transition: background 0.2s;
}

.custom-product-categories li a:hover {
    background-color: #f9f9f9;
    color: #6b6668;
}

/* Aktywna kategoria (pogrubiona) */
.custom-product-categories li.current-cat > a {
    font-weight: 700;
    color: #000;
}

/* --- PRZYCISK +/- --- */
.cat-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #ccc;
    font-weight: 300;
    z-index: 10;
    transition: color 0.2s;
}

.cat-toggle:hover {
    color: #6b6668;
}

/* --- SUBMENU (Dzieci) --- */
.custom-product-categories ul.children {
    display: none; 
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fcfcfc;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
}

/* Kiedy rodzic ma klasę .open, pokazujemy dzieci */
.custom-product-categories li.open > ul.children {
    display: block;
}

/* Stylizacja dzieci */
.custom-product-categories ul.children li a {
    padding-left: 30px; 
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}

/* Strzałka przy dzieciach (opcjonalnie, jak na screenie ">") */
.custom-product-categories ul.children li a::before {
    content: "›";
    margin-right: 5px;
    font-size: 16px;
    line-height: 1;
    color: #999;
}


/* Desktop – wymuszenie min. 3 kolumn */
@media (min-width: 992px) {
    .marka-kategorie-kafelki {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* ================================== */
/* RESPONSYWNOŚĆ MOBILNA     */
/* ================================== */

/* TABLETY / MAŁE DESKTOPY (Poniżej 992px) */
@media (max-width: 992px) {
    /* Główny układ: Sidebar ląduje nad treścią */
    .marka-layout-grid {
        flex-direction: column;
        gap: 25px;
    }
    .marka-sidebar {
        width: 100%;
        margin-bottom: 0;
    }

    /* Kafelki: 3 w rzędzie na większości tabletów */
    .marka-kategorie-kafelki {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 15px;
    }
}

/* TELEFONY (Poniżej 768px) */
@media (max-width: 767px) {
    
    /* Nagłówek marki (dla małych zdjęć) */
    .marka-header-block {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    /* ------------------------------------- */
    /* POPRAWIONE STYLE KAFLI NA MOBILE */
    /* ------------------------------------- */
    .marka-kategorie-kafelki {
        /* Utrzymujemy 2 kolumny na telefonach */
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
        padding: 10px 0;
    }
    
    .marka-kafelek {
        padding: 10px 5px;
        /* Utrzymujemy wyłączenie shadow i transformacji dla lepszej wydajności/czytelności */
        box-shadow: none;
        transform: none;
    }

    .kafelek-obraz {
        /* Usuwamy stałą wysokość i szerokość, aby dostosować się do mniejszych wymiarów */
        max-width: 100%; 
        width: auto;
        height: auto; 
        min-height: 80px; /* Dodajemy minimalną wysokość, żeby kafelki były równe */
        margin: 0;
        margin-bottom: 8px; /* Mniejszy margines */
    }

    .kafelek-obraz img {
        /* Zmieniamy max-height, aby obrazki były mniejsze wewnątrz elastycznego kontenera */
        max-width: 90%;
        max-height: 80px; 
        width: auto;
        height: auto;
        object-fit: contain;
    }
    
    .kafelek-tytul {
        font-size: 13px !important; /* Mniejsza czcionka */
    }

    /* ------------------------------------- */

    .marka-header-title {
        font-size: 24px;
    }
    .marka-podkategorie-naglowek {
        font-size: 18px;
    }
}

/* BARDZO MAŁE TELEFONY (Poniżej 480px) */
@media (max-width: 480px) {
    /* Utrzymujemy 2 kafelki, ale zmniejszamy marginesy */
    .marka-kategorie-kafelki {
        gap: 8px;
    }
}