.nl-kolekcje-grid-widget {
    width: 100%;
    /* Trochę oddechu nad zakładkami, żeby sekcja nie zaczynała się "z marszu"
       tuż pod menu, nawet gdy nie ma żadnego nagłówka nad nią. */
    padding-top: clamp(24px, 4vw, 48px);
    /* ...i pod siatką, żeby ostatni rząd lamp nie stykał się bezpośrednio
       ze stopką. */
    padding-bottom: clamp(48px, 8vw, 96px);
}

/* ------------------------------------------------------------------
   Mały nagłówek (opcjonalny, wyłączony domyślnie) - subtelna alternatywa
   dla dużego, wyśrodkowanego napisu strony.
   ------------------------------------------------------------------ */
.nl-kolekcje-kicker {
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 70%, transparent);
    margin: 0 0 32px;
}

/* ------------------------------------------------------------------
   Pasek filtrów (kolekcje)
   ------------------------------------------------------------------ */
.nl-kolekcje-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* "safe center": wyśrodkuj zakładki, O ILE mieszczą się w całości w
       kontenerze - a jeśli jest ich za dużo i i tak trzeba by je przewijać,
       zachowaj się jak zwykłe "flex-start" zamiast centrować i przycinać
       początek listy (to właśnie robi słowo kluczowe "safe" - bez niego
       samo "center" przy przepełnieniu potrafi ukryć część treści poza
       lewą krawędzią, w ogóle nieosiągalną przez scroll). Starsze
       przeglądarki bez obsługi "safe" po prostu zignorują tę linijkę i
       zostaną przy zwykłym "flex-start" zadeklarowanym wyżej. */
    justify-content: safe center;
    align-items: center;
    gap: 32px;
    border-bottom: 1px solid #D3C6BE;
    padding-bottom: 18px;
    margin-bottom: 48px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Przeciąganie myszką w poziomie na desktopie (patrz custom-kolekcje-grid.js)
       zamiast konieczności trzymania Shift+scroll. */
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.nl-kolekcje-tabs.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.nl-kolekcje-tabs::-webkit-scrollbar {
    display: none;
}

.nl-kolekcje-tab,
.nl-kolekcje-tab:hover,
.nl-kolekcje-tab:focus,
.nl-kolekcje-tab:active,
.nl-kolekcje-tab:visited {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 55%, transparent);
    transition: color 0.2s ease, font-weight 0.2s ease, font-size 0.2s ease;
    white-space: nowrap;
}

