/*-------------USP------------*/

/* Wycentruj ikonę w kafelku */
#menu_banners3 .menu_button_wrapper{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Rozmiar ikon */
#menu_banners3 .menu_button_wrapper img{
  display: block !important;
  width: 160px !important;
  height: auto !important;
}

/* --- MOBILE SLIDER (scroll-snap) dla USP #menu_banners3 --- */
@media (max-width: 575px){

  /* kontener robi się przewijalny poziomo */
  #menu_banners3{
    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;

    gap: 12px !important;
    padding: 0 12px 10px !important;

    scrollbar-width: none; /* Firefox */
  }
  #menu_banners3::-webkit-scrollbar{ display:none !important; }

  /* każdy kafelek jako "slajd" */
  #menu_banners3 .menu_button_wrapper{
    flex: 0 0 80% !important;      /* 1 slajd na raz; zmień np. na 70% jeśli chcesz peek */
    scroll-snap-align: start !important;

    /* centrowanie ikony w slajdzie */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Ikony mniejsze na mobile (zostawiamy Twoje) */
  #menu_banners3 .menu_button_wrapper img{
    width: 120px !important;
    height: auto !important;
    display: block !important;
  }
}

/* =========================================================
   Popularne kategorie (#catSliderHome) – wygląd jak 24MX
   Mobile: karuzela (scroll) | Desktop: siatka 6 kolumn
   ========================================================= */

/* (opcjonalnie) chowamy nawigację IdoSell, jeśli jest */
#catSliderHome .catSlider__nav,
#catSliderHome .catSlider__btn{
  display: none !important;
}

/* TRACK – bazowo flex */
#catSliderHome .catSlider__track{
  display: flex !important;
  gap: 16px !important;
  padding: 8px 0 12px !important;
  margin: 0 !important;
}

/* ITEM – link jako kafelek */
#catSliderHome .catSlider__item{
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* BOX Z OBRAZKIEM – “24MX look”: szare tło + border + radius */
#catSliderHome .catSlider__imgWrap{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #F0F1F2 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 4px !important;

  padding: 10px !important;
  height: 92px !important;           /* stała wysokość jak u nich */
  overflow: hidden !important;
}

/* obrazek: nie rozciągaj – “contain” */
#catSliderHome .catSlider__imgWrap img{
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

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

/* Hover – delikatny “premium” lift */
@media (hover:hover){
  #catSliderHome .catSlider__item:hover .catSlider__imgWrap{
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
    transition: transform .18s ease, box-shadow .18s ease;
  }
}

/* =========================
   MOBILE/TABLET: slider
   ========================= */
@media (max-width: 1199px){
  #catSliderHome .catSlider__track{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;
    padding-left: 12px !important;   /* “oddech” jak w karuzelach */
    padding-right: 12px !important;
  }
  #catSliderHome .catSlider__track::-webkit-scrollbar{
    width: 0; height: 0;
  }

  /* szerokość kafla ~ 2 widoczne na ekranie */
  #catSliderHome .catSlider__item{
    flex: 0 0 clamp(160px, 42vw, 220px) !important;
    scroll-snap-align: start !important;
  }
}

/* =========================
   DESKTOP: siatka 6 kolumn
   ========================= */
@media (min-width: 1200px){
  #catSliderHome .catSlider__track{
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 16px !important;
  }

  #catSliderHome .catSlider__item{
    flex: 0 0 calc((100% - (16px * 5)) / 6) !important; /* 6 kolumn + gap */
    max-width: calc((100% - (16px * 5)) / 6) !important;
  }
}

/* Tytuł sekcji – styl jak reszta strony (reset customizacji) */
#catSliderHome .catSlider__head{
  justify-content: initial !important;
}

/* === Popularne kategorie: tytuł jak nagłówki motywu (np. POLECANE) === */

/* kontener nagłówka */
#catSliderHome .catSlider__head{
  justify-content: center !important;
  text-align: center !important;
}

/* reset wcześniejszych stylów i ustawienie typografii jak w motywie */
#catSliderHome .catSlider__title{
  all: unset; /* kasuje czerwony kolor/rozmiary z wcześniejszych reguł */

  display: block;
  width: 100%;
  text-align: center;

  font-family: var(--font-family-headline, var(--font-family, Arial)) !important;
  font-size: var(--menu-categories-5-title-font-size, 2.5rem) !important;
  font-weight: 400 !important;

  color: var(--headline-color, #333) !important;

  text-transform: uppercase !important;
  letter-spacing: .18em !important;

  margin: 0 0 2rem 0 !important;
  line-height: 1.1 !important;
}

/* (opcjonalnie) jeśli tytuł nadal jest za mały/za duży, zmień tylko tę wartość:
   #catSliderHome .catSlider__title{ font-size: 3.2rem !important; } */