:root{
  --pereko-header-yellow:#ffdd00;
}

/*
  PEREKO B2B — REFERENCYJNA BELKA SYSTEMOWA V13 / CENNIK V9 — STAŁA OŚ BRANDU
  Źródłem wzorca jest brand z index.html (strona logowania).
  Lewa część belki jest absolutnie stała na każdej stronie.
  Prawa część zachowuje działania właściwe dla bieżącego modułu.
*/
html,body{margin:0!important}

header.pereko-global-topbar{
  box-sizing:border-box!important;
  width:100%!important;
  height:88px!important;
  min-height:88px!important;
  max-height:88px!important;
  margin:0!important;
  padding:0 clamp(28px,6vw,88px)!important;
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:9999!important;
  overflow:hidden!important;
  isolation:isolate!important;
  color:#fff!important;
  /* DOKŁADNIE ten sam finalny gradient co .login-screen w styles.css */
  background:
    radial-gradient(circle at 79% 10%,rgba(255,221,0,.13) 0,transparent 30%),
    radial-gradient(circle at 12% 90%,rgba(255,255,255,.045) 0,transparent 33%),
    linear-gradient(135deg,#0f1517 0%,#1a2226 48%,#263237 100%)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-family:Montserrat,"Segoe UI",Arial,sans-serif!important;
}

/* Ten sam prawy okrąg dekoracyjny co na stronie logowania. */
header.pereko-global-topbar::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(44vw,640px);
  aspect-ratio:1;
  right:-16vw;
  top:-30vh;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 0 0 78px rgba(255,255,255,.018),0 0 0 156px rgba(255,255,255,.012);
  pointer-events:none;
}

.pereko-global-topbar__inner{
  box-sizing:border-box!important;
  width:min(1400px,100%)!important;
  max-width:1400px!important;
  height:88px!important;
  min-height:88px!important;
  max-height:88px!important;
  margin:0 auto!important;
  /* Ta sama oś pionowa co brand na ekranie logowania.
     Login ustawia brand od góry przez padding .login-screen:
     clamp(24px,3.4vh,38px). Zamiast centrować belkę w 88 px,
     stosujemy dokładnie tę samą wartość startową. */
  padding:clamp(24px,3.4vh,38px) 0 0!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  flex-wrap:nowrap!important;
  gap:28px!important;
  overflow:visible!important;
}

