/* === Menu (opcjonalnie) === */
[title="PROMOCJE" i]{ color:#238FA7 !important; }
[title="OUTLET"   i]{ color:#ff0000 !important; }

/* === Ukrycie ilości produktów === */
#projector_amount{ display:none !important; }

/* === Hero banner === */
.hero-banner{
  display:block; position:relative; width:100%;
  border-radius:12px; overflow:hidden; aspect-ratio:2840/1220;
}
@media (max-width:768px){
  .hero-banner{ aspect-ratio:950/630; }
}

/* =========================================
   1) Kategorie / listingi (strony listujące)
   ========================================= */
.search.products .product,
.projector_product{
  box-sizing:border-box !important;
  border:1px solid #9aa3af !important;
  border-radius:12px !important;
  padding:12px !important;
  background:#fff !important;
  box-shadow:0 2px 6px rgba(0,0,0,.10) !important;
  transition:transform .2s ease, box-shadow .2s ease !important;
  display:flex; flex-direction:column;
}
.search.products .product:hover,
.projector_product:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.16) !important;
}
.product__content_wrapper{ margin-top:10px; }
.product__content_wrapper > *:last-child{ margin-bottom:0; }

/* =========================================
   2) Strona główna – NOWOŚCI (hotspot)
   ========================================= */
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide,
.hotspot__wrapper .product.hotspot__product.swiper-slide{
  box-sizing:border-box !important;
  border:1px solid #9aa3af !important;
  border-radius:12px !important;
  padding:12px !important;
  background:#fff !important;
  box-shadow:0 2px 6px rgba(0,0,0,.10) !important;
  transition:transform .2s ease, box-shadow .2s ease !important;
  display:flex; flex-direction:column;
}
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.16) !important;
}
/* nie ucinaj cieni */
section[id^="main_hotspot_zone"] .swiper,
section[id^="main_hotspot_zone"] .swiper-wrapper,
.hotspot__wrapper .swiper,
.hotspot__wrapper .swiper-wrapper{ overflow:visible !important; }

/* ===========================
   UPIĘKSZENIA (ADD-ON)
   =========================== */
.product__icon picture,
.product__icon img{
  display:block; transition:transform .25s ease; will-change:transform;
}
.search.products .product:hover .product__icon picture,
.search.products .product:hover .product__icon img,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover .product__icon picture,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover .product__icon img,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover .product__icon picture,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover .product__icon img{
  transform:scale(1.035);
}

