:root {
    /* Desktop Menu */
    --lukuro-dyncat-desktop-border-color: var(--at-primary-t-5, rgba(0,0,0,0.1));
    --lukuro-dyncat-desktop-border-color-hover: var(--lukuro-color-primary, #111);

    /* Mobile Menu - wszystko przez warstwe semantyczna, wiec odwraca sie z motywem */
    --lukuro-dyncat-mobile-border-color: var(--lukuro-color-hairline, #e0e0e0);
    --lukuro-dyncat-mobile-border-color-hover: var(--lukuro-color-border-control, #767676);
    --lukuro-dyncat-mobile-text-color: var(--lukuro-color-text, #222);
    --lukuro-dyncat-mobile-bg-color: var(--lukuro-color-surface, #fff);
    --lukuro-dyncat-mobile-bg-color-hover: var(--lukuro-color-surface-subtle, #f5f5f5);

    /* Mobile Menu - Active State */
    --lukuro-dyncat-mobile-active-bg-color: var(--lukuro-color-primary, #111);
    --lukuro-dyncat-mobile-active-text-color: var(--lukuro-color-on-primary, #fff);
    --lukuro-dyncat-mobile-active-border-color: var(--lukuro-color-primary, #111);
}

.lukuro-dyncat-desktop-menu,
.lukuro-dyncat-mobile-menu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Desktop Menu Styles
   ------------------
   Wylacznie powyzej progu. Ponizej niego ten sam markup jest zwiniety do poziomu
   kontekstowego (`lukuro-dyncat-scope`), wiec style drzewa nie maja tam czego stylowac.
   Media query zaweza WARUNEK, ale nie podnosi specyficznosci, wiec nie chroni przed
   wlasna kopia tych regul serwowana z innego arkusza (krytyczny CSS, UCSS, cache CDN
   potrafia niesc wersje sprzed aktualizacji, jeszcze bez tego opakowania). Ochrona
   poziomu mobilnego stoi na specyficznosci i mieszka w `get_mobile_css()`.
   Prog trzymaj zgodny z media query poziomu mobilnego. */
@media (min-width: 992px) {
    .lukuro-dyncat-desktop-menu ul {
        list-style: none;
        padding-left: 0;
        display: none;
    }

    .lukuro-dyncat-desktop-menu ul.is-open {
        display: block;
    }

    .lukuro-dyncat-desktop-menu li a {
        display: block;
        padding: 8px 0;
    }

    .lukuro-dyncat-desktop-menu ul li {
        border-left: 2px solid var(--lukuro-dyncat-desktop-border-color);
        padding-left: 15px;
        margin-bottom: 0;
        transition: border-color 0.3s ease;
    }

    .lukuro-dyncat-desktop-menu ul li a {
        font-size: var(--at-text--s, 14px);
    }

    .lukuro-dyncat-desktop-menu ul li:hover {
        border-left-color: var(--lukuro-dyncat-desktop-border-color-hover);
    }

    .lukuro-dyncat-desktop-menu a {
        color: color-mix(in srgb, var(--at-neutral-d-5, #1d2122) 80%, transparent);
    }
    .lukuro-dyncat-desktop-menu a:hover {
        color: var(--lukuro-color-primary-text, #111);
    }

    /* Active category and its ancestors */
    .lukuro-dyncat-desktop-menu .current-cat > a,
    .lukuro-dyncat-desktop-menu .current-cat-ancestor > a {
        color: var(--lukuro-color-primary-text, #111);
        font-weight: bold;
    }
}

/* Mobile Menu Styles (Horizontal Scroll) */
.lukuro-dyncat-mobile-menu {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 1px 0;
    margin-right: var(--at-gutter, 0);
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    gap: 4px;
}

/* Hide scrollbar for Chrome/Safari */
.lukuro-dyncat-mobile-menu::-webkit-scrollbar {
    display: none;
}

.lukuro-dyncat-mobile-menu li {
    flex: 0 0 auto; /* Don't shrink, don't grow, auto width */
    margin: 0;
    border: 1px solid var(--lukuro-dyncat-mobile-border-color);
    font-size: var(--at-text--s, 14px);
    list-style: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border-radius: 0;
}

.lukuro-dyncat-mobile-menu li:first-child {
    margin-left: var(--at-gutter, 0);
}

.lukuro-dyncat-mobile-menu li a {
    display: block;
    padding: 8px 16px;
    color: var(--lukuro-dyncat-mobile-text-color);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Active and Hover States */
.lukuro-dyncat-mobile-menu li.current-cat,
.lukuro-dyncat-mobile-menu li:hover {
    background-color: var(--lukuro-dyncat-mobile-active-bg-color);
    border-color: var(--lukuro-dyncat-mobile-active-border-color);
}

.lukuro-dyncat-mobile-menu li.current-cat a,
.lukuro-dyncat-mobile-menu li:hover a {
    color: var(--lukuro-dyncat-mobile-active-text-color);
}

/* Hide sub-menus if they were to appear */
.lukuro-dyncat-mobile-menu .sub-menu {
    display: none;
}

/* Back-Link Component Styles */
.lukuro-cat-title-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.lukuro-cat-title-link:hover {
    color: var(--lukuro-color-primary-text, #111);
}

/* Strzalka jako IKONA (nie tekst). Galaz tekstowa nie dostaje tych regul: niesie wlasny
   odstep w tresci, a `vertical-align` psulby ustawiona linie bazowa znaku. */
.lukuro-cat-title-arrow--icon {
    display: inline-flex;
    align-items: center;
    margin-inline-end: 0.35em;
    vertical-align: -0.1em;
}

.lukuro-cat-title-arrow--icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Niewidoczny blizniak strzalki za tytulem (kontrolka "Balance Arrow Width"): zajmuje tyle
   miejsca co strzalka, wiec przy `text-align: center` srodkiem jest sama nazwa kategorii.
   `white-space: pre` jest warunkiem dla galezi tekstowej: domyslne `'← '` konczy sie spacja,
   a spacja na koncu linii przy `normal` jest zdejmowana z wyrownania - blizniak bylby wezszy
   od strzalki o szerokosc tej spacji. Galaz ikonowa niesie modyfikator `--icon`, wiec odstep
   z kontrolki `arrow_icon_gap` wlicza sie do szerokosci bez osobnej reguly. */
.lukuro-cat-title-arrow--balance {
    visibility: hidden;
    white-space: pre;
    user-select: none;
}



/* Slot nawigacji
   -------------
   Na froncie slot jest pustym, bezstylowym pudelkiem - o jego wygladzie i widocznosci
   decyduje autor w builderze. Ponizsza etykieta pokazuje sie WYLACZNIE w podgladzie
   Bricks, zeby pusty element dalo sie zaznaczyc i przestawic na kanwie. */

.lukuro-nav-slot__hint {
    display: block;
    padding: 6px 10px;
    border: 1px dashed var(--lukuro-color-border-control, #767676);
    border-radius: 2px;
    color: var(--lukuro-color-text-muted, #767676);
    font-size: var(--at-text--s, 14px);
    text-align: center;
}


/* Plakietka kategorii
   ------------------
   Bok **25 px, rowny temu z filtrow** (`Lukuro_Filter_Visuals_Badges::BADGE_SIZE`) - to ta
   sama plakietka w dwoch miejscach i nie moze byc w kazdym innej wielkosci. Wieksza niz
   kropka swatcha kolorow (18 px) i to jest swiadome: kropka niesie jeden kolor, czytelny
   w kazdym rozmiarze, a plakietka niesie rysunek. Zmiana wymaga OBU miejsc.

   `contain`, nigdy `cover`: plakietka ma wlasna proporcje i ma sie renderowac w calosci.
   `inline-size`/`block-size` sa OBOWIAZKOWE mimo atrybutow `width`/`height` w znaczniku -
   bez nich obraz o proporcji 2:1 wychodzi z podrozmiaru jako 96x48 i rozpycha wiersz.
   `vertical-align` zamiast przestawiania linku na flex: link zostaje `block`/`inline` tak
   jak dotad, wiec uklady zbudowane przed ta zmiana nie ruszaja sie ani o piksel. */

.lukuro-dyncat-badge {
    inline-size: 25px;
    block-size: 25px;
    object-fit: contain;
    vertical-align: middle;
    margin-inline-end: 0.5em;
    flex: 0 0 auto;
}