/* Arkusz WSPOLNY dla wszystkich kierunkow — tlumaczy tokeny --lay-* na te elementy sklepu,
   ktorych nie da sie obsluzyc samym aliasem zmiennej (bo app.css ma tam wartosc wpisana na sztywno
   albo wlasciwosc, a nie zmienna).

   LADOWANY WARUNKOWO: tylko gdy administrator ustawil chocby jeden token. Najemca, ktory nie ruszal
   kolorow, nie pobiera ani jednego bajta z tego pliku — gwarancja zgodnosci wstecznej zostaje w mocy.

   ZAKRES: wszystko pod [data-shop], czyli korzeniem ramy SKLEPU. Panel administracyjny nie ma tego
   atrybutu i zostaje przy palecie z /admin/system-config.

   ⚠ WARTOSCI AWARYJNE MUSZA ROWNAC SIE DZISIEJSZYM. Kazde var(--lay-x, WARTOSC) ma w drugim argumencie
   dokladnie to, co element ma dzis w app.css. Inaczej najemca, ktory zmienil sam kolor stopki,
   zobaczylby przy okazji przesuniete tlo albo inne obramowania kart.

   ⚠ KOLEJNOSC W <head>: ten plik idzie PRZED szkieletem ramy i arkuszem kierunku. Reguly maja tu
   te sama swoistosc co tam ([data-shop] .klasa vs [data-preset="x"] .klasa — obie 0,2,0), wiec
   o wyniku decyduje wylacznie kolejnosc. Gdyby ten plik szedl pozniej, jego wartosci awaryjne —
   pisane pod uklad KLASYCZNY, czyli bialy tekst na ciemnym panelu — nadpisywalyby kolory kierunku
   wszedzie tam, gdzie administrator danego tokenu NIE ustawil. Efekt: wystarczy zmienic kolor
   stopki, zeby nazwy kategorii zrobily sie biale na jasnym panelu.
   Ustawiony token dziala mimo wczesniejszej pozycji, bo kierunki czytaja go SAME
   przez var(--lay-x, wlasna-wartosc). */

/* ── Tlo strony ─────────────────────────────────────────────────────────
   Rama klasyczna ma kolor wpisany na sztywno w ClassicShell.razor.css, wiec sam alias --page-bg
   by jej nie ruszyl. Pozostale ramy czytaja --lay-page-bg we wlasnych arkuszach. */