/* delikatne tło kart (gradient) */
.search.products .product,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide,
.hotspot__wrapper .product.hotspot__product.swiper-slide{
  background:linear-gradient(180deg,#fff 0%,#fafafa 100%) !important;
}

/* akcent ramki przy hover */
.search.products .product:hover,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover{
  border-color:#7e8aa0 !important;
}

/* Badges */
.label_icons strong,
.badge,
[class*="label_"],
[class*="badge_"],
[class*="tag_"]{
  display:inline-block; padding:4px 8px; border-radius:999px;
  font-size:12px; line-height:1; font-weight:600; letter-spacing:.2px;
}
[class*="promo"], .badge--promo{ background:#ffe8ec; color:#c61a3a; }
[class*="nowo"], .badge--new{   background:#e8faf1; color:#1a7f4b; }

/* Ceny */
.price, .product__price{ font-size:18px; font-weight:700; }
.price small, .product__price small, .price .unit{ font-size:12px; opacity:.75; margin-left:4px; }
.old_price, .price--old{ text-decoration:line-through; opacity:.55; }

/* Reduced motion */
.search.products .product,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide,
.hotspot__wrapper .product.hotspot__product.swiper-slide{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .product__icon, .product__icon img, .product__icon picture{ transition:none !important; }
}

/* Focus (a11y) */
.search.products .product:focus-within,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:focus-within,
.hotspot__wrapper .product.hotspot__product.swiper-slide:focus-within{
  outline:3px solid rgba(35,143,167,.35); outline-offset:3px;
}

/* === BRAND COLOR === */
:root{ --lubatex:#291671; } /* kolor akcentu */

/* pudełko zdjęcia + hover ramka */
.search.products .product .product__icon,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon,
.hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon{
  position:relative; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:inset 0 0 0 2px var(--lubatex);
  transition:transform .25s ease, box-shadow .25s ease;
}
.search.products .product:hover .product__icon,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide:hover .product__icon,
.hotspot__wrapper .product.hotspot__product.swiper-slide:hover .product__icon{
  box-shadow:inset 0 0 0 4px var(--lubatex), 0 0 0 0 rgba(0,0,0,0);
}
.search.products .product .product__icon picture,
.search.products .product .product__icon img,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon picture,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon img,
.hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon picture,
.hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon img{
  width:100%; height:auto; object-fit:contain;
}

/* =========================
   TŁO KART – WYBIERZ PRESET
   (domyślnie włączony PRESET A)
   ========================= */
:root{
  --card-bg-top:#f7f7f8;  /* góra */
  --card-bg-bot:#e9ecef;  /* dół  */
  --img-box-bg:#ffffff;   /* tło pod zdjęciem produktu */
}
/* PRESET B
:root{ --card-bg-top:#fbfcfe; --card-bg-bot:#f3f5f9; --img-box-bg:#ffffff; }
*/
/* PRESET C
:root{ --card-bg-top:#fffef9; --card-bg-bot:#faf6eb; --img-box-bg:#ffffff; }
*/

/* zastosowanie tła */
.search.products .product,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide,
.hotspot__wrapper .product.hotspot__product.swiper-slide{
  background:linear-gradient(180deg, var(--card-bg-top) 0%, var(--card-bg-bot) 100%) !important;
}
.search.products .product .product__icon,
section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon,
.hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon{
  background:var(--img-box-bg) !important;
}

/* ===== LISTING – alternatywne tło (jeśli chcesz inne dla listingów) ===== */
:root{
  --listing-bg-top:#f7f7f8;
  --listing-bg-bot:#e9ecef;
}
.search.products .product,
.projector_product{
  background:linear-gradient(180deg, var(--listing-bg-top) 0%, var(--listing-bg-bot) 100%) !important;
}
.search.products .product .product__icon,
.projector_product .product__icon{ background:#fff !important; }

/* BLOG na stronie głównej – ramka i efekt */
#main_blog .article__image_wrapper{
  position:relative !important; display:block !important; padding:0 !important;
  border-radius:14px !important; overflow:hidden !important; background:#e9ecef !important;
}
#main_blog .article__image_wrapper::before{
  content:""; position:absolute; inset:0; border:3px solid var(--lubatex);
  border-radius:inherit; pointer-events:none;
}
#main_blog .article__item:hover .article__image_wrapper::before{ border-width:4px; }
#main_blog .article__image_wrapper img.article__image{
  display:block; width:100%; height:100%; object-fit:contain; transition:transform .25s ease;
}
#main_blog .article__item:hover .article__image_wrapper img.article__image{ transform:scale(1.03); }
@media (prefers-reduced-motion:reduce){
  #main_blog .article__image_wrapper::before,
  #main_blog .article__image_wrapper img.article__image{ transition:none !important; }
}

/* Promka label */
.label.--promo{
  background-color:#d50000 !important; border-color:#d50000 !important; color:#fff !important;
}

/* === BLOK SEO – pełna szerokość kontenera === */
#lubatex-seo.seo-block{
  width:100%; max-width:none; margin:24px 0 48px; padding:18px 16px 8px;
  font-family:Arial,Helvetica,sans-serif; color:#222;
  background:#fafafa; border:1px solid #edf0f2; border-radius:12px;
  grid-column:1 / -1;
}
#lubatex-seo h2{ font-size:22px; line-height:1.3; margin:0 0 10px; font-weight:700; }
#lubatex-seo h3{ font-size:18px; line-height:1.35; margin:18px 0 8px; font-weight:700; }
#lubatex-seo p, #lubatex-seo li{ font-size:15.5px; line-height:1.65; color:#3b3b3b; }
#lubatex-seo ul{ margin:0 0 8px 18px; padding:0; }
#lubatex-seo a{ color:#e08a00; text-decoration:none; border-bottom:1px solid rgba(224,138,0,.28); }
#lubatex-seo a:hover{ border-bottom-color:rgba(224,138,0,.55); }
#lubatex-seo.seo-grid{ display:block; }
@media (min-width:992px){
  #lubatex-seo.seo-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;
  }
  #lubatex-seo .seo-right{ padding-top:4px; }
}
@media (max-width:768px){
  #lubatex-seo h2{ font-size:20px; }
  #lubatex-seo h3{ font-size:17px; }
  #lubatex-seo p, #lubatex-seo li{ font-size:15px; }
}

/* ===== BAZA WIEDZY – 4 kafle ===== */
#knowledge-topics{
  margin:28px auto 18px; padding:0 16px; font-family:Arial,Helvetica,sans-serif; max-width:1200px;
}
#knowledge-topics .kw__head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:12px;
}
#knowledge-topics h2{
  margin:0; font-size:22px; line-height:1.25; font-weight:700; color:#222;
}
#knowledge-topics .kw__all{
  font-size:14.5px; text-decoration:none; color:#e08a00; border-bottom:1px solid rgba(224,138,0,.3);
}
#knowledge-topics .kw__all:hover{ border-bottom-color:rgba(224,138,0,.6); }
#knowledge-topics .kw__grid{
  display:grid; gap:20px; grid-template-columns:repeat(4, minmax(0,1fr));
}
#knowledge-topics .kw__tile{
  display:flex; flex-direction:column; background:#fff; border:1px solid #eee; border-radius:14px;
  overflow:hidden; text-decoration:none; transition:transform .2s, box-shadow .2s;
}
#knowledge-topics .kw__tile:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
#knowledge-topics .kw__txt{
  padding:14px 14px 10px; min-height:120px; display:flex; flex-direction:column; gap:6px;
}
#knowledge-topics .kw__txt h3{ margin:0; font-size:16.5px; line-height:1.3; color:#222; font-weight:700; }
#knowledge-topics .kw__txt p{ margin:0; font-size:14px; line-height:1.5; color:#555; }
#knowledge-topics .kw__img{ position:relative; width:100%; aspect-ratio:950/630; overflow:hidden; }
#knowledge-topics .kw__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:992px){ #knowledge-topics .kw__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #knowledge-topics .kw__grid{ grid-template-columns:1fr; } }

/* ===== Aktualności – porządki (jeśli kiedyś włączysz komponent) ===== */
#main_news .article__text img,
#main_news .article__text picture{ display:none !important; }
#main_news .headline__wrapper,
#main_news .article__block{ max-width:1200px; margin:0 auto; padding:0 16px; }
#main_news .article__image_wrapper{ display:block; aspect-ratio:3/2; overflow:hidden; }
#main_news .article__image{ width:100%; height:100%; object-fit:cover; display:block; }
/* ===== BLOG: 4 lekkie kafle obok siebie ===== */

