/* Wlasne menu glowne sklepu (kreator w /admin/layout) — komponent ShopMenuBar.

   Ladowany WARUNKOWO w App.razor: tylko gdy administrator skonfigurowal pozycje menu
   albo na trasie podgladu ukladu. Sklep bez konfiguracji nie pobiera ani bajta.

   Modyfikator .shop-nav-custom laduje na kontenerze ramy (.tr-nav / .mk-nav / .cp-pills),
   wiec kolory i typografie pasek bierze ze swojego kierunku jak dotad. Ten arkusz dodaje
   wylacznie to, czego sciezka automatyczna nie potrzebowala: rozwijany panel kategorii
   (.shop-mega — wzorzec .mk-mega z marketplace.css, czysty CSS bez JS, dziala na statycznym
   SSR /Account/*) i neutralizacje przewijania poziomego.

   Swoistosc [data-shop] .klasa.klasa = (0,3,0) — wygrywa z regulami kierunkow (0,2,0)
   niezaleznie od kolejnosci arkuszy. */

/* Pasek z menu wlasnym NIE moze przewijac w poziomie: overflow-x:auto na .tr-nav / .cp-pills
   UCINALby absolutnie pozycjonowany panel (kazdy overflow rozny od visible przycina takze
   w pionie). Dlugie menu zawija sie do drugiej linii zamiast przewijac — menu przewijane
   w poziomie z dropdownem to oksymoron. */
[data-shop] .tr-nav.shop-nav-custom,
[data-shop] .mk-nav.shop-nav-custom,
[data-shop] .cp-pills.shop-nav-custom {
    overflow: visible;
    flex-wrap: wrap;
}

/* Punkt odniesienia panelu: POZYCJA, ktora go otwiera (feedback 2026-08-23, trzecia iteracja:
   left:0 wzgledem full-bleed belki kleilo panel do krawedzi EKRANU, wysrodkowanie odrywalo go
   od pozycji). Panel zaczyna sie rowno z lewa krawedzia pozycji i rosnie w prawo; szerokosc
   idzie z klas kolumnowych w rem z sufitem 80vw. */
[data-shop] .shop-nav-item {
    position: relative;
    z-index: 1;
}

/* Otwarta pozycja musi byc NAD linkami sasiadow — inaczej panel jest malowany pod linkiem
   nastepnej pozycji i wjazd mysza w panel otwiera drugie menu (pulapka z .mk-mega). */
[data-shop] .shop-nav-item:hover,
[data-shop] .shop-nav-item:focus-within {
    z-index: 10;
}

/* Mostek na ewentualna luke miedzy spodem pozycji a panelem (belki z wlasnym paddingiem,
   np. pigulki compact) — niewidzialny pasek utrzymuje :hover przez cala droge kursora. */
[data-shop] .shop-nav-item:hover::after,
[data-shop] .shop-nav-item:focus-within::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.7rem;
}

[data-shop] .shop-nav-caret {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-left: 0.25rem;
}

/* Rozwijany panel kategorii — bez JavaScriptu (hover / focus-within), zamykanie po kliknieciu
   dokleja nativeDropdown.js. Celowo biala kartka takze na ciemnych paskach (wzorzec .mk-mega);
   ciemny motyw Bootstrapa dostaje wariant nizej. */
[data-shop] .shop-mega {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px;
    display: none;
    background: #fff;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 18px 38px -20px rgba(15, 23, 42, 0.55);
    padding: 0.9rem 1.1rem;
    z-index: 20;
}

/* Liczba kolumn (klasa z ShopMenuBar): DOMYSLNIE do 4; 5-6 dopiero przy drzewie, ktore
   nie zmiesciloby sie w ~500px wysokosci. Szerokosc w rem (punktem odniesienia jest waska
   pozycja menu, wiec procenty by tu klamaly) z sufitem 75vw — pozycja rozwijana stoi zwykle
   przy lewej krawedzi czesci centralnej, wiec prawa krawedz panelu konczy sie w okolicy
   prawej krawedzi tresci, nie za nia (szkic uzytkownika 2026-08-23).

   Uklad wewnatrz to CSS MULTICOL (.shop-mega-flow), nie grid: grid wyrownuje wiersze do
   najwyzszej grupy, wiec kategoria BEZ podkategorii zostawiala pod soba pustke na wysokosc
   calego wiersza (feedback 2026-08-23, „Trawy"). W kolumnach grupy stoja jedna pod druga
   ze stalym odstepem, a przegladarka sama balansuje wysokosc kolumn. */