.nl-kolekcje-tab:hover {
    color: var(--ast-global-color-6, #111111);
}

.nl-kolekcje-tab.is-active {
    color: var(--ast-global-color-6, #111111);
    font-weight: 600;
    font-size: 1.05rem;
}

/* ------------------------------------------------------------------
   Siatka - domyślnie 3 w rzędzie (sterowane ustawieniem widgetu
   "Lamp w rzędzie" przez zmienną --nlk-columns), większe zdjęcia.
   ------------------------------------------------------------------ */
.nl-kolekcje-grid {
    display: grid;
    grid-template-columns: repeat(var(--nlk-columns, 3), 1fr);
    gap: 40px 32px;
}

.nl-kolekcja-card,
.nl-kolekcja-card:hover,
.nl-kolekcja-card:focus,
.nl-kolekcja-card:active,
.nl-kolekcja-card:visited {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    box-shadow: none !important;
    color: inherit;
}

.nl-kolekcja-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--ast-global-color-5, #F0F5FA);
    border-radius: 4px;
}

.nl-kolekcja-card-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nl-kolekcja-card:hover .nl-kolekcja-card-image img {
    transform: scale(1.04);
}

.nl-kolekcja-card-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.nl-kolekcja-card-title {
    margin-top: 16px;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ast-global-color-6, #111111);
}

.nl-kolekcje-empty {
    text-align: center;
    font-weight: 300;
    color: color-mix(in srgb, var(--ast-global-color-6, #111111) 65%, transparent);
}

/* Karty ukrywane przez JS po kliknięciu w zakładkę (patrz
   custom-kolekcje-grid.js) - bez przeładowania strony. Reguła "[hidden]"
   dodana na wszelki wypadek, gdyby coś w motywie/Elementorze nadpisywało
   domyślne "display:none" atrybutu "hidden" na elementach blokowych. */
.nl-kolekcja-card.is-hidden {
    display: none;
}

.nl-kolekcje-empty-dynamic[hidden] {
    display: none;
}

/* Uwaga: animacja "wyłaniania się" kart przy zmianie zakładki (patrz
   replayRevealAnimation() w custom-kolekcje-grid.js) korzysta już z gotowej
   reguły ".cet-animated.cet-in-view .cet-item" z elegant-animations.css -
   JS wymusza jej ponowne odpalenie chwilowym inline "animation: none" +
   reflow, więc nie potrzeba tu żadnej dodatkowej klasy/reguły CSS. Belka
   zakładek celowo NIE jest ruszana przy przełączaniu (nie ma na niej
   "cet-in-view" toggle'owanego w JS), dzięki czemu zostaje nieruchoma -
   animuje się wyłącznie siatka kart. */

/* ------------------------------------------------------------------
   Responsywność - telefony/tablety (nadpisuje ustawienie z panelu
   Elementora na mniejszych ekranach, żeby siatka zawsze była czytelna)
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    /* Selektor ".nl-kolekcje-grid-widget.cet-wrapper" (obie klasy naraz), a
       NIE sam ".nl-kolekcje-grid-widget" - element ma też klasę "cet-wrapper"
       (system animacji przy scrollu, patrz elegant-animations.css), który MA
       WŁASNĄ regułę "padding: ... 0px" (czyli zerujący padding-left/right w
       skrócie), a jego plik CSS ładuje się na tej stronie PO naszym - żeby
       bez wątpliwości wygrać w kaskadzie (bez uciekania się do "!important"),
       dokładamy tę samą specyficzność co on ma (jedna klasa), plus jeszcze
       jedną klasę więcej. */
    .nl-kolekcje-grid-widget.cet-wrapper {
        /* Bez tego cała sekcja (zakładki + siatka lamp) sięgała dosłownie
           od krawędzi do krawędzi ekranu na telefonie/tablecie - widget
           sam w sobie nie ma żadnego naturalnego marginesu, bo strona
           "Kolekcje" osadza go w kontenerze Elementora na pełną szerokość. */
        padding-left: 28px;
        padding-right: 28px;
    }

    .nl-kolekcje-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }

    /* Wizualna podpowiedź, że pasek kategorii da się przewinąć w bok - patrz
       initTabsScrollHint() w custom-kolekcje-grid.js. Pasek ma celowo ukryty
       scrollbar (scrollbar-width: none wyżej), więc bez tego wygląda jak
       zwykła, w pełni widoczna, statyczna lista - łatwo przeoczyć, że część
       kategorii jest schowana poza krawędzią ekranu. JS dolicza klasy
       "has-fade-left"/"has-fade-right" w zależności od tego, w którą stronę
       jeszcze da się przewinąć, a poniższe reguły delikatnie "wygaszają"
       (maskują) odpowiednią krawędź paska - podobnie jak np. w zakładkach
       systemowych na telefonie. Użyto "mask-image" (zamiast gradientu w
       kolorze tła) celowo, żeby efekt działał poprawnie niezależnie od tego,
       na jakim tle jest osadzony widget. */
    .nl-kolekcje-tabs.has-fade-left {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
        mask-image: linear-gradient(to right, transparent, #000 28px);
    }

    .nl-kolekcje-tabs.has-fade-right {
        -webkit-mask-image: linear-gradient(to left, transparent, #000 28px);
        mask-image: linear-gradient(to left, transparent, #000 28px);
    }

    .nl-kolekcje-tabs.has-fade-left.has-fade-right {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    }
}

@media (max-width: 600px) {
    .nl-kolekcje-grid-widget.cet-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nl-kolekcje-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .nl-kolekcje-tabs {
        gap: 20px;
    }
}