/* szerokość kontenera */
#main_blog .headline__wrapper,
#main_blog .article__block{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* grid 4 → 3 → 2 → 1 */
#main_blog .article__block{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
@media (max-width:1100px){ #main_blog .article__block{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px) { #main_blog .article__block{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { #main_blog .article__block{ grid-template-columns:1fr; } }

/* karta */
#main_blog .article__item{
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}
#main_blog .article__item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

/* obrazek – stałe proporcje, bez ciężkiej ramki z wcześniejszych styli */
#main_blog .article__image_wrapper{
  position:relative !important;
  display:block !important;
  padding:0 !important;
  border-radius:12px 12px 0 0 !important;
  overflow:hidden !important;
  background:#f3f4f6 !important;
  aspect-ratio:950/630;             /* ładny kadr */
}
#main_blog .article__image_wrapper::before{ content:none !important; } /* wyłącza pseudo-ramkę */
#main_blog .article__image{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* treść – tylko tytuł; reszta off */
#main_blog .article__content{ padding:12px 12px 14px; }
#main_blog .article__date,
#main_blog .article__text,
#main_blog .article__more_link{ display:none !important; }

#main_blog .article__name{
  display:block;
  color:#222;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  line-height:1.3;
}
#main_blog .article__name:hover{ color:#e08a00; }
#main_blog .article__text{
  display:-webkit-box !important;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#555; font-size:13.5px; margin-top:4px;
}
/* ===== BLOG — 4 kafle, 950x630, 3-linijkowy lead, strzałka na hover ===== */

/* szerokość kontenera */
#main_blog .headline__wrapper,
#main_blog .article__block{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* GRID 4 → 3 → 2 → 1 */
#main_blog .article__block{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
@media (max-width:1200px){ #main_blog .article__block{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){  #main_blog .article__block{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){  #main_blog .article__block{ grid-template-columns:1fr; } }

/* karta */
#main_blog .article__item{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}
#main_blog .article__item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

/* obrazek — stała proporcja 950x630, bez ciężkiej ramki */
#main_blog .article__image_wrapper{
  position:relative !important;
  display:block !important;
  aspect-ratio:950/630;         /* kluczowy kadr */
  overflow:hidden !important;
  background:#f3f4f6 !important;
  border-bottom:1px solid #eef0f4;
}
#main_blog .article__image_wrapper::before{ content:none !important; } /* wyłącza poprzednią pseudo-ramkę */
#main_blog .article__image{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease;
}
#main_blog .article__item:hover .article__image{ transform:scale(1.03); }

/* treść */
#main_blog .article__content{ padding:12px 14px 14px; }
#main_blog .article__date{ display:none !important; }          /* lżej bez daty */
#main_blog .article__more_link{ display:none !important; }     /* bez duplikatu CTA */

/* tytuł + strzałka na hover */
#main_blog .article__name{
  display:block;
  color:#222;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  line-height:1.3;
  margin:0 0 6px;
  position:relative;
  padding-right:20px;
  transition:color .2s;
}
#main_blog .article__name::after{
  content:"";
  position:absolute; right:0; top:.2em;
  width:14px; height:14px;
  background-repeat:no-repeat; background-position:center; background-size:14px 14px;
  opacity:0; transform:translateX(-4px);
  transition:opacity .2s, transform .2s;
  /* minimalistyczna strzałka (SVG data-URI) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e08a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M13 5l7 7-7 7'/></svg>");
}
#main_blog .article__item:hover .article__name{ color:#e08a00; }
#main_blog .article__item:hover .article__name::after{ opacity:1; transform:translateX(0); }

/* 3-linijkowy lead */
#main_blog .article__text{
  color:#555;
  font-size:13.5px;
  line-height:1.55;
  margin:4px 0 0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.55em * 3);   /* stabilna wysokość kafla */
}
/* MOBILE: 2 kolumny (2+2+2) dla banerków */
@media (max-width: 768px){
  #info-banners{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 12px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #info-banners > li{
    /* zeruje typowe „blokowe”/floatowe style motywu */
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }
  #info-banners > li > a{
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-decoration: none;
  }
}

/* DESKTOP: np. 4 kolumny (zmień na 3/6 jeśli chcesz) */
@media (min-width: 992px){
  #info-banners{ grid-template-columns: repeat(4, 1fr); }
}

/* (opcjonalnie) Fallback, gdyby gdzieś grid był wyłączony */
@supports not (display: grid){
  #info-banners{ display: flex; flex-wrap: wrap; gap: 12px; }
  #info-banners > li{ width: calc(50% - 6px); } /* ~2 kolumny */
}
/* BANERKI: mobile 2 kolumny, desktop 3 kolumny */
#info-banners{
  display:grid !important;
  gap:12px 12px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* mobile: 2+2+2 */
@media (max-width: 768px){
  #info-banners{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #info-banners > li{ 
    display:flex !important; align-items:flex-start; gap:12px;
    width:auto !important; float:none !important; margin:0 !important;
  }
  #info-banners > li > a{ display:flex !important; align-items:flex-start; gap:12px; width:100%; text-decoration:none; }
}

/* tablet: jeśli chcesz też 2 kol., zostaw tak; gdy wolisz 3 – zmień 2→3 */
@media (min-width: 769px) and (max-width: 991px){
  #info-banners{ grid-template-columns:repeat(2,1fr) !important; }
}

