/* === Popularne kategorie (Home) – styl jak xlmoto === */

/* (opcjonalnie) chowamy strzałki IdoSell, bo i tak nie działają bez JS */
#catSliderHome .catSlider__nav,
#catSliderHome .catSlider__btn{ display:none !important; }

/* Nagłówek jak "POLECANE" */
#catSliderHome .catSlider__head{ justify-content:center !important; }
#catSliderHome .catSlider__title{
  color:#2b2b2b !important;
  text-align:center !important;
  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  font-weight:300 !important;
  font-size:28px !important;
  line-height:1.1 !important;
  margin:30px 0 18px !important;
}

/* Track = 1 rząd, przewijanie w bok, ukryty scrollbar */
#catSliderHome .catSlider__track{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  padding: 6px 0 12px;
  margin: 0;

  scrollbar-width:none;            /* Firefox (walidator może marudzić) */
}
#catSliderHome .catSlider__track::-webkit-scrollbar{
  width:0;
  height:0;
}

/* Kafelek: równa szerokość + odstępy */
#catSliderHome .catSlider__item{
  flex:0 0 auto;
  display:block;
  width:150px;                     /* bazowo mobile */
  margin:0 12px 0 0;
  text-decoration:none;
  color:inherit;
}
#catSliderHome .catSlider__item:last-child{ margin-right:0; }

/* Responsywne szerokości kafelków (jak u nich: więcej na większych ekranach) */
@media (min-width: 576px){  #catSliderHome .catSlider__item{ width:160px; } }
@media (min-width: 768px){  #catSliderHome .catSlider__item{ width:170px; } }
@media (min-width: 992px){  #catSliderHome .catSlider__item{ width:180px; } }
@media (min-width: 1200px){ #catSliderHome .catSlider__item{ width:190px; } }

/* Obrazek jak xlmoto: jasne tło + delikatne zaokrąglenie, równa wysokość */
#catSliderHome .catSlider__imgWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F0F1F2;
  border-radius:4px;
  padding:10px;
  height:92px;                     /* równa wysokość jak w “overview component” */
  overflow:hidden;
}

/* Bez zgniatania: zachowaj proporcje (contain), ale wypełnij możliwie duży rozmiar */
#catSliderHome .catSlider__imgWrap img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  border:0;
}

/* Podpis */
#catSliderHome .catSlider__label{
  display:block;
  margin-top:10px;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  text-align:center;
}

/* === Popularne kategorie: MOBILE slider, DESKTOP wrapper === */

/* usuń strzałki (nagłówkowe) */
#catSliderHome .catSlider__nav,
#catSliderHome .catSlider__btn{
  display:none !important;
}

/* bez obwódki / tła / zaokrągleń wokół zdjęć (mobile + desktop) */
#catSliderHome .catSlider__imgWrap{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
#catSliderHome .catSlider__imgWrap img{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display:block;
  width:100%;
  height:auto; /* brak "zgniatania" */
}

/* wspólne: track jako flex */
#catSliderHome .catSlider__track{
  display:flex !important;
  padding: 8px 0 12px;
  margin: 0;
}

/* MOBILE: slider (1 rząd, przewijanie) */
@media (max-width: 1199px){
  #catSliderHome .catSlider__track{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox (walidator może marudzić) */
  }
  #catSliderHome .catSlider__track::-webkit-scrollbar{
    width:0; height:0;
  }

  #catSliderHome .catSlider__item{
    flex: 0 0 auto;
    width: 180px;            /* możesz zmienić */
    margin: 0 12px 0 0;      /* odstępy w sliderze */
  }
}

/* DESKTOP: wrapper (zawijanie, bez przewijania) */
@media (min-width: 1200px){
  #catSliderHome .catSlider__track{
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  #catSliderHome .catSlider__item{
    flex: 0 0 auto;
    width: 180px;            /* szerokość kafla na desktop */
    margin: 0 0 0 0;   /* odstępy w wrapperze */
  }
}

/* podpis */
#catSliderHome .catSlider__label{
  display:block;
  margin-top:10px;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  text-align:center;
}
/*usun*/

/* ===== DESKTOP: dokładnie 6 kolumn ===== */
@media (min-width: 1200px){

  /* wrapper/siatka */
  #catSliderHome .catSlider__track{
    display:flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;

    /* "gutter" bez gap: ujemne marginesy + padding w item */
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  /* 6 kolumn = 100/6% */
  #catSliderHome .catSlider__item{
    flex: 0 0 16.6667% !important;
    max-width: 16.6667% !important;
    width: auto !important;

    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 16px !important;

    margin: 0 !important; /* ważne: wyłącza stare marginy */
    box-sizing: border-box !important;
  }
}

/* ===== MOBILE: slider zostaje (1 rząd) ===== */
@media (max-width: 1199px){
  #catSliderHome .catSlider__track{
    display:flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #catSliderHome .catSlider__track::-webkit-scrollbar{ width:0; height:0; }

  #catSliderHome .catSlider__item{
    flex: 0 0 auto !important;
    width: 180px !important;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
  }
}

/* ===== bez obwódki/zaokrągleń wokół zdjęć (mobile + desktop) ===== */
#catSliderHome .catSlider__imgWrap{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#catSliderHome .catSlider__imgWrap img{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display:block;
  width:100%;
  height:auto;
}

/* USP w banerze (strefa 3) */
.mp-usps{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.mp-usps__item{
  flex:1 1 20%;
  display:flex;
  align-items:center;
  gap:12px; /* jeśli edytor krzyczy, dam wersję bez gap */
  padding:14px 18px;
  text-decoration:none;
  color:inherit;
  min-width: 220px; /* żeby nie robiło się zbyt ciasno */
}

.mp-usps__item:not(:first-child){
  border-left:1px solid rgba(0,0,0,.12);
}

.mp-usps__icon{
  font-size:28px;
  line-height:1;
  color:#16b06a; /* zielony jak na screenie */
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
}

.mp-usps__title{
  display:block;
  font-weight:700;
  font-size:16px;
  line-height:1.15;
}

.mp-usps__desc{
  display:block;
  margin-top:3px;
  font-size:13px;
  opacity:.8;
  line-height:1.2;
}

/* responsywność */
@media (max-width: 991px){
  .mp-usps__item{
    flex:1 1 50%;
    min-width: 0;
  }
  .mp-usps__item:not(:first-child){
    border-left:0;
  }
  .mp-usps__item:nth-child(odd){
    border-right:1px solid rgba(0,0,0,.12);
  }
  .mp-usps__item:nth-child(n+3){
    border-top:1px solid rgba(0,0,0,.12);
  }
}

@media (max-width: 575px){
  .mp-usps__item{
    flex:1 1 100%;
  }
  .mp-usps__item:nth-child(odd){
    border-right:0;
  }
}