/* ============================================================
   MOST MARKA → HUMMINGBIRD  ·  DEATHMETAL / "Heavy Metal Shop"
   ------------------------------------------------------------
   Wariant CIEMNY (dark). Zbudowany z baseline'u starego sklepu
   (motyw SNS, aktywny akcent #b49400) + korekt właściciela.

   ROLE KOLORÓW (zatwierdzone):
     - złoto  #b49400  = primary: linki, stany aktywne, paginacja,
                         akcenty. Hover: jaśniejsze złoto #e7be00.
     - czerwień #f13340 = akcent "hot/sale", detale (kolor z logo).
     - przyciski GŁÓWNE = ciemnoszary #3b3b3b → czarny na hover,
                         biały tekst (NIE markowe — neutralne).
     - ceny  = białe.
     - baza  = czerń, tekst jasny, nagłówki białe.

   JAK UŻYWAĆ:
   1. Podmieniasz TYLKO sekcję [1] PALETA MARKI (na górze).
   2. Reszta (mosty) czyta z palety — nie ruszasz jej per klient.
   3. Wklej na SAM POCZĄTEK custom.css (nad resztą stylów).

   >>> UWAGA ZAKRESOWA (żółty/czerwony, nie zielony) <<<
   Hummingbird jest "light-first". Ten most przekręca na ciemno
   WARSTWĘ ZMIENNYCH + kilka pewnych powierzchni. Komponenty,
   które trzymają jasne tło w SCSS/klasach utility (część kart,
   inputy, dropdowny, offcanvas, warianty stopki), mogą zostać
   jasnymi łatami — do dobicia CSS-em NA REALNYM DOM (outerHTML)
   albo przez programistę. To ~80% pierwszej warstwy, reszta to
   2-3 rundy szlifu na staging. Lista "do sprawdzenia" na końcu.
   ============================================================ */


/* --- FONT: czysty sans z polskimi znakami (Latin-ext) --- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');


/* ============================================================
   [1] PALETA MARKI  ←←← TYLKO TO PODMIENIASZ PER KLIENT
   ------------------------------------------------------------
   RGB potrzebne osobno tam, gdzie Bootstrap używa przezroczystości
   (focus ring, cienie). Format: trzy liczby bez #, np. 180, 148, 0.
   ============================================================ */
:root {
    /* --- Akcenty marki --- */
    --marka-gold:            #b49400;      /* primary: linki, akcenty, aktywne stany */
    --marka-gold-rgb:        180, 148, 0;
    --marka-gold-bright:     #e7be00;      /* hover linków/akcentów (jaśniejsze złoto) */
    --marka-gold-bright-rgb: 231, 190, 0;
    --marka-red:             #f13340;      /* akcent hot/sale, detale (kolor z logo) */
    --marka-red-rgb:         241, 51, 64;

    /* --- Przyciski GŁÓWNE (neutralne, NIE markowe) --- */
    --marka-btn-bg:          #3b3b3b;      /* ciemnoszary spoczynkowy */
    --marka-btn-hover:       #000000;      /* czarny na hover/active */
    --marka-btn-text:        #ffffff;      /* biały tekst na przyciskach */

    /* --- Baza ciemna --- */
    --marka-body-bg:         #101010;      /* tło strony (blisko czerni) */
    --marka-surface:         #1b1b1b;      /* karty, panele, boczne bloki */
    --marka-surface-2:       #232323;      /* drugi poziom (topbar, hover tła) */
    --marka-body-text:       #dfdfdf;      /* tekst na ciemnym */
    --marka-heading:         #ffffff;      /* nagłówki */
    --marka-muted:           #9d9d9d;      /* tekst drugorzędny/wygaszony */
    --marka-border:          #2a2a2a;      /* obramowania, linie na ciemnym */
    --marka-price:           #ffffff;      /* ceny */

    /* --- Czcionki --- */
    --marka-font-body:       "Open Sans", Arial, Helvetica, sans-serif;
    --marka-font-heading:    "Open Sans", Arial, Helvetica, sans-serif;
}