/* desktop: 3+3 */
@media (min-width: 992px){
  #info-banners{ grid-template-columns:repeat(3,1fr) !important; }
}

/* Fallback gdyby grid był wyłączony gdzieś w theme */
@supports not (display:grid){
  #info-banners{ display:flex; flex-wrap:wrap; gap:12px; }
  #info-banners > li{ width:calc(50% - 6px); }         /* mobile ~2 kol. */
  @media (min-width: 992px){
    #info-banners > li{ width:calc(33.333% - 8px); }   /* desktop ~3 kol. */
  }
}
/* BLOG (mobile): 2 kolumny zamiast 1 */
@media (max-width: 560px){
  #main_blog .article__block{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  /* drobne korekty czytelności na małych ekranach */
  #main_blog .article__name{ font-size:14px; padding-right:16px; }
  #main_blog .article__text{ -webkit-line-clamp:2; font-size:12.5px; }
}
/* CERTYFIKATY / ATESTY – mobile: 2 kolumny (2+2+2) */
@media (max-width: 768px){
  :is(#cert-badges, #certyfikaty, #atesty, .cert-list, .certs, .trust-logos){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  /* element jednostkowy (li/div/a – cokolwiek jest bezpośrednim dzieckiem) */
  :is(#cert-badges, #certyfikaty, #atesty, .cert-list, .certs, .trust-logos) > *{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    float: none !important;   /* zeruje ewentualne floaty z motywu */
    margin: 0 !important;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
  }
  /* obrazki logotypów */
  :is(#cert-badges, #certyfikaty, #atesty, .cert-list, .certs, .trust-logos) img{
    max-width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 56px;  /* żeby rząd był równy; zmień np. na 48/64 */
    display: block;
  }
}
@media (min-width: 992px){
  :is(#cert-badges, #certyfikaty, #atesty, .cert-list, .certs, .trust-logos){
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}
/* === MOBILE LAYOUTS (≤768px) — tylko układ, desktop bez zmian === */
@media (max-width: 768px){

  /* 1) BANERKI (6 szt.) → 2+2+2
     Podane jest kilka możliwych identyfikatorów/klas.
     Jeśli masz swój kontener, podmień/ dopisz go w :is(...) */
  :is(#home-tiles, .home-tiles, .tiles-6, .promo-tiles, .main_tiles,
      .home_boxes, .main_banners1, .main_banners2){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  :is(#home-tiles, .home-tiles, .tiles-6, .promo-tiles, .main_tiles,
      .home_boxes, .main_banners1, .main_banners2) > *{
    margin: 0 !important;
    width: auto !important;
    float: none !important;
  }

  /* 2) CERTYFIKATY → 2+2
     (dopisz tutaj dokładny selektor Twojego bloku, jeśli inny) */
  :is(#cert-badges, #certyfikaty, #atesty, .cert-list, .certs, .trust-logos){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  :is(#cert-badges, #certyfikaty, #atesty, .cert-list, .certs, .trust-logos) > *{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
  }

  /* 3) BLOG → 2+2 (zostawia Twój obecny desktop 1+1+1+1) */
  #main_blog .article__block{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  /* drobne dostosowania czytelności na małych ekranach */
  #main_blog .article__name{ font-size:14px; padding-right:16px; }
  #main_blog .article__text{ -webkit-line-clamp:2; font-size:12.5px; }
}

/* Fallback, gdyby gdzieś display:grid był nadpisany / niedostępny */
@supports not (display: grid){
  @media (max-width: 768px){
    :is(#home-tiles, .home-tiles, .tiles-6, .promo-tiles, .main_tiles,
        .home_boxes, .main_banners1, .main_banners2,
        #cert-badges, #certyfikaty, #atesty, .cert-list, .certs, .trust-logos){
      display: flex !important; flex-wrap: wrap !important; gap: 12px !important;
    }
    :is(#home-tiles, .home-tiles, .tiles-6, .promo-tiles, .main_tiles,
        .home_boxes, .main_banners1, .main_banners2) > *,
    :is(#cert-badges, #certyfikaty, #atesty, .cert-list, .certs, .trust-logos) > *{
      width: calc(50% - 6px) !important;
    }
  }
}
/* MOBILE (≤768px): każdy blok oznaczony klasą .grid-2-m układa się w 2 kolumny */
@media (max-width: 768px){
  /* jeśli grid stoi na sekcji */
  .grid-2-m{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
    margin:0 !important;
    padding:0 !important;
  }
  .grid-2-m > *{
    margin:0 !important;
    width:auto !important;
    float:none !important;
  }

  /* jeśli elementy są w UL/OL wewnątrz sekcji – też złapemy */
  .grid-2-m > ul, .grid-2-m > ol{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }
  .grid-2-m > ul > *, .grid-2-m > ol > *{
    margin:0 !important;
    width:auto !important;
    float:none !important;
  }

  /* kosmetyka logotypów (certyfikaty) – możesz usunąć, jeśli niepotrzebne */
  .grid-2-m img{
    max-width:100%;
    height:auto;
    object-fit:contain;
  }
}
/* === HOME: PROMOCJE / NOWOŚCI / BESTSELLERY — MOBILE TUNING === */
@media (max-width: 768px){

  /* 1) 2 karty naraz w sliderze */
  section[id^="main_hotspot_zone"] .swiper-slide,
  .hotspot__wrapper .swiper-slide{
    width: calc(50% - 6px) !important;   /* 2 szt. w „widoku” */
    padding: 0 !important;
  }
  section[id^="main_hotspot_zone"] .swiper-wrapper,
  .hotspot__wrapper .swiper-wrapper{
    gap: 12px !important;                /* odstęp między kartami */
  }

  /* 2) Karta – czytelniej, ale lekko */
  section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide,
  .hotspot__wrapper .product.hotspot__product.swiper-slide{
    padding: 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
  }

  /* 3) Zdjęcie produktu – większe, kwadratowy kadr, bez zniekształceń */
  section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon,
  .hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon{
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
  }
  section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon img,
  section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon picture,
  .hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon img,
  .hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon picture{
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }

  /* 4) Tytuł – 2 linie max, czytelny rozmiar */
  section[id^="main_hotspot_zone"] .product__name,
  section[id^="main_hotspot_zone"] .product__name a,
  .hotspot__wrapper .product__name,
  .hotspot__wrapper .product__name a{
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;               /* max 2 linie */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);         /* równe kafle */
    color: #222;
    text-decoration: none;
  }

  /* 5) Ceny – troszkę większe, stara cena skromniej */
  section[id^="main_hotspot_zone"] .product__price,
  section[id^="main_hotspot_zone"] .price,
  .hotspot__wrapper .product__price,
  .hotspot__wrapper .price{
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  section[id^="main_hotspot_zone"] .old_price,
  .hotspot__wrapper .old_price{
    font-size: 12px !important;
    opacity: .65;
  }

  /* 6) Badge (NOWOŚĆ / PROMOCJA) – trochę mniejsze, żeby nie zasłaniały */
  section[id^="main_hotspot_zone"] .badge,
  section[id^="main_hotspot_zone"] [class*="label_"],
  section[id^="main_hotspot_zone"] [class*="badge_"],
  .hotspot__wrapper .badge,
  .hotspot__wrapper [class*="label_"],
  .hotspot__wrapper [class*="badge_"]{
    transform: scale(.9);
    transform-origin: top left;
  }
}
@media (min-width:640px) and (max-width:768px){
  section[id^="main_hotspot_zone"] .swiper-slide,
  .hotspot__wrapper .swiper-slide{ width: calc(33.333% - 8px) !important; }
  section[id^="main_hotspot_zone"] .swiper-wrapper,
  .hotspot__wrapper .swiper-wrapper{ gap: 12px !important; }
}
@media (max-width:768px){
  section[id^="main_hotspot_zone"] .product.hotspot__product.swiper-slide .product__icon,
  .hotspot__wrapper .product.hotspot__product.swiper-slide .product__icon{
    aspect-ratio: 4 / 5;
  }
}
/* ===== HOME: karty produktów — mobilki (pełne tytuły, brak przesunięcia) ===== */
@media (max-width: 768px){

  /* delikatniej w kartach – ciut mniej „powietrza” */
  #main_promotions .product,
  #main_bestsellers .product,
  #main_new_products .product,
  .section.article + .section .product { /* awaryjny selektor dla układu IdoSell */
    padding: 10px !important;
  }

  /* NIE przycinaj tytułów, pozwól łamać wyrazy, niech zajmą tyle linii ile trzeba */
  #main_promotions .product .product__name,
  #main_bestsellers .product .product__name,
  #main_new_products .product .product__name,
  #main_promotions .product .product_name,
  #main_bestsellers .product .product_name,
  #main_new_products .product .product_name{
    white-space: normal !important;
    display: block !important;
    overflow: visible !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    margin-bottom: 6px;
    line-height: 1.25;
  }

  /* długie komunikaty („Najniższa cena z 30 dni…”) – niech zawijają się,
     ale nie rozszerzają karty na boki */
  #main_promotions .product *[class*="lowest"],
  #main_bestsellers .product *[class*="lowest"],
  #main_new_products .product *[class*="lowest"],
  #main_promotions .product *[class*="Najni"],
  #main_bestsellers .product *[class*="Najni"],
  #main_new_products .product *[class*="Najni"]{
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* minimalnie ciaśniejszy odstęp między kolumnami, żeby nic nie „uciekało” w prawo */
  #main_promotions .products,
  #main_bestsellers .products,
  #main_new_products .products{
    column-gap: 12px !important;
    row-gap: 14px !important;
  }

  /* na wszelki wypadek: nie pozwalaj kartom poszerzać siatki */
  #main_promotions .product,
  #main_bestsellers .product,
  #main_new_products .product{
    max-width: 100% !important;
    overflow: hidden;   /* treść zawija się, nic nie wystaje */
  }
}

