/* BUBUBU – mobilný pás pre sekciu „Barefoot poradňa“.
   Iba titulka a iba malé mobily; tablet a desktop nemení. */
@media (max-width: 640px) {
  /* Po presune poradne odstráni iba jej pôvodný prázdny Shoptet obal. */
  body.type-index
    .homepage-box.middle-banners-wrapper.bb-stories-source-empty {
    display: none !important;
  }

  /* Fallback, ak sa Shoptetov obal vytvorí alebo obnoví mimo okamihu,
     keď ho sleduje JS. Promo 825 patrí poradni; obal sa skryje iba vtedy,
     keď už samotnú .bb-stories neobsahuje. */
  body.type-index
    .homepage-box.middle-banners-wrapper:has([data-ec-promo-id="825"]):not(:has(.bb-stories)) {
    display: none !important;
  }

  body.type-index .bb-stories {
    /* Nadpis a úvod zostávajú v pôvodnom bezpečnom odsadení titulky. */
    padding-right: 14px;
    padding-bottom: 12px !important;
    padding-left: 14px;
  }

  /* Plynulejšie nadviazanie nasledujúceho bloku „Každá noha je jedinečná“.
     Pôvodných 50 + 58 px medzi sekciami znižujeme na 12 + 16 px. */
  body.type-index .bb-values {
    padding-top: 16px !important;
  }

  body.type-index .bb-stories__inner {
    padding-right: 0;
    padding-left: 0;
  }

  /* Namiesto štyroch vysokých kariet pod sebou vytvorí posúvateľný pás.
     Prvá karta je celá a pri pravej hrane je vidieť začiatok ďalšej. */
  body.type-index .bb-stories__grid {
    display: flex;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 0 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
  }

  body.type-index .bb-stories__grid::-webkit-scrollbar {
    display: none;
  }

  body.type-index .bb-story-card {
    flex: 0 0 84vw;
    min-width: 0;
    scroll-snap-align: start;
  }

  body.type-index .bb-story-card__media {
    aspect-ratio: 16 / 9;
  }

  body.type-index .bb-story-card__body {
    min-height: 0;
    padding-bottom: 22px;
  }

  /* Na mobile CTA patrí hneď za text, nie na dno vysokej karty. */
  body.type-index .bb-story-card__link {
    margin-top: 0;
  }
}

/* Biele pozadie poradňe – mobil aj desktop. */
body.type-index .bb-stories {
  background: #fff !important;
}