/* Bezpieczny Tag - wersja mobilna: sekcje kafelkowe jada w bok zamiast w dol.
   Dziala na stronie glownej i na karcie produktu. */

@media (max-width: 760px) {

  /* ---------- pas przewijany palcem ---------- */
  /* UWAGA: sekcja "Wiecej swobody" (.bt-swb__cards) celowo tu nie wchodzi -
     ma wlasny, dzialajacy uklad mobilny w bt-swoboda.css */
  .bt-syt__grid,
  .bt-syt__photos,
  .bt-inf__grid,
  .bt-jak__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    /* bez tego pas rozpycha swojego rodzica do szerokosci wszystkich kart razem */
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .bt-syt__grid::-webkit-scrollbar,
  .bt-syt__photos::-webkit-scrollbar,
  .bt-inf__grid::-webkit-scrollbar,
  .bt-jak__grid::-webkit-scrollbar { display: none; }

  /* karty tekstowe */
  .bt-syt__grid > *,
  .bt-inf__grid > * {
    flex: 0 0 83%;
    max-width: 340px;
    min-width: 0;
    scroll-snap-align: center;
  }

  /* kafle ze zdjeciami */
  .bt-syt__photos > * {
    flex: 0 0 74%;
    max-width: 300px;
    min-width: 0;
    scroll-snap-align: center;
  }

  /* kroki "Jak to dziala": strzalki laczace znikaja, zostaja same kroki */
  .bt-jak__grid > svg { display: none !important; }
  .bt-jak__grid > .bt-step {
    flex: 0 0 83%;
    max-width: 340px;
    min-width: 0;
    scroll-snap-align: center;
  }

  /* ---------- wspolne tlo: mniej ozdob za tekstem ----------
     Na telefonie kolumna tekstu zajmuje caly ekran, wiec kazdy ksztalt
     w tle laduje pod literami. Zostawiamy same pierscienie przy krawedziach,
     wyraznie sciszone. */
  .bt-sky__star,
  .bt-sky__dots,
  .bt-sky__disc { display: none !important; }
  .bt-sky__ring { opacity: .45; }
  .bt-sky__ring.r1 { right: -34vw; width: 56vw; }
  .bt-sky__ring.r2,
  .bt-sky__ring.r4,
  .bt-sky__ring.r6,
  .bt-sky__ring.r8,
  .bt-sky__ring.r10 { left: -36vw; width: 58vw; }
  .bt-sky__ring.r3,
  .bt-sky__ring.r5,
  .bt-sky__ring.r7,
  .bt-sky__ring.r9 { right: -36vw; width: 58vw; }

  /* ---------- kropki pod pasem ---------- */
  .bt-msw-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
  }
  .bt-msw-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #C4DAF1;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .bt-msw-dots button[aria-current="true"] {
    background: #1E9BF5;
    transform: scale(1.3);
  }
}

/* na wiekszych ekranach kropki nie maja sensu */
@media (min-width: 761px) {
  .bt-msw-dots { display: none !important; }
}