/* niczego nie ruszamy na listingu kategorii */
@media (max-width:768px){
  .product .product__name, .product .product_name { white-space: normal !important; }
}
/* === MOBILE: wyrównanie karuzel z produktami (Promocje / Nowości / Bestsellery) === */
@media (max-width: 768px){

  /* 1) Równe krawędzie toru przewijania */
  #main_promotions .swiper,
  #main_new_products .swiper,
  #main_bestsellers .swiper{
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: visible !important; /* żeby nie ucinało cieni */
  }

  /* 2) Jednolity odstęp między kartami */
  #main_promotions .swiper-wrapper,
  #main_new_products .swiper-wrapper,
  #main_bestsellers .swiper-wrapper{
    gap: 12px !important;          /* stała przerwa */
  }

  /* 3) Zerowanie marginesów slajdów (często to one „popychają” układ) */
  #main_promotions .swiper-slide,
  #main_new_products .swiper-slide,
  #main_bestsellers .swiper-slide{
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* 4) Karta wewnątrz slajdu – bez dodatkowych odstępów zewnętrznych */
  #main_promotions .product.hotspot__product.swiper-slide,
  #main_new_products .product.hotspot__product.swiper-slide,
  #main_bestsellers .product.hotspot__product.swiper-slide{
    margin: 0 !important;
  }

  /* 5) Czytelne zawijanie tytułów/opisów (pełny tekst) */
  #main_promotions .product .product__name,
  #main_new_products .product .product__name,
  #main_bestsellers .product .product__name,
  #main_promotions .product .product_name,
  #main_new_products .product .product_name,
  #main_bestsellers .product .product_name{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #main_promotions .product .product__short_description,
  #main_new_products .product .product__short_description,
  #main_bestsellers .product .product__short_description{
    display: block !important;
    white-space: normal !important;
  }

  /* 6) Odrobina ciaśniejsze wnętrze karty (często pomaga zniknąć „przesunięciu”) */
  #main_promotions .product .product__content_wrapper,
  #main_new_products .product .product__content_wrapper,
  #main_bestsellers .product .product__content_wrapper{
    padding: 10px 10px 12px !important;
  }
}
/* === MOBILE (≤768px): pełne tytuły + równe krawędzie karuzeli === */
@media (max-width: 768px){

  /* 1) PEŁNY TEKST — zdejmij wszystkie clampy/elipsy */
  .hotspot__wrapper .product .product__name,
  .hotspot__wrapper .product .product_name,
  section[id^="main_hotspot_zone"] .product .product__name,
  section[id^="main_hotspot_zone"] .product .product_name,
  #main_promotions .product .product__name,
  #main_promotions .product .product_name,
  #main_new_products .product .product__name,
  #main_new_products .product .product_name,
  #main_bestsellers .product .product__name,
  #main_bestsellers .product .product_name{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;          /* anuluje -webkit-box od clampów */
    -webkit-line-clamp: initial !important;
    -webkit-box-orient: initial !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    line-height: 1.25;
    margin: 6px 0 4px;
  }

  /* 2) RÓWNE KRAWĘDZIE TORU (bez zmiany szerokości slajdów) */
  .hotspot__wrapper .swiper,
  section[id^="main_hotspot_zone"] .swiper,
  #main_promotions .swiper,
  #main_new_products .swiper,
  #main_bestsellers .swiper{
    padding-left: 12px !important;     /* delikatne „guttery” */
    padding-right: 12px !important;
    overflow: visible !important;       /* nie ucinaj cieni/hoverów */
  }

  /* 3) Ujednolicenie mikro-odstępu między slajdami — bez “pchania” w prawo */
  .hotspot__wrapper .swiper-slide,
  section[id^="main_hotspot_zone"] .swiper-slide,
  #main_promotions .swiper-slide,
  #main_new_products .swiper-slide,
  #main_bestsellers .swiper-slide{
    margin-right: 10px !important;     /* stały dystans */
  }
  /* ostatni bez dodatkowego marginesu */
  .hotspot__wrapper .swiper-slide:last-child,
  section[id^="main_hotspot_zone"] .swiper-slide:last-child,
  #main_promotions .swiper-slide:last-child,
  #main_new_products .swiper-slide:last-child,
  #main_bestsellers .swiper-slide:last-child{
    margin-right: 0 !important;
  }
}
/* === AKTUALNOŚCI: 4 kafle desktop / 2x2 mobile, tytuł w gradiencie === */