[data-shop] .shop-mega-cols-1 { width: min(18rem, 75vw); }
[data-shop] .shop-mega-cols-2 { width: min(30rem, 75vw); }
[data-shop] .shop-mega-cols-3 { width: min(42rem, 75vw); }
[data-shop] .shop-mega-cols-4 { width: min(56rem, 75vw); }
[data-shop] .shop-mega-cols-5 { width: min(70rem, 75vw); }
[data-shop] .shop-mega-cols-6 { width: min(84rem, 75vw); }

[data-shop] .shop-mega-cols-2 .shop-mega-flow { column-count: 2; }
[data-shop] .shop-mega-cols-3 .shop-mega-flow { column-count: 3; }
[data-shop] .shop-mega-cols-4 .shop-mega-flow { column-count: 4; }
[data-shop] .shop-mega-cols-5 .shop-mega-flow { column-count: 5; }
[data-shop] .shop-mega-cols-6 .shop-mega-flow { column-count: 6; }

[data-shop] .shop-mega-flow {
    column-gap: 1.25rem;
}

/* Bezpiecznik na ekstremalne drzewa: panel nie wyjezdza poza dol ekranu, tylko przewija sie
   w pionie. overflow-y na SAMYM panelu jest bezpieczny — to on jest pozycjonowanym pudlem,
   przycina wlasna zawartosc, nie siebie. */
[data-shop] .shop-mega {
    max-height: min(70vh, 560px);
    overflow-y: auto;
}

[data-shop] .shop-nav-item:hover > .shop-mega,
[data-shop] .shop-nav-item:focus-within > .shop-mega {
    display: block;
}

/* Grupa kategorii jest NIEPODZIELNA (break-inside) — naglowek na dole jednej kolumny
   z podkategoriami na gorze nastepnej wygladalby jak blad. Odstep miedzy grupami
   ulozonymi jedna pod druga: ~30px (feedback 2026-08-23); przy zlamaniu kolumny
   margines znika naturalnie, wiec kolumny zaczynaja sie rowno od gory. */
[data-shop] .shop-mega-col {
    min-width: 0;
    break-inside: avoid;
    margin-bottom: 1.75rem;
}

[data-shop] .shop-mega-root {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-strong, #0f172a);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
    margin-bottom: 0.15rem;
}

/* WISZACE WCIECIE (feedback 2026-08-23): znacznik stoi POZA strumieniem tekstu (absolute),
   a tekst ma stale wciecie z lewej — dwuliniowa podkategoria („Akcesoria systemow
   nawadniajacych") rowna druga linie do pierwszej litery, nie pod kropke. Znacznik inline
   z margin-right lamal to przy kazdym zawinieciu. */
