/* Pasek ogłoszeniowy u góry – ulepszona wersja */
body {
  --annbar-h: 48px; /* większa wysokość */
}

body::before {
  content: "DARMOWA DOSTAWA KURIEREM OD 199 ZŁ";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  height: var(--annbar-h);
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: clamp(14px, 2.5vw, 18px);

  background: #597bc0; /* przyjemna czerwień */
  color: #fff;

  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* odsunięcie strony w dół */
html {
  scroll-padding-top: var(--annbar-h);
}

body {
  margin-top: var(--annbar-h);
}

/* Mobile – jeszcze większy i czytelniejszy */
@media (max-width: 480px) {
  body {
    --annbar-h: 56px; /* wyższy pasek */
  }

  body::before {
    font-size: 14px;
    padding: 0 12px;
    text-align: center;
    line-height: 1.2;
    white-space: normal; /* pozwala zawijać tekst */
  }
}

/* ==== Scood: siatka logotypów + badge'e (FINAL) ==== */

/* 1) Kompaktowy blok (ramka sekcji) */
.brand-grid{
  --pad: clamp(10px, 1.6vw, 16px);
  --logo-box-w: clamp(140px, 22vw, 200px);  /* szerokość kafelka logo */
  --logo-box-h: clamp(52px, 6vw, 64px);     /* wysokość kafelka logo */
  --logo-h: clamp(22px, 4.2vw, 36px);       /* maks. wysokość samego logo */
  margin: 18px 0 10px;
  padding: 10px var(--pad) 14px;
  background:#fafafa;
  border-radius:14px;
}

/* Nagłówek sekcji */
.brand-grid__head{ text-align:center; margin-bottom:10px; }
.brand-grid__kicker{
  margin:0; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:#666;
}
.brand-grid__title{
  margin:2px 0 0; font-size:clamp(18px,2.2vw,24px);
  font-weight:700; color:#111;
}

/* 2) Siatka logotypów – responsywna i wyśrodkowana */
.brand-grid__list{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(14px, 2.6vw, 22px);
  list-style:none;
  margin: 12px auto 0;
  padding:0;
  justify-items:center;     /* środek w kolumnach */
  align-items:center;
  max-width:1200px;         /* niech sekcja nie „pływa” zbyt szeroko */
}

/* 3) Jednolite kafelki dla logo */
.brand-grid__list li{
  width: var(--logo-box-w);
  height: var(--logo-box-h);
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:8px;
  box-sizing:border-box;
}

/* 4) Logo – pełne kolory, subtelny hover (desktop) */
.brand-grid__list img{
  max-height: var(--logo-h);
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:none;     /* pełne kolory */
  opacity:1;       /* bez przygaszenia */
  transition: transform .2s ease;
}

.brand-grid__list img:hover{
  transform: translateY(-1px) scale(1.03);
}

/* 5) Badge’e – zawsze idealnie wyśrodkowane i responsywne */
.trust-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;                /* odstęp poziomy/poziomy */
  justify-content:center;      /* wyśrodkowanie poziome */
  align-items:center;          /* wyrównanie pionowe */
  margin: 12px auto 0;
  padding: 0 var(--pad);
  max-width: 100%;
  text-align: center;          /* gdy badge łamie się do kilku linii */
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  color:#222;
  background:#fff;
  border:1px solid #eee;
  white-space:nowrap;
}

/* 6) RWD – przejścia kolumn */
@media (max-width: 900px){
  .brand-grid__list{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .brand-grid__list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brand-grid{ border-radius:12px; }
}

/* 7) Wyśrodkowanie kontenerów awaryjnie (gdy nadrzędny ma inne style) */
.brand-grid,
.brand-grid__list{
  margin-left:auto;
  margin-right:auto;
}

/* 8) Preferencje systemowe – mniej animacji dla osób z ograniczeniem ruchu */
@media (prefers-reduced-motion: reduce){
  .brand-grid__list img{ transition: none; }
  .brand-grid__list img:hover{ transform: none; }
}
.abs-label {
    border-radius: 4px !important;
    padding: 3px 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
}
.abs-label {
    box-shadow: 0px 1px 3px rgba(0,0,0,0.18) !important;
}
section[data-panel-id="injection-1001"] .panel-heading h2 {
  display: none !important;
}
/* Zmiana nazwy sekcji HIT CENOWY na LETNIE HITY CENOWE */
.panel[data-panel-id="panel-1"] .panel-heading h2 {
    font-size: 0 !important;
}

.panel[data-panel-id="panel-1"] .panel-heading h2::after {
    content: "LETNIE HITY CENOWE";
    font-size: 28px;
    font-weight: 700;
    color: inherit;
}