:root{
  --tftb-radius: 18px;
  --tftb-shadow: 0 14px 36px rgba(0,0,0,.22);
  --tftb-maxw: 1280px;
  --tftb-dots-offset: 14px; /* на скільки опустити точки нижче слайдера */
}

/* Центруємо та обмежуємо ширину контейнера */
.tftb-wrap{
  max-width: var(--tftb-maxw);
  margin: 0 auto;
  padding: 0 16px;
}

/* Слайдер і картинка натуральної висоти */
.tftb-swiper{
  position: relative; /* база для абсолютної пагінації */
  padding-bottom: calc(var(--tftb-dots-offset) + 14px); /* місце під точки */
}
.tftb-swiper .swiper{
  border-radius: var(--tftb-radius);
  overflow: hidden;
  box-shadow: var(--tftb-shadow);
  background: transparent;
  isolation: isolate;
}
.tftb-swiper .swiper-slide{ height: auto; }
.tftb-card{ display:block; width:100%; }
.tftb-img{ display:block; width:100%; height:auto; }

/* ===== ПАГІНАЦІЯ: рівно по центру СЛАЙДЕРА, але нижче нього ===== */
.tftb-pagination-wrap{
  position: absolute;
  left: 0;                   /* розтягнути на всю ширину слайдера */
  right: 0;
  bottom: calc(-1 * var(--tftb-dots-offset));
  display: grid;             /* точна центрація незалежно від текст-align теми */
  place-items: center;
  z-index: 3;
  pointer-events: auto;
}
.tftb-pagination-wrap .swiper-pagination{
  position: static !important;
  width: max-content !important;   /* нехай ширина дорівнює ширині самих крапок */
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
  text-align: center !important;
}
.tftb-pagination-wrap .swiper-pagination::before,
.tftb-pagination-wrap .swiper-pagination::after{
  content: none !important; /* прибрати псевдоелементи теми */
}
.tftb-pagination-wrap .swiper-pagination-bullet{
  width:8px; height:8px; border-radius:999px;
  background: rgba(0,0,0,.35); opacity:1;
}
.tftb-pagination-wrap .swiper-pagination-bullet-active{
  width:24px; border-radius:999px; background:#000;
}

/* Приховати зайві елементи Swiper, що можуть малювати «штрих» зліва */
.tftb-swiper .swiper-scrollbar,
.tftb-swiper .swiper-horizontal>.swiper-scrollbar,
.tftb-swiper .swiper-pagination-progressbar{
  display: none !important;
}

/* Якщо один слайд — не показувати крапки */
.tftb-swiper.is-single + .tftb-pagination-wrap { display: none; }

/* Мобільні */
@media (max-width:640px){
  .tftb-wrap{ padding: 0 8px; }
}