/* ============================================================
   [2] MOST GLOBALNY  →  --bs-*  (piszesz RAZ, nie ruszasz)
   ------------------------------------------------------------
   Wariant ciemny: przekręcamy tło/tekst/obramowania na ciemne,
   primary na złoto. Komponenty konsumujące te zmienne
   (breadcrumb, paginacja, akordeon, linki) pójdą za nimi.
   ============================================================ */
:root {

    /* ---- KOLOR GŁÓWNY (primary = złoto) ---- */
    --bs-primary:               var(--marka-gold);
    --bs-primary-rgb:           var(--marka-gold-rgb);
    --bs-primary-text-emphasis: var(--marka-gold);

    /* ---- LINKI ---- */
    /* Bez nadpisania zostają NIEBIESKIE (#0b69f6) — to źródło
       "niespodziewanych błękitów" (patrz stary "HOME" na blue). */
    --bs-link-color:            var(--marka-gold);
    --bs-link-color-rgb:        var(--marka-gold-rgb);
    --bs-link-hover-color:      var(--marka-gold-bright);
    --bs-link-hover-color-rgb:  var(--marka-gold-bright-rgb);

    /* ---- TEKST I TŁO STRONY (CIEMNE) ---- */
    --bs-body-color:            var(--marka-body-text);
    --bs-body-color-rgb:        223, 223, 223;
    --bs-body-bg:               var(--marka-body-bg);
    --bs-body-bg-rgb:           16, 16, 16;
    --bs-emphasis-color:        var(--marka-heading);

    /* ---- POWIERZCHNIE WTÓRNE (Bootstrap "tertiary/secondary bg") ---- */
    --bs-secondary-bg:          var(--marka-surface);
    --bs-tertiary-bg:           var(--marka-surface-2);
    --bs-secondary-color:       var(--marka-muted);
    --bs-tertiary-color:        var(--marka-muted);

    /* ---- OBRAMOWANIA ---- */
    --bs-border-color:          var(--marka-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);

    /* ---- CZERWIEŃ jako "danger"/akcent hot-sale ---- */
    --bs-danger:                var(--marka-red);
    --bs-danger-rgb:            var(--marka-red-rgb);

    /* ---- FOCUS (dostępność — obrys po kliknięciu/tabie) ---- */
    --bs-focus-ring-color:      rgba(var(--marka-gold-rgb), 0.35);

    /* ---- CZCIONKA BAZOWA ---- */
    --bs-body-font-family:      var(--marka-font-body);
}

/* Wymuś ciemną bazę też tam, gdzie motyw ustawia kolor/tło wprost
   na body (nie zawsze czyta --bs-body-*). Minimalnie, ale pewnie. */
body {
    background-color: var(--marka-body-bg);
    color: var(--marka-body-text);
    font-family: var(--marka-font-body);
}

/* ---- NAGŁÓWKI: białe + font (font nagłówków nie ma zmiennej CSS) ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--marka-font-heading);
    color: var(--marka-heading);
}


/* ============================================================
   [3] PRZYCISKI  →  pełne macierze --bs-btn-* (per wariant)
   ------------------------------------------------------------
   KOREKTA WŁAŚCICIELA: główne przyciski są NEUTRALNE
   (ciemnoszary → czarny), NIE złote. Złoto zostaje przy
   linkach/akcentach. Zmienne --bs-btn-* muszą być WEWNĄTRZ
   .btn-*, w :root są martwe.
   ============================================================ */

/* ---- PRIMARY = główne CTA ("Dodaj do koszyka"): ciemnoszary → czarny ---- */
.btn-primary {
    --bs-btn-color:               var(--marka-btn-text);
    --bs-btn-bg:                  var(--marka-btn-bg);
    --bs-btn-border-color:        var(--marka-btn-bg);

    --bs-btn-hover-color:         var(--marka-btn-text);
    --bs-btn-hover-bg:            var(--marka-btn-hover);
    --bs-btn-hover-border-color:  var(--marka-btn-hover);

    --bs-btn-active-color:        var(--marka-btn-text);
    --bs-btn-active-bg:           var(--marka-btn-hover);
    --bs-btn-active-border-color: var(--marka-btn-hover);

    --bs-btn-focus-shadow-rgb:    var(--marka-gold-rgb);  /* obrys focus w złocie */
}

