#sp-main-body {
  padding-top: 10px !important;
}

/* Jedna linia: menu nie zawija, tylko przewija się w poziomie gdy zabraknie miejsca */
@media (max-width: 1400px) and (min-width: 980px) {
  #sp-header .sp-megamenu-wrapper { flex: 1 1 auto; min-width: 0; }

  #sp-header .sp-megamenu-parent {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    gap: 0;                     /* usunięcie luk między <li> jeśli są zdefiniowane */
    scrollbar-width: none;      /* Firefox: ukryj pasek przewijania */
  }
  #sp-header .sp-megamenu-parent::-webkit-scrollbar { display: none; } /* Chrome/Safari */

  #sp-header .sp-megamenu-parent > li { flex: 0 0 auto; }
  #sp-header .sp-megamenu-parent > li > a {
    font-size: clamp(12px, 1.05vw, 14px) !important;
    padding: 12px 8px !important;
    line-height: 1.35;
  }

  #sp-header .logo img, #sp-header .logo-image {
    max-height: 34px !important;
    height: auto !important;
    width: auto !important;
  }
}

/* CSS */
/* Kontener */
.hero-qwor{
  text-align:center;
  margin:20px auto;
  max-width:1920px;
  position:relative;
}

/* Tytuł w pomarańczowej belce – płynny rozmiar */
.hero-title{
  font-weight:700;
  background:#de8206;
  color:#fff;
  display:inline-block;
  border-radius:4px;
  margin:0 0 20px 0;
  padding:8px 20px;
  font-size:clamp(16px, 4.8vw, 24px);
  line-height:1.2;
}

/* Zdjęcie */
.hero-img{
  max-width:100%;
  height:auto;
  border-radius:6px;
  display:block;
}

/* Kontener ogólny */
.hero-ctp{
  text-align:center;
  margin:20px auto;
  max-width:1920px;
}

/* Tytuł */
.hero-title{
  font-weight:700;
  background:#de8206;
  color:#fff;
  display:inline-block;
  border-radius:4px;
  margin:0 0 20px 0;
  padding:8px 20px;
  font-size:clamp(16px, 4.8vw, 24px);
  line-height:1.2;
}

/* Wrapper tylko dla obrazu i overlaya – to jest nowość */
.hero-media{
  position:relative;     /* KLUCZ: overlay pozycjonuje się względem tego, nie całego hero */
}

/* Zdjęcie */
.hero-img{
  max-width:100%;
  height:auto;
  border-radius:6px;
  display:block;
}

/* Overlay – domyślne (desktop/tablet) */
.hero-overlay{
  position:absolute;
  top:55%;
  left:50%;
  transform:translate(-50%,-50%);
  width:95%;
  background:#ffffffdd;
  border:1px solid #000;
  color:#000;
  border-radius:6px;
  text-align:center;
  font-size:clamp(14px, 3.8vw, 18px);
  line-height:1.4;
  padding:clamp(10px, 3.5vw, 20px) clamp(12px, 4.5vw, 30px);
  z-index:1;
}
.hero-overlay p{ margin:0 0 10px 0; }
.hero-overlay p:last-child{ margin-bottom:0; }

/* Tablety – delikatna korekta pozycji/rozmiaru */
@media (max-width: 992px){
  .hero-overlay{
    top:52%;
    font-size:clamp(13px, 3.6vw, 16px);
    padding:12px 16px;
  }
}

/* Telefony – kotwica do dołu zdjęcia + ograniczenie wysokości */
  }
}

@media (max-width: 576px){
  .hero-overlay{
    top:35%;                 /* wyżej na zdjęciu */
    bottom:auto;
    left:50%;
    transform:translateX(-50%);
    width:88%;               /* węższe, nie 92–95% */
    font-size:clamp(8px, 3.5vw, 13px); /* mniejsze litery */
    padding:6px 8px;         /* minimalny padding */
    line-height:1.3;
    max-height:30vh;         /* nie zajmie więcej niż 30% ekranu */
    overflow:auto;           /* gdyby treść była dłuższa – przewijaj */
    -webkit-overflow-scrolling:touch;
  }
}

/* Telefony: ramka POD zdjęciem */
@media (max-width: 576px){
  .hero-media{ position: static; }           /* kotwica już niepotrzebna */
  .hero-overlay{
    position: static;                        /* zamiast absolute */
    transform: none;
    width: 100%;
    margin-top: 10px;                        /* odstęp pod zdjęciem */
    background: #fff;                        /* pełne tło dla czytelności */
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: clamp(14px, 4.2vw, 16px);     /* wygodny, responsywny rozmiar */
    line-height: 1.4;
    padding: 12px 14px;
    max-height: none;                        /* bez limitu wysokości */
    overflow: visible;                       /* bez własnego scrolla */
  }
}

maintenance-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 80vh !important;
  background: transparent !important; /* możesz dać np. #f9fafb dla jasnego tła */
}

.maintenance-box {
  max-width: 760px !important;
  padding: 32px !important;
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  text-align: center !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.maintenance-box h1 {
  margin: 0 0 16px !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
}

.maintenance-box p {
  margin: 0 0 14px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.maintenance-box p.note {
  color: #6b7280 !important;
  font-size: 14px !important;
}

.maintenance-box p.signature {
  margin-top: 12px !important;
  font-weight: 600 !important;
}



/* Zbij nadmiar u góry sekcji artykułu */
#sp-artykulu {
  padding-top: 0 !important;
}


/* Mniejszy padding kafelków artykułów */
.article-list .article {
  padding: 0px; /* było 27px */
}