[data-shop].page-shell {
    background: var(--lay-page-bg, #f4f7fb);
}

/* ── Ksztalt ────────────────────────────────────────────────────────────
   Zmienne Bootstrapa lapia karty, pola i przyciski naraz. Sufit 18 px chroni przed wpisaniem
   999px, ktore zamienia kafelki produktow w kola i obcina tekst. */
[data-shop] {
    --bs-border-radius: min(var(--lay-radius, 0.375rem), 18px);
    --bs-border-radius-sm: min(var(--lay-radius, 0.25rem), 18px);
    --bs-border-radius-lg: min(var(--lay-radius, 0.5rem), 18px);
}

/* ── Typografia ─────────────────────────────────────────────────────────
   Kroj dziedziczy sie w dol, wiec jedna deklaracja na korzeniu sklepu wystarcza.
   Panel administracyjny nie ma [data-shop], wiec zostaje przy kroju z app.css. */
[data-shop] {
    font-family: var(--lay-font-stack, inherit);
}

/* Wielkosc pisma: mnoznik, a nie rozmiar bezwzgledny.
   ⚠ Sam `font-size` na korzeniu sklepu NIE wystarczy — app.css podaje rozmiary w `rem`, ktore
   licza sie od <html>, a tego nie ruszamy, bo objelby takze panel administracyjny. Dlatego kazdy
   rozmiar, ktory ma reagowac, jest tu przeliczany jawnie: calc(wartosc-z-app.css * mnoznik).
   Mnoznik 1 daje dokladnie dzisiejsze wartosci, wiec bez ustawienia nic sie nie zmienia. */
[data-shop] .catalog-tile-title { font-size: calc(0.85rem * var(--lay-text-scale, 1)); }
[data-shop] .catalog-tile-price-value { font-size: calc(1rem * var(--lay-text-scale, 1)); }
[data-shop] .catalog-tile-meta { font-size: calc(0.72rem * var(--lay-text-scale, 1)); }
[data-shop] .catalog-tile-vat { font-size: calc(0.68rem * var(--lay-text-scale, 1)); }
[data-shop] .shop-category-link { font-size: calc(0.95rem * var(--lay-text-scale, 1)); }
[data-shop] .shop-category-link-child { font-size: calc(0.92rem * var(--lay-text-scale, 1)); }
[data-shop] .product-price { font-size: calc(1.7rem * var(--lay-text-scale, 1)); }
[data-shop] .tr-nav-link { font-size: calc(var(--tr-nav-size, 0.82rem) * var(--lay-text-scale, 1)); }

/* ── Odstepy ────────────────────────────────────────────────────────────
   Ten sam chwyt co przy wielkosci pisma: mnoznik zamiast wartosci bezwzglednej, zeby 1 dawalo
   dokladnie dzisiejszy uklad. Dotyczy miejsc, w ktorych gestosc realnie widac — siatki produktow,
   wnetrza kafelka i wypelnienia kart tresci. */
[data-shop] .catalog-grid {
    gap: calc(0.85rem * var(--lay-density, 1));
    padding: calc(0.9rem * var(--lay-density, 1));
}

/* Wypelnienie kafelka i panelu: BAZA z tokenu × MNOZNIK gestosci. Dwie kontrolki, ktore robia
   co innego — baza ustawia „ile powietrza ma ten element", gestosc skaluje caly uklad naraz.
   Wartosci awaryjne sa dokladnie te, ktore byly tu wpisane na sztywno, wiec nieustawiony token
   nie zmienia ani piksela. Boczne wypelnienie kafelka trzyma proporcje do gornego (7/6). */
[data-shop] .catalog-tile-body {
    padding: calc(var(--lay-card-pad, 0.6rem) * var(--lay-density, 1))
             calc(var(--lay-card-pad, 0.6rem) * 1.1667 * var(--lay-density, 1))
             0;
}

[data-shop] .card > .card-body {
    padding: calc(var(--lay-surface-pad, 1rem) * var(--lay-density, 1));
}

/* ── Karta produktu ─────────────────────────────────────────────────────
   .catalog-tile ma tlo #fff i promien 0.5rem wpisane wprost, a nie przez zmienna. */
[data-shop] .catalog-tile {
    background: var(--lay-card-bg, #fff);
    border-color: var(--lay-card-border, var(--border-light, #e5e7eb));
    /* Wlasne zaokraglenie kafelka, a gdy go nie ma — wspolne zaokraglenie sklepu z tym samym sufitem.
       Sufit zostaje takze na wartosci wlasnej: lista wyboru konczy sie na 18 px wlasnie dlatego. */
    border-radius: var(--lay-card-radius, min(var(--lay-radius, 0.5rem), 18px));

    /* Grubosc osobno od koloru: „schowaj obramowanie" to 0px, a nie kolor tla — inaczej ramka
       wracalaby przy kazdej zmianie tla karty. border-style musi byc jawny, bo przy border-width
       ustawionym z zerowego stanu przegladarka nie ma czego rysowac. */
    border-style: solid;
    border-width: var(--lay-card-border-width, 1px);

    /* Cien w SPOCZYNKU. Domyslnie brak — tak jest dzis; kafelek dostaje cien dopiero po najechaniu
       (regula .catalog-tile:hover w app.css i ona zostaje nietknieta). */
    box-shadow: var(--lay-card-shadow, none);
}

[data-shop] .catalog-tile-image {
    background: var(--lay-card-bg, var(--surface-subtle, #f8fafc));
}

/* ── Widok tabeli ───────────────────────────────────────────────────────
   Tabela to trzeci wyglad tej samej listy (obok kafelkow i wiersza), wiec slucha tych samych tokenow
   „Karta produktu". Bez tych regul klikniecie w tabele uzbrajalo obszar, ktory jej nie malowal —
   czyli dokladnie kontrolke udajaca, ze cos robi. */
[data-shop] .catalog-table {
    --bs-table-bg: var(--lay-card-bg, transparent);
}

[data-shop] .catalog-product-link {
    color: var(--lay-card-ink, var(--text-dark, #0f172a));
}

[data-shop] .catalog-price-value {
    color: var(--lay-price-ink, var(--el-price, inherit));
}

/* Ciemny pasek naglowka tabeli. Ma wlasne tokeny, bo to jedyny element listy, ktory jest cala
   powierzchnia w mocnym kolorze — dziedziczenie po karcie dawaloby napis bialy na bialym. */
[data-shop] .catalog-table-head th {
    background: var(--lay-table-head-bg, var(--table-header-bg, #64707d));
    color: var(--lay-table-head-ink, #fff);
}

/* ── Plakietki listy ────────────────────────────────────────────────────
   Przeniesione z zakladki „Wyglad" w /admin/system-config, gdzie sterowaly nimi zmienne --el-*.
   Kazda wartosc awaryjna przechodzi przez ta stara zmienna, wiec sklep skonfigurowany przed
   przeniesieniem wyglada identycznie, dopoki nikt nie ustawi tokenu ukladu. */
[data-shop] .catalog-stock-ok {
    background: var(--lay-stock-bg, var(--el-stock-bg, rgba(34, 197, 94, 0.12)));
    color: var(--lay-stock-ink, var(--el-stock-text, #15803d));
}

[data-shop] .catalog-inline-cart-badge-active {
    background: var(--lay-incart-bg, var(--el-inline-bg, rgba(255, 193, 7, 0.18)));
}

/* !important, bo regula w app.css tez je ma (nadpisuje klasy Bootstrapa kontekstowo). */
[data-shop] .catalog-table .badge.bg-dark,
[data-shop] .catalog-row-card .badge.bg-dark {
    background-color: var(--lay-producer-badge-bg, var(--el-producer-bg, #212529)) !important;
}

[data-shop] .mini-cart .badge.text-bg-primary,
[data-shop] .catalog-table .badge.text-bg-primary {
    background-color: var(--lay-cart-badge-bg, var(--el-cart-badge-bg, var(--brand-primary))) !important;
    color: var(--lay-cart-badge-ink, var(--el-cart-badge-text, #fff)) !important;
}

/* Nazwa produktu jest odnosnikiem, wiec domyslnie bierze kolor odnosnikow. Osobny token pozwala
   ja odciac od reszty linkow — czesty przypadek: linki kolorowe, ale tytuly produktow czarne. */
[data-shop] .catalog-tile-title {
    color: var(--lay-card-ink, var(--el-link, var(--text-dark, #0f172a)));
}

[data-shop] .catalog-tile-price-value {
    color: var(--lay-price-ink, var(--el-price, var(--brand-primary-dark, #1e3a8a)));
}

[data-shop] .catalog-tile-badge,
[data-shop] .promo-tile-badge {
    background: var(--lay-promo-bg, var(--el-promo-bg, var(--danger, #ef4444)));
}

/* ── Strona produktu ────────────────────────────────────────────────────
   Wnetrze karty produktu ma w app.css kolory wpisane wprost — glownie odcienie brandowego
   blekitu (rgba(37, 99, 235, …)). Bez tych regul kafel zakupu i cennik zostawaly niebieskie
   nawet w sklepie przemalowanym na zielono. Kazda wartosc awaryjna to dokladnie dzisiejsza. */
[data-shop] .product-buy-tile {
    background: var(--lay-buy-tile-bg, linear-gradient(180deg, rgba(37, 99, 235, 0.045), rgba(37, 99, 235, 0)));
    border-color: var(--lay-buy-tile-border, var(--brand-primary, #2563eb));
    border-radius: min(var(--lay-radius, 11px), 18px);
}

[data-shop] .product-price {
    /* „inherit" = zachowanie sprzed wdrozenia: cena dziedziczyla kolor tekstu strony.
       Promocyjna cena nosi .text-danger z !important, wiec zostaje czerwona niezaleznie od tokenu. */
    color: var(--lay-price-ink, inherit);
}

[data-shop] .price-ladder {
    background: var(--lay-ladder-bg, #fff);
    border-color: var(--lay-card-border, var(--border-subtle, rgba(148, 163, 184, 0.35)));
    border-radius: min(var(--lay-radius, 0.65rem), 18px);
}

[data-shop] .price-ladder-row.active,
[data-shop] .price-ladder-pack.active {
    background: var(--lay-ladder-active-bg, rgba(37, 99, 235, 0.09));
    border-left-color: var(--lay-accent, var(--brand-primary, #2563eb));
}

[data-shop] .price-ladder-pack {
    background: var(--lay-ladder-active-bg, linear-gradient(90deg, rgba(37, 99, 235, 0.05), transparent));
}

[data-shop] .product-info-tab.active {
    color: var(--lay-tab-active-ink, var(--brand-primary, #009244));
    border-bottom-color: var(--lay-tab-active-ink, var(--brand-primary, #009244));
}

/* ── Panele i podsumowania ──────────────────────────────────────────────
   Bootstrap stylizuje karty wlasnymi zmiennymi, wiec wystarczy je podmienic — zadnej walki
   o swoistosc. Karty oznaczone .border-0 zostaja bez obramowania, bo `border: 0` bije kolor. */
[data-shop] .card {
    --bs-card-bg: var(--lay-surface-bg, #fff);
    --bs-card-border-radius: var(--lay-surface-radius, min(var(--lay-radius, 0.5rem), 18px));
    --bs-card-border-color: var(--lay-surface-border, var(--bs-border-color, #dee2e6));
    --bs-card-border-width: var(--lay-surface-border-width, var(--bs-border-width, 1px));
}

/* Panele w sklepie noza klasy .border-0 i .shadow-sm, a obie maja !important — bez tego kontrolki
   „obramowanie" i „cien" bylyby martwe, czyli dokladnie to, czego rejestr zabrania rejestrowac.
   Swoistosc (0,3,0) bije utility (0,1,0), a wartosci awaryjne oddaja dzisiejszy wyglad co do piksela:
   brak ramki i delikatny cien Bootstrapa. */
[data-shop] .card.border-0 {
    border-style: solid !important;
    border-width: var(--lay-surface-border-width, 0) !important;
    border-color: var(--lay-surface-border, transparent) !important;
}

[data-shop] .card.shadow-sm {
    box-shadow: var(--lay-surface-shadow, 0 .125rem .25rem rgba(0, 0, 0, .075)) !important;
}

/* ── Przyciski akcji ────────────────────────────────────────────────────
   app.css ustawia .btn-primary { color: #fff } na sztywno — bez tej reguly napis na jasnym
   akcencie (zolty, limonkowy) bylby bialy na bialym. */
[data-shop] .btn-primary {
    background: var(--lay-accent, var(--btn-primary-bg, #2563eb));
    border-color: var(--lay-accent, var(--btn-primary-bg, #2563eb));
    color: var(--lay-accent-ink, #fff);
}

/* Przycisk NIEAKTYWNY musi wygladac na nieaktywny — a bez tej reguly wygladal na zwykly.
   app.css maluje `.btn-primary:disabled` na szaro (--btn-primary-disabled-bg), ale ma
   dokladnie te sama swoistosc co `[data-shop] .btn-primary` wyzej — obie (0,2,0) — wiec
   decydowala KOLEJNOSC arkuszy, a ten laduje sie PO app.css. Skutek: „Dodaj do koszyka"
   przy zerowej cenie albo zerowym stanie byl pelna czernia akcentu i wygladal na klikalny.
   `:disabled` podnosi swoistosc do (0,3,0), wiec teraz wygrywa niezaleznie od kolejnosci.
   `.disabled` obok `:disabled`, bo Bootstrap uzywa klasy dla <a> udajacych przycisk. */
[data-shop] .btn-primary:disabled,
[data-shop] .btn-primary.disabled {
    background: var(--btn-primary-disabled-bg, #9ca3af);
    border-color: var(--btn-primary-disabled-bg, #9ca3af);
    color: #fff;
    cursor: not-allowed;
}

/* Bootstrap kompiluje warianty przyciskow z WPISANYMI kolorami (--bs-btn-color: #0d6efd), a nie
   przez zmienna motywu — zadna podmiana --brand-primary tu nie dosiegnie. Wartosc awaryjna to
   dokladnie dzisiejszy blekit Bootstrapa, wiec bez ustawionego koloru akcji nic sie nie zmienia. */
[data-shop] .btn-outline-primary {
    --bs-btn-color: var(--lay-accent, #0d6efd);
    --bs-btn-border-color: var(--lay-accent, #0d6efd);
    --bs-btn-hover-bg: var(--lay-accent, #0d6efd);
    --bs-btn-hover-border-color: var(--lay-accent, #0d6efd);
    --bs-btn-active-bg: var(--lay-accent, #0d6efd);
    --bs-btn-active-border-color: var(--lay-accent, #0d6efd);
    --bs-btn-hover-color: var(--lay-accent-ink, #fff);
    --bs-btn-active-color: var(--lay-accent-ink, #fff);
}

[data-shop] .btn-primary:hover:not(:disabled),
[data-shop] .btn-primary:focus:not(:disabled) {
    background: var(--lay-accent, var(--btn-primary-bg, #2563eb));
    border-color: var(--lay-accent, var(--btn-primary-bg, #2563eb));
    color: var(--lay-accent-ink, #fff);
    filter: brightness(0.93);
}

/* ── Panel kategorii ────────────────────────────────────────────────────
   ⚠ NAJWAZNIEJSZA SEKCJA TEGO PLIKU. Drzewo kategorii sklepu bylo pisane pod JEDEN scenariusz:
   bialy tekst na ciemnym panelu — kolory ma wpisane wprost (rgba(255,255,255,.9)), a nie przez
   zmienna. Samo przemalowanie tla panelu na jasny daje wiec biale napisy na bieli.
   Kazda ponizsza regula ma w wartosci awaryjnej DOKLADNIE to, co element ma dzis w app.css. */
/* Kazda wartosc awaryjna idzie przez zmienna ramy (--tr-rail-*): na ramie z panelem gornym
   oddaje kolor kierunku, a na klasycznej, gdzie tej zmiennej nie ma, spada do dzisiejszej wartosci
   z app.css. Bez tego posrednika ustawienie JEDNEGO dowolnego tokenu przemalowywaloby drzewo
   kategorii na kolory ukladu klasycznego we wszystkich pozostalych kierunkach. */
[data-shop] .shop-category-link {
    color: var(--lay-rail-ink, var(--tr-rail-ink, rgba(255, 255, 255, 0.9)));
}

[data-shop] .shop-category-link-root {
    color: var(--lay-rail-ink, var(--tr-rail-ink, var(--border-subtle)));
}

/* Podkategorie maja WLASNY token, ale spadaja na kolor pozycji glownych, gdy nikt go nie ustawil —
   dzieki temu przemalowanie panelu jednym suwakiem nadal dziala, a kto chce, odcina podpozycje osobno. */
[data-shop] .shop-category-link-child {
    color: var(--lay-rail-child-ink, var(--lay-rail-ink, var(--tr-rail-ink, rgba(203, 213, 225, 0.92))));
}

[data-shop] .shop-category-child-dot {
    background: var(--lay-rail-child-dot, rgba(96, 165, 250, 0.85));
}

/* KSZTALT znacznika przy podkategorii. Jedna zmienna CSS nie ustawi naraz szerokosci, wysokosci,
   zaokraglenia i tresci, wiec przelaczamy ZAPYTANIEM O STYL — @container style(...). Zapytanie
   patrzy na wartosc zmiennej odziedziczonej z <html>, wiec dziala bez zadnego atrybutu w znaczniku
   i bez przeladowania strony (to warunek, zeby wybor byl widoczny w podgladzie od razu).
   ⚠ Przegladarka bez obslugi zapytan o styl pomija te bloki i zostaje przy kropce — degradacja
   jest lagodna, nie ma stanu „polowicznego". */
@container style(--lay-rail-child-marker: none) {
    [data-shop] .shop-category-child-dot { display: none; }
}

@container style(--lay-rail-child-marker: dash) {
    [data-shop] .shop-category-child-dot {
        width: 10px;
        height: 2px;
        border-radius: 1px;
        box-shadow: none;
    }
}

@container style(--lay-rail-child-marker: chevron) {
    [data-shop] .shop-category-child-dot {
        width: auto;
        height: auto;
        background: transparent;
        box-shadow: none;
    }

    [data-shop] .shop-category-child-dot::before {
        content: "›";
        font-size: 1rem;
        line-height: 1;
        color: var(--lay-rail-child-dot, rgba(96, 165, 250, 0.85));
    }
}

/* Pionowa kreska prowadzaca przy rozwinietej galezi (::before na pozycji podkategorii). */
[data-shop] .shop-category-link-child::before {
    display: var(--lay-rail-child-guide-show, block);
    background: var(--lay-rail-child-guide, rgba(148, 163, 184, 0.22));
}

/* Obramowanie panelu kategorii — OSOBNA regula na rame, bo kazda ma inny stan wyjsciowy.
   ⚠ Nie da sie tego napisac jedna regula ze wspolna wartoscia awaryjna: rama topbar-rail RYSUJE juz
   obramowanie (border: 1px solid var(--tr-rail-line)), a pozostale nie. Wspolne „0" skasowaloby tamto
   przy pierwszym wejsciu w edytor, czyli zmiana wygladu bez zadnej decyzji administratora. */
[data-shop] .tr-rail {
    border-style: solid;
    border-width: var(--lay-rail-border-width, 1px);
    border-color: var(--lay-rail-border, var(--tr-rail-line));
    /* Rama topbar-rail rysuje cien wlasna zmienna (domyslnie „none") — wartosc awaryjna musi przez nia
       przejsc, inaczej kierunek, ktory cien wlaczyl, stracilby go po wejsciu do edytora. */
    box-shadow: var(--lay-rail-shadow, var(--tr-rail-shadow));
}

[data-shop] .pt-rail,
[data-shop] .sidebar-shell {
    border-style: solid;
    border-width: var(--lay-rail-border-width, 0);
    border-color: var(--lay-rail-border, transparent);
    box-shadow: var(--lay-rail-shadow, none);
}

/* Przycisk „Szukaj" w naglowku. Wartosc awaryjna idzie przez zmienna ramy, wiec nieustawiony token
   zostawia kolor kierunku — ten sam chwyt co przy drzewie kategorii. */
/* ── Pole wyszukiwania ──────────────────────────────────────────────────
   ⚠ Tokeny „Tlo pola wyszukiwania" i „Tekst w wyszukiwarce" byly do tej pory MARTWE na ramie
   z gornym menu: pole maluje szkielet zmienna --tr-search-*, a kierunki ustawialy ja z pominieciem
   tokenu ukladu. Kontrolka byla, zmiana nie robila nic. Lancuch domyka to od strony arkusza
   wspolnego — swoistosc (0,2,0) bije szkielet (0,1,0), a wartosc awaryjna idzie przez zmienna ramy,
   wiec nieustawiony token oddaje kolor kierunku. */
[data-shop] .tr-search {
    background: var(--lay-search-bg, var(--tr-search-bg));
    border-color: var(--lay-search-border, var(--tr-search-line));
}

[data-shop] .tr-search input,
[data-shop] .tr-search-icon {
    color: var(--lay-search-ink, var(--tr-search-ink));
}

[data-shop] .mk-search {
    background: var(--lay-search-bg, #fff);
}

[data-shop] .mk-search input {
    color: var(--lay-search-ink, var(--text-dark, #0f172a));
}

[data-shop] .tr-search button {
    background: var(--lay-search-btn-bg, var(--tr-search-btn-bg));
    color: var(--lay-search-btn-ink, var(--tr-search-btn-ink));
}

/* Naglowki sekcji (KATALOG, KATEGORIE) maja WLASNY token, ale spadaja na kolor pozycji panelu,
   gdy nikt go nie ustawil — przemalowanie panelu jednym suwakiem dziala jak dotad.
   ⚠ DRUGA regula nie jest powtorzeniem: rama z gornym menu maluje te naglowki wlasna zmienna
   selektorem (0,2,0) i robi to w arkuszu ladowanym PO tym pliku, wiec regula (0,2,0) tutaj
   przegrywala kolejnoscia. Potrzebne jest (0,3,0). */
[data-shop] .sidebar-section-title {
    color: var(--lay-rail-section-ink, var(--lay-rail-ink, var(--el-sidebar-section, rgba(148, 163, 184, 0.8))));
}

[data-shop] .tr-rail .sidebar-section-title,
[data-shop] .tr-drawer .sidebar-section-title {
    color: var(--lay-rail-section-ink, var(--lay-rail-ink, var(--tr-rail-ink-soft)));
}

/* Ikony pozycji menu i strzalki rozwijania. Ta sama pulapka co wyzej — rama nadaje im kolor
   selektorem (0,2,0), wiec potrzebne jest (0,3,0). */
[data-shop] .sidebar-link-icon,
[data-shop] .sidebar-link-arrow {
    color: var(--lay-rail-icon-ink, var(--lay-rail-link-ink, var(--el-sidebar-text, rgba(191, 219, 254, 0.95))));
}

[data-shop] .tr-rail .sidebar-link-icon,
[data-shop] .tr-rail .sidebar-link-arrow,
[data-shop] .tr-drawer .sidebar-link-icon,
[data-shop] .tr-drawer .sidebar-link-arrow {
    color: var(--lay-rail-icon-ink, var(--tr-rail-ink-soft));
}

/* Pozycje menu panelu: „Panel glowny", „Wszystkie produkty" i odnosnik do panelu administracyjnego.
   ⚠ DWIE reguly, bo stan wyjsciowy jest inny w kazdej ramie: rama z gornym menu maluje je wlasna
   zmienna (--tr-rail-ink) selektorem o swoistosci (0,2,0), wiec przebicie wymaga (0,3,0);
   w ramie klasycznej wystarczy (0,2,0) nad regula z app.css. */
[data-shop] .sidebar-link,
[data-shop] .sidebar-back-link {
    color: var(--lay-rail-link-ink, var(--lay-rail-ink, var(--el-sidebar-text, rgba(226, 232, 240, 0.92)))) !important;
}

[data-shop] .tr-rail .sidebar-link,
[data-shop] .tr-rail .sidebar-back-link,
[data-shop] .tr-drawer .sidebar-link,
[data-shop] .tr-drawer .sidebar-back-link {
    color: var(--lay-rail-link-ink, var(--lay-rail-ink, var(--tr-rail-ink))) !important;
}

/* ── Obramowanie i cien obu pasow gornych ───────────────────────────────
   Wartosci awaryjne per rama, bo stan wyjsciowy sie rozni: topbar-rail rysuje linie POD oboma
   pasami, marketplace rysuje ja NAD paskiem dzialow, a jego naglowek nie ma jej wcale. */
[data-shop] .tr-header {
    border-bottom-style: solid;
    border-bottom-width: var(--lay-header-border-width, 1px);
    border-bottom-color: var(--lay-header-border, var(--tr-header-line));
    box-shadow: var(--lay-header-shadow, none);
}

[data-shop] .tr-nav {
    border-bottom-style: solid;
    border-bottom-width: var(--lay-nav-border-width, 1px);
    border-bottom-color: var(--lay-nav-border, var(--tr-nav-line));
    box-shadow: var(--lay-nav-shadow, none);
}

[data-shop] .mk-header {
    border-bottom-style: solid;
    border-bottom-width: var(--lay-header-border-width, 0);
    border-bottom-color: var(--lay-header-border, transparent);
    box-shadow: var(--lay-header-shadow, none);
}

[data-shop] .mk-nav {
    border-top-style: solid;
    border-top-width: var(--lay-nav-border-width, 1px);
    border-top-color: var(--lay-nav-border, var(--mk-line));
    box-shadow: var(--lay-nav-shadow, none);
}

/* Najechanie na dzial. Szkielet ramy zmienia tu tylko kolor napisu — i to na ten sam, ktory ma dzial
   otwarty, wiec pod kursorem nie widac roznicy miedzy „mozesz kliknac" a „tu jestes". */
[data-shop] .tr-nav-link:hover,
[data-shop] .tr-nav-link:focus-visible {
    color: var(--lay-nav-hover-ink, var(--tr-nav-ink-active));
    background: var(--lay-nav-hover-bg, transparent);
}

[data-shop] .mk-nav-link:hover,
[data-shop] .mk-nav-link:focus-visible {
    color: var(--lay-nav-hover-ink, #fff);
    background: var(--lay-nav-hover-bg, rgba(255, 255, 255, 0.08));
}

/* KOLEJNOSC PASOW. Oba szkielety sa kolumna flex, wiec `order` przestawia pasy bez ruszania
   znacznika — a to warunek, zeby przelacznik dzialal w podgladzie natychmiast.
   Pas zaufania dostaje -2, zeby przy menu na gorze nadal zostal nad wszystkim: sam `order: -1`
   na menu wsunalby je PRZED pas zaufania, bo domyslne 0 maja wszystkie pozostale pasy.

   ⚠ RAZEM Z KOLEJNOSCIA TRZEBA PRZESTAWIC WARSTWY. Szkielet daje naglowkowi z-index 40, a paskowi
   dzialow 30 — przy ukladzie domyslnym to poprawne (cien naglowka klada sie na menu). Po zamianie
   miejscami pas na gorze musi byc wyzej, inaczej jego cien wpada POD sasiada i wyglada, jakby
   ustawienie cienia nic nie robilo. */
@container style(--lay-nav-position: above) {
    [data-shop] .tr-nav,
    [data-shop] .mk-nav {
        order: -1;
        z-index: 41;
    }

    [data-shop] .tr-header,
    [data-shop] .mk-header {
        z-index: 30;
    }

    [data-shop] .tr-trust,
    [data-shop] .mk-trust {
        order: -2;
        position: relative;
        z-index: 42;
    }
}

/* ── Pas zaufania nad naglowkiem ────────────────────────────────────────
   Kazda rama ma wlasna klase i wlasny stan wyjsciowy, wiec znowu osobne reguly. */
[data-shop] .tr-trust {
    background: var(--lay-trust-bg, var(--tr-trust-bg, #1e293b));
    color: var(--lay-trust-ink, var(--tr-trust-ink, rgba(226, 232, 240, 0.82)));
}

[data-shop] .tr-trust-item i {
    color: var(--lay-trust-icon, var(--tr-trust-accent, var(--brand-primary, #2563eb)));
}

[data-shop] .tr-trust-item b {
    color: var(--lay-trust-strong, var(--tr-trust-strong, #fff));
}

[data-shop] .mk-trust {
    background: var(--lay-trust-bg, var(--mk-dark-2));
    color: var(--lay-trust-ink, rgba(226, 232, 240, 0.82));
}

[data-shop] .mk-trust-item i {
    color: var(--lay-trust-icon, var(--mk-accent));
}

[data-shop] .mk-trust-item b {
    color: var(--lay-trust-strong, #fff);
}

/* Nazwa sklepu ma w znaczniku klase .text-white z !important — inaczej nie da sie jej odzyskac. */
[data-shop] .sidebar-brand {
    color: var(--lay-rail-ink, var(--tr-rail-ink, #fff)) !important;
}

/* Najechanie: bez tego napis robi sie bialy takze na jasnym panelu i znika pod kursorem. */
[data-shop] .shop-category-link:hover {
    background: var(--lay-rail-active-bg, var(--tr-rail-hover-bg, rgba(255, 255, 255, 0.06)));
    color: var(--lay-rail-ink, var(--tr-rail-ink, #fff));
}

/* Kategoria otwarta. Tlo pozycji w menu admina idzie aliasem --sidebar-active-bg, ale drzewo
   sklepu ma wlasny, wpisany na sztywno blekit. */
[data-shop] .shop-category-link.active {
    background: var(--lay-rail-active-bg, var(--tr-rail-active-bg, rgba(59, 130, 246, 0.18)));
    color: var(--lay-rail-active-ink, var(--tr-rail-active-ink, #fff));
}

/* „Wszystkie produkty" ma w znaczniku klasy .nav-link .active wewnatrz .nav-pills, wiec regula
   Bootstrapa `.nav-pills .nav-link.active` (0,3,0) bije `.sidebar-link.active` z app.css (0,2,0)
   i wymusza wlasny blekit. Efekt zastany: ten jeden kafelek od poczatku ignorowal kolor z brandingu.
   Musimy wiec przebic Bootstrapa — a to znaczy (0,4,0), czyli WIECEJ niz ma regula ramy topbar-rail
   (`.tr-rail .sidebar-link.active`, 0,3,0). Dlatego wartosc awaryjna idzie przez --tr-rail-active-bg:
   na ramie z panelem gornym oddaje kolor kierunku, a na ramie klasycznej, gdzie ta zmienna nie
   istnieje, spada do koloru z brandingu. Bez tego lancucha kazdy kierunek na tej ramie dostawal
   blekitna pigulke, gdy tylko administrator ustawil jakikolwiek token. */
[data-shop] .nav-pills .sidebar-link.active {
    background: var(--lay-rail-active-bg, var(--tr-rail-active-bg, var(--sidebar-active-bg, linear-gradient(180deg, var(--brand-primary-light), var(--brand-primary)))));
}

[data-shop] .sidebar-link.active,
[data-shop] .sidebar-link.active .sidebar-link-icon,
[data-shop] .sidebar-link.active .sidebar-link-arrow {
    color: var(--lay-rail-active-ink, var(--tr-rail-active-ink, #fff));
}