/* ---- OUTLINE-PRIMARY = przycisk drugoplanowy ("Wszystkie produkty") ----
   Na ciemnym: jasny obrys + biały tekst, wypełnia się szarym na hover.
   Neutralny, żeby nie kłócił się z regułą "przyciski są szare". */
.btn-outline-primary {
    --bs-btn-color:               var(--marka-btn-text);
    --bs-btn-border-color:        #666666;
    --bs-btn-bg:                  transparent;

    --bs-btn-hover-color:         var(--marka-btn-text);
    --bs-btn-hover-bg:            var(--marka-btn-bg);
    --bs-btn-hover-border-color:  var(--marka-btn-bg);

    --bs-btn-active-color:        var(--marka-btn-text);
    --bs-btn-active-bg:           var(--marka-btn-hover);
    --bs-btn-active-border-color: var(--marka-btn-hover);

    --bs-btn-focus-shadow-rgb:    var(--marka-gold-rgb);
}

/* ---- SECONDARY = drugorzędny (jeśli używany): ten sam neutralny język ---- */
.btn-secondary {
    --bs-btn-color:               var(--marka-btn-text);
    --bs-btn-bg:                  var(--marka-surface-2);
    --bs-btn-border-color:        var(--marka-surface-2);

    --bs-btn-hover-color:         var(--marka-btn-text);
    --bs-btn-hover-bg:            var(--marka-btn-hover);
    --bs-btn-hover-border-color:  var(--marka-btn-hover);

    --bs-btn-active-color:        var(--marka-btn-text);
    --bs-btn-active-bg:           var(--marka-btn-hover);
    --bs-btn-active-border-color: var(--marka-btn-hover);

    --bs-btn-focus-shadow-rgb:    var(--marka-gold-rgb);
}

/* Link-owy przycisk (btn-link) — na ciemnym trzymaj w złocie */
.btn-link {
    --bs-btn-color:        var(--marka-gold);
    --bs-btn-hover-color:  var(--marka-gold-bright);
}


/* ============================================================
   [4] CENY  →  białe
   ------------------------------------------------------------
   Ceny nie mają zmiennej --bs-* — mapujemy przez selektor.
   ZWERYFIKUJ klasę na SWOIM DOM (outerHTML) — w Hummingbirdzie
   bywa .product-price / .current-price / .price.
   ============================================================ */
.price,
.product-price,
.current-price,
.current-price-value {
    color: var(--marka-price);
}

/* Cena "przed" / przekreślona — wygaszona, nie biała */
.regular-price,
.price-old,
.old-price {
    color: var(--marka-muted);
}


/* ============================================================
   [5] POWIERZCHNIE CIEMNE (pewne, wysokiej wartości)
   ------------------------------------------------------------
   Kilka miejsc, które na pewno chcemy ściemnić, żeby nie było
   białych łat. Reszta — na staging po outerHTML.
   ============================================================ */

/* Karty / bloki / panele boczne */
.card {
    --bs-card-bg:            var(--marka-surface);
    --bs-card-color:         var(--marka-body-text);
    --bs-card-border-color:  var(--marka-border);
    --bs-card-cap-bg:        var(--marka-surface-2);
}

/* Stopka — w starym sklepie ciemna. Realny DOM Hummingbirda to
   <footer id="footer">, więc scope #footer (NIE .footer-container). */
#footer {
    background-color: var(--marka-surface);
    color: var(--marka-body-text);
    border-top: 1px solid var(--marka-border);
}
#footer a { color: var(--marka-body-text); }
#footer a:hover { color: var(--marka-gold); }

/* Breadcrumb — ciemny pasek jak w starym sklepie */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--marka-muted);
    --bs-breadcrumb-item-active-color: var(--marka-gold);
}

/* Linie oddzielające / hr */
hr { border-color: var(--marka-border); opacity: .5; }

/* Pola formularzy na ciemnym (logowanie, newsletter, szukajka) */
.form-control,
.form-select {
    background-color: var(--marka-surface);
    color: var(--marka-body-text);
    border-color: var(--marka-border);
}
.form-control::placeholder { color: var(--marka-muted); }
.form-control:focus,
.form-select:focus {
    background-color: var(--marka-surface);
    color: var(--marka-body-text);
    border-color: var(--marka-gold);
}


