Por predefinição, os passes são apresentados num carrossel. Se preferir que apareçam como cartões de preços padrão, numa grelha junto com os restantes preços, pode alterar isto com CSS personalizado.

De isto:

Para isto:

1. Aceda à secção de CSS personalizado

Encontrará a secção de CSS em Definições > Widgets > CSS personalizado. Se ainda não utilizou esta área antes, consulte Como personalizar um widget bsport com CSS personalizado.

2. Selecione o separador Comum

Recomendamos que utilize o separador Comum.

3. Cole o CSS

Cole as seguintes regras na sua área de CSS personalizado:

/* ── CAROUSEL: DISABLE CAROUSEL BEHAVIOUR ─────────────────────────────────── */

.bs-carousel__indicator__container,
.bs-carousel__navigation__button,
.bs-initial-price__price {
  display: none;
}

.bs-carousel__items__indicator__container {
  overflow: hidden;
  contain: none;
  min-width: 0;
  pointer-events: none;
}

.bs-carousel__items__container {
  overflow: hidden;
  contain: none;
  min-width: 0;
  width: 100%;
}

.bs-carousel__items__container__view {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 230px;
  gap: 20px;
  margin: 0;
  width: 100%;
  transform: none;
  transition: none;
  animation: none;
  translate: 0;
  will-change: unset;
  contain: none;
}

.bs-carousel__items__container__view[style*="transform"] {
  transform: none !important;
}

.bs-carousel__items__container__view > * {
  transform: none;
  transition: none;
  animation: none;
  opacity: 1;
  visibility: visible;
  display: block;
  position: static;
  margin-left: 0;
  width: auto;
  flex-shrink: 0;
}

.bs-carousel__item {
  position: static;
  transform: none;
  pointer-events: all;
}

.hidden-item-right,
.hidden-item-left {
  flex-basis: 0;
  translate: 0;
}

[id*=bsport-widget] .cleanslate .hidden-item-right,
[id*=bsport-widget] .cleanslate .hidden-item-left {
  translate: none;
}


/* ── CAROUSEL: GRID BREAKPOINTS ───────────────────────────────────────────── */

@media (width < 1475px) {
  .bs-carousel__items__container__view {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width < 1100px) {
  .bs-carousel__items__container__view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width < 750px) {
  .bs-carousel__items__container__view {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
  }
}


/* ── CAROUSEL: CARD HEIGHTS ───────────────────────────────────────────────── */

.bs-carousel__item .bs-pack-card {
  height: 230px;
}

@media (width < 768px) {
  .bs-carousel__item {
    width: 100%;
    height: 160px;
  }
}

@media (width < 750px) {
  .bs-carousel__item .bs-pack-card {
    height: 175px;
  }

  .bs-pack-card {
    height: 175px;
  }

  .bs-carousel__item .bs-pack-card {
    height: 150px !important;
  }

  .bs-pack-card__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bs-carousel__items__indicator__container {
    padding: 0 10px;
  }

  .bs-grid-item-justification-space-between {
    height: 100%;
  }

  .bs-pack-card__prices-container {
    align-items: end;
  }
}


/* ── CAROUSEL: CARD STYLES ────────────────────────────────────────────────── */

.bs-pack-card .bs-generic-card__content {
  background: linear-gradient(
    120deg,
    var(--color-secondary-background-paper) 50%,
    var(--color-background-paper) 50%
  );
  border-radius: var(--border-radius-4);
}

.bs-pack-card__title {
  font-size: var(--h6-fontSize);
}

.bs-pack-card__description {
  -webkit-line-clamp: 2;
}

.bs-pack-card__prices-container {
  height: 100%;
  justify-content: end;
}


/* ── PASS PAGE: LAYOUT ────────────────────────────────────────────────────── */

.bs-pass-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  min-width: 0;
}

.bs-pass-page__carousel__container {
  display: flex;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
  margin: 0;
}

.bs-pass-page__list__filters__container {
  min-width: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
}

.bs-pass-page__payment__pack__list__container {
  min-width: 0;
  overflow: hidden;
}

.bs-pass-page__payment__pack__list__card__button {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.bs-paymentpack-card__grid {
  min-width: 0;
}


/* ── CAROUSEL CONTAINER: POINTER EVENTS ──────────────────────────────────── */

.bs-pass-page__carousel__container,
.bs-carousel__container,
.bs-carousel__items__container,
.bs-carousel__items__container__view,
.bs-carousel__item {
  pointer-events: none;
}

.bs-pack-card__footer > button,
.bs-button__container {
  pointer-events: all;
}


/* ── CAROUSEL CONTAINER ───────────────────────────────────────────────────── */

.bs-carousel__container {
  min-width: 0;
  width: 100%;
  flex: 1;
}


/* ── CAROUSEL CONTAINER: RESPONSIVE PADDING ──────────────────────────────── */

@container (width < 1100px) {
  .bs-carousel__item {
    flex-basis: 0;
  }

  .bs-pass-page__carousel__container {
    padding: 0 10px !important;
  }
}

@container (width < 450px) {
  .bs-pass-page__carousel__container {
    padding: var(--spacing-2);
  }
}


/* ── MISC ─────────────────────────────────────────────────────────────────── */

.bs-calendar-search__container,
.bs-search__container {
  margin-bottom: 0;
}

⚠️ Se quiser que os passes apareçam primeiro, adicione também esta regra:

.bs-pass-page__carousel__container {  order: 0;}

4. Guarde as suas alterações

Depois de adicionar as suas regras de CSS personalizado, não se esqueça de guardar. As alterações aplicam-se instantaneamente.

Como exibir os passes como os restantes cartões de preços

1. Aceda à secção de CSS personalizado

2. Selecione o separador Comum

3. Cole o CSS

4. Guarde as suas alterações