/* szerokość kontenera */
#main_news .headline__wrapper,
#main_news .article__block{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* układ kafli */
#main_news .article__block{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 992px){
  #main_news .article__block{ grid-template-columns: repeat(2,1fr); }
}

/* kafel = czysta karta ze zdjęciem */
#main_news .article__item{
  position: relative;
  border: none !important;
  border-radius: 14px;
  overflow: hidden;
  background: #000;                 /* podkład pod zdjęcie */
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  transition: transform .2s, box-shadow .2s;
}
#main_news .article__item:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* stała proporcja zdjęcia 3:2 (950×630 ≈ 3:2) */
#main_news .article__image_wrapper{
  display: block !important;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
#main_news .article__image{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .28s ease;
}
#main_news .article__item:hover .article__image{ transform: scale(1.04); }

/* chowamy elementy, których nie chcemy na kaflu */
#main_news .article__date,
#main_news .article__text{ display: none !important; }

/* nakładka z gradientem i tytułem */
#main_news .article__content{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px 14px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 65%);
}

/* tytuł w nakładce */
#main_news .article__name{
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.25;
  /* responsywnie, ale w ryzach */
  font-size: clamp(15px, 1.2vw + 10px, 19px);
  display: -webkit-box;             /* 2 linie na wszelki wypadek */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* „Czytaj więcej” jako mały chip — odkomentuj jeśli chcesz go pokazać
#main_news .article__more_link{
  display: inline-block;
  margin-top: 8px;
  background: #ff9900; color:#000;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700; font-size: 13px;
  text-decoration: none;
}
*/