/* ============================================================
   KONIEC MOSTU. Poniżej piszesz resztę custom.css.
   Gdy tworzysz własny komponent — używaj var(--marka-*),
   nie wpisuj kolorów na sztywno.
   ------------------------------------------------------------
   DO SPRAWDZENIA NA STAGING (przynieś outerHTML dla każdego):
   1. Ceny — realna klasa (.price vs .product-price vs inne).
   2. Przyciski "Dodaj do koszyka" — czy to .btn-primary; jeśli
      inny selektor, dopnij szary #3b3b3b → czarny tam.
   3. Dokładny odcień szarości przycisku (baseline miał custom
      CSS spoza plików — #3b3b3b to punkt startowy, dostrój).
   4. Białe łaty: dropdowny menu, offcanvas (menu mobilne),
      "quickview", modale, tabele koszyka — Hummingbird trzyma je
      jasne w SCSS; jeśli wyjdą białe, ściemnij po outerHTML.
   5. Kontrast: złoto #b49400 na czerni jest OK; jaśniejsze złoto
      #e7be00 hover — też. Sprawdź czerwień #f13340 na czerni
      (WCAG) jeśli użyjesz jej na tekst.
   6. Tekstura tła: stary sklep miał czarny "materiał". Jeśli
      chcesz ją odtworzyć — wrzuć obrazek do /img (NIE do assetów
      motywu, patrz zasada §4) i ustaw body{background-image:...}.
   ============================================================ */


/* ============================================================
   NAGŁÓWEK — deathmetal (logo, górny pasek, układ menu)
   ------------------------------------------------------------
   Zbudowane z realnego outerHTML staginga (ps816.jash.dev).
   ============================================================ */

/* --- LOGO: powiększenie do 250px wysokości ---
   img ma klasę img-fluid (max-width:100%; height:auto) — nadpisujemy.
   UWAGA: w DOM logo deklaruje 285×200. Jeśli plik faktycznie ma 200px
   wysokości, 250px lekko rozmyje (skalowanie w górę). Sprawdź:
   document.querySelector('img.logo').naturalHeight — jeśli 200, ustaw
   height:200px albo wgraj większy plik logo. */
.header-bottom__logo a.navbar-brand { max-width: none !important; }
.header-bottom__logo img.logo {
    height: 250px !important;
    width: auto !important;
    max-width: none !important;
}

/* --- UKŁAD: logo wyśrodkowane na górze, menu wyśrodkowane pod spodem ---
   Menu desktop pojawia się dopiero od xl (1200px), więc tu trzymamy układ. */
@media (min-width: 1200px) {
    .header-bottom__row {
        flex-direction: column !important;   /* logo na górze, menu pod spodem */
        align-items: center !important;      /* wyśrodkowanie w poziomie */
    }
    .header-bottom__logo {
        margin: 0 !important;                /* kasuje me-auto/me-md-0 (pchały menu w prawo) */
        justify-content: center !important;
    }
    .header-bottom .ps-mainmenu--desktop {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;  /* wyśrodkuj blok menu */
        margin-top: 10px;
    }
    .header-bottom .ps-mainmenu__tree {
        justify-content: center !important;  /* wyśrodkuj pozycje menu */
    }
}

/* --- GÓRNY PASEK: powitanie po lewej (tekst na sztywno) ---
   .header-top__left jest puste (po „Contact us"). Wstrzykujemy tekst przez
   content. To „na sztywno" — nie tłumaczy się; do wersji wielojęzycznej użyj
   mini-modułu jashsimpletext w displayNav1. */
.header-top__left::before {
    content: "Welcome to our online store !";
    color: var(--marka-body-text);
    font-size: 13px;
    white-space: nowrap;
}

/* --- GÓRNY PASEK: wyszukiwarka tuż na lewo od waluty ---
   Search miał order-2 + ms-auto → dlatego lądował po prawej z dziurą. */
#_desktop_ps_searchbar {
    order: -1 !important;          /* przed walutą/loginem/koszykiem */
    margin-left: 0 !important;     /* kasuje ms-auto (dziurę) */
    margin-right: 18px !important; /* odstęp od dropdownu waluty — dostrój na żywo */
}
/* Opcjonalnie: cała grupa górnego paska dosunięta do prawej krawędzi: */
/* .header-top__right { justify-content: flex-end !important; } */