/* =========================
   Benefit bannery - slider (Konkurenčné výhody)
   Cieľ:
   - Shoptet natívny layout vo vnútri bannera (ikonka/text nech rieši Shoptet)
   - my riešime len: slider pás + šírky položiek + typografia
   - bez šípok
   ========================= */

/* 1) Premenné + typografia */
.benefitBanner.position--benefitHomepage{
  --bb-gap: 6px;   /* medzera medzi položkami (ak chceš, daj 6-12px) */
  --bb-cols: 5;     /* desktop/NTB */
  --bb-pad-y: 0px;  /* nevnucujeme padding - nech je natívny */
  --bb-pad-x: 0px;

  /* NTB */
  --bb-title-size: 15px;
  --bb-text-size: 12px;
}

/* Tablet/laptop */
@media (max-width: 1024px){
  .benefitBanner.position--benefitHomepage{
    --bb-cols: 3;
    --bb-title-size: 14px;
    --bb-text-size: 12px;
  }
}

/* Mobil */
@media (max-width: 640px){
  .benefitBanner.position--benefitHomepage{
    --bb-cols: 2;
    --bb-gap: 1px !important; /* Medzera medzi bunkami */

    --bb-title-size: 12px;
    --bb-text-size: 11px;
  }
}

/* Nadpis a text - len veľkosť + weight (bez layout zásahov) */
.benefitBanner.position--benefitHomepage .benefitBanner__title{
  font-weight: 800;
  font-size: var(--bb-title-size);
}
.benefitBanner.position--benefitHomepage .benefitBanner__data{
  font-size: var(--bb-text-size);
}

/* 2) Slider pás - len scroll mechanika */
.benefitBanner.position--benefitHomepage{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--bb-gap);

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--bb-pad-x);

  /* nič nenútime na padding/margin, nech ostane natív */
}

/* Nechávam natívny  scrollbar (môžeš zmazať, len ho robím tenkým) */

.benefitBanner.position--benefitHomepage{ scrollbar-width: thin; }



/* 3) Položka - šírka podľa effective počtu */
.benefitBanner.position--benefitHomepage .benefitBanner__item{
  flex: 0 0 calc(
    (100% - (var(--bb-cols-effective, var(--bb-cols)) - 1) * var(--bb-gap))
    / var(--bb-cols-effective, var(--bb-cols))
  );
  scroll-snap-align: start;

  /* žiadne margin/padding prepisy - natív */
}

/* Na tablete/mobile spravime zobrazenie 3 bannerov + 20% z dalsieho */
@media (max-width: 1024px){
  .benefitBanner.position--benefitHomepage .benefitBanner__item{
    flex: 0 0 calc(
      (82% - (var(--bb-cols-effective, var(--bb-cols)) - 1) * var(--bb-gap))
      / var(--bb-cols-effective, var(--bb-cols))
    );
  }
}


/* 4) Wrapper - nech existuje pre prípad, že ho Shoptet už má */
.bbSliderWrap{
  position: relative;
}

/* 5) Šípky úplne vypnúť (aj keby niekde ostali zo starej verzie) */
.bbNavBtn{
  display: none !important;
}

/* Fade okraje vypnúť (tie boli len kvôli šípkam) */
.bbSliderWrap::before,
.bbSliderWrap::after{
  display: none !important;
}