/* ============================================================
   PANEL NAGŁÓWKA — JEDEN komponent (869f7deet; Szymon 23.10, zrzuty 224/225: Waluta i Motyw „jak robione przez dwa zespoły”).
   Markup _PkiHeaderPanel.cshtml, zachowanie pkieu-hpanel.js. Ładowany PO pkieu-v3.css (wygrywa ze skórą .pki-drop), przed
   pkieu-theme.css. Szkielet = podgląd koszyka i panel Kategorii: desktop — skóra .pki-drop (tło --surface, ramka --line, --r,
   --sh-pop, wysuwanie 150 ms, przyciemnienie PkiDrop.dim), spod przycisku (--hp-top / --hp-left z JS), górna ramka jak panel
   koszyka szerszy od przycisku; telefon (≤ 860 px) — arkusz od dołu jak mini-koszyk. Nagłówek = .hpanel-h w grupie etykiet
   sekcji w pkieu-v3.css (ten sam co „TWÓJ KOSZYK” i tytuły Kategorii). Pozycja: ikona / symbol · etykieta · opis · ✓;
   wybór jednokrotny = ✓ i tło --wash (jak bieżąca kategoria w panelu Kategorii); najechanie / fokus = sam kolor --red.
   Wiersz przełącznika (np. „Wysoki kontrast”) pod separatorem — ta sama wysokość i wcięcia co pozycje.
   ============================================================ */
.hpanel[hidden],.hpanel-ov[hidden]{display:none;}
/* wymiary jak podgląd koszyka (wzorzec, .mcart.pki-drop): padding --sp-5 ze wszystkich stron, nagłówek → linia → 16 px → treść
   (reguła .hpanel-h w grupie z „TWÓJ KOSZYK” w pkieu-v3.css — bez własnych marginesów); treść pozycji równo z nagłówkiem,
   tło zaznaczenia / najechania wystaje o --sp-2 na boki */
.hpanel{--hp-w:312px;position:fixed;z-index:140;top:var(--hp-top,64px);right:var(--hp-right,auto);width:var(--hp-w);max-width:calc(100vw - 16px);
  background:var(--surface);color:var(--body);padding:var(--sp-5);}
.hpanel-h{margin-top:0;}                             /* <p>: bez domyślnego marginesu (jak .mc-h koszyka) */
.hpanel-list{list-style:none;margin:0 calc(-1 * var(--sp-2));padding:0;outline:none;}
.hp-opt{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;align-items:center;column-gap:var(--sp-3);min-height:40px;padding:6px var(--sp-2);
  border-radius:var(--r);cursor:pointer;color:var(--ink);font-size:var(--fs-sm);line-height:1.3;}
.hp-opt + .hp-opt{margin-top:2px;}
.hp-ico{display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:350;color:var(--ink);white-space:nowrap;}
.hp-ico .ico{width:var(--ico-20);height:var(--ico-20);stroke:var(--ink);}
/* opis obok etykiety; gdy się nie mieści — pod nią (bez ucinania „jak w syst…”) */
.hp-txt{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--sp-2);row-gap:1px;}
.hp-lbl{font-weight:600;color:var(--ink);white-space:nowrap;}
.hp-note{color:var(--muted);font-size:var(--fs-xs);}
.hp-ok{width:18px;height:18px;stroke:var(--red);visibility:hidden;}
.hp-opt[aria-selected="true"]{background:var(--wash);}
.hp-opt[aria-selected="true"] .hp-ok{visibility:visible;}
.hp-opt:hover,.hp-opt:hover .hp-lbl,.hp-opt:hover .hp-ico{color:var(--red);}
.hp-opt:hover .hp-ico .ico{stroke:var(--red);}
.hp-opt:focus-visible{outline:2px solid var(--red);outline-offset:-2px;}
.hp-opt.busy{opacity:.55;cursor:progress;}
/* separator i wiersz przełącznika: wcięcia jak pozycje, separator jak linia pod nagłówkiem */
.hp-sep{height:0;margin:var(--sp-3) 0 var(--sp-2);border-top:1px solid var(--line);}
.hp-sw{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:40px;padding:6px 0;cursor:pointer;
  color:var(--ink);font-size:var(--fs-sm);line-height:1.3;}