/*
   BRAND — wartości 1:1 skopiowane ze strony logowania:
   .brand / .brand-logo-wrap / .brand-logo / .brand-copy.
*/
.pereko-global-topbar__brand{
  box-sizing:border-box!important;
  min-width:0!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  margin:0!important;
  padding:0!important;
  color:#fff!important;
  text-decoration:none!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
.pereko-global-topbar__brand:hover,
.pereko-global-topbar__brand:focus{
  color:#fff!important;
  text-decoration:none!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
.pereko-global-topbar__logo-wrap{
  box-sizing:border-box!important;
  width:156px!important;
  height:38px!important;
  flex:0 0 156px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.pereko-global-topbar__logo{
  display:block!important;
  width:148px!important;
  max-width:148px!important;
  height:auto!important;
  max-height:32px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:left center!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
.pereko-global-topbar__copy{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:39px!important;
  margin:0!important;
  padding:0 0 0 17px!important;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.24)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  white-space:nowrap!important;
  line-height:1.2!important;
  background:transparent!important;
}
.pereko-global-topbar__copy b{
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:#fff!important;
  font-family:Montserrat,"Segoe UI",Arial,sans-serif!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
  text-transform:none!important;
}
.pereko-global-topbar__copy small{
  display:block!important;
  margin:4px 0 0!important;
  padding:0!important;
  color:#c0c9cd!important;
  font-family:Montserrat,"Segoe UI",Arial,sans-serif!important;
  font-size:9px!important;
  line-height:1.25!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* Prawa część jest funkcjonalna, ale zawsze osadzona w tej samej belce. */
.pereko-global-topbar__actions{
  box-sizing:border-box!important;
  min-width:0!important;
  margin:0 0 0 auto!important;
  padding:0!important;
  flex:0 1 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:9px!important;
  color:#fff!important;
  white-space:nowrap!important;
  font-family:Montserrat,"Segoe UI",Arial,sans-serif!important;
}
.pereko-global-topbar__actions > div{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:9px!important;
  margin:0!important;
  padding:0!important;
}
.pereko-global-topbar__actions a,
.pereko-global-topbar__actions button{
  box-sizing:border-box!important;
  min-height:40px!important;
  height:40px!important;
  margin:0!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(255,255,255,.17)!important;
  border-radius:10px!important;
  color:#f5f7f8!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:none!important;
  text-decoration:none!important;
  font-family:Montserrat,"Segoe UI",Arial,sans-serif!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transform:none!important;
}
.pereko-global-topbar__actions a:hover,
.pereko-global-topbar__actions button:hover{
  border-color:rgba(255,221,0,.48)!important;
  background:rgba(255,221,0,.10)!important;
  color:#fff!important;
  transform:none!important;
}
.pereko-global-topbar__actions > span,
.pereko-global-topbar__actions .pill,
.pereko-global-topbar__actions .header-pill,
.pereko-global-topbar__actions .calc-topbar-pill,
.pereko-global-topbar__actions .contact-topbar-pill,
.pereko-global-topbar__actions .offer-topbar-pill,
.pereko-global-topbar__actions .order-topbar-pill,
.pereko-global-topbar__actions .pcat-pill,
.pereko-global-topbar__actions .sales-pill,
.pereko-global-topbar__actions .page-label{
  box-sizing:border-box!important;
  min-height:38px!important;
  height:38px!important;
  margin:0!important;
  padding:0 13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(255,221,0,.36)!important;
  border-radius:10px!important;
  color:var(--pereko-header-yellow)!important;
  background:rgba(255,221,0,.085)!important;
  font-family:Montserrat,"Segoe UI",Arial,sans-serif!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
.pereko-global-topbar__actions i{color:inherit!important}
body > header.pereko-global-topbar + *{margin-top:0}

/* Responsywność: ten sam komponent, wyłącznie proporcjonalnie zmniejszony. */
@media(max-width:1040px){
  header.pereko-global-topbar{padding-inline:32px!important}
  .pereko-global-topbar__inner{gap:16px!important}
  .pereko-global-topbar__actions{gap:7px!important}
  .pereko-global-topbar__actions > div{gap:7px!important}
  .pereko-global-topbar__actions a,.pereko-global-topbar__actions button{padding:0 11px!important;font-size:9.6px!important}
}
@media(max-width:820px){
  header.pereko-global-topbar{height:80px!important;min-height:80px!important;max-height:80px!important;padding-inline:22px!important}
  .pereko-global-topbar__inner{height:80px!important;min-height:80px!important;max-height:80px!important}
  .pereko-global-topbar__logo-wrap{width:128px!important;height:32px!important;flex-basis:128px!important}
  .pereko-global-topbar__logo{width:121px!important;max-width:121px!important;max-height:27px!important}
  .pereko-global-topbar__copy{min-height:33px!important;padding-left:12px!important}
  .pereko-global-topbar__copy b{font-size:12px!important}
  .pereko-global-topbar__copy small{font-size:7.8px!important;margin-top:3px!important}
  .pereko-global-topbar__actions > span,
  .pereko-global-topbar__actions .pill,
  .pereko-global-topbar__actions .header-pill,
  .pereko-global-topbar__actions .calc-topbar-pill,
  .pereko-global-topbar__actions .contact-topbar-pill,
  .pereko-global-topbar__actions .offer-topbar-pill,
  .pereko-global-topbar__actions .order-topbar-pill,
  .pereko-global-topbar__actions .pcat-pill,
  .pereko-global-topbar__actions .sales-pill,
  .pereko-global-topbar__actions .page-label{display:none!important}
}
@media(max-width:640px){
  header.pereko-global-topbar{padding-inline:16px!important}
  .pereko-global-topbar__copy small{display:none!important}
  .pereko-global-topbar__copy{min-height:28px!important}
  .pereko-global-topbar__actions a,.pereko-global-topbar__actions button{height:36px!important;min-height:36px!important;padding:0 9px!important;font-size:8.8px!important}
  .pereko-global-topbar__actions a span,.pereko-global-topbar__actions button span{display:none!important}
}
body.pereko-has-global-topbar .intro{top:88px!important}
@media(max-width:820px){body.pereko-has-global-topbar .intro{top:80px!important}}