/* R72 (30.10.2026) – nagłówek i pasek promocji nad nim. Właściciel pliku: pomocnik B.
   Ładowany przez r72.php na wp_head 1075 (po R71), na wszystkich stronach z klasą body.ljk-r72.
   Siła: "html:root body.ljk-r72:not(#r72a#r72b)" = tyle samo co R66/R71, ale później, więc wygrywa.
   Tylko wygląd: wysokości, odstępy i układ zostają jak były (bez skoków przy wczytaniu – CLS 0).
   Znaczniki nagłówka: modules/html/5800-naglowek.html, skrypt: modules/js/5800-1.js (opóźnienie otwierania menu już jest),
   pasek promocji: ulepszenia/promocja-dnia.php, kolory świąt: ulepszenia/kalendarz-promocji.php – tych plików tu nie zmieniamy.
   Zasada kolorów (runda72/B-badania.md): ciemne „ramy” strony (pasek promocji u góry, stopka na dole), biały nagłówek,
   jeden kolor akcji (gradient róż -> czerwień: „Zobacz” w pasku, koszyk z produktami), fiolet do zaznaczeń i fokusu,
   zieleń tylko na „gratis”. Bez poświat, bez białych nakładek przy najechaniu, ruch tylko po akcji użytkownika. */

/* ---------- 1. Pasek promocji (44 px, jak był) ---------- */
/* ciemna śliwka jak stopka + cienka linia marki na dole; działa też w czasie świąt (kalendarz-promocji.php) */
html:root body.ljk-r72:not(#r72a#r72b) :is(.lh-top.has-pd,.ljk-pd-solo){
  background:linear-gradient(90deg,#e11d74 0%,#ff6a2b 100%) left bottom/100% 2px no-repeat,linear-gradient(90deg,#1d1530 0%,#2f1650 55%,#3d1438 100%)!important;
  box-shadow:none!important;border-bottom:0!important;color:#fff!important}
html:root body.ljk-r72:not(#r72a#r72b) :is(.lh-top.has-pd,.ljk-pd-solo) .ljk-pd-a .p,
html:root body.ljk-r72:not(#r72a#r72b) :is(.lh-top.has-pd,.ljk-pd-solo) .ljk-pd-a .od,
html:root body.ljk-r72:not(#r72a#r72b) :is(.lh-top.has-pd,.ljk-pd-solo) .ljk-pd-bar :is(.t,.ju,.tx){color:#e8e2f4!important}
html:root body.ljk-r72:not(#r72a#r72b) :is(.lh-top.has-pd,.ljk-pd-solo) .ljk-pd-bar :is(.sep,.sj){background:rgba(255,255,255,.22)!important}
/* „+30% sztuk gratis”: zielona pigułka (zieleń = gratis), ciemny tekst 8,5:1 */
html:root body.ljk-r72:not(#r72a#r72b) .ljk-pd-bar .ljk-pd-a b{background:#4ade80!important;color:#052e16!important;border-radius:999px!important;padding:0 10px!important;font-weight:800!important}
html:root body.ljk-r72:not(#r72a#r72b) .ljk-pd-bar.f-wr .ljk-pd-a b{padding:1px 7px!important}
/* „Zobacz”: kolor akcji (ten sam gradient co przyciski kupna), biały tekst 4,5:1+; na ciemnym tle widać go od razu */
html:root body.ljk-r72:not(#r72a#r72b) .ljk-pd-bar:not(.f-go) .ljk-pd-a .go{background:linear-gradient(135deg,#e11d74 0%,#d63a1e 100%)!important;border:0!important;border-radius:999px!important;color:#fff!important;padding:0 10px 0 14px!important}
html:root body.ljk-r72:not(#r72a#r72b) .ljk-pd-bar:not(.f-go) .ljk-pd-a:hover .go{background:linear-gradient(135deg,#c0135f 0%,#b8321a 100%)!important;color:#fff!important}
html:root body.ljk-r72:not(#r72a#r72b) .ljk-pd-bar.f-go .ljk-pd-a .go{color:#fff!important}
html:root body.ljk-r72:not(#r72a#r72b) .ljk-pd-x{color:#e8e2f4!important}
html:root body.ljk-r72:not(#r72a#r72b) .ljk-pd-x:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}

/* ---------- 2. Belka nagłówka ---------- */
html:root body.ljk-r72:not(#r72a#r72b) #lh{background:#fff!important;box-shadow:none!important;border-bottom:1px solid #ebe5f4!important}
/* delikatny cień pod belką dopiero po przewinięciu (przewijanie = akcja użytkownika); bez zmiany wymiarów, więc bez CLS.
   #lh::after to już linia na dole, więc cień rysuje ::before; przeglądarki bez scroll() po prostu go nie pokażą */
@supports (animation-timeline:scroll()){
  html:root body.ljk-r72:not(#r72a#r72b) #lh::before{content:"";position:absolute;left:0;right:0;top:100%;height:10px;pointer-events:none;
    background:linear-gradient(180deg,rgba(29,21,48,.09),rgba(29,21,48,0));opacity:0;
    animation:r72LhCien linear both;animation-timeline:scroll(root block);animation-range:0 96px}
  @keyframes r72LhCien{to{opacity:1}}
}

/* logo: „.pl” w kolorze marki, napis ciemny */
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-logo-txt{color:#1d1530!important}
html:root body.ljk-r72:not(#r72a#r72b) :is(.lh-logo-txt,.lh-dr-logo) b{color:#e11d74!important}

/* ---------- 3. Menu platform (komputer) ---------- */
@media (min-width:922px){
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat>.lh-btn{position:relative;border-radius:12px!important;color:#1d1530!important;background:transparent!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:is(:hover,:focus-within,.lh-hov)>.lh-btn{background:#f6f2fd!important;color:#1d1530!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat.is-current>.lh-btn{background:#f6f2fd!important}
  /* strzałka przy nazwie: przy otwartej liście w kolorze marki */
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:is(:hover,:focus-within,.lh-hov)>.lh-btn .lh-arr{color:#e11d74!important}
  /* cienka kreska marki pod pozycją tylko wtedy, gdy jej lista jest otwarta – łączy przycisk z listą (bez stałych kresek) */
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat>.lh-btn::after{content:""!important;display:block!important;position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,#e11d74,#ff6a2b)!important;transform:scaleX(0);transform-origin:50% 50%;transition:transform .18s ease}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:is(.lh-hov,:focus-within)>.lh-btn::after,
  html:root body.ljk-r72:not(#r72a#r72b) #lh:not([data-hi]) .lh-list>.lh-cat:hover>.lh-btn::after{transform:scaleX(1)}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat.lh-esc>.lh-btn::after{transform:scaleX(0)}

  /* rozwijana lista usług: biała karta, cienka linia marki u góry, miękki cień (bez poświaty) */
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub{
    padding:10px 8px 8px!important;border:1px solid #ebe5f4!important;border-radius:16px!important;
    background:linear-gradient(90deg,#e11d74,#ff6a2b) top/100% 3px no-repeat,#fff!important;
    box-shadow:0 1px 2px rgba(29,21,48,.06),0 18px 40px -18px rgba(29,21,48,.30)!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub a{color:#1d1530!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub li:not(.lh-sub-all) a:is(:hover,:focus-visible){background:#faf7ff!important;color:#1d1530!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub li:not(.lh-sub-all) a::after{color:#e11d74!important;font-weight:700}
  /* „Wszystkie usługi …” i „Darmowe narzędzia …”: wyrównane do lewej jak pozycje wyżej, strzałka po prawej */
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub li.lh-sub-all{margin-top:6px!important;padding-top:6px!important;border-top:1px solid #ebe5f4!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub li.lh-sub-all+li.lh-sub-all{margin-top:2px!important;padding-top:0!important;border-top:0!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub .lh-sub-all a{justify-content:flex-start!important;min-height:44px;padding:10px 14px!important;border-radius:12px!important;background:transparent!important;color:#6d28d9!important;font-size:14px!important;font-weight:700!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub li.lh-sub-all:not(.lh-sub-narz) a{background:#f6f2fd!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub .lh-sub-all a::after{margin-left:auto!important;color:currentColor!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-list>.lh-cat:not(.lh-more)>.lh-sub .lh-sub-all a:is(:hover,:focus-visible){background:#efe7fd!important;color:#5b21b6!important}

  /* „Więcej platform”: karty platform bez karty w karcie */
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-mega{
    border:1px solid #ebe5f4!important;border-radius:18px!important;
    background:linear-gradient(90deg,#e11d74,#ff6a2b) top/100% 3px no-repeat,#fff!important;
    box-shadow:0 1px 2px rgba(29,21,48,.06),0 22px 48px -20px rgba(29,21,48,.32)!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-more .lh-pf{border:1px solid #ebe5f4!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important;transition:border-color .15s ease}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-more .lh-pf:hover{border-color:#d9cdee!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-more .lh-mega .lh-sub{padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-more .lh-mh{color:#1d1530!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-more .lh-mh:is(:hover,:focus-visible),
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-more .lh-mega .lh-sub a:is(:hover,:focus-visible){background:#faf7ff!important;color:#1d1530!important}
}

/* ---------- 4. Pomoc, Konto, Menu ---------- */
html:root body.ljk-r72:not(#r72a#r72b) #lh :is(.lh-help,.lh-acc){border-radius:12px!important;color:#1d1530!important;box-shadow:none!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh :is(.lh-help,.lh-acc) svg{stroke:#1d1530!important;transition:stroke .15s ease}
html:root body.ljk-r72:not(#r72a#r72b) #lh :is(.lh-help,.lh-acc):hover{background:#f6f2fd!important;color:#6d28d9!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh :is(.lh-help,.lh-acc):hover svg{stroke:#6d28d9!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-burger{border-radius:12px!important;background:#fff!important;border:1px solid #ddd3ec!important;color:#1d1530!important;box-shadow:none!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-burger:hover{background:#f6f2fd!important;border-color:#cbbde3!important}

/* ---------- 5. Koszyk ---------- */
/* pusty: spokojny, biały z cienką ramką */
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-cart{background:#fff!important;border:1px solid #ddd3ec!important;border-radius:12px!important;color:#1d1530!important;box-shadow:none!important;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-cart svg{stroke:#1d1530!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-cart:hover{background:#f6f2fd!important;border-color:#cbbde3!important}
/* z produktami: kolor akcji (jak „Kupuję” i „Do kasy”) – jedyny tak mocny element nagłówka, więc od razu widać, dokąd dalej */
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-cart:has(.lh-count:not(.lh-zero)){background:linear-gradient(135deg,#e11d74 0%,#d63a1e 100%)!important;border-color:transparent!important;color:#fff!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-cart:has(.lh-count:not(.lh-zero)) svg{stroke:#fff!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-cart:has(.lh-count:not(.lh-zero)) .lh-cart-txt{color:#fff!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-cart:has(.lh-count:not(.lh-zero)):hover{background:linear-gradient(135deg,#c0135f 0%,#b8321a 100%)!important;transform:translateY(-1px)}
/* licznik: biała pigułka z ciemnym różem (6:1); na telefonie z białą obwódką na kolorze */
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-count{background:#fff!important;color:#c0135f!important;border-color:#e11d74!important;border-radius:999px!important;font-weight:800!important;box-shadow:none!important}
html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-count.lh-zero{display:none!important}

/* ---------- 6. Telefon: wysuwane menu ---------- */
@media (max-width:921px){
  html:root body.ljk-r72:not(#r72a#r72b) #lh-nav>.lh-close{background:#fff!important;border:1px solid #ddd3ec!important;box-shadow:none!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh-nav>.lh-close svg{stroke:#1d1530!important;color:#1d1530!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh-nav>.lh-close:hover{background:#f6f2fd!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-pop-in a{color:#1d1530!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-pop-in a:hover{border-color:#f3b6cf!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-cat.open{border-color:#f3b6cf!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-sub-all a{color:#6d28d9!important}
}
/* do 1199 px koszyk to sama ikona, a licznik siedzi na jej rogu: ciemna pigułka z białą obwódką – widać ją i na białym tle, i na gradiencie */
@media (max-width:1199px){
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-count{background:#1d1530!important;color:#fff!important;border:2px solid #fff!important}
}

/* ---------- 7. Fokus z klawiatury: wyraźny fiolet na wszystkich elementach nagłówka ---------- */
html:root body.ljk-r72:not(#r72a#r72b) #lh :is(a,button):focus-visible{outline:3px solid #7c3aed!important;outline-offset:2px!important;box-shadow:none!important}
html:root body.ljk-r72:not(#r72a#r72b) :is(.lh-top,.ljk-pd-solo) :is(a,button):focus-visible{outline:2px solid #fff!important;outline-offset:2px!important}

/* ---------- 8. Ograniczony ruch ---------- */
@media (prefers-reduced-motion:reduce){
  html:root body.ljk-r72:not(#r72a#r72b) #lh :is(.lh-cart,.lh-pf,.lh-help svg,.lh-acc svg){transition:none!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-btn::after{transition:none!important}
  html:root body.ljk-r72:not(#r72a#r72b) #lh .lh-cart:hover{transform:none!important}
}