.hp-swl{font-weight:600;}
.hp-swn{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--muted);}
.hp-swn[hidden]{display:none;}
.hp-sw:hover .hp-swl{color:var(--red);}
/* przełącznik: tor 40 × 24 z obwódką --muted (≥ 3:1 do tła — WCAG 1.4.11), włączony = wypełnienie --red-fill, gałka --on-fill */
.hp-sw input{flex:none;appearance:none;-webkit-appearance:none;position:relative;width:40px;height:24px;margin:0;border:2px solid var(--muted);
  border-radius:var(--r-pill);background:var(--surface);cursor:pointer;transition:background-color .15s,border-color .15s;}
.hp-sw input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s;}
.hp-sw input:checked{background:var(--red-fill);border-color:var(--red-fill);}
.hp-sw input:checked::before{background:var(--on-fill);transform:translateX(16px);}
.hp-sw input:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
/* przyciski nagłówka, które otwierają panel (waluta, motyw) */
.htool[data-hpanel-open]{font:inherit;font-size:var(--fs-tool);color:var(--body);cursor:pointer;}
.htool[data-hpanel-open]:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:var(--r);}
.htool[data-hpanel-open][aria-expanded="true"] :is(.cur-lbl,span:not(.sr)){color:var(--red);}
@media (min-width:861px){
  /* narożniki i górna krawędź jak .mcart.pki-drop: górna ramka, zaokrąglone --r wszędzie poza prawym górnym (styk z przyciskiem;
     --hp-tr z JS = --r, gdy panel przy brzegu okna odsunął się od przycisku). Wycięcie pod przyciskiem (--hp-nl..--hp-nr,
     wysokość --hp-step = od linii koszyka do dołu przycisku, co najmniej ramka) odsłania przycisk jak czerwony blok koszyka;
     zjazd 6 px .pki-drop przycięty do linii styku (wszystkie y + 6 px w stanie zamkniętym) */
  .hpanel.pki-drop{border-top:1px solid var(--line);border-radius:var(--r) var(--hp-tr,0px) var(--r) var(--r);
    clip-path:polygon(-48px 6px,var(--hp-nl,100%) 6px,var(--hp-nl,100%) calc(6px + var(--hp-step,1px)),var(--hp-nr,100%) calc(6px + var(--hp-step,1px)),
      var(--hp-nr,100%) 6px,calc(100% + 48px) 6px,calc(100% + 48px) calc(100% + 64px),-48px calc(100% + 64px));
    transition:opacity .15s ease-out,transform .15s ease-out,clip-path .15s ease-out,visibility 0s linear .15s;}
  .hpanel.pki-drop.is-open{clip-path:polygon(-48px 0,var(--hp-nl,100%) 0,var(--hp-nl,100%) var(--hp-step,1px),var(--hp-nr,100%) var(--hp-step,1px),
      var(--hp-nr,100%) 0,calc(100% + 48px) 0,calc(100% + 48px) calc(100% + 64px),-48px calc(100% + 64px));
    transition:opacity .15s ease-out,transform .15s ease-out,clip-path .15s ease-out;}
  :root[data-contrast="more"] .hpanel.pki-drop{border-top:2px solid var(--hc-fg);}
}
@media (max-width:860px){
  .hpanel{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;max-height:85vh;overflow-y:auto;overscroll-behavior:contain;
    border-top:1px solid var(--line2);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--sh-pop);
    padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));opacity:0;transform:translateY(24px);
    transition:opacity .2s ease-out,transform .2s ease-out;}
  .hpanel.on{opacity:1;transform:none;}
  .hp-opt,.hp-sw{min-height:var(--h-touch);font-size:var(--fs-md);}
  .hpanel-ov{position:fixed;inset:0;z-index:139;background:var(--overlay);opacity:0;transition:opacity .2s;}
  .hpanel-ov.on{opacity:1;}
  :root[data-contrast="more"] .hpanel{border-top:2px solid var(--hc-fg);}
}
:root[data-contrast="more"] .hp-sep{border-top:2px solid var(--hc-fg);}
:root[data-contrast="more"] .hp-sw input:checked{border-color:var(--hc-fg);}   /* tor odcięty od tła także przy akcencie */
@media (forced-colors:active){
  .hp-sw input{border-color:CanvasText;}
  .hp-sw input::before{background:CanvasText;}
  .hp-sw input:checked{background:Highlight;border-color:Highlight;}
  .hp-sw input:checked::before{background:HighlightText;}
}
@media (prefers-reduced-motion:reduce){.hpanel,.hpanel-ov,.hp-sw input,.hp-sw input::before{transition:none;}}