/* Kierunek „Sprzedazowy" (Layout.Preset = promo) — rama topbar-rail.
   Ladowany warunkowo z App.razor PO arkuszu szkieletu ramy.

   Charakter: bialy naglowek, CZERN na wszystkim, co klikalne (przyciski, ceny, aktywna pozycja
   menu) i CZERWIEN, ktora nie klika sie nigdy — znaczy tylko naglowki sekcji panelu, wybrana
   kategorie, promocje i licznik koszyka. Zamiana tych rol psuje kierunek, bo czerwien
   natychmiast zaczyna krzyczec. Rama i pola sa ostre, miekkie zostaja same kafelki produktow.
   Pasek u gory sluzy obietnicom sklepu — tresc wpisuje sie w ustawieniach ukladu, wiec kierunek
   nie wymaga nowych danych w bazie.

   Kazda wartosc edytowalna w /admin/layout przechodzi przez var(--lay-x, wartosc-kierunku). */

/* ── WARTOSCI DOMYSLNE TOKENOW ────────────────────────────────────────────────────────────
   Ten blok sprawia, ze samo WYBRANIE kierunku daje gotowy wyglad — bez ani jednego wpisu
   w bazie. Konfiguracja jedzie z kodem, wiec kazde nowe wdrozenie dostaje ten sam wyglad
   po zwyklym deployu (rejestr: ShipsTokenDefaults = true).

   ⚠ SELEKTOR MUSI BYC `html[data-preset="promo"]`, a nie `.tr-shell`:
   wybory administratora emituje `<LayoutStyleBlock/>` jako `html[data-preset]` — ta sama
   swoistosc (0,1,1), ale PO tym arkuszu, wiec wygrywaja kolejnoscia. Gdyby te wartosci
   siedzialy na `.tr-shell` (element POTOMNY wzgledem `html`), bilyby ustawienia z panelu
   dziedziczeniem i edytor kolorow przestalby cokolwiek zmieniac.

   ⚠ Wpisujemy TYLKO to, co rozni sie od wartosci wlasnych tego kierunku ponizej. */
html[data-preset="promo"] {
    --lay-page-bg: #FAFAFA;
    --lay-card-bg: #ffffff;
    --lay-card-border: #E5E5E5;
    --lay-card-border-width: 1px;
    --lay-card-shadow: 0px 4px 12px 0px rgba(15, 23, 42, 0.1);
    --lay-card-radius: 8px;
    --lay-card-ink: #0A0A0A;
    --lay-price-ink: #0A0A0A;
    --lay-promo-bg: #EF4444;
    --lay-stock-bg: #F0FDF4;
    --lay-stock-ink: #16A34A;
    --lay-producer-badge-bg: #0A0A0A;

    --lay-header-bg: #ffffff;
    --lay-header-ink: #0A0A0A;
    --lay-header-border: #e9e9e9;
    --lay-header-shadow: 0px 2px 6px 0px rgba(223, 223, 223, 0.09);
    --lay-header-pill-bg: #ffffff;
    --lay-header-pill-border: #d2d2d2;
    --lay-search-bg: #FFFFFF;
    --lay-search-ink: #0A0A0A;
    --lay-search-btn-bg: #0A0A0A;
    --lay-search-btn-ink: #FAFAFA;
    --lay-cart-badge-bg: #EF4444;
    --lay-cart-badge-ink: #ffffff;
    --lay-trust-icon: #ffffff;

    /* Pasek dzialow NAD paskiem konta — realizuje to zapytanie o styl w layout-tokens.css,
       dlatego kierunek wymaga tamtego arkusza takze bez ustawien najemcy. */
    --lay-nav-position: above;
    --lay-nav-bg: #ffffff;
    --lay-nav-ink: #000000;
    --lay-nav-active-bg: #0A0A0A;
    --lay-nav-active-ink: #FAFAFA;
    --lay-nav-hover-bg: #c0cacd;
    --lay-nav-hover-ink: #ffffff;
    --lay-nav-shadow: 0px 2px 6px 0px rgba(15, 23, 42, 0.09);

    --lay-rail-bg: #FAFAFA;
    --lay-rail-border: #e9e9e9;
    --lay-rail-border-width: 1px;
    --lay-rail-shadow: 2px 3px 23px -12px rgba(15, 23, 42, 0.4);
    --lay-rail-ink: #0A0A0A;
    --lay-rail-link-ink: #210007;
    --lay-rail-section-ink: #bd1313;
    --lay-rail-child-ink: #525252;
    --lay-rail-child-dot: #ef0a1b;
    --lay-rail-child-marker: chevron;
    --lay-rail-child-guide-show: none;
    --lay-rail-active-bg: #fafafa;
    --lay-rail-active-ink: #d21d1d;

    --lay-surface-bg: #F5F5F5;
    --lay-surface-border: #E5E5E5;
    --lay-surface-border-width: 2px;
    --lay-surface-shadow: none;

    --lay-accent: #0A0A0A;
    --lay-accent-ink: #FAFAFA;
    --lay-link-ink: #0A0A0A;
    --lay-tab-active-ink: #EF4444;
    --lay-buy-tile-bg: #F5F5F5;
    --lay-buy-tile-border: #0A0A0A;
    --lay-ladder-bg: #FAFAFA;
    --lay-ladder-active-bg: #E5E5E5;

    --lay-table-head-bg: #0A0A0A;
    --lay-table-head-ink: #FAFAFA;

    --lay-footer-bg: #0A0A0A;
    --lay-footer-ink: #A3A3A3;

    /* Ostra rama, miekkie kafelki — te dwie wartosci razem sa sygnatura kierunku. */
    --lay-radius: 0px;
}