/* drobne dopieszczenie dotyku na mobile */
@media (max-width: 992px){
  #main_news .article__content{ padding: 10px 12px 12px; }
  #main_news .article__name{ font-size: clamp(14px, 4.2vw, 18px); }
}
/* 1) Tytuł: mocniejsza czytelność (biały + cień) */
#main_news .article__name{
  color:#fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35);
  /* opcjonalnie lekkie obramowanie liter (tylko WebKit):
     -webkit-text-stroke: 0.5px rgba(0,0,0,.25); */
}

/* 2) Większy gradient u dołu (więcej tła pod długie tytuły) */
#main_news .article__content{
  background: linear-gradient(0deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,0) 60%);
  padding: 14px 16px 16px; /* odrobina więcej „oddechu” */
}

/* 3) Pokaż krótki lead z opisu (2 linie) pod tytułem */
#main_news .article__text{
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 6px;
  color: #eef2f6;
  font-weight: 500;
  font-size: clamp(12px, 0.9vw + 8px, 14px);
  line-height: 1.45;
  opacity: .95;
}

/* 4) Skalowanie fontów – trochę większe na mobile */
@media (max-width: 992px){
  #main_news .article__name{
    font-size: clamp(16px, 4.8vw, 20px);
    line-height: 1.22;
  }
  #main_news .article__text{
    font-size: clamp(13px, 3.7vw, 15px);
  }
}

/* 5) (opcjonalnie) wszystko WIELKIMI literami – jeśli lubisz taki efekt
#main_news .article__name{ text-transform: uppercase; letter-spacing: .2px; }
*wersja ostateczna-16092025/
/* === INFO-BANNERS — dopracowanie desktopu === */
@media (min-width: 979px){
  #info-banners{
    /* dopasuj do szerokości kontenera strony */
    max-width: 1200px;
    margin: 12px auto 0;      /* wycentrowanie + niewielki odstęp od góry */
    padding: 0 16px;          /* oddech po bokach */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 24px;           /* ciut większe odstępy na desktopie */
    font-size: 1em;
  }

  /* wyrównanie elementów w pionie i spójne odstępy */
  #info-banners li,
  #info-banners li > a{
    align-items: center;
    gap: 14px;
  }

  /* delikatnie większe ikony na desktopie */
  #info-banners .ico{
    width: 48px; height: 48px; flex: 0 0 48px;
  }
  #info-banners .ico::before{
    width: 24px; height: 24px; background-size: 24px 24px;
  }

  /* czytelniejsza wysokość linii przy dłuższym opisie */
  #info-banners p{ line-height: 1.4; }
}

/* (opcjonalnie) jeśli masz bardzo szerokie monitory */
@media (min-width: 1400px){
  #info-banners{ max-width: 1240px; }
}

/* (opcjonalnie) jeśli chcesz większy luz pod banerem hero */
.hero-banner + #info-banners{ margin-top: 16px; }
/* === INFO-BANNERS – układ 2→4, centrowanie i reset odstępów === */
#info-banners,
#info-banners * { box-sizing: border-box; }

#info-banners{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* mobilnie 2 kolumny */
  gap: 16px 12px !important;
  list-style: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#info-banners li{
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

#info-banners li > a{
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: #111827 !important;
  width: 100% !important;
}

/* Desktop – 4 kolumny, centrowanie w kontenerze */
@media (min-width: 979px){
  #info-banners{
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 10px !important;

    max-width: 1200px !important;   /* szerokość siatki */
    margin: 8px auto 0 !important;   /* centruje pod banerem */
    padding: 0 16px !important;      /* oddech przy krawędziach */
    align-items: start !important;
  }
}
/* CERTYFIKATY – styl jak w sekcjach typu NOWOŚCI (silny selektor + !important) */
#content .banery-tekst > h2,
#content .banery-tekst > h3{
  margin: 0 0 14px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
  line-height: 1.1 !important;
  font-size: clamp(20px, 2.6vw, 28px) !important;
  color: #374151 !important;
  font-family: var(--font-heading, inherit) !important;
  font-weight: 700 !important;  /* jeśli chcesz mniej „grubo”, zmień na 600 */
}
/* Pasek informacyjny – wersja Lubatex */
.lubatex-infobar{
  --bg:#000; --fg:#fff; --accent:#22c55e;
  background:var(--bg); color:var(--fg);
  font-weight:600; font-size:14px; line-height:1;
  z-index: 9999; /* ponad headerem */
}
.lubatex-infobar .infobar-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:8px 16px;
}
.lubatex-infobar .infobar-item{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.lubatex-infobar svg{ width:18px; height:18px; fill:var(--fg); flex:0 0 18px; opacity:.9; }
.lubatex-infobar .infobar-right small{ font-weight:400; opacity:.75; margin-left:8px; }

/* 1) Gdy pasek siedzi wewnątrz nagłówka – „przyklej” go u góry podczas scrolla */
.header .lubatex-infobar{ position: sticky; top: 0; }

/* 2) Jeżeli chcesz, by NA MOBILE był zawsze przyklejony do górnej krawędzi (ponad headerem) */
@media (max-width: 768px){
  .lubatex-infobar{ position: fixed; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top); }
  /* dopchnij treść strony, by pasek nie zasłaniał – dostosuj wysokość do realnej */
  body{ padding-top: 40px; } /* jeśli pasek wyższy, zwiększ 40→48/56 */
  .lubatex-infobar .infobar-inner{ padding:6px 12px; font-size:13px; gap:14px; }
  .lubatex-infobar .infobar-right small{ display:none; }    /* skróć na mobile */
  /* jeśli będzie mało miejsca, można skrócić środek: */
  /* .lubatex-infobar .infobar-center span{ display:none; } */
}