[data-shop] .shop-mega-link {
    display: block;
    position: relative;
    padding: 0.32rem 0.6rem 0.32rem 1.45rem;
    border-radius: 0.3rem;
    font-size: 0.83rem;
    color: var(--text-mid, #1e293b);
    text-decoration: none;
}

/* ── Cztery wzory panelu (wybor per pozycja menu, makiety 2026-08-23) ──────────────
   Kolory NIE sa zaszyte: naglowek i znaczniki ida z tokenow MENU BOCZNEGO (naglowki sekcji /
   kropki podkategorii), z lancuchem awaryjnym do koloru marki — panel przemalowuje sie razem
   ze sklepem w edytorze ukladu. */
[data-shop] .shop-mega {
    --mega-accent: var(--lay-rail-section-ink, var(--lay-rail-active-ink, var(--brand-primary, #2563eb)));
    --mega-marker: var(--lay-rail-child-dot, var(--lay-rail-section-ink, var(--brand-primary, #2563eb)));
}

/* Znacznik podkategorii — kropka (wzory 1-3) albo strzalka (wzor 4), czysty ::before.
   Absolutny w pasie wcietego paddingu linku; bez top znacznik zostaje w pozycji statycznej,
   czyli na PIERWSZEJ linii tekstu. */
[data-shop] .shop-mega-link::before {
    content: "\2022";
    color: var(--mega-marker);
    position: absolute;
    left: 0.6rem;
}

[data-shop] .shop-mega.is-cards .shop-mega-link::before {
    content: "\203A";
    font-weight: 700;
}

/* Wzor 2 (DOMYSLNY, .is-upper): maly naglowek wielkimi literami — jak sekcje menu bocznego. */
[data-shop] .shop-mega.is-upper .shop-mega-root {
    color: var(--mega-accent);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* Wzor 1 (.is-accent): naglowek w kolorze akcentu, zwykla wielkosc liter. */
[data-shop] .shop-mega.is-accent .shop-mega-root {
    color: var(--mega-accent);
}

/* Wzor 3 (.is-headline): powiekszony ciemny naglowek z krotkim podkresleniem w akcencie. */
[data-shop] .shop-mega.is-headline .shop-mega-root {
    font-size: 0.95rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.35rem;
    position: relative;
}

[data-shop] .shop-mega.is-headline .shop-mega-root::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    bottom: 0.1rem;
    width: 1.6rem;
    height: 2.5px;
    border-radius: 2px;
    background: var(--mega-accent);
}

/* Wzor 4 (.is-cards): kazda kategoria glowna na wlasnej jasnej karcie.
   Karty maja wlasne ramki, wiec odstepy sa ciasniejsze niz w wersji bez kart. */
[data-shop] .shop-mega.is-cards {
    background: var(--surface-subtle, #fafafb);
}

[data-shop] .shop-mega.is-cards .shop-mega-flow {
    column-gap: 0.55rem;
}

[data-shop] .shop-mega.is-cards .shop-mega-col {
    margin-bottom: 0.55rem;
}

[data-shop] .shop-mega.is-cards .shop-mega-col {
    background: #fff;
    border: 1px solid var(--border-light, #ececef);
    border-radius: 0.45rem;
    padding: 0.5rem 0.55rem;
}

[data-shop] .shop-mega.is-cards .shop-mega-root {
    color: var(--mega-accent);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-light, #f0f0f2);
    border-radius: 0;
    margin-bottom: 0.3rem;
}

html[data-bs-theme="dark"] [data-shop] .shop-mega.is-cards {
    background: var(--bs-tertiary-bg, #24262b);
}

html[data-bs-theme="dark"] [data-shop] .shop-mega.is-cards .shop-mega-col {
    background: var(--bs-body-bg, #1a1d21);
    border-color: var(--bs-border-color, #343a40);
}

[data-shop] .shop-mega-root:hover,
[data-shop] .shop-mega-root:focus-visible,
[data-shop] .shop-mega-link:hover,
[data-shop] .shop-mega-link:focus-visible {
    background: var(--surface-subtle, #f8fafc);
}

/* Ciemny motyw (midnight albo token lay-surface-mode=dark) — panel na tle motywu,
   nie snieznobialy prostokat. */
html[data-bs-theme="dark"] [data-shop] .shop-mega {
    background: var(--bs-body-bg, #1a1d21);
    border-color: var(--bs-border-color, #343a40);
}

html[data-bs-theme="dark"] [data-shop] .shop-mega-root {
    color: var(--bs-body-color, #e9ecef);
}

html[data-bs-theme="dark"] [data-shop] .shop-mega-link {
    color: var(--bs-secondary-color, #adb5bd);
}

html[data-bs-theme="dark"] [data-shop] .shop-mega-root:hover,
html[data-bs-theme="dark"] [data-shop] .shop-mega-root:focus-visible,
html[data-bs-theme="dark"] [data-shop] .shop-mega-link:hover,
html[data-bs-theme="dark"] [data-shop] .shop-mega-link:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}

/* Ponizej lg panel rozwijany nie istnieje — pelne drzewo kategorii jest w szufladzie.
   Dotyczy ramy compact, ktorej pasek pigulek jest widoczny na kazdej szerokosci. */
@media (max-width: 991.98px) {
    [data-shop] .shop-mega {
        display: none !important;
    }

    [data-shop] .shop-nav-caret {
        display: none;
    }
}

/* ── Plakietka przy pozycji menu ("HOT", "NOWE") ───────────────────────────────
   Napis i kolory ustawia administrator w /admin/layout (zakladka "Menu"); kolory ida inline
   na elemencie, wiec tutaj zostaje wylacznie ksztalt i typografia.

   Plakietka stoi W LINII za napisem, a nie w rogu pozycji: pasek menu wlasnego ma
   flex-wrap: wrap (patrz reguly na gorze pliku), wiec element wystajacy poza pozycje
   wchodzilby na sasiada z linii wyzej. Na telefonie pasek pigulek zawija sie prawie zawsze. */
[data-shop] .shop-nav-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.16rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
    /* Drobny druk siedzi na linii bazowej nizej niz srodek napisu obok — bez tej korekty
       plakietka "wisi" pod tekstem pozycji. */
    vertical-align: 0.08em;
}

/* Pozycje ramy marketplace sa flexem z wlasnym gap — dodatkowy margines dalby podwojna przerwe. */
[data-shop] .mk-nav-link .shop-nav-badge {
    margin-left: 0;
}

/* W szufladzie i panelu bocznym pozycja zajmuje cala szerokosc, wiec plakietka idzie do prawej
   krawedzi zamiast kleic sie do napisu. */
[data-shop] .sidebar-link .shop-nav-badge {
    margin-left: auto;
}