[data-preset="promo"] .tr-shell {
    /* ── Neutralne cieple + akcent sprzedazowy ── */
    --pr-ground: #fdf6f2;
    --pr-surface: #ffffff;
    --pr-line: #f0dfd6;
    --pr-ink: #2a1a13;
    --pr-ink-soft: #8a7268;
    --pr-accent: var(--lay-accent, #e2483d);
    --pr-accent-deep: #c2372d;
    /* app.css stylizuje przyciski wlasna zmienna, nie zmiennymi Bootstrapa. */
    --btn-primary-bg: var(--pr-accent);

    --tr-max: var(--lay-content-max, 1800px);
    --tr-pad: 1.5rem;
    --tr-rail-w: var(--lay-rail-width, 280px);
    --tr-gap: 2rem;

    /* Pasek komunikatow w kolorze akcji — ma byc pierwsza rzecza, ktora widac. */
    --tr-trust-bg: var(--pr-accent);
    --tr-trust-ink: rgba(255, 255, 255, 0.9);
    --tr-trust-strong: #fff;
    --tr-trust-accent: #fff;

    --tr-page-bg: var(--lay-page-bg, var(--pr-ground));
    --tr-header-bg: var(--lay-header-bg, var(--pr-surface));
    --tr-header-ink: var(--lay-header-ink, var(--pr-ink));
    --tr-header-line: var(--pr-line);

    --tr-brand-size: 1.4rem;
    --tr-brand-weight: 800;
    --tr-brand-spacing: -0.03em;
    --tr-brand-transform: none;

    --tr-search-bg: var(--pr-ground);
    --tr-search-ink: var(--pr-ink);
    --tr-search-line: var(--pr-line);
    --tr-search-radius: 999px;
    --tr-search-btn-bg: var(--pr-accent);
    --tr-search-btn-ink: #fff;

    --tr-nav-bg: var(--lay-nav-bg, var(--pr-surface));
    --tr-nav-ink: var(--lay-nav-ink, #6b544b);
    --tr-nav-ink-active: var(--lay-nav-active-ink, #fff);
    --tr-nav-active-bg: var(--lay-nav-active-bg, var(--pr-accent));
    --tr-nav-active-line: transparent;
    --tr-nav-line: var(--pr-line);
    --tr-nav-radius: 999px;
    --tr-nav-size: 0.84rem;
    --tr-nav-spacing: 0;
    --tr-nav-transform: none;
    --tr-nav-weight: 600;

    /* Panel jako karta: najbardziej zaokraglony ze wszystkich kierunkow i z miekkim cieniem —
       tresc obok tez jest zbudowana z takich kart. */
    --tr-rail-bg: var(--lay-rail-bg, var(--pr-surface));
    --tr-rail-radius: min(var(--lay-radius, 14px), 18px);
    --tr-rail-shadow: 0 1px 2px rgba(42, 26, 19, 0.05);
    --tr-rail-line: var(--pr-line);
    --tr-rail-ink: var(--lay-rail-ink, #5c463d);
    --tr-rail-ink-soft: #b9a49a;
    --tr-rail-hover-bg: #fbeee8;
    --tr-rail-active-bg: var(--lay-rail-active-bg, var(--pr-accent));
    --tr-rail-active-ink: var(--lay-rail-active-ink, #fff);

    --tr-footer-bg: var(--lay-footer-bg, var(--pr-surface));
    --tr-footer-ink: var(--lay-footer-ink, var(--pr-ink-soft));
    --tr-footer-line: var(--pr-line);

    /* Duze zaokraglenia to sygnatura kierunku — sufit min(...) i tak je przytnie do 18 px,
       wiec karta nigdy nie zamieni sie w kolo. */
    --bs-border-radius: min(var(--lay-radius, 14px), 18px);
    --bs-border-radius-sm: min(var(--lay-radius, 10px), 18px);
    --bs-border-radius-lg: min(var(--lay-radius, 16px), 18px);
    --bs-border-radius-xl: min(var(--lay-radius, 18px), 18px);
}

/* Pigulki w pasku dzialow nie moga miec dolnej krawedzi — inaczej pod aktywna zostaje kreska. */
[data-preset="promo"] .tr-nav-link {
    border-bottom: 0;
    padding-block: 0.42rem;
}

[data-preset="promo"] .tr-search {
    padding-left: 1.1rem;
}

    [data-preset="promo"] .tr-search button {
        border-radius: 999px;
        margin: 0.25rem;
        padding-block: 0.42rem;
    }

/* Wspolne przyciski konta i koszyka — reguly ::deep z ramy klasycznej tu nie siegaja. */
[data-preset="promo"] .tr-actions .user-dropdown-trigger,
[data-preset="promo"] .tr-actions .mini-cart-trigger {
    /* Token ukladu WCHODZI PRZED wartoscia kierunku: nieustawiony oddaje kolor kierunku,
       ustawiony wygrywa. Lancuch musi byc TUTAJ, bo tutaj jest malowanie — regula w
       layout-tokens.css przegralaby kolejnoscia arkuszy i przez `!important` kierunku. */
    background: var(--lay-header-pill-bg, var(--pr-ground)) !important;
    border-color: var(--lay-header-pill-border, var(--pr-line)) !important;
    color: var(--lay-header-pill-ink, var(--pr-ink)) !important;
    border-radius: 999px !important;
}

    [data-preset="promo"] .tr-actions .user-dropdown-trigger:hover,
    [data-preset="promo"] .tr-actions .mini-cart-trigger:hover {
        background: #fbeee8 !important;
        border-color: #e6cbbf !important;
        color: var(--pr-ink) !important;
        filter: none;
    }

/* Akcent pracuje tam, gdzie sprzedaje: cena, znacznik promocji i przycisk zakupu. */
[data-preset="promo"] .product-price {
    color: var(--pr-accent);
}

[data-preset="promo"] .catalog-tile-badge {
    background: var(--lay-promo-bg, var(--pr-accent));
    font-size: 0.68rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

[data-preset="promo"] .btn-primary {
    --bs-btn-bg: var(--pr-accent);
    --bs-btn-border-color: var(--pr-accent);
    --bs-btn-hover-bg: var(--pr-accent-deep);
    --bs-btn-hover-border-color: var(--pr-accent-deep);
    --bs-btn-active-bg: var(--pr-accent-deep);
    --bs-btn-active-border-color: var(--pr-accent-deep);
    font-weight: 600;
}

[data-preset="promo"] .btn-outline-primary {
    --bs-btn-color: var(--pr-accent);
    --bs-btn-border-color: var(--pr-accent);
    --bs-btn-hover-bg: var(--pr-accent);
    --bs-btn-hover-border-color: var(--pr-accent);
}

/* Aktywna strona w paginacji brala kolor podstawowy z Bootstrapa i byla jedyna niebieska plama
   w calym kierunku. Bootstrap kompiluje te wartosci wprost, wiec podmiana palety tu nie siega —
   trzeba nadpisac jego wlasne zmienne. */
[data-preset="promo"] .pagination {
    --bs-pagination-color: var(--lay-link-ink, var(--pr-accent));
    --bs-pagination-hover-color: var(--pr-accent-deep);
    --bs-pagination-active-bg: var(--lay-accent, var(--pr-accent));
    --bs-pagination-active-border-color: var(--lay-accent, var(--pr-accent));
    --bs-pagination-active-color: var(--lay-accent-ink, #fff);
}

[data-preset="promo"] .catalog-tile {
    background: var(--lay-card-bg, #fff);
    border-color: var(--lay-card-border, var(--pr-line));
}

    [data-preset="promo"] .catalog-tile:hover {
        border-color: #e6cbbf;
        box-shadow: 0 14px 30px -20px rgba(226, 72, 61, 0.45);
    }

[data-preset="promo"] .catalog-grid { --tile-img-max: 210px; }
[data-preset="promo"] .catalog-grid-3 { --tile-img-max: 240px; }
[data-preset="promo"] .catalog-grid-4 { --tile-img-max: 200px; }
[data-preset="promo"] .catalog-grid-5 { --tile-img-max: 170px; }

@media (max-width: 991.98px) {
    [data-preset="promo"] .tr-shell {
        --tr-pad: 1rem;
        --tr-brand-size: 1.1rem;
    }
}