/* Drobne dostosowania gęstości na średnich ekranach */
@media (max-width: 1024px){
  .lubatex-infobar .infobar-inner{ gap:16px; }
}
/* ——— MOBILE FIX ——— */
@media (max-width: 768px){
  .lubatex-infobar{ 
    position: sticky; top: 0; z-index: 9999; 
    /* jeśli jakiś rodzic ma overflow/transform i psuje sticky, użyj B) */
  }
  .lubatex-infobar .infobar-inner{
    display: flex; flex-wrap: wrap; row-gap: 6px; column-gap: 12px;
    padding: 6px 10px;
  }
  /* 1. Wiersz 1: komunikat dostawy na pełną szerokość, wyśrodkowany */
  .lubatex-infobar .infobar-center{
    order: 1; flex: 1 1 100%;
    justify-content: center; text-align: center;
    white-space: normal; min-width: 0;
  }
  /* 2. Wiersz 2: lewa i prawa w jednej linii, rozstawione */
  .lubatex-infobar .infobar-left,
  .lubatex-infobar .infobar-right{
    order: 2; flex: 1 1 0;
  }
  .lubatex-infobar .infobar-left{ justify-content: flex-start; }
  .lubatex-infobar .infobar-right{ justify-content: flex-end; }
  .lubatex-infobar .infobar-right small{ display:none; } /* skracamy godziny */
  /* ikony trochę mniejsze */
  .lubatex-infobar svg{ width:16px; height:16px; }
}

/* Bez łamania słów i z normalnym zawijaniem tekstu */
.lubatex-infobar .infobar-item{ white-space: normal; min-width: 0; }
.lubatex-infobar .infobar-item span{ overflow: visible; text-overflow: clip; }
@media (max-width: 768px){
  .lubatex-infobar{
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    padding-top: env(safe-area-inset-top);
  }
  /* Dociśnij treść strony, żeby pasek nic nie zasłaniał.
     Dostosuj 44px do rzeczywistej wysokości paska u Ciebie. */
  body{ padding-top: 44px; }
}
/* Podstawy */
.lubatex-infobar{
  --bg:#291670; --fg:#fff;
  background:var(--bg); color:var(--fg);
  font-weight:600; font-size:14px; line-height:1;
  z-index:10050;
}
.lubatex-infobar .infobar-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:8px 16px;
}
.lubatex-infobar .infobar-item{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.lubatex-infobar svg{ width:18px; height:18px; fill:var(--fg); opacity:.9; }
.lubatex-infobar .text-mobile{ display:none; } /* domyślnie ukryta wersja mobilna */

/* ——— MOBILE (fix + skróty) ——— */
@media (max-width: 768px){
  /* twarde przypięcie do góry */
  .lubatex-infobar{ position: fixed; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top); }
  /* dopchnięcie contentu pod paskiem — dopasuj do realnej wysokości */
  body{ padding-top: 44px; }

  .lubatex-infobar .infobar-inner{ padding:6px 10px; gap:12px; }
  .lubatex-infobar svg{ width:16px; height:16px; }

  /* ukryj lewą kolumnę (Polski producent) */
  .lubatex-infobar .infobar-left{ display:none; }

  /* środek + prawa w jednym rzędzie, rozstawione */
  .lubatex-infobar .infobar-center{ margin-right:auto; }
  .lubatex-infobar .infobar-right{ margin-left:auto; }
  .lubatex-infobar .hours{ display:none; } /* chowamy godziny */

  /* podmiana tekstów: krótki na mobile */
  .lubatex-infobar .text-desktop{ display:none; }
  .lubatex-infobar .text-mobile{ display:inline; }

  /* lepsze łamanie na małych ekranach */
  .lubatex-infobar .infobar-item{ white-space:nowrap; min-width:0; }
}

/* Opcjonalnie: jeśli header nachodzi, możesz dodatkowo obniżyć jego z-index lub zwiększyć powyższy do np. 20000 */
/* Pasek Lubatex — układ i wygląd */
.lubatex-infobar{
  --bg:#291670; --fg:#fff;
  background:var(--bg); color:var(--fg);
  font-weight:600; font-size:14px; line-height:1;
}
.lubatex-infobar .infobar-inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding:8px 16px; gap:24px;
}
.lubatex-infobar .infobar-item{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.lubatex-infobar svg{ width:18px; height:18px; fill:var(--fg); opacity:.9; }
.lubatex-infobar .infobar-left{ justify-self:start; }
.lubatex-infobar .infobar-center{ justify-self:center; text-align:center; }
.lubatex-infobar .infobar-right{ justify-self:end; }
.lubatex-infobar .text-mobile{ display:none; }

/* MOBILE: idealnie wycentrowany środek + telefon po prawej, lewy blok ukryty wizualnie */
@media (max-width:768px){
  .lubatex-infobar .text-desktop{ display:none !important; }
  .lubatex-infobar .text-mobile{ display:inline !important; }
  .lubatex-infobar .infobar-inner{ padding:8px 12px; gap:12px; }
  .lubatex-infobar svg{ width:16px; height:16px; }

  /* lewy blok niewidoczny, ale kolumna zostaje — środek jest naprawdę wycentrowany */
  .lubatex-infobar .infobar-left{ visibility:hidden; pointer-events:none; }

  /* telefon zostaje; godziny chowamy dla czytelności */
  .lubatex-infobar .infobar-right .hours{ display:none; }
}